Thursday 19 June 2014

How many Modal's is too many? Do user's like windows within windows?

Starting a new web application project from scratch is a great way to re-assess the standard UI elements and structure that leads to how your users interact with the end product. I personally have always wondered how each UI element has been essentially typecast into different roles within the user experience.

Is the modal under utilised in app development?

For example the modal UI element is supposed to only be used for simple confirmation, forms or alerts as they usually operate within a small window and are used to obscure the background information from the user. Why is it that the modal is limited to such use? Is it possible to have an easy to use app that has modals within modals?

Modal's within modal's or is that crazy talk?






It is definitely programmatically possible to have an infinite number of modals nested within each other, the same way you can have an infinite number of pages/views in your app.

So why is having different pages/views considered better?

When you have a new page your user transitions away from the content they previously were connected with and now are focused on the next content. The concept is based around that the user is moving towards an end goal, so showing a modal for each step along the way would clutter the screen but also make it seemingly complicated to back out to the previous step.

Your user's don't want to feel like this is their workspace.
Sometimes, however you might not want to send your user to a new page as they will loose focus on what they are doing. They might be creating an object that has other objects attached to it, for example an order with line items. You might elect to pop up a modal when the user is adding an item to an order as they are still in context with the order. If you were to send them to a new page purely for adding line items they may feel disconnected with the initial order object, by using a modal you are 'nesting' the window within the order object and allowing the user to continue updating the order object.

The other option for this case is to still maintain the connection would be to dynamically update the UI when a user presses 'Add' or 'Edit' line item, so no modal is used and the user still is connected to the object. They are just simply loading in the related content as they traverse the page of the app. This is the best option but sometimes if designing for mobile devices there is not enough screen estate to do so without it looking crowded.

It is a case by case basis where modal's are relevant, (just like with every other design choice) the user is the ultimate deciding factor as they may be more comfortable with having multiple windows on screen at once knowing that with a few closes they are able to get back exactly where they started without changing pages/views.