Proces projektowanie stron www według J.J. Garrett

the-elements-of-user-experience

/opis wykonany na przykładzie metody wypracowanej przez J.J.Garett, opisanej w książce The elements of user experience Second edition User-Centered Design for the web and beyond, New Riders, 2011, s. 81–82/
Aplikacje, strony internetowe są projektowane w określonym celu – wyznaczane są im określone zadania. Są to złożone obiekty na projekt, których składa się wiele różnych elementów: architektura informacji, projekt wizualnej postaci, sposoby nawigacji, interakcja, projekt informatyczny. J.J. Garrett na podstawie własnych doświadczeń wypracował model procesu projektowania interaktywnych obiektów, w którym wyróżnia 5 etapów – płaszczyzn:



1. The Strategy Plane – opracowanie założeń strony www
2. The Scope Plane Functionality Specyfication – opracownie specyfikacji sposobu funkcjonowania strony www
3. The Structure Plane – projekt struktury i interakcji interfejsu strony www
4. The Skeleton Plane – prototypowanie interfejsu
5. The Surface Plane – elementy interfejsu odbierane przez zmysły

 

schemat - proces projektowy wwww

To co wyróżnia ten model to fakt, że wizualna postać, odbierana przez użytkownika jest projektowana na samym końcu i jej forma wynika i jest realizacją wszystkich wcześniejszych ustaleń. Droga rozpoczyna się od strategii opartej na potrzebach użytkownika i celach, które chce się osiągnąć. Na tej podstawie definiuje się specyfikacje funkcjonalne i zawartość. Na to nakłada się projektowanie interakcji i architekturę informacji. Wszystkie elementy z poszczególnych poziomów łączy ostatnia
warswa – projekt wizualnej, wrażeniowej postaci interfejsu.
1. The Strategy Plane
Celem tego etapu jest zrozumienie czego użytkownicy od nas oczekują, i jak się to łączy z naszymi celami strategicznymi (Users needs – Potrzeby użytkownika Product objectivies – cele biznesowe).
Etap kończy się zdefiniowaniem strategii strony www, określającej dla kogo jest przeznaczona, w jakim celu użytkownicy mają ją odwiedzać, w jaki sposób może się rozwijać. Etap ten obejmuje również zaplanowanie kampanii reklamowej.
2. The Scope Plane Functionality Specyfication
Drugi etap wiąże się z opracowaniem specyfikacji dotyczącej funkcjonalności dostępnych na stronie www oraz wymagań dotyczących zawartości strony www.
3. The Structure Plane
Kolejnym etapem jest opracowanie projektu interakcji interfejsu strony www (Interaction design), który odnosi się do definiowania możliwych zachowań wykonywanych przez użytkownika oraz określeniu w jaki sposób system będzie odpowiadał na to zachowanie. Etap ten obejmuje również projekt architektury informacji – struktury podziału treści strony www oraz sposobów jej prezentowania w odniesieniu do założonej strategii strony www.
4. The Skeleton Plane
Czwarty etap dotyczy budowy interfejsu, który łączy wszystkie opracowane wcześniej elementy projektu i nie tylko przedstawia informacje, ale je komunikuje tak, aby były zrozumiałe, ze szczególnym zwróceniem uwagi na hierarchię czytelności, konsekwencję w projekcie nawigacji (navigation design – sposób poruszania się po stronie www, prowadzenie użytkownika po stronie www, tak aby zawsze był świadomy w jakim miejscu strony się znajduje – gdzie był, gdzie się udaje, gdzie możemy się udać). Każda podjęta decyzja projektowa powinna być uzasadniona potrzebami użytkownika.
5. The Surface Plane
W ostatnim etapie następuje opracowanie projektu od „zewnętrznej powierzchni”, odbieranej przy pomocy zmysłów (Sensory experience), który obejmuje wizualne, dźwiękowe, dotykowe, smakowe, zapachowe elementy.
Model składający się z tych pięciu płaszczyzn-etapów odnosi się do problemów związanych z projektowaniem doświadczeń użytkowników (user experience) oraz narzędzi do ich rozwiązywania.
Każdy kolejny etap stanowi uszczegółowienie projektu i wynika z decyzji podjętych w poprzednim etapie. Cały proces został podzielony na oddzielne etapy jednak praca nad nimi nakłada się. Kolejne decyzje podejmowane w danym etapie wynikają z tych podjętych na etapie wcześniej. Jednak nie jest wykluczone, wracanie i wprowadzanie korekt do wcześniejszych, już zakończonych.

Advertisements

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s