IT Solutions Blog » Design Guidelines

IT Solutions Blog » Design Guidelines http://www.michaelgaigg.com/blog Web Design Guidelines and Tips Fri, 30 Jul 2010 03:10:55 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Design Guidelines: Print Stylesheet http://www.michaelgaigg.com/blog/2009/09/08/design-guidelines-print-stylesheet/ http://www.michaelgaigg.com/blog/2009/09/08/design-guidelines-print-stylesheet/#comments Tue, 08 Sep 2009 20:34:30 +0000 Michael Gaigg http://www.michaelgaigg.com/blog/?p=480

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

Design Guideline for a Print Stylesheet

Make page legible
- Use serif font family (e.g. Georgia)
- Use points (e.g. 12pt)
- Ensure good contrast (e.g. color: #000; background: #FFF)
Maximize paper use (e.g. width: 100%)
Hide elements not relevant to print (e.g. display: none)
Add content relevant to print (e.g. spell out links, thank you note)
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:

Coyier, C. (2008, 3 3). CSS-Tricks Finally Gets A Print Stylesheet. Retrieved 9 1, 2009, from CSS Tricks: http://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/
Meyer, E. (2002, 5 10). CSS Design: Going to Print. Retrieved 9 1, 2009, from A List Apart: http://www.alistapart.com/articles/goingtoprint/
Walsh, D. (2008, 2 27). Optimize Your Links For Print Using CSS — Show The URL. Retrieved 9 1, 2009, from david walsh blog: http://davidwalsh.name/optimize-your-links-for-print-using-css-show-url
webcredible. (2007, 9). Print stylesheet - the definitive guide. Retrieved 9 1, 2009, from webcredible: http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml

]]> http://www.michaelgaigg.com/blog/2009/09/08/design-guidelines-print-stylesheet/feed/ 3 Design Guidelines: Transactional Email http://www.michaelgaigg.com/blog/2009/06/30/design-guidelines-transactional-email/ http://www.michaelgaigg.com/blog/2009/06/30/design-guidelines-transactional-email/#comments Tue, 30 Jun 2009 19:02:01 +0000 Michael Gaigg http://www.michaelgaigg.com/blog/?p=424 I usually try to balance positive and negative critique, but sometimes - and especially when I see really bad things - I just cannot help but mention it here as well. Latest 'incident' was a harmless email to my local government body with the intent to change my address.

Optimize your webpage to avoid emails

The reason I sent the email in the first place was that I couldn't find any form or document that would allow me to change my address online. So, I tried to locate a tab or menu entry called 'contact' or similar (no luck), checked the footer (no luck) and eventually found the complete address with generic email (chief-on-duty@government) next to the logo - which showed me once more that users tend to look for certain elements in common places rather than even prominent locations. Anyway, I figured this email address would do it and I shot my note to change my address. Here is the (automated) response:

Dear mail sender! The employee you have selected is out of office and can be reached again on June 29th, inquires will not be processed.

Wow, now what? Should I send my message again in two days (which I probably will)? Can I trust these guys to fix my address at all? Seems like there is no organization behind it. I have no chance to stop by because I'm out of the country but maybe I need to pick up the phone and call instead, how annoying. No big deal for a simple change of address but this slip can potentially damage your image and seriously reduce trust for other sorts of inquires, right? Update: Today I received a very nice and personal response telling me that my address was updated. I will in return send a nice and personal note pointing out above issues. Let's hope for the best. But now, here are the

Design Guidelines for transactional email

Avoid being mistaken for spam.
Enhance company’s reputation and increase users’ confidence.
Be precise and answer all relevant questions.
Provide recognizable brand name in ‘From’ field.
Add clearly distinguishable transaction to ‘From’ field.
Keep ‘From’ field shorter than 20 characters.
Explicitely relate ‘Subject’ field to a customer-initiated transaction.
Avoid unnecessary message sequences (e.g. transaction confirmation + shipping confirmation; order summary not necessary anymore).
Start the ‘Content’ with the information that matters most.

Solution to my inquiry above

First of all, unless the whole department was moved, closed or is on vacation I would not expect a vacation response mail for an email sent to a generic address. Secondly, automated responses are ok if they state that a human response will follow promptly, usually within 24 hours. What would have been a better response? Maybe: "Thank you, your inquiry has been received and will be processed by our team within the next couple of days. You will be notified once your request is processed or if we have further questions." And then some more specific information like contact names with alternative email and/or telephone numbers could follow. Maybe even some links that answer common questions or point the requester to common documents, be creative.

What are your experiences with transactional email?

How do you handle transactional email on your company webpage? What are your experiences? Any lessons learned (the hard way)?

References

Nielsen, J.; Transactional Email and Confirmation Messages; http://www.useit.com/alertbox/confirmation-email.html

]]> http://www.michaelgaigg.com/blog/2009/06/30/design-guidelines-transactional-email/feed/ 2 Design Guidelines: Error Messages http://www.michaelgaigg.com/blog/2009/04/10/design-guidelines-error-messages/ http://www.michaelgaigg.com/blog/2009/04/10/design-guidelines-error-messages/#comments Fri, 10 Apr 2009 19:16:46 +0000 Michael Gaigg http://www.michaelgaigg.com/blog/?p=387 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

Avoid error messages if possible.
Explicit indication that something has gone wrong
Human-readable language
Polite phrasing without blaming the user or imply that user is stupid or is doing something wrong
Precise descriptions of exact problems
Constructive advice on how to fix the problem
Visible and highly noticeable, both in terms of message itself and how it indicates which dialogue element users must repair
Preserve as much of the user’s work as possible
Reduce the work of correcting the error (e.g. list of possibilities)
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. ]]> http://www.michaelgaigg.com/blog/2009/04/10/design-guidelines-error-messages/feed/ 0 Design Guidelines: 404 Error Pages http://www.michaelgaigg.com/blog/2009/03/09/design-guidelines-404-error-pages/ http://www.michaelgaigg.com/blog/2009/03/09/design-guidelines-404-error-pages/#comments Mon, 09 Mar 2009 17:25:15 +0000 Michael Gaigg http://www.michaelgaigg.com/blog/?p=335 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:

Tell visitors clearly that the page they're looking for can't be found.
Use language that is easy to understand, non-technical, friendly and inviting.
Display an error message that explains what could have gone wrong
Offer means to recover (e.g. list site's naming conventions, spell check functionality, most common proplems).
Offer links to other important links of the site (e.g. most popular, homepage, FAQ).
Provide a way for users to report a broken link (easy form, email the webmaster)
Do not display ads.
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!]]> http://www.michaelgaigg.com/blog/2009/03/09/design-guidelines-404-error-pages/feed/ 4 Design Guidelines: Radio Buttons versus Checkboxes http://www.michaelgaigg.com/blog/2009/02/23/design-guidelines-radio-buttons-versus-checkboxes/ http://www.michaelgaigg.com/blog/2009/02/23/design-guidelines-radio-buttons-versus-checkboxes/#comments Mon, 23 Feb 2009 17:11:05 +0000 Michael Gaigg http://www.michaelgaigg.com/blog/?p=302 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:]]> http://www.michaelgaigg.com/blog/2009/02/23/design-guidelines-radio-buttons-versus-checkboxes/feed/ 5 Design Guidelines: Breadcrumbs http://www.michaelgaigg.com/blog/2008/12/10/design-guidelines-breadcrumbs/ http://www.michaelgaigg.com/blog/2008/12/10/design-guidelines-breadcrumbs/#comments Wed, 10 Dec 2008 07:04:45 +0000 Michael Gaigg http://www.michaelgaigg.com/blog/?p=208 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: Read complete blog entry]]> http://www.michaelgaigg.com/blog/2008/12/10/design-guidelines-breadcrumbs/feed/ 1 Design Guidelines: ‘About Us’ Page http://www.michaelgaigg.com/blog/2008/11/14/design-guidelines-about-us-page/ http://www.michaelgaigg.com/blog/2008/11/14/design-guidelines-about-us-page/#comments Sat, 15 Nov 2008 03:53:03 +0000 Michael Gaigg http://www.michaelgaigg.com/blog/?p=163 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.]]> http://www.michaelgaigg.com/blog/2008/11/14/design-guidelines-about-us-page/feed/ 4 Design Guidelines: Pagination http://www.michaelgaigg.com/blog/2008/11/06/design-guidelines-pagination/ http://www.michaelgaigg.com/blog/2008/11/06/design-guidelines-pagination/#comments Fri, 07 Nov 2008 03:20:29 +0000 Michael Gaigg http://www.michaelgaigg.com/blog/?p=115 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!]]> http://www.michaelgaigg.com/blog/2008/11/06/design-guidelines-pagination/feed/ 0 Design Guidelines: Content http://www.michaelgaigg.com/blog/2008/10/20/design-guidelines-content/ http://www.michaelgaigg.com/blog/2008/10/20/design-guidelines-content/#comments Mon, 20 Oct 2008 19:09:17 +0000 Michael Gaigg http://www.michaelgaigg.com/blog/?p=50 speak the language of your users. Become a word detective, use google trends. Words are the basic elements of links, get them precicely right to provide strong information scent. Identify trends, don't invent them. Look at the evolution of language. Stop 'waving' on your webpage. Get to the essence of the message! 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. Online marketing is about giving attention (versus offline marketing is about getting attention). ]]> http://www.michaelgaigg.com/blog/2008/10/20/design-guidelines-content/feed/ 4 Design Guidelines: Links http://www.michaelgaigg.com/blog/2008/10/15/design-guidelines-links/ http://www.michaelgaigg.com/blog/2008/10/15/design-guidelines-links/#comments Wed, 15 Oct 2008 20:21:01 +0000 Michael Gaigg http://www.michaelgaigg.com/blog/?p=44 Design Guidelines for Links

Color and underline link text (exceptions include lists of links like a navigation menu)
Reserve underlining for links (do not underline text that is not a link)
Use different colors for visited and unvisited links (e.g. shades of blue)
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)
Avoid changing the font style on mouse over
Avoid tiny text for links
Use appropriate spacing between links or use a clear separator
Use links primarily for navigation between pages
Link text must be describe the target as short and precise as possible AND hold this promise!

]]> http://www.michaelgaigg.com/blog/2008/10/15/design-guidelines-links/feed/ 1