August 17, 2012 at 16:33What should Android apps look like?
- Transfer
The Android platform does not have hard recommendations on how applications should look and work. From the very beginning, Google made it clear that they have no plans to start dictating what is acceptable and what is not. There is a set of UI recommendations , but they mainly concentrate on little things like icons, widgets and menus.
Since the launch of the platform, there have been hundreds of different interface ideas, and the look of the applications has been very diverse. Now that the platform has reached maturity and the number of applications has increased dramatically, Android user interface is being formed. Some of the interface features have become common, and some of them have even found their way into the Android SDK libraries. Soon, users will expect more consistent work from applications. Some controls and interaction models will integrate into the Android platform.
In this article, I want to generalize how Android UIs usually work at a higher level. I used to write about many of the principles of the user interface, but they were isolated from the general scheme. Now I want to bring them together to show what I think about how Android applications should look.
The latest version of Android (4.0) was released recently. The release brought with it the largest set of custom platform enhancements than ever. These changes will naturally affect how Android apps look in the future. Some enhancements may be ported back to earlier versions, but not all of them. In this article, I mainly talk about how Android apps look right now. I hope that soon we will see the evolution of the ICS interface, but the fact is that we have about 200,000,000 Android devices with versions from 2.1 to 2.3.
The principle of the “control panel” interface is used in many applications. If your application has more than one core function, then this can be a very good starting point. The dashboard shows the most important features of the application and provides easy access to them.
The control panel is well known to users of Android applications. This is a surefire way to make the user feel at home on the first screen of your application, if it is used correctly.
In fact, Activity appears in many forms, but some features have become very common and users have learned to understand and expect them. The action bar at the top of the screen is a very common and easy to read concept.
The ActionBarSherlock (Jake Wharton) project makes it easy to implement action panels.
Lists are one of the most common components of the Android user interface. Lists are very useful when displaying data, especially if you don’t know how large they will be.
Lists have a drawback. Each element of the list should be relatively small, allowing convenient viewing of the contents of the list. On the other hand, a lot of information on a small site can make it very difficult for users to use the list and search for the elements with which they want to interact.
It’s good that there are some guides on how Android lists work in general. Users are accustomed to certain elements and functions, and if your list works in this way, then it’s much easier for your users to get comfortable.
List screens can use the action bar to display actions that are directed to the entire list. Please note that the action bar on the screen for operations on several list items must be different than when performing an action on one list item.
The list of elements, as a rule, contains text and several graphic elements. Very often there are checkboxes on each element, which can be used to select one or more list items to perform operations on them.
Placing the checkbox on the left in the list item has the following advantages:
Some elements require more interoperability than a simple selection (checkbox) or navigation (clicking). The most common use case for this element is rating management or bookmarking. The only natural place for the secondary control is the right edge of the control. Any other place may lead to location problems.
Aldiko and Google Mail are good examples of apps that use nice lists. Aldiko decided to check the boxes on the right, which visually makes the user interface unbalanced.
Many lists contain items that are downloaded over the network. In this situation, the download process can take a lot of time, and the list cannot be filled as fast as the user scrolls it. In case the user reaches the end of the list, the application should automatically start downloading the following items. The indicator tells the user that the next loaded items will be at the end of the list. Including some types of animation loading, for example, a progress indicator is a good idea. The animation allows users to understand that data is being downloaded.
Android Market and Twitter automatically download several items when they reach the end of the list.
You need to give users the ability to perform operations on one element of the list without having to move to the top of the screen.
Since telephones and tablet computers do not have the function of right-clicking the mouse, the specifics of the “right-click” of touch screens have evolved. A long press on an element makes it clear to the user that he wants to perform an operation on the current element.
There is a user interface model called “quick actions” to display actions on list items. The use of the original graphical approach has largely died out, but the essence remains the same. It is a form of menu overlay that displays a very simple list of actions. Usually three to five. Regardless of how quickly the action is visually realized, keep in mind:
Aldiko, Asto File Manager and Google+ use different visual styles. In all cases, these actions appear with a long press on an element of the screen.
Aldiko and Astro are examples of good design, but Google + breaks the rule of hiding the target element because they use simple pop-ups. I hope they fix this shortcoming in future versions.
If the list contains a checkbox control, then this allows the user to select multiple items. When selecting multiple items, the user can perform actions for all selected items at once.
A common way to handle the actions of several elements is to add a panel at the bottom of the screen, where there are buttons for possible actions immediately above all selected elements. Good-sliding animations add smoothness and sophistication to the user interface. The panel should automatically hide when the last selection is removed or the action is completed.
Aldiko and GMail are a good example of how to work with selected elements. Both applications have good sliding animation when the bottom panel appears. Aldiko also adds a number on the import button, showing the user how many items he has selected. This is a very nice addition, but not in all cases.
For more information on the technical details of working with lists, see the following two excellent series of articles:
Styling Android's Mark Allison:
ListView - Part 1
ListView - Part 2
ListView - Part 3
ListView - Part 4
AndroidDevBlog's Cyril Mottier:
ListView Tips & Tricks # 1: Handle emptiness
ListView Tips & Tricks # 2: Section your ListView
ListView Tips & Tricks # 3: Create fancy ListViews
ListView Tips & Tricks # 4: Add several clickable areas
Many applications, in one form or another, use tabs to help users navigate between pages. Android versions of Honeycomb (3.0) and Ice Cream Sandwich (4.0) have slightly changed the way tabs work and look. My opinion is that we should try to use this innovation in all our applications, regardless of the version on which they work.
I recently wrote about ICS in this article , so I will not repeat the content here. To be brief, the way you move between tabs has changed. If your application uses tabs, then users expect that you can navigate between them simply by swiping your finger.
Good examples of apps that use sliding to navigate between tabs are the Android Market and Google+.
Mark Allison has written several excellent articles on the technical implementation of this topic:
ViewPager - Part 1
ViewPager - Part 2
ViewPager - Part 3
Jake Wharton's project shows how you can work with tabs:
ViewPagerIndicator on GitHub
Android is fast becoming a mature and consistent platform. The appearance and behavior of the application begin to resemble each other, and users begin to expect a certain interaction with the user interface. While there are no official recommendations, a deeper look at the most famous applications gives us a good understanding of what we should do.
Ps article a little dusty, but I think it will be useful.
Since the launch of the platform, there have been hundreds of different interface ideas, and the look of the applications has been very diverse. Now that the platform has reached maturity and the number of applications has increased dramatically, Android user interface is being formed. Some of the interface features have become common, and some of them have even found their way into the Android SDK libraries. Soon, users will expect more consistent work from applications. Some controls and interaction models will integrate into the Android platform.
In this article, I want to generalize how Android UIs usually work at a higher level. I used to write about many of the principles of the user interface, but they were isolated from the general scheme. Now I want to bring them together to show what I think about how Android applications should look.
Ice cream sandwich
The latest version of Android (4.0) was released recently. The release brought with it the largest set of custom platform enhancements than ever. These changes will naturally affect how Android apps look in the future. Some enhancements may be ported back to earlier versions, but not all of them. In this article, I mainly talk about how Android apps look right now. I hope that soon we will see the evolution of the ICS interface, but the fact is that we have about 200,000,000 Android devices with versions from 2.1 to 2.3.
Application Home Screen
The principle of the “control panel” interface is used in many applications. If your application has more than one core function, then this can be a very good starting point. The dashboard shows the most important features of the application and provides easy access to them.
The control panel is well known to users of Android applications. This is a surefire way to make the user feel at home on the first screen of your application, if it is used correctly.
Examples
Application common screen
In fact, Activity appears in many forms, but some features have become very common and users have learned to understand and expect them. The action bar at the top of the screen is a very common and easy to read concept.
- In the upper left corner is the application icon or return to the main screen. When clicked, the user must return to the main page of the application. It is worth noting that the new action panels do not return users to the main page; instead, a transition is made one level up in the menu hierarchy.
- In the middle part of the action panel, the name of the screen and the color of the trademark or colors of the current section of the application will be located.
- In the upper right corner of the screen are icons for the most important actions that can be performed on this screen. At the same time, this part of the screen should contain only actions related to the contents of the current screen. The search function has become an exception to this rule.
The ActionBarSherlock (Jake Wharton) project makes it easy to implement action panels.
Lists
Lists are one of the most common components of the Android user interface. Lists are very useful when displaying data, especially if you don’t know how large they will be.
Lists have a drawback. Each element of the list should be relatively small, allowing convenient viewing of the contents of the list. On the other hand, a lot of information on a small site can make it very difficult for users to use the list and search for the elements with which they want to interact.
It’s good that there are some guides on how Android lists work in general. Users are accustomed to certain elements and functions, and if your list works in this way, then it’s much easier for your users to get comfortable.
Action bar on list screens.
List screens can use the action bar to display actions that are directed to the entire list. Please note that the action bar on the screen for operations on several list items must be different than when performing an action on one list item.
List items and checkboxes
The list of elements, as a rule, contains text and several graphic elements. Very often there are checkboxes on each element, which can be used to select one or more list items to perform operations on them.
Placing the checkbox on the left in the list item has the following advantages:
- We are used to seeing checkboxes on the left side of the elements that we select. This is true for web, desktop, and other mobile applications.
- The checkbox at the edge of the item allows us to create large areas for clicking, which makes it easier for users to distinguish between clicking on list items and selecting one item.
- The graphical component on the left side of the element creates an easy visual hint where one element ends and another begins, which makes it much easier for users to quickly view the list.
Secondary controls
Some elements require more interoperability than a simple selection (checkbox) or navigation (clicking). The most common use case for this element is rating management or bookmarking. The only natural place for the secondary control is the right edge of the control. Any other place may lead to location problems.
Aldiko and Google Mail are good examples of apps that use nice lists. Aldiko decided to check the boxes on the right, which visually makes the user interface unbalanced.
Examples
Endless lists
Many lists contain items that are downloaded over the network. In this situation, the download process can take a lot of time, and the list cannot be filled as fast as the user scrolls it. In case the user reaches the end of the list, the application should automatically start downloading the following items. The indicator tells the user that the next loaded items will be at the end of the list. Including some types of animation loading, for example, a progress indicator is a good idea. The animation allows users to understand that data is being downloaded.
Android Market and Twitter automatically download several items when they reach the end of the list.
Examples
Actions on elements - Long press - Quick actions
You need to give users the ability to perform operations on one element of the list without having to move to the top of the screen.
Since telephones and tablet computers do not have the function of right-clicking the mouse, the specifics of the “right-click” of touch screens have evolved. A long press on an element makes it clear to the user that he wants to perform an operation on the current element.
There is a user interface model called “quick actions” to display actions on list items. The use of the original graphical approach has largely died out, but the essence remains the same. It is a form of menu overlay that displays a very simple list of actions. Usually three to five. Regardless of how quickly the action is visually realized, keep in mind:
- Do not close the selected item! Especially when users perform a delete operation. Users are more confident in their actions if they see the item all the time.
- Show only simple actions. Everything that requires complex interaction is better to process on a separate screen than in quick action.
Aldiko, Asto File Manager and Google+ use different visual styles. In all cases, these actions appear with a long press on an element of the screen.
Aldiko and Astro are examples of good design, but Google + breaks the rule of hiding the target element because they use simple pop-ups. I hope they fix this shortcoming in future versions.
Examples
Actions on multiple items
If the list contains a checkbox control, then this allows the user to select multiple items. When selecting multiple items, the user can perform actions for all selected items at once.
A common way to handle the actions of several elements is to add a panel at the bottom of the screen, where there are buttons for possible actions immediately above all selected elements. Good-sliding animations add smoothness and sophistication to the user interface. The panel should automatically hide when the last selection is removed or the action is completed.
Aldiko and GMail are a good example of how to work with selected elements. Both applications have good sliding animation when the bottom panel appears. Aldiko also adds a number on the import button, showing the user how many items he has selected. This is a very nice addition, but not in all cases.
Examples
More Lists Information
For more information on the technical details of working with lists, see the following two excellent series of articles:
Styling Android's Mark Allison:
ListView - Part 1
ListView - Part 2
ListView - Part 3
ListView - Part 4
AndroidDevBlog's Cyril Mottier:
ListView Tips & Tricks # 1: Handle emptiness
ListView Tips & Tricks # 2: Section your ListView
ListView Tips & Tricks # 3: Create fancy ListViews
ListView Tips & Tricks # 4: Add several clickable areas
Tabs
Many applications, in one form or another, use tabs to help users navigate between pages. Android versions of Honeycomb (3.0) and Ice Cream Sandwich (4.0) have slightly changed the way tabs work and look. My opinion is that we should try to use this innovation in all our applications, regardless of the version on which they work.
I recently wrote about ICS in this article , so I will not repeat the content here. To be brief, the way you move between tabs has changed. If your application uses tabs, then users expect that you can navigate between them simply by swiping your finger.
Good examples of apps that use sliding to navigate between tabs are the Android Market and Google+.
Examples
Mark Allison has written several excellent articles on the technical implementation of this topic:
ViewPager - Part 1
ViewPager - Part 2
ViewPager - Part 3
Jake Wharton's project shows how you can work with tabs:
ViewPagerIndicator on GitHub
Conclusion
Android is fast becoming a mature and consistent platform. The appearance and behavior of the application begin to resemble each other, and users begin to expect a certain interaction with the user interface. While there are no official recommendations, a deeper look at the most famous applications gives us a good understanding of what we should do.
Ps article a little dusty, but I think it will be useful.