Vanliga misstag vid utformning för mobil
Du har redan en bra appidé och arbetar furiously för att bygga och starta den. Eller du utvecklar en mobil webbplats för att komplimangera en skrivbordsbyggnad. Eller kanske du raffinerar en stationär design för att skala på ett effektivt sätt på enheter.
Oavsett ditt mål för mobil utveckling, innan du startar, låt oss ta en snabb paus från den processen för att se till att du inte gör några av de vanligaste mobildesignfel.
Lita på mig, det är värt tiden och dina kunder kommer att tacka dig.
1. Förbättra inte funktionen
När du bygger mjukvaror är det lätt att få bäras bort genom att lägga till alla dessa fantastiska funktioner. "Skulle det inte vara coolt om ..." är en farlig fras när det gäller att träffa deadlines och leverera kvalitetsprogramvara.
Om du försöker implementera för många funktioner kommer både kvaliteten på upplevelsen och designen att drabbas, för att inte tala om vad som kommer att hända med dina tidsfrister.
Samtidigt vill du inte fokusera så snävt att du saknar potentiellt bra idéer. Det är här den här frasen kommer in: "Dröm stor, genomföra små."
I planeringsfasen lägger varje idé ner på papper, oavsett hur grandiöst eller löjligt det låter. Spela in och överväga det. Dröm stort. Då kan du vara säker på att du inte överför några bra idéer.
Då väljer du bara några saker när du bestämmer vad du ska bygga. Av den hela listan, vilka en eller två saker kan du släppa ut på egen hand? Var hänsynslös när du skär ut funktioner. För att bli framgångsrik måste du börja små.
När du väl har valt en eller två funktioner du ska bygga, fokusera allt på att bygga en kvalitetsupplevelse. Ställ stången för upplevelsen så hög som möjligt. Ditt mål bör vara att börja med en enkel applikation som är en glädje att använda.
Med det som utgångspunkt kan du släppa förr och ta reda på om någon egentligen bryr sig om det problem du har löst. Då kan du gradvis lägga till fler funktioner, men bara när du kan behålla den höga standard du redan har ställt för programmets kvalitet. Om du inte kan hitta ett sätt att designa en funktion med den kvalitetsnivån, lägg inte till den.
Uppoffera aldrig upplevelse för en annan funktion.
Så dröm stort, genomföra små och du kommer att vara på väg.
(Tack till Dan Cederholm of Dribbble för att introducera mig till denna fras).
2. Dålig inriktning och avstånd
Utvecklare klagar ofta på mig att designen är svår. Om det bara kan vara analytiskt som programmering skulle det bli lättare. Nåväl, du har tur. Jag vill att du ska använda analytisk precision för att se till att alla element i din design är ordentligt anpassade. Därmed menar jag inte att de måste följa någon snygg designteknik. Jag menar bara att allt som är anpassat till vänster kant ska vara samma avstånd. Om dina marginaler är 10px, använd det hela.
Elementen ska vara ordentligt åtskilda från varandra och ha gott om vaddering mellan varje element. Jag vet att du har fått höra att lägga till mer vitt utrymme innan, men det är verkligen viktigt.
3. Använd inte knappar med fingertryck
När du försöker passa allt i en mobil skärm kan det vara frestande att minska storleken på dina knappar. Den minsta rekommenderade beröringsstorleken är 44 pixlar kvadrat.
Fingrar och tummar kommer i alla olika storlekar, så vad som fungerar bra för små händer kanske inte fungerar för någon med stora händer. Genom att hålla kranmål större än detta minimum undviker du frustrerande användare.
Bara för att ditt kranmål måste vara 44 pixlar i kvadrat betyder inte att knapputskriften själv måste vara. Du kan öka målinriktningen som är större än knappen själv för att hjälpa felaktiga kranar utlöser fortfarande knappen. Om din knapp inte är precis bredvid andra element med knappåtgärder kan knappen faktiskt vara ganska större utan att ändra visuell design
4. Använda brödsmulor i navigeringen
Tänk dig att du surfar på en app och har arbetat med dig 4 nivåer djupt. Efter att ha läst det innehållet vill du gå upp en nivå, men slumpmässigt tryck på "Home" -nivå i brödsmulorna. Aj. Det är som en återställningsknapp för ditt tidigare arbete som bläddrar till den sektionen. Vi har redan etablerat det på grund av små kranmål, använder användarna ofta av misstag de felaktiga elementen.
En enkel "Tillbaka" -knapp rekommenderas i en titellinje för appen (behövs inte på Android-enheter med en hårdvaruknapp). Många utvecklare tror att de gör sakerna enklare för sina användare genom att lägga till breadcrumb-navigering i huvudet, så att användarna kan hoppa tillbaka till vilken nivå de vill ha.
Det är att föredra att Back-knappen ändrar sin etikett baserat på vilken sida det tar dig till. Så det kunde läsa "Inställningar" eller "Användare" beroende på vad den tidigare vyn var.
5. Logotyper i titelfält
I ett försök att tydligare märka en ansökan placerar designers ofta företagslogotypen framträdande i titellinjen och ersätter namnet på sidan i processen. Det här är bra för den första sidan där användaren kanske inte behöver kontext. Men på efterföljande sidor vill du reservera titelfältet för sidtiteln. Detta hjälper till att ge användarkontexten och informerar dem om innehållet som de borde förvänta sig att hitta längre ner på sidan.
Twitter-appen för iPhone hanterar det här bra och lägger en enkel logotyp i titellinjen på första sidan, men på alla efterföljande sidor ersätter den med standardtiteltexten.
Om din design behöver starkare branding bör du se över dina färgscheman och stilar istället för att bara tvinga större logotyper till gränssnittet.
6. Inte gör test av användbarhet
Du är inte i stånd att noggrant bedöma användbarheten för projekt som du arbetar nära. Begrepp som kan tyckas komplicerade först kommer naturligtvis till dig nu när du har nedsänkts i dem i flera månader. Vad som händer är att vi tittar igenom och testa vår egen programvara, inte inser våra egna fördomar. Att inte få yttre åsikter är ett stort misstag. Du vill inte ha den första gången du upptäcker att en skärm inte är intuitiv att vara när en irat klient telefoner klagar upp.
Användbarhetsprovning är avgörande för designprocessen. Så varför undviker så många människor det? Enkelt: De inser inte hur lätt det är att göra. När jag pratar om användbarhetstestning menar jag inte att du anställer en firma i vita lager för att göra en vecka lång studie där de analyserar din design noggrant.
Istället hitta bara en vän som aldrig hört talas om din webbplats tidigare. Börja med att ge dem en liten bit av kontext som "Vad tycker du om den här listan?" Du behöver inte ens berätta för dem att det är ditt (feedbacken kan vara mer trubbig). Nästa steg är enkelt: bara se dem använda det . Var uppmärksam på vilka skärmar de fastnade på, när de slutar läsa texten och när de bara börjar knacka på knappar. Du kommer snabbt att upptäcka områden som inte är lika intuitiva som de kan vara.
Ofta små förändringar kommer att göra en stor skillnad. En välplacerad verktygstips kan räcka för att förklara ett koncept och visa användaren var man trycker på nästa. Håll din testning informell och försök med 3-5 personer. Du lär dig mycket.
Slutsats
Det finns många misstag du kan göra, men den här kortlistan kommer att komma igång. De två viktigaste koncepten förädlar din funktionalitet och gör användbarhetstestning. Få dem rätt och allt annat kommer att falla på plats.
Om denna post beskrivna delar av din mobila upplevelse, oroa dig inte. De är alla lätta misstag att göra. Men om du undviker dem blir din mobila upplevelse mycket renare och mer fokuserad.
Har du gjort några, eller kanske alla, av dessa misstag? Vilka nej-nos skulle du lägga till för mobil design? Låt oss veta i kommentarerna nedan.