Michael Gaigg: Über UI/UX Design

13Oct0

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:
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:
7Oct0

The importance of the JavaScript parseInt radix

Posted by Michael Gaigg

Problem:

Just recently I had to implement an HTML form that allows users to enter percentage values. Like every good programmer I added client-side validation to check that the input values are between 0 and 100.

Using the JavaScript function parseInt(txtValue) with txtValue being the value of the input field our tester was able to submit the form with a value of 0137.

My first reaction was to restrict the maxlength attribute of the input field to 3 characters only. Even though this is a good and recommended practise there was clearly something else wrong.

Explanation:

The parseInt() function parses a string and returns an integer. The signature is parseInt(string, radix) with

  • string (required) being the string to be parsed, and
  • radix (optional) a number (from 2 to 36) that represents the numeral system to be used

If the radix parameter is omitted, JavaScript assumes the following:

  • If the string begins with “0x”, the radix is 16 (hexadecimal)
  • If the string begins with “0”, the radix is 8 (octal)
  • If the string begins with any other value, the radix is 10 (decimal)

Solution:

So, what happened? Because I forgot to specify the radix and our QA tester tried the (however unlikely) case of 0137 JavaScript assumed it was an octal number and returned a value of 95. Lesson learned: Always specify the radix (if it decimal set it to 10 ;)!!!!

PS.: Only the first number in the string is returned!
PPS.: Leading and trailing spaces are allowed.
PPPS.: If the first character cannot be converted to a number, parseInt() returns NaN.

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
3Oct0

Visual Web Design

Posted by Michael Gaigg

First impressions matter! Luke Wroblewski, an excellent speaker with original insights which I had the pleasure to hear at last year's UI-12 (User Interface 12) in Boston, states in his latest article that users coming to your site from a search engine will do one of three things:

  • Look over the page and determine it is not relevant to their goal
  • Look over the page and determine it might be relevant to their goals then quickly scan the page for the information they need
  • Look over the page, quickly scan the page, find the information they need and then stay awhile.

All this happens within seconds. Therefore it is necessary to translate the first impressions (what am I looking at? functional role present?) into meaningful interactions, i.e. scanability, further (inter)action, which leaves us with the following

Guidelines for Visual Web Design

  1. Set initial expectations by communicating what kind of information it provides.
  2. Provide a way to quickly scan that information in order to locate something of value.
  3. Allow people to immerse themselves in the information they want and explore other relevant information when they choose to.
Suggested reading:
Page 24 of 24« First...10...2021222324