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 skills Alignment

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 Colors Red Green Yellow Styles Straight Curly Search Wig

Wig store Colors Red Green Yellow Styles Straight Curly Search 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 Favorite Pokemon Zodiac sign OK Cancel Alignment Birthday – What goes where? Birthday and age are redundant Birthday as dropdown Birthday as popup Zodiac should be dropdown

Home Name Age Birthday Height Weight Favorite Pokemon Zodiac sign Create account Back vs. Cancel? Too much work Use verbs for buttons 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