Wireframing Guidelines

Dec 7th

Posted by Susana Vilaça in Usability

1 comment

matt-brett-design-wireframe

When I started wireframing about 1 year ago my biggest difficulty was figuring out what to wireframe. What should I wireframe so that the designer and, ultimately, the developer understood well my ideas?

During this year I was able to come up with a set of guidelines that help me through this process. It’s still a work in progress but here it goes.

Search Engine Optimization (SEO)

Before you start wireframing you must have an idea of the structure of your website. Without a structure you’ll be wireframing in the dark. So make your sitemap, task flows, etc. but take into account SEO. SEO has a direct impact on your site taxonomy and therefore on the type of pages your site will have. Here’s a great article to help you with this: http://www.seomoz.org/ugc/seo-wireframing.

Grids

What is the width of the pages you wireframe? How do you layout the elements?

I usually wireframe sites for 1024×768 resolution and as I consider the width of my page (usually between 940px and 960px) I must also take into consideration the vertical area visible when the page loads, because this is where you want to put the most important elements. This area, also as I call it “area above the fold”, measures 600px.

Laying out you’re elements can be hard sometimes. However there are some guidelines to help you. The 960 grid system divides the width of your page in columns that you can use to dimension your page elements: http://960.gs.

Design

Starting “decorating” your wireframe can be one of the biggest mistakes you can make. When the wireframes go to the designer he/she may choose to take the design into a completely different direction and all the effort you had turns out to be a total waste of time. Other possibility is that the designer gets stuck with what you made and the final result it’s not that good. So keep your wireframes simple, don’t use color unless necessary (stay with white, black, and shades of grey), use standard fonts, like Arial or Helvetica, and focus on the Usability of your interface, not on its look.

Be rigorous

When I built my firsts wireframes I used to think they were perfect and nothing could go wrong. However when the site was being developed I got myself thinking “Damn, how could I forget this?”.

The truth is, on the beginning when I was wireframing my pages for the best case scenario. And when things got out of that scenario the result was away from perfect. That’s when I realized that I must think of every possible variation of the elements I put on my pages. For example, when filling a form where do the validation errors appear? Or, in a page that lists news, if the title of one of them is very long, how does the element behave?

It’s true wireframes aren’t intended to represent function, however you must have a very clear idea of how it will function if want to do a good job.

Test your wireframes with real content

Sometimes your wireframe may be perfect but the for the content those type of pages will have, it will suck. For example for a product page, you do your research and come up with a product page that clearly explains your product, all it’s characteristics, and you fill it with “lorem ipsum” text, you think that it’s gonna work  just well. However when it’s time to put the real content on the pages you see that you have much more or less content that you expected, and you see that your layout is not going to work that well.

I know that it can be complicated to anticipate the  real content of a page but try to be realistic. The time and dedication of your client and of the one who’s going to make the contents, can be a good anticipation.

Other resources:

* image from Matt Brett
, ,

Designing web forms

Nov 25th

Posted by Susana Vilaça in Usability

1 comment

Here’s a little secret that I’d like to share with you:  Most people just aren’t all that thrilled by forms. They  don’t like filling them in, they don’t like thinking about them, and they certainly don’t like the idea of having to design them.

by Caroline Jarret

If you already had to make some kind of form for a site or application you know that designing the right form it’s not that straightforward. If you ask to much information – users don’t like, if you don’t make them pretty -  users don’t like, if you don’t choose the right layout -  users get confused, and so on.

So why it’s so important to invest in forms? Usually forms are a way users register on your website, buy something, etc. All core tasks of a website. If forms are difficult to use, ugly or ask too much information, users won’t make the step of filling them. Users will just quit the task, get out of your site and move to a nice and friendlier one.

So I leave you here some guidelines to consider when designing forms.

1. Choosing the layout

Choosing the right layout may vary depending on the length of your form and the space available on the page. The type of layouts generally used are:

  • Top aligned labels: this type of layout increases readability but requires more vertical space. If your form is long, choosing this type of layout may not be a good idea.

top_aligned

source: https://secure.wufoo.com/signup/1/

  • Right aligned labels: this is one of the most used layouts nowadays. It allows an easy association between label and input field, however the labels’ readability is reduced.

right_aligned

source: http://www.linkedin.com/

  • Left aligned labels: because labels are left aligned, their readability increases. That’s why this type of layout is used on forms that require users to pay extra attention on what is being asked. This layout has the disadvantage of being difficult to associate label and input field.

left_aligned

source: Gmail

2. Validation and errors

Validation and errors display is a must on every form, however you must be careful on how you present it. Regarding validation, presenting feedback as data is entered is usually the best approach. If it’s clear and concise, it provides a very good contextual feedback. But be careful to not overdo the validation. Use it only on fields with potentially high error rates.

Errors occur when the data entered is not all valid. Errors must be avoided by using inline validation and/or help tips. However they eventually occur, and when that happens users must clearly know where and what is the error and how to fix it. The best approach is to place a block on the top of the page with a list of the errors or/and, on the form, highlight the fields with errors (usually with a red contour).

erros1

source: http://en.wordpress.com/signup/?blog=1

erros2

source: https://www.linkedin.com/secure/register

3. Success or Error messages

One of Nielsen’s 10 Usability Heuristics is Visibility of system status. This heuristics says that “The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.” Success and error messages serve exactly the purpose of providing feedback to users about the form submission. For example, if you just bought something online you want to know whether your order was well submitted or not. That’s why that on the end of every form submission users must see some success or error message, usually accompanied by some illustration.

Besides the topics I cover on this post, there are other issues you must take into account, like, for example, form styling. In an era where design is so valued you mustn’t present forms like a set of text and boxes. You must beautify the form so the users feel the magic.

Useful resources:

, ,

World Usability Day 2009 – Designing for a Sustainable World

Nov 12th

Posted by Susana Vilaça in Usability

No comments

WUD

Today, 12th November, we celebrate the World Usability Day. This year theme is Designing for a Sustainable World which basically is about showing how usability can be applied to all we do and build:

Designing for a Sustainable World focuses on how our products and services impact our world. We look at all products and services, whether they are buildings, roads, consumer products, business, services or healthcare systems; throughout their life cycle. The impact focuses on – our environment, energy, water, soil, and more. Have the materials and processes that have been used been recycled and are they re-usable? Are they user and environmentally friendly? These are questions we all must consider as we design, purchase, use and dispose of products each and every day.

http://www.worldusabilityday.org/

Around the world, a series of events happened to celebrate this day. Unfortunately, here in Portugal we didn’t organize any event… However APPU (Associação Portuguesa de Profissionais de Usabilidade) built a website called “Sustentabilidade e Usabilidade” where people can send good and bad examples of products of our everyday life. It’s a great initiative and I hope we see more of this in Portugal in the future.

, , ,

What drives you? – motivation theories

Nov 7th

Posted by Susana Vilaça in Inspirational

1 comment

So I decided to move to my own personalized domain. I thought it was time to leave some topics in the old blog behind since I’m no more working on them.

So to inaugurate my new blog I leave you with an inspiring video about motivation. It was a talk given by Daniel Pink at TED. I truly believe that it’s your motivation and persistence that can get you where you want. So I hope you enjoy this video as much as I did :) !

, ,