On the third day of the conference we got another series of great UX workshops. They varied from hands-on sessions to speaker presentations, but everywhere the quality was high. It were three thought provoking days and I hope next year will be at least just as good.
Joshua Porter – Designing for the Usage Lifecycle
In this workshop, Joshua dived right in and started with a number of examples on how a “ton of tiny improvements” will make your design a lot more effective. He states that one of the biggest challenges of running a website with a sales objective is to have more people sign up, start using the product, and eventually coming back.
Enter: the usage lifecycle. Joshua introduces a number of stages of usage and quickly recognizes that the migration between these stages is where the real challenge lies. He calls these hurdles.
Improving usability will increase conversion. Joshua gave some pointers, like:
- Best bet is just to get rid of screens in registration/ sign-up processes. Keep it simple;
- The proper use of microcopy in forms can vastly improve conversion;
- Don’t have users make definitive decisions (“you can change this at any time”).
However, Joshua states that the biggest challenge is no longer the bare usability of the website. It is about understanding the value of the product that we try to sell. And so he quotes Engelbert saying “If ease of use were the only requirement, we would all be using tricycles.
This is why Joshua moved on to a couple of psychological observations:
- The problem is not in the form, but getting people motivated enough to care;
- Value is changing and shifting. Free is no longer differentiating;
- Create room for communication aimed at the people that are the least motivated.
This has an important consequence for the role of the designer. It changes with different user lifecycle stages:
- The interested user needs selling;
- Trial users need teaching;
- Customers need support and maybe some teaching still.
Joshua did this really great thing of asking the crowd to offer a site with sign-up and do a real-time user test/review. Xing.com was the case that was offered. Quickly it was apparent that the main proposition of this site was unclear. He described several ways to improve sign-up performance, among them:
- Immediate engagement – what benefit can you give people before signing up? Netvibes is a good example. Start building first, save later. Joshua went to at least a dozen more great cases;
- Write to reduce commitment – make signup and the product feel easy, fast, low-cost.
Stephen P. Anderson – Demystifying concept models
What is a concept model, why is it useful, and how do you go about creating some? To put us into the right headspace, Stephen Anderson started his workshop with a gallery of some of the amazing concept models he has created. (If you haven’t seen one, have a look at Stephen’s website before you start reading).
Concept models make sense of something complex. They can serve as good instructions that people actually use – like the concept model Stephen created to make sure that printing his Mental Notes cards did work out.They visualise what people are talking about and focus discussion – like the concept model Stephen created to help him and his wife make sense of the Christmas shopping (doing this when you have four boys is far from easy).
Concept models serve a purpose. Use them to:
- Inform, e.g. JJG’s Elements of UX;
- Converse, e.g. Experienced Based Differentiation Diagram, Forrester Research;
- Reveal patterns over time, e.g. Movie Narrative Charts, xkcd;
- Simplify, e.g. Adaptive Path’s ‘designing from the outside in’ visualisation;
- Persuade, e.g. the Facebook privacy diagram;
- Capture attention;
- Aid in recall, e.g. Kathy Sierra’s Featuritis curve;
- Simplify choices;
- Make people laugh.
So, are concept models charts, graphs or infographics? Here is how Stephen thinks about concept models. They:
- Use visuals and texts to make complex things simple;
- Are more about concepts than about data;
- Are about relationships (incl. processes, proportions, changes over time);
- Often static;
- Different form narrative explanations;
- Not graphic note-taking;
- Far more than mind mapping;
- Not the same as a chart.
A main aspect of building a concept model is research, for getting started, and throughout. A concept model needs a frame of reference and a purpose. For our group activity, clearly defining the purpose of the model we were about to create was essential: “Create a concept model for [audience] to make sense of [problem] in order to…”
After defining this mission statement, Stephen summarised the visual elements of a concept model. Shapes can be used and combined to create anything. The visual elements you choose imply meaning. Circle or square? Spiral in, or spiral out? A great example for how meaningful combinations of very simple shapes can be is Jessica Hagy’s thisisindexed.com.
Common patterns include mapping things out on axes, stacks, layers, swimlanes, the ‘Strategy Canvas’ (Google it to see different examples), the honeycomb (only use it if your data fits in. If you have more than 7 elements, it won’t work).
Metaphors are powerful because brains are visual, we learn by association, naturally chunk information, process visuals more quickly, understand through stories and find delight in the unexpected. Choose metaphors that are (mostly) timeless, universally recognised, and supporting the message. For inspiration, look at nature (e.g. roots, caterpillar), toys (e.g. lego bricks, puzzles) or familiar/nostalgic objects (swiss army knife, stool, hourglass).
Turning words into metaphors is challenging, but worth the effort. Good concept models need to be refined, and moved through different fidelities (from pen-and-paper sketch to digital diagram to graphically designed version).
Stephen shared useful tips for demystifying concept models:
- Simplify, e.g. by visual reversing;
- Embrace accidents;
- Explore different perspectives;
- Sketch ideas with a pen;
- Get feedback, test, iterate;
- Play – don’t settle on the first idea;
- Use a consistent visual language;
- Ask: can a 5 year old understand this? Do the basic ideas work without words?;
- Replace or reinforce labels with icons or visuals;
- Look at it from 10 foot, and from 1 foot distance.
James Box and Cennydd Bowles – Universal Principles of UX
Unfortunately, I was only able to see the second half of this workshop. From what I heard, the first half started out somewhat slow and theoretical, but ended up with a great Lego based exercise in bringing the Gestalt theory to practice. The second half of this workshop also contained some very useful insights to aid in making design choices. They were brought in quite a verbose way, not so much packed with sexy cases and examples as we might have come to expect.
The first insight is that of chunking. Chunking is the process of using lessons from your long term memory to create chunks of a complex stimulus. This helps to decrease the number of items to remember in short term.
An important effect of this is that we as experienced designers might find it hard to really understand novice web users, who cannot rely on their experience to chunk web sites and applications into patterns and known components. This insight should be the major driver of using standard UI patterns as much as possible.
The talk continued with defining a couple of information seeking behaviors.
- Known item search – The user searches for a specific item, finds a search result, darts into and out of the site that contains the item. A search box is a very good interface to enable this kind of searching;
- Exploratory search – Good content strategy is key to capturing these users. This includes effective use of long neck terms, or trigger words;
- Driftnetting – A good ontology, or structure, is what helps these users most. Heavy and relevant cross-linking also helps users to discover what parts of the subject that they are interested in;
- Information scent – Many things on the web are not what you are looking for, but get you closer to what you are looking for. Items that communicate very well what’s behind them have strong information scent;
- Berry picking – This search behavior results from the fact that user needs and insights evolve from getting results.
Thirdly, a brief explanation was given of the well-known Fitts’s law. The larger of closer the target, the faster it can be pointed to. This leads to the design pointer to give more important buttons different sizes and shapes, and space them apart enough.
Affordances were up next. This strong notion, first introduced by Donald Norman, is about designing things in a way that evidently matches our body, thus eliciting predictable behavior. Examples are body-sized chairs, hand-sized levers, finger-sized buttons. Common user interface design examples are embossed mouse grips to drag elements such as window corners, and embossed buttons.
A more social type of affordance, recently introduced by Don Norman, is that of signifiers. Signifiers are social cues for behavior. Traces of others behavior that elicit that same behavior, such as a crowd that indicates something good is going on.
The workshop ended with a fun UX treasure hunt in the hotel. Participants were challenged to make photo’s of patterns that were discussed in the workshop. The results will be online on Flickr.