www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 1
ERGONOMICS APPLIED TO THE DESIGN OF USABLE WEB
PAGES AND APPS
Roberto DADDA and Paolo NEGRI
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 2
Order, equilibrium and time.
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 3
Order
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 4
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 5
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 6
Disorder gives the idea of complexity
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 7
Las Meninas (Velázquez)
https://en.wikipedia.org/wiki/Las_Meninas
Brain always search for rules
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 8
Rules change perseption
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 9
Pablo Ruiz Picasso (25 October 1881 – 8 April 1973)
In all the formats, rules are related to concepts
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 10
D. De Kerckove, Brainframes, Technology, mind and business, tr. it. a cura di B. Bassi,
Brainframes. Mente, tecnologia, mercato, Bologna, Baskerville, 1993
Ascending and descending
http://www.kainos.it/numero2/sezioni/ricerche/cuomo01.html#piede52
In latin alphabets writing and reading community
up down
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 11
Jacob’s Ladder
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 12
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 13
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 14
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 15
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 16
IBM, Systems Application Architecture: Common User Access:
Panel Design and User Interaction, Document SC26-4351-0, 1987.
IBM Common User Access (CUA) 1987
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 17
• All operations could be done with either the mouse or the keyboard;
• Menus are activated/deactivated with the F10 key;
• Menus are opened by pressing the Alt key plus the underlined letter of the menu name;
• Menu commands that require parameters to proceed are suffixed with an ellipsis ("…");
• Options are requested using secondary windows (often called dialog boxes);
• Options are divided into sections using notebook tabs;
• Navigation within fields in dialog boxes is by cursor key; navigation between fields is by pressing the Tab ↹ key; ⇧
Shift+Tab ↹ moves backwards;
• Dialog boxes have a 'Cancel' button, activated by pressing the Esc key, which discards changes, and an 'OK' button,
activated by pressing Return, which accepts changes;
• Applications have online help accessed by a Help menu, which is the last option on the menu bar; context sensitive
help can be summoned by F1;
• The first menu is to be called 'File' and contains operations for handling files (new, open, save, save as) as well as
quitting the program; the next menu 'Edit' has commands for undo, redo, cut, copy, delete, paste commands;
• The Cut command is ⇧ Shift+Del; Copy is Ctrl+Ins; Paste is ⇧ Shift+Ins;
• The size of a window can be changed by dragging one of the 8 segments of the border.
CUA IBM
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 18
1975, 1978
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 19
In WordPerfect, the command to open a file
was F7, 3.
In Lotus 1-2-3, a file was opened with / (to
open the menus), F (for File), R (for
Retrieve).
In Microsoft Word, a file was opened with
Esc (to open the menus), T (for Transfer), L
(for Load).
In WordStar, it was D.
In emacs, a file is opened with Ctrl+x
followed by Ctrl+f (for find-file).
Wikipedia
At the beginning was caos!
Word processing, open a file.
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 20
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 21
Page splitting, a critical decision
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 22
Information density
If density is too low
Unused precious space
Longer access time
If density is too hi
hight cognitive load
possible errors
difficult to concetrate what is important
Useful information
Total information content
Information density =
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 23
Menus
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 24
Equilibrium
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 25
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 26
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 27
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 28
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 29
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 30
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 31
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 32
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 33
La notte stellata - Vincent Van Gogh - 1889
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 34
Resurrezione Piero della Francesca 1450 - 1463
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 35
Nascita di Venere – Sandro Botticelli – 1485 1486
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 36
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 37
Time
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 38
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 39
The neglected 3° dimension of pages
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 40
Response time
Δt
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 41
Time ranges
Time (s) Webb/App Cloud based services
0,1
is about the limit for having the user
feel that the system is reacting
instantaneously, meaning that no
special feedback is necessary
Limit for users feeling that they are directly
manipulating objects in the UI.
1
is about the limit for the user's flow
of thought to stay uninterrupted,
even though the user will notice the
delay.
Limit for users feeling that they are freely
navigating the command space without having to
unduly wait for the computer.
10
is about the limit for keeping the
user's attention focused on the
dialogue.
Limit for users keeping their attention on the task.
Anything slower than 10 seconds needs a percent-
done indicator as well as a clearly signposted way
for the user to interrupt the operation.
Extract from http://www.nngroup.com/articles/response-times-3-important-limits/
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 42
Placebos for anxiety
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 43
If possible progress indicators
But without cheating:
If do not know just tell!
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 44
Give signs…
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 45
Learn from movies
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 46
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 47
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 48
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 49
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 50
Scena changes in film editing
Principles:
• Easy correlation
• Fluidity
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 51
Easy correlation
In scena transition
must be easy for the
viewer understand the
correct corelatiion
between situations.
This is done:
• Keeping objects position
• Keeping relative
orientation
• Keeping motion directions
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 52
Position
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 53
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 54
Animations
Helps to understand
and «feel» what
hapens.
Sound is usefull
MAC OS7
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 55
Scrolling vs paging
www.dadda.it roberto@dadda.it Excellence in usability 1st semester 2021-2022 56
Usability
Roberto DADDA
roberto@dadda.it
www.dadda.it
Skype, Facebook e Twitter robertodadda

13 equilibrium order time