Share
Da immer mehr Menschen täglich mobile Anwendungen nutzen, ist es für Unternehmen auf der ganzen Welt heute wichtiger denn je, die Entwicklung eigener mobiler Anwendungen, sei es für iPhone, Android oder Blackberry, genau zu beachten. Eine mobile Anwendung ist jedoch nicht die einfachste Aufgabe. Es gibt eine Vielzahl von Anwendungen, die perfekt funktionieren, aber einfach nicht besonders gut aussehen. Dies ist wichtig, da eine ansprechende, benutzerfreundliche Oberfläche eine Hauptmethode ist, um Benutzer anzuziehen und zu halten.
Leider ist eine große Anzahl von iPhone-Anwendungen von weniger als herausragendem Design betroffen. Dieser Artikel wird auf die Kosmetik gestalten einer beliebten Einkaufsanwendung, Amazon UK. Wir werden prüfen, was dem Design fehlt und wie es mit Beispielen aus anderen Anwendungen verbessert werden könnte. Tipps und Tricks in diesem Artikel zeigen, wie Sie diese Empfehlungen in die Praxis umsetzen können, mit Links zu anderen großartigen Quellen, die Ihnen helfen, mehr zu erfahren.
Wenn Sie diesen Artikel hilfreich finden, teilen Sie uns dies bitte in den Kommentaren mit. Wir werden dies in Zukunft auf jeden Fall mehr tun!
Beginnen wir mit einer kleinen Einführung in die Anwendung Amazon UK. Wie Sie höchstwahrscheinlich erwarten, handelt es sich dabei um eine Anwendung, mit der Einwohner des Vereinigten Königreichs in Amazon UK gelistete Produkte direkt über ihre iPhone-Anwendung suchen und kaufen können, ohne den Webbrowser verwenden zu müssen. Wie im App Store beschrieben:
Mit der Amazon Mobile App können Besitzer von iPhone und iPod touch sehr schnell suchen, einkaufen, Preise vergleichen, Bewertungen lesen und über Amazon.de Einkäufe tätigen.
Ich benutze ab und zu die Amazon UK-Anwendung. Ich bin kein häufiger Benutzer, aber ich benutze es. Die Anwendung funktioniert, was sie tun soll, aber die Schnittstelle könnte so viel besser sein. Das Layout fühlt sich manchmal beengt an, es gibt keine Möglichkeit, den Laden zu durchsuchen, und alles scheint ästhetisch gemischt und mit einem generellen Mangel an visueller Konsistenz zwischen den Bildschirmen abgestimmt zu sein.
Lass uns anfangen, oder? Ich habe eine Reihe von Screenshots auf verschiedenen Anwendungsseiten erstellt, darunter Startseite, Suchseite, Anmeldeseite, Empfehlungsseite, Wunschliste-Seite, Seite mit Kontoeinstellungen, Hilfeseite, Seite mit rechtlichen Informationen, Produktseite, Bilder Seite und schließlich die Reviews und Artikelbeschreibungsseiten.
Der Begrüßungs- / Startbildschirm ist der erste Bildschirm, den Sie beim Öffnen der Anwendung sehen. Wir erhalten das Amazon-Logo, eine einfache Kopfzeile mit der Aufschrift "welcome" und einige Schaltflächen, die uns auf Ihre Wunschliste und Amazon Remembers führen, auf Produkte, die gerade bei Amazon UK beliebt sind, und eine Option, sich in Ihrem Konto anzumelden, wenn Sie es sind ein bestehender Kunde.
Die Navigation in der App erfolgt hauptsächlich über die Registerkartenleiste am unteren Bildschirmrand, sodass Sie auf verschiedene Bereiche der Anwendung zugreifen können, z. B. für die Startseite, die Suche, den Warenkorb und den Erinnerungsbildschirm. Es gibt auch eine Schaltfläche für "Mehr", mit der Sie Ihre Pakete verfolgen, Ihre Bestellungen einsehen und Ihre Kontoeinstellungen ändern können (siehe Abbildung unten)..
oben: Willkommen bei Amazon UK / Startbildschirm
Wie bereits erwähnt, funktioniert die Anwendung gut. Der Startbildschirm ist relativ einfach zu bedienen, aber ich finde, er könnte viel einfacher sein. Hier sind einige Punkte zu beachten, auf die jeder einzelne Punkt gefolgt von einigen Hinweisen folgt, die möglicherweise die Benutzeroberfläche verbessern.
Muss die Anwendung die Navigationsleiste wirklich durch das Amazon.de-Logo ersetzen? Dies ist auf keinem der anderen Bildschirme der Fall und fühlt sich daher wie eine völlig andere Anwendung an.
Stattdessen kann das Logo durch eine einfache "Standard" -Navigationsleiste, eine Anmeldeschaltfläche oder einige Optionen zum Anzeigen beliebter Produkte, Ihrer Wunschliste oder eines Links zu Amazon Remembers ersetzt werden. Dies würde viel Platz auf der Titelseite freigeben, wodurch Platz für neue Produkte oder sogar Details zu Ihren letzten Bestellungen geschaffen werden kann. Es wäre mehr als genug Platz vorhanden, um das Amazon-Logo auf dem Startbildschirm anzuzeigen, wenn eine Navigationsleiste verwendet würde.
Die Tab-Leiste ist mit vier Hauptbildschirmen verbunden: Startbildschirm, Suche, Warenkorb und Erinnerungen. Erinnerungen ist ein Dienst, der meines Wissens nicht allzu oft genutzt wird. Verdient es wirklich einen Platz in der Haupt-Tab-Leiste sowie einen Link auf der Startseite?
Dieser Link kann ganz einfach in die Registerkarte "Mehr" eingefügt und durch ein Element ersetzt werden, das Kunden mit größerer Wahrscheinlichkeit verwenden, z. B. eine Suchfunktion, mit der Benutzer verschiedene Kategorien auf der Amazon-Website durchsuchen können. Anstatt nach dem zu suchen, was sie wollen, ist dies eine Funktion, die nichts weiter tun würde als den Umsatz zu steigern und die Anwendung zu einer Anwendung zu machen, die die Leute viel häufiger verwenden.
Der größte Fehler der Benutzeroberfläche auf der Vorderseite muss die Suchleiste sein. Als Benutzer, der viele iPhone-Anwendungen verwendet hat, ist das erste, was Sie beim Klicken auf das Textfeld Search Amazon.co.uk erwarten würden, dass ein Tastenfeld eingeblendet wird. Geben Sie Ihre Suche ein und drücken Sie die Start-Taste. In diesem Fall passiert genau das nicht. Stattdessen werden Sie direkt mit dem Suchbildschirm verbunden. Ist das wirklich nötig??
Die einfache Antwort darauf ist ein großes, fettes Nein. Es sind wirklich keine Suchlinks auf derselben Seite erforderlich, insbesondere wenn der Link in der Tab-Leiste so leicht zu finden ist. Wenn die Suchleiste auf der Startseite tatsächlich funktioniert, ist dies eine andere Angelegenheit. Da es sich jedoch praktisch um ein Bild mit einem Link handelt, ist es sinnlos! Wenn Sie dies entfernen, bleibt viel mehr Platz für das Amazon-Logo oben auf dem Startbildschirm und eine Navigationsleiste oben!
Die vorgestellten "populären" Produkte auf der Titelseite der Anwendung scheinen sehr eng zu sein. Schauen Sie sich zum Beispiel die rechte Seite der Playstation 3 Slim und die linke Seite des Muse-Albums an. Die Abstände zwischen den beiden Bildern sind sehr eng und machen die Anwendung im Allgemeinen etwas unübersichtlich.
Einige kleinere Bilder mit etwas zusätzlichem Abstand würden dafür perfekt funktionieren und jedes Bild atmen lassen. Mit der Suchleiste und den Verknüpfungen zu Wish Wish und Amazon Remembers bleibt jedoch viel Platz übrig. Möglicherweise bleibt die Option, die Produkte auf eine viel kühlere und stilvollere Art und Weise zu präsentieren, z. B. speziell für das Internet entwickelte Miniaturansichten Titelseite und nicht nur Bilder des Produkts selbst. Wir alle wissen, dass Bilder mehr sprechen als Worte, daher sollten Sie die Bilder so gut wie möglich gestalten, auch wenn dies etwas mehr Arbeit bedeutet.
Die Umsetzung dieser Punkte würde die Anwendung wesentlich benutzerfreundlicher machen. Unten ist ein kommentiertes Bild des offiziellen iPhone App Store:
oben: Apple App Store
Hier finden Sie Registerkarten am oberen und unteren Rand jeder Seite, die einen wesentlich einfacheren Zugriff auf die einzelnen Bildschirme ermöglichen. Dies würde perfekt mit der Amazon UK-Anwendung funktionieren und dem Benutzer die Suche nach einem bestimmten Produkt oder Produkt erleichtern um im Allgemeinen nur den Laden zu durchsuchen.
Es gibt absolut nichts falsch mit der Suchfunktion in dieser App. Es gibt eine Suchleiste, Suchempfehlungen, die Sie in die Suchleiste eingeben, und eine Produktliste am Ende, wie zu erwarten wäre.
Es gibt eine Option zum Verfeinern der Suche, nachdem Sie Ihre ursprüngliche Suche durchgeführt haben, obwohl Sie sie nicht allzu sehr verfeinern können - nur in welcher Kategorie möchten Sie suchen, was für einen Shop, der Hunderte verkauft, wirklich nicht reicht Tausende von verschiedenen Produkten pro Tag.
oben: Amazon UK-Suchbildschirm
Ist diese Suchfunktion wirklich fortgeschritten genug für einen der bekanntesten Online-Shops der Welt??
Durch das Durchsuchen der Website war es relativ ärgerlich, dass Sie Ihre Optionen nicht genau nach Ihren Wünschen verfeinern können. Die Suche könnte wesentlich vereinfacht werden! Wir sollten die Möglichkeit haben, unsere Suche nach Kategorie, Unterkategorie, Preis, Artikelzustand (neu oder gebraucht) zu verfeinern. Vor Klicken Sie auf die Schaltfläche "Los" und haben Sie die Möglichkeit, unsere Ergebnisse in verschiedenen Aufträgen anzuzeigen, z. B. Preis oder Freigabedatum. Es gibt einfache Dinge, die 99% der Online-Shops haben. Warum also nicht auf eine iPhone-App?
Es ist jedoch eine einfache Lösung. Sie müssen nur den Suchbildschirm von eBay betrachten, um zu sehen, was ich meine (bitte beachten Sie, dass dies der Fall ist) Vor Sie machen Ihre erste Suche und nicht wie in der App von Amazon UK!):
oben: eBay UK App
Der Anmeldebildschirm ist hinsichtlich der Benutzerfreundlichkeit nahezu fehlerfrei. Sie können sich anmelden, Amazon mitteilen, dass Sie Ihr Kennwort vergessen haben, und ein neues Konto erstellen.
oben: Amazon UK-Anmeldebildschirm
Das Styling scheint jedoch etwas seltsam zu sein. Sehen Sie sich den Radius der Ecken in den Feldern für E-Mail-Adresse und Kennwort genauer an und prüfen Sie dann den Radius der Ecken auf der Anmeldeschaltfläche. Sie können deutlich sehen, dass diese nicht gleich sind.
Wenn Sie dies ändern, um den Radius der Schaltfläche gleich zu machen, kann dies sehr hilfreich für die Darstellung der Benutzeroberfläche sein. Das Anpassen der Breite der Schaltfläche auf die gleiche Breite wie die Textfelder würde ebenfalls hilfreich sein, während der Text in der Schaltfläche zentriert wird, damit die Objekte so glatt wie möglich aussehen. Es sind Dinge wie diese, die Ihre Designs zum Pop bringen!
Apropos Anmeldeschaltflächen: Gibt es wirklich wirklich einen Bedarf? Minimalismus ist momentan aus mehreren einfachen Gründen ein großer Designtrend: Er sieht großartig aus und ist sehr einfach zu bedienen.
Die Schaltfläche kann vollständig entfernt werden, wobei eine Anmeldeschaltfläche in der Navigationsleiste über dem Bildschirm platziert wird. Ein weiterer Link kann auf der Seite für andere Anmeldeoptionen platziert werden, z. B. Links zu Seiten, auf denen Sie ein neues Passwort anfordern oder ein neues Konto erstellen können. Eine hervorragende Anwendung, die dies gut macht, ist die offizielle Twitter-Anwendung (vormals Tweetie), wie unten zu sehen ist:
oben: Twitter für iPhone App
Der Bildschirm "Empfehlungen" ist eine wichtige Amazon-Funktion, da Benutzer auf der Grundlage früherer Suchanfragen, Einkäufe und Artikel in ihrer Wunschliste neue Produkte finden können, von denen sie zuvor noch nichts gewusst haben.
Auf dem Bildschirm wird eine Liste von Produkten genauso angezeigt, wie sie in Ihren Suchergebnissen angezeigt würden.
oben: Amazon UK-Empfehlungsseite
Trotz der Tatsache, dass dies perfekt funktioniert, kann es manchmal etwas eng wirken, insbesondere wenn lange Titel betroffen sind oder mehrere Autor- oder Regisseurennamen aufgeführt sind.
Diese Produktlisten können durch die Verwendung von Miniaturansichten und nur Miniaturansichten häufig aufgeräumt werden. Wenn ein Produkt so aussieht, als könnte es von Interesse sein, kann der Benutzer darauf klicken, um weitere Informationen zum Produkt anzuzeigen, wie Titel, Preis und Bewertung.
Ein hervorragendes Beispiel dafür, wie dies funktionieren könnte, ist die neue Ordnerstruktur in iOS4, mit der Sie alles aus dem Weg legen können, um herauszufinden, was sich im Ordner befindet. Unten sehen Sie ein Beispiel für die Ordnerstruktur.
oben: iOS4-Ordnerstruktur
Dies ist der schlechteste Bildschirm der Amazon UK-App. Wenn ich Ihnen sagen würde, dass neben diesem Bildschirm eigentlich niemand auf diesen Bildschirm schaut, wäre ich wahrscheinlich richtig, aber nur weil es sich um einen Bildschirm handelt, der nicht allzu oft angesehen wird, bedeutet das nicht, dass er an Designqualität leiden sollte. Der Bildschirm enthält Links zu zwei anderen Seiten: "Nutzungsbedingungen & Verkauf" und "Datenschutzerklärung".
oben: Amazon-Website für rechtliche Informationen
Ich kann nicht genug betonen, wie wichtig es ist, den gleichen Stil in einer Anwendung zu behalten. Das Gleiche gilt für Websites, Zeitschriften, Zeitungen, Broschüren. In der Tat sollte alles, was von der Firma stammt, eine gewisse Ähnlichkeit haben - es ist nur gutes Branding. Wenn Sie erkannt werden möchten, müssen Sie es tun.
Dieser Bildschirm mit rechtlichen Informationen verwendet lediglich grundlegende Textverknüpfungen zu anderen Quellen, auch wenn andere Bildschirme die Standard-iPhone-Schaltflächen verwenden (wie im Einstellungsmenü Ihres iPhone zu sehen ist).
Dies ist ein sehr einfaches Design-Update, und der Bildschirm könnte erheblich verbessert werden, um den Rest der Anwendung zu erreichen!
Der Bildschirm der Produktseite ist im Wesentlichen eine Seite mit kurzen Zusammenfassungen, anhand derer der Benutzer entscheiden kann, ob es sich um ein Produkt für sie handelt oder nicht. In diesem Fall haben Sie die Möglichkeit, einen beliebigen Abschnitt mit einem Pfeil auszuwählen und mehr Bilder anzuzeigen, mehr über das Produkt zu erfahren, mehr gebrauchte Angebote anzuzeigen und Kundenbewertungen zu lesen.
oben: Amazon UK-Produktseite
Die Produktseite funktioniert im Allgemeinen einwandfrei, ist aber beim Aussehen nicht vorhanden. Die Seite sieht eng und zusammengedrückt aus und hat im Allgemeinen offensichtlich nicht viel auf kleine Details geachtet, die sehr wichtig sind!
Auf vielen anderen Bildschirmen der Amazon UK-App haben wir abgerundete Ecken gesehen, beispielsweise auf dem Startbildschirm. Dies nimmt zwar etwas mehr Platz in Anspruch, macht die Benutzeroberfläche jedoch viel sauberer und allgemein freundlicher. Die Verwendung derselben Technik für den Bildschirm der Produktseite würde dies sofort verbessern.
Eine Sache, die in der gesamten Anwendung nicht vorhanden war, aber auf dieser Seite besonders gut funktionieren würde, ist der Mangel an subtilen Schatten / Strichen. Die iPhone-Benutzeroberfläche verwendet diese regelmäßig - Sie müssen nur den Titel in der Navigationsleiste oben im obigen Bild betrachten, um zu erkennen, dass der Text mit einem inneren Schatten versehen wurde.
Das Hinzufügen von inneren Schatten oder sogar nur 1 Pixel-Strichen, die nur am unteren Rand des Textes angewendet werden, würde einen großen Unterschied für das Gesamtbild der Produktseite und der gesamten Anwendung ausmachen. Dadurch wird die gesamte Anwendung stark vergrößert, was die App im Allgemeinen stark beeinflusst optisch ansprechender.
oben: Produktbildseite von Amazon UK - wird es wirklich benötigt? Nein…
Bei iPhone-Anwendungen ist der Himmel das Limit, und diese Seite erreicht dieses Limit nicht. Sehen Sie sich einige andere Anwendungen an und beachten Sie einige der Effekte, die sie verwenden, wenn ihre Benutzer durch die Bilder scrollen können. Ist ein völlig separater Bildschirm wirklich erforderlich, um mehr Bilder anzeigen zu können?
Wieder ist es ein anderes Nein. Sehen Sie sich die beiden Beispiele an, wie andere Einkaufsanwendungen unten ihre Bilder angezeigt haben. Beide verwenden eine einfache Methode zum Wechseln, sodass der Benutzer Bilder von links nach rechts (oder von rechts nach links) verschieben kann, ähnlich wie bei einem Inhalt / Bild Schieberegler, den Sie im Web sehen.
oben: Topshop iphone App - Bildlauf
oben: nächste iPhone-App - Bildlauf
Wie Sie wahrscheinlich erkannt haben, lohnt es sich, auf kleine Details zu achten und alles zu tun, um eine iPhone-Anwendung benutzerfreundlich zu machen. Amazon ist eine der weltweit größten Online-Marken, und mit all ihren Entwicklern und dem Geld, das sie für das Outsourcing von Projekten haben, ist die Anwendung alles andere als perfekt - sie funktioniert hervorragend, bietet jedoch hinsichtlich der Benutzeroberfläche viel Raum für Verbesserungen.
Wir hoffen, dass Sie ein paar gute Tipps aus diesem Artikel erhalten haben und dass Sie daran erinnert werden, so viel Zeit wie möglich mit Ihrem Anwendungsdesign zu verbringen, und achten Sie darauf, dass Sie die Dinge beachten, die Ihre Benutzer möchten. Fragen Sie sich einfach: "Wenn ich diese Anwendung verwenden würde (und nicht meine), was würde ich mir wünschen?" Brainstorming Sie Ihre Ideen und setzen Sie sie in die Praxis um. Viel Glück!
Halten Sie ein Auge auf ein zukünftiges Tutorial, wie Sie Ihre eigene iPhone-Shopping-Anwendung im Tuts + -Netzwerk entwerfen können!
Accentsconagua