Category: usability

Usability of mixing LTR and RTL text?

Annoyingly, FourSquare has started be be a source of spam for me. I get friend request from people who only like certain brands of stores, from recruitment consultants trying to work out who I'm visiting, and from cultists who are desperate for me to visit Scientology centres.

I also get friend requests from people I've never met, including from Ahmed al-Najjar (احمد النجار). I've never met Ahmed and I've no wish to taint him as a spammer - I'm sure he's just misclicked in his friend request - but because Arabic is written right-to-left (RTL) it shows up some interesting design and usability imitations of FourSquare.

On the Android app, there's a curious problem.
LTR RTL

In layman's terms, I'm expecting to see "[name] [action]". What the computer is seeing as its instruction is "Place [name] at the start - then place [action]" - in this case, the [name] is placed and, because it is RTL, the [action] is placed after it - which means on space to the left.

Incidentally, their website doesn't suffer from this problem:
FourSquare RTL Web

In an average design environment, we may only encounter one text layout. In the west, that's usually Left To Right (LTR). If we're feeling exotic, we might internationalise all our assets and strings so that they support a fully RTL experience. (Of course, internationalisation and localisation is slightly more complex than that.)

So, the experience becomes:
"أحمد النجار يريد أن يكون صديقك."

That's fine, but what happens when we want to mix the scripts? Should we say
"أحمد النجار wants to be your friend."

Somehow that feels wrong. It's the lexical equivalent of writing "nedE ecnereT wants to be your friend". Yuck!

Do we accept that - whether one can or cannot read the script - a block of foreign text is read as a separate unit?

Bidirectional text support is present in most computers. Even if it does lead to some complex problems.

Combining the text into one layout is a solved problem - but it doesn't address the usability of mixing and matching. What is it that the user expects to happen? I think we can agree that their must be consistency between all UIs - in this case Web and Mobile.

As I see it, there are five approaches

  1. Keep original UI ordering - place the name where the user expects it to be.
  2. Take the ordering from the first element of the sentence.
  3. Whenever the text direction changes, start a new line.
  4. Translate the foreign text into the user's native language.
  5. Rotate or reverse the foreign text.

The common consensus is the first option. Take the overall direction of the text and place the reversed text in place.

However, of the above items, I think that starting a new line is the most satisfactory.

أحمد  
wants to be your friend.

But, of course, that leads to 

أحمد  
is now friends with
تيرينس

Both of which could lead to vertical layout problems, as well as introducing alignment confusion.

أحمد  

is now friends with

تيرينس

Gah!

But then, adjacency also provides problems. The W3C maintain some excellent guidelines for mixing bidirectional text. In this adjacency example, can you quickly determine which item should be checked to select "English"?

لغتي: العربية English‏ Français فارسی اردو

( Incidentally, number 5 isn't as strange as it sounds. In languages which are written Top-To-Bottom sometimes foreign characters are inserted in place but rotated!)
Hebei Wen'an jin fasheng dizhen - Beijing you zhengan

A Conclusion - of sorts

I think it's obvious that in this example, the FourSquare mobile app is wrong from my point of view. As the user, I expect the starting element to be at the left. From Ahmed's point-of-view, he as a user expects the starting element to be on the right.

Yet, for both of us, it's an unsatisfactory and inconsistent experience.

Bidirectional support in Unicode solves the layout problem. Yet I'm not sure if it solves the semantic problem. Indeed, I wonder if that can be solved at all.

Are Designers Crazy?

...or do I just need new glasses?

I'm not a graphic designer. I find it hard to get into the mindset of excellence through beauty.

I understand user flow, interactions, happy paths, delighting the user, humane design, and so on - but when it comes to the art of making something look nice I'm all at sea. I understand that, as Aral Balkan so perfectly puts it, design is not veneer - but that doesn't stop my confusion.

This is a failing of mine - one which I'm trying to rectify - but recently I've had the sneaking suspicion that some designers may have a touch of "Emperor's New Clothes" about them.

I'm going to pick on two examples. I don't think the people behind them are bad or wrong - I just don't understand how their eyes and brains work :-)

A Question of Scale

Jack Groetzinger writes about the challenges faced when trying to scale down images for different iPhone models.

My first attempt at turning one of my 2x comps into a 1x version was to just decrease the image size in Photoshop. That was naive. Some elements don’t scale well when simply downsized; they require special attention.

Here is the image in question (used with kind permission):

Screenshot Comparison
(Click for full sized)

I know I'm not a designer - but I simply can't see any difference here. Ok, one button is orange - but that's it. There's nothing here which screams "terrible design!" at me. I'm looking and don't understand what "special attention" either would need. Were that to be presented to me as a user, I'd know where to click and not be distracted by inappropriate design.
As a product manager, I'd ship either.

I've deliberately removed the naming on the screenshots - can you tell which contains the elements which "don't scale well"?

To better understand this, I've created an animation to show the difference between the two screenshots. This simply flips between the two images, there are no fades or anything else.

Design Difference

Ok... Now I see some differences. On one, the buttons are slightly larger, the colours slightly more nuanced, the shading is subtly different. If I zoom to an extreme level, the font on "ebay" in slightly smoother.

I get that there is a strong need for design. I understand the need for a clear and unambiguous environment. The desire for beauty is strong with some people - and I appreciate that.

But here's the thing. That design is going to be held around 50cm from the user's eyes, drawn on a screen which is caked in sweat and grime, which is reflecting the ambient light in the room, and is - in all likelihood - cracked.

Worrying about the exact scaling of a button, and the nuances of shadowing is what we in computer science would call "premature optimisation".

How Soon Is Now?

If a developer comes to you and says she can shave 5ms of every transaction, you have to decide whether this is a suitable use of her time, and whether it will cause problems later on.

For example, if this transaction is 5ms per user - it's unlikely to be noticed. If it's a back end process used millions of times, that optimisation may be worth it.

If rewriting that code to make it more efficient comes at the expense of readability and reliability, a call has to be made on where you want to make sacrifices.

Finally, if it will take her 3 weeks to make the optimisation - how long will it take to recoup that investment?

With design, it's no different. Will users notice that images aren't a bespoke designed for their platform? Will they care? Will you have to create an entirely new workflow to generate images specific to one platform? How will you manage image assets - especially when they need to be updated?

In fairness, Jack realises that this is a step too far and says:

Perhaps it isn't worth optimizing for 1x. [...] you're spending a lot of time catering to small group of users. The crudely downsized version isn’t pixel-perfect, but it’s still usable.

Again, I'm not trying to mock Jack or any other designers. I'm just trying to understand what drives the innate desire to be "pixel-perfect".

Ultimately, the question I'm asking is - does this even matter?

For You Blue

There is a (possibly apocryphal) story about Google engineers trying to think like designers.

Google is stuffed full of people who just love to experiment on its users. For instance, Google Mail uses a very slightly different blue for links than the main search page. Its engineers wondered: would that change the ratio of clickthroughs? Is there an "ideal" blue that encourages clicks? To find out, incoming users were randomly assigned between 40 different shades of links – from blue-with-green-ish to blue-with-blue-ish.
The Guardian, Wednesday 8 July 2009 18.00 BST

Here we have - supposedly - a quantifiable metric for how design impacts performance. If you have billions of interactions, and you can see a statistically significant uptake between designs, then maybe it is worth worrying about every last pixel.

In today's "ship it and see" environment, we may not have the luxury of thorough testing before launch. Even after launch, there are hundreds of large changes and features which could improve usability before we start to worry about whether #2A5DB0 beats #2A5DB1

Crazy or Misunderstood

Musically, I'm tone deaf. I just can't tell one note from another. That sucks.
Graphic design wise, it appears that I'm equally out of luck.

I know that most developers are not like their users. I am deeply aware that while I'll happily use a website in Lynx, many users need and appreciate beautiful design.

I'm I the crazy one? Is there such an apparent difference between the above screenshots that I should go out and buy a guide dog now?

Does determining the exact shading on a hyperlink sound like a good use of resources when compared to all of Google's other problems?

My brain doesn't work like that of a designer - I know that. But should I even try to think like them?

Xbox 360 - Confessions of a First Time User

After an entertaining discussion at BarCamp Berkshire about video games, I decided to treat myself to an Xbox 360. After several happy years with a Nintendo Wii, I was keen to see what the new state of the art was.

I picked the current top pick console and, I must say, while the games are great the console is somewhat of a disappointment.

I picked the limited edition Xbox 360 320GB Star Wars Kinect Console with Kinect Star Wars - Limited Edition (Xbox 360).

Yay! Star Wars!

Hardware

It comes with a 320GB hard disk, a Kinect, optical audio, HDMI port, fully tricked out - and a composite video cable!

I was bemused when looking through the packaging. This is meant to be a flagship console, and yet it's expected that I'll show this off on my huge TV via a crappy little low-resolution cable? A bog standard HDMI cable is a quid! Why not throw one in the box? Same with an optical cable, the console has delicious 5.1 surround sound - and yet the console comes with only a stereo cable.

It's an odd blemish on an otherwise fine bit of hardware.

Controllers

The controllers are also odd. I had naively expected that they would charge via USB. The console has an abundance of USB ports, so surely the Xbox controllers - like those of the PlayStation - can be charged via them?

Well, yes and no. The controllers don't come with a rechargeable battery pack. Although Microsoft very generously provides a couple of cheap AA batteries.
There is a charging port on the controller - but it's not a standard USB recepticle. It's a weird proprietary port.

This is typical Microsoft - make things slightly inconvenient for the user in the hope that they'll buy an overpriced accessory. The controller could have so easily come with a built-in battery pack and charged via a normal micro-USB socket.

Dashboard

So, after wiring the whole thing up, what are the first impressions of using the Xbox dashboard?

What. A. Mess! I'm sure that if you've been using the 360 since launch it all seems familiar - but there are just so many options! I know that it's more than just a games console - but there's such a jumble of ideas that the whole effect is one of confusion.

Actually, the first thing I noticed was that my home screen was playing an advert! I've just spent over three hundred quid on this, and you're showing me adverts? Adverts which when accidentally selected scream out at high volume? Not cool.

Here's a screenshot of the home page:
Xbox Adverts

It's dominated by a huge advert compelling me to upgrade my experience (because the default isn't any good, I presume) then two adverts on the right. Sidelined on the left are things I actually want to do - play the games that I've purchased.

Yes, please do alert me to new things I can do - but does it have to be this crude?

There appears to be no way to customise the dashboard. I want my homescreen to have quick links to iPlayer, my downloaded games, and whatever's in the drive. That's not possible. It's almost Apple like in its insistence that This Is The One True Way. Very frustrating.

Kinect

The Kinect is marvellous fun - and a great technical innovation. Even better, it just about works even in my lounge. I'm 2 metres away from the TV and it does a good job of detecting me. It works really well in games it is designed for,

However, the Kinect is poorly integrated into the main Xbox features. Perhaps you recognise this quote:

The machine was rather difficult to operate. For years radios had been operated by means of pressing buttons and turning dials; then as the technology became more sophisticated the controls were made touch-sensitive--you merely had to brush the panels with your fingers; now all you had to do was wave your hand in the general direction of the components and hope. It saved a lot of muscular expenditure, of course, but meant that you had to sit infuriatingly still if you wanted to keep listening to the same program.

That extract from The Hitchhiker's Guide To The Galaxy is scarily accurate.

I can be sitting watching a programme on iPlayer, shift my body a little and the Kinect wakes up and asks me to wave at it - using an annoying little graphic in the corner of the screen.
Kinect Wave

I just wish there was a way to turn it off when not in use.

iPlayer

Oh, one last word on the iPlayer - the Xbox 360 doesn't adjust its refresh rate to match the playback rate of material. So you get 25fps showing at 60fps which causes all manner of weird jerkiness. Most unpleasant.

(NB I have a new TV, so it may be that I have to fiddle with some options to get the picture back to a normal state of fluidity - but a media player like the 360 should just do this automatically.)

Games

I'm properly loving Portal 2 - the other games are also fantastic. There are just three flies in the ointment.

First is the loading times. On my Wii, I've ripped all the games to a USB hard disk. The load times are virtually gone, no waiting between levels, or anything like that. I had assumed that with the Xbox's huge internal hard drive, the majority of games would take advantage of being able to cache their content. That doesn't seem to be the case. Games take ages to load from DVD. Even the downloaded games, like the ridiculously fun Fez, make me wait for a chuntering drive. I almost wish that the 360 came with an SSD rather than the lump of spinning metal it uses for storage.

(As a very minor disclaimer, I have a friend who works for Xbox who gave me a copy of Fez. Cheers J!)

Secondly, there's the issue of updates. The first time I switched on the console it wanted to connect to the mothership and update its software. Which it did. Twice. Every game I slip into it interrupts my first play experience with "This game needs to be updated NOW!" I understand why updates are needed - but it's really disruptive and doesn't create a great first impression.

Thirdly, personas (personae?).

So, I've set up a GamerTag for myself. My wife has also created some kind of Xbox account. How easy is it to start a co-operative game of Portal 2?

Now, I'm not sure if the following is a problem with Portal, or just the way Microsoft makes the 360 works. Anyway, here's the experience when we try to play....


Ok, click on "Play Portal 2". Easy enough...


Wait for a loading screen. Game will start soon...


Oh, another loading screen. Still, good to know who owns the copyright for these things. That'll improve my gameplay experience.


Yes! We're in the games and ready to... oh! No. My mistake. Still waiting to load.


Ok! Finally, let's hit that start button and crack on :-)


What the bloody hell is this? Not once in setting up my Xbox have I ever been asked to set a cloud storage device. I've no idea what it is, or why I would want one. Worst still, there's no "remember my selection" so I have to see this pointless screen every time I want to play.


The hard disk is not a speed demon. I'm sure it helps keep the console cool & quiet - but it means yet another loading screen for me to sit patiently through.


Now I can select the sort of game I want to play.


Fine, have this as a sub menu, rather than on the main screen. Whatever. Click.


Yes. Yes. Splitscreen. No, please don't give me some way to remember my preferences, that would be far too convenient. Hang on! I don't have a premium subscription - why are you even offering me online play?


Now I have to find my second controller. That's my fault for leaving it in the bathroom though (don't ask).


The sign in process for the second player is fairly pedestrian, but a bit long winded.

That's it?

No, have to absolutely super-duper confirm that was the profile I intended to select.

Nyagh! Another of these bloody cloud things! No no no! Go away, just save on the HDD forever and NEVER ASK ME AGAIN!


We are exhausted at this point and the 360 allows us to take a nap while it access its memory banks.

Oooh! A loading screen!


Oooh! A different loading screen!

Wha? But? I...? Is this it? YES! After sixteen hours of setting up, we're finally ready to play.

In seriousness, it's a dozen button presses, and about 3 minutes of my time wasted. It's not a huge amount in the grand scheme of things - but it's a continual annoyance.

Overall

I'm being deliberately nit-picky. I love the console (and the R2-D2 sounds whenever it's switched on). The games are such good fun, and the Kinect is a marvel.

But... But... The overall feel really disappoints and confuses me. Is this a games console, or a video player? It mashes the two together in an uncomfortable way. The Metro UI looks lovely - as it always does - but highlights its shortcomings by having dozens of sub-menus to plough through. It's an expensive bit of kit - yet it's slathered in adverts which, to my mind, reduces its premium feel.

I've not yet tried my free month of Xbox Live Gold Membership - at this point, it just feels like it would be another long download and offer very little in return. It seems odd that I can only pay for movies if I've already paid my monthly membership fee. I can download games without paying. And why can I watch iPlayer without subscribing to Gold, when trying to watch 4oD requires the premium subscription? All very inconsistent and hard to understand.

I can customise my avatar - and even pay for the privilege of wearing a branded T-Shirt - yet I cannot customise my dashboard to suit my needs.

That, I think, is the root of the problem. Parts of the 360 feel like it has been designed for Microsoft's benefit; not mine.

Button, button, who's got the button?

I love Android, I really do. I'm chuffed to bits with the Galaxy Nexus I won recently. I've had a dozen Android phones before that - stretching all the way back to the HTC Magic.

But it's getting obvious that Android has a serious design problem - even with the gorgeous new "Holo" theme for ICS.

The issue is one of consistency. Users have limited cognitive surplus and often rely on muscle memory to perform tasks. So anything which forces applications to behave in a similar way is often highly appreciated.

One thing which is bugging me about the Galaxy Nexus and ICS is the placement of the "Menu" button. This button is used to open up a program's options, or access its functions. It always used to be a physical key on the device - now it has become virtual.

A virtual key isn't of itself a huge problem - but the placement of it is.

In some apps it appears at the top of the screen, in others it's on the bottom, and on some the button appears in the virtual button bar. Take a look at these examples:

ICS button screenshot Twitter
In Twitter, the menu button is on the virtual button bar

ICS button screenshot browser
In the browser, the menu button is on the top.

Android ICS button Gmail
In Gmail, the menu button is at the bottom of the screen, but not on the virtual bar.

Android ICS SMS button
In the stock SMS app, the menu button starts at the bottom...

Android ICS SMS button 2
...but then jumps to the top!

So every time you go in to an app, you have to search for the menu button and remember where it is for that app for that particular context.

What a total annoyance. You can't just remember once and get used to it - you have to check on every single screen of every single app. No reliance on muscle memory is possible. All very frustrating.

Now, Android isn't alone in this. I remember the last time I used iOS being frustrated with the number of different ways there were to delete an item in stock apps. Sometimes there was an icon (although rarely the same one), sometime you had to swipe, sometime you had to tap-and-hold.

It's a symptom of a lack of strict guidelines. I've worked on a project where - due to no one person being in charge of UI - we ended up with six different icons to represent delete - one of which was identical to the "close window" button!

It's one of those tiny little stumbling blocks which gradually builds up into the user resenting the interface. This is the sort of mistake that professionals in the UI / UX field should not be making.

Interesting Twitter Hashbang Bug

Did you know that you can to link to a specific Tweet on Twitter? The URL looks like this:
https://twitter.com/#!/edent/status/197967209459499008

Pretty obviously, that's the user's name and the ID of their tweet. Simple, right?

Not really, click on that link and you'll see this:
twitter bug screenshot
That's my name in the URL bar - but the Number 10 Press Office's tweet on the page.

What's Going On?

Have I retweeted that status? Nope!
Am I a 1337 h4x0r who has hacked Number 10? No sir!
Is the screenshot a fake? Nuh-uh. Check the link yourself.

It's actually a curious bug / feature of Twitter. Each tweet you send has a unique ID. So there can only be one tweet with the ID 197967209459499008. And that ID will always belong to @Number10press.

The username part in the URL is redundant. It seems that it is not used except to give information to the user / search engines. It can be safely omitted or manipulated.

Malicious Use?

It strikes me that there is a slim chance of malicious use.

One could create a fake account - say Number1Opress (where the 0 has been replaced with a capital O). Make it tweet something ridiculous, then share a URL which has the real Number10press in the URL. Minor embarrassment is probably the worst consequence.

It's an interesting usability / security nexus. The username is placed in the URL to make it easier or more useful for users - but it is ignored by the back end system. As it's part of the hated hashbang syntax, I wonder if it could be simply be rewritten if there's a mismatch?