PAGE

EFFICIENCY

www.infobusiness.com
 PAGE 2

When fixing problems, always do the least you can.

Steve Krug
 PAGE

boredpanda.com, https://www.demilked.com/cool-404-error-pages/

www.infobusiness.com
 PAGE

http://nader.io/wp-content/uploads/sites/2/2011/12/mint_error_page-825x510.png

www.infobusiness.com
 PAGE

Spotify, http://www.magazineduwebdesign.com/inspirations/ui-design/sites-web/spotify-l-année-2015-en-musique/

www.infobusiness.com
 PAGE 6

Outline

• UI Hall of Fame or Shame

• Chunking
• Pointing and Steering
• Shortcuts
 PAGE

UI Hall of Fame or Shame

www.infobusiness.com
 PAGE 8

This message used to appear when you tried to delete the contents of
your Internet Explorer cache from inside Windows Explorer (i.e., you
browse to the cache directory, select a file containing one of IE’s
browser cookies, and delete it).
the message is almost tautological

Tautology: the saying of the same thing twice in different

words, generally considered to be a fault of style. Overexcited (!!)
 PAGE 9

Does it give the user enough information to make a decision?

 PAGE 10

• Suppose you selected all your cookie files and tried to delete them all in one go.
• You get one dialog for every cookie you tried to delete!

What button is missing

from this dialog?
 PAGE 11

Microsoft’s Web Publishing Wizard, which uploads local files to a remote web site.

That’s a helpful
shortcut, which
improves
efficiency, but
this example
shows that it’s
not a panacea.

One way to fix the too-many-questions problem is Yes To All and No

To All buttons, which short-circuit the rest of the questions by
giving a blanket answer.
 PAGE 12

But what if you know there’s a file on the host that

you don’t want to delete? What would you have to do?
 PAGE 13

Interface has a potentially large number of related questions to ask

the user, it’s much better to aggregate them into a single dialog.

It might be the fact that it

initially doesn’t show the
filenames, just their count –
you have to press Details to
see the whole dialog box.

Provide a list of the files, and

ask the user to select which
ones should be deleted.

Select All and Unselect All

buttons would serve the role
of Yes to All and No to All.
 PAGE 14

Simply knowing the number of files not under version

control is rarely enough information to decide whether
you want to say yes or no, so most users are likely to
press Details anyway.
 PAGE

What is Efficiency?

www.infobusiness.com
 PAGE 16

What is Efficiency
efficient | əˈfiSHənt |
adjective
(especially of a system or machine) achieving maximum productivity with
minimum wasted effort or expense: fluorescent lamps are efficient at
converting electricity into light.
• (of a person) working in a well-organized and competent way: an
efficient administrator.
• [in combination] preventing the wasteful use of a particular
resource: an energy-efficient heating system.
 PAGE 17

What is Efficiency
efficiency | əˈfiSHənsē |
noun (plural efficiencies)
the state or quality of being efficient: greater energy efficiency.
• an action designed to achieve efficiency: to increase efficiencies and
improve earnings.
• technical the ratio of the useful work performed by a machine or in
a process to the total energy expended or heat taken in.
 PAGE 18

What is Efficiency

• In computer science terms efficiency is the ratio of useful work

to resources (processor and storage) expended.
• In other words, the ratio of the output to the input of a given
system.
• If for example an algorithm is said to be efficient, it does a good
job of economising on the computer resources to achieve its
objective.

(The Glossary of Human Computer Interaction, interaction-design.org)

 PAGE 19

What is Efficiency
• In HCI or Usability terms, efficiency is measured as the resources expended
by the user in relation to the accuracy and completeness of goals achieved
(ISO standard 9241).
• High efficiency is achieved when the user reaches his/her goals while
expending as few resources as possible according to the mentioned ISO
standard.
• This definition is however very business-oriented and only partly applies to
software such as games or likewise.

(The Glossary of Human Computer Interaction, interaction-design.org)

 PAGE

Chunking
[1] Working memory [2] Improve Efficiency of Output

www.infobusiness.com
 PAGE 21

How can I remember,

• Phone numbers?
• Postal code?
• Identity card number?
• Student’s ID?
• Password for emails?
• Security code for internet banking?
 PAGE

www.infobusiness.com
 PAGE

www.infobusiness.com
 PAGE 24

Chunk
chunk1 | CHəNGk |
verb [with object]
North American divide (something) into chunks: chunk four
pounds of pears.
• (in psychology or linguistic analysis) group together (connected
items or words) so that they can be stored or processed as
single concepts.
 PAGE 25

Chunking

• “Chunk” is a unit of memory or perception.

• In one sense, chunks are defined symbols; in another sense, a
chunk represents the activation of past experience.
• Depends both on presentation and on what you already know.
 PAGE 26

Working Memory

• Working memory is where you do your conscious thinking.

• The currently favored model in cognitive science holds that
working memory is not actually a separate place in the brain,
but rather a pattern of activation of elements in the long-term
memory.
 PAGE 27

Working Memory

• A famous old result is that the capacity of working memory is

roughly 7 ± 2 chunks.
• The capacity of short term memory is seven plus or minus
two items of information (some people being able to only hold
five or six items, while others can hold eight or nine).
• A recent reanalysis of the same experiment has amended that
estimate to 4 ± 1 chunks (Parker, “Acta is a four-letter word,”
Acta Psychiatrica Scandinavica, 2012).
 PAGE 28

Working Memory

• Either way, it’s pretty small! Although working memory size can
be increased by practice (if the user consciously applies
mnemonic techniques that convert arbitrary data into more
memorable chunks), it’s not a good idea to expect the user to do
that.

A good interface won’t put heavy demands on the

user’s working memory.
 PAGE 29

Working Memory

• Data put in working memory disappears in a short time–a few

seconds or tens of seconds.
• Maintenance rehearsal—repeating the items to yourself—fends
off this decay, but maintenance rehearsal requires attention.
• So distractions can easily destroy working memory.
 PAGE 30

Working Memory

• Long-term memory is probably the least understood part of

human cognition.
• It contains the mass of our memories.
• Its capacity is huge, and it exhibits little decay.
• Long-term memories are apparently not intentionally erased;
they just become inaccessible.
 PAGE 31

Working Memory

• Maintenance rehearsal (repetition) appears to be useless for

moving information into long-term memory.
• Instead, the mechanism seems to be elaborative rehearsal,
which seeks to make connections with existing chunks.
 PAGE 32

Working Memory

• Elaborative rehearsal lies behind the power of mnemonic

techniques like associating things you need to remember with
familiar places, like rooms in your childhood home.
• But these techniques take hard work and attention on the part
of the user.

One key to good learnability is making the

connections as easy as possible to make–and
consistency is a good way to do that.

Improve Efficiency of Output
• Our ability to form chunks in
working memory depends
strongly on how the information
is presented: a sequence of
individual letters tend to be
chunked as letters, but a
sequence of three-letter groups
tend to be chunked as groups.
PAGE 33
• It also depends on what we
already know.
• If the three letter groups are
well-known TLAs (three-letter
acronyms) with well-established
chunks in long-term memory,
we are better able to retain them
in working memory.
 PAGE 34

Improve Efficiency of Output

Don’t present information as long Hard: M W B C R A L O A B I M B F I
undifferentiated strings of random
characters or numbers. Hard: 9405510200793831994315

Break them up into 3 - or 4 - Easier: MWB / CRA / LOA / BIM / BFI

character groups. Easier: 9405 / 5102 / 0079 / 3831 / 994 / 315

This applies not just to random Easiest: BMW / RCA / AOL / IBM / FBI
numbers or hashes, but to all kinds
of data displayed in an interface. Easiest: klar / fonz / apek / uwer
 PAGE 35

Example

• The keywords that use to prove the account coupon are words–
much easier to remember and type than the 10-digit,
unchunked MIT ID right above them.
 PAGE

Pointing and Steering

www.infobusiness.com
 PAGE

Pointing

www.infobusiness.com
 PAGE 38

Fitts’s Law

• In 1954, psychologist Paul Fitts, examining the human motor

system, showed that the time required to move to a target
depends on the distance to it, yet relates inversely to its size.
• By his law, fast movements and small targets result in greater
error rates, due to the speed-accuracy trade-off.
• Although multiple variants of Fitts’ law exist, all encompass this
idea.
 PAGE 39

Fitts’s Law

• Fitts’s law states that the amount of time required for a person
to move a pointer (e.g., mouse cursor) to a target area is a
function of the distance to the target divided by the size of the
target.
• Thus, the longer the distance and the smaller the target’s size,
the longer it takes.
 PAGE 40

Fitts’s Law
• The time to start and stop moving is constant, an effective equation for the
movement time (MT) for a given device, such as mouse, turns out to be:

• a approximates the start/stop time in seconds for a give device

• b measures the inherent speed of the device.
• Both a and b need to be determined experimentally for each device.
• D is distance users had to move
• W is the target size.
 PAGE 41

Fitts’s Law

• The time required to complete hand movements was dependent

on the distance users had to move, D, and the target size, W.
• Doubling the distance (say, 10 cm to 20 cm) resulted in longer
completion times, but not twice as long.
• Increasing the target’s size (say from 1 cm2 to 2 cm2) enable
users to point at it more rapidly.
PAGE 42
 PAGE

Steering

www.infobusiness.com
 PAGE 44

Steering Tasks

• Cascading submenus are hard to use, because the mouse

pointer is constrained to a narrow tunnel in order to get over
into the submenu.
• Unlike the pointing tasks that Fitts’s Law applies to, this
steering task puts a strong requirement on the error your hand
is allowed to make: instead of iteratively reducing the error
until it falls below the size of the target, you have to
continuously keep the error smaller than the size of the tunnel.
 PAGE 45

Steering Tasks

• The figure shows an intuition for why this works.

• Each cycle of the motor system can only move a small distance
d such that the error εd is kept below S.
 PAGE 46

Steering Tasks

• Windows tries to solve this problem with a 500 ms timeout

before opening a submenu, but this means reduced efficiency
when the user actually wants to open that submenu.
• The Mac gets a Hall of Fame nod here:
• when a submenu opens, it provides an invisible triangular
zone, spreading from the mouse to the submenu, in which the
mouse pointer can move without losing the submenu.
 PAGE 47

Steering Tasks

• The user can point straight to the submenu without unusual

corrections, and without even noticing that there might be a
problem. (Hall of Fame interfaces may sometimes be invisible to
the user! They simply work better, and you don’t notice why.)
 PAGE

Improve Mouse Efficiency

www.infobusiness.com
 PAGE 49

Improve Mouse Efficiency

• Make frequently-used targets big

• Use snapping in drawing editors
• Put targets used together near each other
• Use screen corners and screen edges
• Avoid steering tasks
 PAGE 50

[1] Make Frequently-User Target Big

• Since size matters for Fitts’s Law, frequently-used mouse

affordances should be big.
• The bigger the target, the easier the pointing task is. Similarly,
consider the path that the mouse must follow in a frequently-
used procedure.
 PAGE 51

[2] Put Targets Used Together Near Each Other

• If it has to bounce all over the screen, from the bottom of the
window to the top of the window, or back and forth from one
side of the window to the other, then the cost of all that mouse
movement will add up, and reduce efficiency.
• Targets that are frequently used together should be placed near
each other.
 PAGE 52

[3] Use Screen Corners and Screen Edges

• We mentioned the value of screen edges and screen corners,

since they trap the mouse and act like infinite-size targets.
• There’s no point in having an unclickable margin at the edge of
the screen.
 PAGE 53

[4] Avoid Steering Tasks

• Finally, since steering tasks are so much slower than pointing

tasks, avoid steering whenever possible.
• When you can’t avoid it, minimize the steering distance.
• Cascading submenus are much worse when the menu items
are long, forcing the mouse to move down a long tunnel
before it can reach the submenu.
 PAGE 54

Why is ESC and BACKSPACE in the corners? Why is the SHIFT key larger?

Why is
there an
extra
number
pad?

Why two sets of CONTROL and SHIFT buttons?

Why is the ENTER key larger?
Why is the SPACEBAR longer
https://www.quietpc.com/ms-desktop600-uk
 PAGE 55

Special keys that do nothing by themselves but modify the functions of other keys. For example, the ⇧ Shift key can be used to alter the
output of character keys, whereas the Ctrl (control) and Alt (alternate) keys trigger special operations when used in concert with other keys.

Typically, a modifier key is held down while another key is struck. To facilitate this, modifier keys usually come in pairs, one functionally
identical key for each hand, so holding a modifier key with one hand leaves the other hand free to strike another key.

https://en.wikipedia.org/wiki/Keyboard_layout
 PAGE

Shortcuts

www.infobusiness.com
 PAGE 57

Keyboard Shortcuts

• Keyboard commands
• Menu accelerators
 PAGE 58

Keyboard Shortcuts

• A common way to increase efficiency of an interface is to add

keyboard shortcuts —- easily-memorable key combinations.
• There are conventional techniques for displaying keyboard
shortcuts (like Ctrl-N and Ctrl-O) in the menubar.
 PAGE 59

Keyboard Shortcuts

• Menubars and buttons often have accelerators as well (the

underlined letters, which are usually invoked by holding down
Alt to give keyboard focus to the menubar, then pressing the
underlined letter).
 PAGE 60

Keyboard Shortcuts

• Choose keyboard shortcuts so that they are easily associated

with the command in the user’s memory.
• Keyboard operation also provides accessibility benefits, since it
allows your interface to be used by users who can’t see well
enough to point a mouse.
 PAGE 61

Default & Pending Delete

• Fill in a form with defaults

• from history, by prediction
• Make the defaults fragile
 PAGE 62

Default & Pending Delete

• Defaults are common answers already filled into a form.

• Defaults help in lots of ways:
• they provide shortcuts to both novices and frequent users;
• they help the user learn the interface by showing examples of
legal entries.
 PAGE 63

Default & Pending Delete

• Defaults should be fragile;

• when you click on or Tab to a field containing a default value,
it should be fully selected so that frequent users can replace
it immediately by simply starting to type a new value.
• This technique, where typing replaces the selection, is called
pending delete.
 PAGE 64

History

• Offer recently-used or frequently-used choices

 PAGE 65

History

• File editing often exhibits temporal locality, which is why

Recently-Used Files menus (like this) are very helpful for
making file opening more efficient.
 PAGE 66

History

• Keep histories of users’ previous choices, not just of files but of

any values that might be useful.
• When you display the Print dialog again, for example,
remember and present as defaults the settings the user
provided before.
 PAGE 67

Autocomplete

• Minimize typing with autocomplete

• Autocomplete doesn’t just help with efficiency. What other
usability dimensions does it help?
 PAGE 68

Aggregation

• Multiple selection for action

• Multiple drap & drop
 PAGE 69

Aggregation

• Aggregation is an excellent way to add efficiency to an

interface.
• Think about ways that a user can collect a number of items–
data objects, decisions, graphical objects, whatever–and handle
them all at once, as a group.
 PAGE 70

Aggregation

• Multiple selection is a good design pattern for aggregation, and

there are many idioms now for multiple selection with mouse
and keyboard:
• dragging an outline around the items,
• shift-click to select a range,
• etc.
 PAGE 71

Aggregation

• Not every command needs aggregation.

• If the common case is only one item, and it’s never more than a
handful of items, then it may not be worth the complexity.
 PAGE 72

Anticipation

• Anticipation means that a good design should put all needed

information and tools for a particular task within the user’s
easy reach.
• If the task requires a feature from the interface that isn’t
immediately available in the current mode, then the user may
have to back out of what they’re doing, at a cost to efficiency.
 PAGE 73

The toolbar icons across

the top show some
The History icon captures
evidence of anticipating
another aspect of the file-
the user’s needs.
opening task: that users
Probably the most
often need to open a file
important is the New
that they’ve opened
Folder icon, which lets
recently.
you create a new folder
to save your file in.
The icons on the left side
are bookmarks for very
common places that users
go to open files, like the
Desktop or the My
Documents folder.

If you click on My Network Places, you’ll see more evidence of anticipation: not just a
list of the network places that you’ve already created (network places are basically
bookmarks pointing to file servers), but also icons for the common subtasks involved in
managing the list of network places: Add Network Place to add a new one; and the
Network Setup Wizard if you aren’t connected to the network yet.
 PAGE 74

Anticipation

• It’s worth noting that all these operations are available

elsewhere in Windows–recently opened files are found in
PowerPoint’s File menu, the Network Setup wizard can be found
from the Start menu or the Control Panel, and new folders can
be made with Windows Explorer.
 PAGE 75

Anticipation

• So they’re here only as shortcuts to functionality that was

already available–shortcuts that serve both learnability (since
the user doesn’t have to learn about all those other places in
order to perform the task of this dialog) and efficiency (since
even if I know about those other places, I’m not forced to
navigate to them to get the job done).
 PAGE 76

References
• Efficiency, MIT Open Courseware, User Interface Design and
Implementation, https://ocw.mit.edu/courses/electrical-engineering-
and-computer-science/6-831-user-interface-design-and-
implementation-spring-2011/lecture-notes/MIT6_831S11_lec04.pdf
• Designing The User Interface: Stategies for Effective Human-Computer
Interaction (Sixth Edition), Ben Shneiderman.
• What is Fitts Law?, https://www.interaction-design.org/literature/
topics/fitts-law
• Fitts Law, https://uxknowledgebase.com/fittss-law-59b9ebe4e84c
 PAGE

www.infobusiness.com