Michael Gaigg: Über UI/UX Design

22May0

Beware of the Frankenstein Design

Posted by Michael Gaigg

Frankenstein Design

Frankenstein Design

"It was already one in the morning; the rain pattered dismally against the panes, and my candle was nearly burnt out, when, by the glimmer of the half-extinguished light, I saw the dull yellow eye of the creature open..." (Chapter 5). Sounds familiar to us geeky programmers out there? Yes, and the root of all evil are clients that design their webpage from a sushi menu, picking whatever they like.

Usually I encourage my clients to look around, get inspired and show me what they like. It gives me a sense of how they think and into which directions they want us to go. But never forget: Clients identify problems, designers provide solutions! Understand why the client shows you a specific page or design element and what exactly they like in it. Don't feel pressured to include every detail in your final design otherwise you wake up at 1am facing a yellow-eyed creature and you'll end up with a Frankenstein Design.

Warning Signals

What are warning signals that your project might face a Frankenstein Design?

  • Client mentions Stakeholders too often. Money makes the world go round, but will eventually ruin the user experience.
  • Client fell in love with a bad design. Try to build solid knowledge about good and bad design principles so you can explain the pro's and con's of a particular design.
  • Client needs to please too many interests. It's understandable that every party involved wants to see their logo on the page, but honestly, one is enough 😉
  • Client decides on a color scheme. Besides corporate colors clients feel strongly about certain colors that either clash with your design, psychological theory or existing color schemes or are simply bad taste altogether.
  • Client has no idea at all. That means trouble! Not now, but once you are done. Guaranteed.
  • Got more?

What you can do

  • Listen. Hear what the client tells you and try to understand why they say it.
  • Feel. Sense what the underlying need is and translate it into design elements.
  • Talk. Speak up, don't shut up, don't wait until it's too late.
  • Fight. Pick your battles, don't let rules overrule what you think is right, at least voice it.
  • Reconsider. Don't get hooked to an idea too strongly, be open to erase your white-board drawings and start over.
  • Document. Make notes, sketch ideas, capture screens, summarize. Send these notes out.
  • CYA. Cover your ass, seek consensus and approval, set it in stone through written acknowledgments (mockups help).

Send me your experiences? What is missing on this list?

1May0

Best Practices for Accessible Stylesheets

Posted by Michael Gaigg

Cascading Style Sheets (CSS), or short Stylesheets, is a language used to describe the presentation (that is, the look and formatting) of a document written in a markup language like HTML.

The stylesheet language as described in CSS level 2 revision 1 helps to separate presentation from structure and thus adds flexibility to the look and feel of a web page. Stylesheets are useful for the following reasons:

  • Can be re-used for many documents
  • Saves download times by caching by the browser
  • Presentational changes are fast and easy and only in one document
  • Development can be done independently from content and logic
  • Increases ability to program for device independence
  • Application of different styles for different output formats (e.g. print)

Basic Rules

  • Add Stylesheets whenever possible (minimize number of stylesheets)
  • Use them consistently across all pages
  • Use linked stylesheets rather than embedded styles; avoid inline stylesheets
  • Stylesheets do not substitute correct and meaningful structure

Best Practices

Level 1

Level 1 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Organize documents so they may be read without style sheets 6.1 d Ensure that important content appears in the document object and is not generated by style sheets (i.e. through :before and :after pseudo-elements).

Level 2


Level 2 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Use style sheets to control layout and presentation 3.3 n/a
<HEAD>
<TITLE>Drop caps</TITLE>
<EM class="highlight" title="provide STYLE element">STYLE</EM> type="text/css">
.dropcap { font-size : 120%; font-family : Helvetica }
</EM class="highlight" title="provide STYLE element">STYLE</EM>>
</HEAD>
<BODY>
<P><SPAN class="dropcap">O</SPAN>nce upon a time...
</BODY>

Level 3

Level 3 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Create a style of presentation that is consistent across pages 14.3 n/a A consistent style of presentation on each page allows users to locate navigation mechanisms more easily but also to skip navigation mechanisms more easily to find important content.

Template

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="BaseStyleSheet.css" />
</head>
<body>
Hello World
</body>
</html>


/* Base CSS Document */
/**
Elements
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
font-family: Arial, Helvetica, sans-serif;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/**
Classes
*/
/**
IDs
*/

References

20Apr0

Excellent read: Quality in Web Design

Posted by Michael Gaigg

Stumbled upon this blog entry by liam, loved it, shared it: How to Spot Quality within Web Design: Examples & Tips.

One can truly see the effort that went into all the visual examples (thanks, love that most) and compilation of useful tips!

Here the outline:

  1. Spacing
  2. Pixel Perfect Detail
  3. Well thought out Typography
  4. Organization of Elements
  5. Restraint & Subtlety
  6. Using Colour to it’s Full Potential
  7. Doing something Nobody else has done

Got an interesting article or blog entry?

I'd love to read and eventually share your content. Please feel free to add your links to the comments section so I can 'stumble upon' them too 🙂

10Apr0

Design Guidelines: Error Messages

Posted by Michael Gaigg

Just some weeks ago I wrote about Design Guidelines for 404 Pages. Closely related are Error Messages in general, and believe me, they will save your life. That's why you need to get them right!

Why bad error message can hurt your company

Error messages are like saying "You are stupid", or "Come on old fart, you still don't get it?" - and that's bad, it's almost like constantly telling your kid "No, no, no". Be preventive, defensive and avoid Design Bloopers like the the one at Cingular: Having tried to log into my account the following error message appears "My Account is Currently Closed". Can you imagine the horror that bubbles up and the thoughts of who to call (but how?)? As it turns out Cingular was just maintaining their server and the only flawed thing was the error message. Is it possible to measure how much this little flaw will hurt the company?

Misleading and almost terrifying error message at Cingular

Misleading and almost terrifying error message at Cingular

Defensive Web Design

Prevent error messages whenever possible; e.g. "did you mean" at google.com

The beauty of usability design is to think of ways to prevent showing error messages at the first place. The most prominent example is probably Google. Have you ever seen an error message on Google? How great is the "Did you mean:" function... I even use it day by day as a spell checker, like I use google images to visualize words I didn't know (do you know what a vicuna is?).

Design Guidelines: Error Messages

  1. Avoid error messages if possible.
  2. Explicit indication that something has gone wrong
  3. Human-readable language
  4. Polite phrasing without blaming the user or imply that user is stupid or is doing something wrong
  5. Precise descriptions of exact problems
  6. Constructive advice on how to fix the problem
  7. Visible and highly noticeable, both in terms of message itself and how it indicates which dialogue element users must repair
  8. Preserve as much of the user’s work as possible
  9. Reduce the work of correcting the error (e.g. list of possibilities)
  10. Hypertext links may be used to connect a concise error message to a page with additional background information or explanation of the problem.

Did you ever encounter a 'special' error message?

Send me a screenshot and/or tell me the story behind it.

Suggested reading:
31Mar0

Steps to improve User Experience for Government

Posted by Michael Gaigg

In my daily work I'm constantly confronted with developments for government sites. Often I hear confusion in what needs to be achieved, who needs to be served and especially why it should matter.

Become creative to engage citizens in governmental issues (using the citizen’s language), e.g. upload a photo of the damaged street (http://www.fixmystreet.com/)

Become creative to engage citizens in governmental issues (using the citizen’s language), e.g. upload a photo of the damaged street (http://www.fixmystreet.com/)

Listening into a Webcast by Human Factors International (download white paper on Designing the e-government experience through citizen-centered usability, March 2008) gave me additional insights that I want to summarize and present here:

Goals of eGovernment

The web offers governmental sites the potential for increased operational efficiency and cost reductions while improving access to information and services for their citizens.

Levels of interaction between these two actors (government & citizens) include:

  • Connect citizens with legislative offices
  • Communicate faster and more targeted
  • Leverage access to public services (enhanced productivity with reduced effort)

Steps to improve eGovernment

Traditionally the government has three main functions:

  1. Report
  2. Transact
  3. Interact

What can be done to improve these functions/processes?

Get it out there

  • What information is interesting?
  • What is already available?

Make it useful & usable

  • Pre-digest the information (e.g. into charts, comparisons, …)
  • Understand the citizen’s needs (e.g. Spanish language, search, text size, …)
  • Assist citizen’s in finding the information (sometimes they don’t know it exists)
  • Avoid: limited business focus, internal focus, lack of shared resource

Provide self-service

  • Assist citizens to walk through business logic (avoid unnecessary pages, forms, fields, …)

Track improvement

  • Establish a baseline (best practices review, scorecard, usability testing success rates, web analytics, call center volume, server logs, …)
  • Validate improvements (success rate, task time) & seek for support within your organization for doing this
  • Continuously track usage
  • Why? Avoid falling back in national ranking, reduce costs for service calls, …

Make it engaging

  • “Will? Can?” Will citizens use the service? Can they find it?
  • Make it exciting
  • Use experiences or technologies that are current and up to date (videos, gadgets, …)

Embrace the future

  • Become creative to engage citizens in governmental issues (using the citizen’s language), e.g. upload a photo of the damaged street (http://www.fixmystreet.com/)
  • Encourage citizens to interact through social tools

Erase boundaries

  • Integration of “Report”, “Transact” and “Interact” means to remove the disparity between organizational structures of governments and the mental models of the citizens
  • Understand and channel the motivation of citizens to use online services
  • Integrate offers from multiple agencies into one comprehensible user experience

Start a movement

  • Create a community by involving State & Agency Leadership, Agency CIO’s and Webmasters
  • Recognition and adoption are key aspects
  • Embrace the chaos
  • Provide useful & usable tools
  • Reward contributions & demonstrate progress
  • View webmasters as a partner, not as recipient

Transparency

  • The user’s perspective of the organization and the actual organizational structures are mostly very different. Citizens should not need to know how an agency is organized or be familiar with its terminology.
  • Focus on the citizen means to understand how they look for information!
  • Integrate internal processes into one intelligent solution (iGov = integrated Government)
  • Understanding the level of literacy is key to success. Easy language assists citizens in filling out bureaucratic forms.

Government must view itself as a business

  • Attract and satisfy citizens. Beware of competition and consider concepts like ‘brand loyalty’. Effective interaction adds benefits to citizens.
  • Convert visitors into customers meaning that citizens become active online users of the services.
  • Broaden the focus onto international audience which is important to attract entrepreneurship and investment capital and is a good indicator of a strong technology market and research and development environment.

Assistance through technology, tools and continuous improvement

  • Support CIO’s and webmasters through tools like design templates, standards, guidelines and an effective means of governance.
  • Adjust technology to changing market conditions, population demographics and the user’s level of expectations.
  • Create a culture and long-term commitment (=institutionalization) of usability within the agency!
  • Establish a baseline of improvement and continuously validate and improve through benchmarks.

Your thoughts?

I'd like to hear your feedback and if you have applied one or many of above techniques in your agency and what your experiences were.

References

  • Straub, K., Gerrol, S.; Designing the e-government experience through citizen-centered usability; Human Factors International, Inc.; White paper; March 6, 2008
25Mar0

Question: How can Internet Mapping Applications be made accessible?

Posted by Michael Gaigg

Following I will identify areas that make web-based maps inaccessible as per WCAG 1.0 (please see section: 'Questions and Possible Research Areas').

Shout for Help

Question: How can Internet Mapping Applications be made accessible for users with disabilities?

If you are currently working on resolving any (or all) of these issues, know of somebody that is working on them or even know existing solutions, I would greatly appreciate if you pointed them out to me.

It is absolutely impossible to continue with our current approach to seek exceptions as a 'work-around'!

Background

It is important to note that I'm not talking about simple Google maps like driving directions or locate services that could be described through alternative, textual output.
Many times a map is the means to select, query, mix and eventually analyze data across multiple layers from multiple services. The input requires good vision and motor skills (mouse) and same applies to the output that is highly visual as well.
A simple example that illustrates this fact pretty well is shown in Figure 1, Drive Times from a specific location based on traffic grid.

ESRI Map, Drive Times

Figure 1: ESRI Map: Drive Times; produced using ArcGIS JavaScript API, http://mapapps.esri.com/serverdemos/siteselection/index.html

The Law

Section 508 as explained by Authority 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.”
This law is extended and applicable to companies that develop applications for the agency, i.e. ESRI has to adhere to the Section 508 Standards.
The Section 508 Checkpoints were translated into Web Content Accessibility Guidelines which cover most of Section 508 and describe its implementation in terms of HTML & CSS.

Current ‘Solution’

So far, exceptions to this law have been granted for the specific case of online maps. It is believed to impose an ‘undue burden’ to the agency/contractor to make maps accessible. In many cases a 1-800 number was provided that would help the user to get the same information.

Questions and Possible Research Areas

Currently the following WCAG checkpoints are Level 1 (A) show-stoppers and need to be solved/researched/implemented:

Checkpoint 1: Provide equivalent alternatives to auditory and visual content

How to read a map when blind? E.g. redundant text for active regions/content.

Checkpoint 2: Don’t rely on color alone

Map application could provide different color schemes/black&white/shades of gray?!

Checkpoint 6: Ensure that pages featuring new technologies transform gracefully

How to provide a map (or alternative) that can be used when scripts are turned off?

Checkpoint 8: Ensure direct accessibility of embedded user interfaces

Do not write event-handlers that rely on mouse-coordinates (device-independence; see also Checkpoint 9)

Checkpoint 9: Design for device-independence

How to navigate a map without a mouse?

Checkpoint 12: Provide context and orientation information

How to describe the content of a map (especially after a change, e.g. query)?

You know of a solution?

Please get in touch with me if you know of solutions to these problems!

I hope that solutions for these problems can be found and maps become available to everyone. As always, not only users with disabilities will benefit from these efforts but also the applications themselves, e.g. better SEO (search engine optimization), alternative support for mobile user agents, assistance for elderly people, etc.

17Mar0

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?

13Mar0

Go figure: 10 Comic Strips that have Something in Common

Posted by Michael Gaigg

Here is to all you peeps that cannot survive the weekend without a computer, smart phone or internet connection: What do the following 10 comic strips have in common?

Be aware, this is a trick question!

Comic 01: 'You have major self-esteem issues. I highly recommend that you immediately disable commenting on your blog.'

Comic 01: 'You have major self-esteem issues. I highly recommend that you immediately disable commenting on your blog.'

Comic 02: 'You don't send me trackbacks anymore. Are you blogging someone else?'

Comic 02: 'You don't send me trackbacks anymore. Are you blogging someone else?'

Comic 03: 'I wanna Wii' - 'Well, please wait until you're finished telling Santa what you want.'

Comic 03: 'I wanna Wii' - 'Well, please wait until you're finished telling Santa what you want.'

Comic 04: 'Will blog for food'

Comic 04: 'Will blog for food'

Comic 05: 'You can't go outside to play until you've finished reading all your RSS feeds!'

Comic 05: 'You can't go outside to play until you've finished reading all your RSS feeds!'

Comic 06: 'Hey Sport, there's a huge sale today so I'm going to buy some software. You need anything?'

Comic 06: 'Hey Sport, there's a huge sale today so I'm going to buy some software. You need anything?'

Comic 07: '...and Phillip, do you promise to blog about Janice, every day for the rest of your life...'

Comic 07: '...and Phillip, do you promise to blog about Janice, every day for the rest of your life...'

Comic 08: 'Waddya mean all my facts are wrong? I copied everything straight off the internet.'

Comic 08: 'Waddya mean all my facts are wrong? I copied everything straight off the internet.'

Comic 09: 'I can't find my GPS.' - 'Oh, the sweet, sweet irony.'

Comic 09: 'I can't find my GPS.' - 'Oh, the sweet, sweet irony.'

Comic 10: 'I don't care what 57% of your blog readers think is cool. We're not naming her Skype!'

Comic 10: 'I don't care what 57% of your blog readers think is cool. We're not naming her Skype!'

9Mar0

Design Guidelines: 404 Error Pages

Posted by Michael Gaigg

404 error

404 error

The 404 or Not Found error message is an HTTP standard response code indicating that the client was able to communicate with the server but either the server could not find what was requested, or it was configured not to fulfill the request and did not reveal the reason why.

Possible Reasons

Possible reasons for 404 error pages can be

  • click on a broken link
  • the page has been deleted
  • mistyped URL

Depending on your internet service provider (ISP) the standard 404 page can vary greatly in terms of visual display and information on the error itself. In order to not loose visitors it's strongly suggested to create a custom 404 page. A good custom 404 page will help people find the information they're looking for, as well as providing other helpful content and encouraging them to explore your site further.

Design Guidelines for 404 Pages

A good 404 error page conveys a right message and leads the visitor to where he intends to go:

  1. Tell visitors clearly that the page they're looking for can't be found.
  2. Use language that is easy to understand, non-technical, friendly and inviting.
  3. Display an error message that explains what could have gone wrong.
  4. Offer means to recover (e.g. list site's naming conventions, spell check functionality, most common problems).
  5. Offer links to other important links of the site (e.g. most popular, homepage, FAQ).
  6. Provide a way for users to report a broken link (easy form, email the webmaster).
  7. Do not display ads.
  8. Avoid redirection of 301 and 302.

Other Considerations

No matter how beautiful and useful your custom 404 page, you probably don't want it to appear in Google search results. In order to prevent 404 pages from being indexed by Google and other search engines, make sure that your webserver returns an actual 404 HTTP status code when a missing page is requested.

Got a nice 404 page?

Send me screenshots of your 404 error pages - I'd love to see them!

Thx to Claude Betancourt who sent me this 404 page (Figure 1) of Dow Jones Indexes telling me that "behind the scenes we capture all CGI and request scope variables, log it and email the admins to correct the error if necessary." Nicely done!

Sample 404 page from Dow Jones Indexes

Figure 1: Sample 404 page from Dow Jones Indexes

Another nice one with a funny little video:

Uh-oh, you hit a 404

Uh-oh, you hit a 404

References

5Mar0

Benefits & Principles of User-Centered Design

Posted by Michael Gaigg

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".

Page 20 of 24« First...10...1819202122...Last »