Download as PDF, PPTX
Uploaded byMolly Wilson
Between Paper & Code
The document serves as an introduction to UX design and digital prototyping, emphasizing the importance of understanding user needs through research, planning, and testing. It covers various types of prototypes, including paper, interactive wireframes, and code prototypes, while providing guidance on interaction design principles and the design process. Additionally, it outlines strategies for organizing information architecture and offers practical exercises to enhance design skills.
In this document
Powered by AI
Explains UX design and digital prototyping; establishes context for training session.
Explains UX design and digital prototyping; establishes context for training session.
Discussion on user-centric research, planning, design, and testing in UX design.
Assessing design thinking students' knowledge and skills relating to UX and visual design.
Different kinds of digital prototypes; discusses paper, interactive wireframe, and code prototypes.
Building a designer's eye through practical activities and observations of user experiences.
Challenge to design a mobile app; includes steps in information architecture and interaction design.
Explores content-based vs task-based approaches; highlights navigation patterns in information architecture.
Dos and Don'ts in interaction design focusing on usability, consistency, and effective navigation.
Wraps up the presentation and provides resources for further exploration in UX design.
More Related Content
Between Paper & Code
- 2. (is this engineeryou? that’s still a problem.)
- 4. Between Paper &Code an introduction to UX design and digital prototyping Molly Wilson HPI School of Design Thinking July 2015
- 5. ORIENTATION What is UXdesign? Is it the same as DT? Kinds of prototypes Training your designer’s eye CREATE AN APP Information Architecture Interface Design with Sketch Prototype Creation with InVision
- 6. what do wemean when we say UX DESIGN?
- 7. What’s up withthe users?RESEARCH What do they need to do? What do we need them to do?PLAN How should the product work? How should the product look?DESIGN How are we doing?TEST What is UX design?
- 8. What’s up withthe users?RESEARCH What do they need to do? What do we need them to do?PLAN How should the product work? How should the product look?DESIGN How are we doing?TEST USER RESEARCH What is UX design?
- 9. What’s up withthe users?RESEARCH What do they need to do? What do we need them to do?PLAN How should the product work? How should the product look?DESIGN How are we doing?TEST INTERACTION DESIGN (IXD) What is UX design?
- 10. What’s up withthe users?RESEARCH What do they need to do? What do we need them to do?PLAN How should the product work? How should the product look?DESIGN How are we doing?TEST VISUAL (UI) DESIGN What is UX design?
- 11. What’s up withthe users?RESEARCH What do they need to do? What do we need them to do?PLAN How should the product work? How should the product look?DESIGN How are we doing?TEST USER TESTING What is UX design?
- 12. What’s up withthe users?RESEARCH What do they need to do? What do we need them to do?PLAN How should the product work? How should the product look?DESIGN How are we doing?TEST UX DESIGN What is UX design?
- 13. how much UX DESIGN dodesign thinking students already know?
- 14. What do youalready have? • open-minded interviewing and testing • getting a group of people on the same page • constantly designing with a mind to testing • quick iterative loops • fast sketching • cross-disciplinary teams • not taking feedback personally DT vs. UX
- 15. What else doyou need? • visual design software • visual design sensibility (typography, composition, color, etc.) • geeky, tech-loving attitude • familiarity with common UI patterns (comes with experience) • very organized • HTML/CSS/JS certainly doesn’t hurt DT vs. UX
- 16. Different kinds of DIGITALPROTOTYPES
- 17. Paper prototype Tipple app,by Kyle Donnellon Kinds of prototypes
- 18. Paper prototype Pens orpencils Paper or post-its Scissors Tape or glue Kinds of prototypes
- 19. Interactive wireframe Click-through prototype Clickdummy Drug information app, by me Kinds of prototypes
- 20. Interactive wireframe Drug informationapp, by me A way to draw images A way to link images together Sketch, Keynote, Powerpoint, InDesign, Illustrator, Balsamiq… Invision, Marvel, Pop… Kinds of prototypes
- 21. Code prototype Pizza Finderapp, by Leigh Shevchik Kinds of prototypes
- 22. Code prototype A wayto code the interface A way to store and/or get data HTML/CSS/JS (optionally with a library like jQuery Mobile), XCode, Swift… This is not my department :) Kinds of prototypes
- 23. Kinds of prototypes ?How does it feel to use? ? How should the app be organized? ? Where should stuff go on the screen? ? What actual words/images should I use? PAPER INTERACTIVE WIREFRAME CODE PROTOTYPE ? What happens when people really use this? ? What are the potential technical challenges? ? How does the data you’re pulling look? ? Is this even a good idea? ? What features should it have?
- 24. YOU’RE DONE HERE… Hardto change Not realistic enough Losing track of all the pieces of paper Sick of drawing the same thing over and over You need to share your idea with somebody outside your team … BUT YOU’RE NOT READY FOR THIS You don’t really know what you’re making yet Specialized skill you might not have May get you in an engineering mindset too early Kinds of prototypes WE’RE DOING THIS ONE.
- 25.
- 26.
- 27. With a partner,“book a hotel” on airbnb.com & booking.com • What do you notice first? Second? Third? • Do you care about the stuff you’re seeing? Why or why not? • What do you expect each click to do? Does it do what you expect? • How do you feel? Why? • Bonus: Make some “mistakes” and see what the website does. 10 minutesTrain your designer’s eye
- 28. you know whereyou are you know where you can go you know what you can do the thing you want is right there it looks familiar it gives you feedback
- 29. YOUR CHALLENGE: Design amobile app that helps individuals find and support local businesses.
- 30. 1. Information Architecture TaskID & organization; Navigation 2. Interaction Design Tech setup & Sketch tutorial; Whirlwind tour of dos and don’ts; Design session 3. Prototype Creation Exploring InVision; A quick word about user testing 4. Share Out
- 31.
- 32. Content-based approach vs. Task-based approach 1.Information Architecture
- 33. TOO SPECIFIC A DESIGNGOAL, NOT A TASK List all the tasks a user should be able to do in your product. Search for rooms by date/location Choose an available room Pay for room Compare available rooms Get confirmation from host Leave a review Read or reply to a host message Change or cancel a reservation Tell friends about my upcoming trip Rent out my own room Learn what Airbnb is See upcoming reservations 7 minutes Favorite a room See favorite rooms Decide where to travel 1. Information Architecture > Task identification Feel relaxed about travel Edit spelling of name TOO GENERAL Plan travel
- 34. cluster similar things together 1.Information Architecture > Task organization
- 35. map out thehappy path 1. Information Architecture > Task organization
- 36. Make clusters andpaths. • Cluster similar tasks near each other. • Name each cluster. • Are some of the clusters actually paths? If so, clarify the path. Paths can have branches in them. They can also connect to each other. 10 minutes1. Information Architecture > Task organization
- 37. Welcome to The adventurous,social way to travel. Create an Account Does this match our IA?
- 38. Browse Search FavoritesMy Profile InboxMy Trips 3 What about this?
- 39. Here’s the realdesign. Much better!
- 40. nav patterns Top menuwith overflow Examples from Smashing Magazine 1. Information Architecture > Navigation
- 41. nav patterns Bottom menuwith options within buttons Examples from Smashing Magazine 1. Information Architecture > Navigation
- 42. nav patterns Vertical menus Examplesfrom Smashing Magazine 1. Information Architecture > Navigation
- 43. nav patterns Examples fromSmashing Magazine Swipe navigation 1. Information Architecture > Navigation
- 44. 1. Information Architecture> Navigation Do a couple Post-It sketches with different nav patterns. • Look at your IA. What’s the ideal starting point for your user? • In your IA, how many different screens/areas does your app have? Are they all equal? Are some more important? • Look at similar apps and see what they do. No shame in copying. • You’ll also find pattern libraries on paperandcode.weebly.com. 7 minutes
- 45. kindly point yourinternet-machine to paperandcode.weebly.com
- 46. Time to getnerdy: Download Sketch. Download Font Awesome. Download Tethr. Links available on paperandcode.weebly.com. Do the tutorial. 25 minutes
- 47. a whirlwind tourof dos and don’ts
- 48. Buttons and Links •Make clear what’s clickable • Colors mean something – error, warning, success • You should never need to write directions for the user (like “click to proceed”) Is “Change PC Settings” a button? Image via Jakob Nielsen. this word is lighter gray. can you tell? 2. Interaction Design > Dos & Dont's
- 49. Mobile • Minimize typing! •Don’t have too many obscure tap/swipe/long- tap interactions – people can’t remember them all Image: Adobe Help Center 2. Interaction Design > Dos & Dont's
- 50. Search & Filter •Filters let the user refine the search results displayed • Make it clear how the user can start a new search • Use the right filter… toggle? check? radio button? dropdown? Yelp iOS app 2. Interaction Design > Dos & Dont's
- 51. Words • Be consistent.Don’t say “next” on one screen and “OK” on another one • Match the user’s feelings. Welcome them when they sign up, but be serious when they’re spending money. mailchimp.com 2. Interaction Design > Dos & Dont's
- 52. Dashboards • Think aboutwhat people are actually curious about. Don’t just show data for the sake of data. • Don’t imply % complete when there’s nothing to complete (for example, energy usage). Google Fit app 2. Interaction Design > Dos & Dont's
- 53. Use real content. WikimediaCommons yours truly 2. Interaction Design > Dos & Dont's
- 54. Don’t be “creative.” imagesfrom skeu.it 2. Interaction Design > Dos & Dont's
- 55. Don’t fuss toomuch with visuals! dribbble / Haziq Mir yours truly 2. Interaction Design > Dos & Dont's
- 56. Create your screens. •Use Tethr as a starting point, but don’t be afraid to mess with it. • Remember: copying is totally fine. 2. Interaction Design > Design Session 45 minutes
- 57. Link your screenstogether. • Create an account and start a project at invisionapp.com. • Export your screens as PDF, JPG, GIF, etc. Drag & drop them into Invision. • Link them together with hotspots. • Click “share” to view your prototype. 3. Prototype Creation > Exploring Invision 25 minutes
- 58. Three kinds ofremote testing 1. You do a videoconference with the user yourself 2. You use a service that recruits and surveys users 3. You use a service that collects data about a live website 3. Prototype Creation > User Testing
- 59. What did youmake? • How do our different design choices change the meaning of the concept? • How do our different design choices change the behaviors people are likely to do? 4. Share Out whatever we have left
- 60. The end… fornow ♥ Continue your UX design journey at paperandcode.weebly.com.