1

I need to create a modal dialog (one that comes form the system) which asks for the license key and when confirmed there should appear a verification icon to indicate progress (although this would not take long - but users need feedback in case of lack of internet connection and so on, right?). So where do I provide this verification icon? I don't think I can put a window on a modal window and I can't put verification progress bar/icon inside a modal window either.

Similar solution would apply when I need a modal window asking if the user is sure to abort a process and then there should appear a progress indicator of aborting/cancelling this process.

What do I do?

Ola Osinska
  • 722
  • 5
  • 14

1 Answers1

1

For Web Apps (without modal): A custom control as shown in the mockup will solve your issue. With this, modal window is not required to show the status of the loader. Also, cancellation buttons could be given at the right most side. And the most important point is that, The loader is visible always, even if the user scrolls or navigates away. enter image description here

For Web Apps (within modal) There are many references to add loader within the modal window, i.e before the user is taken to the website. One thing to keep in mind is that, you should keep the user occupied with cool loaders or animations such as: https://media.giphy.com/media/8RyJliVfFM6ac/giphy-downsized.gif so that they donot get bored within 4 seconds. Please check these examples too.

enter image description here enter image description here

Kish
  • 2,587
  • 12
  • 36
  • Hi, thanks for your answer, @KiszanPankaj .

    I should've probably stated that this is about a desktop application. I think your solution was for mobile? If so, I think it does not apply here

     – Ola Osinska Jan 17 '18 at 12:08
  • No, It is the same for desktop applications also actually. I just did not increase the width of the wireframe as i thought you would get the basic idea. – Kish Jan 17 '18 at 16:00
  • Ok. However, I'm sorry, I just don't understand how your idea would apply to a desktop application. If you could be so kind and sketch the way that it would look like on desktop, I would really appreciate it. Because now I don't really get what parts are visible when the indicator appears, what happens to the window (does it go away, is the indicator covering it, is the indicator on the window as a small part of it) and so on. I am on my learning path, so that's why I'm asking those perhaps basic questions :) – Ola Osinska Jan 17 '18 at 17:26
  • @OlaOsinska I think i should have done it beforehand, sorry. I will edit and update the answer in a while. – Kish Jan 18 '18 at 06:08
  • Thanks for another example :) However I still don't feel it satisfies my needs. Imagine I have a desktop application (not a Web one, but that does not matter that much), which shows me a modal dialog to insert license key and I can't proceed without it (I mean besides just quitting the app). So what I am asking is how do I show a verification process/icon within the modal dialog or anyhow differently. Because I can't get rid of modal to show the progress bar in the app, because the verification process itself is there to validate if it can let me through to the app in the first place ;) – Ola Osinska Jan 18 '18 at 09:04
  • But.. this option was made only because you have said like this: "I can't put verification progress bar/icon inside a modal window either." :- by which, the inference is that you cannot have the progress bar in the license key entering modal window. Otherwise there is always simpler solutions. – Kish Jan 18 '18 at 10:27
  • Ok, I wrote this because that's what I honestly thought - I thought this is not a good practice, as I don't think I've come across something like that. So I meant it like "there's no guideline for that" and not "the client doesn't want it" :)

    Could you then show me a way to present this verification process or an icon within the modal window if it's something that I can do? I really struggle with it, I still haven't come up with a solution.

     – Ola Osinska Jan 18 '18 at 11:25
  • Updated answer. – Kish Jan 18 '18 at 13:24
  • I think there's some misunderstanding between us :) It's a desktop app, not a Web app. I think there's a difference. – Ola Osinska Jan 18 '18 at 14:04
  • Sorry, I missclicked. So I have a desktop, than an app open, which is faded, because there's a modal dialog in it that needs the license key inserted. So I already have 2 windows. And then I "Send" the key and I need this validation/verification now somewhere there and I would really like to avoid adding a 3rd window (verification process window) to that. And I don't know the solution. Should I show the icon somewhere near the button and disable the button? Or am I doomed to that 3rd window? – Ola Osinska Jan 18 '18 at 14:10
  • No you neednot need a 3rd window. That's what im trying to explain here. You just fade out the licence input controls and pop up some loaders as shown, in place of the license key input section, In the same window (2nd) – Kish Jan 18 '18 at 17:21