Web Content Development

1
Web Content Development

• Dr. Komlodi
• Class 12 Labeling systems

2
Labels

• What are labels?
• Representations for content chunks
• What are the functions of labels in web sites?
• To represent the larger chunks of information
  present in Web sites links, navigation systems
  items, headings within pages
• To communicate information efficiently trigger
  the right association in the users mind, e.g.
  About Us
• They also represent the organization (Home,
  Business, and Government) and navigation systems
  (Main, Search, Contact, Add to Cart, Billing
  info, and Confirm purchase) of the site
• Labels are used in navigational mode when the
  user is scanning pages very quickly to find a
  link to click on or a section to read
• Labels critique pp. 84-86

3
Varieties of Labels

• Textual Labels
• Contextual Links
• Headings
• Navigation System Choices
• Index Terms

• Iconic Labels

• The categories are not mutually exclusive

4
Labels as Contextual Links

• Nuevo León (Spanish for "New León", after
  the former kingdom in Spain) is a state located
  in northeastern Mexico. It borders the states of
  Tamaulipas to the north and east, Zacatecas and
  San Luis Potosí to the south, and Coahuila to the
  west. To the north, Nuevo León accounts for a 15
  kilometer (9 mi) stretch of the U.S.-Mexico
  border adjacent to the U.S. state of Texas. It
  was originally founded by Alberto del Canto,
  although frequent raids by Chichimecas, the
  natives of the north, prevented the establishment
  of almost any permanent settlements. Subsequent
  to the failure of del Canto to populate Nuevo
  León, Luis Carvajal y de la Cueva, at the head of
  Portuguese and Spanish settlers, requested
  permission from the Spanish King to attempt to
  repopulate the area. In the 19th century, Nuevo
  León was in a growth spurt and the bargain land
  deals attracted immigrants of German, Slavic,
  French, Italian, Jewish and Anglo-American origin
  .. According to Mexican demographers, a great
  deal of American Indian tribes from the United
  States (Texas) resettled in Nuevo León. The
  capital of Nuevo León is Monterrey, the third
  largest city in Mexico with over three million
  residents. Monterrey is a modern and affluent
  city, and Nuevo León has been completely
  industrialized. The state, as the rest of
  Northern Mexico, has benefited from globalization.

5
Labels as Contextual Links

• Are hypertext links within the body of the
  document and occur within the context of the
  surrounding text that link to
• another document (web page or file), or
• a different part of the same document.
• Meaning is defined in the context of the text
  where they appear
• Easy to create, but hard to make work well - not
  developed systematically but in an ad hoc manner
• Keep default link colors (blue vs. purple/red)
  reserve underlining for links - use bold and
  italics for emphasis instead of underline
• Add link titles in HTML when necessary e.g. ltA
  HREF"/Contact/" TITLECompany Address"gtContact
  Us lt/Agt- to help users predict where a link will
  lead before they click it

6
Labels as Contextual Links

• Dont use Click here instead provide a short
  summary of the information.
• Control link placement - not in the middle of a
  sentence
• Nielsens Designing Web Usability is informative
  and entertaining.
• For an informative and entertaining insight into
  Web usability design, see Nielsens Designing Web
  Usability.
• Two to four words only use the most important
  info-carrying terms

7
(No Transcript)
8
Labels as Headings

• Chunk dividers
• Describe the chunk of information that follows
• Show the relationships between chunks and
  establish a hierarchy (parent, child, sibling)
  within the page
• Indicate visual consistency within the text
  through numbering, font size, color, style, white
  space
• Must be obvious and convey sequence (numbers and
  verbs)
• Example JCMC online

9
Labels Within Navigation Systems

• Navigation labels Main, Search, Contact, About
• Typically a small number of options
• Use to build a sense of familiarity
• Require consistent application because they
  typically occur throughout the site (Main, Home,
  Main Page)
• Use scope notes (brief descriptions) to help
  users understand the label more clearly
• Left side, top, or bottom of the page usually
• Examples USPS

10
Labels as Index Terms

• Index Terms
• Often called keywords, tags, descriptive
  metadata, taxonomies, controlled vocabularies,
  and thesauri
• Can be used to describe any type of content
• Support precise searching or facilitate easy
  browsing
• Frequently visible to users, but can be hidden in
  the metadata tag of the HTML document
• Include subject index, author, title index
• Example IUPUI Site Index

11
Iconic Labels

• Most often used as navigation system labels
  because of efficient use of space
• Can be understood internationally
  interculturally e.g. airport bathroom
• But dont use alone
• Can be hard to interpret
• More limited language than text
• Cultural and user differences

12
(No Transcript)
13
Designing Labels

• Make labels very specific
• Narrow scope whenever possible, do not use
  category names
• Labels should be brief
• Do not use clever made-up words
• Start with keyword or information word
• Example, Bath and Body Works
• Old design Head to toe solutions
• New design
• Body
• Face
• Hair

14
Designing Labels

• Make clickable labels look clickable
• Example http//www.usability.gov/
• Develop consistent labeling systems, not labels -
  be consistent and predictable
• Labels should
• Speak the same language as the users while
  reflecting the site's content
• Educate the user about new concepts and provide
  explanations when necessary

15
Develop Consistency

• Style (Punctuation, Cases)
• Presentation (Font, Colors, White spaces,
  grouping)
• Syntax (Questions, verb-based, noun-based)
• Granularity (stay on one level)
• Comprehensiveness (users might expect certain
  labels in the context with others providing
  them enabled faster scanning)
• Audience (user concentrated, use terms the
  audience understands and expects)
• Good example http//www.usability.gov/

16
Sources of Labeling Systems

• Your own site
• Comparable and competitive sites
• Controlled vocabularies and thesauri accuracy
  consistency for specific audience
• Content analysis - titles, summaries, and
  abstracts
• Content authors make suggestions (might not
  understand users point of view)
• User advocates subject matter experts

17
Sources of Labeling Systems (II)

• Users
• Card sorts open/closed
• Open card sorts allow users to cluster content
  in categories they label
• Closed card sorts provide content and existing
  categories and let users sort
• Search engine logs
• What terms do users use when searching for
  information?
• Are there many unique terms or a number of
  commonly used terms?
• Are there groups of related/alternate search
  terms (including common misspellings)
• Tag Analysis (tags supplied by end users)

18
Tuning Tweaking

• List alphabetically and remove duplicates
• Review for consistency of usage, punctuation,
  letter case, etc.
• Fit/gap analysis for scope of site
• Be prepared to modify after launch - continually
  improve and work on the labeling system as users
  and content continue to change