1 / 97

CS 4963: UI Design

CS 4963: UI Design. Interaction Design, Part 2. Today:. What is Interaction Design, anyways? How do we do interaction design? Fundamentals and Building Blocks Heuristics and Patterns Wrap up Agile UX Deliverables and practices Documentation. BUT FIRST. …so not a lot of images today.

hugh
Download Presentation

CS 4963: UI Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS 4963: UI Design Interaction Design, Part 2

  2. Today: • What is Interaction Design, anyways? • How do we do interaction design? • Fundamentals and Building Blocks • Heuristics and Patterns • Wrap up Agile UX • Deliverables and practices • Documentation

  3. BUT FIRST

  4. …so not a lot of images today.

  5. agile ux

  6. design 1 to 2 iterations ahead

  7. hardening iteration

  8. (From Budwig, Jeong, Kelkar.)

  9. (not yet right.)

  10. story team is important

  11. (everyone is figuring it out)

  12. most important is having overall vision

  13. sketching and prototyping

  14. sketching is brainstorming

  15. prototypes are interactive

  16. “I can always animate that interaction faster than you can code it.” —Chris Bernard, Microsoft UX Evangelist

  17. sketching

  18. thinking visually

  19. low-fi vs. high-fi

  20. sketching notations

  21. doesn’t have to be on paper

  22. video sketches

  23. participatory design

  24. design jams

  25. prototyping

  26. paper prototypes

  27. (choose your own adventure)

  28. code prototypes

  29. ideally want to carry over things

  30. styles and resources

  31. animation (!!!)

  32. tools

  33. THERE ARE A LOT OF THEM

  34. shootout of prototyping tools http://www.slideshare.net/suzeingram/spoilt-for-choice-which-prototyping-tool-is-right-for-you

  35. shootout of prototyping tools shootout of prototyping tools http://www.slideshare.net/suzeingram/spoilt-for-choice-which-prototyping-tool-is-right-for-you

  36. pick what’s appropriate to your project

  37. I <3SketchFlow

  38. processing.org& variants

  39. if you’re making a web page, prototype in markup

  40. jQuery, et al.ixedit

  41. documentation

  42. documentation is communication

  43. think about the why

  44. do what makes sense

  45. old school: giant spec docs

  46. each screen

  47. detailed lists of assets on each screen

  48. actions for every interactive element

More Related