Internet Applications

1
Internet Applications

• Spring 2008

2
Review

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

3
This week

• Organization wrap-up, card sorting
• Accessibility / Interactivity
• Guest Speaker

4
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 users
  information sphere?
• Findability
• Categorization
• Labeling and navigation
• How and when would the user interact with this
  resource?
• Actions
• Navigation
• Context

5
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.

6
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?

7
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

8
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 users 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)

9
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

10
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)

11
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

12
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

13
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

14
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!)

15
Search engine optimization

• 1.8 Be found in top 30
• Text recommends extensive use of meta-tags
• ltmeta namedescription contentThe Official
  Website of the Federal Bureau of Investigationgt
• 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)

16
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.

17
Accessibility

• 8 of the user population has accessibility
  issues
• Guidelines
• Provide means to fill out forms
• Use ltlabelgt 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

18
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)

19
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

20
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

21
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

22
Amazons screen reading solution

• ltdiv style"positionabsolute left0px
  top-500px width1px height1px
  overflowhidden"gt
• lta href"http//www.amazon.com/access"gtA
  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/accesslt/agt
• lt/divgt lta name"top"gtlt/agt

23
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/
24
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/fang
  s/

25
Next week

• Technology Topics HTML/Webservers