GUI Design Patterns for Mobile

GUI design patterns for mobile are simple solutions to common design problem such as navigating around an app or providing feedback to users. It is worth noting that most mobile applications and websites have unique design requirements as compared to their desktop counterparts.

GUI Design Patterns for Mobile

Progressive Disclosure Design Pattern

This is a creative design that is mainly used to hide features that are deemed not relevant to the user. By hiding infrequently used features, the user interface is de-cluttered. This enables the user to perform multiple step process without straining.

The goal in this case is to take the user through successful stages by revealing small bits of information at a time. When the user completes a step, the system automatically opens the next step. Sometimes, the previous step may still be visible to the user so that he can change what he entered in case he changes his mind.

A common example of design patters that utilize this school of thought is the “See More” or “Learn More” design. Such a design simply inspires the user to take an extra step to continue exploring the system further.

The Lazy Registration Pattern

Most people hate filling up lengthy details in sign-up forms and this has led to a general out-cry that sign-up forms must die. Well, this does not necessarily mean that sign-up forms should be completely omitted. Rather they should only be one part of introducing the user to a larger system. In fact, sign-up forms need to come towards the end of the process. This sort of arrangement is what most designers refer to as the “lazy registration” approach. In this design pattern, the user is first of all allowed to use the system before making the decision to sign-up. This type of design works well when there is a need to familiarize users with your system prior to them signing up.

The main benefit of using this design patter is that the user is allowed to take a conscious decision having sampled whatever service or goods you have to offer. The shopping cart concept is a good example of this sort of design because the shopper is first allowed to sample the products in the shop before purchasing the product.

Steps Left Design Pattern

This is an ideal design especially when users have to fill in data in multiple steps. Steps are usually arranged horizontally and are (preferably) connected by arrows which indicate the order to be followed. Sometimes, the steps are numbered and given a clear description of what action users should take in that particular step.

The beauty about this design pattern is that it enhances consistency. An ideal “step left” design is one that combines the well-known “wizard” pattern to create multiple steps such as the steps for completing the checkout process or completing a registration form.

The Forgiving Design Pattern

Sometimes, in an effort to simplify things, we might end up complicating them for the user. For instance, if you use too many navigation options, the user might get lost along the way. This is where the forgiving pattern of design comes in handy.

In this design style, the user is allowed to enter data in various formats. In this case, it is the system which is left with the hard job of parsing the data.

To ensure best usage of this design pattern, it is always advisable to provide a short listing of available formats as samples of what the user should do. While this design greatly reduces the work on the user’s side, it piles lots of work on the developer’s side. Moreover, the more navigation options the users have, the more difficult the parsing process gets.

Hover Controls

Another of the popular gui design patterns is the hover option. This one works best when the UI has many elements to be factored in. Take the example of the administration section of web applications which may become cluttered if too many options are added. A nice way to handle this is to hide each element and to only reveal it when one hovers over that particular area. This simple plan works wonders when it comes to de-cluttering the user interface without necessarily removing impairing the functionality of the system.

BreadCrumbs Design

This design pattern shows the path from the front page of the app to the current location of the user. In a nutshell, breadcrumbs normally help the user get acquainted with the structure of the website.

And the best bit about it is that breadcrumbs take up minimal space since they are usually placed atop the main page.

Required Field Maker Pattern

It is important that you make the user interface obvious to the user. This point particularly applies to when you are offering web forms on your app. One of the best ways to go around this would be by getting a required field marker option. The main purpose of these markers is to alert the user of the information they are supposed to fill to complete a given step. This simple strategy helps the user feel that they don’t have to fill out the entire form – and this ultimately boosts the sign-up rate.

A basic rule that works well with the Required Field Marker design pattern is to keep the web page shorter and simpler.

Simple Design Pattern

Simple web form gui design patterns allow just one action either Save, Send or Submit. In short, the user actually knows what action to take because they only have one option. The only downside with this pattern is that sometimes the user may be faced with a couple of decisions to make and therefore find this structure difficult to use.

This con can however be solved by adding secondary options alongside primary options. This can be done by highlighting the primary actions and de-emphasizing on the secondary actions.

Finally

If you are running short on ideas about design patterns, read over these tips and see if any of them can help improve your life. Whether you are designing an app UI for the first time or in need of unique gui design patterns, these ideas will surely help.

You will be able to see more Graphical User Interface examples.

bnr14

Megan Wilson
Megan Wilson is user experience specialist & editor of UX Motel. She is also the Quality Assurance and UX Specialist at WalkMe Megan.w(at)walkme.com
Megan Wilson on sabtwitterMegan Wilson on sablinkedinMegan Wilson on sabgoogleMegan Wilson on sabfacebook