|
Theoretical basis
Practical basis
Program
Method
Participants
Aims
History of course
Trainer
When and where
contact.
|
Towards perfect interfaces and webpages, using psychology of movement, perception, language, learning and thinking. Experience, usable, design, intuitive, look and feel, marketing, personal opinions and technology are put aside for one moment. Concrete requirements, direct application using 470 simple and known interfaces, evaluation of common sense and ... opinions and interfaces of participants.
To top. | |
In general interface design is a rather practical profession. "Just tell me what to do." Guidelines, norms and standards are tools frequently asked for. Real experts know that that will not work. Many problems have been solved using common sense and trial and error. But you cannot find a cure for a serious disease using common sense and trial and error.
For interface design it was proved in 'Why designers can't understand their users'.
|
 |
|
Practical basis |
Can a training based on science be practical? Yes, it can. A theory is valide only when you can test it. Usually that is done using 'test items' for experiments. However, you also can make theory concrete using requirements and design solutions.
Secondly, hundreds of interfaces are shown that traigthfrowardly are compatible or incompatible with the theory.
Many interfaces are from projects Human Efficiency participated.
One will known example is
Netherlands Railways train ticket vending machine. This is a typical Human Efficiency interface, perfect for expert users and passengers of 92 years of age as well.
Windows and Office provide many examples of course. There are few Mac examples. Of course, Mac’s design and technology is better. The interface is much more practical. But the Mac uses traditional concepts as a desktop, menus and tabs as well. Most participants use Windows.
To top. | |
Some interfaces were specially designed for this training. These examples are pure; they show the application of psychology without taking into account other considerations. It takes a few seconds to understand the principles.
Other examples are designs of participants, of course. |
|
Program |
The total program would take four days. Fortunately two day will do to pick up the general idea. The interfaces and ics brought forward by the participant determine which parts of the total program will be selected.
|
| |
Input design and psychology of movement
|
| |
Reduce input: selection of options versus entry of commands, size of buttons (not standards for minimal sizes but how to use size, flexibility of size),
Reduce finger travel time: multiple clicks, anti-RSI, entry of numbers, subsequent positions of buttons, keyboard – pointing device switches. | |
How to arrange (screen) buttons: ‘Why you should never use alphabetical arrangements’, invisible structures for fingers versus visible structures for eyes and brains, ‘Why there is no need to put the ‘OK’ button on a standard position.
Evolution: ‘Why voice input can not solve the interface input problem.’, ‘From rigid database entry towards …’ |
| |
Screen design and psychology of perception
|
| |
Perceptual properties of interface design elements: some physiological data on perception of size, form (icons, fonts, the presentation of a date, codes and numbers), luminance, colour (when to use which colour, colour for control of attention), contrast and dynamics. Application with interfaces compatible with this knowledge and, of course interfaces not compatible.
Reduce eye travel time: ‘Where to position information’, ‘Why eye tracking research is not relevant to design’, ‘How to control eye movements’, ‘Why there is no need to start at the upper left hand corner’, ‘How to present complex information in such a way that perception time is 233 milliseconds’. | |
Reduce screen crowdedness: ‘Crowdedness is not the amount of information on the screen but …’, ‘A screen is ‘quiet’ when …’.
How to arrange information on screens: tests for visual structure, design of a line (alignment, tabs), the presentation of lists (horizontal, vertical, words or icons), visual structures (one dimensional, two dimensional, three dimensional, frames), ‘Why you never should use conventional tabs’.
Evolution: ‘From direct views in databases using rigid consistent squares on screens towards …’. |
| |
How to reduce the number of words (the use of synonyms, homogeneous wording, and plurals).
How to identify incomprehensible words (incorrect terminology, homonyms, jargon, terms describing form versus terms describing content, affirmative wording, and specific wording.
| |
How to arrange words in interfaces (risks of one word sentences, verbs and nouns), order of words, punctuation, and design of icon language.
Evolution: not voice input but restricted artificial language and application independent interfaces. |
| |
Help design and psychology of learning
|
| |
Reduce memory load: ‘Which letter for a shortcut when two options start with the same letter?’, ‘How to reduce short term memory load’, ‘How to deal with passwords’. ‘Why ‘Are you sure’ certainly is wrong and the only and best solution for that problem’, fourteen requirements for the hourglass interface.
Reduce learning: ‘Why common help (tips, faq, wizards, help, assistants) can’t help.’ Learning psychological requirements for help and how the interface looks. | |
How to arrange information for learning: Why guidelines, norms, standards and consistency do not work. Which consistencies imposed by technology we are so used to that we do not notice them anymore. When does consistency work.
Evolution: From training how to press a button towards becoming an expert without noticing that. |
| |
Interface concepts and psychology of thinking
|
| |
Reduce mental load: How to reduced mental load? ‘Let the computer do the computing’ does not go without saying at all. What design decisions should be made by the user and not by the interface designer?
Reduce thinking: Why you never should use a metaphor in the interface (e.g. window, desk, bar, assistant, menu, tabs, waste basket, etc). What you should do when designing for abstract contents. Virtual reality versus cognitive reality.
To top.
|
How to arrange information for thinking: Why is a menu incompatible with the ways human think? What are the solutions for the navigation problem? How do they look on a screen?
Evolution: The turbo function human thinking is changing from a slave now to the master of a turbo tool computer in the future. |
|
Method |
The program mentioned above is used when there is no input from participants. A disadvantage of taking the input of the participants is that at first sight the program becomes chaotic. However, from the participants point of view, choatic it will be any way. Psychology as starting point is unusual and therefor, for most participants chaotic. In addition, learning is changing into a new situations, and one has to get used to the new situation. There is a very strong and reliable compass. There are five main roads only: human movement, perception, language, memory and thinking.
To top. | |
A topic starts with an introduction (common knowledge, anecdote, a problem an attendee brings in). Psychological knowledge relevant to that ic is presented briefly. A short experiment with the attendees as subjects, may be performed. Then application using e.g. Windows, Office, design practice of the author and, preferably designs of the attendees. |
|
Participants |
Psychological knowledge presented is not complicated. The most important requirement is open mindedness and a need for insight. All knowledge is immediately applied in concrete examples showing “how to” and “how not to”. Design aesthetics is important in design, however this course and many of the examples presented are “designless”.
To top. | |
These requirements for attendees are more important than their background or roles in the design process.
|
|
Aims |
The main goal of the course is to provide the attendees with psychological information and methodology they can use in creating and evaluating design solutions. The problem is not the complexity of this knowledge but open-mindedness for this unusual approach.
To top. | |
The approach is not learning to apply guidelines but insight to estimate the psychological benefits and costs. |
|
History of the training |
In the eighties the course focussed on MS-DOS designs, in the nineties the focus changed to Windows and GUI and from 2000 internet applications were included.
To top. | |
More than hundred courses have been given now, most of them in the Netherlands and Belgium (VIK) and some in other countries including Germany (Interact), UK and the USA (Software Quality). |
|
Trainer |
The trainer is Leonard Verhoef
To top. | | He developped from a psychologist investigating human thinking to a psychological designer of ultimate interfaces for computers, devices that are used now and that will be used in the future. |
|
When and where? |
In the Netherland the training is given once each three months.
Outside the Netherlands the course is given incompany or in cooperation with local institutes. In most cases a two days format is choosen.
To top. |
|
Interfaces that
might be discussed.
[an error occurred while processing this directive]
Complex data
Upper right red, Disaster occured! 
All ok. 
Upper right yellow low, take care! 
Upper right yellow high, take care! Source: Verhoef Holslag, 2010.
 Source: LBS/Holslag Verhoef. 
Sourrce: Holslag Verhoef 
How much information can be in one of these smiley? Source: Verhoef Holslag, 2010.
Design of tables
Graphics for aesthetics, OECD house style. Source: OECD quarterly growth table. http://stats.oecd.org/Index.aspx 
No graphics, data only. Same data as previous table.
Same data as previous table. Graphics for content. OECD, adapted by Verhoef for demo.
Design of scales
One variable, six parameters, 233 milliseconds perception time. 
An effective problem solving tool. Source: Holslag & Verhoef.
Portrait or landscape?
What is better for a train traffic controler? portrait ...
...landscape?Source: Holslag & Verhoef.
What is better for car driving?  ... realistic landscape?
Source: Tom Tom, 2010. alphanumerical portrait ...?
Source: Verhoef, 2010.  abstract portrait ...?
Source: ETCS/Verhoef.
Train traffic controlHow to present tracks and platforms? 
This way?
Or this way?Source: NS/Verhoef.
Complex data
What is after this generation
of graphs?
Source: www.gapminder.org.
This?
Yes, it is after.
Yes, it is futuristic.
Has it future?
Probably not
because ...
Source: IBM.
Probably
h's got new
software
for his birthday.
Source: Volkskrant.
Or this? New, for most of us.
Futuristic: no,
more than
20 years old.
Has it future?
Certainly yes
because ...
Why tell these 20
year old
character smileys ...
... more than
today's smileys?
Traditional GUI elements
 What is the problem here?
Why the designer
made this error?
15 requirements
for “are you sure?“
How many
requirements meets
this window?
A traditional window
and tabs, what is
the psychological
evaluation of
this kind of windows?
One way to order files.
Another way to
order files
Which one is best?
Why?
What is better?
Horizontal menu?
Vertical menu?
What are advantages
of the latter?
The Word main menu,
what is an alternative?
Not using other words
of course but...
Hmm, the desktop.
What is the visual and
conceptual structure
the inventers had
in mind?.
Hmmm, another
metaphor
Tape recorder
for printer.
Good idea?
What is the difference
between a calender
on paper and
on a screen?
Why most travel
planners are no
planners?
Some perfect designs
Why is this
a perfect design?
Why is this
a perfect design?
Why does the eye
like pie charts?
Why do brains
not like them?
And why brains
liked this one?
Can a dancing
paperclip solve
userunfriendlyness?"
Why not?
Design ticket vending
 NS touch screen train ticket vending machine Routing problems solved using ...
Ticket vending machine. Language option first step? Source: Belgium Railways. 
Ticket vending machine. Change language any time. Source: NS/ Verhoef.
 It looks like a menu.
However,
no hierarchical steps.
What is the structure?"
Which button is
to help whizzkids
and it-specialists?
Source: NS/Verhoef.
Grey out, should not
mean not available,
of course.
Source: Verhoef.
Design of train indicators
Source: Netherlands Raiways,
Amersfoort, 2008.
Grey half circle:‘Go shoping.’
Departure in 30 min.
Yellow triangle: ‘Go to train.’
Departure in 2 min.
Orange half circle: ‘Hurry up!’
Departure in 30 sec.
Source: Experimental designs,
Verhoef 2010.
Experimental trains indicator,
train departing in 5 min,
at top and in large format.
don't hurry.
Experimental trains indicator,
train deparring shortly.
colour: yellow, don’t dawdle.
Experimental trains indicator,
train departing almost now.
colour orange, hurry!
Experimental trains indicator,
first departing train at top,
has left 1 min. ago,
colour red.
Source: Experimental designs,
Verhoef 2009.
Safety information for
high speed train drivers
(ETCS).
Experimental
speedometers
Analog classical
experimental clock design
Train speed: 192.
Maximum permitted speed
200. Next target permitted
speed 40. Good for general
maintain speed task,
bad for planning and when
close to intervention.
Analog design, screen
version
Diagrammatic design,
vertical version.
Braking curve should
not touch maximum
permitted speed curve.
The tongue below should fit
in the pipe above. Good
for planning and insight,
bad when close to
intervention.
Diagrammatic design,
horizontal version.
Comparable with
vertical version.
Animated design
Braking curve should not
touch max permitted speed
curve. The “vehicle”
in front should not be too
close. Good when close to
intervention, bad for
planning and insight.
Speed and
safety information
for high speed train
drivers.
The one that is now standard.
Source: ETCS/Verhoef.
To top of this list of pictures.
Consistency
 Cab with inconsistent
interfaces. Visible, even
at low resolution.
Inconsistent presentation
and input of:
date, time, numbers, colours,
enter procedures, control of
attention.
Cab with consistent interfaces.
No differences in
presentation and input of:
date, time, numbers, colours,
enter procedures, control of
attention.
Consistent icon design.
The graphic elements can be
combined for current
functions and for functions
to be developped. The
graphic elements are like
words. Designers can create
new sentences. Drivers
knowing the elements can
understand new combinations
of words/icons.
To top of this list of pictdures.
Use of colours
Same use of colours for all
information. Colour is used
for control of attention.
Use of colour, white: no
braking curve.
Use of colour, yellow: brake
shortly.
Use of colour, orange: brake
now!!
Use of colour, red: brake
too late, intervention.
This use of colour for
control of user's attention
can be used for any systems,
for instance for passengers
and teachers.
To top of mmi concepts list.
Planning
At the right maximum train
speed profile ahead. Lower
maximum speed at 1000 m.
The planning design was
based on the experimental
diagrammatic design
(see above).
Time to intervention
 The small square at the top
left shows that there is
sufficient time to safety
system brake intervention.
Train braking curve is
close to safety braking
curve. The square top
left shows time to
intervention of the
safety system. Time
to intervention depends
on maximum permitted
speed minus current
speed and the traction/
brake application. When
looking outside the
square is in the visal
periphery but will be
noticed when it comes
up because: the
periphery is sensitive
for changes, for high
contrast changes and
the square is at the
top of the screen.
This design was based
on the experimental
animated design
(see above).
To top of this list
with pictures. |
