Designing web usability with a human centered approach
Download
1 / 45

designing web usability - PowerPoint PPT Presentation


  • 403 Views
  • Updated On :

Designing Web Usability with a Human-Centered Approach. CIS 421 usability.ppt. Agenda. Changes to schedule Usability Universal Design Movement -- in your textbook Technology usability Web Usability. Changes to Schedule.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'designing web usability ' - Michelle


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Designing web usability with a human centered approach l.jpg

Designing Web Usability with a Human-CenteredApproach

CIS 421

usability.ppt


Agenda l.jpg
Agenda

  • Changes to schedule

  • Usability

    • Universal Design Movement -- in your textbook

    • Technology usability

    • Web Usability


Changes to schedule l.jpg
Changes to Schedule

  • DUE Thursday before class: Complete Blackboard quizzes on: Usability

  • Next Week: DUE Thursday, 11/5 before class: Project 2 posted on individual website, with gradingsheets posted to Blackboard assignment

  • Delay until week 7 (October 10-12):

    • Tuesday: Ex. 2 on Cyber Security Fair

    • Thursday:: Blackboard Quizzes: ~ Ch 7 quiz (Video & Audio) and Color Theory quiz

  • Week 8, Thurs (11/19)

    • Post Exercise 3, accessibility test of peer's website, posted on Blackboard & website


Universal design l.jpg
Universal Design

  • Universal Design principles are used in designing more than websites:

    • Housing

    • House and kitchen ware

    • Teaching materials

  • What are the main ideas of universal design?

    • Hint: think about what your Textbook: Universal Design for Web Accessibility says about the value of designing “barrier-free” websites


3 usability gurus are important l.jpg
3 Usability Gurus are important

  • Donald Norman, Cognitive Psychologist - technology in general: computers, door knobs

    • The Psychology [Design] of Everyday Things, 1988, 1991.

    • Things that make us smart, 1993

    • Emotional Design 2004

  • Jakob Nielsen, Computer Scientist - Web

    • Designing Web Usability, New Riders, 2000;

    • With Marie Tahir, Home Page Usability, 2002

    • With Hoa Loranger, Prioritizing Web Usability, 2006

  • Minor guru: Steve Krug, practitioner: Web

    • Don’t make me think, 2nd ed. New Riders, 2006


Usability concepts rules l.jpg
Usability Concepts + Rules

  • Norman: Human-centered design theory

    • Ideas have affected technology design since 1980s

    • http://www.jnd.org + http://www.nngroup.com

  • Nielsen: Web usability

    • Research tracking user’s movements in response to Web pages

    • http://www.useit.com

  • Krug: Popular version of Usability

    • Ideas based on practice

    • http://www.sensible.com


Norman s human centered approach l.jpg
Norman’s human-centered approach

  • Technology ought to be invisible to us and not get in the way of doing the task

  • Knowledge in the technology (“in the world”) aids task performance

    • Example: printer icon suggests button function

    • Krug calls it “self-evident”

  • Require less “knowledge in the head”

    • especially when icon becomes a “standard” used by many

    • It prevents human error

  • Final word: “When all else fails, standardize!” GUI (& web) design has become much more standardizedsince PCs became widely adopted


Norman how do we convey what we mean to the user l.jpg
Norman: How do we convey what we mean to the user?

  • Affordance is quality of object that suggests what can be done to an object

    • A door affords opening & closing

  • “Perceived” Affordance

    • Person can tell not only what the door does, but how it works by looking at it – PUSH it, PULL it, TURN THE KNOB, etc.

  • Affordances set expectations– Is self-evident (Krug)

  • Feedback tells user what happened when they interact with something on interface

    • Door opens, door closes, user hears something

  • Users figure out what they can do based on affordances & feedback


Norman s paradox of technology l.jpg
Norman’s Paradox of Technology

  • Technology offers the potential to make life easier and more enjoyable

    • Each new technology provides increased benefits

  • At the same time, technology can add complexities which can make technologies frustrating to use


Jakob nielsen s web usability 101 http www useit com alertbox 20030825 html l.jpg
Jakob Nielsen’s Web Usability 101http://www.useit.com/alertbox/20030825.html

  • Usability is “a quality attribute that assesses how easy user interfaces are to use” – has 5 quality components

    • Learnability – How easy to do basic tasks?

    • Efficiency – how FAST can user begin to perform tasks?

    • Memorability – how easy to remember how it works?

    • Errors – How easy to make errors? How handled?

    • Satisfaction – How pleasant to use design? emotional

  • On the Web, usability is a necessary condition for survival. If website is difficult to use, people leave


Nielsen s designing web usability l.jpg
Nielsen’s Designing Web Usability

  • Usability rules the web – the person who clicks the mouse decides everything -- including to leave web site

  • Jakob’s Law of Internet User Experience: Users spend most of their time on other websites!

    • How does that affect how users view your website?

    • What are users comparing your website to?

  • Page design is the most immediately visible part of web design

    • Users usually look at one page at a time

    • Based on what they see, they stay or leave


Nielsen hoa prioritizing web usability 2006 based on user tests l.jpg
Nielsen & Hoa, Prioritizing Web Usability (2006) based on user tests

  • Tested 69 adult users (20-60 years of age)

    • 57 in US, 12 in UK

    • At least 1 year experience using web

      • Rated HIGH experience or LOW experience, depending on whether used advanced techniques

    • Not people who develop technology or web applications

  • Tested individually, “Thinking aloud”

    • Videotaped their movements + computer with 2 separate cameras

    • 1-3 observers watched what they did


Users had 2 sets of tasks l.jpg
Users had 2 sets of tasks

  • Site-specific task to solve

    • Assigned to one of 25 web sites (all types & sizes of sites in the test set)

  • Web-wide task to solve

    • Could go anywhere they wanted

  • Tasks or problems rated as:

    • 100% solved

    • 0% solved

    • Partially solved


Success rates experience l.jpg
Success Rates & Experience

Average success rate for BOTH was 66%, up from 40% in 1990s

Self-reported USER SATISFACTION was 4.7 on a scale of 0 (low) to 7 (high). Not particularly surprising since their research shows that users tend to give generous scores on user satisfaction even when they have difficulty using a website


Web wide task results how people used sites what does this mean l.jpg
Web-Wide Task results: How people used sites: What does this mean?

  • 88% used a search engine

  • While doing task, users averaged 3.2 sites

  • Probability of revisiting a site: 12%

  • On average, test users spent 1 min., 49 sec. visiting a website before moving on

    • Average time per page: 22 seconds or this long:

  • Time spent on final site where solved task: 3 min, 49 sec.

  • 60% of Initial visits to a site were to inner page not home page.

  • When users browsed, they spent avg of 27 sec on interior page

    • most of time on content area

    • Ignored banners, navigation, sidebars, etc.

    • Almost half of user clicks were from content area


Serp search engine results page returns two types of listings l.jpg
SERP mean?: Search Engine Results Page returns two types of listings

  • Sponsored Listings

    • “Sponsors” bid on how much they will pay for click-throughs on “keyword” advertising

    • Top bids get listed “above the Line”

  • “Organic” listings are best matches on web to keyword search based on

    • “flytrap” content that is narrowly focused

    • Rich “see also” links to related content & services

    • Provide analysis & insight that attracts people

    • Publish a newsletter to set up relationships with users.



Page views by homepage vs screenful interior pages l.jpg
Page Views by Homepage vs. mean? Screenful Interior Pages

People find MORE USEFUL information inside the websitethan on the home page, but they often checked the home page to see what the site is about.


Scrolling users are lazy ignorant l.jpg
Scrolling: Users are lazy, ignorant! mean?

  • 35% of pages did not require scroll down

  • on other 65%: the % who scrolled down

    • Homepage, 1st visit23%

    • Homepage, 2nd visit 14%

    • Interior pages 42%

    • Search engine results 47%

  • Less experienced users are more likely to scroll down than experienced ones.


Nielsen s top ten mistakes in web design http www useit com alertbox 9605 html l.jpg

Bad Search -Overly literal search engines mean?

PDF Files for Online Reading – ok for manuals, but not for pages

Not Changing the Color of Visited Links

Non-Scannable Text Should use 8th grade reading level for general public.

Fixed Font Size

Page Titles With Low Search Engine Visibility

Anything That Looks Like an Advertisement –users have Banner blindness – if it looks like an ad, they ignore it

Violating design conventions – be consistent

Opening New Browser Windows

Not Answering Users' Questions – leaving off the price or total price, until you submit the form with your name on it.

Nielsen’s Top Ten Mistakes in Web Designhttp://www.useit.com/alertbox/9605.html


Conclusions from this study l.jpg
Conclusions from this study mean?

  • Do users scroll down to find anything?

  • Do users usually go to the home page when they visit a website from a search engine?

  • Do users click on more than the first few items on the “organic” part of the SERP?

  • How do you get your page to the top of the“organic” list?


Solutions to usability problems l.jpg
Solutions to Usability problems mean?

  • Simple usability testing

  • Content issues

  • Design issues

    • Use of standards

    • Layout

    • Navigation & signposts

    • Readability


Nielsen s quick user testing l.jpg
Nielsen’s mean?QuickUser testing

  • Find 5 users to test site –5 is enough to find important usability problems

  • Ask users to perform representative tasks with the current version of your Website

  • Observe what users do

    • Where do they succeed?

    • Where do they have problems with user interface?

    • Listen to what they say

  • Revise the site and retest the revision


Krug trunk test site in exercise http www al eds com l.jpg
Krug Trunk Test: site in exercise: mean?http://www.al-eds.com/

  • Look at a your page and answer these questions:

    • What site is this? (site id?)

    • What page am I on (page name)

    • What are the major sections of this site? (sections)

    • What are the options at this level (local navigator)

    • Where am I in the scheme of things?

    • How can I search?


Types of web testing l.jpg
Types of Web testing mean?

  • Eyetracking video

  • Vincent Flanders Web Pages that Suck

    • Worst Web Sites of 2008 -- need to scroll down below ads to find ethem

    • Web Pages That Suck - Lack of contrast


Content strategy to encourage information foraging at your site l.jpg
Content: Strategy to encourage mean?Information foraging at your site

  • Based on assumption that users do not exert themselves unless they must--energy optimization similar to animals hunting for food

  • “Information Scent” concept – based on “spoor”

    • Users will keep looking as long as they feel they are getting warmer, & closer to information they wantk and/or need

  • Analogy to diet selection of a fox in a forest with big bunnies and small bunnies. What should he eat?

    • The fox’s decision on what to hunt will depend on how easy the bunnies are to catch –

    • little bunnies are usually easier prey


Content strategy to encourage information foraging at your site27 l.jpg
Content: Strategy to encourage mean?Information foraging at your site

  • Diet Selection: Content looks like a Nutritious Meal that is Easy to Find(several smaller, baby bunnies vs. one large bunny)

  • After eating a few small bunnies, does the fox stay or move on to another hunting patch?

  • With broadband, users can snack information in small bites instead of big meals – it’s easier to catch small bunnies!


Content strategy to encourage information foraging at your site28 l.jpg
Content: Strategy to encourage mean?Information foraging at your site

  • When they find something at your site they can stay for more or move on – what they do depends on how far they have to go to find other information

    • Search engines emphasize the quality of links so users can easily go elsewhere.

  • Make your content look like a nutritious meal – enhance the information scent

    • Have links explicitly describe what users will find

    • Use words people understand

    • Remind user they are getting “warmer”


Content what do users find l.jpg
Content: What do users find? mean?

  • People scan the content part of the page for information, ignore navigation & anything that looks like an Ad or is in position that Ads occupy

    • F-Shaped pattern - http://www.useit.com/alertbox/reading_pattern.html

    • http://www.youtube.com/watch?v=lo_a2cfBUGc&feature=related

    • Banner Blindness – if it could be a banner ad, ignore it. http://www.useit.com/alertbox/banner-blindness.html

  • How will visitor to site know what site is about?

  • How will visitor know where they are if they land in middle of site from search engine?Signs that say: “You are here!”

    • Breadcrumbs, Page titles, Site maps


Content page real estate citigroup com nielsen s review of 50 homepages found accenture com l.jpg
Content: Page real estate: mean?citigroup.comNielsen’s review of 50 homepages found: Accenture.com

  • Actionable content of interest to viewers:

    • Nielsen recommends 50-80% meaningful content on a home page,

    • Findings were that average of 40% meaningful content

      • 20% Content that is interesting to users

      • 20% Navigation –primary valuable content?

  • Fluff – useless areas = 41% total

    • Ads, empty space, self-promotion

  • Overhead

    • 19% Operating system/browser/scrollbars.


Use standards to help users know l.jpg
Use Standards to help Users Know mean?

  • What features to expect

  • How features will look

  • Where features will be located

  • How to operate each feature to achieve user’s goals

  • Prevent user from missing features because they look different or can’t find

  • Prevents users’ surprise when things do not work as expected


Web design element standards http www useit com alertbox 20040913 html l.jpg
Web Design Element standards mean?http://www.useit.com/alertbox/20040913.html

  • Standard: 37% of design elements were done the same way by 80% of sites, including:

    • Logo in upper left corner of page

    • Search box on homepage

    • Absence of splash pages

    • Breadcrumbs listed horizontally, if used

  • Convention: 40% of design elements done same way on 50-80% of sites, including

    • Labeling site maps as Site Map

    • Changing color of visited links

    • Placing shopping cart link in upper right corner

    • Placing links on parallel subtopics in left column

  • Rest was Confusion, especially navigation


Layout design issues l.jpg
Layout & Design Issues mean?

  • Avoid horizontal scrolling at 1024x768

  • Use “liquid” layout

  • Use elastic design so page element scale when font sizes are increased

  • Content Alignment: Choose one & stick to it

    • Left, center, or right

    • Centered alignment gets wavy looking – less readable

  • Get text away from left page edge

    • Use padding to separate content from border of box

    • Use margins to separate box from other boxes

  • Horizontally align text on rows of buttons


Web usability design issues l.jpg
Web Usability Design Issues mean?

  • Templates: CSS let you style entire site or sections of site with one CSS file

    • Elastic Design http://www.alistapart.com/articles/elastic/

    • http://www.csszengarden.com/?cssfile=/063/063.css&page=0

  • Validate & clean up code

    • W3C XHTML, CSS validators

  • Website Optimization for quicker download speed

    • Run Tools>View Speed Report to see how long page takes to download, what objects are largest, and how to optimize page

  • Using non-standard code – Warn users

    • if page only displays in certain browser versions

    • About plugins required to view files

    • File sizethey will be downloading (esp. videos)


Krug users just muddle through l.jpg
Krug: users just muddle through mean?

  • Users don’t need to (or want to) understand how technology works

  • Users scan or skim Web pages for information or solutions to tasks – they don’t want to read them thoroughly

  • If they find something that works, they will continue to use it, even if it is not the most efficient way of doing it - satisficing

    • your job: make it self-evident or at least self-explanatory!


Krug clear visual hierarchy l.jpg
Krug: Clear Visual Hierarchy mean?

  • Organize & prioritize information on page

    • Most important information – larger, bolder, distinct color, set off by more white space, near the top of page

    • Things that are related logically are related visually

    • Nest things visually to show what is part of what

  • Use conventions everyone understands – shopping cart

  • Make it obvious what is clickable

  • Break up pages into clearly defined areas


Content graphics animation l.jpg
Content: Graphics & Animation mean?

  • Run Tools>View Speed Report to check page, download speed, see what page elements need to be optimized

  • Use ALT tags and labels for content to offer accessibility for disabled users

  • Use graphics to show real content not just to decorate the page – maximum 3 per page

  • Label graphics if meaning not immediately clear to user

  • Edit graphics so content is visible

  • Remember animation is distracting

    • http://www.howardsystems.com/index.html

  • Don’t animate anything critical (logo)

  • Let users launch animation themselves


Nielsen web content text l.jpg

Use customer-focused language mean?

Make it easy to understand

Use consistent capitalization & style

Avoid single-item categories & lists

Avoid exclamation points!

Beware of spelling in all uppercase – communicates anger

Limit font styles & other text formatting (size, colors,) so not distracting

Use high-contrast text & background colors or background image type is legible to your intended audience

Nielsen: Web Content: Text


Nielsen web content text http www useit com alertbox 9710a html l.jpg
Nielsen Web Content: Text mean?http://www.useit.com/alertbox/9710a.html

  • Make it short – slower to read on web

    • Avoid needless words

    • Use plain language

    • Scrap the “happy talk” (blather, blah, blah)

  • Write for scanability – so user can quickly decide whether pertinent

  • Spell & grammar check

  • Continue text on a second page

  • Legible text – colors, values, font size


Navigation l.jpg
Navigation mean?

  • How will the user know where they are?

    • When they come into inner page in website from a search engine?

    • What kinds of signposts can you set up to tell them where they are in the scheme of things?

  • How can you let them know where they can go next?

  • How will they complete their tasks?


Nielsen effective navigation l.jpg
Nielsen: Effective Navigation mean?

  • Locate primary navigation area in visible area, right next to main body of page

    • “Banner blindness” – people avoid information above horizontal rules at top of page

  • Group similar items together

  • Don’t provide multiple navigation areas for same types of links: top, side, bottom

  • Use category names that people understand

  • Use icons in navigation if easy to understand


Persistent navigation l.jpg
Persistent Navigation mean?

  • Makes users feel grounded – they know

    • what site they are on

    • where they are on the site

  • Tells users what is there

  • Tells how to use the Web site – what does this website offer? http://www.zincbistroaz.com/

    • Mystery Meat navigation example

  • Instills user confidence in Site developers

  • Follows the conventions: hyperlinks, icons, consistent positions for menus


Links set expectations affordances l.jpg
Links set Expectations mean?(Affordances)

  • Use descriptive titles

  • Allow link colors to show visited & unvisited states – make visible and easy to interpret

    • visited links should look different

    • Otherwise users get confused & revisit same pages – get annoyed, waste time.

  • Make links indicate

    • what will happen or open (email, PDF file, etc.)

    • size of file especially if large


Breadcrumbs l.jpg
Breadcrumbs mean?

  • home > services > analyze > results

  • Usually located at Top of page

  • Use > between levels

  • Use words that tell users where they are

  • Boldface last item

  • Don’t use instead of page name


Coming up l.jpg
Coming Up mean?

  • Rest of quarter

    • Work on project 2 – take your photos

    • Flash hands-on starts Thursday


ad