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

2,568 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,568
On SlideShare
0
From Embeds
0
Number of Embeds
1,233
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Welcome ... I’m Stefaan Lesage and feel free to get a hold of me ...\nOur company is Devia and we do Software Development (mostly Delphi), but from time to time we also do some stuff with Media (Screencasts ...).\nThis session contains no code ... Tried to add some real world examples \nBut ... you will learn about my dream car, my issues with our local gas station and my problem with balance.\nScreenshots of our WMS Client ... still work in progress\n
  • Welcome ... I’m Stefaan Lesage and feel free to get a hold of me ...\nOur company is Devia and we do Software Development (mostly Delphi), but from time to time we also do some stuff with Media (Screencasts ...).\nThis session contains no code ... Tried to add some real world examples \nBut ... you will learn about my dream car, my issues with our local gas station and my problem with balance.\nScreenshots of our WMS Client ... still work in progress\n
  • To compare it with a real world example ... the UI is what people use to interact with your product. it’s the pixels.\n
  • To compare it with a real world example ... the UI is what people use to interact with your product. it’s the pixels.\n
  • To compare it with a real world example ... the UI is what people use to interact with your product. it’s the pixels.\n
  • To compare it with a real world example ... the UI is what people use to interact with your product. it’s the pixels.\n
  • If you want to compare UI to something from the real world ... then this would be a good example :\nThe beauty and technology used in my Dream car ... a Tesla Model S\n
  • If you want to compare UI to something from the real world ... then this would be a good example :\nThe beauty and technology used in my Dream car ... a Tesla Model S\n
  • If you want to compare UI to something from the real world ... then this would be a good example :\nThe beauty and technology used in my Dream car ... a Tesla Model S\n
  • The overall experience and satisfaction a user has when using your product. It’s an emotional state ... so rather subjective !\n
  • The overall experience and satisfaction a user has when using your product. It’s an emotional state ... so rather subjective !\n
  • The overall experience and satisfaction a user has when using your product. It’s an emotional state ... so rather subjective !\n
  • The overall experience and satisfaction a user has when using your product. It’s an emotional state ... so rather subjective !\n
  • The overall experience and satisfaction a user has when using your product. It’s an emotional state ... so rather subjective !\n
  • Now ... if I would take the Tesla Model S dream car analogy again ... then the User Experience is the smile on the face of those people who take it out for a first ride !\nUI is the engine, the steering wheel, the Chassis.\nUX is the feeling you get being able to drive a fully electric car, the satisfaction you get when pressing the gas pedal.\n
  • Now ... if I would take the Tesla Model S dream car analogy again ... then the User Experience is the smile on the face of those people who take it out for a first ride !\nUI is the engine, the steering wheel, the Chassis.\nUX is the feeling you get being able to drive a fully electric car, the satisfaction you get when pressing the gas pedal.\n
  • Now ... if I would take the Tesla Model S dream car analogy again ... then the User Experience is the smile on the face of those people who take it out for a first ride !\nUI is the engine, the steering wheel, the Chassis.\nUX is the feeling you get being able to drive a fully electric car, the satisfaction you get when pressing the gas pedal.\n
  • Responsive doesn't mean it’s fast ... it means it will show the user that it is doing somehting.\nSo ... lets start with the first small thing and see how far we get in an hour.\n
  • Responsive doesn't mean it’s fast ... it means it will show the user that it is doing somehting.\nSo ... lets start with the first small thing and see how far we get in an hour.\n
  • Responsive doesn't mean it’s fast ... it means it will show the user that it is doing somehting.\nSo ... lets start with the first small thing and see how far we get in an hour.\n
  • Responsive doesn't mean it’s fast ... it means it will show the user that it is doing somehting.\nSo ... lets start with the first small thing and see how far we get in an hour.\n
  • Responsive doesn't mean it’s fast ... it means it will show the user that it is doing somehting.\nSo ... lets start with the first small thing and see how far we get in an hour.\n
  • Responsive doesn't mean it’s fast ... it means it will show the user that it is doing somehting.\nSo ... lets start with the first small thing and see how far we get in an hour.\n
  • This is our local Gas Station, and lots of gas stations in Belgium look have terminals like this.\nTo me ... they are a nightmare, and the one at our local gas station drives me nuts.\n
  • This is our local Gas Station, and lots of gas stations in Belgium look have terminals like this.\nTo me ... they are a nightmare, and the one at our local gas station drives me nuts.\n
  • This is our local Gas Station, and lots of gas stations in Belgium look have terminals like this.\nTo me ... they are a nightmare, and the one at our local gas station drives me nuts.\n
  • This is our local Gas Station, and lots of gas stations in Belgium look have terminals like this.\nTo me ... they are a nightmare, and the one at our local gas station drives me nuts.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Explain how it works ... (emotional)\nLower yourself to it’s level ... try to put your hand between the sun and the display ... put in the card\nlook at the freaking display ... hesitate ... check the number on the pump ... find the button on the screen ...\nmove to the other display / input to enter code\nswitch back to the touch display\nscream in utter joy once you have it\nMaybe also explain the poor color choices ... what do people associate with red ?\n\n
  • Explain how it works ... (emotional)\nLower yourself to it’s level ... try to put your hand between the sun and the display ... put in the card\nlook at the freaking display ... hesitate ... check the number on the pump ... find the button on the screen ...\nmove to the other display / input to enter code\nswitch back to the touch display\nscream in utter joy once you have it\nMaybe also explain the poor color choices ... what do people associate with red ?\n\n
  • Explain how it works ... (emotional)\nLower yourself to it’s level ... try to put your hand between the sun and the display ... put in the card\nlook at the freaking display ... hesitate ... check the number on the pump ... find the button on the screen ...\nmove to the other display / input to enter code\nswitch back to the touch display\nscream in utter joy once you have it\nMaybe also explain the poor color choices ... what do people associate with red ?\n\n
  • Explain how it works ... (emotional)\nLower yourself to it’s level ... try to put your hand between the sun and the display ... put in the card\nlook at the freaking display ... hesitate ... check the number on the pump ... find the button on the screen ...\nmove to the other display / input to enter code\nswitch back to the touch display\nscream in utter joy once you have it\nMaybe also explain the poor color choices ... what do people associate with red ?\n\n
  • The main screen for managing the layout of a warehouse\nWarehouse ... zones ... locations. Location is a street ... section ... level ... subsection ...\nEntering everything manually would be too much work, so we made a wizzard\n
  • The main screen for managing the layout of a warehouse\nWarehouse ... zones ... locations. Location is a street ... section ... level ... subsection ...\nEntering everything manually would be too much work, so we made a wizzard\n
  • The wizard could have looked like this. It would have done the job, but it might have been a little confusing.\nInstead we added the visual representation of a section ... and suddenly it became a wonder tool.\n
  • The wizard could have looked like this. It would have done the job, but it might have been a little confusing.\nInstead we added the visual representation of a section ... and suddenly it became a wonder tool.\n
  • On the topic of confusing your user, I once noticed these signs and I immediately felt lost.\nWissant was only 2 km further up, but still these sings made me feel lost.\n
  • Zelzate Brug electronic signs which said : Brug Open ... Brug Dicht ... Bridge Open ... Bridge Closed...\nSo ... bridge open ... people take that route only to notice that the bridge was standing open to let ships go through\nThey had to change the electronic sign ... now it says ... Brug staat open ... something like Bridge raised ...\nAnd they added a visual representation of a raised bridge just in case.\n
  • Zelzate Brug electronic signs which said : Brug Open ... Brug Dicht ... Bridge Open ... Bridge Closed...\nSo ... bridge open ... people take that route only to notice that the bridge was standing open to let ships go through\nThey had to change the electronic sign ... now it says ... Brug staat open ... something like Bridge raised ...\nAnd they added a visual representation of a raised bridge just in case.\n
  • BOM ... Search articles ... add them to a list ...Dual List Boxes ... Explain ... \n2 Buttons would have been too easy\n1 button is an innovative UI ???? It is bound to give us problems ... and it will start when training people to work with it.\nFirst User question ... but how do we get the items out ... Our answer ... button changes when other grid has focus\nSecond User Question ... but what is focus and how do I give something focus ?\nClient won ... for a while ...\n
  • BOM ... Search articles ... add them to a list ...Dual List Boxes ... Explain ... \n2 Buttons would have been too easy\n1 button is an innovative UI ???? It is bound to give us problems ... and it will start when training people to work with it.\nFirst User question ... but how do we get the items out ... Our answer ... button changes when other grid has focus\nSecond User Question ... but what is focus and how do I give something focus ?\nClient won ... for a while ...\n
  • BOM ... Search articles ... add them to a list ...Dual List Boxes ... Explain ... \n2 Buttons would have been too easy\n1 button is an innovative UI ???? It is bound to give us problems ... and it will start when training people to work with it.\nFirst User question ... but how do we get the items out ... Our answer ... button changes when other grid has focus\nSecond User Question ... but what is focus and how do I give something focus ?\nClient won ... for a while ...\n
  • BOM ... Search articles ... add them to a list ...Dual List Boxes ... Explain ... \n2 Buttons would have been too easy\n1 button is an innovative UI ???? It is bound to give us problems ... and it will start when training people to work with it.\nFirst User question ... but how do we get the items out ... Our answer ... button changes when other grid has focus\nSecond User Question ... but what is focus and how do I give something focus ?\nClient won ... for a while ...\n
  • BOM ... Search articles ... add them to a list ...Dual List Boxes ... Explain ... \n2 Buttons would have been too easy\n1 button is an innovative UI ???? It is bound to give us problems ... and it will start when training people to work with it.\nFirst User question ... but how do we get the items out ... Our answer ... button changes when other grid has focus\nSecond User Question ... but what is focus and how do I give something focus ?\nClient won ... for a while ...\n
  • Explain ... it’s always a compromise between different things. \nShow the search example and how everything evolved ...\n
  • The button store ... part 2.\nSame concept ... but with 2 options to choose from ... Pick from a list of articles or from a template.\nThere is something wrong with balance was my first response\n\n
  • The button store ... part 2.\nSame concept ... but with 2 options to choose from ... Pick from a list of articles or from a template.\nThere is something wrong with balance was my first response\n\n
  • The button store ... part 2.\nSame concept ... but with 2 options to choose from ... Pick from a list of articles or from a template.\nThere is something wrong with balance was my first response\n\n
  • Check the layout of this dialog and the number of horizontal lines you can spot.\nI didn’t add them all, but I could have easily found some more. This is what I call balance.\nThe left side of the dialogue isn’t balanced out with the right side.\n\n
  • Check the layout of this dialog and the number of horizontal lines you can spot.\nI didn’t add them all, but I could have easily found some more. This is what I call balance.\nThe left side of the dialogue isn’t balanced out with the right side.\n\n
  • Check the layout of this dialog and the number of horizontal lines you can spot.\nI didn’t add them all, but I could have easily found some more. This is what I call balance.\nThe left side of the dialogue isn’t balanced out with the right side.\n\n
  • Check the layout of this dialog and the number of horizontal lines you can spot.\nI didn’t add them all, but I could have easily found some more. This is what I call balance.\nThe left side of the dialogue isn’t balanced out with the right side.\n\n
  • Check the layout of this dialog and the number of horizontal lines you can spot.\nI didn’t add them all, but I could have easily found some more. This is what I call balance.\nThe left side of the dialogue isn’t balanced out with the right side.\n\n
  • Check the layout of this dialog and the number of horizontal lines you can spot.\nI didn’t add them all, but I could have easily found some more. This is what I call balance.\nThe left side of the dialogue isn’t balanced out with the right side.\n\n
  • Check the layout of this dialog and the number of horizontal lines you can spot.\nI didn’t add them all, but I could have easily found some more. This is what I call balance.\nThe left side of the dialogue isn’t balanced out with the right side.\n\n
  • Check the layout of this dialog and the number of horizontal lines you can spot.\nI didn’t add them all, but I could have easily found some more. This is what I call balance.\nThe left side of the dialogue isn’t balanced out with the right side.\n\n
  • Check the layout of this dialog and the number of horizontal lines you can spot.\nI didn’t add them all, but I could have easily found some more. This is what I call balance.\nThe left side of the dialogue isn’t balanced out with the right side.\n\n
  • Already a lot better ... yet ... still too many lines, and the left side still didn’t have the same look and feel.\nNo indication of which row is selected.\nUnused space below left grid and above right grid.\nStill had an issue with the buttons.\n\n
  • Already a lot better ... yet ... still too many lines, and the left side still didn’t have the same look and feel.\nNo indication of which row is selected.\nUnused space below left grid and above right grid.\nStill had an issue with the buttons.\n\n
  • Same screen ... but ...\nBetter overall balance.\nLeft side looks like right side (yellow borders ... tabsheets). \nNo more lost space by moving the button from below the right grid to above the right grid.\nThe Trashcan won’t be accidentally clicked all that often anymore.\nAs you can see ... User Experience is a process ...\n
  • Same screen ... but ...\nBetter overall balance.\nLeft side looks like right side (yellow borders ... tabsheets). \nNo more lost space by moving the button from below the right grid to above the right grid.\nThe Trashcan won’t be accidentally clicked all that often anymore.\nAs you can see ... User Experience is a process ...\n
  • Same screen ... but ...\nBetter overall balance.\nLeft side looks like right side (yellow borders ... tabsheets). \nNo more lost space by moving the button from below the right grid to above the right grid.\nThe Trashcan won’t be accidentally clicked all that often anymore.\nAs you can see ... User Experience is a process ...\n
  • Still issues with the buttons ... but hey ... it’s a lot better.\nThings we still changed is the colors. No more green and red only in the Qty Column. (for colorblind people)\n
  • Still issues with the buttons ... but hey ... it’s a lot better.\nThings we still changed is the colors. No more green and red only in the Qty Column. (for colorblind people)\n
  • Still issues with the buttons ... but hey ... it’s a lot better.\nThings we still changed is the colors. No more green and red only in the Qty Column. (for colorblind people)\n
  • Still issues with the buttons ... but hey ... it’s a lot better.\nThings we still changed is the colors. No more green and red only in the Qty Column. (for colorblind people)\n
  • Still issues with the buttons ... but hey ... it’s a lot better.\nThings we still changed is the colors. No more green and red only in the Qty Column. (for colorblind people)\n
  • \n
  • \n
  • Simple search ... exact matches ... always AND ... knowledge on the user side.\nUser has to know in which field the data he is looking for was entered\n
  • A lot more flexible ... Begins with ... contains ... all OR ... still knowledge on the user side.\nUser has to know in which field the data he is looking for was entered\n
  • Bit the same as previous one ... lots of flexibility ... lots of posisbilities ... eaquals ... contains ... does not contain ... begins ... ends ...\nAND / OR ... still ... impossible to explain ... user wants to see STE and SAN but has to enter OR ... \nEveryone from East Flanders but not Gent and Evergem ... brackets ... exploding breains.\n
  • Less flexible than previous version ... but a lot easier for the user ... and ... better UI than in 2003\n
  • Search for anything ... default OR ... and & ...\nKeywords @HeeftFoto @GeenFoto \nSpecific searches Groep=Omvormers\nLoad and save filters\nUser doesn’t have to know in which field a code was added ... system looks for it and finds it ... whatever field it’s in\nIt’s a search system which works for you ... instead of the user having to know and work to get the correct search results.\n
  • Search for anything ... default OR ... and & ...\nKeywords @HeeftFoto @GeenFoto \nSpecific searches Groep=Omvormers\nLoad and save filters\nUser doesn’t have to know in which field a code was added ... system looks for it and finds it ... whatever field it’s in\nIt’s a search system which works for you ... instead of the user having to know and work to get the correct search results.\n
  • Search for anything ... default OR ... and & ...\nKeywords @HeeftFoto @GeenFoto \nSpecific searches Groep=Omvormers\nLoad and save filters\nUser doesn’t have to know in which field a code was added ... system looks for it and finds it ... whatever field it’s in\nIt’s a search system which works for you ... instead of the user having to know and work to get the correct search results.\n
  • Search for anything ... default OR ... and & ...\nKeywords @HeeftFoto @GeenFoto \nSpecific searches Groep=Omvormers\nLoad and save filters\nUser doesn’t have to know in which field a code was added ... system looks for it and finds it ... whatever field it’s in\nIt’s a search system which works for you ... instead of the user having to know and work to get the correct search results.\n
  • Search for anything ... default OR ... and & ...\nKeywords @HeeftFoto @GeenFoto \nSpecific searches Groep=Omvormers\nLoad and save filters\nUser doesn’t have to know in which field a code was added ... system looks for it and finds it ... whatever field it’s in\nIt’s a search system which works for you ... instead of the user having to know and work to get the correct search results.\n
  • Lets compare 2 apps with a similar UI but a quite different User Experience\n
  • Lets compare 2 apps with a similar UI but a quite different User Experience\n
  • Lets compare 2 apps with a similar UI but a quite different User Experience\n
  • To show you that there can be a big difference in UX between 2 applications with similar features :\nOpen source Jukebox for large collections of music ... \nLogical Organization of components ? What’s the primary task ? Playing Music ? Searching through Music colleciton ?\n
  • To show you that there can be a big difference in UX between 2 applications with similar features :\nOpen source Jukebox for large collections of music ... \nLogical Organization of components ? What’s the primary task ? Playing Music ? Searching through Music colleciton ?\n
  • Closed source Jukebox for large collections of music ... \n1 ... Play Music\n2 ... Find Music\nAlthough ... iTunes has its UX issues as well ... it is getting too big ... \n
  • Closed source Jukebox for large collections of music ... \n1 ... Play Music\n2 ... Find Music\nAlthough ... iTunes has its UX issues as well ... it is getting too big ... \n
  • 1. User interface design It is the system 2. A step in the process It is the process 3. Just about technology It is about behavior 4. Just about usability It is about value 5. Just about the user It is about context 6. Expensive It is flexible 7. Easy It is a balancing act 8. A choice It is a means of survival\n
  • 1. User interface design It is the system 2. A step in the process It is the process 3. Just about technology It is about behavior 4. Just about usability It is about value 5. Just about the user It is about context 6. Expensive It is flexible 7. Easy It is a balancing act 8. A choice It is a means of survival\n
  • 1. User interface design It is the system 2. A step in the process It is the process 3. Just about technology It is about behavior 4. Just about usability It is about value 5. Just about the user It is about context 6. Expensive It is flexible 7. Easy It is a balancing act 8. A choice It is a means of survival\n
  • 1. User interface design It is the system 2. A step in the process It is the process 3. Just about technology It is about behavior 4. Just about usability It is about value 5. Just about the user It is about context 6. Expensive It is flexible 7. Easy It is a balancing act 8. A choice It is a means of survival\n
  • 1. User interface design It is the system 2. A step in the process It is the process 3. Just about technology It is about behavior 4. Just about usability It is about value 5. Just about the user It is about context 6. Expensive It is flexible 7. Easy It is a balancing act 8. A choice It is a means of survival\n
  • 1. User interface design It is the system 2. A step in the process It is the process 3. Just about technology It is about behavior 4. Just about usability It is about value 5. Just about the user It is about context 6. Expensive It is flexible 7. Easy It is a balancing act 8. A choice It is a means of survival\n
  • 1. User interface design It is the system 2. A step in the process It is the process 3. Just about technology It is about behavior 4. Just about usability It is about value 5. Just about the user It is about context 6. Expensive It is flexible 7. Easy It is a balancing act 8. A choice It is a means of survival\n
  • 1. User interface design It is the system 2. A step in the process It is the process 3. Just about technology It is about behavior 4. Just about usability It is about value 5. Just about the user It is about context 6. Expensive It is flexible 7. Easy It is a balancing act 8. A choice It is a means of survival\n
  • 1. User interface design It is the system 2. A step in the process It is the process 3. Just about technology It is about behavior 4. Just about usability It is about value 5. Just about the user It is about context 6. Expensive It is flexible 7. Easy It is a balancing act 8. A choice It is a means of survival\n
  • Hey ... it works so lets put it out there. This is somenthing I hear a lot ... yet ...\nTimes have changed ... users now have the choice ... there ARE alternatives with better looks and better UX\n\n
  • Hey ... it works so lets put it out there. This is somenthing I hear a lot ... yet ...\nTimes have changed ... users now have the choice ... there ARE alternatives with better looks and better UX\n\n
  • Hey ... it works so lets put it out there. This is somenthing I hear a lot ... yet ...\nTimes have changed ... users now have the choice ... there ARE alternatives with better looks and better UX\n\n
  • Hey ... it works so lets put it out there. This is somenthing I hear a lot ... yet ...\nTimes have changed ... users now have the choice ... there ARE alternatives with better looks and better UX\n\n
  • Hey ... it works so lets put it out there. This is somenthing I hear a lot ... yet ...\nTimes have changed ... users now have the choice ... there ARE alternatives with better looks and better UX\n\n
  • Round toast (beschuit as we call it). Traditionally it has been nearly impossible to get it out of the package\nwithout breaking the package or even your toast ... which ruins the whole User Experience ... unless ...\n
  • Round toast (beschuit as we call it). Traditionally it has been nearly impossible to get it out of the package\nwithout breaking the package or even your toast ... which ruins the whole User Experience ... unless ...\n
  • Round toast (beschuit as we call it). Traditionally it has been nearly impossible to get it out of the package\nwithout breaking the package or even your toast ... which ruins the whole User Experience ... unless ...\n
  • Round toast (beschuit as we call it). Traditionally it has been nearly impossible to get it out of the package\nwithout breaking the package or even your toast ... which ruins the whole User Experience ... unless ...\n
  • Round toast (beschuit as we call it). Traditionally it has been nearly impossible to get it out of the package\nwithout breaking the package or even your toast ... which ruins the whole User Experience ... unless ...\n
  • The people from Bolletje.nl were smart enough to add a little notch in the Toast.\nJust big enough so you can use your finger to get the toast out of the package\nAwesome User Experience !!!! Great job !\n
  • The people from Bolletje.nl were smart enough to add a little notch in the Toast.\nJust big enough so you can use your finger to get the toast out of the package\nAwesome User Experience !!!! Great job !\n
  • The people from Bolletje.nl were smart enough to add a little notch in the Toast.\nJust big enough so you can use your finger to get the toast out of the package\nAwesome User Experience !!!! Great job !\n
  • The people from Bolletje.nl were smart enough to add a little notch in the Toast.\nJust big enough so you can use your finger to get the toast out of the package\nAwesome User Experience !!!! Great job !\n
  • The people from Bolletje.nl were smart enough to add a little notch in the Toast.\nJust big enough so you can use your finger to get the toast out of the package\nAwesome User Experience !!!! Great job !\n
  • You will get eternal glory ... and the attention of competitors in your industry of course\n
  • You will get eternal glory ... and the attention of competitors in your industry of course\n
  • In our case the UI and UX of our demo was so well received (compared to what the users were used to) that the test users started to promote our application and design even before we had the first release out in the field.\nI think we scared our competitors ... since after we installed the very first version ... they came up with a mock-up and somehow it looks \n
  • In our case the UI and UX of our demo was so well received (compared to what the users were used to) that the test users started to promote our application and design even before we had the first release out in the field.\nI think we scared our competitors ... since after we installed the very first version ... they came up with a mock-up and somehow it looks \n
  • In our case the UI and UX of our demo was so well received (compared to what the users were used to) that the test users started to promote our application and design even before we had the first release out in the field.\nI think we scared our competitors ... since after we installed the very first version ... they came up with a mock-up and somehow it looks \n
  • \n
  • \n
  • \n
  • 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

    ×