Optimieren der Darstellung Ihrer Anwendung

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:

  • Verstehen, warum das Gestalten der Oberfläche Ihrer Anwendung der letzte Schritt im Prozess ist
  • Kennenlernen der Oberflächenelemente einer Anwendung
  • Untersuchen und Beheben von Problemen auf der Oberfläche der Beispielanwendung Motivator
  • Präsentieren der endgültigen optimierten Anwendung

Die Letzten werden die Ersten sein

Wie bereits eingangs erwähnt, ist der Einstieg einfach, indem Sie Anwendungs- und Dashboard-Elemente erstellen, die wirklich ansprechend aussehen. Analytics Studio bietet Ihnen viele einfache Möglichkeiten, Erkundungen zu entwickeln, elegant aussehende Diagrammtypen auszuwählen, Größe und Position von Dashboards-Widgets festzulegen, Schriftgröße und -farben zu ändern usw.

Wie wir auch gesehen haben, helfen die am besten aussehenden Diagramme den Besuchern erst dann, wenn sie im richtigen Kontext entwickelt werden. Was meinen wir mit Kontext? Wir meinen den Zweck und die Ideen für Funktionen für Ihre Anwendung und ihrer geplanten Struktur.

Wir haben diese Komponenten von "Der Motivator" bestimmt. Nun geht es darum, wie wir der Oberfläche der Anwendung den letzten Schliff geben können, damit die sich darunter befindlichen Elemente am besten in Szene gesetzt werden. Auch wenn Sie daran erst am Ende des Prozesses arbeiten, ist dies der Teil der Anwendung, auf den Ihre Benutzer zuerst treffen. Sie sollten sie besser auf Hochglanz bringen, damit Ihre Zielgruppe all die Funktionen nutzen kann, an denen Sie so hart gearbeitet haben!

Erzeugen visueller Anziehungskraft

Jetzt ist es an der Zeit, darüber nachzudenken, wie eine Anwendung aussieht. An dieser Stelle kommt es auf Ihr eigenes ästhetisches Urteilsvermögen an, um eine visuelle Anziehungskraft zu erzeugen, die wiederum die emotionale Bindung der Benutzer an Ihre Anwendung verstärken kann. Nachfolgend sind die Elemente aufgeführt, die Sie steuern, damit Funktionen so gut aussehen, dass Benutzer es kaum erwarten können, sie in die Finger zu bekommen.

  • Größen und Formen: Spiegeln sie die Bedeutung der Funktionen wider und sind sie aufeinander abgestimmt? Nutzen sie den Raum effizient?
  • Die Arten von Diagrammtypen: Visualisieren sie die Daten, die sie zur Verfügung stellen, auf richtige Weise? Sind sie im Einklang mit ähnlichen Diagrammtypen, die für ähnliche Daten verwendet werden (und anderen Diagrammtypen, die für andere Arten von Daten verwendet werden)?
  • Ausrichtung, Abstand und Positionierung: Sind Elemente übersichtlich und ansprechend angeordnet? Sind sie voneinander so getrennt, dass erkennbar ist, wo das eine endet und das andere anfängt? Ist der Abstand zwischen den Elementen zu groß (oder zu klein)?
  • Farben: Haben Sie eine ansprechende Palette, in der Farben zueinander passen? Sind Elemente, die sich von anderen abheben müssen, entsprechend farblich hervorgehoben? Haben ähnliche Elemente eine einheitliche Farbgebung?
  • Schriftarten: Sind Größen und Typen einheitlich, d. h. werden die gleichen Informationsebenen mit den gleichen Größen und Typen präsentiert?
  • Branding: Haben Sie dort, wo es sinnvoll ist, die Branding-Elemente Ihres Teams oder Unternehmens integriert?

Noch mehr Motivation dank "Der Motivator"

Lassen Sie uns mit Blick auf diese Elemente die Teile des Dashboards von "Der Motivator" betrachten, die vielleicht eher demotivierend sind. Es gibt einige offensichtliche Fehler auf der Oberfläche (von denen einige Sie auch schon bemerkt haben).

  • Der für Aktivitäten benötigte Detaillierungsgrad ist nicht ersichtlich. Es kann sein, dass andere Diagrammtypen benötigt werden.
  • Und warum sind die Balken für die einzelnen Aktivitäten (Anrufe, E-Mails usw.) so groß? Sicherlich kann der Raum, den sie einnehmen, viel effektiver genutzt werden und Platz für andere nützliche Kennzahlen geschaffen werden (wie Durchschnitte/Vergleichswerte, Details zu den einzelnen Aktivitätstypen usw.).
  • Die Typgröße ist uneinheitlich. Die Kennzahlen links haben allesamt unterschiedliche Größen. Ist ein Muster erkennbar? Oder ist alles rein zufällig angeordnet? Das lässt sich nicht sagen.
  • Einige Teile des Dashboards laufen ineinander. "Inhabername" ist Teil eines Widgets, das viele numerische Werte enthält.
  • Die Farben und Größen der Abschnitte mit Summen sind nicht sinnvoll.

Überarbeitung von "Mein Motivator", Schritt 3: Die Bedeutung von Größe und Farben

Wir befinden uns nun in der Phase des Designs, in der wir mit der Behebung dieser Probleme beginnen können. Am Ende des letzten Überarbeitungsschritts haben Sie bemerkt, dass die Zusammenfassungsfelder mit den gesamten, überfälligen und abgeschlossenen Aktivitäten falsch dimensioniert und farbig dargestellt sind. Kehren wir also zu Analytics Studio zurück, um das zu korrigieren.

  1. Öffnen Sie im Dashboard-Designer das Dashboard "Mein Motivator".
  2. Ändern Sie die Größe der Kennzahl "Aktivitäten insgesamt" in eine Breite von 4 Zellen.
  3. Ziehen Sie die Kennzahl "Überfällige Aktivitäten" 1 Zelle nach links.
  4. Verbreitern Sie die Kennzahl "Abgeschlossene Aktivitäten" um 1 Zelle nach links. Ihre Kennzahl-Widgets haben nun dieselbe Größe! Screenshot von Kennzahlen gleicher Größe oben im Dashboard Aber ihre Farbe ist unterschiedlich.
  5. Klicken Sie auf die Kennzahl "Aktivitäten insgesamt".
  6. Klicken Sie im Bereich "Widget-Eigenschaften" rechts auf Widget-Stil, um das entsprechende Dialogfeld einzublenden.
  7. Klicken Sie unter "Hintergrundfarbe" auf die aktuelle Farbe und wählen Sie "Dunkelblau". Farbauswahl für Widget-Hintergrundfarbe mit hervorgehobener Farbe 'Dunkelblau'
  8. Der Widget-Text ist ebenfalls dunkel, weshalb er kaum zu sehen ist. Das lässt sich leicht ändern. Klicken Sie im Bereich "Widget-Eigenschaften" auf Textstil, um das entsprechende Dialogfeld einzublenden.
  9. Ändern Sie die Zahlen- und Titelfarbe in weiß. Das sieht besser aus.
  10. Wiederholen Sie die Schritte 5-9, um die Hintergrund- und Textfarbe für die Kennzahlen "Überfällige Aktivitäten" und "Abgeschlossene Aktivitäten" zu ändern.
  11. Speichern Sie Ihr geändertes Dashboard und zeigen Sie es in einer Vorschau an. Ganz schön beeindruckend. Nun fallen diese Kennzahlen wirklich auf. Screenshot des Dashboards mit dunkelblauen Kennzahlen oben

Es gibt noch einen weiteren Verbesserungsschritt, den Sie hier machen können. Diese Kennzahlen sehen immer noch ein wenig isoliert aus, obwohl Sie sie eigentlich als Einheit betrachten möchten. Erinnern Sie sich an das Container-Widget, mit dem Sie die Widgets zusammengeführt haben? Das kann auch hier hilfreich sein.

  1. Bearbeiten Sie das Dashboard.
  2. Um das Container-Widget auszuwählen, bewegen Sie den Mauszeiger über den Rand des Containers unter einer der Kennzahlen und klicken Sie, wenn sich der Mauszeiger in kreuzende Pfeile ändert.
  3. Klicken Sie im Bereich "Widget-Eigenschaften" rechts auf Widget-Stil, um das entsprechende Dialogfeld einzublenden.
  4. Ändern Sie die Hintergrundfarbe in das gleiche Dunkelblau, das Sie für die Kennzahlen gewählt haben.
  5. Speichern Sie Ihr geändertes Dashboard und zeigen Sie es in einer Vorschau an.

Jetzt lesen sich Ihre Kennzahlen wie eine Geschichte!

Screenshot von 3 in einem Container kombinierten Kennzahlen

Die überarbeitete Anwendung "Der Motivator"

Sie sind fast am Ziel. Sie haben die Zielgruppe, den Zweck und die Funktionen Ihrer Anwendung bestimmt. Sie haben verstanden, dass "Der Motivator" diesen Vorgaben nicht gerecht wird. Und Sie haben auf allen Ebenen – Zweck, Struktur und Oberfläche – einige Korrekturen vorgenommen.

Es ist unverkennbar, dass Ihre Anwendung Ihren Designzielen immer näher kommt. Aber es ist auch klar, dass der Weg noch lang ist. Wir können Sie nicht Schritt für Schritt ans Ziel bringen. Das würde den Rahmen dieses Trailhead-Moduls sprengen. Wir haben Ihnen die Grundzüge des Designs und einige Techniken vermittelt, damit Sie anfangen können, Ihre Ideen umzusetzen.

Aber wir können Ihnen die von unserem Designteam überarbeitete Anwendung "Der Motivator" zeigen. Kehren Sie also kurzerhand zu Analytics Studio zurück und öffnen Sie das Dashboard "Motivator 2".

Die endgültige Version des Motivator-Dashboards

Cool! Sie können am überarbeiteten Design sofort die Verbesserungen gegenüber dem Original erkennen.

  • Verbesserungen hinsichtlich des Zwecks. Es enthält nun die wichtige Bestenliste auf der linken Seite, einen Filter für den Zeitraum und viele weitere Details zu allen Arten von Aktivitäten. Außerdem sind jetzt Accountdetails enthalten.
  • Verbesserungen der Struktur. Die zusammengefassten Leistungsindikatoren befinden sich oben auf der Seite, wohin wir sie verschoben haben. Außerdem befinden sich die Leistungsindikatoren für jedes Teammitglied links oben, wo sie am ehesten ins Auge fallen und leicht zugänglich sind. Und der Raum ist wesentlich besser aufgeteilt: Anstelle großer Balken, die nur die Summen der einzelnen Aktivitäten darstellen, bietet der gleiche Platz eine Menge an Details zu allen Aktivitäten. Darüber hinaus wurden ähnliche Elemente zusammengeführt, während unterschiedliche Elemente voneinander getrennt wurden.
  • Verbesserungen auf der Oberfläche. Die Optik stimmt und begeistert Ihre Benutzer für Ihre Anwendung. Farben wirken zusammen. Mithilfe der neuen Farbpalette ist es einfacher, Elemente auszuwählen. Die Typgrößen sind einheitlich. Ähnliche Elemente sind ähnlich groß, farblich gekennzeichnet und angeordnet. Das Ganze sieht einfach professionell aus.

Beeindruckend, oder? Natürlich haben wir ein wenig geschummelt und Sie direkt zur Ziellinie gebracht. Aber wir hoffen, dass Sie nachvollziehen können, wie wir dorthin gelangt sind. Und wir hoffen, dass Sie mit den in diesem Modul genannten Ressourcen sowie mit ein wenig Zeit und Entschlossenheit allein dorthin gelangen können.

Die Arbeit eines Designer-Administrators ist immer unvollendet

Vielleicht ist das fürs Erste gut genug. Aber als Administrator für DTC stellen Sie bald fest, dass Stillstand Rückschritt bedeutet. Benutzer erwarten Verbesserungen und es gibt immer einen Weg, eine Anwendung noch besser zu machen, oder?

Sie haben beispielsweise von der Seitenfunktion von Analytics Studio gehört, die die Bedienung von Dashboards erleichtert, indem Inhalte auf mehrere Seiten aufgeteilt werden. Mit ihnen können Sie eine Geschichte erzählen, indem Sie einen dynamischen Pfad durch Ihr Dashboard erstellen. Möglicherweise ist es sinnvoll, dass jede Aktivität in "Der Motivator" eine eigene Seite erhält. Sie können nützliche Details hinzufügen, wie z. B. den Status jedes einzelnen Mitarbeiters in Bezug auf die Quote, erfolgte gewonnene und verlorene Abschlüsse sowie den Gesamtumsatz. Das kann Ihnen und Ihren Vertrieblern helfen zu verstehen, wie Aktivitäten zur Umsatzleistung beitragen, und zu erkennen, ob bestimmte Arten von Aktivitäten mehr Einfluss haben als andere.

Aber darum kümmern wir uns ein anderes Mal. Ihre unerwartete Reise in die Welt des Designs ist damit fast beendet. Alles, was Sie noch tun müssen, ist, diese Fragen zu beantworten, um sich Ihren wohlverdienten Badge zu sichern!

Ressourcen

Lernen Sie weiter kostenlos!
Registrieren Sie sich für einen Account, um fortzufahren.
Was ist für Sie drin?
  • Holen Sie sich personalisierte Empfehlungen für Ihre Karriereplanung
  • Erproben Sie Ihre Fähigkeiten mithilfe praktischer Aufgaben und Quizze
  • Verfolgen Sie Ihre Fortschritte nach und teilen Sie sie mit Arbeitgebern
  • Nutzen Sie Mentoren und Karrierechancen