Having the right tools is one of the main ingredients for an efficient good work. To build my wireframes I use Omnigraffle, which in my opinion is the most seamless and simple tool for the purpose.
So here is a list of stencils that I consider to be must haves:
Image by Benoît Meunier
It’s been 3 weeks since I started using Office 2011 for Mac and I’m already wishing all apps for Mac had a ribbon.
Let me explain a bit my experience:
Until 2 years ago I was exclusively a Windows user. Sure I had already had some experiences with other Operating Systems, but not on everyday basis.
When I started using a Mac regularly I had to struggle against some habits, however there is one thing I never got used to – the damned inspectors (floating tool windows), that various applications for Mac have adopted and are always getting in your way!
These damned windows have so many things that negatively affect my experience, like:
In Office 2007 I was used to having a ribbon where my tools were organized in a effective and neat way, that adapted itself to my selections, basically I didn’t had to worry about it! When I started used Office 2008 (and other Mac software) and had to work with those inspectors I really felt frustrated with the amount of time I lost just taking that window out of my way!
So when I saw the ribbon in Office 2011 I was really satisfied. My experience with Office has greatly improved and I just wish that other tools, like Omnigraffle for example, adopt a similar solution instead of those lame tool windows…
Below are some UI Patterns resources that I find useful in my everyday wrok life. Hope you find it useful 
Quince is a beautiful website that allows you to search for patterns in an unusual way. You can search patterns by User Task, Tag Relations and Wireframes. I think their intention is good however I think they’re not very successful at classifying patterns what causes some usability problems. Regardless they have some useful stuff. Here’s the link: http://quince.infragistics.com/
2. Pattern Tap
One of my favourites! With an extensive number of collections, you find almost everything you want here. The downside here is that there are no description and rationale for each pattern.
A really good resource and with a strong rationale behind each pattern. The examples could be better.
Similar to Welie.com however I think it has some findability problems. Shows some good examples.
A somewhat different resource, clearly oriented for designers.
Very similar to Pattern Tap.
This website has been growing and it’s becoming one of my favorites. Here you find various patterns and can also see comments and opinions from the community that are certainly helpful.
Really, really useful when you are trying to describe how a pattern works!
http://developer.yahoo.com/ypatterns/
Very complete resource of patterns.
The ultimate guide for social interfaces
http://www.designingsocialinterfaces.com/patterns/Main_Page
One of the few available. Really useful!
One of the many wonders AR has brought to our everyday lives
If you have an iPhone check the app at http://itunes.apple.com/us/app/word-lens/id383463868
So Google knows my country (Portugal), he knows my search habits, my translation habits, and much more. So why the hell the default Google Translate languages are Spanish to English??
Lately I’ve been using Google Translate more often because I was assigned a project which requires some technical knowledge. Every technical term either I want to translate it to Portuguese, to better understand its meaning, or translate it to English to know what is the English word/expression. I’ve been doing this for some weeks know and the suggested languages were Afrikaans to English. Every time I used Google Translate I had to, at least, change Afrikaans to Portuguese.
To my astonishment, today I noticed it was no longer Afrikaans to English but Spanish to English! What a hell?? Spanish?? Why?? Google why did you put Spanish to English and not Portuguese to English?
Initially I gave Google some benefit of doubt and checked my Google Account settings to see if Spain or Spanish was anywhere defined, but no. I have as my country Portugal and as my default language English.
By simply fixing this to my home country language, Google would give me a better user experience and I wouldn’t certainly be frustrated by wasting tine setting up my translation options every time I use Google Translate. It’s simply a crappy experience!
Note: I don’t have anything against Spain or Spanish language I just would like to have my preferred settings rightly automatized.
I was one of those people who when you talk about replacing the good old paper books said: “I like having the physical stuff!”, “I don’t believe the book as we know is going to disappear anytime soon”.
Well, when I got a Kindle this Christmas my opinion shifted. I still believe that books are going to stay around for some more years, specially those collector’s editions and books that are really special for some reason. But other books that fall in the OK category, technical books, work related books, etc. I’ll definitely bet in e-book format.
Regarding the Kindle, its aesthetics and user experience, I couldn’t be more impressed! Its size, simplicity, button placement are things that you know it had to had some deep study behind it, as it perfectly adjusts to my hands and reading position.
Well the screen is something amazing that really blew my mind off when I first looked at it: “It really feels like a book!!!” – this was my first comment. I think it says it all
I’ll leave you with some resources for Kindle. I’m still exploring, but here it goes:
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.
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.
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.
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.
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.
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 BrettHere’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.
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.
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:
source: https://secure.wufoo.com/signup/1/
source: http://www.linkedin.com/
source: Gmail
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).
source: http://en.wordpress.com/signup/?blog=1
source: https://www.linkedin.com/secure/register
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:
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.
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.
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 !
