5 mobile design patterns for a successful app

In this short series of articles about Mobile Design patterns I introduced some of the most common patterns used to fix problems during development. During articles you’ve learned what a design pattern is, its basic components and the best solutions to solve problems with them. Problems such as organization of forms, galleries, search functions and interaction suggestions. You should also have learned why and when to avoid mobile design anti-patterns.

For the conclusion of this series, I’ll outline 5 interface design patterns you should recognize from popular mobile apps and can use in your own projects. They’ll help you in making your design useful and intuitive for users. In particular, I’ll focus on patterns that will help you managing:

. Social sharing
. Notifications
. Popups
. Content updates
. User interaction (swipe, tap, etc.)

Social login

In the article “3 Tips to Make Your Apps Less Annoying”, we discussed how annoying events or occurrences that we don’t expect are. We looked at the example of a game that asks if you want to login with Facebook every time you run it with no way to avoid the question. The use of Facebook made me think about another situation that could be annoying when needing to register for a service, filling in a form.

In an age dominated by social networks, do we need to submit our personal data in such an old fashioned way? The Social login design pattern is an awesome alternative, providing users with a quick and easy way of logging in.

Users don’t have to set up yet another account that they may not need in the future. Instead they can sign up with their existing social accounts (Facebook, Twitter, or Google etc.) and speed up the registration process. There are several other good reasons why you should incorporate this pattern in your mobile app:

. Signing up through an existing social network means the user doesn’t have another username/password combination to worry about.
. Users aren’t forced to type their details into an unfamiliar app they have just downloaded, making the sign up process much easier.
. By allowing users to sign up through an existing social network account, you may have access to some basic data about your users. This can then be used to more effectively adapt your mobile application to users’ needs.

Notifications

Notifications highlight recent activity and actions. We consume lots of information every day but at the same time we are busy and can’t (or don’t want) to spend hours on our mobile phones. We like to do things in the shortest time possible and know immediately if there have been new activities or actions requiring our interest. A good understanding and implementation of design patterns for notifications is crucial.

Mobile applications from many famous companies have implemented this pattern in different ways:

. LinkedIn places a numbered badge on labels with new updates.
. Twitter indicates new activity by placing a small dot at the top of the timeline icon.
. Facebook displays notifications regarding new items in the newsfeed with a popup banner that drops down within the app.

Imitate the solution you like the most and test if it suits your purposes and users.

Popups and Overlays

Popups (also known as overlays) are a programming trick generally used for Internet advertising. They cover the main content without creating a new window. They cannot be blocked by ad blocking software, so the user is forced to see them. Typically this is an annoying situation for users, however there are some cases when information interrupting using the app may help users. For example, users might want to view information without losing their current place in the user interface.

Here the popup design pattern comes to rescue and can solve the problem in several ways:

. The popup occurs when the user performs certain actions or reaches a specific point in the app. It then shows the relevant information/controls associated with that particular action or place.
. The original content or place in the app is still visible in the background, but the popup gives users the option of learning about what comes next.
. The popup gets the users’ attention and provides important notifications where needed. When finished, they can dismiss the popup and return to their previous activity by tapping or swiping the screen.

Content Updates: pull-to-refresh

As regular users of social networks such as Facebook, Twitter, or Google, a gesture we all find natural now is to pull down from the top of a feed to reveal new content. The first company to use this design pattern was Apple and since then it has been widely used.

The pull-to-refresh pattern can be applied when you need to show a list of items that is not static but dynamic and you don’t automatically refresh this content. It is a natural consequence of scrolling to the top and once the refresh is completed, the new items are shown at the top. It is a useful pattern because it saves space (you don’t need a button) and it’s easy to discover. Adopting this pattern to update content is not the only way it can be used, it can also be utilized to load earlier items in a list of messages, photos or profile updates.

User interaction (swipe, tap, etc.)

After the pull-to-refresh gesture, swiping is another common gesture on smartphones. Some apps allow you to swipe left or right on a tweet/post to get more details or perform other actions. It’s a creative solution contrasted with typical web applications that rely on mouse clicks.

There are a plethora of mobile applications for Android and iOS which handle swipes, taps and other specific user interactions and you should try to take advantage of these in your projects. Every application has a different purpose and value to its users. Plan your ideas early in the wireframing process before taking the app into design or development. Take time to consider users’ feedback, suggestions and criticisms during the testing process.

Source : http://www.sitepoint.com/