Otwarcie Pon - Sob 09:00-18:00
Email biuro{@}westom.pl Zadzwoń +48 883 979 229
Otwarcie Pon - Sob 09:00-18:00
Email biuro{@}westom.pl Zadzwoń +48 883 979 229

Użyteczność i współpraca z programistami

Specjaliści od user experience i programiści powinni rozumieć cele stawiane projektowi i wspólnie do nich dążyć.

Programiści muszą mieć wgląd we wcześniejsze działania swoich kolegów z zespołu user experience. Powinni być dobrze zapoznani z testami użyteczności. To pozwoli programistom dobrze poznać witrynę, podjęte wcześniej decyzje projektowe oraz to, w jaki sposób użytkownicy korzystają z serwisu.

Jeszcze przed integracją kodu HTML, najlepiej jest przetestować gotowy frontend na użytkownikach. Dzięki temu, można dopracować wszystkie interakcje przed udostępnieniem witryny. Dopięcie wszystkiego na ostatni guzik pozwoli gładko przejść do kolejnego etapu.

Każda osoba (zespół), która jest odpowiedzialna za dany etap projektu, powinna uczestniczyć w całym przedsięwzięciu. Nie wystarczy wykonanie swojej działki i przekazanie reszty innemu zespołowi. Aby cały projekt miał sens, żeby wszystko przebiegło pomyślnie, trzeba cały czas ze sobą współpracować. Kontakt na bieżąco ze wszystkimi osobami odpowiedzialnymi za projekt, pozwoli na szybkie konsultacje w przypadku ewentualnego wystąpienia problemów, co pozwoli uniknąć przestojów i skrócić czas całego przedsięwzięcia. Jeśli programiści będą mieli pytania odnośnie implementacji danego komponentu, to specjaliści od user experience będą mogli odpowiedzieć na nie. Podobnie w drugą stronę. Jeśli programiści stwierdzą, że dana interakcja nie jest możliwa, to zespół od user experience będzie mógł odpowiednio zmodyfikować projekt.

Miarą powodzenia projektowania skoncentrowanego na użytkowniku jest powstanie witryny, która będzie spełniała oczekiwania firmy oraz klientów. Należy pamiętać, że szkielet to tylko potencjalny wzór witryny. Po pomyślnej aktualizacji witryny, to nie jest nigdy koniec optymalizacji. Witrynę w dalszym ciągu można modyfikować i ulepszać. Można testować wiele zmiennych, aby jeszcze bardziej polepszać współczynnik konwersji. Witryna ciągle „żyje”, pracuje, zmienia się. Obserwując zachowania użytkowników na stronach witryny, można wykorzystywać zdobyte informacje i nieustannie rozwijać i optymalizować serwis.

W skrócie prace nad user experience w tym projekcie można przedstawić następująco:

  • Badania – poznawanie problemu projektowego, określenie wymagań biznesowych, wymagań użytkowników, analiza konkurencji oraz badanie kontekstu.
  • Prototyp – „burza mózgów”, spisanie wszystkich pomysłów i wybór najlepszych rozwiązań. Modelowanie zadań użytkownika, tworzenie szkiców oraz szkieletów.
  • Testy użytkownika – testowanie rozwiązań projektowych przez stałych i potencjalnych klientów.
  • Projektowanie – usprawnianie rozwiązań projektowych, wprowadzanie poprawek (poprawianie szkieletów, grafiki).
  • Testy użytkownika – testowanie wyglądu i stylu witryny przez stałych oraz potencjalnych klientów.
  • Projektowanie i programowanie – wprowadzenie poprawek graficznych, tworzenie kodu w HTML-u.
  • Testy użytkownika – testowanie funkcji przez użytkowników w HTML-u.
  • Rozwijanie – poprawianie kodu w HTML-u oraz integrowanie kodu frontonu i zaplecza.
  • Udostępnianie witryny.

 

  1. Przykład 3: Projektowanie wersji mobilnej witryny.

Opis problemu:

Pewna agencja turystyczna XYZ prowadzi portal internetowy, na którym oferuje szczególny rodzaj wypoczynku tzw. „wakacje z przygodą”; portal zrzesza wszystkie tego typu oferty pochodzące od tej agencji. Agencja zgłosiła zapotrzebowanie na mobilną wersję witryny.

Cel projektu:

Nakłonienie użytkowników, którzy na ogół wybierają tradycyjną formę wypoczynku, do wybrania „wakacji z przygodą”.

Zespół projektowy, który zajmował się szkieletami i projektami nowej witryny, wykorzystując projektowanie skoncentrowane na użytkowniku, został poproszony o stworzenie również wersji mobilnej strony. Stworzenie witryny przyjaznej urządzeniom przenośnym jest nie lada wyzwaniem. Poza tym użytkownicy korzystający z urządzeń mobilnych nieco się różnią od tych korzystających z urządzeń stacjonarnych. Obie grupy odbiorców mogą mieć nieco inne potrzeby.

Stworzenie wersji mobilnej na pewno jest łatwiejsze dla zespołu, który już pracował nad stroną w tradycyjnej wersji. Jest to jednak nadal trudne, szczególnie w przypadku, kiedy budżet przeznaczony na projekt jest ograniczony tak, jak to miało miejsce w tej sytuacji. Wtedy trzeba się wykazać niezwykłą pomysłowością.

Analiza konkurencji

Zespół zajmujący się tworzeniem strony mobilnej dla agencji turystycznej, przed przystąpieniem do właściwej pracy, przejrzał dokładnie oferty konkurencji dla urządzeń mobilnych. Zauważono, że na urządzeniach mobilnych użytkownicy rzadko dokonują dużych transakcji. Smartfony czy tablety wykorzystują raczej do przeglądania ofert. Jadąc komunikacją miejską do pracy, można wykorzystać ten czas na przeglądanie ofert wakacyjnych. Przeglądane oferty na urządzeniach mobilnych często są zapisywane, a użytkownicy wracają do nich po jakimś czasie.

Praca zespołowa

Do pracy nad mobilną wersją witryny zaangażowano część pracowników z agencji turystycznej. Zorganizowano warsztaty, podczas których narodziło się wiele ciekawych pomysłów, a wszystko dzięki przeprowadzonej „burzy mózgów”. Ustalono wymagania biznesowe oraz zaprojektowano podstawowe szablony. Jest to najszybszy sposób na podjęcie decyzji, nie trzeba czekać, aż klient zaakceptuje (bądź nie) kolejny etap projektu. W takim przypadku, maksymalny wysiłek koncentruje się na samym początku projektu. Zainwestowany czas i zasoby ludzkie szybko procentują – powstaje dużo nowych pomysłów i projekt może szybko ruszyć do przodu.

Tradycyjna wersja witryny agencji turystycznej skupiała się na efektach wizualnych. Miała ciekawą szatę graficzną, zdjęcia, które zachęcały do „wakacji z przygodą”. Tworząc wersję mobilną, wrażenia trzeba odsunąć na bok, tu liczy się sam przekaz. Przydatne informacje są ważniejsze, niż cała szata graficzna. Taka różnica wynika głównie z wielkości ekranu, na którym prezentowana jest strona. Ekran smartfona jest znacznie mniejszy, niż ekran laptopa czy komputera stacjonarnego. Gdyby wersja mobilna strony była równie efektowna wizualnie, co wersja stacjonarna, mogłaby być po prostu nieczytelna. Wzięto pod uwagę te różnice, pracując nad pomysłami odnośnie strony mobilnej. W wersji mobilnej, większy nacisk kładzie się na równowagę pomiędzy zawartością najważniejszych informacji, a efektem wizualnym.

Przeprowadzone warsztaty okazały się strzałem w dziesiątkę. Praca zespołowa przebiegła sprawnie, a miał na to na pewno wpływ fakt, że ludzie z firmy uczestniczący w warsztatach byli osobami decyzyjnymi firmy i nie musieli konsultować swoich działań z żadnym przełożonym z firmy. Warsztaty zaowocowały kilkoma zestawami szkiców witryny, popartych notatkami. Wszystkie szkice zawierały obszerne opisy przykładowej witryny w wersji mobilnej określające, które funkcje mają się znaleźć w gotowym projekcie.

Tworzenie szkieletów zajęło dwa dni. Już w trakcie warsztatów z pracownikami firmy udało się zdobyć poparcie klientów. Aprobata użytkowników tylko potwierdziła, że projekt zmierza w dobrym kierunku.

W analizowanym przykładzie przeprowadzono nieco inne testy użyteczności. Noszą one nazwę „partyzanckich”. Tego rodzaju testy skupiają się na jak najprostszym sposobie uzyskania informacji od użytkownika, z wykorzystaniem jak najmniejszej ilości zasobów. W praktyce odbywa się to na zasadzie zwerbowania kilku osób do wzięcia udziału w krótkim, kilkunastominutowym teście. W tym konkretnym przypadku, jako miejsce werbowania testerów wybrano lotnisko. Warunkiem wzięcia udziału w teście było posiadanie smartfona i oczekiwanie na lot. Za współpracę zaoferowano niewielką sumę pieniędzy.

Wybrano sześciu testerów i każdemu z nich pokazano przygotowane projekty. Prototypy strony pokazano w aplikacji, aby każdy mógł zobaczyć, jak witryna wygląda w rzeczywistości. Testy przyczyniły się do uzyskania wielu cennych informacji i potwierdziły wartość projektów. Dla testerów okazało się, że najważniejsze jest jednoznaczne określenie przeznaczenia kontrolek.

Końcowym efektem prac nad projektem był zestaw szkieletów. Następnie firma miała jeszcze przeprowadzić wewnętrzne testy użyteczności i rozpocząć implementację mobilnej wersji witryny