Writing for the Web

Practical Approaches to User Centred Web Design

Websites that are created to be user-friendly for everyone.

 

Goals of UX are:

  • Present in a clear and concise way
  •  Avoid ambiguity
  • Place important items in appropriate areas
  • Create content that works on all devices and browsers
  • Create content that is appropriate for all audiences

Impacts:

  • the quality of learning; people should be learning about subject matter, not how to use the website
  • self-motivation; frustration can affect learning outcomes

A quality experience means:

  • Less confusion and questions
  • And removes barriers that prevent access to information by people with disabilities

If a website makes their life difficult, they won’t use it.

  • Make it easy for users to accomplish their tasks
  • People can quickly perform tasks
  • Remember where they last left off
  • Pleasant to use your site
  • Text easier and faster to scan
  • Killian, Crawford. (1999). Writing for the Web
  • Krug, Steve. (2014). Don’t Make Me Think, Revisited – A Common Sense Approach to Web and Mobile Usability
  • Nielsen, Jakob. (1999). Designing Web Usability: The Practice of Simplicity
  • Nielsen, Jakob. NN/g Nielsen Norman GroupEvidence-Based User Experience Research, Training and Consulting
  • Norman, Donald A. (2013). The Design of Everyday Things
  • Lynda.com (online course) – Writing for the Web
  • Strunk, William and White E. B. (1918) The Elements of Style

#1 – Don’t Make Me Think

This is the most important tip, which makes it number 1 on our list. People should just “get” how to use your website. Fear, doubt, and uncertainty creeps in when they have to think about how to use your website. If they get frustrated with your website, they'll leave...

read more

#2 – Use Conventions

Imagine yourself driving and coming across a green stop sign. Do you stop or keep going? Whatever you chose to do, you probably had to think about it. And that usually spells fear, doubt, and uncertainty. Don't try to reinvent the wheel. Most websites that...

read more

#3 – Structure Content for Scanning

Most people don't read web content word for word. That's why it's important to structure your content for scanning. Headings, bold fonts, descriptive links, and white space are a few of the things to consider when designing and writing your...

read more

#4 – Use Narrow Content Blocks

Long lines of text tend to make it difficult for eyes to track back to the beginning of the next line. To make it easier for people to read or scan the page, keep content blocks narrow by limiting the characters to approximately 65 per line. ...

read more

#5 – Use Heading Tags h1, h2, etc.

Headings help people scan pages for information. On the web, up to 6 different headers can be used: h1, h2, h3, h4, h5, h6. Heading 1 (h1) tags are the largest and are most often used as the page title. The rest are used as subtitles to help divide content...

read more

#6 – Use White Space to Group Content

Use white space to help improve visual hierarchy of your website. Grouping content together can help draw attention to the important areas of the site and help people find what they're looking for.

read more

#7 – Break Content into Short Paragraphs

Break long paragraphs into short 1-2 sentence paragraphs to keep ideas simple and easier to read. Emails are usually written this way for clarity and so can your website content. Scanners often read the top line of each paragraph to gauge whether or not...

read more

#8 – Define Acronyms

Even when it might seem obvious, define your acronyms at least once to help prevent miscommunication. Example: Continuing Studies and Executive Education (CSEE) What-you-see-is-what-you-get (WYSIWYG)  ...

read more

#9 – Avoid Jargon

When you're an expert, things appear to be much simpler than they seem. To help people understand your content, use words that a non-expert can understand. Not only does this make it easier to read and scan, people will spend less time trying to understand...

read more

#10 – Omit Needless Words

When writing for the web, edit your content to omit needless words. These words usually add fluff to your content, make important content less prominent, and increase page scrolling. Examples of needless words can be: whether or not in actual fact due to...

read more

#11 – Use Descriptive Links

How often do you see links like these on a website?: http://www.capilanou.ca click here https://www.google.ca/search?q=capilano+university+logo&source=lnms&tbm=isch&sa=X&ved=0ahUKEwif_tW7wubTAhVI9mMKHZ2eDtEQ_AUIBigB&biw=1920&bih=941#imgrc=3gc95mdmvA45iM...

read more

#12 – Use New Tabs for Files and External Sites

Keep people where they left off. If you're linking to an external website or to a document (.pdf, .docx, etc.), be sure to open the link on a new tab. This will prevent people from leaving your site and they can go back to where they last left off by...

read more

#14 – Use Larger Font Size

The goal is to get people to read and absorb your content. Larger fonts help you achieve that goal. Don't forget that it'll make things easier on mobile devices. Fonts will be easier to read and links will be bigger and easier to tap. The recommended...

read more

#15 – Do Not Underline Text

Have you ever clicked on link only to discover that it's just underlined text? It's confusing and someone might actually try to figure out why it's not working. When you're trying to emphasize text, use bold or italic instead.

read more

#16 – Use Bold Fonts Sparingly

When too many things are calling for attention, nothing seems to be important. Having a full paragraph of bolded text is the most common mistake. Only bold sparingly to make sure only the important words are emphasized. Example: Capilano University has...

read more

#17 – Avoid too Many Colours

Colours can make your website look much more lively, but at what point does it become too many colours? Not only can it become distracting and hard to read, but it may cause issues for people with visual impairments and colour blindness. Instead of using...

read more

#18– Optimize your Images

Whenever possible, plan the actual size of the image you need for your website. Over-sized images are very common on the web and are known to cause a number of issues including slow page loading speeds. They're also responsible for eating up mobile data...

read more

#19– Add Alt Text to your Images

Use alternative (alt) text for your images. Alt text is essential for people with accessibility screen readers, which helps them understand the content on the page. If your image ends up breaking (broken link), the alt text takes it's place....

read more

#20– Display File Sizes

Be conscious of people accessing and looking at files on their mobile devices. When you're linking to files on your website, indicate how large the file is so they can decide if they want download it using their data plans.  

read more

#21–Serving Different File Types

When linking to .docx, .pdf, .xlsx, etc., make sure to add these extensions to links so that people know what to expect. Avoid generic 'click here' links. Instead use the title of your file as the link and work it into a sentence. Example: Download and...

read more

#22– Clean Formatting

If you’re copying and pasting text from Word, use the WYSIWYG Paste from Word, Paste as Plain Text or Sweeper tool option. This helps clean up the appearance of the text and removes unnecessary code from the back end.

read more

#23– Two Font Styles Max

Avoid using more than 2 fonts for your website. Too many fonts can make people wonder why the fonts are different and what the emphasis is intending. One serif and sans-serif font is recommended. Don't forget that you can also italicize or bold your fonts,...

read more

#24– Avoid Centering Text

Avoid centering text whenever possible for symmetry. Left-aligned text is recommended as eyes are naturally drawn to the left edge of the text. When text is centred, the left edge becomes ragged and inconsistent, making the eyes do much more work to...

read more

#27 – Usability Testing

All feedback about your site is an opportunity for improvement Be curious about how people use your website Ask for feedback from classmates, instructors, and...

read more