Bitcoin me! 1JDDn6cHgzqsRtgQJZwhToJPAX4oYZg19T

If that “sentence” makes any sense to you – you’re not a muggle. Muggles (for want of a better epithet) don’t want to invest a lot of time into things which don’t fit with their mental model of how the world works.

Without getting into a philosophical discussion on what money is and how value is generated – let’s look at how Bitcoin works in practice.

Failing to Design is Designing to Fail

Bitcoin is doomed to fail. Pick a reason why.

• Governments will ban it.
• A proprietary alternative will spring up.
• An EMP will destroy enough Internet infrastructure to seriously disrupt it.
• Naughty hackers will commit massive fraud.
• Normal people will be too confused to even start consider it.

All are a possibility. The most likely is ignorance and apathy generate by crappy execution on lack of focus on the normal user.

PayPal

Before it became big and a bit crap, PayPal started off with a very simple idea.

1. Send money to an email address.
2. Receive money sent to your email address.

Pretty damn simple. If I have money in a PayPal account, I can send it to alice@example.com .
Alice receives an email saying she now has money in her PayPal account (and if she didn’t have one previously, an account has been created).

Now, there are caveats, and charges, and edge cases, and multiple points of failure. But the idea is simple.

How Bitcoin Works In Practice

1. Install software onto your PC.
2. Configure it.
3. Find some way to convert cash into BitCoins.
4. Copy and paste long, incomprehensible random strings, with no user-friendly error detection.
5. Use the software to send coins with no out-of-band communication for confirmation.

Now, each of those points in of itself isn’t insurmountable. But taken together they present a rather formidable challenge. With PayPal, Google Checkout, or regular bank transfer, the flow is

1. Get recipient’s ID (either an email or a short string of number)
2. Create an instruction via web, mobile, voice, SMS, or in person.
3. Recipient receives confirmation.

I’ve left off the “set up” stage because most people already have at least one method of payment at their disposal. Even if they don’t, setting up a PayPal account is trivial compared to setting up Bitcoin.

Designing For Humans

Bitcoin, at the moment, isn’t designed for normal people. It’s designed for geeks like me. And even I can’t be bothered to set it up.

But if Bitcoin – or any other currency – wants to fulfil its destiny and revolutionise “money”, it needs to be easy for normal people to understand and use.

Twitter’s way of linking URLs is broken. It’s annoying to users, and a pain in the arse to developers. This quick post talks about the problem and offers a solution.

I’ve raised a bug with Twitter and I hope you’ll star it as important to you.

Preamble

A common trope in programming classes is “how do you detect valid email address?”

It should be obvious, right? A string of text, an @, a domain – probably ending in .com.
As it turns out, it’s not that simple. “who+o’toole@invalid.museum” is a potentially valid address, for example.
There are literally thousands of ways to detect the potentially infinite variety of email addresses.

The same is true for URLs – and slavish adherence to guidelines is killing Twitter’s usefulness.

The URL Matching Problem

Which of these strings should be turned into hyperlinks?

www.bbc.co.uk

example.com

http://test

https://test.test

ftp://news.com

As it happens, Twitter only matches “https://test.test” and none of the others.

Twitter’s matching regex is, as far as I can tell, this

If it starts with http:// or https:// and has a dot in it - it's a URL

I think this is a serious weakness. Twitter users are sharing URLs which their followers can’t click on – Twitter is also linking to URLs which don’t exist.

I’ve picked these examples more or less at random.

Solution?

Much like the email regexes, I would take a much more lax approach. Essentially, if it looks vaguely like a URL – link to it.

I would suggest the following rules:

• If it starts with a protocol – http:// ftp:// tel: etc – create a hyperlink.
• If it starts with www. – create a hyperlink.
• If it ends . then a valid TLD – create a hyperlink.
• If it contains a valid TLD followed by a slash then some other characters – create a hyperlink.

The “correct” method would then be for Twitter to perform an HTTP HEAD request to see if the URL is potentially valid. There are three drawbacks to this.

1. It may place excessive load on Twitter’s servers to process and cache these requests.
2. The URL may be that of an Intranet site – and thus inaccessible to Twitter.
3. The URL may be valid but temporarily inaccessible.

Regardless of the method, surely it’s inexcusable that “www.example.com” isn’t detected as a URL whereas “http://bork.bork.bork” is?

ACTION!

If you think Twitter’s approach to hyperlinks is wrong – please make your voice heard at the bug report.

Why are you following me?

I know who I want to share my “I hate my job” posts, and “Oh, my cat is so cute” pictures – but I talk about a wide range of things, not all of which you’ll be interested in.

At the moment, I’ve got nearly 150 people following me – and I don’t know which circle to put them in!

So I asked a simple question – what do you want to hear from me – and got a staggering response.

This is something Nik Butler and I have discussed.

Google needs to let people choose which circles to follow.

I imagine a UI which allows me to set a circle as private (“Work”, “Family”, “Political ranting”) and set some circles as public (“Kitten pictures”, “Industry News”, “Political thoughts”).

When you follow me, you can say “I hate kittens, but I love politics – I’ll follow one circle and ignore the others.”

At the moment, I don’t have the time to categorise 200 people into what I think they’re interested. And they don’t want to be bombarded with QR codes when all they really want is LOLCATS.

So, come on Google, sort it out – let people choose which circles they want to be in.

Please RT!

On the surface, it’s quite a simple idea – yet Metro have needlessly complicated it.

The Process

The simplest process would be

1. Scan Code
2. Send Email

That’s not what Metro have done. By using Scanlife as an intermediary, they change the process to

1. Scan Code
2. Connect to web
3. Get redirected
4. Get redirected again
5. Load web page
6. Click on link

Advantages and Disadvantages

Now, there are advantages to this approach.

• Metrics on how many people have scanned the code.
• …
• …errr…

Metrics are useful – but consider the disadvantages.

• Need for mobile coverage. That means everyone in the London Underground can’t send an email until they’re above ground – by which time they may have forgotten what they wanted to say.
• Requirement for Scanlife to stay up. While I have no doubt they have impressive uptime, at some point they will go down and so will Metro’s ability to receive emails.
• Payments to Scanlife may escalate over time.
• Lack of design control over the page.

KISS

As with everything, simplicity is the key to success. Here’s the simplest way for Metro to get email from their readers.

All this says is “mailto:mail@ukmetro.co.uk”. Pure and simple. No coverage needed – the phone will open up its email client and send when the user is back in coverage.

If you wanted tracking, you could use “mailto:qrmail@ukmetro.co.uk”.

Conclusions

It’s great to see QR codes getting more mainstream traction – but we need to be wary of two things.
Firstly, salesmen will try to bamboozle you with their proprietary solutions.
Secondly, keep things as simple as possible to ensure widespread usage.

While I don’t doubt that Metro gets some value from Scanlife, surely that’s offset by the inability of a million tube passengers to send an email?

Long time readers will know that I have some severe usability and security concerns with Twitter’s OAuth implementation. See also my interview in The Register.

Zach Holman has an entertaining and informative blog post about giving Twitter applications fine grained controls.

Essentially, he’s saying that you should be able to authorise an app for just posting, for example.
Here’s his graphic which I’ve stolen.

This doesn’t go far enough.

I was taking a look at this LinkedIn application which graphs your contacts.

Take a look at their OAuth screen.

At the bottom is an “Access Duration” option – giving you the option to try out the app and have it automatically revoke after a specified period of time.

Now, this isn’t something you’d want to do for every app. But it gives you a method to limit the damage that a malicious app can do. Remember, just because an app isn’t malicious today, doesn’t give you any guarantee about its future performance.

As it happens, the Oauth Specification 2.0 has this to say in section 4.2.2. Access Token Response

expires_in
         OPTIONAL.  The duration in seconds of the access token
         lifetime.  For example, the value "3600" denotes that the
         access token will expire in one hour from the time the response
         was generated.

If you run a service relying on OAuth, please consider giving users an Access Duration option.

In the book, Norman rails against the usability flaws which seek to undermine our comfort and sanity. Everything from lightswitches which never seem to have a consistent state, to to alarm clocks with impossible to figure out controls. It really is a must read for anyone who cares about usability – on computers or in the real world.

I travel a lot for business – and occasionally for pleasure – so I get to experience some of the maddening issues which Norman describes fairly regularly. Nowhere is this more apparent than hotel rooms.

Hotels From Hell

I’m not talking cockroach infested flea pits with constant building works and mouldy bathrooms – although I’ve seen a fair few of those – but irritations which confuse, confound and exasperate a weary traveller. TVs with seemingly no volume control. Light switches which operate lamps on the other side of the room. Door locks which require an engineering degree to operate. Thermostats which either leave the room freezing or baking.
All pretty trivial, yes – but of immense frustration to a jet-lagged guest who just wants to turn the lights off and sleep in a warm room.

Bathroom Blunders

The area which seems to cause me the most confusion is the bathroom. We’ve all experienced the shock of using someone else’s shower and having them patiently explain what the trick is of turning it on – or getting it to spurt out hot water… but not too hot. Hotels, sadly, rarely come with a guide to using their facilities.

I want to point out an “interesting” usability flaw I noticed on a recent trip to Paris.

Hot Cold Confusion

What would you expect this tap to do?

The blue / cold symbol is over the spigot – surely that means activating the tap will pour cold water?

However, our experience indicates that turning a tap to the left brings forth hot water – that’s the convention in my country. Is it the same in France?

There are no arrows to indicate how turning the tap will affect temperature.

We could experiment – but most people don’t want to waste time with that. They just want a clear indication of what a piece of equipment will do.

So, we have an impasse.
The law of proximity would indicate that two things next to one and other have a relationship. The cold symbol is next to the tap – therefore the tap will run cold.

The law of experience tells us that turning a tap to the left gives hot water.

There is no way to reason this out. We have to go through an annoying – and possibly painful – experiment to see how this mundane piece of equipment works.

Lessons

The lessons for computer and real-world usability should be clear. Don’t make the user think. Don’t mess with their expectations. Don’t overload conventional actions with your specific action. Try to see every aspect of your project as though you were a brand new user who is unskilled in the ways of your project and of your culture.

Above all, remember that some of your users are likely to be jet-lagged and just want the simplest, easiest way to perform an action.

You can buy The Design of Everyday Things from all good bookshops.

One of the things I love to do is add images to my contacts. It gives me a visual cue when I’m scrolling through looking for a person, it prompts my memory when I see the face of a friend calling me, and it helps me remember what people look like.

As you can see, I’m pretty good at keeping everyone’s photo on my phone up to date.

Which Conditions Are Appropriate?

Google’s interface for uploading images has some rather confusing conditions attached to it…

“Do not upload pictures containing celebrities, nudity, artwork or copyrighted images.”

What? Those are some strange terms and conditions to have attached to a contact image. I’m not sure if they’re copy-and-pasted from another app – or if they’re intentional. Let’s take a look at each one.

• “Celebrities”.  If I’ve got a friend who is a celebrity – why can’t I have her image as her contact picture?
• “Nudity”.  It’s my phone.  I am not going to offend myself if I see a nude picture of a friend that I’ve uploaded.  This is before we get in to what defines nudity.
• “Artwork”. This is just bizarre.  If a street artist has drawn a caricature, I can’t upload it?  I can’t use a company logo to indicate where my contact works?
• “Copyrighted images”. Again – what? I own the copyright on images I’ve taken.  I may have permission to reuse a copyrighted image.  I may even be justified in using a copyrighted image for my personal use.  I suspect they mean “images to which you don’t have permission from the copyright holder to use for this purpose”.  But even that doesn’t cover the Fair Dealing provisions of many copyright laws.

If you try to use an image which is already on the web, you get this curious message.

“Remember, using others’ images on the web without their permission may be bad manners or – even worse – copyright infringement.”

This is an odd statement.  A mixture of folksy advice and legal warnings.  I don’t see how personal use of a thumbnail from even the most copyright laden of images could be construed as infringement.  As for “bad manners” – is it really Google’s role to advise me on etiquette?

People Don’t Read – But Copy Editing Matters

It’s been well known fact for over 13 years that users don’t read.  That’s especially true if the text is small and grey – as it is in these examples.

But if you do want to impart vital information, you need to employ a skilled writer to help you craft your message.  You need to understand what it is you’re trying to say, why you’re saying it and what you expect your users to understand.

In this case, Google has a very muddled and confusing set of conditions which seem illogical and users – if they read them at all – are likely to ignore them.

Pair and Go’s battery pack for the Wii Fit!

Take a look at their promotional image – it seems like a nice, drop in replacement for 4 AA batteries.  What could possibly go wrong?

Pair & Go Fit Kit 6 Pack (click to buy from Amazon)

As it happens, the battery pack is ginormous.  It doesn’t lay flush with the board; it juts out several centimetres.

Chunky!

Ordinarily, that wouldn’t be a problem.  But because it’s on the underside of the board, it rest on the floor and throws off the board’s sensors.  The placement of the battery pack means that all your balance scores are shifted to the right.  It also drops about 13Kg from your weight!

So, as you can see, much more dangerous than Three Mile Island or Therac 25 – this will leave you obese and walking wonky!

So, what’s a geek to do? To the Bat-Screwdrivers, Robin!

Disassembled

The insides are fairly emply.  There’s no reason why they couldn’t have managed to fit it all into the space provided for the AA batteries.  Lazy product design.

All we have are a thin battery, a circuit board with USB connector and LED, and the housing to fit in the battery compartment.

In place

With a bit of fiddling, we can get the components to lay flat along the balance board.

All finished!

A little bit of tape to secure it.  I also had to snap off the plastic lugs witha pair of pliers.

And there we are, how to transform a crappy battery pack into something slightly less crappy.  Sure, it’s not pretty – but at least my Balance Board now reports accurately.

One of the advantages of the text processing is that it will recognise that www.example.com is a URL and automatically create a hyperlink. Considering that dropping the “http://” represents 5% saving on Twitter’s 140 character limit for messages, this is great.

So, I was mightily surprised to get this bug report from user “schmmuck”

Dabr rendering error

How very odd… This is how it looks on m.twitter.com.

m.twitter rendering error

Twitter also use mobile.twitter.com for smartphones. Here’s how that site renders the text.

mobile.twitter rendering error

Finally, let’s take a look at the “canonical” rendering at Twitter.com

Twitter rendering error

The Problem(s)

The first issue is inconsistency.  Twitter ought to be using the same regex for each of its sites.  It doesn’t.  This means that different developers will get divergent experiences.  This leads to confusion, which leads to fear, which, as we all know, leads to anger…. and so forth.

Secondly, and more importantly, parsing is hard.  There are so many edge cases that errors inevitably creep in.  My post about hashtags explains the problems in defining what should be recognised.

So, based on what we’ve seen, should Twitter recognise any of the following as URLs?

news.bbc.co.uk – no www there.

invalid.name – a silly URL, but a valid one.

खोज.com – International domains contain more than just ASCII

All the above are valid – yet they’re not recognised by Twitter.

A (Simple) Solution?

There is a canonical list of TLDs which is also available as a plain text list.

Any string containing a “.” followed by a valid TLD, then followed by a space or “/” should be treated as a URL.

Your thoughts?

I wracked my brains thinking about how they could have gotten in there before I realised it was a long-dormant friend who had changed their name and avatar.

But, in thinking about how a spammer could infiltrate one’s timeline, I think I came up with a fairly bullet-proof method to spam Twitter users.

I present this as an exercise in devious thinking – and also to show how our assumptions about security can play against us. Remember, hacking and impersonation are likely to be illegal in your jurisdiction.  This information is designed to help you understand how security weaknesses can occur.

Being Evil

Imagine you are a nasty, evil Twitter spammer. Your own mother wouldn’t spit on you if you were on fire – that’s how mean you are. Here’s what you do.

1. Obtain a user’s password.  Admittedly, this is the hardest part of the process. You might use a dictionary attack, use the same password they use to log in to another site, or somehow steal it.
2. Log on to Twitter.
3. Go to “Connections” and see which services they have connected to using OAuth.  For the purposes of this experiment, let’s assume they use Example.com.
4. Go to Example.com and OAuth yourself with Twitter using your mark’s credentials.
5. Here’s where the ordinary spammer falls down.  The ordinary spammer will start sending out messages from the mark’s account.  That’s not the aim of this weakness.
6. From the mark’s account, through Example.com, make your victim follow one of your spam accounts.  An account which exists solely to show adverts to your victim.

Your victim now sees your adverts for pills, poker and porn in their timeline.  With any luck, they’ll just assume that one of their true friends is promoting your illicit wares.

Counter Attack

Most victims will assume that they accidentally followed your spam account – or that one of their friends has been hacked.

Worst case scenario, they unfollow your spam account.

So you just make them follow you again! Remember, you are still OAuth’d to Example.com. You can make them follow as many of your spam accounts as you think you can get away with.

At this point, the intelligent victim will think that their account may be compromised and change their password.

It doesn’t matter! Because you have used OAuth, password changes don’t affect you.  You can continue make them follow as many of your spam accounts as you think you can get away with.

At this point, the really intelligent victim will go through their OAuth connections to look for something suspicious.  They won’t find it.  Remember steps 3 and 4?  You are OAuth’d to a service that your victim trusts.

Because of the way Twitter displays OAuth information, there’s no way for a victim to know when a service was last authorised.

Twitter OAuth Connections

There is no information other than the first time the OAuth was set up.  No last accessed date, no IP addresses, nothing useful.

When following an account, the victim gets no notification of what has happened, when it has happened or how it has happened.  There is no way of them knowing which of their OAuth’d connections have been compromised, nor when it happened.

Their only safe option is to revoke every single OAuth connection.  Then reauthorise.  A time consuming and annoying prospect.

Conclusion

I hope I’ve demonstrated two things.

Firstly, there’s more to spam then just sending out messages.  Forcing someone to read a message is just as annoying.

Secondly, our understanding of security and usability haven’t quite caught up with the new tools which are available to us.  OAuth is still better than giving your password to an untrusted site – but without essential usability changes, a compromised account is a lot more dangerous than the user would suspect.

This “attack” still relies on a victim having their original password compromised.  That’s not a trivial matter.  But security is like sexual health – it only takes one little accident…

#hashtag – As long has there has been a way to search Tweets* people have been adding information to make the easy to find. The #hashtag syntax has become the standard for attaching a succinct tag to Tweets.

The Twitter Engineering Blog

That’s all well and good, but as I discovered yesterday, without standardisation the ability to search falls apart.

I’m not talking about whether you should use the #LondonFire tag rather than #FireOfLondon or #LDNfire. Rather; how does a computer recognise what a valid tag is?

Why Does This Matter?

Search and tracking quickly break down if they are inconsistent.
For example, if you are using #Romeo&Juliet to mark all your conversations about the play you are watching, different Twitter clients will link through to either #Romeo, #Romeo&, or #Romeo&Juliet.  Each search returning potentially different conversations.

What’s The Convention?

Twitter’s website ought to be the definitive source of how hashtags work. This is their main site.

Twitter Website Hashtag

Yet, when we visit their mobile site – we get a completely different experience.

Mobile.Twitter's hashtags

Application Confusion

Because there aren’t any widely publicised definitions for what hashtags are, some applications have a significantly different attitude to hashtags

SocialScope Hashtags

UberTwitter's Hashtag Support

Standardisation

To be fair, the Twitter team do have a standard.  Even if they don’t use it themselves.

They even have some limited test cases and libraries in Ruby and Java.

So, given that Twitter, their implementation and apps all disagree on what a hashtag is, let’s try to work our what they should be.

Anatomy of a Tag

To begin at the beginning.  A hashtag starts with a hash. #.  Simple, no? No.

There are two different hash symbols! There’s the # we all know and love, and there’s ＃.  Looks pretty similar, but in fact it’s the unicode symbol [U+FF03]

Actually, that’s not the beginning.  What comes before the # of the hashtag?

Consider the following examples – which should be hashtags?

• #tag – the # starts off the Tweet
• This is my tweet #test – the # comes after a space.
• This is it.#tag – the # is pushed against some punctuation, perhaps for reasons of space.
• Here we go-#LiftOff – the # is pushed against a -
• I’ve run out of space#OhNo – the # is pushed against some text
• &#nbsp; – the # is part of an HTML entity
• text　#hashtag – the # comes after a “wide space” (U+3000)
• Should I use #tag/#hashtag? The # comes after a /
• Is this valid ##tag – there are two #s

So, we can see it’s a little more complicated than we first thought.

The End

Let’s skip over what’s in a hashtag and as “how do we know that a tag has finished?”

Consider the following examples -

• New album #OMG! – should the ! be part of the hashtag?
• #BreakingNews: dog bites man – should the : be part of the hashtag?
• (is this a #tag) – should the ) be part of the hashtag?
• I like #tags#

We probably don’t want to have any punctuation at the end of our tag.  Can you think of any counter examples?

Yummy Filling

Our language is more than just the letters A-Z. We’ve got punctuation, numbers, symbols and all manner of other glyphs.  Which of them count as part of a hashtag?

Take a look at these examples

• Vote Bush! #Don’t
• My dog died #:-(
• Einstein #e=mc^2
• I’m on bus #123
• I’m giving #110%

Using Twitter’s standards, none of the above render as complete tags.

Foreign Languages

We’ve mentioned accents above.  As we can see in the first example, “funny” characters can cause problems.  Broadly speaking, there are three issues.

1. Accents.  Should the é on #Café be linked?
2. Accents.  Is #Romeo the same as #Ŕöméø?
3. Japanese, and some other languages, don’t use spaces.  Is #tagの valid? What about # 会議中 ?

Exhausted

These are a fraction of the possible problems.  It’s exhausting trying to find all the possible textual combinations and permutations which could lead into a hashtag.  No wonder there is confusion!

Search is a complex, profitable, and useful business.  It’s of vital importance that there is a legitimate, comprehensive standard which all sites and applications can follow.

This sort of knowledge is common in life – but is fatal in computing and design. Take the following tweet I received.

Mawkins

(Mark Hawkins)

@edent @dabr you folks aware ampersands / &s don't seem to work as part of hashtag links?

On 24-2-2010 16:27:19 from TweetDeck in reply to Terence Eden

The complaint was that #tfm&a should be rendered as #tfm&a not #tfm&a.

Everyone knows that’s how hashtags work!

On Twitter’s website, find the page which discusses hashtag syntax. Find where they explain how they should be styled.

You can’t.

And thus implicit knowledge is born. Dabr only looks at letters and numbers in a hashtag. It assumes that any other character is the end of the tag.

Dabr's Hashtag

Without official guidance – implicit knowledge develops.

Has Dabr Got It Wrong?

No. I don’t think so. Take a look at how Twitter on the web renders hashtags…

Twitter's Web Site

…and on the mobile.

Twitter Mobile

So Where Does Render The Full Tag?

Several applications don’t render tags in the same way as Twitter. Take a look at SocialScope

SocialScope Hashtags

Tweetie2

I’ll upload more screenshots if I find examples of “badly behaved” hashtags.  Please let me know if you find any.

What Does Twitter Say?

Twitter has one page devoted to hashtags.  It is a support page for hashtags.  This explains to people what hashtags are.  There’s no detail on valid characters, maximum length, or any of the things which might be useful for a developer or designer.

Edit 2010-02-25

David Dorward has pointed out that there is an official resource. On the Twitter Engineering blog – which isn’t linked to from the developer site – there is a page discussing hashtags and how to validate them. You’ll notice that they are rather circumspect on what should constitute a hashtag.

Conclusion

Standards and guidelines allow developers to create compatible applications.

Without explicit recommendations, developers will diverge as widely as possible.  Twitter – and everyone with an interest in compatibility and usability – needs to ensure that the knowledge they impart is explicit.

Letting people make it up as they go along leads to confusion.

It’s one of my gripes with Linux.  If you’re editing a configuration file, you are relying on yourself to sanity check your input – often without knowing what the limits are.

Take these two different examples.

In a text file, we might have:

#Maximum Widgets to fidget
maxW_to-F = 0

Whereas a GUI would show

How many Widgets do you want to fidget?
1235

Even if you don’t know the rules behind Widget fidgetting (must be a prime number lower than 7), the GUI won’t let you choose a value that you can’t select. The GUI doesn’t prevent you setting an innapropriate value – just an illegal one. Your config file, however, could be set to any crazy value that a user type – often resulting in “unpredictable” results.

#Maximum Widgets to fidget
maxW_to-F = seventeen

It’s with this in mind that I’ve made the following change to Dabr – the mobile Twitter client.

To Auth or Not To Auth? That Is The Question

Twitter’s API has bug / peculiarity (reported to their discussion board) which causes Dabr to log a user out. Let me explain the steps

• User 1 (@private) has set her tweets to “protected”.
• This means no one can see @private’s tweet unless she allows them.
• @private has not allowed User 2 (@edent) to view her tweets.  She is protect from his view.
• @edent clicks to view @private’s profile.
• @edent can see that @private has 42 friends, 17 followers and 3 favourites.

So far, this is the same behaviour on Twitter’s website as it is through their API.  Here’s the difference

Web

• @edent tries to see @private’s followers and can see their names, profile pictures etc.
• @edent can also see @private’s friends
• @edent cannot see @private’s favourites (or even how many favourites she has)

API

• @edent tries to see @private’s followers, friends or favourites
• Because @edent isn’t allowed to see @private’s info, the API returns 401 Authorisation Required.

This is where things get tricky. Dabr sees the 401 and concludes that the user has invalid credentials.  It then, as a security measure, clears the user’s cookie and logs them out.

This may be a little harsh, but HTTP 401 essentially says that the authorisation has failed.

Fixing It

There are 3 ways that this could be fixed

1. Twitter could rationalise the API to allow access to the same content that a web user gets.
2. Twitter could return a different status code.
3. Dabr needs fixing.

So, how do we get Dabr not to log out when it receives a 401 only under these specific circumstances?

Looking at the code, we can see that Dabr simply sees the HTTP response code.  To fix it we’ll need to pass extra parameters, check where the code was called from, investigate all the edge cases, add more logic to the system, futz around breaking things, etc… etc…

What a pain in the…

Or

Don’t let users do things they can’t do.

If a user can’t see the information – why do we even let them try to see the information?  Why can’t we just get rid of the link?

This is what a user currently sees:

Old Style

We’ve established that they can’t view followers, friends and favourites.  So we can get rid of those links (but not the information).

New Style

(Incidentally, I’ve changed the order of the links.  I’ve tried to group together similar items.  Followers, friends, favourites and lists go together. Then DM. Finally, follow, block, report spam.)

Now a user cannot click through to an unwanted error message.

Or

There is another way round this.  With “Direct Messages” we could do the same thing – simply remove the link if you’re not able to send that user a DM.

Instead, we’ve taken the approach of displaying a suitable error message.

Direct Message Warning

The advantage of this is that the user gets an explanation as to why they are unable to complete an action.

Your Thought?

Which do you prefer? Being unable to click on a link (with no explanation) or clicking on a link only to be given a warning message?

Usually, I would be a big fan of this move – especially if it forces password anti-pattern sites like TwitPic to implement the new, secure standard.

This means that you won’t be able to log in to a third party site by giving them your username and  password.  You will have to use OAuth to securely validate with the main Twitter site.

But – as ever – there’s a dark side to OAuth.

Repressive Regimes

One of the joys of Twitter is that its clients are decentralised from the main site.

This means that if Twitter is blocked in your country, you can use a third party client (like Dabr) to access it.

Twitter User -> Dabr -> Twitter API -> Dabr -> User

If Dabr became sufficiently popular to be blocked by an oppressive regime, you can switch to any one of the thousands of Twitter web clients.

OAuth forces you to the main Twitter site.  While you may visit Dabr to start with, you would be redirected to Twitter to complete OAuth.  If Twitter is blocked, you can’t connect.

At a stroke, Twitter has shut itself off to anyone in a repressive country.

This has been picked up by some concerned users.

A (Hacky) Way Around It

There’s really only one way around this problem.  The third party web client has to act as a man-in-the-middle.  There’s a patch for Dabr – developed by cnyegle – which will ask for a username and password, then proxy it to Twitter, get the OAuth token and tweet on behalf of the user.

From the user’s point of view, they are still giving the (potentially untrusted) site the username and password.

Challenge Response

This could be solved by implemented a challenge / response system.

1. Alice visits the Dabr website.
2. Dabr asks Alice for her username (and only her username)
3. Dabr asks Twitter for the challenge associated with Alice’s username.
4. Twitter checks that Dabr is an authorised website (i.e. has signed up for OAuth).
5. Twitter returns the response:  A secret phrase which Alice has previously chosen.
6. Dabr displays this phrase to Alice.
7. Alice knows that Twitter trusts Dabr
8. Dabr asks Twitter for the password challenge.
9. Twitter returns that it requires the 3rd, 5th and last character from Alice’s password (the characters requested change randomly).
10. Dabr asks Alice for only those characters.
11. If Alice provides the correct characters, an OAuth token is granted to Dabr to tweet on behalf of Alice.

This has the advantage of proving that Dabr is trusted (by displaying Alice’s pre-defined secret phrase) and mitigating the risk that Dabr is untrusted (by only revealing part of the password).

Conclusion

This is a very new area, and I’ve not had a chance to read through all of the proposals.  Nevertheless, it remains a fundamental problem that, if you can’t access a site, you need to delegate your trust to someone else.

I’m not a security expert – so I would appreciate someone pointing out the flaws in my reasoning.

For a service which started out operating by SMS, Twitter takes a surprisingly unenlightened view of mobile. It’s main mobile service – http://m.twitter.com/ – is almost completely devoid of useful features. That’s one of the main impetuses behind the development of Dabr. Their latest mobile site – http://mobile.twitter.com/ – is really only suitable for the tiny minority of people who have smartphones.

So, understandably, many people use 3rd party sites like Dabr. They are now faced with a dilemma – give an untrusted site their username and password or try to use OAuth on the mobile.

A few weeks ago came the announcement that OAuth was finally ready for mobile… Was it? No. Once again a “mobile friendly” site designed with masses of JavaScript and guaranteed not to work with the majority of phones on the market.

Here’s how mobile OAuth looks on a variety of popular mobile phones.

BlackBerry

BlackBerry Twitter OAuth

While this looks pretty enough, it doesn’t work. The buttons aren’t clickable. I’ve tried with and without JavaScript. No matter where I click, nothing happens.

Android

The Android’s User-Agent isn’t detected by Twitter as being a mobile phone. While it’s true that the browser is very capable – the OAuth screen is a lot more usable when it’s in mobile mode.

Android Twitter OAuth

So, it works, but it doesn’t look nice.

N95

The N95 makes a good test phone because it’s popular. Probably more popular than the iPhone.

N95 Twitter OAuth

N95 Twitter OAuth

It’s not pretty – but at least it works.

Others

The Sharp GX-10 is my default test phone. One of the first phones with a colour HTML browser. If your site can work on this phone, it will work on any phone. There are no screenshot capabilities for this phone – but rest assured, it does not work.

The three phones I’ve demo’d above are very popular modern phones – AKA the minority. If they don’t work well, what chance for the people using older phones?

Useless! How hard can it be? All it needs is a username field, a password field and a button. That’s just about the most basic page imaginable. It should be child’s play to make it work on mobile.

This was first raised in March 2009 on Twitter’s issues list. It’s currently the most popular bug.

So, we’re stuck in a dire situation. Third-Party mobile sites get access to Twitter users’ passwords because Twitter are unable or unwilling to develop a simple OAuth form. It would be fascinating to know how many of Twitter’s security breaches are down to corrupt or insecure 3rd party sites which leak passwords.

My partner and I, like many married couples, live together.  We speak over breakfast, commute together and send each other emails and texts throughout the day.  But we don’t do any of this on Facebook.

This worries Facebook.  It thinks our marriage may be on the rocks because we haven’t – excuse me – “poked” each other for a while.  Facebook knows the key to a successful marriage is to tag each other in as many photos as we can.

At least, that’s the only reason I can think for what I saw when I last logged in to Facebook.

Click to Embiggen

THANK YOU FACEBOOK FOR SAVING OUR MARRIAGE!

Insert a pound in the slot, press the button for The Times, aim your handheld’s IrDA at the blinking light and ZAP! All the latest news for you to read on your train journey.

It’s just as well that my idea never got out of the paper prototyping stage.  While BlueTooth has supplanted Infrared in the majority of modern phones, it is network provided data which is now king.

The Daily Show did a wonderful interview with the New York Times. The interviewer asked the editor…

Can you show me one thing in this paper that happened today?

3 Minutes 10 seconds into the video

And, of course, the answer is “no”.

I remember on that dreadful day in September, barely a few hours had gone by before the first “extra” editions of the Evening Standard had pictures and analysis.

A few hours? That feels like a life-time. Especially when it comes to breaking and developing news.  There is a huge lag between a reporter typing away, the presses rolling, and the delivery drivers depositing the paper on the streets.

The Internet totally eliminates that lag.  A journalist can clatter words onto a laptop and with a push of a button have them broadcast to the world via their website.

The Web is Too Slow

I simply can’t wait until I’m back at my desk. Nor can I be bothered to boot my laptop, find some Wifi, find some power, load FireFox, etc…

Flip open my phone, click news, read. That’s what I want. And that’s what I can get.  For breaking news, the mobile Internet is the only real solution.

What’s Available

I present here a quick overview of the most popular British Newspapers’ mobile sites.  I’ve also included the New York Times for international flavour and Reuters for the agency view.

List of mobile newspapers - spot the favicon

I don’t intend to comment on the politics of the papers, nor their choice of stories  – I’m going to concentrate on the first impression only. Later I’ll do a full review of their capabilities.

The first thing to spot is the use of the Favicon. Favicons are the little icons which are used to differentiate your site from others. Think of it like a visual bookmark.  Bizarrely, half of the UK papers don’t use a Favicon.  That means that in the bookmarks list they are likely to be overlooked.

A special mention for Reuters’ Favicon (highlighted) – It’s an indistinct yellow splodge.  I’ve highlighted it because it’s hard to see yellow against a grey background.

FT.com – http://m.ft.com/

m.FT.com

Traditionally printed on pink paper, the mobile site seeks to replicate the distinctive hue of its paper counter part.  From a branding perspective, this instantly tells the user that they are on familiar ground.  It doesn’t affect the readability – so why not.

Showing the time next to a story instantly tells the reader how “fresh” the content is.  Confusingly, there’s no date displayed.

Search is always important to readers; allowing them to get straight to the content they want.  Not having any navigation is a hindrance to users quickly finding their way around.  While users will scroll to get to navigation – placing it at the top is an easy way to let them choose where to go next.

While advertising is a necessary evil, this advert is hard to read and jars with the rest of the page.  The layout of the whole page seems very heavy on the dead-space.

Guardian – http://m.guardian.co.uk/

m.Guardian.co.uk

I’ve already reviewed the Guardian – but to my mind it still stands out as one of the best examples of mobile news sites.  Compact and efficient layout, navigation, teaser images, and the date all contribute to a well designed first impression.

The Independent – http://m.independent.co.uk/

m.independent.co.uk

Dispensing with navigation has allowed The Independent to cram a few more stories above the fold.  Although their teaser text hasn’t been optimised for the size of the screen leaving some rather jarring dead-space.

The colouring is rather plain, but fits in well with the paper’s brand.  Colouring the background space given over to the advert is an interesting design choice.  It simultaneously draws attention to the advert while keeping it conceptually separate from the rest of the site.

Metro – http://metro.mobi/

metro.mobi

The Metro is technically a newspaper.  The mobile site reflects the paper version – cheap, cheerful, primary colours and a blonde on the front page.  The total dominance of the image detracts from the rather good navigation choices – split by category.  The masthead is perhaps a bit large – but the promise of the image will probably be enough to get 50% of the population to scroll down.

It’s interesting to notice that there are no stories or direct links to stories to be seen.

New York Times – http://mobile.nytimes.com/

mobile.nytimes.com

They “Gray Lady” lives up to its reputation with a very plain site which, nevertheless, packs in a lot of information.

Using an anchor link to get to the navigation is a smart choice.  It reduces clutter at the top while keeping navigation options available.  With intelligent use of space they’ve also crammed in a search box.  The date and time give the viewer the reassurance that the news they are reading is not stale.

Unlike the other sites, the NYT places images on right.  While this is distinctive, readers of English are accustomed to a flow of information from left to right.  I wonder if this style helps or hinders readability.

The link to a dedicated application is a smart touch and will probably upsell readers.  Unfortunatley it comes at the expense of looking like it is part of the headline.   A less subtle change of font, colour, or placement would help here.

Reuters – http://uk.mobile.reuters.com/mobile/uk/

uk.mobile.reuters.com

Reuters is not a newspaper. It is austere and feature poor. Deliberately so – it caters to those who want the news without any fuss. That said, they do make poor use of the space available; only the lower third contains any real content.  It makes a nice change not to have an advert at the very top of the page – but the heaps of space aren’t really necessary.

Shifting the masthead and date on to one line, then removing some extraneous space would provide a better first impression by bringing more news to the forefront.

The Sun – http://thesun.mobi/

thesun.mobi

The Sun is Britain’s biggest selling paper.  Unlike the others, they totally eschew advertising at the top of their site.

The page is strongly branded and very picture heavy – that’s likely to negatively impact download times. Navigation is very clear but it is missing search. They have deliberately taken the paper’s style – the ripped edges of the image, for example – and applied it directly to the mobile.  That’s not always a great idea, but it certainly makes it stand out from the crowd.

Times – http://timesmobile.mobi/

timesmobile.mobi

I’ve reviewed the Time before.  I find the logo unnecessarily large.  It’s great that they’ve got the date and time on there – but giving them their own line feels like an inefficient use of space.

Essentially, over half the screen is wasted here.

Mirror – http://m.mirror.co.uk/

m.mirror.co.uk

The Mirror’s mobile site feels dominated by its advert – yet, impressively, they still manage to keep 3 stories above the fold.

There’s no navigation or search.  Indeed, it’s as simple as you can be without the barren space typified by Reuters.

While offering a good amount of news – this really gives the impression of being Lidl’s site, with a bit of news thrown in.  Adverts should be carefully designed not to swamp the pages on which they live.

Telegraph – http://m.telegraph.co.uk/

m.telegraph.co.uk

Alphabetically last, The Telegraph is a rather mixed bunch.  The only images are an advert and its logo.  The navigation and use of date are well integrated. Despite this, they can only fit two stories above the fold.

There are no images to entice the user – although the text rich screen does convey a depth of purpose that the others may be missing.

Conclusion

It’s important to remember that users will scroll. The idea of putting important assets “above the fold” is, at best, a distraction. But there’s no denying that the first impression really does count.

It’s heartening to know that the UK’s mobile (mainstream) news market is so vibrant and healthy. While they differ in functionality and content – these sites show that providing news on the mobile is no longer a niche activity.

Mobile news sites come in a wide range of shapes and sizes – demonstrating that mobile needn’t be static and simplified.

These sites – despite their problems – are evidence that mobile news, for many people, is the news.

Alex Hilton wanted to know how easy it was to recycle. So, for your edification and delight, I present…

Recycling The FreshCase

Disclaimer

These boxes of wine were sent to me for free. Enjoy alcohol responsibly. Do not attempt without adult supervision.

Getting the client was fairly simple, but could be better. Simply visiting http://seesmic.com was enough to bring up a mobile friendly page with download instructions.

However, scrolling down presented this mess.

You simply can’t rely on users to know what make, model or firmware version they have. Use the user-agent string to do as much of the hard work as possible. If a user tries to install an incompatible version, it won’t work and they’ll blame you.

The download itself is a sprightly 172KB and installs very quickly – it also doesn’t require a reboot.

Once you’ve signed in, the main interface is very simple. UberTwitter, for example, presents the user with complex set-up options on the first run. Seesmic gets straight to the action.

Seesmic is entirely menu driven – there are no shortcut keys. UberTwitter allows me to hit R for reply – on Seesmic, I have to delve into the menus. Luckily, they’re short and have obvious names.

Reading a tweet gives the usual option, hashtags and @s are hyperlinked – as are web addresses.

On usability flaw, the cursor is at the top of the screen. A user has to scroll through the “Web” hyperlink before getting to the links within the tweet.

Again, because there are no keyboard shortcuts, everything has to go through the menu.

Searching is problematic.

Pressing enter doesn’t start a search, it inserts a new line.
The search button isn’t the first thing you get to when you scroll down.
While the results are standard, this odd error message kept popping up.

I encountered this error several times.

Writing new tweet has some great usability touches – and some real clunkers.

The closer a user gets to filling the 140 characters, the more red the screen turns.

URLs can be automatically shortened and images can be added. This shows one of the great usability failures of Seesmic.

Rather than use the BlackBerry’s file select utility, it uses its own – and it’s dreadful. Ugly looking, no ability to search, slow, no preview. Overall, a real let-down.

I don’t know why companies often insist on creating their own versions of well established system functions. Especially when they add nothing and remove plenty.

Sending a tweet was continually problematic for me.

Although it eventually relented.

Seesmic also makes great use of notifies, showing you on your home screen how many unread tweets you have.

Overall, Seesmic isn’t a bad client. There are a few rough-around-the-edges bugs and the file selection is atrocious but other than that, it works. Power users like me will miss the shortcut keys of UberTwitter, and UT’s system-wide integration (uploading photos, capturing hashtags in emails etc.).  It lacks other features such as in-line photos, ability to see followers and friends, it also has no way of marking a tweet as a favourite or seeing favourites.

One feature it does have – a first in mobile twitter clients – is the ability to view lists.  You can’t add, edit or create – but you can see the lists you have created or are following.

Conclusion

Seesmic works well enough as a basic twitter client for BlackBerry – but there’s nothing exciting about it.

In this animated GIF, an advert for Lexus, we see a call to action which says “Click Here”.

Lexus Advert

Would it not be obvious to readers that this is an advert? That adverts are clickable?

Perhaps not. Let’s see how it is laid out on Reuters Mobile.

Advert on the Reuters Mobile site

Utterly bizarrely, this image isn’t clickable! The user will try in vain to click where it says “Click Here” and get nowhere – they have click on the word Lexus.

Take a look at the source code, if you don’t believe me.

HTML Source Code

Make Your Advert Easy To Access

Seems obvious, no? The bigger the target area, the more chance a user will be able to click on it. This is a big usability issue – especially on phones touchscreens, trackpads and rollerballs.

We see this issue in HTML forms as well. In this example, it’s easy to select the “Male” option simply because the label is clickable.

The “Female” option is harder because you need to have the dexterity to accurately position your cursor over the tiny radio button as opposed to a larger target.

For a chance to win an AMAZING prize – click this dot . It’s not the easiest thing in the world. Especially on a mobile device where the cursor may only move in large steps.

What To Do?

Having a hyperlinked word or phrase under an advert certainly isn’t going to hurt.  When it’s the only way to access the content, you risk confusing your users’ mental model about how images work.

Above all, never say “Click Here” if there’s nowhere to click.

I received a rather worrying email from Twitter.  Apparently they thought my password had been compromised and needed to be reset.

Reset Your Twitter Password

After checking to see if it was valid, I went and changed my password.  Any site which relied on a cookie to post to Twitter would have been blocked out. Ha! Gotcha, suckers!

The OAuth Problem

OAuth tokens are not revoked when the master password is changed.

OAuth is a great idea – rather than give your username and password to any random site, you log on to Twitter and tell them that you authorise the refering site.  The site gets an OAuth token and never gets to see your password.  Great! Right? Not really.

Let’s consider the following scenario.

Alice has a Twitter username and password.

Bob runs a Twitter site.

Alice visits Bob’s site.  Alice is security conscious and uses OAuth.

Eve somehow discovers Alice’s password.

Eve also visits Bob’s site and uses OAuth.

Alice gets suspicious about strange activity on her account and changes her password.

Because Bob’s site uses OAuth, it does not require either Alice or Eve to re-enter Alice’s password.

In this scenario, Alice has to visit Twitter’s OAuth Connections page and revoke access to all the sites she has previously connected to.  Alice has no way of knowing when each site was last accessed.  She also doesn’t know which site Eve is using.

Twitter's OAuth Page

The Problem

Changing a password should – in the minds of most people – mean that you need to re-enter your password even if you have previously authenticated yourself.

In this scenario, changing the password does not revoke access to malicious users who have previously used your credentials.

Twitter should revoke all OAuth tokens when a user’s password is changed. It is the only way to ensure that stolen credentials cannot continue to be used after a user has changed their password.

Addendum

As I’ve made clear in the comments – this isn’t a vulnerability within OAuth per se.  It’s a usability issue which has strong security implications.

I spoke to Eran Hammer-Lahav (listed as OAuth’s advisory contact) who said:

If you suspect someone stole your password, you should revoke any tokens you did not personally authorized. But there is no reason to revoke tokens just because you are changing password.

While I appreciate this as the official line from those in the know, it does nothing to prevent a user who uses the same sites as you.  For example, I can see on every tweet that you use Dabr.  Therefore, I can safely OAuth myself as you on Dabr.  You’ll change your password, but you won’t revoke Dabr’s token because you personally authorised it.

Continuing The Conversation

Heise Online provides comentary in German (English version)

El Reg has a feature about Twitter and OAuth.

There’s also an interesting discussion over at Hacker News.

The regular BlackBerry browser is… how can I put this politely… sub-optimal. For reading mobile-friendly sites it’s perfectly adequate – but for anything more complex it tends to choke.

Don’t get me wrong, it’s “good enough” for most basic browsing needs, but a lack of tabs, half-arsed JavaScript implementation and idiosyncratic rendering choices make for a somewhat frustrating browsing experience.

Enter Opera Mini 5 (beta).  Opera has been knocking around for ages. Their desktop browser is solid and their mobile browser has always been rated highly. But how does it compare to the BlackBerry’s native browser? Let’s find out!

The Good

Opera Mini 5 beta

From the first launch you can tell that a lot of care an attention has gone in to Opera Mini. The startup screen has visual bookmarks – AKA speed-dials.

Start Page

There’s an impressive amount of animation – similar to App World – and the user interface is fairly snappy.

The new menu bar gives quick access to all the functions Opera has to offer.

New Menu Bar

Extended Menu Bar

Pages start in “Zoomed Out” mode so you can get an overview of the page.

BBC News - Zoomed Out

A click of the track ball zooms in. Here you can see how well the text and images are rendered.

Zoomed In

Tabbed Browsing

Opera Mini handles tabs wonderfully. Because Opera sets itself as the default browser – any link you click on in an email is opened in a new tab in Opera.

Lots of tabs

Closing Tabs

Text Selection

The native browser is very good at text selection – so is Opera.

Text Selection

Text Selection Instructions

Highlighted Text

Copy and Search

The Bad

Missing Letters

As you can see, there is a missing letter on this page.

Spot The Missing Letters

This happens across websites with no seeming pattern other than the last letter on a line.

No YouTube

The native BlackBerry browser passes YouTube links to the media player.

YouTube? What's That?

Opera doesn’t do anything with the links. I didn’t expect it to have a fully-fledge flash player – but the least it could do is pass streaming media to the in built application that will handle it.

Poor Text Entry

The text boxes look nice, but have serious flaws.

Poor Text Entry

They don’t respect the normal BlackBery conventions. There’s no auto-correction, holding down a letter doesn’t capitalise it. Sometimes hitting delete removes all the text. This is infuriating.

Miscellaneous

There are a collection of things which prevent me loving Opera Mini 5 (Beta).

• Lack of standard BlackBerry keyboard shortcuts.  I can’t press K for Bookmarks, P for Page Address, nor T to jump to the Top of the page.
• Inability to send links.  If I’m reading an interesting page on the BlackBerry browser, I can send it via email or SMS – no way to do that with Opera.
• Can’t open links in a new tab. I know it’s a bit churlish to complain when tabs are a new feature.
• Clicking “Back” returns you to the top of the previous page – not you last position on the previous page.

Conclusion

There are some annoying faults in Opera Mini 5 (beta) – but the clue is in the name – it’s a beta.  The browsing experience is so good, I can gloss over the missing letters and the poor text entry.

The fast rendering and tabbed browsing are enough to keep me using it for now.   Looks like RIM purchased Torch Mobile just in time!

TasteLondon Logo

There is a small problem with it, though.  The directory of restaurants it covers is a fairly heavy paperback book  Rather inconvenient to carry around on the off chance that you fancy popping out for some dinner .  They do have a rather good website – http://www.tastelondon.co.uk/ – but it doesn’t work on mobile. Nope. Not even if you’ve got a Cadbury’s iPhone.

Last year I asked TasteLondon if they were planning on developing a mobile site.  They said “yes” and here it is.  It’s a textbook example of how not to design for mobile.  Let me take you through it.

Where is it?

How would you expect to get to the TasteLondon mobile site?  Their news page annouces the service but doesn’t give the URL! The site is meant to auto-detect a mobile browser but failed to do so on BlackBerry or Android.

I tried guessing the URL.  Was it m.tastelondon.co.uk? Perhaps mobile.tastelondon.co.uk? Surely not wap.tastelondon.co.uk? I know tastelondon.mobi? Nope – none of those.  After much perseverance I discovered it was http://www.tastelondon.co.uk/iphone

Solutions

• TELL YOUR CUSTOMERS WHERE YOUR SITE IS!
• Mobile detection is hard.  You can use services like DeviceAtlas or WURFL to detect if a device is mobile.
• Always offer a link on your main page just in case your detection is wrong.
• If there are several standards, make sure you redirect your customers if they go to the wrong URL.  A simple redirect in .htaccess would have send everyone visiting the m.tastelondon URL to the correct location.
• Don’t choose technology specific names in your addresses.  /iphone would indicate that you’re not interested in the hundreds of millions of devices which aren’t made by Apple.  While the iPhone is popular now – will it be in a year’s time? Choose something vendor neutral.

So, here’s the front page on my BlackBerry.

Front Page - KISS

I quite like this.  It’s simple.  There’s a link back to the full site.  The bold indicates that I’m in simple search and, if I want, I can go to Advanced Search.  I wouldn’t have made “Simple Search” a link as I’m already here.  Overall, not bad.  Let’s see what the search results are like.

JavaScript

So, I hit the button and what do I see?

JavaScript

Don’t get me wrong, I love JavaScript. It does all sorts of amazing things and usually makes usability a lot better.  But on mobile?  True, many newer high-end phones have JavaScript – but literally billions don’t.  Why would you alienate so many potential customers?

What makes it worse, is that this is a simple form.  We’ve had forms on the web since its inception.  It’s a standard HTML element.  Why would a simple search box need JavaScript?

Is It Necessary?

• KISS
• If you’re desperate to use a whizzy new feature – check how widely supported it is.  Make sure there’s a fallback option for those users who won’t or can’t upgrade.
• Whenever you create a new service, test it as thoroughly as possible.  Remember, you are probably not your typical user.  Find out what technology your users have and design for them – not for what’s “cool”.

Ok, let me grab my Android handset and carry on testing…

Where am I?

So, I’ve just arrived at Waterloo Station when I see all the trains home are cancelled.  Let’s grab a bite to eat nearby.  I’ll search for Waterloo.

Searching near Waterloo

This is what I get back.

Results from searching for Waterloo

There are three serious errors with this page

1. The result is wrong.  I know the postcode of my home and my workplace.  I’ve no idea what the postcode is for anywhere else.  Given this is a London based service, I was expecting that a major train station would suffice.
2. No feedback on what I’ve searched for.  That search bar should be pre-populated with my search.  Just like every other search engine.  This gives allows me to correct any misspellings and serves as a reminder of what I was looking for.
3. Location.  The Prezzo in Peterborough is 265.31 Miles away.  Away from where?  I haven’t given my location and, as far as I can tell, the site hasn’t automatically detected it.  Where does this figure derive from?

User Needs

• Think about how the user thinks.  Does anyone know the postcode of the pub they’re sat in?  If you need a street name for accuracy, tell the user.
• Give the user feedback.  Keep them in the loop.
• Detect the user’s location.  This may be complicated for you – but it’s easier for the user.

Success!

I’ll try again.  I’ve got the feeling that I’m in the postal area of W2.  Here’s what success looks like.

Is this as good as it can be?

A really good page.  Pretty, well formatted, lots of information.  Can you spot the four glaring usability issues?

1. I can’t click on the phone numbers.  Some advanced phones will detect the number string and allow you dial it.  If not, you’ve got to find a scrap of paper, scribble down the number, close the browser, go to the phone’s dialer and type the number in yourself.
2. Where is Craven Hill Gardens? Why not link to Google Maps. Or Yahoo Maps. Or any mapping service.
3. What do those icons mean?  Anyone already intimately familiar with the TasteLondon system may know what they mean.
4. Where do I go for more information?  The names of the venues aren’t clickable.

Is This As Easy As It Could Be?

Make everything as easy as possible for your users.  In four simple steps the usability of this site could dramatically be increased.

1. Make phone numbers easy to dial.  Your user is on a phone, they need to book a restaurant, you’ve given them the number – why wouldn’t you make it easy for them to call?  You can use WTAI or tel: to make it easy for any user to dial the number you’ve presented.
2. Maps.  On the desktop, users are quite happy to copy and paste text into another page or application.  It’s not so easy on mobile. If something can be a link – it probably should be.
3. Familiarity. Because we spend all day in our jobs, we often forget that not everyone understands the acronyms and syntax we use.  Don’t hide behind obscure icons unless you hyperlink those icons to a page describing what they mean.  Consider having a “key” or “legend” at the top of a jargon heavy page.
4. Have you given me enough information to make a decision?  Perhaps I want to see the menu, prices, review or some other information.  If the information is available on your main site, it should be available on mobile.  This is the central tenent of the One Web.

The Tyranny Of Choice

Let’s pop into Advanced Search.  It’s fairly comprehensive.

Advance search result

There’s a sensible amount of options. Availability, Cost, and Offers all have 3 – 4 options.  Cuisine obviously has rather a lot of choices – 40 of them from African to Vietnamese. Yummy!

How many results do I want to see?  According to TasteLondon, it could be over 500!

How many results

Rational Choices

• Too many choices can be confusing and distressing for the user.
• How much information does a user want to see?
• How long will it take a user to download 500 results onto their phone?
• If you are going to offer a large results set, give the user a way to sort.
• Rationalise the choices you offer and how you offer them.  Is a list the best way? How about radio buttons or check boxes?

Sharing Is Caring

So, I’ve found the perfect restaurant for me and my friends.  I guess I’d better check that it’s OK with them all.  How can I do that? I know! I’ll SMS them the URL.

Ah… A problem.  The URL isn’t specific to the restaurant.

The Site URL

Take Advantage of the Platform

• If you want people to visit your site, make it easy for them to share it with their friends.
• Consider having a “Send To Friend” button which will save your users the cost of a text message.
• Create useful URLs. Watch this presentation about URL design or read it direct from the mouths of experts – Cool URLs Don’t Change.
• For this site, I’d use two different types of URLs.
• The URL for the search page should be similar to m.tastelondon.co.uk/?l=w2&c=veg&a=1&c=2&o=3 This enables your users to send the message “Hey, which one do you like the best?”
• The URL for each restaurant should be similar to m.tastelondon.co.uk/?r=1234 This enables your users to send the message “Hey, do you like this restaurant?”
• You can use “smsto://” on some phones to make it easier to send the URL by text.

Conclusion

I love my TasteLondon card.  It is tremendously valuable.  It has paid for itself many times over.  The mobile site is, frankly, a bit disappointing.  It works – on some phones.  It gives me information – but only the bare minimum.  It tries to be clever – but gets the basics wrong.

If I were dining on my own, didn’t really care about the menu and hoped cabbies knew London as well as they’re meant to – this wouldn’t be a bad site.  I do use it – but find myself skipping into Google Maps and external restaurant review sites.  I have to copy and paste details or take a screenshot if I want to share information with friends.

TasteLondon’s mobile site has only been live for a few weeks – I look forward to watching its evolution.

Back then I concluded that Dabr wasn’t quite up to snuff – how wrong I was! In the last year it has come on leaps and bounds. I’ve even contributed a few suggestions and lines of code.

Without a doubt, Dabr is the best general mobile web client for Twitter.

As my main device is a BlackBerry, I wanted something that integrated a little better. The Facebook app hooks in with email, calendar and even adds profile pictures to the address book. Is there anything similar for Twitter?

Enter ÜberTwitter - the finest client for the BlackBerry that I’ve used. Here are the reasons why…

Top posting

Top Posting and Reply Highlighting

Every web client I’ve found imposes the wrong reading order! Take a look:

Alice: Oh, I see!
Bob: Because it makes it hard to follow a conversation.
Alice: Why?
Bob: No.
Alice: Is top posting a good idea?

Previously, whenever I loaded up twitter, I was faced with the newest tweets first. This means coming in at the wrong end of the conversation. Although hard to show in screenshots, ÜberTwitter overcomes this by keeping the cursor on your last read tweet and loading the others above it. So you scroll up to read in the correct order!

Feature Request

I’d rather scroll down – or have the option of reversing the reading order. English speakers read top to bottom.

GPS Integration

GPS Integration

You can add your location in real time. This is also useful for searching nearby.

Seach using location

Picture Integration

Image Thumbnail

Full size images

This is something which Dabr also does very well.  If a tweet contains a link to a picture, you can see the picture inline.

Sending Pictures

Upload pictures from the gallery

Again, Dabr allows similar functionality by posting via twitpic.  But because ÜberTwitter is an application, it hooks in to the OS to allow you to post straight from your photo gallery.

#HashTag Integration

Hashtags in Facebook

Hashtag search

When you have a hashtag in a non-twitter message, you can click it. I’m not sure if this applies only to the Facebook app.

Others

I don’t intend to comment on every aspect, so here are some representative screenshots.

Trending Topics

Take a picture from within the client

Detailed follower information

Counts character usages and alerts when you're over the limit

Conclusion

This may be a beta product, but it is much better than most *shipping* software!
There are some minor niggles (can’t block or unblock, no alerts on new replies or new messages) but it is otherwise complete.

If you’ve got a BlackBerry, you owe it to yourself to get ÜberTwitter.

Here’s how to make a successful downloads platform:

1. Make it easy for your customers to buy things.
2. …er….
3. Nope. That’s pretty much it.

So, here’s the front page of the Ovi Store.

Count the errors

Here’s every error I can find on the above the fold page…

1. Incomplete titles. “Star Trek Noki”? Surely “Nokia”? Looks sloppy and unprofessional.
2. Poor descriptions. “Ringtones In Cinemas Now!”? Ringtones aren’t in cinemas. Is that one ringtone or several I’ll be downloading? If you don’t tell me what it is I’m getting, why would I download it?
3. Ratings. Why would you put unrated (or rated zero) content at the front of the store? You want your killer apps there.
4. Search. Why do I need to click through to search? There should be a text field and button there, not a link.
5. Colour differentiation. Using white and then light grey doesn’t help customers easily scan across the page. A darker shade would help.
6. Menu bar. Is there an order to it? Is there a reason it splits haphazardly over three lines? The longer the menu – the less space for content. As it is, it’s a pretty poor use of space.
7. No Nokia branding. I know they’re trying to promote Ovi as a brand – but no one knows about it yet. The use of the Nokia logo would really help customers trust the store.

…and breathe…

Let’s assume we’re reckless enough to click on “Star Trek Noki”. What do we find?

Oh dear...

Let’s take this from the top. Don’t forget, this is the Nokia Ovi Store’s FIRST link. This is what they really want you to buy.

1. Where’s the description? What exactly am I buying? It turns out, this is the product placement tune in the new Star Trek film. Some descriptive text would help. I thought it was going to be the film’s theme tune!
2. The description – such as it is – appears half way down the page. Why do I have to scroll to see what I’m getting?
3. Photos? Why do I need photos of a ringtone? Why are there “more” photos when there’s only the one?
4. The product photo is, essentially, black. A bit of colour to liven up the page wouldn’t hurt.
5. The review – why isn’t it in English?
6. Are the related links Games, Videos, Ringtones? Some context would help.

I clicked on download and got a blank page. Once I refreshed the page, the download started.

Huh?

Files should be named. It makes it easier for the user to find in their filesystem, it looks more professional when downloading.

So, I play the file and what do I get

Real professional lookin'

Add some fracking ID3 tags! It makes it easier for the user, it looks more professional and it costs the supplier nothing!

Gah! Fine. Ok. I’ll go back to the store and grab something else. I click back and am presented with this monstrosity.

Where do we go from here?

Nothing. Not even a page telling me how to get back. How is this meant to encourage me to buy more? This page should thank me for downloading. It should encourage me to buy more. In this case, I’d expect to see more Star Trek merchandise that Nokia want to sell to me.

Contrast this with the N-Gage download from the N-Gage site.

Much better

Once my download is completed, I get sent back to a nice page which lets me continue enjoying the store.  Nokia have this technology for Ovi – but not in the Ovi Store. Bizarre.

Last, but not least – registration. I know that Nokia has to have a registration process – they don’t have an MNO’s advantage of seeing a customer’s phone number. They also don’t have an associated account which they can reuse – like Google or Apple.

Oh… No… Wait… They do. I’ve registered for a Nokia account, an Ovi account and a Mosh account. I don’t seem to be able to use any of them with Ovi Store. NIH syndrome?

To be fair, the sign up process isn’t too bad. Apple could learn a lot from it.

A pretty good sign up screen

The only criticisms I have are the “Mobile Number” field should be masked so the user can only enter numbers. I also think that a captcha is a bit of an overkill on a mobile site.

Good to see that the example number is from Ofcom’s reserved range.

Overall, this is a step backwards for Nokia. Mosh and the original Ovi were quite good. This is just a mess.  By my count, there are at least 25 basic mistakes just from going to the front page and downloading a ringtone.

25 mistakes in 3 clicks.

[Disclaimer. In the interests of fairness, I work for Vodafone. Specifically looking after Vodafone live! a direct competitor to Ovi. The thoughts expressed in this post are my own and not those of my employer. I have nothing against Nokia; I kick up as much of a fuss about Apple and BlackBerry too!]

They’ve just announced a new app store – Ovi Store.  This is to replace the broken mess that is Mosh, N-Gage, Download and the current Ovi.  Why do I get the feeling that there are several fiefdoms within Nokia all working against one and other rather than working together?

So, let’s take a look at the new service.

Nokia Ovi Store - Wow!

Wow… just wow. A blank page. Not even a “coming soon” message.  Lest you think I’m using some kind of shonky phone, I’m on a Nokia N95 8GB, firmware 20.0.016, in rather good HSDPA coverage.

You’re supposed to be able to get to Ovi via the “Download!” application. I don’t think I’ve used “Download!” since I first got the phone. On the surface it’s a nice little App Store. If Nokia given it some love and attention, it would have got the recognition it deserved as the first integrated app store. As it is, it was left to die.

...please wait...

After 5 minutes of waiting for the “Download!” store to finish “Processing” I got bored. After 15 minutes nothing more had happened so I tried to cancel. Turns out you can’t, so I rebooted the phone.

Never mind! I’ll try going through the regular Ovi site.

Can you spot the store link?

No link to their brand new store. Hmmm…. odd…. Maybe I have to sign in to see it. Yes, that sounds plausible.

This isn't looking good...

Ok, a dodgy certificate isn’t the worst error in the world. It’s one of those things that says “We haven’t tested our site and we really don’t care if scary error messages put off our customers.”

In any case, the sign in service doesn’t work.

Ovi Error

Ah… Well, let’s try again…

It just gets better and better

Right. So the site has no links and it doesn’t work. Perhaps I imagined the Ovi Store launch? Let’s check the Internet Oracle that is Google…

There's something there...

Google has found it! It must be there. Ok, so there’s still a dodgy certificate – but I can’t wait to start spending money with Nokia! Here we go!

Oh. Just another blank page.

So, there you have it, folks. The word “FAIL!” is overused, I feel. How about we agree to replace it with “NOKIA!”?

I’ve long been intrigued by the central premise of the “Design of Everyday Things” that the basic interactions with normal objects – from teapots to motor vehicles – leaves a lot to be desired. It’s something which is also picked up on in Edward de Bono‘s book “Simplicity“.

So, I was in a toilet when I happened upon this stunning piece of [un]usability. (Please ignore the fact that I take my phone everywhere and see nothing wrong with taking photos in toilets…)

Here’s what the intent of this object is:

• Let’s create a toilet roll holder where it is easy to remove the used up roll.
• Let’s create a toilet roll holder which can carry two rolls; so one is never caught short.

In both these aims, the object fails spectacularly. To quote from Don Norman, there are three ways of working with two rolls of paper…

Algorithm Large: Always take paper from the largest roll.
Algorithm Small: Always take paper from the smallest roll.
Algorithm Random: Don’t think — select the roll randomly

Of course, if one always takes from the large you run in to problem; the large one becomes the small one.

This is no good – it means both rolls run out at roughly the same time. This could lead to an unfortunate situation where there simple isn’t enough paper to complete one’s workings.

Most people realise this and, being keen to keep some paper in reserve, will take from the smaller roll.

Now we have a completely different problem.

1. The left hand roll is depleted first. The roll is replaced. The right hand roll never gets used.
2. The right hand roll is depleted first. When it comes to removal, the left hand roll has to be removed before the empty roll can be removed and replaced.

Unacceptable and inefficient. The best case scenario is that the left hand roll is used up, the right removed, a fresh one put on then the original right hand one is replaced as the new left hand roll and the cycle continues again.

Much simpler to use something like this.

Or, of course, you can rip off the empty roll.

The first is the screen which allows you to alter your stats – this is what it looks like.

However, this is what most people will see.

Can you spot the subtle but important distinction?

Proximity implies relation. The word “Energy” is nearer to the number “102″ than health. Therefore, one would assume that they are related. In this case they are not.

This error is compounded by the boxing. The horizontal lines are, I’m guessing, intended to imply underlining. They have the effect of creating boxes – our mental model of UI generally assumes that everything inside the box should be related.

The second UI flaw is much harder to show on a blog :-)
When the game starts up, it plays an animation with the sound of some reving cars and a barking dog.

When I’m playing the game late at night (or at work!) I don’t want to disturb people. You can set the sound options in the preferences but this has no effect on the startup sound!

(Incidentally, notice the boxing on this screen. The inconsistency between these screens will also confuse users.)

Fair enough, I’ll use the handy switch at the side of the iPhone to switch all sounds off.

Except, it would appear, that applications can override this system setting. This is a poor choice by Cadbury’s. They should know that silence is golden and that user-space applications should not be able to override system wide settings.

However, aside from these two flaws, it’s an addictive little game.

.tel is yet another top level domain to go with all those other highly profitablepopular ones. You know, like .biz, .museum, .info, etc.

This domain is different – this domain is single purpose. .tel’s raison d’être is to abolish the business card. No more handing over little cardboard oblongs, in the glorious future, we’ll just say

“Visit aitch-tee-tee-pee colon slash-slash edent dot tell… No… Tell. It’s spelled TEA-EE-EL. Yes. Just one EL. No, I don’t know why. Here, let me write it down for you on a little cardboard oblong…”

So, as you’ve guessed, I’m not the world’s biggest fan. But I was “lucky” enough to win a free domain courtesy of TelReg. As I’m a freebie customer, I don’t think it’s fair of me to critique them in any way – but I’m sure going to critique the whole .tel idea.

First of all, why not take a look at the site. edent.tel. Go ahead, I’ll wait.

Yeuch! What a dull looking site. There is, at the moment, no way to customise the look and feel, I can’t even add my picture (not that it would make the site look much better…). I can, however, add some very limited information.

Now, I’m not a professional usability expert – but even I can point out the dull text, the huge dead space, the reliance on scrolling. Yeuch.

To make matters worse, there is a mobile version of this page. Seeing as most of the people to whom I’d give a business card will have a mobile phone, this makes sense. Let’s take a look at it in two popular phones.

iPhone 3G.

BlackBerry Bold (9000).

Yeuch! Again, no panache, no style. Just dull dull dull text. You’d think that the .VCARD link would be the top link, wouldn’t you? That would be a basic usability feature. But no.

As an aside, the iPhone can’t even download the .VCARD. This is the fault of Apple.

But the .tel people shouldn’t even offer a link to a phone they know can’t support it.

Anyway. As I’ve said, I’ve got this free for a year. A few hours in and I can’t see myself renewing it. If .tel can improve some of their basic flaws and improve their customer perception, I might reconsider.

I sort of like the idea. But I prefer SyncML sites. Take ZYB – (owned by Vodafone, who own me. Yes, I am biased) – if I give you my ZYB address, and we connect, whenever I change my address or telephone number it is automatically updated on your phone. Smart. And also pretty. Two things that .tel is not.

First up, yet another EULA.

I think that’s the third one that I’ve had to agree with. For one piece of software. If I were to actually read each of them, it would take a full seventeen years. Probably.

So, on to registration. Here’s the form.

Is there anything on here that I couldn’t do on my phone? I appreciate that on a crappy T9 keypad it would be a pain to type out all the information – but on the iPhone, it should be a joy. Right?

Then payment. I want to make it very clear that I don’t want to buy anything from Apple. There’s plenty of free apps, music and podcasts. But, no, Apple knows best and will safely store all my credit card details just in case I ever get drunk and have an insatiable urge to download Mungo Gerry’s Greatest Hits.

This gets me to the crux of my frustrations with Apple – it’s their way or the highway. You must follow Apple’s proscribed path. Any deviation results in instant death.

All of which wouldn’t be so bad, if its path was any good. Can anyone give me an explanation why I need to tether my mobile device to my computer? All the registration could be done by phone. It’s not even as if I can break my bank balance by downloading GB OTA – Apple cripples the device so that large downloads have to go through WiFi. Utterly absurd when I have an unlimited HSDPA connection.

Are there any Apple defends out there who can say why the need for a computer?

(Of course, the real answer is that Apple makes more money on iMacs and iBooks than it does on iPhones – so it hopes to trap you in its purchase cycle.)