Examples of Mobile Design Pattern: Part 2

This entry is part 2 of 3 in the series Mobile Design Patterns

Mobile Design Patterns

Introduction

In the first article of this mini-series dedicated to Mobile Design Patterns, I gave a brief overview of what they are and the importance of their implementation in any well designed mobile application.

Besides, I tried to show, through the study of one of the best known and most downloaded applications available in the marketplace, Pinterest, some of the patterns that should be considered in order to make your users’ experience pleasant and easy.

In it, I’ve outlined some useful tips and tricks for better organization of forms, galleries and search functions.

In this new article we’ll look at user invitations and underline the importance of suggestions and feedback for users who interact with a mobile application.

Example of Mobile Design Patterns: Invitations

How many times have you downloaded a smartphone application and, at the very first, not understood what to do to proceed? It’s happened to me quite often and, failing to exploit the potential of the application (however valid and useful it may have seemed to me), the only thing to do was to uninstall it and choose another app with more or less the same features but able to be approached more intuitively.

Intuitiveness: this is one of the key concepts behind the design and development of a mobile application.

On those occasions when you have personally been faced with an unintuitive interface and not known what to do, what would you have needed to avoid closing and deleting the application? A simple and clear suggestion that would lead you to the intended functionality. An invitation. So, from your experience as users then and as developers now, don’t you think that this little trick will be useful to hold on to your users and make sure that they do not uninstall your application after the first start?

At this point, let’s start seeing how we can improve our users’ experience with invitations.

Patterns for invitations are several and should be selected thinking about the contents of the application, your taste and, most important, the possible preferences of the targeted users. Among the most widely used patterns we find dialog boxes, tips, tours, and video demos, but there are other equally effective patterns that can influence an intuitive response, such as transparency, persistent invitations and others.

The most common and widely used are the “dialog box” pattern and the “tips” pattern, which give first instructions and are removed when the interaction starts. I have no chance in this article to dwell on examples of all patterns for invitations, so I decided to analyze the ones I think are more interesting than these two just described.

Tours

Tours are used to highlight the main features of an application, with particular attention to the users’ perspective. Also in this case, Pinterest app offers us a valid example of this pattern.

Pinterest tour

As you can see from the image above, you can access the tour through a menu item and, once done, it allows us to understand, in three short and simple steps, what to do with the application and which buttons to use to interact with it. The Pinterest tour is characterized by concise copy, vivid graphics and easy navigation.

Persistent invitations

Persistent invitations remain visible on the screen. This is the case of the message inserted in the “Saved Searches” section of the Ebay app where there’s always a message which suggests to users what to do, that is “Tap the clock icon to receive daily notifications when an object matches the saved search” (in the screenshot, it’s in Italian, sorry!)

Ebay invitation

Even for this type of invitation, the message has to be short, clear, preferably of a different color and size text and with some visual cues.

This is exactly what is done in the home screen of one of the most popular and downloaded games of recent times: Fruit Ninja.

Fruit Ninja

At the top left, under the logo, you find the invitation “Slice the fruit to start” which is persistent and won’t disappear after the first start of the game; moreover, a few seconds after you launch the app, the image of a little hand which suggests you to “slice” the game icons to go on appears and dispels all doubts.

Discoverable invitations

This is the most common pattern used for prompting a data refresh; in fact, this kind of invitation is discovered when a common gesture such as swiping or flicking is performed.

Think about Facebook, Twitter or Google+ home screen: we’re now all accustomed to pulling down to refresh the page and load news on our profiles but how did we get used to it? Simply by doing it, with no clear message.

discoverable invitation

Transparent invitations

This is a pattern typically seen on home screens and it deals with a seethrough layer positioned over the screen provid content to rapidly and visually explain how to move in the app and which is removed when the screen is touched and the interaction begins.

Transparent Invitation

This is the case of the ES File Explorer app in which the instructions “Press”, “Press and drag”, “Zoom” and “Slide” with their associated icons, disappear when the user taps on the screen.

Examples of Mobile Design Pattern: Feedbacks

According to Larry Constantine and Lucy Lockwood “Feedback Principle” (included in their list of “Principles of user interface design“)

The design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.

What does it mean? It means that users have to know and see the results of their interactions with the mobile app they’re using. Regards to this field, there are three important examples you should consider: error messages, confirmation and system status.

Error messages

Error Messages

This messages should be always clear and indicating the problem (possibly also suggesting a solution). One example is Groupon error message which appears if the user has not inserted a valid email address or password (in this case the request is for a valid email address).

The tip is to make the error as visible as possible with colorful in-screen messages instead of modal dialogs.

Confirmation messages

One important thing to remember is that confirmation messages shouldn’t ever obstruct the flow of the page, so be sure to provide a confirmation message when an action is taken but don’t break the users’ flow.

Confirmation Messages

The registration form of Instagram provides us with an excellent example of this pattern. When a user chooses a name, if the name was available the corresponding icon would become green while if it was not, the color would be red. This is a great system to make the confirmation process faster and more intuitive, using conventions that have been consolidated over time.

System status

For system status notifications, you can use messages, progress bars, animated indicator or a combination of different elements. Don’t forget to include a cancel button to stop long operations: users will really appreciate it.

Conclusions

In this article you’ve seen, through some examples of more or less known applications available in the marketplace, which are the most common mobile patterns used to give suggestions, make invitations and provide feedbacks. In the next, and last one, you’ll discover the most common anti-patterns and understand why and when to avoid them.

Mobile Design Patterns

<< Examples of Mobile Design PatternsExamples of Mobile Design: Anti-Patterns >>

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Wiltshirealan

    You have to be kidding me! Did anyone try to read this article about mobile design patterns on a mobile? I got as far as the Pinterest image and gave up.

    • Anonymous

      Why? What’s the problem for you? Looks fine on the four mobile screens I’ve checked.

  • Steve

    Article looked fine on my iPhone 3S. The only problem I encountered was slow loading of the Pinterest and the Fruit Ninja (never fully loaded) images (AT&T 3G).

    Interesting article, thanks.

  • Anonymous

    I’m having a hard time understanding how these are design patterns. As stated in the first article: “A Design Pattern has four basic components, that is: a name, the problem it aims to resolve, the proposed solution and the consequences and trade-offs of its application.”
    I’m used to design patterns like Facade or Command. While these are some good examples of ways people have done something (Pinterest mostly), I would like an article (series) that follows the definition. “name:Persistent Invitation Pattern, problem: Keeps Invitation on screen to keep user from having access until completed, method: Requires modal window with means to fill in form and complete, or cancel and return to standard landing page rather than protected page, consequences: may cause user to leave site.”
    Again, nice article and examples, but nothing I can use as a pattern as written.