Share
Alors que de plus en plus de personnes commencent à utiliser quotidiennement des applications mobiles, il est maintenant plus important que jamais que les entreprises du monde entier accordent une attention particulière au développement de leurs propres applications mobiles, que ce soit pour iPhone, Android ou Blackberry. Avoir une application mobile n'est cependant pas le travail le plus facile. Il existe de nombreuses applications qui fonctionnent parfaitement bien, mais n’avez pas l’air si merveilleux. Ceci est important car une interface attrayante et conviviale est une méthode essentielle pour attirer et fidéliser les utilisateurs..
Malheureusement, un grand nombre d'applications iPhone souffrent d'un design moins que stellaire. Cet article portera sur le cosmétique design d'une application de magasinage populaire, Amazon UK. Nous verrons ce qui manque à la conception et comment elle pourrait être améliorée avec des exemples d'autres applications. Tout au long de l'article, des conseils et astuces vous montreront comment mettre en pratique ces recommandations, avec des liens vers d'autres sources intéressantes pour vous aider à en apprendre davantage..
Si vous trouvez cet article utile, merci de nous le signaler dans les commentaires ci-dessous et nous en ferons certainement davantage à l'avenir!
Tout d’abord, commençons par une petite introduction à l’application Amazon UK. Comme vous vous en doutez probablement, c'est une application qui permet aux résidents du Royaume-Uni de rechercher et d'acheter des produits répertoriés sur Amazon UK directement à partir de leur application iPhone sans avoir à utiliser le navigateur Web. Comme décrit dans l'App Store:
L'application Amazon Mobile App permet aux utilisateurs d'iPhone et d'iPod touch d'effectuer très rapidement des recherches, d'acheter, de comparer les prix, de consulter les avis et de faire des achats sur Amazon.co.uk, à l'aide d'une interface simple et élégante..
J'utilise l'application Amazon UK de temps en temps. Je ne suis pas un utilisateur fréquent, mais je l'utilise. Les applications fonctionnent, il fait ce qu’il est supposé faire, mais l’interface pourrait être beaucoup mieux faite. La disposition semble parfois exiguë, il n’ya aucune possibilité de parcourir le magasin, et tout semble avoir été mélangé esthétiquement et assorti d’un manque général de cohérence visuelle entre les écrans..
Commençons, allons-nous? J'ai pris une série de captures d'écran dans différentes pages d'applications, avec la page d'accueil, la page de recherche, la page de connexion, la page de recommandations, la page de liste de souhaits, la page des paramètres de votre compte, la page d'aide, la page d'informations juridiques, la page produit, les images. page et enfin les commentaires et les pages de description de l'article.
L'écran d'accueil / d'accueil est le premier écran que vous verrez lors de l'ouverture de l'application. Nous présentons le logo Amazon, une simple en-tête disant "bienvenue" et quelques boutons nous dirigeant vers votre liste de souhaits et Amazon Remembers, des produits populaires en ce moment sur Amazon UK et une option de connexion à votre compte si vous êtes. un client existant.
Le moyen principal de naviguer dans l'application consiste à utiliser la barre d'onglets en bas de l'écran, ce qui vous permet d'accéder à différentes zones de l'application telles que l'écran d'accueil, de recherche, de panier et de mémoire. Il y a aussi un bouton pour "plus", qui vous permet de suivre vos colis, de voir vos commandes et de modifier les paramètres de votre compte (vous pouvez voir cette capture d'écran ci-dessous).
ci-dessus: écran d'accueil / accueil d'Amazon UK
Comme mentionné précédemment, l'application fonctionne bien. L’écran d’accueil est relativement facile à utiliser, mais j’aperçois que cela pourrait être beaucoup plus simple. Voici quelques points à considérer, chaque point individuel étant suivi de quelques notes pouvant éventuellement améliorer l'interface utilisateur..
L'application doit-elle vraiment remplacer la barre de navigation par le logo Amazon.co.uk? Ce n'est le cas sur aucun des autres écrans et donne donc l'impression d'être une application totalement différente..
Au lieu de cela, le logo pourrait être remplacé par une simple barre de navigation "standard", avec un bouton de connexion ou même quelques options pour afficher les produits populaires, votre liste de souhaits ou un lien vers Amazon Remembers. Cela libérerait beaucoup d'espace sur la page de couverture, laissant la place à de nouveaux produits, voire à des détails sur vos commandes récentes. Si vous utilisiez une barre de navigation, l'espace disponible serait suffisant pour que le logo Amazon apparaisse sur l'écran d'accueil..
La barre d'onglets renvoie à quatre écrans principaux: accueil, recherche, panier et mémorisation. Se souvenir est un service qui, autant que je sache, n'est pas tellement utilisé. Mérite-t-il vraiment une place dans la barre d’onglet principale ainsi qu’un lien sur la page de couverture??
Ce lien pourrait très facilement être placé dans l'onglet "plus" et remplacé par quelque chose que les clients sont beaucoup plus susceptibles d'utiliser, tel qu'une fonction de navigation, permettant aux utilisateurs de parcourir différentes catégories sur le site Amazon, plutôt que d'avoir à rechercher ce qu'ils veulent, une fonctionnalité qui ne ferait que multiplier les ventes et rendre l'application plus utilisable par les utilisateurs à une occasion beaucoup plus régulière.
La plus grande erreur d’interface utilisateur à l’avant doit être la barre de recherche. En tant qu'utilisateur ayant utilisé de nombreuses applications iPhone, la première chose à laquelle vous vous attendez lorsque vous cliquez sur le champ de texte Rechercher sur Amazon.co.uk, c'est qu'un clavier apparaisse… saisissez votre recherche, puis cliquez sur le bouton OK. Dans ce cas, c'est exactement ce qui ne se produit pas. Au lieu de cela, il vous relie directement à l'écran de recherche. Est-ce vraiment nécessaire?
La réponse simple à cela est un gros non. Il n’ya vraiment pas besoin de deux liens de recherche sur la même page, en particulier lorsque celui de la barre d’onglet est si facile à trouver. Si la barre de recherche de la page d'accueil fonctionnait réellement, il en irait autrement, mais comme il s'agit virtuellement d'une image avec un lien, cela ne sert à rien! Si vous supprimez cette option, vous laisserez beaucoup plus de place au logo Amazon en haut de l'écran d'accueil et à une barre de navigation en haut.!
Les produits "populaires" présentés en première page de l'application semblent très à l'étroit. Par exemple, regardez le côté droit de la Playstation 3 Slim et le côté gauche de l’album Muse, l’espacement entre les deux images est très serré et rend l’application généralement un peu fatiguée..
Certaines images plus petites avec un petit espacement supplémentaire fonctionneraient parfaitement bien pour permettre à chaque image de respirer. Cependant, avec la barre de recherche et les liens vers la Wish List et Amazon Remembers disparus, il restera beaucoup d'espace, laissant éventuellement la possibilité de présenter les produits de manière beaucoup plus cool et élégante, tels que des miniatures conçues spécifiquement pour le page de couverture, plutôt que de simples images du produit lui-même. Nous savons tous que les images parlent plus que les mots, alors optimisez les images même si cela signifie un peu plus de travail..
En mettant ces points en pratique, l'application serait beaucoup plus conviviale. Vous trouverez ci-dessous une image annotée de la boutique d'applications iPhone officielle:
ci-dessus: Apple App Store
Ici, vous pouvez voir des onglets en haut et en bas de chaque page, ce qui permet un accès beaucoup plus facile à chaque écran, ce qui fonctionnerait parfaitement avec l'application Amazon UK et faciliterait la tâche de l'utilisateur pour trouver un produit ou une simplement parcourir le magasin.
Il n'y a absolument rien de mal avec la fonctionnalité de recherche dans cette application. Il y a une barre de recherche, des recommandations de recherche au fur et à mesure que vous tapez dans la barre de recherche et une liste de produits à la fin, comme on pourrait s'y attendre..
Il existe une option permettant d’affiner votre recherche après votre recherche initiale, bien que vous ne puissiez pas l’affiner autant. Seule la catégorie dans laquelle vous souhaitez effectuer votre recherche n’est pas suffisante pour un magasin qui en vend des centaines et plus. des milliers de produits différents par jour.
ci-dessus: écran de recherche Amazon UK
Cette fonction de recherche est-elle vraiment assez avancée pour l’un des magasins de vente en ligne les plus connus au monde??
En cherchant sur le site, je trouvais relativement ennuyeux que vous ne puissiez affiner vos options jusqu’à exactement ce que vous voulez. La recherche pourrait être beaucoup plus facile! Nous devrions avoir la possibilité d'affiner notre recherche par catégorie, sous-catégorie, prix, condition d'article (neuf ou d'occasion) avant appuyer sur le bouton «go», ainsi que d’avoir la possibilité d’afficher nos résultats dans différents ordres, tels que le prix ou la date de publication. Il y a des choses simples que 99% des boutiques en ligne ont, alors pourquoi pas sur une application iPhone?
C'est une solution facile, cependant. Il vous suffit de jeter un coup d'œil à l'écran de recherche d'eBay pour voir ce que je veux dire (veuillez noter qu'il s'agit d'un avant vous faites votre recherche initiale, et pas après comme dans l'application d'Amazon UK!):
ci-dessus: application eBay UK
L’écran de connexion est presque sans défaut en termes de facilité d’utilisation, vous pouvez vous connecter, dire à Amazon que vous avez oublié votre mot de passe et créer un nouveau compte..
ci-dessus: écran de connexion Amazon UK
Le style semble cependant être un peu étrange. Examinez de plus près le rayon des coins dans les champs d'adresse de messagerie et de mot de passe, puis examinez le rayon des coins sur le bouton de connexion. Vous pouvez clairement voir que ce ne sont pas les mêmes.
Changer cela pour que le rayon du bouton soit le même aiderait beaucoup l'apparence de l'interface utilisateur. Ajuster la largeur du bouton à la même largeur que les champs de texte aiderait également les choses, tout en centrant le texte dans le bouton pour rendre les choses aussi fluides que possible. Ce sont des choses comme ça qui font ressortir vos créations!
En ce qui concerne les boutons de connexion, existe-t-il vraiment un besoin? Le minimalisme est une tendance de conception énorme en ce moment pour deux raisons très simples: il a fière allure et il est très facile à utiliser.
Le bouton peut être complètement supprimé, un bouton de connexion étant placé dans la barre de navigation au-dessus de l'écran. Un autre lien peut être placé sur la page pour d'autres options de connexion, telles que des liens vers des pages où vous pouvez demander un nouveau mot de passe ou créer un nouveau compte. L'application Twitter officielle (anciennement Tweetie) est une superbe application qui fonctionne bien, comme on peut le voir ci-dessous:
ci-dessus: application Twitter pour iPhone
L’écran des recommandations est une fonctionnalité assez importante d’Amazon, car il permet aux utilisateurs de rechercher de nouveaux produits qu’ils ne connaissaient peut-être pas auparavant en se basant sur leurs recherches, achats et articles précédents dans leur liste de souhaits..
L'écran affiche une liste de produits exactement de la même manière que dans les résultats de recherche..
ci-dessus: page de recommandations d'Amazon UK
Malgré le fait que cela fonctionne parfaitement, cela peut parfois sembler un peu à l'étroit, surtout lorsque de longs titres sont impliqués, ou que plusieurs noms d'auteur ou de réalisateur sont répertoriés..
Ces listes de produits pourraient être beaucoup réduites en utilisant des vignettes, et uniquement des vignettes. Si un produit semble présenter un intérêt, l'utilisateur peut cliquer dessus pour afficher plus d'informations sur le produit, telles que le titre, le prix et sa note..
Un excellent exemple de la façon dont cela pourrait fonctionner est la nouvelle structure de dossiers proposée dans iOS4, qui vous permet de tout mettre en œuvre pour révéler le contenu du dossier. Voici un exemple de la structure de dossiers.
ci-dessus: structure du dossier iOS4
C'est le pire écran de l'application Amazon UK. Si je vous disais que pratiquement personne ne regarde cet écran, j'aurais probablement raison, mais le fait que ce soit un écran qui n'est pas trop regardé ne signifie pas qu'il devrait souffrir de la qualité de son design. L’écran renvoie à deux autres pages: "Conditions d’utilisation et de vente" et "Remarque sur la confidentialité".
ci-dessus: page d'informations juridiques d'Amazon UK
Je ne saurais trop insister sur l’importance de conserver le même style dans une application. Il en va de même pour les sites Web, les magazines, les journaux, les brochures… en fait, tout ce qui est de la compagnie devrait avoir une ressemblance, c'est juste une bonne image de marque. Si vous voulez être reconnu, vous devez le faire.
Cet écran d'informations juridiques utilise uniquement du texte de base faisant référence à d'autres sources, même si d'autres écrans utilisent les boutons par défaut de l'iPhone (comme indiqué dans le menu des paramètres de votre iPhone)..
Il s’agit d’une solution de conception très simple et l’écran pourrait être considérablement amélioré pour correspondre au reste de l’application.!
L’écran de la page du produit est essentiellement une page de résumés courts, permettant à l’utilisateur de décider s’il s’agit ou non du produit. Si tel est le cas, ils ont la possibilité de sélectionner une section avec une flèche et d'afficher plus de photos, d'en savoir plus sur le produit, d'afficher les offres les plus utilisées et de consulter les avis des clients..
ci-dessus: page produit Amazon UK
La page produit en général fonctionne parfaitement bien, mais n’y figure pas. La page a l'air étroite et serrée, et en général n'a manifestement pas eu beaucoup d'attention portée aux petits détails, qui sont très importants.!
Sur de nombreux écrans d'application Amazon UK, nous avons constaté des coins arrondis, comme sur l'écran d'accueil. Cela prend un peu plus de place, mais rend l'interface utilisateur plus soignée et généralement plus conviviale. Utiliser la même technique pour l’écran de la page du produit l’améliorerait immédiatement.
Une chose qui a été absente tout au long de l’application, mais qui fonctionnerait particulièrement bien sur cette page, est le manque d’ombre / de traits subtils. L’interface iPhone les utilise régulièrement - il suffit de regarder le titre dans la barre de navigation en haut de l’image ci-dessus pour comprendre qu’une ombre interne a été appliquée au texte..
Ajouter des ombres intérieures ou même des traits de 1px appliqués au bas du texte ajouterait une différence énorme à l'aspect général de la page du produit, mais également à l'ensemble de l'application, ce qui créerait un effet de profondeur beaucoup plus important, ce qui rendrait l'application beaucoup plus complexe. plus attrayant visuellement.
ci-dessus: page d'image du produit Amazon UK - est-ce vraiment nécessaire? non…
Le ciel est la limite avec les applications iPhone, et cette page ne va tout simplement pas près de cette limite. Examinez d'autres applications et remarquez les effets qu'elles utilisent lorsqu'elles permettent aux utilisateurs de faire défiler les images. Un écran complètement séparé est-il vraiment nécessaire pour pouvoir afficher plus d'images??
Encore une fois, c'est un autre non. Jetez un coup d'œil aux deux exemples ci-dessous montrant comment d'autres applications de magasinage ont affiché leurs images. Ils utilisent tous deux une technique simple permettant à l'utilisateur de faire glisser les images de gauche à droite (ou de droite à gauche!), À la manière d'un contenu / image. curseur que vous voyez sur le web.
ci-dessus: application iphone Topshop - défilement d'images
ci-dessus: application iPhone suivante - défilement d'image
Comme vous vous en êtes probablement rendu compte, porter une attention particulière aux petits détails et tout mettre en œuvre pour rendre une application iPhone facile à utiliser en vaut la peine. Amazon est l’une des plus grandes marques en ligne au monde et, avec tous ses développeurs et l’argent dont ils disposent pour sous-traiter des projets, l’application est loin d’être parfaite - elle fonctionne très bien, mais elle a encore beaucoup à améliorer en termes d’interface utilisateur.
Nous espérons que vous trouverez quelques conseils utiles dans cet article, qui vous rappellera de consacrer le plus de temps possible à la conception de votre application, en veillant à ce que vos utilisateurs soient attentifs à ce qu'ils souhaitent. Demandez-vous simplement: "Si j'utilisais cette application (et que ce n'était pas la mienne), que souhaiterais-je qu'elle puisse faire?" Réfléchissez sur vos idées, puis mettez-les en pratique. Bonne chance!
Gardez un œil sur un futur tutoriel sur la conception de votre propre application de shopping iPhone sur le réseau Tuts +!
Accentsconagua