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

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.SpanishLeón SpainMexicoTamaulipasZacatecasSan Luis PotosíCoahuilaU.S.-Mexico borderU.S. stateTexasAlberto del CantoChichimecas nativesLuis Carvajal y de la CuevaGermanSlavicFrenchItalianJewish Anglo-AmericanAmerican IndianTexasMonterrey

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. Contact Us - to help users predict where a link will lead before they click it

6. 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

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 onlineJCMC 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: USPSUSPS

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 IndexIUPUI 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 don’t use alone: –Can be hard to interpret –More limited language than text –Cultural and user differences

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/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/ 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 user’s 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