Usablenet by name, unusable on Windows Phone

E-commerce usability has been written about for ages, so it might come as a surprise to some that Usablenet who claim to have the "best in class" mobile websites have numerous basic user experience failures.

I visited Sports Direct's website today with a simple goal of looking for a sports drink bottle. This should not be a complex task. On opening www.sportsdirect.com I was redirected to the mobile version, it had ignored my browsers desktop website preference and redirected the domain. Redirected domains are commonly the worst start in terms of user experience. Here are just a few of the common issues a mobile user will experience when they are redirected to the "m." domain:

  • Failure to take into account the exact entry link. e.g. A directly link to a specific article is selected form a Google search and instead of reaching the mobile version of the article the domain redirect goes straight to the home page.
  • The redirect creates a new set of http request slowing down the experience.
  • The content on the mobile and desktop sites are different, most commonly some "pages" do not have mobile versions available.
I was greeted with a classically bad carousel banner on the page, as I attempted to scroll down the page when the carousel timer kicked in the page was forced to scroll back to the top. This is hideous in terms of usability, I literally can only see the 3 carousel items everything else becomes inaccessible.

I looked at the side menu and none of the categories struck me as likely to contain a sports drink bottle. So I thought lets use that search magnifying glass. I clicked on it and it opened up a screen with nothing but a text box. I selected the text box to gain focus and in doing so was forced back to the main screen. Yes that is right the most useful feature on the website was broken.

I scrolled to the bottom of the page to see that it was made by Usablenet and I could supply feedback. As the carousel was forcing the page to scroll back to the top it took several attempts to actually manage a successful click on feedback.

On entering the Feedback page I reached a generic form which had the first field already filled out. This field was labelled "domain" and the value "www.sportsdirect.com" was in the text box. I filled out the remaining fields with my feedback and then submitted the form.

The form did not submit and the focus of the form was forced back to the first field. There was no error message and no indication that any of the fields were incorrect. I tried to submit again and received the same response of the focus jumping back to the first field. I click out of the first field and the text box outline went red. The label of the box was domain, it had been pre-filled with www.sportsdirect.com and there was no help text indicating the format that was required for domain.

After trying sportsdirect and sportsdirect.com I found out that the form would only submit with an http:// prefix. This is a pretty unforgivable double failure. The pre-population was incorrect and there was no error message assistance to help get round the issue.

I then decided to visit the Usablenet homepage, sadly this is not viewable at all on a Windows Phone, the page will not scroll and all you can really see is a chunk of their hero banner. Visiting the site on a Nexus 7 is not much better. Their site includes what I generally consider one of the worse pieces of code to put in a webpage "user-scalable=no". When looking at this site on my Nexus 7 I found the text a little small. This is normally easily remedied with a quick pinch zoom, but if you include "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" then this wonderful feature becomes disabled.

An additional unnecessary feature is the scroll back to the top on orientation change. If you were to have scrolled down to a specific section and then accidentally triggered an orientation change, well you have to find that part again. Additionally if you have switch to a different orientation to view a specific piece of content (an image perhaps) you then need to scroll back and find that image.

While I understand that Windows Phone is only 4% of the market, surely this should at least we worth a cursory test to confirm it works, especially for a company that claims to be industry leading. Additionally the sites appear to provide a weak user experience even on the most common mobile platform.

Comments

Post a Comment

Popular posts from this blog

IE9 Intranet compatibility mode in Intranet websites

So you have written an HTML5 site on your local intranet with some lovely CCS3 and run it up in Firefox and you feel smug, all your HTML and CSS are perfectly formed, but you run it up in IE9 and all the CSS3 goodness has gone away leaving your lack luster IE7 version of your site.   Why is IE9 running in IE7 compatibility mode? IE9 has a hidden setting that forces it to run in compatibility mode when it encounters any intranet websites. Microsoft have detailed this behaviour in a Blog about what they call Smart compatibility mode . You can easily switch off the compatibility mode for specific machines using the internet tools mentioned in the article above, but most of the time developers do not have the luxury of applying corporate wide settings of this nature. Avoiding Smart compatibility with X-UA-Compatible Luckily there is a single line of HTML you can that you can use to override this behaviour: <meta http-equiv="X-UA-Compatible" content="IE=edge,c
Read more

User Interface Usability Checklist Part 2

So you made it through part 1 of the usability check list, how about part 2? 21. Poor Label Alignment If you have been through design 101 you have probably heard of the wonderful acronym for the basic principles of design, C.R.A.P. This of course stands for Contrast, Repetition, Alignment and Proximity. Proximity is very important when identifying which label belongs to which input. Each different form of alignment has its advantages and disadvantages. Left Alignment The label appearing on the left of a box is a common practice. This often helps with vertical space and keeping all of the elements of a form on a single page, which can be beneficial in aiding the user in form completion and making them aware of all of the possible options they can, or made need to provide information for. It does however have a few disadvantages. Long labels cause short label's input boxes to be far away from the end of the label, this damages that basic principle of proximity. In extreme
Read more

Procedural VS Object Oriented

What is the correct way to write code? If you have worked with PHP long enough you may well have come across the website  PHP The Right Way . This website is dedicated to helping developers learn the industry best practices. Interestingly another site appeared afterwards called  PHP The Wrong Way . In essence this website is a rebuttal to the many of the recommendations made in PHP The Right Way. With any sphere of learning it is important to keep an open mind, to listen and critically evaluate the received wisdom and determine if it is indeed wisdom or opinion built on shaky ground. There is one part of the argument I would like to focus on and this is the argument for and against " Always use object-oriented Programming ". While PHP The Right Way does not appear to explicitly state that you should always use an object oriented approach it is implicit from the examples and the recommendations to use design patterns. While there are programming approaches available othe
Read more