Michael Gaigg: Über UI/UX Design

18Jun0

Back from Baby Break

Posted by Michael Gaigg

Our son Sebastian

Our son Sebastian

For everybody who has been wondering where I've been the last two months, my wife and I had a wonderful baby boy "Sebastian". He is our sunshine and we try to spend every minute with him, if we want or not ;)

So many exciting things have been taking shape in the meantime and I really want to write about them again. Next to my daily work at ESRI and our child it's not always easy to find the time to collect and summarize my thoughts but your constant feedback and comments keep me going, thanks for your support and understanding. Stay tuned!

Tagged as: , No Comments
18Feb0

“Buzz this” for WordPress integration

Posted by Michael Gaigg

Google Buzz

Google Buzz

Christina Warren wrote a really nice blog entry on HOW TO: Integrate Google Buzz Into Your WordPress Blog, this will certainly get you started with your own buzz this icon/button.

I installed Google Buzz Button plugin (by Internet Techies) that allows you to add a “Buzz This” button to each of your WordPress posts (download google buzz plugin).
Yes, that's the nicely colored button right below these words - try it out, right here, right now ;)

30Oct0

Richtlinien für barrierefreie Webinhalte (WCAG) 2.0 (German)

Posted by Michael Gaigg

Spreading the word about WCAG 2.0 is definitely good news. Yesterday Shawn Lawton Henry, WAI Outreach Coordinator and Chair of the WAI Education and Outreach Working Group, announced the publication of the German Authorized Translation of Web Content Accessibility Guidelines (WCAG) 2.0:

Richtlinien für barrierefreie Webinhalte (WCAG) 2.0 (German)

http://www.w3.org/Translations/WCAG20-de/

The WCAG 2.0 are also available in

I also suggest you to have a look at my blog entries about WCAG 2.0: Overview and Structure and Section 508: WCAG 1.0 or WCAG 2.0?

5Oct7

Happy 1st Anniversary!

Posted by Michael Gaigg

Thank You!

It's been one year since I started sharing my experience about User-centered Design on this blog. I want to take this oportunity and thank you all for reading my thoughts and insights - you give meaning to my work!

More important, I want to hear from you

  • what you liked,
  • what you didn't like and
  • especially what you would like to hear more about.

What's coming next?

Here is a sampling of what I'm currently working on or what I have planned to write about next:

  • Effective Web Design Critique
  • Code samples: jQuery, .NET, CSS
  • How Can I Evaluate the Quality of My Website?
  • More 'Design Guidelines'
  • More 'Best Practices' (including spreadsheets)
  • Some funny 'Lessons learned'
  • ...whatever else I learn every day

A look back

Popular Posts

Google street view sighting

Lessons learned...

My Personal Favorites

Your typical user captured on photo

Your typical User

Summary: Best Practices

Summary: Design Guidelines

Breadcrumbs

Breadcrumbs

3Sep0

Free book online: The Principles of Successful Freelancing

Posted by Michael Gaigg

I know this might be a little off-topic but nevertheless useful to many of us. The book 'The Principles of Successful Freelancing' of Miles Burke is available for free to download (only valid for the next 10 days starting today), so get it now!

Contents

  1. Considering Freelancing?
  2. Prepare for the Transition
  3. Manage Your Money
  4. Set Yourself Up
  5. Win the Work
  6. Give Great Service
  7. Achieve Work–Life Balance
  8. Where to from Here?

About the author

Miles Burke has been creating web sites since 1994. In 2002, Miles founded Bam Creative, an award-winning Western Australian web company. Miles serves as Chairperson of the Australian Web Industry Association, and has been awarded for his entrepreneurship in recent years; he’s a recipient of the Contribution to the Web Industry award in 2005, winner of the WA Business News’ 40under40 award in 2007, and appears in the 2008 edition of Who’s Who in Western Australia. Miles can also be found writing at Miles’ Blog.

Links for freelancers

Have more useful links? Post them in the comments section.

Suggested reading:
2Jul4

Free book online: Search User Interfaces

Posted by Michael Gaigg

Marti Hearst generously made her upcoming book "Search User Interfaces" available for reading online. She is definitely not a newcomer to the scene and the book for sure not a Best-Of compilation, moreover the book is written in an academic fashion that backs up its theses usability studies, log studies, or some other form of proof (like it!) - like Harry Brignull states: "Caution: actual thought may be required when reading this book."

Contents: Search User Interfaces

The book has two main parts: search fundamentals (Chapters 1-7) and advanced topics (Chapters 8-12).

0: Preface
1: Design of Search User Interfaces
2: Evaluation of Search User Interfaces
3: Models of the Information Seeking Process
4: Query Specification
5: Presentation of Search Results
6: Query Reformulation
7: Supporting the Search Process
8: Integrating Navigation with Search
9: Personalization in Search
10: Information Visualization for Search Interfaces
11: Information Visualization for Text Analysis
12: Emerging Trends in Search Interfaces
References
Index

Suggested reading:
15Jun1

ColoRotate – 3D color scheme generator with social component

Posted by Michael Gaigg

Following up my blog entry on How to Create a Color Palette for your Website I stumbled over a fascinating color scheme generator: ColoRotate.

Screenshot of ColoRotate

Screenshot of ColoRotate

What is ColoRotate

Set into motion by Michael Douma, the executive director of the Institute for Dynamic Educational Advancement, ColoRotate is a Flash-based application with a custom 3D display engine for visualization. When other palette generators are primarily focusing on the 2D color wheel, ColoRotate uses a prism to display color, luminescence, saturation, and brightness all in once. I found it very easy and intuitive to use and was able to produce a harmonious color palette within seconds (well, not that it was for any special purpose) and export the colors as CSS to my clipboard.

Community

Lazy registration

Lazy registration


Lazy registration with filled out information

Lazy registration with filled out information


Here comes the part that I love: Sign in using your google account to save and share schemes. Yes, that means one can in reverse search, get inspired and re-use existing user-generated schemes.

Loving it.

Note on the side: Loving even more the lazy registration process :)

Facit

Go, check it out. It's not just another tool in your design toolbox. Look out for the Creative Suite 4 (CS4) plugin to come and start showcasing your palettes and discuss them with the community.

17Mar1

I love Speed… therefore Google Chrome is.

Posted by Michael Gaigg

Happy St. Patrick's Day

Happy St. Patrick

Happy St. Patrick's Day everyone! While you're still sipping your Guinness and chewing on your shamrocks, everything seems to be new and shiny at Google: As announced today in their new Google Chrome blog, Google has released their new beta of Chrome.

New Features

Besides some really nice features (form autofill, full page zoom and autoscroll) Google Chrome offers a cool new way to drag tabs out to get a side-by-side view - way to go.

Did Google Chrome Just Get Even Faster?

Have I mentioned speed yet? As if (ooooold stable version of) Chrome wasn't fast enough, the neeeeew beta promised 25% to 35% in speed enhancements according to their V8 and Sunspider benchmarks. Ask your typical user to see why speed matters ;)

Which Browser do you use?

Are you still on Internet Explorer? Don't tell me IE6 - I'd have to creep through your monitor and strangle somebody... Firefox? Chrome? What are your experiences?

4Feb0

15 = Quince or a Really Cool Pattern Library

Posted by Michael Gaigg

Quince is an online repository of UX patterns. It was developed by Infragistics and released to the public today. It's free and open so that anybody can contribute with their knowledge. Silverlight required!

Yes, Quince is not the first pattern library, there are plenty of other excellent pattern libraries like Yahoo! Design Pattern Library, Open Source Pattern Library, UI-Patterns.com and many more, but it surely is a very comprehensive and good looking one.

What are Patterns?

A pattern is a reusable, best-practices approach used in the design of a solution to a commonly-occuring problem within a specific context. A pattern is not a finished piece of code or design that can be used as is. Rather, it reflects the sum total of a community's knowledge and experience or expertise in a given domain.

I strongly recommend reading the interview about Pattern Languages for Interaction Design with Erin Malone, Christian Crumlish, and Lucas Pettinati.

Social Interface Patterns

Another very interesting approach to patterns is taken by Christian Crumlish and Erin Malone who are currently working on a book for O'Reilly Media.
Check out their Designing Social Interfaces patterns wiki and contribute to their upcoming book. Very interesting approach!

Antipatterns

Antipatterns are common UX mistakes to learn from. Probably the most prominent antipattern is "Click here" also known as "Navigating in a mysterious way". Read a very interesting Antipatterns blog entry by Peter Hornsby.

Controversy

I think there is no doubt that patterns can boost our development process and reduce the amount of work needed to re-invent common elements. Study them and try to enhance on top of them!

Antipatterns on the other side might not be that useful. Even though I agree with Scott Berkun in his line of argumentation about Failure: the secret to success that it is important to learn from one owns mistakes and failures but that might be also overrated like Jason states in Learning from failure is overrated: "There’s a significant difference between “now I know what to do again” and “don’t do that again.” The former being better than the latter."

What do you think? Have I missed something or somebody?

19Dec2

Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure

Posted by Michael Gaigg

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.
WCAG 2.0 Overview showing Principles, Guidelines, and Success Criteria (Level A, Level AA, Level AAA).

WCAG 2.0 Overview showing Principles, Guidelines, and Success Criteria (Level A, Level AA, Level AAA).

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

Structure

The four principles of Web accessibility: perceivable, operable, understandable, and robust.

The four principles of Web accessibility: perceivable, operable, understandable, and robust.

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 WCAG 2.0 Guidelines provide basic goals for creating accessible content.

The 12 WCAG 2.0 Guidelines provide basic goals for creating accessible content.

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

WCAG 2.0 Success criteria shown in three column: column 1 (red) are Level A, column 2 (yellow) are Level AA, column 3 (green) are Level AAA.

WCAG 2.0 Success criteria shown in three column: column 1 (red) are Level A, column 2 (yellow) are Level AA, column 3 (green) are Level AAA.

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?