usability > crumbs

Last weekend (from 5th to 7th June) I attended the event “iweekend 2009″ in Valencia. This event consists on creating a unique startup with the participation of 50 people belonging to different branches of a business (from marketing people to programmers, SEOs, web designers,…). I attended the event in order to participate in the design team, providing all my knowledge related with usability (interaction design, information architecture, prototyping,…).

The website that we all developed during the weekend was Rifalia, a raffles system. All the participants were divided in 5 groups of experts: programming, design and usability, communication, marketing and accounting.

The design and usability team was formed by 4 people (a small but effective team): Boro Moliner,  Rodrigo Barona, Carlos Matallín y Clara Vázquez:

We begin our work by defining the main pages of the application and drawing the interaction between them:

And to design the logo:

After this, we began to prototype (paper prototyping) the main pages:

It was time we began to design the home page with the participation of the marketing team. whose main objective was to transmit users’ reliance with the brand and the products being offered.

After keeping in mind all these aspects, our main goal was to generate the HTML and CSS pages in order to facilitate the programmers’ task:

During the event, I was told to use some links that can facilitate the web design and the HTML and CSS programming task:

960 grid system

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Xscope

Created for designers by ARTIS Software & The Iconfactory, xScope is a powerful set of tools that are ideal for measuring, aligning and inspecting on-screen graphics and layouts.

 YUI Reset CSS

The foundational YUI Reset CSS file removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions.

I attach a picture of one big inconsistency that my job mate Carlos Fernández found yesterday in the building where we both work.

I felt surprised when I saw such a big inconsistency in an emergency door. This is a bit risky, don’t you think so?? I am hoping that the alarm won’t ring anymore in the office!!

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?

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

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…

There are several webs that perform vertical searches within the tourism sector. You can find a huge repository in this link. I’ve been visiting lots of this kind of websites this week. Here is my top list considering issues related, specially, to usability and web design:

In Kayak Hotels the results list and all the functionalities it inculdes is, from my point of view, the strength of this site because of:

- The huge and useful possibilities of filtering (ubication, price, category, services,…) and ordering (popularity, price, name, category, distance to a particular point) results

- The 3 different ways it offers to visualize the results list (list, map and pictures)

- The information of every hotel in the results list is complete (picture, name, map, price, services,…) and very well structured, so is easy and fast to read and compare hotels by just taking a fast look to some of the hotels in the list.

From my point of view, the details of the hotels in kayak is not as good as the results list is. The information of the detail is showed using a small pop-up that’s divided with some tabs containing all the information about an hotel. I prefer viewing all the information about a hotel in the same page. The fact of using tabs makes your navegation slower and it hides information that could be important behind the other tabs.

Hotels.com is among my top list because:

- The ways to filter and order the results list it offers are very simple. There’s only a box that contains 3 drop-down lists where you can select the ordenation (price, category and popularity), the location of the hotel (city center,…) and the services or comodities (near the beach, swimming pool, for families,…)

- Inside the detail of an hotel the system proposes you similar hotels that may be of your interest

I think that hotels.com might be one of the favorites of low users because it doesn’ t offer functionalities that could make them doubt or feeling insecure.

From my point of view, atrapalo.com is the site that has both, the results list and the hotel detail very well-done.

- It has hotel results list very similar to the results list of kayak.com. It also presents the results view in 2 ways (list and map)

- The detail of an hotel contains a lot of useful information in the same page (valorations, price, how to arrive, services, pictures, and alternative hotels). In some places, I think that the page is too much full, so the information design could be better.

About booking.com I can say that:

- The results list is similar to atrapalo.com/hoteles and kayak.com/hotels , but it adds a detail to the filters that I find interesting: beside every option of the filters it shows you how many hotels with this characteristics there are.

- About the detail of an hotel I like, specially, the way the information is structured (information chunking) and the information by itself too (similar than atrapalo.com/hoteles)