Design im Browser als Ausgangspunkt
Kostenloses App-Design online erkunden, Bildschirm für Bildschirm
Eine Webseite kann ein praktischer Ausgangspunkt für App-Design sein: Beschreiben Sie eine Aufgabe, skizzieren Sie die benötigten Bildschirme und prüfen Sie eine visuelle Richtung, bevor Sie sich auf einen umfangreicheren Arbeitsablauf festlegen. Beginnen Sie mit einer kleinen Aufgabenbeschreibung, die Sie beurteilen können, statt gleich ein ganzes Produkt festlegen zu wollen.
Drei Wege, ein App-Konzept zu entwickeln
Der Zugang über den Browser ist nur der Ausgangspunkt. Entscheidend ist, was ein Bildschirm vermitteln muss, wie sich jemand durch ihn bewegt und was passieren soll, wenn bei einer Aufgabe etwas schiefgeht.
- App-Design-Software Vergleichen Sie die Funktionen, die bei der Wahl zwischen einem browserbasierten Arbeitsablauf und anderer Designsoftware wichtig sind.
- Kostenloses App-Design-Tool Erfahren Sie, wie Sie aus einer kurzen Bildschirmbeschreibung eine Designrichtung entwickeln, die Sie beurteilen können.
- Wie man die Benutzeroberfläche für eine App gestaltet Folgen Sie einer praktischen Schrittfolge, um Bedienelemente, Inhalte und Rückmeldungen auf einem Bildschirm anzuordnen.
Schritt für Schritt von der Aufgabe zum Bildschirm
Halten Sie den ersten Entwurf überschaubar genug, um ihn kritisch zu prüfen. Eine vollständig abgebildete Nutzeraufgabe verrät mehr über eine Benutzeroberfläche als eine Sammlung unverbundener, ausgefeilter Bildschirme.
-
1
Beschreiben Sie die Nutzeraufgabe
Benennen Sie die Person, ihr unmittelbares Ziel und die Entscheidung, bei der der Bildschirm helfen soll. Legen Sie bei einer Terminbuchung fest, ob die Person eine Dienstleistung auswählt, eine Uhrzeit festlegt oder eine Buchung bestätigt. Davon hängt ab, welche Informationen auf den Bildschirm gehören.
-
2
Ordnen Sie das Wesentliche an
Platzieren Sie die wichtigste Schaltfläche so, dass ihr Zweck klar ist, gruppieren Sie zusammengehörige Optionen und geben Sie wichtigen Beschriftungen genug Raum, um verständlich zu sein. Berücksichtigen Sie in der Aufgabenbeschreibung auch einen leeren Zustand oder einen Fehlerzustand, damit das Layout nicht nur im Idealfall funktioniert.
-
3
Prüfen Sie den nächsten Schritt
Betrachten Sie den Bildschirm mit den Augen einer Person, die ihn zum ersten Mal sieht. Prüfen Sie, was ihr zuerst auffällt, was sie ändern kann und woran sie erkennt, dass eine Aktion erfolgreich war. Überarbeiten Sie die Aufgabenbeschreibung, wenn die Antwort eine Erklärung außerhalb der Benutzeroberfläche erfordert.
Kennen Sie die Grenzen eines browserbasierten Ansatzes
Der Ausdruck „online“ beschreibt, wo Sie beginnen, nicht sämtliche Funktionen, die Sie benötigen werden. Nutzen Sie den Vergleich, um frühe Designarbeit von den Anforderungen eines ausgereiften Produktprozesses zu unterscheiden.
| Erste Entwürfe im Browser | Vollständiger Produktdesignprozess | |
|---|---|---|
| Bester Ausgangspunkt | Eine klar umrissene Aufgabe für Nutzende und eine erste Richtung für den Bildschirm. | Ein definierter Produktumfang, Nutzerforschung und ein abgestimmter Umsetzungsplan. |
| Detaillierungsgrad | Genug Struktur, um Inhalte, Hierarchie und Aktionen zu besprechen. | Definierte Zustände, wiederverwendbare Muster und Details für die Umsetzung. |
| Navigation | Ein einfacher Weg durch die Aufgabe kann fehlende Schritte aufdecken. | Umfassendere Abläufe müssen Einstiegspunkte, Rückwege und Ausnahmen berücksichtigen. |
| Barrierefreiheit | Prüfen Sie, ob Beschriftungen lesbar, Aktionen eindeutig und Fehlermeldungen verständlich sind. | Testen Sie die Interaktion und das Verhalten mit assistiven Technologien und dokumentieren Sie die Anforderungen. |
| Validierung | Prüfen Sie, ob das Konzept für die vorgesehene Zielgruppe verständlich ist. | Beobachten Sie Menschen beim Erledigen von Aufgaben und überarbeiten Sie den Entwurf anhand der Erkenntnisse. |
| Übergabe | Halten Sie Entscheidungen und offene Fragen zusammen mit dem Konzept fest. | Stimmen Sie Spezifikationen und Verhalten mit den Personen ab, die das Produkt entwickeln. |
Arbeiten Sie mit einem Bildschirm weiter, den Sie bewerten können
Für kostenloses App-Design online ist eine erste Aufgabenbeschreibung am hilfreichsten, die eine Aufgabe, die dafür benötigten Informationen und die Reaktion auf eine fehlgeschlagene Aktion benennt. Nehmen Sie diese Beschreibung mit in den Browser-Workflow und prüfen Sie anschließend, ob der entstandene Entwurf diese Anforderungen erfüllt. Verfügbare Funktionen und Zugangsbedingungen hängen vom jeweiligen Zielangebot ab.
Geben Sie Ihrem ersten Bildschirm einen klaren Zweck
- Konzentrieren Sie sich auf eine Aufgabe für Nutzende.
- Füge einen erfolgreichen Pfad und einen Fehlerzustand hinzu.
- Überprüfe das Ergebnis, bevor du den Ablauf erweiterst.
Fragen zum App-Design online
Ein browserorientierter Workflow bietet eine Möglichkeit, mit der Planung einer Benutzeroberfläche zu beginnen, ohne eine Desktop-Installation zum ersten Schritt zu machen. Beschreibe zunächst eine Benutzeraufgabe und den Bildschirm, der sie unterstützen soll. Prüfe beim jeweiligen Ziel die aktuellen Funktionen und Zugangsanforderungen.
Nein. Eine Suchphrase legt weder die Bedingungen des jeweiligen Ziels noch fest, welche Funktionen auf den einzelnen Zugriffsebenen verfügbar sind. Prüfe die aktuellen Bedingungen, bevor du dich für dein Projekt auf eine bestimmte Funktion verlässt.
Notiere, für wen der Bildschirm gedacht ist, was diese Person tun muss und welche Informationen sie für eine Entscheidung benötigt. Ergänze die primäre Aktion und mindestens eine Situation, in der die Aufgabe nicht wie erwartet fortgesetzt werden kann. Ein konkretes Briefing lässt sich leichter bewerten als eine Anfrage für eine vollständige App.
Ein Konzept kann helfen, Layout und Zielsetzung zu vermitteln, ist aber kein Ersatz für getestetes Verhalten und Implementierungsentscheidungen. Berücksichtige vor der Entwicklung Navigation, Fehler, Barrierefreiheit und die Zustände, die Menschen außerhalb des idealen Pfads erleben werden.