Rapid Wireframing & Prototyping - Arabnet Riyadh 2014

Presentation slides from a workshop lead by UXBERT at Arabnet Riyadh Design + Code Day 2014. Based on the Build-Measure-Learn cycle, the premise of the workshop was that you should aim to put your design in front of real users as early as possible to validate both your idea and your design.

Transcript

1. T h e E x p e r i e n c e M a t t e r s
2. RAPID WIREFRAMING & PROTOTYPING Arabnet, Riyadh 11/11/2014 Nadeem Bakhsh @UXBERT
3. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary
4. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary AGENDA  Download and Install Software bit.ly/uxbertistudio  Foundations of Usability & UX  UCD Process  Ideas  Wireframes  Prototypes  User Testing  User Testing with UXBERT
5. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary WHAT IS UX? The User Experience: Sum of all the interaction users have with a brand, company or organization over time. Every department effects the experience and all decisions should be made with the user in mind.
6. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary  The User Experience matters today more than ever before. It’s more than making things look good, it’s about creating an experience that is easy to use, stands out, delights users and creates real value for your business.  Which brands are winning with UX today? Apple, Facebook, Google, Amazon. Companies that put UX first create massive value through compelling and delightful user experiences. Twitter expects $1 billion in ad revenue in 2014. Instagram sold to Facebook for $900 million. Pinterest valued at over $2.5 billion. Whatsapp sold for $19 billion to Facebook. Airbnb & Uber valued over $10 billion each. WHY
7. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary OH YEAH… I FORGOT It directly effects the bottom line. Good UX leads to Increased Revenue. Yes. $$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$
8. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary USER EXPERIENCE PYRAMID UX Strategy Design Development Testing Research
9. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary DESIGN NEEDS  Creativity  Aesthetic beauty innovate interactions  Design perceived to be of the highest level  Proficiency  Empower people to do more and better  Design perceived to be of the highest level  Usability  Design is forgiving, easy to use design  Design perceived to be of moderate value  Reliability  Stable and consistent performance design  Design perceived to be of low value  Functionality  Design works, meets basic functional needs  Design perceived to have little to no value
10. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary USABILITY 101 Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design? Efficiency: Once users have learned the design, how quickly can they perform tasks? Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency? Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors? Satisfaction: How pleasant is it to use the design? Utility: Which refers to the design's functionality: Does it do what users need? There are many other important quality attributes. Crash Course Handout: http://bit.ly/usability101uxbert
11. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary USABILITY ‘HOME RUN’ Jakob Nielsen’s principles for a successful website: High quality content Often updated Minimal down time Easy to use Relevant to users’ needs Unique to the online world Net-centric corporate culture
12. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary USABILITY HEURISTICS  Visibility of system status  Match between system and the real world  User control and freedom  Consistency and standards  Error prevention  Recognition rather than recall  Flexibility and efficiency of use  Aesthetic and minimalist design  Help users recognize, diagnose, and recover from errors  Help and documentation (Jakob Nielsen)
13. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary 8 GOLDEN RULES OF UI DESIGN  Strive for consistency  Enable frequent users to use shortcuts  Offer informative feedback  Design dialog to yield closure  Offer simple error handling  Permit easy reversal of actions  Support internal locus of control  Reduce short-term memory load (Ben Shneiderman)
14. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary VISUAL DESIGN PRINCIPLES  Balance  Proximity  Alignment  Consistency  Contrast  White Space
15. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary INTERESTING UX THEORIES  2 Second rule  3 Click rule  Fitt’s law  Satisficing  Baby duck syndrome  Mental models  Readability  Visual noise & chunking
16. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary UCD PROCESS, TEST, TEST & TEST Discovery User Research Wireframe Concepts & Test Interaction Design & Test Visual Design & Test Development & Test Analytics & Test
17. “Fail early, fail fast, fail often.”
18. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary WHY WIREFRAME & PROTOTYPE  To quickly test and refine your ideas, designs and products  Achieve maximum usability and UX with a minimum long term costs (time and resources)  Iterative testing cycles with 5 users finds 85% of all problems. With 15 users can identify almost all problems.  Only 2 users could likely find half the problems with a site.  Effective user testing doesn’t have to be extensive  The best usability results come from testing no more than 5 users and running as many tests possible. http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
19. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary  The aim is to get your idea/design in front of your users as early as possible  This way you detect and fix usability problems early, avoiding high costs of fixing a problem once you’ve started coding.  The best way to identify flaws in your product with your actual users  Shows how real users actually interact with your product, provides valuable insight on which features to prioritize. TEST EARLY, TEST OFTEN
20. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary IDEA!  Excellent!  Start with research.  Don’t redesign the wheel.  What problem does your idea solve?  What is the main story?
21. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary BUT IS IT A GOOD IDEA? How do you validate real demand/excitement for your idea and execution before you start coding it? (aka wasting $$$)
22. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary NO SKILLS REQUIRED  The software discussed, Indigo Studio, is intuitive  Drag & Drop  You don’t need a designer or developer to do it  It is better if you do it, then use it to explain to the designers and developers after.
23. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary OPEN INDIGO STUDIO  Download and install: bit.ly/uxbertistudio  Start by watching the introduction videos.  Once you understand how simple it is, just using drag and drop, creating storyboards, wireframes and prototypes becomes intuitive.
24. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary USER STORIES  Identify your users, people you know don’t count, create personas based on actual research  Create a storyboard, focus on your users  High level interaction flow diagram of pictures and narrative text in a sequence that usually represents a time line  Storyboards help us tell stories about what people do, think, feel or would like to do
25. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary MAKING STORYBOARDS EASY! DRAG AND DROP!
26. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary STORYBOARDS
27. “Forget the pretty pictures. Help people do what they want.”
28. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary WIREFRAMING  Page/app basics  Logo + tag line  Navigation  Search  Content & copy  Think about different user types and contexts  Do it quick and dirty. It doesn’t have to be pixel-perfect
29. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary WIREFRAMING RESOLUTIONS Device Resolution Desktop 31% W3Schools.com Jan 2014 1366x768 iPad Air 2048x1536 Samsung Tab 1024x600 Google Nexus 6 1440x2560 Google Nexus 5 1080x1920 iPhone 6 1334x750 iPhone 5s 640 X 1136 Samsung S5 1920x1080 Samsung S4 1080x1920 Motorola 360 Smartwatch 320x290 1. Create a new project and pick a ‘viewport’: desktop, tablet or phone. 2. You can use the default resolutions or these below:
30. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary  Drag & Drop  Right click any dragged element for interactions WIREFRAME
31. “Prototypes aren’t the end, they’re the means”
32. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary PROTOTYPING  Bring wireframes to life.  Can be as pretty as Frankenstein. Don’t worry.  Just to get a feel for the human computer interaction flow  Enables stakeholders, team, users and clients to gain first-hand insights of the problem  What does it look like? Behave like? Work like?  Does it do what the business and user needs?
33. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary PROTOTYPE
34. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary USABILITY TESTING  Test your home page’s Value Proposition  What is this site for? What can I do here? Why should I use it?  Test your main business & user goals?  Are they the same?  Tips for Avoiding Testing Dangers  “Someone else did it, its not my work”  Don’t ask users what they will do, ask about what they have done in the past  Don’t introduce bias, it takes practice  Don’t give away clues or ask leading questions, “Where is the ‘Buy’ button?”  Don’t answer questions, take notes and observe why they asked the question?
35. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary UX & UI Analytics  Conversion funnels  Form engagement & abandonment analytics  Error tracking & statistics  Mouse movements & page scrolling  Eye tracking flows  In page click heat maps and confetti  Etc…
36. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary TEST AT THE UXBERT USABILITY LAB  Fully equipped state-of-the-art usability lab in Riyadh  Testing room with observation/viewing facilities  Industry leading eye tracking devices and software  Real users recruited for testing  Experienced UX researchers  Full UX process  Iterative design  Build – Measure – Learn  Experience with a range of prototypes
37. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary WE’RE HIRING IN RIYADH!  We’re looking for passionate:  Web Designers  Web Developers  Mobile Application Developer  Cognitive Psychologists  Check out uxbert.com/careers & apply now!
38. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary USER REVOLUTION
39. © 2014 - Riyadh, Saudi Arabia – Confidential & Proprietary THE REALITY