De tio principerna för mobil gränssnittsdesign

Författare: Randy Alexander

Skapelsedatum: 25 April 2021

Uppdatera Datum: 9 Maj 2024

De tio principerna för mobil gränssnittsdesign - Kreativ

Innehåll

Mobilen är annorlunda
01. Mobil tänkesätt
02. Mobila sammanhang
03. Globala riktlinjer
04. Navigationsmodeller
05. Användarinmatning
06. Gester
07. Orientering
08. Kommunikation
09. Lansering
10. Första intryck
Slutsats
Gillade detta? Läs dessa!

Oavsett hur du mäter det, mobilen är enorm och växer. Konvergensen mellan molnberäkning, allestädes närvarande bredband och prisvärda mobila enheter har börjat förändra alla aspekter av våra samhällen. Analytiker förutspår att mobiltelefoner kommer att gå förbi stationära datorer fram till 2015 som vårt främsta sätt att komma åt internet.

För att hålla jämna steg med detta snabbt föränderliga landskap måste designers och utvecklare - och människorna som arbetar med dem - börja tänka på mobil som ett primärt projektmål; inte något tackat på ett skrivbordscentrerat projekt som en eftertanke.

Mobilen är annorlunda

Även om de ofta klumpas ihop som datorenheter, är smartphones och stationära datorer väldigt olika: liten skärm vs stor skärm, intermittent vs pålitlig anslutning, låg vs hög bandbredd, batteridriven vs inkopplad och så vidare. Med denna lista kan man frestas att tänka på mobila enheter som underdrivna versioner av ”riktiga” datorer. Men detta skulle vara ett misstag.

I själva verket är det omvända: smartphones är faktiskt mer kraftfulla än stationära datorer på många sätt. De är mycket personliga, alltid på, alltid hos oss, vanligtvis anslutna och direkt adresserbara. Dessutom kryper de med kraftfulla sensorer som kan upptäcka plats, rörelse, acceleration, orientering, närhet, miljöförhållanden och mer.

Med tanke på de många skillnaderna mellan mobila och stationära datorer, bör det inte bli någon chock att design för mobil är väldigt annorlunda än att designa för skrivbordet. Från mina workshops har jag sammanställt en lista med tio principer för mobilgränssnittsdesign som hjälper människor som är bekanta med skrivbordsdesign och utveckling att släppa loss mobilplattformens unika kraft.

01. Mobil tänkesätt

På grund av skillnaderna mellan mobil och stationär dator är det absolut nödvändigt att ta dig in i en mobil tänkesätt innan du börjar.

Var fokuserad: Mer är inte bättre. Redigera dina funktioner hänsynslöst. Du är kommer att behöva lämna saker ute.

Vara unik: Vet vad som gör din app annorlunda och förstärka den. Det finns många fiskar i havet av mobilappar. Om det inte finns något speciellt med din app, varför skulle någon välja den?
Var charmig: Mobila enheter är mycket personliga. De är våra ständiga följeslagare. Appar som är vänliga, pålitliga och roliga är en glädje att använda, och människor kommer att bli ganska knutna till upplevelsen.
Var hänsynsfull: Apputvecklare fokuserar för ofta på vad som skulle vara kul att utveckla, deras egen mentala modell av appen eller deras personliga affärsmål. Det här är bra ställen att börja på, men du måste sätta dig själv i användarnas skor om du någonsin hoppas kunna skapa en engagerande upplevelse.

02. Mobila sammanhang

Bilden av den hektiska professionella racing genom flygplatsen med en väska i ena handen och en smartphone i den andra är vad många människor föreställer sig när de tänker på kontext för mobil dator. Det är verkligen ett sammanhang, men det är inte det enda. För att börja sätta oss i våra användares skor måste vi överväga tre stora mobila sammanhang: Uttråkad, upptagen och förlorad.

Uttråkad: Det finns många människor som använder sina smartphones i soffan hemma. I detta sammanhang passar uppslukande och härliga upplevelser inriktade på en längre användningssession. Det är fortfarande troligt att avbrott är så se till att din app kan fortsätta där din användare slutade. Exempel: Facebook, Twitter, Angry Birds, webbläsare.
Upptagen: Detta är scenariot "som går på flygplatsen". Förmågan att utföra mikrouppgifter snabbt och pålitligt med en hand i en hektisk miljö är avgörande. Kom ihåg att användaren kommer att ha tunnelsyn i detta sammanhang, så stora mål och djärv design är viktiga. Exempel: TripIt, e-post, kalender, bank.
Förlorat: Användare som är i transit, i okända omgivningar eller i bekanta omgivningar men som är intresserade av något okänt runt hamnar i den förlorade kategorin. I det här sammanhanget är skissartad anslutning och batteritid stora problem, så du bör erbjuda viss nivå av offline-support och vara sparsam med din användning av geolokalisering och andra batterisvin. Typiska exempel: Kartor, Yelp, Foursquare.

03. Globala riktlinjer

Olika appar kräver olika tillvägagångssätt, design och tekniker. Med detta sagt föreslår den inneboende naturen hos en pekskärmsenhet i fickformat flera globala riktlinjer; det vill säga de saker som alltid betyder något.

Lyhördhet: Lyhördhet är absolut kritisk. Jag kan inte betona detta nog. Om din användare gör något måste din app bekräfta interaktionen direkt. Observera att lyhördhet och hastighet inte är samma sak. Det är OK om vissa operationer tar tid. Se bara till att du låter användaren veta att du arbetar med det.
putsa: Polska är extremt värdefullt. På grund av den ”ständiga följeslagaren” i vårt förhållande till smartphones kommer man att uppmärksamma och uppskatta mycket uppmärksamhet på att få de små detaljerna perfekta. Jag tänker på detta som att vara som en bils "passform och finish". Motorn kan vara kraftfull och karossstilen underbar, men om det är mycket vägbuller eller skramling på motorvägen kommer upplevelsen att försämras för pendlaren.
Tummen: Med tillkomsten av pekskärmsgränssnitt talar alla alltid om "finger här" och "finger det". I verkligheten är tummen det vi behöver utforma för. Om inte användaren interagerar med sin smartphone med två händer är det nästan omöjligt att få ett finger på skärmen. Och även i tvåhandsgrepp skriver hon sannolikt med två tummar. Tummen är standard.
Mål: Titta på din högra tumme. Inte tipset utan ansiktet - den del som kommer i kontakt med din telefonskärm. Gruvan är ungefärlig storlek och form på en flasklock. Perfekt för många saker, men långt ifrån exakt när det gäller att rikta in sig på små regioner på min smartphone. Det verkar som om det magiska antalet för tumvänliga användargränssnittselement är 44 pixlar. Undantag finns i överflöd, men det här är en bra tumregel. Du bör också vara medveten om var du placerar dina mål i förhållande till varandra. Till exempel skulle det vara en dålig idé att placera Backspace-knappen direkt intill Skicka-knappen i en SMS-app.
Innehåll: Revolutionen med pekgränssnitt är att de gör det möjligt för oss att interagera direkt med vårt innehåll. Detta tar bort abstraktioner (som mus och styrplatta) och är mer i linje med hur våra hjärnor är kopplade. Jag behöver inte se långt för att se betydelsen av detta: min tvååring kan använda en iPad utan svårigheter, men en bärbar dator är ett mysterium för honom. Utnyttja den intuitiva kraften i touch-gränssnittet genom att minimera gränssnittskrom (knappar, flikfält, kryssrutor, skjutreglage och så vidare) där det är möjligt och placera ditt innehåll framför och i mitten.

Kontroller: När du måste lägga till kontroller, försök att placera dem längst ner på skärmen (med andra ord under innehållet). Tänk på en tilläggsmaskin, en badrumsvåg eller till och med en dator - kontrollerna finns under skärmen. Om de inte gjorde det skulle vi inte kunna se vad som hände med innehållet medan vi använde dem. Kontrastera den här verkliga designhänsynen med traditionell webb- eller skrivbordsprogramvara, där navigering och menyrader nästan alltid finns toppen. Detta är vettigt i ett mus-sammanhang eftersom pekaren är nästan osynlig. Inte så med "köttpekaren" i slutet av armen.
Rulla: Undvik att rulla. Jag kan försäkra dig om att ”nedanför mitten” finns för mobilen. Att ha en icke-rullningsskärm har också en mer solid och pålitlig känsla än en rullningsvy eftersom den är mer förutsägbar. Naturligtvis måste vissa skärmar rulla, men det är bra att undvika det där du kan. Om du tror att upptäckbarhet kan vara ett problem kan du vända animerat rullbart innehåll till sin standardposition för att ge en subtil men effektiv indikation på att det finns mer innehåll ur sikte.

04. Navigationsmodeller

Det finns många nya navigeringsmodeller för mobilappar (Paths radiella hörnnav kommer i åtanke) men om du ska använda en av de vanliga navigeringsmodellerna, var noga med att välja den som är bäst för din app.

Ingen: verktyg för appar med en skärm (t.ex. Weather-appen på iPhone)
Fältfält: Tre till sex olika innehållsområden (t.ex. Twitter för iPhone)
Drill down: Lista och detaljera innehållshierarkin (t.ex. appen Inställningar på iPhone)

05. Användarinmatning

Att skriva stinker även på de bästa enheterna, så du bör göra vad du kan för att göra det lättare för dina användare. Till exempel:

Det finns ungefär ett dussin tangentbordsvarianter på populära smartphones (text, nummer, e-post, URL och så vidare). Tänk på vart och ett av dina inmatningsfält och se till att du visar tangentbordet som är mest användbart för datainmatningen.
Autokorrigering kan vara så roligt frustrerande att det finns en webbplats som ägnas åt den. Tänk på vart och ett av dina inmatningsfält och bestäm vilka alternativ för automatisk inmatning som ska aktiveras (t.ex. automatisk korrigering, automatisk kapitalisering och automatisk komplettering).
Om din app bjuder in mycket att skriva, bör du se till att du stöder liggande orientering för tjocka folk som jag.

06. Gester

En av de mest ikoniska aspekterna av moderna pekgränssnitt är att de stöder gestbaserad användarinteraktion. Så coola som gester är, det finns flera saker du måste tänka på:

Osynlig: Gester är osynliga, så upptäckt är ett problem. Du måste bestämma hur du ska avslöja deras existens för användaren. Det mest smarta tillvägagångssättet jag har sett är på reklam-iPads monterade i Apples butiker. När en sida först laddas gör alla rullningsbara områden en snabb ”omvänd bläddring” till sin standardposition. Detta uppmanar omedelbart en svep- eller svängningsgest från användaren utan att behöva ange uttryckligen vilka områden som kan rullas.
Två händer: Multitouch-gester kräver tvåhänder. Jag tycker detta är särskilt tydligt i den inbyggda Maps-appen på iOS som använder en nypa öppen gest för att zooma ut. När jag reser i en främmande stad med en kaffe i ena handen och min telefon i den andra är detta en irriterande begränsning. Android åtgärdar det här problemet genom att inkludera zoom-in / ut-knappar som är överlagrade på kartan (vilket innebär att du kan fortsätta njuta av ditt kaffe medan du hovar det runt London).
Trevligt att ha: I de flesta fall anser jag att gester är ”trevliga att ha” men inte kritiska. Som tangentbordsgenvägar - kraftanvändare kommer att älska dem, men de flesta vet inte ens att de är där.
Ingen ersättning: En vanlig ordförråd för gester finns inte ännu, så det är för tidigt för de flesta appar att hoppa över synliga kontroller som kan användas med ett finger.

07. Orientering

Porträtt är överlägset den mest populära orienteringen så optimera för det här fallet först.
Om din app bjuder in mycket att skriva bör du stödja liggande orientering så att människor kan komma åt det större tangentbordet.
När orienteringen förändras oväntat är det, ja ... desorienterande. Om du tror att din app kommer att användas under långa perioder (till exempel Kindle Reader-appen), överväg att lägga till ett orienteringslås direkt i appen.

08. Kommunikation

Ge feedback: Ge omedelbar feedback för varje interaktion. Om du inte gör det undrar användaren om appen har frusit upp, eller om de missade målet de försökte nå. Återkopplingen kan vara taktil (som Android 'dunkvibration) eller visuell (till exempel markera en knackad knapp). Om användaren har begärt en åtgärd som kommer att ta lång tid, visa en spinner eller förloppsindikator för att meddela dem att du har fått deras begäran och arbetar med den.
Modala varningar: Modala varningar är extremt påträngande och påträngande för användarens flöde, så du bör bara använda dem när något är allvarligt fel. Även då försöker du mildra intensiteten genom att hålla språket lugnande och vänligt. Kom ihåg att inte använda modala varningar för information av typen ”FYI”.
Bekräftelser: När du måste be en användare att bekräfta en åtgärd är det acceptabelt att visa en dialogruta för modal bekräftelse (t.ex. ”Är du säker på att du vill ta bort detta utkast?”). Bekräftelser är mindre påträngande än varningar eftersom de svarar på en användaråtgärd och därför i sammanhang och kanske till och med förväntas. Var noga med att göra det säkraste valet till standardknappen i dialogrutan för att undvika oavsiktliga destruktiva åtgärder.

09. Lansering

När en användare går tillbaka till din app efter att ha använt den tidigare bör du återuppta operationerna precis där användaren slutade. Detta ger illusionen av hastighet och bidrar till en övergripande känsla av lyhördhet.

Om det är möjligt bör startskärmen som visas när appen laddas först vara en 'innehållslös' bild av din app. Allt som ser interaktivt ut (som knappar, länkar, ikoner, innehåll) kommer att skapa frustration genom att bjuda in misslyckade interaktioner.

OBS: Motstå frestelsen att placera varumärkesmaterial på din startskärm. De får användaren att känna sig som om de tittar på en annons och de kommer att bli emot dig för att få dem att sitta genom den. Självklart håller en märkesstartskärm inte längre än en tom, men uppfattningen om fördröjning existerar oavsett.

10. Första intryck

Din ikon: Din ikon måste tävla om uppmärksamhet i ett hav av andra ikoner. Om så är fallet, tänk på det mer som visitkort än ett konstverk. Var bokstavlig - visa vad din app gör. Använd en stark silhuett och håll texten till ett minimum. En polerad ikon föreslår en polerad app, så det är värt att ägna allvarlig tid och pengar åt att göra det rätt.
Första lanseringen: Första lanseringen är en make or break-situation. Om en ny användare blir förvirrad eller frustrerad när han försöker bekanta sig med din app kommer de att döda den ASAP. Om din app tillhandahåller komplex funktionalitet kanske du vill inkludera ett tips och tricks-överlägg eller kanske några paneler med orienteringsskärmar. Observera att detta är inte en ersättning för en bra design; om du befinner dig att skapa mycket hjälptext kan det tyda på att ditt användargränssnitt behöver fungera.

Slutsats

Mobile computing utgör en häpnadsväckande möjlighet för webbdesigners och utvecklare som vill bli produktiva på mobilen. Ja, det finns lite av en inlärningskurva, men mycket av en webbproffs erfarenhet, färdigheter och verktyg kommer att översättas snyggt. Visserligen kan förändringshastigheten i mobilvärlden ibland vara lite skrämmande - men hej ... det är åtminstone aldrig tråkigt.