IT Solutions Blog

I just came back from an extended trip to Las Vegas, a fascinating city for a multitude of reasons. Not only is it the fastest-growing city in the US, it is also constantly transforming and reinventing itself, a Disneyland for grown-ups, gambling capital of the world, vacation spot for one and Sin City for others. It became evident to me that this city offers more than just pleasure, it teaches us how to attract, entertain and keep us happy despite the fact that we are loosing our money, which means they must be doing something right. Here are my 10 Webpage Design Lessons learned from a trip to Las Vegas… seriously:

1.) Don’t Listen to Users

“What happens in Vegas, stays in Vegas”, the motto of Las Vegas is a true #1 (who ever came up with that slogan is a genius in my eyes)! When asking your fiance/fiancee about his/her bachelor party … pardon … when designing an easy-to-use interface, pay attention to what users do, not what they say. Jacob Nielsen states that self-reported data is typically three steps removed from the truth:

• People bend the truth to be closer to what they think you want to hear or what’s socially acceptable.
• In telling you what they do, people are really telling you what they remember doing.
• In reporting what they do remember, people rationalize their behavior.

Lesson: Perform user tests as early as possible (e.g. design phase).

2.) Optimize your Top Task

Marriage is wonderful and so is the wedding day, at least mine was. Of course I blacked out the six months of preparation and swet that lead to that event. Now, Vegas wasn’t Vegas without finding a way to optimize the wedding experience: A 24-hour drive-thru wedding chapel called A Little White Chapel Tunnel of Love. “Ahem, yes, Combo 2 with two wedding rings, a bouquet and the Elvis… can you make it ‘Love me tender’ please?” – “120 Dollars at the first window please.”

Lesson: Identify and optimize your top task.

3.) Direct your Users

Once inside a Casino it is incredibly difficult to find your way out – I’m not certain but I would take any bet that exactly this is the purpose of a Casino designer. More than once I found myself in a maze of slot machines surrounded by their ringing noise and flashing lights. Whatever I was looking for (except ATM’s) seemed always to be at the other end of the Casino.
Design your page in a way that helps users find their way around but at the same time support your business model, e.g. Amazon has perfected the process of returning articles and submitting online or email support request but made it really difficult to find a phone support number which would seriously compromise their business income.

Lesson: Create a logical Information Architecture; add links to related items; cross-reference articles.

4.) Make it Easy to Learn

Casino games are mostly very easy to learn, don’t you agree? It can’t get any easier than inserting your bills, hitting the main button on the front panel or operating the lever to the side, wait until the reels have stopped spinning, compare the pattern of symbols on the reels with the possible winning combinations stated to the top of the machine and cash in the jackpot.
The actual difficult part is to get the people to play or use the machines. That’s when the Casino offers free lessons and sections with machines that pay well, everything to get you started.

Lesson: Help novice users to learn and avoid frustration by offering easy entry tasks.

5.) Provide relevant and attractive Content

Vegas has realized very early that sex-appeal and show makes a great combination, but it was limited to mostly the male population and that’s when the city started to transform itself into a family-friendly, theme-park like vacation destination with Castles, Musicals, Rollercoasters in and around the Casinos, 3D rides and more. Free drinks, cheap buffets, Day-Spa’s and a variety of other promotions added to the perfect experience. Attractive entertainment options could still be found at any corner in the form of bars, clubs and shows but lately I recognize a shift back to more go-go style entertainment in newly created bars in between the slot machines and tables. I guess the family-style hasn’t really worked out.

Lesson: Create attractive content that is relevant to your target audience; test and adjust if necessary.

6.) Make it Easy to Enter

Casinos do everything to get you into their building. Almost free (two dollar tip is ok) valet parking allows you to drop off your car quickly and one-directional moving walkways (obviously you need to walk back) shovel you inside, that’s where the music plays… Get the people where they want to be as quickly and easy as possible, show me the money!

Lesson: Avoid splash screens and flash intros; keep page sizes small.

7.) Avoid Windows and Clocks

There are two things you will never find in a Casino: windows and clocks. Right, nothing should distract your focus on the slot machines to the other wonderful Casinos outside and nobody wants to encourage you to make time-sensitive decisions (leaving the Casino early) by realizing how much time (and money) you have already spent during your visit.

Lesson: Avoid popup windows and time-sensitive triggers or forwarders.

8.) Make Sign-up Easy

Even though 100% of players think they can win only 1% will win. The only safe way to win in Las Vegas is to sign up for a Players Club. Handing over your name and address to the Casino will in many cases give you an immediate bonus of 5 or 10 bucks in free slot play, discount coupons for drinks and shows as well as little Thank you presents (wink-wink, Tropicana gives you a free T-Shirt and a deck of playing cards). Gambling itself is then rewarded through comps like more gifts, free buffets, free hotel rooms, free show tickets and more. I’m 11 cards richer now
Well, the sign-up process was easy enough, the only interaction with the clerk was handing over my drivers license and entering a PIN twice. Guess what, sure enough I always hit the Enter key after entering the PIN which wasn’t very well received by the system and the clerk. I don’t even know why I ended up apologizing. Why in the world can’t the system take care of that? Another day, another Casino, another Keypad, yes, another keypad, it was an actual computer keypad which is reverse to an ATM keypad and thus reverse to ALL the other keypads. Try your ATM PIN on your keyboard right now … exactly!

Lesson: Anticipate input errors and handle them gracefully; use common and widely accepted interfaces.

9.) Monitor User Behavior

There is no way one could walk into a Casino and cheat undetected. The famous ‘Eye in the Sky‘ is omni-present. 24/7 ‘Surround’-Surveillance captures every movement, every face and every deal. That doesn’t really worry me as long as they keep on bringing the free beer. It is clear that this kind of monitoring helps the Casinos to optimize their winnings not only by preventing cheats but also by detecting patterns in playing behavior and machine pay-out/malfunctions. I don’t see a threat in it as long as my face isn’t connected with the data collected.

Lesson: Use Server Traffic Log Analysis and Search Log Analysis to optimize your website.

10.) Make it Sexy

Sexy is probably the attribute I hear most often lately, it’s not ’slick’ or ‘beautiful’ anymore, it’s ’sexy’ now. That’s fine with me if only I knew what that means. Any ideas? Send them to me…
Anyway, what would be a blog about Vegas without mentioning sexy at least twice, huh?

Cheers and good luck!

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

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

• ISO 639.2 Registration Authority (2004, 10). Codes for the Representation of Names of Languages. http://www.loc.gov/standards/iso639-2/englangn.html
• Aries Arditi, PhD. Effective Color Contrast. http://www.lighthouse.org/accessibility/effective-color-contrast/

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:

• Nielsen, J. (1997, 10 01). How Users Read on the Web. Alertbox: http://www.useit.com/alertbox/9710a.html
• Quesenbery, W. (2008, 05). Usability doesn’t stop when you write the content. http://www.apogeehk.com/articles/Usability_doesnt_stop_when_you_write_the_content.html

Suggested reading:

Don’t Make Me Think

Steve Krug. New Riders Press 2005, Paperback, 216 pages, $21.94