Transcript inls572_class5_interactivityhci

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, textequivalents, 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.standardsschmandards.com/projects/fangs/
Next week
• Technology Topics HTML/Webservers