Proces projektowania UX nowych rozwiązań powinien angażować jednakowo dwie strony: klientów oraz projektantów. Wpływa to znacząco na jakość pracy i poczucie kontroli nad realizowanym zadaniem.
Poniżej prezentujemy przykładowy opis procesu projektowania nowego serwisu internetowego. Przedstawia on szczegółowo wszystkie kluczowe elementy realizacji konieczne do stworzenia dopasowanego do potrzeb biznesowych serwisu zorientowanego na użytkownika.
Analiza konkurencji
Analizie będzie poddane około 10 serwisów z rynku międzynarodowego oraz z Polski. Zdefiniowane zostaną elementy mające wpływ na przewagę danego serwisu w oczach konsumentów. Kolejno nastąpi wyróżnienie trendów w rozwoju serwisów konkurencyjnych oraz ciekawych nowych funkcji, które oferują te serwisy– potencjalnie interesujące dla polskiego konsumenta.
Analiza będzie przedstawiona w formie zrzutów ekranów interesujących fragmentów serwisów wraz z opisem i zbiorczym zestawieniem porównawczym.Zakres prac może być poszerzony o analizę danych serwisu Klienta obejmującą ocenę danych pochodzących z posiadanych przez Klienta narzędzi analitycznych.
Zostaną także zebrane publikowane w sieci przez użytkowników oceny serwisów konkurencji, wzmianki prasowe, dotyczące biznesowych aspektów serwisów konkurencyjnych (ruch w serwisie, zasięg, akwizycje, wycena).
Nad analizą konkurencji pracować będą minimum 3 niezależne osoby co pozwoli zachować większą obiektywność oraz dotrzeć do szerszego spektrum interesujących rozwiązań.
Omówienie analizy konkurencji oraz zbieranie wymagań
Podczas spotkania ma miejsce przedstawienie analizy konkurencji i omówienie najciekawszych jej elementów. Przedstawienie wniosków z analizy konkurencji polega na nakreśleniu odpowiedzi na poniższe pytania:
- Jakie serwisy zdefiniowane zostały jako ścisła konkurencja, a jakie jako dalsza.
- Jakie funkcje cieszą się największą popularnością wśród użytkowników.
- Jakie przewagi konkurencyjne posiadają serwisy konkurencyjne.
- Które z funkcji występujących w serwisach zagranicznych mogą zainteresować polskich użytkowników.
Istotnym etapem takiego spotkania jest zebranie opinii na temat konkurencji od zespołu Klienta oraz wstępna ocena możliwości konkurowania z przedstawionymi serwisami (uzyskanie informacji od Klienta na temat pól gdzie można uzyskać przewagę konkurencyjną).
Burze mózgów. Przygotowanie koncepcji serwisu
Zaleca się przeprowadzenie 2 burz mózgów w zespole Kontrahenta. W burzy mózgów bierze interdyscyplinarny zespół w składzie od 5 do 8 osób. W skład zespołu wchodzą socjologowie, kulturoznawcy, analitycy biznesowi, projektanci interakcji, project managerowie.
Wynikiem burzy mózgów jest stworzenie około 5 luźnych koncepcji dla Serwisu. Luźna koncepcja zawiera ogólny opis przewagi konkurencyjnej Serwisu. Koncepcje są następnie poddawane ocenie eksperckiej, eliminowane są koncepcje niezgodne z przyjętymi założeniami i następuje wybór koncepcji do dalszego dopracowania. 2-3 koncepcje są dopracowywane w postaci 1 strony opisu A4. Opisywane są: główne wartości w serwisie dla konsumenta, metody budowania przewagi konkurencyjnej, najważniejsze funkcje serwisu, mocne i słabe strony serwisu, możliwości rozwoju serwisu
Spotkanie – omówienie koncepcji
Stworzone w poprzednim punkcie koncepcje są przedstawianie Klientowi na spotkaniu w sposób zgodny z przygotowanym opisem. Zbierane są opinie na temat koncepcji.
Wspólnie wyłaniania jest koncepcja wiodąca oraz ustala się czy i jeśli tak to które elementy pozostałych koncepcji powinny zostać dodane do koncepcji wiodącej.
Stworzenie architektury informacji
Projektant UX tworzy architekturę informacji. Jest to spis podstron wraz ze wskazaniem zależności między nimi. Stanowi on swoisty szkielet projektowanego serwisu i jest konsultowany z Klientem.
Przygotowanie makiet serwisu (prototyp niskiej dokładności)
Prototypy niskiej dokładności w sposób graficzny przedstawiają najważniejsze elementy serwisu i ich rozłożenie na stronie głównej i kluczowych stronach serwisu. Przykładowe strony kluczowe: strona kategorii, strona z listą wyników, strona wyników wyszukiwania, strona z treścią artykułu, strona galerii, strona z formularzem kontaktowym.
Na prototypach niskiej dokładności poszczególne elementy danej strony są prezentowane przez bloczki – nie są opisywane szczegóy danego bloczka. Celem przygotowania prototypów niskiej jakości jest wstępne rozłożenie architektury informacji serwisu. Prototypy niskiej dokładności są przygotowywane jako plik prezentacji programu Axure
Telekonferencja – omówienie makiet serwisu
Przygotowane prototypy niskiej dokładności są przesyłane w formie plików PDF lub HTML do Klienta. Następnie przeprowadzana jest telekonferencja na której Kontrahent opowiada o prototypach – każdy element jest omawiany osobno. Omawiane są funkcje każdego z elementów oraz metody realizacji. Po telekonferencji wysyłane jest przez Kontrahenta za pomocą e-mail podsumowanie dotyczące ustaleń.
Modyfikacja makiet serwisu
Zgodnie z treścią e-maila z poprzedniego punktu na prototyp nanoszone są modyfikacje. Powstaje prototyp wysokiej dokładności. Prototyp wysokiej dokładności zawiera rozrysowane wszystkie funkcje i opcje (linki, teksty) na stronie głównej oraz najważniejszych kluczowych podstronach serwisu.
Prototyp wysokiej dokładności powstaje jako plik prezentacji programu Axure. Prototyp wysokiej dokładności jest podstawą do prac graficznych, ale nie jest to projekt graficzny.
Przeprowadzenie testów z użytkownikami – weryfikacja makiet
Przygotowane prototypy wysokiej dokładności są weryfikowane w testach z użytkownikami. Testy z użytkownikami to testy o charakterze jakościowym. W kolejnych testach badane jest zrozumienie prototypu przez potencjalnego użytkownika. W ramach pojedynczego testu prosi się użytkownika o opisanie prototypu, określenie do czego służy oraz użycie prototypu celem realizacji określonego zadania testowego. Tym samym sprawdzeniu podlega użyteczność (ang. usability) serwisu.
Jakob Nielsen i Tom Landauer wykazali, że testowanie z 4-5 użytkownikami pozwala na wykrycie 85% problemów dotyczących funkcjonalności witryn. Zatrudnianie większej ilości użytkowników nie gwarantuje liniowego wzrostu liczby wykrytych błędów. Testy zostaną przeprowadzone na 4 kolejnych użytkownikach z grupy docelowej serwisu.
Ze strony Kontrahenta w teście udział biorą dwie osoby – osoba przeprowadzająca test oraz obserwator notujący wyniki testu. Testy zostaną przeprowadzone w biurze Kontrahenta.
Użytkownicy będą realizować dwa typy scenariuszy:
- Zrozumienie witryny – przedstawienie prototypu użytkownikowi a następnie sprawdzenie czy zrozumiał sposób zorganizowania informacji, nawigację i koncepcję witryny
- Wykonanie czynności – użytkownik pracuje z prototypem –
zadania zamknięte, zadania otwarte.
Przed rozpoczęciem testów zostaną przygotowane scenariusze testowe, które zostaną przesłane do Klienta. Wyniki testów zostaną przekazane do Klienta w formie podsumowania w postaci e-mail. Testy na życzenie Klienta mogą być nagrywane.
Opcjonalnie testy mogą zostać rozszerzone o Wywiady pogłębione (IDI). Wywiady pogłębione umożliwiają na poznanie motywacji użytkowników, ich opinii i doświadczeń w kontekście danego produktu czy usługi. Dzięki tej metodzie można dobrze poznać potencjalnego konsumenta, przeanalizować jakie ma potrzeby i oczekiwania oraz ustalić jak zwykle stara się je zaspokoić. Zebrane w ten sposób dane pozwalają na odpowiedź na pytanie czy zaprojektowane rozwiązanie są optymalne dla klientów i czy w ich opinii są konkurencyjne w stosunku do innych obecnych na rynku
Modyfikacja makiet serwisu
Na podstawie wniosków z testów z użytkownikami prototypy serwisu zostaną zmodyfikowane i powstaną ostateczne makiety serwisu.
Zmodyfikowane zostaną te elementy prototypu, które nie są zrozumiałe dla użytkowników, przerywają lub opóźniają realizację scenariuszy testowych lub miejsce ich wystąpienia było zakwestionowane przez użytkowników podczas testu.
Ostateczna makiety serwisu będą zawierać makiety strony głównej oraz kluczowych podstron. Zostaną przygotowane jako plik prezentacji programu Axure.
Projektowanie szaty graficznej
Prace nad szatą graficzną podzielone są na 3 etapy:
- Zebranie wymagań i przygotowanie przez agencję tzw. mood boardów prezentujących na bazie referencji propozycje najważniejszych elementów projektu – typografia, ikonografia, paleta kolorystyczna, charakter oraz nastrój materiałów fotograficznych.
- W drugim etapie projektowana jest przez dwóch niezależnych grafików strona główna w dwóch wersjach. Celem tego etapu jest wybór na podstawie przedstawionych propozycji finalnej stylistyki serwisu.
- Ostatnim etapem jest stworzenie widoków graficznych dla wszystkich makiet oraz uzupełnienie ich webgiudlinem zawierającym prezentację wszystkich elementów serwisu m.in.: nagłówki, przyciski, tabele, formularze itp.
Przygotowanie dokumentacji serwisu
Etapem zamykającym i podsumowującym wszystkie przeprowadzone prace będzie przygotowanie dokumentacji serwisu. Dokumentacja zawierać będzie informacje umożliwiające stworzenie na jej podstawie projektów graficznych oraz wdrożenia serwisu.
Spotkanie – omówienie dokumentacji, zamknięcie projektu
Na spotkaniu omówiona zostanie przygotowana w poprzednim punkcie dokumentacja serwisu.
Projekt zostanie podsumowany (harmonogram, wykonane etapy, wnioski). Proces projektowania kończy podpisanie protokołu odbioru.
13 etapów tworzy idealny proces projektowy, dzięki któremu jesteśmy przygotować narzędzie dedykowane konkretnym grupom użytkowników. Należy podkreślić, iż sam proces kreowania i testowania rozwiązań może być przeprowadzony za pomocą iteracji. Dzięki temu na etapie testów można wyeliminować jak największą liczbę błędów.
