it-swarm.asia

Mengapa desain ini dianggap berantakan atau luar biasa?

Saya sedang mengembangkan aplikasi web untuk browser Desktop dan Tablet. Semua pengetahuan UX saya berasal dari pengalaman pribadi dan iterasi - saya belum pernah dilatih secara formal. Saya sangat berhati-hati dalam menyajikan informasi di situs web ini agar tetap teratur, tetapi banyak orang yang telah memberi saya umpan balik menggambarkannya sebagai "berantakan" dan "luar biasa". Saya berjuang untuk menemukan bagaimana saya bisa menyajikan informasi yang sama sambil memperbaikinya.

my website

Elemen apa dari desain sisi-bar, menu ganda, dan bilah samping yang memicu respons ini?

167
Jack Guy

Di sinilah UX menjadi sulit

Tidak ada yang salah dengan antarmuka Anda. Tampaknya menangani sejumlah besar informasi dengan cara yang cukup jelas dan standar.
Tetapi ada sesuatu yang salah dengan antarmuka Anda: Pengguna tidak merasa nyaman di dalamnya.

Itu masalah yang rumit untuk dipecahkan, tetapi itu adalah jantung dari setiap proyek desain UX. Ini sepenuhnya tergantung pada audiens yang Anda layani dan konteks mereka akan menggunakan aplikasi Anda.

Mulai dari mana

  1. Pastikan Anda tidak menilai terlalu tinggi opini sekelompok kecil pengguna. Itulah masalah seluruh "roda melengking". Mereka mungkin memiliki beberapa kekhawatiran yang valid, tetapi Anda harus yakin mereka mewakili populasi pengguna yang lebih besar.
  2. Duduklah dengan pengguna sungguhan yang melakukan hal-hal nyata dengan aplikasi Anda. Lihat apa yang terjadi, tugas apa yang mereka coba selesaikan, di mana mereka mandek atau bingung atau frustrasi.
  3. Uji satu solusi setiap kali. Semakin atomik perubahan yang Anda lakukan, semakin Anda dapat mengambil ujian secara akurat.
  4. Lingkari kembali dengan pengguna Anda ketika Anda merasa telah memperbaiki sesuatu. Kumpulkan banyak umpan balik dan pastikan Anda menyelesaikan apa yang Anda pikir telah Anda selesaikan.

tl; dr

  1. Pahami persis apa yang ingin dicapai pengguna Anda.
  2. Hilangkan setiap
    [aksi, Word, gambar, ikon, warna, bentuk, piksel]
    bahwa itu tidak membuat mereka lebih baik di # 1.

Pengamatan umum

Penafian: Saya bukan pengguna Anda dan saya mungkin tidak akan pernah. Ambil pengamatan saya untuk dugaan wajar tanpa pengecualian.

Hirarki

Judul-judul kartu pasti menarik perhatian saya terlebih dahulu, berkat segitiga sudut kecil. Itu sepertinya elemen penting. Jadi ke mana saya pergi selanjutnya?

Create Game Tombol terdengar penting setelah saya menemukannya. Mencari sepertinya terlalu banyak pekerjaan karena bersembunyi di Tepi layar dan menggunakan satu-satunya warna highlight yang Anda miliki, yang sudah digunakan di tempat lain.

Bagaimana dengan hal-hal Games dan Users ke arah atas yang terlihat seperti nav? Saat ini, saya tidak yakin yang mana yang aktif atau apa yang akan mereka lakukan.

Secara umum, ada banyak yang meminta perhatian saya. Itu membuat saya ...

Kebisingan visual

Cobalah mengurangi jumlah hal-hal yang terpisah dengan memperbaiki hal-hal yang ada di sana. Misalnya, bisakah indikator Online Anda kehilangan lingkaran dan disederhanakan seperti:
Online indicator in text only.

Peluang lain adalah dalam detail kartu. Seberapa banyak dari informasi ini diperlukan di tingkat tinjauan? Bisakah Anda mengembangkannya di hover/tap? Dan ikon detail tidak menambahkan informasi yang berguna, tetapi menambahkan banyak kebisingan visual ke halaman karena frekuensinya. Mengapa tidak hanya label teks:
Details table without icons.

Juga di kartu permainan, saya tidak memiliki konteks untuk garis kuning-oranye. Sekilas, sepertinya indikator tab di bawah ikon orang dan mungkin ada tab lain untuk Private. Segera setelah saya memikirkan itu, saya menyadari itu tidak masuk akal. Perhatian lebih terbuang.

Kesamaan

Terlepas dari masalah kompleksitas, mungkin ada ruang untuk menambahkan sesuatu untuk memecah kebodohan. Apakah ada makna untuk mengizinkan gambar sampul untuk game? Atau mungkin menggunakan sudut _ L biru itu sebagai warna tajuk penuh (dengan asumsi mereka tidak akan semuanya sama)?

165
plainclothes

Mengulang label baris tabel untuk setiap kotak game berkontribusi banyak pada IMO kekacauan yang dirasakan. Apakah semua informasi itu diperlukan? Anda mungkin dapat mencoba menyederhanakan, tetapi menambahkan kemampuan untuk memperluas jika perlu.

enter image description here

72
Paul LeBeau

Anda memiliki UI yang bagus tetapi beberapa hal mengejutkan saya yang mungkin dapat ditingkatkan:

  • Terlalu banyak baris (Anda dapat menghapus sebagian besar dari mereka saya percaya)
  • Terlalu sedikit kontras antara bagian-bagian berbeda dari desain Anda (coba buramkan mata Anda dan lihat apakah Anda masih bisa membedakan bagian-bagian berbeda dari desain Anda). Kartu-kartunya sangat bermasalah. Buat mereka pop.

Saya menghapus beberapa garis dan membuat kartu lebih menonjol dan saya pikir ini membuat desain Anda sedikit berantakan. Nilailah diri Anda sendiri.

enter image description here

33
filip

Data yang ditampilkan oleh kartu akan jauh lebih masuk akal dalam daftar atau tabel. Setiap kartu memiliki bidang yang sama persis dengan nilai yang berbeda, dan Anda setiap saat menampilkan label untuk bidang tersebut. Tabel dengan tajuk hanya akan menampilkan label "Waktu", "Bahasa", dll.

Sebagai catatan pada kartu, mereka tampaknya lebih cocok untuk konten campuran atau bentuk bebas, di mana setiap kartu menyajikan UI unik yang dirancang untuk konten uniknya. Konten Anda adalah daftar permainan yang tersedia, sehingga menyatakan bahwa di UI dengan daftar masuk akal.

17
Harrison Paine

secara pribadi, saya tidak berpikir itu berantakan, tapi ya, itu agak berlebihan.

Pada dasarnya, saya melihat layar Anda dan tidak tahu ke mana harus mencari dan apa yang harus dilakukan. Aspek yang paling penting tampaknya menjadi L di sudut dan fakta bahwa seseorang sedang online (ini karena Anda menggunakan warna), maka Anda mencampur informasi yang memberikan semuanya tingkat hierarki yang sama. CTA s berwarna abu-abu (!!!!), remah roti Anda aneh berdasarkan layar yang diberikan (Anda menampilkan game namun tampilan remah roti Anda Pengguna dan ini adalah level di bawah Game , yang aneh juga, kecuali maksud Anda Pemain ), Anda memiliki sidebar pesan/obrolan yang tampaknya terkait dengan konten utama, namun sangat sulit untuk menemukan koneksi ... yah, ini agak membingungkan. Berita baiknya adalah bahwa semua aspek ini dapat dengan mudah diubah, masalah utama Anda tampaknya adalah fokus pada hierarki, apa yang penting dan apa yang tidak. Ubah saja beberapa warna (terutama CTA) dan uji. Saya yakin Anda akan segera melihat hasilnya

Ngomong-ngomong, saya pikir Anda harus melakukan beberapa pengujian MAHAL, mempelajari perilaku dan interaksi dan mengajukan pertanyaan kepada pengguna nyata, bukan teman, bukan kolega

11
Devin

Jawaban yang diberikan di sini luar biasa, tetapi beberapa pengamatan:

  1. Letakkan avatar pengguna dalam lingkaran abu-abu (beberapa lingkaran abu-abu terlihat berantakan), dengan cara yang sama letakkan informasi yang berarti di semua kartu permainan.

  2. Simpan saja lingkaran hijau sebagai gagasan untuk pengguna online, hapus teks yaitu 'Online' dari daftar teman, tetapi simpan teks dalam status pengguna yang masuk karena akan membantu mereka memahami arti dari berbagai lingkaran berwarna seperti hijau = online , red = offline, orange = idle dll.

  3. Hapus ikon surat dari 'Teman | Header semua 'karena sudah ditempatkan di header aplikasi Anda. Lihat gambar berikut untuk 3 poin ini.

  4. Letakkan menu Game and Users di tab navigasi seperti ini.

  5. Naikkan ukuran sudut kanan atas dan huruf seperti ini.

8
IT ppl

Saya memiliki beberapa panduan mendasar untuk ditawarkan, yang harus berlaku untuk semua UX, dan sangat penting di sini:

Kenyamanan tidak harus bersaing dengan kejelasan.

Seorang desainer seharusnya memanfaatkan ruang layar secara maksimal sembari menyajikan informasi yang tidak membingungkan atau membuat pengguna kewalahan. Tapi ini tidak berarti bahwa kita desainer perlu memperdagangkan jumlah informasi yang tersedia untuk kejelasan yang disajikan. Manfaatkan desain dinamis, dengan interaksi pengguna.

Dengan menjadi nyaman dengan media desain cairan ...

Kami desainer biasanya merasa alami untuk merancang antarmuka dalam editor tata letak vektor, di mana kami tidak memasang banyak animasi, transisi, dan transformasi. Inilah yang membatasi banyak dari kita dalam kemampuan kita untuk merancang tata letak inovatif yang mengekspos (dan menyembunyikan) informasi melalui interaksi pengguna. Jadi, pertama-tama belajarlah mendesain di lingkungan di mana Anda dapat membangun antarmuka yang bergerak, beranimasi, dan mengubah. Saya pribadi hanya mendesain antarmuka saya dengan HTML, JS, dan CSS - setelah beberapa saat, itu menjadi media desain alami.

... kita dapat membuat lingkungan yang mengekspos dan menyembunyikan informasi, sambil menarik perhatian pengguna.

Kemudian, manfaatkan kebebasan mengalir yang Anda miliki dalam mendesain antarmuka Anda untuk menampilkan petunjuk informasi yang "menarik" fokus pengguna dari elemen ke elemen dalam urutan yang Anda inginkan, atau urutan yang mereka butuhkan, dan berinteraksi dengan antarmuka. untuk mengakses grup informasi yang berbeda.

Dengan berfokus pada interaksi pengguna yang dinamis, kita dapat menggunakan hierarki antarmuka sederhana untuk memandu pengguna ke informasi yang mereka butuhkan, ketika mereka menginginkannya.

Anda ingin memaparkan banyak info kepada pengguna, tetapi ada batasan jumlah orang yang merasa nyaman sekaligus. Batasi jumlah detail yang diekspos dengan mengandalkan interaksi pengguna yang ditautkan ke animasi yang halus dan sederhana, terutama ketika berhadapan dengan tabel informasi duplikat seperti kasus ini.

Misalnya, dalam kasus Anda, alih-alih menunjukkan semua blok game itu dengan informasi duplikat, coba tunjukkan blok hanya dengan label yang mengidentifikasi game, dan kemudian ketika pengguna berinteraksi dengannya (dengan mengetuk atau mengarahkan mouse misalnya), perlihatkan detailnya. dari game. Perubahan itu sendiri akan menyederhanakan antarmuka Anda secara drastis dan membuat pengguna merasa kurang tertekan untuk menyerap begitu banyak informasi yang terbuka sekaligus.

7
Viziionary

Yah, jawaban yang bagus tetapi tidak membantu Anda dengan alasan selain "Monoton" - yang bukan istilah yang bagus, tapi tutup.

Desain hebat di Majalah, Poster, dan Antarmuka Pengguna adalah produk dari font , ukuran font dan spasi putih , lebih ditingkatkan dengan warna , dan tidak dirugikan dengan baris .

Properti ini: Font, Ukuran Font, Spasi dan Warna melatih pengguna untuk memahami (a) apa yang penting, (b) cara memindai informasi, dan (c) cara melihat pola dalam data sekilas daripada memikirkannya secara langsung.

Membaca adalah upaya yang sangat mahal bagi orang-orang, jadi memindai untuk mengidentifikasi "mana dari hal-hal ini yang tidak terlihat seperti yang lain" atau varian prinsip apa yang ingin Anda temukan.

Lokasi spasial berkembang seiring waktu dengan keahlian, begitu pengguna secara tidak sadar menghafal antarmuka pengguna. (Pengguna berpengalaman seperti antarmuka gaya Excel dan pengguna baru tidak.)

Dengan kata lain Anda tidak dapat mengandalkan introspeksi ketika mendesain antarmuka kecuali Anda tahu apakah Anda 'menguji' desain untuk level pemula atau pengguna berpengalaman.

Anda 'melatih' pengguna cara melihat informasi dengan menggunakan ukuran font (prioritas), gaya font (font menyampaikan makna relatif). Setelah font gunakan bentuk (seperti tab sudut yang disarankan orang lain). Setelah bentuk, gunakan warna . Warna harus menjadi yang terakhir.

Warna harus mengindikasikan jenis , atau harus menunjukkan 'benda ini seperti yang lain'. Jika Anda harus 'menghias' dengan warna, (bilah atau latar belakang berwarna) ini biasanya menunjukkan kegagalan, karena tidak memiliki 'makna'.

Uji desain Anda dengan melakukan elemen terpisah di 'lapisan' dan kemudian nyalakan dan matikan layer. Mata Anda harus memberi tahu Anda.

Antarmuka kart

Sekarang, Anda telah menggabungkan 'kartu' (tata ruang), tetapi gunakan font dan warna 'tabel'.

Jelas tidak terlihat bahwa kartu adalah model UI yang baik untuk solusi Anda, jadi pertama-tama pastikan Anda membantu pengguna. Kartu berfungsi terutama jika mereka memegang gambar, dan harus terus disusun ulang. Kalau tidak, tabel biasanya lebih baik, karena lebih mudah dipindai.

Misalnya jika Anda mengambil satu pak kartu remi dan melemparkannya ke lantai, Anda masih dapat membedakannya terlepas dari arahnya. Jika Anda melempar 'kartu' Anda ke lantai, maka semuanya akan terlihat sama.

Jadi Anda mengandalkan pengindeksan posisi oleh pengguna Anda, maka Anda menggunakan model yang salah, atau harus menyelesaikan metafora bermain kartu.

Petunjuk bermanfaat

Saya mencoba menyarankan orang untuk mencari tata letak halaman majalah. Tentu saja, standar emas adalah situs web dan kertas NYT. Semua tipe dan spasi putih.

Tetapi mulai dengan model visual (permainan papan monopoli misalnya) biasanya akan membantu desainer menghindari 'masalah kotak' yang mengganggu para amatir.

6
Curt Doolittle

Ketika kita manusia melihat sesuatu yang agak terstruktur, seperti UI, kita cenderung membangun model mental.
Untuk mencapai tujuan itu, kami memindai UI secara instan, tidak sadar, dan mencatat setiap item di UI tersebut.
Dalam proses ini kami mengonsumsi "kekuatan mental", jumlah yang tergantung pada jumlah elemen di UI. Ini terkait dengan muatan kognitif.
Setelah melakukan itu beberapa kali kita menjadi "lelah", tergantung pada beban kognitif yang dikonsumsi.

Ya, UI Anda memiliki cukup banyak item, dan yang dikeluhkan oleh pengguna adalah jumlah beban kognitif yang diperlukan untuk setiap pemindaian.
Jumlah elemen bukan panel "Hey guys", tetapi jumlah ikon, potongan teks, garis, semuanya!
Ini adalah kabar baik karena ada banyak ruang kepala untuk ditingkatkan.

Saya akan menyebutkan beberapa contoh agar Anda memahami saran saya:

  • setiap "Hai teman-teman ..." memiliki sejumlah garis internal yang, jika dihapus, akan meringankan beban kognitif tanpa menghalangi pemahaman pengguna
  • baris di bawah "Created by Jack"
  • batas sel tabel di bawah "RINCIAN"
  • kata "DETAILS" sendiri
  • garis artefak "Teman | Semua | ✉5" (tampilkan seperti tombol di kursor)
  • zebra-stripes di bawah Friends | All artefact
  • "Online ●" mungkin hanya bagian warna tetapi dengan ✓ hijau sebagai gantinya dan palang merah lainnya
  • di Sort/Filter/Semua gim mencoba mengatur panah dropdown lebih dekat ke teks sehingga menjadi satu hal
  • alih-alih gambar bulat gunakan gambar persegi yang menjangkau ketiga batas
  • dll ...

Sebagai tes pertama, coba rentangkan tabel "DETAILS" sehingga menyentuh keempat batasnya (kehilangan sudut bundar Nice dan heading "DETAILS") dan Anda akan melihat.
Ini akan menjadi lebih sederhana dan karenanya lebih mudah untuk grok.
Maka Anda mungkin percaya dan memulai kegilaan penghapusan elemen visual.

5
Juan Lanus

Ide ide:

Buat Game

Mungkin kartu pertama bisa menjadi tombol buat gim besar Anda! Saya benar-benar ingin memiliki jenis input di mana Anda bisa mengklik teks yang ingin Anda edit dan mengisinya di sana. Saya akan berpikir untuk membuatnya responsif juga, jadi mungkin ketika Anda melihatnya, itu sangat sederhana, hanya memiliki "+" dan "Buat Game" dan kemudian klik itu dengan lancar menjiwai dalam bidang input otomatis tersebut. (Katakan kartu melakukan flip dalam 3d. Ada pilihan yang tak ada habisnya untuk kreativitas di sini!)

Kartu Game

Gagasan serupa untuk responsif: lepaskan tombol gim dan tampilkan di hover sebagai salah satu efek overlay semi-transparan. Saya suka ide screenshot/game-art sebagai wallpaper.

Inilah yang baru saya sadari tentang kartu-kartu ini: Ini sebenarnya bukan pendekatan yang terbaik untuk data seperti ini. Setiap kartu memiliki rincian dan informasi yang sama yang disajikan. Mengapa tidak sekadar meja? Kemudian pemain bisa mengurutkannya berdasarkan bidang.

Anda bisa menjadi kreatif dan memiliki label bidang di sebelah kiri atau kanan, dan kemudian masih memiliki orientasi seperti kartu dengan wallpaper. Gagasan tanpa akhir di sini juga! Mungkin kemudian mereka dapat menggulir dari kiri ke kanan, DAN menggulir ke atas dan ke bawah dapat menggeser kelompok kartu dengan klasifikasi, mungkin tipe permainan. (Tombol panah sekarang bisa terlibat!)

Daftar Pemain

Ini (dan mungkin header) adalah bagian yang tampaknya sedikit berantakan. Saya pikir apa itu hanya banyak informasi visual di perangkat. Jadi bagaimana kita memperbaikinya? Sekali lagi, ada banyak pilihan, kita hanya harus kreatif! Sekali lagi, mari kita mulai dengan menggunakan wallpaper. Dan kemudian mungkin sebuah antarmuka akordian? Mungkin alih-alih "online o" Anda bisa memiliki lingkaran yang diisi vs lingkaran yang setengah penuh atau kosong. Atau indikator tematik lainnya, seperti pita! (atau gunakan gradien semi-transparan dengan ikon berlubang.)

Satu ide adalah mungkin bahkan hanya menyertakan orang daring di dalamnya, sementara luring hanya tercantum di bawah ini sebagai tautan yang dipisahkan koma, seperti yang Anda lihat di forum:

Qwerty Uiop , Plok Min Juhby , Wes X Qwaz , Kip HG Jolumny , Ferd 3rd , Chasbyn Q Jon Klimp-Werdguft ZCXV , Guy T. Fred , Ty Hug

(BTW, ibuku dan aku datang dengan nama-nama ini ketika bermain game untuk melihat apa yang bisa kita buat dengan bagian-bagian keyboard.)


Saran itu hanya untuk memulainya. Semoga ini bisa membantu!

4
HTDE
  • Tambahkan lebih kontras untuk membuat konten penting lebih menonjol (permainan kartu), dengan menambahkan warna latar yang lebih gelap misalnya.

  • Buat stroke kuning lebih bermakna dengan meningkatkan ukuran dengan persentase pemain yang saat ini ada di ruangan. Kamar yang penuh akan mendapat stroke merah misalnya.

  • Font biru "L" sepertinya itu font lain, yang membuatnya sangat aneh.

  • Dapat diperdebatkan: Hapus ikon sebelum "Putaran", "Waktu", "Bahasa" dan "Kata-kata". Mereka menyenangkan tetapi juga mengganggu dan sepertinya tidak menambahkan logika karena teks itu sendiri sudah cukup.


Perhatikan bahwa saya hanya mengubah 2 kotak pertama 100% (kotak 2 masih memiliki L lama, itu hanya untuk menunjukkan sebagai indikasi).

New design

3
Daan

Menurut Jonathan Ive dari Apple, antarmuka yang baik hanya menyajikan informasi yang SEGERA relevan bagi pengguna . Lihat https://www.youtube.com/watch?v=3q6ULOT9Q4M

Ini mungkin sedikit poin kecil, saya punya masalah yang sama. Dengan klien saya masalahnya adalah terlalu banyak spasi putih di antarmuka. Untuk tata letak berbasis KARTU seperti milik Anda, coba:

  1. Menambahkan warna latar seperti #EEE ke bagian konten utama

  2. Untuk obrolan sidebar, hapus baris ekstra berwarna abu-abu

  3. Miliki opsi untuk membuat kartu dapat dilipat, jika Anda harus menyajikan data numerik sebagai perbandingan, coba bagan/grafik

2
William

Kurangnya hierarki dan definisi elemen pada halaman adalah masalah utama. Menggunakan warna highlight, skala dan pemahaman tentang bagaimana Anda ingin pengguna menginterpretasikan dan mencerna informasi yang Anda berikan kepada mereka akan membantunya

2
David Sheridan