UX Toolkit: Phase Three - Skeleton

download UX Toolkit: Phase Three - Skeleton

of 38

  • date post

  • Category


  • view

  • download


Embed Size (px)

Transcript of UX Toolkit: Phase Three - Skeleton

1. UX Designer | Twitter @maitedalila Phase Two UX Toolkit Phase One discovery Phase Two structure Phase Three skeleton 2. Wireframes Usability Checklist Before you start Homepage Reviewing your wireframes Navigation Expected User Feedback Search Choices Links Wireframe Elements Layout Gestures Forms Example Content Table of Contents 3. Wireframe checklist 4. How will users will move around the site? What content is going to be on the page? Which content is most important on the page? How will the content be organized on the page? Where will users go from this page? Where is this page on the site? designing WIREFRAMES Preparing Wireframes 5. Is the most important content the rst thing you notice? Is anything important missing from the page? Is there anything on the page that shouldnt be there? Which content is related and how? Can you get to all of the major sections of the site from here? Should you be able to? Do all of the labels make sense? Review Wireframesdesigning WIREFRAMES 6. Something needs to be higher on the page. Something should be the focus point for the user. The call to action is weak Theres too much/ not enough text or images Something is missing Something is confusing Users cant gure out how they would take a particular action on a page The most important content is below the fold ? designing WIREFRAMES Expected Feedback 7. When users want to nish task quickly When the decision is dicult (either it matters a lot to your users or users dont understand what they are deciding When the option are dicult to compare When your users dont know their preferences. Having a lot of choice becomes a problem in four situations: Choices designing WIREFRAMES 8. Landing Page Article Calendar Event Team News Magazine Contact Form Chat Comments Prole Product List Product Cart Payment Form Blog Content Elements designing WIREFRAMES 9. Tabs Songs Maps Directory Tags Pricing Search Success Error Share External Website Gallery Video Login Download Stream Elements ect designing WIREFRAMES 10. Gestures Tap Hold Double tap Tap Hold Twin tap Twin tap hold Flick Drag designing WIREFRAMES 11. designing WIREFRAMES Gestures Hold and Drag PinchSpread 12. designing WIREFRAMES Homepage Example Homepage Image Menu Header /Sub Text Title/ Body Text Button Image 13. designing WIREFRAMES Listing Page Example HomepageVideo Player - Votes Media Tap for more info 14. designing WIREFRAMES Article Example HomepageVideo Player - VotesBlog Article User Article 15. designing WIREFRAMES Form Example HomepageVideo Player - VotesBlog Article Input Form Submit Title 16. designing WIREFRAMES Pop-up Example Lightbox/ Popup Buttons Pop-up Close 17. Example Error Ok, lets move on designing WIREFRAMES 18. Tips Involve everyone. (Copywriters, marketing, developers, stakeholders etc) They can provide ideas and solutions you have not thought about. Remember: UX is not UI Avoid designing your wireframes too much. It can be distracting when you are trying to focus on functionality. Be lean. Choose the right tools. Its totally okay to start with pen and paper and work you way up to high-delity as you iterate. designing WIREFRAMES 19. Catch common usability problems https://userium.com/ USABILITY checklist 20. USABILITY checklist Clear call for action. Users know what to do next and why it benets them, The home page creates a positive rst impression. Logged in users name is displayed on the site Ex. Hello Charles Changes to the site are announces. Ex. Changes in delivery policy. Company location and contact information easily accessible Privacy policy is clear Images/ videos are relevant and meaningful. No stock photos. Audio does not start automatically. Created by David Pareja from the Noun Project Homepage 21. USABILITY checklist Important links aren't placed in moving features, Ex. auto-rotating carousels or accordions. Alphabetical A-Z sorting is avoided. It is used only when there are no better alternatives, such as grouping items into descriptive, related groups. Users know where they are on the site. EX. Breadcrumbs. Also, there is a site map on large sites. Navigation is consistent on every page. Navigation 22. USABILITY checklist Links are descriptive. There are no "click here" links. There is a site description in the window title, which is easily understandable as a bookmark. Site's URL is memorable. Navigation 23. Search Search bar is easy to nd Search is available on every page, not just the homepage. In line text with suggestions of what users can search Auto complete as users type USABILITY checklist 24. Links USABILITY checklist Links are easily recognizable. They look clickable. Visited links color is dierent than unvisited. There are no broken links. Check with e.g. W3 Link Checker. 25. Layout USABILITY checklist Site is responsive. Works with dierent screen sizes. Related information is grouped together clearly. Avoid pop-up windows Consistency. Page layouts are consistent across the whole website. Pages aren't cluttered. There is enough white space to support scanning. 26. Forms USABILITY checklist Simplicity. Only absolutely necessary questions are asked in forms. Fields are labeled with common terms, e.g. Name, Address (supports autoll). Data should be validated next to the eld before the form is submitted. When form errors occur, the cursor should move to the rst problem eld 27. Forms USABILITY checklist Fields should automatic cal enter formatting data Clearly distinguish between optional and required elds in the form Text boxes should be the correct length Avoid long dropdown menus. 28. Forms USABILITY checklist Field labels on forms should clearly explain what entries are desired Forms should use autofocus where appropriate Your elds should contain default values Your interface should be compatible with source documents (when needed) 29. Forms Know why youre asking every question why does the service need that information? who uses the information and what for? which users need to provide the information? how will you check that the information is accurate? how will you keep the information up to date? USABILITY checklist 30. Forms Start with one thing per page One thing could be: one piece of information to understand one decision to make one question to answer USABILITY checklist 31. Forms Start with one thing per page Having only one thing on a page helps people to: understand what theyre being asked to do focus on the specic question and its answer nd their way through an unfamiliar process use the service on a mobile device recover easily from form errors USABILITY checklist 32. Forms example Start with one thing per page It also helps you to: save peoples work automatically as they go capture analytics about each question handle branching questions and loops USABILITY checklist 33. Content USABILITY checklist Contrast. There is adequate contrast between the text and background. Also, accesible for color blind. Check with e.g. Check My Colours Content is scannable. There are short paragraphs, descriptive headings, lists and images. Visual content is used when appropriate, instead of large amounts of text. Content is written with common language that users easily understand. Check with e.g.: The Readability Test Tool. Contact and company information is clearly displayed. Clicking the contact link doesn't automatically open a mail application. 34. First-use Empty State USABILITY checklist An explanation of what content is going in that section What An orientation of where the user is in the application or broader experience Where An explanation of the timing of your product and the action or event that must occur for data to exist on this screen When Deliver this information in a show-or-tell format Click here for more examples 35. USABILITY checklist Personalized features. Language currency, delivery options are changed based on user's location. Buttons are clear. Ex. "Free Trial" button, Register Avoid Next Prices are clearly displayed. There are no hidden costs or surprises in the terms. Sample content. For example there is a sample newsletter next to a newsletter sign up form. Credible references, credentials, contact information, location, and images of real people are displayed on the website and up-to-date. Uncluttered. Info is scannable and images can be enlarged or zoomed in on for more details highly recommended 36. Take-away End on a happy note The end of the users journey is the most important phase in UX design. By providing a means to an end, we ensure our users leave happy reect upon happiness and keep coming back for more. designing WIREFRAMESUSABILITY checklist 37. Phase One discovery Phase Two structure Phase Three skeleton UX Toolkit 38. Twitter @maitedalila UX Designer