Smartphone UI Patterns

Action Bar


Action bar is an application branded top bar that provides users access to frequently used actions on each screen.

Check out Google I/O 2010 conference presentation Android UI design patterns for a conference presentation about UI design patterns. It features the action bar pattern.

Pattern card

Problem

Mobile application screen real estate is very limited. Generally an application can have multiple actions available for users on a single screen. Introducing buttons for each action can use a lot of space. On top of the space problem buttons can also cause consistency problems between screens and applications.  

Solution

Action bar is a branded top bar of the application that provides easy access to relevant actions on the screen and a shortcut to application's home screen. The action bar can also be used to indicate use's location in the application.






Consequences 
  1. Very easy and fast access to relevant action on current screen.
  2. Easy access to application's home screen by clicking the application logo at left. This paradigm is already well known from web sites.
  3. opportunity to provide branding to the application.
  4. Helps user in navigation by indicating his / her current location in app.

More from this blog

Action Bar Gallery - Part 1
Action Bar Gallery - Part 2
Action Bar Anti-Pattern Gallery
    Omnigraffle Stencil for Action Bar

      Implementing Action Bar




      Action Drawer


      Action drawer is a component that can be opened by the user on top of the application UI by a touch gesture or tap. 


      Pattern card

      Problem

      Some applications need to provide common action to user independent of where user is in the application. For example, music players with their music controls. Trying to design a suitable solution for each screen separately is impossible or at least very difficult. 

      Solution

      Action drawer is a drawer component that can be opened up from a special drawer control to fill the screen and provide the required actions to the users. After opening up and hiding the action drawer user is in the very same state that he or she was before opening the drawer. This paradigm is very easy to understand by users if it is visually implemented correctly. The Action drawer should fill most of the screen still maintaining visual clues that it is on top of the normal user interface.




      Consequences 
      1. Action drawer almost doubles the screen real estate that can be used for controls.
      2. It is a consistent way to provide the same actions to user without having to redesign every screen to incorporate them.
      3. Action drawer is a simple concept for users to understand and it will not cause confusion in user navigation in action stack.

      More from this blog

      Action Drawer Gallery - Part 1



      All posts with label "action drawer"



      Background Process Indicator



      Pattern card

      Problem

      Many mobile apps either handle or show data that they have to fetch over a network connection. All long running tasks should be handled in background processes to avoid making user interface non-responsive. When the application runs these tasks the user should be aware that something is happening and they should also be allowed to cancel the tasks.

      Solution

      A background task indicator visually shows user that something is happening in the background. With any long running blocking process the UI should also indicate how the process can be cancelled.







      Consequences 
      1. User is aware that the app is doing something on the background
      2. User knows how to cancel the task

      Background task indicator implementations
      There are multiple ways to implement the background task indicator. 
      • Action bar
      • Pop-up dialog
      • Notification in status bar
      • Contextual indicator
      • On-screen notification


      More from this blog

      Gallery and more explanations





      Dashboard


      Dashboard a landing page of an application containing large and clear symbols of main functionality and optionally an area for relevant new information.

      Check out Google I/O 2010 conference presentation Android UI design patterns for a conference presentation about UI design patterns. It features the dashboard pattern.


      Pattern card

      Problem

      Very clear and easily accessible navigation to application's main functionality is very important in mobile applications. They are used for short periods of time usually to achieve a very simple goal (post a update to a social network, send a message, take a picture, etc). 

      Solution

      Landing page of the application should visually clear and provide easy access to main tasks user want to do with the application. 








      Consequences 
      1. Very easy and fast access to main functionality
      2. Clear and non-intimidating landing page
      3. User gets clear understanding what the application does best
      4. Opportunity to provide branded first impression
      5. Option to include current information about the application or the application domain

      More from this blog





        All posts with label "dashboard"



        Dynamic List



        Many Android apps use lists components to display large amount of data. Often this data is loaded over a network connection. Using dynamic lists greatly improve user experience over preloading everything and forcing user to wait.

        Pattern card

        Problem

        Loading a lot of data can be very slow especially if the data is loaded over a network connection. When displaying this data to users forcing them to wait for the whole data set before letting them start working with the data can ruin the user experience. 

        Solution

        Instead of waiting for all the data to load it is better to load only the most relevant data and populate it to a list immediately. Then either provide a way for user to manually request more data or automatically load more when user reaches end portion of the previously loaded data.






        Consequences 
        1. User interface is more responsive.
        2. Data loading is non-intrusive.
        3. No non-necessary data is loaded.

        Implementations 

        Endless list
        Most common way this patter is implemented in currently available apps is to start loading new data when user scrolls the list down to the end. Usually the loading is triggered when last ten or so elements are visible. There's no need to wait user to reach the very end. A loading progress spinner is shown at the end of the list to indicate loading process.

        CommonsWare endeless list adapter is a neat open source library that can be used to implement the endless list. This StackOverflow question also has an example piece of code that can be used.



        Pager
        Engadget app uses paging instead of long lists. This requires users to tap on the next label to trigger loading of more articles. A pop-up spinner is shown while the app loads more content.




        Pull to refresh
        In some cases new elements should be loaded at the top of the list instead of end. A good example of this is the twitter app. Latest tweets are loaded when user pulls down the on the list while it is fully scrolled up.

        Android-pulltorefresh is an open source library that can be used to implement this kind of functionality in a list.




        Elsewhere in the web

        CommonsWare endeless list adapter open source library.
        StackOverflow thread about endless list including example code.
        Android-pulltorefresh open source library.

        More from this blog




        Quick Action Menu




        Quick action menu is a pop-up-like context menu that presents actions that can be performed on an object on screen. The menu includes container with an arrow indicator and scrollable list of action item icons.

        Check out Google I/O 2010 conference presentation Android UI design patterns for a conference presentation about UI design patterns. It features the quick action pattern.

        Pattern card

        Problem

        User can often perform more than one action on objects on screen. Presenting these actions to user on small touch-screen displays can be difficult. Simple pop-up menus usually cover relevant parts of the screen and cause user to lose context of his or her action. 


        Solution

        Quick action menu provides a unified way to present actions that can be performed on an object. It consists of three components. 1) Click target that user can identify as the object that he or she can interact with. Taping this target will open the quick menu pop-up menu. A very good example of this is the contact icon in various default Android apps. 2) Pop-up action container that also indicates which screen object the presented actions are related to. This container should not cover the screen object in question. 3) Action icons representing all available actions. Only actions that make sense on the current object should be presented. If not all actions fit the screen he action bar can be scrolled by dragging.


        Consequences 
        1. User can easily perform relevant actions on a screen object.
        2. This solution saves a lot of screen real estate compared to presenting these actions on-screen.
        3. User doesn't lose context when this pop-up is opened.




        Workspaces
        [UPDATED: renamed pattern from "scrolling tabs"]

        Workspaces is a horizontally scrolling composite component that consists of tabs and data container, usually a list. This component provides easy navigation between a lot of data that is hierarchically on the same level.



        Pattern card

        Problem

        Displaying a lot of data and user navigation between the data is not simple on a small smart phone screen. 


        Solution

        Workspaces allows easy navigation between multiple composites of data. Navigation between the data sets is done either horizontal swiping to move between adjacent categories or if tabs are available by taping on the tabs. If all the tabs do not fit on screen the tab bar should be separately scrollable to allow users to browse all available categories of data.





        Consequences 
        1. Easy navigation between a lot of data.
        2. Clear indication of available data categories.


        More from this blog
        App examples and implementing Workspaces
        Scrolling Tabs Gallery - Part 1

        Subscribe to: Posts (Atom)