Improving design of web pages

Hi,

today I just want to post a short article about improving the design of your web page. Therefore I want to link you to the post of Matt Cronin who collected some ideas about improving factors.

In his article "8 Layout Solutions To Improve Your Designs" he presents 8 different kinds of new web controls to improve designs. Almost all of them are based on new web technologies like AJAX.

The reason why I got aware of this post is the fact, that I am currently having a problem with a menu that takes away a lot of space. Therefore I thought about using a different control to improve the layout and save some space on the page. After doing some paperprototyping I found a good way to layout the menu using the Accordion control.

The following pic shows my paperprototype of this Accordion control.


In his post, Matt Cronin describes Accordin controls as the following:

Accordion menus are based on the same concept as sliders and tabs: it takes a large amount of information and encapsulates it in a smaller area.

So this control is exactly what I need. And he also provides some good examples and links to existing controls and sample sites which reduces the effort of searching for good controls.

So if you need some inspiration to improve your design, check out the 8 layout solutions. Maybe you'll find some nice controls.

Kind regards,
Harald

Paper Prototyping @ Usability Week

Hi,

last week I visited the Usability week 2009 in London and today I want to share with you my experience regarding paper prototyping.

On the last day we should work in groups to create a paper prototype in about 1 hour and then test this prototype with a person from another group. I have to say it was really fun and it worked really well. Especially we recognized how easy and FAST a design can be tested and improvements can be found.

In the following pictures you can see fast and creative work :-)

The topic of the paper prototype was part of a shop application where the user has the possibility to create a customized duvet.

In the following short video you can see the start of the test session and our favourite sentence "We are not testing you, we are testing the application".

Hopefully in the next days I have time to add more interesting topics related to the Usability Week.

Br, Claudia

Scrum in a real life project

Hi,

today a short video found on the "All about agile"-Blog about scrum in a real life project (you can turn the sound off :-) ).

Scrum methodology from Soul' on Vimeo.

Greetings from London,

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]

Role of Usability in the agile process

Hi,

in the last weeks we often have the discussion @ TT which role should the usability engineer have in the agile/scrum process. Is the usability engineer a member of the team or on the same level as the product owner?

In the article "Twelve emerging best practices for adding UX work to agile development" on the blog "AgileProductdesign.com" Jeff Patton advises as a main point that the UX practitioners should be part of the customer and product owner team. This has the advantage that the UX expert is in the position to decide and influence what should be build in the next sprint.

In my opinion it's not always clear how this can be handeld during the sprints to keep up the communication between the development team and the UX team - also to get fast feedback and not wait until the end of a sprint.
Another interesting question is how efforts/estimation should be handled? If the UX team is part of the product owner team and not part of the "TEAM" the efforts will not be part of the estimation at the beginning of the sprints. I'm not sure if this is good. Jakob Nielson also mentioned in his blog-article "Agile Development Projects and Usability" that story points should be assigned for the interaction design and usability.

Do you have any opinions and suggestions on this?

Br, Claudia