Ui ≠ UX en waarom jullie daar meer aandacht aan moeten besteden

Stefaan LesageEmail : [email protected] / Twitter : @StefaanLesagehttp://www.devia.be

UI <> UXEn waarom jullie daar aandacht aan moeten

besteden

Tuesday 1 April 14

Welkom

mailto:[email protected]


http://www.devia.be

http://www.devia.be

Tuesday 1 April 14

Een (West)Vlaming die komt spreken in Nederland ... hopelijk geen ondertiteling nodig

Simultane vertaling & ondertiteling beschikbaar !

Tuesday 1 April 14

Een (West)Vlaming die komt spreken in Nederland ... hopelijk geen ondertiteling nodig

Tuesday 1 April 14

Even voorstellen ...Aarzel niet om mij aan te spreken of contact met mij op te nemen.

Stefaan Lesage

Tuesday 1 April 14


Stefaan LesageSoftware Developer / geek / blogger (Lookit.be)/ (amateur)fotograaf / podcaster (Tech45.eu) /

Sci-Fi / fantasy lover en natuurlijk Whisky liefhebber (whiskywithfriends.be).

Tuesday 1 April 14


Stefaan Lesage

[email protected]@StefaanLesage

Software Developer / geek / blogger (Lookit.be)/ (amateur)fotograaf / podcaster (Tech45.eu) /

Sci-Fi / fantasy lover en natuurlijk Whisky liefhebber (whiskywithfriends.be).

Tuesday 1 April 14




Tuesday 1 April 14

Kort woordje uitleg over wat we doen ... laatste project (WMS)Sessie zonder code ... aan de hand van uit het leven gegrepen voorbeeldenMaar ... je zal iets bijleren over mijn droomwagen, de problemen met het lokale tankstation en mijn evenwicht / balans problemen.Screenshots of our WMS Client ... still work in progress

Software Development & New Media Technologies

Tuesday 1 April 14

Kort woordje uitleg over wat we doen ... laatste project (WMS)Sessie zonder code ... aan de hand van uit het leven gegrepen voorbeeldenMaar ... je zal iets bijleren over mijn droomwagen, de problemen met het lokale tankstation en mijn evenwicht / balans problemen.Screenshots of our WMS Client ... still work in progress


Tuesday 1 April 14

De UI is datgene waarmee de gebruikers interactie hebben ... de pixels



http://www.devia.be

http://www.devia.be


Wat is UI ?

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


Wat is UI ?

Wat de gebruiker ziet & gebruikt

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


Wat is UI ?


Componenten

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


Wat is UI ?


Componenten

Pixels

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


Tuesday 1 April 14

In vergelijking met iets uit de echte wereld ... de schoonheid en technologie in mijn droomauto



http://www.devia.be

http://www.devia.be


Voorbeeld

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


VoorbeeldDe technologie en het design van mijn droomwagen ... a Tesla Model S

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


Tuesday 1 April 14

De algemene ervaring en tevredenheid die een gebruiker heeft bij het gebruiken van uw product.Het is een emotioneel gegeven ... dus soms wat subjectief.



http://www.devia.be

http://www.devia.be


Wat is UX ?

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


Wat is UX ?Hoe alles samen werkt

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be



Algemene Ervaring

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be



Algemene Ervaring

Balans tussen schoonheid & gebruiksgemak

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be



Algemene Ervaring

Balans tussen schoonheid & gebruiksgemak

Emoties

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


Tuesday 1 April 14

Trekken we de Tesla Model S analogie door, dan is User Experience de glimlach op het gezicht van de personen die voor de eerste keer met hun Tesla Model S rijden!De UI is de motor, het stuur, de pedalen, het chassis, de 17’’ monitor in de middenconsoleDe UX is het gevoel dat je krijgt om met een volledig elektrische wagen te rijden, de voldoening wanneer je die gaspedaal indrukt.



http://www.devia.be

http://www.devia.be


Voorbeeld

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


Voorbeeld

http://player.vimeo.com/video/44713180

De glimlach op het gezicht van de mensen die met hun Tesla Model S rijden

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be




Tuesday 1 April 14

Responsive <> Snel ... eerder dat de gebruiker ziet dat het systeem iets doet (ipv hangen)



http://www.devia.be

http://www.devia.be


Hoe bekom je een goeie UX

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be



Ziet er goed & mooi uit

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be




Responsive

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be




Responsive

Makkelijk te leren, begrijpen en gebruiken

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be




Responsive


Kleine dingen

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be




Responsive


Kleine dingen

Maar dan duizenden ...

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


Tuesday 1 April 14

Het locale tankstation bij ons in de buurt, en ik vermoed dat zowat gans België / Nederland vol staan met deze systemen.Voor mij zijn ze een nachtmerrie ... ik word er gewoon gek van



http://www.devia.be

http://www.devia.be


Slechte UX

Tuesday 1 April 14

Het locale tankstation bij ons in de buurt, en ik vermoed dat zowat gans België / Nederland vol staan met deze systemen.Voor mij zijn ze een nachtmerrie ... ik word er gewoon gek van



http://www.devia.be

http://www.devia.be


Tuesday 1 April 14



http://www.devia.be

http://www.devia.be


Problemen

Tuesday 1 April 14



http://www.devia.be

http://www.devia.be


Problemen

Bij fel zonlicht niet te lezen

Tuesday 1 April 14



http://www.devia.be

http://www.devia.be


Problemen


Visuele voorstelling <> fysieke Layout

Tuesday 1 April 14



http://www.devia.be

http://www.devia.be


Problemen



Mix 2 inputs op 2 devices

Tuesday 1 April 14



http://www.devia.be

http://www.devia.be


Problemen



Mix 2 inputs op 2 devices

Verwarrend

Tuesday 1 April 14



http://www.devia.be

http://www.devia.be


Tuesday 1 April 14

Hoe werkt het ... (emotioneel)Door je knieen gaan, want het scherm staat een pak lagerHand tussen de zon en het display want bij een beetje zon kan je niets meer zien.Kaart in gleuf stoppen, naar het display kijken en toch nog twijfelen.Kijken welk nummer op de pomp staat, dan knopje zoekenNaar andere display om daar via het keyboard een code in te voerenTerug naar de touch display ... afwerken en een dansje plaatsen waneer het uiteindelijk gelukt is.Ook qua kleur een flater ... wat associeert iedereen met Rood ? NIET KIEZEN !!!



http://www.devia.be

http://www.devia.be


UI <> Real World

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


UI <> Real WorldPomp 1Pomp 2

Pomp 3Pomp 4

Pomp 6Pomp 7

Pomp 5

Terminal 1

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


UI <> Real WorldPomp 1Pomp 2

Pomp 3Pomp 4

Pomp 6Pomp 7

Pomp 5

Terminal 1

Hier sta ik

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


Tuesday 1 April 14

ikbeneenfreelancer.be lanceerde gisteren nieuwe website, vraag om nieuw WW aan te vragensurf naar website, klik in veld, begin te typen #facepalm !!!!Eerste indruk ... al naar de vaantjesPlaceholder i.p.v. echte inhoud van het veld



http://www.devia.be

http://www.devia.be


Slechte UX

Tuesday 1 April 14

ikbeneenfreelancer.be lanceerde gisteren nieuwe website, vraag om nieuw WW aan te vragensurf naar website, klik in veld, begin te typen #facepalm !!!!Eerste indruk ... al naar de vaantjesPlaceholder i.p.v. echte inhoud van het veld



http://www.devia.be

http://www.devia.be


Tuesday 1 April 14

Scherm voor het beheer van locaties in een magazijn.Magazijn ... zones ... locaties. Locaties hebben een straat, vak, niveau en subvakAlles handmatig invoeren is apewerk en dus bouwden we een wizard.



http://www.devia.be

http://www.devia.be


Voorbeeld

Tuesday 1 April 14

Scherm voor het beheer van locaties in een magazijn.Magazijn ... zones ... locaties. Locaties hebben een straat, vak, niveau en subvakAlles handmatig invoeren is apewerk en dus bouwden we een wizard.



http://www.devia.be

http://www.devia.be


Voorbeeld

Tuesday 1 April 14

Hij had er ongeveer zo kunnen uit zien. Het zou doen wat het moet doen, maar misschien wat verwarrend.UI was niet slecht, UX gewijs kon er aan gesleuteld worden.Dus bouwden we een visuele voorstelling van het geheel, en plots was het voor gebruikers een WOW tool.



http://www.devia.be

http://www.devia.be


Te Verwarrend

Tuesday 1 April 14

Als we het dan toch over verwarrend hebben. Op weg naar Cap Blanc Nez was ik op zoek naar Wissant.Het was 2 km verder, maar mijn mond viel open en ik was compleet verloren toen ik deze borden zag.



http://www.devia.be

http://www.devia.be


Te Verwarrend

Tuesday 1 April 14

Zelzate brug heeft een electronisch bord voor de expres weg. Daar stond vroeger op “Brug Open” of “Brug Dicht”. Heel verwarrend ... want “Brug Open” betekent dat nu dat je er kan over rijden of dat de brug open staat om schepen door te laten ?

Ondetussen aangepast naar “Brug staat open” met een afbeelding van een openstaande brug. Veel duidelijker.



http://www.devia.be

http://www.devia.be


Te Verwarrend

Tuesday 1 April 14

Tijdens de trip naar Zeist kreeg ik een gelijkaardig scherm maar voor een route die 87 km langer zou zijn. In het voorbeeld komt het systeem mij vragen om 29 om te rijden.29 km langer ? Waarom zou ik kiezen voor 29 km langer ? Meer info ???



http://www.devia.be

http://www.devia.be


Tuesday 1 April 14

BOM ... Producten zoeken ... toevoegen aan een lijst ...Dual List Boxes ... Explain ... 2 knoppen, of zelfs 4 zou een mooie start zijn. klant wil maar 1 knop, want dat is een innovatieve UI die geen ander product heeft ??? WTF ?!?!?Het zal gegarandeerd voor problemen zorgen ... gebruikers moesten opgeleid wordenFirst User question ... but how do we get the items out ... Our answer ... button changes when other grid has focusSecond User Question ... but what is focus and how do I give something focus ?Client won ... for a while ...



http://www.devia.be

http://www.devia.be


The Button Story

Tuesday 1 April 14

BOM ... Producten zoeken ... toevoegen aan een lijst ...Dual List Boxes ... Explain ... 2 knoppen, of zelfs 4 zou een mooie start zijn. klant wil maar 1 knop, want dat is een innovatieve UI die geen ander product heeft ??? WTF ?!?!?Het zal gegarandeerd voor problemen zorgen ... gebruikers moesten opgeleid wordenFirst User question ... but how do we get the items out ... Our answer ... button changes when other grid has focusSecond User Question ... but what is focus and how do I give something focus ?Client won ... for a while ...



http://www.devia.be

http://www.devia.be


Tuesday 1 April 14

Explain ... it’s always a compromise between different things. Show the search example and how everything evolved ...



http://www.devia.be

http://www.devia.be


Tuesday 1 April 14

Het button verhaal ... deel 2Zelfde concept ... 2 knoppen ... Dt was het eerste resultaat.Mijn reactie naar de programmeur toe “Nope, no can do ... je ziet toch zelf dat er iets niet klopt met de blanans en het evenwicht op het scherm ?”

http://www.devia.be


Balans

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


Balans

Tuesday 1 April 14


http://www.devia.be


Balans

Tuesday 1 April 14

Layout van het scherm even analyseren. Kijk eens naar het aantal horizontale lijnen.Ze staan er niet allemaal op, maar daar heb ik het over wanneer ik spreek over een balans of evenwicht in een scherm.Links moet in balans zijn met rechts.



http://www.devia.be

http://www.devia.be


Tuesday 1 April 14

Veel beter, maar nog steeds veel lijnen, en de look en feel tussen links & rechts klopt niet.Wat is de geselecteerde rij ?Niet gebruikte ruimte ?En die buttons man !



http://www.devia.be

http://www.devia.be


Balans (take 2)

Tuesday 1 April 14

Veel beter, maar nog steeds veel lijnen, en de look en feel tussen links & rechts klopt niet.Wat is de geselecteerde rij ?Niet gebruikte ruimte ?En die buttons man !



http://www.devia.be

http://www.devia.be


Tuesday 1 April 14

Zelfde scherm, maar ...Betere balans.Links ziet er gelijkaardig uit aan rechts.Geen verloren ruimte. Delete button onderaan om verkeerd klikken te vermijden.IMHO ... een veel betere User Experience



http://www.devia.be

http://www.devia.be


Balans (take 3)

Tuesday 1 April 14

Zelfde scherm, maar ...Betere balans.Links ziet er gelijkaardig uit aan rechts.Geen verloren ruimte. Delete button onderaan om verkeerd klikken te vermijden.IMHO ... een veel betere User Experience



http://www.devia.be

http://www.devia.be


Tuesday 1 April 14

Buttons ... daar heb ik nog een groot probleem mee ... maar het is een pak beter.Achteraf nog kleuren aangepast. Groen is verdwenen en rood enkel in de aantallen kolom (kleurenblind)



http://www.devia.be

http://www.devia.be


Oud vs Nieuw

Tuesday 1 April 14

Buttons ... daar heb ik nog een groot probleem mee ... maar het is een pak beter.Achteraf nog kleuren aangepast. Groen is verdwenen en rood enkel in de aantallen kolom (kleurenblind)



http://www.devia.be

http://www.devia.be


Tuesday 1 April 14



http://www.devia.be

http://www.devia.be


Data opzoeken

Tuesday 1 April 14



http://www.devia.be

http://www.devia.be


Data opzoekenZoeken op (bijna) elk veld

Tuesday 1 April 14



http://www.devia.be

http://www.devia.be



Zoeken op combinaties

Tuesday 1 April 14



http://www.devia.be

http://www.devia.be




Zoekopdrachten bewaren

Tuesday 1 April 14



http://www.devia.be

http://www.devia.be




Zoekopdrachten bewaren

Hoe onze visie langs de Delphi kant over de jaren heen is geëvolueerd

Tuesday 1 April 14



http://www.devia.be

http://www.devia.be


Zoeken anno 2003

Tuesday 1 April 14

Eenvoudige zoekopdracht. Altijd AND ... kennis ligt bij gebruiker.Wat als iemand per ongeluk de voornaam in het naam vakje heeft ingevoerd ?



http://www.devia.be

http://www.devia.be


Zoeken anno 2004

Tuesday 1 April 14

Een pak flexibeler.Begins with ... contains ... altijd OR ... Kennis moet nog altijd bij de gebruiker liggen.Hij moet immers weten in welk veld de data werd ingebracht waar hij wil op zoeken.



http://www.devia.be

http://www.devia.be


Zoeken anno 2006

Tuesday 1 April 14

Gelijkaardig aan de vorige versie. Heel flexibel met tal van mogelijkheden.Gelijk aan ... begint met ... bevat geen ...AND / OR ... nog steeds onmogelijk om aan de gemiddelde gebruiker uit te leggen.Hij wil iedereen zien waarvan de naam met STE begint en ook iedereen waarvan de naam met SAN begint.Logisch is dat een OR ... voor de gebruiker is dat een EN.Iedereen uit Oost-Vlaanderen behalve mensen uit Gent / Evergem. Haakjes ... niet te doen.



http://www.devia.be

http://www.devia.be


Zoeken anno 2008

Tuesday 1 April 14

Minder flexibel ... makkelijker voor de gebruiker ... en het ziet er iets beter uit dan de 2003 UI.



http://www.devia.be

http://www.devia.be


Zoeken anno 2012

Tuesday 1 April 14

Search for anything ... default OR ... and & ...Keywords @HeeftFoto @GeenFoto Specific searches Groep=OmvormersLoad and save filtersGebruiker dient niet te weten in welk veld een code zit ... het systeem zoekt en vindt het wel.Het zoek systeem werkt voor u, en jij moet als gebruiker niet meer weten wat in welk veld zou kunnen zitten!



http://www.devia.be

http://www.devia.be


Tuesday 1 April 14

Mooir voorbeeld van 2 apps met dezelfde functionaliteit maar een volledig ander UI / UX



http://www.devia.be

http://www.devia.be


UI vs UX

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


UI vs UX

De User Interface is een deel van de volledige User Experience ...

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


UI vs UX

De User Interface is een deel van de volledige User Experience ...

Het is echter maar een heel klein deel van de volledige User

Experience

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


Tuesday 1 April 14

Nemen we 2 applicaties die gelijkaardige functionaliteiten bieden en vergelijken we de UXgmusicbrowser ... open source jukeboxLogische flow in de UI ? Wat is de hoofdtaak ? Muziek Afspelen ? Muziek Zoeken ?



http://www.devia.be

http://www.devia.be


gmusicbrowser

Tuesday 1 April 14

Nemen we 2 applicaties die gelijkaardige functionaliteiten bieden en vergelijken we de UXgmusicbrowser ... open source jukeboxLogische flow in de UI ? Wat is de hoofdtaak ? Muziek Afspelen ? Muziek Zoeken ?



http://www.devia.be

http://www.devia.be


Tuesday 1 April 14

Closed source Jukebox for large collections of music ... 1 ... Play Music2 ... Find MusicGoed ... iTunes is ondertussen ook a zo geevolueerd dat het zijn eigen issues heeft. Het wordt te groot / te log / ...



http://www.devia.be

http://www.devia.be


iTunes

Tuesday 1 April 14

Closed source Jukebox for large collections of music ... 1 ... Play Music2 ... Find MusicGoed ... iTunes is ondertussen ook a zo geevolueerd dat het zijn eigen issues heeft. Het wordt te groot / te log / ...



http://www.devia.be

http://www.devia.be


Tuesday 1 April 141. 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



http://www.devia.be

http://www.devia.be


Wat is UX Niet




http://www.devia.be

http://www.devia.be


Wat is UX NietNOT user interface design




http://www.devia.be

http://www.devia.be


Wat is UX NietNOT user interface designNOT a step in a process




http://www.devia.be

http://www.devia.be



NOT just about technology




http://www.devia.be

http://www.devia.be



NOT just about technologyNOT just about usability




http://www.devia.be

http://www.devia.be



NOT just about technologyNOT just about usabilityNOT just about the user




http://www.devia.be

http://www.devia.be




NOT easy




http://www.devia.be

http://www.devia.be




NOT easyNOT expensive




http://www.devia.be

http://www.devia.be




NOT easyNOT expensiveNOT a choice




http://www.devia.be

http://www.devia.be


Tuesday 1 April 14

Ja, maar het werkt, dus laten we het releasen. Dat hoor ik vaak ... jammer want ...Tijden zijn veranderd ... gebruikers kunnen kiezen ... en er zijn alternatieven die werken, gemakkelijk te gebruiken zijn en er nog goed uitzien ook!



http://www.devia.be

http://www.devia.be


Maar ... het werkt !

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


Maar ... het werkt !

Tijden zijn veranderd ... het werkt is is net niet goed genoeg meer!

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


Tuesday 1 April 14



http://www.devia.be

http://www.devia.be


UX zoals het hoort ...

Tuesday 1 April 14



http://www.devia.be

http://www.devia.be



• Rond beschuit

Tuesday 1 April 14



http://www.devia.be

http://www.devia.be



• Rond beschuit

• Lastig uit de verpakking te halen zonder het te breken

Tuesday 1 April 14



http://www.devia.be

http://www.devia.be



• Rond beschuit

• Lastig uit de verpakking te halen zonder het te breken

• Behalve ...

Tuesday 1 April 14



http://www.devia.be

http://www.devia.be



Tuesday 1 April 14

Bij bolletje.nl was iemand slim genoeg om een kleine inkeping in het beschuit te maken.Net groot genoeg zodat je met de vinger het beschuit uit de verpakking kan halen zonder verpakking of beschuit naar de vaantjes te helpen.Kleine aanpassing maar een fantastische User Experience !!!! Chapeau !



http://www.devia.be

http://www.devia.be



Beschuit van Bolletje (www.bolletje.nl)

Tuesday 1 April 14

Bij bolletje.nl was iemand slim genoeg om een kleine inkeping in het beschuit te maken.Net groot genoeg zodat je met de vinger het beschuit uit de verpakking kan halen zonder verpakking of beschuit naar de vaantjes te helpen.Kleine aanpassing maar een fantastische User Experience !!!! Chapeau !



http://www.devia.be

http://www.devia.be

http://www.bolletje.nl

http://www.bolletje.nl


Tuesday 1 April 14

Doe je het goed, dan wacht je eeuwige roem ... en waarschijnlijk ook de aandacht van uw concurrenten



http://www.devia.be

http://www.devia.be


But when you get it all right

Tuesday 1 April 14

Doe je het goed, dan wacht je eeuwige roem ... en waarschijnlijk ook de aandacht van uw concurrenten



http://www.devia.be

http://www.devia.be


Tuesday 1 April 14

In ons geval waren gebruikers zo onder de indruk van de UI / UX van onze demo (in vergelijking met wat ze gewoon waren) dat de testers het product binnen het bedrijf van de klant al aan het promoten waren nog voor de eerste release af was.Ik denk dat onze concurrenten had geschrokken waren ... na onze release ... lieten zij een Web versie zien aan de klant, en ik had zo het gevoel dat ik alles al eens eerder had gezien.


... of zoals in ons geval ...

Tuesday 1 April 14




http://www.devia.be

http://www.devia.be


... of zoals in ons geval ...

Tuesday 1 April 14



Vragen ?

Tuesday 1 April 14



http://www.devia.be

http://www.devia.be


Tuesday 1 April 14



http://www.devia.be

http://www.devia.be


UI <> UX

Tuesday 1 April 14



http://www.devia.be

http://www.devia.be


UI <> UXEn waarom jullie daar aandacht aan moeten

besteden

Tuesday 1 April 14



http://www.devia.be

http://www.devia.be

Ui ≠ UX en waarom jullie daar meer aandacht aan moeten besteden

Technology

Transcript of Ui ≠ UX en waarom jullie daar meer aandacht aan moeten besteden