INP 153: Designing for the User Experience I

1
INP 153 Designing for the User Experience I

• Lecture 4 Organizing Labeling

2
Common problems on the Web

• Poor organization systems make browsing very
  difficult.
• Unplanned organization systems fall apart as
  content is added.
• Ambiguous labeling makes it difficult for users
  to find the content they want.
• Without using actual user search terms as input
  for labels, searching for content often leads
  nowhere.

3
Read the textbook!

• Todays lecture draws very heavily from
  Information Architecture for the World Wide Web
  chapters 5 6.
• Make sure you read the textbook to familiarize
  yourself with these very important terms!

4
Challenge of creating good organization systems

• With poor labels, it is difficult to create
  appropriate organization systems.
• Also, the heterogeneous nature of the web
  (different media types, different types of
  documents, different types of hypertextual links)
  makes organizing the content in a clear fashion a
  definite challenge.

5
What are organization systems?

• Functional definition
• Organization schemes are the blueprints used by
  information architects for categorizing content
  in a fashion that is intuitive or simple for
  users.

6
Components of organization systems

• Organization schemes
• Grouping of items based on common properties
• Organization structures
• Type of relationship between content and
  categories

7
Organization schemes

• Exact Organization Schemes
• Alphabetical
• Chronological
• Geographical
• More?
• Ambiguous Organization Schemes
• Topic
• Tasks based on priority
• Audience
• Metaphor
• Hybrids combinations of the above

8
Organization structures

• Hierarchy Model
• Top-down
• Taxonomies hierarchical arrangement of
  categories within the user interface.
• Supports browsing
• Database Model
• Bottom-up
• Supports search retrieval
• Hypertext

9
Designing appropriate taxonomies

• Though there are exceptions to this rule, aim for
  mutually-exclusive categories. Ask yourself do
  any two of my categories seem like they have
  something in common?
• Its okay to put more ambiguous terms in more
  than one category, but do this sparingly. Too
  much cross-listing impoverishes the hierarchy.
  For an example, see the Egreetings case study.
• Balance breadth and depth.
• Too much depth too many clicks
• Too much breadth difficult to visually scan

10
Designing the database

• Appropriate metadata author, date of creation,
  last updated, topics, key words, type of
  document/media, etc. makes it easier to search
  for content.
• Databases can be used to structure metadata and
  relate different fields.

11
Hypertextual Organization

• Simply linking together related items can assist
  associative learning. E.g., My dog is a toy
  Pekingese who just now you can learn about
  Pekingese dogs by clicking on the link!
• However, it is difficult to build a mental model
  of where we have been once we start roaming
  through the hypertext links.
• Hypertext should be used to complement other
  organization structures, not as the primary
  organization structure!

12
So, how do I choose the right structure?

• First of all, appropriate metadata is important,
  whether or not you have a search function,
  because it will be easier to implement search
  later AND people will search for your content
  from search engines like Yahoo! and Google.
• If you have a search engine, a good database
  model doesnt make up for a poor hierarchy! It is
  important to always support browsing.
• Use hypertextual links sparingly, and only link
  important information that your audience cares
  about!

13
Exercise organizing the pet store

• In groups of four, develop an organization scheme
  for a pet supplies store.
• Limit the goods you carry to pet supplies. Do try
  to include too many items.
• Five minutes!

14
What if the last exercise involved multiple
thousands of content items

• It may have seemed easy to organize a few items
  in a few minutes, but what if you are dealing
  with thousands or even millions of content items!
  Not just products contact information, free
  online instructional material, pay-per-view
  material, link pages, streaming video, corporate
  information, investor relations, store locators,
  contests, archival material, legal information,
  return policies, security statements, business
  partnerships, etc?
• You need a structured way to organize the
  material.

15
The card sort

• Card sorts are a cheap and powerful tool for
  organizing complex information systems.
• All you need are a stack of note cards, time to
  write down each separate item on a separate card,
  and the participants to sort the cards.
• Have your participants sort all of the cards into
  categories that they find appropriate.

16
Expert vs. novice card sorts

• Expert card sorts involve using professionals
  such as usability experts, information architects
  and other designers or engineers to sort the
  cards. This is a good way to generate possible
  organization structures.
• Novice card sorts involve having actual users
  sort the cards. This is especially useful in
  testing whether or not an organization system
  would work.

17
Open vs. Closed card sorts

• Open card sorts allow the participants to sort
  the cards into categories they create. They may
  also change the labeling of the items. This is
  especially useful with an expert card sort while
  designing the organization system.
• Closed card sorts use predetermined categories.
  The participants simply sort the cards as they
  see fit. This is more useful in validating an
  organization system, as with a novice card sort.

18
Completing the card sort

• Conduct an exit interview to find out more about
  what the user thought about the labels and the
  organization.
• Pay attention to how long it takes the user to
  complete the tasks. If possible, record these
  times.
• Reliability across card sorts, how frequently
  were cards placed in the same categories?
• Use charts to show the results of your card
  sorts, visually portraying the results.

19
Labels

• Clear labels are very important. Representative
  labels are more easily discovered by search
  engines, and hence people can google searches
  for items on your website. Labels create the
  opportunity for more precise organization
  systems, which supports browsing. Also, your
  image as an organization is harmed by having poor
  labels.
• Stick to clear, standard labels. Dont try to use
  new, creative labels like Take the Megatour! or
  Go on a virtual ride!. Just say take the
  virtual tour.

20
Four types of labels

• Contextual links
• Headings
• Navigation Systems Choices
• Index Terms

21
Contextual Links

• There is a real danger of overloading the user
  with contextual links. Only use contextual links
  when you feel the user will value the content to
  which you are linking.
• Develop the contextual links systematically! Also
  provide context.
• There is a lot of potential for ambiguity when
  using contextual links. I was talking to Bryan
  Smith the other day what does Bryan Smith
  link to? A biography? A photograph? An e-mail
  address which opens the default e-mail client
  (which a great deal of people dont even use.

22
Labels as Headings

• Again, be systematic. To establish a hierarchy,
  use consistent font sizes, colors, numbering, and
  spacing.
• When using headings for a process (filing a
  taxes, applying for a loan), use numbers and
  verbs. That way, you establish sequence.

23
Navigation System Choices

• Consistency is the key. Users build their mental
  models through these labels. Think of these as
  street names if they changed at every block, it
  would be very hard to offer someone directions!
• You can offer scope notes, which are a brief
  description of where a navigation link takes the
  user. However, this costs valuable home page real
  estate, and well-designed labels may not require
  the use of scope notes.

24
Labels of Index Terms

• Well-labeled indexes expose your websites
  content to search engines, which is perhaps the
  most valuable promotion your website can have!
• Also, a well-formed index can foster the
  development of more consistent labeling.

25
Heuristics for proper labeling

• Be consistent! Not just in the wording, but in
  capitalization, spacing, font, etc.
• In each navigation system, either use actions
  (feed your pet) or nouns (pet food), but
  dont mix the two!
• Be comprehensive! An online toy store without
  Action Figures will undoubtedly confuse the
  user!
• Use roughly similar granularity. Dont mix local
  bookstores, Barnes Nobles, and German
  bookstores.
• Use search logs to see how your users think.

26
Checking the labeling

• Use a labeling table to find inconsistencies.
• In a table, write down the navigation label, the
  URL to which it leads, the title of the page to
  which it leads, and the header of the page to
  which it leads. Check for consistency!

27
Next week

• Next week, we will study the card sort in more
  depth. Then, we will conduct an actual card sort!
• Homework 3 will be due next week!