We are creatures of habit; why it's worth sticking to some design conventions

I was looking to subscribe by RSS to a blog, but could I find the link I was looking for?! A moment of frustration.

Having scrolled up and down, and having tried different pages, I eventually found it.

It's big enough you might think, so why didn't I "see" it, despite having looked at it?

It even says "RSS subscription" in capital letters!

Later that same day I was on another website and found the RSS icon easily, despite it being far smaller.

So, I thought, in the first case the RSS icon might be big, but it's also green and round. For whatever reason, the RSS icon has always been orange, and square:

That must be why I didn't find the first one easily.

However, later that day, yet another site, and this time the RSS icon is square, though small and GREY, almost transparent. And yet I had no problem "seeing" it.

So, it's quite possible that not only does the colour, size and shape count, but also its location (left / right, top / bottom) and its proximity, not only to the content channel or item in question, but also to other page elements.

All these properties: size, shape, number, colour and location work together to make a familiar element recognisable. Not to the mention the fact that many web conventions shape user expectations (logo linking to home page, banner blindness, pop-up aversion among others).

There are various green circles on the blog (top); all competing with each other for your (my) attention, and blurring together with the branding of the site.

The overall effect is essentially an invisibility shield; impenetrable to the quick scan.

Although there may be aesthetic arguments in favour of a consistent colour scheme and original layouts, there are some design conventions that, for the sake of user efficiency and avoiding frustration, are just worth sticking too.

Erase and rewind: 4 ways to "delete"

Thinking about models for deleting files or messages...
I can think of 4, but which is best?

1. Delete (as in now and forever) e.g. Visio. It doesn't matter how long you've been working on that prototype, it can still be gone in less than a second.

   And why on earth would "Rename", "Insert page" and "Delete" be so close together?! :o
   
   

   1st lesson to remember: regularly save file under different names.

   2nd lesson: design products which avoid mixing up innocuous actions with potentially project/career-destroying ones.

   This would be a good point to refer back to one of Jakob Nielsen's original 10 heuristics:

   "Error prevention

   Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action."

2. Delete --> You sure? Yes / No e.g. Twitter.

   
   It's interesting to note that Twitter really emphasizes the fact that there is no "undo".

   I guess google applications have had a big impact on user behaviour and expectations...

   - Though shouldn't it be "no undoing"?!




3. Delete (move to recycling bin) e.g. Yahoo mail or Windows.
   
   

   Ok for medium - advanced users, and for those who have had a heart attack over some super-important file "disappearing".

   However, it's a pain if you're deleting a lot of files and it's not immune to mistakes, but the "Are you sure?" dialogue box is still a good safeguard.

BUT it's not that intuitive as a lot of users don't know they have a recycling bin!



4. Delete + Undo (e.g. Gmail) Probably still the safest method AND you get a confirmation message. Though if you really want to delete something, will it even let you?!
   

Know of any others?

Shopping "basket" or "trolley"?

- the icon used on Amazon.co.uk

A curious example of where the label doesn't match the image.

I wonder...

• Is an image of a trolley easier to identify than a basket?
• Is a trolley more closely associated with shopping?
• Is it a subtle way of encouraging users to spend more and fill up their trolleys rather than a basket?!
  
• Is this merely the same as the now out-dated floppy disc representing "Save".
  
• ...or a way to avoid choosing between the British English "Trolley" and the American English "Cart"?

Well, apparently not the latter, see amazon.com(!):

Google Wave

I love the idea of the Google "wave"; a move forward, away from traditional 1-to-1 email.

BUT, having been using Google Wave for a few days, there are a few things that jump out at me that could be improved.

Obviously it's a beta version or "preview"; some things will be fixed, others are just a question of changing habits and others may continue to confuse or encumber.

We will see.

• To start with, I like the fact that you can minimise the different windows individually: it leaves a cleaner working space and is better for convenience and privacy. The only option you see in the centre of the page is "New wave"; remniniscent of the Google search page.
  
  

However, adding icons, labelling with editable keywords or colour-coding the different blocks for instant recognition would make it easier to find the one you're looking for.

As it is, I end up having to drop down each block in turn:

In fact Gmail suffers from the same problem - a ton of links and options that all look the same and require reading - a step back towards tidy looking but laborious controls and navigation.

• Something I really don't like is that it adds my "avatar" to the top of each message; breaking the mental model I have of communicating with others. Currently it looks like the conversation is with 3 others, rather than between myself and 2 others: 3 in total.

• At this point in time you cannot remove someone if you've added someone by accident, which is just encouraging mistakes (and frustration). However, it looks like sooner or later it will be possible.


• It also assumes that we all will personalize our avatars as soon as we sign up, that the photo will be clearer enough to identify people easily, and also that you know what the people look like who you are communicating with.

Unfounded assumptions?

Maybe I'm unusual in not feeling the need to upload my photo.

People I know like to upload a picture of their car, cat, baby, something they identify as being representative of their personality, but not necessarily a passport photo of their face. The exception maybe in company use...

This means that the system of seeing who is in a coversation (or wave or whatever) is not very efficient: it requires holding the mouse over each non-photo to see who is included.

• Also, I figured the difference between a wave and a ping was that the first was more akin to email and the latter to chat.
  I liked the idea of a quick ping. However, in reality they appear to be the same.


In the image above you can see a ping window over a wave window: both have the same formatting options and you can add other users. The ping window is just smaller than the wave window.

• The search box seems to have been designed by programmers for programmers, the geek influence and design of this program is loud and clear(!). "Query", commands, and "Submit" not "Search"?!




• Another disadvantage to me is that it's a separate account to my email account, which means another account to manage. Maybe with time they will get rid of gmail and integrate the accounts (I would be quite pleased to be honest).

What's cool about Google Wave?

• It has the novelty factor of being able to see the other person typing in real time, - which makes it more interactive than email, though possibly counter-productive if you're watching other people type (slowly, clumsily or otherwise). --It could also lead to mistakes - people seeing things they're not supposed to while you gather your thoughts :o
• Increased functionality: add gadgets e.g. maps, weather, yes/no event organiser, and I assume these gadgets will only increase in number.
• The save search function could be useful and the way to find a recent wave (clicking on a contact) is nice.
  
  
• But most importantly, adios to long forwarded emails messages and downloading mysterious attachments. Hoorah!

Which prototyping tool?

There are quite a number of (flashy) prototyping applications becoming available. So, while trying out the new ones, I thought I'd share my experiences.

For the sake of completeness, I'll be going from paper to the most expensive trial version I can get my hands on!

The prototyping tool candidate list so far:

1. Paper
2. PowerPoint
3. Inkscape
4. Visio
5. Axure
6. JustInMind Prototyper 2.6
7. Adobe Fireworks

Things I'll be looking out for:

1. Quick, easy and intuitive: Is it quick to install? Do you need to be a whizz kid, or can anyone pick this up and go without feeling lost and out of their depth? How much of a learning curve is there?
2. Communication: Is the result an effective communication tool? Does it need to be supplemented with other documentation? Can it express interaction? - Anything that eliminates the need for extensive text descriptions is good to get projects moving.
3. Flexibility: Low-fi, hi-fi, compatibility between operating systems, browsers, export to HTML, PDF etc.
4. Complete: Does the application have everything necessary to get going? Are there stencils or (free) downloads available? Are there online tutorials to help advanced users get the most of the application and quickly shoot up the learning curve?
5. Robust and error-resistant: Does it crash? Delete pages too keenly? Can I recover earlier versions?
6. Ergonomically gentle: Too much drag and drop with the mouse is a killer and can lead to or aggravate Repetitive Strain Injury (RSI). Are there keyboard shortcuts? Is there a balance between drag, drop, click, type? Can other peripherals be used?
7. Value for money: Are the most expensive applications worth their licence fees? Is there a free alternative?

So, let's get started. Today: PowerPoint.

1. PowerPoint

- PowerPoint?! For prototyping?!

- Yes, I had to use it once for a project, a requirement of the client!

Reasons for using PowerPoint for prototyping

• You're new to prototyping and don't have a specialist application installed.
• If your client is very Microsoft Office oriented (it happens), and wants to be able to modify the documents, it may be one of the few compatible formats available for client - consultant collaboration.

Who should or would use PowerPoint for prototyping

An expert user of PowerPoint for presentations new to prototyping.

If you know how to set up templates, make graphically attractive presentations, use animation and links, you won't lose too much time and the end result can be decent.

It can be quicker than trying to figure out Visio say, especially if you download these web controls and widget stencils (without them, I would probably not bother).

http://www.slideshare.net/graiz/wireframe-powerpoint-parts

http://www.istartedsomething.com/20071018/powerpoint-prototype-toolkit-01/

http://www.mgitsolutions.com/blog/2009/01/23/powerpoint-wireframe-stencils-as-free-download/

Pros and cons of prototyping in PowerPoint

Pros:

• Being a visual format, it can be a good way to communicate users' needs.
• You can copy-paste away - images and text.
• Colours, animation, images and links can give it quite a bit of life and dynamism.
• Just about everyone has some way of viewing a Powerpoint document, even if in Google Docs, Open Office...
• It's fairly stable and can handle a lot of images (I've done 150+ page benchmarkings full of screen shots and not had any trouble with it crashing).

Cons:

• Unless you're all using the same version of PowerPoint, things will inevitably move out of place.
• It's not meant for prototyping, so there aren't a great deal of stencils available, although this number does seem to be growing.
• It's not likely to have the slick, professional look other prototyping or graphic design tools can offer, especially if you're using anything prior to Office 2007.
• If you have barely used Powerpoint, it's not going to be the best prototyping tool for you as it is not intuitive.
• It's not a tool user interaction designers can use if they want their peers to take them seriously! It's not a cool kids' tool!

Which button gets me a latte?

President - Hang it all. What's the point? It's a disaster.

All advisors - Stop!! stop! No! Don't! Wait!

Advisor 1 - That button launches all of our nuclear missiles.

President - Well then, which button gets me a latte?

Advisor 2 -Erm, that would be the other one sir.

President - What idiot designed this thing?

Advisor 3 -You did sir.

President - Fair enough.

Wilson, fire somebody!

Wilson - Yes sir, Mr President!

From the excellent Monsters vs Aliens, go see it!

Interaction for impact in advertising

Some examples of particularly spectacular advertising. The first one uses eye-tracking technology for a bit of user interaction!

The ads are from different awareness-building campaigns run by Amnesty International. As per usual, they can teach for-profit organisations a thing or two about persuability!

In the first example, the image, displayed on the side of the bus stop shows a woman being beaten by her husband, but, as soon as someone looks at the advert, the image changes to a photo of happy couple. The caption reads: "It happens when nobody is looking".

The second one shows a young boy walking towards you carrying a machine gun. The image carefully blends into the actual environment.

The third and final one, also from Amnesty International, splits the image in 2 horizontal parts: the upper one shows the top half of a healthy woman in a safe environment screaming to be heard, whilst the bottom one shows a girl from the waist down living in poverty and in the clutches of someone else. Together, the 2 parts make one woman. The caption reads: "Make some noise for those who cannot be heard".