Entwerfen der bestmöglichen App

Dieses Thema hilft Ihnen beim Entwerfen einer App, deren Erscheinungsbild und Bedienung in die Windows- und die Windows Phone-Plattform integriert zu sein scheinen. Die Designprinzipien und Strategien in diesem und anderen Prozessthemen sind von grundlegender Bedeutung dafür, dass Ihre App aus der stetig zunehmenden Vielzahl an Apps im Store heraussticht. Die Befolgung der Prinzipien und Strategien in der Designphase erleichtert zudem das Lösen von Problemen mit der Benutzerfreundlichkeit, die beim Durchlaufen unter Umständen erkannt werden. Ein qualitativ hochwertiges Design sorgt für eine gute Benutzerfreundlichkeit und gute Kritik, die von grundlegender Bedeutung dafür sind, dass sich Ihre App im Wettbewerb von anderen abhebt.

Informationen zum Brainstorming und zur Planung finden Sie unter App-Konzeptentwicklung.

Prototypen – wichtige Aspekte des Designs

Beim Entwerfen eines Prototyps sollten Sie alle Brainstorming-Aktivitäten bündeln, die Sie bisher durchgeführt haben. In diesem Abschnitt lernen Sie, wie Sie Modelle für die Darstellung Ihrer App skizzieren und verwenden, um wichtige Designaspekte zu testen.

Hinweis  Die Erstellung eines Prototyps ist nicht nur der Qualität zuträglich, sondern spart Ihnen auch Zeit und Frust. Wenn Sie die Ratschläge in diesem Abschnitt befolgen, können Sie ein besseres App-Design in kürzerer Zeit kreieren.

Blend für Visual Studio ist hilfreich für die schnelle Erstellung realistischer Prototypen. Mit Blend können Sie Modelle skizzieren und interaktive Prototypen erzeugen. Interaktive Prototypen sind hilfreich für die App-Bereiche, in denen eine benutzerdefinierte UI, Animation oder ein Übergang erforderlich ist, damit die Erfahrung für die Benutzer verständlich ist. Diese Interaktion, die für eine App oftmals erfolgsentscheidend ist, ermöglicht den Benutzern ein „Gefühl“ während der Tests der Benutzerfreundlichkeit. Mit Blend können Sie zudem anhand von Prototypen direkt reale, funktionierende Designs erzeugen. Weitere Informationen zu Blend finden Sie auf der Startseite von Microsoft Expression.

PowerPoint Storyboarding, verfügbar in Microsoft Visual Studio 2012, ist ein weiteres Tool, das Sie für die Skizzierung verwenden können. Mit diesem Tool können Sie mithilfe einer Sammlung vordefinierter Storyboardformen ein Storyboard erstellen und vorhandene Benutzeroberflächen erfassen. Weitere Informationen dazu finden Sie unter Storyboarderstellung für eine User Story oder Anforderung mit PowerPoint.

Skizzieren von Konzepten

In diesem Abschnitt lernen Sie, wie Sie Modelle Ihrer App erstellen.

In der ersten Stufe der Prototyperstellung für Ihr Design sollten Sie mit Bleistift und Papier beginnen und dann kurzerhand zur Skizzierung am PC voranschreiten. Der Entwurf einer App für mobile Geräte unterscheidet sich von der Vorgehensweise für Desktopsoftware. Hier sind Storyboards weniger hilfreich, da diese Apps flachere Navigationshierarchien und einen engeren Umfang haben. Die Herausforderung bei mobiler UI ist die Darstellung von Vorgängen und Daten auf intuitive und dynamische Art und Weise.

Wenn Ihre App Expertenaufgaben umfasst, nehmen Sie diese einzeln in das Storyboard auf, um sicherzustellen, dass sie in möglichst wenigen (und einfachen) Schritten durchgeführt werden. Es folgen eine Reihe von Prototypskizzen einer generischen Radio-Streaming-App.

1. Skizzieren Sie die statischen Bildschirme, die die Benutzer am häufigsten anzeigen oder verwenden werden. Die folgende Abbildung zeigt beispielsweise vorläufige Zeichnungen der Radio-Streaming-App unten. Es werden Modelle des Startbildschirms, Kategorien, die Ansicht mit Interpreteninformationen und eine Liste mit Lieblingssendern gezeigt.

   

   Hauptbildschirme

2. Wenn Ihre App dem Benutzer bestimmte Übergangszustände anzeigt, skizzieren Sie deren Darstellung. Für das Beispiel bedeutet das, dass Sie beim Erstellen einer Musikplayer-App eine Ansicht der Einstellungen und Begrüßungsbildschirme zeichnen sollten.

   

   Einige Zustände

3. Skizzieren Sie wichtige Steuerelemente, die Sie anpassen können. Denken Sie darüber nach, wie Sie mithilfe von benutzerdefinierten Steuerelementen die Systematik der Bildschirme vereinfachen können. Dieses Modell zeigt detaillierte Steuerelemente für die Wiedergabe und eine spezielle Querformatansicht mit Steuerelementen.

   

   Wichtige Steuerelemente

4. Nun können Sie einige der Bildschirme als Abfolge von Schritten zum Ausführen einer Aufgabe zusammenstellen. Planen Sie die Schritte, die die Benutzer zum Abschließen wichtiger Aufgaben oder Vorgänge ausführen müssen. Zeichnen Sie der Reihe nach die statischen Bildschirme, die in die einzelnen Schritte einer Aufgabe involviert sind. Die folgende Abbildung zeigt ein Modell zur Ablaufzuordnung eines Suchvorgangs bis hin zur Anzeige von Interpreteninformationen.

   

   Allgemeine Suchaufgabe

   Zum Ausführen dieses Schritts müssen Sie zunächst alle Aufgaben auflisten, die ein Benutzer mit Ihrer App ausführen würde: z. B. nach einem Musikgenre suchen oder der Favoritenliste einen neuen Sender hinzufügen. Zeichnen Sie anschließend eine Übersicht für alle von Ihnen identifizierten Aufgaben. Diese Übersichten zeigen die Pfade durch die Bildschirme, um eine bestimmte Aufgabe auszuführen.

5. Versuchen Sie, die vollständige Beziehung zwischen statischen Bildschirmen in allen Teilen der App zu skizzieren. Gestalten Sie zusammengehörige Bildschirme so, dass sie so aussehen und funktionieren, dass der Benutzer beim Bearbeiten einer Aufgabe einen Fortschritt spürt. Die folgende Abbildung zeigt eine vollständige Informationsarchitekturübersicht einer einfachen Radiostreaming-App.

   

   Hauptübersicht

   Die Hauptübersicht unterscheidet sich von der Aufgabenübersicht. In der statischen Hauptübersicht wird der Ablauf zum Ausführen einer bestimmten Aufgabe nicht angezeigt. Stattdessen werden dort einfach alle Bildschirme und die hierarchischen Beziehungen zwischen den Bildschirmen gezeigt. Im vorherigen Beispiel können Sie sehen, dass Sie vom Startbildschirm zu den Bildschirmen mit den Favoriten, Kategorien und Suchergebnissen navigiere können.

   Nachdem Sie einige Zeichnungen an die Wand geheftet haben, beginnen Sie mit der Prototyperstellung. Öffnen Sie dazu ein neues Projekt in Blend für Visual Studio.

   Hinweis  Bei der Prototyperstellung mit Blend wird das zugehörige XAML-Markup automatisch im Hintergrund geschrieben. Dies ermöglicht Ihnen das Erstellen des Layouts und von Stilen beim Durchlaufen. Diese Artefakte weisen wahrscheinlich eine geringere Genauigkeit auf, sie liegen jedoch im selben Format vor wie die einer Produktions-App und sind damit kompatibel.

Identifizieren wichtiger Bereiche für die Prototyp- oder Modellerstellung

Für mobile Apps können kurzerhand Prototypen erstellt werden, indem Sie spezielle Schwerpunktbereiche auswählen. Generell ist es nicht notwendig, jeden Aspekt der App hochdetailliert in die Prototyperstellung einzubeziehen. Wählen Sie die wichtigsten oder schwierigsten Aspekte aus, und konzentrieren Sie die Prototyperstellung auf diese Aspekte. Normalerweise sollte ein Designer vorrangig neue Technologien oder Funktionen oder Vorgehensweisen nutzen, die vom gewöhnlichen Fachwissen des Entwicklungsteams abweichen.

Für die meisten Apps bedeutet dies, Aufgaben oder Vorgänge zu modellieren, die für den Benutzer wertvoll sind. Greifen Sie dabei auf die Zweckbestimmungen zurück, die Sie sich für Ihre App vorgestellt haben. Beziehen Sie sie gemäß ihren Vorstellungen Schritt für Schritt in die Prototyperstellung ein, und achten Sie auf die Verwendung benutzerdefinierter Steuerelemente an den Stellen, an denen sich somit Schritte reduzieren oder Vorgänge anderweitig beschleunigen lassen.

Generell müssen die App-Bildschirme bei der Übertragung einer App aus dem Internet oder einer anderen Plattform auf Windows Phone weniger Steuerelemente und Grafiken aufweisen und übersichtlich strukturiert sein. Unter Umständen müssen Aufgaben nach einer sinnvollen Systematik auch auf mehrere Bildschirme verteilt werden, wohingegen die Steuerelemente im Internet wahrscheinlich in großen Gruppen zusammen geschachtelt sind. Sie müssen erkennen, ob in Ihrer App enthaltene Grafiken, Inhalte oder Fotos hochskaliert werden müssen. Stellen Sie sicher, dass Sie bei der Prototyperstellung systemeigene Steuerelemente und möglichst wenige WebView-Steuerelemente verwenden.

Entscheiden Sie vorab, wie viele Durchläufe praktisch sind.

Festlegen der Prototypdetailstufe

Legen Sie für eine schnelle Prototyperstellung und ein schnelles Voranschreiten zur App-Erstellung fest, welche App-Elemente beim Durchlaufen oberste Priorität haben sollen. Dabei müssen Sie entscheiden, inwieweit Sie die folgenden Teile der App in die Prototyperstellung einbeziehen:

• Visuelle Detailstufe

  Wenn für die an der App Beteiligten Grafik und Darstellung oberste Priorität haben, stellen Sie sicher, dass Sie eine hochdetaillierte Serie von Zeichnungen für Features, Funktionen, Bildschirme oder Zustände erstellen. Zudem sollten Sie benutzerdefinierte Steuerelemente und die zugehörigen Zustände modellieren.

  Hinweis  Durch die Modellierung von benutzerdefinierten Steuerelemente oder Benutzersteuerelementen erhalten Sie ein XAML-Markup, das Sie bei der Erstellung der Produktionssteuerung unterstützt.

  Visuelle Detailmodelle sollten Folgendes beinhalten:

  1. Stile und Designs
  2. Begrüßungsbildschirm
  3. App-Kachel

• Funktionsdetailstufe

  Bilden Funktionen und Features das Herzstück Ihrer App? Wenn dies der Fall ist, sollten Sie einen Prototyp erstellen, der interaktiv und semifunktional ist. Beginnen Sie mit einem statischen Bildschirm oder einer Gruppe statischer Bildschirme, und erstellen Sie nacheinander Interaktionen zwischen diesen Bildschirmen. Denken Sie darüber nach, wie Sie Funktionen rationalisieren und Steuerelemente oder die Notwendigkeit von Eingaben reduzieren können.

• Inhaltsdetailstufe

  Wenn es den an der App Beteiligten in erster Linie um die Darstellung von Inhalten geht, sollten Sie entscheiden, wie Sie beim Erstellen der UI möglichst genaue Platzhalter erzeugen. Wenn es sich bei dem Inhalt um Text handelt, achten Sie beim Modellieren der Designs genau auf die Typografie. Verwenden Sie Fülltexte und keine Blöcke oder andere Abstraktionen für die Darstellung von Inhaltspositionen.

  Wenn mit der App visuelle Medien dargestellt werden sollen, sollten Sie wieder Papier und Bleistift zur Hand nehmen und wieder an der Prototyperstellung arbeiten. Zeichnen Sie detaillierte Skizzen der App-Inhalte, die deren Darstellung bei der Wiedergabe zeigen, und beziehen Sie in die Zeichnungen sowohl Querformat als auch Hochformat ein. Denken Sie daran, die Anpassung der Steuerelemente oder Änderung ihres Layouts in Erwägung zu ziehen, wenn sich die Ausrichtung ändert.

  Wenn Ihre App lokalisiert werden soll, sollten Sie sicherstellen, dass Sie ausreichend Platz für die Sprachen schaffen und dass Sie auf Globalisierungsprobleme vorbereitet sind. Es existieren weitere Referenzen, die Sie zum Verständnis von Lokalisierungs- und Globalisierungsproblemen lesen können.

• Brandingdetailstufe

  Wenn Sie die App für kommerzielle Zwecke erstellen und ein Brandingmanagement erfolgt, erstellen Sie umfangreiche, mit Branding versehene visuelle Prototypen mit granularem Augenmerk auf Details. Dadurch wird sichergestellt, dass das finale Produkt nicht von den Standardfarben, Layouts und Logos des Unternehmens abweicht.

Anpassen mit Konsistenz

Benutzerdefinierte visuelle Elemente können in einer App Qualität, Originalität oder Branding vermitteln. Entscheiden Sie vorab, inwieweit das visuelle Design Ihrer App angepasst wird, und planen Sie diese Elemente entsprechend. Die Einführung benutzerdefinierter Grafiken und des Brandings zu einem späteren Zeitpunkt im App-Designprozess kann sich kompliziert gestalten.

Einige Elemente, die Sie anpassen sollten, sind Designs, Vorlagen, Steuerelemente und Stile.

Befolgen Sie bei jeder Anpassung visueller Elemente in Windows Phone die folgenden Richtlinien:

• Ziehen Sie den praktischen Nutzen dem Realismus vor.

  Generell sollten Apps keine benutzerdefinierten Steuerelemente enthalten, die das reale Leben imitieren sollen. Eine Radio-App sollte beispielsweise kein Drehrad, keinen Knopf und keine Tastenanordnung zum Auswählen des Senders enthalten. Stattdessen sollten ein Schiebereglersteuerelement zum Einstellen der Frequenz, eine Schaltfläche für Wiedergabe/Pause zum Ein- und Ausschalten des Radios und eine Favoritenschaltfläche zum Speichern voreingestellter Sender verwendet werden.

  

  FM Radio-App

  Im Sinne der praktischen Anwendung empfiehlt es sich zudem, einige oder alle Steuerelemente, die App-Leiste und die Statusleiste auszublenden oder zu entfernen, wenn die App Inhalte oder Spiele im Vollbildmodus anzeigt.

• Ziehen Sie den praktischen Nutzen dem Realismus vor.

  Um in einer App mit benutzerdefinierten Steuerelementen Konsistenz und Zuverlässigkeit zu erreichen, stellen Sie sicher, dass die App einen zugrunde liegenden Designstil aufweist, in dem Symbole, Formen, Wörter und Farben konsistente Bedeutungen haben.

  Wenn Sie die Darstellung von Gruppen miteinander verbundener, benutzerdefinierter Steuerelemente mit gegenseitiger Wechselwirkung planen, stellen Sie unbedingt sicher, dass alle möglichen Kombinationen aus Steuerelementen sinnvoll sind und erwartungsgemäß funktionieren.

  Sofern möglich, lösen Sie mögliche Interaktionen zwischen benutzerdefinierten Steuerelementen heraus, um sicherzustellen, dass alle möglichen Vorgänge Sinn machen. Wenn einige Kombinationen dem Benutzer verwirrende Szenarien auferlegen, verwenden Sie ein alternatives Design.

Testen der Benutzerfreundlichkeit

Da der Prototyp nun präzise Formen annimmt, beenden Sie den Entwurf, und überprüfen Sie, ob die Parameter des Windows Phone-Designs weiterhin erfüllt sind. Prüfen Sie, ob das Gerät die Plattform und das Betriebssystem vollständig nutzt, indem Sie sich die folgenden Fragen stellen.

Prüffragen für Prototypen

• Wird aus dem App-Design ersichtlich, wie die Windows Phone-Hardware genutzt wird?
• Werden die Aufgaben Ihrer App problemlos ausgeführt?
• Enthält Ihre App zu viele Informationen oder eine zu umfangreiche Funktionalität? Werden unter Umständen zu wenig Informationen geliefert?
• Kann der Benutzer mit Ihrer App Aufgaben oder Vorgänge ausführen, die er als hilfreich empfindet?
• Arbeiten Sie sonst mit einer anderen mobilen Plattform? Windows Phone-Benutzer erwarten weniger Tippvorgänge, klarere Ansichten, große Typografie und die Verwendung von Kontrasten und Farbe.
• Verwenden Sie beide Achsen des Bildlaufs (X- und Y-Achse) und der Ausrichtung (Hochformat und Querformat)? Je nach Verwendungszweck der App erwarten die Benutzer unter Umständen beides.
• Lassen sich die Steuerelemente bequem mit der Fingerspitze bedienen? Sind die Steuerelementtexte lesbar?
• Liefert die UI Feedback zur Toucheingabe und zum Fortschritt?
• Haben Sie die Verwendung der Hardwareschaltfläche „Zurück“ beachtet?
• Verwenden Sie eingebettete Webinhalte (und das WebView-Steuerelement) sparsam?
• Blendet die App bei der Wiedergabe von Inhalten im Vollbildmodus die Statusleiste, Steuerelemente und die App-Leiste aus?
• Verwenden Sie Pivot- und Hub-Steuerelemente effizient und richtig?

Testen von benutzerdefinierten UI-Elementen

Nachdem Sie benutzerdefinierte UI-Elemente modelliert haben, müssen Sie sie unbedingt selbst testen. Wenn Sie in Blend für Visual Studio arbeiten, können Sie das Verhalten einer Seite oder eines Steuerelements sowie der zugehörigen visuellen Elemente modellieren (mithilfe des Feature „Verhalten“).

Benutzerberatung

Sobald Sie mit der Prototyperstellung beginnen, stellen Sie eine kleine Gruppe vertrauenswürdiger Personen zusammen, die zur Zielgruppe Ihrer App gehören. Wenn Sie bereit sind, stellen Sie den vertrauenswürdigen Personen die Prototypen vor. Erklären Sie nicht die beabsichtigte Funktionsweise, sondern warten Sie ab und achten Sie darauf, ob der Benutzer den Zweck und die Funktion Ihrer App problemlos versteht.

Hinweis  Verwenden Sie für die ersten Benutzertests generell Modelle anstelle von Drahtmodellzeichnungen. Drahtmodellzeichnungen erzeugen keine exakte Simulation der Benutzeroberfläche.

Sprechen Sie frühzeitig mit Kunden

Wenn Sie eine App für Unternehmen entwickeln, stellen Sie sicher, dass Sie zusätzlich zu den Benutzern Ihrer Zielgruppe die Anforderungen und Prioritäten der Manager und Laien testen. Beispielsweise sollte eine Projektmanagementsoftware sowohl für die an einem Projekt arbeitenden Personen als auch für deren Vorgesetzte hilfreich sein, die mit Ihrer App unter Umständen den Fortschritt eines Projekts überprüfen möchten.

Hinweis  Fallen Sie nicht den Forderungen der Benutzer nach immer mehr Features zum Opfer. Während Sie durch Benutzerfeedback teilweise auf scherwiegende UI-Probleme hingewiesen werden können, sollte das Feedback der Benutzer zum Großteil ganzheitlich neutralisiert werden. Konzentrieren Sie sich auf den Schwerpunkt Ihrer App, und halten Sie sie minimal. Denken Sie daran, dass Benutzer ihre Ziele oftmals besser in einer App artikulieren können, als spezifische Vorschläge zur UI oder Interaktion zu liefern.

Erstellen finaler Modelle

An diesem Punkt im Designprozess sollte Ihre App bereits die zuvor dargelegten Richtlinien zur Benutzerfreundlichkeit erfüllen. Führen Sie beim Evaluieren der finalen Modelle die folgenden Schritte durch:

1. Bestimmen Sie, ob Ihr Prototyp die beim Zusammentragen Ihrer Ideen geplanten Anforderungen und Standards erfüllt.
2. Entscheiden Sie als Nächstes, ob die Modelle der Detailstufe entsprechen, die für den abschließenden App-Überprüfungsprozess erforderlich ist. Erinnern Sie sich an die Detailstufe, die Sie für Ihren Prototyp bestimmt haben, nachdem Sie das Thema „Prototypen – wichtige Aspekte des Designs“ gelesen haben.
3. Die finalen Modelle sollten geeignete Detailstufen für Folgendes beinhalten:
   • Visuelle Elemente – werden Typografie und Inhalt klar, lesbar und präzise dargestellt? Ist Ihre App visuell ansprechend?
   • Funktionselemente – sind die Aufgaben hinsichtlich Zweck und Bedienung intuitiv? Ist die Funktion und Bedienung Ihrer App klar?
   • Steuerelemente – funktionieren alle benutzerdefinierten Steuerelemente gemäß einer konsistenten internen Designsprache? Wurden Größe und Abstand für eine bequeme Bedienung per Toucheingabe festgelegt?
   • Brandingelemente – haben Sie die Farben und Logos exakt reproduziert? Sind alle Grafiken konform mit den Copyright-Bestimmungen?
4. Stellen Sie sicher, dass Sie die bei der Prototyperstellung festgelegten Interaktionen beibehalte haben. Überprüfen Sie, ob die häufigsten oder wichtigsten Aufgaben und Vorgänge wunschgemäß aussehen und ablaufen.
5. Wenn die Designs finalisiert wurden und die Produktion beginnen kann, können Sie damit beginnen, Ihre App auf die Erfüllung der Designanforderungen zum Einreichen vorzubereiten.

Verwandte Themen

Designressourcen für Windows Phone