9 July 2018
Jacomien Kodde
Jacomien Kodde
Share
Tweet about this on Twitter0Share on LinkedIn0Share on Facebook0

Smart responsive interface design tricks (Amsterdam)

Verslag van een workshop

Half juni deed ik mee aan de workshop Smart Responsive Interface Design Tricks in Amsterdam. Een workshop van Vitaly Friedman in het kader van de CSS Day 2018 conferentie.

Onderzoek naar het gebruik van smartphones

Vitaly begint met onderzoeksresultaten te delen over het gebruik van smartphones (Steven Hoober 2017). Het onderzoek wijst uit dat mensen hun telefoon op verschillende manier vasthouden. De grootste groep mensen doet alles met één hand. Andere mensen gebruiken de zogenaamde ‘cradled’ greep waarbij ze de telefoon omklemmen met de ene hand en met de duim van de andere hand bedienen. Ook zijn er mensen die bedienen met de wijsvinger van de andere hand en een kleine groep houdt de telefoon vast met twee handen. Er zijn zelfs mensen die hun pink gebruiken voor specifieke taken. Daarnaast schuiven mensen hun smartphone soms met één hand omhoog en omlaag om de juiste gebieden te kunnen bereiken. Al met al gebruikt het merendeel van de mensen de rechterduim.

Hoober-Touch-Fig1

“Common ways people hold and touch their mobile phone” (Steven Hoober)

Op basis van dit onderzoek presenteert Vitaly verschillende touch-gebieden. Het centrale gedeelte is het makkelijkst te bedienen en daarmee het primaire gebied voor content. Dit gebied is geschikt voor bijvoorbeeld berichten, afbeeldingen, video, artikelen, etc. Secondaire content zoals tabs of acties kunnen het beste onder of boven worden geplaatst. Ten slotte kan tertiaire content het beste verborgen worden en opvraagbaar gemaakt vanuit de hoeken.

Hoober-Touch-Fig2

“Touch-friendly information-design framework Hoober Touch” (Steven Hoober)

De meeste websites die ontworpen zijn voor een muis- en toetsenbordwereld hebben de navigatie aan de bovenkant van het scherm of langs de zijkanten geplaatst. Maar omdat veel desktop- en laptopcomputers tegenwoordig ‘touch’ ondersteunen zou het weleens tijd kunnen zijn deze – net als op mobiel – naar beneden te verplaatsen.

Smart responsive interface design

Vitaly behandelt vervolgens verschillende componenten of patronen, zoals collapsible, navigatie & filters, product configurators, planners, maps, tabellen, feature comparison en on-boarding. Hij informeert ons voor elke component over onderzoeksresulaten. Ook toont hij heel veel voorbeelden, zowel goede als slechte. Hij maakt duidelijk dat voor alle componenten, zelfs voor de eenvoudigste (‘collapsible’) in feite veel ontwerpbeslissingen moeten worden genomen. Per component krijgen we een lijst met te nemen ontwerpbeslissingen. Voor elke component doen we ook een groepsoefening. Uiteraard ontwerpen we alles responsief en beginnen met mobiel.

Ik hoopte een standaardstrategie of ‘best practices’ te leren, maar er blijkt geen ‘silver bullet’ oplossing te zijn. Het is vooral een kwestie van afstemmen op de context, want verschillende problemen vereisen verschillende oplossingen. Een goede mobiele oplossing moet in ieder geval snel, gefocust en volledig functioneel zijn. Alle voorbeelden helpen te bepalen of er een standaardaanpak is of aan het ontstaan is. Ook maken ze duidelijk wat wel en niet werkt. Verder geeft Vitaly de tip dat de ‘collapsible’ vaak geschikt is opties compact en duidelijk weer te geven. Verder dringt hij erop aan altijd te zorgen voor een ‘recover’-optie en dat is denk ik een goede algemene tip.

Al met al is het inderdaad een ‘microscopic examination of common interface components and problems’ geworden, zoals al in de aankondiging stond.

Experience van de workshop

Ik ben echt onder de indruk van de manier waarop Vitaly de workshop faciliteert met een indrukwekkende hoeveelheid energie en passie. Ook de manier waarop hij zijn presentatie organiseert vind ik bijzonder. De presentatie bevat maar liefst 1.200 slides, maar de manier waarop hij de presentatie gebruikt maakt het desondanks levendig en dynamisch. Vitaly gebruikt de presentatie eigenlijk als een soort Pinterest-board. Ter plekke zoekt hij voorbeelden erbij als deze aan de orde zijn. Deze voorbeelden heeft hij gedurende een periode van jaren verzameld. Ze zorgen voor een compleet beeld en een mooie indruk van de ontwikkeling in de tijd. Het heeft mij in ieder geval geïnspireerd mijn verzameling voorbeelden en bookmarks nog beter te organiseren en levend te houden.

Over de auteur

Jacomien Kodde (/cjkodde) is interaction designer. Ze heeft een achtergrond in cognitieve ergonomie en wordt enthousiast als het lukt complexe functionaliteit eenvoudig te maken.

Events (23), Mobile design (8)

Share
Tweet about this on Twitter0Share on LinkedIn0Share on Facebook0