Chapter 4

Tables Patterns: Exercise

MOBC 2305 - Design Patterns for Smart Devices Apps

Dr. Tamer Madi

 Tables Patterns

4. Overview plus
1. Basic Table 2. Headerless Table 3. Fixed Column
Data

6. Table with
5. Grouped Rows 7. Editable Table
Indicators

MOBC2305 - Design Patterns for Smart Devices Apps 2

 More Tables Patterns

• Shorten: cutting out unnecessary columns and keeping the table concise by leaving the
crucial data only.

• Moveable: using swipe gestures to scroll through the whole table horizontally.

• Collapsed: everything is visible without scrolling and columns are navigated using swipe
gestures. The primary column can be fixed so we don’t lose the context of data.

• Transformed: collapsing of the table rows into separate cards.

• Compared: helpful when we want to compare the columns. All we need to add is easy
navigation through the whole table, displaying only two columns at a time.

MOBC2305 - Design Patterns for Smart Devices Apps 3

 Bloomberg is an international news agency, providing
Example 1 Bloomberg business news, markets, data, and analysis to the world.

MOBC2305 - Design Patterns for Smart Devices Apps 4

Example 2 Theatre App

MOBC2305 - Design Patterns for Smart Devices Apps 5

Example 3 International Sizes

MOBC2305 - Design Patterns for Smart Devices Apps 6

Example 4 Stock Market

MOBC2305 - Design Patterns for Smart Devices Apps 7

 It is a private company that designs and manufactures
Example 5 Vizio TVs, headsets and amplifiers.

MOBC2305 - Design Patterns for Smart Devices Apps 8

 Tables Design Guidelines

• What kind of data you have?

• Who are the users?

• What are the screens sizes?

• What are the primary columns?

• Is there anything unnecessary?

• Which format are you going to use?

MOBC2305 - Design Patterns for Smart Devices Apps 9

Case 1 An app for HR department to manage the employees’ information.

Name Position Office Age Start date Salary

Angela Ramos CEO London 47 9/10/2009 150,000 $

Jon Smith Junior Technical Author San Francisco 54 12/1/2009 86,000 $

Bradly Geer Software Engineer London 41 13/10/2012 96,000 $

Tomas Yin Software Engineer San Francisco 28 7/6/2018 90,000 $

Bruno Nash Integration Specialist New York 60 15/3/2009 110,000 $

Cara Steven Sales Assistant London 43 2/1/2011 100,000 $

Adam Will Graphic Designer New York 25 5/8/2019 90,000 $

Brielle Wanger Front-End Developer San Francisco 30 20/9/2017 92,000 $

Caesar Vance Back-End Developer San Francisco 32 11/4/2018 94,000 $

MOBC2305 - Design Patterns for Smart Devices Apps 10

Case 1

MOBC2305 - Design Patterns for Smart Devices Apps 11

Case 1

Sketch 1 Sketch 2

MOBC2305 - Design Patterns for Smart Devices Apps 12

 Good Resources

• Michał Jarosz, 2018. 5 Practical Solutions to Make Responsive Data Tables.

https://medium.com/appnroll-publication/5-practical-solutions-to-make-responsive-data-tables-ff031c48b122

• Taras Bakusevych, 2016. Data Tables Design.

https://medium.com/@taras.bakusevych/data-tables-design-3c705b106a64

• Chris Coyier, 2018. Responsive Data Table Roundup.

https://css-tricks.com/responsive-data-table-roundup/

• iOS Tables. https://setproduct.com/patterns/ios/tables

MOBC2305 - Design Patterns for Smart Devices Apps 13

Thank You