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!!

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.

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?

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

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

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