1. Control Panel Patterns

2. What do we may when we say patterns?

3. Definitions Pattern Pattern Instance No single accepted definition in our field yet: A solution to a problem in a context Best practice that rose above the din Patterns can contain patterns Both a thing and its application (helps to use Pattern Instance to describe the concrete application) Examples: Pattern: Users need to choose one item from a list of items Pattern Instance: List box; Drop-down list Pattern: Users need to know their location in CPLs Pattern Instance: Address bar

4. A pattern must have… Recurrence— Has relevance beyond this specific situation Teaching— Gives you the understanding to tailor the solution to your variant of the problem Name— Effectively increases communication bandwidth

5. Patterns are for users… Often not at a conscious level (this use of patterns came from…) Often need to be learned (sometimes need to be promoted in the UI) Reinforced by consistency in implementation, undermined by inconsistency

6. Patterns are for development teams… Not exhaustive of the UI Always evolving Not all created equal Technology agnostic—may or may not have tools or methodological support UX guidelines in action—should have guidelines baked in, but does not replace the guidelines

7. What do we may when we say patterns for CPLs?

8. First, if you only do “one” thing for CPL… Design for specific tasks Present in terms of user goals instead of technology Optimize for first-time and infrequent users

9. CPL page level patterns Hub page – Task-based hub page (most hub pages; can also be hybrid containing some properties, e.g. Windows Update) – Object-based hub page Standard (using List View; e.g. Uninstall a program) Hybrid (e.g. Select a power plan) Spoke page – Task page (most spoke pages; e.g. Windows Update  Change Settings; Customize colors; etc.) – Form page (e.g. Use the computer without a display) Property sheet (not a pattern, but “the old way of doing things”)

10. CPL window frame level patterns Navigation (Travel buttons and Address bar) Search box Commit buttons patterns

11. Search box: a case for consistency and promotion Great improvement Needs improvement: page on the left isn’t found Do users know about it? Address bar is a similar example

12. OK/Cancel commit buttons: a case for enforcing patterns If the first page has instant preview as users might expect, we can have OK/Cancel commit buttons pattern here. On the second page, users have no idea that clicking Open would replace their user tile and take them away from the page where they can undo the action.

13. CPL content level patterns (a sample) Navigation patterns (e.g. task links; wizards) Content organization and display patterns (e.g. more prominent appearance for more important commands; progressive disclosure) Help patterns (e.g. with regard to CPLs, mostly: procedural; conceptual; reference) Command patterns (e.g. default commands; browse; additional information needed—ellipsis)

14. A few more specific examples (with an eye to the near future)

15. What we can have more instances of…

16. Clear, consistent instructions

17. Command links

18. Context-sensitive help Entry points critical Balance between instructions and help

19. What we can add as patterns…

20. Time and performance patterns

21. Graphical interaction patterns Preview slider Graphical selection

22. Graphical interaction patterns Clickable map Drag and drop

23. Graphical interaction patterns Interactive illustration (if generated on the fly)

24. Graphical interaction patterns Functional preview

25. Content organization and display Grid patterns

26. Window management patterns Improve predictability while benefiting from advanced hardware – Size (default size) – Location – Order – Activation – Input focus – Persistence – Animation and transitions

27. What we can have fewer instances of…

28. Property sheet Navigation tabs – Complexity and clutter when there are a lot of tabs – No single tabs Apply button overused

29. Overused dialogs

30. All the settings under the sun

31. User steps reflecting system structure

32. CPL patterns list (CPLs need to…) Provide navigation Display content and controls Enable interaction – Affordance – Action – Feedback

33. …Provide navigation Control levels of access – Give consistent security indication – Elevation Provide navigation and location indication – Hub – Spoke Task page Form page – Address bar – Launch a task (task link, command link, command) – Task pane (tasks, see also) – Link – Search Regular search Instant search – Dialogs Question dialogs (task dialog); choice dialogs Options dialogs (property sheet) Progress dialogs Information dialogs Common dialogs – Browse to a file or folder – Navigate groups of information (tabs) Provide window management – Logical positioning – Resizing – Transitions Unique navigation patterns – Centers – Wizards

34. …Display content and controls Provide clear instructions – Instructions and supplemental instructions – Definitions – User training Provide help when needed – Procedural – Conceptual – Reference Organization – Page layout – Lists – Hierarchies – Grids – Groups – Sequence – Progressive disclosure – Icons – Illustrations – Backgrounds – Maps Branding elements Request customer feedback and get consent on privacy policy

35. …Enable interaction: affordance Make selection – Single selection – Multiple selection – Hierarchical selection – Disabled selections – Instant preview Set numerical value Enter text Auto completion Add, remove, and reorder items Intelligent defaults Restore defaults Disabled controls

36. …Enable interaction: action Direct manipulation – Invitations: Cursor, Handles, Hover, Drop – Drag and drop – Choose from a range (slider) Perform commands – Default commands – Disabled commands – Additional information needed – Command links – Command bars – Menu bars Commit changes – Instant commit – Delayed commit – Commit that does not leave the context (Apply) Repeat actions – Do not show this again – Do this for all occurrences

37. …Enable interaction: feedback Give feedback on interaction – Direct manipulation feedback – Animations (dock, calendar, etc.) – Sound – Progress indication Confirm actions – Routine confirmation – Risky action confirmation – Unintended consequence confirmation – Clarification – Security confirmation – Ulterior motive confirmation Warning – Awareness – Error prevention – Imminent problem – Risky action confirmation Error message patterns

38. Thanks. Questions?