arthur fink page 1 notes on designing user interfaces for openedge gui for.net arthur fink arthur...
TRANSCRIPT
Arthur Fink Page 1
Notes on Designing User Interfaces
for
OpenEdge GUI for .NET
Arthur FinkArthur Fink Consulting
www.arthurfink.com © 2008 by Arthur Fink
Arthur Fink Page 2
My promise
You'll learn guidelines for visual design of modern user-friendly OpenEdge applications
combining rich full-featured controls into simple easy to use applications.
Not a “paint by numbers” toolkit !
Arthur Fink Page 3
Moving to .NET is a re-write
Opportunity to rework whole concept
Not a one-to one screen replacement
Make sure UI gets better – not worse!
Arthur Fink Page 4
A “old” program that was easy to use
Arthur Fink Page 5
Only got harder to learn
Arthur Fink Page 6
And the paid version even harder
Arthur Fink Page 7
Our process
Careful observation of user tasks and goals
Real user role in design and testing
Consistent and clear visual standards
Careful selection, styling and use of all .NET controls and other components.
Arthur Fink Page 8
Designing user interfaces that work
Arthur Fink Page 9
Which knob controls lower left burner?
Arthur Fink Page 10
Small changes can make a big difference
Arthur Fink Page 11
Fear of change – and blindness to the gain
Arthur Fink Page 12
Listen to users
Arthur Fink Page 13
Automation anthropologist at work
Arthur Fink Page 14
REAL client is the user.
What does the user need?
Not what does client think user wants.
User need to be part of design process.
How can user be in control during operations?
Arthur Fink Page 15
Users need simplicity
Easy to learn
Easy to use
Easy to enter data
Hard to “mess up”
Arthur Fink Page 16
Keep it simple,
No extra data or control
Not everything visible at once
Rarely used features rarely visible
User in control – can drill down
Arthur Fink Page 17
Clear labels
Arthur Fink Page 18
Which way to room 1512?
Arthur Fink Page 19
Offer a clear message users need to hear!
Arthur Fink Page 20
Don’t hide your controls
,
Arthur Fink Page 21
Don’t hide your controls
,
Arthur Fink Page 22
Don’t just mark the hazard; eliminate it!
Arthur Fink Page 23
Not "Error" messages – positive hints
Arthur Fink Page 24
Instead of this rebuke
Arthur Fink Page 25
Encouraging feedback – sounds and sights
Saving project ..... Saving project ....… Saving project .......... Saving project ............. Saving project ................ Saving project ...................
Arthur Fink Page 26
Consistency IS for us
One way to do things
Common view from screens, paper forms, reports
Same terminology
Ideally the same code is behind each
Arthur Fink Page 27
Optimize for the common cases
Simplify the most common input case.
Unusual cases may take more key strokes.
Arthur Fink Page 28
Allow mouse OR keyboard (when possible)
Hand movement mouse to / from keyboard takes time
(Exception to “one way to do things” rule)
Arthur Fink Page 29
Microsoft Health Common User Interface
Arthur Fink Page 30
A medicine list (from MHCUI)
Arthur Fink Page 31
Prescription (Rx) form (from MHCUI)
Arthur Fink Page 32
Rx form – filled in (from MHCUI)
Arthur Fink Page 33
Standards for consistency (from MHCUI)
Arthur Fink Page 34
Visual standards (from MHCUI)
Arthur Fink Page 35
Visual standards applied (from MHCUI)
Arthur Fink Page 36
Display order for medications (from MHCUI)
Arthur Fink Page 37
Distinguishing similar data (from MHCUI)
Arthur Fink Page 38
Choosing the right control
Not necessarily the fanciest
Learning curve vs. power user features
Arthur Fink Page 39
The right control
Accepts simple direct input
Offer clear unambiguous display
Does require computation or conversion
Doesn’t have many un-used options.
Arthur Fink Page 40
The right control (continued)
Can’t be replaced by something simpler.
Invites easy use (clear affordance)
Is easy to use; hard to mis-use
Has unobtrusive but clear operation
Arthur Fink Page 41
The right control (continued)
Doesn’t make user “think” at all
Has common visual style with other controls
Is visually attractive, and easily readable
Is often familiar to user (from Word, Excel, etc.)
Arthur Fink Page 42
Using the controls right (or not!)
Arthur Fink Page 43
Using the controls right (or not!)
Arthur Fink Page 44
This window looks clear
Arthur Fink Page 45
A confusing window
Arthur Fink Page 46
The confusion here can be dangerous
Arthur Fink Page 47
Progress (OpenEdge) has the tools . . .
Arthur Fink Page 48
More Progress (OpenEdge) . . .
Arthur Fink Page 49
A system that really works
Allow quick, easy, accurate data input
Provides prompt and helpful feedback
Lets the user feel in control
Isn’t hurt by user “mistakes”
Arthur Fink Page 50
A few more guidelines
Don’t interrupt users, or tell them that something worked.
Don’t provide information users can’t use.
Provide “undo” for any destructive action.
Design the interface before starting to code!
Arthur Fink Page 51
Time for your questions, your concerns
? ? ?