Zakładki:
Inne moje "rzeczy"
Inne rzeczy
Innych "rzeczy"
Książki
Możliwości i wzorce projektowe
Po godzinach
Rządzą... Gry
Zobacz mnie na GoldenLine
ThinkLab: moja firma

MOJE KSIĄŻKI - AUTOR

Użyteczność w praktyceM. Kasperski, A. Boguska-Torbicz Projektowanie stron WWW. Użyteczność w praktyce, Helion 2008.

Moja książkaM. Kasperski, Sztuczna Inteligencja, Helion 2003.

REDAKTOR MERYTORYCZNY

UmysłD. Casacuberta, Umysł. Czym jest i jak działa, Świat Książki 2007.

100 sposobów...T. Stafford, M. Webb, 100 sposobów na zgłębienie tajemnic umysłu, Onepress 2006.

Istota inteligencjiJ. Hawkins, S. Blakeslee, Istota inteligencji, Onepress 2005.

RSS
środa, 30 stycznia 2008

Wczoraj miałem przyjemność moderować panel Potęga usability w ramach tegorocznej edycji e-Travel Forum.

Jak strony z zakresu e-commerce turystycznego wygląają pod względem architektury - każdy widzi, więc rozpisywać się na ten temat specjalnie nie będę. Nikt chyba specjalnie nie zadaje sobie pytania, dlaczego nei sprzedają się wycieczki do Santorini, i do innych tego rodzaju miejscowości, które chcącym wyjechać na urlop użytkownikom tychże stron nawet do głowy nie przychodzą.

Nie specjalnie też obsługiwane są scenariusze pozwalające nam znaleźć wycieczkę nie wg miejscowości,a wg atrakcji - nurkowanie, trasy rowerowe, windsurfing, etc. Choć zaznaczyć też trzeba, że marudzenie speców od usability przynosi już pierwsze efekty - coraz częściej np. pojawiają się kategorie tematyczne (np. narty), ale i oferty okazjonalne (wycieczki na sylwester, długie weekendy, itp.) - co cieszy.

Poniżej zamieszczam slajdy z panelu dyskusyjnego, któe były tłem do wymiany poglądów kilku osób z branży, którym dziękuję za dyskusję. A brali w niej udział:

  • Gabriel Matwiejczyk - Gemius S.A.
  • Adam Mazurkiewicz - Gemius S.A.
  • Paweł Śledziński - Perfect One.
11:55, marekkasperski
Link Dodaj komentarz »
niedziela, 27 stycznia 2008

W ostatnim czasie na sile przybiera zwrócenie uwagi projektantów w stronę neuropsychologii i kognitywistyki. User Experience, zwracające uwagę na człowieka, zmienia oblicze działki projektowej HCI i wypiera wcześniejszy wizerunek usability, oparty na fundamencie analiz heurystycznych i zgodności z W3C. Zainteresowanie projektantów z medium (specyfikacji komputera) przerzucane jest na użytkownika ("oprogramowania" umysłu).

okladka.Właśnie na na grupie IxDA została puszczona informacja nt. świeżo wydanej książki "Mental Models: Aligning Design Strategy with Human Behavior". Jak jeden z punktów z opisu głosi, dzięki tej książce: "Lepiej zrozumiesz doświadczenie użytkownika, zanim podejmiesz strategiczne decyzje oraz stworzysz projekt produktu". Książka posiada dość bogaty zbiór ilustracji, które wydawnictwo zamieściło na Flickr.com.

Po co ja o tym? Modele mentalne są jednym z podstawowych terminów używanych w ramach kognitywistyki (ang. cognitive science); w podobnym kontekście mówi się także o reprezentacjach.

W czasie zadań projektowanych specjaliści od UX też często - choć w większości bezwiednie i nieświadomie - odwołują się do modeli mentalnych. Np.:

  • W badaniach z użyciem card sorting sprawdza się, w jaki sposób użytkownicy grupują informację (w testach zamkniętych) i jakie nazwy przypisują poszczególnym działom strony WWW (w testach otwartych). W ten sposób dowiadujemy się czegoś nt. funkcjonowania reprezentacji jężykowych dla pewnych zdarzeń, usług, itp. Dowiadujemy się także czegoś nt. funkcjonowania pamięci semantycznej oraz wzorów powiązań między poszczególnymi znaczeniami.
  • W badaniach z użyciem eytrackera, gdzie sprawdzamy rozkład fiksacji na danej stronie internetowej, możemy zaobserwować w jaki sposób użytkownicy tworzą sobie wzór danej strony - jej model mentalny. Co widzą, czego nie widzą (np. przez okres 4,2 sekundy, gdy liczba fiksacji może wynosić nawet 14). Wiele wykonanych badań pozwala nam wychwycić pewne stałe, na bazie których tworzymy model mentalny tego, jak użytkownicy oglądają strony WWW. Dzięki temu następne nasze projekty są dużo lepsze już na etapie prototypowania - zwracamy dużo większą uwagę na kompozycję strony, na rozkłąd akcentów kolorystycznych, oraz budowanie odpowiedniego kontrastu w ramach elementów, które szybko mają zostać zauważone.
  • Odwołując się do modelu pamięci krótkoterminowej, podanej przez George'a Millera (1956), kiedy tworzymy menu. Doskonale zdajemy sobie sprawę, że użytkownicy nie będą w stanie "objąć mentalnie" nawigacji, gdy jej złożoność przekroczy magiczne 7±2 elementy.
  • Itd.

Piszę też o tym z tego względu, że na krajowym rynku dostępnych jest również kilka niezłych tytułów, pozwalających uzupełnić wiedzę z tych obszarów. W szcególności polecam "100 sposobów na zgłębienie tajemnic umysłu" Stafforda i Webba (Helion 2006), którą miałem sposobność redagować merytorycznie oraz niejako kontynuację tego tytułu: "75 sposobów na zwiększenie wydajności umysłu", autorstwa Rona Hale-Evansa (Onepress 2007), gdzie większość informacji poświęcona jest technikom mnemotechnicznym.

Polecam, bo to dobra sposobność zobaczenia co dzieje się w głowie naszych użytkowników, a często dowiedzenia się, jak, i czemu tak, przetwarzamy informacje (widzimy, myślimy, pamiętamy).

13:49, marekkasperski
Link Komentarze (4) »
środa, 16 stycznia 2008

Bill - oficjanie - odszedł, przekonując, że czeka nas świetlana przyszłość w interfejsach i za 5-10 lat znikną klawiatury i myszki, by ustąpić miejsca interfejsom opartym o przetwarzanie języka naturalnego (widać, że ktoś tu średnio się zna na tym zagadnieniu, bo inaczej takich głupot by oficjalnie nie głosił). Balmer albo oszalał, albo zmienia branżę na muzyczną (ale on chyba zawsze był taki). A tymczasem Steve pokazał MacBook Air - i już o tym wydarzeniu prawie połowa członków IxDA rozprawia (druga połowa zajmuje się kwestią czy Verdana, czy "Vernada").

Co takiego szczególnego ma MacBook Air? Ma szczupłą sylwetkę, rodem z paryskich wybiegów, pamięć flash zamiast dysku twardego (Apple obecnie jest największym odbiorcą pamięci flash firmy Samsung) - kiedyś chłopaki z Jabłka pierwsi zrezygnowali ze stacji dyskietek, teraz z dysku twardego - i... "pasożytniczo" korzysta z napędów optycznych (CD, DVD) komputerów znajdujących się w pobliżu (to robi wrażenie) + kilka innych, pomniejszych już ciekawostek. Jednak z punktu widzenia branży, interesujące jest rozszerzenie kompetencji nowego gładzika. To już nie jest touch-pad, a multi-touch.

Gesty w MacBook Air.

Sam mutli-touch nie jest jakiś rewolucyjny - w zasadzie idea (czy raczej technologia) wzięta jest z iPhone'a; gestykulacja, którą wykorzystuje także nie jest niczym nowym - w sporej mierze jest taka sama, jak chcociażby w Microsoft Surface. I właśnie to cieszy, że interefejs gestykulacyjny, który rodzi się na naszych oczach, ma spore szanse się przyjąć, dzięki standaryzacji gestów (zobacz filmy prezentujące gesty).

A gdzie jeszcze mamy do czynienia z koncepcją interfejsu gestykulacyjnego? Najbardziej znany to rzecz jasna interfejs wykorzystywany przy zabawie z Wii. Wprowadzano także gesty do obsługi softwaru - w przypadku przeglądarek internetowych (Safari, Opera) oraz w grach komputerowych - np. Black & White. Jednak bez polityki budowania standardu - alfabetu gestów - i to był błąd.

10:57, marekkasperski
Link Komentarze (2) »
sobota, 12 stycznia 2008
sobota, 05 stycznia 2008

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?

 

Interfejsy gry.

Rysunek 1. Interfejs gry Dune II: Battle For Arrakis.

 

***

 

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.

Flowchart: Neverwinter Nights.

Rysunek 2. Diagram przejść w ramach tworzenia postaci w Neverwinter Nights. Za: K. Saunders, J. Novak, Game Interface Design.

 

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:

  1. Portret postaci
  2. Wpisujemy imię i nazwisko
  3. Wybieramy płeć
  4. Określamy rasę (do wyboru: człowiek, półork, gnom i inne)
  5. 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).

 

Arcanum: tworzenie postaci.

Rysunek 3. Ekran interfejsu tworzenia postaci z gry Arcanum.

 

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. Od, przykładowo takie jak do Montezuma's Revenge: 1, 2, 3, 4, 5, 6, 7, 8, 9.

 

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.

 

Game Interface Design: Mock-up.

Rysunek 4. Przykład mock-upu ekranu Opcji w ramach projektu interfejsu gry komputerowej. (Więcej przykładów).

 

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 klasyccznych 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.