Share
Med fler och fler människor börjar använda mobila applikationer dagligen är det nu viktigare än någonsin för företag runt om i världen att vara noga med att utveckla egna mobilapplikationer, oavsett om de gäller iPhone, Android eller Blackberry. Att ha en mobilapplikation är dock inte det enklaste jobbet. Det finns många applikationer där ute som fungerar bra, men ser bara inte så underbart ut. Detta är viktigt eftersom ett tilltalande, användarvänligt gränssnitt är en primär metod för att locka och behålla användare.
Tyvärr lider ett stort antal iPhone-applikationer av mindre än stellar design. Denna artikel kommer att se på design kosmetika av en populär shoppingapplikation, Amazon UK. Vi kommer att titta på vad designen saknar och hur den kan förbättras med exempel från andra applikationer. Tips och tricks i hela artikeln kommer att visa hur man lägger dessa rekommendationer i praktiken, med länkar till andra bra källor för att hjälpa dig att lära dig mer.
Om du tycker att den här artikeln är till hjälp, ber vi dig gärna meddela oss i kommentarerna nedan och vi kommer definitivt att göra mer så här i framtiden!
Först av allt, låt oss börja med en liten introduktion till Amazon UK ansökan. Som du förmodligen förväntar dig, är det en ansökan som tillåter brittiska invånare att söka och köpa produkter som är listade på Amazon UK direkt från deras iPhone-applikation utan att behöva använda webbläsaren. Såsom beskrivs i appbutiken:
Amazon Mobile App gör att iPhone- och iPod touch-ägare snabbt kan söka, handla, jämföra priser, läsa recensioner och göra inköp på Amazon.co.uk med ett enkelt men elegant gränssnitt.
Jag använder Amazon-ansökan om och om igen. Jag är inte en vanlig användare, men jag använder den. Programmen fungerar, det gör vad det är tänkt att göra, men gränssnittet kan göras så mycket bättre. Layouten känns ibland trång, det går inte att bläddra i butiken och allt verkar ha blivit estetiskt blandat och matchat med en allmän brist på visuell konsistens mellan skärmarna.
Låt oss börja, ska vi? Jag har tagit en serie skärmdumpar i några av programmen olika sidor med hemsidan, söksidan, inloggningssidan, rekommendationer sidan, önskelistan, din kontoinställningar sida, hjälp sida, juridisk information sida, produktsida, bilder sida och slutligen recensioner och artikelbeskrivning sidor.
Välkomst- / startskärmen är den första skärmen som du kommer att se när du öppnar programmet. Vi presenterar Amazon-logotypen, en enkel rubrik som säger "välkommen" och några knappar som leder oss till din önskelista och Amazon kommer ihåg, produkter som är populära just nu på Amazon UK och ett alternativ att logga in på ditt konto om du är en befintlig kund.
Det viktigaste sättet att navigera runt i appen är att använda flikfältet längst ner på skärmen, så att du kan komma åt olika delar av programmet, till exempel hemmet, sökningen, korg och minns skärmen. Det finns också en knapp för "mer", som låter dig spåra dina paket, visa dina beställningar och ändra dina kontoinställningar (du kan se denna skärmdump nedan).
ovan: Amazon UK välkommen / hemskärm
Som tidigare nämnts fungerar ansökan bra. Hemskärmen är relativt lätt att använda, men jag tycker att det kan vara mycket lättare. Här är några punkter att överväga, varje enskild punkt följt av några anteckningar som eventuellt kan förbättra användargränssnittet.
Behöver programmet verkligen ersätt navigeringsfältet med Amazon.co.uk-logotypen? Det här är inte fallet på någon av de andra skärmarna och gör det därför som en helt annan applikation.
Istället kan logotypen ersättas med en enkel "standard" navigeringsfält, med en inloggningsknapp eller till och med några alternativ för att visa populära produkter, din önskelista eller en länk till Amazon Remembers. Detta skulle frigöra mycket utrymme på framsidan, vilket ger utrymme för att presentera nya produkter, eller till och med detaljer om dina senaste beställningar. Det skulle finnas mer än tillräckligt med utrymme för att lägga Amazon-logotypen på startskärmen om en navigeringsfält användes.
Fliken länkar till fyra huvudskärmar: hem, sök, korg och kommer ihåg. Kommer ihåg en tjänst som, så vitt jag vet, inte används så mycket. Förtjänar det verkligen en plats i huvudfliken och en länk på framsidan?
Den här länken kan ganska enkelt sättas i fliken "mer" och ersättas med något som kunderna är mycket mer benägna att använda, till exempel en bläddrafunktion, vilket gör det möjligt för användarna att kunna bläddra i olika kategorier på Amazon-webbplatsen, snarare än att behöva söka efter vad de vill ha, en funktion som skulle göra något annat än öka försäljningen och göra ansökan som folk kommer att använda på ett mycket mer regelbundet tillfälle.
Det största användargränssnittet på framsidan måste vara sökfältet. Att vara en användare som har använt massor av iPhone-applikationer är det första du kan förvänta dig när du klickar på textfältet Sök Amazon.se, för att ett tangentbord ska pop-up ... skriv in din sökning och tryck på gå-knappen. I det här fallet är det exakt vad som inte händer. Istället länkar det bara dig direkt till sökskärmen. Är detta verkligen nödvändigt?
Det enkla svaret på detta är en stor fet nr. Det finns verkligen inget behov av två söklänkar på samma sida, speciellt när den i fliken är så lätt att hitta. Om sökfältet på framsidan faktiskt fungerade skulle det här vara en annan sak, men eftersom det är nästan en bild med en länk kopplad är det meningslöst! Att ta bort detta skulle leda till mycket mer utrymme för Amazon-logotypen högst upp på startskärmen och en navigeringsfält överst!
De utvalda "populära" produkterna på framsidan av ansökan verkar väldigt trånga. Titta till exempel på höger sida av Playstation 3 Slim och vänster på Muse-albumet, där avståndet mellan de två bilderna är väldigt tätt och gör det vanligtvis att applikationen ser lite ut.
Vissa mindre bilder med lite extra avstånd skulle fungera bra för detta, så att varje bild kan andas. Men med sökfältet och länkarna till önskelistan och Amazon kommer bort, kommer mycket utrymme att lämnas, vilket möjligen lämnar alternativet att presentera produkterna på ett mycket svalare och snyggare sätt, till exempel miniatyrbilder som är utformade speciellt för framsida, snarare än bara bilder av själva produkten. Vi vet alla bilder pratar mer än ord, så gör bilderna så gott du kan, även om det betyder lite mer arbete.
Att sätta dessa punkter i praktiken skulle göra ansökan mycket användarvänligare. Nedan är en annoterad bild av den officiella iPhone-appbutiken:
ovan: Apple App Store
Här kan du se flikar längst upp och längst ned på varje sida, vilket möjliggör mycket enklare åtkomst till varje skärm, något som skulle fungera bra med Amazon UK-applikationen och göra det mycket lättare för användaren att hitta en viss produkt eller att bara bläddra i butiken.
Det finns inget fel med sökfunktionen i den här appen. Det finns en sökfält, sökrekommendationer när du skriver in i sökfältet och en lista över produkter i slutet av den, som man förväntar sig.
Det finns ett alternativ att förfina din sökning efter att du har gjort din ursprungliga sökning, även om du inte kan förfinas så mycket - bara vilken kategori du vill söka in, vilket egentligen inte räcker till för en butik som säljer hundratals och tusentals olika produkter om dagen.
ovan: Amazon UK sökskärm
Är den här sökfunktionen väldigt avancerad för en av världens mest kända online shoppingbutiker?
Från att söka på webbplatsen fann jag det relativt irriterande att du inte kan förfina dina alternativ till precis vad du vill ha. Söka kan bli mycket enklare! Vi borde ha möjlighet att förfina vår sökning efter kategori, underkategori, pris, objekt villkor (ny eller använd) innan slår på go-knappen och har möjlighet att visa våra resultat i olika order, till exempel pris eller datum för utgåvan. Det finns enkla saker som 99% av onlinebutikerna har, så varför inte på en iPhone-app?
Det är dock en enkel lösning. Du behöver bara titta på eBays sökskärm för att se vad jag menar (var vänlig notera detta är innan du gör din första sökning, och inte efter som i Amazon UKs app!):
ovan: eBay UK app
Inloggningsskärmen är bredvid felfri vad gäller användbarhet, du kan logga in, berätta för Amazon att du har glömt ditt lösenord och skapa ett nytt konto.
ovan: Amazon UK inloggningsskärm
Styling verkar dock vara lite konstig. Ta en närmare titt på radien av hörnen i fältet E-postadress och lösenord, och se sedan på radie av hörnen på inloggningsknappen. Du kan tydligt se att dessa inte är desamma.
Om du ändrar det här för att göra radien av knappen samma skulle det hjälpa mycket med hur användargränssnittet ser ut. Justering av bredden på knappen till samma bredd som textfälten skulle också hjälpa till med att centrera texten i knappen för att göra sakerna så smidiga som möjligt. Det är sådant som gör dina motiv pop!
Prata om inloggningsknappar, är det verkligen stort behov av en alls? Minimalism är en stor design trend just nu på grund av några mycket enkla skäl: det ser bra ut och det är mycket enkelt att använda.
Knappen kan helt avlägsnas, med en inloggningsknapp placerad i navigeringsfältets övertopp på skärmen. En annan länk kan placeras på sidan för andra inloggningsalternativ, som länkar till sidor där du kan begära ett nytt lösenord eller skapa ett nytt konto. En utmärkt applikation som gör det bra är den officiella Twitter-applikationen (tidigare Tweetie), vilket kan ses nedan:
ovan: Twitter för iPhone app
Rekommendationsskärmen är en ganska viktig Amazon-funktion, eftersom det tillåter användare att hitta nya produkter som de kanske inte tidigare har känt till baserat på deras tidigare sökningar, inköp och objekt i sin önskelista.
Skärmen visar en lista över produkter på exakt samma sätt som de skulle visas i dina sökresultat.
ovan: Amazon UK rekommendationer sida
Trots det faktum att detta fungerar bra, kan det ibland verka lite trångt, särskilt när långa titlar är inblandade, eller mer än en författare eller regissörsnamn är listade.
Dessa produktlistor kan röjas mycket med hjälp av miniatyrbilder och miniatyrbilder. Om en produkt ser ut som om den kan vara av intresse kan användaren klicka på den för att avslöja mer information om produkten, till exempel titeln, priset och det är betyg.
Ett utmärkt exempel på hur det här kan fungera är den nya mappstrukturen som finns i iOS4, som låter dig trycka allting ur vägen för att avslöja vad som finns i mappen. Nedan är ett exempel på mappstrukturen.
ovan: iOS4 mappstruktur
Detta är Amazon UK App s värsta skärm. Om jag berättade att bredvid ingen faktiskt ser den här skärmen skulle jag förmodligen vara rätt, men bara för att det är en skärm som inte ses så mycket, betyder inte att det borde leda till designkvalitet. Skärmen länkar till två andra sidor: "Användningsvillkor & Försäljning" och "Sekretessmeddelande".
ovan: Amazon UK juridisk information sida
Jag kan inte betona nog hur viktigt det är att hålla samma stil i hela applikationen. Detsamma gäller webbplatser, tidskrifter, tidningar, broschyrer ... Faktum är att allt som är av företaget borde ha lite likhet med varandra - det är bara bra branding. Om du vill bli erkänd måste du göra det.
Denna skärm för juridisk information använder bara grundläggande textlänk till andra källor, även om andra skärmar använder standardknapparna för iPhone (som visas i din iPhones inställningsmeny.
Detta är en mycket enkel designfix och skärmen kan förbättras avsevärt för att matcha resten av programmet!
Produktsideskärmen är i princip en sida full av korta sammanfattningar, så att användaren kan bestämma om det här är produkten för dem eller ej. I så fall har de möjlighet att välja vilken sektion som helst med en pil och se fler bilder, läs mer om produkten, se mer använda erbjudanden och läs kundrecensioner.
ovan: Amazon UK produktsida
Produktsidan fungerar i allmänhet bra, men är inte där när det gäller utseende. Sidan ser trånga och squashed ihop och har i allmänhet helt klart inte haft stor uppmärksamhet åt små detaljer, vilket är mycket viktigt!
På en hel del andra Amazon UK-appskärmar har vi sett avrundade hörn, som på startskärmen. Det använder lite mer utrymme, men gör att användargränssnittet ser så mycket snyggare ut och är mer användarvänligt att använda. Använda samma teknik för produktsidans skärm skulle omedelbart förbättra den.
En sak som har varit frånvarande i hela ansökan, men skulle fungera särskilt bra på den här sidan, är bristen på subtila skuggor / slag. IPhone-gränssnittet använder dem regelbundet - du behöver bara titta på titeln i navigeringsfältet högst upp på bilden ovan för att inse att den har haft en inre skugga på texten.
Om du lägger till inre skuggor eller till och med 1px-streck som appliceras längst ner i texten, skulle det vara en stor skillnad för det övergripande utseendet på inte bara produktsidan, men hela applikationen, vilket ger ett mycket ökat djupt utseende, vilket generellt gör appen mycket mer visuellt tilltalande.
ovan: Amazon UK produktbilds sida - behövs det verkligen? Nej…
Himlen är gränsen för iPhone-applikationer, och den här sidan slår inte någonstans nära gränsen. Titta på några andra program och märka några effekter de använder när användarna bläddrar genom bilder. Är en helt separat skärm verkligen nödvändig för att kunna se fler bilder?
Återigen är det ett annat nej. Ta en titt på de två exemplen på hur andra shoppingprogram har visat sina bilder nedan, vilka båda använder en enkel blinkningsteknik så att användaren kan skjuta bilder från vänster till höger (eller höger till vänster!), Ungefär som ett innehåll / bild reglaget som du ser på webben.
ovan: Topshop iphone app - bildrullning
ovan: nästa iPhone app - bildrullning
Som du säkert har insett, uppmärksamhet på små detaljer och gör allt du behöver för att göra en iPhone-applikation lätt att använda är väl värt det. Amazon är ett av världens största märken på nätet, och med alla sina utvecklare och de pengar som de måste lägga ut projekt är applikationen långt ifrån perfekt - det fungerar bra men har mycket utrymme för förbättringar när det gäller användargränssnittet.
Vi hoppas att du har hämtat några bra tips från den här artikeln och att det påminner dig om att spendera så mycket tid som möjligt på din applikationsdesign, var noga med att uppmärksamma de saker som dina användare vill ha. Fråga dig själv: "Om jag använde denna ansökan (och det var inte min), vad skulle jag önska att det kunde göra?" Brainstorma dina idéer och sätt dem i praktiken. Lycka till!
Håll ett öga på en framtida handledning om hur du utformar din egen iPhone-shoppingprogram på Tuts + -nätverket!
Accentsconagua