20
Jul
This entry is part 1 of 3 in the series Mobile UI Design Pattern

The user interface plays one of the most important roles in determining how successfully you can attract and retain the users by making the UI easy to use, efficient and enjoyable. With decision making being increasingly influenced by the online medium, it’s scope is extended to mobile internet. So, it is required to enhance the user experience by developing user friendly interfaces for the apps on the go.

We all are well aware of what all features will be available on the mobile version of a product at hand.  But we are usually not sure about how to arrange them on screen(s), or decide on what framework controls to use to optimize the full potential of a particular product feature. At the end, the most important thing that must not be lost in the process is the simplicity, elegance and the vision, which invariably determines the success or failure of the application i.e. the application rank  in the market(read: popularity).

A good user experience is critical to any application, more so for mobile applications. A good UI will lead to better quality and user experience, eventually translating to popularity and profits. In such a scenario where the users are of utmost consideration in the design and planning of your application, a clean user friendly, simple and yet an innovative UI might just turn a whole lot of users to your application.  Doesn’t it sound appealing as to how something as simple as the aesthetics of an application can do?

Now, this is what we call as “Need of the hour”-But here comes the problem, does anyone know – what is a good UI? How should it look? What should it do? What should it not do, not contain!!!

In such a scenario where you know the problem but not the apt solution, it is always good to have a quick research on how others  got it right.  Abstraction of the problem statement and its respective solution when accepted by a community becomes a pattern. Earlier we had Design patterns for solving design problems of application architecture. “Evolution happened in UI” and now we have a similar set of patterns for the UI. Patterns have emerged as a natural by-product of the design process. Like Software Design Patterns, they too provide a solution to a common/recurring problem. Developing a good and an effective UI requires usage and understanding of these Design Patterns. The best of applications, , are focusing on the use of these design patterns including Twitter Apps, Facebook apps etc.

In this article I shall mainly be discussing these design patterns along with their applications and advantages in use for Android applications and in subsequent ones we shall have a look on how to go about actually creating them.

Dashboard

It has been used in applications even before it was officially introduced as a design pattern. For example, Facebook application has been providing a dashboard of its key functions before it was officially recognized as a design pattern. The Dashboard can be used in apps to highlight the key features of the application. In essence, it is an introduction to the application.  It can be used to reveal new content and capabilities to the user. The dashboard typically occupies the full screen to ensure that it stays out of the way, i.e. the user’s attention is not diverted to any other aspect of the screen/app. The Dashboard may be organized as:

  • Accounts
  • Features
  • Categories

The secondary functionality may be reserved for the Menu options. Thus by making the most common/important operations visible, it ensures that the right things are made visible to the user.

The Good

  • Highlight key features to user
  • Provide one stop access to all the major functions
  • Draw user attention to new capabilities or features introduced
  • Easy navigation around the app.

The Bad

  • All features cannot be represented on the dashboard
  • Some lesser known features not represented, may not get the desired user attention
  • Some represented features may not actually interest user, leading to loss in popularity.

Quick Actions

Quick Actions are basically actions/functions in a popup bar that are triggered by specific visual elements/buttons/items on the screen. They have minimal disruptive influences on the screen context. Quick actions ensure that the screen is not cluttered too much with icons and buttons, and at the same time these options are available to the user only when required. They are very straightforward, can be fast and fun to use. Only the most important and obvious options must be presented in the quick action view. When Items have competing internal options, quick items are typically used. In case of contexts that can/may have multiple selections, quick actions must not be used.

The Good

  • Uncluttered screen, free of too many icons and buttons
  • Minimal disruptive influence on the screen
  • Ensures that key functions can be present when needed
  • All operations/functions common to multiple items on a given screen can be placed in quick action bars.

The Bad

  • It cannot be used if context allows multiple options to be selected at once
  • Operations in the quick action bar are specific to one activity only.

Action Bar

The Action bar is typically located at the top of the screen, used to provide support for all the operations that are frequently used in the application and common to all aspects of the application. Navigation options are also provided in the action bar. It may include a home option to return to the dashboard activity or the main screen. It typically replaces the Title bar in an application. The action bar may be used to bring key actions on screen. Commonly used options present in the action bar include:

  • Search
  • New
  • Refresh
  • Stop
  • Back
  • Forward
  • Undo/Redo etc.

The Good

  • Uncluttered screen, free of too many icons
  • Easy access to key features at all times
  • Easy navigation
  • Indicates current location/state of the app.

The Bad

  • It is always present on top of the screen, taking up valuable space
  • It cannot include all functions of the application, jus t the important ones
  • Too many options (>5) in the action bar might make it clunky and heavy.

Thus ,we can summarize that the design patterns is the need of the hour which  will go a long way in providing a unified and consistent methodology for developing UI’s that will create a lasting impression on the users.

Keeping these fundamental points in mind while designing any user interface, you can get a kick start to your dream to develop the most user friendly interface.  But what about the design patters for Dashboards, Quick Actions and Action Bar?  I am looking forward to soon share these design patterns. So stay connected to have an interactive information sharing.

For more information, you may want to refer to Google’s session on Android UI Design Patterns

Pradeep Sharma
Pradeep Sharma– Technical Lead – Mobile CoE

Related posts:

  1. Guidelines for Testing of Desktop Plug-ins Overview of a Plug-in A plug-in is a software component that resides in a software application (known as the parent application) and allows users to perform specific, customized activities within the application. Most...
  2. Android UI Design Pattern – Dashboard The earlier post here has covered the importance and the basics of developing a user friendly UI, taking this further we will be presenting to you a detailed view of...

, , , , , , ,

Add reply