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 Sunyoung�Kim,�PhD�

Quiz #3 • Mean: 15 6 • Max: 20 • Min: 5 5 3 3 2 2 2 2 2 2 1 1 1 1 0 0 20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5

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 once 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 once 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