Week 7 UI Patterns

Question 1

Application of Design Patterns

Answer 1

Architecture
Software engineering
Human Computer Interaction

Question 2

Classes of Design Patterns

Answer 2

Creational
Structural
Behavioral

Question 3

Center Stage

Answer 3

Putting the most important things on the largest sections of the page

Question 4

Responsive Disclosure (Dynamic Progression)

Answer 4

Slowly walking the user through the UI. Going step by step each time.

Similar to a tutorial or an installation wizard. You don’t have access to everything immediately.

Question 5

Extras on Demand

Answer 5

Allowing for quick access to UI/Features that are hidden. These extras can easily be opened up and accesses on demand.

Example: Changing color of text in google docs, the button to do so is easily accessible which when clicked opens up the bigger menu with lots of possibilities. (Which would have been clutter if always open)

Question 6

Two-Pannel Selector

Answer 6

Two panels, one of them shows the set of items the user can select and the second panel shows that items contents.

Examples: Email list or Email Folders, like in the first panel have the folder and in the second have the emails within that folder displayed.

Question 7

Cascading Lists

Answer 7

A selectable hierarchy that changes based on the selection in other hierarchy’s.

Examples: Selecting which country you live in, then the next box will only show cities within that country, then the next box will only allows zip codes from within borders of that city

Question 8

Multi-Level Undo

Answer 8

Allows for a long sequence of undo’s to occur.

Examples: Ctrl + Z is a multilevel undo for most doc editors such as google docs. Another example would be photoshop with it’s history tab which allows you to undo multiple times.

Question 9

CRAP Design Patterns (Principles)

Answer 9

Contrast
* to make easy to read…
* gain Attention, show Distinction
Repetition
* to show Consistency, Similarity
(separate elements)
Alignment
* to show Consistency, Similarity
(nearby elements)
Proximity
* to show relationship

Question 10

Design Implications
(Design Patterns List)

Answer 10

Many design patterns
have been identified
* Center stage
* Responsive disclosure
* Two-panel selector
* Extras on demand
* Cascading lists
* Multi-level undo

Before you use a
pattern, consider:
* Is the context right for you?
* Will the trade-offs work for you?
* Does your technology platform provide support?