Michael Gaigg: Über UI/UX Design

7Jan0

Best Practices for accessible Images

Posted by Michael Gaigg

Graphics can be of great benefit to the accessibility of a Web page by providing

  • Illustrations
  • Icons
  • Animations
  • other visual cues that aid comprehension for sighted individuals

When designing for people with disabilities too often we forget that we are not designing only for the blind. We must consider disabilities of all types. Graphics can be useful especially to individuals with certain reading disabilities, learning disabilities, attention deficit disorders, or cognitive disabilities.

Basic Rules

  • Do not use color alone to convey meaning
  • Choose contrast so that text is easily distinguishable from the background
  • Communicate the purpose of the graphic (not its appearance) through meaningful alternative text
  • When graphics require complex descriptions use the longdesc attribute, a link to an alternative page, a description in the context itself, or a “D” link
  • Use empty alt text for decorative, transparent, spacer, and redundant images
  • Try to limit the amount of text in graphics
  • Do not use effects that flicker or produce a strobe-like effect
  • Use images as backgrounds only if they do not convey important content (since it is impossible to add alt text to background images)

Best Practices

Level 1

Level 1 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Ensure that all information conveyed with color is also available without color 2.1 c Ensure that information is available through other style effects (e.g., a font effect), through context (e.g,. comprehensive text links) or through mark-up (e.g., the title attribute).
Until user agents allow users to control flickering, avoid causing the screen to flicker 7.1 j n/a
Provide text equivalent for Images, graphical or animated buttons, spacers, bullets 1.1 a <FORM action="..." method="post">

  <INPUT type="button" alt="Click this button to verify form" value="Verify" onclick="verify()">

  <INPUT type="image" name="submit" src="button.gif" alt="Submit form">

</FORM>

Level 2

Level 2 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen 2.2 c For more information check the online paper about Effective Color Contrast.
When an appropriate markup language exists, use markup rather than images to convey information 3.1 n/a Mark up complex equations with e.g. MathML.
Avoid causing content to blink 7.2 n/a n/a
Avoid movement in pages 7.3 n/a i.e., hide/show content or change presentation (movement and colors).

Level 3

Level 3 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page 14.2 n/a n/a

References

Tagged as: , , , , , , , , , , , , , , , , , , , , , , , , No Comments
10Dec2

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

About Me

Michael GaiggI'm Michael Gaigg, Lead UI Engineer at Esri's Prof. Services.

I have over 8 years of experience in designing map interfaces and can't stop thinking about improving them.

Help me by sharing your thoughts, ideas and comments.

Categories

Popular Posts

Latest tweets

Posting tweet...

Tags

Accessibility analytics best practices book color content contrast css design esri examples facebook feedback free google guidelines html5 inspiration ipad jacob nielsen javascript Joel Reyes jquery map mobile navigation PHP requirements section 508 silverlight techniques tips tools trends tutorial twitter typography UCD ui usability user User Testing UX web Web Design

My Zazzle Products

User-centered Design Cup Mug
User-centered Design Cup Mug
Yes and No Tee Shirt
Yes and No Tee Shirt