Post on 16-Mar-2018
Creating Intuitive Graphical User Interfaces
for IBM Informix Justin McDavid
jmmcdavi@us.ibm.com
1
Who This Presentation Is For
― Early career developers who want to understand basic
tenents of interface design
― Mid-career developers who want to better understand
design specs (and design, in general)
― Grizzled veterans who have been building applications
for a long time, but are curious about the physiology
and cognition underpinning specific design choices
2
What This Presentation Does Not Cover
― Software and hardware
― Popular design languages
― Contemporary design patterns
3
Special Thanks
― Most all example text in this presentation comes from the
first chapter of Herman Melville’s Moby Dick
― Most interface examples are from the Mobile OpenAdmin
Tool (Mobile OAT)
4
Overview
1. Axioms of design
2. Typography and layout
3. Color
4. Gestalt principles of design
5. Other common principles of usability and design
6. Takeaways
7. Questions
5
Complexity
The systems you are working with are complex.
The user interface of your product is an opportunity to
alleviate the complexity of interacting with the
underlying systems.
6
Axioms of Design
Users seek opportunities for efficiency. Look for ways to
decrease the cognitive burden of using your application.
1. Be consistent.
2. Follow common conventions, or make deviations from
convention easy to understand.
3. Reduce visual noise wherever possible.
7
Overview
1. Axioms of design
2. Typography and layout
3. Color
4. Gestalt principles of design
5. Other common principles of usability and design
6. Takeaways
7. Questions
8
Serifs and Typefaces
Serifs are difficult to see when resolution is low.
9
Call me Ishmael. Some years ago—never mind how long
precisely—having little or no money in my purse, and
nothing particular to interest me on shore, I thought I
would sail about a little and see the watery part of the
world.
Call me Ishmael. Some years ago—never mind how
long precisely—having little or no money in my
purse, and nothing particular to interest me on shore,
I thought I would sail about a little and see the watery
part of the world.
C C
Typography (Case)
Avoid full capitalization (unless you’re trying to use the
letter alignment for a visual-design purpose). Word
shape contributes to readability.
10
Polarity
Dark text on light background tends to be more
physiologically stimulating. When you overstimulate
readers, readability goes down.
11
With a philosophical flourish Cato throws himself upon his
sword; I quietly take to the ship. There is nothing surprising in
this. If they but knew it, almost all men in their degree, some
time or other, cherish very nearly the same feelings towards the
ocean with me.
With a philosophical flourish Cato throws himself upon his
sword; I quietly take to the ship. There is nothing surprising in
this. If they but knew it, almost all men in their degree, some
time or other, cherish very nearly the same feelings towards the
ocean with me.
Typography (Weight)
The typeface needs to be heavier (thicker) to
avoid color-bleeding when you use a light font on
a dark background.
12
Go from Corlears Hook to Coenties Slip, and from thence, by
Whitehall, northward. What do you see?—Posted like silent
sentinels all around the town, stand thousands upon thousands of
mortal men fixed in ocean reveries.
Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see?—Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men fixed in ocean reveries.
Text Justification
Because of its inconsistent word-spacing,
full-justified text has lower readability than
left-justified, ragged-right text.
13
But look! here come more crowds, pacing straight for the water,
and seemingly bound for a dive. Strange! Nothing will content
them but the extremest limit of the land; loitering under the
shady lee of yonder warehouses will not suffice.
But look! here come more crowds, pacing straight for the water,
and seemingly bound for a dive. Strange! Nothing will content
them but the extremest limit of the land; loitering under the
shady lee of yonder warehouses will not suffice.
Measure (Line Length)
Long line lengths make it difficult for the eye to
track to back to the correct line.
14
Once more. Say you are in the country; in some high land of lakes. Take almost any path you please, and ten to one it carries you down in a dale, and
leaves you there by a pool in the stream. There is magic in it. Let the most absent-minded of men be plunged in his deepest reveries—stand that man on
his legs, set his feet a-going, and he will infallibly lead you to water, if water there be in all that region.
Once more. Say you are in the country; in some high land of lakes. Take
almost any path you please, and ten to one it carries you down in a dale,
and leaves you there by a pool in the stream. There is magic in it. Let the
most absent-minded of men be plunged in his deepest reveries—stand that
man on his legs, set his feet a-going, and he will infallibly lead you to
water, if water there be in all that region.
Once more. Say you are in the
country; in some high land of
lakes. Take almost any path you
please, and ten to one it carries
you down in a dale, and leaves
you there by a pool in the
stream. There is magic in it. Let
the most absent-minded of men
be plunged in his deepest
reveries—stand that man on his
legs, set his feet a-going, and he
will infallibly lead you to water,
if water there be in all that
region.
Measure (Line Length)
45-70 characters (including spaces) per line is
considered optimal for normal leading.
15
Once more. Say you are in the country; in some high land of lakes. Take almost any path you please, and ten to one it carries you down in a dale, and
leaves you there by a pool in the stream. There is magic in it. Let the most absent-minded of men be plunged in his deepest reveries—stand that man on
his legs, set his feet a-going, and he will infallibly lead you to water, if water there be in all that region.
Once more. Say you are in the country; in some high land of lakes. Take
almost any path you please, and ten to one it carries you down in a dale,
and leaves you there by a pool in the stream. There is magic in it. Let the
most absent-minded of men be plunged in his deepest reveries—stand that
man on his legs, set his feet a-going, and he will infallibly lead you to
water, if water there be in all that region..
Once more. Say you are in the
country; in some high land of
lakes. Take almost any path you
please, and ten to one it carries
you down in a dale, and leaves
you there by a pool in the
stream. There is magic in it. Let
the most absent-minded of men
be plunged in his deepest
reveries—stand that man on his
legs, set his feet a-going, and he
will infallibly lead you to water,
if water there be in all that
region.
Leading (Line Spacing)
Increase leading if measures are long.
16
Why is almost every robust healthy boy with a robust healthy soul in him, at some time or
other crazy to go to sea? Why upon your first voyage as a passenger, did you yourself feel
such a mystical vibration, when first told that you and your ship were now out of sight of
land? Why did the old Persians hold the sea holy?
Why is almost every robust healthy boy with a robust healthy soul in him, at some time or
other crazy to go to sea? Why upon your first voyage as a passenger, did you yourself feel
such a mystical vibration, when first told that you and your ship were now out of sight of
land? Why did the old Persians hold the sea holy?
Tracking (Letter Spacing)
Condensed letter spacing reduces readability due to
interference. Expanded letter spacing can remain
readable, but does not make text more legible beyond a
certain point.
17
Now, when I say that I am in the habit of going to sea whenever I begin to grow hazy about the eyes, and
begin to be over conscious of my lungs, I do not mean to have it inferred that I ever go to sea as a
passenger.
Now, when I say that I am in the habit of going to sea whenever I begin to grow
hazy about the eyes, and begin to be over conscious of my lungs, I do not mean
to have it inferred that I ever go to sea as a passenger.
Now, when I say that I am in the habit of going to sea whenever I begin to grow hazy about
the eyes, and begin to be over conscious of my lungs, I do not mean to have it inferred
that I ever go to sea as a passenger.
Overview
1. Axioms of design
2. Typography and layout
3. Color
4. Gestalt principles of design
5. Other common principles of usability and design
6. Takeaways
7. Questions
18
Chromatic Aberration
Red and Green
We have way more red/green photoreceptors than
blue/yellow ones, so saturated red/green text, objects,
and backgrounds are harder to focus on.
20
For my part, I abominate all honorable respectable toils, trials,
and tribulations of every kind whatsoever. It is quite as much as
I can do to take care of myself, without taking care of ships,
barques, brigs, schooners, and what not.
For my part, I abominate all honorable respectable toils, trials,
and tribulations of every kind whatsoever. It is quite as much as
I can do to take care of myself, without taking care of ships,
barques, brigs, schooners, and what not.
Color Blindness
― About 8% of all males and .5% of all females are
red/green color deficient, so avoid using red and green
as the only contrasting differentiator for elements in
interface.
21
Blue
Most short-wave (blue) photoreceptors are not in the
central part of the fovea (the part of your eye responsible
for sharp central vision), so a saturated blue with black
reduces readability.
22
No, when I go to sea, I go as a simple sailor, right before the
mast, plumb down into the fore-castle, aloft there to the royal
mast-head. True, they rather order me about some, and make
me jump from spar to spar, like a grasshopper in a May meadow.
No, when I go to sea, I go as a simple sailor, right before the
mast, plumb down into the fore-castle, aloft there to the royal
mast-head. True, they rather order me about some, and make
me jump from spar to spar, like a grasshopper in a May meadow.
Gradients
― Avoid horizontally-graded, gradient backgrounds for
text. Contrast will be inconsistent, which will lower
readability.
23
Again, I always go to sea as a sailor, because they make a point of paying me for my trouble, whereas they never pay passengers a single penny that I ever heard of. On the contrary, passengers themselves must pay. And there is all the difference in the world between paying and being paid.
Overview
1. Axioms of design
2. Typography and layout
3. Color
4. Gestalt principles of design
5. Other common principles of usability and design
6. Takeaways
7. Questions
24
Gestalt Principles of Perception
― Gestalt means “form” or “shape” in German.
― Gestalt principles describe the self-organizing
tendencies of the brain
25
Gestalt Principle - Proximity
26
Gestalt Principle - Proximity
27
Proximity - Example
28
Proximity - Example
29
Gestalt Principle - Similarity
30
Gestalt Principle - Similarity
31
Similarity - Example
32
Similarity - Example
33
Similarity - Example
34
Similarity - Example
35
Gestalt Principle - Symmetry
― People prefer to see objects as symmetrical, originating
around a single point, and divisible into an even
number of parts.
36
Gestalt Principle - Symmetry
[ ][ ]
37
Gestalt Principle - Symmetry
[ ][ ]
38
Symmetry - Example
39
Gestalt Principle – Common Fate
40
Gestalt Principle – Common Fate
41
Gestalt Principle – Common Fate
42
Gestalt Principle – Common Fate
43
Gestalt Principle – Common Fate
44
Gestalt Principle – Common Fate
45
Common Fate - Example
46
Common Fate - Example
47
Gestalt Principle - Continuity
48
Gestalt Principle - Continuity
49
Gestalt Principle - Continuity
50
Continuity - Example
51
Step 2
Step 1
Step 3
State 1
State 2
State 1
State 2
Gestalt Principle – (En)closure
52
Closure
53
Closure
54
Closure
55
Closure
56
Overview
1. Axioms of design
2. Typography and layout
3. Color
4. Gestalt principles of design
5. Other common principles of usability and design
6. Takeaways
7. Questions
57
Fitts’ Law
― The time required to rapidly move to a target area is a
function of the distance to the target and the size of
the target.
58
Fitts’ Law - Example
59
Field
Field
Field
Action Cancel
Fitts’ Law - Example
60
Field
Field
Field
Action Cancel
Fitts’ Law - Example
61
Field
Field
Field
Action Cancel
Hick’s Law - Example
62
Action 1
Action 2
Action 3
Action 4
Action 5
Action 6
Action 7
Action 8
Action 9
Action 10
Action 11
Action 12
Hick’s Law - Example
63
Related action 1a
Related action 2a
Related action 1b
Related action 2b
Related action 3b
Related action 4b
Related action 1c
Related action 2c
Related action 3c
Related action 1d
Related action 2d
Related action 3d
Hick’s Law - Example
64
Category 1
Category 2
Category 3
Category 4
Action 1
Action 2
Action 1
Action 2
Action 3
Action 4
Action 1
Action 2
Action 3
Action 1
Action 2
Action 3
Hick’s Law - Example
65
The Pie Graphs Are Terrible Law
Bar graphs are better than pie graphs. Relative
distances are easier to compare than relative
surface areas of irregular shapes. 3D pie graphs
are extra terrible (volume comparisons).
66
Component 1
Component 2
Component 3
Component 4
0
5
10
15
20
25
30
35
40
45
Component 1 Component 2 Component 3 Component 4
Overview
1. Axioms of design
2. Typography and layout
3. Color
4. Gestalt principles of design
5. Other common principles of usability and design
6. Takeaways
7. Questions
67
Takeaways
― Choices for intuitive design should originate from an
understanding of perception and cognition.
― Leverage convention where you can. Users rarely want
to spend time learning a new system of interaction.
― Be consistent. If you aren’t, your users will be in a
perpetual state of learning/remembering how to
interact with your application.
68
Questions?
Justin McDavid
jmmcdavi@us.ibm.com
69
70
Save the date! October 26 - 30
Submit your proposal by May 22, 2014 https://www-950.ibm.com/events/tools/insight/insight2014admin/screens/default/login.jsp
71
IBM Informix Roadshow
Join IBM for a FREE two day technical series designed to give you the
proven IBM® technology that solves some of the toughest business
problems in the world today.
72
Informix Usability Sandbox – Sign up!
Help define requirements for future development.
Influence design strategy for Informix.
Share your experiences and feedback.
Usability Sandbox sessions in London I April 28-30, between 9am and 5pm
Sign-up in London I or find Justin McDavid.
*The first 20 participants will get a free IBM or Informix t-shirt!