Zadałem jakiś czas temu na blipie pytanie dotyczące artykułu Label Placement in Forms. Interesowało mnie czy może jest jakiś powód dla którego niektórzy (np. Marek Kasperski w swojej książce Projektowanie stron WWW) piszą aby labele do pól formularzy umieszczać na lewo od samych pól i wyrównane do prawej, a dlaczego inni (choćby autor tego artykułu) uważają, że najlepiej opis pola umieścić ponad polem, zmniejszając tym samym liczbę fiksacji wzroku? Czy Ci pierwsi nie znają badań? Czy kierują nimi jakieś inne przesłanki (np. praktyczne), o których ja nie wiem? Rzecz jasna, nie udało mi się tak doprecyzować pytania (ciężko się było w 160 znakach zmieścić :D).
Dostałem dwie odpowiedzi. Skopiowałem sobie kiedyś tylko ich treść, nie podam niestety linka, bo w blipowym archiwum nie mam szansy tego znaleźć. Tak wyglądała rozmowa:
reinmar: #usability labele nad inputami, czy na lewo od nich (wyrównane do prawej)? Za każdym razem piszą inaczej (choć to pewnie bez znaczenia)
PanA > reinmar: nie bez znaczenia, zależy co chcesz osiągnąć. U góry się szybciej czyta niż obok, mniej fiksacji
PanB > reinmar: [blip] tak jak mówi ^PanA, najlepiej nad ale pola muszą być udzielone, mogą też być po lewej ale z wyrównaniem do prawej
Zaciekawiło mnie co miał PanA na myśli pisząc: zależy co chcesz osiągnąć
:
reinmar > PanA: To co mogę osiągnąć umieszczając je po lewej? Więcej fiksacji, więc umieszczać je tam jak chcę zniechęcić użytkownika? ;P
PanA > reinmar: czasami użytkownikowi nie ma być łatwiej - możemy chcieć zmusić go do zastanowienia się nad tym co wpisuje, etc.
reinmar > PanA: Dlatego odciągamy go od zastanawiania utrudniając ogarnięcie formularza? Czy dajemy mu więcej czasu na zastanowienie się
Uhh... Urocze powtarzanie usłyszanych od branżowych guru i wyczytanych z książek zdań. Zresztą - już moje pytanie było zadane złośliwie, bo po zależy co chcesz osiągnąć
w miarę wiedziałem czego się mogę spodziewać.
Jednak nie do samej rozmowy chciałem bić w tym wpisie (dlatego też ocenzurowałem rozmówców - nie chcę tu dyskusji :P), a do dwóch błędów, które moim zdaniem wiele osób popełnia podczas projektowania.
Generalnie sytuacja ta odnosi się do każdej branży. Młodzi adepci Czegoś siadają do książek, chłoną, chłoną i napuchli wiedzą stają się w ich mniemaniu pełnowartościowymi specjalistami od Czegoś. Znają dziesiątki strasznie brzmiących terminów, mogą toczyć poważne dyskusje z ważnymi osobami ze świadka Czegoś. Zabawa kończy się jednak kiedy "specjalista" wkracza w granice praktyki. I tutaj, w zależności od osobowości i życiowej mądrości, z pokorą zbiera doświadczenie i weryfikuje posiadaną już wiedzę, bądź też dalej wygłasza znaną sobie teorię, która zupełnie nie ma zastosowania w praktyce.
Żeby była jasność - nie neguję wartości znajomości teorii i nie twierdzę, że ktoś kto poznał teorię może być dobrym praktykiem.
PanB > reinmar: osobiście nad daje gdy jest mało pól, przy większej ilości daje z lewej
O. I to jest ciekawa odpowiedź. Rzeczywiście - ciężko przy 20 polowym formularzu dawać opisy ponad pola, ponieważ formularz ten rośnie nam do ogromnych rozmiarów. Przypomniała mi się jednak przenośnia (?), którą kiedyś wymyśliłem aby zobrazować w firmie jaki popełniamy błąd projektując funkcjonalności jednego serwisu. Wiele osób działa tak:
Weźmy tort, bo przecież każdy lubi tort. Tort jest fajny!
Weźmy znaczek Nike. Przecież jest teraz trendy, na pewno każdemu się spodoba.
Ja chcę jeszcze płytę DVD. Przecież jest taka funkcjonalna. Płyta DVD jest fajna!
I co dostajemy? Tort z przyklejonym z boku znaczkiem Nike i wbitą na sztorc płytą DVD. Dzieło sztuki po prostu. Niestety tak działa wiele osób - dobierając funkcjonalności serwisu wybierają (np. z konkurencyjnych rozwiązań) te, które są fajne, nie myśląc o tym, czy razem będą tworzyły spójną całość. Projektując interfejs zagłebiąją się w statystyki, badania, wybierają atomowo najlepsze, najszybsze, najczytelniejsze rozwiązania i nie patrzą na ogół serwisu. Nagminne.
Nie, nie uważam się za specjalistę od użyteczności, nie przeczytał nawet 5 książek. Co więcej - możliwe, że PanA ma rację, a ja jestem zbyt ograniczony by go zrozumieć.
Tak samo - sam nie jestem wolny od wyśmiewanych przeze mnie błędów. Niestety ;)
BTW. muszę wreszcie stworzyć sobie jakiś design do tego blogaska.
Ja lubię jak etykiety są lewej, wyrównane do lewej, lecz jeśli to możliwe, to blisko pól. Tak mi się bardziej podoba, a nie czuję żadnej różnicy w wygodzie wypełniania takich formularzy w stosunku do takich z etykietami nad polami.
Mi też spodobała się odpowiedź pana B. Ale można częściowo wybronić i pozycję A -- czasem użytkownika trzeba przytrzymać, nawet jeśli wydaje mu się, że ogarnia sytuację. Np. stosowane gdzieniegdzie przyciski typu "dalej", które uaktywniają się dopiero po jakimś czasie (potwierdzenie instalacji dodatków w firefoksie), albo po przewinięciu tekstu (instalatory oprogramowania wyświetlające warunki licencji). Czasem trzeba użytkownikowi trochę utrudnić, żeby poczuł się zdezorientowany i przestał na chwilę mechanicznie klikać (choć nie wiem, czy odnosi się to również do formularzy).
@mcv: Ja w zasadzie też lubię do lewej - łatwo się skanuje wzrokiem po tym. Musi być jednak spełniony właśnie ten warunek, że pola muszą być plisko opisów - inaczej ciężko łączyć pola z opisami, bo można linie pogubić.
@Hoppke: Nie za bardzo mnie to przytrzymywanie przekonuje tak w ogóle. Na pewno nie w tym kontekście Trzeba by konkretny przypadek rozpatrzyć. Wątpię jednak żeby zmiana położenia opisów pól miała jakiś wpływ na to ile czasu ktoś poświęci na myślenie nad formularzem.
Jasne, generalizowanie prawie nigdy nie działa ;)
A zmiana opisów pól ma wpływ na użytkownika, tylko że to dosyć śliska sprawa. Czasem użytkownik "patrzy, ale nie widzi" i działanie na pozór sprzeczne z usability potrafi pomóc. Ale to są takie subtelności, że nie robiłbym z nich świętych zasad. Bo wiadomo, ludzie gdzieś o tym przeczytają, zapamiętają, a potem będą latami powtarzać i innych nauczać.
Zauważyłem, że wiele urzędowych (głównie papierowych) formularzy ma etykiety pod kratkami, co u osób przyzwyczajonych do "normalnego" układu, powoduje szeroko pojętą fiksację :)
Przykład:
http://eurzad.szczecin.pl/eurzad/files/1C88673CA5F942A8A3A582483CF41F8B/dowod.pdf
Hoppke, nie wiem jak innych, ale mnie wszystkie wymienione przez Ciebie przykłady zwyczajnie denerwują i bynajmniej nie zmniejszają "mechaniczności" moich działań -- po prostu muszę zmarnować więcej czasu. Ja tam się na "usabiliti" nie znam, ale jestem zdania, że zmuszanie użytkownika do czekania lub do jakiejś niepotrzebnej interakcji to zło.
@jam łasica: Otóż to :) Normalne jest to, że najpierw czytamy co mamy wpisać, a później to wpisujemy. W urzędowych papierach tę kolejność zmieniono. Najpierw wpisujemy, a później czytamy co wpisaliśmy :D Komuś tak ładniej pewnie wyglądało.
@oczekiwanie na uaktywnienie się przycki w firefox: jeden z powodów dla których przestałem używać tej przeglądarki. Tak jak napisała mina86: ZŁO!
@urzędowe formularze: nie wszystkie mają podpisy u dołu - we wniosku o rejestrację pojazdu są pola podpisane z lewej, w pewien sposób wcięte w pole. Wcięte tak, że zabierają miejsce na wpisanie wartości przez użytkownika/obywatela. Efekt jest tragiczny, bo pole "rodzaj pojazdu" pozostawia dużo miejsca na wpisanie "samochód osobowy" zaś pole "marka, model, kolor, typ paliwa, cośtam jeszcze" pozostawia dużo mniej miejsca na dużo danych.
@mt3o: a propos firefoksa - masz na myśli zapisywanie pliku? Rzeczywiście irytujące. Zabezpieczanie użytkownika na siłę.
a propos formularzy: wiesz - po prostu ktoś to skopał i nie ocenił ile miejsca jest potrzebne. Można przenieść opisy na lewo, jeśli się zostawi im odpowiednią długość. Aczkolwiek ja chyba wolałbym tak jak w przykładzie od @jam łasica, ale opisy ponad polami. Problem może być tylko z powiązaniem wizualnym opisu z polem - przy obecnym wyglądzie kratek na tekst byłby problem. Poza tym, to i tak trzeba na każdy przypadek spojrzeć osobno, żeby nie popełniać tortu ze znaczkiem nike :P
@Reinmar: Mam również na myśli instalowanie dodatków. Gdy sobie pomyślę, że chcąc zainstalować kilkanaście dodatków, które mam w tej przeglądarce zazwyczaj, i że kilkanaście razy muszę czekać po kilka sekund, to mnie cholera bierze.
Te wady, i trochę innych, skutecznie zniechęciły mnie do przeglądarki spod znaku pandy ognistej.
Nawiązując jeszcze do dokumentów urzędowych - przykładowo takie PIT-y itp. są lepiej zrobione niż zaprezentowany wniosek o dowód osobisty.
Tam label jest w obrębie inputa :)
Jest w obrębie, ale nad tekstem, który się wpisze. Otoczenie pola i opisu ramką rozwiązuje problem, o którym wspominałem w którymś z wcześniejszych komentarzy. Mi się ten układ podoba.
"Mnie się ten układ podoba" -- nie należy zaczynać zdania od "mi".
@mina86: Tak mnie kiedyś kobieta uczyła, ale bardzo mi się (mnie się? :P) nie podoba słowo "mnie" w tym kontekście ;)
Zasada jest stosunkowo prosta - nie zaczyna się zdania od "mi" :)
Też kiedyś miałem z tym problem.
http://poradnia.pwn.pl/lista.php?id=5375
Reguła zadziwiająco prosta jak na język polski ;) Trzeba będzie zapamiętać. Dzięki.
A jeszcze wracając do tematu opóźnień, to tak mi się skojarzyło: gry! Które w kwestii opóźnień poległy na całej linii -- począwszy od długich animacji przy włączaniu, które nawet wciskając Esc zabierają kilka sekund (może jestem dziwny, ale mnie to irytuje i jak tylko jest taka możliwość to całkiem takie filmy wywalam (czasem znajdą się jakieś nieoficjalne łatki)) czy też różne "ziomalskie" animacje, które co prawda wyglądają fajnie, ale po kilku(nastu) godzinach gry nudzą i niepotrzebnie wydłużają czas.
Może przesadzam, ale moja opinia na temat dobrego interfejsu jest taka, że powinien on robić to co użytkownik chce, zanim jeszcze użytkownik o tym pomyśli. Coś takiego trudno jednak zrobić (tak, aby nie mieć zbyt dużo "false positive") więc pozostaje jedynie zaprojektować wszystko tak, aby nie dodawać zbędnych opóźnień oraz maksymalnie zmniejszać liczbę czynności, które użytkownik musi wykonać, aby osiągnąć cel.
Krąży anegdota, iż iPod był projektowany w ten sposób, że jeżeli nie dało się z jednego miejsca interfejsu przejść do innego w nie więcej niż trzech ruchach to trzeba było to poprawić.
No ale oczywiście ja tam się tylko wymądrzam i tak naprawdę nie mam pojęcia o czym mówię. ;)
BTW. http://www.youtube.com/watch?v=EuELwq2ThJE
A jakie to ma znaczenie czy nad, czy obok? Zapomnijcie o panu A czy B i ich tysiącach książek. Liczy się konsekwencja, inteligencja, inspiracja i pomysł. Zamiast słuchać panów A i B, lepiej uczyć się od najlepszych praktyków, bezpośrednio z istniejących w internecie projektów. Kto szuka, ten znajdzie.
<i>"Niestety tak działa wiele osób - dobierając funkcjonalności serwisu wybierają (np. z konkurencyjnych rozwiązań) te, które są fajne, nie myśląc o tym, czy razem będą tworzyły spójną całość. Projektując interfejs zagłebiąją się w statystyki, badania, wybierają atomowo najlepsze, najszybsze, najczytelniejsze rozwiązania i nie patrzą na ogół serwisu. Nagminne."</i>
Być może dlatego w polskim internecie mało jest dobrze zaprojektowanych stron. Za dużo specjalistów, za dużo schematycznego myślenia, za mało twórczego profesjonalizmu.
"A jakie to ma znaczenie czy nad, czy obok?"
Czasem jest to decyzja tego kalibru, co "z szeryfami czy bez?"...
"Zapomnijcie o panu A czy B i ich tysiącach książek. Liczy się konsekwencja, inteligencja, inspiracja i pomysł. "
Bez podparcia książkowego będziesz musiał się uczyć głównie na własnych błędach. A na to szkoda czasu...
"Zamiast słuchać panów A i B, lepiej uczyć się od najlepszych praktyków, "
Czyli zamiast panów A i B radzisz uczyć się od panów C i D? :)
Zgadzam się z Hoppke. Książki nie są złe. Dokładnie - wiedza nie jest zła. Można się uczyć z książek, bądź od ludzi. Nie powiecie mi przecież, że matematyki uczyliście się obserwując otaczającą Was rzeczywistość i metodą prób i błędów? Nie. Wiedza jest potrzebna. Jednak równie ważna, tak samo jak w matematyce, potrzebna jest praktyka.
"Za dużo specjalistów, za dużo schematycznego myślenia, za mało twórczego profesjonalizmu."
Schematy nie zawsze są złe. Nie zawsze jest czas i pieniądze na zaprojektowanie czegoś od zera, innowacyjnie, itd. Czasem warto skopiować już istniejące i dobre rozwiązania. Zresztą - przegląd rozwiązań konkurencji to jeden z etapów pracy nad projektem. Pisałem w każdym razie o tym w relacji z WUD Toura http://blog.koszulinski.pl/2009/11/18/wud-tour-2009-wroclaw-relacja-i-przemyslenia/
"Czy Ci pierwsi nie znają badań?"
@: Znają.
To było pytanie retoryczne ;)