Michael Gaigg: Über UI/UX Design

12Mar0

Highlights of Week 10/2010

Posted by Michael Gaigg

Another week of fantastic articles! A little digging (or reading my blog 😉 ) will save you time and buying books hehe.

13Feb0

Highlights of Week 06/2010

Posted by Michael Gaigg

Maestros, at this point a quick note that I will be back writing my own content shortly (have quiet some stuff in my queue). So long, the highlights of week 6/2010:

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

World Usability Day 2009

Posted by Michael Gaigg

Today is World Usability Day (check out events in your area)!

What is World Usability Day?

"World Usability Day was founded in 2005 as an initiative of the Usability Professionals' Association to ensure that services and products important to human life are easier to access and simpler to use. Each year, on the second Thursday of November, over 200 events are organized in over 43 countries around the world to raise awareness for the general public, and train professionals in the tools and issues central to good usability research, development and practice."

"It's about making our world work better. It's about "Making Life Easy" and user friendly. Technology today is too hard to use."

A word about Usability

Usability is well-defined but often simply summarized in three key questions:

  • Who are your users?
  • What are their goals?
  • How can you help them achieve those goals?

Another Key Question to Ask

Today and here I want add another key question that businesses need to ask themselves:

  • What is the business reason for supporting this goal (=task)?

Without asking this question it's really hard to generate revenue and being successful in both, terms of business and metrics to evaluate success. As a side-note: It also gets more difficult to sell the benefits of Usability and it's methodologies to stakeholders.

14Oct0

5 Usability Newsletters to Follow

Posted by Michael Gaigg


Yes, you heard right, "Newsletter", this old-fashioned, 'traditional' thing that pollutes our mailboxes. Well, at least according to Jakob Nielsen email newsletters are more powerful than stream-based media (RSS or other social media feeds) in terms of maintaining a customer relationship, i.e. because newsletters need to be deleted manually versus 'dropping off' the users' main page.

5 Newsletters well worth following

Alertbox

Jakob's column on Web usability is probably the most prominent and longest running newsletter out there. Jakob has been publishing his research results and findings in his bi-weekly 'Alertbox' since 1995.

Subscribe to Alertbox

UIEtips

Jared M. Spool and his team publish their high-quality research, interviews with grands like Luke Wroblewski, Donna Spencer, Dana Chisnell et al and special offers on User Interface Engineering. Like Nielsen he's been around for ages and their conference is on sequel 14 this year.

Subscribe to UIEtips

SURL

The Software Usability Research Laboratory (SURL) was initiated in the Fall 1998 under the direction of Barbara S. Chaparro who has over 19 years of experience designing and evaluating user interfaces and conducting research in human-computer interaction (HCI). The goal of the lab is to provide usability services and research to the software development community and to train students on HCI with real-world projects.

Subscribe to SURL

Measuring Usability

Jeff Sauro maintains a very interesting site & newsletter at Measuring Usability. He has been pushing the limits of usability engineering for a few years now in the hopes of moving toward more objective implementations of user data. His articles are published irregularly but when they are, they deliver.

Subscribe to Measuring Usability

UI Design Newsletter

Every month Human Factors International (HFI) reviews the most useful developments in user interface research from major conferences and publications. Their UI Design Newsletter covers the full range of human-computer interaction, including development, HCI issues, I/O devices, multimedia, documentation, and training.

Subscribe to UI Design Newsletter

You know another Newsletter?

Have I missed something? Post it in the comments section.

5Mar0

Benefits & Principles of User-Centered Design

Posted by Michael Gaigg

We, the people, have been around for quite some years now. Computers, software, applications and the web not so much. Therefore it is clear that applications have to adjust to the people and not the other way round.

Many design principles have developed throughout the decades, but the main difference of user-centered design to others is that

UCD tries to optimize the user interface around how people can, want, or need to work, rather than forcing the users to change how they work to accommodate the system or function.

Purpose of UCD

UCD answers questions about users and their tasks and goals, then use the findings to make decisions about development and design.

UCD seeks to answer the following questions:

  • Who are the users of the application?
  • What are the users’ main tasks and goals?
  • What are the users’ experience levels with the application?
  • What functions do the users need from the application?
  • What information might the users need, and in what form do they need it?
  • How do users think the application should work?

Benefits & Return of Investment

  • Increased usability
    • Higher degree of customer satisfaction
    • Continued business
    • Higher revenues
  • Project management optimization
    • Focus on important functionality early
    • Unforeseen user requirements
  • Reduced costs
    • Training costs
    • Help-Desk calls and service costs

UCD Principles

  • Focus on users’ needs, tasks and goals
  • Spend time on initial research and requirements
    • Identify your target audience and observe them (accomplishing their tasks)
    • Let users define product requirements
  • Emphasis on iterative design process
  • Evaluate system on real target users

Summary

Nobody could state it simpler than Susan Dray: "If the user can’t use it, it doesn’t work".

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

Page 2 of 212