Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android UI Design: Interactive ListView Elements

I'm looking for some ideas from a design perspective, and I'm hoping Romain or one of the folks from Google will pick this up as well. What have you all done with the design of your ListView elements to make it obvious to the user which elements in the list are interactive and which are not?

In iPhone UI, this is where disclosure indicator arrows are included, but it feels wrong to copy/paste that idea into an Android application. When we include section headers, they are usually visually different enough (different size and background) to make this point, but what about in cases where only some of the list elements lead to more information?

I appreciate all thoughts on this topic, and would love to see more of these covered in the Android UI Guidelines.

like image 288
devunwired Avatar asked Dec 29 '10 17:12

devunwired


1 Answers

It looks like the Android design team has given us some more guidance on this. If you take a look at the http://developer.android.com/design/building-blocks/lists.html page, titled "Lists", it has these guidelines:

List example from Android Design

Line Items List items can accommodate a wide range of data types in different arrangements, including simple single-line items, multi-line items, and custom items with icons, checkboxes, and action buttons.

There is one list item that shows an icon to the very right, which is from the Android action bar icon pack, 6-social-chat.png. 6-social-chat.png

This implies that having tapping this icon would be an "action button" and would start a chat with the friend that matches that list item. You can actually see this in action in the People app in Ice Cream Sandwich.

However, there isn't a standard disclosure arrow icon. The Google Play app though, does seem to use the arrow pointing right to indicate that you can do the same sort of thing in the grid view headers "USERS ALSO VIEWED" and "USERS ALSO INSTALLED". This is in the icon pack as 1-navigation-next-item.png 1-navigation-next-item.png. This functions as an "action button" that goes into a detail activity, which I think is close to what you were originally asking.

I'd use this sparingly though, since it seems like most list items (and grid items) are expected to be interactive. If there are a lot of list items which are not, then I'd consider changing the background or the font color to indicate that it is disabled.

like image 72
louielouie Avatar answered Sep 27 '22 20:09

louielouie