Internet Applications

Spring 2008

Review

• Last week– Information Organization– Classification/categorization– Internal vs External– Systems & approaches

This week

• Organization wrap-up, card sorting

• Accessibility / Interactivity

• Guest Speaker

External site design

• Document structure– How do you represent the resource to the user?

• Cohesion• Understandability• Use/Reuse

• Organization– Where does the document exist in the user’s information

sphere?• Findability• Categorization

• Labeling and navigation– How and when would the user interact with this resource?

• Actions• Navigation• Context

Labeling system

• Types– Contextual links, headings, navigation systems,

indexing terms

• Guidelines– Labeling systems should be user focused

(personas!)– Stay consistent

• Follow the metaphor, descriptive model, or action model• Labels should be a public representation of a well

structured internal system• Elements of style, presentation, consistency, accessibility

are as important as syntax, granularity, scope.

Sources of labeling systems

• Controlled vocabularies• User-centered design

– Card sorting – organize existing terms– Free listing – brainstorm terms

• Content analysis– Site structures– Server logs (see what urls people are looking for)

• Author centered design– How are your authors labeling things?– How would subject matter experts label?

Card sorting• Overview

– In card sorting, identify general concepts, site structures, documents, activities, etc and put them on cards

– A good guide• Types

– Open• User write their own categories & labels (discovery)

– Closed• Users use pre-labeled cards and categories (validation)

• Process– Give the cards to a user/group of users along with sticky notes and

ask them to group the cards and label their groups using the sticky notes

– Users can use the sticky notes to create new categories, identify connecting relationships, create new cards, etc.

– Review output, usually card sorting is best when done a few times to see what trends develop

Card Sorting exercise• The scenario: You are a user of the SILS website with a specific task in

mind (applying for admission, registration for courses, etc).

• Using the cards which have the general navigation topics from the SILS website, create an organization/navigation scheme that would fill your user’s need. Define:

• Your user – take on a persona and action• Topic presence – are there topics missing?• Topic granularity – are topics specific enough?• Cross Listing – What fits in hierarchies & what does not?• Contents – What resources would be listed?

• Take 15 minutes to group cards & make connections

• Find a space on the white board & sketch out your top level organization structure (no need to use every topic)

HCI & Accessibility

• Definitions– HCI:

• “The interaction between a person and a computer with the person, for instance using a keyboard, keypad, mouse, voice, joystick, etc and the computer using characters, menus, graphics, images, sound, etc.” [1]

– Usability• “Quite simply, usability is making your site easy for your

customers to find the exact information they need when they need it.” [3]

– Accessibility• “Accessibility functionality makes content resources usable by

persons with disabilities chiefly through careful attention to the linearizing of content navigation as well as the separation of presentation style and actual symbolic content.”[2]

Taxonomy of Influential factors• Physical

– Interface, usability• Cognitive

– Match between content, organization, language• Affective

– Attitude towards usability, confidence / fear / trust• Economic

– Digital divide, net neutrality, impact on access and availability• Social

– Compounding effect, ‘outsiders’• Political

– Impact of government on access, content. Relationship of knowledge and power

(McCreadie & Rice, 1999)

HHS Guidelines

• Pulled from articles/research/experts• 500 guidelines condensed to 209 and

prioritized• Ranked by experts:

– Strong research support– Moderate research support– Weak research support– Strong expert opinion support– Weak expert opinion support

Design & testing• 1.10 - Parallel design

• Multiple independent designs• “Group discussions of design issues (brainstorming) do not lead to the

best solutions”• http://www.usabilitynet.org/tools/parallel.htm• Range of ideas, developed simultaneously• Compile/combine good ideas

• 18.1 - Iterative design• “One recent study found that the improvements made between the

original Web site and the redesigned Web site resulted in thirty percent more task completions, twenty-five percent less time to complete the tasks, and sixty-seven percent greater user satisfaction.”

• 18.7 – Use appropriate prototyping technology• “Paper-based prototyping appears to be as effective as computer-based

prototyping when trying to identify most usability issues.”• HTML, Powerpoint, Visio, Paper prototyping, Wireframes

Usability testing (2)• Identify concrete tasks

• Select users to perform these tasks– Small numbers are ok for initial design– Larger studies later in the process add validity

• Use scenarios with users to set a use goal (tell the user what to achieve, not context)

• Watch user interact. Consider ‘think-aloud’ method, paper prototyping, etc.

• Interview for general opinions, ask about specific problems

Building applications

• 1.1 – Provide useful content• 1.4 – Involve users in establishing

requirements • “users are most valuable in helping designers know what

a system should do, but not in helping designers determine how best to have the system do it.”

• 1.5 – Set goals• “some intranet Web sites have set the goal that

information will be found eighty percent of the time and in less than one minute”

• 1.11 – Use Personas• (limited research evidence!)

Search engine optimization

• 1.8 – Be found in top 30– Text recommends extensive use of meta-tags

– <meta name=”description” content=”The Official Website of the Federal Bureau of Investigation”>

– Google recommends– Be easily discoverable (no JavaScript/flash requirements)– Get links to your site– Use a discoverable hierarchy– Use a site map– Use Title and ALT tags properly

• “Webmasters who spend their energies upholding the spirit of the basic principles will provide a much better user experience and subsequently enjoy better ranking than those who spend their time looking for loopholes they can exploit” (Google Webmaster Tools)

Tasks

• 2.3 – Standardize tasks – Think calendar function, links, forms, use a

space on the page to ‘pop-up’ forms

• 2.5 – Memory limitations• “When users must remember information on

one Web page for use on another page or another location on the same page, they can only remember about three or four items for a few seconds.”

Accessibility

• 8% of the user population has accessibility issues

• Guidelines– Provide means to fill out forms

• Use <label> tag with forms to identify fields• Keep form fields in sequence, use tabindex• Avoid tables• Avoid JavaScript dependent forms

– Use flexible display methods, colors, text-equivalents, text-size

– Use flexible input systems– Provide equivalent pages

Organization guidelines

• 9.4 Use clear hierarchies• “People prefer hierarchies, and tend to focus their

attention on one level of the hierarchy at a time.”

• 9.7 – Use appropriate HTML headings• 10.1 – Use meaningful link labels• 12.2 – Place important items at the top of lists• 12.4/5 – Provide context (related items,

headings)

Images

• 14.3 – Ensure that images do not impact page speed

• 14.8 – Ensure images convey site meaning

• 14.10 – include data with graphics

• 14.13 – Emulate real world objects

Content design & organization

• 15.1 – Make actions clear• 15.2-5 – Avoid Jargon/acronyms• 15.10 – Use active voice• 16.2 – Facilitate scanning

• “Studies report that about eighty percent of users scan any new page. Only sixteen percent read each word. Users spend about twelve percent of their time trying to locate desired information on a page”

• 16.8 – Design for multiple audiences• “When segmenting content for two or more distinct

groups of users, allow users from each audience to easily access information intended for other audiences.”

• 17.5 – Design searching around user terms

Usability & Web 2.0

• How does web 2.0 / Ajax applications impact these standards?– Related readings

• http://www.useit.com/alertbox/web-2.html• http://doi.acm.org/10.1145/1243441.1243442

– Issues?

• Example solutions– Fangs –A good test, a bad test

• http://test.cita.uiuc.edu/aria/nav/nav1.php

– Jaws

Amazon’s screen reading solution

• <div style="position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden;"> – <a href="http://www.amazon.com/access">A

different version of this web site containing similar content optimized for screen readers and mobile devices may be found at the web address: www.amazon.com/access</a>

• </div> <a name="top"></a>

Accessibility Evaluation

• Examine pages using multiple browsers/tools

• Define scope of evaluation – specific pages, accessibility issues, standards

• Evaluate content with HTML/CSS validation tools, try screen readers/viewers

• Involve users, experts• Create recommendations

http://www.w3.org/WAI/eval/

Additional Resources

• W3C web accessibility– http://www.w3.org/WAI/

• W3C accessibility evaluation– http://www.w3.org/WAI/eval/

• W3C accessibility for RIAs– http://www.w3.org/TR/wai-aria-roadmap/

• Fangs – Open Source screen rendering agent– http://www.standards-schmandards.com/projects/

fangs/

Next week

• Technology Topics HTML/Webservers