The 42 of Software-Interfaces (Part I, User-Interfaces)

First part of my "Software-Architecture-Summit" talk (Berlin, June 2013)

Transcript

1. © 2013 innoQ Deutschland GmbH 42 of So ware Interfaces The Horror of Information Technology Dr. Gernot Starke
2. © 2013 innoQ Deutschland GmbH
3. © 2013 innoQ Deutschland GmbH Why talk / think about „interfaces“?
4. © 2013 innoQ Deutschland GmbH price of good interface 100.000.000 $ http://gigaom.com/2013/03/15/how-much-did-dropbox-pay-for-mailbox/
5. © 2013 innoQ Deutschland GmbH Founded 2010. New „interface“ to Email. 13 employees. Dropbox paid approx. 100 Million $
6. © 2013 innoQ Deutschland GmbH 100.000.000 $
8. © 2013 innoQ Deutschland GmbH member of:! (co) founder of:! Fellow
9. © 2013 innoQ Deutschland GmbH Why talk / think about „interfaces“?
10. © 2013 innoQ Deutschland GmbH Why? Systems fail at interfaces... http://www.city-data.com/forum/attachments/house/
11. © 2013 innoQ Deutschland GmbH Why? Systems win with interfaces...
12. © 2013 innoQ Deutschland GmbH What‘s an „Interface“ Inter [latin]: „Between“
13. © 2013 innoQ Deutschland GmbH Interface: between what?
14. © 2013 innoQ Deutschland GmbH What to discuss about „interfaces“?
15. © 2013 innoQ Deutschland GmbH
17. © 2013 innoQ Deutschland GmbH Types of API UI Interfaces Meta- Process describing
18. © 2013 innoQ Deutschland GmbH User Interfaces
19. Innovative User Interface Demo:
20. Innovative User Interface Leap Motion Controller
21. © 2013 innoQ Deutschland GmbH User Interface 21 Layout Color Font Size Visual Style Ergonomics i18n Language Formating Psycho & Soft Issues MVC MVP Observer Binding UI-Framework Swing JSP JavaFX Griffon Widgets HTML CSS Idiom
22. © 2013 innoQ Deutschland GmbH Golden Rules for Bad User Interfaces... http://www.sapdesignguild.org/community/design/golden_rules.asp •  Make usage a challenge •  Make it mouse-only •  Hide important functions •  Help them in technical language
23. © 2013 innoQ Deutschland GmbH BAD User Interface ... By expert
24. © 2013 innoQ Deutschland GmbH Underlying data structure de nes UI...
25. © 2013 innoQ Deutschland GmbH Golden Rules for Bad User Interfaces... http://www.sapdesignguild.org/community/design/golden_rules.asp •  Make usage a challenge •  Make it mouse-only •  Hide important functions •  Help them in technical language •  Use abrvs whrv pssbl •  Make it slow •  Ignore standards
26. © 2013 innoQ Deutschland GmbH Ignored standard...
27. © 2013 innoQ Deutschland GmbH Golden Rules for Bad User Interfaces... http://www.sapdesignguild.org/community/design/golden_rules.asp •  Block user input o en •  Let application freeze from time to time
28. © 2013 innoQ Deutschland GmbH Golden Rules for Bad User Interfaces... http://www.sapdesignguild.org/community/design/golden_rules.asp •  Block user input o en •  Let application freeze from time to time •  Add a system crash sometimes
30. © 2013 innoQ Deutschland GmbH Golden Rules for Bad User Interfaces... http://www.sapdesignguild.org/community/design/golden_rules.asp •  Block user input o en •  Let application freeze from time to time •  Add a system crash sometimes •  Make it illogical
31. © 2013 innoQ Deutschland GmbH
32. © 2013 innoQ Deutschland GmbH TAB order madness ...
33. © 2013 innoQ Deutschland GmbH Don‘t enforce ...
34. © 2013 innoQ Deutschland GmbH Golden Rules for Bad User Interfaces... http://www.sapdesignguild.org/community/design/golden_rules.asp •  Block user input o en •  Let application freeze from time to time •  Add a system crash sometimes •  Make it illogical •  Let users do it the hard way •  Set bad defaults
36. Interesting...
37. © 2013 innoQ Deutschland GmbH Some complexity...
38. © 2013 innoQ Deutschland GmbH checkbox mania... http://limi.net/checkboxes-that-kill/
39. © 2013 innoQ Deutschland GmbH One-click to disaster... http://limi.net/checkboxes-that-kill/
40. © 2013 innoQ Deutschland GmbH Some Rules for Good User Interfaces... http://www.sapdesignguild.org/community/design/golden_rules.asp •  Intuitive (aka familiar)
41. © 2013 innoQ Deutschland GmbH Some Rules for Good User Interfaces... •  Intuitive (aka familiar) Needing (user) documentation is admission of failure!
42. © 2013 innoQ Deutschland GmbH Some Rules for Good User Interfaces... http://www.sapdesignguild.org/community/design/golden_rules.asp •  Clear, concise, no clutter
43. © 2013 innoQ Deutschland GmbH Some Rules for Good User Interfaces... http://www.sapdesignguild.org/community/design/golden_rules.asp •  Responsive, feels fast
44. © 2013 innoQ Deutschland GmbH Some Rules for Good User Interfaces... http://www.sapdesignguild.org/community/design/golden_rules.asp •  Consistent
45. © 2013 innoQ Deutschland GmbH Some Rules for Good User Interfaces... http://www.sapdesignguild.org/community/design/golden_rules.asp •  Attractive
46. © 2013 innoQ Deutschland GmbH Less is more attractive...
47. © 2013 innoQ Deutschland GmbH align...
48. © 2013 innoQ Deutschland GmbH Some Rules for Good User Interfaces... http://www.sapdesignguild.org/community/design/golden_rules.asp •  Forgiving •  O er simple error handling
49. © 2013 innoQ Deutschland GmbH Some Rules for Good User Interfaces... http://www.sapdesignguild.org/community/design/golden_rules.asp •  Allow shortcuts •  Informative feedback •  Forgiving •  O er simple error handling •  Think flow, not feature •  Intuitive (aka familiar) •  Clear, concise, no clutter •  Responsive, feels fast •  Consistent •  Attractive
50. © 2013 innoQ Deutschland GmbH pdf-stamper HANDOUT add pagenumbers [, add chapter-id/number] [, combine into single pdf] [, add header] [, encrypt / secure] common-header chapter 1, page 1 ....
51. © 2013 innoQ Deutschland GmbH Design UI for pdf-stamper 0: some pdf les in source-dir 1: select source+ target dir + options 2: start processing 3: done http://openeuropeblog.blogspot.de/2013/03/the-triple-challenge-behind-eu-move-to.html
52. © 2013 innoQ Deutschland GmbH Design UI for pdf-stamper •  2 x FileChooser •  String inputs: •  Header •  File pre x •  Page pre x http://openeuropeblog.blogspot.de/2013/03/the-triple-challenge-behind-eu-move-to.html •  Boolean options: •  combine •  Evenify •  Start processing
53. Mediocre UI for pdf-stamper
54. © 2013 innoQ Deutschland GmbH One Column goodui.org
55. © 2013 innoQ Deutschland GmbH Give something away goodui.org
56. © 2013 innoQ Deutschland GmbH Merge similar functions goodui.org
57. © 2013 innoQ Deutschland GmbH Repeat primary action goodui.org
58. © 2013 innoQ Deutschland GmbH Recommend! goodui.org
59. © 2013 innoQ Deutschland GmbH Undo instead of con rmation goodui.org
60. © 2013 innoQ Deutschland GmbH Contrast goodui.org
61. © 2013 innoQ Deutschland GmbH Ask User Interface experts!
62. © 2013 innoQ Deutschland GmbH Short Break… 62