NYU Web Intensive - Week 3 Class 1


Published on

Published in: Design, Technology
  • Be the first to comment

  • Be the first to like this

NYU Web Intensive - Week 3 Class 1

  1. 1. HELLO, Website Intensive Week Three Professor Cathline Marshall nyuwebintensive.wordpress.com c.marshall.nyu@gmail.com
  4. 4. COURSE OBJECTIVE:“If you are proficient in Web design and would like toexplore ways to build your portfolio and explore thebusiness practices of Web design, enroll in this one weekintensive. Week Three of the Web Design Intensivecovers usability assessment, producing designs forportfolio, careers, and the business aspects of Webdesign. Prerequisites: Photoshop, Illustrator, andDreamweaver.”
  6. 6. WORKSHOP #1 Please divide into three groups. GROUP #1: realbusiness.com GROUP #2: boreshacoffee.com GROUP #3: getharvest.com Answer: What is the purpose of the site? What can you do on the site? What do you think the main goal of the site is? Can you find the contact info?
  9. 9. Usability is “the extent to which a product can be used byspecified users to achieve specified goals with effectiveness,efficiency and satisfaction in a specified context of use.” (ISO 9241-11)
  10. 10. “In human-computer interaction and computer science,usability usually refers to the elegance and clarity withwhich the user interface of a computer program or a website is designed.” (Wikipedia)
  11. 11. “...the measure of the quality of a user’s experience wheninteracting with a product or system,” whether a Web site, asoftware application, mobile technology, or any user-operated device.” (Usability.gov)
  12. 12. “Usability really just means making sure that somethingworks well: that a person of average (or even below average)ability and experience can use the thing - whether its a Website, a fighter jet, or a revolving door - for its intendedpurpose without getting hopelessly frustrated.” (Steve Krug)
  13. 13. DON’T MAKE ME THINK.
  14. 14. THINGS THAT MAKE US THINK: Where do I start? What do they do? Clever names/Marketing induced names Links that are not self evident Navigation in non traditional places Where’s the contact info? Where do I sign in?
  15. 15. WHAT USERS LOOK FOR: Ease of use Speed Practicality Credibility Consistency Simplicity, simplicity, simplicity
  17. 17. HUMAN FACTORSForms the basis of usability testing.Has its roots in military research.Understanding how people think and interact with theirenvironment.
  18. 18. THE HISTORY OF USABILITYThe study of human factors dates back to World War II,when the growing complexity of fighter planes created aneed for more user friendly designs.
  19. 19. HUMAN FACTORS INCORPORATES: Psychology Engineering Industrial design Graphic design Statistics
  20. 20. HUMAN FACTORS SPECIALISTS: Design products for improved safety & ease of use Design systems to accommodate specific user groups Raise productivity by improving human performance Improve information displays to reduce human error
  21. 21. THREE MILE ISLANDA control panel status made engineers think that a valve hadbeen engaged, while the status simply meant that the valvehad been attempted to be engaged.
  23. 23. WORKSHOP #2 Scenario: You’ve just rented a new apartment and your landlord told you to open an account with ConEd (coned.com) to get your electricity turned on. Go for it. Share your thoughts.
  25. 25. AFFORDANCEThe perceived ability of an object to behave in a certain•way, by nature of its design.•The quality of an object which allows one to perform anaction.
  26. 26. I’m a button. Really, I am.
  27. 27. I’m a button. Really, I am.
  28. 28. I’m a button. Really, I am.
  29. 29. I’m a button. Really, I am.
  30. 30. I’m a button. Really, I am.
  31. 31. What does this thing do?
  32. 32. What does this thing do?
  33. 33. SIGNIFIERSPeople search for clues to help them understand context.
  34. 34. Photo: CelticSong22
  35. 35. PUT IT IN CONTEXTPeople need some way of understanding the productor service.Forget affordances: what people need are signifiers. They are broader and richer. They provide valuable clues to sift information.
  36. 36. DESIGN ELEMENTS Websites rely on pictures and icons to convey messages. Design elements that give the user context: Navigation Buttons Icons
  37. 37. Navigation
  38. 38. Buttons
  39. 39. Icons
  40. 40. MENTAL MODELSOur ideas of how things work.Are an explanation of our thought process about howsomething works.Includes what we think is true, not necessarily what isactually true.
  41. 41. Why, oh why, do people search for a website if they already know its name? www.bing.com
  42. 42. www.bing.com
  43. 43. USER ACTIONSUsers plan actions based on their models.People expect websites to act alike.Goal is to create interfaces that match how people thinksomething should work.
  44. 44. WHY DOESN’T THIS IPAD WORK? (because it’s a magazine)
  45. 45. DIAGNOSING PROBLEMSUnderstanding the concept of mental models can help youmake sense of usability problems.Users expect to know which elements on a page are clickable.On e-commerce sites they expect to see photos.Headings, labels and categories will differ depending ontarget audience.
  47. 47. YOU HAVE LESS THAN TWO MINUTES TOCOMMUNICATE THE FIRST TIME A PROSPECTIVECUSTOMER VISITS YOUR WEBSITE.Every page must justify its claim on their time. If a pagedoesn’t do that immediately and clearly, users goelsewhere. Most people don’t even bother scrolling to seewhat’s farther down the page.
  48. 48. THE AVERAGE USER... ...will fail a third of the time when trying to complete a task. ...will choose sites that have proven useful in the past. ...will spend 1 minute 49 seconds on a site before abandoning. ...will visit 3.2 sites (besides search engines) to find a site. ...has only a 12% possibility of revisiting a site.
  49. 49. MORE ABOUT USERS... Users don’t read they scan. Users don’t make optimal choices. Users don’t figure out how things work. Users don’t always come through the homepage.
  50. 50. GUIDELINES Let users know where they are and how to proceed. Company name or logo in upper left corner Direct, one click link to home page Search (ideally in upper right corner) Consider using breadcrumbs to orient user
  52. 52. BACKGROUND MUSIC why is this playing?!
  53. 53. POP UPS
  54. 54. LONG WAIT TIME
  56. 56. CAN’T TELL WHAT IT’S ABOUT (rentmychest.com)
  57. 57. PAGINATION
  60. 60. POOR INFORMATION SCENT - dictates maximum benefit for minimum effort - users access if their paths show cues related to desired outcome- progress must seem rapid to be worth the effort required to reach the destination - don’t use made up words
  62. 62. TOO MUCH MOVEMENT one exception.
  63. 63. TYPOS & POOR GRAMMAR My suns is cutting wood with a acts but they ain’t aloud to drink ail in front of there ant.
  64. 64. LAME FONTS
  65. 65. COBWEBS
  67. 67. FLASH BASED
  69. 69. PR JARGONBlue-sky thinking = CreativeGrey Beard = Corporate Head Seed = Share
  70. 70. IT’S UGLY.
  72. 72. WHAT IS USER CENTERED DESIGN? Design philosophy that focuses on the end user through: Planning Phase Design Phase Development Phase Requires research on end user.
  73. 73. ISO 9241-210 (formerly 13407)International standard for human-centered process.
  74. 74. ISO 9241-210 (formerly 13407)6 key principles that will ensure your design is user centered:1. The design is based upon an explicit understanding ofusers, tasks and environments.2. Users are involved throughout design and development.3. The design is driven and refined by user-centeredevaluation.
  75. 75. ISO 9241-210 (formerly 13407)The process is iterative.The design addresses the whole user experience.The design team includes multidisciplinary skills andperspectives.
  76. 76. STEP #1:Identify your users.Who are they?What are their tasks and goals?What is their experience level?
  77. 77. KNOW YOUR USERS Who are the users? What do they need to do, their tasks? What do they currently do? How satisfied are they with their current routines? What is their experience level? What kind of environment are they working in? What are their preferences, and their goals?
  78. 78. STEP #2:What functions are required?What information do they need?What form should it be?How do users think it should work?
  79. 79. STEP #3:Create design solutions.(Think simplicity, simplicity, simplicity.)
  80. 80. STEP #4:Evaluate designs by testing usability.
  82. 82. enlarge
  84. 84. THE TEN USABILITY HEURISTICSThese are ten general principles for user interface design. Theyare called “heuristics” because they are more in the nature ofrules of thumb than specific usability guidelines. -Jacob Nielsen, 1994
  86. 86. #1 VISIBILITY OF SYSTEM STATUSThe system should always keep users informed about what isgoing on, through appropriate feedback within reasonable time.
  87. 87. DO
  88. 88. DON’T
  89. 89. #2 MATCH BETWEEN SYSTEM AND THE REAL WORLDThe system should speak the users language, with words,phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, makinginformation appear in a natural and logical order.
  90. 90. DO
  91. 91. DON’T
  92. 92. #3 USER CONTROL AND FREEDOMUsers often choose system functions by mistake and will need aclearly marked "emergency exit" to leave the unwanted statewithout having to go through an extended dialogue. Supportundo and redo.
  93. 93. DO
  94. 94. DON’T
  95. 95. #4 CONSISTENCY AND STANDARDSUsers should not have to wonder whether different words,situations, or actions mean the same thing. Follow platformconventions.
  96. 96. DO
  97. 97. DON’T
  98. 98. #5 ERROR PREVENTIONEven better than good error messages is a careful design whichprevents a problem from occurring in the first place. Eithereliminate error-prone conditions or check for them and presentusers with a confirmation option before they commit to theaction.
  99. 99. DO
  100. 100. DON’T
  101. 101. #6 RECOGNITION RATHER THAN RECALLMinimize the users memory load by making objects, actions,and options visible. The user should not have to rememberinformation from one part of the dialogue to another.Instructions for use of the system should be visible or easilyretrievable whenever appropriate.
  102. 102. DO
  103. 103. DON’T
  104. 104. #7 FLEXIBILITY AND EFFICIENCY OF USEAccelerators -- unseen by the novice user -- may often speed upthe interaction for the expert user such that the system can caterto both inexperienced and experienced users. Allow users totailor frequent actions.
  105. 105. DO
  106. 106. DON’T
  107. 107. #8 AESTHETIC AND MINIMALIST DESIGNDialogues should not contain information which is irrelevant orrarely needed. Every extra unit of information in a dialoguecompetes with the relevant units of information and diminishestheir relative visibility.
  108. 108. DO
  109. 109. DON’T
  110. 110. #9 HELP USERS RECOGNIZE, DIAGNOSE, & RECOVER FROM ERRORSError messages should be expressed in plain language (nocodes), precisely indicate the problem, and constructivelysuggest a solution.
  111. 111. DO
  112. 112. DON’T
  113. 113. #10 HELP AND DOCUMENTATIONEven though it is better if the system can be used withoutdocumentation, it may be necessary to provide help anddocumentation. Any such information should be easy to search,focused on the users task, list concrete steps to be carried out,and not be too large.
  114. 114. DO
  115. 115. DON’T
  117. 117. Your blog name is too long, it doesn’t A search box is a great thing to have,sound like a website name. It also and this is the perfect place to put it.sounds like it’s referring to a specificdiscovery. A shorter blog name willallow people to remember your siteand URL more easily. You don’t need a comment feed.. Unless you know for a fact that your users are using this feature, just having aThis small square should not be there, it post feed is fine enough. Then you don’tlinks to different version of the about even need to have all that text, thepage with no title.You can delete that orange icon is an industry standard.page to get rid of the square.This title is too long. People getconfused by page titles that do not Though aesthetically pleasing, this imagedescribe the page intuitively and just doesn’t say “science”. It speaksconcisely. It should read “About” or more to travel and history, and the“About The Blog” discovery of ancient worlds as opposed to new studies in science.Who are you? How are you associatedwith science? I can’t even find your fullname on this page! It is important that There is too little typographic hierarchyyou include an “About the Author” page on your site. Not even the site’s nameto establish your credibility and put a or the post titles really come out andface to the site. grab your attention. It all looks like a wall of text, which makes it harder for a user to navigate.You should not display the full blog poston the homepage. Show the title and anexcerpt, and allow the user to “read As the eye can only comfortably track 7more” if they’re interested. This keeps to 10 words a line, your sentences are ausers from having to scroll down tad too long.through articles that they have nointerest in.Your blog posts could benefit from the Though the design (layout/color palette/addition of relevant images that fonts) of your website isn’t necessarilysummarize what the content is about. bad, we don’t feel that it communicatesRight they appear as just a big, gray box to your target audience effectively. Ifof text intimidating text. you are looking to make science accessible and understandable to laymen, the design should reflect that. HOMEPAGE The current design seems too scholarly, clinical, and outdated.
  118. 118. These questions (links) would make for excellent callouts, but not necessarily navigational links. Because this is green, I am assuming Too many navigation options! this is the page that I am on, but it is not.Too much movement.Very distracting. This block could be confused with advertising and may be ignored. Unappealing image. Most Popular Topics (is this different than the blog topics?), Today’s News, Popular Links, Latest News. SO MUCH TO CHOOSE FROM! I don’t know where to start? What is most important?This opens in a new window, with newcolors.Very disorienting. These buttons are totally lost among all the options on this page. Seeing Fans is nice, but just adds to the clutter and creates further distraction on this very busy page. I need a little hint as to what Is this advertising? attainivf is before I click. This is too vague.
  119. 119. This can move to the bottom of the page.Clean this area up. Remove the image of Everyone takes these credit cards.Las Vegas, Make it a clean and simplelogo like all your competition does. Remove all this. Replace with: Register for Free with a link to register. And have Log In button. This appears to be an ad! Why would you encourage users to LEAVE your This whole area takes up valuable real estate. On site to play Fantasy Football? Doesn’t Sport’s Advisors, the ads are smaller allowing the even open in another window. left side bar to come up. Also, the content of the ads are much more compelling. I would reconsider what if anything you want to put here. I would remove everything in this green block and replace with this.This is a wonderful service, but itpushed down the menu ofhandicappers which is what peopleare going to be looking for. They canget the scores via your top navigation.You may want to consider saying “LiveScores” Remove the word Menu. Not needed. Move this whole block up. HOMEPAGE
  120. 120. This blur looks like it is a mistake. The logo on the homepage is customarily larger and more prominent. It is getting lost on this page because of lack of contrast and the blurring of the image. Navigation is too light in color. No contrast. Needs to be more obvious. This Giving aid link is too passive. No one will see it. This extranet link may be confusing if it refers to the CLUB.. The site map link should be more prominent. While you can have news bites on the homepage, that is not the role of the homepage.The role of the homepage is to communicate what the company is, the value the site offers over the competition and the product or services offered. Presently, it does NONE of those things. The novice user can feel overwhelmed by homepages that do not help them understand their options. They may become embarrassed and blame themselves. They will just leave the site and go to a more welcoming site. The challenge is to design a homepage that gives the user access to important features without cramming them onto the page itself. Focus and clarity are most important, as are the users goals. They need to be identified early. I question if they have been. Search box is not obvious. It needs to be moved to the Who is IAAATA and SNA?The word “HOT” does not belong on a site of this nature. upper right as that is now standard practice and where Partners? Agencies?It cheapens the work and seems inappropriate. most users will look for it. Plus it is buried in with the Memberships? Should at the contact information and not self evident. very least have a link so the uninformed user can research what they are.
  121. 121. WORKSHOP #3 Please break into groups. Find a site to do a “heuristic” (usability) review. Be prepared to share your observations with the class.
  123. 123. BUSINESS GOALS“Customer experience is the defining success factor inbusiness for the next twenty years. Learning fromcustomers, creating the experience they want, measuringthe success of what you do, continually fine-tuning theservice and returning to customers to learn more--this nowmust be the primary mission of any business that hascustomers. If you create a great customer experience, you’llalmost certainly win.” Mark Hurst
  124. 124. USER AND BUSINESS GOALS...should be aligned.
  125. 125. KNOW THE BUSINESSHaving a satisfied user doesnt necessarily build a satisfiedcompany.Interview the stakeholders, get to understand their strategyand business goals.Ultimately usability must serve the bottom line.
  126. 126. HERE’S WHAT HAPPENS: Suits decide on business goals Convert to strategy Brings in design team Do it cheap Put everything on the homepage Put my division on the top of the hierarchy Hide the contact info Get to market asap
  127. 127. WHAT’S THE RESULT?Bad user experience.
  128. 128. BUSINESS GOALS ARE UNIVERSALIncrease traffic to the site.Retain users.Improve conversion rates.
  129. 129. CONVERSIONWhen a prospective customer takes the marketersintended action. -Wikipedia
  130. 130. SALESSign upsContact form submissions
  131. 131. HOW TO RETAIN USERS: Timely, relevant content Engage them Provide an experience SERVE THEIR NEEDS.
  132. 132. HOW TO IMPROVE CONVERSION: Easy to use site Clear hierarchy Calls to action Communicate value Study analytics A/B testing SERVE THEIR NEEDS.
  133. 133. HOW TO INCREASE TRAFFIC: Interesting, original copy In-bound links Search Engine Optimization (SEO) E-blasts/Newsletters Social Media SERVE THEIR NEEDS.
  134. 134. DESIRABILITY
  135. 135. DESIRABILITYDelight comes not from the latest widget but from helpinguses accomplish their goals.
  136. 136. DESIRABILITY Brings value to the user Highlights value Persuades user of value Adds emotional value to user piano stairs Pentagram
  137. 137. HOMEWORK WEEK #1 1. Surf the web. Find one site that is easy to use. One that isn’t. Tell why. 2. If you had to do a comprehensive usability plan for the Coca Cola website or Microsoft Web site, which would you chose and why? Type your answers and submit next week. 3. Download “Research Based Web Design & Usability Guidelines.”  Read chapter one and two. 4. Look at the site you reviewed at the start of the class. Write down what changes you would make to make the site more user- friendly. Type your answers and submit next week.
  139. 139. INFORMATION ARCHITECTUREThe 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.
  140. 140. IA IS ORGANIZATIONAll about creating groups that make sense to the people whouse them.Supermarkets don’t organize Swiss cheese with Swisschocolate, Belgian chocolate with Belgian beer.
  141. 141. IA ON THE WEBIn supermarkets it’s done with layout, sign age and visualguides.On websites we use navigation bars button and links.
  142. 142. IA IS ALL ABOUT: 1. Organizing content or objects 2. Describing them clearly 3. Providing ways for people to get to them
  143. 143. 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!
  144. 144. WHAT YOU NEED TO UNDERSTAND ...in order to develop a successful IA
  145. 145. PEOPLEWhat they need do to, how they think & what they alreadyknow.
  146. 146. CONTENTWhat you have, what you should have & what you need.
  147. 147. CONTEXTThe business or personal goals for the site, who else will beinvolved & what your constraints are.
  149. 149. IA STARTS WITH Defining the project & its goals Researching end users Reviewing all content Understanding technological & design constraints
  150. 150. 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 products
  151. 151. WINESHOP HOME | PRODUCTS | SERVICES | ABOUT US | CONTACTPRODUCTS Home > Products > Wine > Usability Chardonnay 2010Wine Lorem ipsum dolor sit amet, consecteturFood adipiscing elit. Praesent sodales, sapien ut Sed vitae libero et nunc consequat adipiscing. Ut sitGlasses porta blandit, metus dui imperdiet ipsum, id amet libero magna. In ac eleifend est nulla eu orci. Mauris lectus eros, aliquam est. Morbi ac loremKitchenware 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.
  152. 152. WINESHOP HOME | PRODUCTS | SERVICES | ABOUT US | CONTACTPRODUCTS Home > Products > Wine > Usability Chardonnay 2010Wine Lorem ipsum dolor sit amet, consecteturFood adipiscing elit. Praesent sodales, sapien ut Sed vitae libero et nunc consequat adipiscing. Ut sitGlasses porta blandit, metus dui imperdiet ipsum, id amet libero magna. In ac eleifend est nulla eu orci. Mauris lectus eros, aliquam est. Morbi ac loremKitchenware 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.
  153. 153. 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 maps
  154. 154. WINESHOP HOME | PRODUCTS | SERVICES | ABOUT US | CONTACTPRODUCTS Home > Products > Wine > Usability Chardonnay 2010Wine Lorem ipsum dolor sit amet, consecteturFood adipiscing elit. Praesent sodales, sapien ut Sed vitae libero et nunc consequat adipiscing. Ut sitGlasses porta blandit, metus dui imperdiet ipsum, id amet libero magna. In ac eleifend est nulla eu orci. Mauris lectus eros, aliquam est. Morbi ac loremKitchenware 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.
  156. 156. REVIEW: Results of your requirements & task analyses Earlier versions of site Competitors’ sites
  157. 157. THIS DEVELOPS LIST OF: Content pieces Candidate labels Organization schemes
  158. 158. EVALUATE CONTENT FOR: Quality Completeness Add & design that’s needed Create content inventory
  159. 159. content inventory
  160. 160. content inventory
  161. 161. CREATE & EVALUATE STRUCTURE: Brainstorm content categories & site structures Decide which content belongs together on a page User test & refine
  162. 162. MAP THE PAGES: Create a sitemap starting with highest priorities Add short cuts & redundant links Add necessary support tools, such as Help, Site Map, Search
  163. 163. DEVELOP NAVIGATION BAR: Refine layout & orienting of information i.e., headers, page titles Establish final labels & graphics Remember users’ mental models Do user testing
  164. 164. IMPLEMENT: Build the site & update specs as needed Test the site Train maintenance staff
  166. 166. ALPHABETICAL Primary scheme for dictionaries, encyclopedias Non-fiction indices Phone books On the web: directories Last name Products Departments Services
  167. 167. CHRONOLOGICAL Press Releases Blog Posts News
  168. 168. GEOGRAPHICAL Weather Store Locators News sites
  169. 169. TOPICAL Provides topical access to content Pinterest
  170. 170. TASK ORIENTED Organized into process, function or tasks
  172. 172. ORGANIZATIONAL STRUCTURESHow the information is structured.How one relates to it.
  173. 173. HIERARCHYRelationship between items:> parent & child; broader & narrower
  174. 174. DATABASEA planned structure – all information fits into that structurePieces may have no relationship to each other
  175. 175. This has nothing to do with...
  176. 176. this!
  177. 177. But they share the same pieces that make up the listing: • title • payment methods • description • date added • tags • photograph • materials • category • location
  178. 178. METADATA“data about data”or,“information about information”all of the information that describes or relates to a piece ofcontent. this is what the database is all about.
  179. 179. THREE KINDS OF METADATA: Intrinsic: What the object actually is Administrative: How it is used Descriptive: Description of the item
  180. 180. EXAMPLES OF METADATA: Blog post (intrinsic) Author (administrative) Date posted (administrative) URL (administrative) Status: published (administrative) Title (descriptive) Category (descriptive) Tags (descriptive)
  181. 181. HYPERTEXT: Almost an anti-structure pattern Pieces are connected according to the relationship between them No database No hierarchy
  182. 182. 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 frustration
  183. 183. 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 section
  184. 184. CATALOGUE Second most common Basically a database pattern Bottom level is content!
  185. 185. TYPES OF CATALOGUE PAGESGallery pages: these provide direct access to the contentpages. Hardest working pages.Department pages: provide access to the galleries.Store pages: provide access to the department pages. Jared Spool
  186. 186. 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 on
  187. 187. SUB-SITES LARGE sites Government Universities Large intranets Site is a series of sub-sites Held together by homepage or top level pages
  188. 188. LABELS
  189. 189. LABELSThe words you use in navigation.Words that describe chunks of content.
  190. 190. THE BEST LABELS...
  191. 191. CALL THINGS...by the correct name
  192. 192. ARE CONSISTENT
  193. 193. USE TERMINOLOGY...that your audience uses
  194. 194. ARE AS CLEAR AS POSSIBLEAvoid “mystery meat” navigation FlatPak Harry Ford BlueBell
  196. 196. CONTENTLook at the words used in your content.
  197. 197. USER RESEARCHYour research will contain hundreds of words that describehow your audience phrase ideas and concepts.
  198. 198. CARD SORTINGHave people provide a label describing what the group ofcards is about.
  199. 199. WHAT EVERYONE ELSE DOESLook around at competitors!
  200. 200. 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 green
  201. 201. WORKSHOP # 1 CARD SORTING EXERCISE Create categories for the words, then group and find appropriate labels.
  203. 203. NAVIGATION
  204. 204. NAVIGATIONRefers to the methods we design that let people movearound information.More than a single bar at the top of a page.
  205. 205. 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 about
  206. 206. NAVIGATION INCLUDES: Navigation bars Hyperlinks Buttons Other clickable things
  207. 207. TYPES OF NAVIGATION: Global Local Supplementary Utility Contextual
  208. 208. GLOBALDefined as links to a site’s top-level categoriesFound on every page of the site
  209. 209. LOCALPicks up where global navigation leaves offFound on inner pages - specific site sectionGives users tools to move around & accomplish tasks
  210. 210. SUPPLEMENTARYSupplements main navigationSitemaps, site tour videos, search bars, site index
  211. 211. UTILITYThings users need on a regular basisAbout, Contact, Privacy
  212. 212. CONTEXTUALEmbedded in the content of the pageHyperlinks
  213. 213. TYPES OF NAVIGATION 02: Navigation bars Horizontal or vertical bar Shows the categories – usually 1-2 levels
  214. 214. 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 content
  215. 215. 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 Showcase
  216. 216. 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 Showcase
  217. 217. INVERTED LHorizontal & Vertical
  218. 218. TABSVariation of horizontal navigationAlways has 2nd level that need to be connected
  219. 219. DROP DOWNAllows user to see second level navigation
  221. 221. SKETCHING
  222. 222. USER FLOWSSimple diagrams that follow a user down a path of activityCan be storyboards or flow chartsSimilar to scenarios Storyboard Donald Graham
  223. 223. THUMBNAIL SKETCHESSimple sketches that then go into wireframesSmall representation of designScribble linesUse text captions to describe what happens
  224. 224. WIREFRAMESFirst step in design processDesign drawings without visual treatmentSimple lines, few colorsPurpose is to show what will be on a pageNo graphic designNo interaction
  225. 225. CREATING WIREFRAMES Easy to draw Straight lines and text Plenty of drawing packages available: Visio Illustrator Keynote MockFlow Balsamiq OmniGroup
  226. 226. WHO USES WIREFRAMES?Project team – to discuss different ideas & approachesContent authors – how will their content fit? What pages dothey have?Managers – are business needs met? (Where’s my stuff?!)Developers – shows how things need to work, how toimplement
  227. 227. WHAT TO INCLUDE
  228. 228. ABSOLUTE ESSENTIALSLogo placementNavigationContentHierarchies
  229. 229. EXPLANATIONSAnnotationsBackground informationImportant things to pay attention to
  230. 230. EXPLANATIONSBetter visual approaches so people can easily understandwhat you’re communicating.
  232. 232. EIGHTSHAPES UNIFYThis is an InDesign-based documentation system. Itcontains templates, common page layouts and symbollibraries to get you started. Download
  233. 233. KONIGI WIREFRAME STENCILSFor OmniGraffle, this contains a broad set of components touse in wireframes. Download
  234. 234. NICK FINCK’S STENCILSThis is similar to the Konigi stencil set, but for MicrosoftVisio: Download
  235. 235. BALSAMIQThis prototyping tool is currently the most popular,allowing you to create simple sketchy prototypes online. Visit Site
  236. 236. AXUREVery established software for creating clickable prototypes: Download
  237. 237. MICROSOFT SKETCHFLOWAt the far end of the prototyping spectrum is Sketchflow,which lets you create everything from quick sketch-style-prototypes through to quite complex interactive prototypeswith re-usable code. Download
  238. 238. WORKSHOP # 4 CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISE. One wireframe for landing page One wireframe for a secondary page
  239. 239. PROTOTYPES
  240. 240. PAPER PROTOTYPESHand drawn images of a siteUsually rough, but great for early testingCan make changes while testingNot good for heavy interactionCan get new ideas for links from user Paper Prototyping
  241. 241. INTERACTIVE PROTOTYPESUsually HTML or FlashGraphic images with hotspotsCan do in Dreamweaver, Powerpoint
  242. 242. COMPETITION AS PROTOTYPESee what works and what doesn’tQuick route to get results
  243. 243. PERSONAS
  244. 244. 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.
  245. 245. PERSONAS DESCRIBE: Who this person is How they use the site What interests they have What behaviors they have
  246. 246. PERSONAS ELEMENTS: Goals Attitudes Behaviors & Tasks Frustrations & Pain Points Name, photo, demographic info, skill level, environment Narrative (scenario)
  247. 247. RESEARCH INVOLVES: Key stakeholders Web analytics Customer support Customer
  248. 248. THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals & needs ofpersonas.
  249. 249. USE CASES
  250. 250. WHAT IS A USE CASE?Description of a user type in a scenario.Gives a context for designing features.Develops scope for the site.
  251. 251. A USE CASEShould mirror your site strategy and business goals.Can be like a story or scenario:
  252. 252. SCENARIOEmma visits Craigs List homepage, and selects “Chicago” asher location. She does not have anything in particular thatshe is looking to buy right now. She then browses availablecategories in the “for sale” area and finds a “toys” category.She sees a posting for a “Groovy Kitchen,” which she thinkswould be great for her daughter. She contacts the seller toarrange further details.
  253. 253. 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.
  254. 254. 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.
  255. 255. WORKSHOP #5 GROUP #1: Site is to provide info for people starting own business; some of them have experience in he business world; others this is their first exposure to issues running a business. GROUP #2: Site is to provide info for people looking to place parents in assisted living. GROUP #3: Site is to provide information about Connecticut; site seeing, lodging, historical information etc...