Your SlideShare is downloading. ×
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)
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)
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)
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)
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)
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,136

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 …

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,136
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

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

    ×