Projektowanie UI w modelu “Core and Paths”

Odrywamy się tutaj od samej metodyki prowadzenia projektów, wymagań i potrzeb użytkownika i skupiamy się na samy projektowanie UI.

 

Standardowy proces projektowania

Zaczyna się od projektowania strony głównej, po czym przechodzimy do kolejnych widoków “w głąb” AI. W ten sposób projektowany jest widok po widoki, kategoria po kategorii, aż do wykonania wszystkich zakontraktowanych stron.

 

Model “Core and Paths”  

(nie znalazłem dobrego polskiego odpowiednika)

W tym modelu rozpoczynamy od zdefiniowania “Core” czyli głównych widoków na które docelowo trafia użytkownicy naszych systemów. Już na wstępnie okazuje sie ze nie jest to strona główna. W przypadku serwisów kontentowych (e.g. portale informacyjne) są to widoki danego materiału (artykuł, wideo, zdjęcie), w przypadku serwisów typu e-commerce jest to widok danego produktu. To właśnie na te widoki docelowo chce trafić nasz użytkownik, to też na te widoki często trafia z wyników wyszukiwania (Google, Bing etc.), czy tez dostaje do nich linki od znajomych (“hej, fajne buty zobacz”).

Musimy zaznaczyć że “Core” może być nie tylko konkretny widok, ale też jego cześć na którą to użytkownik powinien zwrócić największa uwagę (prezentacja produktu w sklepie). Core dostarcza wartości dla użytkownika (to jest jego cel, to dlatego przychodzi do naszego serwisu).

Często sam “Core” składa się kilku składowych elementów, e.g. w przypadku sklepu internetowego jest to zdjęcie produktu, opis właściwości, cena, wsparcie etc. Aby ułatwić projektowanie powinniśmy dokonać priorytetyzacji elementów składowych naszego “Core”.

Przechodzimy do naszkicowania “Core” . Tak mamy tutaj na myśli “papierowy” szkic (no dobra może być bardzo-LoFi w aplikacji)  i skupiamy się na samym tylko Core, czyli pomijamy wszystkie pozostałe elementy, e.g. w przypadku sklepu internetowego skupiamy się na samej prezentacji produktu, pomijając nawigację itd.

Pamiętaj o pozytywnych doświadczeniach użytkownika. To ma być łatwe i przyjemne.

Ścieżka wejściowa

Najpierw ustalamy “cele użytkownika” , czyli to co sprowadza go do naszego serwisu / po co tutaj przychodzi.

Definiujemy ścieżki wejścia do “Core”. Za te ścieżki uznajemy wszystkie możliwe punkty dotarcia: wyniki wyszukiwania, nawigacja w serwisie, linki od znajomych,  reklama w prasie, barcode, landing page.
Następnie przy każdej ścieżce piszemy “wymagania projektowe”które są do ich realizacji wymagane (widoki/funkcjonalności)  e.g. SEO i landing page jest wymagany dla ścieżki wejścia z wyników wyszukiwania.

Ważnym elementem każdego projektu jest SEO, definiujemy wiec tzw. “trigger words” czyli w wolnym tłumaczeniu “słowa rozpoczynające proces” – są to tez te słowa których użytkownik użyje do odnajdywania “Core”

 

Ścieżka wyjściowa

Na początek ustalamy “cele biznesu”, czyli to co zapewni ROI naszemu przedsięwzięciu, na czym po prostu zarobimy (w dużym skrócie).

Definiujemy ścieżki wyjścia z “Core”. Za te ścieżki uznajemy wszystkie akcje jakie użytkownik może wykonać po tym jak znalazł / dostał to czego chciał (“Core”): przejście do innego widoku (również poza serwis), dodanie produktu do koszyka (ROI dla biznesu) etc. Podobnie jak w przypadku Ścieżki wejścia spisujemy “wymagania projektowe”, które są do ich realizacji wymagane (widoki/funkcjonalności)

Ścieżki wyjściowe są odpowiedzialne m.in. za dostarczenie “wartości” dla biznesu (ROI) , dokonujemy więc  ich priorytetyzacji nadając numery od 1 (najwazniejsze) do X (najmniej ważne). Dzięki temu będziemy w stanie skupić się na kluczowych dla biznesu wartościach. Realizację tych wartości zapewnią nam konkretne elementy interfejsu. Odpowiedzialne za to będa buttony typu  “call to action”. Spisujemy je.

 

Wszystko razem

Gdy już mamy zdefiniowane “Core”, ścieżki wejścia i wyjścia, możemy rozpocząć proces projektowania Architektury Informacji (o projektowaniu AI napiszę więcej trochę później), Stronę główną, typ nawigacji, oraz pozostałe widoki (galerie, artykuły, wyniki wyszukiwania etc.). Tutaj również warto dokonać priorytetyzacji widoków i zaczynać od tych najważniejszych przechodząc do najmniej ważnych (tak, zróbmy sobie listę!).

Projektując każdy widok musimy cały czas pamiętać o kilku sprawach:

  • czym jest nasz zdefiniowany “Core”
  • aby zapewnić użytkownikowi możliwie łatwe, szybkie i przyjemne dotarcie do “Core” (w tym cele użytkownika)
  • jak zapewnić konwersję / ROI dla biznesu (w tym cele dla biznesu)

… tak dochodzimy do końca.

 

Szablon informacji dla modelu “Core and Paths”

W trakcie całego procesu projektowego w modelu “Core and Paths” zbierać będziemy duże ilości informacji.

Do ich uszeregowania pomocny będzie tutaj szablon informacji:

 

szablon "Core nad Paths"
szablon “Core nad Paths”

 

 

Na podstawie doświadczeń własnych oraz:

http://www.boxesandarrows.com/view/designing-screens