15 narzędzi, które ułatwią pracę nad poprawą User Experience Twojego produktu

Projektowanie zorientowane na użytkownika wymaga od nas skupienia się na jego potrzebach, zachowaniach i przyzwyczajeniach. Produkty skonstruowane zgodnie z tą zasadą, oprócz dostarczania określonej wartości, stawiają na intuicyjność i łatwość obsługi.

Dobre rozwiązania nie są dziełem przypadku – są efektem wieloetapowej pracy badawczej, koncepcyjnej i projektowej. Na temat narzędzi, które mogą pomóc w ich stworzeniu, można byłoby stworzyć obszerny podręcznik, ja postaram się przedstawić jego skondensowaną formę.

Z artykułu dowiesz się, które z nich warto wziąć pod uwagę podczas tworzenia produktów interaktywnych. Poniżej przedstawiłam narzędzia, po które sięgamy w Symetrii podczas zmagań nad poprawą doświadczenia użytkowników naszych klientów, podczas następujących etapów pracy nad produktem:

  • Badania i analizy,
  • Warsztaty i projektowanie,
  • Tworzenie treści,
  • Współpraca w zespole.

Badania i analizy

1. Google Analytics (www.google.com/analytics)

Darmowe narzędzie dostarczające wielu cennych informacji o użytkownikach – już podstawowe raporty pozwolą przyjrzeć się ruchowi w serwisie i dowiedzieć się kim są i skąd przychodzą. Dzięki śledzeniu zdarzeń i ustawieniu celów będzie możliwe monitorowanie skuteczności prowadzonych kampanii i stopień realizacji postawionych przed serwisem zadań. Wystarczy, że kod strony uzupełnimy o kod śledzący, który umożliwi zbieranie danych. Ich analiza wskaże obszary wymagające optymalizacji i będzie pierwszym krokiem do poznania użytkowników.

Dlaczego warto: konto Google Analytics umożliwia bezwysiłkowy monitoring efektywności strony i bieżącą identyfikację obszarów wymagających optymalizacji.

2. Morae (www.techsmith.com/morae)

Rozbudowany niezbędnik badacza. W skład pakietu wchodzą aż trzy narzędzia – Recorder, Observer i Manager, dzięki którym zarejestrujemy, przetransmitujemy, a także zanalizujemy i zedytujemy nagrania z badań z użytkownikami. Sprawdzi się zarówno w przypadku testów użyteczności prowadzonych w laboratorium (np. na prototypie aplikacji, na urządzeniach mobilnych), jak i warsztatów czy fokusów.

Dlaczego warto: bogaty moduł analityczny umożliwia automatyczne obliczanie wartości wskaźników, edycję obrazu i dźwięku oraz produkcję krótkich klipów. Parametry nagrania możemy konfigurować w zależności od typu badania – zarejestrować ekran urządzenia, ścieżkę kliknięć, postać respondenta lub wyłącznie dźwięk.

3. UserZoom (www.userzoom.com)

Wielofunkcyjna platforma do przeprowadzania zdalnych testów użyteczności. Dostarcza szczegółowych informacji o zachowaniach i opiniach odbiorców naszego produktu. Rekrutacja respondentów odbywa się w serwisie, za pomocą specjalnego modułu – wykonują oni zadania na swoim urządzeniu, podczas naturalnego korzystania ze strony. Połączenie badań jakościowych z ilościowymi pozwala uchwycić istotę problemu i naprowadzić na drogę jego naprawy.

Dlaczego warto: rozbudowany moduł analityczny i badawczy – oferuje możliwość definiowania różnych typów zadań. Pozwala przeprowadzić test pierwszego wrażenia lub zweryfikować architekturę informacji.

Pamiętaj, że: narzędzie jest dość drogie – w przypadku, gdy nie realizujesz wielu zdalnych testów użyteczności lub gdy skupiasz się na określonym ich rodzaju warto rozważyć tańszą, mniej rozbudowaną alternatywę.

4. Personapp (www.personapp.io)

Darmowa aplikacja do tworzenia person – przykładów modelowych użytkowników grupy docelowej. Do dyspozycji mamy podstawowy schemat (zawierający metryczkę, zachowania, potrzeby i cele) i wybór szkicowych portretów. Uzupełniony szablon możemy następnie wydrukować lub udostępnić członkom zespołu – przydatne w momencie, gdy zależy nam na czasie.

Personapp1

Przykładowa persona w Personapp

 

Pamiętaj, że: narzędzie sprawdzi się wyłącznie w przypadku podstawowego schematu – w momencie, gdy chcemy wzbogacić personę o kategorie specyficzne dla danego projektu, konieczne będzie zbudowanie szablonu od podstaw.

5. Optimizely (www.optimizely.com)

Zależy Ci na tym, by wprowadzone zmiany przełożyły się na satysfakcjonujące rezultaty? Testy A/B to prosty sposób na porównanie dowolnych elementów strony (np. umiejscowienia lub etykiety przycisku) i wskazanie tego, który lepiej spełnia swoją rolę. Badanie zainicjujesz za pomocą kilku kliknięć – aby uruchomić test wystarczy dodać do kodu strony wygenerowaną linię kodu. Resztę załatwi algorytm, który oszacuje, która wersja serwisu jest lepiej odbierana przez użytkowników, a w efekcie – skuteczniejsza.

Dlaczego warto: kolejne wersje testowanej strony generujemy przy pomocy wizualnego edytora WYSIWYG, dzięki czemu zmiany możemy ekspresowo „wyklikać” bez udziału grafika czy dewelopera, minimalizując koszty.

Warsztaty i projektowanie

Pierwszym narzędziem, po które powinien sięgnąć każdy projektant, jest… kartka i coś do pisania (a najlepiej flamastry różnej grubości). Jest to najtańszy i najszybszy sposób wizualizacji pomysłów. Możemy dowolnie zmieniać to, co nanieśliśmy na papier, a nieudany projekt po prostu wyrzucić i zacząć od początku. Po wstępnej wizualizacji pomysłów przychodzi czas na przeniesienie naszej wizji do aplikacji, które pozwolą zobrazować oczekiwane interakcje.

6. Balsamiq (www.balsamiq.com)

Balsamiq to intuicyjne narzędzie do tworzenia szkiców interfejsu i prototypowania podstawowych interakcji. Aplikacja oferuje bogatą bibliotekę gotowych elementów – także dla iOS. Przeciągając wybrane elementy z biblioteki  ekspresowo stworzysz makiety niskiej szczegółowości –  wizualizując pomysły np. podczas spotkania z klientem.

Pamiętaj jednak, że nie musisz ograniczać się wyłącznie do projektowania interfejsów. Możesz wykorzystać Balsamiq do stworzenia szablonów ćwiczeń warsztatowych – wtedy, gdy nie masz czasu zaangażować do tego grafika (lub gdy po prostu zapomniałeś ich zabrać).

Dlaczego warto: szkicowy charakter makiet zachęca do dyskusji – ich stworzenie nie zajmuje dużo czasu, a jednocześnie stwarza możliwości prezentacji wstępnej koncepcji produktu zespołowi. Dostępny w wersjach desktopowej i przeglądarkowej.

7. Axure RP (http://www.axure.com/)

Skorzystaj z niego przy projektowaniu rozwiązań o dużej złożoności – pozwala prototypować zaawansowane interakcje. Jeśli zamierzamy zweryfikować nasze pomysły podczas badania z użytkownikami, makieta umożliwi swobodne poruszanie się w obrębie serwisu lub aplikacji, imitując działanie finalnego produktu. Dzięki temu możliwe będzie przetestowanie nie tylko najważniejszych funkcji, ale również mikrointerakcji i treści. Gotowy prototyp można wyeksportować do interaktywnego pliku HTML, a następnie przetestować z użytkownikami na dowolnym urządzeniu.

Dlaczego warto: Axure jest programem stanowiącym pewien standard w branży UX, stąd możesz liczyć na łatwo dostępne podręczniki, które pozwolą rozwinąć Twoje umiejętności. Masz również dostęp do darmowych bibliotek, gotowych rozwiązań tworzonych przez użytkowników.

Pamiętaj, że: program jest rozbudowany – opanowanie wszystkich funkcji wymaga czasu i wprawy. Dostępny wyłącznie w wersji desktopowej.

Axure1

Przykładowy projekt w Axure

 

8. Proto.io (www.proto.io)

Na rynku coraz częściej pojawiają się narzędzia dedykowane wyłącznie projektom mobilnym. Jednym z nich jest Proto.io, dzięki któremu w prosty sposób stworzysz zaawansowane prototypy aplikacji mobilnych. Oprócz podstawowych interakcji, aplikacja umożliwia również projektowanie animacji i obsługę gestów, dzięki czemu możemy odwzorować ogół doświadczenia użytkownika w kontakcie z produktem. Może on więc służyć jako specyfikacja dla programistów – dzięki odwzorowaniu mechanizmów działania unikniemy niejednoznacznych interpretacji podczas wdrażania.

Dlaczego warto: jednym słowem – tworzymy prototyp, który zachowuje się jak produkt docelowy. Możemy zaprezentować go na dedykowanym urządzeniu w aplikacji Proto.io Player (na Android lub iOS). Przydatne przy testach z użytkownikami!

9. Hyper Island Toolbox (www.toolbox.hyperisland.com)

Zbliżają się warsztaty koncepcyjne, a Ty nie masz pomysłu na nowe zadania warsztatowe? Z pomocą przyjdzie katalog przygotowany przez Hyper Island – globalną uczelnię nastawioną na propagowanie innowacyjności w biznesie cyfrowym.  Zadania możemy filtrować na podstawie celu, czasu trwania i liczby uczestników.

Dlaczego warto: każdy opis zawiera instrukcję krok po kroku oraz listę potrzebnych materiałów. Duży wybór zadań warsztatowych w klimacie gamestormingu, czyli tworzenia innowacyjnych rozwiązań przez zabawę.

Katalog zadań warsztatowych1

Katalog zadań warsztatowych w Hyper Island Toolbox

Tworzenie treści

10. Hemingway Editor (www.hemingwayapp.com)

Tworzysz w języku angielskim? Przyda Ci się Hemingway App. Narzędzie umożliwi identyfikację zbytnio złożonych zdań (także w stronie biernej!) oraz wskaże prostsze alternatywy dla wyrazów, które potencjalnie mogą sprawić trudność przeciętnemu czytelnikowi.

Jeśli nie piszesz po angielsku, możesz wykorzystać inną funkcję aplikacji – zliczanie znaków, wyrazów i paragrafów w czasie rzeczywistym. Punktem odniesienia będzie również szacunkowy czas zapoznawania się z informacjami – czynnik szczególnie istotny w kontekście treści cyfrowych.

Hemingway1

Edytor tekstu Hemingway

 

11. Language Tool (www.languagetool.org/pl)

Jeśli potrzebujesz doraźnego wsparcia językowego dla tekstów w języku polskim, z pomocą przyjdzie Language Tool. Narzędzie wyróżni pojawiające się w tekście błędy. Wykryje też fałszywych przyjaciół, – czyli wyrażenia, które w dwóch językach brzmią podobnie, ale mają inne znaczenia. Trudności z właściwym rozpoznaniem takich wyrazów możemy napotkać podczas tłumaczenia tekstu – zwłaszcza wtedy, gdy w codziennej pracy zdarza nam się „skakać” pomiędzy angielskim, a polskim.

Pamiętaj, że: narzędzia tego typu nie gwarantują wykrycia 100% skuteczności – algorytm narzędzia identyfikuje błędy w ponad 20 językach w oparciu o reguły wprowadzane i modyfikowane przez użytkowników.

12. Poradnia Językowa PWN (www.sjp.pl/poradnia)

Niezbędnik copywritera – kompendium wiedzy językowej w postaci pytań i odpowiedzi znanych ekspertów i kontekstowych przykładów z życia wziętych.

Dlaczego warto: serwis jest stale rozwijany przez specjalistów z branży, dzięki czemu stanowi najświeższe źródło informacji językowych.

13. Schema (www.schema.org)

Mówiąc o treści nie możemy zapomnieć o SEO. Założeniem autorów Schemy było stworzenie spójnego schematu znaczników danych strukturalnych wspieranych przez najważniejsze wyszukiwarki internetowe. To rozwiązanie pozwala oznakować w kodzie konkretne informacje ważne z punktu widzenia użytkownika – nagłówek, ocenę produktu,  nr telefonu.  Jednym słowem, przez dodanie do zawartości kodu dodatkowych informacji pozwala robotom wyszukiwarek „zrozumieć” zawartość naszego serwisu i, w efekcie, dostarczyć odpowiedniejsze i użyteczniejsze wyniki wyszukiwania.

Warto pamiętać: wykorzystywanie Schemy wymaga podstawowej wiedzy programistycznej w celu modyfikacji znaczników zawierających dane strukturalne.

Współpraca

14. Trello (www.trello.com)

Tablica zapełniona kolorowymi, samoprzylepnymi karteczkami to symbol pracy w zespole UX. Jej cyfrowy odpowiednik znajdziemy w Trello – narzędziu webowym umożliwiającym zarządzanie projektami w myśl idei Kanban, należącej do technik zwinnych.  Do dyspozycji mamy tablice i karteczki, które możemy dowolnie przesuwać i edytować – możemy przypisać do nich etykiety, listy zadań, terminy i osoby odpowiedzialne, a następnie je filtrować.

Przykładowy projekt w Trello1

Przykładowy projekt w Trello

 

Dlaczego warto: darmowa wersja narzędzia wystarczy, by z lotu ptaka spojrzeć na wszystkie realizowane w zespole zadania. Plus za możliwość dodawania dowolnych załączników – z dysku lokalnego lub z chmury.

15. InVision (www.invisionapp.com)

Wygodne narzędzie do kolaboracji, np. nad projektem graficznym. Opcja liveshare umożliwia przeprowadzenie zdalnej burzy mózgów. Komentarze do projektu nanoszone są w czasie rzeczywistym, a dodawać je mogą wszystkie zaproszone osoby. Dzięki funkcji automatycznego dopasowywania obrazu możemy „wczuć” się w projekt, a po zdefiniowaniu hotspots przekształcić statyczne ekrany w interaktywny prototyp – również w zakresie animacji.

Warto pamiętać: praca nad jednym projektem jest darmowa. Do dyspozycji mamy również historię zmian i mini-tablicę Kanban.

 

Powyżej przedstawiłam subiektywną listę narzędzi – zarówno przeglądarkowych, jak i desktopowych, które mogą skutecznie wesprzeć Cię w procesie tworzenia produktów interaktywnych. Warto jednak pamiętać, że każdy projekt jest unikalny. Podejmując nowe wyzwania, nie skupiaj się na powielaniu schematów – staraj się poszukiwać nowych rozwiązań. Warto łączyć doświadczenia członków zespołu i możliwości poszczególnych narzędzi w celu osiągnięcia satysfakcjonujących rezultatów.

Aleksandra Mozalewska, UX / Content Specialist | Symetria

Artykuł po raz pierwszy ukazał się na łamach Online Marketing Polska.

 

Damy Ci znać o nowych wpisach

(publikujemy ok. 2 artykuły miesięcznie).

Komentarze (0)

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *