11 Principles of Interaction Design explained

This post isn’t intended to be an exhaustive list of interaction design principles, its merely an introduction to the subject. And I’m definitely not going to attempt to enter the lions den of defining what ‘interaction design’ is, that’s for another day!

1. Match Experience & Expectations

When using a product or service for the first time there is likely to be an element of learning needed to get to grips with it. This learning curve can often be an uncomfortable experience especially if the proposition doesn’t feel familiar.

By matching the sequence of steps, layout of information and terminology used with the expectations and prior experiences of the user the friction and discomfort of learning a new system will be reduced.

Matching your audience’s prior experiences and expectations is achieved by using common conventions or UI patterns. Des Traynor and Eoghan McCabe from Contrast put together a great presentation for FOWA Dublin last year all about conventions which is well worth a look. It introduces the importance of conventions but more importantly highlights when they should be broken.

2. Consistency

As well as matching peoples expectations through terminology, layout and interactions the way in which they are used should be consistent throughout the process and between related applications.

By maintaining consistency users learn more quickly, this can be achieved by re-applying in one part of the application their prior experiences from another.

An added bonus of keeping elements consistent is that you can then use inconsistency to indicate to users where things do not work the way they might expect. Breaking consistency is similar to knowing when to be unconventional as mentioned above.

3. Functional Minimalism

“Everything should be made as simple as possible, but no simpler.” Albert Einstein

The range of possible actions should be no more than is absolutely necessary. Providing too many options can detract from the primary functions and reduce usability by overwhelming the user with choices. To achieve the zen of ‘functional minimalism’:

  • Avoid unnecessary features and functions
  • Break complex tasks into manageable sub-tasks
  • Limit functions rather than the user experience

4. Cognitive load

Cognition is the scientific term for the “process of thought”. When designing interactions we need to minimise the amount of “thinking work” required to complete a particular task. Another way of putting it is that a good assistant uses their skills to help the master focus on their skills.

We need to understand how much concentration the task requires to complete it and create a user interface that reduces cognitive load as much as possible. A good way to reduce the amount of ‘thinking work’ the user has to do is to focus on what the computer is good at and build a system that uses the computers skills to the best of its abilities. Remember that computer are good at:

  • Maths
  • Remembering things
  • Keeping track of things
  • Comparing things
  • Spell Checking and spotting/correcting errors

5. Engagement

In User Experience terms engagement measures the extent to which a consumer has a meaningful experience. An engaging experience is not only more enjoyable, but also easier and more productive. As with many things engagement is subjective so the system your designing must engage with the desired audience; what appeals to a teenager is not necessarily what their grandparent would also find engaging. Beyond aligning with the appropriate users, control achievement and creation are key.

The user should feel like they are in control of the experience at all times, they must constantly feel like they’re achieving something and also be able see the results through positive feedback or alternatively feel like they’ve created something.

In his book ‘Flow’, Mihaly Csikszentmihalyi describes a state of optimal experience, where people are so engaged in the activity they’re doing that the rest of the world falls away. Flow is what we’re looking to achieve through engaging interactions. We should allow users to concentrate on their work, not on the user interface. In short keep out of the way!

6. Functional Layering

The Pareto principle (also known as the 80-20 rule), in the context of interaction design, is the rule that 20% of the functionality is used 80% of the time. Therefore we should make the most common or important functions easiest to find. We can do this by hiding or reducing the prominence of infrequently used or advanced functions.

  • Look for functions that are not essential to the core tasks, or which are shortcuts for advanced users.
  • Consider introducing default settings and preset choices for new users or people who either don’t wish to or aren’t experienced enough to access advanced functionality.

Functional layering allows experienced users to access advanced functionality easily without hindering beginners. The idea is that as a user progresses they will naturally discover how to access such features without being overwhelmed early on.

7. Control, Trust & Explorability

These three elements are fundamentally important to any system. If users feel in control of the process they will be more comfortable using the system. If the user is comfortable and in control they will trust that the system will protect them from making unrecoverable or unrecognised errors or from feeling stupid. Trust inspires confidence and with confidence the user is free to explore further.

8. Error Prevention, Detection & Recovery

The best way to reduce the amount of errors a user makes is to anticipate possible mistakes and prevent them from happening in the first place. If the errors are unavoidable we need to make them easy to spot and help the user to recover from them quickly and without unnecessary friction.

Error Prevention
Prevent errors by:

  • Disabling functions that aren’t relevant to the user
  • Using appropriate controls to constrain inputs (e.g. radio buttons, dropdowns)
  • Providing descriptive, clear instructions and considering preemptive help
  • As a last resort provide clear warning messages

Error Detection
Anticipate possible errors and provide feedback that helps users verify that:

  • They’ve done what they intended to do
  • What they intended to do was correct

Its important to remember that providing feedback by changing the visual state of an object or item is more noticeable than a written message.

Error Recovery
If the error is unavoidable provide clearly marked ways for the user to recover from it. For example provide “back”, “undo” or “cancel” commands.

If a specific action is irreversible it should be classed as critical and you should make the user  confirm first in order to prevent slip ups. Alternatively you can create a system that naturally defaults to a less harmful state. For example if I close a document without saving it the system should be intelligent enough to know that it is unlikely that I intended the action and therefore either auto-save or clearly warn me before closing.

9. Mousing

In my daily interactions ‘mousing’ is becoming less of an issue as I begin to rely more on touch screen interfaces such as my iPhone and iPad. However, in the classic desktop environment ‘mousing’ relates to the ease in which you are able to move between controls, which is described best through Fitts’ law.

“The time required to click an object is proportional to the distance and inversely proportional to the object size.” Fitts’ law

Fitts’ law is a model of human movement in human-computer interaction (HCI) and ergonomics which predicts that the time required to click an object is proportional to the distance and inversely proportional to the object size.

With key functions or sequential mouse-operated controls we need to maximise the size of the controls and minimise the distance between them. This not only improves efficiency but in certain instances can reduce the risk of error.

  • Consider what the most common or typical mouse movements will be on each screen.
  • Where possible, place elements that will be used together in close proximity to each other.
  • Be particularly conscious of transactions that require a combination of mouse and keyboard controls. Consider ways to optimise for both styles.

10. Affordance

Affordance is the quality of an object that allows an individual to perform an action, for example a standard household light switch has good ‘affordance’, in that it appears innately clickable. In short the physical properties of an object should suggest how it can be used. In the context of user interfaces, affordance can be achieved by:

  • Simulating ‘physical world’ affordances e.g. buttons or switches
  • or keeping consistency with modern web standards or other interface elements e.g. underlined links or default button styles.

11. Hierarchy of Control

The hierarchy of influence between elements should be clearly apparent. Generally, controls which affect an object, should be grouped with the object, such as zoom controls on a map.

Controls which influence a group of objects should be associated with the entire group, forming a hierarchy.

Mocked up example showing hierarchies of control

 

Advertisements

The World’s worst best website – redesigning MoneySavingExpert

Back in October Damian Proctor (Redweb’s Head of Design) and I were asked by Web Designer Magazine to pick a website that we felt represented ‘bad’ design, explain why and offer up a solution of how we’d improve it.

Web Designer Magazine (October, issue 163)

Web Designer Magazine (October, issue 163)

We didn’t want to choose something obvious or easy. We wanted to challenge ourselves by picking a website that was well known within the UK, on some level successful and then look to improve upon it. We’re both strong advocates of the adage ‘good designers redesign, great designers realign’ so wanted to show how our chosen design could be iteratively changed to best meet the needs of its users rather than just redesigning it based on an emotional response to aesthetics. We recorded the process we went through to highlight each iteration and help us to write about it later!

With Damian responsible for the visual design I took lead on the user experience and UI design.  The split in responsibilities and iterative approach seemed to suit a blog post double bill, starting with this one which covers our initial thoughts through to a new prototype UI. Damian has then taken up the baton and run flat out to the finish line leaving tales of visual design, brand development and our final solution in his tracks. No doubt his post over at Randomapricot will be far better than my atrocious metaphor!

Picking a bad design

Having asked friends, family and the wonderful world of Twitter to come up with suggestions we settled on what we felt was the ideal example of a bad yet successful website, enter MoneySavingExpert.com.

According to Hitwise MoneySavingExpert has been the number 1 UK Business & Finance website since 2006. This year it ranked as the 100th most visited website in the UK whilst the forum ranked as the 10th most popular social network. It receives over 7.5 million unique visitors a month, supports 25 full-time staff and annually raises over £100k for charity, in fact raising enough money that they’ve setup their own charity just to handle the administration of the money, and yet this is all achieved without displaying adverts or charging users.

Current situation

With 3 million email subscribers and over 1/2 million forum members they have a social obligation to make the site perform as efficiently as possible. Its clear that there is a large and active community around the site but the design is flawed enough that it hinders rather than helps its users. In effect MoneySavingExpert is successful in spite of its design.

MoneySavingExpert.com - before

MoneySavingExpert.com - before

Clarifying the proposition

In their own words MoneySavingExpert’s proposition is to “save you money on anything and everything by finding the best deals and beating the system… based on detailed journalistic research and cutting edge tools.” They do this through several channels, the main being a weekly email.

The proposition is nowhere near clear enough, the importance of the email is lost amongst the crowded design and confused by the heaviness of content. Similarly the unique way in which they’re funded isn’t immediately apparent.

Simplicity and reducing noise

Following our initial research we wanted to show that with minimal effort we could noticeably and positively impact on the design. One of the biggest problems we faced was the amount of visual noise cluttering the design. with this in mind ambiguous icons and unnecessary graphical elements were removed, the usability of basic elements (such as calls to action) were enhanced and all instances of repetitive content were taken out. Instantly the design seemed cleaner and clearer as well as giving us a better idea of what we had to work with, what content and functionality we had to focus on and how far we could push the design.

Spring cleaned current design

Spring cleaned current design

Improving structure and layout

noise Once the initial clean up was complete we soon realised that, intentionally or not, the design was roughly built on a five column grid. Our first iteration was tweaked to fit and the foundations of our design started to take shape. I also took the opportunity to further improve the layout. Graphical text was replaced, the number of colours used reduced and primary navigation simplified.

Optimised design with grid

Optimised design with grid

Back to the drawing board

With the content stripped back and a basic structure applied, I switiched to my trusty layout pad and started sketching out new solutions. To help retain familiarity with the existing design I kept the prominent right column and grid system but made it more focused by dividing up the content based on whether it was financial advice or related to the site itself (e.g. about Martin Lewis, how MSE is funded). The latter, being less important, was placed within the right column so as not to distract from the main content.

Sketched wireframes

Sketched wireframes

MoneySavingExpert is described not as a website with an email, but more an e-mail with a website, with this in mind I treated email subscription as a primary function so moved it away from the right column and placed it in a more prominent position.

Global elements were next on my agenda. Search was moved up into the header and the primary navigation made more consistent by subtly changing things like the labels, order and spacing.

Within the main body money saving features were grouped together and placed below the email signup to help reinforce the benefits of subscription and support regular visitors looking for the latest financial advice.

Martin Lewis, the man behind MSE, has written several money saving books all of which can be purchased via the site. As the proceeds go straight to charity they were worth highlighting but not at the expense of the sites main objectives so they were placed together below the financial advice and offers. Beneath the book shop went any additional supporting content such as free tools and the visitor poll.

Wireframe (Axure prototype)

Wireframe (Axure prototype)

Although it seemed like I’d made loads of changes to the wireframe it still felt familiar.

A new visual design

Once happy with the wireframe I handed across to Damian to work on the visual design. Part 2 of this post explains Damian’s approach and reveals the final design. Read part 2 on Randomapricot now.

But before you go, I’d love to hear what you think. Better? worse? Rubbish approach? Please feel free to leave a comment, as always any feedback is really appreciated.

Master User Experience design an interview with .net magazine

Back in November I was approached by Craig Grannell who asked if I’d like to contribute towards the cover article for .net magazine’s December issue. I jumped at the chance and was really pleased to have been given the chance to comment along-side the likes of Leisa Reichelt, Dan Saffer, Andy Budd and Luke Wroblewski.

With .net describing the article as “demystifying the process (UX) behind web design and development’s fastest-growing and potentially most important industry” I thought it would be worth me posting my responses to some of the questions I was asked.  Enjoy!

.net magazine (December 2009, issue 196)

.net magazine (December 2009, issue 196)

What does user experience mean, as far as you’re concerned?

To me user experience is all about the way in which people interact with a product or service and how they feel about that interaction. It’s about providing a great experience that successfully meets the needs of the people who use it. UX design can often be confused with user interface design but its so much more than that, it encompasses the complete experience someone has with a product and the organisation responsible for it, from the initial handshake right through to the happy ending.

Why does user experience matter? What are the benefits?

Taking a user centered approach to design results in a far richer and more rewarding solution when compared to more traditional methods. For users it means increased productivity and success and in turn gives a company greater advantage over their competitors.

The benefits speak for themselves really. Focusing on the user experience leads to increased revenue (or conversions), helps to reduce cost and promotes customer loyalty. If users are more efficient and effective their chances of converting are far higher. A good example of this was a recent redesign Redweb completed. As part of the redesign we looked at their reservation system and carried out usability testing throughout the project. This resulted in an increase in bookings of 123%.

Costs can be reduced both in the development of the product but also in regards to customer service. By carrying out sufficient research early on the whole team, including the client, are clear on what needs to be achieved and it also limits the chances of unexpected requirements cropping up towards the end.

Once deployed if the product is easier to use then customers have less reason to contact you. If the users are successful and therefore happier they become more loyal, and loyalty generally spreads to friends and family which in turn leads to increased revenue.

How do you approach user experience when creating websites and working with clients?

For me the most important aspect of starting any project is to first educate the client to the importance of a user centered approach. Sometimes clients can be overly keen to see something tangible straight away whereas we first need to fully understand the requirements of the business and the needs of the users. There are many research techniques Redweb use such as collaborative workshops with stakeholders or contextual interviews with  users. We like to continue the same level of openness we show early on throughout the project and involve our clients throughout to help them feel as much apart of the decision making process as possible.

Do you make use of process flows, wireframes and other diagrams, and prototypes? If so, how and why?

Project deliverables differ depending on the brief. Ultimately we like to work collaboratively as a team and openly with our clients and produce artefact’s wherever necessary. As a team Redweb focus on creating a functional prototype that we can use as a base of reference which can also be tested directly with end users and seen and played with by the client. Having said that, any prototype always starts with hand-drawn sketches.

Likewise, do you create user journeys and experiences/work with personality persona’s?

In the early stages of a project Redweb focus very heavily on understanding who the users are and how they’re most likely to interact with the system we’re designing. Personas can be a great tool to focus both the team and the client throughout the life-cycle of a project.

How do you test user experience/interaction and information architecture? What should you look for?

There are many ways to test the effectiveness of an information architecture but it’s as much about knowing what to leave out as it is what to leave in. It’s very easy to take on board everything that a user has to say but a lot of the time its not necessarily what they say but what they do that’s important. It’s about looking at the wider view. Its not so much about concentrating on the little details but trying to understand what they mean on a more global scale; is the tone of voice wrong throughout? Does the site poorly address the users mental model?  Their frustrations may not necessarily be with the interface that you’ve designed but the process they’re being made to go through; 20 questions when 4 will do, or highly personal questions that don’t seem relevant to the task.

What can designers do regarding testing if they have a really small budget?

These days there are so many options available to designers working to small budgets, you really are spoilt for choice. There are loads of services to help designers with remote testing, from apps like Websort, Treejack and Survs to iRise and ‘The 5 Second Test’. But I wouldn’t recommend relying purely on remote tools. With the growing popularity of remote testing designers can too easily overlook the benefits of meeting and speaking to users first hand. It doesn’t have to be in the form of lengthy and extensive lab based usability testing, it could be as simple as setting up a laptop in a coffee shop and offering people a free drink if they give you 5 minutes of their time to look over your latest design, it can provide invaluable feedback and if you pick a coffee shop with a rewards scheme and speak to 4 users you’ll have earned yourself a free coffee by the end of it!

What do people get wrong regarding UX in web design? What common mistakes do you see or misunderstandings do you find are rife?

From a designers point of view at times it can be easy to focus too much on the little details and neglect the bigger things about how a user arrives at the site, what task are they looking to complete and how do they go about achieving their goal. It’s always worth asking yourself ‘have I done enough to help them?’

With regards to clients they are becoming far better educated than they previously were but sometimes a little knowledge can be more damaging. They can form an opinion on a particular subject and it can be very challenging to move past it. The ‘3 clicks or less’ issue is a good example of this. Although the rule is a commonly held belief there is no scientific proof to support it. A study conducted in 2003 found there to be no correlation between the number of times users clicked and their success in finding the content they were looking for. Analysis showed that there wasn’t any more likelihood of a user quitting after 3 clicks than after 12.

What do you think the next big development in UX will be?

Usability testing relies on people telling us what they’re thinking either whilst they’re working through a task or explaining their actions in exit interviews. It helps us to understand ‘why’ they acted in certain ways but its not the most effective why as it doesn’t uncover subconscious actions or problems that they may have been too embarrassed to admit to. Eye-tracking can be very effective at uncovering what people are focusing on, the priority in which they look at things and the length of time they concentrate for but again it doesn’t satisfactorily tell us how the users feel about their experience and at what points their emotive responses are strongest. I think the next big steps will be in finding ways to measure this sort of response effectively.

Case study within the .net article

Case study within the .net article

If you made it through this far thank you for taking the time, and well done! I’d strongly recommend reading the full .net magazine article if you can get your hands on it as it’s far more interesting and well worth it. If you have any comments on anything I’ve said please add them as I’m always interested in receiving feedback.

techradar logo smallNote (added 13 January 2010): Craig Grannell’s article has now been added to TechRadar. Read the article “The Web Designer’s guide to User Experience” on TechRadar.


Mountain biking, misdirection and peanut butter sandwiches

Recently I took part in a 30 mile mountain bike ride. It was quite a challenge and on reflection made me think about not only my cycling ability but also user experience design… naturally!

This post explains how I’ve made the tenuous leap from mountain biking to UX and then to my thoughts on Jared Spool’s lunch.

My DorsetDirt experience

DorsetDirt

The annual event is a challenging loop around Dorset starting and finishing in Dorchester. Having grown up in the area the route looked pretty straight forward, the ride not too competitive, and on the day the weather was perfect.

I forgot to pick up an OS map before leaving home but made the assumption, based on previous experiences, that on registering for the event I would be given a route map, so wasn’t too worried. On arriving at the start no maps were available, only written instructions. The directions seemed clear but without a map or prior knowledge of the route I couldn’t be sure. I settled on the tactic of following the herd and for the first half of the ride it worked nicely. I simply made sure I stuck like glue to a decent sized group of riders and let them do the navigating.

As I reached the halfway checkpoint it became apparent that I was near the front and the only people leaving were in ones and twos. My plan to follow the herd looked like it might fail. I latched onto the biggest group I could find. At the first junction we stopped and asked each other ‘where next?’ We started making regular little mistakes, so I turned to the instructions for guidance in an attempt to figure it out for myself. Before long the group had split up and I was riding on my own. I was pretty sure I was on the right course but riding alone made my confidence drop.

The last instruction on the sheet before the penultimate checkpoint was to turn down a steep hill towards a Friary. After 2 miles of cycling I realised I had taken a wrong turn. I blamed myself for it and headed back in the opposite direction. After a short distance I met 2 other riders who had made the same mistake. I felt better knowing that I wasn’t the only one. We turned down the next junction we came to and rode for another couple of miles. We soon came across another group of riders all studying the instructions. We were all lost and couldn’t figure out how. Within a couple of minutes 2 more riders turned up from a completely different direction to the rest of us. We were all pretty tired and being so lost was starting to annoy all of us. We were in a steep sided valley and through one wrong turn we were having to ride up and down the valley to find the correct path out which made the ride all the more tiring.

We read back through the instructions one last time and I realised that the instruction to ‘turn right down a steep hill to the Friary’ was actually just a comment ‘there is a right turn down a steep hill to the Friary’. We had all made the same mistake and the error had cost us time and energy and had negatively impacted on our experience.

Clear sign posting

In retrospect my experience had a lot in common with issues I often see people face when taking part in user research.  Each time I made a mistake, however small, I instantly blamed myself and with each error my frustration grew.  I blamed my poor preparation, which in the case of the ride is probably quite fair, but conversely if my preconceptions were commonly held, that preparation wasn’t necessary,  then it should be catered for. An good online example of this is the application for a UK Driving License. It’s a legal document and you’d expect to have to submit some official information, but not necessarily what sort. The first step of the process deals with this well, it clearly explains who can apply and what is need to complete the application.

dvla

DirectGov lays out clear instructions at the start

During the ride the errors at first were slight and easily corrected but as the ride progressed my confidence dropped and I had a strong feeling I was the only person that had made mistakes. I’ve witnessed this regularly in usability testing, however much a system is at fault people will often blame themselves and believe that they’re alone in making it. It’s often not until you witness someone else make the same mistake that your confidence is reassured. When I took the wrong turn I felt far more confident when I saw another rider, even if they didn’t know the right way either, at least I wasn’t the only one!

“Any good global navigation scheme should, at a glance, answer the top three questions every user has at the back of their mind.” Derek Powazek

The lack of a route map wasn’t the only problem, the route wasn’t sign-posted either which meant even when you were on the right track there was still a sense of uncertainty. Derek Powazek in his A list Apart post ‘Where am I?‘ explains that for navigation to be successful it needs to answer 3 questions:

  1. Where am I?
  2. Where can I go?
  3. Where have I been?

Without the reassurance of clear sign-posting I became paranoid that if I needed to, I wouldn’t be able to find my way back and although ultimately I completed the ride and was therefore successful in completing my task I had more work to do to get there. The extra effort wasn’t necessary and negatively impacted on my overall experience.

My diminished experience wasn’t the fault of the organisers, they did a great job, they just hadn’t necessarily taken context into account. After 20 miles or so a lot of people would have been tired and hungry, and if they weren’t familiar with the course their chances of going wrong would be increased. When mentally and physically tired its far easier to make a mistake, especially if in my case it looks like the easier option!

Lessons learnt

In summary, there are 5 lessons that can be learnt from my experience and applied to web design:

  1. Understand your users preconceptions
    What preconceptions will your users have of your service or product? If they don’t match make sure its clearly communicated to the user.
  2. Instructions are only needed if the journey isn’t intuitive
    Optimise the interface and make sure instructional text is only used when absolutely necessary.
  3. Make sure each step of the way is clearly sign posted
    Where am I? Where do I go next? How do I get back to where I started?
  4. Consider the context
    Accessing a website at home in a comfortable environment with no distractions is a totally different experience to accessing the same site in a busy work environment or on the move via a mobile device.
  5. And lastly, provide free tea and biscuits at the end In other words make sure the finish-line is obvious and if there is no direct reward (e.g. a successful purchase) make sure there is a sense of completion or achievement.

Peanut butter and Jelly sandwiches

In writing this post I was reminded of a workshop technique that Jared Spool wrote about a while ago on the UIE blog which helps to illustrate the importance of clear instructions. In my next blog post I’ll be looking at Jared’s techniques and the use of instructions within web design.

If you’d like to read the next post as soon as its out subscribe to the RSS feed or follow me on Twitter.

The ultimate User Experience book league table

Since setting up my little pet project @UXBooks I’ve been meaning to write a related blog post but haven’t managed to put aside the time until now. At a similar time to me setting it up UXBookClubs started to pop up around the World. If you haven’t heard about the idea before basically:

A UX (User Experience) Book Club is a get-together in which people interested in the area of user experience come to discuss a book relevant to the discipline.

UXBookClub.org

So far there’s about 50 UXbookClubs stretching from Cologne to Canberra and from what I’ve seen more springing up every week. I’ve really wanted to get along to the book club in London but unfortunately haven’t been able to make it as of yet but fingers crossed I’ll be able to make the next one.

It’s interesting to see the diverse range of books discussed across all the various clubs. A nice feature of the UXBookClub wiki is a league table of all the publications that have been or are going to be read at one of the many meetups (thanks to @Rosenfeldmedia for the heads-up). I thought I’d recreate the list here with links to each of the books for reference. I’m embarrassed to say I’ve only read a handful of the books on the list so I’ll be doing my best to work through them some of them over the coming months.

User Experience Book league table

Sketching User Experiences
Sketching User Experiences

“Getting the Design Right and the Right Design.”

by Bill Buxton

Picked by: Washington DC, Sydney, Melbourne, New York, London, Israel, Atlanta, Dallas, Philadelphia, Toronto, Twin Cities


dont make me thinkDon’t Make Me Think!

“A Common Sense Approach to Web Usability.”
by Steve Krug

Picked by: Canberra, Memphis, LA, Boston


mental modelsMental Models

“Aligning Design Strategy with Human Behavior.”
by Indi Young
Picked by: Boston, Brisbane, New York, Portland


Subject to Change

“Creating Great Products & Services for an Uncertain World.” by Peter Merholz
Picked by: New York, Richmond VA, Boston, Sydney


Designing for the Social Web

by Joshua Porte
Picked by: Sydney, Chicago, Glasgow


The Back of the Napkin

“Solving Problems and Selling Ideas with Pictures.” by Dan Roam
Picked by: Silicon Valley, Portland


The Creative Habit

“Learn It and Use It for Life.” by Twyla Tharp
Picked by: Chicago, Dallas


Emotional Design

“Why We Love (or Hate) Everyday Things.” by Don Norman
Picked by: Brisbane, Toronto


Web Form Design

“Filling in the Blanks.” by Luke Wroblewski
Picked by: Ithaca, Warsaw


The Humane Interface

New Directions for Designing Interactive Systems.” by Jef Raskin
Picked by: Cologne


Designing for Interaction

“Creating Smart Applications and Clever Devices.” by Dan Saffer
Picked by: Austin


The Myths of Innovation

by Scott Berkun
Picked by: San Francisco


Designing the Obvious

“A Commonsense Approach to Web Application Design.” by Robert Hoekman Jr.
Picked by: Twin Cities


About Face

“The Essentials of Interaction Design.” by Alan Cooper et al
Picked by: Los Angeles


Designing Interactions

by Bill Moggridge
Picked by: Atlanta


Neuro Web Design

“What Makes Them Click?” by Susan Weinschenk
Picked by: Dallas


Web Design for ROI

“Turning Browsers into Buyers and Prospects into Leads.” by Lance Loveday
Picked by: Warsaw


Understanding Comics

“The Invisible Art.” by Scott McCloud
Picked by: London

Contribute

Like I say I’ve only read a handful of the books on the list. If you’ve read any of them it would be great to hear your thoughts and opinions on them. Which is your favourite? Are there any obvious omissions that you think should have been discussed?

Also if you’ve been to one of the many UXBookClub meetups it would be interesting to hear what you think about them. If you have any thoughts on this feel free to add your comment or reply via Twitter @paulseys

TweetDeck and its worsening usability flaw

I wrote a post back in March about TweetDecks ‘other actions’ menu and how it bugs me slightly. I just downloaded TweetDeck v0.25b and the thing that bugged me before has just go worse!

Don’t get me wrong I still love TweetDeck and its integration with Facebook looks like a move in the right direction. However, its frustrating to see such a good App deteriate through the overload of functionality.

The story so far

To recap my previous post I commented on the ‘other actions’ menu and how it was overly complex, highlighting functions that aren’t relevant such as ‘follow’ on people you already follow right underneath the link ‘unfollow’. This issue is repeated for ‘translate’ and other functions besides. At the time I looked at how this could be simplified and created a mock up to illustrate my point. I’m not saying this was perfect but in my opinion it was definitely an improvement.

Old TweetDeck menu with redundant functions

Old TweetDeck menu with redundant functions

The new issue

Its interesting to note that in the latest release of TweetDeck the menu has evolved but instead of simplifying it the functions have been grouped into ‘User’ and ‘Tweet’. I like the way the functions have been categorised but all this does is turn a simple dropdown menu into a cascading menu and increases the complexity of the experience. It now feels a cumbersome and fiddly. There’s a delay in the decision making process as you now have to think for a second and make an extra choice before acheiving your intended goal.

The new cascading menu

The new cascading menu

Its a similar situation to when ‘view source’ in Firebug, the Firefox plugin, went from a primary function to a lesser item within a cascading menu. The way users interacted with the interface wasn’t considered.

I’m guessing the reasoning behind the categorisation is to try to simplify the menu down, what I don’t understand is why the redundant functions have simply been removed.

The revised solution

I thought I’d have a go at modifying my original concept to incorporate the categorisation which you can see below.

Version 2 of my 'other actions' menu concept

Version 2 of my 'other actions' menu concept

If you’re a TweetDeck user (or even if you’re not) I’d be interested to hear what you think. You can have your say by leaving a comment or sending a tweet to me @paulseys.

On a scale of 1-5: a comparison of user survey tools (part 2)

In part 1 of my ‘comparison of user survey tools‘ I explained the events that led me to look at the 3 different services. In this 2nd installment I thought I’d share the criteria I used to grade the survey tools and how well each site performed against them. To quickly recap, the websites I compared included SurveyMonkey, Google docs and Survs.

Summary

Criteria

Each survey tool was scored out of 5 against 10 criteria, which were divided across 3 key sections. The sections were:

  • Getting started
  • Running a survey
  • Results and reporting

Getting started

1. Sign up
All 3 survey tools performed relatively well. It was very quick to register a free account with SurveyMonkey, however, once you have completed registration you are taken straight to the default dashboard which gives very little assistance. The table of surveys is empty but for a small instruction to click on a link at the top of the page. [Score =3]

Google Docs was slightly harder to measure. As an existing Google Docs user it wasn’t particularly difficult to setup a form for use as a survey although I imagine for a new user it would not be as easy. Google Docs is a completely different service to both SurveyMonkey and Survs but none the less it can be used in the same way so can be just accordingly. [Score =3]

Due to its current beta status, and by that I don’t mean Googles definition of beta (see GMail) but real life beta, you have to request an invite to use Survs. Once you receive your invite its simply a case of filling out a short registration form. Signup lead to a welcome screen which tells you pretty much everything you need to know to get you started, thanks in part to a screencast of it in action. A nice touch is the added ability to ‘turn off’ the welcome tab once you’re comfortable with using it. [Score =4]

2. Survey creation
SurveyMonkey Feels clunky during setup. It has far more functionality than the competition including the option of 16 different question types, although this almost feels like too much. Editing the survey takes time, there is an abundance of advanced functionality which means very little first time users. There is very little consideration for the learning curve of users, instead they are thrown straight in at the deep-end. [Score =3]

In comparison Google Docs is incredibly easy, although compared to SurveyMonkey it is a far more rudimentary system. Options are limited to a range of 6 question types. There is the ability to simply add help text. All in all the system is quick and very intuitive. [Score =4]

The only one to include a video tutorial up front was Survs. You’re given a fantastic level control when creating a survey. Its not as intuitive as Google but carries with it far more options. There are fewer question types than SurveyMonkey but the free account includes the ability to add ‘logic’ into questions. Survs does a great job of hitting the middle ground between the advanced functionality of SurveyMonkey and the intuitive but basic Google Docs. A new user can easily pick up the basics and successful create a survey without worrying about some of the more advanced features but as your knowledge of the system grows there are plenty of hidden gems to play with. [Score =5]

3. Cost
SurveyMonkey does offer users a free account but it is very basic and functionality is limited. Full functionality can be gained for either $19.95 a month or $200 a year. More information on SurveyMonkey pricing structure. [Score =2]

Google Docs as expected is totally free once you setup a Gmail account. [Score =5]

Survs is also free but it is still in beta so I’m sure in time it’ll be fee based. [Score =5]

Running a survey

4. Integration
Each of the tools give you the ability to link to them from your own website. SurveyMonkey give you the ability to link directly to the survey in the form of a popup, link to a popup invite or alternatively as hosted html. Each solutions feel quite cumbersome and I dislike the fact that you are effectively forced into linking to popup windows, which in my experience frequently come off badly in usability studies. [Score =3]

Google on the other hand feels incredibly easy. The options are simply kept to a hosted html page which you can link to or the ability to include the survey within your own website in the form of an iframe. [Score =4]

Once again Survs seems to sit nicely in the middle. There are popup options, both directly to the survey or in the form of an invite but also the option to include the survey on your own website through the use of an iframe. [Score =4]

5. Customisation
The amount of customisation within SurveyMonkey is limited based on your account type. As I only have a free account there’s not much I can do to style the surveys. There are predefined themes to choose from but none of them stand out as particularly nice. You have to pay to add logos or edit themes.  [Score =3]

You can’t customise any aspect of Google Docs. It forms are effectively white labelled and as you can include them in a page as an iframe you can pretty much fit them within any pre-existing design. [Score =1]

Survs is fully customisable AND for free! You can change colours, fonts and even add imagery. nice. [Score =5]

6. Promotion
SurveyMonkey gives you the ability to send out emails direct from the admin area. You can import contact lists and edit them once saved.  [Score =3]

Being apart of Google Docs means the survey tool has full integration with your Gmail account. [Score =4]

Survs has the ability to add multiple emails but  there’s no upload feature which could be a real pain if you have a large list of customers you want to contact. [Score =3]

7. Response
SurveyMonkey is easy enough to complete but the form elements are not standard which is a strange thing to do in my opinion. Why SurveyMonkey, why? on the plus side you can fully customise the ‘thank you’ message. [Score =3]

The Google Docs survey feels familiar. The form is simple and intuitive. You can also fully customise the ‘thank you message’.  [Score =4]

Much like Google Docs the Survs survey is very intuitive and you have the option to customise the ‘thank you’ or forward onto a url. [Score =4]

Results and reporting

8. Format
The format of the results within SurveyMonkey are very detailed but you’re unable to filter results without first upgrading to a paid subscription. [Score =3]

Google on the other hand provides a nice clear, easy to read summary and also gives you the ability view as a Google spreadsheet.
[Score =4]

Survs produces a detailed graphical summary which can be filtered without the need to upgrade. Respondents can also be viewed in isolation. [Score =5]

9. Portability
When it comes to analysis you have to be able to take the data away with you. Unfortunately SurveyMonkey only lets you save your results if you upgrade to a full account. Notice a pattern arising here? [Score =2]

As the results from the Google survey are a Google document you have plenty of options. CSV, html, txt, pdf, xls, take your pick. [Score =5]

Survs gives you the option of XLS or CSV with the ability to limit the detail of whats exported. A nice little bonus is that you can print the results as a PDF thanks to their print stylesheet. [Score =4]

10. Access
The concept of portability focused on the reporting side of things were as my thinking behing  ‘accessibility’ with regards to online surveys refers to the ability to share the raw data with others. Once again it appeared that this was available through SurveyMonkey but without upgrading I’m not 100% [Score =2]

As with most Google docs access can be granted in a couple of different ways. You can assign ‘global access’ which means anyone who is given the correct URL can view it and pass the URL on. Contacts can be personally invited but they can only view the results if they login with a Gmail account. Althernatively the results spreadsheet can be published as a html page. [Score =5]

Similarly to Google docs Survs has the ability to invite people to view the results or send out a link that can be openly shared. A nice little feature is the ability to password protect the results. [Score =4]

Conclusion

Out of the 3 survey tools Survs easily came out on top. Its a relatively new product but works so well and its free! The only downside is that its still in beta which can cause problems. I’m under no illusion that sooner or later it’ll be a paid for service but for the time being I’m enjoying the innocents and freedom of it being free and pimping it whenever I get the opportunity.

Free versus paid

I don’t have a problem at all with webapps/services charging, how else are they expected to survive? As a designer by trade I am totally against spec work, an issue that seems to be doing the rounds at the moment, and I gave up downloading music for free years ago for the same reasons. But I disagree with the way SurveyMonkey go about charging their users. They are clearly the most established survey tool on the market at the moment but the idea of limiting so much functionality unless you pay seems ridiculous. How can someone get a clear understanding of what the tool can do if half the decent functions are blocked?

Personally I prefer the idea of trial periods (e.g. 30 days free) or limiting activity. Websort, the remote card sorting app does this perfectly by limiting their free account to 1 sort at a time and also limiting the number of respondents.

Old tools

My main problem with SurveyMonkey is that it just seems so dated. The admin interface looks old, is far more complex than it needs to be and to me feels clunky. The actual surveys that are created look just as dated and the form elements are just weird, where is the benefit in not using standardised controls that everyone is familiar with?

On the other hand both Survs and Google are fresh, modern and intuitive.

Basic versus complex

Initially I thought Google would win hands down but its still relatively basic. There’s no customisation or ability to brand the survey itself, plus the survey generated doesn’t cope well with too many questions as there’s no facility to include pagination or ‘logic’. That’s not to say Google  forms isn’t a good tool. Its great for knocking up something basic in a hurry. To give you an example I quite regularly use Google forms to help back up research findings or present clients with an opinion supported by the findings of a small straw poll. However, beyond this I can’t see much commercial use for the Google forms service at the moment but then its Google so who knows what will happen in the future.

The winner

Taking this all into account Survs.com is easily the best tool in my opinion. If you’ve made it this far through this post without  losing the will to live hats of to you. I hope in some way this review has been of help to you but ultimately the only way to truly find out which webapp is best is to get out there and try it for yourself.

If you have any opinions on this post that you’d like to share please leave a comment I’m always eager to find out what other people think. If you know of other services that you believe are better or should have been considered along side these 3 add a link to in the comments.

Thanks for reading.

Related links