Har du tittat på din webbplatsanalys nyligen? Chanserna är en stor del - kanske till och med hälften av dina användare kommer till din webbplats via mobilenhet.
Oavsett om du fokuserar mobila ansträngningar på en webbplats eller app, måste du se till att designen skapar en fantastisk användarupplevelse för alla dessa mobilanvändare. Du behöver inte börja från början för att göra det heller. Att tänka på mobilanvändaren och hur de interagerar med designen kommer att hjälpa till att forma hur gränssnittet ser ut och fungerar.
Här är fem designtrådar som du kan använda för att göra din mobil UX en som användare älskar.
1. Streamline Navigation
De här huvudmenyerna i huvudmenyn ger dig inga fördelar - speciellt när det gäller mobilen. Mobila användare kan ha de kortaste uppmärksamhetsutrymmena för en grupp användare. De vill öppna webbplatsen eller appen och hitta vad de behöver direkt.
Design navigeringsmenyer med bara några alternativ - kolla på dina analyser för att se hur majoriteten av användarna letar efter eller navigerar till först.
Färre alternativ kommer att ta mindre skärmutrymme, så att du kan ta med mer utrymme i designen, vilket är idealiskt för beröring och läsbarhet.
Medan vi inte kommer att argumentera för fördelarna med hamburgerikonen här är pop-out-navigering ett mönster som användarna är vana vid. Se bara till att om du planerar att pop eller skjuta upp navigationsmenyn, så finns det en tydlig visuell identifierare för användarna.
Ebates-appen använder två nivåer av navigering: En som är en lista över deras bästa erbjudanden och en annan som är din bokmärkta lista över favoritbutiker (i hamburgaren / hjärtatikonen). Varken alternativet känns tungt. Det ser nästan ut och fungerar som innehåll. Hela designen är navigering utan att känna sig överväldigande.
2. Tänk på gester (och haptiker)
Mobila användare interagerar med sina enheter ganska annorlunda än stationära användare. Ditt användargränssnitt bör ta hänsyn till detta.
Designen ska utnyttja gester för att utföra vissa åtgärder. Ett gränssnitt som använder vanliga och intuitiva kontroller kommer att glädja användarna.
Dessa gester inkluderar:
- Tryck och dubbelklicka på
- Tryck
- Håll
- Dra och släpp
- Bläddra (singel och tvåfinger)
- Zooma in och ut
- Svep
- Snärt
När det gäller mobila gester är de nya klicken.
Och när du tänker på kontaktsamverkan, glöm inte bort haptics. Den subtila bumpen? från din bärbara eller att vibrationer från telefonen i fickan är haptiska meddelanden, mekaniska simuleringar av beröring med vibration eller rörelse.
Tricket till haptic är att interaktionerna är subtila och ganska diskreta. Medan användaren kanske vet att det finns en anmälan, gör det ofta inte andra människor. Pekgränssnittet blir allt vanligare hela tiden och verkar vara ett positivt svar från användarna.
The Two Dots-spel, till exempel, använder en bump varje gång du rensar punkter på ett visst sätt. Det ljudlösa alternativet ger diskret spel och ger en härlig upplevelse för användarna.
3. Gör det Conversational
Människor gillar att känna att de pratar med och interagerar med andra människor. Tack och lov för designers, kan en touch av artificiell intelligens och chatbots hjälpa till att skapa dessa interaktioner så att du inte behöver vara i standby för live chatt-sessioner 24 timmar om dygnet.
Det finns tre sätt att skapa ett konversationsgränssnitt:
- Skriv kopia i hela ditt gränssnitt som har en mer personlig touch. Från långa textblock till små bitar av mikrokopi bör text ha en personlighet, som till exempel i WTFWeather-appen ovan. Det borde läsas på det sätt som folk talar. Var försiktig med att låta alltför formell eller robot i dina meddelanden.
- Använd meddelandegenskaper eller chatbots för att skapa omedelbara interaktioner med användare. Detta kan vara ett bra kundserviceverktyg och också bidra till att skapa kundlojalitet om någon alltid är där för att hjälpa dem genom problem.
- Integrera ett röstanvändargränssnitt i designen. Siri och Alexa är hushållsnamn tack vare röstgränssnitt. Den andra bonusen för att integrera röstkommandon? Det kommer att göra din webbplats eller app mer tillgänglig.
4. animera det
Det verkar som om det finns animerade element på nästan varje webbplats du besöker. Och det är genom design. Animering kan få en design till liv.
Animerade element är mycket engagerande eftersom de tar upp användarens uppmärksamhet och kan hjälpa användarna att bättre interagera med en design. (Det går tillbaka till den klassiska idén om? Visa, berätta inte? När du skapar en design.)
Google Maps, till exempel, är fylld med små animeringar. Var uppmärksam på nästa gång du använder den.
Nick Babich, för UX Planet, har en bra primer på användningsområden för animering i mobil UI-design. Han skisserade tre viktiga användningsområden för hur man använder rörelsen väl.
- För systemstatus: Använd animering för att visa en laddningsstatus, för uppfriskande innehåll och för meddelanden.
- För navigering och övergångar: Använd animering för att hjälpa användare att flytta mellan olika typer av innehåll, för att skapa visuell hierarki mellan element och för att visa en tillståndsändring.
- För visuell återkoppling: Använd animering för att visa bekräftelse på en åtgärd eller för att visualisera resultatet av en åtgärd.
5. Ombord på brunn och användningsformulär korrekt
Speciellt med en app är ombordstigning avgörande för användarlojalitet.
Tänk på det senaste spelet du hämtade. Hoppa du precis in? Eller behövde du en snabb handledning för att säkerställa framgång?
En interaktiv inbordsupplevelse för appar hjälper användarna att lära sig hur de kan utnyttja de funktioner som ingår i användarupplevelsen. Ett roligt alternativ hjälper till att överföra dem till lojala användare också. Håll inbyggnadshandledningen kort och se till att du innehåller en vanligt fråga eller hjälpavsnitt så att användarna kan gå tillbaka till det om de har problem.
Med mobila webbplatser ombord är mindre av ett primärt intresse, men registrerings- eller registreringsformulär kan vara ett problem.Former på mobila enheter måste vara enkla och enkla. Användare gillar inte skrymmande komplicerade former.
Strömma formulär för mobil för att öka konverteringarna. (Du kan alltid begära ytterligare information senare.)
Titta på den enkla startpunkten för GoodRx, ovan. Det ber dig bara om det läkemedel du vill veta mer om. Formen är fokus och det är super enkelt.
Be om bara en bit information - en e-postadress. Det är allt du behöver för att starta ett förhållande med en användare. Om din webbplats eller app kräver inloggning ska du hålla dig till en e-postadress och ett lösenord.
Utforma formuläret så att lådor är lätta att fylla i (från en storlekssynpunkt) och överväga att döda alla automatiska kompletta funktioner för att minska risken för misstodade e-postadresser. Ett annat knep? Använd ett socialt inloggningsformulär när du kan förenkla processen ännu mer. Användare är vana vid denna process och det är lätt för dem? och mindre sannolikt att ha fel för dig.
Slutsats
Den mobila användarupplevelsen är en av de viktigaste sakerna du behöver tänka på när du bygger din webbplats eller app. Och mobila användares behov fortsätter att förändras hela tiden.
Skapa ett gränssnitt som är lätt att använda och utnyttjar modern teknologi och funktioner för att skapa något som användarna kommer att vilja engagera sig med om och om igen.