Share
Nu steeds meer mensen dagelijks gebruikmaken van mobiele applicaties, is het nu belangrijker dan ooit voor bedrijven over de hele wereld om hun eigen mobiele applicaties te ontwikkelen, of het nu voor de iPhone, Android of een Blackberry is. Een mobiele applicatie hebben is echter niet de gemakkelijkste taak. Er zijn veel applicaties die perfect werken, maar het ziet er niet zo geweldig uit. Dit is belangrijk omdat een aantrekkelijke, gebruikersvriendelijke interface een primaire methode is om gebruikers aan te trekken en vast te houden.
Helaas hebben een groot aantal iPhone-applicaties last van minder-dan-stellaire ontwerpen. Dit artikel zal kijken naar de ontwerpcosmetica van een populaire winkelapplicatie, Amazon UK. We zullen bekijken wat het ontwerp mist en hoe het verbeterd kan worden met voorbeelden uit andere applicaties. Tips en trucs in het hele artikel zullen laten zien hoe u deze aanbevelingen in de praktijk kunt brengen, met links naar andere geweldige bronnen om u te helpen meer te leren.
Als u dit artikel nuttig vindt, laat het ons dan weten in de reacties hieronder en we zullen dit zeker nog meer doen in de toekomst!
Allereerst beginnen we met een korte inleiding tot de Amazon UK-applicatie. Zoals u waarschijnlijk verwacht, is het een toepassing waarmee inwoners van het Verenigd Koninkrijk rechtstreeks vanuit hun iPhone-applicatie producten op de lijst van Amazon UK kunnen zoeken en kopen zonder de webbrowser te hoeven gebruiken. Zoals beschreven in de app store:
Met de Amazon mobiele app kunnen eigenaars van een iPhone en iPod touch heel snel zoeken, winkelen, prijzen vergelijken, recensies lezen en aankopen doen bij Amazon.co.uk met behulp van een eenvoudige maar elegante interface.
Ik gebruik de Amazon UK-applicatie zo nu en dan. Ik ben geen frequente gebruiker, maar ik gebruik het wel. De applicaties werken, het doet wat het zou moeten doen, maar de interface zou zo veel beter kunnen. De lay-out voelt soms krap aan, er is geen mogelijkheid om door de winkel te bladeren en alles lijkt esthetisch gemixt en gematched met een algemeen gebrek aan visuele consistentie tussen schermen.
Laten we beginnen, zullen we? Ik heb een reeks schermafbeeldingen genomen in een aantal van de applicaties, verschillende pagina's, met de startpagina, zoekpagina, inlogpagina, aanbevelingenpagina, wenslijstpagina, uw accountinstellingenpagina, helppagina, juridische informatiepagina, productpagina, afbeeldingen pagina en tot slot de recensies en pagina's met artikelomschrijvingen.
Het welkomst- / startscherm is het eerste scherm dat u ziet bij het openen van de applicatie. We krijgen het Amazon-logo te zien, een eenvoudige kopregel met "welkom" en enkele knoppen die ons naar je verlanglijstje en Amazon Remembers leiden, producten die nu populair zijn op Amazon UK, en een optie om je aan te melden als je een bestaande klant.
De belangrijkste manier om door de app te navigeren, is met behulp van de tabbladbalk onder aan het scherm, zodat u toegang hebt tot verschillende delen van de toepassing, zoals het startscherm, het zoekscherm, het mandje en het geheugenscherm. Er is ook een knop voor "meer", waarmee u uw pakketten kunt volgen, uw bestellingen kunt bekijken en uw accountinstellingen kunt wijzigen (u kunt deze schermafbeelding hieronder bekijken).
hierboven: welkom bij Amazon UK / startscherm
Zoals eerder vermeld, werkt de applicatie prima. Het startscherm is relatief eenvoudig te gebruiken, maar ik vind dat het veel eenvoudiger kan. Hier zijn een paar aandachtspunten, elk afzonderlijk punt gevolgd door enkele opmerkingen die de gebruikersinterface mogelijk kunnen verbeteren.
Moet de toepassing de navigatiebalk met het Amazon.co.uk-logo echt vervangen? Dit is niet het geval op alle andere schermen en daarom voelt het als een geheel andere toepassing.
In plaats daarvan kan het logo worden vervangen door een eenvoudige "standaard" navigatiebalk, met een aanmeldknop, of zelfs een paar opties om populaire producten, uw verlanglijstje of een link naar Amazon Remembers te bekijken. Dit zou veel ruimte op de voorpagina vrijmaken, zodat er ruimte overblijft voor nieuwe producten of zelfs details over uw recente bestellingen. Er zou meer dan genoeg ruimte zijn om het Amazon-logo op het startscherm te plaatsen als een navigatiebalk werd gebruikt.
De tab-balk linkt naar vier hoofdschermen: thuis, zoeken, mand en onthoudt. Remembers is een dienst die, voor zover ik weet, niet zoveel wordt gebruikt. Verdient het echt een plaats in de hoofdtabbalk en een link op de voorpagina??
Deze link kan vrij eenvoudig in het tabblad "meer" worden geplaatst en vervangen door iets dat klanten waarschijnlijk vaker zullen gebruiken, zoals een bladerfunctie, waardoor gebruikers de mogelijkheid hebben om door verschillende categorieën op de Amazon-site te bladeren. in plaats van te moeten zoeken naar wat ze willen, een functie die niets anders zou doen dan de verkoop verhogen, en de app maken die mensen zullen gebruiken op een veel regelmatiger moment.
De grootste fout in de gebruikersinterface aan de voorzijde moet de zoekbalk zijn. Als gebruiker die veel iPhone-applicaties heeft gebruikt, is het eerste wat je zou verwachten als je op het tekstveld Zoeken Amazon.co.uk klikt, dat er een pop-upvenster verschijnt ... typ je zoekopdracht en klik op de knop go. In dit geval is dat precies wat niet gebeurt. In plaats daarvan wordt u rechtstreeks rechtstreeks gekoppeld aan het zoekscherm. Is dit echt nodig?
Het simpele antwoord hierop is een groot vet nee. Er zijn echt geen twee zoeklinks op dezelfde pagina nodig, vooral als die in de tabbalk zo gemakkelijk te vinden is. Als de zoekbalk op de voorpagina echt werkte, zou dit een andere zaak zijn, maar omdat het vrijwel een afbeelding met een link is, is het zinloos! Als u dit verwijdert, blijft er veel meer ruimte over voor het Amazon-logo bovenaan het startscherm en een navigatiebalk bovenaan!
De afgebeelde "populaire" producten op de voorpagina van de applicatie lijken erg krap. Kijk bijvoorbeeld eens naar de rechterkant van de Playstation 3 Slim en de linkerkant van het Muse-album, de afstand tussen de twee afbeeldingen is erg krap en maakt de applicatie er over het algemeen een beetje sjofel.
Sommige kleinere afbeeldingen met een kleine extra tussenruimte werken hier perfect voor, waardoor elk beeld kan ademen. Echter, met de zoekbalk en de links naar de Wish List en Amazon Remembers gegaan, blijft er veel ruimte over, mogelijk met de mogelijkheid om de producten op een veel koelere en meer stijlvolle manier te presenteren, zoals aanbevolen miniaturen die speciaal zijn ontworpen voor de voorpagina, in plaats van alleen afbeeldingen van het product zelf. We weten allemaal dat afbeeldingen meer dan woorden zeggen, dus maak de afbeeldingen zo goed mogelijk, ook al betekent dit iets meer werk.
Door deze punten in de praktijk te brengen zou de applicatie veel gebruiksvriendelijker zijn. Hieronder is een geannoteerde afbeelding van de officiële iPhone-app store:
boven: Apple App Store
Hier kunt u de tabbladen bovenaan en onderaan elke pagina zien, waardoor u veel eenvoudiger toegang hebt tot elk scherm, iets dat perfect zou werken met de Amazon UK-applicatie en het de gebruiker veel gemakkelijker maakt om een bepaald product te vinden of om gewoon in het algemeen door de winkel te bladeren.
Er is absoluut niets mis met de zoekfunctie in deze app. Er is een zoekbalk, zoekaanbevelingen terwijl u typt in de zoekbalk en een lijst met producten aan het einde ervan, zoals u zou verwachten.
Er is een optie om je zoekopdracht te verfijnen nadat je je oorspronkelijke zoekopdracht hebt uitgevoerd, hoewel je het niet zo veel kunt verfijnen - alleen in welke categorie je wilt zoeken, wat echt niet genoeg is voor een winkel die honderden verkoopt duizenden verschillende producten per dag.
boven: zoekscherm Amazon UK
Is deze zoekfunctie echt geavanceerd genoeg voor een van 's werelds meest bekende online winkels?
Van het zoeken op de site vond ik het relatief vervelend dat je je opties niet kunt verfijnen tot precies wat je wilt. Zoeken kan veel gemakkelijker worden gemaakt! We zouden de mogelijkheid moeten hebben om onze zoekopdracht te verfijnen op categorie, subcategorie, prijs, artikelvoorwaarde (nieuw of gebruikt) voor op de go-knop te drukken, en ook de mogelijkheid om onze resultaten in verschillende bestellingen weer te geven, zoals prijs of datum van vrijgave. Er zijn eenvoudige dingen die 99% van de online winkels hebben, dus waarom niet op een iPhone-app?
Het is echter een gemakkelijke oplossing. Je hoeft alleen maar naar het zoekscherm van eBay te kijken om te zien wat ik bedoel (let op dit is voor je maakt je eerste zoekopdracht, en niet na zoals in de app van Amazon UK!):
hierboven: eBay UK-app
Het aanmeldscherm is naast foutloos wat betreft bruikbaarheid, u kunt zich aanmelden, Amazon laten weten dat u uw wachtwoord bent vergeten en een nieuw account maken.
boven: aanmeldscherm van Amazon UK
De styling lijkt echter een beetje vreemd. Bekijk de straal van de hoeken van het e-mailadres en wachtwoordveld van dichterbij en kijk vervolgens in de straal van de hoeken op de knop Aanmelden. Je kunt duidelijk zien dat deze niet hetzelfde zijn.
Als je dit wijzigt om de straal van de knop hetzelfde te maken, kan dit heel goed helpen bij het uiterlijk van de gebruikersinterface. Het aanpassen van de breedte van de knop aan dezelfde breedte als de tekstvelden zou ook helpen, terwijl de tekst in de knop wordt gecentreerd om de dingen er zo vloeiend mogelijk uit te laten zien. Het zijn dingen zoals deze die je ontwerpen laten knallen!
Praten over inlogknoppen, is er echt echt behoefte aan een? Minimalisme is op dit moment een enorme designtrend om een paar heel eenvoudige redenen: het ziet er geweldig uit en het is heel gemakkelijk te gebruiken.
De knop kan volledig worden verwijderd, met een aanmeldknop die in de navigatiebalk boven het scherm wordt geplaatst. Een andere link kan op de pagina worden geplaatst voor andere inlogopties, zoals links naar pagina's waar u een nieuw wachtwoord kunt aanvragen of een nieuw account kunt maken. Een geweldige applicatie die dit goed doet, is de officiële Twitter-applicatie (voorheen Tweetie), zoals hieronder te zien is:
hierboven: Twitter voor iPhone-app
Het aanbevelingenscherm is een vrij belangrijke Amazon-functie, omdat gebruikers hierdoor nieuwe producten kunnen vinden waarvan ze misschien nog niet eerder op de hoogte waren op basis van hun eerdere zoekopdrachten, aankopen en items in hun verlanglijstje.
Het scherm toont een lijst met producten op exact dezelfde manier als ze in uw zoekresultaten zouden worden weergegeven.
hierboven: Amazon UK-aanbevelingenpagina
Ondanks het feit dat dit prima werkt, lijkt het soms een beetje krap, vooral als het om lange titels gaat, of als er meerdere namen van een auteur of regisseur worden vermeld.
Deze productlijsten kunnen veel worden opgeruimd door alleen miniaturen en miniaturen te gebruiken. Als een product eruit ziet als interessant kan zijn, kan de gebruiker erop klikken om meer informatie over het product te onthullen, zoals de titel, de prijs en de beoordeling.
Een uitstekend voorbeeld van hoe dit zou kunnen werken, is de nieuwe mappenstructuur in iOS4, waarmee u alles uit de weg kunt duwen om te onthullen wat zich in de map bevindt. Hieronder ziet u een voorbeeld van de mappenstructuur.
hierboven: mapstructuur van iOS4
Dit is het slechtste scherm van Amazon UK app. Als ik je zou vertellen dat niemand dit scherm daadwerkelijk zou zien, zou ik waarschijnlijk gelijk hebben, maar alleen omdat het een scherm is dat niet zo veel wordt bekeken, wil dat nog niet zeggen dat het moet lijden aan de ontwerpkwaliteit. Het scherm linkt naar twee andere pagina's: 'Gebruiksvoorwaarden & verkoop' en 'Privacykennisgeving'.
hierboven: juridische informatiepagina van Amazon UK
Ik kan niet genoeg benadrukken hoe belangrijk het is om dezelfde stijl in een applicatie te behouden. Hetzelfde geldt voor websites, tijdschriften, kranten, brochures ... in feite moet alles wat het bedrijf heeft enige gelijkenis met elkaar hebben - het is gewoon een goede branding. Als je herkend wilt worden, moet je het doen.
Dit scherm voor juridische informatie maakt alleen gebruik van elementaire tekstkoppelingen naar andere bronnen, hoewel andere schermen de standaard iPhone-knoppen gebruiken (zoals te zien in het instellingenmenu van uw iPhone).
Dit is een zeer eenvoudige ontwerpfix en het scherm kan aanzienlijk worden verbeterd om overeen te komen met de rest van de toepassing!
Het scherm met productpagina's is in feite een pagina vol met korte samenvattingen, zodat de gebruiker kan beslissen of dit het product voor hen is of niet. Als dat het geval is, hebben ze de mogelijkheid om een sectie met een pijl te selecteren en meer foto's te bekijken, meer te lezen over het product, meer gebruikte deals te bekijken en klantrecensies te lezen.
boven: Amazon UK productpagina
De productpagina werkt over het algemeen prima, maar is er gewoon niet als het op ziet. De pagina ziet er krap en samengedrukt uit en heeft over het algemeen duidelijk niet veel aandacht besteed aan kleine details, die erg belangrijk zijn!
Op veel andere app-schermen van Amazon UK hebben we afgeronde hoeken gezien, zoals op het startscherm. Dit verbruikt wel wat meer ruimte, maar zorgt ervoor dat de gebruikersinterface er net zo netjes uitziet en over het algemeen vriendelijker in gebruik is. Het gebruik van dezelfde techniek voor het productpaginascherm zou het onmiddellijk verbeteren.
Eén ding dat gedurende de hele applicatie afwezig was, maar vooral goed zou werken op deze pagina, is het ontbreken van subtiele schaduwen / streken. De iPhone-interface gebruikt deze regelmatig - je hoeft alleen maar naar de titel te kijken in de navigatiebalk aan de bovenkant van de bovenstaande afbeelding om te zien dat er een binnenschaduw op de tekst is toegepast.
Het toevoegen van innerlijke schaduwen of zelfs 1px-lijnen die alleen op de onderkant van de tekst worden toegepast, zou een groot verschil maken voor het algemene uiterlijk van niet alleen de productpagina, maar de hele applicatie, waardoor er een veel grotere weergave van diepte ontstaat, waardoor de app over het algemeen veel wordt gemaakt. visueel aantrekkelijker.
hierboven: Amazon VK productbeeldpagina - is het echt nodig? Nee…
De lucht is de limiet met iPhone-applicaties, en deze pagina raakt nergens in de buurt van die limiet. Bekijk enkele andere applicaties en merk wat effecten die ze gebruiken wanneer ze hun gebruikers door afbeeldingen laten bladeren. Is een volledig apart scherm echt nodig om meer afbeeldingen te kunnen bekijken?
Nogmaals, het is nog een nee. Bekijk de twee voorbeelden van hoe andere winkelapplicaties hun afbeeldingen hieronder hebben weergegeven, die beide een eenvoudige flick-techniek gebruiken, zodat de gebruiker afbeeldingen van links naar rechts (of van rechts naar links!) Kan schuiven, net zoals een inhoud / afbeelding schuifregelaar die u op internet ziet.
hierboven: Topshop iphone-app - scrollen van afbeeldingen
boven: volgende iPhone-app - scrollen van afbeeldingen
Zoals je je waarschijnlijk hebt gerealiseerd, is het de moeite waard om aandacht te besteden aan kleine details en alles in het werk te stellen om een iPhone-applicatie gemakkelijk te gebruiken te maken. Amazon is een van 's werelds grootste online merken en met al hun ontwikkelaars en het geld dat ze hebben om projecten uit te besteden, is de applicatie verre van perfect - het werkt geweldig, maar heeft veel ruimte voor verbetering in termen van de gebruikersinterface.
We hopen dat je een paar goede tips uit dit artikel hebt opgedaan en dat het je eraan zal herinneren zoveel mogelijk tijd te spenderen aan je toepassingsontwerp, en ervoor te zorgen dat je aandacht besteedt aan de dingen die je gebruikers leuk zouden vinden. Stel jezelf gewoon de vraag: "Als ik deze applicatie zou gebruiken (en het was niet de mijne), wat zou ik dan willen dat het kon doen?" Brainstorm uw ideeën en breng ze vervolgens in de praktijk. Succes!
Houd een toekomstige tutorial over het ontwerpen van je eigen iPhone-winkelapp in het Tuts + -netwerk in de gaten!
Accentsconagua