7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Designing

Desain UI untuk Pengembang: Pendahuluan

Read Time: 11 mins

Indonesian (Bahasa Indonesia) translation by Dwi Bagus Nurrohman (you can also view the original English article)

Desainer vs pengembang - itu adalah argumen setua komputer. Sebenarnya, tidak ada yang bisa hidup tanpa yang lain. Desain UI yang brilian tidak berguna tanpa fungsionalitas seperti bagian kode terbaik dengan tampilan depan yang jelek dan tidak dapat digunakan. Dalam postingan pertama ini pada Dasar-Dasar UI untuk pengembang, saya akan mencoba dan memberikan beberapa aturan dasar sederhana yang dapat diikuti pengembang untuk memastikan bahwa aplikasi, templat dan prototipenya secantik kode itu sendiri - dan dapat digunakan untuk boot.

Pikirkan: kesan pertama adalah kesan terakhir.


Alignment (Deretan)

Alignment mengacu pada posisi atau orientasi elemen dalam kaitannya dengan elemen lain atau dengan dirinya sendiri. Ketika kita mengacu pada dua elemen yang disejajarkan satu sama lain, penjajaran biasanya mengacu pada sisi mana dari kedua elemen tersebut sejalan. Dalam konteks teks, penjajaran mengacu pada sisi yang teksnya dilekatkan dalam garis lurus.

Formulir Desain

Alignment of form fieldsAlignment of form fieldsAlignment of form fields

Pada gambar di atas, contoh kedua dari desain bentuk sederhana menunjukkan label yang rata-rata satu sama lain dengan bidang input yang rata kiri. Ini memastikan bahwa hubungan antara setiap label dan bidang inputnya jelas dan pengguna tidak bingung jika beberapa label terlalu kecil sementara yang lain panjang.

Pikirkan: Pastikan bidang masukan tidak terlalu jauh dari label terpanjang. Jika variasi lebarnya kecil, coba luruskan label kanan dan bidang masukan kiri-menyelaraskan.

Teks

Text alignmentText alignmentText alignment

Untuk teks, sangat ideal untuk menggunakan perataan kiri ketika mendesain layar. Karena kebanyakan metode render tipe layar tidak mampu mendistribusikan ruang secara tepat ketika membenarkan teks untuk kedua sisi, perataan kiri membuat teks dapat dibaca dan diatur dengan baik. Anda dapat, tentu saja, menggunakan pusat dan perataan kanan di mana desain menuntutnya, tetapi mereka biasanya disediakan untuk kasus-kasus khusus dan potongan teks yang lebih kecil.


Alur

Tujuan utama dari setiap antarmuka pengguna adalah membiarkan antarmuka pengguna dengan aplikasi tersebut. Ini, percaya atau tidak, tidak akan mungkin kecuali Anda memberi tahu pengguna apa yang perlu dia lakukan dan dalam urutan apa. Karena Anda tidak akan ada di belakang setiap pengguna untuk membantu mereka dengan ini, antarmuka harus menyediakan semua petunjuk. Berikut adalah beberapa pertanyaan untuk ditanyakan ketika mengevaluasi apakah alur kerja yang dimaksudkan sesuai:

  • Seberapa penting tugas itu dilakukan dalam urutan langkah tertentu?
  • Apakah sudah jelas bagi pengguna di mana untuk memulai dan apa yang harus dilakukan selanjutnya?
  • Apakah hasil yang dimaksudkan dinyatakan atau tersirat - secara implisit, jika tidak secara eksplisit?
Search with category selection n iStockPhotoSearch with category selection n iStockPhotoSearch with category selection n iStockPhoto

Mari ambil contoh pilihan kategori pencarian di iStockPhoto. Dalam hal ini, saya dapat mencari semuanya atau memilih kategori tertentu untuk membatasi pencarian saya ke jenis informasi itu. Karena tindakan utama adalah memasukkan istilah pencarian dan menekan Pencarian, itu seharusnya cukup jelas. Langkah yang mungkin di antaranya adalah memilih kategori, yang dapat berupa daftar drop-down antara (Anda menebaknya dengan benar) bidang pencarian dan tombol Search.

The income/expense entry dialog in cashbaseThe income/expense entry dialog in cashbaseThe income/expense entry dialog in cashbase

Contoh lain adalah dialog input pendapatan / biaya dalam aplikasi cashbase. Bidang disusun sesuai dengan alur kerja umum yang akan digunakan untuk mencatat informasi tersebut: masukkan jumlah (yang merupakan elemen paling penting), pilih kategori, tambahkan catatan jika perlu, dan klik Tambahkan. Informasi sekunder yang akan digunakan jauh lebih jarang - seperti tanggal yang secara default adalah hari ini, dan opsi untuk mengulang atau membatalkan - tersedia, tetapi jauh lebih halus.

BAcaan lanjut:


Kedekatan

Elemen terkait dalam antarmuka harus dikelompokkan bersama. Ini mungkin terdengar seperti akal sehat ketika saya menyebutkannya, tetapi tidak selalu dipahami dengan baik. Alasan semua tautan navigasi halaman di sebagian besar situs web ditata dalam bilah horizontal tunggal, adalah agar pengguna dapat mengidentifikasi hubungan secara sekilas dan membuat pilihan untuk berinteraksi dengan mereka tanpa kebingungan.

The message toolbar in GmailThe message toolbar in GmailThe message toolbar in Gmail

Mari kita lihat contoh ini dari Gmail - aplikasi yang banyak digunakan secara rutin. Ini adalah bilah alat yang muncul di bagian atas saat Anda membuka surat. Meskipun semua tombol tersebut melakukan beberapa tindakan pada pesan terbuka, mereka dikelompokkan bersama berdasarkan apa yang mereka lakukan - tindakan yang akan digunakan untuk menyingkirkan pesan (arsip, spam, hapus), untuk mengubah pentingnya pesan (ketika menggunakan inbox prioritas), tindakan terkait label, dan akhirnya drop-down dengan opsi sekunder.

Feature grouping in ZootoolFeature grouping in ZootoolFeature grouping in Zootool

Contoh lain dari penggunaan kedekatan yang baik adalah bar opsi di Zootool. Toolbar di bagian bawah dibagi menjadi tiga set, masing-masing sesuai dengan tiga panel di app: daftar paket di sebelah kiri, jendela email di pusat yang berisi semua bookmark Anda, dan panel rincian di sebelah kanan.

Bacaan Lanjut:


Hirarki

Tidak semua yang ada di antarmuka pengguna, atau tata letak apa pun, memiliki kepentingan yang sama dengan yang lainnya. Hirarki adalah pengaturan elemen-elemen dengan cara yang menunjukkan apa yang lebih tinggi dalam urutan, apa yang terjadi selanjutnya, dan seterusnya.

A layout with no sense of hierarchy within elementsA layout with no sense of hierarchy within elementsA layout with no sense of hierarchy within elements

Mari kita lihat contoh ini di sini dan mencoba untuk mengidentifikasi apa urutan prioritasnya. Karena segala sesuatu - judul, label, dan teks paragraf - terlihat sama, seseorang harus membaca semuanya agar masuk akal. Jika antarmuka yang sama di-tweak sedikit seperti di bawah ini, dampak keseluruhan pada keterbacaan dan pada gilirannya kegunaan antarmuka sangat besar.

The same layout with a better sense of hierarchyThe same layout with a better sense of hierarchyThe same layout with a better sense of hierarchy

Sebagai aturan umum, judul halaman harus paling besar dan paling terlihat di layar. Ini diikuti oleh judul bagian, sub-judul dan kemudian label yang lebih kecil. Teks paragraf bisa lebih atau kurang menonjol tergantung pada tujuannya. Itu juga tidak terbatas pada teks. Tombol tindakan utama dapat dibedakan dari tindakan sekunder dengan membuatnya lebih cerah, lebih besar atau lebih menarik. Kolom input untuk input wajib dapat dibuat lebih jelas daripada yang lain. Saya bisa terus, tapi saya pikir Anda mendapatkan ide itu.


Kontras

Pertimbangan lain yang sangat penting saat merancang antarmuka adalah untuk memastikan diferensiasi yang jelas antara elemen. Tentu saja, Anda ingin teks dapat dibaca di latar belakang, tetapi kontras melampaui sekadar menggunakan teks ringan pada latar belakang gelap atau sebaliknya. Judul dan teks paragraf harus dapat dibedakan secara jelas. Panel dan bar navigasi harus dipisahkan satu sama lain sehingga pengguna tahu apa itu. Daftarnya terus berlanjut.

Kontras dapat dibuat menggunakan satu atau lebih karakteristik berikut:

Warna

Ini harus jelas, tetapi luar biasa seberapa sering orang menyelinap pada titik ini. Jika latar belakang Anda terang, Anda jelas ingin teks menjadi gelap untuk memastikan keterbacaan. Meskipun dalam teori warna-warna gratis harus bekerja sama dengan baik, itu tidak selalu mudah. Cobalah menempatkan teks hijau terang dengan latar belakang merah dan Anda akan tahu apa yang saya katakan.

Good & bad examples of contrastGood & bad examples of contrastGood & bad examples of contrast

Kemungkinannya di sini tidak terbatas, jadi rekomendasi pertama saya kepada siapa pun yang ingin memilih warna adalah untuk mengambil palet warna populer dari situs seperti Adobe Kuler atau ColourLovers. Mereka dikontribusikan, dievaluasi, dan di-voting oleh pengguna yang bergairah yang biasanya tahu jalan mereka tentang warna. Semua dasar-dasar pencocokan warna dan kontras biasanya diurus, jadi hanya masalah memutuskan skema warna mana yang berfungsi dalam konteks aplikasi Anda.

Browsing through color palettes on Kuler & ColourLoversBrowsing through color palettes on Kuler & ColourLoversBrowsing through color palettes on Kuler & ColourLovers

Satu catatan peringatan - berhati-hatilah untuk berlebihan dengan warna. Anda tidak ingin mereka membayangi utilitas dan kegunaan aplikasi Anda.

Ukuran

Cara lain yang baik untuk membedakan antara elemen - berdasarkan hirarki, kategorisasi, atau aliran visual - adalah menggunakan ukuran yang berbeda. Ini berlaku untuk teks sebanyak itu untuk gambar, latar belakang dan elemen statis atau interaktif. Anda mungkin ingin lebih menekankan pada tombol tindakan utama, misalnya, dan menjaga tombol sekunder relatif kurang dapat diakses. Atau petunjuk opsional bisa lebih kecil dan lebih ringan daripada label utama dalam formulir.

Yesterday, today and tomorrow in TeuxdeuxYesterday, today and tomorrow in TeuxdeuxYesterday, today and tomorrow in Teuxdeux

Aplikasi TeuxDeux melakukan pekerjaan cemerlang menggunakan warna untuk membedakan antara masa lalu, masa kini, dan masa depan. Karena tata letak diarahkan ke minggu kerja, ukuran teks yang berbeda digunakan untuk memastikan bahwa nama-nama hari mudah diidentifikasi, sedangkan tanggal relatif lebih halus.


Interaksi

Karena tujuan utama dari setiap antarmuka pengguna adalah untuk memungkinkan pengguna berinteraksi dengan aplikasi, penting bahwa pelajar secara intuitif tahu apa yang harus dilakukan. Sebagai pembuat antarmuka, sangat mudah untuk melupakan bahwa Anda tidak akan ada di sana untuk setiap pengguna untuk memberi tahu mereka apa yang harus dilakukan. Pengguna tidak lagi memiliki kesabaran untuk membaca manual dan panduan memulai cepat sebelum terjun menggunakan aplikasi. Antarmuka diperlukan untuk membuatnya sangat jelas apa bagian itu dapat diklik, dapat disentuh, diseret - singkatnya, interaktif.

Semua orang tahu cara menyalakan saklar listrik, bukan? Hal yang membuatnya jelas bagi siapa pun bahwa suatu saklar perlu ditekan pada titik tertentu untuk mengubah keadaan disebut affordance. Pada permukaan datar layar - desktop, seluler atau lainnya - teknik yang berbeda dapat digunakan untuk memungkinkan pengguna secara intuitif mengeklik tombol atau mengetik di dalam bidang masukan. Saat membuat hyperlink teks, menambahkan garis bawah untuk tautan adalah standar yang paling umum digunakan, meskipun ada banyak cara kreatif lainnya untuk melakukannya.

Ini beberapa contoh:

Each interactive element has a different interaction objective, and therefore a different visual treatmentEach interactive element has a different interaction objective, and therefore a different visual treatmentEach interactive element has a different interaction objective, and therefore a different visual treatment

Pergi dengan contoh saklar, bagaimana Anda tahu jika menjentikkan saklar melakukan apa yang seharusnya dilakukan? Lampu menyala atau padam, atau dalam beberapa kasus, cahaya di dalam sakelar membantu memperjelas apakah sakelar hidup atau mati.

Dalam aplikasi, umpan balik semacam itu dapat sangat jelas dalam kasus di mana tombol menavigasi ke halaman lain atau membuka munculan, tetapi bagaimana dengan situasi di mana semua yang dilakukannya adalah memproses beberapa data di latar belakang - seperti saat menyimpan perubahan pada pengaturan pengguna? Semacam mekanisme umpan balik sangat penting untuk memberi tahu pengguna bahwa tindakan mereka berhasil. Ini bisa sesederhana pesan "pengaturan Anda telah disimpan", pemberitahuan singkat di bagian atas halaman, atau sorotan cepat di sekitar area yang diperbarui.

Two-level feedback in Remember the MilkTwo-level feedback in Remember the MilkTwo-level feedback in Remember the Milk

Ketika Anda menambahkan tugas baru di Remember the Milk, itu dapat muncul di daftar pada halaman yang sama, atau hanya ditambahkan ke daftar lain di latar belakang (jika, misalnya, tugas telah ditetapkan untuk kategori yang berbeda). Umpan balik untuk tindakan itu disediakan dalam dua tingkat:

  1. sorotan hijau muncul selama beberapa detik di belakang tugas dalam daftar untuk menunjuk ke tempat yang telah ditambahkan, dan
  2. pesan yang sangat menonjol muncul pada latar belakang kuning di bagian atas halaman yang memungkinkan pengguna mengetahui apa yang sebenarnya terjadi.

Tipografi

Teks di aplikasi Anda - mulai dari logo hingga judul, label, dan salinan - adalah mode komunikasi utama Anda dengan pengguna. Karena ini adalah bagaimana pengguna Anda mengakses informasi tentang aplikasi atau melaluinya, bagaimana Anda mengatur jenisnya dapat berarti perbedaan antara keberhasilan dan kegagalan. Tentu saja judul harus lebih besar dari teks tubuh dan cetakan halus harus baik-baik saja; tetapi banyak keputusan lain juga memengaruhi cara pengguna mengonsumsi informasi.

Font

Langkah pertama: tentukan font Anda. Ini mengejutkan saya berapa banyak pengembang tidak pernah repot-repot mengubah font apa pun yang dihasilkan teks mereka. Font default berubah dari OS ke OS dan browser ke browser, yang berarti bahwa kecuali Anda secara eksplisit menyatakan font apa yang ingin Anda gunakan, teks Anda akan terlihat berbeda di setiap kombinasi OS dan browser. Selain itu, Times New Roman - yang masih digunakan oleh banyak browser sebagai font default - bukan font bagus untuk membaca di layar. Rekomendasi pertama saya adalah sering menggunakan font sans-serif, meskipun Georgia atau font Cambria baru di Windows 7 juga terlihat bagus.

Sans-serif fonts make a big difference to the readability of text over Times New RomanSans-serif fonts make a big difference to the readability of text over Times New RomanSans-serif fonts make a big difference to the readability of text over Times New Roman

Jika Anda memutuskan untuk menggunakan font selain yang aman, yang tersedia secara universal seperti Arial / Helvetica, Georgia, Tahoma, dll., Pastikan ada cara untuk menjadikannya sama di semua platform. Jika Flash adalah lingkungan pilihan pengembangan Anda, tanamkan di mana perlu. Untuk aplikasi berbasis HTML / JS, gunakan @ font-face dalam CSS atau layanan font web seperti Typekit atau Google WebFonts. Ingat juga, bahwa teknik ini datang dengan peringatan ukuran file ekstra untuk font yang disematkan. Jika kecepatan dan respons sangat penting bagi Anda, berpegang pada font dasar adalah taruhan terbaik Anda.

Disclaimer: Ya, saya tahu bahwa Arial dan Helvetica tidak persis sama, tetapi mereka cukup mirip untuk sebagian besar pengguna untuk tidak memperhatikan perbedaannya.

Utama

Jumlah ruang antara dua baris teks adalah yang terdepan. Anda ingin agar bagian utama dari teks paragraf Anda (garis-tinggi dalam CSS berbicara) untuk setidaknya 140% dari ukuran font untuk memastikan itu mudah dibaca. Semakin sedikit dan teks Anda akan jauh lebih sulit untuk dibaca dan - lebih penting - untuk memindai.

Text leading makes a huge difference to the readability of your textText leading makes a huge difference to the readability of your textText leading makes a huge difference to the readability of your text

Lokalisasi

Jika Anda berencana untuk menerjemahkan aplikasi Anda ke dalam bahasa lain - dan Anda benar-benar harus - yang terbaik adalah menguji antarmuka secara dini dengan skrip yang berbeda. Paling tidak, jumlah ruang yang diperlukan pesan tertentu dapat bervariasi secara drastis di seluruh skrip yang berbeda. Skrip Asia Timur menggunakan lebih sedikit kata pada rata-rata tetapi membutuhkan ukuran font yang lebih besar, skrip India (India) juga harus sedikit lebih besar agar dapat dibaca dan skrip timur tengah (seperti bahasa Arab) pergi dari kanan ke kiri, bukan dari kiri yang biasa -benar-benar.

Kesimpulan

Itu saja untuk sekarang. Saya harap tips ini cukup mencakup dasar-dasar bagi Anda untuk mulai menerapkannya dalam proyek Anda segera. Seperti kebanyakan disiplin yang berhubungan dengan desain, tidak ada aturan yang keras dan cepat untuk diikuti, dan setiap orang memiliki cara mereka sendiri tentang bagaimana hal-hal harus bekerja. Jadi jika Anda tidak setuju dengan saran saya di atas - atau bahkan jika Anda setuju dengan mereka tetapi memiliki perspektif yang berbeda - mari kita dengar tentang mereka di komentar.

Selanjutnya, kami akan mengambil semua kebijaksanaan ini dan mencoba menerapkannya ke antarmuka yang sebenarnya. Tetap disini!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.