Zestaw narzędzi do UX Design: 10 ulubionych narzędzi i sposoby ich wykorzystania

Tworząc oprogramowanie, każdy dzień w pracy stwarza problem: Jak pogodzić naszą wizję doświadczenia użytkownika produktu z tym, jak użytkownicy rzeczywiście z nim współpracują? Chcielibyśmy w pełni oddać się kreatywności i zgłębić nasze najśmielsze wyobrażenia na temat tego, czym powinno być nowoczesne doświadczenie użytkownika, ale zawsze musimy to ważyć na podstawie tego, co pokazują dane. Jak powiedział Donald Norman w swojej książce "Living With Complexity": "Musimy projektować tak, jak zachowują się ludzie, a nie jak chcielibyśmy, aby się zachowywali".

I pozwól, że powiem ci teraz: To nie jest łatwe zadanie. Na szczęście, mamy świetny zespół UX-ów, który opracował wysoce efektywny i wydajny przepływ pracy, aby sprostać temu niekończącemu się wyzwaniu. Na tym stanowisku przedstawimy trochę naszego procesu, a dokładniej, jakich narzędzi używamy, aby wykonać to zadanie. Prześledzimy drogę projektu oraz narzędzia do UX design od fazy idealizacji, przez wireframe, prototypowanie i projektowanie, aż w końcu osiągniemy etap rozwoju.

Dane o użytkownikach

Chociaż dane o użytkownikach to nie narzędzia do UX design, opowiadają nam o tym, w jaki sposób użytkownik wchodzi w interakcję z nową funkcją, które projekty stron docelowych są konwertowane najlepiej oraz czy widziany jest nowy element menu, a wszystko to pomaga nam określić, co działa, a co nie.

Narzędzia ideowe

Każdy realizowany przez nas pomysł na UX-a zaczyna się od dwóch pytań: Jakie są cele naszego użytkownika i jak możemy usprawnić ich realizację? Po wprowadzeniu części naszej aplikacji, która wymaga ulepszenia lub nowego pomysłu, który chcemy wdrożyć, zaczynamy od naszego pierwszego narzędzia, Google Docs.

Google Docs

Google Docs jest prawdopodobnie dość dobrze znany każdemu, kto czyta ten artykuł. W skrócie, Google Docs to wersja pakietu Microsoft Office firmy Google z jednym dużym bonusem: w swojej istocie jest zbudowany wokół współpracy. W przeciwieństwie do tradycyjnego dokumentu Word lub pokazu slajdów PowerPoint, dokumenty Google Docs i Slajdy są hostowane online, a wielu użytkowników może edytować ten sam dokument w czasie rzeczywistym, co znacznie ułatwia burzę mózgów i współpracę nad nowymi pomysłami.

Zazwyczaj zaczynamy od ogólnej koncepcji funkcji, którą chcemy wdrożyć i tworzymy prosty schemat blokowy, który rozwija jej funkcjonalność. Google ułatwia wielu członkom zespołu wprowadzanie zmian w czasie rzeczywistym, a w połączeniu z funkcjami Slack i Teams (więcej na ten temat w dalszej części), to naprawdę łatwizna zacząć analizować i dopracowywać pomysły tak, jakby wszyscy byli w tym samym pomieszczeniu.

Miro

Po zebraniu podstawowych pomysłów, przechodzimy do narzędzia zwanego Miro, czyli w zasadzie tablicy online i notatek post-it. Choć nie spędzamy nad nim zbyt wiele czasu, używamy go, aby uzyskać szybki szkic przebiegu przewodów i zrobić notatki na temat wszelkich punktów lub pytań, które musimy omówić. W ten sposób, gdy zespół w końcu spotka się osobiście, każdy z nas wejdzie na spotkanie z solidnym wyobrażeniem o tym, jakie są główne cele i które punkty wymagają jeszcze najwięcej pracy. Chociaż zazwyczaj używamy tego przed spotkaniami osobistymi, nie ma powodu, dla którego nie można użyć tego również po spotkaniu.

Post-its

Post-its, jako narzędzia do prototypowania? Tak, czytasz to dobrze i nie, to nie jest nazwa nowej aplikacji do produktywności. Kiedy przychodzi czas, aby spotkać się twarzą w twarz i porozmawiać o tym, jak zaimplementować nową funkcję, uważamy, że pomocne jest robienie rzeczy w staromodny sposób: organizowanie naszego przepływu UX z notatkami Post-it.

Podczas gdy istnieje wiele cyfrowych narzędzi, które mogą pomóc nam osiągnąć to samo, jest coś w odczuciu dotykowym wprowadzania naszych pomysłów do realnego świata, co daje nam impuls. W rzeczywistości, ostatnio pojawiło się pewne zainteresowanie kreatywnością, którą może zapewnić nam ta taktyka, więc wydaje się, że nie jesteśmy sami na tym froncie. Ponadto, na poziomie czysto praktycznym, szybciej i łatwiej jest członkom zespołu przebywać razem w pokoju, pisać lub rysować pomysły na niektórych notatkach Post-it, odbierać je i przenosić, niż jest to możliwe w większości programów.

Na tym etapie procesu staramy się nakreślić główną drogę użytkownika. Spójrz na zdjęcie poniżej, aby zobaczyć, co mamy na myśli.

Po otrzymaniu zestawu Post-its, robimy zdjęcie i importujemy je do Google Docs, gdzie wszyscy będziemy komentować, jak nasz projekt może zostać ulepszony.

Wireflow, projektowanie i narzędzia do prototypowania

Adobe XD

Kiedy już przejdziemy przez początkowe fazy planowania i tworzenia koncepcji, czas zacząć realizować naszą wizję. Naszym pierwszym przystankiem w tej podróży jest skorzystanie z narzędzia do prototypowania jakim jest Adobe XD, aby rozpocząć wymyślanie wireframów, projektów ekranów i przepływów użytkowników.

Adobe XD jest podobny do innych programów do grafiki wektorowej, takich jak Adobe Illustrator, ale my wolimy Adobe XD, ponieważ cały program skupia się na projektowaniu UI i UX. Na przykład: Adobe XD jest dostarczany z biblioteką komponentów UI, która zawiera wszystkie najczęściej używane symbole, takie jak przyciski hamburgera, strzałki, itp. Kolejną ogromną zaletą Adobe XD'a dla projektowania układów UI/UX jest to, że korzystając z wtyczki Zeplin, możemy wyeksportować kod CSS dowolnych projektów, które wykonujemy w programie, aby przyspieszyć proces rozwoju.

Używając Adobe XD'a, generalnie zaczynamy od wykonania dużego wireflow, który łączy wszystkie dodawane przez nas ekrany i wyraźnie pokazuje jak użytkownik poruszałby się po całym doświadczeniu. Następnie zaczynamy dopracowywać każdą pojedynczą wireframe, aby wymyślić elementy, których chcemy użyć.

Kiedy już w pełni przepracowaliśmy jakiś pomysł, wracamy do Adobe XD'a, aby stworzyć ostateczną iterację projektu. Dzięki temu, że Adobe XD skupia się na projektowaniu interfejsu użytkownika, łatwo jest zachować spójność elementów za pomocą biblioteki komponentów.

Dodatkowo, dzięki możliwości łatwego eksportowania CSS naszych projektów uważamy, że Adobe XD jest najbardziej efektywnym sposobem na rozpoczęcie procesu rozwoju. Adobe XD pozwala naszemu zespołowi projektantów na otwieranie projektów i przeglądanie CSS każdego elementu na stronie, co znacznie ułatwia przejście od projektu do realizacji technicznej. Możliwość pobierania fragmentów kodu z projektów Adobe XD za pomocą Zeplin'a przechodzi długą drogę do zapewnienia spójności pomiędzy oryginalnym projektem a ostateczną implementacją.

Komunikacja

Teams

Chociaż narzędzie to może nie mieć bezpośredniego wpływu na budowę lub rozwój UX, to jednak wspomaga ono naszą komunikację, która jest istotną częścią procesu. Ogólnie rzecz biorąc, będziemy używać Teams'a, popularnej aplikacji czatu, do szybkiego komentowania i przekazywania informacji zwrotnych. Ze względu na strukturę kanałów w programie i czat w czasie rzeczywistym, łatwiej jest organizować nasze dyskusje z Teams niż z pocztą elektroniczną.

Kiedy musimy dogłębniej zapoznać się z naszymi opiniami lub przedyskutować bardziej skomplikowany problem, używamy funkcji Teams, aby zorganizować rozmowę wideo z członkami zespołu, w której możemy naprawdę rozprawić się z naszymi pomysłami, jakbyśmy byli w tym samym pomieszczeniu.

Jira

Aby pomóc utrzymać porządek i poinformować nasz zespół devów, używamy Jira. Jira jest dość podobna do Asany czy Trello: Istnieje kilka różnych plansz reprezentujących różne fazy projektu (np. "do zrobienia", "w trakcie realizacji" lub "wykonano"), a użytkownicy mogą przenosić konkretne zadania przez te plansze, aby wskazać postęp zadania. Takie funkcje pomagają wszystkim członkom zespołu być na bieżąco z aktualnym statusem każdego elementu układanki UX.

Podsumowanie

Podczas gdy narzędzia dla UX designera staraliśmy się rozdzielić na fazy, w których je używamy, aby zachować jasność, w rzeczywistości wiele się na siebie nakłada. Na przykład, używamy Slack'a i Teams'a w całym procesie projektowania UX, a Jira może być tak samo użyteczny na początku procesu projektowania jak i na jego końcu.

Miejmy nadzieję, że ten wgląd w nasz proces przyczynił się do lepszego zrozumienia, w jaki sposób robimy to w IT-solve. Miejmy nadzieję, że da Ci to zastrzyk inspiracji i kilka nowych narzędzi, które pomogą Ci pokonać własne wyzwania związane z UX-em.