UX-Findings: Develop UX Skills, Mobile UX & #littlebigdetails

Hi,

today I want to share some interesting articles & videos that inspired me in the last months.

Develop UX Skills

In my opinion one important goal of an UX expert should be to further develop know how about users and UX patterns over the time. As a team lead it is important to me to communicate this also to Junior UX Designers.
The article "Time with Users: Set Personal and Company Goals" by Jakob Nielsen was very inspiring for me to directly connect the time spent observing people with the personal goals.

Mobile UX: Luke W-How-To-Videos

The well-known UX expert Luke Wrobleski shared some interesting How-To-Videos on YouTube. He focuses on concrete UX problems in mobile development and explains solutions in detail.

LittleBigDetails - readme.io

There are several websites that collect littlebigsdetails - e.g. littlebigdetails.com. One nice example is the Password-Field of ReadMe.io.Check it out!

Login-Screen of readme.io

Regards, Claudia

Web content accessibility and heuristic evaluation

Hello together,


today I want to introduce you to the WCAGs 2.0 - the web content accessibility guidelines and how to evaluate an existing web site using heuristic evaluation methods as described by Jacob Nielsen.

Web Content Accessibility Guidelines [1]
These guidelines are a good basis to work on when designing web pages for different groups of users including for example visual impaired people and more or less describe what to consider. Important to know is, that these "principles" are just recommendations and not rules.

The W3C consortium describes the WCAGs as follows:

Web Content Accessibility Guidelines (WCAG) 2.0 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general.

These guidelines cover a wide range of different topics like how perceivable or how understandable a site is or how good the interoperability is when just using a keyboard. It would be too much now to go into detail but I want to list just a few principles which are the most important ones for me:

1. providing alternatives for all elements: this means, providing ALT attributes for images or video content
2. the contrast between the foreground and background should be a good one to make it easy to differ between real information and background info
3. the UI should be navigable using a keyboard only - so setting the TabIndex attribute is important
4. when designing forms, provide the "name" attribute for the input fields and put them into relation with labels using the "for" or "label" attribute
5. when structuring web content, use the H1-H6 elements to do so, 'cause usually screen reader applications rely on them
   

Considering just these 5 principles make it much more easier to build good accessible web pages.


Heuristic evaluation [2]


Heuristic evaluation is, according to Jacob Nielsen, a discount usability engineering method for quick, cheap, and easy evaluation of a user interface design.

Heuristic evaluation works the following way:

1. find "principles" - so called heuristics on which the evaluation should be based on. In our case, these heuristics would be the WCAG principles. Such principles are usually defined by a group or a single person, commonly used and good recommendations to follow but should not be considered as fixed rules
   
2. according to these principles, evaluators - who are usually usability experts - go through the whole interface of the application step by step and take notes, when the UI does not consider one of the principles. Usually, a good number for the amount of usability experts to use is between 3 and 6, 'cause one expert will only find 35% of all the problems. 5 experts will find about 75% of the existing problems.
   
3. after each evaluator has finished his process, they all meet together and compare their notes. Based on these notes, they rate the problems using the "severity rating". Therefore, each problem is assigned a number from 0 to 4, whereas 0 means, that there is no problem and 4 means, that it is a complete mess and a usability catastrophe
   
4. at the end, these results are summarized and presented to the developer team or the customer

When designing web content according to the WCAGs and using heuristic evaluation you can make your content better accessible and help impaired people understanding your web content.

Heuristic evaluation is a quick method for reflecting your UI and finding major usability problems according to various heuristics. These heuristics can be the WCAGs as well as other defined principles.


[1] ... WCAG web site [http://www.w3.org/TR/WCAG20/]
[2] ... Heuristic Evaluation [http://www.useit.com/papers/heuristic/]
[3] ... How to Conduct a Heuristic Evaluation [http://www.useit.com/papers/heuristic/heuristic_evaluation.html]

Inspiration needed?

Hi,

today I want to share some interesting links:

• Interaction Designers - Flickr Group
• Blogarticle "20 cool interaction design concepts"

And a great website is the "Wall of Deliverables". The idea was born at the IA Summit 2008 in Miami and the aim of the site is to share examples of deliverables.

Have fun, br Claudia

Designing Interfaces (Jenifer Tidwell)

Hi,

last weekend I read the next book - Jenifer Tidwells "Designing Interfaces". In the post about Design Patterns I already mentioned the related website.

For me the book doesn't contain new information. It's a nice compendium of the main patterns and I think the book could be helpful if you want to find a solution for a specific problem.

If you don't know much about the design patterns than you should read the book. The various patterns are really well explained and visualized with good examples.

Br Claudia

PS: @Techtalker - This book is available at the foyer.

Design Patterns - Part 1 (of 2)

A few days ago I talked with collegues about design patterns and now I want to share with you several pattern libraries available on the web.

UX Patterns Explorer (Quince)

The UX Patterns Explorer is a Silverlight Application and you can browser through different UI Patterns using different modi. For example you can find patterns via a Wireframe or Tag connections. Every pattern is described with the problem, the solution and several "real life" examples.

Yahoo Design Pattern Library

The Yahoo Design Pattern Library provides UI Patterns sorted by the users tasks. Every UI pattern explanation contains also a paragraph concerning the accesibility.

UI Patterns

The UI Patterns website provides articles about several patterns, as well as screenshot collections sorted by the patterns.

UI Pattern Factory

Like the others the UI Pattern Factory is a collection of UI Patterns and there is the possibility to suggest new patterns and add examples using flickr.

In the next days you can find the second Part of the Design Pattern-Libraries here.

Br, Claudia