201
WHAT IS USABILITY TESTING ?

Website Usability | Day 3

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Website Usability | Day 3

WHAT IS USABILITY TESTING?

Page 2: Website Usability | Day 3
Page 3: Website Usability | Day 3

WELL, WHAT IS USABILITY?“Usability really just means making sure that something works well: that a person of average (or even below average) ability and experience can use the thing - whether it's a Web site, a fighter jet, or a revolving door - for its intended purpose without getting hopelessly frustrated.”

(Steve Krug)

Page 4: Website Usability | Day 3

USABILITY TESTINGTesting is a technique to ensure that the intended users can perform the intended tasks efficiently, effectively and satisfactorily. Without frustration!

Page 5: Website Usability | Day 3

Surveys

Interviews

Eyetracking studies

Usability testing

Online testing tools

WHAT TOOLS ARE AVAILABLE?

Page 6: Website Usability | Day 3

SURVEYSAllow users to review the site.

Distribute surveys.

Ask them to answer questions

Survey

Page 7: Website Usability | Day 3

INTERVIEWSAllow users to review the site.

Make user comfortable.

Ask users questions.

See handout.Interview

Page 8: Website Usability | Day 3

EYETRACKING STUDIES

Page 9: Website Usability | Day 3

EYETRACKING AND THE EYEEyetracking is following the trail of where a person is looking.

Equipment can be built into the computer.

Eyetracking software keeps track of what’s on screen while user is looking at it.

How does it work?

Page 10: Website Usability | Day 3

FIXATIONWhen the eye is resting on something.

Last between one-tenth and one-half.

Red spots are fixations.

Page 11: Website Usability | Day 3

SACCADESThe eye’s rapid movements from one fixation to the next.

Last between one-hundredth and one-tenth of a second.

Thin red line connecting the dots are saccades between fixations.

Eyetracking Study

Page 12: Website Usability | Day 3

HEAT MAPSVisualization technique for eyetracking studies.

A color-coded screenshot that shows the user’s fixations.

Red: where users looked most.

Yellow: indicate fewer fixations.

Blue: indicate least view areas.

Gray: no fixations. Facebook Heatmap

Page 13: Website Usability | Day 3

F - PATTERN

Page 14: Website Usability | Day 3
Page 15: Website Usability | Day 3
Page 16: Website Usability | Day 3

BANNER BLINDNESS

Page 17: Website Usability | Day 3

USERS FOCUS ON FACES

Page 18: Website Usability | Day 3

USERS FOCUS ON FACES

Page 20: Website Usability | Day 3

USABILITY TESTINGSeries of tasks for participants to perform on an actual website or prototype.

Tasks are formulated from user and business goals.

Measures the success of failure of a design.

What you need?

Pen and clipboard, computer with Internet connection, perhaps a tape recorder.

Page 21: Website Usability | Day 3

STEPS

Page 22: Website Usability | Day 3

#1 INTRODUCTION (5-10 MINS)Make participant feel comfortable.

Let them know they can have a break any time.

If video taping, get permission.

Ask questions about them – include demographics, occupation, education level, Internet experience.

Explain equipment if necessary.

Assure them that there is no right or wrong.

Page 23: Website Usability | Day 3

#2 TASKS (10 - 15 MINS )Be sure to read the task aloud.

Encourage participant to think aloud.

Have a written version that you leave in front of the user.

DO NOT HELP THE USER THROUGH THE TASK.

No small talk!

Page 24: Website Usability | Day 3

TECHNOLOGYMorae®: A recorder that captures onscreen activity of the user’s computer and a camera video of the user.

Creates a synchronized index of events occurring behind the scenes in applications and in the operating system.

Morae Website

Page 25: Website Usability | Day 3

COMMON ERRORSStrategic Errors - premature testing, not enough time or will to make changes.

Inadequate Planning - do a pilot test to uncover problems with plan and materials.Read script aloud.

Allow enough time between test sessions (minimum 30 minutes)

Reveling Too Much

Page 26: Website Usability | Day 3

COMMON ERRORSPoor Task Design - test core functionality and areas identified as problematic.

If scenarios were used, convert into tasks to ensure key interactions are studied.

Accidental Revelation - revealing too much. Watch your language.

Unprofessional Demeanor - need to be professionally detached and neutral. Don’t finish user’s sentence!

Page 27: Website Usability | Day 3

TEST PARTICIPANTSGet representative users - Craig’s list, LinkedIn,employment agencies, market research agencies.

Use questionnaires to screen.

Offer incentives.

Send reminders.

Page 28: Website Usability | Day 3

ENVIRONMENT

Page 29: Website Usability | Day 3

TEST PARTICIPANTSSchedule 5 - 8 users.

Only need 5 - account for no shows, botched tests.

Test up to 3 groups of 5 - 1 test after iterations made.

Page 33: Website Usability | Day 3

USING THE DATA

Page 34: Website Usability | Day 3

USING THE DATATransform both qualitative and quantitative data to make recommendations

Page 35: Website Usability | Day 3

QUANTITATIVE DATAAny information that can be measured:

Ease of use

Satisfaction

Verbal descriptions of people’s experiences

Examples: The time it takes to complete a task, or the completion rate of a task.

Page 36: Website Usability | Day 3

QUALITATIVE DATAInformation that requires interpretation

Identifies trends or categories of user’s behavior

Example: How well users can complete a task

Where they are encountering problems

Level of frustration

Page 37: Website Usability | Day 3

COMB THE DATA

Page 38: Website Usability | Day 3

PreferencesNeedsStoriesCurrent BehaviorsPain PointsSatisfaction Level

FROM INTERVIEWS

Page 39: Website Usability | Day 3

SuccessNew BehaviorsUsage PatternsPain PointsTime to completeAssists required

FROM USER TESTING

Page 41: Website Usability | Day 3

ORGANIZING THE DATAOrganize the data into categories or findings.

Find themes and put in table.

Page 42: Website Usability | Day 3
Page 43: Website Usability | Day 3
Page 44: Website Usability | Day 3
Page 45: Website Usability | Day 3

AFFINITY DIAGRAMSOrganizes items into common themes.

Helpful when you have a large amount of data.

You have many facts or ideas in apparent chaos.

When issues seem too large and complex.

When group consensus is needed.

Page 46: Website Usability | Day 3

1. Record each idea on sticky note and layout on wall2. Look for groups3. Repeat till all notes are grouped4. If a note seems to belong in two groups, make a second note5. Discuss patterns and reason for groupings6. Find headers

AFFINITY DIAGRAMS

Page 47: Website Usability | Day 3
Page 48: Website Usability | Day 3
Page 49: Website Usability | Day 3

SPREADSHEETSUse to track stories, needs, pain points, successes

Provides Quantitative layer over Qualitative information

More difficult to collaborate than affinity diagrams

Example

Page 50: Website Usability | Day 3

WORKSHOP # 1 - USABILITY TESTPlease break into twos. Person A tests Person B

Follow format:

Orientation Tasks - read aloud to participant - careful not to “help” - be sure to ask about expectations - let mistakes happenDebriefing

Page 51: Website Usability | Day 3

WORKSHOP # 1 - USABILITY TESTAnything surprise you?Any new insight?Anything go wrong?Was the site used in a way that you did not expect?Did you discover any usability problems?

Page 52: Website Usability | Day 3

WORKSHOP # 1a- USABILITY TESTPlease break into twos. Person B tests Person A

Follow format:

Orientation Tasks - read aloud to participant - careful not to “help” - be sure to ask about expectations - let mistakes happenDebriefing

Page 53: Website Usability | Day 3

WORKSHOP # 1a - USABILITY TESTAnything surprise you?Any new insight?Anything go wrong?Was the site used in a way that you did not expect?Did you discover any usability problems?

Page 54: Website Usability | Day 3

DESIGNING FOR WEB USABILITY

Page 55: Website Usability | Day 3

USER EXPERIENCE"User experience isn't a layer or component of a product or service. It's really about the design of the whole systems and their interconnections."

- Andre Hinton, Senior IA at Vanguard

Page 56: Website Usability | Day 3

WHY TEST?If a user can’t find what a product, they won’t buy.

If they can’t find what they are looking for, they will look elsewhere.

The holder of the mouse rules!

Page 57: Website Usability | Day 3

NAVIGATION & WAYFINDING

Page 58: Website Usability | Day 3

NAVIGATION“Navigation isn’t just a feature of a website, it is the web site,

in the same way that the building, the shelves, and the

cash register are Sears. Without it, there’s no there there.”

-Steve Krug

Page 59: Website Usability | Day 3

WAYFINDINGCoined by Kevin Lynch in The Image of the City, 1960.

Describes the elements that allow us to navigate successfully

in cities and towns.

Page 60: Website Usability | Day 3

4 CORE COMPONENTS1. Orientation: Where am I now?

2. Route decisions: Can I find the way to where I want to go?

3. Mental mapping: Are my experiences consistent and understandable enough to know where I’ve been and to predict where I should go next?

4. Closure: Can I recognize that I have arrived in the right place?

Page 61: Website Usability | Day 3

ELEMENTS OF MENTAL MAPS1. Paths: streets, transit lines, canals, railroads - channels that people regularly move.

2. Edges: physical barriers; walls, fences, rivers, shore - boundaries that create linear breaks in continuity/separate and relate two distinct regions.

3. Districts: Major sections of a city that have a common identifying character: Chinatown, Wall Street, Greenwich Village.

4. Nodes: major intersections, meeting places.

Page 62: Website Usability | Day 3

ELEMENTS OF MENTAL MAPS4. Nodes: Intersections, enclosed squares, street corners, subway stations - all serve as points of reference, transition and destination.

5. Landmarks: Towering buildings, golden domes, mountains, signs, storefronts, trees - physical objects that serve as spatial reference points.

Page 63: Website Usability | Day 3

ON THE WEBNo sense of scale or movement in space.

No compass: no direction.

You are here: navigation interface.

Paths: lead the way: site navigation, breadcrumbs.

Page 64: Website Usability | Day 3

PATHSConsistent, predictable navigational links.

Appear the same throughout the site.

Can be habitual.

Explicit elements: breadcrumbs.

Page 65: Website Usability | Day 3

EDGES & DISTRICTSEffective interface design uses consistent page grid, terminology, navigation links.

Uses visual flexibility to create identifiable regions and edges within the larger space.

Page 66: Website Usability | Day 3

REGION REGION REGION REGION REGION REGION

Landmarks along the way

Page 67: Website Usability | Day 3

NODESThe local coffee shop or Times Square?

Too much choice causes stress, slows decisions, makes us less satisfied and more likely to walk away.

Page 68: Website Usability | Day 3
Page 69: Website Usability | Day 3

LANDMARKS “YOU ARE HERE”Search function cuts across all the normal wayfinding boundaries.

Orientation cues are particularly important since users often arrive at a page without having followed a deliberate and repeatable path.

Page 70: Website Usability | Day 3

Headers: “You are here” markers

Page 71: Website Usability | Day 3

SUMMARY1. Paths: create consistent, well-marked navigation paths.

2. Regions: create a unique but related identity for each site region.

3. Nodes: don’t confuse the user with too many choices.

4. Landmarks: use consistent landmarks in site navigation and graphics to keep the user oriented.

Web Style Guide, 3rd Edition

Page 72: Website Usability | Day 3

PAGE LAYOUT

Page 73: Website Usability | Day 3

ELEGANCE & SIMPLICITYUse economy of expression.

Most powerful designs are result of a process of simplification and refinement.

Page 74: Website Usability | Day 3

MINIMALISM “A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.”

--Anoine de Saint Exupéry

Page 75: Website Usability | Day 3
Page 76: Website Usability | Day 3

Approachability: easy to tell at a glance what it is and designs invite further exploration.

Recognizability: recognized easily, easily assimilated, understood and…REMEMBERED.

Immediacy: have greater impact because they can be immediately recognized and understood with minimal effort.

Usability: simplicity enhances usability.

ADVANTAGES

Page 77: Website Usability | Day 3

Unity

Refinement

FitnessAll the elements must be unified to produce a coherent whole. The parts and whole must be refined to focus user attention and the fitness of the solution to the communication problem must be ensured at every level.

PRINCIPLES

Page 78: Website Usability | Day 3

Reduction

Regularization

Leverage Reduce the design to its essence, regularize the elements of the design, then combine them for maximum leverage.

HOW

Page 79: Website Usability | Day 3

INFORMATION...... consists of differences that make a difference.

- Edward Tufte, Envisioning Information

Page 80: Website Usability | Day 3

SCALE, CONTRAST, PROPORTIONThe subtle interrelationship of scale, contrast and proportion can be seen in all harmonious designs.

Page 81: Website Usability | Day 3

SCALEDescribes the relative size of a design element in relation to the other design elements and the composition as a whole.

Page 82: Website Usability | Day 3
Page 83: Website Usability | Day 3
Page 84: Website Usability | Day 3

CONTRASTResults from the differences that can be seen between the design elements.

Provides visual distinctions in: shape, size, color, texture, position, orientation, and movement.

Page 85: Website Usability | Day 3
Page 86: Website Usability | Day 3
Page 87: Website Usability | Day 3

PROPORTIONDetermines the balance and harmony of the relationship between the elements.

Page 88: Website Usability | Day 3
Page 89: Website Usability | Day 3
Page 90: Website Usability | Day 3

ORGANIZATION & STRUCTUREProvide the user with visual pathways needed to experience a site in a systematic way.

Must be introduced by establishing relationships among the design elements.

Page 91: Website Usability | Day 3
Page 92: Website Usability | Day 3

Grouping

Hierarchy

Relationships

Balance

PRINCIPLES

Page 93: Website Usability | Day 3

GROUPINGStart by grouping display elements into higher order units.

(Note: words in a book are grouped into columns, paragraphs, sections etc).

Higher-level structures orient the user.

Binds functional units tightly together.

Use spacing and alignment for effectiveness.

Page 94: Website Usability | Day 3
Page 95: Website Usability | Day 3

HIERARCHYEye looks for visual hierarchies for orientation.

Most important elements must be large enough to draw the viewer closer.

Specifics follow.

Page 96: Website Usability | Day 3
Page 97: Website Usability | Day 3

RELATIONSHIPSGrouping and hierarchy are reinforced when visual elements are related.

Position, size and value provide visual cues.

Alignment helps form visual relations.

Page 98: Website Usability | Day 3
Page 99: Website Usability | Day 3

BALANCEEnsures that the elements remain stable in their position on the page.

A composition is balanced when the visual weight of the elements on either side of the piece are approximately equal.

Page 100: Website Usability | Day 3
Page 101: Website Usability | Day 3

WORKSHOP # 2 - PAGE LAYOUTPlease break into three groups.

Find websites that illustrate: 1. Scale2. Contrast3. Proportion4. Organization & Structure

5. Grouping6. Hierarchy7. Relationships8. Balance

Page 102: Website Usability | Day 3

HOMEPAGES

Page 103: Website Usability | Day 3

FIRST CHANCEcan be your first (and possibly last) chance to attract a user

Page 104: Website Usability | Day 3
Page 105: Website Usability | Day 3

IDENTITYinclude a tag line that summarizes what the company does

Page 106: Website Usability | Day 3
Page 107: Website Usability | Day 3
Page 108: Website Usability | Day 3

FRONT PAGEshould be like the front page of a newspaper

Page 109: Website Usability | Day 3
Page 110: Website Usability | Day 3

TELL YOUR STORYshould say who you are, what you do or what products your

offer and what sets you apart from the competition

Page 111: Website Usability | Day 3
Page 112: Website Usability | Day 3

SHOW COMPANY LOGO

Page 113: Website Usability | Day 3
Page 114: Website Usability | Day 3
Page 115: Website Usability | Day 3

PRIORITYemphasize highest priority tasks so there is a clear starting point

Page 116: Website Usability | Day 3
Page 117: Website Usability | Day 3

SHOULD BE UNIQUEdesign to be clearly different from all other pages on the site

Page 118: Website Usability | Day 3
Page 119: Website Usability | Day 3
Page 120: Website Usability | Day 3
Page 121: Website Usability | Day 3
Page 122: Website Usability | Day 3

ESTABLISH TRUST & CREDIBILITY

Page 123: Website Usability | Day 3
Page 124: Website Usability | Day 3

HAVE CLEAR NAVIGATION

Page 125: Website Usability | Day 3
Page 126: Website Usability | Day 3

THE FINE PRINTgroup all corporate information in one distinct area

Page 127: Website Usability | Day 3
Page 128: Website Usability | Day 3

INCLUDE SEARCH BAR

Page 129: Website Usability | Day 3
Page 130: Website Usability | Day 3

CALLS TO ACTIONreveal site content with calls to action

Page 131: Website Usability | Day 3
Page 132: Website Usability | Day 3

USE MEANINGFUL GRAPHICS

Page 133: Website Usability | Day 3
Page 134: Website Usability | Day 3

DESIGN CONVENTIONS

Page 135: Website Usability | Day 3

LOGOCalender | A-Z Index Search This Site GO

The tagline would go here...

Navigation | Navigation | Navigation | Navigation

Selected Tab Unselected Tab Unselected Tab

Home page > Section > PageNavigation

Navigation

Navigation

Navigation

Navigation

Navigation

Navigation

Navigation

Left scan column

(optional)

Right scan column

(optional)Main content column

Copyright 2012 | Company Name | Company Address | New York, NY | 555-555-5555

Breadcrumb trail

Link to home page Primary location for search, shopping carts

Navigation and search

Identity and titles

Navigation links

Tab navigation

Alternate right location

for scan column

navigation and search

Common location for

banner ads

Contact information,

copyrights, dates

Header

Local Navigation

Search,

banner ads,

contact

information

Footer

Page 136: Website Usability | Day 3

WEB STANDARDS “The experienced web designer, like the talented newspaper art director, accepts that many projects she works on will have headers and columns and footers. Her job is not to whine about emerging commonalities but to use them to create pages that are distinctive, natural, brand-appropriate, subtly memorable and quietly but unmistakably engaging.”

--Jeffery Zeldman

Page 137: Website Usability | Day 3

ABOVE THE FOLDAbove the fold - a graphic design concept that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper.

In web design, top 600 to 700 pixels (on 19” - 22” monitor)

Just a guideline.

--Jeffery Zeldman

Page 138: Website Usability | Day 3
Page 139: Website Usability | Day 3
Page 140: Website Usability | Day 3

BREAKING THE RULESMore sites now will put important content beneath the fold.

People will scroll if the content is interesting.

37signals Acumen Fund

Zipcare

Page 141: Website Usability | Day 3

PURPOSE OF GRAPHIC DESIGNUnlike a print, web users interact with information.

GUI (graphic user interface) must convey function and meaning.

Graphics are integral to the user’s experience.

Page 142: Website Usability | Day 3

PURPOSE OF GRAPHIC DESIGNCreate visual hierarchy so you can see what’s important.

Define functional regions of the page.

Group page elements that are related, so you can see structure in the content.

Page 143: Website Usability | Day 3

CONSISTENT LAYOUTHeader - mini versions of the homepage.

Footer - about house keeping and and legal matters.

Global Navigation

Local Navigation

Content, Features, Products

Banner Ads

Page 144: Website Usability | Day 3

Informative title

Identity

Copyright statement

Link back to home

Navigational links

Heading or title to clarify content

Link to contact information

Alternate (alt) text identifying graphics on the page

PAGES SHOULD INCLUDE

Page 145: Website Usability | Day 3

Site identity

Major navigation links/utility navigation

Search box (not always)

Link back to home

WHAT GOES INTO A HEADER?

Page 146: Website Usability | Day 3

POSSIBLE HEADER COMPONENTSIndividual designs rarely use them all.

LOGO Site titles, section identity, or advertising

Navigation | Navigation | Navigation | Navigation

Selected Tab Unselected Tab Unselected Tab

Advertising CartSearch This Site GO

Page 147: Website Usability | Day 3

Variations

Page 148: Website Usability | Day 3
Page 149: Website Usability | Day 3

Contact information.

Copyright statement.

Page author.

Links to related sites or to larger enterprise.

Utility links can go here.

Redundant navigation for long pages.

WHAT GOES INTO A FOOTER?

Page 150: Website Usability | Day 3
Page 151: Website Usability | Day 3

WRITING FOR THE WEB

Page 152: Website Usability | Day 3

CONTENT IS KING“Ultimately, users visit your website for its content. Everything else is just the backdrop. The design is there to allow people access to the content.”

--Jakob Nielsen

Page 153: Website Usability | Day 3

PAPER VERSUS MONITORBecause screen resolution is low (72 to 110 dpi), it places a strain on the human eye.

Because we read on a screen, we are forced to view from a more or less fixed position - with print you can read anywhere in any position.

Can lay papers out on the floor. (Can’t do a search though.)

Page 154: Website Usability | Day 3

PAPER VERSUS MONITORScreen glare is not an obstacle when reading on paper.

Monitor Flick: looks like a solid image, but the screen is refreshing so fast that you are fooled into seeing a solid image, but the brain is alway correcting for the flicker.

Reading is 25% slower on a screen. (Jacob Nielsen)

Page 155: Website Usability | Day 3

- Scrolling is clumsy - people don’t like it and they lose their place.

- Readers scan on-screen, then print content for reading.

- Web reading is not stationary - text jumps from link to link and page to page.- Many web pages end up as fragments of information taken from larger context.

READING ON THE WEB

Page 156: Website Usability | Day 3

1. Be succinct - write no more than 50% of the test that you would have used in print.

2. Write for scanability - use short paragraphs, subheadings, bulleted lists.

3. Use hypertext to split up long information into multiple pages.

3 GUIDELINES

Page 157: Website Usability | Day 3

- Studies show that almost 80% of users initially scan a webpage.

- Users pick out key words, sentences and paragraphs of interest - They skip over the text they are not concerned with.

- Write articles with two or three levels of headlines for easy scanability.

- Use general page headings plus subheads and sub-subheads if needed.

SCANABILITY

Page 158: Website Usability | Day 3

- Use meaningful headlines - Tell the user what the page or section is about.

- Use bulleted lists and similar design elements to break text blocks.

- Use highlighting and emphasis to catch the user's eye.

- Be sure to distinguish from link colors so as to avoid confusion.

SCANABILITY

Page 159: Website Usability | Day 3

- Start each page with the conclusion - most important material should come up front.- Users should be able to tell in a glance what the page is about.- Users often only read the first line of a paragraph - use topic sentences, one idea per paragraph.

- Use simple sentence structure - avoid convoluted writing and complex words.

- Use caution with metaphors and humor - readers may take you literally.

USE PLAIN LANGUAGE

Page 160: Website Usability | Day 3

- Use hyperlinks to make text short.

- Keep links visible, ideally above the fold.

- Split the information into “chunks” that focus on a certain topic.

- Move long, detailed info to secondary pages.

- Avoid using links to break long articles into separate pages - is disruptive and makes printing difficult.

CHUNKING

Page 161: Website Usability | Day 3

- Online headlines are different than printed headlines.

- Online headlines are often displayed out of context: as part of an article, in a search list, in a bookmark list.

- Headline must stand on it’s own even when the rest of content is unavailable.

- Online headlines and their content are often hard to see in a single glance on the window so it is difficult for the user to learn enough just from the surrounding data.

HEADLINES

Page 162: Website Usability | Day 3

Use colors that have a high contrast between the text and the background.

Use plain color-backgrounds or subtle patterns.

Use fonts big enough that people can read.

Make the text stand still – moving blinking or zooming text is hard to read.

Keep sentences to 7 - 10 words as that is what the eye can comfortably track.

LEGIBILITY

Page 163: Website Usability | Day 3

Try to left justify text when possible.

LEGIBILITY

Page 164: Website Usability | Day 3

AVOID THE USE OF ALL CAPS FOR TEXT BECAUSE RESEARCH HAS SHOWN THAT IT IS 10 PERCENT SLOWER TO READ THAN TEXT IN MIXED CASES, BECAUSE IT IS HARDER FOR THE EYE TO RECOGNIZE THE SHAPE OF WORDS AND CHARACTERS IN THE MORE UNIFORM AND BLOCKY APPEARANCE. DON'T DO IT.

Legibility depends on the tops of all the letters.

Legibility depends on the tops of all the letters.

2. Use plain color-backgrounds or subtle patterns.

3. Use fonts big enough that people can read.

4. Make the text stand still – moving blinking or zooming text is hard to read.

LEGIBILITY

Page 165: Website Usability | Day 3

Explain what the article is about in terms that relate to the user.

Write in plain language.

Avoid teasers that try to entice people to click.

Try to make the first word an important, information-carrying one.

REMEMBER

Page 166: Website Usability | Day 3

WORKSHOP # 3 HEADLINESStay in your groups.

Remove every word you can from the passages below and create a catching headline. 1. Government officials involved in the Olympics call it a fiasco, that is, the extent of chaos that has thrown security plans into disarray upon learning that of the shortfall of civilian guards.

2. If “Ghosts in the Machine” an ambitious exhibition at the Met were itself a machine, it would have lots of moving parts but not all would be performing with equal efficiency.

3. Apple announced that its’ bestselling MacBook laptop just got its newest makeover. It’s a thing of beauty, clad in aluminum like its more expensive Pro siblings. A

Page 167: Website Usability | Day 3

WEB TYPOGRAPHY

Page 168: Website Usability | Day 3

TYPOGRAPHYTypography is the process of arranging letters, many terms are left over from the days of letterpress

On computers we use fonts, whether for digital printing or on the web.

Page 169: Website Usability | Day 3

HISTORY OF WEB TYPOGRAPHYAt first browsers had no way of embedding fonts.1995: Netscape introduces <font> tag1998: CSS2 allows for more type configuration2005: CSS3 introduces @font-face, allowing fonts to be hosted online

Page 170: Website Usability | Day 3

WEB-SAFE FONTSCome preinstalled on most computers.

Arial, Comic Sans MS, Courier,Georgia, Impact, Tahoma

Times New Roman, Verdana

Page 171: Website Usability | Day 3

@FONT-FACELets the browser load a font from a remote server, meaning that pages can display text in the specified font even if the user does not have it installed on their computer.

Allows for greater design customization without sacrificing accessibility or SEO.

Page 172: Website Usability | Day 3

IMAGE REPLACEMENTGood for logos. Bad for accessibility and SEO.

Page 173: Website Usability | Day 3

CHOOSING THE RIGHT FONT

Page 174: Website Usability | Day 3

SERIF VS SANS SERIFSerif

Sans SerifSlab SerifDis!lay

Page 175: Website Usability | Day 3

HEADERS VS COPYYou can use decorative fonts for headers...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.

Page 176: Website Usability | Day 3

X-HEIGHT

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.

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.

Lorem ipsum Lorem ipsum

Page 178: Website Usability | Day 3

WEB TYPOGRAPHY TIPS

Page 179: Website Usability | Day 3

INCREASE LEADINGLine height should be at least 120% of font size.

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.

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.

Page 180: Website Usability | Day 3

DO

Page 181: Website Usability | Day 3
Page 182: Website Usability | Day 3

DON’T

Page 183: Website Usability | Day 3
Page 184: Website Usability | Day 3

MAINTAIN LEGIBILITYLight colors are hard to read, even on white. Beware of #666.

Test your legibility with AccessColor.

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.

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.

Page 185: Website Usability | Day 3

DO

Page 186: Website Usability | Day 3
Page 187: Website Usability | Day 3

DON’T

Page 188: Website Usability | Day 3
Page 189: Website Usability | Day 3

COLUMN WIDTHThe eye can only comfortable track 7-10 words per line, which is about 40 to 80 characters.

Multiply your text size by 30 to determine maximum column width.

10px type x 30 = 300px column width

Page 190: Website Usability | Day 3

DO

Page 191: Website Usability | Day 3
Page 192: Website Usability | Day 3

DON’T

Page 193: Website Usability | Day 3
Page 194: Website Usability | Day 3

IMPLEMENT HIERARCHYUse multiple typefaces to differentiate between elements on the page.

Mix between categories (serif, sans serif, slab serif, display)

Don’t go too crazy! Don’t use more than 2 or 3 fonts.

Page 195: Website Usability | Day 3

DO

Page 196: Website Usability | Day 3
Page 197: Website Usability | Day 3

DON’T

Page 198: Website Usability | Day 3
Page 200: Website Usability | Day 3

WORKSHOP # 4 CREATE SITEPlease go into the group you worked with when creating personas.

CREATE CONTENT FOR THE WEBSITE USING THE PERSONAS AND SCENARIOS. What content would the user you defined find on the site?Establish contentEstablish information architectureCreate site mapCreate navigationCreate wireframes or other prototypeDo a prototype testMake improvements

Page 201: Website Usability | Day 3

GROUP #1: Site is to provide info for people starting own business; some of them have experience in he business world; others this is their first exposure to issues running a business.

GROUP #2: Site is to provide info for people looking to place parents in assisted living.

GROUP #3: Site is to provide info for people looking to compare car insurance.

WORKSHOP #4 SCENARIOS