Pertemuan Ke 9 - Matakuliah RPL - Desain Data dan Arsitektur Perangkat Lunak

 APA ITU USER INTERFACE?

User Interface adalah tampilan visual sebuah produk yang menjembatani sistem dengan pengguna (user). Tampilan UI dapat berupa bentuk, warna, dan tulisan yang didesain semenarik mungkin. Secara sederhana, UI adalah bagaimana tampilan sebuah produk dilihat oleh pengguna.

MENGAPA USER INTERFACE (UI) PENTING?

Selain membuat situs atau aplikasi tampak apik, elemen satu ini juga memiliki sejumlah manfaat penting yang tak bisa diabaikan oleh para developer.

Tanpa adanya UI yang mumpuni, website atau aplikasi perusahaan akan kesulitan untuk bersaing di era modern ini.

hal-hal yang membuat user interface (UI) penting untuk sebuah situs atau aplikasi :

1. Meningkatkan keseluruhan pengalaman pengguna 

User interface adalah salah satu aspek utama untuk menaikkan traffic dalam website atau menaikkan jumlah download aplikasi.

Ia merupakan salah satu faktor penentu apakah pengunjung tertarik untuk mengeksplorasi sebuah website.

Jika pengunjung senang dengan tampilan UI, pastinya mereka akan kembali lagi untuk mengeksplorasi website tersebut.

Bukan hanya tampilan keseluruhan saja, sekecil detail seperti tombol saja sebenarnya sudah mempengaruhi pengalaman pengunjung dalam menggunakan website.

Bayangkan jika tombol navigasi dalam sebuah web atau aplikasi tidak berjalan mulus. Pastinya pengunjung sudah tidak mau menggunakannya lagi.

2. Memudahkan pengguna dalam aplikasi

Selain memanjakan mata, UI juga penting untuk memudahkan para penggunanya. UI tidak hanya sekadar estetik, tetapi juga harus menciptakan user experience yang baik.

Tampilan yang menarik dan estetik tidak menjamin web atau aplikasi tidak akan ditinggalkan para pengunjung atau pengguna. Jika estetik tetapi malah menyusahkan pasti cepat atau lambat akan ditinggalkan.

Contohnya adalah saat menemukan sebuah website atau aplikasi yang memiliki background hitam dan tulisannya putih. Walaupun tampilannya kelihatan bagus, tulisan di dalamnya sulit untuk dibaca.

Mata manusia terbiasa untuk membaca tulisan hitam di atas background putih, bila sebaliknya akan menimbulkan berbagai efek samping seperti sakit mata atau pusing.

Jika hal ini terjadi user experience akan menjadi buruk dan bisa dijamin traffic website akan semakin menurun. Jadi, UI sangat amat penting dalam pembuatan tampilan website atau aplikasi.

3. Meningkatkan kualitas branding

Selain untuk traffic dan pengalaman pengguna, user interface juga bisa tingkatkan kualitas branding perusahaan.

Mengapa demikian? Sebab, UI merupakan cerminan atas kualitas beserta nilai dari produk yang ditawarkan badan usaha.

Elemen tampilan UI yang sesuai dengan konsep produk perusahaan juga akan lebih mudah untuk dikenali para pengguna.

Dengan persaingan pasar yang makin ketat, perusahaan perlu berlomba-lomba untuk ciptakan UI yang mumpuni  untuk memenangkan hati para user.

FUNGSI USER INTERFACE

User interface penting untuk memenuhi harapan pengguna dan mendukung fungsionalitas situs secara efektif.

UI yang dijalankan dengan baik juga dapat memfasilitasi interaksi yang efektif antara pengguna dan program melalui visual yang kontras dan desain yang bersih.

UI juga memiliki beberapa fungsi lain yang dapat memberikan manfaat bagi perusahaan :

Meningkatkan penjualan perusahaan.

Mempercepat progres pertumbuhan bisnis.

Memberikan struktur informasi yang jelas dan mumpuni.

Meningkatkan kualitas estetika di dalam situs atau aplikasi.

KARAKTERISTIK USER INTERFACE YANG BAIK :

1. JELAS

Kejelasan dalam desain merupakan elemen yang sangat penting dalam pembuatan desain user interface.

Tujuan utama dalam tampilan user interface adalah agar pengguna mengeksplorasi sistem yang dibuat dengan lancar.

Jika ada tombol navigasi atau icon yang tidak jelas, pastinya pengguna akan langsung klik tombol close karena bingung.

Jadi, walaupun hanya menampilkan icon, usahakan juga untuk menjelaskan atau memberikan informasi untuk penggunanya.

Dapat dilihat contoh di atas merupakan tampilan navigasi dari WordPress. Saat kursor didekati, ada pop-up yang berisi informasi secara jelas kegunaan dari tombol tersebut.

Jelas bukan berarti harus panjang. Dengan beberapa kata yang mudah dimengerti, pengguna pasti juga akan paham akan kegunaannya.

2. SINGKAT

Jelas merupakan kunci utama dalam sebuah tampilan UI. Namun, jangan sampai kamu terjebak dengan penjelasan yang super panjang dan membuat pengguna makin pusing.

Selain bikin pusing, penjelasan dengan kata-kata yang panjang akan membuat tampilan website menjadi berantakan. Jelas tentu saja namun tetap dibuat secara singkat.

Jika kamu tidak bisa menjelaskan dengan kata-kata dan kalimat, buatlah dengan cara visual. Visual yang baik akan lebih cepat dimengerti dibandingkan harus membaca tulisan terlebih dahulu.

Navigasi volume seperti ini sudah sangat singkat dan jelas tanpa harus menggunakan kata-kata.

Visual yang ditampilkan akan langsung dimengerti oleh pengguna bahwa semakin ke kanan volume akan semakin keras.

3. FAMILIER

Banyak desainer membuat desain UI pada tampilan webnya menjadi sebuah tampilan yang intuitif. Apa maksudnya dari intuitif?

Maksudnya adalah layout yang dapat dimengerti secara natural hanya dengan menggunakan perasaan.

Contohnya jika kamu pernah membuka tampilan web atau aplikasi yang kamu tahu harus klik yang mana tanpa harus berpikir terlebih dahulu.

Nah, tampilan ini dapat dibilang familier karena sebelumnya kamu pernah merasa melihat tampilan ini.

4. RESPONSIF

Responsif memiliki dua arti. Arti yang pertama adalah cepat. Pastinya seorang pengguna tidak mau menunggu lama dalam membuka satu tombol navigasi.

User interface yang lamban akan membuat penggunanya habis kesabaran.

Selain cepat, responsif juga berarti memiliki feedback. Di sini, feedback dimaksudkan seperti penjelasan apa yang akan terjadi selanjutnya.

Jangan sampai pengguna mengira bahwa aplikasi atau web yang digunakan sedang stuck atau lag.

Tulisan loading dan persentase bisa menjadi salah satu contoh UI yang responsif. Dari icon atau grafik inilah pengguna tahu berapa lama lagi mereka harus menunggu.

5. KONSISTEN

Dalam mengembangkan user interface, konsistensi pada tampilan dapat membantu user memahami polanya.

Dari satu UI, user bisa mempelajari tombol, tabs, icon, dan berbagai elemen yang ada pada interface tersebut.

Jika kamu ingin membuat lebih dari 1 website atau aplikasi, desain UI yang dibuat haruslah konsisten untuk memudahkan user.

Konsistensi ini juga akan memberikan tampilan UI menjadi lebih personal dan memiliki ciri khas.

Contoh tampilan UI yang konsisten adalah Microsoft Office. Dengan tampilan yang khas dan juga sama antara tiap software-nya membuat user mudah menggunakannya.

Selain konsisten, tampilan UI Microsoft Office juga memenuhi syarat familiar.

6. EFISIEN

Dapat dikatakan, user interface merupakan kendaraan untuk para user untuk menjelajahi tujuannya. Maka dari itu, UI harus memiliki tampilan yang efisien.

Agar dapat membuat UI yang efisien, creator harus tahu dulu apa yang ingin user capai dan membuat mereka sampai di ‘tujuannya’ tanpa hambatan.

Contoh UI yang efisien adalah tampilan pada iPhone seperti di atas. Apple sudah mengetahui apa yang akan dilakukan oleh para user-nya untuk foto.

Mereka memberikan pilihan yang efisien untuk membantu user mencapai tujuannya.

7. FORGIVING

User tidak selalu benar dalam menggunakan sebuah aplikasi atau website. Nah, bagaimana UI menangani masalah ini agar user tak merasa bersalah?

Forgiving merupakan salah satu indikator yang baik dalam tampilan UI. Forgiving bisa dikatakan sebuah solusi jika user melakukan sebuah kesalahan.

Contohnya saja jika kamu pernah tak sengaja menghapus email di Gmail. Mereka akan memberikan pilihan “undo” untuk memperbaiki kesalahan.

Dengan adanya solusi ini, user otomatis tidak takut untuk menggunakan aplikasi atau website-mu lebih lanjut.

8. MENARIK

Kata-kata menarik memang sangat subjektif untuk menjadi salah satu syarat.

Tampilan yang dapat dinilai menarik pun akan berbeda tiap orangnya tergantung dengan selera dan preferensi masing-masing user.

Namun, untuk dapat membuat tampilan menarik hanya perlu empat hal, yaitu simpel, mudah digunakan, efisien, dan responsif.

Untuk warna, jenis tulisan mungkin dapat kamu buat sesuai dengan target audience-nya dan dengan memahami tren serta psikologi warna.

BERIKUT MACAM - MACAM TOOLS UNTUK MEMBANGUN DESAIN UI :

Berbagai macam tools terbaik untuk wireframe dan prototyping agar desain User Interface 

Tools Wireframe :

1. MockFlow

2. Balsamiq

3. Axure

4. Adobe Comp

Tools Desain & Prototyping :

1. Sketch

2. InVision Studio

3. Figma

4. Adobe XD

5. Adobe Illustrator

6. Origami Studio

Tools Wireframe

1. MockFlow

MockFlow adalah serangkaian aplikasi yang sangat membantu untuk sejumlah tugas atau task dalam proses proyek yang khas. Terutama, aplikasi WireframePro pada Mockflow yang berfungsi sebagai alat prototyping alternatif yang baik untuk digunakan, terutama jika kamu ingin menguji beberapa ide desain baru

Dengan MockFlow memungkinkan untuk membangun layout atau tata letak dasar dengan cepat. Hasil mockup desain pun terlihat lebih rapih dan menarik sebelum nantinya diaplikasikan pada desain.

2. Balsamiq

Untuk mencari tools wireframing yang cepat, maka Balsamiq lah solusinya. Balsamiq dapat dengan cepat mengembangkan struktur dan tata letak untuk proyek dengan mudah.

Fitur drag & drop pada balsamiq membuat alur kerja desain menjadi lebih mudah dan dapat menautkan tombol ke halaman lain. Ini berarti dapat dengan cepat mulai merencanakan antarmuka dan kemudian membaginya dengan tim atau klien.

3. Axure

Axure selalu menjadi salah satu pilihan terbaik untuk desainer yang ingin membangun wireframe kompleks yang membutuhkan data dinamis. Dengan Axure, bisa fokus membuat project mock up yang membutuhkan keahlian teknis saat membangun struktur dan data.

4. Adobe Comp

Jika suka membuat desain pada perangkat tablet dengan layar besar. Maka adobe Comp pilihan yang tepat. Adobe comp menawarkan fitur lengkap dalam membangun wireframe yang optimal untuk desain.

Namun sayangnya aplikasi atau software Adobe Comp membutuhkan biaya dalam instalasinya, jadi perlu mengeluarkan biaya agar dapat menggunakan software ini.

Tools Desain & Prototyping

1. Sketch

Sketch adalah Tool yang sangat populer dalam komunitas desain untuk membuat antarmuka dan prototipe hi-fi. Salah satu fitur hebatnya adalah Symbol, di mana dapat mendesain aset dan elemen UI untuk digunakan kembali. Hal Ini membantu menciptakan sistem desain dan menjaga antarmuka agar tetap konsisten. Dari sana, dapat dengan mudah mengekspor desain menjadi prototipe yang dapat diklik.

2. InVision Studio

Banyak Impian desain dalam membangun UI menjadi kenyataan dengan InVision Studio. Masih dalam rilis awal, Tool ini akan membantu membuat antarmuka interaktif yang indah dengan banyak fitur. Dapat membuat animasi dan transisi khusus dari sejumlah gerakan dan interaksi.

Selain itu, bisa membuat desain yang responsif dengan InVision Studio. Jadi tidak perlu repot-repot membuat banyak desain hanya untuk tampil sesuai diberbagai macam device. Dengan InVision Studio, bisa lebih fokus pada ide-ide kreatif agar desain lebih baik lagi tanpa perlu khawatir tentang tingkat responsifitasnya.

3. Figma

Figma memudahkan kita membuat desain tampilan dengan cepat. Figma ini adalah platform yang berbasis web, jadi bisa dijalankan dengan hanya menggunakan web browser yang kamu punya seperti: Google chrome, Mozilla Firefox, Opera dan atau Safari.

Karena figma berbasis web, maka figma ini bisa dijalankan disemua sistem operasi baik itu Windows, MacOS atau Linux.

Kelebihan dari figma ini adalah bisa menjadi tools kolaborasi dimana memungkinkan kita dapat bekerja secara bersamaan pada suatu project. Tentu ini sangat efektif bila kita sedang mengerjakan suatu project dengan Developer, Designer atau Copy Writer secara langsung dalam waktu yang sama.

4. Adobe XD

Adobe XD adalah tools yang dibuat oleh perusahaan Adobe dan berada pada koleksi Adobe Creative Cloud. Berbeda dengan koleksi Adobe lainnya, Adobe XD ini adalah aplikasi yang khusus dibuat untuk para desainer yang berfokus merancang antaramuka aplikasi atau web yang disebut dengan UI/UX Designer. Adobe XD ini juga salah satu tools yang paling populer digunakan oleh para desainer profesional maupun pemula karena kemudahannya dan juga fitur yang banyak serta menarik. Seperti misalnya fitur voice trigger, auto animatenya, responsif dan lainnya.

5. Adobe Illustrator

Sama halnya seperti Adobe XD, adobe Illustrator merupakan salah satu Tools yang diciptakan perusahaan adobe yang berfungsi untuk desain. Jika pernah menggunakan photoshop, tentunya lebih cepat akrab dengan tool yang satu ini, karena layoutnya tidak berbeda jauh. Illustrator banyak digunakan oleh desainer-desainer profesional untuk membangun desain yang inovatif, kreatif, dan eye-catching.

6.Origami Studio

Origami Studio merupakan tools desain yang dikembangan oleh Facebook. Origami Studio memiliki fitur seperti menambahkan aturan dan logika ke interaksi. Karena fiturnya yang canggih, para desainer pemula harus terlebih dahulu mempelajari dasar-dasarnya