Artikel

UX-Design mit Eingabehilfen von Smartsheet

by The Smartsheet Team

Einführung

Wenn Sie in einer Arbeitsmanagement-Plattform wie Smartsheet arbeiten, die tagtäglich missionskritisch für so viele Menschen ist, wissen Sie, dass alles, was Reibung oder Hürden mit sich bringt oder zu einer frustrierenden Kundenerfahrung führt, Ihr Feind ist. Die Auswirkungen des Problems beginnen vielleicht damit, dass ein einzelner Benutzer nicht in der Lage ist, eine Aufgabe auszuführen, aber die durch jeden betroffenen Benutzer eingeschränkte Arbeit kann sich schnell summieren. Dies kann letztendlich zu einem umfassenden Produktivitäts- und Umsatzverlust führen.

Wir bei Smartsheet haben Kunden aus allen Branchen, bei großen wie kleinen Organisationen – und unser Ziel ist für jeden Kunden dasselbe. Wir arbeiten daran zu gewährleisten, dass jeder einzelne unserer Kunden dieselbe erstklassige Erfahrung mit Smartsheet genießen kann.

Der COVID-19-Faktor

Als ich im Mai 2020 zum UX-Team von Smartsheet kam, begann gerade der Lockdown aufgrund von COVID-19. Während Unternehmen darum kämpften herauszufinden, wie die Mitarbeiterproduktivität und die Moral mit einer plötzlich zu 100 % remote arbeitenden Belegschaft aufrechterhalten werden konnte, hatten wir das Glück, Smartsheet eingeführt und in der gesamten Organisation mit vollem Funktionsumfang bereitgestellt zu haben. Wir haben unsere Roadmap weiter vorangetrieben und dabei Projekte priorisiert, die Unternehmen dabei helfen sollten, eine dynamischere Arbeitsweise zu finden. Die Schaffung eines zugänglicheren Produkts war eines unserer Projekte mit der höchsten Priorität. Wir mussten als Team herausfinden, was ein „zugänglicheres Produkt“ für unsere Benutzer bedeutete und wie unser Plan aussehen würde, dies umzusetzen.

Die Roadmap für bessere Zugänglichkeit definieren

Zunächst mussten wir unsere VPAT aktualisieren, die veraltet war. Wir haben vier Hauptprobleme mithilfe von Tools wie WAVE und Accessibility Insights identifiziert, die eine Webseite prüfen und automatisch Verletzungen der Zugänglichkeit kennzeichnen können. Wir haben die folgenden Probleme mit hoher Priorität identifiziert und entschieden, sie unverzüglich zu beheben:

  • Farbkontrast: Gewährleistung, dass unsere Ui-Elemente ausreichend Kontrast haben, um nach WCAG 2.0 AA-Standards deutlich erkennbar zu sein
  • Alt-Text: Gewährleistung, dass sämtliche essenziellen Bilder und Grafiken eine ausreichende Beschreibung haben und dass nicht essenzielle Grafiken entsprechend ausgeblendet sind
  • ARIA-Kennzeichnungen: Gewährleistung, dass alle unsere UI-Elemente gut gemachte ARIA-Kennzeichnungen sowie sämtliche erforderlichen Beschreibungen aufweisen, um angemessenen Kontext zu bieten
  • ARIA-Tags: Gewährleistung, dass die angemessene Nutzung zusätzlicher ARIA-Tags, wie z. B. Rollen, im gesamten Produkt verfügbar sind, sodass wir die Benutzererfahrung besser kontrollieren können

 

Finding Accessibility Violations | Smartsheet Accessibility
Die Accessibility Insights Chrome-Erweiterung kennzeichnet eine Vielzahl von Verletzungen und umfasst Vorschläge zu deren Behebung.

 

Wir haben diese vier Probleme als Dinge ausgewählt, die wir identifizieren und beheben wollten, bevor wir mit dem formellen Testprozess mit einem externen Anbieter für Zugänglichkeitstests begonnen. Wir wollten die Auswirkungen der Tests durch Eliminierung von Verletzungen optimieren, von denen wir wussten, dass sie aufkommen würden. Wir wollten auch wichtige Probleme mit der Tastaturnavigation mit einem neuen Design angehen, einschließlich der Neugestaltung bestehender Funktionen.

Zugänglichkeit hat die oberste Priorität

Auch wenn die Behebung der Zugänglichkeitsprobleme in bestehendem Code ein wichtiger Schritt war, so stellte er nur eine Reaktion dar. Die Behandlung dieser Probleme als Code-Schwachstellen zwang die Technikteams dazu, die Behebung dieser Probleme zu Lasten geplanter Arbeiter zu priorisieren. Für den langfristigen Erfolg mussten wir die Zugänglichkeit früher in den Produktzyklus einplanen. 2020 standen wir vor der Aufgabe der Erstellung eines neuen Design-Systems: eine massive Umgestaltung unserer grundlegenden UI. Dies war für uns der perfekte Zeitpunkt, eine auf Zugänglichkeit basierende Erfahrung von Beginn an zu gestalten. Dank unserer Arbeit mit einem neuen Designsystem hatten wir den halben Weg bereits hinter uns.

Zugängliche Komponenten

Das neue Designsystem bestand aus einer Sammlung häufig verwendeter Komponenten, Schriftstile, Farben und Leitlinien für Abstände. Einzelne Komponenten wurden im Hinblick auf Folgendes entwickelt:

  • Erfüllung der Kontrastanforderungen
  • Einbeziehung von Tastaturfokusstatus sowie anderer Tools
  • Wir wollten den Designern die Bausteine für die Schaffung einer Benutzererfahrung mit einer konsistenten visuellen Hierarchie, Spacing, Ausrichtung und mehr an die Hand geben.

Uns fehlten die Tools und die Anleitung, um den Designern dabei zu helfen, auf Zugänglichkeit basierende Erfahrungen zu schaffen.

Hinzufügen zu unserem a11y-Toolkit

Noch bevor wir die vier Hauptprobleme für die Zugänglichkeit (a11y) identifiziert hatten, mussten wir sicherstellen, dass unsere internen Teams wussten, wie Sie a11y-Probleme in der Zukunft vermeiden könnten.

  1. Ich habe eine Komponentenbibliothek speziell für Zugänglichkeitsanmerkungen erstellt. Dadurch können die Designer detaillierte Spezifikationen für ihre Technikpartner in Zusammenhang mit der Tastaturnavigation, Alt-Text für visuelle Elemente, ARIA-Kennzeichnungen und andere Tags bereitstellen.

     

    11y Specs Component  and How to Use Them | Smartsheet Accessibility
    Ein Beispiel der a11y-Spezifikationen für unsere neue globale Top-Komponente (Design nicht final).

     

  2. Wir haben unserer Präsentation für UX-Designer, die neu bei Smartsheet waren, einen Abschnitt zu den spezifischen a11y-Komponenten und ihrer Verwendung hinzugefügt.
  3. Ich habe eine Präsentation gehalten, die durch den Prozess führte, mit einer neuen Funktion als Fallstudie zu Zugänglichkeitsüberlegungen wie ARIA-Rollen, Tab-Reihenfolge, ARIA-Kennzeichnungen und ARIA-Beschreibungen, um wertvollen Kontext für die Ergebnisse der Interaktion mit den Fokus verändernden Elementen zu bieten.

 

Using the Accessibility Library | Smartsheet Accessibility
Folie unserer Präsentation mithilfe des Figma Design System.

 

Noch tiefer eintauchen

Als nächstes haben wir alle unsere bestehenden Komponenten geprüft, sowohl diejenigen, die gestaltet, aber noch nicht als Code implementiert waren, als auch diejenigen, die sich im Prozess der Implementierung befanden, um sicherzustellen, dass keine neuen Code-Veröffentlichungen ohne Zugänglichkeitsprüfung stattfanden. Wir haben sichergestellt, dass sämtliche fehlenden Zugänglichkeitsspezifikationen vor Veröffentlichung der Funktion enthalten waren. Wir haben auch ein ähnliches Audit unserer bestehenden Komponenten gestartet, die bereits versandt wurden.

Und das ist erst der Anfang

Auch wenn sich Smartsheet erst am Anfang seiner Zugänglichkeitsreise befindet, so sind die Bemühungen, die wir unternommen haben, um Zugänglichkeitsüberlegungen in einer viel früheren Phase unseres Produktdesign- und -entwicklungszyklus einzubeziehen, von entscheidender Bedeutung. Wir sind weiter dabei, das Bewusstsein für die Auswirkungen eines zugänglichen Designs in der gesamten Organisation zu steigern, und sind darum bemüht, das Erlebnis mit Smartsheet für alle unsere Kunden zugänglicher und angenehmer zu machen.