The Kayak iPhone app

Flight search is a difficult design problem. There are millions of scheduled flights every year and even when constrained by route and date, the amount of choice can be paralysing. Flights can be amongst the largest purchases someone makes during the year, yet confidently picking out a single flight when there are so many variables can be daunting.

Providing flight search on the web is a tough challenge, but doing the same on a mobile device with a smaller screen and larger controls needed to accommodate fingers is even harder.

The candidates

I decided to look at the current state user experience of flight search on mobile devices. To get a feel for it, I looked at seven of the most popular iPhone apps:

• Kayak (version 18.0.0)
• Hipmunk (v. 1.0.2)
• Skyscanner (v. 1.0.5)
• Liligo (v. 1.4.2)
• Oneworld (v. 1.8)
• FlightNetwork (v. 1.0.4.1)
• OnTheFly (v. 1.0.4)

To evaluate each app, I searched for a real flight that I’ll be taking this summer from London to Los Angeles. My dates are flexible, arriving 4th-6th June and leaving 10th-12th June. This is a busy route and one that almost always includes a flight that arrives the day after it takes off.

Selecting airports

Even at the simplest first step, there are a number of considerations to take into account. Choosing which airport to fly to and from can lead to confusion, as cities such as London and New York have multiple airports. If you’re unfamiliar with these, you may not know which is the best to fly to.

From left to right, Skyscanner, OnTheFly and FlightNetwork.

The best apps provide a shortcut for an entire area and illustrate the hierarchy of locations. Skyscanner indents the airports within a single city to show this, while OnTheFly suggests nearby airports and their distance from the one you selected. On the other end of the scale, FlightNetwork doesn’t differentiate between airports in the same city, leaving you to rely on the three letter codes to work out which is which.

Selecting dates

When you’re planning a holiday, sometimes you know exactly when you’re travelling, but often your dates will be flexible. In my case, I could fly on several different days, so I would ideally be able to use flight costs to inform that decision. However, only Kayak and OnTheFly allow for flexibility. Without this facility, you’d have to go back and forth between searches in the other apps to be confident of choosing a suitable flight.

Kayak, OnTheFly and Skyscanner.

Two ways are used to select dates: on a calendar and using a roller. I found that the former makes it easier to relate what can seem like arbitrary dates to actual days. Kayak has perhaps the best date selection, although Hipmunk and OnTheFly merge adjacent months. Of the roller selection methods, Skyscanner is perhaps the best, with shortcut buttons below it.

Search results

Once the results come through, you need to be able to narrow down the list of flights and be able to make a confident decision about which is the best option. The clarity of the results varies quite a bit. Here, Kayak is surprisingly weak; it groups flights together, which forces you to tap on each row to reveal the details. However, its filtering options are the best available, allowing for precise refinement and clearly showing which filters are active.

Kayak’s results aren’t easy to compare, but the filtering options are excellent.

Hipmunk is best known for its time-based approach when showing results and this is mirrored in the iPhone app. Flights are displayed across a timescale and can be sorted by four categories, although there are no filtering options. It’s not obvious what you’re meant to do next: you have to tap on a flight, tap on an arrow, then ‘Select This Option’ on another page to bring up available return legs, where you run through the same process again.

Hipmunk forces you to selection one leg before presenting you with the others.

While regular users of the main site will be familiar with its peculiar interaction model, it’s a poor experience for those who aren’t. Having to pick one leg before viewing the others narrows down the selection too far: what if there are several suitable outbound flights? You’d have to go back and forward to compare all the options. Viewing a flight as a set of both the outbound and return legs seems like a more logical way to think about it when both are important.

OnTheFly has a number of notable aspects to its results. The initial display is a matrix of airlines and stops, allowing you to filter your search by pressing on any of the options. You can also view a breakdown of cost per date (in my case, there’s a £400 difference between two days) and uniquely, the available routes on a map. The flight list is perhaps the clearest of all the apps tested, showing price, date, times, duration, stops and airports all in a single, compact row. Full details are then quickly available within the same page.

OnTheFly has a number of unique features.

Of the apps, Skyscanner has the best listings and filtering options, although the time filtering is too vague, with options for ‘Morning’, ‘Afternoon’ and ‘Evening’, without specifying when these actually are. Liligo also suffers from the same ambiguity, as well as a poor filtering screen in general, which has buttons at the top and bottom. This implies that they have some different function, which is not the case. Oneworld and FlightNetwork offer no filtering options for their poorly organised results, rendering them fairly useless.

Skyscanner’s ambiguous time filtering, Liligo’s odd button layout and FlightNetwork’s results.

Closing the sale

Perhaps with the exception of Oneworld, all of these companies rely on income generated by booking referral fees. Once someone has found the flight they’re looking for, there needs to be a smooth handover to other sites where they can book, or an option to continue their shopping journey on another computer at a later date.

All of the apps except FlightNetwork and Oneworld allow you to send yourself the search results, typically via email. Hipmunk has the best continuation options, allowing you to email booking links or remember a unique word to continue your journey later. Most also show recent searches when you relaunch the app, allowing you to continue from where you left off.

Hipmunk’s options, Virgin Atlantic hijacking the booking process via Skyscanner and OnTheFly’s call to book instructions.

Several times when I tried to book a flight, the carriers’ websites routed me to mobile sites which didn’t support booking. This broke the journey and forced me to back up to find another way to continue. OnTheFly has a relatively weak booking process, considering its strengths in other areas. You’re forced to phone the carrier, at least on the flights I looked at, requiring you to go through a complicated and cumbersome process. Why there isn’t an option to book online, I’m not sure.

Ten design principles

Having reviewed the current crop of flight search apps, there are a number of principles that I would recommend any of them follow:

1. Support users when choosing airports
2. Provide flexible date selection
3. Show dates in a calendar view
4. Allow users to filter and sort results
5. Make filtering options precise and unambiguous
6. Show both legs of flights in the same view
7. Provide a clear overview of each flight option
8. Allow shoppers to continue their search or booking on another computer
9. Ensure that online booking on carrier websites works when mobile
10. Show recent searches when users relaunch the app

Conclusion

Of the apps tested, none excel in all areas, which isn’t surprising given the complexity of the design problem. Kayak is the perhaps the best, with excellent date selection and filtering options making up for its poor results view. I didn’t expect much from OnTheFly due to it’s unappealing icon and unfamiliar name, but it provides an excellent experience in all but the final booking stage. Hipmunk is interesting, but only those familiar with its concept will be able to get the most from it. Its time-based view is innovative, but it isn’t always as helpful at supporting your decision making as it could be.

Skyscanner is the best of the rest, with generally solid selection and filtering options, which can be too vague at times. Liligo is competent, if confusing, while Oneworld and FlightNetwork are best avoided.

Why bother?

I’ve been doing a lot of research and testing on mobile websites at work recently, so I was curious how I’d create one for Thunderbolt.

Although mobile usage currently accounts for a very small percentage of the site’s traffic, it’s growing and mobile users are more likely to be regular visitors. Catering for our most valuable and loyal visitors should be a top priority, even if there are only a few of them.

It’s also important for us to be a leader in our small field. None of the other AIGW members have a mobile website, so being the first allows us to establish the best practice for what we do and start a discussion on how independent sites like Thunderbolt interact with our readers when they’re mobile.

Who and what to design for

Mobile websites have many more limitations than desktop sites due to screen size, bandwidth and so on. Because of this, you have to focus on designing the core functionality of a site or service, not all of it.

However, what might be core functionality on the desktop isn’t necessarily core functionality on mobile. Before designing what a mobile site looks like and how it works, you have to consider who the site will be used by and what for. Once you establish the context of use, you can determine the best experience to provide.

Given the data from our analytics, my knowledge of Thunderbolt’s forum users and what I’ve seen from projects at work, I decided to design for three core scenarios:

1. You have spare time and want to check the latest articles
2. You want to find a specific article or see if there are articles about a specific game
3. You want to check the forum

These map to three core functions:

1. Latest articles
2. Search
3. Forum

This formed the basis of the mobile site’s structure and navigation, which would also include an About page, for those that are not returning visitors.

Implementation

There are many options to consider when designing a mobile website, but after much research, I decided to build a separate mobile website and then switch users to the appropriate site using device detection.

Device detection is not ideal, but serving the same content to both desktop and mobile (especially images) is not an option. Building a separate site from scratch also uncouples you from the additional content and layout of the main site, allowing you to concentrate on the mobile experience.

We already create a number of header images for each article, some of which are conveniently sized for use on the mobile site, so these we simply re-used. For re-sizing screenshots, I opted to use tinySrc, a free third-party service.

Device detection is done using the Detect Mobile Browsers, a free PHP script. Users can switch between the mobile and desktop Thunderbolt sites, with a cookie used to remember when their preference is to view the desktop site.

Almost all of the backend code was used, unaltered, from the main Thunderbolt site. As so few changes to this were required, the total implementation time was only two (fairly lazy) days.

Conclusion

Creating a mobile site for Thunderbolt took quite a bit of time to research, but it was surprisingly quick to do. The resulting site speaks for itself: using Thunderbolt on your mobile device is now much quicker and (hopefully) more focused towards what our readers want to do when they’re on their phones.

Background

The old Thunderbolt forums, on vBulletin

At Thunderbolt, we’ve been using vBulletin for years. It’s a piece of software which undeniably shows its age: it can do just about everything you need, but its complexity can be daunting. The admin panel is particularly obtuse, with primary navigation so unwieldily that it needs its own controls and preference system.

When vBulletin 3 (originally launched in 2004) reached its end of life, we had the choice to paying to upgrade to vBulletin 4 or look elsewhere. Fortunately, at the same time, three former vBulletin developers launched their own forum software: XenForo. After following its development for a few months, I switched Thunderbolt over to it a few days ago.

What XenForo does well

The most striking thing about XenForo is that it looks and feels like forum software designed in 2010, not 2004. Its layout is clear, it loads quickly, makes heavy use of JavaScript and has a number of features patently inspired by social networks and videogames.

One of the most interesting additions is the ability to ‘Like’ a post. Forum software has had reputation, karma and rating systems for years, but they typically require too much effort to use and little incentive to do so. Although it initially seems like a superfluous novelty, XenForo’s Like system appears to be meaningful and effectively encourages widespread use, as only a single click is required.

Trophies is another concept borrowed from elsewhere, allowing users to receive awards for completing various actions on the forum. This echoes achievements on Xbox Live, trophies on the PlayStation Network and badges on Stack Exchange. These systems have worked extremely well and to introduce them to forum software seems only natural.

The alerts system

An alerts system, similar to Facebook’s notifications, keeps users up to date with replies to watched topics, new trophies, posts where they are quotes and other occurrences. A notification system like this is perfect for these minor actions, where being informed is useful, but not so significant that you would want an email.

A number of forum software conventions have also been discarded by XenForo. Topic titles link to the first unread post, rather than forcing users to click a smaller adjacent link. This seems like a minor adjustment, but it’s a huge improvement in the user experience and one that deserves a separate article entirely. Announcements and topic icons are also not present with little consequence.

XenForo’s administrative tools are also well conceived, with an aggressive and efficient spam cleaner, clever post moderation, elegant theme style controls and external data import that doesn’t require you to go to the command line.

What still needs work

Of the component parts of a forum, the permission system is by far the most difficult to design. Complete flexibility is required, yet it must also be easily understood and straightforward to manage. Individual users, groups of users and forums all have a set of permissions and these combine in a number of ways.

Unfortunately, XenForo’s permission system is flexible, but extremely difficult to interpret. There’s the ability to see your forum as another given user would, but this doesn’t illustrate the finer points of the system. On top of this, there are Super Moderators, Moderators and Moderator groups. How these work is not explained. With trial and error, permissions can be setup, but like other forum software before it, XenForo hasn’t solved this tricky design problem.

The admin control panel is generally well laid out (especially when compared to vBulletin), but its information architecture makes little sense in places. The Node Tree and Spam Cleaner are under the heading ‘Applications’, which seems to be an awkward refuge for functionality that does not comfortably sit anywhere else.

There are a number of other small features still missing, although these may be added as the software matures. Notably, users and topics cannot be pruned en masse, and custom BBCode is absent (although a capable add-on exists).

Conclusion

The forum software market needed a serious new competitor and XenForo fulfils this role. Starting from scratch has enabled them to tackle design problems differently, and without the considerable weight of years of legacy code. XenForo isn’t even out of beta testing yet, but even now it is a capable and viable alternative to vBulletin. While it lacks a few features that you might expect, its benefits far outweigh the drawbacks and this will only improve as it matures. XenForo has made an impressive start and its outlook is equally bright.

Is the time it will take to read this less than the time I have available?

If you notice an interesting four page article in a magazine on a long train journey, you’re far more likely to read it than if you were waiting in a queue for two minutes.

The length of printed text, whether in a magazine or on a billboard, is easy to determine. All you have to do is look at the physical dimensions of what it’s printed on to make a reasonable guess of how long it’ll take to read. Online, this judgement is often based on the size of the scrollbar, which shrinks as the page becomes longer.

The problem

However, unlike print, the length of online text can change when articles have comments. Typically, these are displayed below the main content, with no pagination or other means to hide them. Shown this way, the length of the page and thus the scrollbar is distorted.

Once many comments are posted, the actual content of the page may only make up a small fraction of its entire length. When this happens, an article appears to be far longer than it actually is and so people are less likely to read it.

Smashing Magazine is a prime example. In this article, comments take up approximately 20,500 pixels of vertical space, or 74% of the entire page. Consequently, the scroll bar reverts to its smallest size, indicating that the article is extremely long. This is discouraging for anyone who isn’t prepared to scroll down to check the actual article length before they start reading.

The solution

There are three ways to remedy this:

1. Remove comments altogether
2. Move them to another page
3. Reduce their presence on the page

While the first option is the most effective, comments bring enough value to most websites to discount removing them altogether. Separating comments from the content – as seen on A List Apart – can work, but it may reduce the number of people commenting as the ability to do so is less obvious.

The third option offers a suitable compromise by showing comments, but not letting them take over the page. On Thunderbolt, we show the first three and then provide a link to instantly reveal the rest.

This ensures that most of the page is content and that the scrollbar is representative of its actual length. Beyond the first three, any additional comments have no effect on page length. People can quickly scan the discussion and only if they’re interested, see it.

Given that the scroll bar is such a core navigational tool, it’s surprising how many websites don’t seem to care how it behaves. When articles receive a substantial number of comments, their effect on page length should be contained so that the scroll bar size doesn’t trick readers into thinking that the article is longer than it really is.

This problem has been on the horizon for a long time, but has reached a tipping point with the most recent raft of changes. The negative publicity is a necessary catalyst for alterations that must be made, but it’s also made people jumpy. Talk of deletion and defection is beginning to undermine the system, but the hard fact remains that there is no viable alternative.

Privacy and control

This is not an issue of privacy though, but of control. Given the amount of feigned outrage by pundits who obviously don’t use the service as we do, you’d be forgiven for thinking that Facebook is the one that has taken away our privacy. This is not the case though; there are many websites more open than it, including Twitter, Flickr and YouTube. The difference with those is that people understand and have control over what is public and what is private.

When you publish a video on YouTube or post on Twitter, you’re very much aware that it’s public. Knowing the risks, you become more guarded about what you say and do. Facebook, on the other hand, is a fundamentally private domain. Everything about it, from arranging events to commenting on personal photos, implies that it is a should be secure from prying eyes.

Complexity and granularity

It’s easy to look back and see how this problem came about. When Facebook say that they are committed to privacy, I believe that they are genuinely sincere. However, the way that they have gone about securing our personal information lacks long-term thinking and has, as a result, not scaled.

The decision to allow a highly granular level of privacy control made sense given the complexity of human social interaction. For instance, some photos should be seen by everyone, but others are not suitable for colleagues and family. We make choices about how to share personal information every day, whether that’s in the physical or digital world. As a site built for everyone to use, Facebook is bound by the same social rules that we would expect to apply in a space where so many different groups of people are present.

As Facebook has now so painfully discovered, the price of granularity is complexity. As the amount of information on the site has increased, it has become impossible for most people to keep track of so many different controls. Whether Facebook has been naïve not to anticipate this or has planned it with malice does not matter; either way it needs to be fixed.

Solutions, value and conclusions

There is now only one viable course of action available to Facebook. They must act decisively to simplify their privacy controls or accept a future in which they become increasingly irrelevant. Designing a new system will be a difficult task that may result in a loss of granularity, but the value of clarifying its privacy controls and restoring trust in the site will be immeasurable.

Despite the concern, Facebook remains a valuable tool that has changed the way we live for the better. When the detritus of pointless games, adverts, fan pages and suggestions are so pronounced, it is easy to forget about the underlying functionality it provides. Facebook allows us to keep in touch with people without doing anything. When friends move address, get a new phone or change their email account, it doesn’t matter. Without Facebook, the world would be less connected and as clichéd as it might sound, less social.

It may be in trouble, but Facebook is something worth preserving. Zuckerberg and company have been handed their first serious test in their history. What they do now will plot them on a course to further success or a slow demise.

Catering for short attention spans

Because people are seemingly in such a hurry to race through all the content they have to consume, content producers add summaries, emphasise important points and create lists to make the information as easily digestible as possible.

This is extremely useful for content such as news, where there is an endless amount of things to read. In many cases, people just need the very basic details and little more.

Distraction-free reading

But what if someone actually intends to read an entire article? Now it’s a completely different situation; they’ve decided that they want to go through the whole thing until the end.

To do this successfully, they need as few distractions as possible. The teasing snippets of information that tempt users with short attention spans no longer apply; in fact, they’re disruptive.

An example – Time.com

Today, I was skimming through my Twitter feed and I spotted an article about the iPad by Stephen Fry on Time.com. It’s an interesting read, but it’s also a perfect example of how not to design content for people who actually want to read it.

As you scroll down the page and try to focus on the text, your gaze is continually interrupted by other things that grab your attention.

Netbooks Worth Buying Right Now? But I’m reading this article right now. Why is there a link to netbooks right in the article copy? Is that as advert or somehow related? Maybe I’ll click it to find out. Or maybe I’ll click on that Jennifer Aniston article that looks amusing. Or find out if Trader Joe’s dive into sustainable seafood can make a difference.

See what I mean?

It’s almost as if Time don’t want you to read the article at all. You have to run a gauntlet of distractions to even get to the bottom of the page, at which point you discover that there are three more pages to navigate.

Designing for reading

Optimising a web page for reading is easy. You don’t need to remove sidebars completely or avoid linking to other relevant content, but you should give people’s eyes some space to focus on what they want to read.

The Guardian does a reasonable job of reducing the number of distractions available. Although many pages have related articles in a sidebar on the top right, there’s nothing on the left:

The New York Times also keeps distractions to a minimum by keeping the area to the left of the text free and minimising the effect of the information to the right. Sure, the image is large, but it’s easy to determine if it’s relevant so that you can get back to reading.

The ultimate reading experience

Imagine a way to read articles with as few distractions as possible, where sidebars and other annoyances are not an issue. Well we already have just that, on mobile devices.

On iPhone applications, the article copy is often all that you see and if you’re viewing a normal web page, you can zoom in to the main column of text. This makes it a perfect environment for reading because there are simply no interruptions.

Mobile sites and applications are often viewed as second-class citizens when compared with full websites, but they often provide a far superior reading experience.

To conclude

When I think of people browsing the Web, I think of them doing it in two modes:

1. Skimming – jumping from content to content, with a short attention span.
2. Reading – deliberately reading an entire piece of text, with a long attention span.

People begin by skimming, but once they’ve found something they want to read, let them do it. Don’t offer distractions where they’re not welcome.

Last Sunday, we had the first meeting of The Association of Independent Game Websites in London. For something that was founded only a few months ago, the turnout of around 15 people was better than I ever expected.

What was immediately apparent was that the AIGW appeals to a very wide range of people. We had website owners and freelance journalists, people who want to go into the industry professionally and those who are just doing it as a hobby. There were large sites represented and those that were only a one person operation, people whose core competency was journalism and those who were more comfortable with the technical side of running a site.

A place for best practice

One of the reasons I set up the AIGW is to establish somewhere for website owners to discuss and learn about best practice. To a certain extent, we’ve been working in our own little bubbles, unaware of how other people are doing the same thing. I run Thunderbolt the way I do, not because I read how to do it somewhere, but through years of practice and experience.

I spent a lot of Sunday’s meeting talking to people about how their site and other sites they’ve worked for operate. As you might expect, there was quite a variety of methods. Some sites pay writers expenses, others don’t. Some edit articles thoroughly, while others simply publish them without proofreading. The list goes on.

One of the first things I want to do with the AIGW is to have a section on our website for articles that discuss best practice. I’d like to model it on A List Apart, which some of you may be familiar with. That means coherent, edited articles that encourage debate. I don’t want them to be This is how you should run a site, but This is how we do it and why you might like to do the same.

Membership

Ben and I didn’t have much time to discuss how we’re going to handle membership in the future because of a very drunk man in a sheriff’s hat harassing us (don’t ask), but we agree on the general principles of it. At the moment, only the founding sites are members and this list will grow when we have time to develop the website to accommodate new sites.

We still need to iron out the finer details of how we accept sites and on what basis. It’s important that we’re fair, transparent and consistent, so we’re not going to rush into accepting other sites without first thinking it through properly.

Future meetings

At the moment, we’re looking to have a meeting every three or four months. The next one will likely be in late June/early July in London. There’s also the possibility of having other meeting elsewhere depending on demand, since London can be quite a journey for some.

Thanks!

None of this would be possible without the support of other website owners and journalists in our little endeavour. Thank you for your enthusiasm and interest so far; we hope we can repay it with an organisation that meets your expectations.

CountryEx’s current dashboard

As you may be aware, I’m creating a stock trading game called CountryEx for my final year project at university. It’s been in development for over six months and last week I opened it for a private beta test.

Since CountryEx is a social game in which every player’s actions affect other users, it’s impossible to properly test without real people playing it. Getting feedback while the game is still in development is also a huge bonus since any flaws can be ironed out before it’s exposed to the general public.

The numbers

So far, I’ve recruited over 40 friends and users of the Thunderbolt forums and the game has been running 8 days. In that time, the traffic it’s received has been remarkable. Google Analytics has logged over 12,400 page views, which works out to 33 page views per person per day. The average visit time is over 18 minutes and the average number of pages viewed per visit is over 16.

An individual country

It seems that I’ve got people addicted. While this was never a goal I had in mind, it’s apparent that the success of any game like CountryEx relies on keeping players interested over a long period of time and encouraging them to return. At the moment, it seems that the ability to compare scores with other players and the predictable nature of updates are two of the most compelling features, but perhaps it’s best to save the subject of designing for addiction for another article.

The road to a public launch

There’s still plenty of work to be done on CountryEx before it can be unleashed on the public. Key pieces of core functionality like dividends and user profiles are either still being developed or have just been added with little testing. Time also needs to be taken to properly balance the game and adjust the various models that control how the it alters over time.

I’m currently targeting a full launch at the end of the month. If you’d like to get involved with testing, please get in touch and I’ll give you access – all you have to do is play the game, nothing more. If not, then follow CountryEx on Twitter and stay tuned for updates.

Let’s play a game

Can you recognise which websites these screenshots belong to?

How did you do?

Anyone who’s used these sites should immediately recognise their distinctive styles. They are, of course, BBC News, Facebook, The New York Times and Wikipedia.

The importance of identity

What that hopefully demonstrates is that a website’s identity is not simply its logo, but the entire design. Identity is not just a small trademarked name or symbol, but all of the other details that define its visual style. It’s the typography, the borders and lines, the use of colour and images.

Within specific industries, identity is even more important. Standing out from your competitors is crucial and so you need a recognisable visual style. This is one area in which I believe Microsoft made a huge mistake when they launched Bing.

Compare these two screenshots:

Which of these is Google and which is Bing?

It’s hard to tell at first, because Bing’s visual style (top) is an almost exact copy of Google’s, which is one of the most recognisable on the Web. When you see Bing’s search results, you don’t see Bing, you see Google.

Perhaps Microsoft would interpret this as what search looks like, not what Google looks like, but either way it’s a telling sign of the extent of Google’s influence.

Designing the visual style first

If you accept the premise that a website’s visual style is comprised of and defined by many things and not just the logo, then this allows you to change the way you design. Instead of creating a website to fit a logo, you can design a logo to fit your website.

Thunderbolt’s design is unique because we pay particular attention to the legibility of our articles and because we don’t have any adverts. Where other videogame websites are cluttered and overwhelming, ours is clean and tidy. Consider this comparison of another videogames website and Thunderbolt:

When it comes to redesigning a website, it’s okay to change the logo if you retain the visual style. That doesn’t mean copying it exactly, but making sure that certain details are recognisable. Take, for example, the current and new versions of Thunderbolt:

In the second, development version, there are a number of changes to this area of the design, but it still looks like Thunderbolt. The background and font size may be different, but by using the same border styles and typeface, we retain the aspects of the design which define our identity.

You are not your logo

Logos are an important part of any organisation’s image and are a useful communication tool, but on the Web, they aren’t alone in defining identity. The other 99% of your visual style is what makes you truly recognisable and what you should be more concerned about.

This exercise proved to be interesting not only because it was the first of its type that I’d done, but because it exposed the vulnerabilities of designing with assumptions when such a wide range of people are the target audience.

Dealing with the ‘obvious’

During one of my studies, I asked someone to walk me through the process of importing a photo from a camera to their computer, as they normally would. Of the entire process, the following screen caused by far the most problems:

At first glance, this looks fairly straightforward; you choose a name and pick a folder, then click “Next”. However, what may be obvious for some of us might not be for everyone else.

When I asked the participant about this screen, he mentioned that he didn’t know what the “\” symbol meant. For people who have grown up with computers, this is immediately recognisable as a folder separator. With this knowledge, the assorted letters in the drop-down are a clear file hierarchy, but without it, they’re simply a jumble of words. If you didn’t know what a backslash represented, which would you pick?

Designing with assumptions

So how can you design around problems like this? First of all, you need to know your audience. In this instance, the target audience includes anyone that takes photos and uses a computer, so it’s extremely broad. On the other hand, you might be designing an interface for a very narrow audience, such as medical professionals.

Understanding who will be using your product is essential because the number of assumptions you can rely on is inversely proportional to the size of your audience. In other words, the more varied your audience is, the fewer assumptions can be made.

If you’re designing something with a tightly controlled user group like a commercial airliner, you can almost guarantee that they will know certain things. However, if you’re working on a screen like the one above, you have to greatly reduce the user’s assumed knowledge.

To conclude

Almost every task we’re faced with in everyday life relies on using assumptions that we’ve learned. When you use a new toaster for the first time, you assume that by pushing the lever down, it will toast bread.

This is obvious, but what if you didn’t know that? Are there affordances and clues that allow unfamiliar users to operate it? How would you learn about that common, assumed knowledge for the first time? Asking similar questions about your user interfaces often pays dividends.