NYU Web Intensive - Week 3 Class 1

• 1. HELLO, Website Intensive Week Three Professor Cathline Marshall [email protected]

2. PLEASE MAKE A NAME CARD. 3. NAME CARDWHAT USABILITY CONSIDERATIONS DID YOU TAKE IN MAKINGYOUR NAME CARD? 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. 5. OPENING SURVEYPLEASE FILL OUT THE SURVEY:http://ow.ly/92AZn 6. WORKSHOP #1Please divide into three groups.GROUP #1: realbusiness.comGROUP #2: boreshacoffee.comGROUP #3: getharvest.comAnswer: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? 7. WHAT IS USABILITY? 8. WHAT IS USABILITY? 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. 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. ...the measure of the quality of a users experience wheninteracting with a product or system, whether a Web site, asoftware application, mobile technology, or any user-operated device.(Usability.gov) 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. DONT MAKE ME THINK. 14. THINGS THAT MAKE US THINK:Where do I start?What do they do?Clever names/Marketing induced namesLinks that are not self evidentNavigation in non traditional placesWheres the contact info?Where do I sign in? 15. WHAT USERS LOOK FOR:Ease of useSpeedPracticalityCredibilityConsistencySimplicity, simplicity, simplicity 16. HUMAN FACTORS 17. HUMAN FACTORSForms the basis of usability testing.Has its roots in military research.Understanding how people think and interact with theirenvironment. 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. HUMAN FACTORS INCORPORATES:PsychologyEngineeringIndustrial designGraphic designStatistics 20. HUMAN FACTORS SPECIALISTS:Design products for improved safety & ease of useDesign systems to accommodate specific user groupsRaise productivity by improving human performanceImprove information displays to reduce human error 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. 22. THE WEB HAS CHANGED. 23. WORKSHOP #2Scenario:Youve just rented a new apartment and your landlord told youto open an account with ConEd (coned.com) to get yourelectricity turned on.Go for it.Share your thoughts. 24. HOW PEOPLE USE SITES. 25. AFFORDANCEThe perceived ability of an object to behave in a certainway, by nature of its design.The quality of an object which allows one to perform anaction. 26. Im a button. Really, I am. 27. Im a button. Really, I am. 28. Im a button. Really, I am. 29. Im a button. Really, I am. 30. Im a button. Really, I am. 31. What does this thing do? 32. What does this thing do? 33. SIGNIFIERSPeople search for clues to help them understand context. 34. Photo: CelticSong22 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. DESIGN ELEMENTS Websites rely on pictures and icons to convey messages. Design elements that give the user context: Navigation Buttons Icons 37. Navigation 38. Buttons 39. Icons 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. Why, oh why, do people search for a website ifthey already know its name? www.bing.com 42. www.bing.com 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. WHY DOESNT THIS IPAD WORK? (because its a magazine) 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. 46. HOW PEOPLE USE SITES. 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 pagedoesnt do that immediately and clearly, users goelsewhere. Most people dont even bother scrolling to seewhats farther down the page. 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. MORE ABOUT USERS...Users dont read they scan.Users dont make optimal choices.Users dont figure out how things work.Users dont always come through the homepage. 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 51. WHY PEOPLE LEAVE SITES. 52. BACKGROUND MUSIC why is this playing?! 53. POP UPS 54. LONG WAIT TIME 55. CANT FIND SOMETHING 56. CANT TELL WHAT ITS ABOUT (rentmychest.com) 57. PAGINATION 58. INTERSTITIAL ADS 59. BAD NAVIGATION 60. POOR INFORMATION SCENT- dictates maximum benefit for minimum effort- users access if their paths show cues related todesired outcome- progress must seem rapid to be worth the effort required to reach the destination - dont use made up words 61. REQUIRED TO REGISTER 62. TOO MUCH MOVEMENT one exception. 63. TYPOS & POOR GRAMMAR My suns is cutting wood with a acts but they aint aloud to drink ail in front of there ant. 64. LAME FONTS 65. COBWEBS 66. LACK OF CLARITY 67. FLASH BASED 68. NO ABOUT OR CONTACT PAGE 69. PR JARGONBlue-sky thinking = CreativeGrey Beard = Corporate Head Seed = Share 70. ITS UGLY. 71. USER CENTERED DESIGN 72. WHAT IS USER CENTERED DESIGN?Design philosophy that focuses on the end user through:Planning PhaseDesign PhaseDevelopment PhaseRequires research on end user. 73. ISO 9241-210 (formerly 13407)International standard for human-centered process. 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. ISO 9241-210 (formerly 13407)The process is iterative.The design addresses the whole user experience.The design team includes multidisciplinary skills andperspectives. 76. STEP #1:Identify your users.Who are they?What are their tasks and goals?What is their experience level? 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. STEP #2:What functions are required?What information do they need?What form should it be?How do users think it should work? 79. STEP #3:Create design solutions.(Think simplicity, simplicity, simplicity.) 80. STEP #4:Evaluate designs by testing usability. 81. IDENTIFY NEED FOR HUMANCENTERED DESIGN SPECIFY CONTEXT OF USESYSTEM EVALUATE DESIGNSSATISFIES SPECIFIED SPECIFY REQUIREMENTS REQUIREMENTSPRODUCE DESIGN SOLUTIONS 82. enlarge 83. THE TEN USABILITY HEURISTICS 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 85. THE TEN USABILITY HEURISTICS#1 VISIBILITY OF SYSTEM STATUS#2 MATCH BETWEEN SYSTEM AND THE REAL WORLD#3 USER CONTROL AND FREEDOM#4 CONSISTENCY AND STANDARDS#5 ERROR PREVENTION#6 RECOGNITION RATHER THAN RECALL#7 FLEXIBILITY AND EFFICIENCY OF USE#8 AESTHETIC AND MINIMALIST DESIGN#9 HELP USERS RECOGNIZE, DIAGNOSE, & RECOVER FROM ERRORS#10 HELP AND DOCUMENTATION 86. #1 VISIBILITY OF SYSTEM STATUSThe system should always keep users informed about what isgoing on, through appropriate feedback within reasonable time. 87. DO 88. DONT 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. DO 91. DONT 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. DO 94. DONT 95. #4 CONSISTENCY AND STANDARDSUsers should not have to wonder whether different words,situations, or actions mean the same thing. Follow platformconventions. 96. DO 97. DONT 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. DO 100. DONT 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. DO 103. DONT 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. DO 106. DONT 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. DO 109. DONT 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. DO 112. DONT 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. DO 115. DONT 116. USABILITY REVIEWS 117. Your blog name is too long, it doesntA search box is a great thing to have,sound like a website name. It alsoand this is the perfect place to put it.sounds like its referring to a specicdiscovery. A shorter blog name willallow people to remember your siteand URL more easily.You dont need a comment feed..Unless you know for a fact that yourusers are using this feature, just having aThis small square should not be there, it post feed is ne enough. Then you dontlinks to different version of the about even need to have all that text, thepage with no title.You can delete thatorange 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 doesnt say science. It speaksconcisely. It should read About ormore to travel and history, and theAbout The Blogdiscovery of ancient worlds as opposedto new studies in science.Who are you? How are you associatedwith science? I cant even nd your fullname on this page! It is important that There is too little typographic hierarchyyou include an About the Author pageon your site. Not even the sites 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 awall of text, which makes it harder for auser to navigate.You should not display the full blog poston the homepage. Show the title and anexcerpt, and allow the user to readAs the eye can only comfortably track 7more if theyre interested. This keepsto 10 words a line, your sentences are ausers from having to scroll downtad too long.through articles that they have nointerest in.Your blog posts could benet from the Though the design (layout/color palette/addition of relevant images thatfonts) of your website isnt necessarilysummarize what the content is about.bad, we dont 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 scienceaccessible and understandable tolaymen, the design should reect that.HOMEPAGEThe current design seems tooscholarly, clinical, and outdated. 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?), Todays News, Popular Links, Latest News. SO MUCH TO CHOOSE FROM! I dont 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 whatIs this advertising? attainivf is before I click. This is too vague. 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 yourThis whole area takes up valuable real estate. On site to play Fantasy Football? DoesntSports Advisors, the ads are smaller allowing the even open in another window.left side bar to come up. Also, the content of theads are much more compelling. I wouldreconsider 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. This blur looks like it is a mistake.The logo on the homepage is customarily larger and moreprominent. It is getting lost on this page because of lack ofcontrast and the blurring of the image.Navigation is too light in color. No contrast. Needs to bemore 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 therole of the homepage.The role of the homepage is tocommunicate what the company is, the value the siteoffers over the competition and the product orservices offered. Presently, it does NONE of those things.The novice user can feel overwhelmed by homepages that do nothelp them understand their options. They may become embarrassedand blame themselves. They will just leave the site and go to a morewelcoming site.The challenge is to design a homepage that gives the user access toimportant features without cramming them onto the page itself.Focus and clarity are most important, as are the users goals.They need to be identied early. I question if they have been. Search box is not obvious. It needs to be moved to theWho 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 wherePartners? Agencies?It cheapens the work and seems inappropriate.most users will look for it. Plus it is buried in with theMemberships? Should at the contact information and not self evident. very least have a link so the uninformed user can research what they are. 121. WORKSHOP #3Please break into groups.Find a site to do a heuristic (usability) review.Be prepared to share your observations with the class. 122. USER AND BUSINESS GOALS 123. BUSINESS GOALSCustomer 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, youllalmost certainly win. Mark Hurst 124. USER AND BUSINESS GOALS...should be aligned. 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. HERES WHAT HAPPENS:Suits decide on business goalsConvert to strategyBrings 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. WHATS THE RESULT?Bad user experience. 128. BUSINESS GOALS ARE UNIVERSALIncrease traffic to the site.Retain users.Improve conversion rates. 129. CONVERSIONWhen a prospective customer takes the marketersintended action.-Wikipedia 130. SALESSign upsContact form submissions 131. HOW TO RETAIN USERS:Timely, relevant contentEngage themProvide an experienceSERVE THEIR NEEDS. 132. HOW TO IMPROVE CONVERSION:Easy to use siteClear hierarchyCalls to actionCommunicate valueStudy analyticsA/B testingSERVE THEIR NEEDS. 133. HOW TO INCREASE TRAFFIC:Interesting, original copyIn-bound linksSearch Engine Optimization (SEO)E-blasts/NewslettersSocial MediaSERVE THEIR NEEDS. 134. DESIRABILITY 135. DESIRABILITYDelight comes not from the latest widget but from helpinguses accomplish their goals. 136. DESIRABILITYBrings value to the userHighlights valuePersuades user of valueAdds emotional value to userpiano stairs Pentagram 137. HOMEWORK WEEK #11. Surf the web. Find one site that is easy to use. One that isnt.Tell why.2. If you had to do a comprehensive usability plan for the CocaCola website or Microsoft Web site, which would you chose andwhy? Type your answers and submit next week.3. Download Research Based Web Design & UsabilityGuidelines. Read chapter one and two.4. Look at the site you reviewed at the start of the class. Writedown what changes you would make to make the site more user-friendly. Type your answers and submit next week. 138. INFORMATION ARCHITECTURE 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 isnt relevant. 140. IA IS ORGANIZATIONAll about creating groups that make sense to the people whouse them.Supermarkets dont organize Swiss cheese with Swisschocolate, Belgian chocolate with Belgian beer. 141. IA ON THE WEBIn supermarkets its done with layout, sign age and visualguides.On websites we use navigation bars button and links. 142. IA IS ALL ABOUT:1. Organizing content or objects2. Describing them clearly3. Providing ways for people to get to them 143. WHERE DO YOU FIND IA?1. Wherever you need to organize information or objects2. Websites, intranets3. File system at work or home, movies, music, or even grocerieson a shelf! 144. WHAT YOU NEED TO UNDERSTAND ...in order to develop a successful IA 145. PEOPLEWhat they need do to, how they think & what they alreadyknow. 146. CONTENTWhat you have, what you should have & what you need. 147. CONTEXTThe business or personal goals for the site, who else will beinvolved & what your constraints are. 148. PEOPLECONTENTCONTEXT 149. IA STARTS WITH Defining the project & its goals Researching end users Reviewing all content Understanding technological & design constraints 150. IA WILL DESCRIBEOverall structure of the siteGroups & sub groups (to be used in navigation includes whatthey will be called)Metadata: what youll use to describe products 151. WINESHOP HOME | PRODUCTS |SERVICES|ABOUT US| CONTACTPRODUCTSHome > Products > Wine > Usability Chardonnay 2010WineLorem ipsum dolor sit amet, consecteturFoodadipiscing elit. Praesent sodales, sapien utSed vitae libero et nuncconsequat adipiscing. Ut sitGlasses porta blandit, metus dui imperdiet ipsum, idamet libero magna. In aceleifend est nulla eu orci. Mauris lectus eros, aliquam est. Morbi ac loremKitchenware rutrum at lobortis ut, eleifend eget eros. Nullamassa, et tincidunt erat.at felis eget neque aliquam convallis. Aliquamelit risus, facilisis eu congue et, adipiscing Buy Now Usabilityvitae eros. Pellentesque eleifend pellentesqueChardonnayfelis. Vivamus eleifend tortor in enim 2010 consequat tristique. Donec sit amet metussem. Integer quis massa nunc. Integer necpurus vehicula urna aliquam elementum. 152. WINESHOP HOME | PRODUCTS |SERVICES|ABOUT US| CONTACTPRODUCTSHome > Products > Wine > Usability Chardonnay 2010WineLorem ipsum dolor sit amet, consecteturFoodadipiscing elit. Praesent sodales, sapien utSed vitae libero et nuncconsequat adipiscing. Ut sitGlasses porta blandit, metus dui imperdiet ipsum, idamet libero magna. In aceleifend est nulla eu orci. Mauris lectus eros, aliquam est. Morbi ac loremKitchenware rutrum at lobortis ut, eleifend eget eros. Nullamassa, et tincidunt erat.at felis eget neque aliquam convallis. Aliquamelit risus, facilisis eu congue et, adipiscing Buy Now Usabilityvitae eros. Pellentesque eleifend pellentesqueChardonnayfelis. Vivamus eleifend tortor in enim 2010 consequat tristique. Donec sit amet metussem. Integer quis massa nunc. Integer necpurus vehicula urna aliquam elementum.THIS IS IA. 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. WINESHOP HOME | PRODUCTS |SERVICES|ABOUT US| CONTACTPRODUCTSHome > Products > Wine > Usability Chardonnay 2010WineLorem ipsum dolor sit amet, consecteturFoodadipiscing elit. Praesent sodales, sapien utSed vitae libero et nuncconsequat adipiscing. Ut sitGlasses porta blandit, metus dui imperdiet ipsum, idamet libero magna. In aceleifend est nulla eu orci. Mauris lectus eros, aliquam est. Morbi ac loremKitchenware rutrum at lobortis ut, eleifend eget eros. Nullamassa, et tincidunt erat.at felis eget neque aliquam convallis. Aliquamelit risus, facilisis eu congue et, adipiscing Buy Now Usabilityvitae eros. Pellentesque eleifend pellentesqueChardonnayfelis. Vivamus eleifend tortor in enim 2010 consequat tristique. Donec sit amet metussem. Integer quis massa nunc. Integer necpurus vehicula urna aliquam elementum. THIS IS NAVIGATION. 155. DEVELOPING AN ARCHITECTURE 156. REVIEW: Results of your requirements & task analyses Earlier versions of site Competitors sites 157. THIS DEVELOPS LIST OF:Content piecesCandidate labelsOrganization schemes 158. EVALUATE CONTENT FOR: Quality Completeness Add & design thats needed Create content inventory 159. content inventory 160. content inventory 161. CREATE & EVALUATE STRUCTURE: Brainstorm content categories & site structures Decide which content belongs together on a page User test & refine 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. 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. IMPLEMENT: Build the site & update specs as needed Test the site Train maintenance staff 165. ORGANIZATION SCHEMES 166. ALPHABETICAL Primary scheme for dictionaries, encyclopedias Non-fiction indices Phone books On the web: directories Last name Products Departments Services 167. CHRONOLOGICAL Press Releases Blog Posts News 168. GEOGRAPHICAL Weather Store Locators News sites 169. TOPICAL Provides topical access to content Pinterest 170. TASK ORIENTED Organized into process, function or tasks 171. ORGANIZATIONAL STRUCTURES 172. ORGANIZATIONAL STRUCTURESHow the information is structured.How one relates to it. 173. HIERARCHYRelationship between items:> parent & child; broader & narrower 174. DATABASEA planned structure all information fits into that structurePieces may have no relationship to each other 175. This has nothing to do with... 176. this! 177. But they share the same pieces that make up the listing: title payment methods description date added tags photograph materials category location 178. METADATAdata about dataor,information about informationall of the information that describes or relates to a piece ofcontent. this is what the database is all about. 179. THREE KINDS OF METADATA: Intrinsic: What the object actually is Administrative: How it is used Descriptive: Description of the item 180. EXAMPLES OF METADATA: Blog post (intrinsic) Author (administrative) Date posted (administrative) URL (administrative) Status: published (administrative) Title (descriptive) Category (descriptive) Tags (descriptive) 181. HYPERTEXT: Almost an anti-structure pattern Pieces are connected according to the relationship between them No database No hierarchy 182. LINEAR Just as it sounds one thing follows another Not common on the web Dont use unless users need to read things in order to avoid frustration 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. CATALOGUE Second most common Basically a database pattern Bottom level is content! 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. 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. SUB-SITES LARGE sites Government Universities Large intranets Site is a series of sub-sites Held together by homepage or top level pages 188. LABELS 189. LABELSThe words you use in navigation.Words that describe chunks of content. 190. THE BEST LABELS... 191. CALL THINGS...by the correct name 192. ARE CONSISTENT 193. USE TERMINOLOGY...that your audience uses 194. ARE AS CLEAR AS POSSIBLEAvoid mystery meat navigationFlatPakHarry Ford BlueBell 195. WHERE TO GET IDEAS FOR LABELS 196. CONTENTLook at the words used in your content. 197. USER RESEARCHYour research will contain hundreds of words that describehow your audience phrase ideas and concepts. 198. CARD SORTINGHave people provide a label describing what the group ofcards is about. 199. WHAT EVERYONE ELSE DOESLook around at competitors! 200. WORKSHOP # 1CARD SORTING EXERCISEDivide into three groups. Write one word per card.Skin care Hair care Finance tipsDoes cutting salt Is fruit juice really For vegetariansincrease heartyour friend.Could your waterattacks?Workout plans bottle be makingRecipes Meal plansyou fat?Disease risks Breakfast foods, theWorkoutsLowering stress good the bad andAsk the expertsNutrition the ugly..Weight lossLife styleLiving green 201. WORKSHOP # 1CARD SORTING EXERCISECreate categories for the words, then group and findappropriate labels. 202. WORKSHOP # 2CREATE A HIERARCHICAL SITEMAP FOR SITE YOU DID IN CARDSORTING EXERCISE. 203. NAVIGATION 204. NAVIGATIONRefers to the methods we design that let people movearound information.More than a single bar at the top of a page. 205. NAVIGATION CAN ALSO...Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnt know about 206. NAVIGATION INCLUDES: Navigation bars Hyperlinks Buttons Other clickable things 207. TYPES OF NAVIGATION:GlobalLocalSupplementaryUtilityContextual 208. GLOBALDefined as links to a sites top-level categoriesFound on every page of the site 209. LOCALPicks up where global navigation leaves offFound on inner pages - specific site sectionGives users tools to move around & accomplish tasks 210. SUPPLEMENTARYSupplements main navigationSitemaps, site tour videos, search bars, site index 211. UTILITYThings users need on a regular basisAbout, Contact, Privacy 212. CONTEXTUALEmbedded in the content of the pageHyperlinks 213. TYPES OF NAVIGATION 02:Navigation barsHorizontal or vertical barShows the categories usually 1-2 levels 214. USE HORIZONTAL NAVIGATION IF:you have a small number of top-level items that can fit acrossthe screenyou arent likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arent likely to translate the site into a language that useslong, compound words (which take up more space)you want to maximize the amount of page available for content 215. USE HORIZONTAL NAVIGATION IF:you have more top level groups than would easily fit acrossa screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the websiteShowcase 216. USE VERTICAL NAVIGATION IF:you have more top level groups than would easily fit across ascreenyou may add or change groups over timesome groups may have long labelsyou may want to translate the siteShowcase 217. INVERTED LHorizontal & Vertical 218. TABSVariation of horizontal navigationAlways has 2nd level that need to be connected 219. DROP DOWNAllows user to see second level navigation 220. WORKSHOP # 3CREATE NAVIGATION FOR SITEYOU DID IN CARD SORTINGEXERCISE.Landing pageA secondary page 221. SKETCHING 222. USER FLOWSSimple diagrams that follow a user down a path of activityCan be storyboards or flow chartsSimilar to scenarios StoryboardDonald Graham 223. THUMBNAIL SKETCHESSimple sketches that then go into wireframesSmall representation of designScribble linesUse text captions to describe what happens 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. CREATING WIREFRAMES Easy to draw Straight lines and text Plenty of drawing packages available:VisioIllustratorKeynote MockFlowBalsamiqOmniGroup 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? (Wheres my stuff?!)Developers shows how things need to work, how toimplement 227. WHAT TO INCLUDE 228. ABSOLUTE ESSENTIALSLogo placementNavigationContentHierarchies 229. EXPLANATIONSAnnotationsBackground informationImportant things to pay attention to 230. EXPLANATIONSBetter visual approaches so people can easily understandwhat youre communicating. 231. EXTRAS: TOOLS & TEMPLATES 232. EIGHTSHAPES UNIFYThis is an InDesign-based documentation system. Itcontains templates, common page layouts and symbollibraries to get you started.Download 233. KONIGI WIREFRAME STENCILSFor OmniGraffle, this contains a broad set of components touse in wireframes. Download 234. NICK FINCKS STENCILSThis is similar to the Konigi stencil set, but for MicrosoftVisio: Download 235. BALSAMIQThis prototyping tool is currently the most popular,allowing you to create simple sketchy prototypes online. Visit Site 236. AXUREVery established software for creating clickable prototypes: Download 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. WORKSHOP # 4CREATE WIREFRAMES FOR SITEYOU DID IN CARD SORTINGEXERCISE.One wireframe for landing pageOne wireframe for a secondary page 239. PROTOTYPES 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. INTERACTIVE PROTOTYPESUsually HTML or FlashGraphic images with hotspotsCan do in Dreamweaver, Powerpoint 242. COMPETITION AS PROTOTYPESee what works and what doesntQuick route to get results 243. PERSONAS 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. PERSONAS DESCRIBE: Who this person is How they use the site What interests they have What behaviors they have 246. PERSONAS ELEMENTS: Goals Attitudes Behaviors & Tasks Frustrations & Pain Points Name, photo, demographic info, skill level, environment Narrative (scenario) 247. RESEARCH INVOLVES: Key stakeholders Web analytics Customer support Customer 248. THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals & needs ofpersonas. 249. USE CASES 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. A USE CASEShould mirror your site strategy and business goals.Can be like a story or scenario: 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. BENEFITS INCLUDE:Understanding the user helps design for them.Clarifying assumptions - scenarios help the team formalizeassumptions.Fully exploring the design - scenarios serve to explore all theimportant aspects of the design.Provides context - for understanding the featuresHelping other project tasks - scenarios represent the importanttasks. 254. WORKSHOP #5Please 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 havesame underlying goals and behaviors)Name, age, interests Internet/Computing profilePersonal characteristics Computing/technical likes and dislikesGoals and motivationsQuotesPhotos Work/Home computing environmentJob/profession Frequency of computer use...and anything else you think is important. 255. WORKSHOP #5GROUP #1:Site is to provide info for people starting own business; some of themhave experience in he business world; others this is their firstexposure to issues running a business.GROUP #2:Site is to provide info for people looking to place parents in assistedliving.GROUP #3:Site is to provide information about Connecticut; site seeing, lodging,historical information etc...