Your SlideShare is downloading. ×
Website Usability | Day 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Website Usability | Day 2

1,467
views

Published on

Published in: Design, Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,467
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
53
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. INFORMATION ARCHITECTUREMonday, July 16, 2012
  • 2. INFORMATION ARCHITECTURE The structure or organization of your website. Shows how different pages relate to one another. Involves content analysis, page organization, labels, cues, search techniques and navigation. Can help people find their way through the information, & ignore what isn’t relevant.Monday, July 16, 2012
  • 3. IA IS ORGANIZATION All about creating groups that make sense to the people who use them. Supermarkets don’t organize Swiss cheese with Swiss chocolate, Belgian chocolate with Belgian beer.Monday, July 16, 2012
  • 4. IA ON THE WEB In supermarkets it’s done with layout, sign age and visual guides. On websites we use navigation bars button and links.Monday, July 16, 2012
  • 5. Monday, July 16, 2012
  • 6. IA IS ALL ABOUT: 1. Organizing content or objects 2. Describing them clearly 3. Providing ways for people to get to themMonday, July 16, 2012
  • 7. WHERE DO YOU FIND IA? 1. Wherever you need to organize information or objects 2. Websites, intranets 3. File system at work or home, movies, music, or even groceries on a shelf!Monday, July 16, 2012
  • 8. WHAT YOU NEED TO UNDERSTAND ...in order to develop a successful IAMonday, July 16, 2012
  • 9. PEOPLE What they need do to, how they think & what they already know.Monday, July 16, 2012
  • 10. CONTENT What you have, what you should have & what you need.Monday, July 16, 2012
  • 11. CONTEXT The business or personal goals for the site, who else will be involved & what your constraints are.Monday, July 16, 2012
  • 12. PEOPLE CONTENT CONTEXTMonday, July 16, 2012
  • 13. IA STARTS WITH Defining the project & its goals Researching end users Reviewing all content Understanding technological & design constraintsMonday, July 16, 2012
  • 14. IA WILL DESCRIBE Overall structure of the site Groups & sub groups (to be used in navigation – includes what they will be called) Metadata: what you’ll use to describe productsMonday, July 16, 2012
  • 15. WINESHOP HOME | PRODUCTS | SERVICES | ABOUT US | C O N TA C T PRODUCTS Home > Products > Wine > Usability Chardonnay 2010 Wine Lorem ipsum dolor sit amet, consectetur Food adipiscing elit. Praesent sodales, sapien ut Sed vitae libero et nunc consequat adipiscing. Ut sit Glasses porta blandit, metus dui imperdiet ipsum, id amet libero magna. In ac eleifend est nulla eu orci. Mauris lectus eros, aliquam est. Morbi ac lorem Kitchenware rutrum at lobortis ut, eleifend eget eros. Nulla massa, et tincidunt erat. at felis eget neque aliquam convallis. Aliquam elit risus, facilisis eu congue et, adipiscing Buy Now Usability vitae eros. Pellentesque eleifend pellentesque Chardonnay felis. Vivamus eleifend tortor in enim 2010 consequat tristique. Donec sit amet metus sem. Integer quis massa nunc. Integer nec purus vehicula urna aliquam elementum.Monday, July 16, 2012
  • 16. WINESHOP HOME | PRODUCTS | SERVICES | ABOUT US | C O N TA C T PRODUCTS Home > Products > Wine > Usability Chardonnay 2010 Wine Lorem ipsum dolor sit amet, consectetur Food adipiscing elit. Praesent sodales, sapien ut Sed vitae libero et nunc consequat adipiscing. Ut sit Glasses porta blandit, metus dui imperdiet ipsum, id amet libero magna. In ac eleifend est nulla eu orci. Mauris lectus eros, aliquam est. Morbi ac lorem Kitchenware rutrum at lobortis ut, eleifend eget eros. Nulla massa, et tincidunt erat. at felis eget neque aliquam convallis. Aliquam elit risus, facilisis eu congue et, adipiscing Buy Now Usability vitae eros. Pellentesque eleifend pellentesque Chardonnay felis. Vivamus eleifend tortor in enim 2010 consequat tristique. Donec sit amet metus sem. Integer quis massa nunc. Integer nec purus vehicula urna aliquam elementum. THIS IS IA.Monday, July 16, 2012
  • 17. NAVIGATION Dependent on the IA Done after IA is drafted Includes: Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes & site mapsMonday, July 16, 2012
  • 18. WINESHOP HOME | PRODUCTS | SERVICES | ABOUT US | C O N TA C T PRODUCTS Home > Products > Wine > Usability Chardonnay 2010 Wine Lorem ipsum dolor sit amet, consectetur Food adipiscing elit. Praesent sodales, sapien ut Sed vitae libero et nunc consequat adipiscing. Ut sit Glasses porta blandit, metus dui imperdiet ipsum, id amet libero magna. In ac eleifend est nulla eu orci. Mauris lectus eros, aliquam est. Morbi ac lorem Kitchenware rutrum at lobortis ut, eleifend eget eros. Nulla massa, et tincidunt erat. at felis eget neque aliquam convallis. Aliquam elit risus, facilisis eu congue et, adipiscing Buy Now Usability vitae eros. Pellentesque eleifend pellentesque Chardonnay felis. Vivamus eleifend tortor in enim 2010 consequat tristique. Donec sit amet metus sem. Integer quis massa nunc. Integer nec purus vehicula urna aliquam elementum. THIS IS NAVIGATION.Monday, July 16, 2012
  • 19. DEVELOPING AN ARCHITECTUREMonday, July 16, 2012
  • 20. REVIEW: Results of your requirements & task analyses Earlier versions of site Competitors’ sitesMonday, July 16, 2012
  • 21. THIS DEVELOPS LIST OF: Content pieces Candidate labels Organization schemesMonday, July 16, 2012
  • 22. EVALUATE CONTENT FOR: Quality Completeness Add & design that’s needed Create content inventoryMonday, July 16, 2012
  • 23. content inventoryMonday, July 16, 2012
  • 24. content inventoryMonday, July 16, 2012
  • 25. CREATE & EVALUATE STRUCTURE: Brainstorm content categories & site structures Decide which content belongs together on a page User test & refineMonday, July 16, 2012
  • 26. MAP THE PAGES: Create a sitemap starting with highest priorities Add short cuts & redundant links Add necessary support tools, such as Help, Site Map, SearchMonday, July 16, 2012
  • 27. DEVELOP NAVIGATION BAR: Refine layout & orienting of information i.e., headers, page titles Establish final labels & graphics Remember users’ mental models Do user testingMonday, July 16, 2012
  • 28. IMPLEMENT: Build the site & update specs as needed Test the site Train maintenance staffMonday, July 16, 2012
  • 29. ORGANIZATION SCHEMESMonday, July 16, 2012
  • 30. ALPHABETICAL Primary scheme for dictionaries, encyclopedias Non-fiction indices Phone books On the web: directories Last name Products Departments ServicesMonday, July 16, 2012
  • 31. CHRONOLOGICAL Press Releases Blog Posts NewsMonday, July 16, 2012
  • 32. GEOGRAPHICAL Weather Store Locators News sitesMonday, July 16, 2012
  • 33. Monday, July 16, 2012
  • 34. TOPICAL Provides topical access to content PinterestMonday, July 16, 2012
  • 35. TASK ORIENTED Organized into process, function or tasksMonday, July 16, 2012
  • 36. Monday, July 16, 2012
  • 37. Monday, July 16, 2012
  • 38. ORGANIZATIONAL STRUCTURESMonday, July 16, 2012
  • 39. ORGANIZATIONAL STRUCTURES How the information is structured. How one relates to it.Monday, July 16, 2012
  • 40. HIERARCHY Relationship between items: > parent & child; broader & narrowerMonday, July 16, 2012
  • 41. Monday, July 16, 2012
  • 42. Monday, July 16, 2012
  • 43. DATABASE A planned structure – all information fits into that structure Pieces may have no relationship to each otherMonday, July 16, 2012
  • 44. This has nothing to do with...Monday, July 16, 2012
  • 45. this!Monday, July 16, 2012
  • 46. But they share the same pieces that make up the listing: • title • payment methods • description • date added • tags • photograph • materials • category • locationMonday, July 16, 2012
  • 47. Monday, July 16, 2012
  • 48. Monday, July 16, 2012
  • 49. METADATA “data about data”or, “information about information” all of the information that describes or relates to a piece of content. this is what the database is all about.Monday, July 16, 2012
  • 50. THREE KINDS OF METADATA: Intrinsic: What the object actually is Administrative: How it is used Descriptive: Description of the itemMonday, July 16, 2012
  • 51. EXAMPLES OF METADATA: Blog post (intrinsic) Author (administrative) Date posted (administrative) URL (administrative) Status: published (administrative) Title (descriptive) Category (descriptive) Tags (descriptive)Monday, July 16, 2012
  • 52. HYPERTEXT: Almost an anti-structure pattern Pieces are connected according to the relationship between them No database No hierarchyMonday, July 16, 2012
  • 53. Monday, July 16, 2012
  • 54. Monday, July 16, 2012
  • 55. Monday, July 16, 2012
  • 56. LINEAR Just as it sounds –one thing follows another Not common on the web Don’t use unless users need to read things in order to avoid frustrationMonday, July 16, 2012
  • 57. Monday, July 16, 2012
  • 58. COMBINED PATTERNS Simple hierarchy + simple database Good for small, medium & large sites Create hierarchical sections for basic content Power of a database to assemble detailed information within a sectionMonday, July 16, 2012
  • 59. Monday, July 16, 2012
  • 60. Monday, July 16, 2012
  • 61. Monday, July 16, 2012
  • 62. CATALOGUE Second most common Basically a database pattern Bottom level is content!Monday, July 16, 2012
  • 63. TYPES OF CATALOGUE PAGES Gallery pages: these provide direct access to the content pages. Hardest working pages. Department pages: provide access to the galleries. Store pages: provide access to the department pages. Jared SpoolMonday, July 16, 2012
  • 64. Monday, July 16, 2012
  • 65. Monday, July 16, 2012
  • 66. Monday, July 16, 2012
  • 67. Monday, July 16, 2012
  • 68. Monday, July 16, 2012
  • 69. Monday, July 16, 2012
  • 70. HUB AND SPOKE Users move down one level into something more detailed Return to starting point (the hub) Then to another detailed page Back to hub and so onMonday, July 16, 2012
  • 71. Monday, July 16, 2012
  • 72. Monday, July 16, 2012
  • 73. SUB-SITES LARGE sites Government Universities Large intranets Site is a series of sub-sites Held together by homepage or top level pagesMonday, July 16, 2012
  • 74. Monday, July 16, 2012
  • 75. Monday, July 16, 2012
  • 76. Monday, July 16, 2012
  • 77. Monday, July 16, 2012
  • 78. LABELSMonday, July 16, 2012
  • 79. LABELS The words you use in navigation. Words that describe chunks of content.Monday, July 16, 2012
  • 80. THE BEST LABELS...Monday, July 16, 2012
  • 81. CALL THINGS ...by the correct nameMonday, July 16, 2012
  • 82. ARE CONSISTENTMonday, July 16, 2012
  • 83. USE TERMINOLOGY ...that your audience usesMonday, July 16, 2012
  • 84. ARE AS CLEAR AS POSSIBLE Avoid “mystery meat” navigation FlatPak Harry Ford BlueBellMonday, July 16, 2012
  • 85. WHERE TO GET IDEAS FOR LABELSMonday, July 16, 2012
  • 86. CONTENT Look at the words used in your content.Monday, July 16, 2012
  • 87. USER RESEARCH Your research will contain hundreds of words that describe how your audience phrase ideas and concepts.Monday, July 16, 2012
  • 88. CARD SORTING Have people provide a label describing what the group of cards is about.Monday, July 16, 2012
  • 89. WHAT EVERYONE ELSE DOES Look around at competitors!Monday, July 16, 2012
  • 90. WORKSHOP # 1 CARD SORTING EXERCISE Divide into three groups. Write one word per card. Skin care Hair care Finance tips Does cutting salt Is fruit juice really For vegetarians increase heart your friend. Could your water attacks? Workout plans bottle be making Recipes Meal plans you fat? Disease risks Breakfast foods, the Workouts Lowering stress good the bad and Ask the experts Nutrition the ugly.. Weight loss Life style Living greenMonday, July 16, 2012
  • 91. WORKSHOP # 1 CARD SORTING EXERCISE Create categories for the words, then group and find appropriate labels.Monday, July 16, 2012
  • 92. WORKSHOP # 2 CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE.Monday, July 16, 2012
  • 93. NAVIGATIONMonday, July 16, 2012
  • 94. NAVIGATION Refers to the methods we design that let people move around information. More than a single bar at the top of a page.Monday, July 16, 2012
  • 95. NAVIGATION CAN ALSO... Let people browse to the content or functionality they need Show the context of the information Show what is related and relevant Help people find information they didn’t know aboutMonday, July 16, 2012
  • 96. NAVIGATION INCLUDES: Navigation bars Hyperlinks Buttons Other clickable thingsMonday, July 16, 2012
  • 97. TYPES OF NAVIGATION: Global Local Supplementary Utility ContextualMonday, July 16, 2012
  • 98. GLOBAL Defined as links to a site’s top-level categories Found on every page of the siteMonday, July 16, 2012
  • 99. Monday, July 16, 2012
  • 100. LOCAL Picks up where global navigation leaves off Found on inner pages - specific site section Gives users tools to move around & accomplish tasksMonday, July 16, 2012
  • 101. Monday, July 16, 2012
  • 102. SUPPLEMENTARY Supplements main navigation Sitemaps, site tour videos, search bars, site indexMonday, July 16, 2012
  • 103. Monday, July 16, 2012
  • 104. UTILITY Things users need on a regular basis About, Contact, PrivacyMonday, July 16, 2012
  • 105. Monday, July 16, 2012
  • 106. CONTEXTUAL Embedded in the content of the page HyperlinksMonday, July 16, 2012
  • 107. Monday, July 16, 2012
  • 108. TYPES OF NAVIGATION 02: Navigation bars Horizontal or vertical bar Shows the categories – usually 1-2 levelsMonday, July 16, 2012
  • 109. USE HORIZONTAL NAVIGATION IF: you have a small number of top-level items that can fit across the screen you aren’t likely to be adding new top-level items your labels are short enough to fit into the horizontal space you aren’t likely to translate the site into a language that uses long, compound words (which take up more space) you want to maximize the amount of page available for contentMonday, July 16, 2012
  • 110. USE HORIZONTAL NAVIGATION IF: you have more top level groups than would easily fit across a screen you may add or change groups over time some groups may have long labels you may want to translate the website ShowcaseMonday, July 16, 2012
  • 111. USE VERTICAL NAVIGATION IF: you have more top level groups than would easily fit across a screen you may add or change groups over time some groups may have long labels you may want to translate the site ShowcaseMonday, July 16, 2012
  • 112. INVERTED L Horizontal & VerticalMonday, July 16, 2012
  • 113. Monday, July 16, 2012
  • 114. TABS Variation of horizontal navigation Always has 2nd level that need to be connectedMonday, July 16, 2012
  • 115. Monday, July 16, 2012
  • 116. DROP DOWN Allows user to see second level navigationMonday, July 16, 2012
  • 117. Monday, July 16, 2012
  • 118. WORKSHOP # 3 CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISE. Landing page A secondary pageMonday, July 16, 2012
  • 119. SKETCHINGMonday, July 16, 2012
  • 120. USER FLOWS Simple diagrams that follow a user down a path of activity Can be storyboards or flow charts Similar to scenarios Storyboard Donald GrahamMonday, July 16, 2012
  • 121. THUMBNAIL SKETCHES Simple sketches that then go into wireframes Small representation of design Scribble lines Use text captions to describe what happensMonday, July 16, 2012
  • 122. Monday, July 16, 2012
  • 123. Monday, July 16, 2012
  • 124. Monday, July 16, 2012
  • 125. Monday, July 16, 2012
  • 126. WIREFRAMES First step in design process Design drawings without visual treatment Simple lines, few colors Purpose is to show what will be on a page No graphic design No interactionMonday, July 16, 2012
  • 127. CREATING WIREFRAMES Easy to draw Straight lines and text Plenty of drawing packages available: Visio Illustrator Keynote MockFlow Balsamiq OmniGroupMonday, July 16, 2012
  • 128. WHO USES WIREFRAMES? Project team – to discuss different ideas & approaches Content authors – how will their content fit? What pages do they have? Managers – are business needs met? (Where’s my stuff?!) Developers – shows how things need to work, how to implementMonday, July 16, 2012
  • 129. WHAT TO INCLUDEMonday, July 16, 2012
  • 130. ABSOLUTE ESSENTIALS Logo placement Navigation Content HierarchiesMonday, July 16, 2012
  • 131. EXPLANATIONS Annotations Background information Important things to pay attention toMonday, July 16, 2012
  • 132. EXPLANATIONS Better visual approaches so people can easily understand what you’re communicating.Monday, July 16, 2012
  • 133. Monday, July 16, 2012
  • 134. Monday, July 16, 2012
  • 135. Monday, July 16, 2012
  • 136. Monday, July 16, 2012
  • 137. Monday, July 16, 2012
  • 138. Monday, July 16, 2012
  • 139. Monday, July 16, 2012
  • 140. Monday, July 16, 2012
  • 141. Monday, July 16, 2012
  • 142. Monday, July 16, 2012
  • 143. Monday, July 16, 2012
  • 144. Monday, July 16, 2012
  • 145. Monday, July 16, 2012
  • 146. Monday, July 16, 2012
  • 147. Monday, July 16, 2012
  • 148. Monday, July 16, 2012
  • 149. Monday, July 16, 2012
  • 150. Monday, July 16, 2012
  • 151. Monday, July 16, 2012
  • 152. Monday, July 16, 2012
  • 153. Monday, July 16, 2012
  • 154. Monday, July 16, 2012
  • 155. Monday, July 16, 2012
  • 156. Monday, July 16, 2012
  • 157. EXTRAS: TOOLS & TEMPLATESMonday, July 16, 2012
  • 158. EIGHTSHAPES UNIFY This is an InDesign-based documentation system. It contains templates, common page layouts and symbol libraries to get you started. DownloadMonday, July 16, 2012
  • 159. KONIGI WIREFRAME STENCILS For OmniGraffle, this contains a broad set of components to use in wireframes. DownloadMonday, July 16, 2012
  • 160. NICK FINCK’S STENCILS This is similar to the Konigi stencil set, but for Microsoft Visio: DownloadMonday, July 16, 2012
  • 161. BALSAMIQ This prototyping tool is currently the most popular, allowing you to create simple sketchy prototypes online. Visit SiteMonday, July 16, 2012
  • 162. AXURE Very established software for creating clickable prototypes: DownloadMonday, July 16, 2012
  • 163. MICROSOFT SKETCHFLOW At the far end of the prototyping spectrum is Sketchflow, which lets you create everything from quick sketch-style- prototypes through to quite complex interactive prototypes with re-usable code. DownloadMonday, July 16, 2012
  • 164. WORKSHOP # 4 CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISE. One wireframe for landing page One wireframe for a secondary pageMonday, July 16, 2012
  • 165. PROTOTYPESMonday, July 16, 2012
  • 166. PAPER PROTOTYPES Hand drawn images of a site Usually rough, but great for early testing Can make changes while testing Not good for heavy interaction Can get new ideas for links from user Paper PrototypingMonday, July 16, 2012
  • 167. INTERACTIVE PROTOTYPES Usually HTML or Flash Graphic images with hotspots Can do in Dreamweaver, PowerpointMonday, July 16, 2012
  • 168. Monday, July 16, 2012
  • 169. COMPETITION AS PROTOTYPE See what works and what doesn’t Quick route to get resultsMonday, July 16, 2012
  • 170. PERSONASMonday, July 16, 2012
  • 171. WHAT IS A PERSONA? Hypothetical “stand-ins” for actual users. Not real people but represent real people. Created from user research - not a set demographics. Represent a segment of your users. Helps build consensus.Monday, July 16, 2012
  • 172. PERSONAS DESCRIBE: Who this person is How they use the site What interests they have What behaviors they haveMonday, July 16, 2012
  • 173. PERSONAS ELEMENTS: Goals Attitudes Behaviors & Tasks Frustrations & Pain Points Name, photo, demographic info, skill level, environment Narrative (scenario)Monday, July 16, 2012
  • 174. RESEARCH INVOLVES: Key stakeholders Web analytics Customer support CustomerMonday, July 16, 2012
  • 175. Monday, July 16, 2012
  • 176. Monday, July 16, 2012
  • 177. THEY REPRESENT YOUR USERS Websites should be designed to meet the goals & needs of personas.Monday, July 16, 2012
  • 178. USE CASESMonday, July 16, 2012
  • 179. WHAT IS A USE CASE? Description of a user type in a scenario. Gives a context for designing features. Develops scope for the site.Monday, July 16, 2012
  • 180. A USE CASE Should mirror your site strategy and business goals. Can be like a story or scenario:Monday, July 16, 2012
  • 181. SCENARIO Emma visits Craigs List homepage, and selects “Chicago” as her location. She does not have anything in particular that she is looking to buy right now. She then browses available categories in the “for sale” area and finds a “toys” category. She sees a posting for a “Groovy Kitchen,” which she thinks would be great for her daughter. She contacts the seller to arrange further details.Monday, July 16, 2012
  • 182. BENEFITS INCLUDE: Understanding the user helps design for them. Clarifying assumptions - scenarios help the team formalize assumptions. Fully exploring the design - scenarios serve to explore all the important aspects of the design. Provides context - for understanding the features Helping other project tasks - scenarios represent the important tasks.Monday, July 16, 2012
  • 183. WORKSHOP #5 Please break into three groups. Create 2 personas. Segment people based on behaviors, go.als and needs (2 people can be in different demographic group but have same underlying goals and behaviors) Name, age, interests Internet/Computing profile Personal characteristics Computing/technical likes and dislikes Goals and motivations Quotes Photos Work/Home computing environment Job/profession Frequency of computer use ...and anything else you think is important.Monday, July 16, 2012
  • 184. WORKSHOP #6 Create 3 possible scenarios for each persona that the user might execute on the site you were assigned.Monday, July 16, 2012