Title: Writing for the Web - Web Design and Usability
1Web Design and Usability
Chapter 8
Writing for the Web
By Group 8
2Group membership
Writing for the Web
Name Reg No Student No Email
Sharon Nakigudde 2018/HD05/2116U 1800739052 nakiguddesharon_at_gmail.com
Lutaaya Shafiq 2018/HD05/2094U 1800738426 lutayashafiqholmes_at_gmail.com
Monica Alwelo 2018/HD05/2165U 1800737028 monicaalwelo_at_gmail.com
3Writing for the Web
- Writing to communicate
- How People Read
- The Writing Process
- What to Write About
- Writing Guidelines
- How Writing for the Web differs from Writing for
Print - Text Formatting
- Getting Your Message Across
4Rosebell Kagumire s blog Journalist and Author
www.rosebellkagumire.com
- Points to note
- Fonts, Headings
- Text Formatting
- Lay out
- Communication
- The Message
Read more https//rosebellkagumire.com/2018/04/16
/do-the-science-but-it-must-be-communicated-dr-flo
rence-mutonyi-dujanga-on-science-and-lessons-from-
stephen-hawking/
5New Vision
www.newvision.co.ug
- Points to note
- Fonts, Headings
- Text Formatting
- Lay out
- Communication
- The Message
Read more https//www.newvision.co.ug/new_vision
/news/1495655/international-women-day-empowering-g
irls-boys
6Nile Post
- Points to note
- Fonts, Headings
- Text Formatting
- Lay out
- Communication
- The Message
Read more https//nilepost.co.ug/2019/03/06/so-wh
at-is-the-real-cause-of-the-uganda-rwanda-row/
7The White House
www.whitehouse.gov
- Points to note
- Fonts, Headings
- Text Formatting
- Lay out
- Communication
- The Message
Read more https//www.whitehouse.gov/articles/201
8-banner-year-u-s-economy/
8Writing to communicate
Usability Readability and Legibility Recap from
Chap 1 Usability design Goals ( Easy to use,
Easy to learn, Easy to remember) Readability How
much sense the words and sentences make to
readers, how clear the vocabulary and grammar
are. Legibility The visual quality of the
text, whether readers can see it well and make
out the letters and words. Tip Use large,
easy to read fonts, and of high
contrasts Examples ( Rosebell Kagumires blog,
WhiteHouse.gov, NilePost.co.ug)
- For any web site to be usable, the text should
be constructed around three primary goals - 1. Draw the reader in,
- 2. Help the reader orient, and
- 3. Convey information.
- To do this, you need to make your content
interesting, enticing, and easy to read. Offer
the reader a pleasant reading experience. Help
readers decide where they are and where to go
next. Help them determine if what theyre seeing
is relevant, and lead them to places that are
relevant to them. Dont waste words. Give readers
useful information at the earliest opportunity.
Read more https//writingcooperative.com/write-t
o-learn-not-just-to-communicate-b881fe51acba?gi19
20b2be09b1
9The Writing Process
- Objectives of the writing process
3. Collect information Acquire source materials
and interview members of the organization
familiar with the content areas of each part of
the website 4. Write Write the text, organizing
and elaborating on the information you've
collected. Coordinate with graphic designs to
develop a cohesive page layout and the graphics
needed to reinforce the text 5. Review, test,
and write Check the text for accuracy with
subject matter experts, proofread, test users,
have it approved by management, make adjustments
for viewing online, and rewrite as necessary. 6.
Code the text into HTML Convert the text to HTML
and make adjustments to coordinate with the rest
of the page.
- To deliver complete and accurate information
- To present the information in a useful format for
the reader - To achieve a consistent and natural style without
typos, or other typing errors - To coordinate among multiple writers drawing from
a variety of information sources. - Steps of the Writing Process
- To achieve the objectives above, we follow the
below steps. - Planning the project Establish the schedule and
determine who is responsible for each component
of the writing. - Define a style guide Establish the writing
style, writing layout, necessary content
elements, and file formats.
10HOW PEOPLE READ
LITERACY Consider the literacy level of your
target audience. Are you targeting an
international audience? Many of your readers may
be nonnative speakers who will appreciate direct,
concrete statements and common terminology. Will
children be browsing your web site? If so, keep
the vocabulary and complexity appropriate to
their grade level. Keep in mind that, while
reading is fairly automatic for literate adults,
this skill develops over several years. If you
have a large header saying Click here to buy,
adults will read it without effort and without
even specifically intending to. Young readers are
even more inclined to infer their required next
step from the layout of the page and the most
salient elementsthe big fonts and bright colors.
They almost solely read text thats isolated and
brief and text that occurs along their critical
path
- Most key principles of writing are derived from
an understanding of how people read. This ensures
that readers are able to see the text, understand
it, remember it, and apply it to their own
situation. - What is the Task?
- People read differently depending on what theyre
trying to accomplish. When sports fans get their
latest copy of Sports Illustrated in the mail,
they may read it cover to cover. However, when
someone goes to the library to find out who won
the 1927 World Series, they search and scan to
get to the information as quickly as possible,
and theyre very unlikely to stop and read an
advertisement or a special-interest story.
11Level of Processing
- Readers memory for what theyve read is
increased through more active engagement with the
text. Glancing over the surface structure of a
page will leave the least memory trace. Actively
reading for meaning will increase retention of a
passage. Actively visualizing as you read and
thinking through implications and relationships
with other things you know will further improve
memory for the passage. -
A way to even further engage the reader and
increase memory for your message is to bring the
reader into the passage by personalizing it. If
you have profiles of your users, then use their
names, refer to their interests and appeal to
their concerns. If the users can be encouraged to
interact with the content, then they will be even
more likely to retain what they read. Get them to
choose preferences, choose options, and determine
the outcome of a passage.
12Reading on a Screen
- Text on a screen usually has less contrast than
on paper, and the angle of viewing is less
flexible, meaning that readers have more
difficulty adjusting reading conditions to their
specific needs, and thus may have greater
eyestrain and neck strain in reading. Another
contributing factor to poor legibility is screen
resolution. In particular, words in italics can
be particularly hard to read on the screen at
small sizes because of inadequate screen
resolution. As a result, increasing the font size
may be necessary to improve reading conditions,
and text should be displayed at a maximum
contrast between foreground and background. In
addition, avoid putting any text over a patterned
or textured backgroundthis creates visual noise
that makes the text harder to interpret.
Source www.google.com
13WHAT TO WRITE ABOUT
- Whats the first thing a visitor to your web site
needs to do? Whats the second thing? What must
the readers absolutely do before leaving the
page Contact you? Make a purchase? Bookmark the
site? In writing, focus on the readers tasks
first. More than anything else, include a call to
action, an opportunity for the user to take the
most important step relating to your business
goals. - Marketing
- When youre talking about your products and
services, be factual. Provide information, not
hyperbole. Its okay for your information to have
character, style, and a point of view, but make
your products relevant to the readerstate the
benefits and uses. Make the site vital. - Provide Value
- Give the reader a reason to come to your site.
Your site specializes in something. That means
youre a specialist at something. Share your
knowledge. Dont just throw the reader a bone
make sure it has some meat on it. Convince them
to tell their friends that you have something on
your site that they cant get elsewhere.
Quality of the Information Users prefer
information with legitimacy, information that is
honest, accurate, up to date, and based on
reliable, expert sources. Information should not
only live up to these standards but needs to
convey a sense of authority as well. Whenever
possible, provide precise, detailed information
and provide sources and dates. This is
particularly appropriate in subject areas such as
health and politics, where conflicting and
misleading information is very common. Keeping
Current One of the most common problems is
keeping the web site up to date. When calendars
are not updated regularly, links pages have
broken links, or pages have Under Construction
signs for indefinite periods, the readers trust
is undermined.
14Types of Pages
- The Splash Page
- A splash page is a visually rich and exciting
page that visitors see when they first enter a
web site. Visitors see the splash page, get
totally thrilled by the site, and then click
through to the actual home page. Splash pages are
usually intended to show off what a company can
do to excite their customers with flashy
animations. Instead, what can happen is that
visitors wait a long time for the splash page to
download, cant figure out what the company is
about, have difficulty figuring out what to do
next, and abandon the site before entering it. A
splash page adds one more step for users to get
to the content they need, and thus one more
opportunity for them to give up before completing
their task. Dont do it!
About Us While information about a company, its
history, mission, and values is easy for a
company to put together, About Us pages tend to
get very few hits. Still, an About Us page or
section can provide useful information. Readers
know what information to expect there, and the
few who have an interest will visit. Others will
just ignore it.
Source https//ww.nwsc.co.ug/index.php/about-us
Source https//www.coca-cola.com/
15Types of PagesCont
- The Home Page
- While some sites abandon the idea of a home page,
its a convenient metaphor that users understand.
They can always return to the home page to
reorient themselves. When a visitor first enters
a web site, the home page has a lot of
responsibilities to fulfill. It needs to download
quickly, communicate the nature of the site,
establish the corporate image, communicate what
information and services are available on the
site, keep the users interested so they will
explore further, and help route the users to
their appropriate subpages.
Source https//cis.mak.ac.ug/
16Types of PagesCont
- Products and Services
- The Products and Services page is often the most
important piece of information for marketing and
e-commerce sites, so focus on making it easy to
access, extremely clear, and detailed.
Contact Us Put the most important contact
information at the very top of the Contact page,
and if other email addresses or phone numbers are
listed, be clear which one should be contacted
for what type of question. Rather than relying on
email, feedback forms are often more convenient.
They dont depend on users having their email
configured correctly, and feedback forms can
include specific questions to help more clearly
identify the users needs. Prepare a plan for
responding to any email you get. If youre not
ready to provide timely responses to questions,
dont encourage people to contact you.
Source https//www.kcca.go.ug/contact-us
Source https//www.yahoo.com/everything/
17Types of PagesCont
- Privacy Policy
- While privacy policies are not needed for many
sites, they are important whenever information is
being collected about the user. While most users
wont read the policy, the presence of one can
increase trust and may protect you from customer
complaints. Think carefully about how you need to
use the user information, and make sure you
actually conform to the policy you specify. Dont
simply promise users that you wont spam them.
Thats subjective. Instead, tell them exactly how
you will and wont use their information.
Copyright Policy You should consult with legal
counsel for specific ways to protect your
information. In most cases, identifying each web
page with a copyright notice (e.g., 2011-2019
Kampala Capital City Authority) should suffice.
However, those who want to show caution in
specifying how their content should and should
not be used may find the need for a more detailed
page of copyright information.
Source https//www.kcca.go.
ug/contact-us
Source www.google.com
18Types of PagesCont
- Help
- In user testing, users will frequently try out a
Help or Frequently Asked Questions page when they
have trouble finding information. So, while your
ideal site will be extraordinarily easy to use, a
more realistic approach is to use a Help page to
help introduce people to the site, answer
frequent questions, and guide people to the
relevant sections of the site. Write the help
text from a task-based point of view each
section of help should specifically address a
particular task and goal of the user and give
step by step instructions, rather than simply
describing the pieces of the web site. Provide
your contact information for a final level of
customer support, so users can ask questions
directly by phone or email.
Source https//www.yahoo.com/everythin
g/
19Types of PagesCont
- Site Map
- A site map is a list of pages of a web site
accessible to users. It can be either a document
in any form used as a planning tool for web
design, or a web page that lists the pages on a
web site, typically organized in hierarchical
fashion. - For very small sites, a site map shouldnt be
necessary. When a site map is needed, avoid
unusually large graphics.
Source https//www.mtn.co.ug/en/pages/sitema
p.aspx
20Types of PagesCont
- Error Pages
- Easy to overlook, well-designed error pages are
essential to helping users resolve their most
difficult problems. An extremely common error is
an incorrect URL, producing a 404 Not Found
message. Such a message isnt helpful to the
user. A good error page needs to have a clear
identification of the problem (dont use obscure
error codes) and a clear set of options for
resolving the problem. That is, if the error
represents a missing page, provide tips on
finding the correct page and access to a site map
or search engine. As well as a page style
consistent with the rest of the web site,
providing branding, and helping the user
understand the source of the error. Be sure to
test that your error pages display correctly on
all browsers.
21ELEMENTS OF A PAGE
- For most sites, the elements of a page are
relatively straightforward, but for complex
interactions its helpful to create a page
schematic. A page schematic is an abstract page
layout that specifies each content element on the
page, such as titles, headers, navigation
buttons, body text, footers, sidebars, metatags,
and advertisements.
Navigation The navigation area need not be
simply an arbitrary list of links. Rather, you
should order and group the links, and provide
appropriate emphasis. On some pages, such as the
home page, a brief description may be associated
with each link. The navigation area may also be
used for bylines or announcements, but keep in
mind that users wont be expecting other
information within the navigation.
Page Titles Users need to understand where they
are, in a web site. In fact, given that they may
end up on a subpage directly from a search engine
or outside link, the page needs to identify the
web site itself as well as the particular page
within that site. A web site name and logo are
common forms of site identification. The page
title should be specified within the lttitlegt tag
and will appear in the windows title bar. Body
Text In your main body text, plan the sequence of
ideas carefully. Break up the text into
meaningful chunks. Lead the readers eyes with
headers, bullet points, and appropriate emphasis.
Use topic sentences, and proceed from most to
least important. Your goal is not to captivate
every reader, but to draw in readers who need
your information, and let readers know that they
can leave if you arent going to provide the
information they need.
22ELEMENTS OF A PAGECont
The Footer A footer typically contains text
links, copyright information, privacy policy and
usage policy links, and credits. Text links help
provide redundancy when the primary navigation
uses graphic links, and they are especially
useful at the end of long pages to help guide the
reader to the next page.
- Last Updated Date
- Some people recommend placing a last-updated date
in the footer. This information may be valuable
to some users who can learn whether the
information is current. An older date may
indicate that the site is not maintained
regularly. Similarly, a recent date suggests
regular attention to the site. With so many pages
being created and many of them not maintained at
all, this can be a significant data point. On the
other hand, a common problem is that people
maintaining the site forget to update the date.
Maintaining the date becomes a maintenance
problem in itself, and an incorrect date is far
worse than no date at all. Some automated tools
will update this date every time the page is
modifiedan excellent solution for those who have
these tools available
Source
https//www.ura.go.ug/
23ELEMENTS OF A PAGECont
- Corporate Identity
- Before writing for your website, obtain the
corporate guidelines for trademark use.
Trademarks and service marks protect the use of
names, symbols, and phrases. As with all
intellectual property, the degree to which a
trademark can be enforced depends on a variety of
factors such as whether the trademark has been
registered, the degree to which it is used
consistently, and the degree to which the company
is diligent in protecting its trademarks. Be sure
to determine which product names and slogans are
trademarked and how they should be written and
used.
24ELEMENTS OF A PAGECont
- Advertising for Somebody ElseLinks, Credits, and
Awards - Should you make references to other web sites by
providing link pages, by putting up an award that
someone granted your site, or by listing credits
for vendors or partners? As with all decisions,
it boils down to whether these help your users
accomplish their goals and are consistent with
your business goals. A links page can be useful
but should provide focused, relevant information.
Check all links to make sure they are stable and
credible..
Source https//www.yahoo.com/
25Writing Style
For maintaining consistency in your writing,
writing style should be established in your style
guide, including the choice of voice, person,
tone, and formality. Voice - Use the active
voice because it is more direct and easier to
understand for example We offer the following
services. (Never refer to your company as it
or they or company) Person - Use
first-person sentences because they are generally
the best. (First person includes I and we second
person includes you and you all third person
includes he, she, it, and they.) - Most
corporate or organizational web sites prefer the
first-person plural, we. Most individual sites
should be written in the first-person singular,
I. The royal we (using we to refer to yourself
as an individual) should be avoided. Refer to the
reader as you. For example We want to provide
you with the best service possible. NOT XYZ
Corp. provides customers with the best service
possible.
- Tone
- - Use direct simple sentences
- - Divide the text into small, easy-to-read chunks
- - Provide factual and content-rich information.
- - Put the main themes at the top of every page.
Put the main themes in the first sentence of each
paragraph. - - Present lists as bulleted items, not as prose
- - Use clear section titles, and liberally include
headings where they help users to quickly find
information. - - Avoid ambiguity. Avoid trying to draw people in
with incomplete teasers. Give them the
information they need as soon as possible and as
succinctly as possible
26Grammar, spelling, capitalization and
punctuationThe basics of grammar, spelling,
capitalization, and punctuation right should be
in mind when writing.
- Standards
- Decide what standards guide to use, whether its
the Chicago Manual of Style (1993), Strunk and
Whites Elements of Style (Strunk 1979), or Wired
Style (Hale 1996). The Columbia Guide to Online
Style is useful for getting online references
right. - Determine standard spellings and capitalization.
Will you use American or British English
spelling? Will Internet be capitalized? Is web
site or home page one or two words? As words
come into common use, they tend to lose their
capitalization, and two-word combinations become
hyphenated and then close up into single words.
Therefore, cutting-edge usage usually drops the
hyphen on common word pairs.
- Consistency
- - Be consistent in what you write. For instance,
when you have a list of three or more items,
should you place a comma before the final
conjunction (i.e., should it be A, B, and C or
A, B and C)? - Punctuation
- Decide if youll use traditional punctuation,
where commas and periods occur inside the quotes
(a standard that helped make the presses more
reliable in the ancient days of movable type), or
if youll use logical punctuation, where
punctuation comes outside the quote unless its
intended to be part of the quoted text. Pick a
convention and stick with it. - Sentence Fragments
- What could possibly be more important than having
perfect grammar? Keep it Simple and Clear, feel
free to break the rules responsibly when it
improves the readability of the text. Dont feel
that you have to follow strict grammar rules as
long as your sentences are clear and your
grammatical variations are inconspicuous.
27Writing Guidelines
- The following are detailed usage guidelines that
address some of the most common problems with
online text. - i) Watch for Ambiguity
- The reader interacts with the text as much as
possible. - Sentences are short, direct, concrete, and
active. - Text is in lay language, avoiding jargon, insider
references, and obscure humor. - ii) Provide Emphasis
- Emphasis is provided with appropriate headings,
lead-ins, and pull quotes. - Opening sentences and paragraphs summarize the
content - Text is short, simple, and concise.
- Text is specific and objective
- iii) Be Direct and Concise
- Keep your language simple and avoid wordiness.
- Answer readers questions as soon as possible,
using appropriate topic sentences. - Avoid using teasers that open questions in the
readers mind without answering them until much
later.
- iv) Be Specific and Objective
- Instead of saying Were the best, say why Our
prices are the lowest, We rated number one in
surveys of customer satisfaction, We have the
lowest return rate in the industry, or If our
moms can love us, so can you. This is not only
more useful to the reader, but it lends authority
by being factually based. Avoid labeling things
generically. Instead of saying Our Services,
its usually better to say what those services
are Legal Services, Shipping Capabilities,
Consulting, or Auto Repair Services - v) Break Up the Text
- Use short paragraphs that divide information into
useful chunks. Sometimes only one or two
sentences are needed in any given chunk. - vi) Use Frequent Headings
- Headings match the readers goals
- Readers know where they are and what each page is
about - vii) Use Bulleted Lists
- Text is broken into useful chunks and bulleted
lists.
28Teaser Which of these 3 websites, is more clear
to understand?
29How Writing for the Web differs from Writing for
Print
- Structure
- Research shows that 79 of web users scan rather
than read word for word. Writing for the web is
generally designed to be scanned with the eyes
instead of read deeply. (Stinger, 2014) - Web users often dont have time to read through a
whole article, and would rather have the most
important points laid out from the beginning so
that they know whether or not they will want to
keep reading. - Length
- Web content is often shorter than printed
content. - Headlines
- Headlines are generally longer because they must
be able to catch a readers attention and convey
the point of a story without the help of photos,
subheadings or larger fonts. - Links
- Web content has links
- Structure
- Print readers tend to follow a more structured
reading pattern, starting with the introduction
and moving on to the main body and conclusion of
an article - Eye tracking studies have also shown that when
reading print, a persons eyes move from left to
right. But on the web, peoples eyes start at the
centre of the page and move to the right. - Print readers are generally prepared to spend
more time reading a single article - Length
- Print can be a little more in-depth, which helps
with long news stories - Headlines
- Headlines tend to be shorter and are often
accompanied by a photo and/or subheading that
provides context. - Links
- Print content doesnt have links
30Text Formatting
- i. Font size
- Its usually best to keep the majority of text in
the default font size (ltfont size3gt, which is
usually around a 12- point font), and for small
amounts of text, to bump it up or down a size as
appropriate (ltfont size2gt or ltfont size4gt).
Some designers like to make most text large
(ltfont size4gt, which is usually around 14
points)a good idea to improve the legibility of
the text for most readers. Others like to use
smaller text (ltfont size2gt, which is usually
around 10 points), which allows for more text on
the screen and improves the visual texture of the
screen, aesthetically speaking. - ii. Type Effects
- Text styles can be varied to provide emphasis and
add visual interest to the page. - Dont rely heavily on spacing and alignment of
the text, and leave plenty of space for display
variations. - Avoid using boldface or all caps for long pieces
of text. They should only be used to provide
emphasis - Never use underlining except for links.
The Unpredictability of Typefaces and Font Sizes
The typeface is legible and the font size is
sufficient. - Italics are avoided except at large
sizes. - Boldface and all caps are only used for
short pieces of text. (Boldface is preferred over
all caps.) - Text has sufficient contrast with
the background color and is not placed over a
conflicting pattern.
Source www. Securebanking.com/home
31iii. Semantic Vs. Format tags
- The advantages of using format tags, by contrast
are - The designer can control the appearance of the
text and can therefore choose a meaningful,
usable format. - Using format tags improves the predictability of
how the page will appear on different systems. - iv. Alignment
- - Text blocks need to follow the same principles
of good alignment as graphics. - - Text should align appropriately with the
graphics on the page. Left-aligned text is the
default and usually the most attractive
alignment. - - Centered text should be restricted to only
small text blocks, such as titles and footers,
and shouldnt be used for body text. - - Large amounts of centered text slow down
reading considerably.
- HTML can specify the formatting of tags either in
terms of their semantic content (what the meaning
of the text is) or in terms of their format (how
they will appear on the page). - For example The semantic tag ltstronggt indicates
that the words need to be emphasized, somehow or
another, and typical browsers will display such
words in boldface. The format tag ltbgt indicates
that the words need to be in boldface, regardless
of whether that indicates emphasis in a specific
context. - The advantages of using semantic tags are
- Users with very different browsers can still get
the proper interpretation of the text, regardless
of how it is displayed. For instance, users with
screen readers can hear ltstronggt words emphasized
in the speech synthesis, whereas the speech
synthesizer may have no good way to distinguish
words in bold or italics. - Various automated tools can interpret pages
constructed with semantic tags. For example when
an automated tool sees an lth1gt tag, it knows that
it is seeing a primary header, and that the
following text represents a new section. However,
if it sees headers displayed as ltfont size4
color"red"gt, it has no idea what role the text
plays within the document and cant infer
anything about the document structure.
32Grouping Text Chunks
v. Multiple Columns - Multiple columns of text
can make a more attractive layout and create
lines of text that are shorter and easier to
read. This is why narrow columns are standard in
magazines and newspapers. - Online, the primary
problem with multiple columns is not being able
to follow the flow. When the user is interested
in the material in both columns, or when one
column has text flowing into the next, the user
is forced into scrolling up and down several
times to follow the flow of the text or is forced
to read both columns simultaneously before
scrolling and remembering the content of each
while scrolling. Therefore, you should either
stick to one column, so the user can scroll
linearly and follow one train of thought, or use
multiple columns only when your columns contain
unrelated information
- Because of the nonlinearity of the online reading
experience, it is important to follow some text
grouping principles. - Keep blocks of text together that are related.
- Use line breaks to separate paragraphs.
- Group headings with the text that they label.
- Make sure the heading is closer to the paragraph
it identifies than it is to other paragraphs. - Dont put a horizontal rule underneath a heading
to make it stand out because the horizontal rule
makes it look like it doesnt belong with the
text below. - If one blank line between sections doesnt
clearly delineate the sections, use two blank
lines.
33Getting Your Message Across
- Tips.
- Text needs to be relevant and easy to read
- Tell people what they want to know
- Tell people what they need to know
- Get every detail Right
- Note
- Readers wont passively sit and absorb everything
you throw at them.
34The End
Thank you