UX testowania A/B dla frameworków opartych na komponentach

Zapoznanie się z kodowaniem może być bardzo korzystne dla projektantów. W związku z tym wiele osób zanurkowało i nauczyło się pracować z kodem (lub przynajmniej do pewnego stopnia mówić jego językiem), aby być bardziej efektywnym podczas współpracy z inżynierami. JavaScript, prawdopodobnie ulubiony język skryptowy w sieci, ma silną społeczność, która kształtuje przyszłość sieci za pomocą tworzonych przez siebie frameworków.

Ze względu na ich strukturę i ograniczenia techniczne, frameworki, takie jak Vue.js, React.js i Material UI, są ważne dla projektantów, ponieważ działają jako elementy konstrukcyjne dla solidnych systemów projektowych. Co więcej, wiedza o tym, jak działa kod, przydaje się również podczas ułatwiania technik projektowania opartego na danych w środowisku programistycznym, takim jak testy A/B.

W ramach niedawnego projektu dla startupu tworzącego platformę zarządzania pacjentami, która łączy ludzi ze specjalistami w zakresie zdrowia psychicznego, stwierdziliśmy, że tworzenie i zarządzanie kontami pacjentów przy jak najmniejszym tarciu było kluczowe dla wielu naszych doradców klinicznych. Skupienie się na stworzeniu intuicyjnego przeglądania profili pacjentów było kluczowe, podobnie jak skonfigurowanie optymalnego przepływu użytkowników do tworzenia, edytowania i przypisywania pacjentom działań związanych z dobrostanem.

Omawiając projekt z kierownikiem technicznym, ustalono, że zasadniczo aplikacja była dość prosta: klinicyści potrzebowali możliwości tworzenia i edytowania profili pacjentów, przeglądania biblioteki działań wellness i przypisywania pacjentom lekcji.

Zespół postanowił dostosować projekt projektu do struktury interfejsu Material UI, wykorzystując podstawowe elementy, takie jak wyskakujące okienka, karty graficzne, przyciski aktywne/nieaktywne, listy akordeonów oraz szereg powiadomień o powodzeniu i ostrzeżeniach. Po zdefiniowaniu komponentów, które miałyby składać się na podstawowe elementy, zespół produktowy przedstawił różne opinie na temat wyglądu aplikacji.

Podczas dyskusji na temat projektu interfejsu użytkownika projektu programista wyjaśnił różnicę między komponentami funkcjonalnymi i wyświetlającymi oraz w jaki sposób komponenty funkcjonalne kontrolują przepływ danych aplikacji, podczas gdy komponenty wyświetlania są istotne dla interfejsu użytkownika i układu.

Mówiąc prościej, komponenty wyświetlania definiują język wizualny aplikacji, a komponenty funkcjonalne pomagają je ożywić .

Ta struktura oferuje projektantom unikalne możliwości, ponieważ zazwyczaj kod związany z zarządzaniem logiką aplikacji jest izolowany do pliku innego niż ten, który kontroluje układ interfejsu użytkownika. Wykonane poprawnie, takie podejście do projektowania oprogramowania zapewnia modułową i solidną bazę kodu , która umożliwia proces oparty na testach.

Czy identyczne funkcje w alternatywnych układach można przetestować przy minimalnym wysiłku inżynieryjnym? Odpowiedź brzmi „tak”, a jeśli zostanie wykonana metodą A/B na wczesnym etapie procesu, zostanie ona wkomponowana w cykl rozwoju produktu szczupłego. (Rozwój produktu Lean jest ukoronowaniem japońskiej koncepcji kaizen, filozofii biznesowej polegającej na wprowadzaniu stopniowych ulepszeń w przepływach pracy, praktykach, technikach i – w tym przypadku – produktach).

Eric Ries, seryjny przedsiębiorca i autor, omawia praktyczny przewodnik po cyklu życia produktów szczupłych w swojej książce The Lean Startup . Metoda podąża za przepływem pracy tworzenia produktów z jasną hipotezą, testowaniem tego, co zostało zbudowane, i iteracją na podstawie tego, czego się nauczyłeś.

Metoda Lean Startup

Definiowanie podejścia do testów A/B

Testy A/B to podstawowy element zestawu narzędzi każdego wytrawnego profesjonalisty UX. Jego rolą w cyklu życia oprogramowania jest pomoc w poprawie użyteczności aplikacji. W połączeniu z danymi z map ciepła zespoły mogą uzyskać cenny wgląd w zachowanie użytkowników, zwłaszcza jeśli chodzi o punkty tarcia w przepływie aplikacji.

Zanim zaczniesz testowanie A/B, oto kilka pytań, które pozwolą skoncentrować się na tym procesie:

• W jaki sposób testy A/B są wykorzystywane w UX?
• Jakie metody analizy A/B są dostępne?
• Po co projektować testy A/B podczas tworzenia wireframe'ów?
• Co testujemy?

Najpopularniejszą metodą testowania A/B na dużą skalę jest test dzielony, który udostępnia użytkownikom na żywo nieco inne wersje aplikacji lub strony internetowej. Test dzielony jest często poza zakresem i/lub budżetem dla startupu lub małej firmy. Istnieją jednak alternatywy dla testów dzielonych na dużą skalę, które są bardziej dostępne i obejmują: wywiady osobiste, grupy fokusowe i usługi online, które łączą Cię z siecią użytkowników testowych.

Projekt oparty na testach A/B

Podczas procesu tworzenia szkieletu ważne jest, aby rozważyć możliwości testowania A/B z perspektywy układu i nawigacji. Proste odmiany komponentów wyświetlacza mogą łatwo zmienić sposób prezentacji informacji. Struktury oparte na komponentach dają swobodę eksperymentowania ze sposobem organizacji treści bez konieczności ponownego projektowania podstawowych funkcji produktu.

Jak każde przedsięwzięcie projektowe, skuteczne testowanie A/B powinno odbywać się według jasno określonej metodologii. Najpierw zdecyduj, dla jakiej zmiennej testujesz. Następnie określ, co stanowi sukces. Zakończ, oceniając dane i ustal, jaki powinien być następny krok.

Na przykład w jednym przypadku przetestowano hierarchię układu. Układ A składał się z dwukolumnowej siatki, w której po lewej stronie ekranu znajdował się składnik listy pacjentów, a po prawej składnik profilu pacjenta. Układ B zawierał jednokolumnową listę pacjentów, która prowadziła do elementu profilu pacjenta.

Nasz pierwszy test dotyczył przejrzystości. Podczas rozmów kwalifikacyjnych pytaliśmy doradców klinicznych, który z tych dwóch projektów jest najbardziej zorganizowany. Wbrew wewnętrznym założeniom, jednokolumnowa siatka została zdecydowanie wskazana jako bardziej intuicyjne rozwiązanie projektowe. Nasi doradcy uznali, że połączenie listy pacjentów i profilu na tym samym wyświetlaczu jest „zajęte” i „zaśmiecone”. Natomiast słowa użyte do opisania jednokolumnowego układu siatki były jasne i „czyste”.

„Model skrzynki komponentowej”

W tej aplikacji internetowej wykorzystaliśmy React, framework oparty na koncepcjach zarządzania stanem i modułowych komponentach. React to deklaratywna, wydajna i elastyczna biblioteka JavaScript do budowania interfejsów użytkownika. Pozwala komponować złożone interfejsy użytkownika z małych, odizolowanych fragmentów kodu zwanych „komponentami”. Ta modułowość przekłada się na elastyczność podczas pracy nad produktem z udziałem zarówno programistów, jak i projektantów.

Zrozumiełem ten framework inspirowany modelem pudełkowym HTML+CSS. Component Box Model oferuje modalność organizacyjną, za pomocą której można tworzyć bloki konstrukcyjne dla aplikacji. Szczególnie dobrze nadaje się do opracowywania systemu projektowania dla szybko rozwijających się projektów.

Aby zachować zwinność myślenia projektowego, można zastosować zestaw zasad projektowych, które są szczególnie dobrze dopasowane do cyklu życia szczupłego rozwoju produktu.

• Pierwsza zasada: grupuj podobne konteksty i działania.
• Druga zasada: niech architektura informacji pomoże w uproszczeniu przepływu „stanu” między komponentami.
• Trzecia zasada: Projektuj skalowalne systemy wizualne, aby usprawnić sposób, w jaki programiści rozumieją i wdrażają projekty.

Grupowanie podobnych kontekstów

Rozważ model mentalny użytkowników — grupuj podobne wyniki i działania na podstawie ich „kontekstu użycia”. Zastanów się, czy użytkownicy muszą tworzyć, czytać, aktualizować i usuwać elementy w każdym kontekście oraz czy musisz przekazać opinię dotyczącą ich działań. Podczas definiowania testu A/B dla konkretnego scenariusza użycia należy wziąć pod uwagę układ, sposób dostępu do danych wejściowych i metody nawigacji.

Uprość przepływ interakcji „stanu”

W React przepływ „stanu” odnosi się do tego, w jaki sposób informacje poruszają się w aplikacji, jak komponenty pomagają organizować dane i jak są wyświetlane. Zazwyczaj stan wpływa do komponentów wyświetlania z komponentów funkcjonalnych działających jako kontenery. Projektanci mogą przygotować się do testów A/B, wstępnie określając, w jaki sposób komponenty funkcjonalne mogą zmieniać układ aplikacji poprzez zmianę sposobu oceny komponentów wyświetlania.

Opracuj solidne systemy projektowe

Używanie komponentów wyświetlania do opracowywania standardów dla elementów wizualnych, takich jak typografia, przyciski, dane wejściowe, modalności i karty, pomaga zapewnić bloki konstrukcyjne dla znormalizowanego języka projektowania. Solidne systemy wizualne zapewniają elastyczność, dzięki której projektanci i programiści UX są na tej samej stronie, jeśli chodzi o komponenty, do których odwołują się makiety.

Streszczenie

Sukces projektowania opartego na testach A/B jest związany z synergią między zespołami produktowymi i technicznymi. Projektanci, którzy chcą zastosować tę metodę, powinni dokładnie określić, gdzie i jak testować. Poświęć czas na opracowanie hipotezy i ustalenie, czego chcesz się dowiedzieć. Nie rozpraszaj się. Trzymaj się tego — bardzo łatwo jest odejść od swojej metody.

Ten proces nigdy się nie kończy i ewoluuje wraz z rozwojem produktów. Projektanci stosujący strategię rozwoju produktu opartą na testach powinni wykorzystać możliwości uczenia się, które pojawiają się w całym cyklu rozwoju produktu.

Komponenty, podobnie jak systemy projektowe, dotyczą modułowości i ponownego wykorzystania wzorów, a nie układu czy stylu. Z perspektywy projektanta elastyczność testowania, udoskonalania i ulepszania produktów za pomocą testów A/B może pomóc w opracowywaniu produktów bardziej skoncentrowanych na użytkowniku, co ostatecznie prowadzi do ich większego sukcesu.

•••

Dalsza lektura na blogu Toptal Design:

• Wykorzystanie modeli mentalnych w projektowaniu UX
• Testowanie UX dla mas: proste i efektywne kosztowo
• Podstawowy przewodnik po użyteczności mobilnej
• Wartość badań użytkowników
• Zrozumienie systemów i wzorców projektowych