Ein neuer Sugar UX kommt im Winter '18

SugarCRM hat es sich zur Aufgabe gemacht, unsere Nutzer zu befähigen, ihre Kunden zu begeistern. Zu diesem Zweck freuen wir uns, die erste Phase der visuellen Neugestaltung vorzustellen und einige Tipps für die Arbeit mit der neuen UX zu geben.

 

Unser Prozess bei der Entwicklung des neuen UX

Sugar 7 führte das Sidecar-Framework mit massiven Verbesserungen der Benutzeroberfläche (SugarUX) und einer modernisierten Architektur ein. Seitdem haben wir intensiv an der nächsten Version von SugarUX gearbeitet, die auf dem Sidecar-Framework basiert. Unsere Leitsätze stammen von unseren Kunden und deren Feedback zu Sidecar. Eine Wettbewerbsanalyse und Rückmeldungen von Kunden ergaben drei Bedenken; überladene komplizierte UX, ineffizientes ungeführtes Layout und eine triste überholte Benutzeroberfläche.

Das SugarCRM User Experience-Team (unter der Leitung von Brian Ng) startete eine strenge heuristische Bewertung der Web- und mobilen Sugar-Produkte. Bei der Bewertung wichtiger 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, zu ermitteln, welche Probleme zuerst behandelt werden müssen.

Dunkelgrauer Text auf hellgrauem Grund führte zu schlechter Lesbarkeit. Schweres Schwarz und graues Leinen ergänzten das veraltete Aussehen.

Sugar Mobile hatte ein dunkles und eintöniges visuelles Design. Tasten für Tastenaktionen wurden auf Tastenbildschirmen unterschiedlich positioniert.

Ziele setzen

Mit dem Verständnis der Probleme setzen wir uns Ziele.

  • Verbessern Sie das Design für über 100 Usability-Probleme, die durch die Auswirkungen auf die Fähigkeit des Benutzers, seine Arbeit zu erledigen, priorisiert werden.
  • Richten Sie eine saubere und moderne visuelle Designsprache ein, deren Regeln in einem Style Guide dokumentiert sind.
  • Sicherstellen, dass unsere Produkte für alle zugänglich sind und die WCAG-Konformität (Web Content Accessibility Guidelines) erfüllen.

Leitprinzipien für unser neues Design

Wir haben drei Designprinzipien festgelegt: klar, konsistent und effizient. Diese Prinzipien haben alle unsere Entscheidungen beeinflusst. Die Festlegung von Prinzipien half Meinungsunterschiede aufzulösen und sich auf Frustrationen von Benutzern zu konzentrieren. Wir bestimmten, welche Farben und Schriftarten unsere Anwendungsfälle positiv beeinflussen würden und dennoch unsere Marke widerspiegeln.

Wir haben Open Sans als Sugar UX-Basisschriftart übernommen. Es ist eine Open-Source-Schriftart, die für Web- und mobile Benutzeroberflächen mit Text-Layouts optimiert ist. Es ist bekannt für seine offene, neutrale Form und sein freundliches Aussehen. Für Farben haben wir eine Farbpalette ausgewählt, die freundlicher, moderner und heller ist.

Wir haben außerdem eine Reihe von Farben und Schriftarten ausgewählt, die sich positiv auf unsere Anwendungsfälle auswirken und dennoch die Marke SugarCRM widerspiegeln. Schließlich testeten wir Konzepte in der realen Welt, wobei echte Benutzer in Schlüsselflüssen beobachteten, wie sie sich in der Praxis abspielten.

Mobile hat eine helle Erscheinung und Farbe, die an strategischen Orten platziert wird, um Benutzern beim Identifizieren von Informationsgruppen zu helfen.

 Ergebnisse

Erstmals wurden auf der SugarCon mehr als 1000 Teilnehmer vorgestellt, bei denen Kunden Feedback gaben.
Eine neue visuelle Designsprache, dokumentiert in einem Style Guide (in Kürze verfügbar), der es Kunden und Partnern ermöglicht, SugarUX konsequent auf 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.

 Komm im Winter ’18!

Die erste Phase unseres neuen UX wird in Winter ’18 veröffentlicht und wir möchten sicherstellen, dass die Sugar Developer Community als erste eine Testfahrt durchführt. Wenn Sie Sidecar-Komponenten oder -Anpassungen (Dashlets, benutzerdefinierte Ansichten oder Layouts usw.) erstellt haben, sollten Sie sicherstellen, dass sie in neuer UX ordnungsgemäß angezeigt werden. Wie bei allen Anpassungen auf Codeebene liegt es an Sugar-Entwicklern, sicherzustellen, dass Sie Ihren Code korrigieren, damit Ihre Anpassungen im neuen UX ordnungsgemäß angezeigt werden.

Aus der Perspektive der Implementierung wurden diese Änderungen vollständig in CSS vorgenommen, wo wir das Design für vorhandene CSS-Klassen angepasst haben. Problembereiche sind also Bereiche, in denen Sie das Styling für Sugar’s CSS-Kernklassen außer Kraft gesetzt haben oder Ihr eigenes CSS mithilfe von ./custom/themes/custom.less eingeführt haben. Bei den meisten Anpassungen, die einfach unsere vorhandenen CSS-Klassen verwenden, wird erwartet, dass sie ein neues Styling ohne Fehler übernehmen.

Wie üblich werden wir nur für die Version Winter ’18 (On-Demand Only) ein technisches Preview-Programm mit Einladung durchführen. Wenn Sie sicherstellen möchten, dass Ihre Organisation für diese Vorschau in Betracht gezogen wird, senden Sie bitte eine E-Mail an developers@sugarcrm.com und erwähnen Sie Ihr Interesse am Testen des neuen Sugar UX!

Erstellen Sie Ihren neuen Skin-Testplan

Wir haben diese Bemühungen als „neues Skin“ bezeichnet, da diese erste Phase hauptsächlich Änderungen an CSS und keine wesentlichen Änderungen an der Standard-HTML-Struktur für unsere Sidecar-Komponenten beinhaltet.

Wie stellen Sie sicher, dass Ihre Anpassungen immer noch pixelgenau sind? Im Folgenden finden Sie einige Tipps für Sie und Ihr Team zum Erstellen eines Testplans.

Versuchsforschung

Wir empfehlen Ihnen, einen bestimmten Zeitraum für explorative Tests zu verwenden, um sicherzustellen, dass Ihre Anpassungen in der neuen Oberfläche gut aussehen. Wie viel Zeit? Es hängt davon ab, wie viel UI Sie haben. Zum Beispiel sollte es nicht länger als ein paar Minuten dauern, um ein benutzerdefiniertes Dashlet zu testen und alle Fehler aufzulösen, die Sie möglicherweise ansprechen möchten.

Richtlinien für Tester

Wenn Sie testen, wonach suchen Sie? Hier sind einige Tipps.

  • Anpassungen nur. Das Testen sollte sich auf Anpassungen konzentrieren, die von Ihrem Team erstellt wurden.
  • CSS überschreibt. Wenn Sie eine ./custom/themes/custom.less-Datei verwenden oder eigene CSS-Dateien einschließen, müssen Sie diesen Änderungen besondere Aufmerksamkeit widmen, da sie wahrscheinlich aktualisiert werden müssen.
  • Scrollen. Können Sie blättern und gibt es Dinge, die selbst mit Scrollen nicht zugänglich sind?
  • Ellipsenbildung. Wenn Sie die Fenstergröße verkleinern oder den verfügbaren Speicherplatz für Daten in benutzerdefinierten Listenansichten, Datensatzansichten usw. reduzieren, werden sie mit QuickInfos versehen und beim Hover angezeigt?
  • Empfänglichkeit. Ändern Sie die Größe des Browserfensters oder wechseln Sie in den Responsive-Modus. Beobachten Sie, was mit Elementen auf der Seite passiert.
  • Orientierung auf Tabletten. Wechselnde Anzeigeausrichtung zwischen Querformat und Hochformat.
  • Dinge umschalten. Öffne / schließe Schubladen, Menüs, Bearbeitungs- und Detail-Modus bei Aufnahmeansichten usw.
  • Die Einstellungen. Ändern Sie die System- und Profileinstellungen, die möglicherweise das Aussehen von Datum / Uhrzeit, Währung usw. ändern.

Vergleiche mit Out of the Box Sugar
Dieser Beitrag enthält einige Screenshots von dem, wie die neue Haut sofort aussieht. Wenn Sie Ihre Anpassungen mit dem Look-and-Feel vergleichen, können Sie Dinge identifizieren, die Sie möglicherweise in Ihren Anpassungen ändern müssen. Wir ermutigen Tester, beim Testen zwei Fenster offen zu lassen, um das Standardverhalten in einem Fenster leichter mit den Anpassungen in einem anderen Fenster zu vergleichen.