interaction design, q2 review is 403: user interface design shaun kane
TRANSCRIPT
Interaction design, Q2 review
IS 403: User Interface Design
Shaun Kane
The rest of the course
• Still 5 assignments and 2 quizzes left• Resubmit assignments!• Extra credit slots• Improvement counts
• Let me help (office hours, appointments, looking at assignments)
Some comments on A4…
• Lots of comments == good
• Tackle the hard problems– Search / result / detail pages are difficult– Login / error pages not so much
• Understand your use / understand users
• Presenting your first ideas vs. your best ideas
• Demonstrate your graphic design skills
Some comments on A4…
• Lots of comments == good
• Tackle the hard problems– Search / result / detail pages are difficult– Login / error pages not so much
• Understand your use / understand users
• Presenting your first ideas vs. your best ideas
• Demonstrate your graphic design skillsAlignment
Questions to ask
• Does some other site/app do what my site/app does?
• If so, is mine different? Is it better or worse?
• OK to copy (but do so creatively)
Some examples of interaction design…(we’ll do more next Thursday)
My cool site
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec egestas ligula. Duis tempor nec ante vel ornare. Quisque porta luctus velit, ut mattis neque pellentesque sollicitudin. Nulla porttitor nisl ut nisi vestibulum ullamcorper. Fusce vitae feugiat mi. Aenean faucibus, metus ac congue dictum, dolor nisl rutrum dolor, vel posuere metus lacus id tellus. Vestibulum in feugiat felis. Vivamus ac hendrerit ligula. Ut volutpat tellus ac ultricies egestas. Sed scelerisque tempus lorem nec sagittis. Sed sed elit volutpat, vestibulum urna non, dapibus lacus. Phasellus vehicula magna quam, eu venenatis magna elementum at. Cras gravida varius purus vel mollis. Mauris a ligula varius, congue dui sed, pellentesque felis.
Search
My cool site
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec egestas ligula. Duis tempor nec ante vel ornare. Quisque porta luctus velit, ut mattis neque pellentesque sollicitudin. Nulla porttitor nisl ut nisi vestibulum ullamcorper. Fusce vitae feugiat mi. Aenean faucibus, metus ac congue dictum, dolor nisl rutrum dolor, vel posuere metus lacus id tellus. Vestibulum in feugiat felis. Vivamus ac hendrerit ligula. Ut volutpat tellus ac ultricies egestas. Sed scelerisque tempus lorem nec sagittis. Sed sed elit volutpat, vestibulum urna non, dapibus lacus. Phasellus vehicula magna quam, eu venenatis magna elementum at. Cras gravida varius purus vel mollis. Mauris a ligula varius, congue dui sed, pellentesque felis.
Search
Wig store
ColorsRedGreenYellow
StylesStraightCurly
Search
Wig
Wig
Wig
Wig
Wig
Wig
Wig
Wig
Wig
Wig
Wig store
ColorsRedGreenYellow
StylesStraightCurly
Search
Wig
Wig
Wig
Wig
Wig
Wig
Wig
Wig
Wig
Wig
What am I looking at now?
How do I get straight and green?
How do users think about what they want?
Back
Name
Age
Birthday
Height
Weight
FavoritePokemon
Zodiacsign
OK Cancel
AlignmentBirthday –What goes where?
Birthday and age are redundant
Birthday as dropdownBirthday as popup
Zodiac should be dropdown
Home
Name
Age
Birthday
Height
Weight
FavoritePokemon
Zodiacsign
Create account
Back vs.Cancel?
Too much work
Use verbs forbuttons
Reading order
Q2
• What did we cover?– Color– Typefaces– Grids– Robin Williams perspective on design– Kids!– Design process
Source materials
• Lectures and slides (everything we’ve covered in class)
• Readings– Color– Type– Williams’ perspective on design– Guest speakers
What you’ll have to know
• Vocabulary / terminology
• How to identify design elements / themes– “How does this use the principle of contrast?”
• Apply it– “Use the principle of contrast to improve this
design”
Example Qs?
• Why uppercase vs. mixed case?• NO: What are the various types of color
schemes with examples?• What does RGB stand for?• Name 3 of Robin Williams’s design
principles
Design feedback
Work with a partner
Get feedback on your designs
Feedback from me