Archive for the ‘information architecture’ Category
short thumbs and phone navigation
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?
new wimbledon website and scary strawberries
Wimbledon have a new website for this year’s tournament and one of the most striking things about it is the use of background photography.
On the homepage the background dominates with only a fraction of the real estate taken up by content or navigation. Compared to traditional lets-stuff-everything-on-there homepages this works quite well…depending on the choice of image.
There’s quite a few images being used in rotation but thus far the overhead shots of grass and the shots dominated by blue skies seem to work.
But there’s a few in the mix that I find distracting and not particularly pleasant as backgrounds. I’m not convinced by the ball boys and girls:
The scoreboard is far far too busy:
And the strawberries (of which there are at least two variations) just freak me out:
But I’ll forgive them if they change the blue-sky shots to soggy one when it actually does rain. No Cliff Richard please.
why is wireframing our deliverable?
When we reviewed job adverts at the BBC to understand how the market was defining the various UX job titles, the unifying part of information architect job descriptions was creating wireframes. It seems to remain the main deliverable IAs get asked to produce.
But ‘wireframe maker’ is a label that pretty much everyone would deny (except in their most maudlin moments) and it hardly covers the breadth or the essence of what we do.
I’ve been relieved to see a designer producing wireframes, as it (might have) indicated a UX style approach to design. But I’d have been upset if they’d told me my job = wire framing so it was probably a bit perverse to be particularly reassured.
It seems at the moment wireframes are being squeezed by sketching on the one side and prototyping on the other (although I’d argue these are part of same tradition rather than a revolution). But still the wireframes get produced.
So what do they prove?
- they show a way of thinking: what things, what relationships, what priority, a below the surface layer way of thinking
- they are a way of communication: one that encourages focus on things+relationship+priorities again, one that helps with building and enables it to begin earlier, and possibly one that invites more collaboration because it says “this isn’t finished”
I don’t think these proofs mean the wireframes are especially necessary, just that these are things that creating wireframes might signify about the person who made them.
putting special stuff in global navigation
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.
Christies: where a power search might be appropriate?
There are lots of useful interface elements you can add to a search results page, but the general wisdom seems to be you shouldn’t put too many of them  together.
Christies, the auction house, don’t seem to care for this perceived wisdom. Their search results are power searching heaven. I counted 12 filters (one of which you can search within), 4 sorts and 3 options for displaying the results.
So is this design overkill or understanding your audience? I’d have no qualms about including this amount of controls for an audience of professional researchers but would usually avoid it for a general audience.
I’m not hugely knowledgeable about the audience. For all it’s complexity, Christies looks far more professional and considered than most antiques websites. Especially sellingantiques.co.uk
It’s easy to imagine that the audience is very particular about the item they are looking for. If you’re a collector then being able to locate Louis XVI chairs rather than Louis XV chairs, or find an Arts and Crafts lamp rather than an Art Deco one, is a fundamental part of the experience.
I enjoyed using it but I’d be fascinated to know how typical I am of this audience. Anyone done any research?
be careful about being too ‘helpful’ with search results
The bane of my life when trying to work out what’s gone wrong with a search engine is the hidden thesaurus.
Lots of search software comes with a thesaurus that is referred to ‘behind the scenes’ to expand queries to include other queries that are *known to be equivalent*. Anyone who has spent even a short amount of time thinking about language can see why these things might become a problem.
(these files are doubly irritating as they’re usually set up without any kind of admin interface…the assumption being only the system administrator would or should edit it…and that they will of course be technical)
The expansion happens behind the scenes and the user isn’t necessarily told it has happened. This is usually bad. You need to be really really wary of expanding the users search queries without telling them. Don’t just give them results for aubergine and results for eggplant, when they only searched for Aubergine. You think you are being clever and helpful. If you’re wrong about the expansion then you are just being extremely irritating.
Or possibly worse than irritating.
I read a comment on the Guardian recently that suggested hor = mum in Danish. I thought that was wrong and searched for “hor mum” in Google. It wasn’t my most thought through search query but I didn’t expect Google to automatically convert it into “hot mum”. That was a bit of a surprising set of results.
(the word the commenter had misheard was mor)
This Google example demonstrates how you can end up with a worse situation that the user simply not getting the results they were looking for. But it is also different from the thesaurus examples that I started this talking about. Google do at least tell you what they’ve done and allow you to correct them. Given how uncertain query expansion is, best practice must be to tell the users what you’ve done.
If you tell the users you have two choices about how to tell them:
a) Suggest the expansion but don’t run it for them. Risks them missing it as an option.
b) Run the expansion but tell them you’ve done it. Still risks them missing the option to un-do
Google’s experimented with both approaches over the years. And currently has a bit of a mixed approach. Don’t assume their approach has “cracked” the problem.
why I like free-text fields in surveys
I’ve been doing quite a bit of surveying in recent weeks and I’ve been challenged over my liking for free-text fields.
My colleague/partner-in-crime was worried that the data would be too time-consuming to analyse if we didn’t turn every field into a tick box of some form. I’ve always found the free-text fields to be the ones that contain the most interesting responses so I’m willing to wade through the data.
But it wasn’t just on our side of the fence that concerns where raised. In the latest batch of responses to the survey a couple of people wrote things along the lines “why not checkboxes?” in the field in question.
(of course, if it had been checkboxes, the people who’d wanted free text wouldn’t have been able to complain to me)
An unexpected benefit of the free-text field was that I could spot the spam because they faithfully quoted our navigation back at us when asked what parts of our website they read. The humans were mostly more varied than that.
The question was about what Guardian content they read. It was deliberately vague but most people interpreted as a request for genres and listed out four or five of them. It wouldn’t have been a huge problem to have offered them the main genres and asked them to tick. It would have probably involved a little less thinking for the respondents.
I suspect people would have ticked more things if offered a list.
What I wouldn’t have got was the things that people thought were important but we hadn’t thought important enough to put on the list. A lot of people chose something surprising as one of the four or five things they specifically chose to tell us they read.
As well lots of the expected genres, the responses also included:
- formats
- specific topics and countries
- things they don’t read
- how they choose what to read
- who they read
- which supplements they like
- countries
They used language we don’t use e.g. Current affairs, Entertainment, International, Global, Arts, Finance, Opinion, Economics, Sports, IT.
I was also interested to see people using Guardian specific acronyms e.g. OBO, MBM, CiF.
Most people responded with a comma separated list which was pretty easy to turn into structured data and then just mop up the stuff that doesn’t fit nicely by hand. And that mopping up gave me an opportunity to learn the data and to begin to understand it.
This wasn’t a big scientific piece of market research, just the beginning of a conversation. And that’s best done without checkboxes.
treen: the woodsman’s miscellaneous category
As a classification geek, married to a tree geek I was delighted to discover treen which Wikipedia says is “a generic name for small handmade functional household objects made of wood”.
I may start collecting miscellaneous categories from different domains…
wireframing with Google Drawing
I’ve been experimenting with wireframing using Google Drawing. And not entirely because I like making my life hard.
(and yes, I’ve been doing lots and lots of sketching too, so there’s no need for the sketching mafia to scold me)
I’ve started off at the Guardian with a PC but we were a bit uncertain if I would switch to Mac+Omnigraffle. I could have got Visio but as I’m working in an office that uses Google Docs I thought I’d give Google Drawing a go.
The big advantage is that I can share the wireframes with anyone in the office without creating PDFs. We could in theory collaboratively edit them but at the moment we’re still in a world where I produce and the others read. Another advantage is that everyone is always accessing the latest version.
And you never have to save. Drawing does sometimes crash but never when you’ve forgotten to save for the last 30 minutes of intense productivity (I’m looking at you Visio).
Morten has produced some basic wireframes which are a good place to start but as he acknowledges one of the big limitations is the lack of customisable stencils. He gets around this by keeping his shapes in the gutter. I’ve tended towards keeping them in a separate document and then copying them to the web clipboard. For some reason you can’t just copy and paste shapes between documents, you have to use the web clipboard option on the toolbar. Lack of stencils was a real pain getting started but I’ve pretty much adjusted now.
There’s also no layering, which would be a shop-stopper for anyone producing large multi-page specifications, that need to be regularly updated. I don’t do that kind of wireframing very often so this is actually less of big deal for me.
Drawings are single page only. If you want to print, you’ll have to create every page in separate drawing. If printing doesn’t matter so much you can just create multiple wireframes on a very big Google drawing page. Where I’ve been creating a series of wireframes, I’ve created separate drawings in a folder and then just shared the folder with everyone else. This is probably the thing that feels hardest to get around.
Which all sounds pretty awful for keen wireframers but I’ve quite enjoyed it really. It worked best when I was drawing a single new component and then needing to share it quickly and widely.
Drawing is more straightforwardly suited to flows and sitemaps as they are likely to be single page, not need layers, and only use a couple of shapes (probably ones available in the fixed set of stencils).
Oh, and it’s free.
Some tips:
- Objects pasted within the document are pasted on top of the copied object, regardless of where you’ve scrolled to. If pasted from another document then they appear in the position they would have in the original document.
- Keep the text boxes as small as the text allows (other wise you may find it hard to select other ‘smothered’ objects)
- Similarly putting frames or boxes around other object stops you selecting the objects within
- To make the page larger, zoom out so that you have more grey space to drag into.
- You only need to highlight any part of an object to select it.
Keyboard shortcuts/controls:
Move a gridline  :  Up / Down / Left / Right arrow
Move a pixel :Â Shift+Up/Down/Left/Right
Move up/down in Z-order : Ctrl+Up/Down
Move object to the Top or bottom : Ctrl+Shift+Up/Down
Group selected objects : Ctrl+G
Ungroup selected objects : Ctrl+Shift+G
Delete and add to clipboard :Ctrl+X
Add selection to clipboard : Ctrl+C
Paste clipboard contents  : Ctrl+V
Duplicates selection : Ctrl+D
Delete selection : Delete, Backspace
Smooth drag  : Alt/Option while dragging an object.
Restrict to vertical or horizontal dragging : Shift while dragging.
Copy an object : Ctrl + drag the object to copy
Preserve aspect ratio while resizing: Shift while resizing an object.
Rotate in 15 degree increments : Shift while rotating an object.
working with constraints
Constraints was another topic of conversation in the coffee breaks between The Story sessions. I’m not sure how much it was inspired by the presentations or was just the direction the discussions went in.
At the BBC, our attitude to constraints and their role in design was one of the sources of friction we identified between our (finely defined) UX sub-disciplines. Those with ‘architect’ in their title tended to be very conscious of the constraints. The IAs often spent longer working with particular products and were more likely to be embedded with the product team. They developed a detailed understanding of the content structures, technical systems and the organisational politics around a product. The interaction and visual designers were more likely to work from the design hub with other designers and to work on products for defined projects. They came to projects fresh and unblinkered. Neither situation is wholly good or bad. Both bring insights.
But it did result in the designers feeling that the IAs were too aware of the constraints and were unambitious in pursuing the best solution for the users. Conversely the IAs often felt the designers were being idealistic and naive, and that’d they never get anything built.
(these are broad brush generalisations, there were some great examples of successful partnerships between the teams but there were certainly issues)
In these conversations somebody usually brings up the serenity prayer:
“God grant me the Serenity to accept the things I cannot change, Courage to change the things I can, And Wisdom to know the difference…”
My instincts are often on the side of accepting many of the organisations constraints. I like realistic plans, and I’m aware how deep seated some constraints can be. I don’t see how designs that never see the light of day help the users. But it would be simplistic to say I’m always on the side of conservatism.
In my last team, our troubleshooting explicitly involved dividing problems into ‘change’ and ‘accept’ categories but I surprised myself at how uncomfortable I felt at some of the things that ended up in ‘accept’. I wasn’t happy to just leave them like that.
This all reminded me of a creativity course that I found helpful in accommodating the instincts of both dispositions. One of the techniques the course taught was to explicitly structure ideas generation into phases:
- firstly unshackled ideas generation (everyone is reminded they’ll be able to bring the constraints in at the next step)
- then a step where the ideas are filtered with the constraints. Ideas are divided into do-able now or soon, and ideas that require work to tackle the constraints (which may require another ideas generation session!)
The approach helps me to use both my desire to make things better and my desire to get working stuff out the door. The different types of ideas could be taken forward by different teams but I suspect most of us would be happier if we could accommodate both types of challenge in our our work