Langsung ke konten utama

Desain UI pada Website dan Mobile

Apa itu User Interface (UI) ?

User Interface atau biasa disebut UI adalah bentuk visual atau tampilan pada website atau aplikasi yang ditujukan pada penggunanya agar ada interaksi didalamnya. UI menjadi penghubung langsung antara sistem dengan penggunanya. UI merupakan perpaduan dari elemen grafis dan sistem navigasi. UI efektif untuk membuat fokus pengguna pada objek dan subjek yang dilihat menjadi lebih baik.


UI Berdasarkan Platform
  • Desktop (PC, Netbook & Notebook)
  • Mobile (Smartphone & Tablet)
  • Website (Desktop & Mobile)

UI Desktop VS UI Mobile
a. Screen Size
  • Desktop = Large
  • Mobile = Small
b. Interaction
  • Desktop = Cursors
  • Mobile = Gestures
c. Organizing Content
  • Desktop = Columns
  • Mobile = Scrolling/Potrait and landscape
d. Functionality
  • Desktop = Big task
  • Mobile = Experimental

UI Mobile
Interaksi pengguna mobile dengan perangkat mobile harus dirancang sedemikian rupa sehingga rentang waktu tindakan pengguna lebih pendek dari pada di perangkat desktop, tindakan harus sederhana namun terfokus. Selain itu, ukuran layar pada perangkat mobile juga kecil sehingga jumlah informasi yang dapat ditampilkan terbatas. Desain UI haruslah cepat saat dibuka.

Metode Pembuatan Desain UI Mobile
 1. Material Design for Android (MDfA)
Material Design for Android atau MDfA adalah panduan untuk membuat desain UI pada sistem operasi Android yang mencakup visual, gerak, dan interaksi di seluruh platform dan perangkat. MDfA ini merupakan template UI Android standar yang digunakan pada aplikasi bawaan atau aplikasi milik Google. Semua panduan mengenai standar desain UI aplikasi Android tersedia secara lengkap, seperti tema, widgets, animasi, dan komponen UI lainnya.

 2. Common Element Sets (CES)
 Common Element Sets atau CES merupakan seperangkat elemen UI yang umum atau populer digunakan oleh aplikasi dan muncul setidaknya satu kali pada desain UI lainnya. CES pada UI bisa seperti desain tata letak, desain tombol, desain navigasi, desain form, desain produk dan lain sebagainya. Komponen UI yang umum digunakan dapat merujuk dari desain aplikasi yang populer saat ini.

UI Website
UI untuk sebuah website harus memiliiki beberapa kriteria seperti berikut : 
  • Harus Responsif bisa di desktop dan mobile
  • Tampilan harus simpel dan mudah digunakan
  • Page speed harus bagus (cepat)

Metode Pembuatan Desain UI Website
Ada 3 prinsip dalam mendesain sebuah website menurut Veen’s Design Principles, yaitu bisa menjawab pertanyaan:

1.   Di mana saya?
Maksud dari “Di mana saya ?” yaitu, sebuah website harus memiliki header guna menjelaskan website tersebut merupakan website apa.

2.   Kemana saya bisa pergi?
Maksud dari “Kemana saya bisa pergi ?” yaitu, sebuah website harus memiliki navigasi yang diposisikan di sidebar bertujuan agar pengguna dapat menemukan halaman-halaman lain pada website.

3.   Ada apa di sini?
Maksud dari “Ada apa disini ?” yaitu, UI dari website tersebut harus dapat menggambarkan apa saja konten dari website tersebut.


Jenis Desain UI Website
  • Static - Desain web memiliki ukuran tetap pada semua resolusi browser (pixel)
  • Fluid - Desain web dapat menyesuaikan lebar layout sesuai dengan resolusi browser (%)
  • Responsive – Desain web dapat berganti layout pada resolusi tertentu (desktop&mobile)
  • Responsive fluid – Gabungan Responsive & Fluid (%)
  • Horizontal Scrolling -Desain web dengan menampilkan konten Horizontal atau menyamping)
  • Parallax Scrolling- Desain web dengan layer atau hanya 1 halaman (one page/single page)
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Logika Fuzzy (Model Sugeno dan Tsukamoto)

Logika Fuzzy adalah metodologi sistem kontrol pemecahan masalah yang cocok digunakan untuk diimplementasikan pada berbagai sistem, mulai dari sistem yang sederhana, sistem kecil, embedded system, jaringan PC, multichannel atau workstation berbasis akuisisi data dan sistem kontrol. Logika ini  merupakan suatu logika yang memiliki nilai kekaburan atau kesamaran antara benar atau salah. Logika Fuzzy sering digunakan dalam bidang elektronika. Konsep logika ini pertama kali diperkenalkan oleh Prof. Lotfi Astor Zadeh pada tahun 1962. A. Model Sugeno Model Sugeno adalah metode interfensi fuzzy untuk aturan yang dipresentasikan dalam bentuk IF-THEN, output yang dihasilkan sistem tidak berupa himpunan fuzzy, tetapi berupa konstanta atau persamaan linear. Sebagai fungsi keanggotaan dari konsekuen, Michio Sugeno mengusulkan penggunaan singleton. Singleton adalah sebuah himpunan fuzzy dengan fungsi keanggotaan yang pada titik tertentu mempunyai sebuah nilai dan 0 diluar titik tersebut. Du...
Posting Komentar
Baca selengkapnya

Evaluasi UI (Usability & User Experience)

Apa itu Usability? Jacob Nielson, usability didefinisikan sebagai kemampuan sistem untuk memenuhi kebutuhan pengguna dengan 5 atribut penilaian, yaitu learnability, efficiency, memorability, errors, dan satisfaction. Pressman, usability merupakan tingkatan kemampuan antarmuka aplikasi dapat digunakan untuk mempermudah hidup pengguna. Santoso, usability merupakan derajat kemampuan sebuah aplikasi untuk membantu pengguna menyelesaikan sebuah tugas. ISO 9241-11 (Bevan, 1995), mendefinisikan usability merupakan sejauh mana suatu produk dapat digunakan oleh pengguna tertentu untuk mencapai target yang ditetapkan dengan effectiveness, efficiency dan satisfaction. Kenapa sih Usability itu Penting? Memudahkan pengguna Aplikasi mudah dipelajari Aplikasi harus berjalan sesuai fungsinya Berdampak Pada Faktor Kesuksesan Menarik minat penggunanya Alat Uji Usability SUS (System Usability Scale) : SUS merupakan kuesioner yang sederhana dan paling dapat diandalkan. QUIS (Questionnaire for User Int...
Posting Komentar
Baca selengkapnya

Implementasi HTML Bootstrap Design Web ke WordPress

Kemunculan WordPress lebih memudahkan proses perancangan blog. Sebelum adanya WordPress, banyak developer Website yang menggunakan HTML statis bagi merancang blog. Namun, kini para developer sudah mulai beralih menggunakan tampilan yang terdapat di WordPress. Meskipun saat ini tak masalah jika tetap menggunakan HTML statis, tetapi tak ada salahnya bukan jika mempertimbangkan pindah ke WordPress. Kenapa? Karena dengan WordPress, Kamu dapat merancang dan mengelola blog lebih gampang. WordPress menyediakan tema, plugin, widget, dan beragam fitur lainnya yang mempermudah Kamu mengelola blog tanpa berurusan dengan coding. Bagi kamu selaku pemilik blog yang masih menggunakan HTML statis telah seharusnya disarankan sebaiknya Kamu mulai mempertimbangkan untuk melakukan convert HTML ke WordPress. Selain mempermudah Kamu bagi mengelola, WordPress pun mempunyai banyak fitur yang lebih fleksibel ditambah maupun dikurangi diperbandingkan dengan HTML statis. Ada tiga macam cara convert HTML ke WordP...
Posting Komentar
Baca selengkapnya