Optimal by design

"Being light and simple, and multiple and complex at the same time is the goal. These qualities are..."

Sun, 17 Feb 2013 07:32:17 -0500

“Being light and simple, and multiple and complex at the same time is the goal. These qualities are not mutually exlusive, in their unbalance, design thrives.”

- In their thoughtful book, Pervasive Information Architecture: Designing Cross-Channel User Experiences, the authors present an interesting view on the relationship between simplicity and complexity.

In their view, simplicity and complexity complement each other.

"User-centered design has served the digital community well. So well, in fact, that I’m worried its..."

Sat, 02 Feb 2013 09:15:00 -0500

“User-centered design has served the digital community well. So well, in fact, that I’m worried its dominance may actually be limiting our field.”

- Cennydd Bowles offered some really interesting perspectives on the value of the user-centred design process, and its shortcomings, in his article Looking Beyond User-Centred Design.

I’ve added a comment to the discussion too.

Small Cognitive Psychology for Big Interaction Design

Mon, 03 Dec 2012 14:18:08 -0500

Slides from my talk at UX Cambridge 2012, are here, for your viewing pleasures:

(Note: I gave a similar talk at Webexpo Prague 2012. But in Czech. And you don’t want to see the slides, since your eyes would hurt from all the special characters and accents.)

In the section about Attention, I also mentioned visual perception theory and how animated transitions could help us to shape the flow of attention in an interface. There was not enough time to go into details, but here are some resources:

UI Transitions

Great site with effective demos of various animated transitions. Love the attention to detail put into those animations.

You can just google ‘visual perception’ and get tons of results, but here’s two to get you started:

Visual Perception Theories (beware, it’s quite geeky)

Using Gestalt for Visual Hierarchy

Concept design competition - Innovation in eMobility

Sun, 18 Nov 2012 08:25:00 -0500

Me and my colleague Lucy (Visual Designer at Flow) took part in a concept design competition organised by Hethel Innovation this summer. Hethel Innovation is an organisation based in Norfolk, UK, that helps businesses develop their innovation potential.

The competition brief was to change people’s perceptions of electric vehicles.

So we submitted a concept design solution. And won!

Why we won? Because we put sufficient effort in defining the problem space first, did user research (quick-and-dirty guerrilla research could be immensely helpful too), and worked through solutions in an iterative manner, until the final refined solution emerged.

You can read more about the process and outcomes on the Flow Interactive Thinkblog.

Our concept design solution for innovation in eMobility.

UX lessons from...Whatever

Sun, 11 Nov 2012 05:56:00 -0500

I saw yet another one of those ‘What you can learn about UX from XYZ’ articles, and couldn’t resist a cheeky little tweet.

In response, Jack couldn’t resist either and accepted the challenge by following up with a neat and deeply thoughtful piece ‘UX lessons from ice-cream’.

Not being able to comment there, I had to do it here. (You know for how long I haven’t posted anything here, Jack? You made me do it again. Thanks actually!)

So, the comment:

Thanks Jack for a brilliant article combining the two passions of mine - UX and ice-cream. When I did the tweet above, I was after something completely ridiculously unrelated to UX. And icecream popped to my mind. Always does. So thanks for linking them together.

But what about…UX and earthworms!? Why earthworms? No idea. (Don’t worry, you don’t have to accept this one.)

UPDATE:

If you were thinking of squeezing some juicy UX lessons from Johhny Depp or Tom Hanks, don’t bother, because that’s been done too.

"You’re in a problem-solving business, and you don’t solve problems with documentation"

Fri, 10 Feb 2012 16:16:00 -0500

““You’re in a problem-solving business, and you don’t solve problems with documentation””

- Jeff Gothelf at London IA February 2012, talking about “Getting out of the deliverables business”

The baguette experience

Wed, 02 Nov 2011 00:00:00 -0400

You are a weary business traveler at an international train station. And you have one pressing problem: you are hungry. Luckily, you spot a baguette chain store and decide to take a closer look. Their baguettes look amazing, especially that one on the right; fresh tomatoes and mozzarella in a crusty French baguette. Yes, that is it. You want to buy it, but no one behind the counter seems to be paying attention to you. “Hello, excuse me?” But there is no response. The staff are ignoring you. “Hello”, you raise your voice, “can I have this baguette please?” The guy behind the counter looks at you, and without a word, grabs the baguette you pointed at. “Anything else – tea, coffee, juice?” replies the guy, evidently annoyed that you bothered him, and hands you your baguette wrapped in a paper bag. “No, thanks, here’s the money. Bye.”

One transaction complete.

You walk away with the precious paper bag in your hand, looking forward to devouring that wonder of a baguette, while trying to forget about the unpleasant guy behind the counter. After all, you got your baguette, so it is all good. You board the train, take a seat, and realise that the baguette looks significantly less mouth-watering than the one you saw just a while ago. It is all squashed and looks as tired as you are. You start unwrapping it…oh no, it is stuck to the paper bag. You wrestle with it for a few minutes. Pieces of the paper got torn away and glued to your baguette. And why is the bag so ill-shaped anyway? Has anyone actually considered how people will be eating the baguette on a train? No. It turns out that the fancy paper bag is completely inappropriate in this situation.

At this point you are rather disappointed with your baguette and all the hassle it has caused you. But it looked so good in the store! Anyway, you decide not to buy this baguette again. What is more, you actually also decide not to buy from this chain’s store again.

More transactions? Unlikely.

What we can learn from everyday interactions

You might be thinking this has nothing to do you and your online business. But it does. Regardless of whether you are selling baguettes or monthly subscriptions to a Software-as-a-Service online CRM platform, you need to consider the same things to create a positive customer experience and build a base of loyal customers that keep coming back.

There are a few lessons we can learn from this baguette fiasco:

Don’t focus just on your product, but also on how you are delivering it.
Even the best product could be ruined by a poor purchase and post-purchase experience.

Don’t ignore customers, however subtle their interest in your product.
Have customers phoned your call centre to get help because they failed to buy your product through the website the day before? Have they still not bought your product a week later? Then you should be following-up with them.

Don’t try to up-sell and cross-sell, at all costs, all the time.
Pick your battles wisely and focus on the most susceptible moments. Customers might not be ready to buy another product right after buying the first one. They might want to learn more about the first product before buying another product from you.

Don’t assume everyone will use your product in the same way.
Learn about your customers, their preferred ways of doing things, and their context of use. Then design your product so that it could be appropriated for multiple situations that are likely to occur.

Don’t design just for the product’s peak usage moments.
Think also about the moments when the product is not being used, or when it is being shut down. Or thrown away. Let your products disappear from the scene gracefully.

Next time you experience a pleasant or unpleasant interaction with a service or product in the physical world, think how it would translate into the digital world. And vice versa. Both worlds are a great source of inspiration for each other when designing.

[This post was originally published on Flow Interactive’s blog]

Communicating and Selling UX Design Deliverables - resources

Sat, 01 Oct 2011 05:43:00 -0400

Here are some resources related to my talk about communicating and selling UX design deliverables that you might find useful.

Article by Jared Spool that I mentioned, talking about key qualities for UX designers: Five Indispensable Skills for UX Mastery.

Great articles on designing wireframes

A Practical Wireframe Primer

Three ways to make your wireframes more useful

Books on deliverables design, communication, and information design

Communicating Design (2nd ed.)

Communicating the User Experience

Envisioning Information

Gamestorming

Visual Meetings

…

And lastly here are my slides:

World with unlimited resources

Mon, 25 Apr 2011 14:51:00 -0400

I was travelling South-east Asia recently and on that occasion I read a comic book retelling the classic ancient Chinese texts upon which Taoism is based.

These texts made me realise that the human society really hasn’t changed that much over the last two thousand years. People’s needs and desires are the same.

Then a question came to my mind: What would a world with unlimited resources look like?

I pondered this question and not being able to find a satisfactory answer I asked on Twitter. Here are a couple of great bite-sized answers that I think are quite insightful.

pigcore Katerina Skotalova: we would destroy ourselves much earlier.

elreiss Eric Reiss: Access to unlimited resources of any kind make it even tougher to set priorities. Judgement atrophy sets in. Necessity is necessary.

janbrasna Jan Brašna: Stalling in steampunk utopia perhaps? Constraints, threats and limited resources is what drives innovation and development.

Darrenux Darren J Smith: crowded

simplydt David T Kramaley: Then humans brains would be so small & stupid from the lack of challenge!
…

Automated airport assistant - a bad colleague?

Fri, 01 Apr 2011 17:57:50 -0400

A few weeks ago, I flew from the London Luton airport and was surprised to see this low-cost airport equipped with a few automated customer service assistants. The airport is trying to reduce costs everywhere and so replacing real humans with automated assistants that work nearly for free comes as no surprise.

Upon reaching the departures hall, a male assistant (picture below) reminded me that certain items are not allowed on board aircraft. Later in the security check hall, another female assistant informed me that liquids should have been placed in transparent plastic bags and laptops were to be taken out of bags.

I was queuing for the security check for just a few minutes but the messages became very repetitive. What had been a useful reminder, quickly became rather annoying noise. I noticed there was a human operator standing not far from one of the automated assistants, telling passengers which queue to join. After observing this guy for a while, I asked him whether he found the automated assistants a little bit irritating. (A leading question, I know!) Almost instantly, as if he had uttered it for a hundredth time that day, he replied, “You tune it out mate. You just tune it out!” He also told he had been working there with the new ‘colleagues’ for two weeks then.

The way he replied instantly made me realise that work shifts with the non-human colleagues are probably not very popular with the airport staff. No wonder, imagine a colleague of yours repeating the same line for the whole day. For the whole week.

Automated Virtual Assistants are an interesting invention. They surely get much more attention than a boring notice board on the wall. However when designing a customer journey within a service, it is essential that all stakeholders are taken into account. In this case, while virtual assistants might be fulfilling the short-term business needs by reducing costs and speeding up the queue, their implementation means that neither the customer’s nor the staff’s experience is improved. On contrary, they might be potentially causing friction. In the long term this may damage the brand, affect traveller’s choice of airport, and would make staff more likely to quit their jobs.

Service design needs to address the customer experience holistically, and any potential knock-on effects need to be considered. Subtle changes could make all the difference. All airport customers follow the same route which makes careful positioning and Directional Sound a possible solution. This would ensure the message gets heard in context without becoming just annoying noise.

[This post was originally published on Flow Interactive’s blog]

One of my favourite items in my kitchen is this knife. Spectrum...

Sat, 26 Mar 2011 10:41:33 -0400

One of my favourite items in my kitchen is this knife. Spectrum in blue colour by Scanpan - Danish manufacturer of designer kitchenware.

It is a lovely piece of Emotional Design. It works on the all three levels of emotional design - the visceral (it is aesthetically pleasing and nice to look at), the behavioural (using it feels good, and it chops veggies amazingly), and the reflective (makes me feel good that I own it - that’s why I am bragging about it here).

Moreover, it is also a great example of a design that influences behaviour. I have started eating more vegetables since I bought it.

Super-short summary of LightningUX, January 2011

Mon, 07 Feb 2011 16:44:33 -0500

Last week, I blogged a super-short summary of London’s first LightningUX event on Flow Interactive’s blog.

Since then, a couple of blogposts and write-ups from the speakers and attendees have cropped up. Here they are, all in one place on Lanyrd. And you get some talk videos and two sketchnotes on top of that.

An inspirational conference – The Design of Understanding, January 2011

Sun, 30 Jan 2011 18:15:00 -0500

Last Friday I and more than a hundred others attended The Design of Understanding - a one day conference on information design and beyond. Despite not being massively promoted, it sold out in a few days. No wonder, the lineup was impressive, and the price of £75 was friendly enough for a poor designer’s wallet. It would be impossible to summarise even just the main ideas from all the great nine talks of the day, and so I will focus on the morning sessions here – highlighting ideas that resonated with me the most.

Also, Eva-Lotta Lamm has put up her beautiful sketchnotes, so you can view her visual talk summaries. Aren’t you lucky.

David McCandless

David kicked off the day by walking us through his journey from programmer to data journalist & infographic designer. David got charmed by the powers of visual communication when he realised that his job as a journalist could often be done by publishing an infographic instead of a traditional news article. Essentially by conveying a complex story by means of visual storytelling.

David also shed some light on the process employed when working on his book Information is Beautiful. He’d usually start with a spreadsheed where he’d collect all the supporting resources needed to tell a given story. He’d then sketch out the initial draft of the infographic on paper. Next step was working through multiple iterations of a more polished digital graphic. (Often also supported by a professional illustrator or visual designer.)

Michael Blastland

The next talk turned out to be my personal favourite, and from what I’ve heard, this was the highlight of the day for many. Journalist and author of The Tiger That Isn’t, Michael Blastland, subjected us to what felt like sobering after a great all-night party. His brilliantly performed talk made us all realise that representing data visually is nice, but the big problem is actually getting accurate and meaningful data in the first place. Numbers go up and down, and thus we have to be careful when reporting on trends – especially when working with small sample sizes.

Michael urged all who work with data to do their homework on data literacy and statistics first. He then reminded us that statistics is the science of understanding uncertainty. Funnily enough, visually representing uncertainty seems to be a design problem that no one has sufficiently cracked yet. And so in the finale, Michael prompted the design folk in the room to have a go at it.

Fiona Romeo

Fiona Romeo (Head of Digital Media at the National Maritime Museum and Royal Observatory) took the stage as the third speaker. Fiona’s inspirational talk revealed some of the challenges that modern museums face in the digital age. Fiona explained that museum work is mainly about putting objects into context.

The problem with modern artefacts, such as computers and consumer electronics, is that they do not reveal any of their internal mechanics anymore. So while we might be able to admire old abacus-like computing machines for their complex working mechanisms, for electronics only a few decades old, we can usually appreciate only their superficial product design and visual aesthetics.

The panel

The last slot before lunch was devoted to a panel of editors and designers from UK’s leading news titles. We witnessed an amusing session where each news title exposed their dirty infographics laundry and shamed poor design works of own produce.

We heard many excuses and apologies for producing infographics of low quality. Some of them were understandable; others less so. But to be fair, we should not forget that the news industry is extremely fast-paced and sometimes there are literally just a few hours, or even minutes, to embellish a story with visual representations. We cannot be surprised then, that some of the infographics more obscure the data than communicate it. I’m looking your way, bubble charts!

Afternoon talks

The day continued after lunch with talks by a design consultant Chris Heathcote (of Nokia design fame), Dr. Paul Rennie from Central Saint Martins London, data journalist Simon Rogers (person behind The Guardian Datablog), Professor of Information Design at the Reading University, Rob Waller, and finally culminated with a talk packed with examples of novel visualisation tools presented by Jack Schultze from BERG London.

This was definitely one of the occasional small conferences well worth attending. Let’s hope this was not just a one-off, but that it will expand into a regular conference. If that happens I’ll be the first one on the conference’s Eventbrite page hitting Refresh the minute tickets go out.

Stretching my design muscle at Design Jam London

Sun, 21 Nov 2010 14:25:06 -0500

London’s UX community witnessed its first Design Jam this Saturday. The all-day jam took place at a great venue provided by City University London, and was supported by Mozilla Labs, City University’s Centre for HCI Design & Johnny Holland magazine.

Around 50 people partcipated, all coming from various backgrounds, inluding user-centred design, frontend/backend development, visual design, and psychology or anthropology.

We formed nine teams of four or five members each, and were presented with a design challenge for the day: What is the ideal interface to keep track of previously viewed online content, across multiple devices and locations? We were supposed come up with a solution to this design problem, ideally by going through the phases of research, conceptual design, wireframing (or even prototyping), and documentation.

It was a fun day full of design thinking, and culminated with the teams presenting their designs in the afternoon.

A few summaries have already been posted online, so rather than trying to re-tell the story all over again, here are some links you’ll surely find useful:

Summary by Johanna Kollmann (on Johnny Holland), Leisa Reichelt, Fabien Marry, Boon Chew, Rob Enslin.

My team started by exploring the problem space from various perspectives, while building a mindmap of many aspects and design considerations related to the problem. We realised very quickly this challenge was way too big for one day. And so after mapping out a user journey and identifying three main scenarios related to the problem, we picked only scenario and decided to focus on one persona illustrating a ‘limiting user’ (limiting because of its rather edge-case behaviours and needs). This helped us to stay focused on a set of requirements addressing that user’s specific needs. Narrowing the design problem down allowed us to come up with a coherent design solution in a relatively short time. We then iterated and refined the solution in two rounds of sketching and critiquing, using the ’6 to 1’ approach.

If you want to find out more about my team’s process, check out our team’s wiki page. (might be still under construction at the time of writing)

Potential Reach - Twitter metric

Sun, 03 Oct 2010 07:21:27 -0400

As it often happens, some days ago an idea sprung suddently to my mind - while brushing my teeth. I got an idea for an interesting metric measuring one’s influence on Twitter. The inspiration probably came because of reading The art of SEO, a great book on concurrent Search Engine Optimisation. The analogy taken from SEO revolves around the topic of link authority that affects a website’s PageRank. So, the Twitter metric would be as follows:

Potential Twitter Reach = [total aggregate number of Followers of your Followers]

Here’s why this might be a good metric. As with inbound links in the realm of Search Engine Optimisation, just the number of one’s Followers does not really mean that much. The ‘quality’ (excuse the expression here, which is not entirely appropriate for people) of Followers matters much more than the quantity.

I’ll give you an example to make it clearer. UK’s Twitter mega-celebrity Stephen Fry is arguably a Follower of a much higher ‘quality’ than an average Twitter user. If he re-tweets your tweet… you get the idea…

Are you aware of any Twitter client or tool that provides this data?

World's Best Countries - visualisation tool

Sun, 22 Aug 2010 17:51:27 -0400

Newsweek published last week a series of articles presenting results of an extensive study comparing and ranking world countries. The country ranking is based on several criteria in five categories - Education, Health, Quality of life, Economic dynamism, Political environment.

Newsweek also launched an interesting information visualisation (InfoVis) tool to accompany the articles. They call it ‘Interactive Infographic’, but it basically conforms to the definition of an InfoVis tool since it is a ‘computer supported, interactive, visual representation of abstract data’.

First of all, the presented dataset is very interesting. (Go and compare your country with the winner - Finland.) But the information design is well executed too. The tool supports its users by allowing them to see the overview; but also details on-demand, change views and perspectives, detect patterns, make comparisons, and see the context of individual data points. All of the above are processes that research into InfoVis and sense-making has identified as enabling humans to achieve insight into a dataset.

Even though this is a great design allowing many interactions, there are a few small usability flaws that might hinder the user’s sense-making process.

The list of countries scrolls automatically based on cursor movement, and while it works fine with a touchpad, it is a bit too fiddly with a mouse. Users with hand dexterity problems might struggle with it.
After clicking a country in the left sidebar, there is a short time delay before the final values for Rank and Score are displayed in the right sidebar. The counter always starts counting from zero and it could take a few seconds before it stops on the final value. This causes unnecessary cognitive load for the user.
Lastly, the selection of countries for comparison might feel a bit unintuitive at first, due to the way country data is updated on the right side. However, after the initial familiarisation with its logic, it starts making much more sense.

Those are some rather minor issues, in an otherwise excellent visualisation tool. Achieving a slightly more usable interaction design however, eliminates some cognitive friction that might prevent the users from achieving a harmonious interaction flow leading to engagement with the dataset and ultimately gaining insight. Usability of the interface controls might not be the main performance parameter for InfoVis tools, but it certainly is a prerequisite for good sense-making support.

"Technologies need to be understood and implemented after the overall experience is designed."

Sun, 25 Jul 2010 06:24:00 -0400

“Technologies need to be understood and implemented after the overall experience is designed.”

- Nathan Shedroff, Experience Design (2001), New Riders Publishing.

Information Visualization - not just eye candy

Mon, 31 May 2010 14:46:00 -0400

A talk I gave at the UXCampEurope 2010 conference in Berlin.

Information Visualization - not just eye candy

"Design for the future, it will be here sooner than you think."

Wed, 07 Apr 2010 18:08:00 -0400

“Design for the future, it will be here sooner than you think.”

- Jeffrey Veen (talk at An Event Apart 2010 conference)

Confirm your typo

Mon, 05 Apr 2010 11:48:00 -0400

Registration is a crucial initial step that most online businesses have to impose on people along their journeys. Registration is necessary to check people’s authenticity and start meaningful conversations with them based on the provided details. Capturing people’s details correctly is paramount since storing, for example, an incorrect email address opens the door for trouble down the line. With an incorrect email in the database, not only does the business lose the opportunity to reach out to its customers, but the business’s bottom line may suffer. For example, I have heard about cancelled orders due to mistyped email addresses.

It is no wonder then that registration forms try to make sure details are captured correctly. But how to do it while still preserving a positive user experience? Registration forms basically represent a barrier for people to be overcome before they can do what they actually want to do – finally use the website!

Here is how others have tried to handle this (with varying success):

Confirming entry

I frequently see a registration form that has duplicated Email or Password fields. Now, this is a little bit annoying, especially if both Email and Password need to be confirmed (as below).

In the above example, the person’s interaction flow is significantly interrupted by having to answer two identical questions. As per Don Norman’s model of 7 Stages of Action, answering each single question on a form is a small diverting action on the person’s journey towards accomplishing her goal.

Disabling copy & paste

Harry Brignull wrote about a registration form that does not allow pasting into the ‘Confirm email’ field. Quite creative, but I agree with Harry that it could feel patronising, especially for the more tech-savvy people (who know how to copy-paste). On the other hand, it prevents people (hopefully) from simply replicating a typo made in the first field. And typos are arguably one of the commonest kinds of incorrectly entered details. Now let me ask, why do most websites actually use the wording ‘Confirm your email’? Let’s use ‘Re-type your email’ instead, and it might not be necessary to awkwardly disable standard system interactions like pasting.

Repeating key details before submit

A more elegant solution is not to display the second confirmation field at all. But how can businesses eliminate the eventual errors on forms then? I quite like concept prototypes made by Rugg Unger and Jonathan Knoll, that repeat the entered email just before submitting. Russ and Jonathan have produced multiple variants, but variant 5 is my personal favourite. It puts the email within the person’s locus of attention which is at that point in time on the Submit button.

Unmasking passwords

What about passwords, that are by default masked on most forms (even at registration)? First of all, I believe masking a password does not bring any value in most usage scenarios. Nielsen calls for the death of masked passwords, and I am happy to agree with him. However, as opposed to offering a checkbox to mask the password, as he is suggesting, I think the way to go is actually offering a checkbox to unmask the password. After all, in most contexts security is more important than interaction efficiency. MailChimp is doing this already, and based on a recent live demo of FontDeck, it seems like we will be seeing this pattern more often.

A pattern for unmasking passwords is also frequently used on mobile devices. This is due to the lack of tactile feedback provided by touchscreen keyboards when inputting a password. Moreover, people also cannot rely on their motor memory (remembering the finger movements like in touch-typing, as opposed to the actual password characters). People often utilize the motor memory to enter passwords with little conscious effort, and this does not translate so easily to touchscreen keyboards as visual identification of keys is needed.

Most mobile interfaces support people by revealing the last character entered for a short time and then masking it, thus giving people the necessary feedback. I am not aware of any website doing the same, but it might be a solution for standard monitor-keyboard setup too. On the other hand, the utility of this short-time revealing is debatable since most people type so fast that revealing the last character and masking it with a time delay is very difficult to implement seamlessly. Try it for yourself - here is an example of automasking.

Inline validation

Another powerful weapon against incorrect entries is inline validation. Validation can only catch a small proportion of specific errors, but it is generally a good approach since people are notified something is not quite right before they hit the Submit button. Therefore it eliminates the need for the dreadful error messages. “Fatal error - you have not filled in all the details!”. “Oh my god, fatal error - someone actually died!” screams the user in horror.

http://www.flickr.com/photos/22853684@N07/3762997515/

There are multiple ways how inline validation can be implemented. Luke Wroblewski put a few validation variants to the test. Based on his study, validation ‘after’ (after the user indicated that she was done answering a question by moving on to the next one) is the winning option - both in terms of efficiency and user satisfaction.

So what?

Incorrectly entered details in online forms are a frequent problem that can cause a lot of hassle down the line. However, when designing forms, make sure you use a sensitive approach to minimising those errors and do not make the people do all the hard work for you.

I would love to hear about your tips for minimising errors in forms.

(Published on Flow Interactive’s blog)