Posts Tagged ‘design’

Why is it so easy to find web forms that just don’t work well? Particularly when it comes to what should be simple workflows users are used completing over and over again. There really is no excuse. Here is another example of a simple form gone wrong…

I am submitting a request so the first thing I am being asked for is my contact information:

Contact Form

Scanning the form quickly I see date is already filled in and I am asked to leave it in the field. The rest of the fields are expected information to be asked, and I know this stuff like the back of my hand, so fine with me. Following the instructions, I skip over the date field; enter the rest of the required fields, then hit Submit:

Form with Error Popup

Okie dokie… Why the heck am I getting an error on the one field I was explicitly asked not to edit? Of course, I can no longer see that field since the pop is hiding it, so I am unable to immediately figure why. I decide to move the pop-up window out of the way so I can see what went wrong here:

Error in pre-filled field

Nice! The one field I was not responsible for entering already has an error! The year says 110! So, even though I completed all my data entry correctly, I hit a roadblock. If they wanted me to leave the field untouched, the least they could have done was make sure the pre-entered data was correct!

My Recommendation:

Since they obviously do not want the date changed from today’s date, there is no reason to have the date be a data entry field at all. When a user accesses this screen, the date of request could simply appear (correctly) as uneditable data on the screen. Or better yet, why show it all? Do I need to be reminded that the date of my request is today? I think I know that. If the underlying workflow needs this information it can be added outside of the user’s interaction.

A simple step that could have been removed is instead going to lead to an error for each and every user who doesn’t realize they need to correct the field they were asked to leave alone.


Read Full Post »

I happened to be checking out a listing of healthcare application vendors and found the use of tooltips to be kind of backwards – Here’s what I mean:

Table with tooltips for each cell

Each and every cell in the table shows me a tooltip that is an exact copy of the data in the cell itself.

I then started checking out the rest of the table and I discovered a place where tooltips probably would have been helpful:

Table with sort function within column header but no tooltip

Table with sorted column after clicking header

I am given absolutely no indication that an action can be done by clicking the column headers. Turns out the columns are sortable if I click on the headers.

I looked at the page a little closer and at the top of the screen I found this:

“You can view the interactive list presented at the top in which you can click the column headings to sort by column”

They did try to let users know that the sorting capability is included in the table structure (although the wording also has me bewildered). Unfortunately for them, it has been shown that folks often do not take the time to read the extraneous content when the key information is directly in front of them…

My Recommendation:

Tooltips should provide additional, useful context around the item being hovered over (i.e. displaying print when hovering over a printer icon or spelling out a term when an acronym is used within content) rather than just repeating the same information already being displayed to the user.

It would be more appropriate to refrain from using the tooltips for each individual cell in the table and rather put it to use when a user hovers over the column headers to let them know there is functionality built within them (i.e. Sort by Location).

Read Full Post »

One of the questions I ask myself over and over again when I am surfing the web and I come across a UI design or interaction that seems out of whack is “Did they bother to test this with any users?” – My gut tells me no. And quite often in my day job, when I approach teams about the possibility of doing some usability testing on a proposed design, I get pushback like ‘we can’t add more time to our already tight schedule’ or ‘we don’t have resources to build a prototype to do that.” Considering the value that can come from usability testing, I am amazed at how bad a wrap it has gotten, so I’d like to share a couple of quick, easy and cheap ways I have done usability testing with great results – who knows, maybe some sites I’ve highlighted on this blog will take note and try a few of them out! 🙂

Quick and cheap method #1 – Survey

When working on a UI redesign some time ago, we had a couple different directions we could go in and what we thought were good reasons for picking either one over the other. Rather than relying on an arm wrestling match to decide the winner (and always wondering if the other might really have been better), I decided to take some quick screen shots illustrating the various components of each design and created a survey.

I used Survey Monkey (http://www.surveymonkey.com/) which offers a free version as well as more robust paid offerings. I simply uploaded the screen shots and created simple A/B comparison questions. This took me a couple of hours to complete. Once it was done I sent the survey link out, via email, to both some internal folks and some of our target users. Authoring the email and sending it off once again took me a couple of hours. I left the survey active for about 3 days and got participation from approximately 22 people.

During the hour it took for me to analyze the results, it was obvious they were overwhelmingly for one design over the other. Within 4 days, precious little of my own time and almost no money, I was given the unwavering confidence to move forward with a design that I knew would more likely meet my users’ needs.

Quick and cheap method #2 – Office Proxy

I love this method because it offers immediate gratification! Yes, my company is a software development organization with a lot of technologically superior folks 🙂 but that doesn’t mean that everyone who works there is a techie or even necessarily web savvy. I have a few folks whom I greatly admire because they pretty accurately reflect our user demographic and mental models. These are folks I can go to with what I think seems like a pretty simple interaction, but as soon as I see the look on their face, I know I might have gotten something wrong. Or even better, I jump for joy when I confirm that I got it right!

I’ve shown these folks hand drawn task flows and paper prototypes as well as having invited them over to my desk for a preview of a high fidelity simulation or a walkthrough in a test environment (it’s never too early or too late to usability test). And for a few minutes (and maybe the price of a coffee from Starbucks) I can gain some insight in whether things are on the right track or we might want to consider other possibilities. The same idea could be put in place with friends and family.

Quick and cheap method #3 – Web Conferencing

Online meetings have made a big difference in the corporate world – no more plane trips to cram everyone in a conference room for an hour meeting before they have to head off to the airport again. The same could also hold true for Usability Testing – take away the time and expense of travelling to your users, but still be able to talk with and have them complete a workflow within their natural environment via web conferencing.

There are a bunch of free online conferencing products out there and several others that offer free 30 trial periods. You want to look for one that will allow you to give control of your computer to someone else attending the meeting.

With the web conferencing set up, it’s quite simple – Send out an invite to a user to attend your web conference. I usually do this by email, introducing them to what we are hoping to test and giving them a choice of times to participate (I’ll send out a bunch of emails scheduling times over a 2 or 3 day period). Once the time comes for a session with a user I typically remind them of the concepts I am hoping to test, then I quickly and easily give them access to my computer so that they can work their way through the scenarios I am interested in. I have done this type of testing with both prototypes and applications that are in the testing phase within a test environment. Once the testing is complete, I simply take control back and thank them for their time. You can even set up a video camera aimed on your computer to record the entire session allowing for additional review later on (or even better to share with your stakeholders).

This method does require more time to schedule, create your testing scenarios and actually perform the test, but it benefits are worthwhile, as you are able to directly converse with your users working through the application in their own environments without having to leave your office. And you can gather some great data to share with your team in a typically shorter time frame than it would have taken to travel to your users for the same information.

I hope you find something worth considering in the above options for usability testing on the cheap. There is a goldmine of insight you can gather from your users and it is there for the taking…And believe it or not, it doesn’t take a fortune – or a month – to enable them to share it with you! Now go out there and do some testing!

Read Full Post »

Entry hints in web forms and text entry fields are handy little things. They give a user more context about what they might want to enter in a text field. For example, if I was filling out a registration form where I need to enter my date of birth, an entry hint of mm/dd/yyyy gives me the valid format I should enter it in. In giving me this simple hint, I have been saved from wasting my valuable time trying to guess what the appropriate format might be. I like not having my time wasted. 🙂

So how could one go wrong using entry hints? Let’s take look…
Search field and button with search for blog entry hint

I am browsing a particular site’s blog directory and notice the Search capability. It’s even telling me (with an entry hint) that this search is specifically for finding registered blogs. Great! I want to know if my blog is registered, so I’ll simply type in ‘LiveUX’, hit search, and see if my blog shows up in the search results…
No results found message

Huh? All I typed in was LiveUX! How did I get this mishmash of words in my search? Well, it turns out that maybe this entry hint wasn’t as helpful as it could have been. When I retrace my steps, here is what I discover:
Entry hint remains in field on focus

When I put focus on the field (by clicking within it) to begin typing my search criteria, the entry hint does not disappear.
It is up to me as the user to clear out all of the entry hint text before I am able to enter my search criteria. So much for not having my time wasted…

My Recommendation:

Entry hints area great tool that can make a site more user friendly when it comes to completing forms. However, when incorporating an entry hint, it needs to be done correctly. When a user puts focus on the field, the entry hint should disappear, making way for the true data to be entered.

Read Full Post »

Each of these snippets was taken from a single screen for a particular Cruise website – there was a lot going on!

Screen with multiple 'go' links

But, what really caught my eye was:

  • Each of the blue text titles is a link
  • Yet each blurb also contains a separate ‘Go’ link at the end/bottom
  • And both go to the same place!
  • And this is only a small sampling of the times this occurs on the page

I got to the point where I was so focused on all the ‘Go’ links that I didn’t even notice the actual information they were trying to promote.

This is what I call overkill. 🙂

My Recommendation:

The Go link, while trying to give users extra affordance, actually makes it more difficult. As a user, I am being driven to these links; however, they are a smaller target area than the larger and longer title links, which means it will take more effort for me to ensure I am clicking on this smaller area.

There is really no need for both the title links and the Go links. The title links already include the browser hover effect, giving the user another clue that the text is actually a link, and I find that I cross over many of the title links on my way to click to Go link.

If the designer was concerned that users may not realize the titles were truly links, they would have been better served to simply include the ‘>’ (or similar) symbol at the end of each title link.

It’s easy to layer on more and more features/indicators just in case your users may not realize how something works on your site, but it’s generally not the right thing to do. You’d be better served trying to understand what the issue is and fix that rather than layering on more ‘stuff’ that might, in the end, make the user have to think/work harder.

P.S. I could also go on a diatribe similar to my ‘An Ode to Click here’ post, since these Go links cause the same context concern, but I’ll refrain. 🙂 If you haven’t read it, check it out.

Read Full Post »

I love to shop online. It makes my life much easier. But I hate paying shipping charges. Amazon Prime is my best friend! There are times however, that I can’t get what I want from Amazon, as unbelievable as that may sound. 🙂

So I was shopping on another site and after selecting my purchases I was ready to check out. Ever the bargain shopper, I thought I might be able to save myself some money by choosing the In-store pickup option, but I wasn’t sure if this particular store had any locations in my area. Oh look – how nice of them to include a handy dandy link right below the In-store Pick up option so I can check it out.

I click the link and up pops a secondary window. But I only get to a portion of the United States, which unfortunately is not near where I live. I guess I need to expand the window to see my corner of the world.

So I do just that, and what do I see?
Expanded dialog box

In-store pick up is available in all US Stores…Did they really need to make me do all the work to find that out?

And I still don’t know out if there’s a store within driving distance for me. At first I assumed that little stars could be selected to see actual store addresses, but over hovering over a few I was disappointed. Nothing in this window is useful to me. So I close it to see if there is a link to store locations on the previous page.

No such luck here either. In fact, to see a list of stores, I have to leave the check out process completely by selecting Retail Stores from the main navigation bar:

Find a Store menu item

And look:

Find a Location screen

What do you know? I’m brought to another map! And this one actually does what I wanted in the first place! I can click on any circle and get the location info or simply enter my zip code and it will tell me the closest stores.

Unfortunately, at this point it’s too little, too late. I’ve given up too much of my valuable time trying to figure this all out. I no longer have any desire to restart the checkout process nor to purchase from a retailer who doesn’t seem to care about helping me become a customer.

What went wrong here? Let’s review…

  • I was presented a secondary pop up window that was not sized appropriately for the information being displayed.
  • It was up to me to expand a window that was too small only to discover that the information being presented wasn’t really helpful to me.
  • In order to get the information I needed I had to leave the workflow I was in.

My Recommendation:
Under the In-store Pick Up option I would suggest:

  • A simple note stating ‘In-store pickup is available at all US stores.’
  • Include a link to ‘Find a Store near you’
  • The link would open a secondary window that is sized appropriately for the information being displayed.
  • The workflow contained in the secondary window would be the same as that available from the main navigation bar, yet in this scenario, I am able to find the needed detail, close the window and return to the checkout process with my previously completed information retained.
  • An added plus would be if once I was in this workflow, the site allowed me to select the store location I’m interested in and have it saved so I don’t have to enter it again/go through this process again later on in the check out process.

Read Full Post »