Share
Heute unterhalten wir uns mit zwei Designern für mobile Benutzeroberflächen darüber, wie sie erfolgreiche mobile Benutzeroberflächen und intuitive Navigationslösungen entwerfen. Wir erfahren, wie Sacha Greif mit platzsparenden UI-Elementen mit dem begrenzten Platz des iPads zusammenarbeitet. Eryk Pastwa erläutert, wie Sie für mehrere mobile Größen entwerfen und wie Sie Designs für den maximalen Einsatz in der Praxis testen können. Werfen Sie einen Blick auf ihre Arbeitsabläufe und die bewährten Methoden, die beide in ihren Projekten einsetzen.
Dieser Beitrag ist Tag 3 unserer Interface Design Session. Creative Sessions "Session Day 2Session Day 4"Die Navigation ist aufgrund des begrenzten Platzes und der eingeschränkten Interaktionen für mobile Schnittstellen besonders wichtig. Benutzer können Ihre App nicht auf mehreren Registerkarten öffnen, Tastenkombinationen verwenden oder Makros erstellen. Es ist daher wichtig, dass Sie auf jeden Teil Ihrer App leicht zugreifen können.
Mithilfe von Skizzen (hier für die LePost-iPhone-App dargestellt) können Sie verschiedene Ideen schnell durchlaufen.
Für die Zeitungs-App von Le Monde war die Navigation eines der größten Probleme. Wie behalten Sie die lineare Struktur einer Zeitung bei und bieten dennoch schnellen Zugriff auf einzelne Seiten oder Artikel? Und wie nutzen Sie das schöne Layout einer Zeitung und bieten dennoch maximale Lesbarkeit auf einer kleineren Oberfläche?
Tools wie Omnigraffle können Sie bei der Planung der Gesamtarchitektur der App unterstützen.
Erstens wussten wir, dass wir zwei Navigationsmodi anbieten wollten: einen "physischen" Modus, mit dem Sie das aktuelle Layout der Zeitung durchsuchen können, und einen "Text" -Modus, der nur den Inhalt des Artikels enthält. Die Herausforderung bestand darin, den Wechsel zwischen den Modi zu erleichtern.
Unsere Lösung bestand darin, eine räumliche Beziehung zwischen jedem Modus herzustellen.
Unsere Lösung bestand darin, eine räumliche Beziehung zwischen jedem Modus herzustellen. In der iPhone-App ist beispielsweise jeder Modus auf parallelen oberen und unteren Spuren vorhanden, und beim Wechsel von einem zum anderen wird eine vertikale Gleitanimation ausgelöst. Dadurch wird sichergestellt, dass das mentale Modell des Benutzers mit der Architektur der App übereinstimmt. Wenn Sie die Bereiche Ihrer App einfach als eine Reihe von unzusammenhängenden Bildschirmen belassen, wird es für den Benutzer viel schwieriger, ein Gefühl dafür zu bekommen, wo sie sich befindet. Deshalb sind horizontale Folienübergänge auf dem iPhone so vorherrschend.
Ein großer Vorteil von physischen Zeitungen und Büchern gegenüber ihren digitalen Kollegen ist, dass Sie sie auf jeder beliebigen Seite öffnen können. Sie können von der Startseite aus beginnen, aber wenn Sie es vorziehen, zuerst die Sportsektion zu lesen, können Sie nichts davon abhalten. Wir wollten die gleiche Freiheit mit einer mobilen Schnittstelle wiederherstellen, also haben wir mehrere Optionen ausprobiert. Zuerst haben wir ein Inhaltsverzeichnis hinzugefügt, auf das an jeder Stelle der App zugegriffen werden kann. Es ist eine sehr schnelle Möglichkeit, zu einem bestimmten Artikel oder einer bestimmten Rubrik in der Zeitung zu springen, aber wir wussten, dass es nicht genug war. Wir wollten die gesamte Zeitung nicht auf eine trockene Liste von Artikeln reduzieren.
Der Wäscher öffnet sich
Daher haben wir für die iPad-App auch das neue Pop-Over-UI-Element von Apple in Verbindung mit einem Scrubber verwendet, um eine Seitenvorschau anzuzeigen, wenn Sie über die Seitenzeitung der Zeitung "scrubben". Um sicherzustellen, dass die physische Zeitung nie zu weit weg war, haben wir ein Navigationsfenster zum Textmodus hinzugefügt. Dieses Popup enthält eine Miniaturansicht-Version jeder Seite, mit der Sie auf einen Artikel tippen können, um darauf zuzugreifen, ohne den aktuellen Modus zu verlassen.
Die geteilte Ansicht
Der Schlüssel hier ist, all diese Funktionen aus dem Weg zu räumen, solange sie noch entdeckt werden können.
Schließlich haben wir auch eine weitere Apple UI-Innovation genutzt, die Split-Ansicht. Im Querformat können Sie den linken Bereich verwenden, um beim Lesen im rechten Bereich durch das Inhaltsverzeichnis zu navigieren. Bei so vielen verschiedenen Navigationsmodi besteht die Gefahr, dass Ihre App aufgebläht und unbrauchbar wird. Der Schlüssel hier ist, all diese Funktionen aus dem Weg zu räumen, solange sie noch entdeckt werden können. Eine gute Technik, um dies zu erreichen, ist das Überladen vorhandener Elemente.
Bei Videoplayern wie Youtube beispielsweise zeigt die Zeitleiste Ihre Position an, fungiert aber auch als ein Wäscher, mit dem Sie diese Position steuern können. Vergleichen Sie dies mit den Tasten "Zurückspulen" und "Schnellvorlauf", mit denen Sie sich im Video bewegen können, ohne jedoch Informationen über Ihre Position zu erhalten. Wenn Sie dieses Prinzip anwenden, werden Sie, wenn der Benutzer bereit ist, natürlich die Funktion entdecken, die sich die ganze Zeit in der einfachen Ansicht versteckt hat, und der Übergang zwischen Neuankömmling und Power User wird nahtlos vonstatten gehen.
Sacha ist ein 25-jähriger Web- und Benutzeroberflächen-Designer aus Frankreich, der auch in China, der Schweiz und den USA lebte. Schauen Sie sich das Portfolio von Sacha an, bloggen Sie oder folgen Sie @SachaGreif auf Twitter.
Mobile ist derzeit eine der am schnellsten wachsenden Branchen. Jeder sieht, wie viel sich in unserem alltäglichen Umfeld geändert hat, nachdem das erste iPhone im Jahr 2007 veröffentlicht wurde. Hatte zuvor schon jemand etwas über mobile Geräte im Internet veröffentlicht? Dies sind offensichtlich Klischees, aber sie zeigen, wie schnell sich die Dinge ändern.
Kommen wir zurück ins Jahr 2010. Die erste Hälfte des Jahres brachte das iPad, das neue iPhone mit iOS 4 und die recht neue Samsung-Plattform: Bada, eine neue Version des Android-Systems und eine Reihe neuer Geräte über einen Zeitraum von sechs Monaten. Es zeigt den Schlüsselpunkt aller Mobile Connected Design: einfach überwältigende Vielfalt. Deshalb lieben wir das Handy so sehr.
Jedes Projekt muss also mit dieser sehr grundlegenden Frage beginnen: Für welche Geräte entwickeln wir??
Im Allgemeinen gibt es auf dem Markt etwa sechs Hauptsysteme, auf denen verschiedene Geräte arbeiten und für die wir derzeit entwerfen und entwickeln. Jeder von ihnen kann mit sehr unterschiedlichen Eingabemethoden arbeiten und anderen Benutzeroberflächenrichtlinien folgen. Jedes Projekt muss also mit dieser sehr grundlegenden Frage beginnen: Für welche Geräte entwickeln wir??
Es ist der erste Punkt, der den Rest bestimmt, er bestimmt die Bandbreite der Möglichkeiten und Technologien, aus denen wir später auswählen können, und zeigt uns unsere Grenzen. Auf den ersten Blick erscheint es einfach und unkompliziert, kann jedoch sehr schwer werden, wenn Sie eine Anwendung entwerfen müssen, die für viele verschiedene Geräte gedacht ist. Was ist dann wichtig? Anwendern unabhängig vom System die ähnlichsten Erfahrungen bieten oder im Gegenteil fortschrittlichere Geräte und deren Technologien nutzen?
Das nächste, was wir gleich zu Beginn berücksichtigen, ist die Anzahl der Auflösungen, die die Anwendung unterstützen muss. Die Frage nach der Auflösung klingt in letzter Zeit etwas veraltet, wenn die Mehrheit "nur" über das iPhone denkt. Aber alles geht wieder auf mobile Standards zurück - jetzt müssen Sie an iOS denken, wenn Sie an Auflösungen von 320x480, 640x960 und 1024x768 denken. Im Vergleich zu JAVA ME ist dies keine große Sache. Wenn Ihre Anwendung dort arbeiten muss, sollten Sie mindestens zwanzig verschiedene Bildschirmauflösungen und sogar mehr physische Größen unterstützen!
Die Anwendung für Allegro sollte während der jährlichen Veranstaltung des Unternehmens über Bluetooth-Geräte (bluAir) verbreitet werden. Wir mussten die Mehrheit aller derzeit auf dem polnischen Markt vorhandenen Geräte erreichen. Wir haben auch JAVA ME als plattformübergreifendes Framework gewählt, gleichzeitig mussten wir jedoch einundzwanzig verschiedene Bildschirmauflösungen unterstützen.
Meiner Meinung nach ist der Versuch, aus der Sicht des Benutzers zu denken, eine Grundregel, die für jeden UI-Entwurfsprozess und generell für jedes kommerzielle Design gilt, da das Ziel einfach ist: Benutzer müssen Ihr Design schätzen. Sie müssen definieren, was Ihre Zielgruppe ist, wer Ihre Anwendung verwenden wird, was in den Inhalten enthalten ist, die Sie bereitstellen. Antworten auf diese Fragen können Ihnen helfen, zu bestimmen, wie Sie das ursprüngliche Konzept verbessern können und was zu tun ist, damit Benutzer den gewünschten Inhalt leichter finden oder die genauen Aufgaben ausführen können.
Allegro-Anwendungsfarbschema.
Die Allegro-Bewerbung war eine ziemlich erweiterte Agenda. Es enthielt viele Informationen, die in verschiedene Kategorien gruppiert waren, die die Benutzer durch ein Ereignis führten.
Wenn Sie Ihre Benutzer kennen, können Sie auch Einschränkungen feststellen. Es ist ganz klar, dass zum Beispiel jüngere Benutzer schneller lernen und neugieriger sind. Mit diesem Markt können Sie weniger gebräuchliche oder recht innovative Navigationssysteme in Betracht ziehen. Aber für Bankanwendungen wäre ich eher konservativ und würde versuchen, über Benutzer mittleren Alters mit Sehschwäche nachzudenken, da diese Mängel in modernen Bevölkerungsgruppen dieser Altersgruppe sehr häufig sind.
Es wird deutlich, dass die Informationsarchitektur in Mobile noch mehr zählt als das Aussehen der Dinge.
Nachdem die Anforderungen und Einschränkungen festgelegt sind, zeichnen wir erste Modelle. Wir legen den Ablauf der Anwendung fest und arbeiten am Layout der Navigationselemente. Im Grunde erstellen wir also ein Skelett, das wir später aushäufen werden. Es ist die Phase, in der die Anwendung nutzbar und intuitiv werden kann oder nicht. Die Grundregel hier ist, das gesamte Interface so einfach wie möglich zu halten. Die mobilen Benutzeroberflächen müssen wirklich unkompliziert sein.
Wir testen unsere Ideen auf Papier und / oder einfache Wireframes auf Geräten und versuchen, uns ihren "mobilen Kontext" vorzustellen. Wenn die Anwendung sehr komplex ist, erstellen wir einfache HTML-Prototypen, die uns die Erfahrung vermitteln, die den Endprodukten sehr ähnlich sein kann.
Wir fangen dann auch an, über visuelle Ästhetik nachzudenken, aber um ehrlich zu sein, denke ich, dass selbst die hervorragendste Anwendung scheitern wird, wenn die Navigation nicht einfach ist. Natürlich kann das visuelle Design den Gesamteindruck einer Anwendung ändern, aber besonders bei Utility-Apps tauchen die Benutzer sehr schnell in diese Anwendungen ein. Es wird deutlich, dass die Informationsarchitektur in Mobile noch mehr zählt als das Aussehen der Dinge.
Allegro-Anwendungsnavigation.
Die Allegro-Anwendung wurde mit Direkttasten oder linken / rechten Festtasten navigiert. Da es über eine hierarchische Navigation verfügte, entschieden wir uns, Breadcrumbs zu verwenden, die den aktuellen Standort in Form von einfachen Symbolen anzeigen.
Das Grafikdesign ist sicherlich unser Lieblingsteil des gesamten Entwicklungsprozesses. Natürlich hilft visuelles Design dabei, einen guten ersten Eindruck zu erzeugen, aber wir genießen es vor allem deshalb, weil wir es lieben, wenn unsere Produkte gut aussehen. Mobiles Grafikdesign ist eine sehr junge Disziplin, daher werden wir in der Realität immer noch nach Möglichkeiten suchen. Wenn Sie mit einem erfahrenen Entwicklerteam arbeiten, ist fast nichts unmöglich, selbst auf unfreundlichen Plattformen.
Wir haben uns für Pixel-Fonts entschieden, da sie sowohl auf kleinen als auch auf großen Displays lesbar waren.
Die wichtigste Regel hierbei ist das Testen von Designs an realen Geräten. Es gibt einen großen Unterschied zwischen "Desktop" -Display und mobilem Bildschirm, und diese Unterschiede nehmen immer noch zu. Dabei geht es nicht nur um Pixeldichteunterschiede, sondern auch um Farbverschiebungen. Selbst einige moderne Smartphones unterstützen immer noch keine Farben von 16 Millionen Metern. Wenn wir also solche Geräte entwerfen, sind uns blaue Farbtöne immer bewusst.
Mit Anzeigegröße arbeiten.
Wir nehmen die Telefone und versuchen, unsere Designs zu Hause, in der nahe gelegenen Kneipe und auf der Straße bei jedem Wetter zu betrachten, insbesondere wenn es sehr sonnig oder bewölkt ist. Hier werden mobile Anwendungen eingesetzt. Wir ermitteln dann, wo Sie den Kontrast anpassen, die Schriftgröße ändern oder die Schaltflächen vergrößern. Diese Regel gilt unabhängig davon, ob Sie eine Dienstprogrammanwendung oder nur ein einfaches Spiel entwerfen. Wir testen immer zu diesem Zeitpunkt, da es später beim Codieren manchmal sehr schwierig ist, Dinge neu zu ordnen. Also machen Sie weiter und testen Sie es!
Eryk ist ein sehr erfahrener Designer aus Polen. Seine Arbeit konzentriert sich auf das Design für Webdienste und Handys. Er entwickelt intuitive und übersichtliche Benutzeroberflächen für kleine und große Anwendungen. Besuchen Sie Eryks Portfolio, werfen Sie einen Blick auf die großartige Arbeit von Mobo Studio und folgen Sie @mobostudio auf Twitter.
Accentsconagua