Michael Gaigg: Über UI/UX Design

14Nov0

Design Guidelines: ‘About Us’ Page

Posted by Michael Gaigg

IT Solutions About Us page

Example of an 'About Us' page from IT Solutions

There are many reasons for improving the usability of your 'About Us' page. Unfortunately many companies, especially bigger and well-known companies, tend to underestimate the value that comes from a well-designed 'About Us' page or simply assume that there is no need to explain themselves to their users.

The 'About Us' page helps to establish and re-enforce Trust and Credibility. Users of different backgrounds may need to know who is behind the content or service. Should I invest in this company? Apply for a job? Write an article about their service? Order a product?

The best news over all is: a simple link on your homepage is cheap and easy and the benefits of a clean and well-structured 'About Us' page outweigh many times the effort of creating it.

Design Guidelines for 'About Us' pages

  1. Provide clearly visible link on homepage
  2. Label the link either “About ” or “About Us”
  3. Present content in ‘inverted pyramid’ layers:
    • Tagline: Few words or brief sentence summarizing what you do
    • Summary: One to two paragraphs about goals and main accomplishments
    • Fact sheet: Section that outlines key points and other essential facts
    • Details: Subsidiary pages providing indebt information about processes, company structure, philosophy etc.
  4. Disclose address

References

20Oct0

Design Guidelines: Content

Posted by Michael Gaigg

When writing content for the web it is essential to speak the language of your users. Become a word detective, use google trends. Words are the basic elements of links, get them precisely right to provide strong information scent. Identify trends, don't invent them. Look at the evolution of language.

Get to the essence of the message! Stop 'waving' on your webpage ('Welcome to the webpage of our company. We are proud to blah-blah...').

Always remember that the user is in charge, the user is impatient, nasty, demanding, in a hurry and in control to spend its time somewhere else (according to Jakob Nielsen: 'Users spend most of their time on other sites'). Online marketing is about giving attention (versus offline marketing is about getting attention).

Design Guidelines for Content

  1. Make information easy to find with clear headings and meaningful sub-headings (not ‘clever’ ones).
  2. Break up the information into manageable pieces.
  3. Put the pieces in a logical order for your readers.
  4. Keep your sentences short and employ one idea per paragraph.
  5. Use the ‘inverted pyramid’ style: conclusion (context) first, results later.
  6. Talk to your readers. Use "you".
  7. Write in the active voice (most of the time).
  8. Put the action in the verb, not in the nouns.
  9. Use your readers' words.
  10. Use half the word count (or less) than conventional writing.
  11. Use bulleted lists where appropriate – for a list of items and for parallel "if, then" sentences.
  12. Employ scannable text like highlighted keywords.

Best Practices

See my blog entry for Best Practices for accessible Content

References:

Suggested reading:
15Oct0

Design Guidelines: Links

Posted by Michael Gaigg

"If links were married they'd get divorced all the time! That's because they can't keep their promise." (Gerry McGovern)

What Gerry means is that what links say they will do and what they actually do are total opposites. How many times have I believed, clicked and followed a link that promised me to 'Download this or that' just to find another page describing this piece of software. There I had to muddle through even more links just to find another 'Download version' link that yet again takes me to another page acknowledging the terms and conditions. The story could go on and on.

Remember: Good links are like magnets - they drive users to them.

With that in mind, here are the

Design Guidelines for Links

  1. Color and underline link text (exceptions include lists of links like a navigation menu)
  2. Reserve underlining for links (do not underline text that is not a link)
  3. Use different colors for visited and unvisited links (e.g. shades of blue)
  4. Avoid using color for text unless it is a link and never use blue for non-text links (even if your links are not blue)
  5. Avoid changing the font style on mouse over
  6. Avoid tiny text for links
  7. Use appropriate spacing between links or use a clear separator
  8. Use links primarily for navigation between pages
  9. Link text must be describe the target as short and precise (clear call to action) as possible AND hold this promise!

Best Practices

See my blog entry for Best Practices for accessible Content

References:

 

Suggested reading:
7Oct0

What is Accessibility?

Posted by Michael Gaigg

The purpose of web pages is to interactively display information. The Hypertext Markup Language was designed to encode meaning rather than appearance. Therefore

Accessibility is the extent of access to information on a webpage through user agents (e.g. browsers, screen readers,…) which translate HTML into hypertext structures (links, headers, tables, forms,…) in order to give the users a surplus value.

“As long as a page is coded for meaning, it is possible for alternative browsers to present that meaning in ways that are optimized for the abilities of individual users and thus facilitate the use of the Web by disabled users. Those disabilities are:

  • Visual Disabilities
  • Auditory Disabilities
  • Motor Disabilities
  • Cognitive Disabilities” [NIELSEN96]

Since Web pages are highly visual and interactive the most affected groups as far as accessibility is concerned are the visual disabled, i.e. blind users or users with other visual disabilities like color blindness and users with motor disabilities using alternative input devices or sometimes even just the keyboard instead of the mouse.

Everybody benefits!

In the same way a sidewalk curb is necessary for wheelchair accessibility it also benefits parents with strollers, children with rollerblades and elderly persons trying to cross the street. The same is true for web pages. Designing for accessiblity will not only benefit users with disabilities but will also increase your:

  • Market Share Benefits
    • SEO (search engine optimization)
    • Repurpose
    • Literacy
    • Bandwidth
  • Technical Efficiency Benefits
    • Maintenance
    • Server Bandwidth