INP 153: Intro to User Experience I

1
INP 153 Intro to User Experience I
Lecture 12 Accessibility (Cont) and Designing a
Within-Site Search
2
Accessibility seems tricky

• Someone told me the other day that making web
  pages accessible was a pain. I imagine Egyptian
  carvers thought that carving endless statues of
  Pharaohs was a pain, but it was what they did.
  This is what we do.
• Source http//www.nps.gov/access/tipoftheweek/tip
  design.htm

3
Being a professional

• Ive created web sites with countless
  accessibility issues (E.g., use plus sign for
  bullet points, use embedded tables for page
  layout).
• Creating accessible web sites seems difficult at
  first, but part of being a professional is
  learning from your mistakes.

4
Defining the Web

• In designing accessible documents for the web,
  its important to think about what you mean by
  the web
• Not just HTML, but images, multimedia, PDFs, Word
  documents, etc.

5
Example Accessible PDFs 1 of 6

• PDFs are an important part of the web. They are
  an industry standard for printable forms, large
  bodies of text, resumes, etc.
• There are general guidelines for creating PDFs
  that apply to other document types as well.
• Adobe Acrobat a leader in supporting accessible
  documentation

6
Example Accessible PDFs 2 of 6

• The following are some guidelines for creating
  accessible PDFs. Note the similarity between
  these guidelines and the guidelines we discussed
  last class.
• Source How to Create Accessible Adobe PDF
  Files, http//www.adobe.com/products/acrobat/pdfs
  /accessbooklet.pdf

7
Example Accessible PDFs 3 of 6

• Logical reading order
• Use columns tool to create columns, not tabs or
  spaces using space bar. Use tables for arranging
  data instead of spacing data out using tabs or
  spaces.
• Add descriptions for images
• Like for HTML pages, images should have
  alternative descriptions for screen readers

8
Example Accessible PDFs 4 of 6

• OCR text from scans
• If you scan a document into a PDF file, use
  optical character recognition (OCR) so that the
  document contains text.
• If you scan a document in as an image, then
  screen readers wont be able to read the
  document, and the text will not be searchable.

9
Example Accessible PDFs 5 of 6

• Create links to sections
• Create links within the document to important
  sections so individuals using assistive
  technology can skip to the sections they want.
• Create a table of contents and useful headings
• Link to important sections within the table of
  contents

10
Example Accessible PDFs 6 of 6

• Specify the document language
• This way, next-generation screen readers will be
  able to translate the text

11
Other documents on the web 1 of 3

• Word documents
• Use column attributes instead of tables for
  layout purposes
• Use title, heading and paragraph attributes for
  layout purposes
• Use page properties to format text instead of
  using space bar to add spaces.

12
Other documents on the web 2 of 3

• Flash files
• If your website is a Flash file, insure that it
  is accessible. Flash MX is supposed to solve some
  of the major accessibility issues
• Embed flash within separate HTML files so that
  each page has a separate URL. This will support
  bookmarking, and make navigation less burdensome.

13
Other documents on the web 3 of 3

• Images
• Optimize images at 72 dpi, which is the actual
  screen resolution.

14
Creating accessible HTML and text documents 1 of
6

• In general, it is better to use HTML for text
  than other document types. It requires less
  download time, and it is general easier for
  screen readers to interpret.
• The following are some accessibility guidelines
  for creating accessible text and HTML documents

15
Creating accessible HTML and text documents 2 of
6

• If you use foreign languages e.g., caveat emptor
  (let the buyer beware), übermensch
  (supermen) or technical jargon meant for
  non-professionals (wireframes), then offer
  translations or explanations so that your users
  wont feel alienated.
• Especially useful for individuals who only have a
  tentative grasp of English.

16
Creating accessible HTML and text documents 3 of
6

• Use meaningful file names for HTML, text and PDF
  files. That way, the URL reflects the content.
• Dont use 1.html or 0374392873297-a.pdf unless
  you have a good reason.
• Always use index.html (or index.whatever) for
  home page in a directory. Makes for shorter URLs
  and are easily referencable.

17
Creating accessible HTML and text documents 4 of
6

• Screen readers announce the titles of documents
  to readers. Untitled documents, or documents with
  confusing titles, are more difficult to use.
• Use scalable text so users can define their text
  size. Choosing an absolute size (12 points) may
  not meet some of your users visual needs, but a
  relative size (-1) will allow them to change the
  size if they need to.

18
Creating accessible HTML and text documents 5 of
6

• Abbreviations (Ex., E.g., I.e., lol, brb, wb,
  txt, govt, etc.) are read by screen readers as
  individual letters. Also, non-native English
  speakers will have trouble with these.
• If you are going to use them, introduce them
  first.
• Also, you can provide a link at every occurrence
  to a page that explains the abbreviation, though
  in almost all cases its better to use plain
  English in their place.

19
Creating accessible HTML and text documents 6 of
6

• Dont use special characters (E.g., vertical bars
  , tildes , etc.) to format text. They are read
  as their name, so use commas instead.
• My weblog uses vertical bars to separate links
  on the navigation bar. Thats fine if you know
  my audience, but if you want to make my website
  accessible in the future, you will have to make
  hundreds (or possibly even thousands) of
  corrections.
• Some special characters arent saved when user
  bookmarks your page, which makes your bookmarked
  page more difficult to find.

20
Mindful within-site search
21
Designing a useful search engine

• What is a useful search engine?
• Simple interface
• Easy to use results, appropriately ranked
• Appropriate behind-the-scenes functionality
• Many users use search engines by default whenever
  they go to a site, only rarely browsing.

22
Experiment What was that quote again

• Go to brainyquote.com, and search for the
  following quote
• Most of the change we think we see in life is
  due to truths being in and out of favor
• Robert Frost

23
What went wrong?

• Where did the search function fail us? This
  demonstrates that simply implementing a search
  engine doesnt solve all our navigation problems.
• Aside visited links are too similar in color to
  unvisited links.
• Brainyquote.com could really use an advanced
  search feature. What fields would be useful?

24
Deploying an Effective Search Engine 1 of 9

• By the way, this article would fail the stress
  test whos hosting this site? (Answer Step Two
  Design, but I had to go to the home page to find
  this out.)
• By James Robertson, http//www.steptwo.com.au/pape
  rs/search/index.html

25
Deploying an Effective Search Engine 2 of 9

• 3 steps to deploying a search engine
• Select a search engine
• Design the interface
• Improve the operations behind the scenes

26
Deploying an Effective Search Engine 3 of 9

• The author suggests not bothering with an
  advanced search (with a few exceptions).
• However, the example from BrainyQuote.com
  hopefully demonstrated that there are cases in
  which advanced search is useful.
• Also academic libraries, technical websites,
  online journals can you think of more?

27
Deploying an Effective Search Engine 4 of 9

• Selecting a search engine
• Create a list of criteria
• Write down search engines that meet your criteria
• Download evaluation copies, check things like
  documentation, accuracy, etc.

28
Deploying an Effective Search Engine 5 of 9

• Designing the interface
• Keep it simple (search field and search button)
• List tips and search examples familiar to target
  audience
• Dont require Boolean operators
• More words should narrow the search, not broaden!

29
Deploying an Effective Search Engine 6 of 9

• Designing the interface cont
• When page loads, the cursor should start in the
  text field setting the focus
• Result pages should be easy to read, free of
  small text.
• Offer title, description and ranking for each
  page, nothing more.
• I disagree offering the size of the page can be
  useful for PDFs and images, especially as a flag
  for people with lower connections.

30
Deploying an Effective Search Engine 7 of 9

• Designing the interface cont
• Dont show your users rankings with percentages
  use 1 to 5 stars.
• Descriptions need to be meaningful.

31
Deploying an Effective Search Engine 8 of 9

• Behind the scenes (use these features with
  caution)
• Fuzzy searching corrects for spelling
  mistakes. Finds more matches
• Stemming type, typing, typical (?)
• Understand how your search engines weighs
  results, and tweak it if you need to.

32
Deploying an Effective Search Engine 9 of 9

• Behind the scenes (cont)
• Monitor search log, find the terms your users are
  using, and also uncovered failed searches
• These are vital in monitoring the ongoing health
  of the search engine
• Synonym rings broaden searches to include
  synonyms, abbreviations and common misspellings.
• Spell-checker

33
Good search engine heuristics

• Place search box on each page if possible
• Should at least be on home page, and linked to
  every other page
• Search is sometimes used as a life line, which
  is why it should be available throughout the site
  (Jakob Nielsen, Search Visible and Simple)

34
Heuristics (cont)

• Location of the search box is key, so put it near
  the top.
• The text field should be long enough for a
  typical query. Scrolling decreases usability.
  (Jakob Nielsen, Search Visible and Simple)

35
Heuristics (cont)

• Quality of search results is a reflection of the
  quality of your search.
• It often is the first peek inside the store
  front window, so make a good impression!
• Offer an option to use advanced search near the
  top and bottom of the results page.
• E.g., Refine your search using the advanced
  search.
• Often, links to advanced search on other pages
  are missed. Offer it after the user has tried the
  simple search.

36
Heuristics (cont)

• Using search scopes
• Let users limit search results
• Most often, they are ignored
• If you use, make the default an entire site
  search, and set the option apart at the top in
  bold.
• If the scopes are not distinct, then the user may
  unintentionally limit the search.

37
Search results ranking

• How do search engines rank results? Each is
  different, but they all use complex algorithms
  including
• Location and frequency of key work
• Key word in title most important, near top of
  document
• Spamming technique paragraphs of repeating
  keywords, titles chocked full of keywords
• Number of pages that link to you
• Quality of link matters

38
Factors in choosing a within-site search engine

• Price (some are free, others cost thousands of
  dollars)
• Ease of installation and maintenance
• Ease of use
• Operation system it runs on (Windows, Linux,
  etc.)
• What it can index (PDF file, HTML pages,
  pictures, sound files, etc.)
• Access to source code (often for free search
  engines)
• Customizability
• Number of documents it can catalogue
• Rate of queries it can handle

39
Resources for finding a search engine

• http//www.searchtools.com/tools/tools.html
• Lists different options
• If you query Yahoo! or Google for within-site
  search engines, you should be able to discover
  more resources!

40
Class project Choosing a search engine

• We would like to add a search box for our online
  pet store, iPets.com.
• First, we must discuss what we want out of a
  search engine, and how much we are willing to
  spend
• Second, we must explore possible search engines

41
For next week

• Optional projects are due!
• Raise hand if planning to do an optional project
• Have a pleasant week!