- Lerne die Standardpraktiken für Benutzeroberflächen kennen
- Erstelle einen Prototyp deiner App auf Papier
- Hol dir Nutzerfeedback mit deinem Prototyp
Das sind die Aktivitäten für diese Lektion:
PROTOTYPING
Jetzt, wo du eine Idee für dein Minimum Viable Producthast, ist es an der Zeit, darüber nachzudenken, wie dein Projekt aussehen soll, und einige Ideen zu skizzieren.
A Prototyp ist ein frühes Modell von etwas.
App-Entwickler/innen erstellen in der Regel einen Prototyp ihrer App auf Papier, bevor sie mit dem Programmieren beginnen.
Ein Papierprototyp ist eine handgezeichnete Darstellung, wie die Benutzeroberfläche deiner App aussehen wird. Er enthält in der Regel Zeichnungen der einzelnen Bildschirme deiner App, die die verschiedenen Zustände darstellen.
WARUM PROTOTYPE?
- Du kannst deine Ideen schnell visuell vermitteln.
- Es ist gemeinschaftlich!
- Wenn du auf dem Papier arbeitest, ist es lockerer und die Gespräche entstehen aus dem Experimentieren heraus.
- Es ist preiswert!
- Du musst nicht viel Zeit und Geld ausgeben
- Du brauchst keinen Zugang zu einem Computer oder dem Internet.
- Für diesen Teil des Prozesses musst du kein technischer Experte sein.
- Du kannst sehen, wie deine Nutzerinnen und Nutzer auf deinen Prototyp reagieren, um schnell zu lernen, was in deinem Entwurf funktionieren könnte und was nicht.
- Designentscheidungen können bestätigt werden, bevor du Zeit in die Entwicklung und Programmierung deiner App investierst.
In diesem Video erfährst du, wie andere Technovation Girls Teams Papier- und digitale Prototypen erstellt haben!
Mentor Tipp
Beste Praktiken: Wenn du Schüler/innen mit Papier- und Kartonprototypen bekannt machst, solltest du betonen, wie wichtig es ist, mit einfachen, kostengünstigen Modellen zu beginnen, um Ideen zu testen. Zum Beispiel: "Prototypen aus Papier und Pappe sind wie grobe Entwürfe für dein Design. Sie helfen dir zu sehen, wie deine Idee aussieht und funktioniert, bevor du eine endgültige Version erstellst. Mit diesen einfachen Modellen kannst du schnell Änderungen vornehmen und herausfinden, was am besten funktioniert."
Der Papierprototyp kann verwendet werden, um Feedback von potenziellen Nutzern (z. B. Familienmitgliedern, anderen Mentoren, Freunden, Gemeindemitgliedern usw.) einzuholen. Dieses Feedback kann Teil des Feedbacks sein, das in den endgültigen Einreichungsunterlagen enthalten ist.
Die folgenden Videos zeigen ein Beispiel für ein Prototyping-Projekt mit zugehöriger Hardware (links) und den Prozess des Testens mit einem Papierprototypen (rechts).
Leitfragen, die du den Schülern stellen kannst:
Warum ist es sinnvoll, einen einfachen Prototyp aus Papier oder Pappe zu erstellen, bevor man ein endgültiges Produkt herstellt?
Wie kann ein Modell aus Papier oder Pappe dir helfen, deinen Entwurf zu verbessern?
Was kannst du durch das Testen eines Papierprototyps lernen, was du sonst nicht wüsstest?
Mentorentipps werden durch die Unterstützung von AmeriCorps bereitgestellt.
PROTOTYP-ELEMENTE
Behalte diese Dinge im Hinterkopf, wenn du mit deinem Papierprototyp beginnst. Bewege den Mauszeiger über jede Karte, um mehr zu erfahren.
Benutzer
Benutzer
Gerätetypen
Gerätetypen
Telefon oder Tablet?
Zugänglichkeit
Zugänglichkeit
Konsistenz
Konsistenz
BENUTZERINTERFACE
Bei der Erstellung deines Prototyps geht es darum, wie der Nutzer mit deiner App interagiert. Der Begriff dafür ist die Benutzeroberfläche oder UI. Sie umfasst alle Elemente wie Schaltflächen, Textfelder und Schieberegler, mit denen der Nutzer deine App nutzen kann.
Ein anderer Begriff für die Gestaltung digitaler Produkte ist User Experience oder UX. Beide Begriffe werden im Folgenden erklärt.
Benutzeroberfläche
Wie die Nutzer mit deiner App interagieren. Dazu gehören alle Elemente wie Schaltflächen, Textfelder und Schieberegler, die es dem Nutzer ermöglichen, deine App zu nutzen.
Beim UI-Design geht es darum, dass deine App optisch ansprechend, intuitiv und einfach zu bedienen ist.
Benutzererfahrung
Wie die Nutzer deine App erleben. Dazu gehört auch die Benutzeroberfläche, aber es geht mehr um die Emotionen, Einstellungen und das Verhalten der Nutzer/innen.
Beim UX-Design geht es um die Bedürfnisse und Ziele der Nutzer/innen und darum, ihr Gesamterlebnis zu verbessern.
FUNKTIONEN DER BENUTZEROBERFLÄCHE
Im Folgenden sind einige der wichtigsten Bestandteile einer Benutzeroberfläche für eine mobile App aufgeführt
NAVIGATION
Die Navigation ist die Art und Weise, wie die Nutzer das finden, was sie in einer App suchen. Hier sind ein paar Beispiele für Navigationsoptionen.
BEHÄLTER
Diese Komponenten ermöglichen es dir, Inhalte zu gruppieren. Sie helfen dabei, Teile des Bildschirms anzuordnen und Teile ein- und auszublenden.
INPUT
Eingabekomponenten ermöglichen es dem Nutzer, Informationen in die App einzugeben. Hier sind ein paar Beispiele.
INFORMATIONEN
Diese Komponenten ermöglichen es der App, Informationen mit den Nutzern zu teilen.
STANDARDELEMENTE VERWENDEN
Vielleicht möchtest du, dass deine App anders aussieht, um dich von deinen Mitbewerbern abzuheben. Wenn du jedoch die Standardelemente verwendest, können deine Nutzer/innen schneller verstehen, wie sie deine App nutzen können.
Die meisten Nutzer sind zum Beispiel mit einem Dropdown-Menü vertraut. Du könntest eine neue Art von Menü entwerfen, aber das könnte für die Nutzer verwirrend sein. Bleib bei den bekannten Komponenten, um es deinen Nutzern leicht zu machen.
STOP & TRY
- Lade jetzt eine neue App aus dem App Store herunter.
- Wenn du Inspiration brauchst, probiere AllTrails (iOS oder Android) oder Blinkist (iOS oder Android)
- Welche der oben genannten Komponenten verwendet sie?
- Versuche, die App etwa 5 Minuten lang zu benutzen.
- Wie lange hat es gedauert, bis du herausgefunden hast, wie man es benutzt?
Schau dir dieses kurze Video mit Melissa Powel und Mariam Shaikh von Google zum Thema Skizzieren und Papier-Prototyping an
AKTIVITÄT 1: PAPIER-PROTOTYP
Skizziere die Bildschirme für deine App
- Wie werden die Nutzer von Bildschirm zu Bildschirm navigieren?
- Wie werden sie die für die App benötigten Informationen eingeben?
- Wie werden die Informationen angezeigt?
- Wie wird es ästhetisch ansprechend gestaltet?
- Denke über Farbschema, Schriftart und Logo nach
FEEDBACK ERHALTEN
Jetzt, wo du etwas Physisches hast, das deine Lösung repräsentiert, ist es an der Zeit, Nutzerfeedback einzuholen!
Potenzielle Nutzer müssen es ausprobieren und dir ein paar ehrliches Feedback geben.
Was willst du aus den Tests mit den Nutzern lernen?
Eine Methode:
- Gib den Nutzerinnen und Nutzern eine Reihe von Aufgaben, die sie mit deiner App erledigen sollen, und prüfe, ob sie das ohne dein Zutun tun können.
- Ein Teammitglied kann als "Computer" fungieren
- ändert Bildschirme oder Teile von Bildschirmen basierend auf den Benutzerinteraktionen
- Ein anderes Teammitglied ist der Protokollant
- schreibt auf, was der Benutzer tut und seine Kommentare und Reaktionen.
- Wenn du die Erlaubnis hast, kannst du die Prüfung auch aufzeichnen.
Denk daran, dass deine Tester/innen dir helfen sollen! Beurteile sie nicht und greife nicht in ihre Interaktionen ein (abgesehen davon, dass der "Computer" den Prototyp auf der Grundlage von Aktionen beantwortet/aktualisiert).
Nimm ihr Feedback einfach mit Wertschätzung entgegen.
Hier ist ein tolles Beispiel für einen Nutzertest für eine Fahrradwerkstatt-App.
AKTIVITÄT 2: FEEDBACK ERHALTEN
Teste deinen Papierprototyp mit 2-3 Nutzern
- Zeige den Prototyp den Nutzern.
- Bitte die Nutzer/innen, eine Aufgabe mit dem Prototyp zu erledigen.
- Lass sie versuchen, die Aufgabe ohne Hilfe zu erledigen.
- Ein Teammitglied kann als "Computer" fungieren und auf seine Aktionen reagieren.
- Ein weiteres Teammitglied (oder zwei) macht sich Notizen darüber, was die Nutzer/innen tun, ihre Kommentare und Reaktionen.
REFLEXION
Wir empfehlen dir, deinen Prototyp auf Papier zu speichern. Du wirst ihn im Laufe der Entwicklung deines Projekts immer wieder brauchen. Du solltest auch Fotos von deinem Prototyp machen.
ÜBERPRÜFUNG DER SCHLÜSSELBEGRIFFE
- Prototyp - ein frühes Modell eines Produkts
- Papier-Prototyp - eine handgezeichnete Darstellung dessen, wie deine App aussehen wird
- Benutzeroberfläche (UI) - Wie der Nutzer mit einer mobilen App interagiert
- Benutzererfahrung (UX) - wie der Nutzer eine mobile App empfindet, bevor, während und nachdem er sie nutzt
ZUSÄTZLICHE RESSOURCEN
Obwohl Papier die bevorzugte Methode für das Prototyping ist, vor allem im ersten Schritt, kannst du auch digitale Tools für den Prototypen deiner App verwenden.
Viele Tools sind kostenpflichtig, aber meistens gibt es eine kostenlose Version, die du mit eingeschränkten Funktionen oder Projekten nutzen kannst. Hier sind ein paar Möglichkeiten.
- Google Folien (einfach und kostenlos!)
- InvisionApp
- Figma
- POP von Marvel
