Web usability tip: Properly showing out of stock styles/sizes for an in stock item in a shopping site

Posted by admin in Web Usability

The other day I was shopping online for a specific type of a sweatshirt. I typically do not buy clothes or shoes online. I have to see them, feel them and try them on. I am pretty particular of what I wear. Most importantly, the item has to be comfortable. I can’t determine this by shopping online.

The sweatshirt I wanted is a microfleece, full zip, with zipped side pockets. I couldn’t find one in local stores so I went online. I like microfleece because it’s warm but not too warm like a regular fleece and it’s thinner which is more comfortable to wear. It’s full zip because if I am cold, the full zip is on and if I feel too warm, I can unzip it to let more air in. I need side pockets because I prefer to put my stuff (cell phone, MP3 player and earphone, car keys.. etc.)  in them instead of in my pants pockets which I prefer to have them empty. The pockets have a zipper so nothing falls off when I take the sweatshirt off and on. I find the whole set up pretty handy, accessible and comfortable.

Anyway, let’s get into the purpose of this post. I came across some shopping sites which have issues in their way of displaying an item which is in stock but have certain colors/styles/sizes which are not. My favorite ecommerce site, Amazon.com, wasn’t clear about the availability of different sizes. For an item of interest, all I saw was a single size, small. I wasn’t sure if the item is offered in that size only, or if the other sizes are out of stock and that’s why they don’t show up. Should I check again later? I would have preferred if they displayed all the sizes and for the ones which are out of stock, they could have displayed some kind of notification. Example shown below.

Sears.com has the same issue. Only one size showing and no additional information about other size availability.

In my search among ecommerce sites, I came across a site which, in my opinion, did it correctly. All the information is presented upfront. No guessing or ambiguous information. If shipping will be late or a size is out of stock, this information is presented in the style/size/color selection dialog. Very well done. One of the main tenants of good web usability is presenting all necessary information clearly.

Make text boxes wide enough so user doesn't have to use arrow keys to view

Posted by Abdu in Web Usability

The above picture is a form with two text boxes. The email one should be longer to accommodate longer email addresses. This form had nothing to its right side, just empty space. There was no reason to not give it some extra width so that most email addresses can be shown fully.

B-Kam.com – Lots of Usability Issues

Posted by Abdu in Web Usability

I learned about B_Kam.com, an Egyptian comparison shopping site, through an article on ArabCrunch. I decided to check it out. I wasn’t surprised to find many usability issues with the site.

If you are building a website, you should avoid these common mistakes:

• Forcing iPad users to go to the mobile site version. I used an iPad to go to the site and the first thing I saw was a settings page which was developed using jQuery Mobile, a UI Framework for mobile devices. There was no option to use the full site version. When I chose English and hit ‘Save’, the page didn’t redirect. Treat iPad users as non mobile users. The iPad is not a mobile phone device or treated like one. It has a much larger screen. Many small netbooks have similar sized screens and no site treats them with mobile versions. A users should always be able to switch between the full (desktop) and mobile versions at will. Most smart phones have full browsers HTML5 capable browsers. The fact that a mobile version can have severe limitations where many functionalities are not present does not help.
  
  
• Grammar and spelling mistakes. This shows poor quality and unprofessional look. You should have a QA person or a reviewer who checks every page and functionality and test as many edge cases as possible. The text in this dialog box has 3 issues.
  
  
  More...

Leave the keyword in the search textbox after displaying the search result

Posted by Abdu in Web Usability

I prefer to leave the search keyword in the textbox after displaying the search results. I would have it highlighted with focus. This way it serves it could serve the whole audience. For the user who wants to enter a new word, they can start typing and the old word is deleted. For the user who mistyped a long word, they can fix the mistyping instead of retyping the word.

Make sure your 'Click Here' is actually clickable

Posted by Abdu in Web Usability

This is a simple common sense tip but once a while I find a text "Click Here" on some web page and I try to click everywhere in the vicinity of that text and there's nothing clickable. I guess the web designer/developer forgot to add the link!

Here's an example from http://phillipsrelief.com/contact-phillips. Bayer , the maker of Phillips, is a global Fortune 200 company.

Nothing is clickable inside this box. I even examined the html behind this box. There are no hyperlinks.

A side note: another issue I found in the home page. A product has a tag promoting a $5 saving. Clicking on the product image brings up a page with more information about the product but nothing about how to save $5. Maybe it's in a sub page beyond the page but am I expected to check every page? I expect a more useful site from a respected global company.

No info on how to save $5.

Place the search box at the top of the web page

Posted by Abdu in Web Usability

It's customary to place heavily used links such as the navigation bar somewhere where they are highly accessible. Usually that would be towards the top of the page. The search box is one of most useful functions in a web site, specially when the site has a lot of content and does not have very accurate or usable navigation links.

The informal standard is to place it at the top right section of the home page and preferably in every web page.

I have seen some search boxes sandwiched in somewhere among another links in the right bar or in the footer of the web page, such as the one shown in the top image.

If the user can't see the search box above the fold in clear view, they will assume the site doesn't have a search function and not look for it. Imagine if Amazon had its search bar below the fold or in the footer.

Being different at the expense of usability is not a good idea.

I Upgraded my blog's theme and software

Posted by Abdu in ASP.NET | Web Usability

I upgraded the blog's software to the latest version of BlogEngine, v2.5. I took the chance and did a makeover using another template. I tweaked a WordPress theme to work under BlogEngine. This required updates to the HTML, CSS, JavaScript and the server .NET code. I liked the old theme, shown below but I decided to use a theme which is more quaint and mellow. This time one of the requirements was to use a white background for the posts. It's easier to display images with that background.

BlogEngine's theming framework could have been more flexible if it didn't create dynamic HTML which had no css styles. I would suggest to the developers who maintain BlogEngine to add some empty classes in the code which creates HTML. This way non developers can add the classes declarations in the css files.

The new features added to the blog are:

• Use Disqus as the comment platform. The older blog used the internal comment system. I noticed a lot of comment spam displaying in the blog even though I was using Akisment & a captcha. The spam was from the same ip address so this was a determined spammer. I am not More...

Don’t use Twitter as a conduit for offering support

Posted by Abdu in Web Usability | Usability

Today I was trying some software and I was having issues with it and needed support from the developer(s). I went to their site and noticed they offer support through UserVoice and Twitter only. I have already stated why I hate UserVoice.

Here are my reasons why using Twitter for offering support is a bad idea:

• You're forcing users to open a Twitter account. Not everyone is interested in Twitter. Another username and password to remember. Who needs more?
• Twitter has a limit of 140 characters. How does one send an image like a screen capture or copy some text which is long or just write a meaningful message which can't be expressed in less than 140 characters. A workaround is hosting an image somewhere and providing its url. Too Awkward.
• Twitter messages have no formatting or structure. No lists, no styling, no indentations, nothing. It's just a plain long text.
• No privacy. The people I wanted to contact today want people to use a certain hash tag.  (I am not mentioning who they are)
• Very cumbersome to save a thread or conversation
• How to keep the prior messages in the same thread like emails?
• It just doesn't work

What's wrong with the plain ole email or contact forms? Did they read a "Email is dead" article and believe it? If they are worried about spam, they are ways to mitigate this. Use contact forms with a file field for attachments.

Your blog post should not be more than 3 pages long

Posted by Abdu in Web Usability

As a reader who goes through a fire hose of content each day from emails, blog posts (at least 150 a day), tweets, news articles, messages & technical documentation, I have to scan and read pieces of interest pretty fast. So when I hit a blog post which is pages and pages of text, it’s a big turn off for me. Most of the stuff I read is of good-to-know type of information, which means I can safely skip it. I know I will come across similar information in the future. if I don’t bookmark or put it in my Evernote app, I know the content wasn’t that beneficial or important. I noticed very long posts are written by people who write infrequently. They write like once a month. It seems they take time to think and craft a new long blog post thinking the longer it is, the more people would be interested in it. That’s not the case. People’s attention span is getting smaller over time. Reading books one day might be a luxury.

However people have limited time and on the web they usually scan pages, instead of reading all of the content, looking for the crucial pieces of information. They don’t want to get intake fatigue.

For most of the long posts, I conclude and tell myself “The author could have conveyed this information in a lot fewer words. Are they getting paid by the word!?”.  I define long posts as posts which take more than 3 screen pages. When I see a long post I get discouraged in reading it as a whole. I usually read the first two paragraphs to know more about the topic. Then I read the last two. That’s where the conclusion is and hopefully it’s a summary of the detail which is in the middle of the post. I like executive summaries.

The long post authors ought to know that most readers are reading other people’s posts as well in the same time frame. They should not assume their post is getting all of the visitor’s attention. Personally the only time I read a whole long post is when the post is really beneficial or interesting, which is rare.

You might have noticed that all my blog posts are pretty short. Just about two pages. That’s for two reasons. I don’t want to waste your time and I don’t want to spend too much time myself crafting a long post. I want to say something and I want to say it quickly.

So your keep blog posts easily digestible. No more than 3 pages long. That’s a personal opinion.

Open a map at the correct zoom level in your mobile app

Posted by Abdu in Web Usability

This advice applies to non mobile apps too but I will concentrate on mobile apps in this post. Yesterday I was checking out a few location based apps on a Windows Phone 7 (WP7) phone which deal with restaurants. I was at a bookstore and I wanted to know which restaurants were near by. After checking out these apps, I noticed they suffered from their implementation of using maps, like Bing maps and Google maps. When a map first shows up for a location, it starts at a zoom level which is not useful. The map view is from a very high elevation which necessitates many levels of zooming in. For example, a restaurant is 0.47 miles from my location but the map shows my whole city, near-by cities and near-by state. How is this information anywhere useful? I saw two dots very close to each other. I know where my city is located among other cities! At the moment, I need to know which direction I should go by looking at a close-up of my location where I can see the name of the street where I am at and the name of the street of my destination and that’s without doing any work. That’s how a map is useful to me. It should be smart enough to adjust itself and center my area of interest in the map.

It would have taken me at least 5 minutes to zoom in to the right level and center the location with my mobile connection, if I am patient enough to wait for each zoom to finish downloading. The map on my phone actually became unresponsive and I wasn’t sure if the map was busy downloading map data or it shocked up from the amount od data. I gave up.

Now, I am not sure if this is a limitation of the map providers or if a developer has little control on map rendering. I am assuming there are using a map control which does all the work. But whoever is responsible, a map should automatically adjust zoom level based on the distance of the two points where outside areas should be removed and zooming should be as close as possible to the points. At least have this as an option provided by the map provider. It is already painful to navigate using a map on a mobile device. The experience needs to be very smooth.