Kombinacja kolorów dla trzech przycisków

13

Jaka kombinacja kolorów najlepiej pasowałaby do tych trzech przycisków:

wprowadź opis zdjęcia tutaj

Czy wszystkie powinny pozostać tego samego koloru?

Oto moje opcje:

wprowadź opis zdjęcia tutaj

Obraz całej strony

wprowadź opis zdjęcia tutaj

Metuselah
źródło
Podstawowy kontra domyślny i domyślny kontra sukces wydaje się rozpraszający.
Danny Varod
Patrząc na większą stronę, zapytałbym, co powinien zrobić przycisk „wyczyść”. Czy to naprawdę konieczna opcja?
DA01

Odpowiedzi:

52

Przycisk Go powinien być większy i mieć najwyższy kontrast ze wszystkich, ponieważ jest to podstawowy.

Przycisk Wyczyść jest w porządku, ponieważ jest to działanie wtórne i powinien być neutralny .

Dla mnie przycisk Switch ma zbyt dużą obecność zarówno pod względem wielkości, jak i kontrastu. Umieściłbym go między listami początkowymi i docelowymi, gdzie ma to większy sens „sam w sobie”.

Oto dwa podobne rozwiązania, które są dla mnie znacznie czystsze i oferują lepszą użyteczność do tego konkretnego celu (osobiście wybrałbym pierwszy ):

wprowadź opis zdjęcia tutaj

Po prostu FYI: Użyłem ikon Font-Awesom e, jedna na pierwszym obrazku to (w zależności od wersji) wymiana ikon / fa-wymiana, a strzałki to ikona- strzałka-lewo / prawo i fa-strzałka-lewo / dobrze

EDYCJA - Usuwanie bałaganu ( na podstawie komentarza DA01 ):

Jeśli przycisk Wyczyść wyczyści tylko te dwa pola (od / do), nie wydaje się to konieczne, ponieważ w każdym razie użytkownicy będą musieli kliknąć każdą listę rozwijaną i dokonać wyboru, a to się nie zmieni, jeśli dodasz przycisk Wyczyść .
W takim przypadku zalecam jego usunięcie, aby uzyskać czystszy interfejs i uniemożliwić użytkownikom wykonanie akcji, która nie doda im żadnej wartości (a ponadto niechcący usunie to, co wybrali).

wprowadź opis zdjęcia tutaj

Alejandro Veltri
źródło
Strzały ↔︎ były również moją pierwszą myślą. Zobacz, jak to robi translate.google.com : przycisk ↔︎ z etykietką.
200_sukces
Jeśli jasne jest naprawdę drugorzędne, zgadzam się. Jeśli, z drugiej strony, jest to destrukcyjne (wprowadzono usunięcie pracy), to twierdzę, że naprawdę powinno być traktowane inaczej.
DA01,
@ DA01 Czy mógłbyś bardziej szczegółowo wyjaśnić swój ostatni komentarz? Która opcja byłaby lepsza, gdyby była niszcząca i dlaczego? Naprawdę jestem zainteresowany twoim POV.
Alejandro Veltri
@rewobs Zwykle nie polecam wcale destrukcyjnych opcji, choć nadal istnieją one w wielu systemach. Ponieważ jest destrukcyjny, nie powinien wyglądać jak przycisk, IMHO, ponieważ przyciski mogą być zwykle klikane. Ludzie często wypełniają formularz, a następnie wciskają najbardziej „oczywisty” przycisk na dole, zakładając, że jest to WYŚLIJ. Tak więc, przynajmniej w formie projektu, zwykle zalecane, że tylko przycisk jest złożyć. Jeśli są inne zadania, spraw, by były wizualnie różne i stonowane w porównaniu do głównego przycisku.
DA01
1
@ DA01 Mam rację, dziękuję za wyjaśnienie. Dodatkowo przeczytałem twój komentarz w pytaniu, pytając, czy przycisk Wyczyść jest naprawdę konieczny i myślę, że nie jest, ponieważ w każdym razie użytkownik zastąpi wartość, wybierając ponownie z menu rozwijanych, więc dodanie przycisku Wyczyść doda niepotrzebne akcja „w środku”.
Alejandro Veltri
12

Jednym z rozwiązań jest wizualne oddzielenie przycisku według priorytetu.

Zazwyczaj masz przyciski główne, przyciski dodatkowe, a czasem przyciski trzeciorzędne i / lub przyciski akcji, które nie są preferowane.

W przypadku Primary i Secondary zwykle sugeruję preferowany kolor brandingu (czysto subiektywny) na dwóch poziomach kontrastu. Wysoki kontrast dla pierwotnego, nieco mniejszy dla wtórnego.

Przyciski trzeciorzędne zwykle staram się unikać, a zamiast tego używam zupełnie innej grafiki, na przykład linku.

Biorąc pod uwagę twój przykład i interpretując kontekst, jak mogę, proponuję coś takiego:

wprowadź opis zdjęcia tutaj

To tylko bardzo szybki przykład i trzeba by potwierdzić, że kontrast spełnia wytyczne dotyczące dostępności i nie wygląda na wyłączony (co jest moje, więc trzeba go ulepszyć), ale mam nadzieję, że osiągnie cel.

AKTUALIZACJA: Właśnie zauważyłem, kiedy to publikowałem, że jest to wzorzec stosowany przez StackExchange podczas tworzenia nowego postu. Przycisk ZAPISZ jest główny, ANULUJ jest trzeciorzędny i wyświetlany jako łącze, a nie przycisk.

DA01
źródło
1

Kontrastujące (np. Czarno-białe) kolory są zawsze najlepsze, co eliminuje opcję pomarańczową. A następnie, dodając odrobinę marketingu do miksu, jaki jest schemat kolorów używany na pozostałej stronie pod względem przycisków, aplikacji? Ale gdybym musiał wybrać: Idź: zielony; Switch ...: morski niebieski; Przezroczysty: czarno-biały. Pamiętaj, że kolor jest również związany z preferencjami.

(Poza tematem: można wyeliminować długą etykietę przełączania za pomocą przycisku oznaczonego ikoną między dwoma polami)


źródło
1
Witamy w UX.stackexchange. Jakie masz dowody, że wysoki kontrast jest zawsze najlepszy?
Mayo
1
Cóż, może nie być najlepszym rozwiązaniem dla dowolnego kontekstu, ale wysoki kontrast poprawia czytelność, ponieważ odróżnia tekst od tła. W przeciwnym razie staje się rozmycie. Rozważ ślepotę kolorów (najczęściej: zielono-czerwony): czerwony tekst na zielonym tle lub odwrotnie to sposób wykrycia tej formy ślepoty barw.
1
Oto artykuł, który wymienia różne argumenty za kolorami: usertesting.com/blog/2014/12/02/color-ux-conversion-rates
Jest punkt, w którym kontrast nie jest wystarczająco duży, a czytelność maleje. Podejrzewam, że nadmiernie skupiałem się na czarno-białym przykładzie z pierwszego zdania. Przychodzi moment, w którym „osiąga się czytelność”, a następnie „więcej” nie zwiększa wydajności użytkownika. Jeszcze raz. Witamy w UX
Mayo
1

Powiedziałbym, że należy zmienić kontrast podobnego odcienia koloru, aby podkreślić . Dlaczego? ( 1 na 12 mężczyzn jest daltonistą, a 1 na 200 kobiet jest daltonistą)

Chcesz również poprowadzić użytkowników w kierunku zamierzonej ścieżki przez system, aby przyciemnić przycisk Go. Mogliby zeskanować wszystkie przyciski i przetworzyć je lub mogliby mieć coś w rodzaju ciemniejszego koloru lub większego rozmiaru, aby przyciągnąć ich do zamierzonego lub 80% najczęstszego wyboru w taki sposób, aby najpierw tam spojrzeć i powiedzieć tak, to oszczędza im czas.

W tym artykule jest napisane, że najważniejszy przycisk powinien wyglądać tak

Zobacz ich przykład poniżej

wprowadź opis zdjęcia tutaj

Nie wygląda tak dobrze, jak obraz poniżej (Moim zdaniem)

wprowadź opis zdjęcia tutaj

W tym artykule wspomniano również o umieszczeniu przycisków w rozsądnej kolejności . Tak więc, moim zdaniem, umieściłbym przycisk Go po prawej stronie, ponieważ anglojęzyczni użytkownicy od lewej do prawej (więc naturalnie patrzą w prawo po znaki kończące). Chciałbym umieścić go po lewej stronie dla użytkowników arabskich. Tak zorganizowałbym to na rynek angielski.

wprowadź opis zdjęcia tutaj

Ostatnim tematem w tym artykule jest utrudnienie znalezienia destrukcyjnych przycisków. W twoim scenariuszu zmieniłbym twoje zamówienie w ten sposób, gdybyś kliknął „go” i przypadkowo spudłował w lewo, prawdopodobnie zmieniłbyś lokalizację wysyłki, zamiast zniszczyć akcję. Możesz także potwierdzić destrukcyjne zadanie, jeśli uważasz, że jest ono konieczne (tzn. Czy jesteś pewien?).

Frank Visaggio
źródło
„ponieważ użytkownicy anglojęzyczni czytają od prawej do lewej” - co? Czy mówimy o tym samym angielskim?
BlueRaja - Danny Pflughoeft
edytowane ... ups