Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Stefaan LesageEmail : Stefaan.Lesage@devia.be / Twitter : @StefaanLesagehttp://www.devia.be
UI <> UXStefaan LesageEmail : Stefaan.Lesage@devia.be / Twitter : @StefaanLesagehttp://www.devia.be
UI <> UXAnd why you should  care about that.Stefaan LesageEmail : Stefaan.Lesage@devia.be / Twitter : @StefaanLesagehttp:/...
What is UI ?
What is UI ?What the user sees and uses
What is UI ?What the user sees and uses   Visual organization of       components
What is UI ?What the user sees and uses   Visual organization of       components           Pixels
Example
ExampleThe technology and design of my dream car ... a Tesla Model S
ExampleThe technology and design of my dream car ... a Tesla Model S
What is UX ?
What is UX ? How everything works       together
What is UX ? How everything works       together  Overall Experience
What is UX ?  How everything works        together    Overall ExperienceBalance between beauty and         usability
What is UX ?  How everything works        together    Overall ExperienceBalance between beauty and         usability      ...
Example
ExampleThe smile on the face of the people driving their Tesla Model S               http://player.vimeo.com/video/44713180
ExampleThe smile on the face of the people driving their Tesla Model S               http://player.vimeo.com/video/44713180
What makes good UX ?
What makes good UX ?      Looks good
What makes good UX ?      Looks good      Responsive
What makes good UX ?        Looks good         Responsive Easy to learn, understand &             Use
What makes good UX ?        Looks good         Responsive Easy to learn, understand &             Use        Small things
What makes good UX ?        Looks good         Responsive Easy to learn, understand &             Use        Small things ...
Talking about bad UX
Talking about bad UX
Talking about bad UX
Talking about bad UX
Problems
ProblemsHard to see in direct sunlight
ProblemsHard to see in direct sunlight  Visual representation <>       Physical Layout
ProblemsHard to see in direct sunlight  Visual representation <>       Physical Layout Mix 2 inputs on 2 devices
ProblemsHard to see in direct sunlight  Visual representation <>       Physical Layout Mix 2 inputs on 2 devices         C...
UI <> Real World
UI <> Real World
UI <> Real World                   Pomp 1      Terminal 1                   Pomp 2                            Pomp 5      ...
UI <> Real World                   Pomp 1      Terminal 1                   Pomp 2                            Pomp 5      ...
Example
Example
Example
Example
Example
Too Confusing
Too Confusing
Too Confusing
Too Confusing
The Button
The Button
The Button
The Button
The Button
Balance
Balance
Balance
Balance
Balance
Balance
Balance
Balance
Balance
Balance
Balance
Balance
Balance
Balance (take 2)
Balance (take 2)
Balance (take 3)
Balance (take 3)
Balance (take 3)
Old vs New
Old vs New
Old vs New
Old vs New
Old vs New
Search Example
Search Example• Searching on (almost) every field• Searching on combinations• Save SearchesHow our view on de Delphi side  ...
Search anno 2003
Search anno 2004
Search anno 2006
Search anno 2008
Search anno 2012
Search anno 2012
Search anno 2012
Search anno 2012
Search anno 2012
Search anno 2012
UI vs UX
UI vs UXUI is in fact part of the whole      User Experience ...
UI vs UXUI is in fact part of the whole      User Experience ...it is only a small part of the    whole User Experience
gmusicbrowser
gmusicbrowser
iTunes
iTunes
What is UX not ?
What is UX not ?   NOT user interface design
What is UX not ?   NOT user interface design    NOT a step in a process
What is UX not ?   NOT user interface design    NOT a step in a process   NOT just about technology
What is UX not ?   NOT user interface design    NOT a step in a process   NOT just about technology    NOT just about usab...
What is UX not ?   NOT user interface design    NOT a step in a process   NOT just about technology    NOT just about usab...
What is UX not ?   NOT user interface design    NOT a step in a process   NOT just about technology    NOT just about usab...
What is UX not ?   NOT user interface design    NOT a step in a process   NOT just about technology    NOT just about usab...
What is UX not ?   NOT user interface design    NOT a step in a process   NOT just about technology    NOT just about usab...
But ... it works !
But ... it works !   Times have changed ...It works just isnt good enough              to :
But ... it works !   Times have changed ...It works just isnt good enough              to :     • work 
But ... it works !   Times have changed ...It works just isnt good enough              to :     • work      • be easy to use
But ... it works !   Times have changed ...It works just isnt good enough              to :     • work      • be easy to u...
UX done right ...
UX done right ...
UX done right ...      • Round toast
UX done right ...      • Round toast      • Hard to get it out        without breaking
UX done right ...      • Round toast      • Hard to get it out        without breaking      • Unless ...
Beschuit van Bolletje (www.bolletje.nl)
UX done right ...Beschuit van Bolletje (www.bolletje.nl)
UX done right ...Beschuit van Bolletje (www.bolletje.nl)
UX done right ...Beschuit van Bolletje (www.bolletje.nl)
UX done right ...Beschuit van Bolletje (www.bolletje.nl)
UX done right ...
But when you get it all
But when you get it all
... or in our own case ...
... or in our own case ...
... or in our own case ...
Questions ?
UI <> UXAnd why you should  care about that.Stefaan LesageEmail : Stefaan.Lesage@devia.be / Twitter : @StefaanLesagehttp:/...
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
UI is not the same as UX and why you should care about that (Be-Delphi 2.0)
Upcoming SlideShare
Loading in …5
×

UI is not the same as UX and why you should care about that (Be-Delphi 2.0)

2,909 views

Published on

This is the presentation I gave yersterday at the Be-Delphi conference in Belgium. The presentation was all about the difference between User Interface design and User Experience. With a few real world samples and some samples from our Delphi work I tried to show the audience that User Experience is indeed an important aspect in Software Development, and that 'It works, so lets ship it' isn't good enough anymore.

Of course this is only the keynote presentation and you might miss some of the anekdotes and stories which were mentioned during the live presentation :-)

Published in: Technology
  • Be the first to comment

UI is not the same as UX and why you should care about that (Be-Delphi 2.0)

  1. 1. Stefaan LesageEmail : Stefaan.Lesage@devia.be / Twitter : @StefaanLesagehttp://www.devia.be
  2. 2. UI <> UXStefaan LesageEmail : Stefaan.Lesage@devia.be / Twitter : @StefaanLesagehttp://www.devia.be
  3. 3. UI <> UXAnd why you should care about that.Stefaan LesageEmail : Stefaan.Lesage@devia.be / Twitter : @StefaanLesagehttp://www.devia.be
  4. 4. What is UI ?
  5. 5. What is UI ?What the user sees and uses
  6. 6. What is UI ?What the user sees and uses Visual organization of components
  7. 7. What is UI ?What the user sees and uses Visual organization of components Pixels
  8. 8. Example
  9. 9. ExampleThe technology and design of my dream car ... a Tesla Model S
  10. 10. ExampleThe technology and design of my dream car ... a Tesla Model S
  11. 11. What is UX ?
  12. 12. What is UX ? How everything works together
  13. 13. What is UX ? How everything works together Overall Experience
  14. 14. What is UX ? How everything works together Overall ExperienceBalance between beauty and usability
  15. 15. What is UX ? How everything works together Overall ExperienceBalance between beauty and usability Emotions
  16. 16. Example
  17. 17. ExampleThe smile on the face of the people driving their Tesla Model S http://player.vimeo.com/video/44713180
  18. 18. ExampleThe smile on the face of the people driving their Tesla Model S http://player.vimeo.com/video/44713180
  19. 19. What makes good UX ?
  20. 20. What makes good UX ? Looks good
  21. 21. What makes good UX ? Looks good Responsive
  22. 22. What makes good UX ? Looks good Responsive Easy to learn, understand & Use
  23. 23. What makes good UX ? Looks good Responsive Easy to learn, understand & Use Small things
  24. 24. What makes good UX ? Looks good Responsive Easy to learn, understand & Use Small things Thousands of them ...
  25. 25. Talking about bad UX
  26. 26. Talking about bad UX
  27. 27. Talking about bad UX
  28. 28. Talking about bad UX
  29. 29. Problems
  30. 30. ProblemsHard to see in direct sunlight
  31. 31. ProblemsHard to see in direct sunlight Visual representation <> Physical Layout
  32. 32. ProblemsHard to see in direct sunlight Visual representation <> Physical Layout Mix 2 inputs on 2 devices
  33. 33. ProblemsHard to see in direct sunlight Visual representation <> Physical Layout Mix 2 inputs on 2 devices Confusing
  34. 34. UI <> Real World
  35. 35. UI <> Real World
  36. 36. UI <> Real World Pomp 1 Terminal 1 Pomp 2 Pomp 5 Pomp 3 Pomp 4 Pomp 6 Pomp 7
  37. 37. UI <> Real World Pomp 1 Terminal 1 Pomp 2 Pomp 5 Where I am Pomp 3 standing Pomp 4 Pomp 6 Pomp 7
  38. 38. Example
  39. 39. Example
  40. 40. Example
  41. 41. Example
  42. 42. Example
  43. 43. Too Confusing
  44. 44. Too Confusing
  45. 45. Too Confusing
  46. 46. Too Confusing
  47. 47. The Button
  48. 48. The Button
  49. 49. The Button
  50. 50. The Button
  51. 51. The Button
  52. 52. Balance
  53. 53. Balance
  54. 54. Balance
  55. 55. Balance
  56. 56. Balance
  57. 57. Balance
  58. 58. Balance
  59. 59. Balance
  60. 60. Balance
  61. 61. Balance
  62. 62. Balance
  63. 63. Balance
  64. 64. Balance
  65. 65. Balance (take 2)
  66. 66. Balance (take 2)
  67. 67. Balance (take 3)
  68. 68. Balance (take 3)
  69. 69. Balance (take 3)
  70. 70. Old vs New
  71. 71. Old vs New
  72. 72. Old vs New
  73. 73. Old vs New
  74. 74. Old vs New
  75. 75. Search Example
  76. 76. Search Example• Searching on (almost) every field• Searching on combinations• Save SearchesHow our view on de Delphi side evolved during the years
  77. 77. Search anno 2003
  78. 78. Search anno 2004
  79. 79. Search anno 2006
  80. 80. Search anno 2008
  81. 81. Search anno 2012
  82. 82. Search anno 2012
  83. 83. Search anno 2012
  84. 84. Search anno 2012
  85. 85. Search anno 2012
  86. 86. Search anno 2012
  87. 87. UI vs UX
  88. 88. UI vs UXUI is in fact part of the whole User Experience ...
  89. 89. UI vs UXUI is in fact part of the whole User Experience ...it is only a small part of the whole User Experience
  90. 90. gmusicbrowser
  91. 91. gmusicbrowser
  92. 92. iTunes
  93. 93. iTunes
  94. 94. What is UX not ?
  95. 95. What is UX not ? NOT user interface design
  96. 96. What is UX not ? NOT user interface design NOT a step in a process
  97. 97. What is UX not ? NOT user interface design NOT a step in a process NOT just about technology
  98. 98. What is UX not ? NOT user interface design NOT a step in a process NOT just about technology NOT just about usability
  99. 99. What is UX not ? NOT user interface design NOT a step in a process NOT just about technology NOT just about usability NOT just about the user
  100. 100. What is UX not ? NOT user interface design NOT a step in a process NOT just about technology NOT just about usability NOT just about the user NOT easy
  101. 101. What is UX not ? NOT user interface design NOT a step in a process NOT just about technology NOT just about usability NOT just about the user NOT easy NOT expensive
  102. 102. What is UX not ? NOT user interface design NOT a step in a process NOT just about technology NOT just about usability NOT just about the user NOT easy NOT expensive NOT a choice
  103. 103. But ... it works !
  104. 104. But ... it works ! Times have changed ...It works just isnt good enough to :
  105. 105. But ... it works ! Times have changed ...It works just isnt good enough to : • work 
  106. 106. But ... it works ! Times have changed ...It works just isnt good enough to : • work  • be easy to use
  107. 107. But ... it works ! Times have changed ...It works just isnt good enough to : • work  • be easy to use • look great ...
  108. 108. UX done right ...
  109. 109. UX done right ...
  110. 110. UX done right ... • Round toast
  111. 111. UX done right ... • Round toast • Hard to get it out without breaking
  112. 112. UX done right ... • Round toast • Hard to get it out without breaking • Unless ...
  113. 113. Beschuit van Bolletje (www.bolletje.nl)
  114. 114. UX done right ...Beschuit van Bolletje (www.bolletje.nl)
  115. 115. UX done right ...Beschuit van Bolletje (www.bolletje.nl)
  116. 116. UX done right ...Beschuit van Bolletje (www.bolletje.nl)
  117. 117. UX done right ...Beschuit van Bolletje (www.bolletje.nl)
  118. 118. UX done right ...
  119. 119. But when you get it all
  120. 120. But when you get it all
  121. 121. ... or in our own case ...
  122. 122. ... or in our own case ...
  123. 123. ... or in our own case ...
  124. 124. Questions ?
  125. 125. UI <> UXAnd why you should care about that.Stefaan LesageEmail : Stefaan.Lesage@devia.be / Twitter : @StefaanLesagehttp://www.devia.be

×