creating intuitive graphical user interfaces for ibm · pdf filecreating intuitive graphical...
TRANSCRIPT
![Page 2: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/2.jpg)
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
![Page 3: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/3.jpg)
What This Presentation Does Not Cover
― Software and hardware
― Popular design languages
― Contemporary design patterns
3
![Page 4: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/4.jpg)
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
![Page 5: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/5.jpg)
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
![Page 6: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/6.jpg)
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
![Page 7: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/7.jpg)
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
![Page 8: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/8.jpg)
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
![Page 9: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/9.jpg)
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
![Page 10: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/10.jpg)
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
![Page 11: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/11.jpg)
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.
![Page 12: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/12.jpg)
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.
![Page 13: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/13.jpg)
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.
![Page 14: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/14.jpg)
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.
![Page 15: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/15.jpg)
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.
![Page 16: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/16.jpg)
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?
![Page 17: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/17.jpg)
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.
![Page 18: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/18.jpg)
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
![Page 19: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/19.jpg)
Chromatic Aberration
![Page 20: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/20.jpg)
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.
![Page 21: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/21.jpg)
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
![Page 22: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/22.jpg)
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.
![Page 23: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/23.jpg)
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.
![Page 24: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/24.jpg)
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
![Page 25: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/25.jpg)
Gestalt Principles of Perception
― Gestalt means “form” or “shape” in German.
― Gestalt principles describe the self-organizing
tendencies of the brain
25
![Page 26: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/26.jpg)
Gestalt Principle - Proximity
26
![Page 27: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/27.jpg)
Gestalt Principle - Proximity
27
![Page 28: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/28.jpg)
Proximity - Example
28
![Page 29: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/29.jpg)
Proximity - Example
29
![Page 30: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/30.jpg)
Gestalt Principle - Similarity
30
![Page 31: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/31.jpg)
Gestalt Principle - Similarity
31
![Page 32: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/32.jpg)
Similarity - Example
32
![Page 33: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/33.jpg)
Similarity - Example
33
![Page 34: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/34.jpg)
Similarity - Example
34
![Page 35: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/35.jpg)
Similarity - Example
35
![Page 36: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/36.jpg)
Gestalt Principle - Symmetry
― People prefer to see objects as symmetrical, originating
around a single point, and divisible into an even
number of parts.
36
![Page 37: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/37.jpg)
Gestalt Principle - Symmetry
[ ][ ]
37
![Page 38: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/38.jpg)
Gestalt Principle - Symmetry
[ ][ ]
38
![Page 39: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/39.jpg)
Symmetry - Example
39
![Page 40: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/40.jpg)
Gestalt Principle – Common Fate
40
![Page 41: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/41.jpg)
Gestalt Principle – Common Fate
41
![Page 42: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/42.jpg)
Gestalt Principle – Common Fate
42
![Page 43: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/43.jpg)
Gestalt Principle – Common Fate
43
![Page 44: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/44.jpg)
Gestalt Principle – Common Fate
44
![Page 45: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/45.jpg)
Gestalt Principle – Common Fate
45
![Page 46: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/46.jpg)
Common Fate - Example
46
![Page 47: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/47.jpg)
Common Fate - Example
47
![Page 48: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/48.jpg)
Gestalt Principle - Continuity
48
![Page 49: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/49.jpg)
Gestalt Principle - Continuity
49
![Page 50: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/50.jpg)
Gestalt Principle - Continuity
50
![Page 51: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/51.jpg)
Continuity - Example
51
Step 2
Step 1
Step 3
State 1
State 2
State 1
State 2
![Page 52: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/52.jpg)
Gestalt Principle – (En)closure
52
![Page 53: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/53.jpg)
Closure
53
![Page 54: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/54.jpg)
Closure
54
![Page 55: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/55.jpg)
Closure
55
![Page 56: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/56.jpg)
Closure
56
![Page 57: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/57.jpg)
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
![Page 58: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/58.jpg)
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
![Page 59: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/59.jpg)
Fitts’ Law - Example
59
Field
Field
Field
Action Cancel
![Page 60: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/60.jpg)
Fitts’ Law - Example
60
Field
Field
Field
Action Cancel
![Page 61: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/61.jpg)
Fitts’ Law - Example
61
Field
Field
Field
Action Cancel
![Page 62: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/62.jpg)
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
![Page 63: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/63.jpg)
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
![Page 64: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/64.jpg)
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
![Page 65: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/65.jpg)
Hick’s Law - Example
65
![Page 66: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/66.jpg)
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
![Page 67: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/67.jpg)
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
![Page 68: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/68.jpg)
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
![Page 70: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/70.jpg)
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
![Page 71: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/71.jpg)
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.
![Page 72: Creating Intuitive Graphical User Interfaces for IBM · PDF fileCreating Intuitive Graphical User Interfaces for IBM Informix ... other crazy to go to sea? ... We have way more red/green](https://reader034.vdocuments.us/reader034/viewer/2022051508/5aab0db07f8b9a2e088b55eb/html5/thumbnails/72.jpg)
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!