1. How The Wire can help you be a better design researcher

    Posted May 22, 2015 in research, user centred design  |  No Comments so far

    I liked this post on Medium by Sam Ladner about how design researchers need to think fast and slow. If you work in design or UX or whatever, you should read it.

    Taken from the Medium article

    Taken from the Medium article

     

    The general gist is that problems can be approached with two different styles of thinking: “fast” thinking, in which the components of an idea are allowed to form in rapid succession without being challenged or tested too much, and “slow” thinking, where the opposite rule applies and ideas come into being via a more rigorous and methodical process. Design research will be more successful if you combine both ways of thinking, says the article, before going on to explain at what stages in a design process “fast” or “slow” thinking would be most appropriate.

    When I read the piece, however, I found myself thinking of The Wire (as I often do) and specifically a scene where Baltimore detective Kima Greggs arrives at her first murder scene with her partner, Bunk Moreland. Here’s the discussion they have about “soft eyes”.

    Bunk: You know what you need at a crime scene?
    Kima: Rubber gloves?
    Bunk: Soft eyes.
    Kima: Like I’m suppose to cry and shit?
    Bunk: If you got soft eyes, you can see the whole thing. If you got hard eyes — you staring at the same tree missing the forest.
    Kima: Ah, zen shit.
    Bunk: Soft eyes, grasshopper.

    Kima and Bunk

    When I’ve approached design research projects in the past I’ve often thought about them in terms of “soft eyes” and “hard eyes”. There are various points along the way where you need to defocus—take a step back from everything you’ve put up on the wall or into your spreadsheets, stop yourself from staring at individual data points or considering specific questions, and allow the whole thing, everything you’ve learned or accumulated, just permeate your consciousness. Then you’re more likely to grasp overarching themes and patterns, those elusive things that lurk behind the data. This is how I interpret “soft eyes”.

    “Hard eyes”, on the other hand, are needed at other times: when you do need to solve a very specific problem, to optimise something in your design, to understand why something isn’t working. This is when you step forward to focus on individual data points and questions, or apply checklists or other pre-defined analytical processes to solve your problem.

    Knowing when you need “soft eyes” and when you need “hard eyes” is important. You can’t get by with one and not the other. And I think this applies just as much to “fast” versus “slow” thinking, as defined in the Medium post.

    Postscript: Quora has a thread about Bunk and Kima’s “soft eyes” discussion if you want to read other people’s thoughts about what it means


  2. “Fast is good, clever is better” – on speed, or the lack thereof

    Posted April 28, 2015 in user centred design  |  No Comments so far

    Two articles on a similar topic. One is recent and the other is old. Both UX design related so don’t worry if you’re not interested in that kind of thing.

    First, “Let Your Users Wait” by Tal Mishaly at UX Magazine. The upshot is that designers of interfaces should think more about time: about how users perceive it, about how the same period of time can seem to pass more quickly or more slowly depending on what the interface does, and even about how it can sometimes be useful to create delay.

    Second, an oldie but goodie from four years ago: a cognitive teardown of the Angry Birds user experience by Charles Mauro in 2011. Reading the first article made me remember this one and how much I liked it at the time, so I dug it out of my bookmarks and read it again. I was hooked on Angry Birds back then, and some of Mauro’s comments about the game’s approach to response time management had a big impact on me:

    In Angry Birds, it was possible for the programmers to have made the flight of the birds fast – very fast, but they didn’t. Instead they programmed the flight of the angry flock to be leisure pace as they arc across the sky heading for the pigs’ glass houses. This slowed response time, combined with a carefully crafted trajectory trace (the flight path of the bird), solves one huge problem for all user interfaces – error correction. The vast majority of software user interfaces have no consideration for how users can be taught by experience with the system to improve their performance.

    I reinstalled Angry Birds recently to show to my 3-year-old son before recoiling in terror from its barrage of ads and—worse—dark patterns leading to shady in-app purchases. But despite all that I think there’s still a lot for interaction designers to learn from Angry Birds.

    If you’re one of them (an interaction designer that is, not an angry bird) feel free to spend tomorrow morning playing Angry Birds. If your bosses ask you what you’re up to, tell them it’s research and point them to Mauro’s article.


  3. A Bad Idea, Beautifully Expressed

    Posted February 20, 2015 in user centred design  |  No Comments so far

    I’ve been ploughing my way through this long New Yorker interview with Jony Ive over the last few days. In it, he says this:

    “There are some people who can draw something that’s fundamentally ugly, but draw it—hint at detailing—in such a way that it’s seductive.”

    It’s probably not the most quotable part in the interview, but it struck a chord with me. The phenomenon Ive refers to is something I’ve noticed over the last few years in my own job as a user experience designer, but it isn’t something I’ve heard discussed a lot.

    The thing is, some people are very good at coming up with ideas. Some people are very good at expressing the ideas they have, in the form of sketches, documents or diagrams.

    In an ideal world these two sets of people would overlap to such an extent that they formed a single set of people who had great ideas and could express them beautifully. People outside that set would have awful ideas and you’d be able to tell they were awful because they’d be drawn in a horrible, messy way.

    But in reality, there is not a perfect overlap between these sets of people. And this is where the danger creeps in, for anyone who runs design processes, or whose organisation depends on their success.

    Sometimes a good idea can be disguised in a messy drawing or a badly written document. If you don’t look carefully it’ll pass you by. Other times—and these are the dangerous times—you find yourself looking at a bad idea, beautifully expressed. What makes it dangerous is that you might go forward with that bad idea, and only learn that it’s bad long after you’ve committed to it, when it’s too late.

    I believe that designers must be able to sell their ideas. But Ive’s remark highlights the fact that there’s another side to that coin and that it’s possible for an idea to be oversold.

    I love working with people who are really great at drawing, and I wish I had that skill too, but it’s important to remember that an idea doesn’t become great simply because it’s been drawn well: and that a bad idea, beautifully expressed, can be a dangerous thing.


  4. If Only Your Icon Would Take This A Bit More Seriously

    Posted October 7, 2014 in user centred design  |  No Comments so far

    The other day I wanted to find out if I could move Skype credit from one account to another. If I could, I’d have been fairly happy as I’d have saved money. A quick Google found this page on the Skype website:

    Bad icons

    Yes, you did answer my question—but I’m not happy about it


    It was slightly jarring to see the happy-face icon beaming at me like a puppy seeking approval. Yes, you did answer the question, little website, but it wasn’t the answer I wanted. Can you please stop grinning?

    Sometimes the substance of an answer is more important to the reader than its clarity or precision.


  5. Some photos of nicely designed house signs in Fowey

    Posted September 6, 2013 in ephemera, Photos  |  No Comments so far

    We recently went on holiday to Fowey in Cornwall. It’s a bit hilly and out of the way but it’s a gorgeous place. This is the view from the house we stayed in:

    Looking across the bay

     

    While we were there, we noticed nice signs on some of the houses which seem to have been designed and made in the same place. We took photos of them and I thought I’d post them here.

    18 Harbourside

     

    In 18 Harbourside you can see the hallmarks of this sign-maker, with the scorched-clay cream and terracotta colours and concentric circles emanating from the centre. The designer’s interest in typography is also evident. The font reminded us of the famous Computer typeface, but that might not have been intentional.

    The famous Computer font

    That famous Computer font in full (sort of)

    This next one is the first example of the boat motif appearing in these signs. Fowey is a harbour town so boats are a bit of a thing there.

    23 Beam Reach

    Again, lots of attention has been paid to the typeface, which is a block Roman with slightly sloping serifs. Staring at it long enough you start to see some imperfections in how the type is laid out, but that’s to be expected as this wasn’t done in Photoshop.

    Here’s the smallest and most boring one.

    Number 38BWe spotted it towards the end of the trip, after we’d seen all the other signs, and only photographed it because we recognised the style. If I’d walked past this sign on its own I don’t think I’d have given it a second glance. It’s still a nice sign though, especially the style of the numbers, although the “B” sits a little too low.

    So now we’ve got 38B out of the way let’s move on to the last two which, you’ll be pleased to hear, both feature boats.

    Number 45

    Number 45 is quite a simple and compact arrangement with only three elements: the number, the boat, and a couple of squiggles representing the sea. The style of the numbers is a bit more distinctive than in the previous signs where the designer seemed to be using other typefaces as a template. He or she seems to be discovering a form of their own, which is nice to see.

    As good as it is though, number 45 is a test run for the best of the bunch: number 53.

    Number 53

    The chef d’oeuvre

    This sign wins on every score. Firstly, the concentric circle effect has been toned down – it’s still there, part of the sign-maker’s design language, but it’s not in your face like  on 23 Beam Reach and it doesn’t do any fancy spiralling like on 18 Harbourside.

    Secondly, the composition, with the boat centred above the numbers and the mast lining up with the left hand side of the 5. There’s a lot of empty space in the sign but it’s being put to work by how well the sign is laid out.

    Thirdly, the design of the boat itself. If you ask me it has more character: a ‘working’ boat, unlike the others which look like yachts for leisure. I know nothing about boats though so maybe you shouldn’t ask me.

    And then finally there’s the numbering, which takes the distinctive, personal style of number 45 above to the next level. It has some similarities to Souvenir, a classic 1970s typeface (from 1914, natch) but it really has its own personality.

    Next time we go to Fowey I’m going to try to find more of these signs and to figure out where they come from. In the meantime I’ve created a set on Flickr with the photos above. If you know anything about them, leave a comment!


  6. Pattern recognition, LEGO, interaction design and the Simpsons

    Posted January 23, 2012 in ephemera  |  No Comments so far

    I’ve written a piece on the Tobias & Tobias blog about pattern recognition, inspired by this amazing example of streamlined visual communication:

    LEGO Simpsons

    I'm sure you don't need to be told what these shapes represent

    This image gives our brain the chance to show off one of its most impressive skills – pattern recognition. Pattern recognition allows us to understand complicated things even when we’re only given limited information about them. So even though the object on the right is made up of three Lego bricks, representing only nine bits of information, pattern recognition makes our brain ‘see’ something far more intricate…

    Read the full piece here.


  7. Making online forms less painful – time for a radical rethink?

    Posted February 17, 2011 in user centred design  |  1 Comment so far

    Filling out forms is a necessary evil whether it’s on the web, mobile apps, work-related systems, or even on old-fashioned paper. We don’t enjoy doing it but sometimes there’s no other option.

    Why are forms such a chore? Designers from multiple industries have been trying to solve this problem for decades. Indeed, every layer of the experience when we use a computerised form has been meticulously crafted to reduce our stress – from the ergonomics of the keyboard & mouse to interaction components like dropdowns, radio buttons and auto-completed text fields. But the fact remains that they’re a stressful part of our everyday lives.

    A recent example of design being used to ease the pain of forms is Funnel, a survey tool for iOS and Android.

    Using Funnel for customer satisfaction surveys

    Funnel uses an approach designers commonly take to the form problem, which is to make the process feel more fun and playful in the hope that users will warm to it. What’s the rationale behind this approach? Is it really more fun to fill out forms that are designed like this?

    Making traditional form interactions look nicer

    The interaction models are pretty conventional, just designed in a way that makes them less intimidating (assuming you aren’t intimidated by large smiley faces, of course). While this layer of design might be dismissed as superficial by people who focus on functionality, it definitely matters. The visual layer provides users with a subconscious cue as to the type of activity they’re about to undertake, and this will in turn affect their emotional state as they embark upon the activity.

    Imagine two different signup forms, both asking for the same set of personal information, except one has been designed for a mortgage application process and the other for a music-oriented social networking site. They might even use the same set of interaction models – dropdowns, calendars, radio buttons – but we’d be surprised if the visual execution was identical. The mortgage provider should use visual design to convey an appropriate level of seriousness; after all, entering the wrong information may lead to rejection, or might count as fraud in extreme cases. However, this level of seriousness would seem oddly intimidating in the case of the social networking site.

    Guess which one of these forms is a mortgage application

    But is it enough to focus purely on the visual execution of forms, as Funnel seems to do, if we want to make them less painful? The visual, aesthetic layer design is slightly problematic in that it’s very culturally sensitive. A design that suggests playful informality in one part of the world might seem downright childish in another. This layer is also very subject to changing trends – a visual style that seems contemporary one year might become dated and corny very quickly. So perhaps it’s time to tackle the problem of forms at a deeper layer than purely visual design.

    What are forms for? To gather information from users. Do we always need highly specific and granular data? No. Are we still dependent on keyboard, mouse and touch inputs? No. Can new devices and the data they can gather fundamentally change the form-completion process? Maybe.

    Imagine a mobile form that works like a theremin, where the user lifts their device to change the value of a field, or tilts the phone to give a thumbs-up or thumbs-down. Imagine a restaurant whose mobile app gathers feedback not with a slider, but by having customers express themselves with a smile or grimace and then taking a photo and algorithmically “scoring” their satisfaction. Imagine a rail company using location data to invoke a customer satisfaction survey when a journey ends, referring to timetable data to work out if the train was late and pre-populating the form as appropriate.

    Some of these ideas may be less far-fetched than they sound at first. For example, the Happy Things project for Mac OS detects when you smile and automatically takes a picture of your face. It’s becoming easier for software to gauge our emotions as well as our location.

    There’s a lot of scope for innovation in the way systems gather input from users, especially where mobile devices with richer contextual awareness are concerned. The process can become more powerful as well as more playful, as long as we continue to challenge ourselves as an industry and as designers. Why not exploit these capabilities instead of – or as well as – making checkboxes feel nicer?


  8. “The ribbon” – a permanent new ingredient in interface design, or just flavour of the month?

    Posted January 10, 2011 in web  |  No Comments so far

    Over the last month I’ve been following a new(ish) trend in web design that I call “the ribbon”. I’ll show you some real-world examples shortly, but first here’s a mockup illustrating the basic idea.

    Bunsen's website, using straightforward boxes

    Here’s the homepage of Bunsen’s. The designer has separated the list of links (“log in”, “sign up”, etc) from the main content of the page by putting them in a little box. This is fairly standard practise, and works well enough.

    But now let’s imagine Bunsen’s wants to refresh their site design. “Can we make it a bit more 2010”, they ask the designer, “without really changing anything”? It’s at this point that the designer might reach for the ribbon and produce something like this:

    The ribbon to the rescue

    It’s nothing more than a positioning adjustment, drop shadow, and a little triangle, but it makes the “links” box look like it’s been draped over the larger one. The design has a bit more depth to it even though the change is purely at the visual layer (as opposed to structural or functional).

    Now that we’ve seen “the ribbon” in its basic form, let’s look at some screenshots of real “ribbons” found in the wild.

    Avaaz.org

    The first is from online activism site Avaaz.org. The “ribbon” is used for the box’s title, “Sign the petition”, and probably helps it compete for the user’s attention with the main image to its left:

    And here’s a close-up:

    Vodafone

    The next one is from Vodafone, and was used on their “12 Days of Smiles” campaign site in the run-up to Christmas. You might remember this campaign for its ill-fated #mademesmile Twitter stunt. After all it generated more press than this ribbon did:

    Vodafone's festive campaign site

    Close-up:

    A decidedly festive ribbon

    What’s interesting about this ribbon is that it definitely has a seasonal dimension. The cut-out triangle at the edge intentionally references festive ribbons (wrapped-up presents, mistletoe, etc) to make the campaign site more Christmassy. I guess that working with Vodafone, you can’t evoke a yuletide atmosphere the easy way by using lots of red: it’s their main colour after all. So “the ribbon” is a handy gimmick here.

    Western Union

    This ribbon example from Western Union is also intended to have festive connotations, I think, but it’s not as explicit. You’ll notice that that isn’t from a website but from a poster campaign (yes, this is my attempt at being “cross-media”):

    Western Union poster near Kensington Olympia

    The final two examples aren’t festive, but instead show the ribbon being used by companies that want to appeal to an early-adopter, urban, techie kind of audience. If “the ribbon” is to the early 2010s what the curved-border gradient button was to the “Web 2.0” mid-2000s, these sites are at least partly to blame.

    Foursquare

    The first is Foursquare, who have used “the ribbon” pretty sparingly. It makes an arrow leap out of the screen slightly, but it’s not very prominent:

    The Foursquare "arrow" ribbon

    The next example is far less subtle, however, and is the most extreme use of “the ribbon” that I’ve found so far.

    Notion Ink

    Here’s the website of Notion Ink, the company behind the forthcoming Android-based Adam tablet. They’ve had a lot of attention over the last year and its old Flash-based site was rightly criticised for looking like a bit of a relic. So they launched this new site shortly before making their product available for pre-order:

    Click the image to see in full size

    A fairly normal “ribbon” crosses the header of the page, acting as a backdrop for the primary navigation links, but after that it goes out of control, bouncing around the page’s background like a 3D game of “Snake”. In fact the ribbon pretty much is the design – apart from the slightly discordant bird, there is no graphical (e.g. not text or video) element on this page that is not part of the ribbon.

    Here’s another page from the Notion Ink site that shows the “ribbon” off to maximum effect:

    Hyper-ribbon!

    This ribbon seems to extend very far into the space of the screen, emerging from the distance to jut in front of the Adam tablet and the main text box. The page title (“The Philosophy”) is the only element that remains in front of the ribbon. This is the most extreme use of the ribbon I’ve found so far.

    Conclusion

    Is the ribbon a good or bad thing? I can see why some designers like it – it helps situate screen elements in a quasi-3D space, contributing to “user illusions” of spatiality that computer interface designers have been relying on for decades. But it could also become a modish gimmick, something designers lazily reach for when asked for “something that looks a bit more Web 3.0”. Maybe there’ll be a ribbon backlash. Or maybe it’ll become a strictly seasonal piece of design frippery, used only for festive campaigns as in the Vodafone example.

    What do you think about the ribbon? Is it something you’ve noticed yourself? And if you know of any more examples of it, let me know in the comments.


  9. Why I hate the Delicious extension for Google Chrome

    Posted December 16, 2010 in ephemera, user centred design  |  8 Comments so far

    (Edit: less than nine hours after I posted this article, Yahoo! announced plans to shut down Delicious. I guess there’s a reason why people call Yahoo! the place good ideas go to die)

    If you haven’t heard of Delicious, all you need to know is that it stores your bookmarks on the web. This is handy because you can access them from anywhere and share them with other people.

    Delicious used to be pretty exciting. Social bookmarking, tagging, RSS feeds – the potential seemed mind-boggling. But then Yahoo! bought it and it started losing its edge. Nowadays there isn’t much excitement about Delicious, but it’s still useful.

    One thing that makes Delicious particularly useful is the availability of various browser extensions. These extensions put a little button on your browser, allowing you to add and tag a page really, really quickly. Because it’s quick to add a page, you find yourself adding more pages – and the more pages you add, the more useful Delicious becomes.

    I use the Delicious extension for Google Chrome quite a lot, but I think I hate it. Here’s what it looks like:

    So you click on the “tag” button,  and then this appears:

    So far so good. But when you use this several times a day, you’ll notice some annoying and even hateworthy things about it.

    The first thing is that it has no persistence. If you’ve typed a brief, witty description of the page in the Notes field, and then carefully selected some tags to go with it, you don’t really want to go through that process again. But if you accidentally click outside the extension, that’s precisely what you’ll have to do – because it forgets what you’ve entered! Having to re-enter stuff I’ve already typed isn’t something I enjoy, even when it’s a relatively small amount of text.

    The second thing I hate about it is the placement of the Save and Cancel keys. You’ll notice that Cancel is in the bottom right, which is slightly unconventional – primary actions (Submit, Confirm etc) are usually placed to the right in forms like this. They’re also very close to one another. These two design choices conspire to make it a little bit too easy to hit Cancel by mistake – especially when you’re working quickly. Hitting Cancel closes the extension, meaning that – you guessed it – anything you’ve typed will need to be typed again.

    So these are the two reasons why I hate the Chrome extension for Delicious. If it remembered the stuff you typed, however, I would probably love it. This shows how fine a line there is between love and hate in user interface design, or (more likely) how much of a pedant I am about these things…