Im letzten Artikel haben wir unser 5 phasiges Vorgehensmodell zur Entwicklung von nativen Apps vorgestellt. In diesem Artikel werden nun die Phasen 2 und 3 genauer erläutert, bei denen es um die Definition des Konzepts einer mobilen Anwendung geht.

Die Informationsarchitektur – Das logisch semantische Konzept

Wie beim Bau eines Hauses ist ein durchdachter Bauplan der Schlüssel für ein ansprechendes Interface. Nachdem in Phase 1 die Stakeholder-Wünsche, die Nutzer und deren Bedürfnisse definiert und die Produktanforderungen erstellt wurden, kann der Interaction Designer oder Informationsarchitekt nun das inhaltliche Konzept der App erstellen.

  1. Schritt: Inhalte definieren

Zusammen mit den Stakeholdern muss der relevante Inhalt sowohl informell als auch funktional definiert werden. Besonders im Mobile-Bereich ist es aufgrund der kleineren Bildschirme essentiell, dass nur wirklich relevante Inhalte verwendet werden. Beispielswiese bedeutete dies bei der Umsetzung der Android App “Hannibal”:

  • Interaktionsmöglichkeiten der Hannibal-Web-Applikation, wie Sortier- oder Filterfunktionen von Graphen und Detailinformationen, wegzulassen,
  • Inhalte zusammenzufassen sowie
  • die Graphen Darstellung zu vereinfachen.

Außerdem muss darauf geachtet werden, dass die Hierarchien der Anwendung sehr flach gehalten werden. Bei der Hannibal App haben wir uns auf zwei Hierarchieebenen beschränkt. Eine Übersichtseite auf der wichtige Inhalte knapp zusammengefasst dargestellt werden, und eine Detailseite zum Abrufen genauerer Informationen.

Bei der Umsetzung von Web zu Mobile ist es hilfreich, Analyse-Tools wie Google Analytics zu nutzen und aktuelle Nutzer zu befragen, um heraus zu finden, welche Funktionen wirklich genutzt werden.

  1. Schritt: Logische Inhaltsblöcke definieren

Damit der Nutzer immer dann relevante Informationen erhält, wenn er sie benötigt, muss definiert werden, welche Inhalte miteinander in Beziehung stehen. Um solche Inhaltsblöcke zu identifizieren sind Methoden wie Card Sorting sehr hilfreich.

  1. Schritt: User Wege identifizieren

Um Inhalt an den richtigen Stellen zu platzieren, müssen die Nutzerwege bekannt sein. Hierzu muss der Informationsarchitekt herausfinden, wann und mit welchem Ziel die Nutzer Informationen abrufen und Funktionen nutzen. Besonders für mobile Anwendungen ist der Kontext, in dem die Interaktion höchstwahrscheinlich statt findet, wichtig für die Platzierung im Gesamtkonstrukt der App. Auch hierbei liefern Analyse-Tools und Nutzerbefragungen wichtige Informationen.

Die Informationsarchitektur (IA) einer Anwendung kann, bevor sie in Wireframes weiter entwickelt wird, in Form eines Diagramms dargestellt werden.

Abbildung 1: Grobe Informationsarchitektur Hannibal

 Wireframes – Das visuelle Konzept

Nun kann gesketcht werden! Auf Grundlage der IA, kann der Interaction Designer nun ein Wireframe der Anwendung erstellen. Das Wireframe stellt die IA grafisch dar und ist das abstrakte Grundgerüst der Anwendung. Zu unterscheiden sind statische und dynamische Wireframes. Mit statischen Wireframes werden Inhalte und Interaktionselemente einzelner Seiten oder Screens skizzenartig dargestellt.

Abbildung 2: Statische Wireframes aus dem Projekt Hannibal

Dynamische Wireframes sind funktionale Prototypen, in denen einzelne Seiten mit Navigationselementen interaktiv verknüpft sind. Diese sind aufwändiger und damit kostspieliger, stellen die Abläufe aber realistischer dar als statische und sind die ideale Grundlage für frühe Usability User-Tests des Konzepts.

Grundsätzlich müssen für die Erstellung von Wireframes Inhalte und Interaktionselemente ausgewählt und logisch arrangiert werden. So genannteAnwendungsfälle helfen relevanten Inhalt an der richtigen Stelle im Interaktionsweg anzubieten. Bei der Definition wann und wie Informationen präsentiert werden, sollten gängige Usability Richtlinien (ISO 9241-110, u.a.) und plattformspezifische Designvorgaben (Android Design Guidelines,iOS Human Interface Guidelines, u.a.) berücksichtigt werden.

Bei der Erstellung von Wireframes für mobile Anwendungen sind besondere Bedingungen gegeben, die es zu berücksichtigen gilt.

Variable Bildschirmgrössen

Beim Design von mobilen Anwendungen sollte zwischen Smartphone- und Tablet-Bildschirmen unterschieden werden. Tablet-Bildschirme sind größer als Smartphone-Bildschirme und somit können mehr Informationen auf einer Seite platziert werden, wohingegen die selbe Information auf einem Smartphone Display beispielsweise auf zwei Seiten verteilt werden muss. Es empfiehlt sich also zwei unterschiedliche Designkonzepte zu erstellen. Zusätzlich muss beachtet werden, dass auf mobilen Geräten die Bildschirmorientierung zwischen Portrait und Landscape gewechselt werden kann.

Touch anstatt Maus

Bei der Wahl und Anordnung von Inhaltselementen muss beachtet werden, dass mobile Geräte mit Touch und Stift bedient werden. Dadurch entfallen für die Maus gestaltete Interaktionsmöglichkeiten, wie beispielsweise “Hover Event”-Informationen. Stattdessen bieten Touch Displays neue Möglichkeiten der Interaktion mittels Gesten oder Bewegungen des Geräts. Zu berücksichtigen ist außerdem, dass Elemente mit der Maus viel zielgerichteter angeklickt werden können als mit dem Finger. Man spricht hier vom “Fat-Finger Problem”, welches durch größere Elemente und weitere Abstände zwischen Elementen verhindert werden kann.

Äußere Einflüsse

Mobile Anwendungen werden in der Regel auch häufig im mobilen Kontext verwendet. So ist es beispielsweise in einem fahrenden Auto oder durch die Lichtverhältnisse unter freiem Himmel schwieriger, kleine Elemente auszuwählen. Deshalb gilt auch in diesem Zusammenhang, Elemente ausreichend groß darzustellen. Studien haben gezeigt, dass Nutzer von mobilen Geräten meist weniger textuellen Inhalt lesen möchten, als sie es am Desktop tun. Deshalb sollten auch textuelle Inhalte auf das Wesentliche beschränkt werden.

 Fazit

Bei der Entwicklung einer IA für mobile Devices gelten generell die selben Regeln hinsichtlich Usability und UX wie bei anderen Interfaces auch. Allerdings muss klar sein, dass mobile Interfaces besondere Einschränkungen haben, die wie beschrieben berücksichtigt werden müssen.

In der nächsten Phase dient nun das fertige Wireframe der Anwendung als Konzept für Design und Entwicklung. Im folgenden Artikel werden wir näher auf Phase 5 eingehen und außerdem beschreiben, wie YMC Usability Tests (Phase 4/6) mit mobilen Anwendungen wie Hannibal durchführt.

 Welche Erfahrungen haben Sie zu diesem Thema gemacht?

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *