7 UX-designtips för mobila appar

Har du ett mobilappprojekt i arbeten? Vad är din designplan? Har du hoppat rakt in eller slutat att överväga den erfarenhet som slutanvändaren kommer att ha när de först öppnar appen?

Det kan vara värt att tänka på en estetik med noggrant övervägande användarupplevelsesteknik. Många av de begrepp vi ser i webbdesign är också tillämpliga på mobilappar, men de kan ta en lite annorlunda form eller form för att bättre passa den mindre skärmstorleken. Här kommer vi att titta på sju bra alternativ och exempel som du kan ansöka om din egen mobilappdesign.

1. Fet, Stark Typografi

Enklare typ är lättare att läsa på en liten skärm, speciellt mot bakgrundsbelysning eller under miljöförhållanden. Detta faktum ensamt hjälper till att köra varför enkel sans serif typografi är go-till alternativet för mobilappar.

Och medan tunna var för några år sedan har pendeln svängit så att designers väljer tjockare slagbredd och djupare typalternativ. Storlek är också viktigt också. Fler appar använder stänkskärmar med överdimensionerad typ eller hemskärmar med fet bokstäver mot en kontrasterande bakgrund för att hjälpa användare att engagera och navigera genom appen.

Vad som är trevligt med denna trend är att det finns ett tydligt fokus på läsbarhet. (Vilken är punkten för all text, eller hur?) Den ena delen av denna trend är försiktig med att använda för många alla caps ord eller fraser. Medan alla kepsar kan vara ett bra alternativ för ett enda ord, till exempel? SUNNY? i Weather Channel-appen ovan kan detta bli besvärligt för längre textblock.

Att använda den här trenden håller två saker i åtanke:

  1. Typografi och språk borde vara enkla.
  2. Kontrast mellan bakgrund och bokstäver bör vara intensiv för maximal läsbarhet.

2. Lager och Djup

Materialdesign har blivit markerad om och om igen som en av de bästa designtrenderna att titta på i år. Och det finns god anledning.

För det första är det den designplattform som Google har antagit. När en jätte går in i någonting, kommer många andra säkert att följa. (Och de är.) För det andra är det ett mycket intuitivt koncept med en lättanvänd gränssnittsdesign som också är lätt i ögonen.

En av de mest slående delarna av Material Design är att skapa lager för att hjälpa användare att interagera med designen. Det är det enda materialet som verkligen dyker upp i gränssnitt överallt, inklusive i Apples apps.

Tricket att göra dessa lager fungerar är subtilt. Lager staplar med små (nästan osynliga men naturliga utseende) skuggor för att skilja på element. Dessa lager är också interaktionssteg. Basskiktet eller bakgrunden är informationsportalen och de översta lagren innehåller interaktionsverktyg.

Titta på Uber, ovan, till exempel. Kartan ligger längst ner på skärmen. Tryck på knappen Hämtningsplats för att ställa in en adress eller flytta till adresslagren ovan för att ändra platser. Varje skikt ger användaren flera sätt att arbeta med appen.

3. Monotona färgscheman

Användning av en enda färg med svarta och vita accenter är ett bra sätt att skapa visuellt intresse på en liten skärm. Välj ett ljust, djärvt eller ovanligt färgalternativ som stannar mest ut. Eller bygg i flera sådana alternativ i gränssnittet och ge användarna kontroll över färgschemat.

Det är precis vad Streaks appen ovan gör. Konceptet är så enkelt - Ange mål och appen kommer att påminna dig om att kolla upp uppgifterna. Användaren kan ställa in en bakgrundsfärg baserad på arbetsgruppen och enkla meddelanden påminner dig om saker du borde göra.

Färgen, ikonografi och enkel typ är en slående kombination som är lätt att läsa och engagera sig i. Designen är så snygg det gör att du nästan vill lägga till fler uppgifter till din att göra-lista.

4. Fokusera på mikro-interaktioner

Och talar om interaktioner, varje bra app innehåller sömlösa mikro-interaktioner. Mikro-interaktioner är de små signaler som kan gå obemärkt men är en viktig del av hur användarna interagerar med eller är beroende av specifika appar.

Mikro-interaktioner bör utformas för att hjälpa användaren att göra någonting. Från ett textmeddelande till ett larm till en social media? Gillar ,? Dessa lilla divots är överallt. Och de borde göra en sak: Njut användaren.

I de enklaste termerna tenderar mikro-interaktioner att göra tre saker:

  1. Kommunicera feedback, något som liknar något i Instagram
  2. Se en åtgärd, likadant? resultera i att hjärtat blir rött
  3. Hjälper användaren att göra eller se något, till exempel en anmälan om att din bild har liknat

5. Kort, kort och fler kort

Medan kortrevolutionen kan ha börjat med Pinterest, fortsätter estetiken att öka momentum tack vare Material Design och adoption av massiva webbplatser som Facebook och SoundCloud (ovan).

Kort är ett bra sätt att organisera och utveckla massiva mängder innehåll på ett sätt som är lätt att smälta. Varje element är en enhet som gör en enda sak i designen. Vad som är trevligt med dessa enheter är att varje man faktiskt kan göra något annat.

Så ett kort kan låta dig titta på en video och nästa kort i sekvenslänkarna till en annan app och kortet efter det innehåller ett långt block av text som ska läsas. Den andra bonusen till kort, särskilt i appar, är att de är så lätta att använda. De flesta appar delar upp skärmen i halv för två kort, till exempel SoundCloud, eller använd ett kort per skärmformat så att allt du berör tar dig till önskat element. (Inga bekymmer om? Feta fingrar? Här!)

6. Enkel navigering

Dolda menyer, pop-out-navigering och stora knappar är en stor sak. Antalet apps med navigering på startskärmen minskar. Nästan alla flyttar till en dold stil för att få ut det mesta av varje tum av värdefullt skärmutrymme.

Och användarna verkar inte tänka sig.De har antagit tanken på en knapp för att visa navigation ganska enkelt. Tricket är att se till att när det här navigationselementet ses är det mycket funktionellt.

Slack är ett av de bästa exemplen på detta. Det har faktiskt navigering som dyker upp från vänster och höger om skärmen. Huvudprogrammets funktionalitet kommer ut från höger sida (ovan), men navigeringen som är specifik för din kanal finns i vänstra menyn.

7. Animationstankar

Blixt av animering är den extra speciella touch som kan göra din app speciell. Animering kan lägga till användbarhet, ge fokus för användaren och tjäna som en glädjepunkt.

Eftersom du inte nödvändigtvis kan redogöra för var användarna kommer åt en app - och vilken internetuppkoppling de kan ha - är det viktigt att bygga in små och lätta animationer och inte lita på anslutning.

Strava är fylld med små animeringar. (Så liten att du kanske saknar dem om du inte uppmärksammar.) Det finns fina övergångar mellan skärmar, som det ovan beskrivna utmaningsalternativet. Kartpunkter inkluderar en pulserande animering och du kan faktiskt se din punkt flytta längs banor när du spårar aktivitet.

Slutsats

När du överväger nya sätt att ta livet till en mobilapp, titta först på dagens digitala designtrender och fundera sedan på hur man applicerar dem i mindre skala. Vad som kan överraska dig är att tänka mindre, kan faktiskt inkludera att utforma större (i form av skala i alla fall).

Vilka trender i appdesign är du mest förtrollad med? Finns det andra trender du bara vill åka iväg? Låt mig veta på Twitter (tag @ carriecousins ​​och @designshack), letar jag alltid efter nya idéer att försöka? och undvik.