Ideeën voor mezelf
- Twee schermen maken, waarvan het infotainmentscherm niet per se ‘klassiek’ hoeft te zijn met twee klokken, maar alleen een snelheidsmeter.
- De kaart met Mapbox een bepaalde kleur geven en ervoor zorgen dat je erdoorheen kan scrollen in XD.
- Fysieke knoppen gebruiken / voice / haptics in Adobe XD. Limiteer je niet alleen door digitale schermen te maken, dat is zonde!
- Dark mode UI gebruiken -> verminderd afleiding
Rekening houden met
- Verstop (veelgebruikte) functies (bellen) niet onder een of meerdere menu’s!
o Anders moet je tijdens het rijden meerdere keren klikken om deze te gebruiken, waardoor je ogen van de weg zijn!
o Shortcuts wegstoppen betekent dat het bijvoorbeeld langer kan duren om iemand te bellen dan in andere voertuigen.
o Wanneer bepaalde knoppen verstopt zitten in menu’s en submenu’s, betekent het dat meerdere keren geklikt moet worden om bij deze knoppen te komen. DUS dat betekent dat er meer tijd en aandacht gevraagd wordt om deze knoppen te gebruiken. Meer tijd spenderen om de UI te gebruiken betekent MINDER aandacht geven om naar de weg te kijken, dat is ronduit gevaarlijk!
- Plaats knoppen op een duidelijke plek én zorgt ervoor dat deze makkelijk aan te klikken zijn.
o Fitts law! De afstand en grootte van een object bepalen hoe makkelijk en snel je op dat object kan klikken. Knoppen die ver weg in het scherm staan (dus ver weg van de handen van de bestuurder), zijn dus minder makkelijk in te drukken. Hoe groter de knop, hoe makkelijker deze te aan te klikken is.
o De veiligste positie om een stuur vast te houden, is de 3 – 9 positie. Knoppen op het (verticale) scherm moeten dus in het midden zitten, dicht in de buurt van de positie van de handen! Als je naar de onderkant van het scherm moet kijken, kan je
periferische gezichtsveld minder bewegingen op de weg detecteren!
o Veelgebruikte opties (bellen, achteruitrij camera) moeten het gemakkelijkste zijn om aan te klikken!
o Labels onder een icoontje is aanbevolen. Labels voor iconen mogen kleiner zijn dan 34 tot 38 pixels.
o Houd rekening met het feit dat een stemassistent niet in alle situaties werkt, bijvoorbeeld wanneer iemand slaapt in de auto óf iemand spraakproblemen heeft.
o Elementen die het verste van de bestuurder af staan, zijn het minst makkelijk te bereiken.
o o Vermijd ghost buttons, het moet duidelijk zijn dat op een bepaalde knop geklikt kan worden / dat er een bepaalde actie uitgevoerd kan worden. Primaire en secundaire affordances moeten duidelijk van elkaar te onderscheiden zijn.
o Volgens de Android Automotive guidelines moet een touch target minimaal 76x76dp groot zijn. De grootte kan soms aangepast worden. Wanneer een touch target te klein is, moet de bestuurder langer op het scherm kijken en wordt deze afgeleid.
o Touch targets mogen niet met elkaar overlappen. Voeg minstens 23dp ruimte tussen de verschillende touch targets toe als dat mogelijk is.
o Apple: ideale touch target tijdens het rijden is minimaal 44pt x 44pt.
o NN Group: minimaal 1 x 1 cm touch target.
- Duidelijk onderscheidbare kleuren gebruiken voor de functies zodat de bestuurder niet hoeft te zoeken! Tesla doet dit slecht! Alle kleuren ‘blenden’ in.
o Tevens valt de bel-functie niet op in het menu, want alle kleuren lijken op elkaar!
Daardoor moet de bestuurder zoeken. Zonder ‘distinctive colour’ voor de phone- widget, blijft het oog zoeken. Maar het wordt nog erger: de opgang-knop staat op dezelfde plek als de opneem-knop.
o Opvallende foutmeldingen.
o Grijze icoontjes stralen minder leven uit dan gekleurde icoontjes (grijs batterij icoontje ipv een groene)
o Een felgekleurde straat (in een grauwe navigatiekaart) die ineens verschijnt, leidt af tijdens het rijden.
o Veiligheid en gebruiksvriendelijkheid gaan vóór schoonheid
Dit betekent niet dat een interface lelijk moet zijn, maar wel dat je afstand moet nemen van kleuren en contrasten die je alleen kan onderscheiden als je heel goed kijkt, iconen met dunne randen, letters in lichte kleuren, kleine tekst, etc. Minimalisme is goed, maar ontstaat doordat er weinig
elementen aanwezig zijn.
o
- Mensen voeren een efficiëntere manier van een taak uit dan de origineel geleerde manier (dus naar de hulpsystemen in de auto kijken i.p.v. hoofd draaien en in de spiegels kijken).
o Tesla kent drie manieren om van rijbaan te wisselen (spiegels, achteruitrijcamera, rode lijnen van de rijbaan op het scherm). Mensen voeren de manier uit die de minste interactie kost (de rode lijnen van de rijbaan manier).
o Als mensen een manier ontdekken die minder moeite kost om een bepaalde taak uit te voeren, dan voeren ze voortaan alleen die manier uit. Niet omdat mensen lui zijn, maar omdat ze efficiënt zijn.
o This example points out an important dilemma that car designers and manufacturers face today. New features such as autopilot (or self-driving), lane assist, collision detection and so on have the potential to replace well-learned, traditional driver behaviors such as looking over the shoulder or checking the mirrors that we used to rely on. If these features are functional and using them is are easier than performing the gestures and actions that we learned in driving school, then they will replace those actions (we are creatures of minimum effort: we always take the solution that requires least work — not because we’re lazy, but because we’re efficient). That’s why we hear in the news about people putting on makeup, playing games, or even sleeping at the wheel — because modern cars make it seem safe to do so. Yet, it is our responsibility as designers to create the right mental model and give people the right understanding of how our systems work, in order to make sure that by
displacing these old-fashioned behaviors we’re not making driving more dangerous.
- Er moet een veilige, gebruiksvriendelijke en plezierige ervaring gecreëerd worden. Maak de interface niet te druk én waarbij je niet hoeft te zoeken naar knoppen!
o Vehicle controls should be easily accessible and require minimum attention from drivers, while driving-related information should be displayed clearly and
understandably.
o Human attention is limited! (Millers Law)
o Jakob Nielsen’s famously said that if designers fail with ‘consistency & standards’
they essentially increase users ‘cognitive load’. According to Nielsen: “Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.”
o Zorg ervoor dat je geen elementen hebt die ‘zweven’ boven andere elementen (de navigatiekaart die altijd aanwezig is, leidt dan af). Ook moeten alle vensters hetzelfde afgesloten worden (dus niet dat het ene venster gesloten wordt door op het kruisje te klikken én het andere venster door naar beneden te swipen).
o Let op: veel informatie op het scherm tonen verminderd de capaciteit van het werkgeheugen! Besef dat de weinig mensen de split-screen optie op een tablet gebruiken, in een auto vereist dit dus veel aandacht en werkgeheugen.
o Groot scherm is goed -> meerdere vensters worden getoond. Maar: wisselen tussen vensters is lastig (meerdere keren klikken + niet naar de weg kijken)
o Honderdduizenden mensen sterven jaarlijks in auto-ongelukken. Mensen kunnen niet meer dan 5 tot 9 dingen onthouden. Dat is waarom veiligheid een grote rol speelt tijdens het autorijden. Dit kan bereikt worden op twee manieren:
Afleiding verminderen
De gebruiker ondersteunen
o Het gedrag van een bestuurder is onvoorspelbaar, daarom moet een interactie op elk moment onderbroken kunnen worden. Op deze manier kan de bestuurder zich focussen op het rijden zonder het gevoel te krijgen dat deze zich moet haasten om een bepaalde taak af te ronden.
o
- Auto interface ontwerpen dat gebruiksvriendelijk, veilig is, en alle functies één klik ver weg:
Designers moeten rekening houden met het ontwerpen van human-computer interfaces, rekening houden met usability principles én psychologie.
- Als gebruikers een bepaalde tool op het scherm niet kunnen vinden, dan zal deze vast niet eens aanwezig zijn op een andere plek (dat hoeft niet, maar KAN wel).
o One of Ben Shneiderman most famous computing principle was “As the frequency of use increases, so do the user’s desires to reduce the number of interactions and to increase the pace of interaction.”
o De Tesla-knop, wat de centrale lock-knop is, zit verstopt en het lijkt niet alsof je erop kan klikken. Er zijn immers nooit hints gegeven dat je erop kan klikken!
- Gebruikers moeten voelen dat ze controle hebben over het product en dat deze reageert op de acties van de gebruiker.
o Feedback geven, feedback geven, feedback geven! De schermen in de auto moeten feedback geven!
o Touchscreens MOETEN haptische feedback hebben, anders weet de gebruiker niet of deze een bepaalde knop op het scherm heeft ingedrukt (EN moeten ze naar het scherm kijken, dat wil je ook niet). Bij fysieke knoppen kan je leren waar deze zich bevinden en ze blindelings indrukken (daarom kunnen we ook piano spelen).
o
- Tekst moet makkelijk leesbaar zijn.
o Tekst moet makkelijk te lezen zijn. Houdt rekening met verschillende
lichtomstandigheden! Tekst dat te klein is, op een drukke achtergrond staat of een laag contrast heeft, is lastiger om te lezen!
o De gemiddelde afstand tot het centrale scherm is ongeveer 60 centimeter. Tekst moet ongeveer 34 tot 38 pixels groot zijn om duidelijk gelezen te worden tijdens het autorijden.
o Primaire tekst is volgens de Android for Car guidelines 32dp groot, secundaire tekst 24dp.
Tip: De leesbaarheid van tekst hangt af van veel factoren, bijvoorbeeld van de hoeveelheid licht, tijd van de dag, letterdikte (thin, medium, bold), en contrast. Goed leesbare tekst draagt bij aan kort werpen van blikken op het scherm en een kortere tijd om beslissingen te nemen. De cognitieve en visuele afleiding neemt dus af.
o Teksten in het Romeinse alfabet mogen niet langer zijn dan 120 karakters (inclusief spaties en leestekens). Japanse tekst mag niet langer zijn dan 31 Romeinse tekens, Kana, of Kanji gecombineerd. Lange teksten zorgen ervoor dat de bestuurder lang naar het scherm moet staren, dat is gevaarlijk.
o Het ideale contrast tijdens het autorijden is minstens 7:1, of minstents 4,5:1 wanneer niet wordt gereden.
Het contrast ratio voor iconen, tekst en afbeeldingen moet minimaal 4,5:1 zijn. Wanneer overtollige informatie wordt getoond (bijvoorbeeld een icoon en tekst dat beide hetzelfde betekent) mag één element daarvan niet aan deze richtlijn voldoen.
o Tekst tijdens dag kan positief getoond worden (donkere tekst op een lichte achtergrond) of negatief (lichte tekst op een donkere achtergrond), maar tijdens nacht moet deze alleen negatief getoond worden. Positief tijdens nacht werkt niet lekker voor de bestuurder (deze wordt dan extra gevoelig voor helderheid en ziet nabeelden).
- Afleiding verminderen
o Dark mode UI gebruiken -> verminderd afleiding
o Tekst moet geskimd worden, daarom moet er zo min mogelijk tekst zijn in call-to- actions en menu’s. Tekst moet niet langer zijn dan twee regels, tenzij deze gelezen wordt tijdens stilstand.
o Er moet één primaire actie zijn tijdens het rijden en zo min mogelijk secundaire acties. Bestuurders moeten snel tekst kunnen skimmen én in een oogopslag vinden wat ze zoeken.
o Tip: informatie moet geprioriteerd worden gebaseerd op basis van de rol in het ondersteunen van autorijd gerelateerde taken.
o Informatie dat niet-gerelateerd is tot autorijden kan zowel visueel als cognitief de bestuurder afleiden, tenzij deze informatie in één blik geabsorbeerd kan worden of makkelijk genegeerd kan worden.
o Voorkom dat visuele informatie wordt getoond dat niet gerelateerd is tot
autorijden, zoals video’s en tekst dat automatisch scrolt. Wees voorzichtig met het gebruik van animaties, de bestuurder moet zich bewust blijven van de situatie om zich heen. Oftewel: video’s, animaties en tekst dat automatisch scrolt, kunnen de bestuurder verleiden om naar het scherm te kijken en niet naar de weg. Dit komt omdat deze visuele informatie gepresenteerd wordt op het tempo van het systeem en niet op het tempo van de bestuurder.
o Iconen en termen moeten overeenkomen met de bijbehorende functies die deze uitvoeren. Net zoals dat interaction patterns consistent en voorspelbaar moeten zijn.
Tip: een consistente interface verminderd de tijd en cognitieve inspanning van de bestuurder en maakt het maken van beslissingen makkelijker.
o De interface moet duidelijk toegestane en niet-toegestane functies van elkaar scheiden, bijvoorbeeld door afleidende media-content te dimmen. Oók moet de interface onderscheid maken tussen functies die bedoeld zijn voor het autorijden en functies die niet bedoeld zijn voor het autorijden. Tip: maak in de interface
duidelijk welke functies (tijdelijk) niet beschikbaar zijn tijdens een bepaalde situatie, zodat de bestuurder de status van het systeem in één blik begrijpt.
o
- Gewenste gebaren:
o Fysieke knoppen werken beter om te gebruiken dan GUI componenten vanwege de
‘muscle memory mapping’, wat niet bestaat bij een touchscreen, want de visuele elementen op een touchscreen vereisen dat mensen telkens naar het scherm moeten kijken. Maar een touchscreen is veel flexibeler, de wereld beweegt naar die richting.
o Sommige handelingen zijn makkelijk uit te voeren op een scherm:
Single tap
Vegen (naar rechts, links, omhoog, omlaag)
Scrollen (met snapping, dus dat een venster vastplakt op het scherm na gescrold te hebben).
o Sommige handelingen moeten liever niet uitgevoerd worden tijdens een situatie met beweging (zoals autorijden):
Touch and hold
Double tap
Pinching
Multi-touch gestures
o Free scrolling is niet goed, zorg ervoor dat verticale en horizontale scrolbewegingen een snapping effect hebben.
UX Laws waar ik rekening mee moet houden - https://lawsofux.com/
Fitt’s law
De afstand en grootte van een object bepalen hoe makkelijk en snel je op dat object kan klikken. Knoppen die ver weg in het scherm staan (dus ver weg van de handen van de bestuurder), zijn dus minder makkelijk in te drukken. Hoe groter de knop, hoe makkelijker deze te aan te klikken is.
Miller’s law
Mensen kunnen gemiddeld 7 (plusminus 2) items in hun werkgeheugen onthouden.
Hick’s law
De tijd om een beslissing te nemen is afhankelijk van het aantal keuzes dat genomen kan worden en de complexiteit van deze keuzes.
Jakob’s law
Gebruikers spenderen veel tijd op andere websites, daarom verwachten ze dat jouw website op dezelfde manier werkt als al die andere websites.
Doherty Threshold
De productiviteit van de gebruiker stijgt wanneer een systeem en de gebruiker op hetzelfde tempo werken (<400ms), daardoor hoeft niemand op elkaar te wachten.
Tesler’s law
Voor elk systeem is er een bepaalde hoeveelheid complexiteit dat niet verminderd kan worden. Wanneer een applicatie simpel is, ondernemen gebruikers moeilijkere taken.
Apple CarPlay: snelle toegang tot andere apps.
Android Auto: plaatsing van het venster om muziek te bedienen onderin is handig geplaatst.
