The Right Way to Wireframe: A Case Study on Wireframing vs Prototyping for UX Design
•
4 j'aime•1,053 vues
This document discusses different approaches to wireframing and prototyping. It describes an experiment where 4 designers each used different tools to design the user journey for funding a loan on a website without communicating. This led to duplication of work but also different perspectives. The document emphasizes that sketching, critique, and choosing the right tool for the job are important principles rather than arguing over specific methods. Wireframing and prototyping should facilitate collaboration and understanding user needs.
Recommandé
Recommandé
Contenu connexe
Similaire à The Right Way to Wireframe: A Case Study on Wireframing vs Prototyping for UX Design
Similaire à The Right Way to Wireframe: A Case Study on Wireframing vs Prototyping for UX Design (20)
Plus de Russ U
Plus de Russ U (20)
Dernier
Dernier (20)
The Right Way to Wireframe: A Case Study on Wireframing vs Prototyping for UX Design
- 1. THE RIGHT WAY TO WIREFRAME FRONTEND 2011 | #rwtw Russ Unger | @russu Image Source © Time Inc.
- 2. We don’t show OUR WORK
- 3. DESIGNERS Do It
- 4. DESIGNERS Do It
- 5. DEVELOPERS Do It
- 6. DEVELOPERS Do It
- 8. We don’t show OUR WORK
- 9. “My work is proprietary.” MINE, TOO.
- 10. Have you ever seen A WIREFRAME FROM...
- 11. Peter Morville
- 12. al Navigation Default state store 009 Version 1.0 logo search 2 Jesse James Garrett 1 cart n HBR today on current account blogs books authors HBS downloads page highlights timely content from the blogs, magazine, hbr magazine 3 s sections. explore hbr 4 ea expand your knowledge build your expertise discover new approaches provides a focal point for all e-commerce related links. page allows users to find aggregated links to content from Partially expanded state uthors across blogs, magazine, and books sections. drawer store logo search andable area encourages and facilitates exploration of cart y subject. today on current account blogs books authors HBS downloads your knowledge hbr magazine features editorially selected sub-categories from the current Strategy Decision making explore hbr Business processes ategory in search results. Leadership Interpersonal skills Management by objectives Organizational change Project management Quality management ur expertise Information & technology Managing uncertainty Forecasting features editorially selected sub-categories from the current ment Skills” category in search results. new approaches features editorially selected sub-categories from the current 5 Global business expand your knowledge Jesse James Garret Time management build your expertise 6 Knowledge management discover new approaches 7 Methodologies” category in search results. nks Fully expanded state ks drive users interested in exploring further to dedicated store ages. logo search cart today on current account blogs books authors HBS downloads hbr magazine explore hbr more topics » more skills » more methods » 8 Strategy Decision making Business processes Leadership Interpersonal skills Management by objectives Organizational change Project management Quality management Information & technology Managing uncertainty Forecasting Global business Time management Knowledge management expand your knowledge build your expertise discover new approaches sign | Harvard Business Review
- 13. “I’ve never done a wireframe*” * Jared Spool
- 14. What is the best tool? WIREFRAMING OR PROTOTYPING
- 15. “Now that I’m a consumer of wireframes, I want to see prototypes!” Christina Wodtke | @cwodtke “You can’t say that works for everyone just because it works for you now!” Me | @russu
- 16. “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!”
- 17. sigh.
- 18. I <3 and...
- 19. They are just Communication Tools. Arguing about wireframes vs. prototypes is MISSING THE POINT
- 20. It was time to NUT UP OR SHUT UP
- 21. 4 DESIGNERS
- 22. Russ Will Fred Todd
- 23. What is the best tool? WIREFRAMING OR PROTOTYPING
- 24. Balsamiq HTML & Omnigraffle Axure RP Mockups Fireworks Wireframes Prototypes
- 25. Three RULES
- 26. Three RULES - EVERYONE uses a different tool - EVERYTHING is documented - NO ONE talks to each other
- 27. The CASE STUDY
- 28. “If we can give $5 to a stranger at a coffee shop, why can’t we do that for healthcare?” Tori Tuncan 98 Loans for a total of $72,848
- 30. whew.
- 31. Design the path for funding a loan. The OBJECTIVE
- 32. How it’s done TODAY - user reviews profiles/needs in the blog format - user determines amount they can loan - user contacts lend4health - lend4health connects user and loan recipient - lend4health supplies loan agreement - user funds loan via paypal - lender repays funds via paypal per agreement - lender supplies updates to child’s progress to lend4health and lender lend4health updates progress on website - continues until loan is paid back
- 33. whew.
- 34. The APPROACH
- 36. User & Company RESEARCH
- 37. User PERSONAS
- 38. Task Analysis GRID
- 39. Inspiration LIBRARY
- 40. This is how I DID IT
- 41. Requirements ANALYSIS
- 42. Persona CONSIDERATION
- 43. Information ARCHITECTURE
- 44. Information ARCHITECTURE
- 45. Angela: Loan Funder USER JOURNEY Angela Reviews Angela arrives at Angela Searches for a Details of Loan Lend4Health.com Loan to Fund com/photos/ Request http://www.flickr. 06/2912606267/ (0.0.0.0) (1.0.0.0) 11762156@N (1.1.0.0)
- 46. Pencil & Paper SKETCHING Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
- 47. Quantity over quality 15 SKETCHES / 3 SCREENS
- 48. The Original PRESENTATION
- 49. Balsamiq Mockups WIREFRAMING Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
- 51. Brad Simpson VISUAL DESIGN Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
- 52. Lend4Health.com LOAN PAGE SEARCH LOANS HOMEDETAILS
- 53. Pretty Cool.
- 54. Here’s the ENTIRE PROCESS
- 56. Four Designers LOTS OF OVERLAP
- 57. Information ARCHITECTURE
- 58. Information ARCHITECTURE
- 59. Information ARCHITECTURE
- 60. Pencil & Paper SKETCHING
- 61. Pencil & Paper SKETCHING
- 62. Pencil & Paper SKETCHING
- 63. Pencil & Paper SKETCHING
- 64. Visual DESIGN
- 65. Visual DESIGN
- 66. Visual DESIGN
- 67. Visual DESIGN
- 68. Online VIDEOS http://is.gd/curls http://is.gd/curow http://is.gd/curw2 http://is.gd/curpN
- 69. Changing Times & NEW CONSIDERATIONS
- 70. Responsive DESIGN
- 71. Responsive DESIGN
- 72. Responsive DESIGN
- 73. Biggest, Smallest, “Just Right” GOLDILOCKS Matthew Milan Source: Wireframes Magazine http://wireframes.linowski.ca/2011/09/responsive-layout-wireframe/ @mmilan
- 74. Localization & LANGUAGES
- 75. So WHAT?
- 76. The primary CHALLENGES - UNABLE to talk/collaborate - RESEARCH handed to us - NO FORMAL usability testing - DEVELOPER was unknown
- 77. Core PRINCIPLES - SKETCHING (a lot) is THINKING (a lot) - CRITIQUE is extremely essential - BEST TOOL: the one you know Find Your Right Way Here!
- 78. THANK YOU! FRONTEND 2011 | #rwtw Russ Unger | @russu Image Source © Time Inc.