Chciałbym w tym poście zamiast teorii pokazać Wam przykład użycia abstrakcyjnego prototypowania. Zacznijmy więc od przykładu. Wyobraźmy sobie, że naszym zadaniem jest zaprojektowanie interfejsu użytkownika dla skrzynki e-mail. Załóżmy, że wiemy już jakie funkcjonalności ma mieć nasza skrzynka: odbieranie wiadomości, czytanie wiadomości, odpowiadanie na wiadomości. Wybrałem ten przykład ponieważ każdemu z Was jest on znajomy. Jednocześnie nie jest to trywialny temat i na jego przykładzie będzie można zaobserwować zalety abstrakcyjnego prototypowania.
Ponieważ mamy wstępnie zebrane wymagania i wiemy jakie zadania będą realizowane przez użytkowników w naszej aplikacji, przystępujemy do projektowania interfejsu użytkownika. Tylko pytanie, jak się do tego zabrać...?
Wstępem do utworzenia prototypu interfejsu użytkownika jest określenie tzw. Essential Use Cases, czyli po prostu zadań jakie będą realizowane przez użytkowników. Oto lista tych zadań na podstawie naszych hipotetycznych wymagań:
- sprawdzenie listy nieprzeczytanych wiadomości
- przeczytanie wybranej wiadomości
- utworzenie nowej wiadomości
- odpowiedzenie na jedną z otrzymanych wiadomości
- znalezienie potrzebnej informacji w historii otrzymanych wiadomości
Pierwszy etap za nami. Kolejnym etapem jest określenie kilku tak zwanych 'przestrzeni interakcji' czyli prościej mówiąc fragmentów interfejsu użytkownika skupiających w sobie informacje i narzędzia potrzebne do wykonania określonego zadania. Jeszcze inaczej mówiąc są to ekrany lub podstrony interfejsu. Jeden ekran może służyć do wykonywania jednego lub kilku różnych zadań.
Celem przy tworzeniu przestrzeni interakcji jest zwiększenie ekeftywności pracy oraz ułatwienie nawigacji. Wykonując pracę w rzeczywistym świecie, człowiek będzie starał się zgromadzić w jednym pomieszczeniu wszystkie potrzebne narzędzia i materiały. Podobnie, na danym ekranie interfejsu, powinny znaleźć się wszystkie potrzebne informacje i funkcje. Tak jak trzymanie młotka i gwoździ w różnych pokojach zmniejsza efektywność wykonywanej pracy, tak też dzieje się jeśli informacje i narzędzia potrzebne do wykonania danego zadania znajdują się na różnych ekranach. Więcej na ten temat możecie poczytać u Larry'ego Constantine w wyżej wymienionej literaturze. Wróćmy do przykładu.
Na podstawie listy zadań postanowiłem, że będą trzy przestrzenie interakcji: listaWiadomości, dialogRedagowaniaWiadomości, wyszukiwarkaWiadomości.
Teraz należy zastanowić się jakie zadania powinny wchodzić w skład danej przestrzeni interakcji:
Zadanie sprawdzenie listy nieprzeczytanych wiadomości przeczytanie wybranej wiadomości utworzenie nowej wiadomości odpowiedzenie na jedną z otrzymanych wiadomości znalezienie potrzebnej informacji w historii otrzymanych maili | Przestrzeń interakcji listaWiadomości listaWiadomości dialogRedagowaniaWiadomości dialogRedagowaniaWiadomości wyszukiwarkaWiadomości |
Przykład 1.
- jakie narzędzia i materiały muszą znaleźć się na danym ekranie (w danej przestrzeni interakcji)
- jak zgrupowane i zagnieżdżone są poszczególne elementy
- w którym miejscu na ekranie ma znaleźć się dany element
- jak będzie wyglądać nawigacja pomiędzy poszczególnymi przestrzeniami interakcji
Dokończmy nasz przykład:
Przykład 2.
Przykład 3.
Teraz mamy gotową architekturę naszego interfejsu użytkownika. Taki sposób prototypowania jest bardzo szybki, co pozwala na wypróbowanie wielu nawet bardzo 'szalonych' wariantów w krótkim czasie. Możemy teraz zacząć ulepszać nasz prototyp i szukać innowacyjnych rozwiązań dzięki możliwości eksperymentowania z różnymi konfiguracjami położenia i zagnieżdżania elementów. Dzięki abstrakcyjnemu prototypowi możemy w strategiczny sposób podejść do nawigacji między poszczególnymi ekranami. Jeżeli masz drogi czytelniku jakieś uwagi co do stworzonego przeze mnie interfejsu dla skrzynki pocztowej to znaczy, że model działa. Moja wizja tego interfejsu staje się widoczna dla Ciebie, co pomaga w podwyższaniu jej jakości. Dzięki temu modelowi możemy wspólnie stworzyć bardzo użyteczne i innowacyjne rozwiązanie czyli miejsce gdzie nasi użytkownicy łatwo znajdą potrzebne im narzędzia i informacje.
Zachęcam do wypróbowania Canonical Abstract Prototype w Waszych projektach.