Hoe moet interactieve inhoud worden georganiseerd op een touchscreen?

Een retailklant loopt naar een aanraakscherm en weet al welk product hij wil controleren. De volgende persoon die vijf minuten later hetzelfde scherm aanraakt, wil alleen maar een prijs, of een routebeschrijving naar de paskamer. Er is een derde persoon aanwezig omdat hij het wachten op iemand verveelt, en hij denkt dat hij wel wat rond zal snuffelen. Als ze alle drie door hetzelfde menu met vier niveaus moeten klikken om ergens te komen, heeft het scherm twee van hen al in de steek gelaten voordat ze hebben gevonden waarvoor ze kwamen - en eerlijk gezegd dwaalt de derde waarschijnlijk ook af.

We hebben meer dan een paar post-installatiegesprekken gevoerd waarbij de eerste vraag van de klant een versie was van "waarom gebruikt niemand het?" En negen van de tien keer is de hardware in orde. Het scherm is helder genoeg, de aanraakreactie is snel genoeg, de montagehoogte is correct. Het probleem is bijna altijd hetzelfde: het menu is opgebouwd rond hoe iemand op kantoor over de productcatalogus denkt, niet rond hoe iemand die in een lobby of een showroom staat, daadwerkelijk denkt.

Dat is echt het kernprobleem met interactieve inhoud op aan de muur gemonteerde touchscreens - niet of het scherm groot genoeg of duur genoeg is, maar of het menu erop overeenkomt met wat mensen kwamen doen.

Begin met de taak, niet met het menu

Hier is een patroon waar we voortdurend tegenaan lopen. Een klant stuurt zijn productstructuur op voor een nieuwe interactieve kiosk, en deze is precies zo georganiseerd als in zijn interne ERP-systeem: op basis van SKU-voorvoegsel, op leverancierscode, op welke afdeling dan ook die intern eigenaar is van welke productlijn. Het is volkomen logisch voor de persoon die het heeft gebouwd. Het betekent absoluut niets voor een vreemdeling die vijf minuten over heeft in een showroom.

Bezoekers denken niet in SKU-codes. Ze denken: "Ik zoek een klein blauw exemplaar" of "waar is dat ding te koop" of "is er een badkamer op deze verdieping." Als de eerste tik op het scherm die taal niet spreekt, geven mensen het onmiddellijk op of beginnen ze willekeurig rond te tikken, wat – voor wat het waard is – er veel op lijkt dat het scherm kapot is, zelfs als dat niet het geval is.

Dus voordat iemand ook maar één scherm opmaakt, is het de moeite waard om even te gaan zitten en in gewone taal op te schrijven wat de twee of drie dingen zijn die mensen eigenlijk moeten doen. Niet wat het bedrijf wil communiceren. Wat de bezoeker wil bereiken. Een productshowroomdisplay komt meestal neer op drie echte taken: bladeren op categorie, zoeken op naam of huidige promoties bekijken. Een lobbygids komt meestal neer op het vinden van een bedrijf, het vinden van een afdeling of het vinden van een kamernummer dat iemand al op een notitie in zijn zak heeft gekrabbeld. Zodra deze taken daadwerkelijk zijn opgeschreven en overeengekomen, kan al het andere (specificaties, contactformulieren, bedrijfsgeschiedenis, het welkomstbericht van de oprichter) van het eerste scherm verdwijnen en stoppen met strijden om aandacht.

Op een openbare display is dit belangrijker dan op een intern dashboard dat uw eigen personeel veertig keer per dag gebruikt en uiteindelijk zonder nadenken uit het hoofd leert. Niemand zal een medewerker aanspreken om te vragen hoe hij een touchscreen moet gebruiken dat aan de muur van de lobby is vastgeschroefd. Als de eerste tik iemand niet dichter bij een antwoord brengt, lopen ze gewoon weg en vraagt ​​de klant uiteindelijk waarom niemand het peperdure scherm gebruikt waarvoor ze zojuist hebben betaald.

Eén scherm, verschillende gebruikerspaden

Hetzelfde fysieke display moet vaak meer dan één soort bezoek dienen, soms binnen dezelfde vijf minuten. In plaats van elk mogelijk pad op één vol startscherm te proppen, wat het instinct is dat bijna elke klant heeft als hij voor de eerste keer een leeg canvas ziet, werkt het veel beter om elke use case zijn eigen korte, voorspelbare route te geven en mensen rustig zelf de route te laten kiezen die echt bij hen past.

Detailhandelsdisplays

Voor een showroom in de detailhandel begint het pad dat meestal werkt bij een productcategorie, gaat dan naar een specifiek model, vervolgens naar specificaties, en biedt pas daarna een aparte stap voor een aanvraag of een contactverzoek. Het deel dat mensen fout hebben, is meestal niet het aantal categorieën op het startscherm. Het is te vroeg bladeren en informeren. Als iemand een contactformulier moet invullen alleen maar om een ​​specificatieblad te zien, wordt hij vrijwel onmiddellijk teruggestuurd. Als de knop voor het indienen van een aanvraag er identiek uitziet als de knop voor het bekijken van meer productdetails, is het resultaat meestal een stapel onbedoelde leads die nergens toe leiden en een verkoopteam dat zich ergert aan het opvolgen van mensen die nooit gecontacteerd wilden worden. Door deze twee bedoelingen, kijken en vragen, structureel gescheiden te houden, worden beide problemen in één keer opgelost, en het maakt een onevenredig groot verschil in hoe een display presteert als het eenmaal in het veld staat.

Gebouw- en bezoekersgidsen

Telefoonboeken hebben de neiging een redelijk voorspelbare vorm te volgen, waarbij ze gewoonlijk van het gebouw naar een verdieping gaan, vervolgens naar een afdeling en vervolgens naar een specifieke locatie, tenzij iemand via een zoekvak rechtstreeks naar de laatste stap kan gaan. Specifiek voor mappen zouden we zeggen dat een gewoon zoekveld op het startscherm, waar iemand een naam typt en een resultaat krijgt, bijna altijd beter presteert dan zelfs een mooi georganiseerde categorieboom. De meeste bezoekers weten al precies wie of wat ze zoeken. Ze hoeven niet alleen het organigram van het gebouw te leren om ze te kunnen vinden. Geef mensen eerst een zoekvak en laat de doorzoekbare map bestaan ​​als back-up voor de kleinere groep die echt nog niet weet waar ze heen gaan.

Onderwijs- en trainingsschermen

Schermen in klaslokalen en trainingsruimtes volgen meestal iets dat dichter bij een cursus ligt die eerst wordt gekozen, dan een les daarin, dan een stukje media zoals een video of diagram, en ten slotte een interactieve oefening die aan die les is gekoppeld. Hier draait de prioriteit eigenlijk om in vergelijking met retail of een directory. Het gaat niet echt om de snelheid. Een leraar racet niet met een vreemde door een menu. Ze proberen een zaal vol leerlingen betrokken te houden zonder halverwege de les hun eigen gang te gaan. Dat verandert hoe een goed ontwerp eruit ziet: grotere tikdoelen, minder verrassingen en niets dat een tweede verwarde blik op het scherm vereist om te bevestigen wat er net is gebeurd, want die tweede blik is een kamer vol twaalfjarigen die de aandacht verliezen die ze nog hadden.

Drie weergavetypes, drie verschillende menudieptes, drie totaal verschillende prioriteiten, ook al vallen ze alle drie technisch gezien onder hetzelfde brede label van een touchscreen met een menu erop. Ze op dezelfde manier behandelen, simpelweg omdat ze op vergelijkbare hardware draaien, is een van de meest voorkomende fouten die we zien, en deze is gemakkelijk te vermijden als je eenmaal de gebruiksscenario's in je hoofd hebt gescheiden voordat je iets gaat ontwerpen.

Een snelle manier om die verschillen duidelijk te maken vóór een ontwerpbeoordeling:

Die tabel is niet bedoeld als regelboek. Het is meer een controle op de gezondheid: als het menu van een project niet ongeveer overeenkomt met de rij, is dat meestal de moeite waard om nog een keer te bekijken voordat de lay-out definitief wordt.

Wanneer lay-outs met gesplitst scherm daadwerkelijk helpen

Split-screen wordt veel vaker gevraagd dan dat het daadwerkelijk goed wordt gebruikt. En we begrijpen waarom: op papier voelen meer panelen als meer waarde: meer inhoud in één keer zichtbaar, meer rendement op het hardwarebudget, meer redenen om de schermgrootte te rechtvaardigen voor degene die zich bij het project tekent.

Het is echt handig in een beperkt aantal situaties, zoals een productdemonstratievideo die op de ene helft van het scherm wordt weergegeven terwijl statische specificaties op de andere helft staan, of een bouwkaart gecombineerd met een scrollende lijst met de gebeurtenissen van de dag. In beide gevallen doen de twee panelen duidelijk verschillende taken, en geen van beide heeft op precies hetzelfde moment de volledige aandacht van de bezoeker nodig.

Het stopt met werken op het moment dat iemand het browsen door producten probeert te forceren, een looping-video, een QR-code en live-promoties op vier panelen tegelijk worden weergegeven, wat ons, voor de goede orde, is gevraagd om meer dan eens te doen, meestal door iemand die echt probeert meer waarde uit het scherm te halen in plaats van minder. Op dat moment heeft niets op de lay-out voldoende ruimte om daadwerkelijk te worden gelezen vanaf een normale staande afstand, en de opstelling met gesplitst scherm produceert uiteindelijk het tegenovergestelde van wat de bedoeling was. Mensen kijken ernaar, kunnen het niet snel genoeg ontleden en gaan verder zonder er iets van in zich op te nemen.

Een goede vuistregel waar we bij echte projecten steeds op terugkomen: als een deel van het scherm niet echt zijn eigen aandachtsmoment nodig heeft, los van al het andere erop, verdient het waarschijnlijk geen eigen paneel.

Waar contentplannen meestal fout gaan

Een paar patronen komen zo vaak voor dat ze de moeite waard zijn om direct te benoemen, omdat ze vermijdbaar zijn en toch blijven voorkomen.

· Overbelasting van het openingsscherm om het budget te rechtvaardigen. Iemand heeft echt geld uitgegeven aan de hardware, en een spaarzaam ogend startscherm kan aanvoelen als verspild potentieel. In de praktijk verslaan drie voor de hand liggende, goed gespreide keuzes bijna elke keer twaalf knoppen met kleine lettertjes eronder. Een bezet scherm leest niet zo waardevol; het leest als huiswerk.

· Ontwerpen op een laptop en nooit testen op het echte paneel. Iets dat er op armlengte goed uitziet op een vijftien-inch monitor, kan krap blijken of moeilijk te tikken zijn als het eenmaal over een vijfenvijftig-inch aan de muur gemonteerd scherm is uitgerekt. We hebben gezien hoe teams dit ter plekke ontdekten, in het bijzijn van de klant, wat ongeveer het slechtst mogelijke moment is om het te ontdekken.

· Pictogrammen tussen pagina's laten bewegen. Een pijl terug die één ding betekent op de productpagina en iets anders op de directorypagina lijkt een kleine inconsistentie. Dat is het niet. Het leert mensen de interface te wantrouwen, en zodra dat vertrouwen weg is, beginnen ze willekeurig rond te tikken om de weg terug te vinden - wat precies het "lijkt gebroken" probleem van eerder is.

Geen van deze drie zijn hardwareproblemen, en geen van deze problemen is duur om te repareren als ze vóór de installatiedag worden opgemerkt. Ze zijn gewoon gemakkelijk over het hoofd te zien als een project snel vordert en iedereen zich concentreert op de onderdelen die later moeilijker te wijzigen zijn, zoals schermgrootte of montagepositie.

Wat er op het eerste scherm staat en wat niet

Niet alles hoort thuis op het openingsscherm, en niet alles wat dat wel doet, hoort daar met hetzelfde visuele gewicht thuis.

Categorieknoppen, een zoekfunctie en de twee of drie acties die het vaakst worden gebruikt, verdienen de grootste en meest voor de hand liggende plaatsing op de pagina, het soort plaatsing waarvan je wilt dat iemand deze opmerkt, zelfs als hij maar twee seconden naar het scherm kijkt terwijl hij er langs loopt. Productdetails, filters en secundaire opties kunnen comfortabel een tikje dieper zitten zonder iemand echt veel tijd te kosten, aangezien een enkele extra tik zelden iemand verliest die al oprecht geïnteresseerd was. Specificaties, juridische teksten, installatie-instructies en alles wat niche genoeg is om slechts voor een klein deel van de bezoekers van belang te zijn, kan wachten tot iemand er actief naar op zoek gaat, omdat bijna niemand in een lobby een paragraaf met kleine lettertjes van een muur wil lezen.

De fout die het waard is om hier opnieuw te markeren, is dat we niet iets weglaten. Het is het tegenovergestelde instinct, de angst om iets weg te laten, dat vaak de slechtste lay-outs voortbrengt die we tegenkomen. Een scherm dat elke mogelijke vraag probeert te beantwoorden zodra iemand erop tikt, beantwoordt uiteindelijk geen van deze vragen bijzonder goed. Het vertrouwen in wat je moet wegsnijden is uiteindelijk net zo belangrijk als de zorg over wat je erin moet houden.

Aanraakdoelen hebben ruimte nodig om te ademen

Een lay-out die er tijdens een ontwerprecensie op iemands laptop helemaal goed uitziet, overleeft niet altijd het contact met een echte menselijke vinger op een aan de muur gemonteerd paneel. Knoppen met een comfortabel formaat voor een muiscursor zijn vaak te klein, of te dicht bij elkaar gepakt, als je iemand vraagt ​​om er met een vingertop op te tikken, vooral op een drukke winkelvloer of in een lobby waar mensen in vreemde hoeken staan, soms met een kopje koffie in de hand, soms met een kind aan de mouw.

Twee dingen zijn hier belangrijker dan waar ze tijdens de ontwerpfase de eer voor krijgen. De eerste is een consistente spatiëring rond alles waarop kan worden getikt, aangezien krappe knoppen onbedoelde tikken veroorzaken, en onbedoelde tikken een soort frustratie veroorzaken die snel toeneemt op een openbaar scherm waar niemand betaald wordt om geduldig te blijven. De tweede is een consistente betekenis voor herhaalde symbolen op elk scherm in de interface. Als een pijl terug iemand naar het startscherm op de ene pagina en naar de vorige categorie op een andere pagina stuurt, wordt die inconsistentie niet geregistreerd als een kleine bug die de moeite waard is om van je af te schudden. Het registreert dat de hele interface onbetrouwbaar is, en mensen generaliseren die indruk snel.

Het is ook de moeite waard om te onthouden dat er vaak meer dan één persoon tegelijk naar het scherm kijkt, zelfs als slechts één van hen het aanraakt: een collega die achter iemand staat die een telefoonboek controleert, een tweede klant die over een schouder kijkt, een ouder die een kind een paar meter achter zich ziet werken via een onderwijsdisplay. De lay-out moet ook leesbaar blijven voor die tweede, niet-betrokken persoon, wat in de praktijk meestal slechts een iets groter lettertype en een sterkere visuele scheiding betekent dan een interface voor één gebruiker ooit nodig zou hebben.

Schermgrootte verandert wat inhoud kan doen

Contentplanning werkt het beste wanneer dit gebeurt voordat de schermgrootte wordt vastgelegd, en niet daarna, zodra de hardwarebestelling al is geplaatst en iemand stilletjes probeert de inhoud passend te maken, wat er ook in de vrachtwagen verschijnt. Een paneel van drieënveertig inch en een paneel van vijfenzestig inch zijn niet simpelweg dezelfde interface, opgeschaald als die van een kopieerapparaat. Ze ondersteunen echt verschillende hoeveelheden details voordat een lay-out druk of vreemd leeg begint te voelen.

FVASEE bouwt aan de muur gemonteerde touchscreen-displays in de maten 42 en 43 inch, 49 en 50 inch, 55 inch en 65 inch, waarbij zowel Android- als Windows-configuraties beschikbaar zijn, afhankelijk van wat het project erop moet draaien. Kleinere panelen verdienen meestal hun geld met een gerichte, single-path interface die is opgebouwd rond één productlijn, één directory of één duidelijke taak, waarbij niets anders strijdt om ruimte. Grotere panelen hebben de fysieke ruimte om groepsweergave of een bredere reeks categorieën te ondersteunen zonder dat alles het gevoel heeft dat alles ingepakt is, hoewel die extra ruimte gemakkelijk te verspillen is als het inhoudsplan nooit ontworpen was om deze daadwerkelijk nodig te hebben.

De praktische stap, en degene waar we bij echte projecten steeds op terugkomen, is om de daadwerkelijke inhoudspagina's op de werkelijke paneelgrootte te laden voordat er aan beide kanten iets wordt afgerond. Tekst die in een mockup op iemands laptop goed leest, kan ongemakkelijk klein blijken als hij op ooghoogte op een drieënveertig inch scherm aan de overkant van de lobby is gemonteerd. Een lay-out die is ontworpen met een canvas van vijfenzestig inch in gedachten kan er vreemd schaars uitzien als hij in plaats daarvan op een paneel van negenenveertig inch wordt geperst. Het testen van echte pagina's op echte hardware tijdens de voorbeeldfase lost de meeste van deze problemen op terwijl ze nog steeds goedkoop te repareren zijn, wat beter is dan ze op te sporen nadat de panelen al aan de muur in het gebouw van iemand anders zijn gemonteerd.

Van het eerste concept naar een werkende interface

Niets van dit alles leidt tot één universele, correcte lay-out die overal van toepassing is, en we zouden eerlijk gezegd een beetje achterdochtig zijn tegenover iemand die beweert dat die er is. Een showroom, de directory van een hotellobby en een display in een klaslokaal zullen eindigen met verschillende menudieptes, verschillende hoeveelheden tekst op het scherm en verschillende redenen om een ​​gesplitste schermindeling te gebruiken of opzettelijk over te slaan. Wat ze gemeen hebben is niet een gedeelde sjabloon. Het is een gedeeld uitgangspunt: uitzoeken wat de persoon die voor het scherm staat eigenlijk kwam doen, en de menustructuur rond die realiteit opbouwen, in plaats van eromheen, maar de inhoud is toevallig al ergens in een spreadsheet op kantoor georganiseerd.

Het scherm zelf zorgt voor de ruimte, de helderheid en de aanraakreactie. Of iemand het na de installatie daadwerkelijk goed gebruikt, komt neer op wat er op staat, en of die inhoud mensen ontmoet waar ze al zijn, in plaats van waar het organigram of de productdatabase stilletjes aannam dat ze zouden zijn.