De 10 principes van het ontwerpen van mobiele interfaces

Schrijver: Randy Alexander

Datum Van Creatie: 25 April 2021

Updatedatum: 16 Kunnen 2024

Video: Principles of mobile app design: Delight users and drive conversions - Google I/O 2016

Inhoud

Mobiel is anders
01. Mobiele mentaliteit
02. Mobiele contexten
03. Wereldwijde richtlijnen
04. Navigatiemodellen
05. Gebruikersinvoer
06. Gebaren
07. Oriëntatie
08. Communicatie
09. Lancering
10. Eerste indrukken
Conclusie
Vond dit leuk? Lees deze!

Hoe je het ook meet, mobiel is enorm en groeit. De convergentie van cloud computing, alomtegenwoordige breedband en betaalbare mobiele apparaten begint elk aspect van onze samenlevingen te transformeren. Analisten voorspellen dat mobiele telefoons tegen 2015 desktopcomputers zullen inhalen als onze belangrijkste manier om toegang te krijgen tot internet.

Om gelijke tred te houden met dit snel veranderende landschap, moeten ontwerpers en ontwikkelaars - en de mensen die ermee werken - gaan nadenken over mobiel als een primair projectdoel; niet iets dat als bijzaak op een desktop-centric project is geplakt.

Mobiel is anders

Hoewel ze vaak op één hoop worden gegooid als computerapparatuur, zijn smartphones en desktopcomputers heel verschillend: klein scherm versus groot scherm, intermitterende versus betrouwbare connectiviteit, lage versus hoge bandbreedte, batterijvoeding versus aangesloten, enzovoort. Gezien deze lijst zou je in de verleiding kunnen komen om mobiele apparaten te zien als ondermaatse versies van 'echte' computers. Maar dit zou een vergissing zijn.

In feite is het omgekeerde waar: smartphones zijn in veel opzichten zelfs krachtiger dan desktops. Ze zijn zeer persoonlijk, altijd aan, altijd bij ons, meestal verbonden en direct aanspreekbaar. Bovendien kruipen ze met krachtige sensoren die locatie, beweging, versnelling, oriëntatie, nabijheid, omgevingscondities en meer kunnen detecteren.

Gezien de vele verschillen tussen mobiele apparaten en desktopcomputers, zou het geen verrassing moeten zijn dat ontwerpen voor mobiele apparaten heel anders is dan ontwerpen voor de desktop. Vanuit mijn workshops heb ik een lijst samengesteld met 10 principes van het ontwerpen van mobiele interfaces waarmee mensen die bekend zijn met het ontwerpen en ontwikkelen van desktops de unieke kracht van het mobiele platform kunnen ontketenen.

01. Mobiele mentaliteit

Vanwege de verschillen tussen mobiel en desktop, is het absoluut noodzakelijk om in een mobiele mentaliteit te komen voordat u aan de slag gaat.

Wees geconcentreerd: Meer is niet beter. Bewerk uw functies meedogenloos. U zijn dingen moeten weglaten.

Wees uniek: Weet wat uw app anders maakt en versterk deze. Er zijn veel vissen in de zee van mobiele apps. Als er niets speciaals aan uw app is, waarom zou iemand er dan voor kiezen?
Charmant zijn: Mobiele apparaten zijn intens persoonlijk. Ze zijn onze constante metgezellen. Apps die vriendelijk, betrouwbaar en leuk zijn, zijn een genot om te gebruiken en mensen zullen erg gehecht raken aan de ervaring.
Wees attent: App-ontwikkelaars richten zich te vaak op wat leuk zou zijn om te ontwikkelen, hun eigen mentale model van de app of hun persoonlijke zakelijke doelen. Dit zijn goede plekken om te beginnen, maar u moet uzelf in de schoenen van uw gebruikers verplaatsen als u ooit een boeiende ervaring wilt creëren.

02. Mobiele contexten

Het beeld van de drukke professional die door de luchthaven racet met een tas in de ene hand en een smartphone in de andere, is wat veel mensen zich voorstellen als ze nadenken over de context van mobiel computergebruik. Het is zeker één context, maar het is niet de enige. Om onszelf in de schoenen van onze gebruikers te plaatsen, moeten we drie belangrijke mobiele contexten in overweging nemen: Verveeld, Bezet en Verloren.

Verveeld: Er zijn veel mensen die hun smartphones thuis op de bank gebruiken. In deze context passen meeslepende en heerlijke ervaringen gericht op een langere gebruikssessie uitstekend bij elkaar. Toch zijn onderbrekingen zeer waarschijnlijk, dus zorg ervoor dat uw app kan doorgaan waar uw gebruiker was gebleven. Voorbeelden: Facebook, Twitter, Angry Birds, webbrowser.
Bezig: Dit is het scenario van ‘doorlopen door de luchthaven’. Het vermogen om microtaken snel en betrouwbaar met één hand uit te voeren in een hectische omgeving is van cruciaal belang. Onthoud dat de gebruiker in deze context een tunnelvisie heeft, dus enorme doelen en een gedurfd ontwerp zijn belangrijk. Voorbeelden: TripIt, e-mail, agenda, bankieren.
Verloren: Gebruikers die onderweg zijn, in een onbekende omgeving of in een vertrouwde omgeving maar geïnteresseerd zijn in iets onbekends, vallen in de categorie verloren. In deze context zijn schetsmatige connectiviteit en batterijduur grote zorgen, dus u moet een zekere mate van offline ondersteuning bieden en spaarzaam zijn met uw gebruik van geolocatie en andere batterijvarkens. Typische voorbeelden: Maps, Yelp, Foursquare.

03. Wereldwijde richtlijnen

Verschillende apps vragen om verschillende benaderingen, ontwerpen en technieken. Dat gezegd hebbende, suggereert de inherente aard van een touchscreen-apparaat in zakformaat verschillende wereldwijde richtlijnen; dwz de dingen die er altijd toe doen.

Ontvankelijkheid: Reactievermogen is absoluut cruciaal. Ik kan dit niet genoeg benadrukken. Als uw gebruiker iets doet, moet uw app de interactie onmiddellijk erkennen. Merk op dat reactievermogen en snelheid niet hetzelfde zijn. Het is oké als bepaalde operaties tijd vergen. Zorg ervoor dat u de gebruiker laat weten dat u eraan werkt.
Pools: Pools is buitengewoon waardevol. Omdat onze relatie met smartphones ‘constant metgezel’ is, zal het opmerken en waarderen van veel aandacht om de kleine details perfect te krijgen. Ik beschouw dit als de ’pasvorm en afwerking’ van een auto. De motor mag dan krachtig zijn en de carrosseriestijl prachtig, maar als er veel weggeluid of geratel op de snelweg is, zal de ervaring voor de forens slechter worden.
Duimen: Met de komst van touchscreen-interfaces heeft iedereen het altijd over ’vinger dit’ en ’vinger dat’. In werkelijkheid is de duim waar we voor moeten ontwerpen. Tenzij de gebruiker met twee handen met haar smartphone communiceert, is het bijna onmogelijk om een vinger op het scherm te krijgen. En zelfs als ze met twee handen vastzit, typt ze waarschijnlijk met twee duimen. Duimen zijn de standaard.
Doelen: Kijk naar je rechterduim. Niet de tip, maar het gezicht - het deel dat in contact komt met je telefoonscherm. De mijne is de geschatte grootte en vorm van een dop van een fles. Geweldig voor veel dingen, maar verre van precies als het gaat om het richten op kleine delen van mijn smartphone. Het lijkt erop dat het magische aantal voor duimvriendelijke UI-elementen 44 pixels is. Uitzonderingen zijn er in overvloed, maar dit is een goede - ahem - vuistregel. U moet zich er ook van bewust zijn waar u uw doelen ten opzichte van elkaar plaatst. Het zou bijvoorbeeld een slecht idee zijn om de Backspace-knop direct naast de knop Verzenden in een sms-app te plaatsen.
Inhoud: De revolutie van aanraakinterfaces is dat ze ons in staat stellen om rechtstreeks met onze inhoud te communiceren. Dit verwijdert abstracties (zoals muis en trackpad) en komt meer overeen met hoe onze hersenen zijn bedraad. Ik hoef niet ver te zoeken om de betekenis hiervan in te zien: mijn tweejarige kan zonder problemen een iPad bedienen, maar een laptop is hem een raadsel. Maak gebruik van de intuïtieve kracht van aanraakinterface door interfacechroom (knoppen, tabbalken, selectievakjes, schuifregelaars enzovoort) waar mogelijk te minimaliseren en uw inhoud centraal te stellen.

Besturing: Als u toch bedieningselementen moet toevoegen, probeer deze dan onder aan het scherm te plaatsen (met andere woorden onder de inhoud). Denk aan een rekenmachine, een weegschaal of zelfs een computer - de bedieningselementen bevinden zich onder het display. Als ze dat niet waren, zouden we niet kunnen zien wat er met de inhoud aan de hand was terwijl we ze gebruikten. Vergelijk deze realistische ontwerpoverweging met traditionele web- of desktopsoftware, waar navigatie- en menubalken vrijwel altijd aanwezig zijn. de top. Dit is logisch in een muiscontext omdat de aanwijzer bijna onzichtbaar is. Niet zo met de ’vleeswijzer’ aan het uiteinde van je arm.
Scrollen: Vermijd scrollen. Ik kan u verzekeren dat ‘onder de vouw’ bestaat voor mobiel. Het hebben van een niet-scrollend scherm voelt ook steviger en betrouwbaarder aan dan een scrollende weergave, omdat deze beter voorspelbaar is. Natuurlijk moeten bepaalde schermen scrollen, maar het is goed om dit waar mogelijk te vermijden. Als u denkt dat de vindbaarheid een probleem kan zijn, kunt u de bewegende, schuifbare inhoud omkeren naar de standaardpositie om een subtiele maar effectieve indicatie te geven dat er meer inhoud niet zichtbaar is.

04. Navigatiemodellen

Er zijn tal van nieuwe navigatiemodellen voor mobiele apps (denk aan de radiale hoeknavigatie van Path), maar als je een van de gangbare navigatiemodellen gaat gebruiken, zorg er dan voor dat je degene kiest die het meest logisch is voor je app.

Geen: hulpprogramma-apps met één scherm (bijv. De weer-app op de iPhone)
Tabbladbalk: drie tot zes verschillende inhoudsgebieden (bijv. Twitter voor iPhone)
Drill down: lijst en detail inhoudshiërarchie (bijv. App Instellingen op iPhone)

05. Gebruikersinvoer

Typen stinkt zelfs op de beste apparaten, dus u moet doen wat u kunt om het uw gebruikers gemakkelijker te maken. Bijvoorbeeld:

Er zijn ongeveer een dozijn toetsenbordvariaties op populaire smartphones (tekst, nummer, e-mail, URL enzovoort). Overweeg elk van uw invoervelden en zorg ervoor dat u het toetsenbord weergeeft dat het handigst is voor het invoeren van gegevens.
Autocorrectie kan zo hilarisch frustrerend zijn dat er een website aan is gewijd. Overweeg elk van uw invoervelden en beslis welke opties voor automatische invoer moeten worden ingeschakeld (zoals automatisch corrigeren, automatisch hoofdlettergebruik en automatisch aanvullen).
Als je app veel typen uitnodigt, moet je ervoor zorgen dat je de landschapsoriëntatie ondersteunt voor mensen met een dikke duim zoals ik.

06. Gebaren

Een van de meest iconische aspecten van moderne aanraakinterfaces is dat ze op gebaren gebaseerde gebruikersinteractie ondersteunen. Hoe cool gebaren ook zijn, er zijn verschillende dingen die u in gedachten moet houden:

Onzichtbaar: Gebaren zijn onzichtbaar, dus ontdekking is een probleem. U moet beslissen hoe u hun bestaan aan de gebruiker onthult. De slimste benadering die ik heb gezien, is die van de promotie-iPads die in de Apple-winkels zijn gemonteerd. Wanneer een pagina voor het eerst wordt geladen, scrollen gebieden waar u kunt scrollen snel 'achteruit' naar hun standaardpositie. Dit nodigt onmiddellijk uit tot een veeg- of veegbeweging van de gebruiker zonder expliciet aan te geven in welke gebieden kan worden gescrolld.
Twee handen: Voor gebaren met meerdere aanrakingen is bediening met twee handen vereist. Ik vind dit vooral duidelijk in de native Maps-app op iOS, die een open knijpgebaar gebruikt om uit te zoomen. Als ik in een vreemde stad reis met een kopje koffie in de ene hand en mijn telefoon in de andere, is dit een vervelende beperking. Android lost dit probleem op door knoppen voor in- en uitzoomen op de kaart op te nemen (wat betekent dat u kunt blijven genieten van uw koffie terwijl u door Londen reist).
Goed om te hebben: In de meeste gevallen vind ik gebaren ’leuk om te hebben’, maar niet kritisch. Een beetje zoals sneltoetsen: ervaren gebruikers zullen er dol op zijn, maar de meeste mensen weten niet eens dat ze er zijn.
Geen vervanging: Een algemeen vocabulaire voor gebaren bestaat nog niet, dus het is te vroeg voor de meeste apps om zichtbare bedieningselementen die met één vinger kunnen worden gebruikt, over te slaan.

07. Oriëntatie

Portret is verreweg de meest populaire oriëntatie, dus optimaliseer eerst voor dit geval.
Als uw app veel typen uitnodigt, moet u de liggende stand ondersteunen, zodat mensen toegang hebben tot het grotere toetsenbord.
Wanneer oriëntatie onverwacht verandert, is het, nou… desoriënterend. Als je denkt dat je app voor langere tijd zal worden gebruikt (bijvoorbeeld de Kindle Reader-app), overweeg dan om een oriëntatievergrendeling rechtstreeks in de app toe te voegen.

08. Communicatie

Geef feedback: Geef direct feedback voor elke interactie. Als je dat niet doet, zal de gebruiker zich afvragen of de app is vastgelopen of dat ze het doel hebben gemist dat ze probeerden te raken. De feedback kan tactiel zijn (zoals de 'dreun'-vibratie van Android) of visueel (bijvoorbeeld door een aangetikte knop te markeren). Als de gebruiker een actie heeft aangevraagd die lang zal duren, laat dan een spinner of voortgangsbalk zien om hem te laten weten dat je zijn verzoek hebt ontvangen en eraan werkt.
Modale waarschuwingen: Modale waarschuwingen zijn extreem opdringerig en indringend in de stroom van de gebruiker, dus u moet ze alleen gebruiken als er iets ernstig mis is. Probeer zelfs dan de intensiteit te verminderen door de taal geruststellend en vriendelijk te houden. Denk eraan om geen modale waarschuwingen te gebruiken voor informatie van het type ’FYI’.
Bevestigingen: Wanneer u een gebruiker moet vragen om een actie te bevestigen, is het acceptabel om een modaal bevestigingsvenster weer te geven (zoals ’Weet u zeker dat u dit concept wilt verwijderen?’). Bevestigingen zijn minder opdringerig dan waarschuwingen omdat ze een reactie zijn op een gebruikersactie en daarom in context zijn en misschien zelfs worden verwacht. Zorg ervoor dat u de ‘veiligste’ keuze de standaardknop in het dialoogvenster maakt om onbedoelde destructieve acties te voorkomen.

09. Lancering

Wanneer een gebruiker teruggaat naar uw app nadat hij deze eerder heeft gebruikt, moet u de bewerkingen hervatten waar de gebruiker was gebleven. Dit geeft de illusie van snelheid en draagt bij aan een algemeen gevoel van reactievermogen.

Indien mogelijk moet het startscherm dat u weergeeft wanneer de app voor het eerst wordt geladen, een ‘inhoudloze’ afbeelding van uw app zijn. Alles dat er interactief uitziet (zoals knoppen, links, pictogrammen, inhoud) zal frustratie veroorzaken door mislukte interacties uit te nodigen.

OPMERKING: Weersta de verleiding om merkmateriaal op uw startscherm te plaatsen. Ze geven de gebruiker het gevoel dat ze een advertentie bekijken en ze zullen je kwalijk nemen dat je ze erin hebt laten zitten. Natuurlijk gaat een startscherm met een merk niet langer mee dan een leeg, maar de perceptie van vertraging bestaat hoe dan ook.

10. Eerste indrukken

Jouw icoon: Uw pictogram moet strijden om aandacht in een zee van andere pictogrammen. Beschouw het daarom meer als een visitekaartje dan als een kunstwerk. Wees letterlijk - laat zien wat uw app doet. Gebruik een sterk silhouet en beperk de tekst tot een minimum. Een gepolijst pictogram suggereert een gepolijste app, dus het is de moeite waard om er serieus tijd en geld aan te besteden om het goed te doen.
Eerste lancering: De eerste lancering is een make-of-break-situatie. Als een nieuwe gebruiker in de war raakt of gefrustreerd raakt terwijl hij probeert vertrouwd te raken met uw app, wordt deze zo snel mogelijk verwijderd. Als uw app complexe functionaliteit biedt, wilt u misschien een overlay met ’tips en trucs’ toevoegen, of misschien een paar panelen met oriëntatieschermen. Merk op dat dit zo is niet een vervanging voor een goed ontwerp; als u merkt dat u veel helptekst maakt, kan dit erop wijzen dat uw gebruikersinterface moet werken.

Conclusie

Mobiel computergebruik biedt een verbluffende kans voor webontwerpers en ontwikkelaars die productief willen worden op mobiel. Ja, er is een beetje een leercurve, maar veel van de oude ervaring, vaardigheden en tools van een webprofessional zullen goed worden vertaald. Toegegeven, het tempo van verandering in de mobiele wereld kan soms een beetje ontmoedigend zijn - maar hey ... het verveelt tenminste nooit.