interaction design, q2 review is 403: user interface design shaun kane
TRANSCRIPT
![Page 1: Interaction design, Q2 review IS 403: User Interface Design Shaun Kane](https://reader036.vdocuments.us/reader036/viewer/2022082517/56649f315503460f94c4d0f4/html5/thumbnails/1.jpg)
Interaction design, Q2 review
IS 403: User Interface Design
Shaun Kane
![Page 2: Interaction design, Q2 review IS 403: User Interface Design Shaun Kane](https://reader036.vdocuments.us/reader036/viewer/2022082517/56649f315503460f94c4d0f4/html5/thumbnails/2.jpg)
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)
![Page 3: Interaction design, Q2 review IS 403: User Interface Design Shaun Kane](https://reader036.vdocuments.us/reader036/viewer/2022082517/56649f315503460f94c4d0f4/html5/thumbnails/3.jpg)
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
![Page 4: Interaction design, Q2 review IS 403: User Interface Design Shaun Kane](https://reader036.vdocuments.us/reader036/viewer/2022082517/56649f315503460f94c4d0f4/html5/thumbnails/4.jpg)
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
![Page 5: Interaction design, Q2 review IS 403: User Interface Design Shaun Kane](https://reader036.vdocuments.us/reader036/viewer/2022082517/56649f315503460f94c4d0f4/html5/thumbnails/5.jpg)
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)
![Page 6: Interaction design, Q2 review IS 403: User Interface Design Shaun Kane](https://reader036.vdocuments.us/reader036/viewer/2022082517/56649f315503460f94c4d0f4/html5/thumbnails/6.jpg)
Some examples of interaction design…(we’ll do more next Thursday)
![Page 7: Interaction design, Q2 review IS 403: User Interface Design Shaun Kane](https://reader036.vdocuments.us/reader036/viewer/2022082517/56649f315503460f94c4d0f4/html5/thumbnails/7.jpg)
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
![Page 8: Interaction design, Q2 review IS 403: User Interface Design Shaun Kane](https://reader036.vdocuments.us/reader036/viewer/2022082517/56649f315503460f94c4d0f4/html5/thumbnails/8.jpg)
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
![Page 9: Interaction design, Q2 review IS 403: User Interface Design Shaun Kane](https://reader036.vdocuments.us/reader036/viewer/2022082517/56649f315503460f94c4d0f4/html5/thumbnails/9.jpg)
Wig store
ColorsRedGreenYellow
StylesStraightCurly
Search
Wig
Wig
Wig
Wig
Wig
Wig
Wig
Wig
Wig
Wig
![Page 10: Interaction design, Q2 review IS 403: User Interface Design Shaun Kane](https://reader036.vdocuments.us/reader036/viewer/2022082517/56649f315503460f94c4d0f4/html5/thumbnails/10.jpg)
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?
![Page 11: Interaction design, Q2 review IS 403: User Interface Design Shaun Kane](https://reader036.vdocuments.us/reader036/viewer/2022082517/56649f315503460f94c4d0f4/html5/thumbnails/11.jpg)
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
![Page 12: Interaction design, Q2 review IS 403: User Interface Design Shaun Kane](https://reader036.vdocuments.us/reader036/viewer/2022082517/56649f315503460f94c4d0f4/html5/thumbnails/12.jpg)
Home
Name
Age
Birthday
Height
Weight
FavoritePokemon
Zodiacsign
Create account
Back vs.Cancel?
Too much work
Use verbs forbuttons
Reading order
![Page 13: Interaction design, Q2 review IS 403: User Interface Design Shaun Kane](https://reader036.vdocuments.us/reader036/viewer/2022082517/56649f315503460f94c4d0f4/html5/thumbnails/13.jpg)
Q2
• What did we cover?– Color– Typefaces– Grids– Robin Williams perspective on design– Kids!– Design process
![Page 14: Interaction design, Q2 review IS 403: User Interface Design Shaun Kane](https://reader036.vdocuments.us/reader036/viewer/2022082517/56649f315503460f94c4d0f4/html5/thumbnails/14.jpg)
Source materials
• Lectures and slides (everything we’ve covered in class)
• Readings– Color– Type– Williams’ perspective on design– Guest speakers
![Page 15: Interaction design, Q2 review IS 403: User Interface Design Shaun Kane](https://reader036.vdocuments.us/reader036/viewer/2022082517/56649f315503460f94c4d0f4/html5/thumbnails/15.jpg)
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”
![Page 16: Interaction design, Q2 review IS 403: User Interface Design Shaun Kane](https://reader036.vdocuments.us/reader036/viewer/2022082517/56649f315503460f94c4d0f4/html5/thumbnails/16.jpg)
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
![Page 17: Interaction design, Q2 review IS 403: User Interface Design Shaun Kane](https://reader036.vdocuments.us/reader036/viewer/2022082517/56649f315503460f94c4d0f4/html5/thumbnails/17.jpg)
Design feedback
Work with a partner
Get feedback on your designs
Feedback from me