FIT3084: Textual / Iconic Labelling and Writing
for the WWW
In the previous lecture:
- Provide context for your site visitors
- Reinforce a site's information hierarchy with its global, local and ad hoc navigation systems
In this lecture:
- Writing concisely
- The differences between reading on a screen and paper
- Spacing text to provide a clear hierarchy of information
- Providing clear and consistent textual and iconic labels for elements of a website
References
- Lynch,
P.J. Horton, S., Web Style Guide: Basic Design Principles for Creating
Web Sites,
Yale University Press, 1999, Chapter 6.
- Nielsen, J., Designing Web Usability: The Practice of
Simplicity,
New Riders Publishing, 2000, pp98-129. (Also see Nielsen's
website for
further information)
My
smmr hols wr CWOT. B4, we usd 2 go 2 NY 2C my bro, his GF & thr
3 :-@ kds FTF. ILNY, its gr8.
Bt my Ps wr so {:-/
BC o 9/11 tht they dcdd 2 stay in SCO & spnd
2wks up N.
Up N, WUCIWUG -- 0. I ws vvv brd in MON. 0 bt baas & ^^^^^.
AAR8, my Ps wr :-) -- they sd ICBW, & tht they wr ha-p 4 the pc&qt...IDTS!!
I wntd 2 go hm ASAP, 2C my M8s again.
2day, I cam bk 2 skool. I feel v O:-) BC I hv dn all my hm wrk. Now its BAU ...
|
Translation: My
summer holidays were a complete waste of time. Before, we used to
go
to New
York to see my brother, his girlfriend and their three screaming
kids face to face. I love New York, it's great.
But
my parents were so worried because of the of 9/11
that they decided we would stay in Scotland
and spend two weeks up north. Up north, what you see is what you get
- nothing. I was extremely bored in
the middle of nowhere. Nothing but sheep and mountains.
At any rate, my parents
were happy. They said that it could be worse, and that
they were happy with the peace and quiet. I don't think so! I wanted to go
home as soon as possible, to see my mates again.
Today I came back to school. I feel very saintly because I have done all
my homework. Now it's business as usual...
|
Apparently from an essay written by a Scottish
school girl
(posted
by Matthew Langham,
March 3, 2003)
From: Global.Emails@adm.monash.edu.au
Subject: New cleaning structure
Date: 29 June 2005 10:10:49 AM
To: allclaytonstaff-l@monash.edu.au
Reply-To: Arthur.Brent@adm.monash.edu.au
A message from deputy vice-chancellor and vice president (Resources) Alison Crook
------------------------------------------------------------------------
New cleaning structure
The management structure of cleaning services at the Clayton campus have
changed. From Monday 4 July, the campus will be cleaned by a mix of
internal staff and external contractors. The cleaning service will still
be managed by Arthur Brent who can be contacted on extension 54073.
Facilities and Services, along with Student and Staff Services and the
Liquor, Hospitality and Miscellaneous Workers Union have been working
with cleaning staff to discuss ongoing service provision and how it may
be managed into the future. A number of voluntary separation packages
were accepted by cleaning staff. From an end-user perspective,
initially, there should be little change in the service. Moving forward
Facilities and Services will be developing a more user focussed and
performance-driven cleaning regime across the campus. |
Translation: A message from senior administration at Monash University: Arrangements for cleaning staff will change on July 4th. The person to contact regarding the cleaning services remains Arthur Brent on extension 54073. Some cleaning staff have been asked to leave and have accepted the offer. Cleaning services should remain unaltered. |
Three important points
- Be concise
- Expect vistors to scan text
- Split up text into a clear hierarchy
1. Be concise
- Computer screens have less dots per inch than printed pages (limited resolution)
- People find reading on screens less comfortable than reading on paper
- People are often (not always) looking for information on the WWW, not "a
good read"
- Write so that people can find what they are looking
for comfortably & quickly
2. Expect visitors to scan text
- People do not read lengthy,
dense web pages
- Visitors may print out a page with detailed information to read and
annotate in hardcopy
- Most computer screens are narrow and short (limited size)
- Avoid forcing users to scroll (this may be disorienting)
So...
- Write less (maybe 50% less) than you would on a paper document
of the same topic
- Break up lengthy texts into pages (use the principles of information
architecture)
What do you think of these examples?
|
|
|
- Build a main page for each topic with a summary of the information
provided on subpages
What do you think of these examples?
|
|
|
- Avoid relying on "in-page"
hyperlinks (i.e. <#A> anchors jumping to locations within
the current page)
- People may expect a link to take them to a different page (this
is a common conceptual model)
- Provide clear titles, subtitles & sub-subtitles (see below on labelling)
- These provide jumping-in points for people who scan
What do you think of these examples?
|
|
|
- Highlight keywords
- These provide jumping-in points for people who scan
- These may be used to understand what a paragraph is about, without
reading it fully
- Distinguish these visually from hyperlinks
3. Split up text into a clear hierarchy
- Use short paragraphs
- Use lists
- Use white space to break up text
- These allow the reader to keep their place on a
page
- These allow the reader to identify the key ideas on a page
|
A sample MUJI page (20 August 2004) |
- Use "pull-quotes"
- Use topic sentences in your paragraphs
- Use an "inverted" style - state your conclusions up-front
- These techniques give prominance to interesting and relevant ideas.
|
 |
"Inverted" style
From: The
Guardian website, Bunting, M.,
Morality as Polyfilla,
August 16, 2004 |
A "pull quote"
From: Mountain
Zone website, Inverarity, P.,
Chasing Scarves and Jumping Crevasses,
Discovering Alpinism on the
Massif du Mont Blanc, August 11, 2004 |
The following is adapted
from the Mountain
Safety Research website to illustrate the benefits
of white space (paragraph breaks and lists) and highlighting keywords...
| As
it appears (they use a typeface with more leading)... |
Convertible:
Customers are craving simplicity and
versatility. MSR's convertible shelters fit the bill with true year-round
performance
for almost any
condition. The Fusion tents feature large zip-out panels
that tuck neatly away along with a user-friendly venting system to keep
you comfortable in the heat of summer or when battened down for a winter
storm. The Fusion 2 and 3 are ideal for lightweight, all year shelter.
The SuperFusion adds extra room for gear, a large hooped vestibule, a
vestibule window and even more zip out panels for the ultimate luxury
shelter. The entire series features continuous pole sleeves, removable
gear lofts, multiple guy points for severe weather, and the highest waterproof
floor coatings. MSR convertible tents can go anywhere, any time.
|
or
if space allows, maybe... |
For simplicity and versatility, MSR's convertible shelters fit
the bill with true year-round performance for almost any condition.
The Fusion tents feature large zip-out panels that
tuck neatly away along with a user-friendly venting system to keep
you comfortable in the heat of summer or when battened down for a winter
storm.
The series features:
- continuous pole sleeves
- removable gear lofts
- multiple guy points for severe weather
- the highest waterproof floor coatings
The Fusion 2 and 3 are ideal for lightweight,
all year shelter.
The SuperFusion adds extra room for
gear, a large hooped vestibule, a vestibule window and
even more zip out panels for the ultimate luxury
shelter.
MSR convertible tents can go
anywhere, any time. |
"Process performance management (pre- and
post-improvement project) will yield the fastest and potentially greatest
ROIs."
Dan Vogel, META Group, Oct. 2003 |
SDLC improvement is today's method of choice for improving
IT effectiveness, yet for many organizations adoption is the key challenge.
Black Diamond Software's SDLC Capability Improvement Program is designed to
manage SDLC adoption, while introducing industry-standard processes and
best practices. It is comprised of three stages with the following packaged
service offerings:
assess
- Asset Assessment
- SDLC Assessment
improve
- IBM Rational Unified Process® (RUP®) Pilot
- IBM Rational Unified Process® (RUP®) Deployment
- Offshore AD Process and Policy Management
maintain
- Workshops
- Inquiry Services
- Continuing Education
- Newsletter/Knowledgebase
- Continuing Education/Process Update
- Process Compliance Monitoring
|
Creating Textual and Iconic Labels
 |
Labels are the means by which humans identify everything, everywhere, in speech, in thought, in art and culture... all the time!
Clear labels are essential for websurfers and developers alike. |
What A Labelling System Says About The Information Provider
Cool New Stuff |
Latest additions |
Order Processing & Despatch |
Sales & Delivery |
Project A41-277.3 |
Cancer Treatment Project |
What are the different messages a user receives from the pairs above?
Using Textual Labels
Commonly-used/conventional labels assist navigation.
Main, Main Page, Home, Home Page |
Search, Find, Browse, Search/Browse, Site Map, Contents, Table of Contents,
Index |
Contact, Contact Us, Contact Webmaster, Feedback, Comments, Support ,
Help |
Help, FAQ, Frequently Asked Questions |
News, What's New |
About, About Us, Company Information, Further Information |
Labels sometimes benefit from a simple explanation
the first time they appear.
Search / Browse: |
Search the site by keyword or browse with our site map |
Contact: |
E-mail our technical staff with your problems or call our customer hotline |
About: |
Information about our company: its history, policies and the people who
make it tick |
From then on (as always)... be consistent (across the entire site, not
just within a page) and the following will be readily understood...
Search/Browse | Contact | About
The Web Is Indexed Using Textual Labels
Search engines examine some of a web page's content including its meta tags, title and body paragraphs to determine how it will
be classified.
An example for a page containing information on computer graphics and
animation...
<meta name="keywords" content="computer
graphics, animation, digital cinema" />
<title> Computer Graphics & Computer Animation
Book Reviews </title>
<body> <p>This document is about computer graphics and animation</p></body>
Textual Link Labels May Be Incorporated Into Prose
- Ensure that it is clear from the link label where the link will take you.
Born in 1894, Aldous Huxley belonged to a family of great talent: he was the grandson of the famous Thomas
Henry Huxley; the son of Leonard Huxley,
the editor of the Cornhill Magazine;
and the brother of Sir Julian Huxley. |
Above you can infer that the link will lead to further information on the
noun to which it is linked.
The text flows naturally, despite the links. (Some would argue however that
such hyperlinking is not beneficial to the flow of information).
What about these links?
Born in 1894, Aldous Huxley belonged to a family of great talent. More
information about his family is provided here.
He was the grandson of the famous Thomas Henry Huxley (Here
is a photo); the son of Leonard Huxley (Link to his homepage), the editor of the Cornhill Magazine*; and the brother
of Sir Julian Huxley.
*online issue |
- A label's effectiveness as a navigation tool can be improved if it is used
both to navigate to and label some information (for example, as a heading)
Using Iconic Labels
Icon, an image used to represent an object, action, property or concept.
Things To Consider When Choosing Between Icons and Text
- The choice will depend on the application!
- Well designed icons can be recognized faster than text
- Icons may take less screen space than text
- Icons can be language independent
|
- Text / words have well known meanings
- Text / words have strong connotations
- There are around half a million well defined words in English.
- There are only a few well defined icons
|
| ...you may not have to choose! Sometimes you can use them together. |
Design icons for...
- Recognition - speed & accuracy with which an icon's meaning is deduced
- Remembering - ease of recall of an icon's meaning once learned
- Discrimination - ease of distinguishing between icons
Sources For Iconic Labels
- Objects used for performing an operation
- Before and after effects of an operation
|
A B C D 1 2 3 4 ! @ # $ %
|
|
- Arbitrary designs - these icons may be difficult to learn but once learned may still aid remembering
and discrimination
Extra reading (available in the Monash Library)...
Watson, D., "Death sentence : the decay of public language", Random House
Australia, 2003
This lecture's key point(s):
- Write and label concisely, clearly and consistently for your target audience
- Consider the differences between reading on a screen and paper
- Provide space around your text and a clear hierarchy of information
- Labels may be textual or iconic (or a combination)
Courseware | Lecture notes
©Copyright
Alan Dorin 2009
