Kombinasi warna untuk tiga tombol

13

Kombinasi warna apa yang paling cocok untuk ketiga tombol ini:

masukkan deskripsi gambar di sini

Haruskah mereka semua tetap memiliki warna yang sama?

Ini adalah opsi saya:

masukkan deskripsi gambar di sini

Gambar seluruh halaman

masukkan deskripsi gambar di sini

methuselah
sumber
Primer vs default dan default vs sukses tampaknya mengganggu.
Danny Varod
Melihat halaman yang lebih besar, saya akan bertanya apa yang harus dilakukan tombol 'jelas'. Apakah ini benar-benar pilihan yang diperlukan?
DA01

Jawaban:

52

The Go tombol harus lebih besar dan memiliki kontras tertinggi dari semua karena itu satu primer.

The Batal tombol apa-apa karena itu adalah tindakan sekunder dan harus netral .

Bagi saya tombol Switch memiliki terlalu banyak kehadiran baik dalam ukuran dan konstrast. Saya akan menempatkannya di antara dropdown Asal-Tujuan, di mana lebih masuk akal "dengan sendirinya".

Berikut dua solusi serupa yang bagi saya jauh lebih bersih dan menawarkan kegunaan yang lebih baik untuk tujuan khusus ini (saya pribadi akan memilih yang pertama ):

masukkan deskripsi gambar di sini

Hanya FYI: Saya menggunakan ikon Font-Awesom e, yang ada di gambar pertama adalah (tergantung pada versi Anda) pertukaran ikon / pertukaran fa dan panah yang ikon -panah-kiri / kanan dan fa-panah-kiri / Baik

EDIT - Menghapus kekacauan ( berdasarkan komentar DA01 ):

Jika tombol Hapus hanya akan menghapus dua bidang (dari / ke) itu tampaknya tidak perlu karena bagaimanapun pengguna harus mengklik pada setiap dropdown dan membuat pilihan dan ini tidak berubah jika Anda menambahkan tombol Hapus .
Jika demikian, saya akan merekomendasikan untuk menghapusnya, sehingga Anda mendapatkan antarmuka yang lebih bersih dan mencegah pengguna untuk melakukan tindakan yang tidak menambah nilai bagi mereka (dan bahkan secara tidak sengaja menghapus apa yang telah mereka pilih).

masukkan deskripsi gambar di sini

Alejandro Veltri
sumber
Panah ↔︎ adalah pikiran pertamaku juga. Lihat bagaimana translate.google.com melakukannya: tombol ↔︎ dengan tooltip.
200_sukses
Jika jelas benar-benar sekunder, saya setuju. Jika, di sisi lain, itu merusak (menghapus pekerjaan yang dimasukkan) maka saya berpendapat itu benar-benar harus ditangani secara berbeda.
DA01
@ DA01 Bisakah Anda jelaskan lebih lanjut tentang komentar terakhir Anda? Pilihan apa yang lebih baik jika itu merusak dan mengapa? Saya sangat tertarik dengan POV Anda.
Alejandro Veltri
@rewobs Saya biasanya merekomendasikan tidak memiliki opsi yang merusak sama sekali, meskipun mereka masih ada di banyak sistem. Karena merusak, seharusnya tidak terlihat seperti tombol, IMHO, karena tombol dapat menjadi biasa diklik. Orang-orang sering mengisi formulir dan kemudian menekan tombol yang paling 'jelas' di bagian bawah dengan asumsi SUBMIT. Jadi, setidaknya dalam bentuk desain, saya biasanya menyarankan bahwa satu-satunya tombol yang mengirimkan. Jika ada tugas lain, buat secara visual berbeda dan tenang dibandingkan dengan tombol utama.
DA01
1
@ DA01 Saya mengerti maksud Anda, terima kasih atas klarifikasi. Selain itu saya telah membaca komentar Anda dalam pertanyaan, menanyakan apakah tombol yang jelas benar-benar diperlukan dan saya pikir tidak, karena bagaimanapun pengguna akan mengganti nilainya dengan memilih kembali dari dropdown, jadi menambahkan tombol yang jelas akan menambah yang tidak perlu aksi "di tengah".
Alejandro Veltri
12

Salah satu solusinya adalah memisahkan tombol Anda secara visual berdasarkan prioritas.

Anda biasanya memiliki tombol utama, tombol sekunder dan kadang-kadang tombol tersier dan / atau tombol tindakan yang tidak disukai.

Untuk Primer dan Sekunder, saya biasanya menyarankan warna branding pilihan Anda (murni subjektif) dalam dua tingkat kontras. Kontras tinggi untuk primer, sedikit kontras untuk sekunder.

Tombol tersier yang biasanya saya coba hindari dan malah pergi dengan visual yang sama sekali berbeda, seperti tautan.

Jadi, berikan contoh Anda, dan menafsirkan konteksnya sebisa mungkin, saya akan menyarankan sesuatu seperti ini:

masukkan deskripsi gambar di sini

Itu hanya contoh yang sangat cepat dan Anda harus mengonfirmasi kontrasnya memenuhi pedoman aksesibilitas dan tidak terlihat dinonaktifkan (yang menurut saya memang demikian, sehingga perlu diubah), tetapi mudah-mudahan ini bisa menjelaskan.

UPDATE: Saya baru tahu ketika saya memposting ini bahwa ini adalah pola yang digunakan StackExchange ketika membuat posting baru. Tombol SAVE adalah yang utama, BATAL adalah tersier dan ditampilkan sebagai tautan daripada tombol.

DA01
sumber
1

Warna kontras tinggi (misalnya hitam-putih) selalu yang terbaik, jenis yang menghilangkan opsi oranye. Dan kemudian, menambahkan sedikit pemasaran ke dalam campuran, apa skema warna yang digunakan untuk sisa halaman Anda dalam hal tombol, aplikasi? Tetapi jika saya harus memilih: Go: green; Beralih ...: biru laut; Jelas: hitam-putih. Warna yang diingat juga terkait dengan preferensi.

(Di luar topik: Anda bisa menghilangkan label panjang untuk beralih dengan tombol berlabel ikon di antara kedua bidang)


sumber
1
Selamat datang di UX.stackexchange. Bukti apa yang Anda miliki bahwa kontras tinggi selalu yang terbaik?
Mayo
1
Yah, itu mungkin bukan solusi terbaik untuk konteks apa pun, tetapi kontras tinggi meningkatkan keterbacaan karena membedakan teks dari latar belakang. Kalau tidak, itu menjadi kabur. Pertimbangkan kebutaan warna (paling umum: hijau-merah): teks merah pada latar belakang hijau atau sebaliknya adalah bagaimana Anda mendeteksi bentuk kebutaan warna ini.
1
Berikut ini adalah artikel yang mencantumkan argumen berbeda untuk warna: usertesting.com/blog/2014/12/02/color-ux-conversion-rates
Ada titik di mana kontrasnya tidak cukup besar dan keterbacaan menurun. Saya kira saya terlalu fokus pada contoh hitam dan putih dalam kalimat pertama. Ada titik di mana keterbacaan "tercapai" dan kemudian "lebih" tidak meningkatkan kinerja pengguna. Lagi. Selamat datang di UX
Mayo
1

Saya akan mengatakan mengubah kontras warna yang sama untuk menunjukkan penekanan . Mengapa? ( 1 dari 12 pria buta warna dan 1 dari 200 wanita juga buta warna

Anda juga ingin memandu pengguna menuju jalur yang dimaksud melalui sistem sehingga saya akan membuat tombol Go lebih gelap. Mereka dapat memindai semua tombol dan memprosesnya atau mereka dapat memiliki sesuatu seperti warna yang lebih gelap atau ukuran yang lebih besar menarik mereka ke pilihan yang dimaksud atau 80% paling umum dengan cara yang mereka lihat di sana terlebih dahulu dan mengatakan ya itu menghemat waktu mereka.

Artikel ini mengatakan orang harus membuat tombol yang paling penting terlihat seperti itu

Lihat contoh mereka di bawah ini

masukkan deskripsi gambar di sini

Tidak terlihat sebagus gambar di bawah ini (Menurut saya)

masukkan deskripsi gambar di sini

Artikel itu juga menyebutkan untuk meletakkan tombol dalam urutan yang masuk akal . Jadi menurut pendapat saya, saya akan meletakkan tombol go di sebelah kanan karena pengguna berbahasa Inggris dari kiri ke kanan (jadi mereka secara alami melihat ke kanan untuk mengakhiri tanda-tanda). Saya akan meletakkannya di sebelah kiri untuk pengguna arab. Itulah cara saya mengaturnya untuk pasar Inggris.

masukkan deskripsi gambar di sini

Topik terakhir dalam artikel itu adalah Mempersulit untuk menemukan tombol yang merusak Dalam skenario Anda, saya akan mengubah pesanan Anda seperti itu jika mengklik saat bepergian dan Anda tidak sengaja ketinggalan di sebelah kiri Anda mungkin akan mengubah lokasi pengiriman daripada menghancurkan tindakan. Anda juga dapat mengkonfirmasi tugas yang merusak jika Anda merasa perlu (yaitu, apakah Anda yakin?).

Frank Visaggio
sumber
"karena pengguna berbahasa Inggris membaca dari kanan ke kiri" - ya? Apakah kita berbicara tentang bahasa Inggris yang sama?
BlueRaja - Danny Pflughoeft
diedit ... whoops