ia play

In an early version of the BBC’s iPhone 5 launch story the main image was captioned “Apple said the larger screen could still be easily operated with one hand”.

I read that and thought, still?

Last year I spent some time using the Guardian’s iPhone app and wondered why I found it so awkward to navigate when the Android app I was used to is basically the same thing just with some Android tweaks. The awkwardness came from needing to press the back button in the top left. I couldn’t reach it with my thumb.

I couldn’t reach the top left on the HTC Desire I was using either but it didn’t matter because you navigate back using the hardware back button at the bottom of the phone. Ben Lang on Carrypad points out that the (old) iPhone dimensions are generally better for one-handed use as the squarer proportions give the thumb more range, but it’s specifically the iOS design pattern of back top left that thwarts me. Other stuff appears in the top left on Android apps but not things i need for every other interaction.

Ben makes a similar complaint about the Android interface but I don’t find the notifications to be core interactions and centre-top isn’t as hard to reach left-top.

“Both the buttons… and the status bar, are always persistent, no matter where you are in the OS. You have to constantly use the Android buttons to navigate through apps and the home screen, and you have to pull the status bar down with your thumb to access any notification that comes through to the device. The core functionality of the device involves reaching your thumb from even further below the bottom of the screen to hit the buttons, then all the way to the very top of the screen to pull the notifications menu down.”

I guess on the larger screen sizes that Ben is concerned about even centre-top becomes a difficult reach. But top-left is a problem for me even on the 3:2 ratio iPhones.

Now I know I’m generally a smaller scale human being but I didn’t think my hands were exceptionally dinky. Hand anthropometry data confirmed my thumb is on the small size but not freakishly so.

Apart from Ben’s article I only came across one other piece on how (small) hand size might affect touch screen design. There seems to be more out there about larger fingers and the challenges they have with typing and target areas.

Interface Design for Single-Handed Use of Small Devices by Amy Karlson doesn’t go into huge depth about button positioning and thumb reach but she does mention:

“Additionally, thumb movement along the (top left – bottom right) diagonal direction was slower than for the other directions, suggesting a biomechanical constraint for that type of movement.”

So it appears that if my thumb and I want to use my phone single handed then I’ll have to stay away from iPhones. Given the trend with Android and Windows seems to be bigger and more rectangular, I may be increasingly out of luck there too.  Can we have a small phone backlash please? And no important stuff top-left ok?

Last year I was grumbling about why global navigation isn’t a good promotional tool and how people aren’t *generally* just wandering around the internet going “ooh, what’s that? I have no idea, why don’t I click it and see”.

And then I went to Food52, saw Piglet in their navigation and just had to click on it.

So now I feel I need to justify why this boxed pink piglet is different to all the stupid things I’ve ever had to argue against sticking in the global nav for ‘marketing’ reasons.

I wouldn’t base your navigation designs around my propensity to click on things that imply piglets. Although that does allude to a possible route to success with marketing via navigation. Some words are sufficiently attractive to enough people that sticking them in the navigation will always be successful e.g. “cute kittens” or “pretty women”. If the content you are marketing is said kittens or women then please do carry on.

Other reasons why this works ok:

• The basic navigation is pretty sensible
• The piglet is visually different
• It’s a single item
• It isn’t in the middle of the other items

(also worth noting that whilst I remember that Piglet did not lead to the piglets I was expecting, I can’t for the life of me remember what it actually does go to)

The BBC is also doing this at the moment for the Olympics but I’m not quite as taken with the approach. The rings do give a bit of visual difference but not enough.  The design was tight on space already so this feels a bit squeezed in.

And I wonder about the need here, especially this early.

Now Radiotimes used to be my favourite example of doing this. I mean, their navigation was always seriously focused. Home, TV, Film, Radio. That’s it! Plus one promotional slot, styled different for a single marketing priority. The discipline involved in getting to such a short navigation and then not stuffing it with other stuff just because there was space is impressive. And then deciding that you’ll pick one and only one priority at a time, also impressive.

Well, I say single. A little part of my inner IA died the day I saw this.

But I accepted it. It is reasonable. It’s two really important shows and they probably don’t want to pick sides.

And then they did this. Live events??? That’s not a big show, it’s not something loads of people are coming to site looking for right at this minute…that’s a vaguely named marketing initiative, probably ‘of strategic importance to the organisation’.

So piglets, yes. This, no.

One of classic IA arguments is about why New Service X shouldn’t be added to the primary site navigation.

Users aren’t *generally* just wandering around the internet going “ooh, what’s that? I have no idea, why don’t I click it and see”. If you just add random new stuff to the primary navigation, the main thing that will happen is it will get ignored as users carry on their journeys to wherever they were already going.

It can work ok for a new product category e.g. groceries but it really isn’t very effective for a new brand or unfamiliar feature e.g. X-PIL.  Combined with a big marketing push it might work, so you can get away with it if you have reason to believe this is going to be a really big new feature e.g. iPlayer *and* you are going to heavily marketing the brand.

This article is part of a series about our e-commerce redesign.

The browse structure of any website is always controversial within the organisation. I’m always struck by the discrepancy between how interested the organisation is in browse (as opposed to search) and how interested the users are. I’m not saying users don’t want a sensible, intuitive navigation scheme but they also want a really effective search engine. Most web design project involve huge amounts of effort invested in agreeing the navigation and very few discussions of how search will work.

Partly this is because navigation is easy for stakeholders to visualise. We can show them a sitemap and they can instantly see where their content is going to sit. And they know the project team is perfectly capable of changing it if they can twist their arm. With search on the other hand, stakeholders often aren’t sure how they want it to work (until they use it) and they’re not sure if it is possible to change anyway (search being a mysterious technical thing).

Even forgetting search, the focus on navigation is almost always about primary navigation with most stakeholders have very little interest in the cross-links or related journeys. The unspoken assumption is still that the important journey is arriving at the homepage and drilling down the hierarchy.

So I went into the e-commerce project assuming we’d need to spend alot of time consulting around the navigation structure (but knowing that I’d need to make sure I put equal energy into site search, seo and cross-linking, regardless of whether I was getting nagged about it).

A quick glance also showed that the navigation wasn’t going to be simple to put together. Some of my colleagues thought I wasn’t sufficiently worried but I’m used to the pain of categorising big diverse websites or herding cats as Martin puts it. I participated in at least three redesigns of the BBC’s category structure, which endeavours to provide a top-down view of the BBC’s several million pages on topics as diverse as Clifford the Big Red Dog, the War on Terror and Egg Fried Rice.

My new challenge was a simple, user friendly browse structure that would cover a huge book catalogue,  RNIB publications, subscriptions to various services, magazines, and a very diverse product catalogue of mobility aids, cookware, electronics and stationery. And those bumpons, of course.

Card-sorting is usually the IA’s weapon of choice in these circumstances. Now I’ve got my doubts about card-sorting anyway, particularly where you are asking users to sort a large, diverse set of content of which they are only interested in a little bit of it. Card-sorting for bbc.co.uk always came up with a very fair, balanced set of categories but one that didn’t really seem to match what the site was all about. It was too generous to the obscurer and less trafficked bits of the site and didn’t show due respect to the big guns. Users didn’t really use it, probably even the users who’d sorted it that way in the testing. My favourite card-sorting anecdote was the  guy who sorted into two piles “stuff I like” and “stuff I don’t like”. Which I think also alludes to why card-sorting isn’t always successful.

In any case, card-sorting isn’t going to half as simple and cheap when your users can’t see.

We decided to put together our best stab at a structure and create a way for users to browse on screen. Again not just any old prototyping methods is going to work here – however the browse structure was created would need to be readable with a screenreader.  So coded properly.

I wrote some principles for categories and circulated them to the stakeholders. Nothing controversial but it is helpful to agree the ground rules so you can refer back to them when disagreements occur later.

I reviewed the existing structure, which has been shaped over the years by technical constraints and the usual org structure influence.  I also looked at lots of proposed re-categorisations that various teams had worked on. I looked at which items and categories currently performed well. I reviewed the categorisation structures as part of the competitive review.

I basically gathered lots of information. And then stopped. And looked at it for a bit. And wondered what to do next.  Which is also pretty normal for this sort of problem.

(actually one of the things I did at this point was write up the bulk of this blog post – I find it really, really helpful to reset my thinking by writing up what I’m doing)

Somewhat inevitably I got the post-it notes out. I wrote out a post-it for each type of product and laid them out in groups based on similarity (close together for very similiar products and further away as the relationship gets weaker). This is inevitably my sense of similarity but remember this is a first stab to test with users.

Where obvious groups developed I labelled them with a simple word, some like books or toys. If a group needed a more complex label then I broke it up or combined it until I felt I had very simple, easily understood labels (essentially a stab at “basic categories”).

There were too many groupings and there were also a scattering of items that didn’t fit any group (the inevitable miscellaneous group). I dug out the analytics for the shop to see how my grouping compared in terms of traffic. I made sure the busiest groups were kept and the less popular sections got grouped up or subsumed.

This gave me a first draft to share with the business units. Which we argued about. A lot.

I referred everyone back to the principles we’d agreed and the analytics used to make the decisions. Everyone smiled sweetly at me and carried on with the debate.

After some advice from my eminently sensible project manager, I conceded one of the major sticking points. As I reported on Twitter at the time:

“Have given in and allowed the addition of a 13th category. Will the gates of hell open?”

Luckily at this stage we were finally able to do some usability testing with some real users. Only four mind, but they all managed to navigate the site fine and actually said some nice stuff about the categories. One tester even thought there must be more products on the new site, in spite of us cutting the categories by two-thirds.

So if someone attempts to re-open the browse debate, hopefully we can let usability tester #2 have the last word as in her opinion the new shop is…

“very, very clearly divided up”

Enough navigation, time to concentrate on search….

Related posts:
Re-branding miscellaneous

Drop-down menus aren’t inherently evil but they do seem to encourage all sorts of terrible behaviour.

HMCS CourtFinder includes a menu that is certainly the worst I’ve had to interact with this year, and probably for a quite a long time before that.

The list is incredibly long. But more damagingly it isn’t in *any* order that I can see. Nor is this a list where you or I is likely to be sure exactly what the term we’re looking for is. After all types of court work isn’t a classification that most of us know off-by-heart.

CHOW has a nice example of topical navigation.

It’s cold, people are trying to eat healthily, and it is Superbowl time (for the Americans anyway). So the navigation includes nachos, snacks, braises and healthy recipes.

I’m very fond of this kind of navigation. For big sites it is rare than the navigation actually contains exactly what the user is looking for, instead it provides a starting point for a journey. But for any site where interest in content is influenced by outside events then you can use this knowledge to get the users where they are going much, much faster and with greater confidence.

There are lots of tools that help you choose terms to purchase in PPC campaigns and to target for SEO.

They can also be useful in helping you design navigation, choose your site name and even your company name.

Google provides all sorts of resources, some which seem to do very similar things.

There are analytics specifically for your own site:

• Google Analytics
• Webmaster Tools

And some that anyone can use:

• Google Sets
• Insights
• Trends
• Search-based keyword tool
• Adwords Keyword Tool

Of the ‘public’ tools I mostly use the Adwords Keyword Tool, inspite of not using Adwords.

Try searching for ‘phones’. From the results you can see whether ‘cell phone’, ‘wireless phone’ or ‘mobile phone’ is the dominant language in your area. When there are labels that my team is arguing about, Ill sometimes see if the Keyword Tool can add evidence to the argument.

But beware, they can get addictive.

My first six months at the RNIB are up. I’ve spent them mostly playing catch-up and firefighting on the intranet project. Now it is time to actually do some planning.

My department’s focus is mostly internal, I’m a bit of anomaly with my work on the website.

Some constraints to bear in mind:

• I’m the only IA
• Must be extremely responsible with the charity’s money
• Small organisation, doing many things, so staff are time-poor
• Software development is not what the organisation specialises in

At the moment I’m thinking we could get alot of value of focusing quite heavily on search. I’ll have to do that anyway for the website relaunch but there are big gains to be had from getting the intranet search working well and then exploring enterprise search.

I’m also interested in what we could do with automating related links. Never quite got there at the BBC but there’s an even stronger case here. Authors have very little time to create rich related links and the tendancy is to only promote content produced by their own teams, as ever.

Some simple reference data management might also be needed, possibly to support the enterprise search and automated links plan but also to improve interoperability of all sorts of systems.

Just first thoughts…

We’re moving onto a relaunch of the RNIB website. Work started (and paused) before I joined the RNIB so I’ve inherited a proposed new navigation structure.

To put the proposals in context I’ve been analysing typical navigation and tool bars on 18 charity websites. There seems to be a reasonably typical pattern of one main navigation bar, a secondary navigation bar and a utility toolbar which is often but not always in the footer.

The pattern for each bar is roughly as follows:

Main ‘charity’ bar
About Us – Get Advice – Learn About – Donate – Get Involved – News – Professionals resources – Shop

Extra ‘special audiences’ bar
For Children & Teachers – Media – Jobs

Utility bar
Accessibility – Contact Us – Help – Privacy – Terms & conditions – Site map – Global/associate sites

The terminology on the charity bar is usually tailored to the charity’s main area of activity e.g rather than Get Advice it might be Health Advice. The charity bar also occasionally included a key scheme and a link to local services but these weren’t common enough to make the cut for my pattern.  The special audiences bar is an interesting feature that seemed common on the sites.

(Charities covered: Oxfam, Christian Aid, Amnesty, Save the Children, Action Aid, Guide Dogs, Action for Blind People, Cancer Research, British Heart Foundation, Blood Pressure UK , Help the Aged, Action for Children, Barnados, Mencap, National Autism Society, Leonard Cheshire, Shelter and St Mungos)

Related posts

• keyword tools for seo and navigation design
• redesigning NTEN.org

TED.com just won a Webby for best navigation.

Now TED is a great site to while away hours with and still feel like you are improving yourself. I’ve spent lots of time there and I’d be struck by the navigation but not always in an entirely approving way. As with most new and exciting attempts at navigation there’s something fun about it and also something kind of irritating when you need to get something done.

Good

• traditional but useful text-based left nav combined with the more attention grabbing main content
• lots and lots of different ways to slice the content – themes, tags, speakers, popularity, most inspiring and so on
• choice of list or ‘visualisation’ view

Bad

• in the ‘visualisation’ view, the mouseover interaction gets in the way. If I try to select a promo in the middle of screen but move a little too slowly then the promos I am passing over pop up and obscure the one I’m trying to get to.
• illustrating sub-categories with pictures of individual speakers. Takes a while to realise that if you click on that big promo with a picture of Jane Goodall you get taken to another index with 36 talks on the topic ‘inspired by nature’ and not straight to the Goodall talk.
• surprisingly low-key use of the tags. No tag browse on the homepage or the themes pages (where I can really see value for drilling down further with them)

But going back and playing with it some more I think all in all that the good outweighs the bad. Would like to see that mouseover sorted though. It is a bit too much like the problems I have with the Windows Start menu(!)