SunyoungKim,PhD Quiz #3 Mean: 15 6 Max: 20 Min: 5 5 3 3 2 2 - - PowerPoint PPT Presentation

Human-Computer Interaction

• 21. Quiz 3

SunyoungKim,PhD

2 2 2 6 5 3 3 2 1 2 2 1 1 1 20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5

• Mean: 15
• Max: 20
• Min: 5

Quiz #3

• 1. Explain what makes the interface on the right

user-friendly using one of Don Norman’s 6 design

• principles. (There is one unique strength in this

interface, the round-shape control. You need to explain that strength in relation to a design principle).

• Mapping
• Affordance
• Visibility: 1pt

• 2. Define “Responsive Design” and describe why

you need to consider it in the UI design.

• To make websites responsive to their environment
• Make pages that look great at any size

• 3. Write down the name of red part in the font

below (misspelling will not count) and explain its effect.

• Serif (not san-serif)
• It helps improve legibility

• 4. What color temperature is best to give a sense of

professionalism?

• Warm colors are reds, oranges, yellows.
• Generally energizing, passionate, positive
• Red & yellow are primary colors, with orange in

the middle, which means warm colors cannot be created with a cool color

• Cool colors include green, blue, purple.
• Blue is the only primary color within cool

spectrum, which means other cool colors are created by combining blue with a warm color

• Use cool colors to give a sense of calm/

professionalism

• Neutral colors include grays, browns.
• Often serve as backdrop in design
• Combine them with accent colors or use them
• Alone for a minimalistic, clean loo

• 5. List two mobile UI design principles relating to

creating a text-entry form.

• Build user-friendly forms
• Communicate form errors in real time
• Match the keyboard with the required text inputs
• Be responsive with visual feedback after significant actions

• 6. Describe two strengths/benefits that visual

hierarchy can create in the UI.

• Create a center of interest that attracts user’s attention
• Create a sense of order and balance
• Guide the user through your UI – Visual path
• Tell a story…Like all good stories, there should be a beginning, an

end, and a point

• 7. Describe two strengths of the interface below

reflecting on Gestalt principles (You need to mention at least two Gestalt principles and how these strengthen the usability of the UI).

• Figure/ground
• Proximity
• Similarity
• Continuity
• Connectedness
• Closure

• 8. Criticize the usability of the SC&I

homepage, and give suggestions for improvement, reflecting on visual components of UI design (e.g., Color, Grid, Typography, Layout).

• Color
• Grid
• Typography
• Layout

• 9. Describe strengths and/or weaknesses of two

mobile UIs in the next page, reflecting on Norman’s 6 design principles. Do not use the same principle in both UIs (You can mention one principle only

• nce across the UIs.) And, you need to mention at

least 5 principles.

• Visibility
• Consistency
• Mapping
• Affordance
• Feedback
• Constraint

• 9. Describe strengths and/or weaknesses of two

mobile UIs in the next page, reflecting on Norman’s 6 design principles. Do not use the same principle in both UIs (You can mention one principle only

• nce across the UIs.) And, you need to mention at

least 5 principles.

• Visibility
• Consistency
• Mapping
• Affordance
• Feedback
• Constraint

Group Project

• P5. Hi-fi prototype

First, update your wireframe. Then, using a mobile app prototyping tool of your choice (recommend: Indigo Studio), develop an interactive, full-fledged, content-rich, high- fidelity prototype of your mobile app. It should look and behave like a final product. It should have full, possibly fake, contents. It should work with no error or link-breakage. This should be up on your website.

Exemplar: https://xd.adobe.com/view/509c361f-fac5-4fbb-b177-17b5df22b27e/ (tablet app) https://indigodesigned.com/share/run/pjjnckkzefp6#f=login&s=c0204b (smartphone app)

# Due by 12/1

• P5. Hi-fi prototype

Turn-in

• A link your final hi-fi prototype: you should ensure that others

without any permission can access and interact with your prototype

• A png file (400X250 pixel) of your logo image
• Example:

Rubric

• It’s all or nothing: If your hi-fi prototype works like a charm, you will

get a full point; If there is any missing page/broken link, you will get

• none. If instructors can’t access it, you won’t get a point either.

Next class

Next class

Reading for discussion

• “Appropriating and Assessing Heuristics for Mobile Computing”
• Submit your response to Canvas by Monday 11/27

Individual project (optional)

• I4 due midnight on Monday, 11/27