IT Solutions Blog

We, the people, have been around for quite some years now. Computers, software, applications and the web not so much. Therefore it is clear that applications have to adjust to the people and not the other way round.

Many design principles have developed throughout the decades, but the main difference of user-centered design to others is that

UCD tries to optimize the user interface around how people can, want, or need to work, rather than forcing the users to change how they work to accommodate the system or function.

Purpose of UCD

UCD answers questions about users and their tasks and goals, then use the findings to make decisions about development and design.

UCD seeks to answer the following questions:

• Who are the users of the application?
• What are the users’ main tasks and goals?
• What are the users’ experience levels with the application?
• What functions do the users need from the application?
• What information might the users need, and in what form do they need it?
• How do users think the application should work?

Benefits & Return of Investment

• Increased usability
  • Higher degree of customer satisfaction
  • Continued business
  • Higher revenues
• Project management optimization
  • Focus on important functionality early
  • Unforeseen user requirements
• Reduced costs
  • Training costs
  • Help-Desk calls and service costs

UCD Principles

• Focus on users’ needs, tasks and goals
• Spend time on initial research and requirements
  • Identify your target audience and observe them (accomplishing their tasks)
  • Let users define product requirements
• Emphasis on iterative design process
• Evaluate system on real target users

Summary

Nobody could state it simpler than Susan Dray: “If the user can’t use it, it doesn’t work”.

Overview

Last week the W3C announced the publishing of the Web Content Accessibility Guidelines (WCAG) 2.0 as a final Web Standard “W3C Recommendation”. This is good news for many reasons:

• Guidelines are more specific, e.g. specifying contrast ratio or time-based actions in seconds.
• Success Criteria are written in a technology neutral fashion.
• Success Criteria are written as testable statements.
• Past killer arguments like “Javascript is forbidden” are now included as a technique to enhance accessiblity.
• Gathering ‘implementation experience’ is now part of the W3C Process.
• Guidelines include requirements related to informing users of data entry errors.

But what I personally like the best is the revamped structure called layers of guidance:

Structure

The WCAG 2.0 define a logical hierarchy of accessibility guidelines called layers of guidance. All of these layers work together to provide guidance on how to make content more accessible.

Principles

The foundation is built on four principles that are essential for anyone to access and use Web content, i.e. every Web content must be:

1. Perceivable
2. Operable
3. Understandable
4. Robust

These principles are the four pillars of Web accessibility and describe at a high level what can be done to assist users with varying needs to successfully access your content.

Guidelines

The 12 guidelines are basic goals that authors of Web content should work toward in order to create accessible content. None of them are testable and are only meant as a framework of overall objectives. The guidelines are:

• 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
• 1.2 Provide alternatives for time-based media.
• 1.3 Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
• 1.4 Make it easier for users to see and hear content including separating foreground from background.
• 2.1 Make all functionality available from a keyboard.
• 2.2 Provide users enough time to read and use content.
• 2.3 Do not design content in a way that is known to cause seizures.
• 2.4 Provide ways to help users navigate, find content, and determine where they are.
• 3.1 Make text content readable and understandable.
• 3.2 Make Web pages appear and operate in predictable ways.
• 3.3 Help users avoid and correct mistakes.
• 4.1 Maximize compatibility with current and future user agents, including assistive technologies.

Success Criteria

Now, the success criteria is where the meat is. For each Guideline, testable success criteria are provided. Every Web content or series of Web content (complete web page or series of connected pages) can be tested and evaluated against these criteria and further assigned a true/false (equals pass or fail) value.
These success criteria are further divided into three levels of conformance, meaning satisfying all the requirements of a given standard, guideline or specification:

• Level A (lowest; minimum level of conformance)
• Level AA
• Level AAA (highest)

The notion of conformance is so important that I will discuss it in a separate blog entry.

Sufficient and Advisory Techniques

Up until now all the principles, guidelines, and success criteria are written in a technology neutral fashion. That’s great but what now? The Working Group has identified and published examples for HTML implementations that should serve as examples and tutorials and are kept in the living document called Techniques for WCAG 2.0. This document explains a variety of techniques on how to implement the given guideline for each success criteria. The list is not complete and will be expanded as new techniques are discovered.

The techniques fall into two categories:

• Sufficient techniques: considered to be sufficient to meet a success criteria.
• Advisory techniques: enhance accessibility, but did not qualify as sufficient techniques.

Most Success Criteria have multiple sufficient techniques listed. Any of the listed sufficient techniques can be used to meet the Success Criterion. Also there may be other techniques which are not documented by the working group that could also meet the Success Criterion. This is especially true for content that is not HTML.

Resume & Criticism

I’m really excited about the WCAG 2.0, their clear structure and promising, almost marketing-like wording. I also like the amount of effort taken to document examples, techniques and common failures.
What I miss is the programmer perspective that outlines each element with its associated success criteria and code samples, e.g. how can I make tables accessible, what about links, captcha, maps, etc.? I think this work is up to us and I will continue to tackle this issue by grouping, summarizing and compiling elements so I can publish them on this blog.

What are your opinions on WCAG 2.0?

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!

A palette is a complete set of colors one should adhere to when designing a website. This includes a color scheme (typically 2, 3 or 4 colors) plus some additional colors to work with. The goal along the design process is to stick to these colors without the need of inventing and introducing new ones.

Here are some tools and knowledge on how to design and create an effective and appealing color palette for you website in just minutes:

Know your primary color

Many times you will be constraint by your clients’ need for a primary color, be it because of the logo, corporate identity (CI) or corporate design (CD) guidelines. Consider yourself lucky!
For the other times when you have to come up with a color for yourself, think of what best represents the company’s target audience – young, fashion, pop, serious, technocratic, playful. All that will determine your ultimate choice. The best description I’ve found so far of what different colors actually stand for is in Jason Beaird’s book ‘The Principles of Beautiful Web Design’. Even though I’m sure you find tons of other sources on the web be aware of easy color-meaning mappings like black=death – in web design black is also a color that conveys power, think of tuxedos, limosines, Batman etc.

Create a Color Scheme

I’ve found the Red-Yellow-Blue color wheel the closest to traditional color theory and that’s what I am using and writing about now. I acknowledge the CMYK (Cyan-Magenta-Yellow-Black) color wheel but found it less useful for my purposes (feel free to convince me otherwise )

I highly recommend the WellStyled Color Scheme Generator 2 (http://www.wellstyled.com/tools/colorscheme2/index-en.html). It allows you to use your primary color and your knowledge about your target audience to play around and find the most suitable of the five classic color schemes:

• monochromatic (your primary color in different tints or shades)
• analogous (your primary color plus two colors next to it on the wheel)
• complementary (=contrast; your primary color plus the opposite color on the wheel)
• triadic (three colors equally separated on the wheel)
• tetradic (basically two complementary schemes combined)

The Color Scheme Generator will calculate the correct RGB values in hexadecimal notation for you and even offer variations (pastel, contrast, pale) to further experiment. Once done, simply print or note the colors and values computed and you are ready to roll.

Ensure good Contrast

Contrast is not only a good design principle but also an Accessibility requirement for many websites (W3C, Section 508 in the US). So before you make your final choice on the color scheme ensure that your main color provides sufficient contrast to background/foreground colors.
Test your colors using Colour Contrast Check (http://www.snook.ca/technical/colour_contrast/colour.html) making sure the brightness difference is greater 124 and the color difference is not less than 500!

Finalize your Color Palette

To finalize your color palette all you need to determine is which other tints and shades of the existing (as determined above) color scheme you want to use – black and white included.
As a basic rule try not to ‘overload’ your page with the amount of colors used, but certainly a number of 5 or 6 seems to be about right (remember to count black and white).

Done, wasn’t that easy?

Here are some interesting links I recommend together with an excellent book:

• Open Source Web Design (http://www.oswd.org/) for design inspirations
• Daily color scheme Yahoo! widget from firewheel (http://www.firewheeldesign.com/widgets/)

Suggested reading:

The Principles of Beautiful Web Design

Jason Beaird. SitePoint 2007, Paperback, 180 pages, $22.36