Share
Con sempre più persone che iniziano a utilizzare le applicazioni mobili quotidianamente, è ora più importante che mai per le aziende di tutto il mondo prestare particolare attenzione allo sviluppo delle proprie applicazioni mobili, siano esse per iPhone, Android o Blackberry. Avere un'applicazione mobile tuttavia non è il lavoro più semplice. Ci sono molte applicazioni là fuori che funzionano perfettamente, ma semplicemente non sembrano così meravigliose. Questo è importante perché un'interfaccia accattivante e intuitiva è un metodo primario per attirare e trattenere gli utenti.
Sfortunatamente, un gran numero di applicazioni per iPhone soffrono di un design meno che stellare. Questo articolo vedrà il cosmetici di design di una popolare applicazione per lo shopping, Amazon UK. Vedremo cosa manca al design e come potrebbe essere migliorato con esempi tratti da altre applicazioni. Suggerimenti e trucchi in tutto l'articolo mostreranno come mettere in pratica queste raccomandazioni, con collegamenti ad altre grandi fonti per aiutarti a saperne di più.
Se trovi questo articolo utile, ti preghiamo di farcelo sapere nei commenti qui sotto e sicuramente faremo di più in futuro!
Prima di tutto, iniziamo con una piccola introduzione all'applicazione Amazon UK. Come probabilmente ti aspetti, è un'applicazione che consente ai residenti del Regno Unito di cercare e acquistare prodotti elencati su Amazon UK direttamente dalla loro applicazione iPhone senza dover utilizzare il browser web. Come descritto nell'app store:
L'app Amazon Mobile consente ai proprietari di iPhone e iPod touch di cercare, acquistare, confrontare i prezzi, leggere recensioni e effettuare acquisti su Amazon.co.uk utilizzando un'interfaccia semplice ma elegante..
Uso l'applicazione Amazon UK di tanto in tanto. Non sono un utente frequente, ma lo uso. Le applicazioni funzionano, fa quello che si suppone di fare, ma l'interfaccia potrebbe essere fatta molto meglio. Il layout a volte sembra angusto, non c'è possibilità di esplorare il negozio, e tutto sembra essere stato esteticamente miscelato e abbinato a una generale mancanza di coerenza visiva tra gli schermi.
Iniziamo, dobbiamo? Ho scattato una serie di schermate in alcune delle diverse pagine dell'applicazione, con la pagina iniziale, la pagina di ricerca, la pagina di accesso, la pagina dei consigli, la pagina della lista dei desideri, la pagina delle impostazioni dell'account, la pagina della guida, la pagina delle informazioni legali, la pagina del prodotto, le immagini pagina e infine le recensioni e le pagine di descrizione degli articoli.
La schermata di benvenuto / home è la prima schermata che verrà visualizzata quando si apre l'applicazione. Ci viene presentato il logo Amazon, una semplice intestazione che dice "benvenuto" e alcuni pulsanti che ci indirizzano alla tua lista dei desideri e Amazon Remembers, i prodotti che sono popolari in questo momento su Amazon UK, e un'opzione per accedere al tuo account se sei un cliente esistente.
Il modo principale per navigare nell'app è utilizzare la barra delle schede nella parte inferiore dello schermo, che consente di accedere a diverse aree dell'applicazione, ad esempio la schermata iniziale, di ricerca, carrello e ricorda. C'è anche un pulsante per "altro", che ti consente di tracciare i tuoi pacchi, visualizzare i tuoi ordini e modificare le impostazioni del tuo account (puoi vedere questo screenshot sotto).
sopra: schermata di benvenuto / home di Amazon UK
Come accennato in precedenza, l'applicazione funziona correttamente. La schermata principale è relativamente facile da usare, ma trovo che potrebbe essere molto più semplice. Ecco alcuni punti da considerare, ogni singolo punto seguito da alcune note che potrebbero migliorare l'interfaccia utente.
L'applicazione ha davvero bisogno di sostituire la barra di navigazione con il logo Amazon.co.uk? Questo non è il caso su nessuno degli altri schermi, e quindi lo fa sentire come un'applicazione completamente diversa.
Invece, il logo potrebbe essere sostituito con una semplice barra di navigazione "standard", con un pulsante di accesso, o anche con alcune opzioni per visualizzare prodotti popolari, la tua lista dei desideri o un link ad Amazon Remembers. Ciò libererebbe molto spazio sulla prima pagina, lasciando spazio per presentare nuovi prodotti o anche dettagli sui tuoi ordini recenti. Ci sarebbe spazio più che sufficiente per mettere il logo di Amazon sulla schermata principale se fosse usata una barra di navigazione.
La barra delle schede collega a quattro schermate principali: home, search, basket e remembers. Ricorda è un servizio che, per quanto ne so, non è usato molto. Merita davvero un posto nella barra delle schede principale e un collegamento sulla prima pagina?
Questo link potrebbe essere facilmente inserito nella scheda "more" e sostituito con qualcosa che i clienti sono molto più propensi a utilizzare, come una funzione di ricerca, consentendo agli utenti di poter navigare tra diverse categorie sul sito di Amazon, piuttosto che dover cercare quello che vogliono, una funzionalità che non farebbe altro che aumentare le vendite e rendere l'applicazione una che le persone useranno in occasioni molto più regolari.
L'errore di interfaccia utente più grande nella parte anteriore deve essere la barra di ricerca. Essendo un utente che ha utilizzato molte applicazioni per iPhone, la prima cosa che ti aspetteresti quando fai clic sul campo di ricerca di Amazon.co.uk è che la tastiera si apra ... digita la ricerca e premi il pulsante Vai. In questo caso, è esattamente ciò che non accade. Invece, collega semplicemente direttamente alla schermata di ricerca. È davvero necessario?
La semplice risposta a questo è un grosso grasso no. Non c'è davvero bisogno di due link di ricerca sulla stessa pagina, specialmente quando quello nella barra delle schede è così facile da trovare. Se la barra di ricerca sulla prima pagina funzionasse davvero, sarebbe una questione diversa, ma poiché è praticamente un'immagine con un link allegato, è inutile! La rimozione di questo lascerebbe molto più spazio per il logo Amazon nella parte superiore della schermata principale e una barra di navigazione nella parte superiore!
I prodotti "popolari" in evidenza sulla prima pagina dell'applicazione sembrano molto angusti. Ad esempio, dai un'occhiata al lato destro della Playstation 3 Slim e al lato sinistro dell'album Muse, la distanza tra le due immagini è molto stretta e in generale rende l'applicazione un po 'sporca.
Alcune immagini più piccole con una piccola spaziatura aggiuntiva funzionerebbero perfettamente per questo, consentendo ad ogni immagine di respirare. Tuttavia, con la barra di ricerca e i link alla Wish List e Amazon Remembers andati, resterà molto spazio, lasciando eventualmente l'opzione di presentare i prodotti in un modo molto più cool e più elegante, come le miniature in primo piano progettate appositamente per prima pagina, anziché solo immagini del prodotto stesso. Sappiamo tutti che le immagini parlano più delle parole, quindi crea le immagini nel miglior modo possibile anche se ciò significa un po 'più di lavoro.
Mettere in pratica questi punti renderebbe l'applicazione molto più user friendly. Di seguito è riportata un'immagine annotata dell'app store ufficiale di iPhone:
sopra: App Store di Apple
Qui puoi vedere le schede nella parte superiore e inferiore di ogni pagina, consentendo un accesso molto più semplice a ogni schermata, qualcosa che funzionerebbe perfettamente con l'applicazione Amazon UK e rendendo le cose molto più facili per l'utente per trovare un determinato prodotto o di solito sfogliare il negozio.
Non c'è assolutamente nulla di sbagliato nella funzione di ricerca in questa app. C'è una barra di ricerca, consigli per la ricerca mentre digiti nella barra di ricerca e un elenco di prodotti alla fine, come ci si aspetterebbe.
C'è un'opzione per perfezionare la ricerca dopo aver effettuato la ricerca originale, anche se non è possibile affinarla molto - solo la categoria in cui desideri effettuare la ricerca, che in realtà non è sufficiente per un negozio che vende centinaia e migliaia di prodotti diversi al giorno.
sopra: schermata di ricerca di Amazon UK
Questa funzione di ricerca è abbastanza avanzata per uno dei negozi di shopping online più noti al mondo?
Dalla ricerca del sito, ho trovato relativamente fastidioso che non è possibile perfezionare le opzioni fino a esattamente ciò che si desidera. La ricerca potrebbe essere resa molto più facile! Dovremmo avere la possibilità di affinare la ricerca per categoria, sottocategoria, prezzo, condizione dell'articolo (nuovo o usato) prima premendo il pulsante Vai, oltre alla possibilità di visualizzare i risultati in diversi ordini, come il prezzo o la data di rilascio. Ci sono cose semplici che hanno il 99% dei negozi online, quindi perché non su un'app per iPhone?
È una soluzione semplice, tuttavia. Hai solo bisogno di dare un'occhiata alla schermata di ricerca di eBay per vedere cosa intendo (si prega di notare questo è prima fai la tua ricerca iniziale, e non dopo come nell'app di Amazon UK!):
sopra: eBay UK app
La schermata di accesso è quasi impeccabile in termini di usabilità, puoi accedere, dire ad Amazon che hai dimenticato la password e creare un nuovo account.
sopra: Amazon UK entra nello schermo
Lo stile sembra comunque un po 'strano. Dai uno sguardo più da vicino al raggio degli angoli nei campi dell'indirizzo email e della password, quindi osserva il raggio degli angoli sul pulsante di accesso. Puoi chiaramente vedere che questi non sono gli stessi.
Cambiare questo per rendere il raggio del pulsante lo stesso sarebbe di grande aiuto per l'aspetto dell'interfaccia utente. Regolare la larghezza del pulsante alla stessa larghezza dei campi di testo aiuta anche le cose, mentre centra il testo nel pulsante per rendere le cose il più agevoli possibile. Sono cose come queste che fanno esplodere i tuoi progetti!
A proposito di pulsanti di accesso, c'è davvero bisogno di uno per niente? Il minimalismo è un'enorme tendenza di design in questo momento a causa di un paio di motivi molto semplici: sembra fantastico ed è molto facile da usare.
Il pulsante potrebbe essere completamente rimosso, con un pulsante di accesso posizionato nella barra di navigazione sopra lo schermo. Un altro collegamento potrebbe essere inserito nella pagina per altre opzioni di accesso quali i collegamenti alle pagine in cui è possibile richiedere una nuova password o creare un nuovo account. Un'applicazione superba che fa bene questo è l'applicazione Twitter ufficiale (in precedenza Tweetie), come si può vedere qui sotto:
sopra: Twitter per l'app per iPhone
La schermata dei consigli è piuttosto importante per Amazon, in quanto consente agli utenti di trovare nuovi prodotti che potrebbero non conoscere in precedenza in base alle ricerche, agli acquisti e agli articoli precedenti nella loro lista dei desideri.
Lo schermo mostra un elenco di prodotti nello stesso identico modo in cui verrebbero visualizzati nei risultati di ricerca.
sopra: pagina di raccomandazioni di Amazon UK
Nonostante funzioni perfettamente, a volte può sembrare un po 'angusto, specialmente quando sono coinvolti titoli lunghi o più di un autore o regista elencato.
Questi elenchi di prodotti possono essere riordinati molto utilizzando solo miniature e miniature. Se un prodotto sembra avere interesse, l'utente può fare clic su di esso per visualizzare ulteriori informazioni sul prodotto, ad esempio il titolo, il prezzo e la sua valutazione.
Un ottimo esempio di come potrebbe funzionare è la nuova struttura di cartelle presente in iOS4, che ti consente di spingere tutto fuori strada per rivelare cosa c'è all'interno della cartella. Di seguito è riportato un esempio della struttura delle cartelle.
sopra: struttura della cartella iOS4
Questo è il peggior schermo dell'app di Amazon UK. Se ti dicessi che accanto a nessuno effettivamente guarda questo schermo probabilmente avrei ragione, ma solo perché è uno schermo che non è visto molto, non significa che dovrebbe soffrire in termini di qualità del design. Lo schermo collega ad altre due pagine: "Condizioni d'uso e vendita" e "Informativa sulla privacy".
sopra: pagina di informazioni legali di Amazon UK
Non posso sottolineare abbastanza quanto sia importante mantenere lo stesso stile in ogni applicazione. Lo stesso vale per siti Web, riviste, giornali, opuscoli ... infatti, tutto ciò che è in azienda dovrebbe avere alcune somiglianze tra loro - è solo un buon marchio. Se vuoi essere riconosciuto, devi farlo.
Questa schermata di informazioni legali utilizza solo collegamenti di testo di base ad altre fonti, anche se altri schermi utilizzano i pulsanti predefiniti di iPhone (come mostrato nel menu delle impostazioni del tuo iPhone.
Questa è una soluzione di design molto semplice e lo schermo potrebbe essere notevolmente migliorato per adattarsi al resto dell'applicazione!
La schermata della pagina del prodotto è fondamentalmente una pagina piena di brevi riassunti, che consente all'utente di decidere se questo è il prodotto per loro o meno. In tal caso, hanno la possibilità di selezionare qualsiasi sezione con una freccia e visualizzare più immagini, leggere ulteriori informazioni sul prodotto, visualizzare le offerte più utilizzate e leggere le recensioni dei clienti.
sopra: pagina del prodotto Amazon UK
La pagina del prodotto in generale funziona perfettamente, ma semplicemente non c'è quando si tratta di look. La pagina sembra stretta e schiacciata, e in generale non ha avuto molta attenzione ai piccoli dettagli, che sono molto importanti!
Su molte altre schermate di app di Amazon UK, abbiamo visto angoli arrotondati, come nella schermata principale. Questo richiede un po 'più di spazio, ma rende l'interfaccia utente molto più ordinata e generalmente più facile da usare. L'utilizzo della stessa tecnica per la schermata della pagina del prodotto lo migliorerebbe immediatamente.
Una cosa che è stata assente in tutta l'applicazione, ma che funzionerebbe particolarmente bene in questa pagina, è la mancanza di sottili ombre / tratti. L'interfaccia iPhone li usa regolarmente - basta guardare il titolo nella barra di navigazione nella parte superiore dell'immagine sopra per rendersi conto di avere un'ombra interna applicata al testo.
L'aggiunta di ombre interne, o anche colpi di 1 pixel applicati alla parte inferiore del testo, aggiungerebbe un'enorme differenza all'aspetto generale non solo della pagina del prodotto, ma dell'intera applicazione, creando un aspetto molto più intenso della profondità, generalmente rendendo l'applicazione molto più più visivamente accattivante.
sopra: pagina di immagine del prodotto di Amazon UK - è davvero necessaria? no…
Il cielo è il limite con le applicazioni per iPhone, e questa pagina non ha colpito da nessuna parte vicino a quel limite. Guarda alcune altre applicazioni e nota alcuni degli effetti che stanno utilizzando quando lasciano scorrere le immagini agli utenti. È davvero necessario uno schermo completamente separato per poter visualizzare più immagini?
Di nuovo, è un altro no. Dai un'occhiata ai due esempi di come le altre applicazioni di shopping hanno mostrato le loro immagini qui sotto, entrambe utilizzano una semplice tecnica di sfogliamento in modo che l'utente possa far scorrere le immagini da sinistra a destra (o da destra a sinistra!), Proprio come un contenuto / immagine slider che vedi sul web.
sopra: app Topshop per iPhone - scorrimento immagini
sopra: prossima app per iPhone - scorrimento immagini
Come probabilmente avrai capito, vale la pena prestare attenzione ai piccoli dettagli e fare tutto ciò che è in tuo potere per rendere l'applicazione iPhone facile da usare. Amazon è uno dei più grandi marchi online del mondo, e con tutti i suoi sviluppatori e il denaro che hanno per esternalizzare i progetti, l'applicazione è lungi dall'essere perfetta: funziona alla grande, ma ha molti margini di miglioramento in termini di interfaccia utente.
Ci auguriamo che tu abbia raccolto alcuni buoni consigli da questo articolo e che ti ricordi di dedicare più tempo possibile alla progettazione della tua applicazione, assicurandoti di prestare attenzione alle cose che gli utenti vorrebbero. Chiediti: "Se stavo usando questa applicazione (e non era la mia), cosa avrei voluto che potesse fare?" Brainstorm le tue idee e poi metterle in pratica. In bocca al lupo!
Tieni d'occhio un futuro tutorial su come progettare la tua applicazione per lo shopping per iPhone sulla rete Tuts +!
Accentsconagua