powerpoint presentation€¦ · • some of the news/travel out-of-date • not super...

HumanComputerInteractionLaboratory

CMSC434Introduction to Human-Computer Interaction

Week 13 | Lecture 22 | April 19, 2016

Mid-Fi v1 In-Class Critiques

Jon Froehlich

@jonfroehlich

COMPUTER SCIENCEUNIVERSITY OF MARYLAND

IA09 UI Design

Jon Froehlich Webpage: Overview Screenshotshttp://www.cs.umd.edu/~jonf/

Jon Froehlich Webpagehttp://www.cs.umd.edu/~jonf/

DescriptionAn academic website for an HCI professor at UMD

Target UsersResearchers, CS folks, students, other academics, general technical audience

CritiquePositives:• Clean, minimalistic look• Well-organized• Easy-to-find important information like contact, address, pubs

Negatives:• Lots of text, a bit overwhelming• Some of the news/travel out-of-date• Not super exciting/compelling UI• Fonts are a bit small

Jon Froehlich Webpage: Layouthttp://www.cs.umd.edu/~jonf/

Jon Froehlich Webpage: Layout Critiquehttp://www.cs.umd.edu/~jonf/

Layout DescriptionA 3-column layout: columns 1 and 3 are sidebars sandwiching main content in column 2

CritiquePositives: simple, flows well, easy-to-understandNegatives: columns are not responsive (e.g., page does not scale to higher resolution, more space)

Jon Froehlich Webpage: Color Palettehttp://www.cs.umd.edu/~jonf/

Link Highlight173, 71, 79

Menu Highlight173, 71, 79

Content Text0,0,0

Sidebar Text68,68,68

Menu Unselected Text153,153,153

Past Travel Text191,191,191

Background255,255,255

You can provide Color Palette examples in

two ways (choose one):

1. Color Example 1: shows color swatch with example UI

2. Color Example 2: shows interface with color swatch

Jon Froehlich Webpage: Color Example 1http://www.cs.umd.edu/~jonf/

Link Highlight173, 71, 79

Menu Highlight173, 71, 79

Content Text0,0,0

Sidebar Text68,68,68

Past Travel Text191,191,191

Background255,255,255

Menu Unselected Text153,153,153

Jon Froehlich Webpage: Color Example 2http://www.cs.umd.edu/~jonf/

Menu Highlight173, 71, 79

Content Text0,0,0

Background255,255,255

Menu Unselected Text153,153,153

Sidebar Text68,68,68

Link Highlight173, 71, 79

Past Travel Text191,191,191

Jon Froehlich Webpage: Color Critiquehttp://www.cs.umd.edu/~jonf/

Link Highlight173, 71, 79

Menu Highlight173, 71, 79

Content Text0,0,0

Sidebar Text68,68,68

Menu Unselected Text153,153,153

Past Travel Text191,191,191

Background191,191,191

Color DescriptionUses one primary hue (a maroonish pink) + black, white, and 3 grayscale shades

CritiquePositives: • Color palette between image of Jon and webpage is consistent, creating a nice, clean unifying look• Uses gray effectively to de-emphasize less important content• The palette feels professional

Negatives:• The colors are a bit on the bland side

Jon Froehlich Webpage: Iconographyhttp://www.cs.umd.edu/~jonf/

N/AMy webpage lacks icons, so nothing to report here. For an application that uses icons, extract them and line them up similar to the Color Palette (Slide 7)

Jon Froehlich Webpage: Iconography Critiquehttp://www.cs.umd.edu/~jonf/

N/AIconography DescriptionNone

CritiqueN/A

Jon Froehlich Webpage: Typographyhttp://www.cs.umd.edu/~jonf/

Segoe UI Semibold

Segoe UI Light

You can provide Typography examples in two

ways (choose one):

1. Typography Example 1: shows UI snippets with description

2. Typography Example 2: shows interface with font descriptions

Note: Some apps/pages use many (many!) different kinds of fonts, weights, and sizes. Please just analyze the top N (where N is selected based on importance, frequency of use, etc).

Jon Froehlich Webpage: Typography Example 1http://www.cs.umd.edu/~jonf/

Page HeaderSegoe UI Light44pxStyle: Regular

Content HeaderSegoe UI Light14pxStyle: All Caps, larger

Content TextSegoe UI Light14pxStyle: Regular

Sidebar HeaderSegoe UI Light12pxStyle: All Caps, larger

Sidebar TextSegoe UI Light12pxStyle: Regular

News Item HeaderSegoe UI Semibold11pxStyle: Regular

Jon Froehlich Webpage: Typography Example 2http://www.cs.umd.edu/~jonf/

Page HeaderSegoe UI Light

44px, Style: Regular

Content HeaderSegoe UI Light

14px, Style: All Caps, larger

Content TextSegoe UI Light

14px, Style: Regular

Sidebar HeaderSegoe UI Light12px, Style: All Caps, larger

Sidebar TextSegoe UI Light12px, Style: Regular

News Item HeaderSegoe UI Semibold11px, Style: Regular

Jon Froehlich Webpage: Typography Critiquehttp://www.cs.umd.edu/~jonf/

Segoe UI Semibold

Segoe UI Light

Typography DescriptionUses the Segoe UI family. Most text is thin-weight (Light).

CritiquePositives: • The thin-weight font provides a clean aesthetic• The Segoe UI font family is modern looking and used, for example, in Windows 10 and Windows Phone

Negatives• Thin-weight fonts are harder to read• Generally, there is simply too much text on the frontpage

Other Things

Though not required, feel free to also critique:

• The use of imagery

• Animation

• Cross-page consistency

• On Web: responsive design

Interactive Prototype Design Critiques

Teams

1-7

2-8

3-9

4-10

5-11

6-12

Rearrange room to better fit activity.

Protocol

Explain application, target users, and goals

Have “users” try to use interactive prototype with

a think-aloud protocol. Observe actions and

write-down thoughts.

At end, solicit feedback on primary areas of

improvement. Try to prioritize next interactive

prototype features.