PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super...
Transcript of PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super...
![Page 1: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/1.jpg)
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
![Page 2: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/2.jpg)
IA09 UI Design
![Page 3: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/3.jpg)
Jon Froehlich Webpage: Overview Screenshotshttp://www.cs.umd.edu/~jonf/
![Page 4: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/4.jpg)
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
![Page 6: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/6.jpg)
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)
![Page 7: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/7.jpg)
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
![Page 8: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/8.jpg)
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
![Page 9: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/9.jpg)
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
![Page 10: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/10.jpg)
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
![Page 11: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/11.jpg)
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
![Page 12: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/12.jpg)
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)
![Page 13: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/13.jpg)
Jon Froehlich Webpage: Iconography Critiquehttp://www.cs.umd.edu/~jonf/
N/AIconography DescriptionNone
CritiqueN/A
![Page 14: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/14.jpg)
Jon Froehlich Webpage: Typographyhttp://www.cs.umd.edu/~jonf/
Segoe UI Semibold
Segoe UI Light
![Page 15: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/15.jpg)
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).
![Page 16: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/16.jpg)
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
![Page 17: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/17.jpg)
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
![Page 18: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/18.jpg)
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
![Page 19: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/19.jpg)
Other Things
Though not required, feel free to also critique:
• The use of imagery
• Animation
• Cross-page consistency
• On Web: responsive design
![Page 20: PowerPoint Presentation€¦ · • Some of the news/travel out-of-date • Not super exciting/compelling UI • Fonts are a bit small. ... News Item Header Segoe UI Semibold 11px,](https://reader031.fdocuments.us/reader031/viewer/2022031011/5b94c4f609d3f219658dab60/html5/thumbnails/20.jpg)
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.