Website Usability | Day 2

INFORMATION ARCHITECTUREMonday, July 16, 2012

INFORMATION ARCHITECTURE The structure or organization of your website. Shows how different pages relate to one another. Involves content analysis, page organization, labels, cues, search techniques and navigation. Can help people find their way through the information, & ignore what isn’t relevant.Monday, July 16, 2012

IA IS ORGANIZATION All about creating groups that make sense to the people who use them. Supermarkets don’t organize Swiss cheese with Swiss chocolate, Belgian chocolate with Belgian beer.Monday, July 16, 2012

IA ON THE WEB In supermarkets it’s done with layout, sign age and visual guides. On websites we use navigation bars button and links.Monday, July 16, 2012

Monday, July 16, 2012

IA IS ALL ABOUT: 1. Organizing content or objects 2. Describing them clearly 3. Providing ways for people to get to themMonday, July 16, 2012

WHERE DO YOU FIND IA? 1. Wherever you need to organize information or objects 2. Websites, intranets 3. File system at work or home, movies, music, or even groceries on a shelf!Monday, July 16, 2012

WHAT YOU NEED TO UNDERSTAND ...in order to develop a successful IAMonday, July 16, 2012

PEOPLE What they need do to, how they think & what they already know.Monday, July 16, 2012

CONTENT What you have, what you should have & what you need.Monday, July 16, 2012

CONTEXT The business or personal goals for the site, who else will be involved & what your constraints are.Monday, July 16, 2012

PEOPLE CONTENT CONTEXTMonday, July 16, 2012

IA STARTS WITH Defining the project & its goals Researching end users Reviewing all content Understanding technological & design constraintsMonday, July 16, 2012

IA WILL DESCRIBE Overall structure of the site Groups & sub groups (to be used in navigation – includes what they will be called) Metadata: what you’ll use to describe productsMonday, July 16, 2012

WINESHOP HOME | PRODUCTS | SERVICES | ABOUT US | C O N TA C T PRODUCTS Home > Products > Wine > Usability Chardonnay 2010 Wine Lorem ipsum dolor sit amet, consectetur Food adipiscing elit. Praesent sodales, sapien ut Sed vitae libero et nunc consequat adipiscing. Ut sit Glasses porta blandit, metus dui imperdiet ipsum, id amet libero magna. In ac eleifend est nulla eu orci. Mauris lectus eros, aliquam est. Morbi ac lorem Kitchenware rutrum at lobortis ut, eleifend eget eros. Nulla massa, et tincidunt erat. at felis eget neque aliquam convallis. Aliquam elit risus, facilisis eu congue et, adipiscing Buy Now Usability vitae eros. Pellentesque eleifend pellentesque Chardonnay felis. Vivamus eleifend tortor in enim 2010 consequat tristique. Donec sit amet metus sem. Integer quis massa nunc. Integer nec purus vehicula urna aliquam elementum.Monday, July 16, 2012

WINESHOP HOME | PRODUCTS | SERVICES | ABOUT US | C O N TA C T PRODUCTS Home > Products > Wine > Usability Chardonnay 2010 Wine Lorem ipsum dolor sit amet, consectetur Food adipiscing elit. Praesent sodales, sapien ut Sed vitae libero et nunc consequat adipiscing. Ut sit Glasses porta blandit, metus dui imperdiet ipsum, id amet libero magna. In ac eleifend est nulla eu orci. Mauris lectus eros, aliquam est. Morbi ac lorem Kitchenware rutrum at lobortis ut, eleifend eget eros. Nulla massa, et tincidunt erat. at felis eget neque aliquam convallis. Aliquam elit risus, facilisis eu congue et, adipiscing Buy Now Usability vitae eros. Pellentesque eleifend pellentesque Chardonnay felis. Vivamus eleifend tortor in enim 2010 consequat tristique. Donec sit amet metus sem. Integer quis massa nunc. Integer nec purus vehicula urna aliquam elementum. THIS IS IA.Monday, July 16, 2012

NAVIGATION Dependent on the IA Done after IA is drafted Includes: Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes & site mapsMonday, July 16, 2012

WINESHOP HOME | PRODUCTS | SERVICES | ABOUT US | C O N TA C T PRODUCTS Home > Products > Wine > Usability Chardonnay 2010 Wine Lorem ipsum dolor sit amet, consectetur Food adipiscing elit. Praesent sodales, sapien ut Sed vitae libero et nunc consequat adipiscing. Ut sit Glasses porta blandit, metus dui imperdiet ipsum, id amet libero magna. In ac eleifend est nulla eu orci. Mauris lectus eros, aliquam est. Morbi ac lorem Kitchenware rutrum at lobortis ut, eleifend eget eros. Nulla massa, et tincidunt erat. at felis eget neque aliquam convallis. Aliquam elit risus, facilisis eu congue et, adipiscing Buy Now Usability vitae eros. Pellentesque eleifend pellentesque Chardonnay felis. Vivamus eleifend tortor in enim 2010 consequat tristique. Donec sit amet metus sem. Integer quis massa nunc. Integer nec purus vehicula urna aliquam elementum. THIS IS NAVIGATION.Monday, July 16, 2012

DEVELOPING AN ARCHITECTUREMonday, July 16, 2012

REVIEW: Results of your requirements & task analyses Earlier versions of site Competitors’ sitesMonday, July 16, 2012

THIS DEVELOPS LIST OF: Content pieces Candidate labels Organization schemesMonday, July 16, 2012

EVALUATE CONTENT FOR: Quality Completeness Add & design that’s needed Create content inventoryMonday, July 16, 2012

content inventoryMonday, July 16, 2012

CREATE & EVALUATE STRUCTURE: Brainstorm content categories & site structures Decide which content belongs together on a page User test & refineMonday, July 16, 2012

MAP THE PAGES: Create a sitemap starting with highest priorities Add short cuts & redundant links Add necessary support tools, such as Help, Site Map, SearchMonday, July 16, 2012

DEVELOP NAVIGATION BAR: Refine layout & orienting of information i.e., headers, page titles Establish final labels & graphics Remember users’ mental models Do user testingMonday, July 16, 2012

IMPLEMENT: Build the site & update specs as needed Test the site Train maintenance staffMonday, July 16, 2012

ORGANIZATION SCHEMESMonday, July 16, 2012

ALPHABETICAL Primary scheme for dictionaries, encyclopedias Non-fiction indices Phone books On the web: directories Last name Products Departments ServicesMonday, July 16, 2012

CHRONOLOGICAL Press Releases Blog Posts NewsMonday, July 16, 2012

GEOGRAPHICAL Weather Store Locators News sitesMonday, July 16, 2012

TOPICAL Provides topical access to content PinterestMonday, July 16, 2012

TASK ORIENTED Organized into process, function or tasksMonday, July 16, 2012

ORGANIZATIONAL STRUCTURESMonday, July 16, 2012

ORGANIZATIONAL STRUCTURES How the information is structured. How one relates to it.Monday, July 16, 2012

HIERARCHY Relationship between items: > parent & child; broader & narrowerMonday, July 16, 2012

DATABASE A planned structure – all information fits into that structure Pieces may have no relationship to each otherMonday, July 16, 2012

This has nothing to do with...Monday, July 16, 2012

this!Monday, July 16, 2012

But they share the same pieces that make up the listing: • title • payment methods • description • date added • tags • photograph • materials • category • locationMonday, July 16, 2012

METADATA “data about data”or, “information about information” all of the information that describes or relates to a piece of content. this is what the database is all about.Monday, July 16, 2012

THREE KINDS OF METADATA: Intrinsic: What the object actually is Administrative: How it is used Descriptive: Description of the itemMonday, July 16, 2012

EXAMPLES OF METADATA: Blog post (intrinsic) Author (administrative) Date posted (administrative) URL (administrative) Status: published (administrative) Title (descriptive) Category (descriptive) Tags (descriptive)Monday, July 16, 2012

HYPERTEXT: Almost an anti-structure pattern Pieces are connected according to the relationship between them No database No hierarchyMonday, July 16, 2012

LINEAR Just as it sounds –one thing follows another Not common on the web Don’t use unless users need to read things in order to avoid frustrationMonday, July 16, 2012

COMBINED PATTERNS Simple hierarchy + simple database Good for small, medium & large sites Create hierarchical sections for basic content Power of a database to assemble detailed information within a sectionMonday, July 16, 2012

CATALOGUE Second most common Basically a database pattern Bottom level is content!Monday, July 16, 2012

TYPES OF CATALOGUE PAGES Gallery pages: these provide direct access to the content pages. Hardest working pages. Department pages: provide access to the galleries. Store pages: provide access to the department pages. Jared SpoolMonday, July 16, 2012

HUB AND SPOKE Users move down one level into something more detailed Return to starting point (the hub) Then to another detailed page Back to hub and so onMonday, July 16, 2012

SUB-SITES LARGE sites Government Universities Large intranets Site is a series of sub-sites Held together by homepage or top level pagesMonday, July 16, 2012

LABELSMonday, July 16, 2012

LABELS The words you use in navigation. Words that describe chunks of content.Monday, July 16, 2012

THE BEST LABELS...Monday, July 16, 2012

CALL THINGS ...by the correct nameMonday, July 16, 2012

ARE CONSISTENTMonday, July 16, 2012

USE TERMINOLOGY ...that your audience usesMonday, July 16, 2012

ARE AS CLEAR AS POSSIBLE Avoid “mystery meat” navigation FlatPak Harry Ford BlueBellMonday, July 16, 2012

WHERE TO GET IDEAS FOR LABELSMonday, July 16, 2012

CONTENT Look at the words used in your content.Monday, July 16, 2012

USER RESEARCH Your research will contain hundreds of words that describe how your audience phrase ideas and concepts.Monday, July 16, 2012

CARD SORTING Have people provide a label describing what the group of cards is about.Monday, July 16, 2012

WHAT EVERYONE ELSE DOES Look around at competitors!Monday, July 16, 2012

WORKSHOP # 1 CARD SORTING EXERCISE Divide into three groups. Write one word per card. Skin care Hair care Finance tips Does cutting salt Is fruit juice really For vegetarians increase heart your friend. Could your water attacks? Workout plans bottle be making Recipes Meal plans you fat? Disease risks Breakfast foods, the Workouts Lowering stress good the bad and Ask the experts Nutrition the ugly.. Weight loss Life style Living greenMonday, July 16, 2012

WORKSHOP # 1 CARD SORTING EXERCISE Create categories for the words, then group and find appropriate labels.Monday, July 16, 2012

WORKSHOP # 2 CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE.Monday, July 16, 2012

NAVIGATIONMonday, July 16, 2012

NAVIGATION Refers to the methods we design that let people move around information. More than a single bar at the top of a page.Monday, July 16, 2012

NAVIGATION CAN ALSO... Let people browse to the content or functionality they need Show the context of the information Show what is related and relevant Help people find information they didn’t know aboutMonday, July 16, 2012

NAVIGATION INCLUDES: Navigation bars Hyperlinks Buttons Other clickable thingsMonday, July 16, 2012

TYPES OF NAVIGATION: Global Local Supplementary Utility ContextualMonday, July 16, 2012

GLOBAL Defined as links to a site’s top-level categories Found on every page of the siteMonday, July 16, 2012

LOCAL Picks up where global navigation leaves off Found on inner pages - specific site section Gives users tools to move around & accomplish tasksMonday, July 16, 2012

SUPPLEMENTARY Supplements main navigation Sitemaps, site tour videos, search bars, site indexMonday, July 16, 2012

UTILITY Things users need on a regular basis About, Contact, PrivacyMonday, July 16, 2012

CONTEXTUAL Embedded in the content of the page HyperlinksMonday, July 16, 2012

TYPES OF NAVIGATION 02: Navigation bars Horizontal or vertical bar Shows the categories – usually 1-2 levelsMonday, July 16, 2012

USE HORIZONTAL NAVIGATION IF: you have a small number of top-level items that can fit across the screen you aren’t likely to be adding new top-level items your labels are short enough to fit into the horizontal space you aren’t likely to translate the site into a language that uses long, compound words (which take up more space) you want to maximize the amount of page available for contentMonday, July 16, 2012

USE HORIZONTAL NAVIGATION IF: you have more top level groups than would easily fit across a screen you may add or change groups over time some groups may have long labels you may want to translate the website ShowcaseMonday, July 16, 2012

USE VERTICAL NAVIGATION IF: you have more top level groups than would easily fit across a screen you may add or change groups over time some groups may have long labels you may want to translate the site ShowcaseMonday, July 16, 2012

INVERTED L Horizontal & VerticalMonday, July 16, 2012

TABS Variation of horizontal navigation Always has 2nd level that need to be connectedMonday, July 16, 2012

DROP DOWN Allows user to see second level navigationMonday, July 16, 2012

WORKSHOP # 3 CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISE. Landing page A secondary pageMonday, July 16, 2012

SKETCHINGMonday, July 16, 2012

USER FLOWS Simple diagrams that follow a user down a path of activity Can be storyboards or flow charts Similar to scenarios Storyboard Donald GrahamMonday, July 16, 2012

THUMBNAIL SKETCHES Simple sketches that then go into wireframes Small representation of design Scribble lines Use text captions to describe what happensMonday, July 16, 2012

WIREFRAMES First step in design process Design drawings without visual treatment Simple lines, few colors Purpose is to show what will be on a page No graphic design No interactionMonday, July 16, 2012

CREATING WIREFRAMES Easy to draw Straight lines and text Plenty of drawing packages available: Visio Illustrator Keynote MockFlow Balsamiq OmniGroupMonday, July 16, 2012

WHO USES WIREFRAMES? Project team – to discuss different ideas & approaches Content authors – how will their content fit? What pages do they have? Managers – are business needs met? (Where’s my stuff?!) Developers – shows how things need to work, how to implementMonday, July 16, 2012

WHAT TO INCLUDEMonday, July 16, 2012

ABSOLUTE ESSENTIALS Logo placement Navigation Content HierarchiesMonday, July 16, 2012

EXPLANATIONS Annotations Background information Important things to pay attention toMonday, July 16, 2012

EXPLANATIONS Better visual approaches so people can easily understand what you’re communicating.Monday, July 16, 2012

EXTRAS: TOOLS & TEMPLATESMonday, July 16, 2012

EIGHTSHAPES UNIFY This is an InDesign-based documentation system. It contains templates, common page layouts and symbol libraries to get you started. DownloadMonday, July 16, 2012

KONIGI WIREFRAME STENCILS For OmniGraffle, this contains a broad set of components to use in wireframes. DownloadMonday, July 16, 2012

NICK FINCK’S STENCILS This is similar to the Konigi stencil set, but for Microsoft Visio: DownloadMonday, July 16, 2012

BALSAMIQ This prototyping tool is currently the most popular, allowing you to create simple sketchy prototypes online. Visit SiteMonday, July 16, 2012

AXURE Very established software for creating clickable prototypes: DownloadMonday, July 16, 2012

MICROSOFT SKETCHFLOW At the far end of the prototyping spectrum is Sketchflow, which lets you create everything from quick sketch-style- prototypes through to quite complex interactive prototypes with re-usable code. DownloadMonday, July 16, 2012

WORKSHOP # 4 CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISE. One wireframe for landing page One wireframe for a secondary pageMonday, July 16, 2012

PROTOTYPESMonday, July 16, 2012

PAPER PROTOTYPES Hand drawn images of a site Usually rough, but great for early testing Can make changes while testing Not good for heavy interaction Can get new ideas for links from user Paper PrototypingMonday, July 16, 2012

INTERACTIVE PROTOTYPES Usually HTML or Flash Graphic images with hotspots Can do in Dreamweaver, PowerpointMonday, July 16, 2012

COMPETITION AS PROTOTYPE See what works and what doesn’t Quick route to get resultsMonday, July 16, 2012

PERSONASMonday, July 16, 2012

WHAT IS A PERSONA? Hypothetical “stand-ins” for actual users. Not real people but represent real people. Created from user research - not a set demographics. Represent a segment of your users. Helps build consensus.Monday, July 16, 2012

PERSONAS DESCRIBE: Who this person is How they use the site What interests they have What behaviors they haveMonday, July 16, 2012

PERSONAS ELEMENTS: Goals Attitudes Behaviors & Tasks Frustrations & Pain Points Name, photo, demographic info, skill level, environment Narrative (scenario)Monday, July 16, 2012

RESEARCH INVOLVES: Key stakeholders Web analytics Customer support CustomerMonday, July 16, 2012

THEY REPRESENT YOUR USERS Websites should be designed to meet the goals & needs of personas.Monday, July 16, 2012

USE CASESMonday, July 16, 2012

WHAT IS A USE CASE? Description of a user type in a scenario. Gives a context for designing features. Develops scope for the site.Monday, July 16, 2012

A USE CASE Should mirror your site strategy and business goals. Can be like a story or scenario:Monday, July 16, 2012

SCENARIO Emma visits Craigs List homepage, and selects “Chicago” as her location. She does not have anything in particular that she is looking to buy right now. She then browses available categories in the “for sale” area and finds a “toys” category. She sees a posting for a “Groovy Kitchen,” which she thinks would be great for her daughter. She contacts the seller to arrange further details.Monday, July 16, 2012

BENEFITS INCLUDE: Understanding the user helps design for them. Clarifying assumptions - scenarios help the team formalize assumptions. Fully exploring the design - scenarios serve to explore all the important aspects of the design. Provides context - for understanding the features Helping other project tasks - scenarios represent the important tasks.Monday, July 16, 2012

WORKSHOP #5 Please break into three groups. Create 2 personas. Segment people based on behaviors, go.als and needs (2 people can be in different demographic group but have same underlying goals and behaviors) Name, age, interests Internet/Computing profile Personal characteristics Computing/technical likes and dislikes Goals and motivations Quotes Photos Work/Home computing environment Job/profession Frequency of computer use ...and anything else you think is important.Monday, July 16, 2012

WORKSHOP #6 Create 3 possible scenarios for each persona that the user might execute on the site you were assigned.Monday, July 16, 2012

Website Usability | Day 2

by studiokandm on Feb 21, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 315

Statistics

Website Usability | Day 2 Presentation Transcript

http://nyuusability.wordpress.com	314
http://172.18.10.152	1