UI Design: Marek Kasperski

Autouzupełniacz (AutoSuggest) jest kapitalnym ficzerem sam w sobie - ten, kto wpadł na jego pomysł powinien otrzymać interfejsowego Oskara. Widziałem go w akcji już na wielu stronach i za każdym razem zadziwiał mnie swoim "sprytem" (tak, tak, personifikowanie interfejsów to normalna sprawa).

Świetnie się sprawdza chociażby w ramach funkcjonowania gramsajtów w gram.pl, przeszukując na bieżąco wg zadanego klucza bazy ulubionych: filmów, gier, zespołów muzycznych (nota bene, w tym serwisie społecznościowym jest wiele świetnych pomysłów, tylko chyba coś z ogólną koncepcją gramsajtów nie chwyciło). Sprawdza się też w wyszukiwarce serwisu AjaxRain, przeszukując zbiór udostępnianych tam skryptów. Ale to, co zrobiło Apple, to mistrzostwo świata!

Rysunek 1. Autouzupełniacz w gramsajtach gram.pl (u góry) oraz w serwisie AjaxRain (na dole).

***

O ile dobrze pamiętam, jakieś dwa m-ce temu ruszyła nowa odsłona firmowej strony Apple, nawiązująca stylistyką do najnowszej wersji Mac OS-a X - Leoparda.

Jak zwykle u Apple bywa stylistyka wyśmienita, przemyślana kolorystyka, dograny układ wyświetlanych elementów na danej stronie - nagłówki, widoczne linki kierujące do WIĘCEJ informacji, dobrze wykorzystany kolor pomarańczowy na elementach NEW, etc. Starannie przeniesione rozwiązania interfejsowe z systemu Mac OS X do interfejsu webowego. Przykładem mogą być focusy na polach wyszukiwarki (rysunek poniżej). (Ustalenia a propos focusów w: Apple Human Interface Guidelines). Choć z drugiej strony stosowane bardzo niekonsekwentnie - na jednych polach wyszukiwarki focusy są, na innych ich brak.

Rysunek 2. Niekonsekwencje w wyszukiwarkach webowych na stronie Apple: wyszukiwarka w części sklepowej została wyposażona w focus rodem z Mac OS X (dolna część rysunku - po lewej pole wyszukiwarki przed zaznaczaniem, po prawej po zaznaczeniu), ale już wyszukiwarka w głównym menu NIE (górna część rysunku, i tak samo: po lewej przed wybraniem elementu, po prawej po, ale bez focusu).

W czasie premiery nowej wersji strony Apple zniechęciły mnie do niej rozwiązania związane z menu rozwijanymi, rozlokowanymi w kolumnach po prawej i lewej stronie. Wodziłem kursorem po ekranie, a tu... frry, frry - i nim się zorientowałem w czym rzecz całe menu miałem na dole. Nawet nie kliknąłem; tylko najechałem kursorem... Nakierowałem kursor na którąś z zakładek... frry, frry - dwie inne pognały już do góry. Poza tym te odległości - jak ktoś sobie wyobraża, że użytkownicy będą wodzili po całym ekranie wzdłuż i w szerz tylko po to, by rozsuwać menu? Baaardzo średnie rozwiązanie.

Dałem sobie spokój z tą stroną... aż do wczoraj.

Film 1. "Świetne" rozwijane menu prosto od Apple, czyli pobaw się w złapanie właściwej zakładki. Nawet się nie klika, wystarczy (nieopacznie?) najechać kursorem myszy by wywołać (niepożądaną?) akcję. Disaster.

Do jednego z prototypów, który to właśnie wykonuję dla jednego z moich klientów, potrzebowałem ikonki ze zgrupowanymi osobami. Takiej małej szarej ikonki. I to w trybie "na już", stąd nie miałem czasu by coś samemu przygotować. Pamiętałem, że taką ikonkę widziałem kiedyś na stronie Apple. Podążyłem za tą myślą.

Pobieżne przeglądnięcie kilkunastu z podstron nie przyniosło pożądanego rozeltutatu - ikonki nigdzie nie było. Przyszła zatem pora na zaprzęgnięcie do roboty szukajki.

Wklepuję AV (od avatar), a tu, tuż pod wyszukiwarką, w ramach menu kaskadowego rozwija się... - i tu powracam do punktu wyjścia tego wpisu - AutoSuggest. Ale jaki? Z ikoną reprezentującą daną informację (najczęściej produkt), z tytułem, krótkim opisem, z podziałem na kategorie, do której dana informacja należy względem całej architektury strony. Absolutnie Piękna Rzecz! Przemyślana. Informacja podana dla użytkownika w najbardziej czytelny sposób jaki można sobie wyobrazić w tego typu rozwiązaniach i w dodatku na tak małej przestrzeni. Za to ktoś powinien dostać... no, przynajmniej podwyżkę :)

Film 2. Sposób prezentowania informacji przy pomocy autouzupełniacza na stronie Apple. Ideał.

I w ten sposób znów stałem się użytkownikem Apple Łeb Sajtu. I klikam, i myszkuję - to tu, to tam, co jeszcze zrobili lepiej. Choć "frry, frry" wciąż nie poprawiają.

Update z 16 sierpnia

Nawiązując do komentarza:

• Apple Spotlight (garść informacji).
• Apple Spotlight dla programistów (czyli zrób to sam).
• Okiem użytkownika + info. nt. wytycznych.