A closer look at mobile interface templates

Recently it happened that we had to start a new Internet project, but all of our experienced designers at that time were busy with other projects. Because we mainly specialize in the development of commercial programs, not all of our experts are well aware of the subtleties of the design of mobile sites. Therefore, I conducted a detailed master class with a large number of screenshots and slides.



These 70 templates are illustrated with hundreds of application examples for Apple, BlackBerry, Android, Symbian, Windows and WebOS operating systems that will be published by O'Reilly Media as the Mobile Design Pattern Gallery. Below is one of my favorite chapters - Invitation.

')

* Despite the fact that these templates are focused on the development of mobile applications, they can also be used when working on a mobile website.

Invitation

Do you remember how you first used Photoshop? I remember when I first opened this program and saw a gray field and a huge set of powerful tools.







Well, I guessed that the tools were powerful, but I didn’t know about it. Honestly, I didn’t know where to start. But at that time money was paid for the program and I needed to study it for work. That's why I bought the book “Learn Photoshop in 24 hours” and started to figure out what was happening.



Quickly squander a decade ... Created hundreds of thousands of applications that are easily available for download. In each category there are a lot of options for programs that duplicate functions. Many of them are free, which allows you to quickly change the application, if its interface seemed complicated.



Consider the initial experience with Layar Reality Browser, an augmented reality browser.







What could help me get augmented reality instead of a simple gray screen? Invitation. These are the hints that the user sees when he first opens the application or gets into a new place. Invitations open to the user the possibilities of the program, they can also change the first negative user experience to a good one.



The following are the invitation templates:

Dialogue

A simple dialogue with instructions is the most popular among invitations in mobile applications, probably because it is programmed very easily. At the same time, this type of invitation is most often ignored.



Avoid long, complex conversations, and also make sure that the user can receive instructions while being in the program itself.

hint

This type of invitation can be placed anywhere in the application, which often makes it most consistent with the content. Also the advantage of this approach is that it can be used on the screen of any mobile device, and not only on the big screen of a desktop computer. In the eBay application, a hint is used to draw the user's attention to the function “save search query”, which may be invisible to many, because it is located where the page title is usually placed. The Android OS shows the Windows Clippy hint to make it easier to set up your home screen.







According to the way the user makes successive steps while shopping, the following hints are opened to him.

Tour

The tour allows you to get the maximum number of invitations, offering to study the application “screen by screen”, “function by function”. The Nike GPS application tour is a good example of such a pattern. The tour is optimized for mobile devices, bright graphics, simple navigation, and the exit is clearly marked, which is impossible not to notice. The tour starts on the home screen and by selecting it, the user can view all 7 tips at once. Nike, as well as CalcBot, used indicators for counting pages (2 of 7), so that the user can clearly see at what stage of the tour he is and how much is left.



The tour should highlight the key features of the program, be short and visually attractive.

Demo

A demo video may be the best form of invitation for those who rely on specific features, because it is it that demonstrates them in action. Roambi uses this technique to show a wide selection of data visualization, as well as the ability to perform certain actions to optimize the navigation in the application. Goggles made a demonstration that can be viewed via Youtube.



Demonstrations should illustrate key features and show how to use the program. Common video controls, such as pause, volume, the ability to expand and collapse, must be present.

Slide

While other templates work on all mobile devices, this invitation only works on touch screens. Usually located on the "home" screen, the slides are a message on a translucent background that is above the actual content. Pulse and Phoster use this type of pattern to quickly and visually explain to the user what functions their application can perform.



Make sure the slides are closed as soon as the user touches the screen.

Built

Unlike other templates, this type of invitation does not precede the screen to which it refers. He, as it were, "built-in" in the screen. Many applications that deal with the addition of data, use the built-in template so that the user immediately began to make entries.



On one screen there may be several built-in invitations. Your task is to clearly separate them from other information using images or other visual cues (that is, do not use the color and size of the text used for general information in the application for invitations).

Constant

Such invitations are also “soldered” into the screen and are always visible. Using the example of Jamie Oliver Recipes, you can familiarize yourself with how the application prompts the user to switch to landscape mode in order to open additional functions. No matter how many times a user has used the program before, he will still see these invitations. The Spring Pad app uses standing “+” invitations to notify the user of the possibility to add more entries.



Be brief. Your task is the same - to clearly separate them from other information using images or other visual cues (that is, do not use the color and size of the text used for general information in the application for invitations).

Hidden

Hidden invitations may, at first glance, look like a paradox, but this is an effective way of pushing for certain actions, and it does not clutter up the screen. This type of invitation is intended to be shown to the user when he performs certain actions of the same type.



Use hidden invitations sparingly. The most popular example of their use can be the situation when you need to download some data.







Gallery and website of mobile interface templates

Invitations are just one of the types of patterns in the Mobile Design Pattern Gallery book.



Some more useful links with template galleries:

Website , Template Gallery , Blog , Flickr Photo Gallery .



Templates for Android: AndroidPatterns ;

Patterns for iOS: Mobile Patterns , Pttrns ;

Common mobile UI templates: 4ourth .



UPD. Useful service with templates suggested SerGe007 inspired-ui.com



_{This article is also available in the Ukrainian translation .}