usability > crumbs

When I went to the cinema last week I found myself in this uncomfortable situation:

Doors in supermarkets are automatic because people get in and out with their hands full of stuff. In most of cinemas people get into the cinema with popcorns in one hand and a drink in the other hand, so…why not to put a “push” door instead of a “pull” one? This is a question os usability, we still have things to think about!

What do you think? Have you found yourselves in similar situations?

On May 9th 2008 the website dedicated to classifieds and directories craiglist was awarded in the Web 2.0 Awards in the 1st place. I was amazed to see this result as this website does not meet any of the design principles of web 2.0 design set (lots of columns, not separate top section, not simple navigation or bold logo, no strong colors, no rounded corners,…).

Why do you think craiglist has won this award? Do you agree?

Design principles:

1. Simplicity: we should use as few features as are necessary to achieve what we need to achieve. Users’ attention is a finite resource, we must fix their attention in the things that are important (goals of the web page)
   
2. Fewer columns: Less is more. Fewer columns feels simpler, bolder, and more honest. We’re communicating less information more clearly.
3. Separate top section: Make the top of the screen (the main branding & nav area) distinct from the rest (the main content).
   
4. Simple navigation: Make global navigation visible (large, bold, clean and obvious). It’s important for informating the users about where they are and what options do they have.
   
5. Bold logos: A clear, bold, strong brand - incorporating attitude, tone of voice, and first impression - is helped by a bold logo. Here’s a list a 58 creative logos
   
6. Bigger text: Make more important elements bigger. What do you want to stress in your website? Your main functionality, things that generate business,…
   
7. Strong colours: Bright, strong colours draw the eye.Use them to divide the page into clear sections, and to highlight important elements.
   
8. Rich surfaces, gradients and reflections: Realistic surface effects (like drop-shadows, gradients and reflections) help make a visual interface feel more real, solid and “finished”. Making stuff look solid and real can make it look “touchable”, which is likely to appeal.
   
9. Cute icons / Simple and clean: Icons play an important role in Web 2.0 design. Today we use fewer, better icons that carry more meaning.
   
10. Bagdes and flowers: Probably one of the most popular trends in the era of Web 2.0 are “Badges” with various round and square corners and modified flowers.
    
11. 1,2,3,…Start!: The information provided by clients has to be explained in an understandable way. A web-developers should make sure the user understands instantly, what the company is offering, what are users’ adventages and what is actually required for using the service.
    
    
12. Tag clouds: an alternative navigation that helps to view trends
    
13. Large input fields: For lots of webs, the first step is making a search
    
14. Rounded corners: New CSS techniques for achieving rounded corners have helped make this style hot again. The friendliness of rounded corners is in keeping with the comfortable, informal tone of many web 2.0 sites.
    
15. Whitespaces. Breathing space: The layout of Web 2.0 sites might be described as minimal. With a focus on legibility and ease of use, good use is made of white space. White space allows important information to stand apart, provides rest for the eye, and imparts a sense of calm and order.
    
16. Free: If you’ve got to convince visitors to sign up for your killer app, giving away FREE accounts surely can’t hurt.
    
17. Striking and descriptive tagline: to strengthen the mark
    

Technologies

1. Ajax (Drag & Drop, auto-complete,…): When needed, use this amazing technology. Don’t forget visiting scriptaculous
2. Maps:Lots of web 2.0 applications use a map as a primary o complementary tool. Think if it’s useful and if it is use it.

Socialization

1. Commenting
2. Rating and reviewing
3. Send to a friend
4. Share
5. Subcribe (RSS, email,…)
6. Save (favourites)

References:

• Web design from scratch
  
• Smashing magazine
  
• Master new media
• F6 Design

Have you ever heard about the “Jocs interempreses“? It’s a catalan solidarity initiative that organizes a Business Olympic Games. Any catalan company can participate and the funds are destinated to some solidarity projects. There are a lot of sports to participate: paintball, karts, soccer,…The event is organized anually.

This year I have participied for the first time in the female football team of “everis” and we have won the competition. I recommend this experience to everybody. It’s a good oportunity to meet people you know in a context outside of the office, it’s another way for learning to work in a team and at last but not least…this is an oportunity to contribute with solidarity projects.

That’s the 2008 everis female football team:

In the top (from left to right): Maria Josefa Fuente Parada,  Cristina Herrada Fresno, Núria Diéguez Navarro, Cristina Arrufat Chavarri

In the bottom  (from left to right): Raquel Burillo Pérez, Clara Vázquez Fornells, Alejandra Cumin Vasquez

There are some aspects in the world of accessibility which are, at the same time, a bit inaccessible. In a first point of view, things can be percieved as accessible, but when thinking a little more, the whole thing doesn’t appear to be as accessible as it seems.

JAWS: an accessible software, an inaccessible price.

One example is the famous screen reader JAWS. This application is, with no doubt, a big help in accessibility terms, but the problem raises when talking about the software price. The fact that makes this accessible service inaccessible is the high price of the software. The Standard JAWS has a price of $895 (Reference: JAWS official website), an inaccessible price for a lot of people requiring this product.

Accessible code, inaccessible structure

A website can have the AAA certification. However, the problems can begin when a blind user uses a text reader to read the content of the web page. The fact of obtaining the highest level of accessibility from a validator doesn’t confirm this website is easy to read for a blind user. The internal structure of the code should be the optimal for a screen reader. This means, for example, not having a <div> which contains a long left menu before the <div> which contains the content. The reason not to do that is that the screen reader would read the left menu before (taking a lot of time) and the content afterwards which is, for the user, the most interesting thing.

Accessible map, but does it make sense?

When on the last Easter holidays I travelled to Roma I was amazed to see a map in S.Maria Maggiore square in Braile language. I first thought it was a nice initiative, but, is it useful for a blind person to have this information in this circumstances? I dont’t think so,…