Michael Gaigg: Über UI/UX Design

2Apr0

Highlights of Week 13/2010

Posted by Michael Gaigg

23Oct0

For which generation are we designing for?

Posted by Michael Gaigg

I just came back from a webcast held by Human Factors International titled "Who Are We Designing For? The Generation Dilemma". It reminded me that even though most designers - me included - belong to the Generation X (or maybe especially because of that) we need to understand and recognize behavioral differences between generations when designing web sites.

Sidenote: This generalization must not prevent us from continuing to identify and define our target audience through personas or applying all the other UCD principles based on representative users. It is solely meant to raise awareness that we as designers need to be aware of these differences.

So, what are these generations?

"Baby Boomers"

  • 78 Mio (US) / 1.11 Billion (worldwide)
  • born between 1943-1960 (age 65-48)
  • think of technology as a tool
  • computer at work or at home (often not the latest model)
  • use computer mainly for email or work-related activities
  • use sites that help save time or serve relevant information

"Generation X"

  • 55 Mio (US) / 1 Billion (worldwide)
  • born between 1961-1981 (age 47-27)
  • are technology savvy and career-focused
  • keep their computer (desktop) in a separate room or office
  • start their day with practical activities like reading news or checking stocks
  • utilize computer for work but still keep balance of life and work
  • use sites for practical tasks like online banking, news, travel preparation

"Net Gen"

  • 80 Mio (US) / 2 Billion (worldwide)
  • born between 1982-2000 (age 26-8)
  • technology is inherent and part of life
  • have their computer (laptop) by the bed
  • start their day checking social activity online
  • look for and do things that make them laugh, might be silly
  • attention span is short, impatient
  • use social networking sites like Facebook

How does the knowledge about these generational differences affect our designs?

The same guidelines for accessibility and usability like consistency or efficiency hold true but it is to be emphasized that certain guidelines must be enforced stronger for some generations while others can be loosened up. Here is a rough overview:

Baby Boomers:

  • Simple look and feel
  • Safe to use, more error-prone than usual
  • Navigation in predictable places
  • Hierarchies of information
  • Step by step instructions
  • Provide options to enlarge font sizes
  • Things that don't move, flicker, or play automatically

Generation X:

  • Focus on quality content
  • Provide 'do-it-yourself' tasks
  • Give control and allow customization

Net Gen:

  • Content has to be attractive, innovative, can be quirky
  • Design can be highly interactive
  • Audio and video is not only accepted, it's expected
  • Entertainment is important
  • Avoid pictures of elderly people (yes!)

How can a design satisfy all generations?

The answer is (as always): it cannot. Designs have to be focused on and implemented towards your key audience. A university web site needs to satisfy its customers, the students. The press, teachers and parents are without doubt important as well, but without satisfied students the university doesn't even have to think about getting the press to visit the site.

There are ways to generalize your site's content though:

  • Identify the user (login) and present a customized UI
  • Identify the content (landing page) and predict its likely customer
  • Identify user preferences by explicitely asking
21Oct0

Best Practices for accessible Content

Posted by Michael Gaigg

People rarely read Web pages, they scan the page! As a result, Web pages have to follow Design Guidelines for Content that enable them to quickly identify headings, titles, links and other important elements to orient themselves. What else has to be done to be Section 508 compliant?

Basic Rules

  • Don’t rely on color alone
  • Identify the language used throughout the document and identify changes
  • Use correct markup to emphasize important content
  • Be clear and precise in the choice of wording and language

Best Practices

Level 1

Level 1 Checkpoints - Section 508 Compliancy Standards
Checkpoint Description W3C 508 Example
Color Ensure that all information conveyed with color is also available without color 2.1 (c) Ensure that information is available through other style effects (e.g., a font effect), through context (e.g,. comprehensive text links) or through mark-up (e.g., the title attribute).
Language Clearly identify changes in the natural language of a document's text and any text equivalents 4.1 n/a And with a certain <SPAN lang="fr">je ne sais quoi</SPAN>,
she entered both the room, and his life, forever. <Q>My name
is Natasha,</Q> she said. <Q lang="it">Piacere,</Q>
he replied in impeccable Italian, locking the door.
Language Use the clearest and simplest language appropriate for a site's content 14.1 n/a n/a

Level 2

Level 2 Checkpoints - Section 508 Compliancy Standards
Checkpoint Description W3C 508 Example
Blinking Avoid causing content to blink 7.2 n/a n/a
Movement Avoid movement in pages 7.3 n/a i.e., hide/show content or change presentation (movement and colors).

Level 3

Level 3 Checkpoints - Section 508 Compliancy Standards
Checkpoint Description W3C 508 Example
Text Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen 2.2 (c) For more information check the online paper about "Effective Color Contrast" at lighthouse.org (http://www.lighthouse.org/accessibility/effective-color-contrast/).
Abbreviations Specify the expansion of each abbreviation in a document where it first occurs 4.2 n/a <ABBR title="social security number">SS#</ABBR>

or ASCII art:<ABBR title="smiley in ASCII art">:-)</ABBR>
Acronyms Specify the expansion of each acronym in a document where it first occurs 4.2 n/a Welcome to the <ACRONYM title="World Wide Web">WWW</ACRONYM>
Language Identify the primary natural language of a document 4.3 n/a <HTML lang="en">

Templates

<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<ABBR title="social security number">SS#</ABBR>

<ACRONYM title="Geographical Information System">GIS</ACRONYM>

References

20Oct4

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: