Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
19th August 2013

UX: Psychology of great design – part 2

Cyber-Duck co-founder and production director Matt Gibson continues his quest to reveal why UX matters. Find out the best practices and techniques needed to create the perfect user experience

UX: Psychology of great design - part 2

READ PART 1 OF UX: PSYCHOLOGY OF DESIGN

Cyber-Duck co-founder and production director Matt Gibson continues his quest to reveal why UX matters. Find out the best practices and techniques needed to create the perfect user experience

THE UX DESIGN TOOLBOX

Remember, there is no such thing as a one-size-fits-all approach – here are a whole host of further techniques to help create the perfect user experience.

Creating personas

Use the evidence collected in your research to identify common traits shared by your users.  These might include but are not limited to:

Background
Such as typical age range, native language and any physical or cognitive limitations

Experience
How familiar are they with similar systems? Will they need to learn?

Behaviour
What motivates them? Do they share any behavioural traits?

Desires and concerns
What do they want to achieve? What concerns do they have?

Once you have this, you will be able to begin identifying your user profiles or ‘personas’. The best personas are based on real users. The more believable a persona, the more empathy you (and stakeholders) will have for it when creating and evaluating designs. Use people you’ve met during interviews as the basis, so personas are genuine.

Sketching experiences
User stories enable designers to better hypothesise how their users will react in the context of the experience they are creating. It also allows designers to communicate ideas and designs to various stakeholders by showing how it has a tangible impact on the experience for a given user. With user stories you should be able to explain which users it relates to, what the user is looking to achieve, what problems they might face and how often they will need to perform the task.

Sketching is a powerful way to rapidly explore ideas and how a design might work. It encourages honesty and creativity (since people know you haven’t invested too much in an idea), has a low barrier to involvement (so people can scribble over your initial sketches) and it’s more disposable – you are more likely to discard a sketch of a flawed design than a high-fidelity mock-up.

By applying user stories to design sketches you can map out a user’s experience. This identifies what information the user has to input (if any) during the process and what information the user should expect to receive in return. As you explore ideas and refine them, you can progressively add extra layers of detail and fidelity into your sketches to delve into finer specifics. For example, you may want to begin getting into the specifics of what content will need to appear where.

Planning information architecture
Once you have explored your ideas thoroughly, you will want to document your design choices and form them into something more tangible.
A well thought-out hierarchy for content makes it easy for users to find and absorb what they’re looking for.  A sitemap is a good way of visualising this hierarchy.  Sitemaps will explain how information will be organised, prioritised and labelled.  When creating a sitemap it is useful to remember Hicks’ Law:
“The time it takes to make a decision increases as the number of alternatives increases” (52weeksofux.com/post/584164393/control).  Therefore try to combine similar topics so you reduce the amount of noise in a navigation system.
One technique that will pay dividends later on in your production is to consider the URLs as you’re mapping out the website structure, to ensure they are easy to read and use. Head on over to James Jesse Garrett’s visual vocabulary – it’s a useful tool for getting started with sitemaps and available at:
www.jjg.net/ia/visvocab

Tips for participatory sketching


1. Explain the purpose of the exercise

To some it may appear strange that you (the expert) are getting them (the novices) involved in the creation process. After all, isn’t designing your job? Explain that the purpose of the group sketching exercise is simply to discuss, explore and quickly iterate upon ideas as a group.  Ultimately the goal of participatory sketching workshops is to collaborate with other stakeholders and users, so that you can address their expectations successfully and better understand their perspectives.

2. Encourage low fidelity
At the start you don’t want to get bogged down in detail. One trick for encouraging low-fidelity sketches is to give the group thick marker pens rather than pencils or Biros.  If the tools by nature are low fidelity it will encourage the participant to create low fidelity sketches.

3. “But I can’t draw!”
People often respond apprehensively when asked to sketch, particularly if it is in front of a group.  Reassure them that you are not expecting a skillful drawing, but simply a rough impression of their ideas – and that everyone can draw a few lines and boxes.

4. Review as a group
Work as a group to critique each sketch. This gets everyone (particularly relevant stakeholders) to consider the reasoning/logic behind an idea and encourages much more honesty. Use the personas and user stories you have created to frame the evaluation of the sketches. For example, how does one idea affect certain personas? Is there a balance that needs to be achieved?

5. Start with mobile or tablet first

Sometimes the idea of a large blank canvas can be daunting.  Starting your sketches within the constraints of a smaller screen will encourage you (and your stakeholders) to think carefully about priority.  Through this method you can establish your core experience without some of the distractions intended simply to fill white space on larger canvases.

MAPPING USER FLOWS

Complementing your sitemap with user flows based on personas can help you explain any logic that needs to be factored in.  User flows are often communicated using flow diagrams, though by combining them with your sketches you can explain behaviour within specific interfaces. After this, you will be ready to begin prototyping a semi-functional version of the system. Here are some ways to create prototypes:

Paper prototypes
Similar to sketching, these are low fidelity and allow for quick iteration.

Using professional tools
Using software such as Axure RP (www.axure.com), OmniGraffle (www.omnigroup.com/products/omnigraffle) or even Apple Keynote, you can quickly and easily build more detailed prototypes that reflect some of the interactivity of your system.

HTML & CSS
When you need to communicate more complex behaviour or particularly the responsiveness/fluidity of an interface, coding prototypes using HTML & CSS is a good approach. Use popular CSS frameworks like Twitter Bootstrap (twitter.github.io/bootstrap), Foundation (foundation.zurb.com) or, better still, Mixture.io (mixture.io) to speed up the process of producing functional HTML & CSS prototypes.

It’s important to remember any design you have produced so far is a hypothesis, so you need to iterate quickly and test those assumptions with real people. There are many methods for testing, each with their own benefits that are suited to different projects.  The following methods help explain several common approaches to testing.

Guerrilla user testing
Similar to ‘on location’ user research, this involves going to places where you might find people representative of your target audience.  In return for a token incentive you want each person to spend anything from 5 to 30 minutes attempting to complete specific key tasks on your website or app.  Your role is to observe and note any commonalities or patterns you see.

Ethnography
Another technique is to release your prototypes to a small, trustworthy, diverse segment of your audience and ask them to report back with their thoughts and feelings about your website or app.  This feedback can be gathered by asking your participants to keep a diary of their experiences (a great way to get their honest opinions), or by you observing remotely using click tracking tools.

Eye tracking
Eye tracking can add a layer of depth to your testing. By analysing what people fixate on while carrying out tasks, combined with retrospective interviews where you can discuss the participant’s experience, you can gain great insight.  From this you can ascertain any problem points with copy and structure and then tweak your prototypes.

Interviews
You can combine think-aloud or retrospective interviews with your testing.  Interviews give you understanding of the sentiment and thought processes of your participants.  Be aware that think-aloud interviews, where you get the participant to describe their thought processes and emotions while they are testing, may influence their behaviour.

Remote testing
If you are unable to perform testing face-to-face, tools such as www.usertesting.com let you test with people remotely.  While these services are quick and cheap to use, it can be difficult to gather as much insight as you can from physically observing people.  If you don’t recruit your own customers via a tool such as Ethnio there is also the risk that the people here will not be truly representative of your audience.

“Focus on outcomes not deliverables”

Ultimately the key to an excellent user experience is in remembering that ‘real’ people use the products and services we design; real people with different wants, needs, abilities, environments and a million other possible variables that we need to factor into our decision-making.

To some this may feel like little more than a well-worn platitude, but it does serve a purpose. As Karen McGrane observed in her thought-provoking article, ‘Explaining Water to Fish’ (alistapart.com/column/explaining-water-to-fish):
“It is easy to lose sight of how different our world is from the world of just a decade or two ago. Businesses cannot treat their customers as passive “consumers” any longer; every company is in the user experience business.”

User experience isn’t the role of one person and it’s not a list of deliverables you can tick off – it’s a framework for thinking.  If you take the time to understand how people think, then design solutions around their true needs and behaviour – your design will be far more likely to perform better with them.  In the end, creating a delightful, addictive experience is the only deliverable you should care about.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://blog.piotrnalepa.pl/ Piotr Nalepa

      Please, improve readability of your texts. It’s hard to read that for a very long time on big screens.

    • http://www.surfmarketing.co.uk/web-design George

      Yes, this blog is such a nice and informative but little bit lengthy. No doubt your information is valuable and important to make user-friendly website design.