Small Screens, Big Changes

Mobiele apparaten veranderen de manier waarop we omgaan met content. Zowel voor de gebruiker als de aanbieder. Welke middelen zetten we in voor de ultieme gebruikerservaring? En hoe zorgen we tegelijkertijd dat deze content op efficiënte wijze de ontvanger bereikt? Genoeg reden voor UX Team of Two om hier een ‘mobile content & design workshop’ aan te wijden.

Twee boeiende sprekers: Ontwikkelaar en ontwerper Josh Clark en contentstrateeg Karen McGrane. Op hoofdlijnen geef ik weer wat beide sprekers te melden hadden. Een inspirerende dag.

“Designing for touch”

Toetsenbord en muis zijn zó 2011

Volgens Josh Clark is touch het eerste fenomeen in een reeks innovaties die ons leven zal veranderen. Spraak en gezichtsherkenning staan nog in de kinderschoenen, maar zullen volgen. En waar eindigt het? Hoe krachtig zijn combinaties? Harry Potter is daar met zijn toverstaf en –spreuken een uitstekend voorbeeld van. Hij roept “Lumos”, zwaait met zijn toverstaf en verlicht een hele kamer. Het zijn niet langer de muis en het toetsenbord die we gebruiken om handelingen te verrichten met een apparaat. Je hoeft niet te leren dat je met je muis moet klikken om feedback van een systeem te krijgen. Je bedient het apparaat direct met je handen. Applicaties zijn daardoor tastbaar. Het zijn machines die ons begrijpen in plaats van andersom.

Finger-friendly design: keep it simple!

User interfaces zijn slechts abstractielagen. User interfaces op touch-devices daarentegen, zijn tastbaar. Er volgt direct feedback na interactie met het scherm. Het ontwerpen van user interfaces voor touch neigt daarom naar industrial design. “You’re designing a physical device”, aldus Clark.

Op de vraag hoe we het beste kunnen ontwerpen voor touch-devices, betrekt Josh Clark een interessante metafoor. Een Zwitsers mes. “The Giant”, bevat 87 tools en 145 functies en wordt daarmee erkend door het Guinness Book of Records als ’s werelds meest multifunctionele zakmes. Zijn functie als zakmes streeft het echter voorbij. Sterker nog, hij is onhandig. Hoe kun je in vredesnaam één van de vele tools die het biedt, makkelijk vinden? Zijn conclusie, een touch-device is niets anders. Het is een multifunctionele tool, maar bewaar de focus. Houd het simpel. Hoe voelt het in je hand? Op welke manieren kun je het vasthouden en gebruiken?

Navigatie & buttons van een mobile apparaat

“Where do the fingers and thumbs come to rest?” vraagt Clark zich vervolgens af.

Smartphones

Ontwerpen voor touchscreen vereist uitvoerig veel aandacht voor waar vingers op het device komen te rusten. Ga maar na hoe je een telefoon beet pakt. In bijna alle gevallen bedien je de telefoon met je duimen. “For phones, designing for touch means designing for the thumb”, aldus Clark.

Op de uit-kluiten-gewassen-devices na, hebben duimen het bereik en de flexibiliteit om het hele scherm te kunnen benutten. In ‘chill-modus’ hebben duimen echter een zekere comfort-zone. Bij het vasthouden van een telefoon in je rechterhand, bijvoorbeeld, valt je duim in een boog op natuurlijke wijze in de linker onderhoek van het scherm.

Belangrijk is dat ‘primary controls’, zoals toolbars en navigatie, een prominente positie binnen deze zone krijgen. Vaak dus onderaan het venster. In tegenstelling tot traditionele desktop-interfaces, bijvoorbeeld in Windows, waar toolbars en navigatie vaak bovenaan het scherm getoond worden.
Overige interactieve elementen plaats je bovenaan het scherm. Zo vallen ze goed in het oog en bewaren ze tevens genoeg afstand om niet per ongeluk geraakt te worden.

Apple houdt rekening met de prominente positie van primary controls onderaan het scherm. Exact de rede waarom de iPhone maar één fysieke systeemknop onderaan het scherm heeft. Mistaps, of anders gezegd ‘fat-finger-errors’ worden hiermee ontweken.

Android doet het verkeerd volgens Josh Clark. Veel toestellen zijn uitgerust met meerdere systeembuttons en worden daardoor gestapeld met primary controls uit het touch interface. Heel gezellig voor al die buttons, maar verwarrend en onhandig voor gebruikers. In Android plaats je primary controls dus bij voorkeur bovenaan het scherm om mistaps te voorkomen.

Tablets

Anders dan bij smartphones, kun je tablets op vele manieren vasthouden. In verschillende houdingen neigen we tablets anders vast te houden. Liggend, staand of zittend, in de meeste gevallen houden we de tablet op de helft in de lengteas vast. De duimen geplaatst op een derde van de top van het scherm. De inhoud van het scherm wordt, net als in print, van boven naar beneden gescand. Het is belangrijk dat de informatiehiërarchie dit reflecteert. Primaire navigatie krijgt daarom – in tegenstelling tot telefoons – een primaire plek bovenaan het scherm. Eén uitzondering: plaats navigatie nooit gecentreerd bovenaan. Je hand belemmerd namelijk het zicht op het scherm.

Het web: hardware pixels versus virtual pixels

Anders dan een decennia terug, toen de meeste designers zich zorgen maakten of een ontwerp wel of niet geschikt moest zijn voor 800 bij 600 pixels én 1024 bij 768 pixels, is die twijfel nu uit den boze. Het aanbod ‘web enabled devices’ is de afgelopen 10 jaar explosief gestegen. In de trein bekijk je op je smartphone het laatste nieuws en thuis lees je de mail op je iPad. Iedereen is aangesloten op het web, met welk apparaat dan ook. Een ontwerp moet voor elk apparaat geschikt zijn.

De komst van touch betekent voor ontwikkelaars en designers een extra uitdaging. Een dikke vinger is lang niet zo accuraat als een mousepointer. Kleine buttons met kleine marges hebben mistaps als gevolg. Wat zijn dan wel veilige afmetingen? En hoe houd je rekening met beeldschermen die een hogere pixeldichtheid hebben?

Het zogenaamde ‘retinadisplay’ van de iPhone 4(S) heeft een resolutie van 960 bij 640 pixels, terwijl zijn voorgangers een resolutie hebben van 480 bij 320 pixels. Om displays met verschillende pixeldichtheden tegemoet te komen, bieden HTML en CSS de mogelijkheid om pixels virtueel aan te spreken. Op deze manier kun je uitgaan van één ontwerp.

De volgende HTML-metatag zorgt ervoor dat vier hardwarepixels gerenderd worden als één virtuele pixel:

Optimaliseer afbeeldingen voor retina door de volgende mediaquery te gebruiken:

Binnen die condities geef je aan dat er binnen de klasse .retina_logo een afbeelding gewenst is met een twee maal zo hoge resolutie.

Tot slot benoemt Josh Clark de ‘44-pixel-rule’. Een maatstaf voor proporties die Apple hanteert voor rijhoogten en buttonproporties. Wanneer er sprake is van buttonclustering zoals dat van een toetsenbordindeling, voldoet een minimale breedte van 29 pixels. Android wijkt af van deze proporties. Zij hanteren de ’48-pixel-rule’. Android draait op veel verschillende devices, waardoor correcte callibratie voor al deze apparaten praktisch onmogelijk is. Een extra marge van 4 pixels biedt daarom een veilige oplossing.

Gestures: het inzetten van natuurlijke bewegingen

Hoe kun je gestures, natuurlijke bewegingen die interactie met touch-devices mogelijk maakt, efficiënt inzetten? Josh Clarke zegt: “Gestures are the keyboard shortcuts of touch”. Het maakt applicaties toegankelijker.

Applicaties moeten overigens wel altijd beschikken over buttons met labels. Ze maken duidelijk dat er onderliggende acties mogelijk zijn. Daarbij beschikken we niet allemaal over tien vingers. Denk aan mensen met een beperking. Design moet toegankelijk zijn, dus bied oplossingen in twee werelden.

Waarom dan niet alleen buttons? Josh Clark gebruikt hier een sterke metafoor. “Buttons are a hack.” Vergelijk het met de realiteit. In het donker ga je op zoek naar een lichtschakelaar. Bij het inschakelen wordt de kamer voorzien van licht. Je schroeft de lamp niet ter plekke in het contact, terwijl daar bij touch juist de kracht ligt. Waarom zou je de lichtschakelaar zoeken, terwijl je de lamp in handen hebt?

Teaching Touch: de leercurve van de gebruiker

Iedereen is bekend met standaard gestures zoals tappen, swipen (sleepbeweging) en pinchen (vergroten/verkleinen). Custom gestures zijn daarentegen praktisch onzichtbaar. Er is ervaring vereist om te weten dat bepaalde gestures ondersteund worden. Hoe maak je de gebruiker duidelijk dat deze gestures aanwezig zijn? Simpel zegt Clark, gebruik game-aspecten:

• Coaching (observation and practice)
  Confronteer gebruikers niet met ellenlange handleidingen wanneer ze een applicatie voor het eerst openen. “Users don’t read the manual.” Laat gebruikers op subtiele wijze in aanraking komen met mogelijke interactie. Onderstaande afbeelding geeft voorbeelden weer.
• Leveling up
  Geef gebruikers het gevoel dat gestures een meerwaarde hebben.
• Power ups
  Biedt de gebruiker iets extra’s met gestures. De Twitter app is daar een goed voorbeeld van. Swipe het icoon dat leidt naar je profiel naar de linker onderhoek en je kunt direct accounts toevoegen. Of swipe hetzelfde icoon naar de rechter bovenhoek en je benadert direct je direct messages.

“There’s no such thing as content strategy for mobile”

Vervolgens spreekt Karen McGrane. Door de opmars van mobiele apparaten is er veel discussie ontstaan over het aanbieden van content. Een mobiel apparaat is compact, waardoor je het overal mee naartoe kunt nemen en altijd kunt gebruiken. Anderzijds heeft compactheid ook zijn beperkingen. Het beeldscherm heeft minder ruimte om content te tonen. Er is minder overzicht in verhouding tot tablets of desktop-pc’s. Voor sommige partijen is dit een reden om content op mobiele sites beknopter weer te geven, of zelfs weg te laten. Fout!

“It’s a myth that people don’t want to consume content on their mobile devices. They actually like it.”, aldus McGrane. “There is no different way to communicate.”

De uitdaging ligt in het distribueren van content naar het aanbod apparaten op welk platform dan ook. Voor het web biedt responsive webdesign soelaas. We zijn echter verbonden met het internet. Het draait niet meer om een native app of een website, maar om de combinatie van alles. Een uitspraak van Ethan Marcotte, de bedenker van responsive webdesign, sluit hierop aan: “Fragmenting our content across different “device-optimized” experiences is a losing proposition, or at least an unsustainable one.”

Interessant en grappig om te zien was dat Karen McGrane het recentelijk verschenen artikel ‘Mobile Site vs. Full Site’ door Jakob Nielsen compleet met de grond gelijk maakte.

Jakob Nielsen vat samen: “Good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.” Waarop McGrane antwoord: “Don’t cut features or content”. Wanneer sommige content mogelijk van mindere waarde is voor mobiele gebruikers, dan is deze content waarschijnlijk überhaupt de moeite niet waard. En laat de ‘longtail of content’ in zijn waarde. Het staartje dat je enerzijds verwijdert zou wel eens van onschatbare waarde kunnen zijn.

De rede voor het vermijden van redirects vond ik nog het sterkst. Content die geïndexeerd wordt in Google en uiteindelijk niet gevonden wordt, is omdat je doorverwezen wordt naar een mobiele site. Dit is funest voor de gebruikerservaring. McGrane heeft het hier bij het juiste eind. De theorie van Jakob Nielsen, in mijn optiek, zuigt.

Schrijf in hapklare broken, niet voor één pagina

Idealiter, wanneer we content leveren aan verschillende devices met verschillende platformen, doen we dat vanuit één content management systeem. Nieuwsaanbieders over de hele wereld dromen van deze opzet. Sommige hanteren al dergelijke systemen. Maar hoe voeren we content in?

CMS-systemen zijn namelijk altijd het ondergeschoven kindje geweest wat betreft gebruikerservaring. McGrane geeft een aantal tips:

• Zorg voor een goede workflow in je CMS-systeem. Dit lukt alleen wanneer je vooraf de anatomie van een artikel in welke vorm dan ook bepaalt. Denk aan een titel, kop, inleiding enzovoorts (hapklare brokken).
• Een goed CMS heeft voor elk van deze hapklare brokken per artikel slechts één invoerveld. Niet meer en niet minder. Dezelfde content op meerdere plaatsen invoeren is ‘not done’.
• Ontwikkelaars geven al deze content metadata mee om op verschillende devices, binnen verschillende contexten de juiste boodschap te kunnen smeden uit de hapklare brokken.

Alleen op deze manier kun je streven naar “One holistic experience across all channels”, aldus Karen McGrane.

Tot slot

Small Screens, Big Changes was absoluut een boeiende workshop. De locatie, het hoofdkantoor van Hyves, was niet spectaculair, maar voldoende. Het belangrijkste, namelijk de inhoud, was écht goed.  De stof van Josh Clark en Karen McGrane is een uitstekend recept voor het creëren van de ultieme mobiele gebruikerservaring. Mijn complimenten aan UX Team of Two voor deze samenstelling.