Tag: UI

Desain User Interface dan User Experience adalah kompetensi gabungan antara teknis dan seni dalam meramu tampilan antar muka aplikasi dan website. Desain ini menjadi fitur utama yang menghubungkan antara user dan layanan yang disediakan oleh aplikasi dan website.

Pada dasarnya Desain UI tidak mendesain UX, namun seluruh pengalaman yang dirasakan penggunakan saat menggunakan aplikasi berasal dari desain UI. Hal ini membuat Desain UI/UX sering kali disatukan.

Desain UI / UX

Desain User Interface atau yang biasa disebut dengan Desain Antarmuka Pengguna adalah desain yang digunakan untuk komputer, mesin, perangkat komunikasi, aplikasi perangkat lunak, sistem operasi dan situs web yang berfokus pada User Experience dan interaksi. Desain User Interface yang baik akan mempermudah interaksi antara manusia dengan mesin. Sebuah sistem antarmuka pengguna memiliki peranti masukkan (seperti keyboard, mouse, dan media input lainnya), peranti keluaran (seperti monitor, printer), masukan dari pengguna seperti garis, gerakan mouse dan ketikan keyboard) dan hasil yang dikeluarkan oleh komputer (seperti grafik, bunyi dan tulisan).

A. Kompetensi Dasar

1. Menerapkan prinsip-prinsip Desain User Interface pada multimedia interaktif berbasis halaman web dan media interaktif
2. Membuat user interface menggunakan prinsip-prinsip Desain User Interface pada multimedia interaktif berbasis halaman web dan media interaktif

B. Tujuan dan Manfaat

User Interface merupakan bagian dari program dimana di dalamnya terjadi interaksi antara manusia dan komputer. Seorang developer yang membuat program harus memikirkan bagian user interface agar program yang dibuatnya dapat berfungsi dengan baik, sehingga pengguna akan merasa ketika berinteraksi dengan komputer menggunakan tampilan antarmuka (interaksi) yang ada pada layar komputer.

Berikut beberapa tujuan Desain Antarmuka Pengguna :

1. Menyesuaikan antarmuka pengguna dengan tugas / pekerjaan
2. Membuat antarmuka pengguna menjadi efisien
3. Memberikan arus balik yang tepat kepada pengguna
4. Memunculkan pertanyaan-pertanyaanyang dapat dimanfaatkan
5. Memperbaiki produktifitas dari pengetahuan pegawai

C. Prinsip Pengembangan dan Desain

Tampilan visual merupakan hal yang penting dalam interaksi manusia dan komputer. karena keberadaan komputer adalah untuk membantu pekerjaan manusia. sehingga komputer dalam tampilan visual dimonitornya tersebut harus memenuhi beberapa klasifikasi, agar mudah mengerti manusia. kalau bahasa aslinya komputasi itu bilangan biner, maka bingung juga tuh kalau bit-bit yang ada tidak interpretasikan kedalam visualnya manusia. salah satu tujuannya simple saja, yaitu karena ingin informasi yang disampaikan lewat komputer itu mudah dipahami. dan kalau kita bicara tampilan maka bisa berarti tampilan software yang kita buat, atau tampilan web yang kita buat, atau yang lainnya.

Prinsip Umum Perancangan User Interface oleh Deborah J. Mayhew, dengan General Principles Of UI Design, ada 17 prisip yang harus dipahami para perancang sistem, terutama untuk mendapatkan hasil maksimal dari tampilan yang dibuat. anda tidak perlu bingung dengan apa yang dimaksud tampilan, karena salah satunya adalah tampilan web ini.

Berikut adalah beberapa prinsip tersebut :

1. User Compatibility, yang bisa berarti kesesuaian tampilan dengan tipikal dari user. karena berbeda user bisa jadi kebutuhan tampilannya berbeda. misalnya, jika aplikasi diperuntukkan bagi anak-anak, maka jangan menggunakan istilah atau tampilan orang dewasa.
2. Product Compatibility, istilah ini mengartikan bahwa produk aplikasi yang dihasilkan juga harus sesuai. memiliki tampilan yang sama/serupa. baik untuk user yang awam maupun yang ahli.
3. Task Compatibility, berarti fungsional dari task/tugas yang ada harus sesuai dengan tampilannya. misal untuk pilihan report, orang akan langsung mengartikan akan ditampilkan laporan. sehingga tampilan yang ada bukanlah tipe data (dari sisi pemrogram). coba kalau pilihanya database, grafik, evaluasi (dimana ketiga hal itu sebenarnya adalah laporan), ribet !bisa kebayang kalau tampilan yang ada hanya untuk satu pekerjaan saja. misal untuk kirim mail, kita harus membuka tampilan tersendiri untuk daftar alamat.
4. Work Flow Compatibility. adalah user interface yang mempermudah alur kerja kita. dengan satu tampilan dan memiliki fungsi Ui yang banyak / lebih dari satu fungsi.
5. Consistency. contohnya, jika anda menggunakan istilah save yang berarti simpan, maka gunakan terus istilah itu. kalau yang tidak konsisten, kadang menggunakan save, kadang simpan, atau apalah.
6. Familiarity, contohnya dengan icon. anda pasti akan lebih familiar jika mengartikan icon disket sebagai perintah untuk menyimpan. maka jangan ganti dengan gambar kuda, mana ada yang tau kalau itu untuk simpan.
7. Simplicity, Kesederhanaan juga perlu diperhatikan saat membangun desain antarmuka. Kesederhanaan berarti ringkas dan tidak terlalu berbelit.
8. Direct Manipulation, manipulasi secara langsung. misalnya anda tidak perlu menuliskan sintax yang repot hanya untuk mempertebal huruf, cukup dengan ctrl+B.
9. Control, berikan kontrol penuh pada user, tentunya dengan sebaik mungkin dan jangan sampai merusak sistem. tipikal user biasanya tidak mau terlalu banyak aturan.
10. WYSIWYG, What You See Is What You Get, buatlah tampilan mirip seperti kehidupan nyata user. dan pastikan fungsionalitas yang ada berjalan sesuai tujuan. user ingin tempe jangan dikasih tahu (red : pasti bingung dg istilah ini).
11. Flexibility, UI tidak hanya menggunakan Keyboard saja atau mouse saja,tapi dapat juga dengan touch screen.
12. Responsiveness, tampilan yang dibuat harus ada responnya. misal, yang sering kita lihat ketika ada tampilan please wait… 68%…
13.  Invisible Technology. sebagai programmer handal kita tidak boleh sombong (dan harus tetap rajin nabung). user tidak penting mengetahui algoritma apa yang kita gunakan, max sort, bubble sort, quick sort, atau apa sort, walaupun itu bagian dari keahlian. yang user tahu cukup fungsinya yaitu untuk sorting. Tampilkan fungsionalitas, sembunyikan teknologi.
14. Robustness itu artinya handal, bisa mengakomodir kesalahan user. jangan malah error, apalagi sampai crash.
15. Protection adalah melindungi user dari kesalahan yang umum dilakukan. misalnya dengan memberikan fitur back atau undo.
16. Ease of Learning. tanpa harus ada pelatihan, tanpa harus baca tutorial, tanpa harus sekolah tinggi-tinggi, user sudah bisa menggunakan tampilan aplikasi buatan anda. mudah dipelajari.
17. Ease of use. harus mudah digunakan. seperti halnya menggunakan fungsionalitas yang ada di keseharian kita. misal tombol yang ada, harus mudah dong nekennya, nggak usah pake tenaga ekstra.

D. Tahapan Perancangan Antarmuka

Proses yang secara rinci menggambarkan bagaimana perancangan dan pengembangan antarmuka terlihat pada gambar di atas. Empat tahap utama dalam proses tersebut adalah:

1. Analisis Karakteristik User

Proses perancangan antarmuka dimulai dari memahami pengguna. Sebelum merancang antarmuka, kita harus mengetahui masalah apa yang ingin pengguna selesaikan dan bagaimana mereka melakukan pekerjaan mereka. Pengumpulan dan penganalisaan aktivitas-aktivitas pada tahap pertama ini dapat dijabarkan dalam lima langkah:

1. Menentukan profil pengguna.
2. Melakukan analisa terhadap task-task pengguna.
3. Mengumpulkan kebutuhan-kebutuhan pengguna.
4. Menganalisa user environments.
5. Mencocokan kebutuhan tersebut dengan task.

2. Merancang Antarmuka.  

Dalam merancang antarmuka ada beberapa tahapan yang harus dilalui, yaitu:

1. Menjelaskan kegunaan dan tujuan.
2. Menetapkan icon objek, views, dan representasi visual.
3. Merancang objek dan jendela menu
4. Memperbaiki rancangan visual

3. Mengembangkan Antarmuka.  

Hal pertama yang bisa dilakukan dalam membangun antarmuka adalah membangun prototype. Membangun prototype adalah cara yang berharga dalam membuat rancangan awal dan membuat demonstrasi produk dan penting untuk pengujian kegunaan antarmuka. Dariprototype tersebut, perancang antarmuka dapat mulai membangun antarmuka secara utuh. Ketika membuat prototype, sangat penting untuk diingat bahwaprototype harus dapat di buang setelah digunakan (disposable). Jangan takut untuk membuang sebuah prototype. Tujuan dalam membuat prototype adalah untuk mempercepat dan mempermudah dalam memvisualisasikan desain alternatif dan konsep, bukan untuk membangun kode yang akan digunakan sebagai bagian dari produk.

4. Melakukan Validasi Terhadap Antarmuka.  

Evaluasi kegunaan adalah bagian penting dari proses pengembangan, untuk mengetahui bagaimana tanggapan pengguna terhadap antarmuka yang telah dibuat. Evaluasi ini akan digunakan untuk memperbaiki kekurangan pada antarmuka yang telah dibangun. Aturan emas dalam perancangan antarmuka:

1. Buat Pengguna menguasai antarmuka.
2. Kurangi user’s memory load
3. Buat antarmuka konsisten

Proses-proses tersebut independen dari hardware dan software, sistem operasi dan peralatan yang digunakan untuk merancang dan mengembangakan produk. IBM Common User Access (CUA) interface design guide adalah yang pertama kali mendeskripsikan proses perancangan antarmuka secara iteratif.

E. Interaksi Pengguna

User Interface adalah mekanisme user melakukan interaksi dengan sistem atau aplikasi, sehingga pengguna dan aplikasi dapat saling berkomunikasi. Ada lima macam antarmuka yang dapat digunakan untuk menjembatani interaksi antara pengguna dengan aplikasi multimedia interaktif, yaitu direct manipulation, menu selection, form Fill in, command language dan natural language

 1. Direct Manipulation

Direct Manipulation (Pengoperasian secara langsung) yaitu interaksi langsung dengan objek pada layar misalnya drag and drop. Kelebihan interaksi ini adalah waktu pembelajaran pengguna sangat singkat, umpan  balik (feedback) langsung diberikan pada tiap aksi sehingga kesalahan terdeteksi dan diperbaiki dengan cepat. Kekurangannya adalah antarmuka tipe ini rumit dan memerlukan banyak fasilitas pada sistem komputer, cocok untuk penggambaran secara visual untuk satu operasi atau objek.

2. Menu Selection

Menu Selection atau pilihan berbentuk menu adalah tipe bentuk antarmuka yang menyediakan daftar pilihan perintah. Pengguna tidak perlu lagi mengingat script command, pengetikan minimal dan tingkat kesalahan rendah.

3. Form Fill In

Form Fill In adalah salah satu bentuk antarmuka yang memberikan kesempatan pengguna dalam mengisi form dengan sederhana dan mudah dipelajari. Kekurangan yaitu memerlukan banyak tempat dilayar jika pilihan pengisiannya banyak dan harus menyesuaikan dengan form manual dan kebiasaan pengguna.

4. Command Language

Coomand Language adalah tipe antarmuka yang mengharuskan pengguna untuk menuliskan perintah yang sudah ditentukan pada program. Kelebihannya perintah diketikan langsung pada sistem, dapat dengan mudah diterapkan pada terminal, kombinasi perintah dapat dilakukan. Misal copy file dan rename nama file. Kekurangannya perintah harus dipelajari dan diingat cara penggunaannya, tidak ccok untuk pengguna biasa, sering terjadi kesalahan menggunakan perintah, perlu ada sistem pemulihan kesalahan.

5. Natural Language

Natural Language bentuk antarmuka dengan menggunakan bahasa alami untuk berinteraksi. Seperti pada saat kita melakukan pencarian dimesin pencari di internet. Kelebihannya perintah dalam bentuk bahasa alami, dengan kosa kata yang terbatas (singkat) misalnya kata kunci yang kita tentukan untuk dicari oleh search engine.