Interface Design Style Guidelines

Ketika membangun sebuah sistem digital, seperti situs web atau apikasi, dengan merancang GUI, desainer UX perlu memastikan bahwa elemen-elemen di sistem digital memang dapat digunakan. Pasalnya, perancangan GUI yang selesai pada sebuah sistem tidak dapat menjadi acuan bahwa sistem dapat digunakan. Masalah yang berkaitan dengan hal ini seringkali muncul, sehingga para ahli design interface menghasilkan panduan gaya (style guides) yang mampu memberikan saran atau solusi untuk beberapa permasalahan yang dialami oleh interface developer. Panduan gaya ini dibuat untuk ketiga sistem operasi utama yang digunakan di dunia, yaitu Microsoft Windows 10, Mac macOS dan iOS, serta Android.

Panduan gaya menjelaskan cara memastikan bahwa sistem digital yang sedang dirancang dapat digunakan oleh semua pengguna. Panduan ini membantu desainer UI untuk membuat keputusan mendetail tentang interface seperti apa yang tepat untuk setiap sistem, sehingga tidak menyalahi aturan atau persyaratan (requirements) dari sistem operasi utama yang berkaitan. Panduan gaya juga memberikan panduan yang berpengaruh pada tingkat detail desain yang jauh lebih kecil, yaitu widget individu, sehingga tiap sistem operasi memiliki panduannya masing-masing.

Berikut merupakan penjelasan singkat beberapa guidelines yang dimiliki oleh tiap sistem operasi:

a) iOS Interface Design Guidelines

Menurut website developer Apple, tiga tema/prinsip utama yang membedakan iOS dari sistem operasi lain adalah:

– Clarity

Teks harus dapat dibaca di setiap ukuran, ikon harus jelas atau dapat “dilogika”, dan hiasan yang sesuai, namun harus tetap berfokus pada fungsionalitas. Ruang negatif, warna, font, grafik, dan elemen interface yang disajikan pada dasarnya harus menyoroti konten penting dan menyampaikan interaktivitas.

– Deference

Interface harus tajam sehingga dapat memudahkan user dalam memahami dan berinteraksi dengan konten yang ditampilkan. Penggunaan pada gradien dan bayangan (shadow) harus sesuai dengan range minimal dan maksimal, sehingga tetap ringan dan lapang, sekaligus memastikan bahwa konten adalah hal yang harus disoroti.

– Depth

iOS memberikan lapisan visual dan gerakan yang berbeda untuk menampaikan hierarki, memberikan daya hidup, dan memfasilitasi pemahaman. Selain itu, ada juga transisi yang memberikan kesan mendalam saat pengguna menavigasi konten.

b) Android Interface Design Guidelines

Aplikasi memerlukan berbagai macam ikon, dari ikon search hingga berbagai ikon di halaman menu, dialog, tab, status, sign in, log, in, hingga sign out. Menurut situs web developer android, pada panduan design Android, syarat tiap-tiap ikon dijelaskan secara rinci dengan spesifikasi ukuran, warna, bayangan, dan detail lainnya agar sesuai dengan sistem Android.

Selain ikon, panduan ini juga menjelaskan syarat-syarat desain widget yang sesuai dengan perangkat Andorid. Widget adalah alat yang menampilkan informasi secara sekilas di layar beranda atau layar utama pengguna. Selain ikon dan widget, perbedaan pada panduan Android dan sistem operasi lainnya juga berada di aspek layout-nya. Di bawah ini merupakan beberapa contoh perbedaan layout pada perangkat Android dengan iOS.

Android terus berusaha supaya aplikasi terlihat dan berperilaku dengan cara yang konsisten dengan platform. Desainer UI Android tidak hanya harus mengikuti panduan desain material untuk pola visual dan navigasi, tetapi juga harus mengikuti panduan kualitas untuk kompatibilitas, kinerja, keamanan, dan lainnya.

c) Microsoft Windows 10 Interface Design Guidelines

Menurut artikel pada situs Microsoft, terdapat beberapa elemen design visual yang pada proses perancangannya harus mengikuti syarat panduan dan pedoman yang ditentukan. Berikut di antaranya:

– Layout

Layout yang dibangun harus sesuai dengan ketentuan spasi, ukuran, dan penempatan konten dalam laman Windows. Tata letak harus efektif sehingga pengguna dapat mendapatkan apa yang mereka cari dengan cepat dan tidak rancu dengan konten lainnya.

– Fonts

Pada panduan Microsoft disebutkan bahwa pengguna Windows lebih sering berinteraksi dengan teks daripada elemen lainnya. Oleh karenanya, Windows mengupayakan supaya teks yang ditampilkan dapat dilihat dan dibaca dengan baik dan nyaman oleh pengguna. Dalam hal ini, sistem font yang digunakan oleh Windows adalah Segoe UI dengan standard ukuran 9 poin.

– Colors

Warna yang ditampilkan dalam Windows harus menggambarkan emosi dan respon dari pengguna. Warna yang digunakan juga harus konsitsen supaya dapat terhindar dari kerancuan.

– Icon

Sebagai representasi dari objek, ikon yang digunakan harus benar-benar dapat mewakilkan dari objek asli. Standar ikon yang digunakan oleh Window adala ikon error, warning, information, dan question mark.

– Graphic Elements

Elemen grafis yang ditampilkan pada Windows harus menunjukkan hubungan, urutan, hierarki, dan penkean pada konten-konten tertentu dengan memanfaatkan opasitas, bayangan, dan warna.

Referensi:

Benyon, David. (2019). Designing User Experience: A guide to HCI, UX and interaction design (4th Edition). United Kingdom: Pearson

Kalyani, H. M. (1 Mei 2019). Android vs iOS design guidelines. Medium. https://medium.com/learnfazz/android-vs-ios-design-guidelines-204b48126eb9

Pedamkar, Priya. (….). What is GUI?. EDUCBA. https://www.educba.com/what-is-gui/ (…). (4 Desember 2021). GUI. Computer Hope. https://www.computerhope.com/jargon/g/gui.htm (…). (2 November 2021).

Visuals. Microsoft. https://docs.microsoft.com/en-us/windows/win32/uxguide/visuals