Your SlideShare is downloading. ×
  • Like
NYU Web Intensive - Week 3 Class 1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

NYU Web Intensive - Week 3 Class 1

  • 724 views
Published

 

Published in Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
724
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
9
Comments
0
Likes
0

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. HELLO, Website Intensive Week Three Professor Cathline Marshall nyuwebintensive.wordpress.com c.marshall.nyu@gmail.com
  • 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 #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?
  • 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 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. “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. DON’T MAKE ME THINK.
  • 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. WHAT USERS LOOK FOR: Ease of use Speed Practicality Credibility Consistency Simplicity, 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: Psychology Engineering Industrial design Graphic design Statistics
  • 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. 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 #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.
  • 24. HOW PEOPLE USE SITES.
  • 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. I’m a button. Really, I am.
  • 27. I’m a button. Really, I am.
  • 28. I’m a button. Really, I am.
  • 29. I’m a button. Really, I am.
  • 30. I’m 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 if they 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 DOESN’T THIS IPAD WORK? (because it’s 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 pagedoesn’t do that immediately and clearly, users goelsewhere. Most people don’t even bother scrolling to seewhat’s 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 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. 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. CAN’T FIND SOMETHING
  • 56. CAN’T TELL WHAT IT’S 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 to desired outcome- progress must seem rapid to be worth the effort required to reach the destination - don’t 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 ain’t 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. IT’S UGLY.
  • 71. USER CENTERED DESIGN
  • 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. 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 USE SYSTEM EVALUATE DESIGNS SATISFIES SPECIFIED SPECIFY REQUIREMENTS REQUIREMENTS PRODUCE 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. DON’T
  • 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. DON’T
  • 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. DON’T
  • 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. DON’T
  • 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. DON’T
  • 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. DON’T
  • 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. DON’T
  • 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. DON’T
  • 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. DON’T
  • 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. DON’T
  • 116. USABILITY REVIEWS
  • 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. 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. 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. 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. WORKSHOP #3 Please 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 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. 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. 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. WHAT’S 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 content Engage them Provide an experience SERVE THEIR NEEDS.
  • 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. HOW TO INCREASE TRAFFIC: Interesting, original copy In-bound links Search Engine Optimization (SEO) E-blasts/Newsletters Social Media SERVE THEIR NEEDS.
  • 134. DESIRABILITY
  • 135. DESIRABILITYDelight comes not from the latest widget but from helpinguses accomplish their goals.
  • 136. DESIRABILITY Brings value to the user Highlights value Persuades user of value Adds emotional value to user piano stairs Pentagram
  • 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.
  • 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 isn’t relevant.
  • 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. IA ON THE WEBIn supermarkets it’s 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 objects 2. Describing them clearly 3. Providing ways for people to get to them
  • 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. 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. PEOPLECONTENT CONTEXT
  • 149. IA STARTS WITH Defining the project & its goals Researching end users Reviewing all content Understanding technological & design constraints
  • 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. 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. 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. 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 | 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.
  • 155. DEVELOPING AN ARCHITECTURE
  • 156. REVIEW: Results of your requirements & task analyses Earlier versions of site Competitors’ sites
  • 157. THIS DEVELOPS LIST OF: Content pieces Candidate labels Organization schemes
  • 158. EVALUATE CONTENT FOR: Quality Completeness Add & design that’s 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. 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. 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 Don’t 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” navigation FlatPak Harry 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 # 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. WORKSHOP # 1 CARD SORTING EXERCISE Create categories for the words, then group and find appropriate labels.
  • 202. WORKSHOP # 2 CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING 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 need Show the context of the information Show what is related and relevant Help people find information they didn’t know about
  • 206. NAVIGATION INCLUDES: Navigation bars Hyperlinks Buttons Other clickable things
  • 207. TYPES OF NAVIGATION: Global Local Supplementary Utility Contextual
  • 208. GLOBALDefined as links to a site’s 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 bars Horizontal or vertical bar Shows the categories – usually 1-2 levels
  • 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. 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. 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. 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 # 3 CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISE. Landing page A secondary page
  • 221. SKETCHING
  • 222. USER FLOWSSimple diagrams that follow a user down a path of activityCan be storyboards or flow chartsSimilar to scenarios Storyboard Donald 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: Visio Illustrator Keynote MockFlow Balsamiq OmniGroup
  • 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. WHAT TO INCLUDE
  • 228. ABSOLUTE ESSENTIALSLogo placementNavigationContentHierarchies
  • 229. EXPLANATIONSAnnotationsBackground informationImportant things to pay attention to
  • 230. EXPLANATIONSBetter visual approaches so people can easily understandwhat you’re 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 FINCK’S 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 # 4 CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISE. One wireframe for landing page One 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 doesn’tQuick 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 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. 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. 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...