Some standard screen layouts which you can apply to design your own pages. For example: Master/Detail, Search, ...

1. 12 standard screen patterns
Vu Phuong Hoang
2015/08

2. 1. Master/Detail
 “Master part” is used to navigate
 “Detail part” displays information
 Used for:
 Displaying more information while
staying in the same page

3. 1. Master/Detail

4. 1. Master/Detail

5. 1. Master/Detail
 Elevate – iPhone App of the
Year 2014

6. 1. Master/Detail

7. 1. Master/Detail

8. 1. Master/Detail

9. 1. Master/Detail

10. 1. Master / Detail

11. 1. Master / Detail

12. 1. Master / Detail

13. 2. Column Browse
 Similar to Master / Detail pattern
 Multiple entry points
 Used for:
 Browsing nested data

14. 2. Column Browse

15. 2. Column Browse

16. 2. Column Browse

17. 2. Column Browse

18. 2. Column Browse

19. 2. Column Browse

20. 3. Search / Result
 “Top part” are criterias
 “Bottom part” are items meeting
those criterias
 Used for:
 Searching

21. 3. Search / Result

22. 3. Search / Result

23. 3. Search / Result

24. 3. Search / Result

25. 4. Filter Dataset
 Use filtering controls to refine dataset
 Used for:
 Narrowing down search results

26. 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

27. 4. Filter Dataset

28. 4. Filter Dataset

29. 4. Filter Dataset

30. 4. Filter Dataset

31. 4. Filter Dataset

32. 4. Filter Dataset

33. 4. Filter Dataset

34. 5. Forms
 Set of inputs to collect data
 No body likes filling forms -> must be
designed carefully

35. 5. Forms

36. 5. Forms

37. 5. Forms

38. 5. Forms

39. 5. Forms

40. 6. Palette / Canvas
 Set of floating windows which can be
dragged anywhere
 Used for:
 Designing
 Drawing diagrams

41. 6. Palette / Canvas

42. 6. Palette / Canvas

43. 6. Palette / Canvas

44. 6. Palette / Canvas

45. 6. Palette / Canvas

46. 7. Dashboard
 Summarize key data in graphs
 Used for:
 Providing summary at a glance

47. 7. Dashboard

48. 7. Dashboard

49. 7. Dashboard

50. 7. Dashboard

51. 7. Dashboard

52. 8. Spreadsheet
 Editable data table
 Used for:
 Quick scanning
 Quick editting (in bulk)

53. 8. Spreadsheet

54. 8. Spreadsheet

55. 8. Spreadsheet

56. 9. Wizard
 Multi-steps process
 Used for:
 Guiding user through a complicated
workflow

57. 9. Wizard

58. 9. Wizard

59. 9. Wizard

60. 10. Parallel Panels
 Also known as “Accordion”
 Used for:
 Displaying chunks of independent
tools / information

61. 10. Parallel Panels

62. 10. Parallel Panels

63. 11. Interactive Model
 User interacts directly with UI
elements displaying information
 Used for:
 Providing easy way for user to try
different methods

64. 11. Interactive Model

65. 11. Interactive Model

66. 11. Interactive Model

67. 11. Interactive Model

68. 11. Interactive Model

69. 12. Blank State
 Helpful tips or placeholders for user
when he doesn’t have data
 Used for:
 Showing user where to go next

70. 12. Blank State

71. 12. Blank State

72. 12. Blank State

73. 12. Blank State

74. 12. Blank State

75. 12. Blank State