Lektion 2: Mobile Design Flashcards
Design Patterns
Bei Design Patterns handelt es sich um Musterlayouts, die App-Designer zur Gestaltung wiederkehrender Probleme, Abläufe und Prozesse nutzen können.
Onboarding
Der Begriff Onboarding stammt ursprünglich aus dem Personalmanagement und meint die Einarbeitung neuer Mitarbeiter. Bei Apps ist damit die grafische Einführung der Benutzer in die wichtigsten Funktionen und Möglichkeiten direkt nach dem Start der App gemeint.
Insgesamt bietet die Verwendung von Design Patterns welche Vorteile?
- Ressourceneinsparungen: Lösungen können wiederverwendet und ggf. angepasst werden, anstatt sie komplett neu zu entwickeln. Das betrifft nicht nur das Design, sondern auch den Code, da dieser von den Programmierern wiederverwendet werden kann. Darüber hinaus können Prototypen schneller entwickelt werden und es bleibt mehr Zeit für die Lösung anderer Probleme.
- reduziertes Risiko: Design Patterns entstehen, nachdem eine Lösung von vielen ausprobiert und getestet wurde, sodass es wahrscheinlicher ist, dass sie mit weniger Fehlern als gewöhnlich zu einem guten Ergebnis führen.
- Vertrautheit: Design Patterns ermöglichen ein gemeinsames Vokabular und verbessern dadurch die Kommunikation zwischen Designern und Entwicklern und verringern Barrieren zwischen Gruppen in der Organisation. Auch die Benutzer kennen die Lösungen und verstehen auf Anhieb die Funktionsweisen der Elemente.
- verbesserte User Experience: Design Patterns sorgen für eine konsistente Benutzeroberfläche, die für die Benutzer vorhersagbarer und verständlicher ist.
Corporate Design Manual
In einem Corporate Design Manual werden die Gestaltungsrichtlinien einer ganzen Marke, eines Unternehmens oder einer Organisation für die interne und externe Kommunikation definiert.
Code-Snippet
Ein Code-Snippet (deutsch: Code-Schnipsel) ist ein kleiner Teil Quellcode, der von Programmierern kopiert und für gleiche oder ähnliche Zwecke wiederverwendet werden kann.
Welche Menüstrukturen gibt es in Apps?
- Baumstruktur
- Tab-Bar-Navigation
- Blatt-für-Blatt-Navigation
- Grid-Navigation
- Hub-and-Spoke-Navigation
- Dashboard
- Sidebar-Navigation
Flat Page
Eine Flat Page besteht aus minimalistischen, zweidimensionalen Gestaltungselementen und verzichtet auf Effekte wie Texturen und Verläufe.
Bei der Auswahl einer Typografie muss man bestimmte Faktoren beachten. Liegt beispielsweise ein Corporate Design Guide vor, so muss sich der Designer an die darin enthaltenen Vorgaben zur Typografie halten. Wenn der Guide sorgfältig erstellt wurde, dann gibt es darin auch Vorgaben für den Web-Bereich, an denen man sich orientieren kann. Gibt es diese Vorgaben nicht, so gibt es einige andere Kriterien, die man bei der Auswahl der Typografie für eine App beachten sollte:
- Zielgruppe, Look & Feel und Usability,
- Anzahl der Schriftschnitte und Schriftmischung,
- Schriftgröße, Laufweite, Anzahl der Buchstaben pro Zeile und Zeilenabstand,
- Schriftfarbe und Hintergrund,
- funktionale Texte.
Die Entwicklung einer gelungenen mobilen User Experience erfordert es, viele Interaktionsmuster zu überdenken, die beim Desktop-Design selbstverständlich sind. Das liegt im Kern an den mobile-spezifischen Gegebenheiten, wie z. B. den kleineren Bildschirmen, der Touch-Bedienung, anderen Gerätefunktionen, vielen verschiedenen Umgebungsbedingungen und möglichen Einschränkungen bei der Konnektivität. Einige Schlüsselkomponenten der mobilen User Experience, die das Benutzererlebnis prägen und bei denen andere Richtlinien bei der Gestaltung beachtet werden müssen, sind:
- Informationsarchitektur,
- visuelles Design,
- Funktionalität,
- Usability,
- Inhalte und
- Interaction Design.
Bei der Gestaltung der Informationsarchitektur sollte man bei mobilen Anwendungen einige grundlegende Dinge beachten. Nenne sie.
- kurze Wege und flache Strukturen: Die Navigation bei mobilen Anwendungen sollte so gestaltet werden, dass die wichtigsten Funktionen und Inhalte mit wenigen Klicks erreichbar sind. Gerade bei mobilen Anwendungen sollte man auf eine tiefe Navigationsstruktur verzichten.
- Größe der Navigationselemente: Navigationselemente müssen ausreichend groß sein, damit sie auch auf einem kleinen Touch-Display funktionieren. Beispielsweise werden Touch-Geräte vorwiegend mit Zeigefinger oder Daumen bedient.
- Navigationshinweise: Von Webseiten kennt man das sogenannte Breadcrumb-Menü, das zur schnelleren Navigation und Orientierung häufig bei umfangreichen Sites eingesetzt wird. Auf mobilen Geräten funktioniert dieses aufgrund der geringen Displayfläche nicht.
- Beschriftungen: Insbesondere auf kleinen Displays ist es wichtig, präzise und konsistente Beschriftungen für Navigationselemente und Links zu verwenden.
Das visuelle Design bezieht sich insbesondere auf die visuelle Präsentation der Inhalte, also z. B. auf das Grafikdesign, das Branding und das Layout. Bei der visuellen Gestaltung für mobile Geräte sollte man Folgendes beachten:
- mobile-gerechte Gestaltung: Gemäß dem Motto „Mobilize, don’t Miniaturize“ (Ballard 2007, S. 70) geht es darum, dass man nicht einfach das Design einer Desktop-Anwendung übernimmt und skaliert, sondern das Design an die mobile-spezifischen Gegebenheiten anpasst.
- Übersichtlichkeit: Gerade bei kleinen Displays ist es umso wichtiger, dass Informationen schnell und einfach durch das visuelle Design vermittelt werden.
- Displayformate: Viele mobile Endgeräte unterstützen mehrere Ausrichtungen, wie z. B. Hoch- und Querformat. Dieser Aspekt muss bei der Gestaltung beachtet werden, da sich die Ausrichtung auch auf die Anzeige von Funktionen, wie etwa der Navigation, auswirkt.
Die Funktionalität bezieht sich auf Tools und Funktionen, mit denen Benutzer Aufgaben erledigen, um ihre Ziele zu erreichen. Bei der Gestaltung von Funktionalitäten sollte man die folgenden Richtlinien beachten:
- primäre Kernfunktionalitäten als Ausgangspunkt: Insbesondere, wenn es darum geht, eine Desktop-Anwendung auf einem Smartphone abzubilden, ist die Versuchung oft groß, das Desktop-Erlebnis eins zu eins auf das mobile Gerät zu übertragen. Das ist allerdings ein großer Fehler, da sich nicht nur die Endgeräte teilweise extrem unterscheiden (z. B. Displaygröße, Hardwarekomponenten, Leistung, Ein- und Ausgabegeräte), sondern auch die Nutzungskontexte (z. B. Umgebungen, Ziele, Aufgaben). Vielmehr sollte man sich hier auf primäre Funktionalitäten konzentrieren, diese zum Ausgangspunkt der Gestaltung machen und darauf aufbauen
- Hardwarekomponenten nutzen: Mobile Geräte, wie z. B. Smartphones, verfügen über verschiedene Sensoren und Aktoren. Diese sollte man bei der Gestaltung von Funktionen nutzen, um die Benutzer zu motivieren und zu begeistern. Beispielsweise könnte man bei einer Shopping-App die Bilderkennung folgendermaßen einsetzen: Wenn der Benutzer anhand der App das Logo in einer der Filialen fotografiert, dann bekommt er einen Rabatt.
- mobile-Optimierung: Es sollte immer sichergestellt, d. h. getestet werden, dass Funktionen und Inhalte für Mobilgeräte optimiert sind. Beispielsweise sollte ein Filialfinder auch wirklich die nächstgelegenen Filialen, basierend auf dem Standort des Geräts, anzeigen.
- plattformübergreifende Funktionen: Wichtige Funktionen sollten auf allen Plattformen zur Verfügung stehen und ggf. auch verknüpft sein. Beispielsweise sollten Benutzer einer Shopping-App auch ihren aktuellen Warenkorb über die Webseite auf einem Desktop-Computer einsehen können.
Die Usability ist das Gesamtmaß dafür, wie gut Informationsarchitektur, Design, Inhalt und andere Elemente zusammenarbeiten, damit Benutzer ihre Ziele erreichen können. Neben den allgemeinen Usability-Richtlinien gilt es bei der Gestaltung mobiler Anwendungen zusätzlich die folgenden Richtlinien zu beachten:
- Affordance : Insbesondere auf Touchscreen-Geräten muss dem Benutzer immer klar sein, was ausgewählt, getippt oder gewischt werden kann. In verschiedenen Usability-Studien mit dem iPad konnte beispielsweise festgestellt werden, dass Benutzer häufig nicht erkennen, was überhaupt berührbar oder tippbar ist
- eindeutige Gesten: Gesten müssen eindeutig sein. Beispielsweise führt es zu Verwirrungen, wenn dieselbe Wischgeste in verschiedenen Bereichen eines Screens unterschiedliche Bedeutungen hat
- Größe, Abstände und Erreichbarkeit von Schaltflächen: Um Auswahlfehler zu vermeiden, müssen die Schaltflächen die richtige Größe und den richtigen Abstand haben. Darüber hinaus muss die Erreichbarkeit der verschiedenen Bildschirmbereiche bei der Platzierung von Schaltflächen beachtet werden.
- Plattformspezifische Konventionen: Um die Lernkurve für Benutzer gering zu halten und das mobile Erlebnis intuitiver zu gestalten, sollte man bei der Gestaltung den plattformspezifischen Standards, Konventionen und Richtlinien folgen und, wo möglich, die entsprechenden Designpatterns verwenden.
- Umgebungsbedingungen: Die Usability muss unter verschiedensten Umgebungsbedingungen sichergestellt werden. Beispielsweise können Lichtbedingungen (Tag/Nacht) oder unterschiedliche Betrachtungs- oder Ausrichtungswinkel (Hoch-/Querformat) einen Einfluss auf die Usability haben und sich daraus spezifische Anforderungen an Designelemente wie Kontrast, Farbe oder Typografie ergeben.
Der eigentliche Kern einer jeden Anwendung ist der Inhalt. Dabei kann es sich um verschiedene Arten von Material in verschiedenen Formaten, wie z. B. Text, Bilder oder Videos, handeln. Der Inhalt dient in den meisten Fällen dazu, Informationen für die Benutzer bereitzustellen oder ihn zu unterhalten. Hier spielt insbesondere auch die Nutzungssituation eine wesentliche Rolle, wobei es Folgendes zu beachten gilt:
- Unterhaltung: Mobile Geräte werden häufig zum Zeitvertreib eingesetzt. Dabei kann es sich einerseits um kurze Momente handeln, wie beim Warten auf den nächsten Bus. Hier werden z. B. Statusmeldungen in sozialen Netzwerken gelesen und gepostet oder Chat-Nachrichten gesendet. Andererseits können das auch länger andauernde Situationen sein, in denen beispielsweise häufig Spiele gespielt oder Videos geschaut werden. Bei diesen Apps sollten der Spaß und Unterhaltungswert klar im Vordergrund stehen
- Aufgabenerfüllung und Informationsbeschaffung: Apps, bei denen es darum geht, möglichst schnell bestimmte Aufgaben zu erledigen oder an konkrete Informationen zu kommen, werden häufig auch in stressigen Situationen benutzt – beispielsweise, wenn man unterwegs schnell seinen Kontostand überprüfen, einen Kalendereintrag tätigen, nach einem Hotel in der Nähe suchen oder etwas der Einkaufsliste hinzufügen möchte. Bei derartigen Apps ist es umso wichtiger, dass sich die Aufgaben auch in stressigen Situationen schnell mit wenigen Klicks erledigen lassen bzw. die Benutzer an ihre gewünschten Informationen kommen.
- Kontrolle über Multimediainhalte: Unabhängig von der Nutzungssituation sollten die Benutzer immer die Kontrolle über die Steuerung von Multimediainhalten haben. Beispielsweise sollten Video und Ton nicht automatisch starten, da das z. B. im beruflichen Kontext zu peinlichen Situationen führen kann. Es muss aber auch möglich sein, das Laden von Multimediainhalten zu stoppen, beispielsweise, wenn nicht genügend Bandbreite zur Verfügung steht
- mobile-optimierte Inhalte: Es muss immer sichergestellt werden, dass die Inhalte und verwendeten Dateiformate auch für mobile Endgeräte optimiert sind. Beispielsweise gibt es immer noch Webseiten, die Adobe Flash-Inhalte nutzen, welche sich auf vielen mobilen Geräten nicht mehr darstellen lassen
Cookies
Ein Cookie ist eine Textinformation, die beim Aufrufen einer Webseite im Browser gespeichert werden kann. Bei einem erneuten Besuch der Webseite können diese Informationen direkt ausgelesen werden. Damit lassen sich z. B. Login-Daten, Adressdaten oder der Inhalt eines Warenkorbs abspeichern.
