Tag Archives: usability reflections

Usability reflections: How Google failed to keep their BlackBerry experience simple

Getting a CrackBerry was my latest step in showing total devotion to my employers big ideas about changing they way people blog. Since we use Google Apps for part of our intranet solution I thought it would be nice to integrate this gadget with their servers. Sadly this made my already bad initial experience with the whole BlackBerry platform just worse. Even though they made a number of steps to confuse their users, I’m just going to concentrate on just their web page on Mobile offerings for Google Apps.

Snapshot of the Google Apps mobile description page with non-linked URL’s highlighted

The basic idea of the page is to communicate that their suite offers a wide variety of mobile options of accessing the content. Yet It does this as it was designed as each section was its own page in some mobile providers glossy section.

No hyperlinks

They make hyperlinks to their mobile addresses part of normal text, making it really hard to notice and read. It also makes it impossible for someone to open the page up in their mobile browser and actually click on the links.

Lots of diffrent hyperlinks

The links they want to promote (in between links for non-blackberry users) are:

Even though m.google.com tries to keep it simpe the blackberry address in the middle destroys the message from Google to go to m.google.com with some sort of appendix for the addresses.

Failure to actually include crucial information

One such example is at the bottom where they promote their docs service, yet fail to include address for mobile access. My understanding after playing around a while is that I have to (or at least am able to) download an extra app to have great experience, yet they do not tell me that.

It also seems that their idea of mobile is BlackBerry and then everything else. While I appreciate their thought that they support everything with BlackBerry badge, a developer in me has its doubts. There are also some other very powerful smart-phones and it would be nice to address that issue a bit more clearly. They also do not make clear if they target at everything mobile or just the smart-phones.

Not speaking users language

The last section casually mentions “or other phones supporting WebKit browser”. My iPhone has Safari inside, that you very much as other mobile phones had a “Browser”, “Mobile Internet Explorer” and such. It is a bit a stretch to expect users to know what rendering engine their mobile device uses.
The same section goes on to mention “xls” format which is probably known to users but naming it Excel spreadsheet (with .xls ending) would make it more clear for the wide variety of users who actually don’t see the endings of their files in Windows.

Not providing simple mobile accessible URL and total failure of consistency

While Google actually offers mobile search at http://m.google.com, the page there actually doesn’t tell you anything about their mobile offerings. In order to get that you have to Google around to find http://mobile.google.com which promotes a downloader for “all” Google products in one go. Which is a nice idea for the fact that the installer actually doesn’t offer GTalk client.
But all of this is besides the point as this information is not on the page which actually forces users to go back at browsing the inter-webs to stumble on this information somewhere.

What could they do to improve the page?

  • Provide a clear, nice URL on top with all the links or even better – make their installer at that page actually able to install all of their offerings.
  • Separate the BlackBerry page from other mobile offerings. It seems sensible to have different pitches for Blackberry, iPhone and other mobile users.
  • Make the URL’s stand out and normal hyperlinks so it is not that hard to notice them.
  • Make some line breaks so the text on the page is actually readable.

Conclusion

The page itself feels like it was written in some marketing department, without any actual purpose to be helpful for any existing users that located it through search in hopes that it will tell them how to actually mobile stuff. This is also the message of this blog post:

People will find your marketing materials while searching for help on the topic. Design it in a way that it will at least point them into right direction for real help, if not actually help them in using it.

Usability reflections: The failure of search in online stores

Source: ShutterstockRecently my Sennheiser headphones died after a decade of everyday abuse. I wanted to buy something similar in about 100 Eur class. Sadly the two biggest Slovenian stores failed to help me locate a perfect new pair in a number of ways.

I started with EnaA and entered into their search general term “headphones” (slovenian: sluÅ¡alke), since I was not really attached to any brand. This is part of output I got:

enaa1

The built in search provides suggestions towards categories inside the store but fails to give you better context in which sections of store these categories are. If you are wondering, the first “Bluetooth headphones” points to “Audio/Video section” and the second to “Car accessories section”. Observant reader will also notice failure at standardization with first category using comman to separate microphones from headphones while last category uses ampersand sign (that is actually not used normally in Slovenian language).

They also sadly sell mostly cheap computer headphones so at that point I turned towards their competition Mimovrste. Same query this time returned following result:

mimovrste1

In this case categorization was done nicely as “Headphones” in “Audio/Video” > “Audio” (section). Here as user I could see how hierarchy works. One could argue that turning this left to have the more general on left would be better since we are more used to such notation from everyday lives and also applications like Windows Explorer which opens folder from more general towards more precise.

I had another wish for the headphones, to have detachable cable since in my experience the cable fails every few months. After inspecting into more details one promising headphone I noticed something interesting:

mimovrste2

The connector type is defined as “6.3mm stereo jack, with adapter included”. Here my question was adapter for what?

While this might seem like nitpicking it is actually quite important since some Sennheiser headphones (like HD 555 model) come with connector that will not fit into your iPod and you need a converter (which might be what is implicitly mentioned in that sentence). What would be helpful in this cases would be small link at the end of the row like “(confused?)” that would take you to a sub page with a few pictures of different connectors like the one in the iPod and such, explain the names so you would then feel confortable with your choice of headphones. This is online store after all where you can not turn the box around and see how it looks. (The argument about “Googling” is irrelevant here since you do not want your potential customers to wander away).

Since I was already noticing slips of the stores I decide to see if they could help me out with my little annoyance, that is the fact that I do not know how to spell “Sennheiser” or at least for me the usual spelling is “Senheisser” or just “Senheiser” with double letters. Since this is a big brand I would image they would know how to correct my spelling mistake:

enaa2

mimovrste3

There are two interesting facts to note. While it might be acceptable for EnaA not to suggest correct spelling, since they actually do not carry the brand – they found one match in one of their partner stores that had the actual product name misspelled! (Trying the luck with misspeling other brands also did not produce suggestions)

Mimovrste did a bit better with a large category list at the bottom, but also failed to correct my spelling. As a naive consumer that wants to buy a certain brad with hard to spell name, it should not be acceptable that I either have to guess the correct spelling or enter it into Google to get it to suggest me right spelling (even though this might produce also produce a list of more specialized online stores at the same time).

Lessons learned

Providing good search is not easy and should be treated as a separate usability review. In this case clear categorization and failure to suggest proper spelling produced breakage on my part while browsing which made me switch online store in hope that other one makes the process easier.

What interests me a bit more is that I actually failed to buy one pair of headphones since the description was not understandable to me and there was no clearly visible way how to get help on the connector part. This could be seen as part of the guidelines as “Speak users language” and “Provide help”.

Usability reflections: How to confuse users with 32-bit vs. 64-bit downloads

The Eclipse project, providing a powerful IDE editor, has a smart download page that detects what kind of platform you are on related to that suggests you download page. The only problem is that in the process they fail to clearly communicate download links.

Screenshot with important areas highlighted is as such:

eclipse

What happened here is they while they know that you probably want Linux Intel 64-bit they hide it under icon on left (red squares are mine). They also kindly provide Linux download on right, which actually takes you to 32-bit version.

In order for Eclipse project to make the download page nicer they should:

  • provide clear-text download links below the description text in following form:
    • Download Linux x86-64 (150Mb) (tar.gz)
    • Other Linux versions
  • the “other linux versions” page should tell you how to know which version you should download
  • remove the download link from the icon, it does not help to have arbitrary piece of graphic be a download link
  • optionally provide a big link somewhere with “confused? Get explanation here” for people who are not comfortable on linux yet.

If you want to look at this problem through traditional usability review perspective you could say it has problems with affordances (strange graphic for download link) and not presenting clearly knowledge in the world (you have to mouseover the link to see what you’ll get to download) together with clearly opposing download links.

Usability reflections: information overflow (vcrd.net)

At the Web 2.0 Expo in Berlin I was given a business card with a special code on it, that one enters into form field at vcrd.net and gets back that persons contacts in a vCard microformat. It is then possible to import this into virtually any Personal Information Management application.

Using their application I could reflect on a concept that too much information is just overwhelming. Here is a screenshot of their entry screen. It is a bit long and asks for a lot of information. While it does make sense to ask for it, I doubt a lot of users will have patience and stamina to fill it out in full.

vcrd.net form

My suggestion in this case would be to use some bit of Web 2.0 magic and involve the concept of shifting divs. Something like the homepage of Coda, where you have one big page but you can use tabs on top to move between them. Here a series of Next/Skip arrows could be presented on bottom with highly recommended graphic element that would allow to go back in time. Save should be done in the background via AJAX callback and also visually presented to user.

Interestingly enough, the site has one quirk. That is, the vCARD displayed in the top right corner of all the pages: X5JKZ8R1, upon entering shows just an error message:

safariscreensnapz012.png

I think it would be nice if upon entering this code, there would be a nice cookie for users efforts. Maybe the site creators personal card with friendly note attached or a special greeting. It would also allow for a random wanderer to test the site experience without actually having to have such a card.

Staying on the topic of retrieving the vCard, there is actually no landing page upon entering the code. You get redirected to actual file that gets downloaded to your computer or a special application tries to claim ownership of it. Having a page with a message that a card download is about to start and a link for manual download would improve the experience. If for some reason user missed the fact that something downloaded in background, there is still a page there with a nice message. It could be also used to suggest to that person to create a card of their own.

Conclusion

While playing with the site I tried not to focus on small things that are just implementation details and can be easily fixed but on the bigger obstacles in order to get larger adoption.

The site would get a big usability boost if it would make the form shorter and easier to enter with addition of more clear download instructions for actual vCard. I’m also wondering why the actual download codes have to be so complicate and why can’t I just have ‘jure.cuhalev’ for a code, but I guess this is part of a bigger site strategy.

Usability reflections: Power of consistency (ted.com)

Videos from TED are something of incredible nature. Each being about 20 minutes long, also perfect to watch while traveling, especially on the plane when 20 minutes is just about right before flight attendants starts serving something or turbulence happens. I’m usually doing this while multitasking on a number of other pre-trip issues, yet for some reason the process was frustrating me, so I decided to investigate why it was so hard to download a few files.

Sample of two of their pages look like this:

ted.png

Closer observation reveals the fact that the order of download links actually changes. On first page download to iTunes is the first option, while on second it is second. This minor change actually confused me quite a bit. Cognitive reasoning goes along the path:

  • On the first video page, find the download link
  • Initiate download process
  • Return to video menu and select another video
  • On second video page, move the cursor to the same spot as in first video menu (second option)
  • Right before clicking, realize on a subtle level that the option is not as expected
  • Breakdown

After the breakdown, user has to start reading the contents of the page once again, in order to figure out where the actual download link is. Even though this can be perceived as a minor breakage, it still breaks users flow. Since the flow is already broken the page itself can not mend it easily since when user opens the third page (not pictured), what are the chances for download link as the first option? What about fourth and fifth?

One also has to consider the consequences on clicking on a wrong link, in this case Video to iTunes (MP4). This option actually starts iTunes (if installed) and starts downloading automatically which is not something that user expects, adding greatly to the confusion and lots of click to undo the operation.

Lessons learned

Site in question could greatly optimize their page flow together with ability to easily download files, if the links would be distributed around the site in a consistent ordering.