App Design UI: De 15 bästa tipsen för att ge en fantastisk användarupplevelse

Mobilappar ger företag och designers en möjlighet att nå fler människor än någonsin tidigare. Företagare är inte längre begränsade till att nå ut till kunder via telefon, e-postkampanjer eller i butik. Idag är ditt företag tillgängligt 24/7 via en webbplats och mobilappar, som går med användare överallt. Utveckla en app låter dig skicka push-meddelanden till användare och möta en viss uppsättning kundbehov.

Tyvärr fungerar inte alla appar som de ska. Vissa är direkt frustrerande och ger lite mening för användaren. Att skapa ett bra användargränssnitt för appdesign och upplevelse (UX) för mobil är inte så enkelt som det låter. Forskare förutspår att 2020, mobilappar kommer att generera cirka 188.9 miljarder dollar i intäkter. Det finns fortfarande gott om utrymme för tillväxt, men det finns också några designmetoder som inte fungerar bra. För varje bra app finns det tre som inte översätts bra i verkliga livet.

Användare kan välja mellan tusentals appar. Om du vill att din ska fånga användarnas intresse för ett hav av andra val, måste den ha bästa appdesignen möjlig. Ett sätt att få en app som folk använder ofta är att fokusera på användarupplevelsen. Varje designer har olika sätt att skapa appar, men de har alla några delar gemensamt. Här är femton sätt du kan leverera den bästa möjliga upplevelsen till dina mobilanvändare.

1. Spendera tidsplanering

Innan du skapar ett enda element i appdesign UI, ägna tid åt att planera vilket problem det löser och dess övergripande struktur. Gräv in personas för de personer som med största sannolikhet laddar ner appen, så att du vet vilken målgrupp du försöker nå. Att förstå din publik går igenom alla aspekter av utveckling, från layouten på din navigering till hur du marknadsför din programvara.

Vissa designers använder wireframing för att skapa en slags ritning för sin design. Detta gör det möjligt för appskaparen att testa olika element och se hur de fungerar i programmets arkitektur. Det sparar tid eftersom du kan bestämma vad som kan skapa problem innan du spenderar timmar på att koda något som inte fungerar i appen. Tänk på användarens ålder och till och med hur stora deras händer kan vara - större knappar fungerar bättre för män som till exempel har större händer än kvinnor.

2. Utveckla för typ av enhet

Även om iOS är populärt finns det en procentandel av människor som alltid kommer att ha en Android. Du kan välja att utveckla endast för en eller båda. Om tiden tillåter, fortsätt och skapa appar för båda systemen. Medan du kanske slutar få fler nedladdningar på Apple än Google Play, kommer du att möta behoven hos alla dina användare - oavsett vilket operativsystem de använder. Tänk också på att beteendet hos Android jämfört med iPhone varierar, så du måste ta hänsyn till hur varje segment använder sina smartphones och surfplattor.

Undersök dina nuvarande kunder och fråga om de äger iOS eller Android. Om 90 procent av dina kunder använder iOS kan det vara det bästa valet för din budget och tidsöverväganden att släppa din iOS-kompatibla app först. Även om det är smart att erbjuda båda alternativen bör du alltid fokusera på var du kan få mest valuta för pengarna först och sedan lägga till på andra plattformar när du har råd.

Mindmeister är ett mind-mapping-verktyg som fungerar bra för brainstorming och projektsamarbete. MindMeister är tillgängligt online och för mobila enheter och kan användas för både iOS och Android. En av fördelarna med denna speciella app är att den integreras över flera enhetstyper. Om du äger en Android-surfplatta och en iPhone kan du sömlöst använda de olika versionerna av appen från båda artiklarna utan att förlora ett tak.

3. Dela stora uppgifter i deluppgifter

Tänk på hur människor använder sina smartphones. Den typiska användaren tar tag i sin telefon i ett väntrum eller kör i en tunnelbana till och från jobbet. De har kanske inte en timme på sig att slutföra en stor del av en uppgift, men om du delar upp stora funktioner i mindre kan personen göra saker som tiden tillåter. Användare kanske inte gillar oändlig rullning, så att bryta ner åtgärder för att passa på en enda skärm åt gången är en förbättring av den totala UX.

Ett sätt att se till att dina stora uppgifter är genomförbara för upptagna människor är att testa systemet. Ställ in en timer i 30 sekunder och se om du kan slutföra jobbet på den tiden. Om inte, hur kan du bryta ner det ytterligare, så en del av det är klart på 30 sekunder? Du vill också skapa din app, så om en användare måste lämna processen lite och återvända, kommer den att fortsätta där användaren slutade.

4. Skapa en rik upplevelse

Du har hört rådet att hålla saker enkelt, men det betyder inte att din app ska vara tråkig. De senaste smartphonesna har höga skärmupplösningar och erbjuder bilder och videor i HD. Det är viktigt att hitta en balans mellan rich media inom dina appar och hastighet. Grafiken måste optimeras för att laddas snabbt, men ändå vara djärv och skarp, så att användarna är visuellt nöjda.

Kom ihåg att dina användare har andra val, och de har beslutat att använda din app istället. Om du inte håller dem underhållna och engagerade riskerar du att förlora dem till en konkurrents app. Din måste vara både visuellt tilltalande och mycket användbar.

Hotell ikväll använder levande bilder som gör att användare vill resa till olika platser där de kan boka ett rum via sin app. Fokus för dess funktioner är funktionalitet, men appen ignorerar inte designens estetik och skapar en fin blandning av bilder och element. Handlingsuppmaningarna sitter ofta ovanpå bakgrundsbilden.

Att skapa en app kan verkligen hjälpa ditt varumärke att växa snabbare. Google Sök apputveckling nära mig om du letar efter någon lokal.

Kontakt för att lära dig mer om våra apputvecklingstjänster.

5. Skapa ett tydligt steg i steg

När du flyttar användare genom de olika delarna av deras resa, gör det klart vad nästa steg blir. Om användaren klickar på en åtgärdsknapp, skjut omedelbart skärmen till nästa steg. Du kan också använda element som att nummerera saker: Steg 1, Steg 2 och så vidare.

En annan idé är att använda ikoner, till exempel pilar, för att visa användaren vart han ska gå vidare. Enkla ord, som "Rulla ned" eller "Svep åt vänster", ger människor en tydlig riktning och gör din app enkel nog för även nybörjare.

6. Markera samtal till handling med färg

En serie kontrasterande färger uppmärksammar uppmaningar till handling (CTA) och visar tydligt användarna vad de behöver göra för att använda appen. När du väl vet vem dina användare är får du en bättre uppfattning om vilka färgknappar som fungerar bäst för att fånga deras uppmärksamhet och driva dem framåt genom appens funktioner. Du kan också genomföra delade tester för att se vilka färger och knappstorlekar som fungerar bäst för din specifika publik.

Det finns olika studier om färgen på CTA som vissa experter tycker fungerar bäst, men andra studier strider mot resultaten. Avhämtningen är att olika färger, former och placering fungerar bäst för olika typer av publik, så du måste hitta den bästa kombinationen för de resultat du söker.

Hwy 55 hamburgare, shakes och pommes frites appen använder röda och rosa knappar som dyker upp mot pastellbakgrunden. Användarens ögon spårar efter knapparna, och de vet att de ska utföra en av de åtgärder som anges, till exempel att skanna ett kvitto eller se deras belöningar. Färgerna matchar paletten på företagets hemsida och i dess restauranger, medan de använder favorit nyanser från 1950-talet och sätter en ton av en rolig tid i historien.

7. Skapa en stilguide

En gång din app design UI är ute ett tag, vill du erbjuda uppdateringar och ytterligare funktioner. När du har släppt din app och testat för användbarhet skapar du en detaljerad stilguide. Du kommer att förstå vad dina användare gillar med din app och kan lägga till detaljer i manualen, som du bör följa för alla framtida uppdateringar.

Om dina användare älskar större knappar eftersom de är babyboomers och har problem med att se liten text på små knappar, bör din stilguide ange det. Å andra sidan, om din publik är årtusenden och de föredrar skimmbart material, lägger du till detaljer i din guide om hur förklaringarna är korta eller bildbaserade.

Din stilguide bör innehålla information om färgpalett, knappstilar, språkinställningar - första person, andra person, tredje person - och till och med andra funktioner du vet fungerar särskilt bra. Ange föredragna metoder och element att undvika för att förbli konsekventa.

8. Skär röran

Med tiden lägger du till funktioner i din app. De kan dock också skapa röran på skärmen. Ingenting är lika förvirrande för användaren som 20 olika alternativ och osäkerhet om var man ska börja. För att skapa en verkligt användarvänlig app måste du skära röran och finjustera bara de vitala elementen. Eventuella ytterligare funktioner är prickiga och bör läggas till efter att ha behärskat grunderna.

Börja med att tänka på det primära syftet med din app. Vill du att användare ska kunna se vilka nya artiklar som har kommit till din butik den här veckan? Är din app avsedd att spåra hälsosam mat? Användaren ska kunna lägga till vad de åt genom att klicka på en enda knapp och skriva in objektet i sökfältet. Håll sakerna enkla och till sak, så kommer din UX automatiskt att förbättras.

Hitta Mina Vänner är Apples app som gör det möjligt för människor att hitta familj och vänner i sitt område och se hur långt de är från att komma till ett besök. Det håller också koll på familjemedlemmar, som tonåringbarn. När du först loggar in på appen får du välja att se vem du redan är ansluten till eller lägga till vänner. Alternativen är enkla och till sak.

De enda elementen på den första sidan är knappar som låter dig titta eller lägga till. Du måste navigera till ett specifikt namn eller plats på kartan för att få mer detaljerad information. Appen fungerar perfekt för någon som anordnar en fest och vill se hur långt borta gästerna är från att anlända.

9. Tänk på fingerplacering

Att skapa mönster som fungerar bra med specifika enheter kräver kännedom om produkttypen. Tänk på hur de flesta människor navigerar på sina telefoner: Tummen är nära botten av skärmen. Lägg till navigeringselement så att de inte behöver nå dem och se till att göra dem så naturliga som möjligt.

Det enda sättet att skapa rätt placering är att testa det själv som designer. Lägg till exempel en knapp där du tror att det skulle vara lättast att komma åt, och betatesta sedan platsen och se om den är mer tillgänglig där eller behöver justeras. Det är också en bra idé att dra in ytterligare betatestare, eftersom vissa människor håller sina telefoner annorlunda än andra. Alla navigeringselement och knappar som ska användas måste vara så enkla att använda som möjligt.

10. Läsbarhet

Läsbarhet avser att använda enklare ord och meningar, lättförståeligt innehåll, klarhet i idéer, konsumera information effektivt. I dag, UI designers ge läsbarhet en bredare förståelse eftersom den kombinerar visuella framträdanden och klarhet i sammanhanget.

Eftersom mobila enheter har mindre skärmar har det blivit en utmaning att justera information i ett mobilt användargränssnitt. Samtidigt som innehållet är kort och enkelt spelar flera faktorer en viktig roll för att öka läsbarheten.

Bakgrund

Bakgrundsfärg påverkar avsevärt läsning och differentiering av interaktiva element och innehåll – misslyckande med att välja ett lämpligt färgschema för bakgrunden resulterar i dålig läsbarhet och användarupplevelse. Även om informationen är relevant, men användarna misslyckas med att läsa den, förlorar den betydelse.

Visuell hierarki

Det hjälper till förbättra användarupplevelsen. Visuell hierarki måste vara exakt. UI-designers ansvar är att organisera element för att erbjuda en anständig visuell hierarki. Följande är några faktorer som påverkar visuell hierarki.

• Storlek
• Font vikt
• Färg
• Opacitet
• Närhet
• Likhet
• Undvik alla kepsar
• Begränsa längden på texten

11. Tillgänglighet

UI-designers har kommit överens om vikten av tillgänglighet. Det är viktigt att inkludera användare med funktionsnedsättning. Det gör det möjligt för designers att rikta sig till en större publik. Trottoarkantseffekten är en primär orsak till att tillgänglighet har fler fördelar än att tillåta funktionshindrade att använda produkter.

Det hänvisar till designen som skapats för att tillgodose personer med funktionshinder eftersom de ofta blir en större publik. Att introducera något tillgängligt för alla kommer att öka deras varumärkesimage och försäljning.

Att designa en applikation som inte är tillgänglig för personer med funktionshinder kanske inte från början verkar vara en mer betydande fråga. Det kan dock påverka verksamheten i framtiden. De avgörande skälen till att designers behöver överväga tillgänglighet för att designa appar är följande.

• Det bör säkerställa lika tillgång för alla användare.
• Det är olagligt att designa en applikation som inte är tillgänglig på grund av brist på ekonomiska resurser.
• Det utökar användarbasen, vilket är fördelaktigt för användbarhet och SEO.
• Det gynnar företagen.

12. Typografi

Typografi är ryggraden i sammanhanget. Att välja rätt typsnitt påverkar läsbarheten och förståelsen av texten. Teckenstorlek, färg, bredd och textstruktur är viktiga element som designers måste tänka på när de designar mobila applikationer.

Typografi är konsten att balansera tilltalande text med användarnas förmåga att läsa och förstå snabbt. Flera punkter gör ett attraktivt sammanhang.

• vitt utrymme eller negativt utrymme
• justering: placera text med bilder
• spårning: justera utrymmet för en grupp tecken
• kerning: justera utrymmet mellan två tecken
• ledande: utrymme mellan kontextens baslinjer
• radlängd: antal tecken som krävs för en rad i ett ordblock.

13. Minska användarinmatning

Eftersom mobilskärmar är mindre är det ofta en obehaglig upplevelse att skriva text. Det innebär också fler risker för fel. Upplevelsen förvärras när användare fyller i formuläret på mobiltelefoner. Nedan följer några tips för att göra det enklare.

• Håll dina formulär korta. Ta bort onödiga fält. Appen får endast fråga efter viktig information från användarna.
• Använder intelligenta funktioner som autoslutförande. Att fylla i adressfältet är ofta den mest utmanande delen av formulär. Verktyg som Placera Autokomplettera adressformulär tillåter användare att ange sin adress med färre ord än vanliga inmatningar.
• Användare blir ofta upprörda när de efter att ha skickat in ett formulär måste återkomma för att korrigera fel. Kontrollera fälten omedelbart efter inmatning skulle skapa mindre risker för misstag, och användare kan korrigera dem direkt.
• Om applikationen anpassar tangentbordet för att skriva svaret blir det lättare för användarna att fylla i formulär utan att göra misstag. Att till exempel visa ett numeriskt tangentbord för att ange telefonnumret eller @-knappen för att ange en e-postadress skulle underlätta hela processen.

14. Använd riktlinjer för OS-design

På 1990-talet utformade Jakob Nielsen, en aktieägare i Nielsen Norman Group och en berömd webbanvändbarhetskonsult, och Rolf Molich, en annan välkänd användbarhetsexpert, riktlinjer för att hjälpa designers att skapa tilltalande applikationer. Dessa riktlinjer blev gyllene regler när det kom till att designa mobila applikationer också. Några fördelar med att överväga metoderna för att utveckla mobila applikationer är:

• lätt att förstå – skapar text som är enkel att förstå
• ger utrymme där användare kan ändra sina inmatningar – erbjuder användaren att ångra eller göra om åtgärder
• förhindrar fel – eliminerar risken för misstag genom att designa effektiva system
• effektiv användning – med hjälp av dolda kommandon, förkortningar eller funktionstangenter för att underlätta navigeringen
• estetisk design – håller röran till ett minimum och utnyttjar utrymmet för viktig information
• konsekvens – upprätthåller grafiska element och terminologi
• hjälp användare att rätta fel: visa feltext i enklare ord för att hjälpa användaren att förstå

15. Vilka appar har det bästa användargränssnittet?

Att designa en tilltalande mobilapplikation för att locka användare är utmanande. Att utveckla ett strategiskt förhållningssätt till målgruppen är avgörande för att fånga användarnas uppmärksamhet. Budgetering, design och utveckling är avgörande element för att utforma en applikation. För att förstå effektiviteten av apparna som nämns nedan har vi samlat en del intressant information om applikationerna som gör dem unika. Dessa applikationer har visat sig säkra utrymme i topp tre med det bästa användargränssnittet, från design till ett användarvänligt gränssnitt.

1. Fandango

Den förbinder biobesökare med deras krav innan de besöker teatern. Applikationen är enkel att använda och erbjuder en utmärkt upplevelse. Huvudsidan visar de fem bästa filmerna som spelas på närmaste biograf utifrån din plats. Den nämner också schemat.

Biobesökare kan köpa biljetter med applikationen. När du kommer till teatern, skanna streckkoden för att skriva ut biljetterna. Toppen av applikationen visar två CTA:er viktiga för de flesta användare. Det är en fantastisk applikation som låter användare skräddarsy sina krav.

2. amason

Denna applikation ger användarna fullständig information om produkterna som visas. Med ett klick kan användarna få en unik virtuell shoppingupplevelse. Utan att vänta i långa köer kan användare handla sina favoritartiklar.

Förutom allmänna föremål erbjuder applikationen ett brett utbud av böcker, filmer, musik och TV-program. Filtren, beskrivningarna, produktlistorna, betygen, recensionerna och bilderna är desamma för stationära och mobila applikationer.

Dess användarvänliga gränssnitt och enkla navigering är de viktigaste faktorerna som lockar en större publik. Det tillåter också användare att se relaterade produkter genom att svepa åt höger. Den här appen är snabb, användbar och bekväm för shopping.

3. Siffra

Mikrosparkontoapplikation, som låter användare interagera med plattformen på ett liknande sätt som du skulle ansluta via en standardtext. Den övervakar din ekonomiska aktivitet och gör det enkelt att spara pengar.

Användare kan anpassa applikationen efter deras behov. Gränssnittet är lätt att använda med sömlös funktion som hjälper till att spara tid. Du kan till och med optimera tidsbesparande funktioner med dess snabb laddningstid.

Frågor och svar för UX-proffs.

Vi intervjuade flera UX-proffs om detta ämne. Här är deras svar på våra frågor;

Michael Prestonise på Global apptestning säger;

Hur planerar du din UX-strategi?

Vår UX-strategi planeras noggrant i syfte att leverera värde till kunden på ett sätt som är tekniskt genomförbart och hjälper verksamheten att uppnå sina mål. Att utforma den strategin innebär att aggregera resultaten från en mängd olika forskningsmetoder, inklusive kundintervjuer, kvantitativa dataanalyser, marknadsanalyser, kundsegmentering. Dessa aggregerade resultat utvärderas och prioriteras sedan för att identifiera viktiga möjlighetsområden.

Vilka verktyg använder du för UI / UX-design och varför?

För UI-design använder vi Figma. Detta är en helt webbaserad plattform som effektiviserar samarbetet, eftersom det är enkelt att dela arbete och design med alla som kan behöva bidra. Precis som i Google Docs kan allt våra utvecklare behöver delas på distans och enkelt. När det gäller UX-design inkluderar de verktyg vi använder en anteckningsbok och penna(!), whiteboard, och samarbetsverktyg som Miro och Whimsical. Miro är ett utmärkt verktyg för fjärrutvecklare, eftersom du kan genomföra retrospektiva workshops för att fråga vad som gick bra och vad som inte gick och rösta om ämnen att diskutera inom teamet.

Skapar du stilguider? I så fall vilka verktyg använder du och varför?

Vi har ett designsystem som hjälper oss att skapa konsekventa visuella upplevelser över en mängd olika plattformar (marknadsföringswebbplatsen, den kundinriktade applikationen, den testande applikationen osv.) UI-komponenter som hämtar deras stilar från designsystemet har finfördelats i Figma och tillåta designers att använda dem under hela processen.

JD Jordan vid MaxMedia nämner;

Hur planerar du din UX-strategi?

Vi börjar alltid med en upptäckt och rekommendationer - även för okonventionella UX-projekt, som mer traditionella varumärkes- och grafiska designprojekt. En av våra UX-kunder kommer att delta i intervjuer med användare och intressenter, konkurrens- och jämförande analyser och nuvarande lägesgranskningar när det är möjligt. Från denna forskning kommer vi att identifiera det gap som en lösning kan ha den bästa effekten. Ofta är detta en kombination av att utforma en förbättrad lösning och skapa en mer effektfull uppfattning. Denna process föreslår också en färdplan - vare sig det gäller ett eller flera projekt - som ofta kombinerar, UX, UI, front-end, innehåll och marknadsföring.

Våra lösningar är alltid unika eftersom våra kunder är det. Vi tänker mycket på empati. För det första, för att veta hur våra användare känner och vad de behöver gör oss till bättre designers. Det är grundläggande användarcentrerad design. Men att ha empati för det som är viktigt för våra kunder gör oss också till bättre partners. Vi utformar inte lösningar för oss själva, och det kan vara viktigast att komma ihåg med mobil design eftersom vi har så nära relationer med dessa enheter. Empati är det mest mänskliga som någon kan göra och vi har turen att få betalt för att göra det.

Vilka verktyg använder du för Ui / UX-design och varför?

Vi försöker vara agnostiska med verktyg men har förfinat en föredragen UI / UX-designprocess. Vi börjar alltid med penna och papper (eller penna och markörtavla) - även om det bara är mycket kort - innan vi flyttar i IA och trådramar. Flera av vårt team använder Axure för att trådrama eftersom dess verktygsuppsättning gör att nedladdningsarbetet arbetar tidigare med att komponera och prototypa. Alternativt flyttar det mesta av teamet rakt in i Sketch där arbetet kan övergå från låg till hög kvalitet i en enda fil. Skiss är också värdefullt eftersom den integreras bra med InVision och mästerligt med Zeplin, som vi använder för tillgångssamling, förberedelse och överlämnande till front-end-utveckling.

En av våra kunder föredrar Adobe XD men det här är inte vår normala process. Och vi använder aldrig Balsamic. Om du vill att något ska se ut handritat, rita det för hand.

Skapar du stilguider? I så fall vilka verktyg använder du och varför?

Alltid - även om det bara är för internt bruk. Dessa har olika former:

Meddelanden och varumärkesstandarder kan skapas med presentations- eller dokumentverktyg som Keynote eller Word. Vi försöker hålla dessa dokument levande så mycket som möjligt och föredrar starkt onlineformat som grundläggande WordPress-webbplatser så att stilhandledningsmaterialet kan utvecklas över tiden. En enkel PDF dateras den andra den skickas ut och länkar sällan till nödvändigt material.

UI-mönster och guider för stilstil är typiskt byggda med en kombination av Sketch och Zeplin. Den förstnämnda användningen av symboler översätts särskilt väl till den senare kodcentrerade publiken. Och igen, denna kombination lever och utvecklas över tid (t.ex. över sprintar och successiva projekt) för att minimera design- och utvecklingsskulden som skapas av statiska stilguider.

UX / UI-teamet på AiCure skriver;

Hur planerar du din UX-strategi?

Det finns ingen strategi som kan tillämpas på allt UX-designarbete, men en känslighet för följande faktorer är ett måste:
- Känn din målgrupp och förstå deras behov och smärtpunkter.
- Vilket problem löses.
- Vad är värdet av din designlösning.

Feedback är viktig: prototyp, test och lär dig mer om din produkt genom testning av användbarhet och tillgänglighet.

Vilka verktyg använder du för Ui / UX-design och varför?

Vi använder huvudsakligen Sketch, eftersom det gör att vi kan itera snabbt, är lätta, är väl integrerade med prototyp- och handoff-verktyg. Det har också många inbyggda plugins eller tredjeparts plugins som underlättar hela designprocessen.

Skapar du stilguider? I så fall vilka verktyg använder du och varför?

Ja, vi skapar stilguider som oftast är integrerade som en del av designsystemet. Design-systemet gör att vi kan vara 100% konsekventa och tillämpa modulär design som ger oss möjlighet att skala upp eller ner samt ta itu med flera formfaktorer i responsiv design.

Vilka verktyg använder du för Ui / UX-design och varför?

Illustrator och skiss, vektorbaserad programvara, bra färghantering antingen RGB eller CMYK.

Användargränssnitt för appdesign: UX är allt

När det gäller att skapa en app som folk laddar ner och öppnar regelbundet är användbarhet av yttersta vikt. Har du någonsin laddat ner en app som lät bra men som var svår att använda i verkliga applikationer? Du har sannolikt tagit bort den från din telefon och glömt allt om det. Din app måste uppfylla användarnas förväntningar så bra att de känner att de inte kan leva utan den.

Din app ska möta ett behov användaren har och sedan skapa något som gör deras liv enklare eller bättre. Ju mer du sätter dig i konsumentens skor och möter dessa behov, desto mer framgångsrika blir dina designs. Dessa femton tips ska göra det lättare att få kontakt med användare och förbättra deras upplevelse, så att din app ses som en viktig del av deras liv.