Michael Gaigg: Über UI/UX Design

9Nov1

User-Centered Design (UCD) Methods: Comparison and Overview

Posted by Michael Gaigg

This is the first in a series of blogs describing User-centered Design Methods. My goal is to summarize my experience, insights and findings across multiple literature and compile them into easy and quick to digest pieces for you to consume. I want to encourage you to comment your own experiences and give me feedback on why your company applies certain methods differently or not at all or something else altogether.

I personally don't like the term Usability too much, it's an empty buzz word. It means SOMETHING to everybody but isn't scientific enough to be taken serious. It's often interpreted wrongly and purely misunderstood by most. It's kinda like Psychology, we know it is important to understand fundamental human behavior, their problems and remedies, but I wouldn't pay a dime to go to a Psychologist. But who knows, just as Psychology got its scientific relevance and acknowledgment - partly maybe through the 'invention' of the IQ - hopefully Usability rises up to similar levels (Jeff Sauro offers interesting metrics via SUM (Single Usability Metric).

That's why I like the term User-centered Design. It works wonders with Project Managers and the-like, probably because Design is such an important term in their daily work. And when asked about Usability testing I can conveniently point out that this is only one tool of many in my UCD toolbox. But the really important sales trick is to know which UCD method is best used at what time in the project management cycle.

The following chart compares the most common user-centered design methods, outlines their cost and shows when to use them:

Overview of user-centered design methods

Comparison of User-centerd Design (UCD) Methods
Method Cost Output Sample Size When to Use
Competitive Studies Medium Stat. & Non-Stat. 5 Requirements
Focus Groups High Non-Statistical 6-9 Requirements
Field Studies High Non-Statistical 2-3 Requirements
Heuristic Evaluation Low Statistical 2-3 Design
Paper Prototyping Medium Stat. & Non-Stat. 5 Design
Card Sorting High Statistical 15-20 Design
Participatory Design Low Non-Statistical n/a Design
User Testing Medium Stat. & Non-Stat. 5 Design & Evaluation
Surveys Low Statistical 20+ Requirements & Evaluation
Interviews High Non-Statistical 3-5 Requirements & Evaluation
Server Traffic Log Analysis Low Statistical n/a Evaluation
Search Log Analysis Low Statistical n/a Evaluation

Not long ago, after having completed a full project management cycle (requirements, design, implementation and evaluation) the PM proudly announced to perform a Focus Group with his stakeholders. Showing the ready application, he thought, would surely impress them and lead to valuable feedback for the next milestone. This impulse isn't uncommon but has to be fought before it becomes reality. Does he really want to produce MORE and EXPENSIVE requirements? Because that's the output of Focus Groups. Wouldn't he be better off running 2 iterations of User Testing to reveal usability issues or a Survey to receive input from outside the development environment?

Recommendations

  • Requirements:
    • Competitive Studies
    • Interviews
    • Field Studies
  • Design:
    • Heuristic Evaluation
    • Paper Prototyping
    • User Testing
  • Evaluation:
    • Surveys
    • Server Traffic Log Analysis
    • Search Log Analysis
    • User Testing
  • The Usability effort is NOT proportional to the size of the project. Bigger projects spend less percentage on UCD with same effort. Regardless, as a rule of thumb assign 10% of the projects budget for UCD.
  • Faster iterations of prototype design require less testers

References

6Nov0

Design Guidelines: Pagination

Posted by Michael Gaigg

One thing I hear from visual designers over and over again: 'Those Usability guys destroy our creative possibilities'. While I understand the desire to live in complete design heaven I want to strongly emphasize the need for a usable design heaven. Every thing in this world has a certain affordance, i.e. it affords to do something which we need to design for. A chair for example affords to be seated on, designers are therefore constrained to design chairs in a way that supports the human body while sitting. Now, does that restrict creativity in chair design? Without doubt NO, numerous examples show that thousands of different chairs exist but all have one common goal: to support the task on hand - which is seating a person!

Chair Design

Variety of chairs showing the existence of a usable design heaven

Designing page elements like pagination is not different. Navigation options must be visible and the pagination must be intuitive. Creative solutions can still be user-friendly as shown in smashingmagazine's Pagination Gallery.

But now, here are the

Design Guidelines for Pagination

  1. Provide large clickable areas
  2. Don’t use underlines
  3. Identify the current page and don't hyperlink it
  4. Space out page links
  5. Provide Previous and Next links
  6. Use First and Last links (where applicable)
  7. Only use Last links when they make sense
  8. Put First and Last links on the outside
  9. Provide a reasonable number of pagination links
  10. Eclipse missing or endless pages

Code Sample / Template

End results (from http://digg.com/):
Example Pagination

<div class="pagination">
<span class="nextprev">&laquo; Previous</span>
<span class="current">1</span>
<a title="Go to page 2" href="/page2" mce_href="/page2">2</a>
<a title="Go to page 3" href="/page3" mce_href="/page3">3</a>
<a title="Go to page 4" href="/page4" mce_href="/page4">4</a>
<a title="Go to page 5" href="/page5" mce_href="/page5">5</a>
<a title="Go to page 6" href="/page6" mce_href="/page6">6</a>
<a title="Go to page 7" href="/page7" mce_href="/page7">7</a>
<a title="Go to page 8" href="/page8" mce_href="/page8">8</a>
<a title="Go to page 9" href="/page9" mce_href="/page9">9</a>
<a title="Go to page 10" href="/page10" mce_href="/page10">10</a>
<span>…</span>
<a title="Go to page 252" href="/page252" mce_href="/page252">252</a>
<a title="Go to page 253" href="/page253" mce_href="/page253">253</a>
<a title="Go to Next Page" class="nextprev" href="/page2" mce_href="/page2">Next &raquo;</a>
</div> 


.pagination {
margin: 5px 0;
line-height: 2em;
}
.pagination span {
}
.pagination a:hover {
background-color: #7F7FB2;
color: #FFF;
}
.pagination a, .pagination a:visited, .pagination a:active {
border: 1px solid #CCC;
background-color: #F2F2F7;
font-weight: normal;
padding: 2px 5px;
text-align: center;
color: #000;
text-decoration: none;
}
.pagination .selected {
background-color: #7F7FB2;
color: #FFF;
font-weight: bold;
}

References

Tagged as: , , , , , , , , , , , , , No Comments
1Nov4

Understand Web Content Accessibility Guidelines & Section 508

Posted by Michael Gaigg

So you know what Accessibility is and how it improves your ROI and why everybody benefits. Now what exactly is Section 508 and how does it correlate with W3C's Web Content Accessibility Guidelines (WCAG 1.0)? And most important, how can you create an accessible.htm that complies with these standards?

Overview: WCAG & Section 508

Section 508 and Web Content Accessibility Guidelines

The main institutions involved (as shown in the illustration above) are:

  • GSA (U.S. General Services Administration) represented by the IT Accessibility and Workforce (ITAW) who is the governments principal advocate and coordinator for Section 508 implementation. Other agencies and organizations may offer similar information, but ITAW is recognized as the governmentwide policy resource for Section 508.
  • World Wide Web Consortium (W3C) represented by the Web Accessibility Initiative (WAI) who developed the Web Content Accessibility Guidelines 1.0 that was approved in May 1999 and is currently the stable and referenceable version.
  • Users that visit websites. In the illustration I mention Government websites as the institution with the biggest need, that is because the Accessibility Guidelines are mandatory for governmental implementations.

Before I continue to explain how the WCAG relate to the Section 508 Standards it is important to get a grasp of what the respective guidelines propose and which checkpoints are included.

Checkpoints: Section 508 Standards

The purpose of Section 508 Standards is explained by Authority 29 U.S.C. 794d: “The purpose of this part is to implement section 508 of the Rehabilitation Act of 1973, as amended (29 U.S.C. 794d). Section 508 requires that when Federal agencies develop, procure, maintain, or use electronic and information technology, Federal employees with disabilities have access to and use of information and data that is comparable to the access and use by Federal employees who are not individuals with disabilities, unless an undue burden would be imposed on the agency. Section 508 also requires that individuals with disabilities, who are members of the public seeking information or services from a Federal agency, have access to and use of information and data that is comparable to that provided to the public who are not individuals with disabilities, unless an undue burden would be imposed on the agency.”

Section 508 Standards [SECTION508-STANDARDS]
Checkpoint Description 508
Non-text elements A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). (a)
Multimedia presentation Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. (b)
Color Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. (c)
Style Sheets Documents shall be organized so they are readable without requiring an associated style sheet. (d)
Server-side image maps Redundant text links shall be provided for each active region of a server-side image map. (e)
Client-side image maps Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. (f)
Data tables Row and column headers shall be identified for data tables. (g)
Markup & tables Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. (h)
Frames Frames shall be titled with text that facilitates frame identification and navigation. (i)
Flickering Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. (j)
Text-only page A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. (k)
Scripting languages When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. (l)
Applets, plug-ins or other applications When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l). (m)
Electronic forms When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. (n)
Navigation links A method shall be provided that permits users to skip repetitive navigation links. (o)
Timed response When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. (p)

Checkpoints: Web Content Accessibility Guidelines

The guidelines as described by the W3C explain how to make Web content accessible to people with disabilities. “The guidelines are intended for all Web content developers (page authors and site designers) and for developers of authoring tools. The primary goal of these guidelines is to promote accessibility. However, following them will also make Web content more available to all users, whatever user agent they are using (e.g., desktop browser, voice browser, mobile phone, automobile-based personal computer, etc.) or constraints they may be operating under (e.g., noisy surroundings, under- or over-illuminated rooms, in a hands-free environment, etc.). Following these guidelines will also help people find information on the Web more quickly. These guidelines do not discourage content developers from using images, video, etc., but rather explain how to make multimedia content more accessible to a wide audience.”

Web Content Accessibility Guidelines [WCAG10]
# Description
01. Provide equivalent alternatives to auditory and visual content.
02. Don't rely on color alone.
03. Use markup and style sheets and do so properly.
04. Clarify natural language usage.
05. Create tables that transform gracefully.
06. Ensure that pages featuring new technologies transform gracefully.
07. Ensure user control of time-sensitive content changes.
08. Ensure direct accessibility of embedded user interfaces.
09. Design for device-independence.
10. Use interim solutions.
11. Use W3C technologies and guidelines.
12. Provide context and orientation information.
13. Provide clear navigation mechanisms.
14. Ensure that documents are clear and simple.

Considerations when implementing for Section 508 Compliancy

Section 508 has three Levels of priority: Level 1, Level 2 and Level 3. WCAG has also three levels of priority, but they are slightly different and named A, AA, AAA. This is an important distinction especially when testing with automated tools like Bobby because - and be aware of this - Level A compliancy NOT EQUALS Level 1 compliancy. Here is why:
When the ITAW handed Paragraph 1194.22 to the WAI (step 1) and after the WCAG 1.0 were completed and handed back to the ITAW (step 2) the Access Board released a Note to §1194.22:

  1. The Board interprets paragraphs (a) through (k) of this section as consistent with the following priority 1 Checkpoints of the Web Content Accessibility Guidelines 1.0 (WCAG 1.0) (May 5, 1999) published by the Web Accessibility Initiative of the World Wide Web Consortium:
    Section 1194.22 Paragraph WCAG 1.0 Checkpoint
    (a) 1.1
    (b) 1.4
    (c) 2.1
    (d) 6.1
    (e) 1.2
    (f) 9.1
    (g) 5.1
    (h) 5.2
    (i) 12.1
    (j) 7.1
    (k) 11.4
  2. Paragraphs (l), (m), (n), (o), and (p) of this section are different from WCAG 1.0. Web pages that conform to WCAG 1.0, level A (i.e., all priority 1 checkpoints) must also meet paragraphs (l), (m), (n), (o), and (p) of this section to comply with this section.

Item 2 is especially important because it means that a discrepancy between WCAG and Section 508 exists that requires a Section 508 Level 1 conformant site has to meet more than just Level A of the WCAG.

Step 3 and step 4 complete the process to create accessible.htm - it is basically up to you to apply the guidelines and produce accessible code.

Best Practices for Accessiblity

Follow my Best Practices blog entries to get more in-depth knowledge on what exactly you need to do to meet all the Section 508 compliancy checkpoints as outlined by the WCAG. Blog entries available so far:

References

Tagged as: , , , , , , , , , , , , , , , , , , 4 Comments
28Oct0

Best Practices for accessible Links

Posted by Michael Gaigg

It is essential that users can find, identify, and comprehend hypertext links quickly. Even though there are no Level 1 (A) checkpoints associated with links it is pretty easy to fulfill Level 2 and even Level 3. It's definitely worthwhile the little effort with the added benefit that e.g. most browsers render the title attribute as a tooltip.

Basic Rules

See also my Design Guidelines for Links.

  • Contrast link text color and regular text color
  • Underline link text
  • Ensure link text is descriptive of its destination
  • Make visited links change color
  • Limit link text to a maximum of four words
  • Place important words at the front of link text
  • Minimize amount of links to seven (excluding the menu) unless they are presented in a clear structure
  • Use meaningful pathnames when creating directory structure

Best Practices

Level 1

No Level 1 requirements.

Level 2

Level 2 Checkpoints - Section 508 Compliancy Standards
Checkpoint Description W3C 508 Example
Links Clearly identify the target of each link 13.1 n/a <A href="my-doc.html">My document is available in HTML</A>,<A href="my-doc.pdf" title="My document in PDF">PDF</A>,

<A href="my-doc.txt" title="My document in text">plain text</A>

Level 3

Level 3 Checkpoints - Section 508 Compliancy Standards
Checkpoint Description W3C 508 Example
Links Create a logical tab order 9.4 n/a <A tabindex="2" href="link2.txt"">Link 2</A><A tabindex="1" href="link1.txt">Link 1</A>

<A tabindex="3" href="link3.txt">Link 3</A>
Links Provide keyboard shortcuts to important links 9.5 n/a <A accesskey="2" href="link2.txt"">Link 2</A><A accesskey="1" href="link1.txt">Link 1</A>

<A accesskey="3" href="link3.txt">Link 3</A>
Links Include non-link, printable characters (surrounded by spaces) between adjacent links 10.5 n/a [<A href="a.htm">Link A</A>] [<A href="b.html">Link B</A>] or<A href="a.htm">Link A</A> | <A href="b.html">Link B</A>

Templates

Find out more about <a title="Michael Gaigg IT Solutions Webpage" href="http://www.mgitsolutions.com/">IT Solutions</a>

References

Tagged as: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , No Comments
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
Tagged as: , , , , , , , , , , , , , , , , No Comments
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

Tagged as: , , , , , , , , , , , , , , , , , , , , , , , , No Comments
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:
Tagged as: , , , , , , , , , , , , , , , 4 Comments
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:
Tagged as: , , , , , , , , , , , , , , , , , , , No Comments
13Oct8

How to Create a Color Palette for your Website

Posted by Michael Gaigg

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 ;) )

Color Wheel

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:

Suggested reading:
Tagged as: , , , , , , , , 8 Comments
10Oct0

What is Usability?

Posted by Michael Gaigg

Before I dive into guidelines and tips of designing and implementing usable websites I feel it is important to define and outline what Usability is. Please allow me at this point to cite several sources that I find essential.

Usability is the

  • Effectiveness (accuracy and completeness to achieve goals)
  • Efficiency (resources expended in relation to the accuracy and completeness)
  • Satisfaction (comfort and acceptability of the work system to its users)

with which specified users achieve specific goals in particular environments. [ISO9241]

Basic Principles

Alan Dix formulates in his book 'Human-Computer Interaction' that above definition can be concluded into three basic principles:

  • Learnability (the ease with which new users can begin effective interaction and achieve maximal performance)
  • Flexibility (the multiplicity of ways the user and system exchange information)
  • Robustness (the level of support provided to the user in determining successful achievement and assessment of goals)

Five Quality Components

Jakob Nielsen uses human characteristics to extend these principles by saying:
Usability has five quality components:

  • Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design
  • Efficiency: Once users have learned the design, how quickly can they perform tasks?
  • Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
  • Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
  • Satisfaction: How pleasant is it to use the design?

with the addition of 'utility' (functionality): Does it do what the user needs?

Implications for Usability Design

Implications drawn out of above definitions are that pages shall strive (devote serious effort or energy) to provide:

  • Consistency of presentation and controls across the site
  • Logical and natural organization of information (clear structure, systematic, clear and meaningful labels)
  • Contextual navigation (how much information is given for providing a context for the user; where is he/she in the site? Where can he/she go? How can he/she go back?)
  • Efficient navigation (the amount of time and effort the user needs to exert in order to move around the site)
  • Adequacy of feedback (are user interactions clear, are requests answered, do commands elicit the right response?)
  • Searchability (how effectively the site content can be sought in search engines?)
Suggested reading:
Tagged as: , , , , , , , , , , , , , No Comments
Page 19 of 20« First...101617181920

About Me

Michael GaiggI'm Michael Gaigg, Lead UI Engineer at Esri's Prof. Services.

I have over 8 years of experience in designing map interfaces and can't stop thinking about improving them.

Help me by sharing your thoughts, ideas and comments.

Categories

Popular Posts

Latest tweets

Posting tweet...

Tags

Accessibility analytics arcgis best practices book color content css design esri examples facebook free gis google guidelines html5 inspiration ipad jacob nielsen javascript Joel Reyes jquery map mobile navigation PHP requirements section 508 silverlight techniques tips tools trends tutorial twitter typography UCD ui usability user User Testing UX web Web Design

My Zazzle Products

User-centered Design Cup Mug
User-centered Design Cup Mug
Yes and No Tee Shirt
Yes and No Tee Shirt