website usability | day 2
DESCRIPTION
TRANSCRIPT
INFORMATION ARCHITECTURE
Monday July 16 2012
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 amp ignore what isnrsquot relevant
Monday July 16 2012
IA IS ORGANIZATIONAll about creating groups that make sense to the people who use them
Supermarkets donrsquot organize Swiss cheese with Swiss chocolate Belgian chocolate with Belgian beer
Monday July 16 2012
IA ON THE WEBIn supermarkets itrsquos 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
1 Organizing content or objects2 Describing them clearly3 Providing ways for people to get to them
IA IS ALL ABOUT
Monday July 16 2012
1 Wherever you need to organize information or objects2 Websites intranets3 File system at work or home movies music or even groceries on a shelf
WHERE DO YOU FIND IA
Monday July 16 2012
WHAT YOU NEED TO UNDERSTANDin order to develop a successful IA
Monday July 16 2012
PEOPLEWhat they need do to how they think amp what they already know
Monday July 16 2012
CONTENTWhat you have what you should have amp what you need
Monday July 16 2012
CONTEXTThe business or personal goals for the site who else will be involved amp what your constraints are
Monday July 16 2012
PEOPLE
CONTEXTCONTENT
Monday July 16 2012
Defining the project amp its goalsResearching end usersReviewing all contentUnderstanding technological amp design constraints
IA STARTS WITH
Monday July 16 2012
Overall structure of the siteGroups amp sub groups (to be used in navigation ndash includes what they will be called)Metadata what yoursquoll use to describe products
IA WILL DESCRIBE
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS IAMonday July 16 2012
Dependent on the IADone after IA is draftedIncludes Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes amp site maps
NAVIGATION
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS NAVIGATION
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
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 amp ignore what isnrsquot relevant
Monday July 16 2012
IA IS ORGANIZATIONAll about creating groups that make sense to the people who use them
Supermarkets donrsquot organize Swiss cheese with Swiss chocolate Belgian chocolate with Belgian beer
Monday July 16 2012
IA ON THE WEBIn supermarkets itrsquos 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
1 Organizing content or objects2 Describing them clearly3 Providing ways for people to get to them
IA IS ALL ABOUT
Monday July 16 2012
1 Wherever you need to organize information or objects2 Websites intranets3 File system at work or home movies music or even groceries on a shelf
WHERE DO YOU FIND IA
Monday July 16 2012
WHAT YOU NEED TO UNDERSTANDin order to develop a successful IA
Monday July 16 2012
PEOPLEWhat they need do to how they think amp what they already know
Monday July 16 2012
CONTENTWhat you have what you should have amp what you need
Monday July 16 2012
CONTEXTThe business or personal goals for the site who else will be involved amp what your constraints are
Monday July 16 2012
PEOPLE
CONTEXTCONTENT
Monday July 16 2012
Defining the project amp its goalsResearching end usersReviewing all contentUnderstanding technological amp design constraints
IA STARTS WITH
Monday July 16 2012
Overall structure of the siteGroups amp sub groups (to be used in navigation ndash includes what they will be called)Metadata what yoursquoll use to describe products
IA WILL DESCRIBE
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS IAMonday July 16 2012
Dependent on the IADone after IA is draftedIncludes Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes amp site maps
NAVIGATION
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS NAVIGATION
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
IA IS ORGANIZATIONAll about creating groups that make sense to the people who use them
Supermarkets donrsquot organize Swiss cheese with Swiss chocolate Belgian chocolate with Belgian beer
Monday July 16 2012
IA ON THE WEBIn supermarkets itrsquos 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
1 Organizing content or objects2 Describing them clearly3 Providing ways for people to get to them
IA IS ALL ABOUT
Monday July 16 2012
1 Wherever you need to organize information or objects2 Websites intranets3 File system at work or home movies music or even groceries on a shelf
WHERE DO YOU FIND IA
Monday July 16 2012
WHAT YOU NEED TO UNDERSTANDin order to develop a successful IA
Monday July 16 2012
PEOPLEWhat they need do to how they think amp what they already know
Monday July 16 2012
CONTENTWhat you have what you should have amp what you need
Monday July 16 2012
CONTEXTThe business or personal goals for the site who else will be involved amp what your constraints are
Monday July 16 2012
PEOPLE
CONTEXTCONTENT
Monday July 16 2012
Defining the project amp its goalsResearching end usersReviewing all contentUnderstanding technological amp design constraints
IA STARTS WITH
Monday July 16 2012
Overall structure of the siteGroups amp sub groups (to be used in navigation ndash includes what they will be called)Metadata what yoursquoll use to describe products
IA WILL DESCRIBE
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS IAMonday July 16 2012
Dependent on the IADone after IA is draftedIncludes Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes amp site maps
NAVIGATION
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS NAVIGATION
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
IA ON THE WEBIn supermarkets itrsquos 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
1 Organizing content or objects2 Describing them clearly3 Providing ways for people to get to them
IA IS ALL ABOUT
Monday July 16 2012
1 Wherever you need to organize information or objects2 Websites intranets3 File system at work or home movies music or even groceries on a shelf
WHERE DO YOU FIND IA
Monday July 16 2012
WHAT YOU NEED TO UNDERSTANDin order to develop a successful IA
Monday July 16 2012
PEOPLEWhat they need do to how they think amp what they already know
Monday July 16 2012
CONTENTWhat you have what you should have amp what you need
Monday July 16 2012
CONTEXTThe business or personal goals for the site who else will be involved amp what your constraints are
Monday July 16 2012
PEOPLE
CONTEXTCONTENT
Monday July 16 2012
Defining the project amp its goalsResearching end usersReviewing all contentUnderstanding technological amp design constraints
IA STARTS WITH
Monday July 16 2012
Overall structure of the siteGroups amp sub groups (to be used in navigation ndash includes what they will be called)Metadata what yoursquoll use to describe products
IA WILL DESCRIBE
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS IAMonday July 16 2012
Dependent on the IADone after IA is draftedIncludes Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes amp site maps
NAVIGATION
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS NAVIGATION
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
1 Organizing content or objects2 Describing them clearly3 Providing ways for people to get to them
IA IS ALL ABOUT
Monday July 16 2012
1 Wherever you need to organize information or objects2 Websites intranets3 File system at work or home movies music or even groceries on a shelf
WHERE DO YOU FIND IA
Monday July 16 2012
WHAT YOU NEED TO UNDERSTANDin order to develop a successful IA
Monday July 16 2012
PEOPLEWhat they need do to how they think amp what they already know
Monday July 16 2012
CONTENTWhat you have what you should have amp what you need
Monday July 16 2012
CONTEXTThe business or personal goals for the site who else will be involved amp what your constraints are
Monday July 16 2012
PEOPLE
CONTEXTCONTENT
Monday July 16 2012
Defining the project amp its goalsResearching end usersReviewing all contentUnderstanding technological amp design constraints
IA STARTS WITH
Monday July 16 2012
Overall structure of the siteGroups amp sub groups (to be used in navigation ndash includes what they will be called)Metadata what yoursquoll use to describe products
IA WILL DESCRIBE
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS IAMonday July 16 2012
Dependent on the IADone after IA is draftedIncludes Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes amp site maps
NAVIGATION
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS NAVIGATION
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
1 Organizing content or objects2 Describing them clearly3 Providing ways for people to get to them
IA IS ALL ABOUT
Monday July 16 2012
1 Wherever you need to organize information or objects2 Websites intranets3 File system at work or home movies music or even groceries on a shelf
WHERE DO YOU FIND IA
Monday July 16 2012
WHAT YOU NEED TO UNDERSTANDin order to develop a successful IA
Monday July 16 2012
PEOPLEWhat they need do to how they think amp what they already know
Monday July 16 2012
CONTENTWhat you have what you should have amp what you need
Monday July 16 2012
CONTEXTThe business or personal goals for the site who else will be involved amp what your constraints are
Monday July 16 2012
PEOPLE
CONTEXTCONTENT
Monday July 16 2012
Defining the project amp its goalsResearching end usersReviewing all contentUnderstanding technological amp design constraints
IA STARTS WITH
Monday July 16 2012
Overall structure of the siteGroups amp sub groups (to be used in navigation ndash includes what they will be called)Metadata what yoursquoll use to describe products
IA WILL DESCRIBE
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS IAMonday July 16 2012
Dependent on the IADone after IA is draftedIncludes Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes amp site maps
NAVIGATION
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS NAVIGATION
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
1 Wherever you need to organize information or objects2 Websites intranets3 File system at work or home movies music or even groceries on a shelf
WHERE DO YOU FIND IA
Monday July 16 2012
WHAT YOU NEED TO UNDERSTANDin order to develop a successful IA
Monday July 16 2012
PEOPLEWhat they need do to how they think amp what they already know
Monday July 16 2012
CONTENTWhat you have what you should have amp what you need
Monday July 16 2012
CONTEXTThe business or personal goals for the site who else will be involved amp what your constraints are
Monday July 16 2012
PEOPLE
CONTEXTCONTENT
Monday July 16 2012
Defining the project amp its goalsResearching end usersReviewing all contentUnderstanding technological amp design constraints
IA STARTS WITH
Monday July 16 2012
Overall structure of the siteGroups amp sub groups (to be used in navigation ndash includes what they will be called)Metadata what yoursquoll use to describe products
IA WILL DESCRIBE
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS IAMonday July 16 2012
Dependent on the IADone after IA is draftedIncludes Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes amp site maps
NAVIGATION
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS NAVIGATION
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
WHAT YOU NEED TO UNDERSTANDin order to develop a successful IA
Monday July 16 2012
PEOPLEWhat they need do to how they think amp what they already know
Monday July 16 2012
CONTENTWhat you have what you should have amp what you need
Monday July 16 2012
CONTEXTThe business or personal goals for the site who else will be involved amp what your constraints are
Monday July 16 2012
PEOPLE
CONTEXTCONTENT
Monday July 16 2012
Defining the project amp its goalsResearching end usersReviewing all contentUnderstanding technological amp design constraints
IA STARTS WITH
Monday July 16 2012
Overall structure of the siteGroups amp sub groups (to be used in navigation ndash includes what they will be called)Metadata what yoursquoll use to describe products
IA WILL DESCRIBE
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS IAMonday July 16 2012
Dependent on the IADone after IA is draftedIncludes Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes amp site maps
NAVIGATION
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS NAVIGATION
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
PEOPLEWhat they need do to how they think amp what they already know
Monday July 16 2012
CONTENTWhat you have what you should have amp what you need
Monday July 16 2012
CONTEXTThe business or personal goals for the site who else will be involved amp what your constraints are
Monday July 16 2012
PEOPLE
CONTEXTCONTENT
Monday July 16 2012
Defining the project amp its goalsResearching end usersReviewing all contentUnderstanding technological amp design constraints
IA STARTS WITH
Monday July 16 2012
Overall structure of the siteGroups amp sub groups (to be used in navigation ndash includes what they will be called)Metadata what yoursquoll use to describe products
IA WILL DESCRIBE
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS IAMonday July 16 2012
Dependent on the IADone after IA is draftedIncludes Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes amp site maps
NAVIGATION
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS NAVIGATION
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
CONTENTWhat you have what you should have amp what you need
Monday July 16 2012
CONTEXTThe business or personal goals for the site who else will be involved amp what your constraints are
Monday July 16 2012
PEOPLE
CONTEXTCONTENT
Monday July 16 2012
Defining the project amp its goalsResearching end usersReviewing all contentUnderstanding technological amp design constraints
IA STARTS WITH
Monday July 16 2012
Overall structure of the siteGroups amp sub groups (to be used in navigation ndash includes what they will be called)Metadata what yoursquoll use to describe products
IA WILL DESCRIBE
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS IAMonday July 16 2012
Dependent on the IADone after IA is draftedIncludes Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes amp site maps
NAVIGATION
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS NAVIGATION
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
CONTEXTThe business or personal goals for the site who else will be involved amp what your constraints are
Monday July 16 2012
PEOPLE
CONTEXTCONTENT
Monday July 16 2012
Defining the project amp its goalsResearching end usersReviewing all contentUnderstanding technological amp design constraints
IA STARTS WITH
Monday July 16 2012
Overall structure of the siteGroups amp sub groups (to be used in navigation ndash includes what they will be called)Metadata what yoursquoll use to describe products
IA WILL DESCRIBE
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS IAMonday July 16 2012
Dependent on the IADone after IA is draftedIncludes Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes amp site maps
NAVIGATION
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS NAVIGATION
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
PEOPLE
CONTEXTCONTENT
Monday July 16 2012
Defining the project amp its goalsResearching end usersReviewing all contentUnderstanding technological amp design constraints
IA STARTS WITH
Monday July 16 2012
Overall structure of the siteGroups amp sub groups (to be used in navigation ndash includes what they will be called)Metadata what yoursquoll use to describe products
IA WILL DESCRIBE
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS IAMonday July 16 2012
Dependent on the IADone after IA is draftedIncludes Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes amp site maps
NAVIGATION
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS NAVIGATION
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Defining the project amp its goalsResearching end usersReviewing all contentUnderstanding technological amp design constraints
IA STARTS WITH
Monday July 16 2012
Overall structure of the siteGroups amp sub groups (to be used in navigation ndash includes what they will be called)Metadata what yoursquoll use to describe products
IA WILL DESCRIBE
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS IAMonday July 16 2012
Dependent on the IADone after IA is draftedIncludes Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes amp site maps
NAVIGATION
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS NAVIGATION
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Overall structure of the siteGroups amp sub groups (to be used in navigation ndash includes what they will be called)Metadata what yoursquoll use to describe products
IA WILL DESCRIBE
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS IAMonday July 16 2012
Dependent on the IADone after IA is draftedIncludes Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes amp site maps
NAVIGATION
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS NAVIGATION
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS IAMonday July 16 2012
Dependent on the IADone after IA is draftedIncludes Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes amp site maps
NAVIGATION
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS NAVIGATION
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS IAMonday July 16 2012
Dependent on the IADone after IA is draftedIncludes Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes amp site maps
NAVIGATION
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS NAVIGATION
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Dependent on the IADone after IA is draftedIncludes Navigation bars Related links In page navigation (hyperlinks) Aids like A-Z indexes amp site maps
NAVIGATION
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS NAVIGATION
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
WINESHOP
P R O D U C T SWine
Food
Glasses
Kitchenware
Home gt Products gt Wine gt Usability Chardonnay 2010
Usability Chardonnay
2010
Lorem ipsum dolor sit amet consectetur
adipiscing elit Praesent sodales sapien ut
porta blandit metus dui imperdiet ipsum id
eleifend est nulla eu orci Mauris lectus eros
rutrum at lobortis ut eleifend eget eros Nulla
at felis eget neque aliquam convallis Aliquam
elit risus facilisis eu congue et adipiscing
vitae eros Pellentesque eleifend pellentesque
felis Vivamus eleifend tortor in enim
consequat tristique Donec sit amet metus
sem Integer quis massa nunc Integer nec
purus vehicula urna aliquam elementum
Sed vitae libero et nunc consequat adipiscing Ut sit amet libero magna In ac aliquam est Morbi ac lorem massa et tincidunt erat
H O M E | P R O D U C T S | S E R V I C E S | A B O U T U S | C O N T A C T
Buy Now
THIS IS NAVIGATION
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
DEVELOPING AN ARCHITECTURE
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Results of your requirements amp task analysesEarlier versions of siteCompetitorsrsquo sites
REVIEW
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Content piecesCandidate labelsOrganization schemes
THIS DEVELOPS LIST OF
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
QualityCompletenessAdd amp design thatrsquos neededCreate content inventory
EVALUATE CONTENT FOR
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
content inventory
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
content inventory
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Brainstorm content categories amp site structuresDecide which content belongs together on a pageUser test amp refine
CREATE amp EVALUATE STRUCTURE
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Create a sitemap starting with highest prioritiesAdd short cuts amp redundant linksAdd necessary support tools such as Help Site Map Search
MAP THE PAGES
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Refine layout amp orienting of information ie headers page titlesEstablish final labels amp graphicsRemember usersrsquo mental modelsDo user testing
DEVELOP NAVIGATION BAR
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Build the site amp update specs as neededTest the site Train maintenance staff
IMPLEMENT
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
ORGANIZATION SCHEMES
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Primary scheme for dictionaries encyclopediasNon-fiction indicesPhone booksOn the web directoriesLast nameProductsDepartmentsServices
ALPHABETICAL
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Press ReleasesBlog PostsNews
CHRONOLOGICAL
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
WeatherStore LocatorsNews sites
GEOGRAPHICAL
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Provides topical access to content
TOPICAL
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Organized into process function or tasks
TASK ORIENTED
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
ORGANIZATIONAL STRUCTURES
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
ORGANIZATIONAL STRUCTURESHow the information is structured
How one relates to it
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
HIERARCHYRelationship between items
gt parent amp child broader amp narrower
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
DATABASEA planned structure ndash all information fits into that structure
Pieces may have no relationship to each other
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday 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
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
this
Monday July 16 2012
But they share the same pieces that make up the listing
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
But they share the same pieces that make up the listing
bull payment methodsbull date addedbull photographbull category
bull titlebull descriptionbull tagsbull materialsbull location
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
METADATAldquodata about datardquoor
ldquoinformation about informationrdquo
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
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Intrinsic What the object actually isAdministrative How it is usedDescriptive Description of the item
THREE KINDS OF METADATA
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Blog post (intrinsic)Author (administrative)Date posted (administrative)URL (administrative)Status published (administrative)Title (descriptive)Category (descriptive)Tags (descriptive)
EXAMPLES OF METADATA
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Almost an anti-structure patternPieces are connected according to the relationship between themNo databaseNo hierarchy
HYPERTEXT
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Just as it sounds ndashone thing follows anotherNot common on the webDonrsquot use unless users need to read things in order to avoid frustration
LINEAR
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Simple hierarchy + simple databaseGood for small medium amp large sitesCreate hierarchical sections for basic contentPower of a database to assemble detailed information within a section
COMBINED PATTERNS
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Second most commonBasically a database patternBottom level is content
CATALOGUE
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
TYPES OF CATALOGUE PAGESGallery 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 Spool
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Users move down one level into something more detailedReturn to starting point (the hub)Then to another detailed pageBack to hub and so on
HUB AND SPOKE
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
LARGE sitesGovernmentUniversitiesLarge intranetsSite is a series of sub-sites Held together by homepage or top level pages
SUB-SITES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
LABELS
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
LABELSThe words you use in navigation
Words that describe chunks of content
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
THE BEST LABELS
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
CALL THINGSby the correct name
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
ARE CONSISTENT
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
USE TERMINOLOGYthat your audience uses
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
ARE AS CLEAR AS POSSIBLE
FlatPak Harry Ford BlueBell
Avoid ldquomystery meatrdquo navigation
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
WHERE TO GET IDEAS FOR LABELS
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
CONTENTLook at the words used in your content
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
USER RESEARCHYour research will contain hundreds of words that describe how your audience phrase ideas and concepts
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
CARD SORTINGHave people provide a label describing what the group of cards is about
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
WHAT EVERYONE ELSE DOESLook around at competitors
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
CARD SORTING EXERCISEDivide into three groups Write one word per card
WORKSHOP 1
Skin careDoes cutting salt increase heart attacksRecipesDisease risksLowering stressNutritionLife style
Hair careIs fruit juice really your friendWorkout plansMeal plansBreakfast foods the good the bad and the uglyLiving green
Finance tipsFor vegetariansCould your water bottle be making you fatWorkoutsAsk the expertsWeight loss
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
CARD SORTING EXERCISECreate categories for the words then group and find appropriate labels
WORKSHOP 1
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
CREATE A HIERARCHICAL SITE MAP FOR SITE YOU DID IN CARD SORTING EXERCISE
WORKSHOP 2
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
NAVIGATION
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
NAVIGATIONRefers 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
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Let people browse to the content or functionality they needShow the context of the informationShow what is related and relevantHelp people find information they didnrsquot know about
NAVIGATION CAN ALSO
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Navigation barsHyperlinksButtonsOther clickable things
NAVIGATION INCLUDES
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
GlobalLocalSupplementaryUtilityContextual
TYPES OF NAVIGATION
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
GLOBALDefined as links to a sitersquos top-level categories
Found on every page of the site
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
LOCALPicks up where global navigation leaves off
Found on inner pages - specific site section
Gives users tools to move around amp accomplish tasks
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
SUPPLEMENTARYSupplements main navigation
Sitemaps site tour videos search bars site index
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
UTILITYThings users need on a regular basis
About Contact Privacy
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
CONTEXTUALEmbedded in the content of the page
Hyperlinks
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Navigation barsHorizontal or vertical barShows the categories ndash usually 1-2 levels
TYPES OF NAVIGATION 02
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
you have a small number of top-level items that can fit acrossthe screenyou arenrsquot likely to be adding new top-level itemsyour labels are short enough to fit into the horizontal spaceyou arenrsquot 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
USE HORIZONTAL NAVIGATION IF
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
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 website
USE HORIZONTAL NAVIGATION IF
Showcase
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
you have more top level groups than would easily fit across a screenyou may add or change groups over timesome groups may have long labelsyou may want to translate the site
USE VERTICAL NAVIGATION IF
Showcase
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
INVERTED LHorizontal amp Vertical
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
TABSVariation of horizontal navigation
Always has 2nd level that need to be connected
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
DROP DOWNAllows user to see second level navigation
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
CREATE NAVIGATION FOR SITE YOU DID IN CARD SORTING EXERCISELanding page
A secondary page
WORKSHOP 3
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
SKETCHING
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
USER FLOWSSimple diagrams that follow a user down a path of activity
Can be storyboards or flow charts
Similar to scenarios
Storyboard Donald Graham
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
THUMBNAIL SKETCHESSimple sketches that then go into wireframes
Small representation of design
Scribble lines
Use text captions to describe what happens
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
WIREFRAMESFirst 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 interaction
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Easy to drawStraight lines and textPlenty of drawing packages available Visio Illustrator Keynote
CREATING WIREFRAMES
MockFlow Balsamiq OmniGroup
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
WHO USES WIREFRAMESProject team ndash to discuss different ideas amp approaches
Content authors ndash how will their content fit What pages do they have
Managers ndash are business needs met (Wherersquos my stuff)
Developers ndash shows how things need to work how to implement
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
WHAT TO INCLUDE
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
ABSOLUTE ESSENTIALSLogo placement
Navigation
Content
Hierarchies
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
EXPLANATIONSAnnotations
Background information
Important things to pay attention to
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
EXPLANATIONSBetter visual approaches so people can easily understand what yoursquore communicating
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
EXTRAS TOOLS amp TEMPLATES
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
EIGHTSHAPES UNIFYThis is an InDesign-based documentation system It contains templates common page layouts and symbol libraries to get you started
Download
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
KONIGI WIREFRAME STENCILSFor OmniGraffle this contains a broad set of components to use in wireframes
Download
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
NICK FINCKrsquoS STENCILSThis is similar to the Konigi stencil set but for Microsoft Visio
Download
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
BALSAMIQThis prototyping tool is currently the most popular allowing you to create simple sketchy prototypes online
Visit Site
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
AXUREVery established software for creating clickable prototypes
Download
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
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 prototypes with re-usable code
Download
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
CREATE WIREFRAMES FOR SITE YOU DID IN CARD SORTING EXERCISEOne wireframe for landing page
One wireframe for a secondary page
WORKSHOP 4
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
PROTOTYPES
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
PAPER PROTOTYPESHand 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 Prototyping
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
INTERACTIVE PROTOTYPESUsually HTML or Flash
Graphic images with hotspots
Can do in Dreamweaver Powerpoint
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
COMPETITION AS PROTOTYPESee what works and what doesnrsquot
Quick route to get results
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
PERSONAS
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
WHAT IS A PERSONAHypothetical ldquostand-insrdquo 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
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Who this person is How they use the siteWhat interests they haveWhat behaviors they have
PERSONAS DESCRIBE
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
GoalsAttitudesBehaviors amp TasksFrustrations amp Pain PointsName photo demographic info skill level environmentNarrative (scenario)
PERSONAS ELEMENTS
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Key stakeholdersWeb analyticsCustomer supportCustomer
RESEARCH INVOLVES
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
THEY REPRESENT YOUR USERSWebsites should be designed to meet the goals amp needs of personas
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
USE CASES
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
WHAT IS A USE CASEDescription of a user type in a scenario
Gives a context for designing features
Develops scope for the site
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
A USE CASEShould mirror your site strategy and business goals
Can be like a story or scenario
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
SCENARIOEmma visits Craigs List homepage and selects ldquoChicagordquo 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 ldquofor salerdquo area and finds a ldquotoysrdquo category
She sees a posting for a ldquoGroovy Kitchenrdquo which she thinks would be great for her daughter She contacts the seller to arrange further details
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Understanding the user helps design for themClarifying assumptions - scenarios help the team formalize assumptionsFully exploring the design - scenarios serve to explore all the important aspects of the designProvides context - for understanding the featuresHelping other project tasks - scenarios represent the important tasks
BENEFITS INCLUDE
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Please break into three groups
Create 2 personas Segment people based on behaviors goals and needs
(2 people can be in different demographic group but have same underlying goals and behaviors)
Name age interests Personal characteristics Goals and motivationsPhotos Jobprofession
and anything else you think is important
WORKSHOP 5
InternetComputing profile Computingtechnical likes and dislikes Quotes WorkHome computing environment Frequency of computer use
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012
Create 3 possible scenarios for each persona that the user might execute on the site you were assigned
WORKSHOP 6
Monday July 16 2012