Während Front-End-Anbieter
Vitaliy Fridman (Mitbegründer des
Smashing Magazine ) seit langem kennen und hoch schätzen, ist dieser Name mobilen Entwicklern und Testern möglicherweise weniger bekannt. Aber Vitaliy, der es kürzlich geschafft hat, in den
Top-Berichten von HolyJS 2018 Piter zwei erste Plätze gleichzeitig zu belegen, ist jetzt mit dem neuen Bericht „Extreme of Testing: Tricks aus den dunklen Ecken mobiler Schnittstellen“ zu Mobil- und Testkonferenzen gekommen.
In Erwartung von
Heisenbug und
Mobius stellten wir ihm daher Fragen zu UX-Tests und zu mobilen Schnittstellen: von der Durchführung solcher Tests speziell im Smashing Magazine bis hin zu Smartphones.
- Die Frage ist für diejenigen, die nicht tief in UX-Tests vertieft sind: Verstehen wir richtig, dass dies ein ziemlich eigenartiger und isolierter Bereich ist, obwohl er sich auf Tests bezieht? Der Unit-Test ist entweder grün oder rot, und Sie haben hier eine große Bedeutung.- Genau so. In den Tests, die ich durchführe, kann man nicht "grün" oder "rot" sagen. Hier gibt es viele subjektive Aspekte: Verschiedene Benutzer haben ein gewisses Maß an Vorurteilen und die auf anderen Websites erlernten Fähigkeiten. Beispielsweise kann eine Person nur die Austauschwebsite oder die Nachrichtenseite aufrufen. Die Art und Weise, wie er das Internet und die Schnittstellen sieht, unterscheidet sich sowohl von uns als auch von anderen Menschen. In diesem Zusammenhang ist es daher sehr wichtig, die Zielgruppe einer bestimmten Site zu untersuchen, zu sehen, welche anderen Sites sie besucht, wie sie sie verwendet und welche Gewohnheiten sie hat.
Das Schwierigste ist das Subjektive, das jemand mag, aber nicht jemand, der etwas Objektives in der Benutzeroberfläche auswählt, damit die Idee verschiedene Benutzer erreicht. Jeder versteht, was und wie getan werden muss. Man muss eher nicht nach dem suchen, was "gut" gemacht wird, sondern nach dem, was eine gute Genesungserfahrung hat.
Das heißt, selbst wenn eine Person mit einer anderen Benutzererfahrung kommt und einen Fehler auf der Website macht, ist es notwendig, dass sie schnell zu einem normalen Zustand zurückkehren und ihren Weg fortsetzen kann, wohin sie auch geht. Dies ist beispielsweise der wichtigste Teil, der nur schwer vollständig mit Code abgedeckt werden kann.
Jetzt habe ich also Probleme mit einem etwas anderen Plan. Ich sehe mir an, wie Sie kleine Details ändern können, zum Beispiel den Text von Anpassungsfehlern. Angenommen, wenn die Zahlung per Karte nicht erfolgreich war, müssen Sie dies nicht nur melden, sondern auch angeben, was genau passiert ist und wie dies behoben werden kann.
Meine Aufgabe ist es, all diese Details zu betrachten, und ein automatisches Testen solcher Prozesse ist unmöglich. Müssen Leute beobachten. Daher denke ich, dass ich bis zu einem gewissen Grad Therapeut oder Psychologe geworden bin. Ich schaue ständig auf Menschen, beobachte sie und ziehe Schlussfolgerungen daraus, wie sie auf den Bildschirm schauen, wo sie klicken, wo sie nicht klicken, wie sich ihr Finger- oder Mauszeiger bewegt. Dies ist eine etwas andere Seite, abstrakter, menschlicher.
- In den "üblichen" Tests ist die Menschheit bereits zu dem Schluss gekommen, dass es auch ohne Tests wichtig ist. Und im Fall von UX-Tests, bei denen alles abstrakter ist, winken sie oft mit den Händen und achten nicht genug darauf?- Ja, sehr oft. Das Problem ist, dass UX für mich immer eine große Anzahl von Experimenten ist. Es gibt eine Idee - Sie müssen sie ausprobieren und sehen, wie sie die Conversion oder das Engagement verändert. Oft besteht das Problem darin, dass wir davon ausgehen, dass Sie etwas ändern und sofort ans Licht bringen können. In UX ist der Effekt jedoch oft ein sehr langer, langfristiger Effekt.
Wenn Sie ein Popup auflegen und sehen, wie viele Personen darauf klicken, ist dies ein kurzfristiger Effekt, der leicht zu messen ist. Wenn es beispielsweise beim Kauf schwerwiegende Fehler gibt (eine Person versteht nicht, was von ihr verlangt wird, um eine Bestellung abzuschließen), bemerkt sie dies natürlich schnell. Manche Dinge tauchen aber erst lange auf.
Es gibt einige Dinge, die beispielsweise Texte betreffen, bei denen nicht klar ist, was eine Funktion, ein Produkt oder ihr Zweck bedeutet: Sie müssen einige Zeit einplanen, um festzustellen, ob Benutzer diese Funktion verwenden, zu ihr zurückkehren oder sie wegwerfen. weil sie anfangs nicht verstanden hatten, was sie tat. Dies kann anhand von Klickraten und Engagement-Metriken gemessen werden. Das Problem besteht jedoch möglicherweise nicht darin, dass Benutzer diese Funktion nicht benötigen, sondern dass nicht klar ist, wie sie dem Benutzer hilft oder wann sie genau verwendet werden soll. Das einzige, was wir tun, um diesen Prozess irgendwie zu systematisieren, ist, jeden Freitag regelmäßig ein Benutzerinterview mit mindestens sechs Benutzern durchzuführen.
Es gibt eine Version des Produkts, wir haben eine kontinuierliche Bereitstellung, einige Funktionen - wir möchten herausfinden, ob eine Person versteht, was in der Benutzeroberfläche geschieht. Ist es für ihn schneller, zur Bezahlung der Bestellung oder zu den Informationen zu wechseln, die er benötigt? Wir betrachten die Konvertierung und wie eine Person versteht, was im Allgemeinen in der Benutzeroberfläche geschieht. Ist es für sie schneller, an der Kasse zu den Informationen zu gelangen, nach denen sie sucht? Dies ist die einzige Möglichkeit, eine Automatisierung durchzuführen, wie dies bei klassischen Tests der Fall ist.
- IT-Giganten nähern sich UX-Tests sorgfältig mithilfe von Eye-Tracking und dergleichen. Aber kleine Unternehmen mögen denken: "Dieses Google ist bereit, ein spezielles Labor zuzuweisen, aber für uns etwas, das wir in UX-Tests einmischen können." Können Sie hier ohne große Ressourcen Ergebnisse erzielen?- Natürlich. Es gibt so viele Ressourcen, einschließlich kostenloser, die das Testen ermöglichen. Eye Tracking kann helfen, aber in schwierigen Situationen. Es kann zum Beispiel bei Routen verwendet werden, bei denen Menschen nicht finden können, wie sie zu einigen Räumen im Museum gelangen. In diesem Fall ist es hilfreich zu wissen, wohin die Leute schauen, wenn sie ins Museum gehen, und warum sie nicht finden, was es sehr leicht zu finden scheint. Sie können in der Benutzeroberfläche überprüfen, wo Personen suchen, worauf sie achten und was sie sehen.
Heatmaps sind eine ziemlich einfache Methode, es gibt viele Werkzeuge, um sie zu erstellen. Sie analysieren den Datenverkehr und generieren den Datenfluss. Sie können Videos für jeden Benutzer aufzeichnen - wohin er gegangen ist, wo sich seine Maus befand, wo sie sich bewegte, wo er geklickt hat, wohin er zurückgekehrt ist und so weiter.
Auf der anderen Seite gibt es Tools, mit denen Sie Leute aus dem Pool der Tester einstellen können, die für jeden Test Geld erhalten und ihnen eine Aufgabe geben - zum Beispiel die Website usertesting.com. Dies ist bereits viel teurer (49 US-Dollar pro Videotest), aber Sie können die Demografie auswählen, an der Sie interessiert sind, der Person eine Aufgabe geben und dort das sogenannte „Think-Aloud-Protokoll“ verwenden. Dies bedeutet, dass eine Person, wenn sie zur Hauptseite der Benutzeroberfläche wechselt und zur Ausführung der Aufgabe von einer zur anderen wechselt, sagen muss, ob sie alles versteht, was sie sieht, worum es auf dieser Website geht und was sie erwartet, wenn sie auf die Schaltfläche klickt. Wenn Sie 6-7 solcher Videos für mobile Geräte und 6-7 für den Desktop sammeln, sehen Sie viele Muster. Darüber hinaus müssen Sie sorgfältig überwachen, wo Personen aussehen und wie sie sich mit der Maus oder dem Touchpad verhalten.
Sehr oft gibt es Situationen, in denen jemand etwas in der Benutzeroberfläche nicht versteht. Die Leute lieben Knöpfe und alle interaktiven Elemente. Sie beginnen sich in ihre Richtung zu bewegen, klicken aber nicht darauf, sondern drehen die Maus um die Schaltfläche. Und erst dann klicken sie. Dies ist eines der Anzeichen dafür, dass eine Person nicht ganz versteht, was passieren wird, wenn Sie einen Knopf drücken. Solche Dinge können ohne sehr teure Geräte leicht gefunden werden.
"Bei anderen Arten von Tests gibt es eine Idee der Aufgabentrennung:" Hier lassen wir die Entwickler Komponententests für den Code schreiben, aber manuelle Tester werden dies tun. " Und UX-Tests - Wessen Pflege ist das?- Ich denke, das hängt von der Struktur des Unternehmens ab. Westliche Unternehmen haben oft UX-Designer oder sogar Usability-Tester. Es ist klar, dass sie dies den ganzen Tag tun. Aber wenn das Unternehmen klein ist, ist die andere Person verantwortlich. Wenn es einen Front-End-Designer gibt (der näher an UX als an JavaScript liegt), hat er einen. Und jede Person, die sich mit Prototypen befasst, ist dafür verantwortlich, solche Tests durchzuführen, wenn es keinen separaten Usability-Tester gibt.
- Und wie werden UX-Tests speziell für das Smashing Magazine durchgeführt?- Bei uns ist alles sehr einfach: Sobald neue Ideen auftauchen, versammeln wir 5-7 Personen, denen ich persönlich Aufträge gebe und Interviews führe.
Die Aufgabe besteht darin, Informationen zu finden oder eine Zahlung vorzunehmen. Ich beobachte, wie sie es machen, mit ihrer Zustimmung nehme ich das Verhalten und das Gesicht auf und schaue mir jedes Video sehr, sehr langsam an. Ich brauche anderthalb Stunden für ein Video, um einen detaillierten Blick darauf zu werfen, wie sich Menschen bewegen, die Maus benutzen, wo sie aussehen, was sie bemerken und was nicht.
Wir generieren auch automatisch eine Heatmap: Wo Menschen klicken, gibt es etwas, das sie nicht bemerken. Basierend auf diesen Daten verbessern wir die Benutzeroberfläche und tun dies eine Woche später. Wir haben eine kleine Firma mit weniger als 20 Mitarbeitern. In größeren Unternehmen wird es ungefähr gleich aussehen, nur der Unterschied besteht darin, dass mehrere Tests gleichzeitig durchgeführt werden.
Und wir überwachen nicht nur, was passiert, wenn Sie die Schaltfläche, ihre Position oder den Text auf der Seite ändern. Es gibt zwei Arten von Tests: Einerseits A / B-Tests - Tasten und andere kleine Dinge. Auf der anderen Seite können Sie versuchen, etwas vollständig zu ändern. Dies wird als A / Z-Test bezeichnet. Zum Beispiel, wenn wir das Design vollständig ersetzen und testen.
Es mag ähnliche Farben und Typografien haben, aber es wird sich in Bezug auf die Organisation von Informationen und das Layout mit einer völlig anderen Anordnung aller Komponenten völlig unterscheiden. Wenn Sie einfach die Position der Schaltfläche ändern, erreichen wir höchstwahrscheinlich ein lokales Maximum, eine lokale Konvertierung, unabhängig vom KPI. Ein völlig anderes Design kann es Ihnen ermöglichen, auszubrechen und ein völlig anderes Umwandlungsniveau zu erreichen, was mit lokalen kleinen Messungen schwierig ist.
- Können Sie ein konkretes Beispiel nennen, als Sie zum ersten Mal etwas im Smashing Magazine gemacht und dann nach dem Test erheblich geändert haben?- Zum Beispiel, als sie ein kostenpflichtiges Abonnement mit verschiedenen Funktionen einführten. Wir hatten drei Tarifpläne, wir haben lange darüber nachgedacht, wie viel die Leute für jeden von ihnen bezahlen können.
Und dann haben wir getestet und festgestellt, dass diese Pläne für viele unserer Leser völlig ungeeignet sind. Sie, insbesondere Menschen in großen Unternehmen, brauchten einen Jahresplan: um nicht jeden Monat zu berichten, wohin 7 bis 9 Dollar gingen. Die Leute konnten den Jahresplan nicht finden - obwohl er auf Anfrage war, aber sie konnten ihn einfach nicht finden. Infolgedessen haben wir die entsprechende Schaltfläche hinzugefügt, die Benutzeroberfläche ein wenig geändert und die Leute haben es bemerkt.
- Kommen wir zum Schicksal der mobilen Schnittstellen. Früher konnte man oft hören, wie der Anteil des mobilen Internets wächst - und was ist damit im Jahr 2018, als die Smartphone-Verkäufe aufhörten zu wachsen?- 2018 geht das weiter. Darüber hinaus würde ich sagen, dass dies ein sehr wichtiges Jahr ist, da wir in diesem Jahr viele Wendepunkte gesehen haben.
Es spielt keine Rolle, was wir nehmen - Einzelhandel, Konsum von Musik- und Videoinhalten, sogar Radio - fast überall sehen wir, dass der mobile Verkehr den Desktop-Verkehr überschritten hat. Ich würde nicht sagen, dass der Desktop-Verkehr dramatisch sinkt, einfach nicht wächst und der mobile Verkehr sehr stark wächst.
Der mobile Verkehr kommt erst jetzt nach Indien, Asien, Afrika und Südamerika - es gibt ein enormes Wachstum, das viel höher ist als das, was wir jetzt in Europa oder Amerika haben.
Und am Ende ist der mobile Datenverkehr sehr wichtig, da die mobile Konvertierung zum ersten Mal in diesem Jahr die Desktop-Konvertierung überschritten hat. Seit vielen Jahren sagen Vermarkter, dass es sich insbesondere nicht lohnt, in den Mobilfunkmarkt zu investieren, da der Umsatz dort gering ist. In diesem Jahr hat sich alles geändert - jetzt gibt es nichts Wichtigeres als mobilen Verkehr.
Hier geht es nicht nur um Telefone, sondern auch um die Apple Watch, andere Geräte und das Internet der Dinge. Mit dem Internet verbundene Kühlschränke können auch einige Informationen anzeigen. Natürlich sprechen wir auch über Dinge wie die Konversationsoberfläche und Chat-Bots, die hauptsächlich für den mobilen Einsatz optimiert sind.
- Noch vor Jahren wurde das Mobile First (die Erstellung von Schnittstellen hauptsächlich für mobile Geräte) zum Schlagwort in der Benutzeroberfläche - und bedeutet der aktuelle „Wendepunkt“, dass dies für viele Unternehmen jetzt die Hauptpraxis des Schlagworts ist?- So ist es. Ich arbeite derzeit mit einem Unternehmen zusammen, das ernsthaft darüber nachgedacht hat, wie es das gesamte Unternehmen organisiert. Anfangs haben sie den Mobilfunkmarkt ignoriert, und der Desktop gibt es schon seit 15 Jahren - es ist ein großer E-Commerce-Einzelhändler. Und plötzlich erschien ein Mobilfunkmarkt.
Natürlich machten sie Optimierung, Responsive Design. Das ist schon gut, aber es gibt immer noch Android- und iOS-Anwendungen. Infolgedessen stellte sich heraus, dass die überwiegende Mehrheit der Entwickler und Designer an der Desktop-Site arbeitete und eine kleine Gruppe an der mobilen Site. Jetzt denken sie sehr viel darüber nach, was sie ändern müssen, weil sie diesen Trend bemerken.
Der Desktop ist stabil, in seinem Fall wächst er nicht, aber der Mobilfunkmarkt und der Datenverkehr wachsen sehr stark. Daher planen sie, ihre gesamte Architektur so zu ändern, dass sie alles haben, um zuerst mobil zu starten. Einige Funktionen werden zuerst nur für mobile Geräte und dann für den Desktop verfügbar sein.
Sie mussten viel darüber nachdenken, was dies für die Organisation eines Teams bedeutet, da ein kleines Team jetzt eine sehr große Verantwortung trägt. Außerdem haben sie darüber nachgedacht, wie sie zuerst auf Mobilgeräte umsteigen können, nicht nur in Bezug auf Schnittstellen, sondern auch, wie eine „digitale Transformation“ des gesamten Unternehmens durchgeführt werden kann.
Für sie wie für viele ist es wahrscheinlicher, dass es nicht einmal mobil ist, sondern zuerst Inhalte. Es geht darum, wie es möglich ist, Informationen zu jedem Formfaktor zu organisieren: Uhren, Telefone, Tablets und so weiter. Der Organisation, den Filtern und der Anzeige von Informationen auf zugängliche Weise wird mehr Aufmerksamkeit geschenkt, damit sie nicht zu viel sind und von einer Person bequem verwendet werden können. Auch dies ist der Moment, in dem geeignete Tests sehr, sehr wichtig werden.
- Lohnt es sich, deutlich unterschiedliche Schnittstellen für die mobile Version der Website und den Desktop zu erstellen, oder eher etwas Adaptives mit minimalen Änderungen?- Ich denke, dass es Situationen gibt, in denen Sie sehr unterschiedlich sein müssen. Zum Beispiel gab es ein IKEA-Projekt, mit dem Sie die "Küche Ihrer Träume" gestalten können. Ein solches Projekt kann nicht einfach zwischen dem Desktop und mobilen Geräten „übertragen“ werden, sie haben unterschiedliche Funktionen. Auf dem Desktop sieht es aus wie eine normale Desktop-Anwendung und auf dem Handy wie eine AR / VR-Anwendung, in der Sie das Objekt in 3D direkt vor sich sehen können. Dies ist ein völlig anderes Szenario, bei dem das Gerät ausgenutzt wird.
Und für klassische Websites würde ich sagen, dass es am einfachsten ist, eine Website mit minimalen Änderungen zu erstellen. Dies schließt natürlich die Existenz von Anträgen nicht aus. Darüber hinaus ist es jetzt mit Hilfe von PWA (Progressive Web Apps) möglich, die Site auch zu einer Anwendung zu machen, die auf Systemebene installiert werden kann. Im Allgemeinen ist es für die meisten jedoch am sinnvollsten, eine Site und eine Codebasis zu haben und diese so oft wie möglich auf verschiedenen Geräten zu verwenden.
- Smashing Magazine ist auch eine progressive Web-App, oder?- Ja, Sie können die Site offline verwenden, sie als Anwendung hinzufügen, es wird zwischengespeichert. Das ist aber nichts Besonderes. Und es gibt Unternehmen, die versuchen, so etwas wie „Offline-E-Commerce“ zu erstellen, wenn eine Person einen Offline-Kauf tätigen kann. Es ist nicht so einfach, aber die Idee ist gut, denn wenn Sie PWA verwenden, haben Sie eine sehr gute Leistung. Dies bedeutet, dass Sie schnell eine Bestellung aufgeben (oder zumindest vorbereiten) können, ohne Fehler und ständigen Zugriff auf den Server.
Wie machen wir das zum Beispiel im Fall von Git, wenn ich eine Art Commit geschrieben habe und dann ein Push an den Server erfolgt, aber alle Änderungen zuerst lokal erfolgen. Die Idee ist ähnlich und ich denke, es könnte ziemlich gut funktionieren. Dies ist ein großer Vorteil von PWA.
- Das Smashing Magazine verfügt über atypische Benutzerstatistiken (z. B. werden Browserfreigaben überhaupt nicht wie im gesamten Internet verteilt). Daher möchte ich klarstellen: Wie ist Ihr Verhältnis zwischen mobilen Besuchern und Desktop?- Vor drei Jahren hatten wir 11% des mobilen Verkehrs, jetzt ungefähr 22%. Ehrlich gesagt ist das sehr klein. Tatsache ist, dass wir sehr lange Artikel haben. Das Lesen dauert 40-50 Minuten. Es ist ziemlich schwierig, so viel vom Telefon zu lesen. Im Durchschnitt haben Websites jetzt viel mehr mobilen Datenverkehr, aber aufgrund unserer Funktionen haben wir diesen Punkt noch nicht erreicht.
- Artemy Lebedev kritisierte mobile Schnittstellen und sagte: "Je größer der Bildschirm, desto besser die Schnittstelle." Haben Sie das Gefühl, dass es mit dem Übergang zu kleinen Bildschirmen schwieriger geworden ist, ein gutes Design zu erstellen?- Ich denke, dass es im Gegenteil bequemer geworden ist, ein schönes Design zu erstellen. Ich bin ein großer Fan jeglicher Art von Einschränkungen. Jedes Projekt braucht eine Einschränkung. Bei der Entwicklung eines Konzepts versuchen wir oft, uns zu zwingen, außerhalb der üblichen Formen zu denken. Wir fangen an zu entwerfen und entwickeln Design, indem wir uns selbst Grenzen setzen.
Beispiel: "In diesem Projekt können wir nicht mehr als zwei Farben verwenden." Dies bedeutet nicht, dass wir nur zwei Farben verwenden, aber es führt uns zu einer ungewöhnlichen Lösung. Oder wir sagen, dass wir keine Dreiecke, Kreise und Quadrate verwenden werden. Und was können wir sonst noch verwenden? Die Größe mobiler Geräte ist an sich schon eine große Einschränkung. Und wir finden interessante Lösungen.
Ich denke, Sie können überall eine schöne Oberfläche zeichnen. Natürlich treten irgendwann Schwierigkeiten auf. Zum Beispiel haben Chat-Bots keine visuellen Komponenten in Bezug auf Farben oder Typografie. Sie senden einfach den Text. Aber es kann auch Schönheit darin sein.
Je weiter wir in Richtung Uhr oder kleiner Geräte oder Konversationsschnittstelle gehen, desto mehr Sichtbarkeit geht verloren, nur das Wesentliche bleibt übrig.
Es ist wichtig, dass die Site, das Unternehmen, einen eigenen Kern hat, der erhalten bleibt, wenn Sie alle Bilder, Farben und Typografien entfernen. Dies lässt uns darüber nachdenken, was für die Marke wichtig und notwendig ist, und unsere Aufmerksamkeit darauf richten, damit sich dieser Kern manifestiert. Und jetzt verstecken wir uns hinter guter Typografie und gutem Design.- Und welche der Schnittstellen passt im Prinzip nicht zum mobilen Format? Beispielsweise fallen Tabellen ein, die nicht normal auf den Bildschirm passen. Gibt es noch andere Stolpersteine?— , , . , , . , . , — , , . , . , , , .
, . , . , , .
— , , , ?— , . IKEA. , WebVR, , - , . , , . , , .
, , , mobile first content first. , desktop last. . , Smashing Magazine . mobile first, 1800 , .
. , . . , mobile first, , . , , mobile , . . mobile first and desktop first.
— «» . «» , . , , UX?— . , . 2% , «» . 98% , .
, . , , . , «» . .
Vitaly wird nächste Woche in Moskau auf unseren beiden Konferenzen Abschluss-Keynotes halten: Heisenbug (vom 6. bis 7. Dezember) und Mobius (8. bis 9. Dezember). Im ersten wird es neben seiner Rede noch viele weitere interessante Berichte über Tests und im zweiten über die mobile Entwicklung geben .
