usability > crumbs

Web designers tend to use the same icon (a magnifier) for representing 2 actions (search or zoom). It’s an standard for both icons. We can see it easily by making a search in iconfiner.net. If you make a search with the word “search” you obtain this results:

If you make the search “zoom” we obtain similar results:

Should we standarize this object for just one of the two actions? Which one do you think it fits the best?

Here a list of webs using a magnifier icon for searching:

• Facebook
• Live Search
• Apple
• Atrápalo

Here a list of webs using a magnifier icon for zooming:

• Flickr

In my opinion, the icon can be used perfectly for both actions. However, I recommend to use them convined with text that describe the functionallity and never use the magnifier icon for searching and zooming in the same website.

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,…

Profile

Mariano Calle is an Usability Senior Consultant (responsible of IA and Accessibility services in the UPS Department of everis Madrid)

He studied Business Administration and Management which helped him have a wide vision of business. It’s four years since Mariano has been working on usability, accessibility and user-centered design, topics that, for him, are useful and necessary. Before dealing with usability Mariano was a web developer and graphic designer.

Previous projects

He worked for Telefonica, Movistar, Vodafone and Amena, carrying out projects of Architecture, user tests, developing models for functional test applications and even defining processes for mobile terminals.

He has also been at Terra, redesigning internal portals. In Correos, conducting assessments of accessibility and in public administration (with several projects focusing on user design and content managers).

Mariano spent one year in Mapfre, working in one of the largest computer projects that there are currently in Spain, updating the internal operational management of insurances.

In addition, he has worked for Santillana Network, Carrefour, TNT or the Thyssen Museum in training projects and e-learning, corporate presentations, multimedia content, etc..

Interview

Mariano has answered some questions about usability:

1.What do you like the most about usability?
Users will always surprise us.

2.What do you like the less?

Usability is a solution for bad design. Good design includes usability and doesn´t need two designers with different skills, one for graphic concepts and other one for interaction.

3.Do you think usability is taken in mind enough?

Everyday, usability consultants, interaction designers an HCI professionals have more career opportunities. It means usability is taken in mind by companies. But it is not easy yet to find good experts in web or mobile tools.

4.Tell us a bad user experience you have had

I don´t like Nokia phones.

5.Tell us a good user expreience you have had

My first time with an iPod. MP3 was very boring until Apple decided to reinvent the concept about listening music.
Nowadays, I like to discover new artists in songza.com.

Jordi Andrés Solsona was born in Lleida in 1983 and he is a multimedia engineer and a usability consultant since 2005.

When he was 21 he got his undergraduate degree in multimedia at the UPC university, Terrassa. Looking forward something more technical, he became a multimedia enginner at La Salle Ramon Llull, Barcelona.

In 2005 he became a fellow researcher and research manager at de UserLab’s Human Interaction Group, la Salle, focused on Multimodal Interfaces and development of new methodologies for Human Computer Interaction paradigms.

Since 2007 to nowadays, Jordi Andrés is an usability consultant at the User Perception Services. Specialized in both qualitative and quantitative user testing of software and website, and he also works on some information architecture and accessibility projects.

Jordi has answered some questions about usability:

1.What do you like the most about usability?

I like thinking that my job makes people live easier.
I also love seeing things before they get to their main target. I like to see them evolving, improving.

2.What do you like the less?

Usability is often underestimated, specially in this country. It’s frustrating when you work hard on something and when you see the final product you realize that many of the problems spotted are still not fixed. To sum up, people is not concerned enough.

3.Do you think usability is taken in mind enough?

Feel like i already answered this one:)

4.Tell us a bad user experience you have had

The last one was when I bought a train ticket via internet, i was going home that day and coming back to barcelona, where i work, the following day. I had no problems buying the tickets, but I had to print them in a machine located at the train station. I got there, typed my code and, surprise! that machine displayed that i bought both tickets for the same day.
I printed to tickets, just to try, and everything was correct. It happened that the machines only displayed the last travel date.

5.Tell us a good user expreience you have had

Everytime i use a google product

There are lots of prototyping tools that useful for performing this function. Between them here’s the combination of applications that I usually use to get prototypes with both good design and interaction.

Axure

The strength of axure is the html export functionality, the ease to define interactions (links, conditions, and dynamic panels) and to define widgets.

Its weak point is the short list of draw options that it offers (there is no option to rotate objects, to import images or to degradate fill colors).

The conclusion is to use Axure only if you have to develop prototypes of low definition. Otherwise use, in combination with Axure, a drawing application. My choice: Fireworks.

Fireworks

The strength of fireworks is the large and easy to use options of drawing it provides. Lots of options are available to make a good design. The interaction with the program is very simple (for me easiest than photoshop). The problem appears if you want to make a html exportation…

The solution, then, is to use this tool to draw, copy and paste it to the axure document (.rp) that contains de rest of the prototype.

Wishes

The perfect prototyping tool would be, for me, a combination of this two programs.

Another thing to point out is: it would be amazing that the exportation to html of Axure was made with HTML using CSS. Nowadays, the HTML exportation of Axure does not separate the content of the presentation.

Whats nav2us?

Similarly to panoramio, nav2us (still in beta version) is a social network where users can share photos of places or points of interests. However, nav2us goes one step forward and allows people to download routes or points of interest created by other users to their GPS navigator.

As applications such as google maps, the functionality that nav2us offers can be included in a website with the aim of adding value (but you have to pay for it). For example, in business like restaurants, shops, hotels,…the fact of including this tool in their website would be an interesting functionality for people owing a GPS navigator. One example of the implementation of this service is Husa Hoteles which has added nav2us inside the information of every hotel.

How it works?

When you want to download a place to your GPS navigator you just have to choose a navigator model (Garmin or TomTom) and connect your GPS by USB or, alternatively, download the GPX archive. You can also download the KML file to see the place in Google Earth.

Nav’it! Google Maps

This is an even newer functionality provided by nav2us that allows you to send your google maps results to your GPS.

That’s an interesting project. We’ll follow its future steps…