Michael Gaigg: Über UI/UX Design

8Sep89

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:

23Feb7

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