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

– Contextual Links– Headings– Navigation System

Choices– Index Terms

• Iconic Labels

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 info-carrying 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