Lecture 14:
Examples of Good and Bad
User Interfaces
Brad Myers
05-863 / 08-763 / 46-863: Introduction to
Human Computer Interaction for
Technology Executives
Fall, 2009, Mini 2
1
Soo-Yung Cho: Jetblue Web Site
2
Soo-Yung Cho: Bad UI –
Different ways of selecting ‘Korea’

I have to look for all three options when using web
sites (bad consistency)
‘South Korea’
‘Korea (South)’
‘Republic of Korea’
3
Anoop Sunke: Inconsistent door handles

I came across a
similar set of doors
back home in India.
The first door would
open if you ‘PULL’ it,
and the second one
would open if you
‘PUSH’. Now that’s
confusing . Putting up
“labels” on the door
handles might have
helped!!
4
Anthony Capozzoli – Gates Bldg
5
Me: Gates stairway signs

What floor are you on?
6
Hsin-Yin Chou: Good interfaces

Gmail



The idea of tag is really awesome and users can
customize these tags.
Each tag is one of folders of my email, and I also can
choose which folders to show and which to hide.
Google Calendar


This is the most useful to-do management application
that I ever used.
It is easy to create events, tasks, and manage them. I
also can create different calendars for distinct different
kinds of events, like a school event or a personal event.
7
Hsin-Yin Chou: Bad = Oracle DB

Oracle Database 10g

The error messages are always so confusing and
do not point out where the error is, also probably
leads the
user in the
wrong
direction.
8
Abhijit Telang - gmail mobile

Reply all is at top, but Reply is only at bottom


(How to take a screen shot on an iPhone!)
(How to move pictures to a PC from an iPhone!)
9
Kartik Bhatia – bad website

Bajaj Auto: http://www.bajajauto.com/probiking/index.html


The problem is that the function of the single letters in the screen which
actually represent menus is not very clear. It is suppose to expand when
the cursor hovers over it. However along with the expansion of the menu,
the hovering text of the link is also active. As a result the user can’t read
the Menu item
properly.
[also, partial
URLs don’t
work:
try leaving off
www or
index.html]
10
Nishanth Babu Babu Achuthan

http://www.startbreakingfree.com/871/a-good-example-of-bad-user-interface-design/

http://www.moneycontrol.com/loans/houseloans/calcemi.php




Instead of using a simple text box to get the inputs like Interest Rate, Tenure, EMI
this popular web site uses slide control to show the relative variations.
The Interest rate slide bar represents the more than 8 decimal precisions in the
beginning.
Varying the EMI using the slide bar appears to be such a cumbersome task.
Post by “greghoin”: DieBold
Crappy ATM Interface
http://www.flickr.com/photos/gregone/3349567067/
11
Min-Cheng Huang – bad = Sony clie peg ux50

“It is an old device, but I think the interface is not good. I
think the keyboard design is really weird. It makes no
sense to design using the wave shape. Also, it tries to
combine too many functions. This makes it not so friendly
for novices.”
12
Jing Li – TartanTrak (bad)




TartanTrak.(http://www.studentaffairs.cmu.edu/career/tartantrak/index.html)
See the TartanTrak.wmv
The structure of TartanTrak. There is a label called jobs,
you click it, and there will be a list of jobs. You click each
one, you will get the specific job position page.
Several breakdowns in the video:



First, when you go to the website and click jobs, it will bring you to a specific
job position page. This is one that you visited recently.
Then, when you go to the job list, you click one to enter. When you click the
jobs label, you will not get the list of jobs.
Sometimes, you cannot use backward in the job position page. You have to
use the small "Back" button.
13
Jing Li – Google Chrome (good)


When I open a new tab, all the frequent pages I visit will
appear. Also the visiting history.
Also in iGoogle, I can customize the portal and drag all the
small boxes.
14
Good & Bad Design Examples
Human Computer Interaction
Sunil Joseph
Good Design - Joystick
• I have been using this joystick for 2 years now and it
has been useful as it gives me 14 controls on the device
(10 on top and 4 facing the front).
• 2 small buttons on the top are auxiliary used for exit
and continue in games, but can be programmed to do
different functions , but it’s better un-programmed as it
is not accessible easily!
• The circular wheel can be controlled using the left
thumb.
• The 4 buttons on the right thumb.
• The 4 buttons at the back on either side can be
controlled using first two fingers of each hand.
Sunil Joseph
Top View of the Joystick
Sunil Joseph
Front View of the Joystick
Sunil Joseph
Good Design - Photo Frame
• My cousin gifted this photo frame on my
birthday and I feel it’s innovative it’s own
right.
• The stand at the back appears slanted at an
angle of 45 degrees with a reason.
• The design of the stand allows the photo
frame to be used vertically as well as
horizontally.
Sunil Joseph
Orthogonal View of the Stand
Sunil Joseph
Frame positioned Vertically
Sunil Joseph
Frame positioned Horizontally
Sunil Joseph
Bad Design – Sales Enquiry Screen
• The company provides option for a state in case of
some countries , when the selection is not actually a
state!
• The company focuses on certain countries like UK ,
where it has a larger client base and provides options
in state.
• It does not provide options for state in United States of
America , which could be a potential client and which
has states.
• Most interestingly , it shows option for states and
provinces in a country like Sri Lanka , which has the
least probability of procuring sales.
Sunil Joseph
Option for states when country is UK
Sunil Joseph
No option for state when country is
USA
Sunil Joseph
Displays provinces for non-prospective
(sales) nations
Sunil Joseph
Suehiro Nakajima – Uniqlo website (good)





http://www.uniqlo.com/utloop/
The site is created by Japanese apparel company Uniqlo
for marketing its new T-Shirt brand called UT.
Visitors can listen to music created by mixing many
people’s voices and evaluate the music. Also, the visitor
can create his/her own music and submit it to the site.
The site is fun and seems to achieve its objective to sell
the new brand image to the visitors.
It emphasizes and offers easy access to the important
features including creating the music and access to the
company's main site. It is not complicated, not overformatted, and uses simple graphics.
27
Divya Gupta – bad error msg

This is a software for Data Mining I used for one of my classes in this
semester. The error shown in the image pops when you try to open a
csv file in the application which is one of the recognizable formats. The
error is due to the existing spaces in the csv files in the header block. It
took me sometime to figure it and rectify. I found this to be a very
interesting
error.
28
Manolis Kounelakis - various

Good (or at least i think they are good):








Gmail.com
Google Chrome
ffffound.com (press J for next image, K for previous)
thesixtyone.com
Google Analytics
Posterous
Flickr
Bad



Craigslist (no comment..)
www.Bloomberg.com (terrible colors)
http://www.huffingtonpost.com/ (information overload)
29
Kumaresh Pandian –
bad iPhone keyboard

The iPhone KEYBOARD USED TO TYPE
MESSAGE. The keys are too small making it
hard to type with both the thumb and hands
simultaneously.
30
Andrea Irwin (TA)

First, something most people would be familiar
with - a comparison between Facebook and
MySpace. Facebook controls more of the
user's ability to customize and that has proven
to be a winning strategy for them.

bad (http://www.aa.com) vs. http://www.united.com/

Especially for checking the status of a flight
31
Zhiquan (ZQ) Yeo

Good:



www.Mint.com
www.Boxesandarrows.com
See also:
http://www.outlawdesignblog.com/2009/20-examples-of-great-user-interface-design/

bad: http://www.goodexperience.com/tib/archives/webtech/
32
Some Good Student Projects

As identified by the TAs:



Seungjoon Lee: digital music player in Flash
Joe Paradise: phone contacts in html & Javascript
Min-Cheng Huang: chat in PowerPoint
33
My Kids’ Picks

Bad = xBox main menus vs. good = Wii
34
My Wife’s clock
35
Panasonic vs. Sony DVD-R
36
Good Examples

Google maps flexible addresses, vs.
MapQuest fixed fields:
37
Others (from my family)



Bad: digital watch – too many functions in too few controls
– no affordances for many functions
Car dashboard clocks – how set?
Penn Dot web site: schedule drivers test gives wrong error
message


General web sites




No way to say “all except this kind”
Gmail vs. Outlook


Says invalid date when actually just taken, and doesn’t give
alternatives
Gmail: can’t sort by subject or sender or recipient
Gmail: better spam filtering
Office: can’t find anything in ribbons
Word: compare versions, but scary if track-changes on by38
accident
05-863 / 08-763 / 46-863: Introduction to
Human Computer Interaction for
Technology Executives
Fall, 2009, Mini 2
39