The first question to ask is, what does the term ‘modal window’ mean? Well, a modal window is an interface which stops a visitor from communicating with an application until after they have already shut down the window.
This type of feature is usually avoided by user interface designers, as they can hinder the progress of visitors or push them into carrying out behaviors which they would not normally choose.
Moreover, contemporary operating systems have conditioned users to intuitively and immediately disregard dialogue windows – visitors either fail to engage with modal dialogue windows at all, or they feel bewildered by their appearance.
The problem with modal windows
For you, a model interface could represent the benefit of extra screen space or web ‘real estate.’ It offers a practical approach to providing contextual data, messages, and other functions which are pertinent to the screen in question.
Then again, this feature has the potential to feel like a trick or a cheat which you have had to carry out in order to push more data onto the webpage. There are the two most dramatic attitudes towards model interfaces and it tends to be the case that visitors get stranded in the center. They can be really rather puzzling if you have never encountered them before.
Yet, at some point, modal dialogues incorporated themselves into modern web design. We are now very familiar with this kind of feature appearing out of nowhere, even on optimized smartphone screens.
In light of their invasive nature, it is perhaps surprising to find that there are, as yet, no more efficient methods of creating and implementing modals on mobile devices which do not take away from usability levels.
On the whole, it is true that modal overlays tend not to function efficiently on tablets and smartphone devices. They do take time and patience to design; it takes a lot of skill to solve the varying phone operating options and find a fix for any existing dysfunctions. They must also be well-maintained if they are to link back naturally to the master page.
A lot of applications fail because they were never created to the right dimensions in the first place (especially in regards to smartphone resources), or the interface bounces around and looks unclear as it first emerges – this can mess with the location of the close function. Plus, the process of viewing can be tricky if visitors are utilizing an onboard keypad.
In most cases, the keypad will emerge too high and conceal a good proportion of the screen itself. This can end up with visitors having to navigate in an unnatural fashion, just to get a look at what they are writing.
To allow visitors to access your data in a relaxed and casual manner, try to stay away from the need to use modal interfaces on mobile platforms. If necessary, utilize an inline accordion as an alternative.
Stop it. Really.
Image source: Chris Johnson
It is almost always possible to avoid having to push visitors towards performing unwanted functions. As a consequence, modal interfaces can end up incorporating unwanted sources of frustration and annoyance for visitors.
If possible, and as an alternative, you are advised to try and design a modeless user interface. This is a kind of interface which will enable your visitors to alter their choices at any juncture. Your visitors should never be pushed towards behaviors which they are not happy with.
It is important to note that modal interfaces tend to function poorly on smaller devices. They consume a great deal of screen proportion, because they incorporate extra user interface components.
For example, if the screen is very little to start with, the data contained within the modal interface will, naturally, come out even tinier. This is a problem if the data does not match the interior of the screen and you have to present scroll-bar functions.
The typical nested scroll-bar function operates poorly on mobile machines as well, because users always want to have the ability to move the entire screen by simply gesturing their fingers in a particular way. Okay, so if modal interfaces represent a degradation of user experience, it is reasonable to think that they would not function smoothly on mobile machines either.
A solution
The typical inline accordion feature presents the data within the webpage – what it does not do is overlap it across the top of other pages in the way a modal interface would. This is useful, because it stops the sort of window location and movement problems which visitors tend to encounter when confronting modal windows in mobile.
Plus, visitors do not have to worry about dropping the context, as the inline accordion launches right on the same webpage. The difference between this and a modal is the fact that the modal removes visitors from the situation, in order to take up more of the screen. The inline accordion functions by folding a panel underneath it as soon as a visitor hits the right button.
If operating correctly, the panel area will be completely presented within the mobile screen – this stops the visitor from encountering issues with obscured accessibility or dysfunctional page movement. The button itself should be clearly marked so that visitors are instantly aware of what they have interacted with. If possible, it is a good idea to give it a small X indicator, so that visitors can shut the panel down as standard.
It is important that you do not make it a chore for visitors to communicate with your modal interfaces – you can swap out inline accordions for modal windows in mobile, in order to make sure that mobile optimized content functions correctly.
The ideal time to use them
Loading messages
Image source: Aaron Stump
There will be times when a visitor hits a button function and your application will kick start an intensive process behind the scenes. For the visitor, it might not be clear that anything is occurring at all – some will hit the button a second time, because they assume that the first time was dysfunctional. You can prevent this by offering a modal interface which contains a kind instruction to be patient.
Error messages
Image source: Muharrem Şenyıl
One of the most popular uses for modal dialogues in mobile can be found in the error messages which appear when a visitor carries out an action that the website cannot handle. For instance, they might attempt to get rid of a piece of work which is still open at another location – if this is the case, the work cannot be moved to the trash.
Warning messages
Image source: Mariusz Ciesla
It is possible to utilize modal dialogues to alert visitors when they are on the verge of carrying out a potentially harmful function. For instance, if a visitor attempts to get rid of a piece of work which is still in use (as described above), the application can be made to query, ‘Are you sure that you want to carry out this action?’
Yet, this can be tricky in itself as many visitors now automatically disregard popup messages like these ones – they often do not even try to engage with them. To fix this, provide a chance to reverse an unwanted function or to force a timeout.
Ending thoughts
Image source: Joey Lomanto
For mobile screens, modal interfaces are not the best option – they present a number of scrolling and location challenges, which result in decreased user experience. They tend to be based on JavaScript and this means that, if ease of use is vital for your website, there is bound to be a proportion of your users who will actually never encounter them at all – they might never come across the data which they provide either.
Image source: Joris Rigerl
If you look at them from the viewpoint of features, they can appear to be quite sophisticated. Unfortunately, this is about the extent of their appeal. If you are creating and nurturing a mobile friendly website or application, there is usually a much better option than modal interfaces.
You will definitely like these articles
Source: http://ift.tt/1hOjMw3
No comments:
Post a Comment