In the name of Allah, the Beneficent, the Merciful

Week-III: Common Design Mistakes

Human Computer Interaction

15th March 2021

Discussion 2

Islam is a religion of
moderation, even in our
character. We are a ‘middle’
nation.
Ibn al Qayyim (may Allah be
pleased with him) said, “Allah
has not ordained any command
except that Satan has two
incitements in it; negligence
and dereliction on the one side,
and extremism and
exaggeration on the other. He
cares not in which trap of the
two you fall as long as you
eventually fall.” So avoid
extremism in any form.
User Interface
 Hall of Shame  Hall of Fame

3
User Interface - Hall of Shame

 The Interface Hall of Shame is a collection of

common interface design mistakes

 Highlighting these problems can help

developers avoid making similar mistakes.

 www.iarchitect.com/myshame.htm
(Brian Hayes of Isys Information Architects, Inc. ,
a UI consulting firm)
4
Common interface design mistakes

1. Contempt and loathing

2. Spreading Confusion
3. Avoid geek speak
4. Useless output
5. Use correct UI controls

5
Contempt and Loathing

Don’t Insult Users

6
Contempt and Loathing

Don’t Shout at Users (by !!!)

10/27/2021 7
Contempt and Loathing
Don’t use all upper case

8
Spreading Confusion
Delete Files To Delete Files?

10/27/2021 Image Segmentation 9

Spreading Confusion
What do the icons mean??

10
Spreading Confusion
Failure=Success?

11
Spreading Confusion
Success=Error?

12
Spreading Confusion
Is This An Error - Or Is It Normal?

13
Spreading Confusion
Misleading Messages

14
Avoid Geek Speak
Know the user level

15
Avoid Geek Speak
Speak to the user

16
Avoid Geek Speak
The Geek World of Colors

17
Avoid Geek Speak
Label buttons appropriately

18
Avoid Geek Speak
Ambiguity-what would you do?

19
Useless Output
Giving you any message?

20
Use the Correct UI Controls
Check Boxes vs. Option Boxes

• Use check boxes for non-exclusive options

• Use options (radios) for exclusive options

21
Use the Correct UI Controls
Confusing buttons and labels

22
Use the Correct UI Controls
The Ultimate Social Security Entry Control

23
 The Error Dialog
 What’s good about the design of this error box?
- The user knows there is an error
 What’s poor about the design of this error box?
- Not enough information
- How to resolve the error

24
 UI-Hall of Shame/Fame?
What do you
think ??
hummm

25
 UI-Hall of Shame/Fame?

 Presents a number of templates

 Prints custom award certificates
 Good points about the Interface?
 Graphical – Mouse Driven
 No complicated commands to remember
 It’s What-You-See-Is-What-You-Get (WYSIWYG)—User
gets a preview of the certificate
26
 UI-Hall of Shame/Fame?
What is wrong than?

 Usability is about creating effective user interfaces

 The first slide shows a WYSIWYG GUI – but it still fails and

is unusable – why?
- How many templates? No indication on scrollbar and How are the
templates organized? No hint
- How far do you have to move the scrollbar to select the next one?

27
UI-Hall of Shame/Fame?
 Normally, a horizontal scrollbar underneath an image (or
document) is designed for scrolling the content horizontally.
 Inconsistency with prior experience and other applications
tends to trip up new or infrequent users
 It doesn’t get any better for frequent users . If a frequent
user wants a template they’ve used before, how can they
find it?
 This interface provides no shortcuts for frequent users
28
UI-Hall of Shame/Fame?

“Minor” obvious problems:

- Instructions in title bar, Right-aligned, vertically-oriented
instructions
- Cancel button before OK button
- Use of all capital letters

“Major” problems
Must use horizontal slider to see
i.e Sequential search

29
UI-Redesigned
 It provides selection style more familiar to user
 “inconsistency” fixed
 list boxes clearly afford selection to new or infrequent users
UI-Hall of Shame/Fame?

31
 UI-Hall of Shame/Fame?
 Gimp is an open-source
image editing program,
 Gimp’s designers made a
strange choice for its menus
 It had no menus – instead,
right-click to get a popup
menu and navigate further

32
 UI-Hall of Shame/Fame?
 With Gimp’s design, as soon as the mouse hovers over a
choice on the context menu (like File or Edit), the submenu
immediately pops up to the right
 That means, if user want to reach an option on the File menu,
they have to move mouse carefully to the right, staying within
the File choice, until it reaches the File submenu.
 Hierarchical submenus are actually slower to use than a menu
bar.

10/27/2021 33
 UI-Hall of Shame/Fame?
Clippy was a well-intentioned effort
to solve a real usability problem

Users don’t read the manual, don’t

use the online help, and don’t know
how to find the answers to their
problems

Clippy tries to suggest answers to

the problem it thinks you’re having.

34
 Designing user interface is hard

 Most software engineering is about communicating with

programmers (Who are a lot like us)

 UI is about communicating with users

 In some situations the user is ALWAYS right

–Usability problems are the design’s fault

–Hard lesson to learn: if the user consistently gets stuck, this is not because

the user is unwilling to speak, but because the interface is poorly designed

35
Q&A