Web MultimediaWeb Multimedia

Usability And TestingUsability And Testing

Why Test?Why Test?

To see if it worksTo see if it works To see if it suits its purposeTo see if it suits its purpose To see if it is “useable” To see if it is “useable” To see if the user understands the To see if the user understands the

navigationnavigation To see if the web interface worksTo see if the web interface works To see if it hits its target - what it To see if it hits its target - what it

aimed to doaimed to do To see if its accessibleTo see if its accessible

What is Usability?What is Usability?

The measure of a product's potential The measure of a product's potential to accomplish the goals of the user. to accomplish the goals of the user.

In IT, the term is often used in In IT, the term is often used in relation to software applications and relation to software applications and Web sites.Web sites.

Some factors used in determining Some factors used in determining product usability are ease-of-use, product usability are ease-of-use, and visual consistency. and visual consistency.

Recap onRecap on accessibility accessibility

What is accessibility?What is accessibility?

"The power of the Web is in its "The power of the Web is in its universality. Access by everyone universality. Access by everyone regardless of disability is an essential regardless of disability is an essential aspect." aspect." -- Tim Berners-Lee, W3C Director and -- Tim Berners-Lee, W3C Director and inventor of the World Wide Web inventor of the World Wide Web

For a website to be accessible, its For a website to be accessible, its content must be available to content must be available to everyone, including people with everyone, including people with disabilities.disabilities.

Accessibility Means DullAccessibility Means Dull

WRONG!!!!!!WRONG!!!!!! An accessible page is NOT a dull, An accessible page is NOT a dull,

plain boring textplain boring text• WAI (WAI (www.w3.orgwww.w3.org) guidelines tell you ) guidelines tell you

how to do things accessibly, they don’t how to do things accessibly, they don’t say “Don’t do it”say “Don’t do it”

• Web accessibility is not about Web accessibility is not about restrictingrestricting your multimedia/graphical your multimedia/graphical design; it's about design; it's about enhancingenhancing it! it!

Font sizeFont size

The W3C recommends that you let users The W3C recommends that you let users set the base font size in their browser and set the base font size in their browser and that you set all variations using the "em" that you set all variations using the "em" unit. unit.

An em in the Web context is the same as An em in the Web context is the same as the font height, which makes it a relative the font height, which makes it a relative unit and therefore flexible. unit and therefore flexible.

Colour BlindnessColour Blindness

SeizuresSeizures

Seizure disordersSeizure disorders TTriggered by visual flickering or riggered by visual flickering or

audio signals at a certain frequencyaudio signals at a certain frequency To use the Web, people with seizure To use the Web, people with seizure

disorders may need to turn off disorders may need to turn off animations, blinking text, or certain animations, blinking text, or certain frequencies of audiofrequencies of audio

Photosensitive EpilepsyPhotosensitive Epilepsy

allow users to control flickering, avoid causing allow users to control flickering, avoid causing the screen to flicker the screen to flicker

allow users to control blinking, avoid causing allow users to control blinking, avoid causing content to blink content to blink

allow users to freeze moving content, avoid allow users to freeze moving content, avoid movement in pages movement in pages

provide the ability to stop the refresh, do not provide the ability to stop the refresh, do not create periodically auto-refreshing pages create periodically auto-refreshing pages

provide the ability to stop auto-redirect, do not provide the ability to stop auto-redirect, do not use markup to redirect pages automatically. use markup to redirect pages automatically. Instead, configure the server to perform Instead, configure the server to perform redirects. redirects.

Back To UsabilityBack To Usability

Typical problemsTypical problems What type of information is on this site?What type of information is on this site?

• Assumes you are familiar with the contentAssumes you are familiar with the content What type of information will this link lead to?What type of information will this link lead to?

• Need to explain linksNeed to explain links Unexpected links off siteUnexpected links off site

• Distinguish off site linksDistinguish off site links Media does not workMedia does not work

• Make sure they get a choice andMake sure they get a choice and make make sure links to plugins are clearsure links to plugins are clear

How do you evaluateHow do you evaluate

Decide what you are evaluatingDecide what you are evaluating Decide how you are going to evaluate Decide how you are going to evaluate

itit Decide who is going to evaluateDecide who is going to evaluate Perform the evaluationPerform the evaluation Measure reactions / resultsMeasure reactions / results Analyse resultsAnalyse results Report on resultsReport on results

Meeting The NeedsMeeting The Needs

Identify the audience (intended users)Identify the audience (intended users)• Gender / Age / EnthusiasmGender / Age / Enthusiasm

Meet the needs of the intended usersMeet the needs of the intended users• What is the purpose of the site?What is the purpose of the site?• Who is the site for?Who is the site for?• What will attract users and meet their needs?What will attract users and meet their needs?

provide “quality in use”provide “quality in use”• Efficient: in an acceptable timeEfficient: in an acceptable time• Satisfied: in comparison to expectationsSatisfied: in comparison to expectations

The ContentThe Content

Is it pitched at the right audienceIs it pitched at the right audience Is the user satisfied with the contentIs the user satisfied with the content Is anything learned and how long does Is anything learned and how long does

it takeit take What parts / sections do they use the What parts / sections do they use the

mostmost Is the content jargon specific / Is this Is the content jargon specific / Is this

relevant?relevant?

What is Usability Testing?What is Usability Testing? A method by which users of a product are A method by which users of a product are

asked to perform certain tasks in an effort asked to perform certain tasks in an effort to measure the product's ease-of-use, task to measure the product's ease-of-use, task time, and the user's perception of the time, and the user's perception of the experience. experience.

Can be done formally, in a usability lab with Can be done formally, in a usability lab with video cameras, or informally, with paper video cameras, or informally, with paper mock-ups of an application or Web site. mock-ups of an application or Web site.

Changes are made to the application or site Changes are made to the application or site based on the findings of the usability tests. based on the findings of the usability tests.

How?How? Introduction for participantIntroduction for participant Give the user realistic goalsGive the user realistic goals

• Something they will do on the site – play some Something they will do on the site – play some mediamedia

• Ask the user to find the information using the linksAsk the user to find the information using the links The navigationThe navigation

• Is it easy to understandIs it easy to understand• Is it easy to followIs it easy to follow• Do they get lost in hyperspaceDo they get lost in hyperspace

Watch and record behavior (take notes, tape)Watch and record behavior (take notes, tape) Interact with participantInteract with participant Debriefing - Debriefing - Identify areas of difficulty and Identify areas of difficulty and

improvementsimprovements

Measuring usabilityMeasuring usability

Does the user make lots of mistakesDoes the user make lots of mistakes Can they reach their goalCan they reach their goal Watch the progress they make and Watch the progress they make and

the routes they takethe routes they take Watch where they are slowWatch where they are slow Find out how they use the systemFind out how they use the system Ask them their opinionsAsk them their opinions

Recap - Create a Usable Flash Site Recap - Create a Usable Flash Site

Flash receives a great deal of Flash receives a great deal of criticism from usability and web criticism from usability and web standards advocates which are valid.standards advocates which are valid.

What the critics fail to understand is What the critics fail to understand is that the designers are usually that the designers are usually responsible for the lack of usability.responsible for the lack of usability.

Flash has the capacity to create Flash has the capacity to create usable sites, but requires that usable sites, but requires that designers follow the guidelines. designers follow the guidelines.

Adobe Developer ConnectionAdobe Developer ConnectionUsability Topic Centre.Usability Topic Centre.

http://www.adobe.com/devnet/http://www.adobe.com/devnet/topics/usability.htmltopics/usability.html

Remember user GoalsRemember user Goals• User typically come to a site with a goal in User typically come to a site with a goal in

mind. mind. Remember Site Goals Remember Site Goals

• Site design should reflect business or client Site design should reflect business or client needs. needs.

Avoid unnecessary IntrosAvoid unnecessary Intros• While intro animations are exciting, they often While intro animations are exciting, they often

delay the user’s access to the information they delay the user’s access to the information they seek to get to another area seek to get to another area

Provide logical navigation and Provide logical navigation and interactivityinteractivity

Remind users where they’ve been.Remind users where they’ve been. Give users an easy exit from each major Give users an easy exit from each major

section of the site and an easy return to section of the site and an easy return to their starting point. their starting point.

Clearly indicate each links destination.Clearly indicate each links destination. Keep navigation structures visible rather Keep navigation structures visible rather

than hiding them until the user has than hiding them until the user has triggered an event triggered an event

Make sure your buttons have well defined Make sure your buttons have well defined hit areashit areas

Support back button navigation.Support back button navigation.

Using built-in browser forward and Using built-in browser forward and back navigationback navigation• Separate Flash movies into logical Separate Flash movies into logical

chunkschunks• Place them on individual HTML pagesPlace them on individual HTML pages• Or set up the movie to include a Flash-Or set up the movie to include a Flash-

based Back Button that the user can use based Back Button that the user can use to return to a frame or scene that to return to a frame or scene that represents a logical previous page.represents a logical previous page.

More Tips..More Tips.. Design for consistencyDesign for consistency

Don’t overuse animationDon’t overuse animation• Avoid unnecessary animations. Avoid unnecessary animations. • The best animations reinforce the site's The best animations reinforce the site's

goals, tell a story, or aid in navigation. goals, tell a story, or aid in navigation. • Repeated animations on text-heavy Repeated animations on text-heavy

pages distract the eye from the pages distract the eye from the message of the page. message of the page.

More Tips..More Tips..

Use sound sparinglyUse sound sparingly• Sound should enhance your site but not be Sound should enhance your site but not be

indispensable.indispensable. TARGET Low-BandwidthTARGET Low-Bandwidth

• the smaller the download, the better. the smaller the download, the better. • The initial screen download should be no more The initial screen download should be no more

To reduce download time, use smaller vector-To reduce download time, use smaller vector-based images (unless the image is a complex based images (unless the image is a complex bitmap), and use the Load Movie action only bitmap), and use the Load Movie action only when the user specifically requests a file. when the user specifically requests a file.

More Tips..More Tips.. Design for accessibility Design for accessibility

• Make your content available to all users, including Make your content available to all users, including those with disabilities. those with disabilities.

• Highly descriptive Alternate Tags allow your content Highly descriptive Alternate Tags allow your content to be interpreted by assistive technology. to be interpreted by assistive technology.

• The magnifying Smart Clip for zoom is another easy-The magnifying Smart Clip for zoom is another easy-to-use Macromedia Flash feature that allows more to-use Macromedia Flash feature that allows more users to see your content. users to see your content.

• http://www.adobe.com/accessibilityhttp://www.adobe.com/accessibility Test For usability Test For usability

• Have someone else test your site to make sure it Have someone else test your site to make sure it accomplishes both user goals and site goals accomplishes both user goals and site goals

• Re-test you your site when you make changesRe-test you your site when you make changes

Intuitive NavigationIntuitive Navigation

Most people visiting a site, whether it is a Most people visiting a site, whether it is a Flash site or other, will be there for the Flash site or other, will be there for the content and no other reason.content and no other reason.

If they can't find it, they will leave rather If they can't find it, they will leave rather than spend the time to look for it. than spend the time to look for it.

Images for navigation buttons are nice, Images for navigation buttons are nice, and will enhance the look of the site, but it and will enhance the look of the site, but it will help if you provide an explanation of will help if you provide an explanation of where clicking will take the visitor. where clicking will take the visitor.

Communicate With the VisitorCommunicate With the Visitor The visitor should always know what's and The visitor should always know what's and

happening or where the site is taking happening or where the site is taking them. them.

This is probably the leading usability This is probably the leading usability problem with Flash sites. problem with Flash sites.

After the site is created, find someone who After the site is created, find someone who isn't web savvy to test it. isn't web savvy to test it.

Watch as they are navigating and pay Watch as they are navigating and pay attention to where they click, where they attention to where they click, where they hesitate, or anything else that confuses hesitate, or anything else that confuses them. them.

This will help in making your site more This will help in making your site more usable for future visitors. usable for future visitors.

Web sites For Design HintsWeb sites For Design Hints

http://www.webstyleguide.com/http://www.webstyleguide.com/ http://www.clickz.com/experts/ad/leahttp://www.clickz.com/experts/ad/lea

d_edge/article.php/838701d_edge/article.php/838701 httphttp://www.usableweb.com/://www.usableweb.com/ http://www.useit.com/alertbox/20021http://www.useit.com/alertbox/20021

125.html125.html