1. 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

2. Arthur Fink Page 2 Thinking User Design

3. Arthur Fink Page 3 Programming Designing Listening / Seeing

4. 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 !

5. 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!

6. Arthur Fink Page 6 A “old” program that was easy to use

7. Arthur Fink Page 7 Only got harder to learn

8. Arthur Fink Page 8 And the paid version even harder

9. 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.

10. Arthur Fink Page 10 Designing user interfaces that work

11. Arthur Fink Page 11 And that don’t confuse

12. Arthur Fink Page 12 Interfaces that are simple and direct

13. Arthur Fink Page 13 Which knob controls lower left burner?

14. Arthur Fink Page 14 Small changes can make a big difference

15. Arthur Fink Page 15 Fear of change – and blindness to the gain

16. Arthur Fink Page 16 Listen to users

17. Arthur Fink Page 17 Automation anthropologist at work

18. 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?

19. Arthur Fink Page 19 Users need simplicity  Easy to learn  Easy to use  Easy to enter data  Hard to “mess up”

20. 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

21. Arthur Fink Page 21 Clear labels

22. Arthur Fink Page 22 Which way to room 1512?

23. Arthur Fink Page 23 A sign that might work

24. Arthur Fink Page 24 Offer a clear message users need to hear!

25. Arthur Fink Page 25 Don’t hide your controls ,,

26. Arthur Fink Page 26 Don’t hide your controls ,,

27. Arthur Fink Page 27 Don’t just mark the hazard; eliminate it!

28. Arthur Fink Page 28 Not "Error" messages – positive hints

29. Arthur Fink Page 29 Instead of this rebuke

30. Arthur Fink Page 30 Encouraging feedback – sounds and sights  Saving project.....  Saving project....…  Saving project..........  Saving project.............  Saving project................  Saving project...................

31. 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

32. Arthur Fink Page 32 Optimize for the common cases  Simplify the most common input case.  Unusual cases may take more key strokes.

33. 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)

34. Arthur Fink Page 34 Microsoft Health Common User Interface

35. Arthur Fink Page 35 A medicine list (from MHCUI)

36. Arthur Fink Page 36 Prescription (Rx) form (from MHCUI)

37. Arthur Fink Page 37 Rx form – filled in (from MHCUI)

38. Arthur Fink Page 38 Standards for consistency (from MHCUI)

39. Arthur Fink Page 39 Visual standards (from MHCUI)

40. Arthur Fink Page 40 Visual standards applied (from MHCUI)

41. Arthur Fink Page 41 Display order for medications (from MHCUI)

42. Arthur Fink Page 42 Distinguishing similar data (from MHCUI)

43. Arthur Fink Page 43 Choosing the right control  Not necessarily the fanciest  Learning curve vs. power user features

44. 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.

45. 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

46. 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.)

47. Arthur Fink Page 47 Using the controls right (or not!)

48. Arthur Fink Page 48 Using the controls right (or not!)

49. Arthur Fink Page 49 This window looks clear

50. Arthur Fink Page 50 A confusing window

51. Arthur Fink Page 51 The confusion here can be dangerous

52. Arthur Fink Page 52 Progress (OpenEdge) has the tools...

53. Arthur Fink Page 53 Lots of tools... !

54. Arthur Fink Page 54 But... you still need to design

55. Arthur Fink Page 55 The purpose of type is to be read

56. 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”

57. 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!

58. Arthur Fink Page 58 Time for your questions, your concerns ? ? ?

59. Arthur Fink Page 59 Extra slides (if there is time)

60. Arthur Fink Page 60 The client’s initial screen (!)

61. Arthur Fink Page 61 Cash register screen – design idea #1

62. Arthur Fink Page 62 Cash register screen – design idea #2

63. Arthur Fink Page 63 Cash register screen – design idea #3

64. Arthur Fink Page 64 Cash register screen – design idea #4

65. Arthur Fink Page 65 Cash register screen – design idea #5

66. Arthur Fink Page 66 Cash register screen – design idea #6

67. Arthur Fink Page 67 Cash register screen – design idea #8