Michael Gaigg: Über UI/UX Design

29Feb0

Windows 8 UX design guidelines

Posted by Michael Gaigg

The Windows 8 UX design guidelines are out. They are part of the Dev Center for Metro style apps and provide some nice learning resources that include

  • Design Principles - Understand the basic principles of great Metro style app design.
  • UX patterns - Learn how to correctly implement common patterns in Metro style apps like navigation, commanding, and touch interactions.
  • UX guidelines - Discover recommendations and requirements for building Metro style apps with the proper look, feel, and user-interaction model.
  • Downloading design assets - Get started designing apps quickly with a portfolio of reusable wireframes, redlines, fonts, and other useful design resources.
  • Assessing usability of apps - Assess your app's design to ensure the user experience is outstanding, and that users will find it useful, usable, and desirable.
20Dec0

Highlights for Week 50/2011

Posted by Michael Gaigg

12Feb0

Highlights of Week 06/2011

Posted by Michael Gaigg

15Jan0

Highlights of Week 02/2010

Posted by Michael Gaigg

  • Does usability exist? How Usability is like Intelligence (by Jeff Sauro) - very interesting analogy to intelligence and a first approach to relating the three usability areas Effectiveness, Efficiency and Satisfaction and how (and how much) they contribute to Usability 'u'.
  • The Case Against Vertical Navigation (by Louis Lazaris) - While I think the argumentation in this blog article is mislead by current design trends and biased in some way, I find 'shaking our world' good from time to time so we can re-think the way we're used to doing things.
  • Bad Usability Calendar 2010 - What would be the New Year without another one of their great Usability Calendars - Enjoy!
  • Curating Comments Threads (by Chris Coyier) - interesting discussion and good points about how to make comments more meaningful.
  • Live, Free webcast: Confessions of a Public Speaker - Probably you've heard already, Scott Berkun has his book out, and he's offering a free, 90 min. webcast about it, don't miss, sign up now.
  • The future of UI will be boring (by Scott Berkun) - Scott seems to be on mushrooms lately judging by the level of activity. Here another really good read about the future of UI design, love the 'rookie trap'.
  • jQuery 1.4 has been released (by John Resig) - right in time for jQuery's birthday, big news for a great JavaScript library, better iframe support, flexible events. My tip: get it!!
Suggested reading:
2Jul0

Free book online: Search User Interfaces

Posted by Michael Gaigg

Marti Hearst generously made her upcoming book "Search User Interfaces" available for reading online. She is definitely not a newcomer to the scene and the book for sure not a Best-Of compilation, moreover the book is written in an academic fashion that backs up its theses usability studies, log studies, or some other form of proof (like it!) - like Harry Brignull states: "Caution: actual thought may be required when reading this book."

Contents: Search User Interfaces

The book has two main parts: search fundamentals (Chapters 1-7) and advanced topics (Chapters 8-12).

0: Preface
1: Design of Search User Interfaces
2: Evaluation of Search User Interfaces
3: Models of the Information Seeking Process
4: Query Specification
5: Presentation of Search Results
6: Query Reformulation
7: Supporting the Search Process
8: Integrating Navigation with Search
9: Personalization in Search
10: Information Visualization for Search Interfaces
11: Information Visualization for Text Analysis
12: Emerging Trends in Search Interfaces
References
Index

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

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

What is Usability?

Posted by Michael Gaigg

Before I dive into guidelines and tips of designing and implementing usable websites I feel it is important to define and outline what Usability is. Please allow me at this point to cite several sources that I find essential.

Usability is the

  • Effectiveness (accuracy and completeness to achieve goals)
  • Efficiency (resources expended in relation to the accuracy and completeness)
  • Satisfaction (comfort and acceptability of the work system to its users)

with which specified users achieve specific goals in particular environments. [ISO9241]

Basic Principles

Alan Dix formulates in his book 'Human-Computer Interaction' that above definition can be concluded into three basic principles:

  • Learnability (the ease with which new users can begin effective interaction and achieve maximal performance)
  • Flexibility (the multiplicity of ways the user and system exchange information)
  • Robustness (the level of support provided to the user in determining successful achievement and assessment of goals)

Five Quality Components

Jakob Nielsen uses human characteristics to extend these principles by saying:
Usability has five quality components:

  • Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design
  • Efficiency: Once users have learned the design, how quickly can they perform tasks?
  • Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
  • Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
  • Satisfaction: How pleasant is it to use the design?

with the addition of 'utility' (functionality): Does it do what the user needs?

Implications for Usability Design

Implications drawn out of above definitions are that pages shall strive (devote serious effort or energy) to provide:

  • Consistency of presentation and controls across the site
  • Logical and natural organization of information (clear structure, systematic, clear and meaningful labels)
  • Contextual navigation (how much information is given for providing a context for the user; where is he/she in the site? Where can he/she go? How can he/she go back?)
  • Efficient navigation (the amount of time and effort the user needs to exert in order to move around the site)
  • Adequacy of feedback (are user interactions clear, are requests answered, do commands elicit the right response?)
  • Searchability (how effectively the site content can be sought in search engines?)
Suggested reading: