Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Mobile Design: Listbox Usability

From Wiki
Jump to: navigation, search
Rahulsingh1m (Talk | contribs)
(Links)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(10 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Usability]][[Category:Mobile_Design]]  
+
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090611
 +
|author= [[User:Mayankkedia]]
 +
}}
  
List or list box is a powerful [http://wiki.forum.nokia.com/index.php/GUI_Framework GUI] (Graphical User Interface) tool which is used to display more then one items at a time to the user, sometimes with the intent of allowing the user to select one or more then one items from the list, while at other times the intent is just to display a non selectable list of content. List allows the user to view a logical collection of related items like Contacts, SMS, and Settings etc.
+
 +
 
 +
List or list box is a powerful [[GUI Framework|GUI]] (Graphical User Interface) tool which is used to display more then one items at a time to the user, sometimes with the intent of allowing the user to select one or more then one items from the list, while at other times the intent is just to display a non selectable list of content. List allows the user to view a logical collection of related items like Contacts, SMS, and Settings etc.
  
 
For more details on list and list boxes check the links below:-
 
For more details on list and list boxes check the links below:-
Line 7: Line 30:
 
[http://en.wikipedia.org/wiki/List_box Wikipedia]
 
[http://en.wikipedia.org/wiki/List_box Wikipedia]
  
[http://library.forum.nokia.com/index.jsp?topic=/S60_3rd_Edition_Cpp_Developers_Library/GUID-58BC515A-6F79-4B9D-B03E-8AB9C40EFA03.html S60 UI Component: Lists]
+
[http://library.developer.nokia.com/index.jsp?topic=/S60_3rd_Edition_Cpp_Developers_Library/GUID-58BC515A-6F79-4B9D-B03E-8AB9C40EFA03.html S60 UI Component: Lists]
  
 
While list boxes are a powerful GUI component by themselves but from a usability perspective it is very important to ensure that the user doesn’t feel overwhelmed or irritated in using the list box. Every aspect of the application has to ensure a nice user experience and list boxes are no different.
 
While list boxes are a powerful GUI component by themselves but from a usability perspective it is very important to ensure that the user doesn’t feel overwhelmed or irritated in using the list box. Every aspect of the application has to ensure a nice user experience and list boxes are no different.
Line 24: Line 47:
 
     <td align="left">
 
     <td align="left">
 
'''Example of wrong logical Grouping'''<br>                     
 
'''Example of wrong logical Grouping'''<br>                     
[[Image:Wrong logical.jpg]]
+
[[File:Wrong logical.jpg]]
 
   </td>
 
   </td>
 
<td></td>
 
<td></td>
 
     <td align="left">
 
     <td align="left">
 
'''Example of Right Logical Grouping'''<br>
 
'''Example of Right Logical Grouping'''<br>
[[Image:Right logical.jpg]]  
+
[[File:Right logical.jpg]]  
 
     </td>
 
     </td>
 
   </tr>
 
   </tr>
Line 51: Line 74:
 
     <td align="left">
 
     <td align="left">
 
'''Example of listbox with no marquee'''<br>                     
 
'''Example of listbox with no marquee'''<br>                     
[[Image:Without marquee 1.jpg]]
+
[[File:Without marquee 1.jpg]]
 
   </td>
 
   </td>
 
<td></td>
 
<td></td>
 
     <td align="left">
 
     <td align="left">
[[Image:Without marquee 2.jpg]]  
+
[[File:Without marquee 2.jpg]]  
 
     </td>
 
     </td>
 
   </tr>
 
   </tr>
Line 63: Line 86:
 
     <td align="left">
 
     <td align="left">
 
'''Example of listbox with marquee'''<br>                     
 
'''Example of listbox with marquee'''<br>                     
[[Image:Marquee enabled.jpg]]
+
[[File:Marquee enabled.jpg]]
 
   </td>
 
   </td>
 
   </tr>
 
   </tr>
Line 70: Line 93:
 
For more on marquee:-
 
For more on marquee:-
  
[http://library.forum.nokia.com/index.jsp?topic=/S60_3rd_Edition_Cpp_Developers_Library/GUID-D9936F10-BB60-451F-9A65-249A73554F26.html Marquee Scrolling]
+
[http://library.developer.nokia.com/index.jsp?topic=/S60_3rd_Edition_Cpp_Developers_Library/GUID-D9936F10-BB60-451F-9A65-249A73554F26.html Marquee Scrolling]
 
   
 
   
 
* <b>Implement scroll bars in case you have more content</b>
 
* <b>Implement scroll bars in case you have more content</b>
Line 81: Line 104:
 
     <td align="left">
 
     <td align="left">
 
'''Example of listbox without scrollbar'''<br>                     
 
'''Example of listbox without scrollbar'''<br>                     
[[Image:Without scrollbar.jpg]]
+
[[File:Without scrollbar.jpg]]
 
   </td>
 
   </td>
 
<td></td>
 
<td></td>
 
     <td align="left">
 
     <td align="left">
 
'''Example of listbox with scrollbar'''<br>
 
'''Example of listbox with scrollbar'''<br>
[[Image:With scrollbar.jpg]]
+
[[File:With scrollbar.jpg]]
 
     </td>
 
     </td>
 
   </tr>
 
   </tr>
Line 93: Line 116:
 
For more details on scrollbar implementation in Symbian C++, check:-
 
For more details on scrollbar implementation in Symbian C++, check:-
  
[http://library.forum.nokia.com/index.jsp?topic=/S60_3rd_Edition_Cpp_Developers_Library/GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6/html/Scroller_API4.html Scroller]
+
[http://library.developer.nokia.com/index.jsp?topic=/S60_3rd_Edition_Cpp_Developers_Library/GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6/html/Scroller_API4.html Scroller]
  
[http://library.forum.nokia.com/index.jsp?topic=/S60_3rd_Edition_Cpp_Developers_Library/GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6/html/Lists_API4.html ScrollBar on List]
+
[http://library.developer.nokia.com/index.jsp?topic=/S60_3rd_Edition_Cpp_Developers_Library/GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6/html/Lists_API4.html ScrollBar on List]
  
 
* <b>Implement a search box specially if you have lot of items</b>
 
* <b>Implement a search box specially if you have lot of items</b>
Line 108: Line 131:
 
     <td align="left">
 
     <td align="left">
 
'''Example of listbox without search-box'''<br>                     
 
'''Example of listbox without search-box'''<br>                     
[[Image:Right logical.jpg]]
+
[[File:Right logical.jpg]]
 
   </td>
 
   </td>
 
<td></td>
 
<td></td>
 
     <td align="left">
 
     <td align="left">
 
'''Example of listbox with search-box'''<br>
 
'''Example of listbox with search-box'''<br>
[[Image:With searchbox.jpg]]
+
[[File:With searchbox.jpg]]
 
     </td>
 
     </td>
 
   </tr>
 
   </tr>
Line 120: Line 143:
 
For more details on search field implementation in Symbian C++, check:-
 
For more details on search field implementation in Symbian C++, check:-
  
[http://library.forum.nokia.com/index.jsp?topic=/S60_3rd_Edition_Cpp_Developers_Library/GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6/html/classCAknSearchField.html Search Field]
+
[http://library.developer.nokia.com/index.jsp?topic=/S60_3rd_Edition_Cpp_Developers_Library/GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6/html/classCAknSearchField.html Search Field]
  
 
* <b>Allow user the option to sort the list in some orders</b>
 
* <b>Allow user the option to sort the list in some orders</b>
  
  
Sorting is also a standard option that you should provide the user in cases of long lists. Sorting could especially if helpful in cases where the user wants to analyze the last usage patterns, recent dialed, most dialed, most viewed content etc. Sorting can be more aptly defined as not a must have but rather a good to have feature. Sometimes the good to have feature are what differentiate your product from a competitor’s offering. For instance in case of a log application if you allowed the user to sort based on most talked, least talked, most received calls from number options it would be highly appreciated by the user and it can be very well used as a USP for the product.
+
Sorting is also a standard option that you should provide the user in cases of long lists. Sorting could especially be helpful in cases where the user wants to analyze the last usage patterns, recent dialed, most dialed, most viewed content etc. Sorting can be more aptly defined as not a must have but rather a good to have feature. Sometimes the good to have feature are what differentiate your product from a competitor’s offering. For instance in case of a log application if you allowed the user to sort based on most talked, least talked, most received calls from number options it would be highly appreciated by the user and it can be very well used as a USP for the product.
  
 
<table>
 
<table>
Line 131: Line 154:
 
     <td align="left">
 
     <td align="left">
 
'''Example of listbox without sort option'''<br>                     
 
'''Example of listbox without sort option'''<br>                     
[[Image:Item not dimmed.jpg]]
+
[[File:Item not dimmed.jpg]]
 
   </td>
 
   </td>
 
<td></td>
 
<td></td>
 
     <td align="left">
 
     <td align="left">
 
'''Example of listbox with sort option'''<br>
 
'''Example of listbox with sort option'''<br>
[[Image:Option grouped.jpg]]
+
[[File:Option grouped.jpg]]
 
     </td>
 
     </td>
 
   </tr>
 
   </tr>
Line 145: Line 168:
  
 
Always use the right list box from the options available instead of using a blanket “one fits all” approach. For instance if the intent is to just display text and no icons, do not use a list box which supports icons as well.  
 
Always use the right list box from the options available instead of using a blanket “one fits all” approach. For instance if the intent is to just display text and no icons, do not use a list box which supports icons as well.  
 
For more details on the types of list boxes supported by Symbian C++/ S60:-
 
 
[http://www.newlc.com/en/Listbox-Overview.html ListBox overview]
 
  
 
* <b>Show/hide menu options based on current list box selection</b>
 
* <b>Show/hide menu options based on current list box selection</b>
Line 159: Line 178:
 
     <td align="left">
 
     <td align="left">
 
'''Example of listbox with invalid commands'''<br>                     
 
'''Example of listbox with invalid commands'''<br>                     
[[Image:Item not dimmed.jpg]]
+
[[File:Item not dimmed.jpg]]
 
   </td>
 
   </td>
 
<td align="left">
 
<td align="left">
 
'''Example of listbox with invalid commands'''<br>                     
 
'''Example of listbox with invalid commands'''<br>                     
[[Image:Wrong error.jpg]]
+
[[File:Wrong error.jpg]]
 
   </td>
 
   </td>
 
  </tr>
 
  </tr>
Line 177: Line 196:
 
     <td align="left">
 
     <td align="left">
 
'''Example of listbox with default menu'''<br>                     
 
'''Example of listbox with default menu'''<br>                     
[[Image:Item not dimmed.jpg]]
+
[[File:Item not dimmed.jpg]]
 
   </td>
 
   </td>
 
     <td align="left">
 
     <td align="left">
 
'''Example of listbox with drop down menu'''<br>                     
 
'''Example of listbox with drop down menu'''<br>                     
[[Image:With dropdown.jpg]]
+
[[File:With dropdown.jpg]]
 
   </td>
 
   </td>
  
Line 198: Line 217:
 
* [[How to display drop down/fly out menu]]
 
* [[How to display drop down/fly out menu]]
  
* [http://wiki.forum.nokia.com/index.php/How_to_create_a_simple_listbox How to create a simple listbox]
+
* [[How to create a simple listbox in Symbian C++]]
  
  
<b>---- Added by Mayank on 11/06/2009 ----</b>
+
<b>---- Added by Mayank on 11/06/2009 ----</b>[[Category:Usability]]

Latest revision as of 03:42, 9 May 2012

Article Metadata
Article
Created: mayankkedia (11 Jun 2009)
Last edited: hamishwillee (09 May 2012)


List or list box is a powerful GUI (Graphical User Interface) tool which is used to display more then one items at a time to the user, sometimes with the intent of allowing the user to select one or more then one items from the list, while at other times the intent is just to display a non selectable list of content. List allows the user to view a logical collection of related items like Contacts, SMS, and Settings etc.

For more details on list and list boxes check the links below:-

Wikipedia

S60 UI Component: Lists

While list boxes are a powerful GUI component by themselves but from a usability perspective it is very important to ensure that the user doesn’t feel overwhelmed or irritated in using the list box. Every aspect of the application has to ensure a nice user experience and list boxes are no different.


[edit] Some common things to remember while using a list box are:-

  • Display only logical related contents in the list box


The list box by its definition is a GUI element to display a logically related set of items/entities. Always ensure that this golden rule of usage is followed, for instances don’t mix content which doesn’t belong together into a list, as this would end up confusing the user. For instance if you are developing a log application, make sure that you show only missed calls in the missed call lists, received in received call lists and so on. Mismatching would not only be an irritant for the user it would also make the program logic and later code maintenance a tougher task from a developer team’s perspective.

Example of wrong logical Grouping
Wrong logical.jpg

Example of Right Logical Grouping
Right logical.jpg


  • Compress display content on the list box item


Although the lists allow you to display a lot of content in the individual items, but it is always a good idea to compress the text to only the most important/relevant content. This is all the more critical on the constrained display area of the mobile device, as you don’t want a single item hogging most of the real estate leaving hardly any space for the other items. It would also be a good idea to show the long/detailed text in a separate detailed view which can be opened by pressing the Select/Center Soft Key of the device. While on the list view you can truncate the content by displaying ellipsis at the end to denote to the user that there is more text which is not being displayed because of space constraints.

If you think that beyond a certain length, text doesn’t make sense you should possibly bring up an information note or some other dialog to notify the user of the same rather then just blocking user input while the user is entering the text.

  • Enable marquee in case you have lot of content in the list


You should consider using a marquee in case you think that the entire content has to be displayed on the list itself and you don’t want the user to navigate to a detailed view to see the content neither do you want to truncate the text for one reason or the other.

Example of listbox with no marquee
Without marquee 1.jpg

Without marquee 2.jpg

Example of listbox with marquee
Marquee enabled.jpg

For more on marquee:-

Marquee Scrolling

  • Implement scroll bars in case you have more content


More often then not the list could have more items then what can be displayed on the view in one shot, in those cases you should allow the user the ability to scroll up/down the list so that they can view all the items. In cases of a custom drawing implementation make sure that the content being displayed on the view is scrolled consistently i.e. at the same speed and gives the same consistent look and feel.

Example of listbox without scrollbar
Without scrollbar.jpg

Example of listbox with scrollbar
With scrollbar.jpg

For more details on scrollbar implementation in Symbian C++, check:-

Scroller

ScrollBar on List

  • Implement a search box specially if you have lot of items


From a user’s stand point it is imperative to provide them with the option to search a particular item, so that they don’t have to scroll up/down and waste precious time in trying to locate an item. This is all the more crucial in applications like contacts/chat clients etc where you are most likely to have lots of contacts/buddies and the user might want to dial/chat quickly with a particular person.

Where-ever possible you should also provide the user to customize the search options like search by name/number etc. In some cases even implementing an auto-complete approach would give a nice experience to the user where they don’t have to manually type in the entire name before the search results are displayed.

Example of listbox without search-box
Right logical.jpg

Example of listbox with search-box
With searchbox.jpg

For more details on search field implementation in Symbian C++, check:-

Search Field

  • Allow user the option to sort the list in some orders


Sorting is also a standard option that you should provide the user in cases of long lists. Sorting could especially be helpful in cases where the user wants to analyze the last usage patterns, recent dialed, most dialed, most viewed content etc. Sorting can be more aptly defined as not a must have but rather a good to have feature. Sometimes the good to have feature are what differentiate your product from a competitor’s offering. For instance in case of a log application if you allowed the user to sort based on most talked, least talked, most received calls from number options it would be highly appreciated by the user and it can be very well used as a USP for the product.

Example of listbox without sort option
Item not dimmed.jpg

Example of listbox with sort option
Option grouped.jpg

  • Use the right list box depending on the content being displayed


Always use the right list box from the options available instead of using a blanket “one fits all” approach. For instance if the intent is to just display text and no icons, do not use a list box which supports icons as well.

  • Show/hide menu options based on current list box selection


It is very important to change the visibility of the menu items depending upon the currently selected item. You do not possibly want to show an option to the user which is not applicable for the current item and then either throw an error dialog stating ‘request not applicable’ or do nothing, both the cases are likely to be equally bad from a usability stand point.

Example of listbox with invalid commands
Item not dimmed.jpg

Example of listbox with invalid commands
Wrong error.jpg

  • Show drop down menu options


Sometimes it would be useful and desirable to show a menu in place itself rather then using the default menu layout where it pops up at the bottom of the screen. One should be careful in deciding the layout of the drop down menu and also have a mechanism to select the menu options and allow the user to cancel the drop down menu if they so desire.

Example of listbox with default menu
Item not dimmed.jpg

Example of listbox with drop down menu
With dropdown.jpg


  • Icons/different backgrounds should be used to help the user quickly differentiate between types of items.
  • While activating a view containing list, make sure the currently selected item is visible.
  • If the list does not have any item to be displayed, inform the user about the empty list by displaying some text in the main pane of the application. In case there is a search box implementation, ensure the searchbox is hidden in this case.

[edit] Links


---- Added by Mayank on 11/06/2009 ----

This page was last modified on 9 May 2012, at 03:42.
146 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×