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
wtorek, 26 maja 2009

28 maja: ClearWeb 3, a w ramach niego m.in. panel dyskusyjny "Projektowanie w ramach procesu". Wśród panelistów wystąpią: Eryk Orłowski, Krzysztof Piwowar i autor niniejszego wpisu - Marek Kasperski.

Miejsce i czas: Wrocław, budynek Politechniki Wrocławskie; start godz. 18-sta.

 

30 maja (w moje 30-ste-któreś-tam urodziny): "Interfejs użytkownika: Kansei w praktyce". To już czwarta edycja tego corocznego seminarium. Całodniowa impreza i interesujący program.

Miejsce i czas: Warszawa, Polsko-Japońska Wyższa Szkoła Technik Komputerowych, ul. Koszykowa 86; start godz. 10-ta.

 

3 czerwca: Witajcie w realu, czyli Spotkanie o Nowych Mediach. Jak już niektórzy mogli przeczytać, chociażby na interaktywnie.com czy na Spotkaniach GoldenLine, na zaproszenie organizatorów będę miał przyjemność wystąpić w Krakowie. Nie wiem jeszcze co będzie tematem wystąpienia, gdyż o rozstrzygnięcie tego poprosiłem samych zainteresowanych - na stronie imprezy można zagłosować.

Miejsce i czas: Kraków, Centrum Kultury Rotunda, Oleandry 1; start godz. 20-sta.

 

W imieniu organizatorów i własnym - zapraszam.

poniedziałek, 18 maja 2009

Przy okazji panelu dyskusyjnego w ramach ostatniego World of Usability Day we Wrocławiu padło pytanie z publiczności odnośnie menu, jakie zastosował Amazon.com w ramach swojej ostatniej odsłony (jak pamiętamy, wcześniej menu Amazona opierało się na słynnych zakładkach). Główny zarzut był taki, że to rodzaj menu kaskadowego, a przecież te doczekało się już wielu sowitych krytyk w ramach usability (chociaż ja znam też badania, które nie są aż tak krytyczne jak uwagi Nielsena z przed kilku lat). Zgodnie wówczas odrzekliśmy, że trudno teraz o jakiekolwiek spekulacje - czas pokaże.

 

Amazon: Mega drop-down menu - zwinięte.

Amazon: Mega drop-down menu - rozwinięte.

Rysunek 1. Menu aktualnej wersji Amazon.com na podstronie produktowej i zwinięte menu (górny obrazek) oraz rozwinięte (dolny).

 

Z projektu na projekt przekonywałem się, że menu jako takie coraz częściej ignorowane jest przez użytkowników i ma dość niski poziom używalności - użytkownicy serwisów, które badałem (np. metodą clikctrackingową) większość kliknięć oddawali w te rejony strony, gdzie była rozlokowana główna treść (content). W sumie jak pomyśleć, to dość oczywista obserwacja biorąc pod uwagę, że odwiedzając rozmaite strony WWW jesteśmy zainteresowani treścią, a nie jej umiejscowieniem w ramach serwisu. Skomplikowane strony, o dość niejasnej strukturze bądź mocno rozbudowanej, mają z tym problem. Ale wynika to raczej ze słabej architektury informacji na poziomie grupowania informacji, a nie z tego, że ludzie lubią menu.

Kolejny problem z menu wiąże się z faktem, że te nie powinny być zanadto rozbudowywane - stoi za tym niepodważalny argument o pojemności pamięci krótkoterminowej.

Przy serwisach o bardziej skomplikowanej strukturze, gdzie mamy do czynienia z kilkoma poziomami zagłębienia oraz zmieniającym się sposobem konsumowania internetu - coraz bardziej zwiększająca się liczba przekierowań z Google na podstrony w stosunku do odwiedzin bezpośrednich - dochodziły jeszcze kwestie związane z informowaniem użytkowników gdzie są w ramach całości witryny. Rozwiązaniem okazały się okruszki (breadcrumbs i artykuły nt.: 1 i 2), które niejako tworzyły kolejne piętro nawigacji, w dodatku ich konstrukcja nie dla wszystkich użytkowników jest jasna (czy pokazują strukturę serwisu, czy ścieżkę nawigowania użytkownika w danym serwisie).

Powracając do Mega Drop-Down Menu - w pewnym sensie zostały też one wprowadzone do oprogramowania desktop, przy okazji Office 2007. Wspomina o tym m.in. Nielsen, który w artykule "Mega Drop-Down Navigation Menus Work Well" chwali skuteczność tego rozwiązania - także w zastosowaniu dla Weba.

 

Mega drop-down menu w Office 2007.

Rysunek 2. Mega drop-down menu w Office 2007.

 

Sam także przy kilku prowadzonych aktualnie projektach przekonuję [bądź udało już mi się przekonać] swoich klientów do tego typu rozwiązania, którego podstawową zaletą jest szybka dostępność do listy wyboru, na której powinny się znajdować zgrupowane opcje (niczym na mapie serwisu) oraz fakt, że znajdują się w jednym miejscu (pod jednym przyciskiem), a nie na wielu osobnych listach, bądź fatalnych rozwiązaniach zakładkowych stosujących menu drugiego poziomu (jeszcze w grono.net widziałem jak lichą ma to skuteczność, a przy źle odrobionej lekcji z grupowania, to jeśli nie jest to najgorsze rozwiązanie, to przynajmniej jedno z najgorszych - "do cholery, gdzie to jest", myślę penetrując kolejne zakładki).

 

Mega drop-down menu w sklepie Marks & Spencer.

 

Mega drop-down menu w sklepie Games Workshop.

 

Odeo: mega drop-down menu.

Rysunek 3. Mega drop-down menu w sklepach: Marks & Spencer (u góry) i Games Workshop (po środku) oraz na stronie Odeo.com (u dołu).

 

Mega drop-down menu nadaje się też świetnie przy rozbudowanych strukturach witryn. Można wtedy zastosować rozwiązanie, które przy okazji daje użytkownikowi wartość, jaką by uzyskał z bredcrambs. Poniżej trzy przykłady (w tym jeden już z rodzimego podwórka) takiego zastosowania, gdzie menu budowane jest na zasadzie okruszków - opcje widoczne - zaś pod głównym przyciskiem dostępne sa opcje pierwszego poziomu - rzecz jasna w ramach mega drop-down menu.

 

Walmart: Mega drop-down menu & bredcrambs.

 

Girl Scouts: Mega drop-down menu & bredcrambs.

 

Onet Moto: mega drop-down menu & bredcrambs.

Rysunek 4. Przykłady mega drop-down menu z wykorzystaniem przy tej okazji idei okruszków na stronach (idąc od góry): sklepu Walmart (przykład zagnieżdżenia dla podstrony z iPhone), serwisu Girl Scouts of Middle Tennessee (przykładowa podstrona) oraz Onet Moto z menu zamkniętym i otwartym (przykładowa strona z galerii).

 

Oczywiście, jak pisał Lem, wszystko ma awers korzyści i rewers niepoznanych dotąd bied. Mega drop-down menu może także być nieużyteczny. Najczęstsze powody to:

  • zbyt rozbudowana wielkość samego menu, niemieszcząca się w jednym oknie przeglądarki i przez to wymagająca przewijania (na przykład element "Wszystkie kategorie" w serwisie Grrr, albo "Style" w SmartHistory);
  • źle oprogramowane warstwy, przez co menu po rozwinięciu zamiast znajdować się na wierzchu, to przykryte jest treścią strony (przykład poniżej);
  • w końcu - nie przemyślany dobór linków, a także zbyt duża liczba opcji, przy jednoczesnym braku jasnego ich zgrupowania.

 

Mega drop-down menu w serwisie EA.


Rysunek 5. Mega drop-down menu w serwisie EA.com. Jak widać, fatalnie oprogramowane (zrzut spod FF) - u góry na stronie głównej spory fragment menu przykryty przez wideo, zaś na podstronie katalogu gier, przez listę produktów.

 

Za około m-c w jednym z krajowych serwisów turystycznych zamiast aktualnie rozbudowanego menu znajdzie się jeden przycisk, a pod nim mega drop-down menu. W dalszej kolejności... ale na to jeszcze za wcześnie, by zdradzać. W każdym razie dwa kolejne serwisy z mega drop-down menu są już w kolejce. :)

 

Kilka dodatkowych przykładów:

 

Warto przeczytać:

Oraz artykuł techniczny, ale ważny ze względu na findability: Nifty Navigation Tricks Using CSS.

00:56, marekkasperski
Link Komentarze (5) »