Membuat Visual Design untuk sebuah Aplikasi/Website
Dalam membuat tampilan untuk sebuah aplikasi desain, membuat sebuah visual design akan sangat membantu dalam proses. Front end developer jadi mempunyai sebuah petunjuk yang detail dalam membuat tampilan dari aplikasi/website dan aplikasi, sehingga tampilan yang dihasilkan pun akan lebih rapih dan konsisten. Pada artikel ini, saya akan coba membahas mengenai cara membuat visual design tersebut.
Apa itu Visual Design
Visual design adalah penggunaan gambar, warna, bentuk, tipografi, dan wujud untuk menambah kegunaan dan meningkatkan user experience. Visual design tidak hanya mengutamakan segi aestetik, namun juga mengutamakan segi strategik. Karena visual design digunakan untuk membuat dan mengatur elemen sehingga (1) dapat menuntun pandangan user ke fungsionalitas sebuah item, dan (2) membuat aestetik konsisten.
Dalam melakukan visual design untuk sebuah aplikasi/website, ada pembuatan beberapa hal yang sudah umum dipakai oleh designer untuk membantu dalam penggambaran tampilan aplikasi/website secara keseluruhan. Hal tersebut adalah pembuatan Wireframe dan Mockup dari tampilan aplikasi/website.
Wireframe
Biasanya, tahap awal dalam proses melakukan desain sebuah aplikasi/website adalah dengan membuat sebuah Wireframe. Setelah mendapatkan requirements untuk aplikasi/website dan fitur apa saja yang ada, designer dapat mulai mengatur dan menyusun requirements tersebut ke sebuah tampilan dengan cara membuat Wireframe.
Wireframe sendiri adalah sebuah skema atau blueprint yang dapat sangat membantu programmer maupun designer untuk berpikir dan berkomunikasi mengenai struktur aplikasi atau website yang sedang dibuat. Wireframe biasa digunakan untuk mengatur tata letak konten dan fungsionalitas dalam sebuah page dengan mempertimbangkan kebutuhan dan perjalanan user. Wireframe digunakan pada tahap awal proses development untuk mendirikan membangun struktur dasar dari sebuah page sebelum ditambahkan desain visual dan konten.
Karena Wireframe hanya merupakan struktur dasar dari aplikasi/website, pembuatan Wireframe dapat dilakukan tanpa menggunakan tools apapun, seperti menggambarnya di kertas. Namun, ada beberapa Wireframing tool yang khusus dibuat agar pembuatan Wireframe menjadi lebih mudah. Selain itu, Wireframe yang dibuat pun dapat menjadi lebih rapih dan konsisten. Salah satu Wireframing tool tersebut yang gratis yang cukup populer digunakan untuk membuat sebuah website adalah wireframe.cc.
Alasan Membuat Wireframe
Ada beberapa alasan mengapa membuat Wireframe merupakan hal yang penting dalam proses development, beberapa diantaranya adalah:
- Wireframe dapat membantu menyampaikan pesan dengan jelas
- Wireframe dapat membantu dalam mendapat kepastian dari interface aplikasi/website
- Wireframes dapat menghasilkan aplikasi dan website yang mudah digunakan.
- Wireframe dapat menghemat waktu dan pekerjaan pengaturan nantinya.
Pembuatan Wireframe dalam Project Development
Pada project yang saya buat, telah dibuatkan Wireframe untuk semua page dari website yang dibuat oleh supervisor kami berdasarkan requirements dan petunjuk yang diberikan oleh client. Dengan Wireframe tersebut, team designer kami dapat lebih mudah dan lancar dalam membuat Mockup (akan dibahas selanjutnya) karena dengan Wireframe tersebut, kami sudah mengetahui dengan jelas struktur dari page yang akan dibuat. Berikut adalah contoh Wireframe dari salah satu page website yang kami buat, yaitu home page atau halaman awal aplikasi.
Mockup
Setelah selesai membuat Wireframe, langkah selanjutnya yang dapat dilakukan dalam proses melakukan desain sebuah aplikasi/website adalah membuat Mockup. Karena dari Wireframe kita sudah mendapatkan gambaran jelas dari struktur dan isi dalam page pada aplikasi/website yang dibuat, pembuatan Mockup pun akan semakin lancar.
Kalau Wireframe merupakan sebuah kerangka dari page, Mockup merupakan kulit dari page sendiri. Mockup dikategorikan sebagai mid atau high fidelity karena Mockup sudah mencerminkan pilihan desain untuk color scheme, layout, tipografi, dan bahkan atmosfer produk jadi secara keseluruhan. Dengan kata lain, yang ditampilkan dalam Mockup kurang lebih sama dengan tampilan dari page sebuah aplikasi/website yang sudah dalam tahap produksi. Lain dengan Wireframe, biasanya pembuatan Mockup memerlukan sebuah tool karena Mockup sudah dapat dikategorikan sebagai high fidelity. Salah satu tool yang populer yang dapat digunakan tersebut adalah figma.com.
Kemudian dengan Mockup tersebut, dapat dibuat sebuah prototype, yang merupakan demonstrasi behavior dari fitur-fitur yang ada pada page. Berbeda dengan Wireframe yang merupakan sebuah gambar yang tidak bisa di interaksikan, Mockup yang sudah dijadikan prototype sudah bersifat interaktif sehingga user dapat berinteraksi dengan prototype tersebut. Beberapa contoh behavior tersebut adalah routing sebuah website dari satu page ke page lain. Jadi, kita bisa mengklik sebuah tombol pada salah satu page dalam Mockup yang dibuat, dan tampilan akan berganti ke page Mockup lain layaknya routing pada website asli. Namun, harus diingat bahwa protype hanya merupakan demonstrasi, jadi hal yang ditampilkan sebenarnya tidak benar-benar terjadi pada backend. Seperti contoh, Jika prototype menampilkan fitur mengirimkan pesan di dalam chat, pada tampilan dibuat user seolah-olah mengirimkan sebuah pesan meskipun sebenarnya tidak terjadi apa-apa.
Manfaat Membuat Mockup
Ada beberapa manfaat yang didapatkan dengan membuat Wireframe dalam proses development, beberapa diantaranya adalah:
- Revisi yang mudah cepat: Membuat revisi akan lebih cepat dan mudah pada Mockup ketimbang saat sudah melakukan coding tampilan sebenarnya.
- Perspektif yang realistis: Dengan membuat Mockup, kita jadi tahu apa saja yang dapat bekerja dengan yang tidak. Misalkan sebagai contoh, ada warna yang tidak cocok dan merusak tampilan, namun hanya keliatan saat tampilan divisualisasikan.
- Intuitif terhadap stakeholders: Karena Mockup merupakan high fidelity, Mockup tidak memerlukan banyak konteks seperti low fidelity documents dan Wireframe, karena stakeholders dapat dengan mudah melihat tampilan final dari produk meskipun produk masih dalam tahap development.
Pembuatan Mockup dalam Project Development
Dari Wireframe yang telah sudah ada pada project yang saya kerjakan, dibuat Mockup untuk semua page dari Wireframe tersebut. Dengan Mockup tersebut, team frontend developer kami dapat lebih mudah dan lancar dalam melakukan coding untuk tampilan page website yang sebenarnya. Karena dengan Mockup tersebut, kami sudah mendapat gambaran akhir page yang akan dibuat, sehingga yang harus dilakukan adalah membuat tampilan page semirip mungkin dengan Mockup. Berikut adalah contoh Mockup dari salah satu page website yang kami buat, yaitu home page atau halaman awal aplikasi, yang sudah diberikan Wireframenya diatas.
Nielsen’s 10 Usability Heuristics for User Interface Design
Ada beberapa aturan yang telah ditetapkan untuk membantu designer dalam melakukan UI design. Salah satu aturan yang sudah menjadi pedoman dalam melakukan UI design tersebut adalah 10 prinsip general yang telah ditetapkan oleh Jakon Nielsen untuk interaction design yang disebut sebagai 10 Usability Heuristics for User Interface Design. Aturan ini merupakan aturan luas yang tidak hanya berlaku spesifik untuk pedoman usability tertentu, sehingga disebut sebagai “heuristic”. 10 prinsip tersebut adalah:
1. Visibility of system status
Desain harus selalu bisa menginformasikan user tentang apa yang terjadi, melalui feedback yang sesuai dengan jangka waktu yang masuk akal. Harus bisa mengkomunikasikan dengan jelas keadaan dari sistem ke user, dan tidak ada aksi dengan konsekuensi yang diambil tanpa memberi tahu user.
Sebagai contoh, saat menggunakan aplikasi Google Maps, ada indikator titik yang memberi tahu posisi user pada saat itu di peta. Karena informasi yang ditampilkan secara realtime, maka user mendapatkan informasi tentang keberadaannya dalam waktu cepat, sehingga dapat membantu user untuk mengerti harus kemana selanjutnya.
2. Match between system and the real world
Desain harus berbicara bahasa yang sama dengan user. Maksudnya adalah menggunakan bahasa, ungkapan, dan konsep yang bersifat familiar terhadap user, tidak seperti dengan logat khusus. Harus dipastikan user dapat mengetahui arti suatu kata atau kalimat tanpa harus mencari arti dari kata tersebut, dan jangan pernah berasumsi bahwa pengertian kita tentang suatu kata atau konsep akan selalu sama dengan pengertian user.
Sebagai contoh, website Google akan menampilkan tampilan halaman website dengan bahasa sesuai dengan preferensi bahasa user. Biasanya secara default bahasa sudah disesuaikan dengan bahasa yang dipakai user. Dan jika user ingin mengganti bahasa yang digunakan juga bisa dilakukan dengan membuka setelan yang ada pada browser.
3. User control and freedom
Karena user seringkali melakukan kesalahan, seperti mengklik tombol yang tidak dimaksud, maka desain harus menyediakan sebuah “emergency exit” yang jelas agar user dapat meninggalkan aksi yang tidak diinginkan tanpa melalui proses yang lama. Emergency exit tersebut harus dilabeli dengan jelas dan mudah ditemukan sehingga user dapat membatalkan aksi yang dilakukan dengan mudah.
Sebagai contoh, website Youtube menyediakan tombol “unsubscribe” yang akan seperti namanya akan melakukan “unsubsribe” terhadap sebuah channel di platform tersebut. Jadi jika orang men-subscribe baik secara sengaja ataupun tidak, orang tersebut bisa kapan saja meng-cancel aksi tersebut dengan melakukan unsubscribe.
4. Consistency and standards
User tidak perlu bertanya-tanya apakah kata, situasi, dan aksi yang berbeda berarti hal yang sama. Maka dari itu, desain harus membuat kata, situasi, dan aksi tersebut konsisten dengan membuat sebuah standard. Jika consistency gagal dijaga, maka akan membuat user harus mempelejari hal yang baru yang sebenarnya tidak perlu dipelajari.
Sebagai contoh, pada aplikasi/website yang memerlukan user nya untuk melakukan login, khususnya website social media, akan selalu ada tombol logout untuk keluar dari akun. Selain itu, tombol tersebut biasanya selalu ditaruh pada dropdown yang ada pada navbar, sehingga jika orang pun pertama kali menggunakan sebuah aplikasi/website tersebut, dia akan langsung tahu dimana posisi tombol logout. Salah satu contoh aplikasi/website tersebut adalah Facebook sebagai berikut.
5. Error prevention
Desain yang baik harus bisa dengan hati-hati mencegah suatu masalah terjadi, dibandingkan memberikan error messages. Kondisi yang error prone harus dieliminasi, atau tidak harus diperiksa apakah terdapat kondisi tersebut dan memberikan user opsi apakah dia ingin melanjutkan aksinya yang bisa menyebabkan suatu error tersebut.
Sebagai contoh, pada Twitter bisa mengedit tanggal lahir yang dimiliki. Namun tanggal yang disediakan tentunya terbatas dengan tanggal yang masih belum melewati tanggal saat pengisian, karena user tidak mungkin lahir pada tanggal yang akan datang.
6. Recognition rather than recall
Meminimalisir beban memori pengguna dengan membuat elemen, aksi, dan opsi terlihat. User tidak harus mengingat informasi dari isi interface satu ke yang lainnya. Informasi yang dibutuhkan untuk menggunakan sebuah fitur tentunya harus dituliskan, seperti dalam bentuk label. Buat user mengenali sebuah informasi pada interface, bukan harus mengingat informasi tersebut.
Sebagai contoh pada aplikasi/website word processor misalkan seperti Google Docs, disediakan format-format teks dengan term yang dikenali semua orang. Seperti contoh, term “Bold” dikenali orang untuk membuat teks menjadi lebih tebal.
7. Flexibility and efficiency of use
Shortcut yang tidak terlihat oleh user pemula dapat mempercepat interaksi dari expert user sehingga desain dapat melayani baik user yang banyak pengalaman atau tidak. Proses dibuat se fleksibel mungkin dan dapat dijalani dengan berbagai macam cara, sehingga user dapat memilih metode yang paling cocok untuk dirinya.
Sebagai contoh, pada aplikasi Google Maps, disediakan beberapa pilihan rute yang dapat dipilih ketika user menggunakan sistem navigasi yang disediakan. Sehingga user yang misalkan menggunakan motor bisa memilih rute motor sehingga rute bisa diarahkan melewati jalan yang sempit.
8. Aesthetic and minimalist design
Interface harusnya tidak mengandung informasi yang tidak diperlukan atau tidak relevan. Setiap ada ekstra unit yang tidak penting pada interface, akan membuat unit yang penting makin kurang terlihat. Konten dan visual UI harus dijaga agar tetap fokus ke hal yang esensial.
Sebagai contoh, pada halaman utama pada website Google, hanya ada satu fitur yaitu fitur search yang ditampilkan ditengah-tengah halaman tersebut. Hal ini membuat user mengerti bahwa Search Engine merupakan fitur utama yang disediakan oleh Google.
9. Help users recognize, diagnose, and recover from errors
Pesan yang didapatkan ketika error terjadi harus ditampilkan dalam plain languange, bukan error codes, dan harus mengindikasikan errornya dengan akurat sekaligus memberikan solusi untuk mengatasinya. Agar lebih dikenali user, bisa menggunakan visual pesan error tradisional, yaitu teks tebal yang berwarna merah.
Sebagai contoh, misalkan pada aplikasi Google terjadi server error sehingga service tidak tersedia, Google akan mengembalikan halaman berisi error code dan penjelasan error tersebut, tidak hanya error code nya saja.
10. Help and documentation
Sistem yang baik sebenarnya tidak harus menampilkan penjelasan hal tambahan. Namun terkadang perlu disediakan sebuah dokumentasi untuk membantu user menyelesaikan pekerjaan mereka. Dokumentasi harus dipastikan mudah untuk dicari, dan biasanya harus disediakan tepat sebelum user melakukan pekerjaan yang mungkin membutuhkan dokumentasi tersebut.
Sebagai contoh, biasanya pada sebuah game akan disediakan tutorial atau petunjuk cara bermain game tersebut, dan user bisa memutuskan untuk membaca atau melewati petunjuk tersebut. Salah satu contohnya ada permainan Drawbattle.io yang menyediakan instruksi cara bermain pada halaman sebelum user bermain permainan tersebut.
Sekian artikel yang saya buat mengenai Membuat Visual Design untuk sebuah Aplikasi/Website, terima kasih.
Referensi:
