12 standard screen patterns

Vu Phuong Hoang2015/08

1. Master/Detail

“Master part” is used to navigate

“Detail part” displays information

Used for:

Displaying more information while

staying in the same page

1. Master/Detail

1. Master/Detail

1. Master/Detail

Elevate – iPhone App of the

Year 2014

1. Master/Detail

1. Master/Detail

1. Master/Detail

1. Master/Detail

1. Master / Detail

1. Master / Detail

1. Master / Detail

2. Column Browse

Similar to Master / Detail pattern

Multiple entry points

Used for:

Browsing nested data

2. Column Browse

2. Column Browse

2. Column Browse

2. Column Browse

2. Column Browse

2. Column Browse

3. Search / Result

“Top part” are criterias

“Bottom part” are items meeting

those criterias

Used for:

Searching

3. Search / Result

3. Search / Result

3. Search / Result

3. Search / Result

4. Filter Dataset

Use filtering controls to refine dataset

Used for:

Narrowing down search results

Search / Result VS. Filter Dataset

Search / Result:

Start with blank state (can be customized)

Add result based on criterias later

Filter Dataset:

Start with full list

Remove items based on criterias later

4. Filter Dataset

4. Filter Dataset

4. Filter Dataset

4. Filter Dataset

4. Filter Dataset

4. Filter Dataset

4. Filter Dataset

5. Forms

Set of inputs to collect data

No body likes filling forms -> must be

designed carefully

5. Forms

5. Forms

5. Forms

5. Forms

5. Forms

6. Palette / Canvas

Set of floating windows which can be

dragged anywhere

Used for:

Designing

Drawing diagrams

6. Palette / Canvas

6. Palette / Canvas

6. Palette / Canvas

6. Palette / Canvas

6. Palette / Canvas

7. Dashboard

Summarize key data in graphs

Used for:

Providing summary at a glance

7. Dashboard

7. Dashboard

7. Dashboard

7. Dashboard

7. Dashboard

8. Spreadsheet

Editable data table

Used for:

Quick scanning

Quick editting (in bulk)

8. Spreadsheet

8. Spreadsheet

8. Spreadsheet

9. Wizard

Multi-steps process

Used for:

Guiding user through a complicated

workflow

9. Wizard

9. Wizard

9. Wizard

10. Parallel Panels

Also known as “Accordion”

Used for:

Displaying chunks of independent

tools / information

10. Parallel Panels

10. Parallel Panels

11. Interactive Model

User interacts directly with UI

elements displaying information

Used for:

Providing easy way for user to try

different methods

11. Interactive Model

11. Interactive Model

11. Interactive Model

11. Interactive Model

11. Interactive Model

12. Blank State

Helpful tips or placeholders for user

when he doesn’t have data

Used for:

Showing user where to go next

12. Blank State

12. Blank State

12. Blank State

12. Blank State

12. Blank State

12. Blank State