Saturday, November 27, 2021
spot_imgspot_imgspot_imgspot_img

HomeVisual DesignInspirasi Desain Tampilan Kartu Pada Aplikasi/Web

[UI/UX]Inspirasi Desain Tampilan Kartu Pada Aplikasi/Web

Image for post
Credits: Hanna Jung

Kartu adalah wadah kecil yang rapi untuk informasi. Mereka menjadi hampir opsi default ketika menyeimbangkan estetika yang jelas dengan kegunaan sederhana. Pertama kali diperkenalkan oleh layanan seperti Pinterest dan Facebook, hari ini pengaruh kartu menyebar ke berbagai industri.

Image for post

Pinterest memperkenalkan gagasan bahwa semua informasi yang paling relevan tentang satu topik dapat diatur dalam satu wadah

Diimplementasikan dengan benar, kartu dapat meningkatkan aspek UX suatu aplikasi. Dalam artikel ini, saya akan menggambarkan 5 teknik yang berguna untuk kartu dan memberikan beberapa contoh bermanfaat.

1. Ikuti Aturan “Satu Kartu, Satu Konsep”

Semua konten dalam kartu harus hanya berkaitan dengan satu ide. Kartu dapat berisi banyak elemen dalam suatu desain, tetapi masing-masing harus berfokus hanya pada sedikit informasi atau konten. Ini memberi pengguna kesempatan untuk memilih bagian dari konten Anda yang ingin mereka konsumsi atau bagikan.

Image for post

One block (or card) “contains” one chunk of user interaction

2. Jadikan Seluruh Kartu Dapat Diklik

Ikuti Hukum Fitts dan izinkan pengguna untuk mengklik / mengetuk bagian mana pun dari kartu, bukan hanya tautan teks atau gambar. Zona sentuh yang lebih besar secara substansial meningkatkan kegunaan pada perangkat layar sentuh dan perangkat berbasis mouse.

Kiat: Ada gunanya ketika kartu menggunakan sedikit bayangan untuk menunjukkan kedalaman, yang merupakan penanda visual dari daya klik.

Image for post
Desain kartu menggunakan sedikit bayangan sebagai penanda bahwa seluruh kartu dapat diklik. Kredit: nngroup
3. Buat Kartu Secara Visual Menyenangkan

Apa yang membuat kartu berfungsi adalah desain yang bagus dan kegunaan yang luar biasa. Dengan memberikan sedikit polesan estetika pada kartu, desain kartu Anda terasa akrab namun tetap kreatif.

Image for post
Penghargaan: Piper Lawson

Ketika sampai pada desain kartu yang sebenarnya, Anda harus fokus pada momen-momen berikut:

Gambar-gambar

Menggila pada gambar adalah kekuatan desain berbasis kartu. Studi mengkonfirmasi bahwa gambar meningkatkan desain. Dengan demikian, penekanan pada penggunaan gambar membuat desain berbasis kartu lebih menarik bagi pengguna.

Image for post

Penghargaan: Dave Gamache
Bayangan dan Gradien

Bayangan dan gradien berjalan jauh dalam membuat pengguna berhubungan dengan kartu seperti halnya dengan rekan fisik mereka. Tapi pertimbangkan baik-baik bagaimana Anda menggunakan bayangan dan gradien: jika bayangan dilemparkan di semua sudut dan sisi, maka ilusi kartu menjadi objek fisik hancur.

Image for post
Desain kartu dengan sudut bundar secara visual menyerupai kartu bermain. Kredit: Desain Material
Tipografi

Anda juga dapat menarik perhatian pengguna dengan penggunaan teks. Segala sesuatu tentang desain kartu harus mudah dibaca dan dipahami. Anda harus merancang untuk keterbacaan maksimum:

Pilihlah tipografi yang sederhana dan skema warna yang mudah dibaca (teks paling mudah dibaca bila ditempatkan pada latar belakang warna solid dengan rasio kontras yang cukup terhadap teks).
Cobalah untuk membatasi jumlah tipografi juga. Untuk sebagian besar proyek kartu, satu jenis huruf saja sudah cukup.

Tip: Jenis huruf sans-serif dengan berat normal berfungsi bagus untuk salinan kartu.

Image for post

Kredit: pencetakan makro
4. Batasi Konten dalam Kartu

Kartu biasanya pendek dan menawarkan titik masuk yang ditautkan ke perincian lebih lanjut, bukan perincian lengkap itu sendiri. Ketika Anda mencoba memasukkan ke dalam kartu terlalu banyak konten, sampai-sampai kartu itu mulai menjadi terlalu lebar atau terlalu panjang, kartu itu kehilangan metafor aslinya karena tidak terlihat seperti kartu lagi.

Di bawah ini Anda dapat melihat contoh antarmuka pengguna berbasis kartu. Perhatikan kartu di tengah. Masalahnya di sini adalah penuh dengan informasi dan ini membuatnya sulit untuk dipindai.

Image for post
Penghargaan: Piotr Adam Kwiatkowski
5. Manfaatkan Animasi dan Gerakan

Animasi dapat berkontribusi besar pada pengalaman pengguna jika digunakan dengan benar. Ini membantu orang mengarahkan diri mereka sendiri dalam antarmuka berbasis kartu dan membangun hubungan visual antara berbagai status untuk setiap kartu.

Petunjuk Visual

Petunjuk visual membantu pengguna untuk lebih memahami cara berinteraksi dengan antarmuka pengguna. Jenis animasi ini digunakan ketika Anda perlu menunjukkan bagaimana fungsionalitas tertentu dalam desain beroperasi.

Image for post

Petunjuk untuk memperlihatkan fungsi navigasi. Penghargaan: Barthelemy Chalvet
Umpan Balik Visual

Umpan balik visual sangat penting dalam desain UI. Ini berfungsi karena menarik keinginan alami pengguna untuk pengakuan. Dalam kehidupan nyata, objek merespons interaksi kita, dan beginilah cara orang mengharapkan sesuatu bekerja. Untuk aplikasi atau situs desktop, Anda dapat menggunakan efek hover untuk menunjukkan bahwa elemennya interaktif. Arahkan animasi menambah tingkat kemampuan menemukan, dan pada saat yang sama membuat pengalaman lebih menyenangkan.

Image for post

Terapkan animasi hover ke kartu. Kredit: uxpin

Menggunakan efek hover, Anda juga dapat mengungkapkan opsi. Dalam contoh di bawah ini efek hover memungkinkan pengguna untuk membuat penandaan warna, membalas, meneruskan atau menghapus pesan.

Image for post
Penghargaan: Roman Shkolny
Perbesar

Animasi ini menciptakan transisi antara tampilan pratinjau dan detail: pengguna memilih item (kartu) dan segera melihat informasi terperinci yang terkait dengan pilihan itu. Tantangannya di sini adalah untuk memastikan pengguna merasa mereka tetap dalam konteks yang diberikan.

Image for post

Animasi membantu Anda menghubungkan thumbnail dengan tampilan detailnya. Penghargaan: Charles Patterson
Kesimpulan

Kartu kemudian kanvas kreatif baru. Mereka lebih dari sekedar tampilan, kartu adalah salah satu format tata letak yang paling fleksibel untuk menciptakan pengalaman konten yang kaya.

Terima kasih!

 

 

 

 

 

 

 

sumber:babich.biz uxplanet.org

RELATED ARTICLES
- Advertisment -

Most Popular

Recent Comments