9

I am currently adapting an Android app to follow the design guidelines more and more.

One thing I am doing is removing the right carets as suggested. While this works fine for listview where each row is clickable, I have a bunch of views that display a lot of data in a list-sort kind of layout and only some of them trigger actions like downloading a document, going to a details screen or watching a video. At the moment I am indicating that these rows have an action with a right caret.

It seems like there are no patterns for more complex screen designs like this. Any suggestions on what do to?

E.g in the screen below if there is the right caret on the Order Items line you can navigate to an additional screen. Same for the Order Status screen - in some circumstances you can view more information about the order and then the right caret becomes visible..

Example Screen

I could replace the right caret icon with more specific icons for each use case, but for example for going to a detail screen the right caret seems perfectly fine.

3 Answers 3

4

+1 to both Vitaly and Paul's answers. I would also mention that if a list item has a secondary action, one option is to supply a full-height icon button (not visually a button per se just a touchable region) with a separator to indicate the action. Another option is to expose contextual actions using the contextual action bar (CAB), triggered on long press.

Additionally, in your screenshot I'd recommend removing the extra rounded rectangles around list items (we should add this to the Pure Android section of Android Design). If you need to group items, consider using header rows instead.

1
  • 1
    Although it might seem like a list view it is not a list view at all. In this section of the screen a bunch of key/ value pairs are listed but overall the screen is more like a profile view e.g. the G+ app and the About tab there. Looking at that screen actually confirms your idea (and Michael Galpin and Robert Coopers idea on the related G+ discussion) to add meaningful looking iconic buttons that trigger the action like the call button beside any phone number on the G+ page. Also when looking at the page... the grouping with rounded corner boxes compared to the G+ seems just fine. Feb 20, 2012 at 18:12
6

The official guidelines don't specify a solution for such cases, but you can see that native apps for Ice Cream Sandwich achieve this distinction through typography, where drill-down enabled rows appear in a brighter font color. In the sreenshot below, only Status and Legal Information provide drill-down to a deeper level.

Android ICS About Phone screenshot

The same goes for Gingerbread (Status, Battery Use and Legal information here):

Android Gingerbread About Phone screenshot

1

On my Android phone the items in Settings / About Phone which are informational only and have no associated action have grey font text instead of white.

Your UI seems a lot more colourful than that monotone, but you should be able to convey meaning with consistent use of font colour.

1
  • Looking at the G+ apps About tab I would say that additional actions will not be obvious enough in many cases if you just have a lighter font. I would like to make it more obvious and think I will add specific looking icons. Feb 20, 2012 at 18:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.