Don’t move the page when displaying a message after a form submission

When submitting the form at this DNNSofware user login page with wrong credentials, the return page jumps suddenly from its current position. It’s an unnecessary jarring visual effect. For best usability effect, display a result message while keeping the page in its current position regardless of where the viewport is in relation to the page’s length. This way the user’s eye direction stays on the form in the same position without distraction.

separator

If the main purpose of a web page is the submission of a form, all or part of the form should be above the fold

This DNNSoftware user registration page has the whole form below the fold. At a glance, a user can’t discern if this page has a form. There’s too much unnecessary white space. The font size of the title “Create a DNN Site Account” is too big. The image is too big. These elements could be smaller and part of the form would rise to be visible in the page.

separator

Usability tip: Don’t use pdf file as the only method for displaying a restaurant menu

I have noticed some restaurants use links to pdf files as their only means for showing their food menu. The other day I went to a restaurant for brunch and the wait was over an hour. I decided that was too long a wait so I pulled out my phone looking for another nearby restaurant. I found one but I couldn’t view the menu on their website. The menu was an image link to a pdf file. I clicked on the link and nothing happened. I clicked a few times. Then I noticed several download icons on the notification bar. The phone was downloading the same pdf file in multiple instances! I cancelled all but one download. When the download finished and the pdf file opened in a pdf reader, I saw mostly garbled text. Duh.. what a frustrating experience. I decided not to go to that restaurant. Their loss.

 

However this didn’t end at this point. Later from home I emailed the restaurant and told them about my unfriendly mobile experience with their site. Their response was that the restaurant had several locations and the menu changes every week and differently for each location. So placing pdf files was the easiest solution and it was too much work to update the site.

 

Personally I find this a weak reason. The menu didn’t have any graphics so whatever tool they used to create the pdf I am sure it had an option to export to a single formatted HTML file which could as easily be placed in the site. Just name the file the same original name. Word, Illustrator, Publisher or whatever tool was used surely has an export or Save As option to a single HTML file.

 

Make your site mobile friendly if it has a high chance for being used from a mobile device and your business gets significant customers on the go.

separator

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

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.

amazon1


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

sears

 

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.

moosejaw3

separator

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

textbox_width

 

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.

separator

B-Kam.com – Lots of Usability Issues

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.

    bkam1
    More...
separator

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

thermos

 

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.

separator

Make sure your 'Click Here' is actually clickable

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.

phillips

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.

 

phillips2

No info on how to save $5.

separator

Place the search box at the top of the web page

 

searchbox

 

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.

separator

I Upgraded my blog's theme and software

 

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...
separator