Unser Prozess bei der Entwicklung der neuen UX
Sugar 7 führte das Sidecar-Framework mit umfangreichen Verbesserungen der Benutzeroberfläche (SugarUX genannt) und einer modernisierten Architektur ein. Seitdem arbeiteten wir intensiv an der nächsten Auflage von SugarUX, die auf der Sidecar-Struktur basiert. Gemäß dem Feedback von unseren Kunden haben wir Richtlinien und Erneuerungen entwickelt. Eine Wettbewerbsanalyse und die Rückmeldungen von Kunden haben drei Bedenken aufgedeckt: Ein unübersichtliches, kompliziertes UX, ein ineffizientes Layout und eine veraltete Benutzeroberfläche.
Das SugarCRM User Experience-Team (unter der Leitung von Brian Ng) hat eine Bewertung der Web- und der mobilen Sugar-Produkte durchgeführt. Bei der Bewertung der wichtigsten Anwendungsfälle wurden Probleme identifiziert und neue Lösungen dokumentiert. Dieses gründliche Verständnis des Produkts, der Kunden und der Branche hat uns dabei geholfen, die Punkte zu identifizieren, die als erstes geändert werden müssen.
Dunkelgrauer Text auf hellgrauem Hintergrund führte zu schlechter Lesbarkeit. Tiefes Schwarz und graue Linien erzeugten ein überholtes Aussehen.
Das visuelle Design von Sugar Mobile war dunkel und trist. Schaltflächen für Tastenaktionen wurden auf Bildschirmen unterschiedlich positioniert.
Definierte Ziele
Mit dem Verständis für die gegenwärtigen Probleme, haben wir uns folgende Ziele gesetzt:
- Verbesserungen im Design für über 100 Usability-Probleme, wobei der Einfluss auf die Fähigkeit des Benutzers, seine Arbeit zu erledigen, Priorität hat.
- Erstellen einer klaren und modernen visuellen Designsprache, deren Regeln in einem Style Guide dokumentiert sind.
- Sicherstellen, dass unsere Produkte für alle zugänglich sind und die WCAG-Richtlinien (WCAG) erfüllen.
Richtlinien für unser neues Design
Wir haben drei Gestaltungsprinzipien festgelegt: Klar, konsistent und effizient. Diese Prinzipien waren grundlegend für alle Entscheidungen. Das Festlegen von Prinzipien hat dabei geholfen, Meinungsverschiedenheiten zu beseitigen und sich auf die Frustration der Benutzer zu konzentrieren. Wir haben Farben und Schriften festgelegt, die sich positiv auf unsere Nutzer auswirken und trotzdem unsere Marke widerspiegeln.
Wir haben auch eine Reihe von Farben und Schriftarten ausgewählt, die sich positiv auf unsere Nutzer auswirken und dennoch die Marke SugarCRM widerspiegeln. Die Konzepte haben wir in der realen Welt mit echten Nutzern getestet, um zu sehen, wie sie sich in der Praxis bewähren.
Die mobile Version hat ein helles Erscheinungsbild und wichtige Punkte sind farbig markiert, damit die Benutzer zusammengehörige Informationen identifizieren können.
Ergebnisse
- Erstmals auf der SugarCon mit über 1000 Teilnehmer kommuniziert. Kunden auf der Veranstatung gaben Feedback dazu.
- Eine neue visuelle Designsprache, die in einem Style Guide dokumentiert wird (in Kürze verfügbar), die Kunden und Partner ermöglicht, SugarUX konsequent in unserem Produkt zu implementieren.
- Einführung des neuen SugarUX auf unseren Sugar Mobile-Apps, die bereits im Apple App Store und bei Google Play verfügbar sind.
Angekündigt für den Winter ‘18!
Die erste Phase unserer neuen UX wird im Winter’18 erscheinen. Wir möchten sicherstellen, dass die Sugar Developer-Community sie zuerst testet. Wenn Sie Sidecar-Komponenten oder Anpassungen (Dashlets, benutzerdefinierte Ansichten oder Layouts usw.) erstellt haben, sollten Sie überprüfen, ob sie in der neuen UX ordnungsgemäß angezeigt werden. Wie bei allen Anpassungen im Code ist es Sache der Entwickler von Sugar, sicherzustellen, dass Sie ihren Code so korrigieren, dass ihre Anpassungen ordnungsgemäß in der neuen UX angezeigt werden.
In Bezug auf die Implementierung wurden diese Änderungen vollständig im CSS vorgenommen, wo wir das Design für vorhandene CSS-Klassen angepasst haben. Besorgniserregend wären also Bereiche, an denen Sie das Styling für die CSS-Hauptklassen von Sugar überschrieben oder durch die Verwendung von ./custom/themes/custom.less in ein eigenes CSS umgewandelt haben. Bei den meisten Anpassungen, die unsere vorhandenen CSS-Klassen verwenden, wird erwartet, dass Sie das neues Styling ohne Fehler übernehmen.
Wie gewöhnlich geben wir Ihnen die Möglichkeit, einen technischen Einblick in die Winter’18-Version (nur bei Bedarf) zu erhalten. Wenn Sie möchten, dass Ihre Unternehmen dazu eingeladen wird, senden Sie eine E-Mail an entwickler@sugarcrm.com und erwähnen Sie Ihr Interesse am Test der neuen Sugar UX!
Erstellen Sie Ihren neuen „Skin-Testplan“
Wir haben diese Neuerungen als „neue Skin“ bezeichnet, da diese erste Phase hauptsächlich Änderungen an CSS und keine wesentlichen Änderungen an der Standard-HTML-Struktur für eine unsere „Sidcar“ Kompnenten umfasst.
Wie stellen Sie sicher, dass Ihre Anpassungen noch pixelgenau sind? Nachfolgend finden Sie einige Tipps für Sie und Ihr Team, um einen Testplan zu erstellen.
Tests
Wir empfehlen, eine festgelegte Zeit für das Durchführen von Tests, um sicherzustellen, dass Ihre Anpassungen in der neuen „Skin“ gut aussehen. Wie viel Zeit benötigen Sie? Es hängt davon ab, wie viel Benutzeroberfläche Sie haben. Beispielsweise sollten Sie nicht länger als ein paar Minuten brauchen, um ein benutzerdefiniertes „Dashlet“ zu testen und um mögliche Fehler aufzudecken.
Empfehlungen für Tester
Wenn Sie einen Test durchführen, nach was suchen Sie? Hier sind einige Tipps:
- Anpassungen. Das Testen sollte sich auf Anpassungen konzentrieren, die Ihr Team erstellt hat.
- CSS überschreibt. Wenn Sie eine ./custom/themes/custom.less -Datei verwenden oder Ihre eigenen CSS-Dateien einfügen, müssen Sie diese Änderungen besonders beachten, da sie wahrscheinlich aktualisiert werden müssen.
- Scrollen. Können Sie scrollen und gibt es Dinge, die selbst beim Scrollen nicht erreichbar sind?
- Ellipsieren. Wenn Sie die Fenstergröße verkleinern oder den verfügbaren Speicherplatz für Daten in benutzerdefinierten Listenansichten, Berichten usw. verringern, werden diese Ellipsen und QuickInfos im Hover angezeigt?
- Responsiveness. Ändern Sie die Größe des Browser-Fensters oder wechseln Sie in den und den „Responsive“ Modus. Beobachten Sie, was mit Elementen auf der Seite passiert.
- Orientierung auf Tablets. Abwechselnde Ausrichtung der Anzeige zwischen Quer- und Hochformatmodus.
- Umschalten. Öffnen / Schließen von Menüs, Bearbeitungsmodus – und Detailmodus für die Aufzeichnungsansicht usw.
- Einstellungen. Ändern Sie die System- und Profileinstellungen, die Ansicht ändern, wie das Datum / Uhrzeit-Format, die Währung usw.
Vergleich mit der Sugar „out of the box“
Dieser Beitrag enthält einige Beispiel-Screenshots, wie die neue „Skin“ aussieht. Wenn Sie Ihre Anpassungen mit dem standardmäßigen Aussehen vergleichen, können Sie die Dinge identifizieren, die Sie möglicherweise in Ihren Anpassungen ändern müssen. Wir empfehlen Testern, während des Tests zwei Fenster offen zu haben, um das Verhalten der Standardeinstellungen in einem Fenster leichter mit Ihren Anpassungen in dem anderen Fenster vergleichen zu können.