Infografik userinterfacedesign Design aufräumen

Die Methode der Dekonstruktion ist ein kritisches Hinterfragen und Auflösen […]

Bei der Dekonstruktion geht es um die Analyse und das Verstehen, warum ein digitales Produkt so ist wie sie ist.

Einleitung

Warum ist die App so wie sie ist? In diesem Workshop erforschen und dekonstruieren Sie ein bestehendes Produkt. Während dem Workshop setzen Sie sich mit konzeptionellen Überlegungen auseinander, machen sich ein Bild von den Nutzenden, analysieren die Inhalte, befassen sich mit der Navigation und den einzelnen User Interface Elemente, so dass Sie nach dem Workshop wissen, auf was Sie bei der Konzeption und Gestaltung einer mobilen App achten sollten. Ausserdem haben sie konkrete Vorstellungen, was Sie am bestehenden Produkt verbessern können. Los geht es!

Was Sie für den Workshop brauchen:

  • Screenshots der App.
  • Sehr hilfreich ist auch die Installation der App auf Ihrem Mobile Phone.
  • Papier und Stifte
  • Vorlage AEIOU-Methode
  • Vorlage Persona
  • Computer und Präsentationsprogramm (Powerpoint, Keynote, oder ähnliches)

Schritt 01 / Heuristische Evaluation

Partnerarbeit

  1. Lesen Sie als erstes den Beitrag zur Design-Methode Heuristische Evaluation
  2. Beantworten Sie die folgenden Fragen schriftlich:
  • Gibt es bei der Bedienung der App Überraschungen?
  • Kann eine ungewünschte Auswahl einfach rückgängig gemacht werden?
  • Befolgt die App die Plattformkonventionen?
  • Ist der Aufbau der App logisch?
  • Wie fühlt sich die Navigation an?
  • Sind Interaktion-Elemente sichtbar?

Schritt 02 / Strategie und Konzeption

Gruppenarbeit

  1. Lesen Sie den Beitrag zur A(B)EIOU-Methode
  2. Besprechen Sie in der Gruppe die folgenden Fragen.
  3. Gestalten Sie ein übersichtliches Plakat dazu.
  4. Bestimmen Sie eine Person in der Gruppe, die ihre Überlegungen dem Plenum präsentiert.

U – User

  • Wer sind die primären Nutzenden?
  • Welche primären Ziele verfolgen sie?
  • Wie unterstützt sie das digitale Produkt dabei, die Ziele zu erreichen?

A – Activities

  • Was machen die Nutzenden?
  • Welche Aktivitäten führen sie aus?
  • Was passiert vorher und nachher?

E – Environment

  • In welchem Umfeld nutzen die Personen die App?
  • Wie laut und hell ist es dort?
  • Was passiert sonst noch im Umfeld?

I – Interaction

  • Wie agieren und interagieren die Personen mit System?
  • Gibt es Schnittstellen, die angebunden sind?
  • Welche technologischen Möglichkeiten stehen zur Verfügung?

O – Objects

  • Was für Geräte werden benutzt?
  • Wie werden die Geräte benutzt?

B – Business

  • Welche (wirtschaftlichen) Ziele verfolgt die App?
  • Welche Brand-Botschaft soll das digitale Produkt transportieren?

Schritt 03 / Navigation und Content

Einzel- oder Partnerarbeit

  1. Skizzieren Sie als Wireflow die folgende Jobstorie: jtbd …
  2. Machen Sie einen Inventarliste aller vorhandenen Informationen und Funktionen
  3. Sammle Ideen, wie die vorliegenden Informationen auch noch dargestellt werden könnten?
  4. Beantworten Sie die folgenden Fragen
  • Welche Gestaltgesetze werden angewendet?
  • Gibt es weiter Gestaltungsmittel, wie z.B. Bewegung und Sound, die eingesetzt werden könnten?
  • Werden minimale Accessibility Vorgaben eingehalten?

Schritt 4 / Design-Baukasten

Einzelarbeit

Nach den vielen theoretischen Überlegungen wird es nun konkret. Ausgestattet mit Papier, Schere und Leimstift geht es an die Aufräumarbeit

  1. Nehmen Sie die ausgedruckten Screenshots und schneiden Sie möglichst alle einzelnen User Interface Element aus.
  2. Gruppieren Sie diese Elemente in die Kategorien Schriften, Farben, Icons, Bilder, Grafiken
  3. Arrangieren Sie mit den User Interface eine Bild
  4. Kleben Sie die einzelnen Elemente auf.
  5. Vergleichen Sie Ihr Werk mit dem ihrer Kommilitonen
  6. Beantworten Sie die folgenden Fragen
  • Welche Farben und Farbharmonien werden eingesetzt?
  • Welche Schriften wird verwendet?
  • Passen die Icons zur Schrift?
  • Sind die Icons einheitlich?
  • Entspricht das visuelle Erlebnis der Marke?

Schritt 5 / Design Research

Plenum

Jetzt ist es Zeit, dass Sie sich einmal anschauen, was und wie es die Anderen machen. Lassen Sie sich dazu von den folgenden Screen-Shoots inspirieren.

  1. Betrachten Sie die folgenden Screen-Shots. Alle zeigen den gleichen Inhalt, nämlich das Wetter in Honolulu zum selben Zeitpunkt.
  2. Machen Sie sich Gedanken zu den folgenden Fragen und diskutieren Sie diese anschliessend in der Gruppe:
  • Welche Apps ragen positiv oder negativ heraus? Warum?
  • Welche zentralen User Interface Elemente machen den Brand aus?
  • Welche gängigen Muster (Design-Pattern) gibt es?

Schritt 6 / Paper-Prototyping

Einzelarbeit

Nach all den Analysen und Recherchen geht es im fünften Schritt um die Optimierung der App. Jetzt schaffen Sie die Architektur für eine tolle User Experience. Sie erstellen einen Papier-Prototypen. Dazu brauchen Sie natürlich Papier, Stifte und ein klare Vorstellung der Persona, für die Sie die App konzipieren.

  • Lernen Sie die Persona kennen und machen Sie sich vertraut mit ihr.
  • Skizzieren Sie auf Basis der Jobstorie die einzelnen Screens im Massstab 1:1. Beachten Sie dabei die Herstellerrichtlinien und wenden Sie die Gestaltgesetze an.
  • Überlegen Sie bereits jetzt, wie Sie bei der Präsentation Ihre Gestaltung argumentieren werden. Z.B der Einsatz von Design-Pattern oder die Darstellung von Inhalten, etc.
  • Bereiten Sie sich auf eine kurze Präsentation Ihres Papier-Prototypen vor.

Schritt 7 / Design Präsentation

Einzelarbeit

Nach all der Arbeit haben Sie ein Würdigung Ihrer Leistung verdient.

  1. Präsentieren Sie Ihren Papier-Prototypen und das Design Progress Board. Dazu haben Sie maximal 3 Minuten Zeit.
  2. Sind Sie fertig?
  3. Die Bühne gehört Ihnen.