Moje pierwsze zetknięcie z komputerami związane było z grami – stało kilka maszyn w osiedlowym klubie młodzieżowym (w pierwszej połowie lat 80. mało kto miał komputer w domu). Całe godziny spędzałem wtedy grając w Pac-Mana, Bumber Bush Boulder Dash czy Mario Bros, oraz moją ulubioną w tamtym czasie – Montezuma’s Revenge. Gry tak zdominowały mój świat dzieciństwa, że pozostałem wiernym graczem do dziś. Jednak dziś mam mniej czasu na granie, a więcej projektuję… Pytanie: czy można, a jeśli tak, to jak, zastosować do projektowania interfejsów gier komputerowych klasyczne metody prototypowania interfejsów?
***
Paper prototyping
O metodzie paper prototyping jako takiej, już pisałem, więc nie będę się powtarzał. Jak ma się jednak do protytpowania gier komputerowych? Zobaczmy (film poniżej).
Flowcharts (flow diagrams): diagramy przepływu
Pierwszy raz na szerszą skalę diagram przejścia zastosowałem przy okazji projektowania Strefy dla grono.net (takie połączenie programu partnerskiego oraz programu lojalnościowego).
Strefa to nie był prosty projekt – uwzględniał interfejsy po stronie A) użytkownika indywidualnego, B) partnera oraz C) moderatorów (NIE – moderatora).
Prócz stron internetowych zawierał również kilka akcji związanych ze skrzynką e-mail osoby, która się rejestrowała (zarówno jako partner, jak i jako gronowicz). Dzięki diagramowi przejść można było zobaczyć jak faktycznie przebiega proces rejestracji – na którym etapie włącza się moderator, kiedy system wysyła wiadomość na e-mail użytkownika, etc.
Diagramy zarówno mogą odpowiadać przejściom w ramach klasycznego Wizarda, gdzie mamy kilka ekranów, jak i – w prostszej formule – przejściom w ramach jednego ekranu.
Przykłady ze świata gier:
Diagram przejść wieloekranowych: tworzenie postaci w grze Neverwinter Nights.
Przebieg przejść: Start → Select Gender (Powrót wyżej LUB Dalej) → Select Race (Powrót wyżej LUB Dalej) → Select Portrait (Powrót wyżej LUB Dalej) → Select Class (Powrót wyżej LUB Dalej) → Select Alingment (Powrót wyżej LUB Dalej) → Select Abillities (Powrót wyżej LUB Dalej) → Select Package (Powrót wyżej LUB Dalej) → Customize (Powrót wyżej LUB Dalej) → Done.
Diagram przejść jednoekranowych: to przejścia w ramach jednego ekranu.
Na poniższym rysunku – zrzut z gry Arcanum – widać proces tworzenia postaci. Na ekranie wybieramy – w kolejności, w jakim sugeruje układ interfejsu:
- Portret postaci
- Wpisujemy imię i nazwisko
- Wybieramy płeć
- Określamy rasę (do wyboru: człowiek, półork, gnom i inne)
- Wybieramy cechę specjalną, któa nadaje kolorytu i niepowtarzalności postaci
I na koniec albo potwierdzamy stworzoną postać przechodząc do gry (6), albo anulujemy proces i przechodzimy do interfejsu gry piętro wyżej (7).
Jednak układ tego interfejsu ma kilka błędów, które można było już wychwycić na etapie projektowym. To umieszczenie portretu, które jest zależne od dalszych wyborów gracza: płci – mamy portrety męskie i żeńskie, oraz rasy – inne zestawy portretów są dla różnych ras. W rezultacie zmiana jednego z parametrów usytuowanych w ramach architektury informacji poniżej portretu, wpływa na automatyczną zmianę tegoż, ulokowanego na samej górze, i w rezultacie pociąga za sobą ponowny wybór portretu.
Architektura informacji: mapa strony – mapy gry
Tak jak w ramach projektowania WWW tworzymy schematy AI w ramach całej witryny, tzw. mapy stron, tak w ramach gier wytwrzane były, i są, mapy leveli.
Mock-up
Prototypowanie interfejsów gier przy pomocy szablonów poszczególnych ekranów interfejsu, uwzględniających już charakter gry, i przez to prezentujących już lna tym etapie ayout, to taki sam standard w świecie projektowania gier, co i dla Weba.
Eyetracking: badania i poprawki
O eyetrackingu też już były przysłowiowe dwa słowa. Ale: Czy można eyetrackować interfejsy i przebieg gry komputerowej?
A czemu nie!
Prototypowanie nowych rozwiązań
Dla wielu osób, w tym przede wszystkim graczy, inetrefjsy gier komputerowych często uchodzą za odmienne w swoich rozwiązaniach od standardu GUI znanych nam systemów operacyjnych. Przykładem może być rewelacyjny interfejs Atom, z ciekawym systemem menu-flow.
Atom Interface to rozwiązanie, które doczekało się implementacji zarówno w Neverwinter Nights, co i Temple of Elemental Evil. Charakteryzuje się tym, że poszczególne zagnieżdżenia w ramach klasycznego menu kaskadowego, zlokalizowane są są wokół centralnego jądra, otoczonego głównymi kategoriami menu.
Okazuje się, że z prototypowaniem tego typu rozwiązań, wedle klasycznych metod, też nie ma żadnych problemów.
Reasumując
Warto pamiętać, że poznanie i opanowanie podstawowych metod prototypowania, pozwala projektantowi na tworzenie interfejsów aplikacji niezależnie od ich przeznaczenia oraz sposobów wykorzystywania. Projektowanie Web GUI daje projektantowi również sprawność w ramach projektowania interfejsów klasycznych systemów GUI oraz interfejsów gier. A także interfejsów przeznaczonych do innych urządzeń, niż klasyczny komputer: np. telefonów komórkowych.