![Page 1: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/1.jpg)
Arthur Fink Page 1
Thinking about User Interface Design
for
OpenEdge GUI for .NET(or any other environment)
by Arthur Fink www.ArthurFink.Wordpress.com
Arthur Fink Consulting www.ArthurFink.com © 2008 by Arthur Fink
![Page 2: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/2.jpg)
Arthur Fink Page 2
Thinking
User
Design
![Page 3: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/3.jpg)
Arthur Fink Page 3
Programming
Designing
Listening / Seeing
![Page 4: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/4.jpg)
Arthur Fink Page 4
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 !
![Page 5: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/5.jpg)
Arthur Fink Page 5
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!
![Page 6: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/6.jpg)
Arthur Fink Page 6
A “old” program that was easy to use
![Page 7: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/7.jpg)
Arthur Fink Page 7
Only got harder to learn
![Page 8: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/8.jpg)
Arthur Fink Page 8
And the paid version even harder
![Page 9: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/9.jpg)
Arthur Fink Page 9
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.
![Page 10: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/10.jpg)
Arthur Fink Page 10
Designing user interfaces that work
![Page 11: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/11.jpg)
Arthur Fink Page 11
And that don’t confuse
![Page 12: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/12.jpg)
Arthur Fink Page 12
Interfaces that are simple and direct
![Page 13: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/13.jpg)
Arthur Fink Page 13
Which knob controls lower left burner?
![Page 14: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/14.jpg)
Arthur Fink Page 14
Small changes can make a big difference
![Page 15: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/15.jpg)
Arthur Fink Page 15
Fear of change – and blindness to the gain
![Page 16: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/16.jpg)
Arthur Fink Page 16
Listen to users
![Page 17: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/17.jpg)
Arthur Fink Page 17
Automation anthropologist at work
![Page 18: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/18.jpg)
Arthur Fink Page 18
REAL client is the user.
What does the user need?
Not what does the client think user wants.
User need to be part of design process.
How can user be in control?
![Page 19: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/19.jpg)
Arthur Fink Page 19
Users need simplicity
Easy to learn
Easy to use
Easy to enter data
Hard to “mess up”
![Page 20: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/20.jpg)
Arthur Fink Page 20
Keep it simple,
No extra data or control
Not everything visible at once
Rarely used features rarely visible
User in control – can drill down
![Page 21: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/21.jpg)
Arthur Fink Page 21
Clear labels
![Page 22: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/22.jpg)
Arthur Fink Page 22
Which way to room 1512?
![Page 23: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/23.jpg)
Arthur Fink Page 23
A sign that might work
![Page 24: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/24.jpg)
Arthur Fink Page 24
Offer a clear message users need to hear!
![Page 25: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/25.jpg)
Arthur Fink Page 25
Don’t hide your controls
,
![Page 26: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/26.jpg)
Arthur Fink Page 26
Don’t hide your controls
,
![Page 27: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/27.jpg)
Arthur Fink Page 27
Don’t just mark the hazard; eliminate it!
![Page 28: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/28.jpg)
Arthur Fink Page 28
Not "Error" messages – positive hints
![Page 29: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/29.jpg)
Arthur Fink Page 29
Instead of this rebuke
![Page 30: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/30.jpg)
Arthur Fink Page 30
Encouraging feedback – sounds and sights
Saving project ..... Saving project ....… Saving project .......... Saving project ............. Saving project ................ Saving project ...................
![Page 31: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/31.jpg)
Arthur Fink Page 31
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
![Page 32: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/32.jpg)
Arthur Fink Page 32
Optimize for the common cases
Simplify the most common input case.
Unusual cases may take more key strokes.
![Page 33: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/33.jpg)
Arthur Fink Page 33
Allow mouse OR keyboard (when possible)
Hand movement mouse to / from keyboard takes time
(Exception to “one way to do things” rule)
![Page 34: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/34.jpg)
Arthur Fink Page 34
Microsoft Health Common User Interface
![Page 35: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/35.jpg)
Arthur Fink Page 35
A medicine list (from MHCUI)
![Page 36: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/36.jpg)
Arthur Fink Page 36
Prescription (Rx) form (from MHCUI)
![Page 37: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/37.jpg)
Arthur Fink Page 37
Rx form – filled in (from MHCUI)
![Page 38: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/38.jpg)
Arthur Fink Page 38
Standards for consistency (from MHCUI)
![Page 39: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/39.jpg)
Arthur Fink Page 39
Visual standards (from MHCUI)
![Page 40: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/40.jpg)
Arthur Fink Page 40
Visual standards applied (from MHCUI)
![Page 41: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/41.jpg)
Arthur Fink Page 41
Display order for medications (from MHCUI)
![Page 42: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/42.jpg)
Arthur Fink Page 42
Distinguishing similar data (from MHCUI)
![Page 43: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/43.jpg)
Arthur Fink Page 43
Choosing the right control
Not necessarily the fanciest
Learning curve vs. power user features
![Page 44: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/44.jpg)
Arthur Fink Page 44
The right control
Accepts simple direct input
Offer clear unambiguous display
Does require computation or conversion
Doesn’t have many un-used options.
![Page 45: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/45.jpg)
Arthur Fink Page 45
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
![Page 46: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/46.jpg)
Arthur Fink Page 46
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.)
![Page 47: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/47.jpg)
Arthur Fink Page 47
Using the controls right (or not!)
![Page 48: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/48.jpg)
Arthur Fink Page 48
Using the controls right (or not!)
![Page 49: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/49.jpg)
Arthur Fink Page 49
This window looks clear
![Page 50: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/50.jpg)
Arthur Fink Page 50
A confusing window
![Page 51: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/51.jpg)
Arthur Fink Page 51
The confusion here can be dangerous
![Page 52: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/52.jpg)
Arthur Fink Page 52
Progress (OpenEdge) has the tools . . .
![Page 53: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/53.jpg)
Arthur Fink Page 53
Lots of tools . . . !
![Page 54: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/54.jpg)
Arthur Fink Page 54
But . . . you still need to design
![Page 55: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/55.jpg)
Arthur Fink Page 55
The purpose of type is to be read
![Page 56: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/56.jpg)
Arthur Fink Page 56
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”
![Page 57: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/57.jpg)
Arthur Fink Page 57
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!
![Page 58: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/58.jpg)
Arthur Fink Page 58
Time for your questions, your concerns
? ? ?
![Page 59: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/59.jpg)
Arthur Fink Page 59
Extra slides (if there is time)
![Page 60: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/60.jpg)
Arthur Fink Page 60
The client’s initial screen (!)
![Page 61: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/61.jpg)
Arthur Fink Page 61
Cash register screen – design idea #1
![Page 62: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/62.jpg)
Arthur Fink Page 62
Cash register screen – design idea #2
![Page 63: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/63.jpg)
Arthur Fink Page 63
Cash register screen – design idea #3
![Page 64: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/64.jpg)
Arthur Fink Page 64
Cash register screen – design idea #4
![Page 65: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/65.jpg)
Arthur Fink Page 65
Cash register screen – design idea #5
![Page 66: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/66.jpg)
Arthur Fink Page 66
Cash register screen – design idea #6
![Page 67: Arthur Fink Page 1 Thinking about User Interface Design for OpenEdge GUI for.NET (or any other environment) by Arthur Fink](https://reader030.vdocuments.us/reader030/viewer/2022032703/56649d2b5503460f94a00294/html5/thumbnails/67.jpg)
Arthur Fink Page 67
Cash register screen – design idea #8