Michael Gaigg: Über UI/UX Design

8Sep3

Design Guidelines: Print Stylesheet

Posted by Michael Gaigg

One of the most elegant techniques in web design is the use of a print stylesheet to control the style of a webpage on a hardcopy. Being so easy and cheap it is by far the most undervalued technique out there.
Often overseen bonuses are

  • adding copyright statements or thank you notes,
  • controlling which elements should not be seen (remove menu, commercials,...) and
  • in general ensure that the printed page is legible (contrast especially for links, fonts, ...).
Results of applying a print stylesheet to the page

Results of applying a print stylesheet to the page

Design Guideline for a Print Stylesheet

  1. Make page legible
    • Use serif font family (e.g. Georgia)
    • Use points (e.g. 12pt)
    • Ensure good contrast (e.g. color: #000; background: #FFF)
  2. Maximize paper use (e.g. width: 100%)
  3. Hide elements not relevant to print (e.g. display: none)
  4. Add content relevant to print (e.g. spell out links, thank you note)
  5. Use correct markup to reduce amount of styling (e.g. h1, h2,...)

How it works

Embed an extra stylesheet designed for print media into the page.

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

This stylesheet takes effect when a user invokes the print function of the browser and overrules style elements in other stylesheets on the page.

Then either provide a button or link that triggers a javascript function to print the page or have the user go through the browser's menu, even print preview would show you the expected layout already.

<a href="#" onclick="window.print();return false;">Print page</a>

I know, evil javascript, but hey, if turned on it works cross-browser (except IE6 with multiple IE versions installed).

Code sample

I recognize that many samples can be found on the web but I also found them incomplete in many cases. I don't claim to be compete myself, but I really like with what I came up with and most of all would like to hear your comments and feedback or even better references or links where you applied it to.

Download sample code

index.htm

<html>
<head>
<style type="text/css" media="all">
@import "main.css";
</style>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>
<body>
<div id="wrapper">
<div id="statement">Legal statement and thank you note.</div>
<div id="header">Header</div>
<div id="content">Content plus <a href="http://link.com/">Link</a></div>
<div id="footer">Footer</div>
</div>
</body>
</html>

main.css


/**
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
*/
#wrapper {
background: #FFFFFF none repeat scroll 0%;
margin: 0pt auto;
width: 600px;
}
#header {
border: 1px solid #CCC;
margin: 5px;
padding: 5px;
}
#content {
border: 1px solid #CCC;
background: #EEE;
margin: 5px;
padding: 5px;
height: 200px;
}
#footer {
border: 1px solid #CCC;
margin: 5px;
padding: 5px;
}
a:link, a:visited {
border-bottom:1px dotted;
color:#AE4F0C;
font-weight:bold;
text-decoration:none;
}
a:visited {
color:#333333;
}
a:hover, a:focus {
border-bottom-style:solid;
color:#D03900;
}
a:focus {
/*background:#FFFFCC none repeat scroll 0%;*/
}
#statement {
display: none;
}

print.css


body {
font-family: Georgia, serif;
background: #FFF;
color: #000;
font-size: 12pt;
}
#wrapper, #content {
width: auto;
height: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: #000;
background: transparent none;
}
#content {
margin: 10px;
}
#header, #menu, #sidebar, #footer, .noprint {
display: none;
}
#statement {
display: block;
border: 1px solid #666;
padding: 10px;
}
a:link, a:visited {
color: #781351;
background: transparent;
text-decoration: underline;
}
a:link:after, a:visited:after {
content: " [" attr(href) "] ";
}

References:

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

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

Tagged as: , , , , , , , , , 2 Comments
23Feb5

Design Guidelines: Radio Buttons versus Checkboxes

Posted by Michael Gaigg

Design guidelines for checkboxes

Design guidelines for checkboxes versus Radio buttons

Users hate formulars, it is work to them. Filling out forms on the web is no different, that's why getting web form design right is difficult, even simple forms can be challenging.

A good start is using the correct form element, or in the words of this blog entry to know when to use Radio Buttons versus Checkboxes:

General Design Guidelines

  1. Use standard visual representations
  2. Visually present groups of choices as groups (e.g. use subheads)
  3. Lay out your lists vertically with one choice per line
  4. Use positive and active wording for checkbox labels
  5. If possible, use radio buttons rather than drop-down menus
  6. Always offer a default selection for radio button lists
  7. Make radio button options comprehensive and clearly distinct
  8. Associate each button/box with a label
  9. Define accesskeys for frequently used checkboxes and radio buttons
  10. Use checkboxes and radio buttons only to change settings, not as action buttons

Radio Buttons

Radio Buttons are used when a list of two or more options is mutually exclusive and the user must select exactly one choice.


<fieldset>
<legend>Gender</legend><br />
<input id="female" type="radio" name="sex" value="female" checked>
<label for="female">Female</label><br />
<input id="male" type="radio" name="sex" value="male">
<label for="male">Male</label><br />
</fieldset>

Checkboxes

Checkboxes are used when a list of options exists where the user may select any number of choices – including zero, one or several.


<fieldset>
<legend>What is your favorite type of salad dressing?</legend><br />
<input id="French" type="checkbox" name="dressing1" value="checkbox">
<label for="French">French</label><br />
<input id="Italian" type="checkbox" name="dressing2" value="checkbox">
<label for="Italian">Italian</label><br />
<input id="Russian" type="checkbox" name="checkbox3" value="checkbox">
<label for="Russian">Blue cheese</label>
</fieldset>

Opt-in Checkbox

A stand-alone checkbox is used for a single option that the user can turn on and off.


<input id="accept" type="checkbox" name="yes" value="checkbox">
<label for="accept">I accept the terms and conditions.</label><br />

References

Suggested reading:
Tagged as: , , , , , 5 Comments
10Dec1

Design Guidelines: Breadcrumbs

Posted by Michael Gaigg

Hansel and Gretel using breadcrumbs to find their way home.

Hansel and Gretel using breadcrumbs to find their way home.

Nobody wants to get eaten by a wicked witch and neither do Hansel and Gretel in the tale Hänsel und Gretel by the Brothers Grimm. That's why the kids, as they are taken into the forest, leave little breadcrumbs behind so they can find their way home. I love the story (especially when the witch climbs into the oven to be baked) and the fact that Hansel and Gretel find their way home and see that the evil stepmother has died and everybody can live happily ever after.

Even though the metaphor of Hansel and Gretel is probably the origin of the term Breadcrumbs it is flawed because breadcrumbs do not represent the actual path the user has taken to any given page, but instead the optimal path from the homepage to the current page in the hierarchy.

Fairytale aside, here is how Breadcrumbs should be designed and implemented:

Design Guidelines for Breadcrumbs

  1. Display breadcrumbs horizontally
  2. Progress from the highest level to the lowest, one step at a time
  3. Start with the homepage and end with the current page
  4. Apply a simple text link for each level (except the current page)
  5. Separator between levels is simple and one-character (usually “>”)
  6. Levels show the site hierarchy – not the user’s history

Code Sample / Template

End result:
Example Breadcrumbs

<div class="breadcrumbs">
<a href="#">Home</a>
<span>></spanv
<a href="#">Topic</a>
<span>></span>
<a href="#">Sub Topic</a>
<span>></span>
<strong>Node</strong>
</div>


div.breadcrumbs {
background: url(bg-breadcrumb.png);
overflow: hidden;
margin: 0;
padding: 0;
height: 2.8em;
line-height: 2.8em;
color: #666;
}
div.breadcrumbs a, div.breadcrumbs strong, div.breadcrumbs span {
float: left;
overflow: hidden;
height: 2.8em;
padding: 0 1em;
font-style: normal;
}
div.breadcrumbs span {
background: url(bg-breadcrumb-arrow.png) no-repeat left center;
overflow: hidden;
padding: 0 0 0 1em;
width: 0px;
filter: alpha(opacity=40);
opacity: 0.4;
}

download bg-breadcrumb.png | download bg-breadcrumb-arrow.png

References

Tagged as: , , , , , , , , , , , , 1 Comment
14Nov4

Design Guidelines: ‘About Us’ Page

Posted by Michael Gaigg

IT Solutions About Us page

Example of an 'About Us' page from IT Solutions

There are many reasons for improving the usability of your 'About Us' page. Unfortunately many companies, especially bigger and well-known companies, tend to underestimate the value that comes from a well-designed 'About Us' page or simply assume that there is no need to explain themselves to their users.

The 'About Us' page helps to establish and re-enforce Trust and Credibility. Users of different backgrounds may need to know who is behind the content or service. Should I invest in this company? Apply for a job? Write an article about their service? Order a product?

The best news over all is: a simple link on your homepage is cheap and easy and the benefits of a clean and well-structured 'About Us' page outweigh many times the effort of creating it.

Design Guidelines for 'About Us' pages

  1. Provide clearly visible link on homepage
  2. Label the link either “About ” or “About Us”
  3. Present content in ‘inverted pyramid’ layers:
    • Tagline: Few words or brief sentence summarizing what you do
    • Summary: One to two paragraphs about goals and main accomplishments
    • Fact sheet: Section that outlines key points and other essential facts
    • Details: Subsidiary pages providing indebt information about processes, company structure, philosophy etc.
  4. Disclose address

References

Tagged as: , , , , , , , , , , , , , 4 Comments
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
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
   Older Entries »

RSS Recent Posts

Categories

  • expandAccessibility (13)
  • expandCode Samples & Tips (4)
  • collapseDesign Guidelines (11)
  • expandGo figure (7)
  • expandGood News (11)
  • expandHere and there (11)
  • expandThis Week’s Highlights (23)
  • expandUsability & UCD (14)
  • expandWeb Design (13)

Popular Posts

People that inspire me

Tags

508 Accessibility accessible analytics Ben Gremillion best practices book Cameron Chapman chrome color content contrast css design design guideline Design Guidelines esri facebook free google guidelines harry brignull jacob nielsen javascript jeff sauro Joel Reyes jquery level 1 level 2 level 3 navigation scott berkun section 508 speed techniques trends typography UCD ui usability UX w3c wcag web Web Design

What I'm Doing...

Posting tweet...