Transcript Class12_labeling

Web Content Development
Dr. Komlodi
Class 12: Labeling systems
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 user’s 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
Varieties of Labels
• Textual Labels
• Iconic Labels
– Contextual Links
– Headings
– Navigation System
Choices
– Index Terms
The categories are not mutually exclusive
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.
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. <A
HREF="/Contact/" TITLE=“Company
Address">Contact Us </A>- to help users predict
where a link will lead before they click it
Labels as Contextual Links
• Don’t use “Click here”; instead: provide a short
summary of the information.
• Control link placement - not in the middle of a
sentence:
– Nielsen’s Designing Web Usability is informative and
entertaining.
– For an informative and entertaining insight into Web
usability design, see Nielsen’s Designing Web Usability.
Two to four words: only use the most important infocarrying terms
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
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
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
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 don’t use alone:
– Can be hard to interpret
– More limited language than text
– Cultural and user differences
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
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
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/
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 user’s point of view)
• User advocates & subject matter experts
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)
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