Strona główna » Wzorce projektowe

Przyciski akcji – w jakiej kolejności?

5 czerwca 2012 napisała Iga [ 14 odpowiedzi ] Drukuj wpis

Jest jedno pytanie, które słyszę na każdym szkoleniu z projektowania użytecznych interfejsów – w jakiej kolejności powinny być przyciski akcji (np. Wyślij i Anuluj lub Zatwierdź i Anuluj). Z opowiadań wynika, że problem ten jest przyczyną burzliwych i stale powtarzających się dyskusji niejednego zespołu IT. Z kolei liczne polemiki pasjonatów UX w internecie (np. na UX StackExchange czy Quora) pokazują, że nawet dla projektantów sprawa nie jest oczywista.

Pozornie najprostsza odpowiedź – trzymaj się konwencji

Bardzo częstą odpowiedzią, z jaką można się spotkać, jest dostosowanie kolejności przycisków do wskazówek platformy, na którą tworzysz aplikację. Ich twórcy, z wieloletnim doświadczeniem w projektowaniu interfejsów, powinni być ze sobą zgodni, czyż nie?

Apple – Anuluj po lewej

Users expect all the buttons at the bottom right of a dialog to dismiss the dialog. A button that initiates an action is furthest to the right. This rightmost button, called the action button, confirms the main point of the dialog. The Cancel button is to the left of the action button.

źródło: Apple Human Interface Guidelines

iOS - anuluj po lewej

Microsoft – Anuluj po prawej

Place command buttons that apply to all property pages at the bottom of the property window. Right-align the buttons and use this order (from left to right): OK, Cancel, and Apply.

źródło: Microsoft Human Interface Guidelines

Windows - Anuluj po prawej

GNOME – Anuluj po lewej

Show a Cancel button that will prevent authentication and close the alert. Place this button to the immediate left of the OK or equivalent button.

źródło: GNOME Human Interface Guidelines

GNOME - Anuluj po lewej

Android – Anuluj po lewej

Nie znam konkretnej wytycznej dla kolejności przycisków akcji w aplikacjach na Androida, jednak w wytycznych do designu można znaleźć takie przykładowe okienka dialogowe:

Android - Anuluj po lewej

Jak widać, platformy nie są zgodne co do kolejności przycisków. A co jeśli tworzymy aplikację webową, która ma być dostępna na wszystkich platformach?

Eksperci użyteczności argumentują

Tak naprawdę odniesienie się do konwencji nie rozwiązuje wcale problemu, bo nie mówi nam, jaka kolejność przycisków jest bardziej użyteczna. Zwolennicy podejścia Microsoft argumentują, że akcja pierwszorzędna – czyli Zatwierdź lub Wyślij – powinna być pierwsza. Czytamy od lewej do prawej, więc umieszczenie przycisku po lewej skróci nam drogę dotarcia do niego. Z kolei zwolennicy podejścia Apple (Anuluj po lewej) twierdzą, że przycisk zatwierdzania powinien kończyć informacje i sugerować wywołanie następnego kroku. Z podobnego powodu przycisk „Następny” (np. przy stronicowaniu) występuje zwykle po prawej stronie.

Tom Tullis postanowił sprawdzić, jak zdaniem specjalistów użyteczności/UX powinny być ułożone przyciski. W jego ankiecie wzięło udział 64 ekspertów, którym przedstawiono 4 okienka dialogowe z przyciskami bez etykiet. Respondenci mieli wybrać, który przycisk ich zdaniem zawiera daną etykietę (do wyboru było OK/Anuluj lub Wyślij/Anuluj).

Fragment ankiety Tullisa - ok / cancel

W przypadku powyższego okna, w którym oba przyciski były blisko siebie, nie było prawie żadnej różnicy w odpowiedziach. 51% osób stwierdziło, że przycisk Anuluj powinien być po lewej, a 49% – że po prawej.

Spór ten kojarzy mi się ze sporem o papier toaletowy – powinien zwisać nad rolką czy pod rolką? Znajdą się zagorzali zwolennicy zarówno pierwszej, jak i drugiej orientacji. Spór ten także wzbudza silne emocje, a każde ze stanowisk poparte jest „racjonalną” argumentacją (gorąco polecam choćby lekturę na Wikipedii, lub mały eksperyment – poruszenie tematu wśród znajomych w pracy).

Orientacja papieru toaletowego - źródło: Wikipedia

Orientacja papieru toaletowego - źródło: Wikipedia

Jak zrobić użyteczne przyciski akcji?

Rzecz w tym, że zarówno kwestia kolejności przycisków, jak i orientacji papieru toaletowego to bardziej rzecz gustu i prywatnych preferencji, niż użyteczności. Zarówno przycisk Zatwierdź po lewej, jak i po prawej stronie może być użyteczny, pod warunkiem, że będzie łatwy do zidentyfikowania przez użytkowników. Dlatego ważniejszy od kolejności, jest jego wygląd.

Który przycisk jest pierwszorzędny? Grooveshark

Który przycisk jest pierwszorzędny? Grooveshark

Przyciski akcji w SeoPack

Jak wielkie jest prawdopodobieństwo pomyłki użytkownika? - SeoPack

Gdzie łatwiej zidentyfikować akcję pierwszorzędną?

Gdzie łatwiej zidentyfikować akcję pierwszorzędną?

Przycisk pierwszorzędnej akcji (zwykle akcją pierwszorzędną jest właśnie Zatwierdź, Wyślij, OK) powinien być wyróżniony: kolorem, wielkością czy stylem. Idea jest taka, żeby użytkownik nie musiał w ogóle czytać etykiet, aby już na pierwszy rzut oka domyślał się, który z przycisków jest ważniejszy i prawdopodobnie powinien być przez niego użyty. Jest to także zgodne z prawem Fittsa, które sugeruje nam, iż elementy ważne, często używane, powinny mieć większy rozmiar, tak aby były łatwo dostępne nawet dla mocno oddalonego kursora myszki.

Przyciski akcji w aplikacji Buily

Przyciski akcji w aplikacji Buily

 

Przyciski akcji na stronie Dribble.com

Przyciski akcji na stronie Dribble.com

Przyciski akcji na Facebooku

Przyciski akcji na Facebooku

Przyciski akcji na Gowalla

Przyciski akcji na Gowalla

Przyciski akcji w aplikacji Heinekena

Przyciski akcji w aplikacji Heinekena

Przyciski akcji w aplikacji WordPress

Przyciski akcji w aplikacji WordPress

Przyciski akcji w aplikacji GigWalk

Przyciski akcji w aplikacji GigWalk

Przyciski akcji na LearnBoost

Przyciski akcji na LearnBoost

Przyciski akcji na Puma.com

Przyciski akcji na Puma.com

Ale jak z tą kolejnością przycisków?

Ok, chyba wszyscy się zgodzą, że wygląd przycisków jest ważny, ale koniec końców trzeba podjąć jakąś decyzję i ustawić przyciski w „jakiejś” kolejności. Jako lojalny zwolennik obozu prawostronnych akcji pierwszorzędnych wybieram zawsze przyciski akcji po prawej, a anulowania po lewej (do czego i Was namawiam), argumentując to „kolejnym krokiem”.

Ale przynajmniej mam świadomość tego, że nie ma to tak naprawdę większego znaczenia ;)

 

Warto poczytać:

Tullis, T. (2008) OK and Cancel Buttons. What’s the Right Order?

(2011) Why ‘Ok’ Buttons in Dialog Boxes Work Best on the Right

Autorka

Iga Mościchowska

www: http://witflow.com
Managing Partner i UX Director w firmie WitFlow. Z zamiłowania projektant interakcji i badacz użyteczności, z wykształcenia socjolog. Szkoli, wykłada na AGH, występuje na konferencjach branżowych. Pracowała m.in. dla marek: Amica, Agora, eBay Classifieds, Egmont, Maspex Wadowice, MSZ, Polskapresse, PWN.pl, Vattenfall, a także dla licznych startupów. Czytaj więcej
Tagi: , , , , , ,
  • Adrian Dampc

    Sam jestem raczej zwolennikiem umieszczania „dalej/ok” po prawej, ale zgadzam się, że nie ma to większego znaczenia, póki wyraźnie oznaczamy akcję domyślną.

    Niby oczywiste, ale przykład choćby przycisków Windowsie pokazuje, że nawet najwięksi wciąż mają z tym problem.

  • http://kokocinski.info Michał

    ZAWIODŁEM SIĘ :)

    Zasiadam rano do prasówki, widzę temat i aż oczy mi się zaświeciły. Pamiętam miliony rozmów i kłótni oraz swoją największą oponentkę w tej kwestii z poprzedniej firmy. Pomyślałem, może nareszcie ktoś rozwiąże za mnie ten spór. A tu takie wyniki 51%-49%????????? Dlaczego???????? Nic to, pozostaje mi dalej być wiernym swojej „prawostronności” dla akcji pierwszorzędnych. :)

    P.s. Papier toaletowy wieszam zawsze od ściany. Może tutaj jest jakaś zależność. Papier od ściany – przycisk po prawej, papier do ściany – przycisk po lewej.

  • http://www.naursynowie.pl Ramon

    Zgadzam się, wygląd przycisku najważniejszy. A najlepiej, gdy akcja i przycisk są oznaczone kolorystycznie tak samo. Nagłówek Nowa wiadomość na FB jest niebieski, tak jak przycisk wyślij. Nagłówek Gowalla Sign in pomarańczowy, tak samo jak przycisk. Idealne rozwiązanie.

  • Aleksandra

    @Michał, z tym papierem to nie do końca, ja wolę papier od ściany i przyciski po prawej ;) Papier od ściany jest po prostu wygodniejszy w użyciu ;) Przycisk po prawej z kolei zawsze argumentuję jeszcze tym, że mając łapke na myszce, kursor zawsze jest bliżej prawej strony, więc skracamy drogę kursora do przycisku. Oczywiście jest to rozwiązanie wygodniejsze dla osób praworęcznych.

  • http://www.kamilos.net Kamil

    Fajny artykuł, ale wydaje mi się, że bardziej skomplikowaliście nim tematykę przycisków „GO”. Prawie każdy z przedstawionych tutaj formularzy jest inaczej zbudowany, a więc przycisk „GO dla każdego z nich powinien być w różnych miejscach.

    Podejście, które faworyzujecie moim zdaniem ma swoje uzasadnienie tylko w przypadku formularzy wielokrokowych np. instalacja aplikacji lub koszyk zakupów (wtedy rzeczywiście zaczynamy z lewej i oczekujemy następnego kroku po prawej), ale jest zupełnie nieużyteczna w przypadku pojedynczego okna (szukamy pojedynczego potwierdzenia tego co wybraliśmy idąc wzrokiem po lewej bezpośrednio w dół).

    Dla przykładu ostatni formularz Puma moim zdaniem powinien mieć przycisk „Submit” z lewej strony pod ostatnim polem uzupełniania. Patrząc na całe okno, zaznaczamy opcje, które są po lewej stronie okna, następnie przechodzimy do wypełniania danych po prawej i pionowo w dół schodzimy po polach do przycisku „Submit”.

    Rolkę papieru wieszam od ściany gdyż łatwiej jest zerwać listki mając do dyspozycji tylko jedną wolną rękę :)

    Pozdr,
    Kamil

  • http://www.kamilos.net Kamil

    @ Aleksandra, ja jestem praworęczny i kursor myszy jest u mnie zawsze z lewej strony ekranu :)

  • http://www.facebook.com/iga.moscichowska Iga Mościchowska

    Kluczowe jest tu właśnie „moim zdaniem” :) Do zdań i przekonań każdy ma prawo, ale nie czyni ich to zasadami użyteczności ;)

  • http://www.facebook.com/iga.moscichowska Iga Mościchowska

    tak samo reagują uczestnicy szkoleń ;) wszyscy liczą na jakąś ostateczną, jedynie słuszną konkluzję, a tu taki klops :) 

  • Oskar

    „It depends” , czyli nie ma jednej odpowiedzi.
    Z każdym razem musimy zastanowić się jaka akcja jest przez nas i/lub użytkownika pożądana i tak e.g. :
    1. Komunika potwierdzający wykonanie akcji e.g. uploadu zdjęć, czy też innej „niegroźnej” akcji – anuluj dajemy w postaci linka , a „zapisz” „potwierdź” etc dajemy w postaci buttonu

    anuluj [zapisz] – user zauważy button „zapisz” i w niego kliknie, to jest akcja przez niego pożądana

    2. …ale już komunikat potwierdzający akcję „groźną” , czyli taką która wprowadza nieodwracalne zmiany, e.g. usuwanie zdjęcia powinnismy zaprojektować w taki sposób aby użytkownik nawet jeżeli przez przypadek wybierze przycisk pierwszorzędny to nie spowoduje u niego strat, czyli powinny one wyglądać tak:

    usuń [anuluj]

    Zabezpieczamy w ten sposób użytkownika przed przypadkowym zaakceptowaniem potencjalnie niebezpiecznego działania, e.g. skasowaniem zdjęcia (jak o 2 w nocy „po pijaku” będzie chciał coś zrobić). Użytkownik musi świadomie wybrać link „usuń”.

    Sama kolejność przycisków nie jest tutaj tak istotna… chociaż sam jestem zwolennikiem orientacji prawostronnej (imho. czytamy od lewej do prawej i na końcu informacji oczekujemy „akcji”)

    pzdr
    O.

    http://naodwrot.com

  • http://www.facebook.com/michal.kokocinski Michał Kokociński

    Już dawno się pogodziłem że na to odpowiedzi nie ma :) 

  • http://www.facebook.com/michal.kokocinski Michał Kokociński

    No ale przecież właśnie potwierdziłaś moją teorię. Przecież ja też wieszam od ściany i przyciski umieszczam po prawej :)

  • Kamil

    Dokładnie tak samo myślę na temat Waszego „moim zdaniem”, którego zabrakło w ostatnim akapicie artykułu :)

  • Łukasz

    Wydaje mi się, że zapomnieliście o jeszcze jednym ważnym aspekcie. Mianowicie jeśli przyzwyczailiśmy użytkownika, że „Anuluj” jest np. po prawej i zachodzi potrzeba, żeby potwierdził jakąś bardzo istotną akcję 
    (często nieodwracalną – np „sformatuj dysk C:”), to uważam, że warto nagle zmienić kolejność przycisków. Użytkownik odruchowo potwierdza wszystko, co mu wyskakuje przed nos – jeśli zamienimy mu kolejność przycisków, to w najgorszym razie (czyt: nie przeczytał co tam jest napisane) da „anuluj” i nie zrobi sobie krzywdy.

  • Jacek Grzegorczyk

    Moim zdaniem badania nie odpowiedzą jednoznacznie, co jest słuszne. Na pewno wpływ mają nasze przyzwyczajenia. Ja osobiście przez programy instalacyjne zostałem przyzwyczajony do „następnego kroku”, dlatego przycisk akcji jest dla mnie najbardziej intuicyjny z prawej strony. Pewnie można to byłoby łączyć z półkulami mózgowymi (np. za podejmowanie decyzji odpowiedzialny jest płat czołowy, który znajduje się na obydwu półkulach więc może stąd takie problemy).