This document provides information on creating wireframes as part of the skeleton phase of a UX design process. It includes sections on preparing wireframes, expected user feedback, common wireframe elements, gestures, examples of homepage, listing, article and form pages, and tips for creating wireframes. The document also includes a usability checklist covering general usability concerns, specific pages and elements, forms, content, and recommendations.

1. UXToolkit
Phase Two: Skeleton

2. UXToolkit
discovery
PHASE 1
structure
PHASE 2
skeleton
PHASE 3

3. Table of contents
WIREFRAMES USABILITY CHECKLIST
Preparation Homepage
Reviewing your wireframes Navigation
Expected User Feedback Search
Choices Links
Wireframe Elements Layout
Gestures Forms
Content

4. CREATING
wireframes

5. PREPERATIONCREATING wireframes
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?
Where will users go from this page?
Where is this page on the site?

6. EXPECTED FEEDBACKCREATING wireframes
Something needs to be higher on the page.
Something should be the focus point for the user.
The call to action is weak
There’s too much/ not enough text or images

7. CHECKLISTCREATING wireframes
Something is missing
Something is confusing
Users can’t figure out what to do next
The most important content is not seen

8. CHOICESCREATING wireframes
When users want to finish task quickly
When the decision is difficult.
When the option are difficult to compare
When your users don’t know their preferences.
Having a lot of choice becomes a problem in four situations:

9. ELEMENTSCREATING wireframes
Landing Page Blog Article
Calendar Event About
Content News Magazine
Contact Form Chat
Comments Profile Product List

10. ELEMENTSCREATING wireframes
Tabs Map Directory
Gallery Link Download
Tags Pricing Search
Video Songs Stream
Success Error Login

11. GESTURESCREATING wireframes
Tap Hold
Double tap Tap & Hold
Drag Flick

12. GESTURESCREATING wireframes
Hold & Drag
Spread
Pinch

13. HOMEPAGE EXAMPLECREATING wireframesHomepage
Image
Menu
Header /Sub Text
Title/ Body Text
Button
Image

14. LISTING PAGE EXAMPLECREATING wireframes
HomepageVideo Player - Votes
Media
Tap for more info

15. ARTICLE EXAMPLECREATING wireframesBlog Article
User
Article

16. FORM EXAMPLECREATING wireframes
Input
Form
Submit
Title

17. FORM EXAMPLECREATING wireframes
Input
Form
Submit
Title

18. POP-UP EXAMPLECREATING wireframes
Lightbox/ Popup
Buttons
Pop-up
Close

19. EXAMPLECREATING wireframes
Error Ok, let’s move on

20. TIPSCREATING wireframes
Involve everyone
UX is not UI
Be lean
They can provide ideas/ solutions you have not thought about.
Avoid designing your wireframes. Focus on functionality.
Build. Measure. Learn.

21. USABILITY
checklist

22. GENERALUSABILITY checklist
Links are descriptive. There are no "click here" links.
The site description in the window title, easily understandable as a bookmark.
Site's URL is memorable.

23. HOMEPAGEUSABILITY checklist
Clear call for action
Positive first impression
Changes to the site are announced
Contact info is easily accessible
Privacy policy is clear
Images/ videos are meaningful
Audio doesn’t start automatically

24. NAVIGATIONUSABILITY checklist
Important links aren't placed in moving features (ex. auto-rotating carousels)
Alphabetical A-Z sorting is avoided.
Users know where they are on the site. (ex. Breadcrumbs)
Navigation is consistent on every page.

25. SEARCHUSABILITY checklist
Search bar is easy to find
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

26. LINKSUSABILITY checklist
Links are easily recognisable. They look clickable.
Visited links color is different than unvisited.
There are no broken links. Check with e.g. W3 Link Checker.

27. LAYOUTUSABILITY checklist
Site is responsive. Works with different screen sizes.
Related information is grouped together clearly.
Avoid pop-up windows
Pages aren't cluttered. There is enough white space to support scanning.
Consistency. Page layouts are consistent across the whole website.

28. FORMS PREPARATIONUSABILITY checklist
Know why you’re asking every question
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?

29. FORMS (1)USABILITY checklist
Simplicity. Only absolutely necessary questions are asked in forms.
Fields are labeled with common terms (ex. Name, Address)
When form errors occur, the cursor should move to the first problem field
Data should be validated next to the field before the form is submitted.

30. FORMS (2)USABILITY checklist
Avoid long dropdown menus.
Fields should automatic cal enter formatting data
Text boxes should be the correct length
Clearly distinguish between optional and required fields in the form

31. FORMS (3)USABILITY checklist
Field labels on forms should clearly explain what entries are desired
Forms should use autofocus where appropriate
Your fields should contain default values
Your interface should be compatible with source documents (when needed)

32. FORMS : ONE THINGUSABILITY checklist
Having only one thing on a page helps people to:
Focus on the specific question and its answer
Find their way through an unfamiliar process
Use the service on a mobile device
Recover easily from form errors

33. CONTENTUSABILITY checklist
There is adequate contrast between the text and background.
Content is scannable (ex. short paragraphs, descriptive headings, lists and images.
Written with common language (check: The Readability Test Tool.ges.)

34. EMPTY STATEUSABILITY checklist
Explanation of what content is going in that sectionWhat
Orientation of where the user is in the application or broader experienceWhere
Explanation the action or event that must occur for data to exist on this screenWhen
Click here to learn more

35. HIGHLY RECOMMENDEDUSABILITY checklist
Personalise features (ex. Language, currency, delivery based user’s location)
Buttons are clear. Avoid Next (ex. Free Trial or Register)
Prices are clearly displayed. There are no hidden costs or surprises in the T&Cs.
Build trust. (ex. Credible references, credentials, contact info, images, up-to-date )
Try before you buy. (ex. Sample newsletter next to a newsletter sign up form)

36. ENDINGUSABILITY checklist
End on a high note
The end of the user’s journey is the most important phase in UX design.
Ensure our users leave happy – reflect upon happiness – and keep coming back.
Check out User Memory Design by Curt Allege

37. UXToolkit
discovery
PHASE 1
structure
PHASE 2
skeleton
PHASE 3

38. UXDesigner
@maitedalila