SunyoungKim,PhD Last class 1. Prototype 2. Flowchart 3. Wizard of - PowerPoint PPT Presentation

Human-Computer Interaction 16. Design – Part 3. Design: Design Principles (1) Sunyoung�Kim,�PhD�

Last class 1. Prototype 2. Flowchart 3. Wizard of Oz

Today’s agenda UI design principles: Psychological principles

User-centered design User interface design knowledge • from users: need to know about the users and their tasks Design iteratively! • Good Interaction Design Design principles Theoretical: User interface design • knowledge from theory & experience Experiential: Abstract, high-level • guides for design

Today’s lecture Psychological design principles

Psychological Principles

Psychological principles 1. User sees what they expect to see. 2. Users have difficulty focusing on more than one activity at a time. 3. It is easier to perceive a structured layout. 4. It is easier to recognize something than to recall it.

1. User sees what they expect to see Users are not good at handling unexpected situations • The context • Prior knowledge of the world

Button placement: Button placement: OK/Cancel vs Cancel/OK OK/Cancel vs Cancel/OK Visual flow isual flow Platfor Platform m

OK is not ok anymor OK is not ok anymore! e! Button placement is important, but remember to also pay attention to the visual weight and labels you give your buttons.

OK is not ok anymore! OK is not ok anymor e! a more user-friendly approach to dialog boxes

1. User sees what they expect to see Principles: A. Consistency: Users are not good at handling unexpected situations B. Exploiting prior knowledge: Apply prior knowledge and experience

2. Users have difficulty focusing on more than one activity at a time.

2. Users have difficulty focusing on more than one activity at a time.

2. Users have difficulty focusing on more than one activity at a time. Perceptual organization: Group things together (Proximity)

2. Users have difficulty focusing on more than one activity at a time. Perceptual organization: Group things together (Hierarchy)

3. It is easier to perceive a structured layout: Gestalt theory 1. Figure/Ground 2. Proximity 3. Similarity 4. Connectedness 5. Continuity 6. Closure

(1) Figure/Ground Elements are perceived as either figures (objects of focus) or ground (the rest of the perceptual field). Rubin V Rubin Vase ase When confronted by a visual image, our perceptual system separates a dominant shape (a “figure”) from a “background”

(1) Figure/Ground

(1) Figure/Ground

(2) Proximity Elements closer together are interpreted as being more related than elements that are far apart.

(2) Proximity Elements closer together are interpreted as being more related than elements that are far apart.

(2) Proximity Elements closer together are interpreted as being more related than elements that are far apart.

(2) Proximity

(2) Proximity

(3) Similarity Elements that are similar are perceived to be more related than elements that are dissimilar.

Proximity + Similarity What happens if you start mixing these principles together?

Proximity + Similarity What happens if you start mixing these principles together?

Proximity + Similarity

(4) Connectedness Elements that are connected by uniform visual properties are perceived to be more related than elements that are not connected

(4) Connectedness Two basic strategies for applying uniform connectedness in a design: connecting lines and common regions

(4) Connectedness

(4) Connectedness

(5) Continuity Elements arranged in a straight line or a smooth curve are perceived as a group, and are interpreted as being more related than elements not on the line or curve.

(5) Continuity

(6) Closure A tendency to perceive a set of individual elements as a single, recognizable pattern, rather than multiple individual elements.

(6) Closure

Why designers should care about the Gestalt principles? • They’ll help you determine which design elements are most effective in a given situation. For example, when to use visual hierarchy, background shading, gradients, and how to group similar items and distinguish different ones. • These principles hold the power to influence our visual perception, which allows designers to direct our attention to specific points of focus, get us to take specific actions, and create behavioral change. • At the highest level, the Gestalt Principles help you design products that solve the customer’s problem or meet the user’s need in a way that’s beautiful, pleasing, and intuitive to use.

1. Figure/Ground 2. Proximity 3. Similarity 4. Connectedness 5. Continuity 6. Closure

1. Figure/Ground 2. Proximity 3. Similarity 4. Connectedness 5. Continuity 6. Closure

1. Figure/Ground 2. Proximity 3. Similarity 4. Connectedness 5. Continuity 6. Closure

1. Figure/Ground 2. Proximity 3. Similarity 4. Connectedness 5. Continuity 6. Closure

1. Figure/Ground 2. Proximity 3. Similarity 4. Connectedness 5. Continuity 6. Closure

1. Figure/Ground 2. Proximity 3. Similarity 4. Connectedness 5. Continuity 6. Closure

1. Figure/Ground 2. Proximity 3. Similarity 4. Connectedness 5. Continuity 6. Closure

1. Figure/Ground 2. Proximity 3. Similarity 4. Connectedness 5. Continuity 6. Closure

4. It is easier to recognize something that to recall it. • Recognition: knowledge in the world • Recall: knowledge in the head As a designer, you should try to put the information that the user needs in the world (in the UI)!

4. It is easier to recognize something that to recall it. Over 46 years old

4. It is easier to recognize something that to recall it.

4. It is easier to recognize something that to recall it.

Theory: Psychological principles 1. User sees what they expect to see. 2. Users have difficulty focusing on more than one activity at a time. 3. It is easier to perceive a structured layout (Gestalt theory). 4. It is easier to recognize something than to recall it.

Individual project (optional)

I3. Ideation and Solution proposal Based on your data analysis, come up with solutions by creating a persona, a storyboard and (sketch) low-fi prototypes of your system. Describe your proposed solution(s) in a paragraph • Create 1 persona to represent your target user (Slide09: P56) • Create 1 storyboard to demonstrate a situation where your persona • encounter a problem situation and how your proposed system solves the problem (Slide11:P47-49) Create 3 sketches: Sketches at least three ideas: • o Explore different ideas of organizing content on a home screen o Explore various features/functions for key features: illustrate it using a sequence of screens if necessary o Have at least one idea to be crazy, impossible, absurd, or ridiculous o Recommended to add annotations o Recommended to use a template for sketching

I3. Ideation and Solution proposal Submission should include: A paragraph of proposal description • 1 persona • 1 storyboard • 3 sketches • Format Add a title and description of your project on top • Link to your project website on top • o Should be accessible o Should have full contents (no pdf file) o Update your problem statement with an additional paragraph describing "solutions" A PDF file, 12 point scale in Times New Roman, 1.5 line spacing • Due by Midnight 11/7

I3. Ideation and Solution proposal Rubric Solution statement (1pt) • o If you clearly describe what your proposed solution will do (1pt) Persona (2pt) • o If the persona used the proper format (1pt) o If the persona represents a particular type of person capturing characteristics of target users (1pt) Storyboard (2pt) • o If the storyboard used the proper components to describe a use- case scenario (1pt) o If the storyboard clearly states the problem/context/goal (1pt) Sketch (5pt) • o 1pt for each (set of) prototype (3pt in total) o Clarity of prototype presentation: annotation to explain ideas (3pt)