Bad User Interfaces through popups


One of my tasks right now is redesigning a web UI created by a vendor of ours. It is a bad UI for a couple of reasons. First, it is not consistent in the placement of menus. Second, the menu items are not named consistently. Third, the work is not broken out appropriately.

It is a time consuming process, as many of the UI bits are hard coded in the code behind. But me ranting about this project is not what this post is about, although it is an inspiration. I want to focus, instead, on the idea that pretty makes a UI good.

Case Study: www.fostersbeer.com

I recently bought an oil can at the supermarket. I was thinking "it would be nice to have a beer" and the only way to buy just one at our local supes is to buy either Fosters or Heineken. Heineken comes in a smaller can and costs about 50 cents more and not 50 cents tastier, IMO. In addition, there is a contest on the Fosters can where I can win. Yeah, I know, stupid consumerism. 😛

Here is the chain of events necessary to sign up for the contest (a mini usage scenario):

1. User surfs to www.fostersbeer.com. Here is the opening page

FostersOpening

Nice color scheme, etc. And there is a box with MM/DD/YY and an enter key.

2. User has to turn off popups for the site www.fostersbeer.com.

3. User gets popup with Flash site. So far, this is not too bad. This site has lots of Fosters information, if you are so inclined. There is also a button to enter the contest. It does open in full screen and disables the button to resize, however. I do wonder, however, why this has to be a popup.

FostersSite

4. User clicks Enter now button

5. Another site pops (http://66.98.242.107/fosters/) up with YET another enter your birthdate screen. This one is in the format MM/DD/YYYY.

FostersContestOpening

I understand that this is probably a site controlled by someone else, so I can understand this popup more than the previous one. NOTE: Confirmed it is another site, as www.fostersbeer.com resolves to 69.20.109.94.

6. User enters birthdate, in a different format than before (have to type the 19) and clicks enter.

7. User has to disable popups for http://66.98.242.107.

8. Screen pops up with the contest information.

Contest

9. User clicks on enter link (second link on top of page).

10. User enters code off beer can, as well as his state.

EnterCode

Side note: On the can, the code is B93 8079C. It asks me for a four digit code, so I now assume this is not the code (I ended up entering 8079 and it took it). The can states "TX & WV RESIDENTS ONLY MAY USE "FOS1" ENTRY CODE. Ah, so the can UI is just as bad as the site?

11. User enters personal information to enter the contest. NOTE that I have to enter my state AGAIN.

Form

12. User clicks submit.

That ends it. Now, you need have the option to return to Foster’s beer site, which pops up the original site. Here is my program launch bar:

VistaBar 

To be fair to Foster’s, everything is very pretty, but do you really have to use pop ups and ask the same questions over and over again? How are you ever going to get to web 2.0 when you can’t even conquer web 1.0? LOL

Peace and Grace,
Greg

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: