Sign in Submit a request My activities
Logo Integrated Information Technology Services
Logo Integrated Information
Technology Services
  • Home
  • IT Services & Help
    • All
    • For Faculty
    • For Staff
    • For Student
    • For Alumni
    • For Public
    • For Guest
  • News & Updates
  • Policies
  • Training & WorkshopsCurrently selected
  • IT Welcome Kit
  • eLearn Support
  • About Us
  • Contact Us
Follow
Home
 
  1. IT Services & Help
  2. Internet & Intranet, Mobile & Media
  3. Mobile Application Development and Hosting (iOS, Android and Windows Phone)

What are some guidelines for table and listings for mobile apps?

The mobile form factor requires us to evaluate what information is most important to display. Here are some common table display patterns for mobile.

 

 

Recommendation: Table design
  • Avoid using dark gridlines and vertical dividers.
  • Left align text and right align numbers.
  • Don’t overload the screen.
  • Consider an alternate pattern if there is too much information to fit on a single screen.
  • For headerless table, use only three rows of information maximum per fat row. Use smaller and/or lighter font for less important details.
  • For grouped rows, visually differentiate the summary rows from the other rows in the table.
  • For tables with visual indicators, choose visual indicators that are immediately recognizable; avoid gratuitous icon use.

TYPE 1 : Basic table

 

TYPE 2 : Headerless table

The headerless table is characterized by fat rows displaying multiple variables about an object, and no column labels. It is common practice to make the row identifier a larger font and display the details in a smaller font.

 

TYPE 3 : Grouped rows

Row grouping can make a table’s data easier to digest. The row groupings might act as section headers, like transactions grouped by date in the Mint example, or as subsection summaries, like the yellow total rows in the MicroStrategy Mobile example.

 

TYPE 4 : Cascading lists

iOS refers to this as a Table View, a UI element that “presents data in a single-column list of multiple rows.” DropBox uses this pattern for their secondary navigation within the DropBox tab.

 

TYPE 5 : Fixed column

For larger tables, the fixed column pattern may be a viable solution. In this example from Roambi, the leftmost column is frozen and the rest of the columns scroll. Fidelity uses fixed columns on the left and right with scrolling content in the center, but this design is harder to navigate than Roambi’s, since there is a smaller target for swiping.

 

TYPE 6 : Overview plus data

The Overview plus Data pattern refers to a roll-up or summary of the table’s content displayed above the individual rows of data.

 

TYPE 7 : Table with visual indicators

Sparklines and icons can enhance a table’s information display, making it easier to hone in on specific items of interest. Choose visual indicators that are immediately recognizable; avoid gratuitous icon use.

 
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Related articles

  • Mobile development guidelines for iOS, Android, Microsoft
  • List of Software - Faculty & Staff
  • Services for Staff
  • Guidelines for Windows Phone App Development
  • What do you need to do to setup or manage 2FA?
Top
  • Terms of Use
  • |
  • Personal Data Protection Statement
  • |
  • System Check
© Copyright 2015 Singapore Management University. All Rights Reserved
Powered by Zendesk