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.

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

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.