Bocoran Materi Ujian Khusus IUXD Juni 2017


Bagi mahasiswa yang akan mengikuti Ujian Khusus IUXD periode Juni 2017, harus membaca materi berikut ini dengan lengkap dan optimal.

Ujian Khusus ini akan dilaksanakan 12-15 Juni 2017.

Berikut ini nama-nama Mahasiswa yang akan mengikuti Ujian Khusus IUXD 2017:

  • noname

 

Intro 5 Elements of UX?

5 elements of UX Design
5 elements of UX Design

5 Elements of UX ini dibuat secara berurutan, mulai dari tahapan yang paling abstrak (Strategy) sampai dengan bagian yang paling kongkret (Surface). UX tentunya berbeda dengan UI, karena fokusnya menjadi lebih luas, bahkan berkaitan juga dengan usability, kepuasan pengguna serta business goals dari produk yang disajikan. Pahami dengan baik tentang definisi UX, minimal dari 2 sumber berikut,

Sekarang saatnya kita berfikir, merenung dan mamahami, Bagaimanakah 5 elements of UX ini dapat kita terapkan? Ketika kita akan membuat aplikasi Web atau Mobile, tentunya prinsip UX ini bisa langsung kita coba. Tentunya kita tidak sekedar membuat kumpulan code, lalu aplikasi di compile dan kemudian bisa berjalan fiturnya. Itu sama saja sekedar tugas besar mahasiswa tingkat 1 atau 2. Produk dari PA atau aplikasi yang baik dan profesional dibuat harus mempertimbangkan lebih dari sekedar “aplikasi bisa berjalan/running”.

The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want, or providing checklist features. In order to achieve high-quality user experience in a company’s offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.

Mari kita renungkan dan pahami lebih jauh lagi mengenai 5 element dari UX ini (Strategy, Scope, Structure, Skeleton, dan Surface). Om Gerrett membagi dua area pada element UX tersebut, yaitu terdiri dari perspektif product as functionality dan product as information. Artinya model UX yang dibuat akan mempertimbangkan faktor fungsionalitas dari aplikasi dan faktor konten (informasi) yang disajikan pada aplikasi tersebut.

 

5. the Strategy Plane (User Needs, Product Objective)

Strategy adalah bagian paling abstrak dari pengembangan UX. Kesalahan yang umum terjadi pada pengembangan aplikasi Web dan Mobile, justru bukan karena faktor teknologi, atau server, atau source code. Tapi ada hal dasar yang harus dipikirkan secara strategis sebelum memulai pengembangan produk aplikasi:

  • what do we want to get out of this product? (product objectives)
  • what do our users want to get out of it? (user needs)

Strategi yang dibuat harus berorientasi pada Tujuan dari internal produk tersebut, dan juga berorientasi pada kebutuhan eksternal dari para pengguna produk tersebut.

Product Objectives meliputi,

  • Business Goals
  • Brand Identity
  • Success Metrics

User Needs meliputi,

  • User Segmentation
  • Usability & User Research
  • Creating Personas

Kedua faktor tersebut justru banyak diabaikan oleh para developer aplikasi, karena lebih fokus untuk mengawali proses pengembangan dari membicarakan teknologi, fitur atau bentuk tampilan. Padahal kesalahan menentukan tujuan dari aplikasi dan kebutuhan pengguna, justru akan membuat aplikasi dibuat namun tidak bermanfaat (usability rendah).

Mari kita renungkan bentuk interaksi sederhana pada aplikasi ATM (automatic teller machine). Kita bisa berfikir mundur, untuk merenungkan tentang Strategi dari aplikasi ATM tersebut. Apa “product objectives” dari aplikasi ATM? dan Bagaimana “User Needs” dari aplikasi ATM? Coba Anda pikirkan dan buat analisa terhadap strategi untuk mengawali pengembangan mesin ATM.

 

4. the Scope Plane (functional specifications, content requirements)

Setelah mampu mendefinisikan perencanaan strategis, maka dilanjutkan dengan tahapan perencanaan Scope (ruang lingkup). Scope yang dimaksud mencakup identifikasi dari functional spesification (penjabaran dari product objective) dan content requirement (penjabaran dari user needs). Functional spesification mencakup fitur-fitur yang akan dimiliki oleh aplikasi tersebut, sedangkan content requirement mencakup kebutuhan akan isi dan informasi yang akan menjadi konten sajian pada aplikasi. Hal inilah yang akan berpengaruh pada kemampuan interaksi antara aplikasi dan pengguna.

Requirement didefinisikan dari 2 alasan berikut ini,

  1. So You Know What You’re Building…
  2. So You Know What You’re Not Building…

Scope atau ruang lingkup ini juga membicarakan tentang perencanaan kita dalam mengembangan berbagai fitur dan konten dari produk aplikasi yang akan dibuat. Mengacu pada prinsip pengembangan Interaction Design yang selalui terus diperbaharui Life-Cycle nya, maka perlu diatur perencanaan yang baik dalam hal tahapan pengembangan aplikasi sehingga menghasilkan prototype yang cepat didemokan ke user.

Fungsionalitas aplikasi dan Konten informasi yang akan disajikan pada aplikasi harus terdefinisikan dengan jelas. kedua hal tersebut dibuat berdasarkan kebutuhan pengguna (user-centered design). Bahkan didalam bukunya om Garrett disampaikan bahwa struktur penyajian konten informasi juga harus dibuat dengan jelas dan baik.

Mari kita renungkan kembali, fitur apa sajakah yang ada pada mesin ATM. selain itu kita juga bisa mengamati berbagai konten informasi yang disajikan pada ATM, baik berupa petunjuk, navigasi, proses input data, sampai pada keterangan pada kertas transaksi. Semua keterbatasan yang dimiliki oleh mesin ATM dapat teratasi karena ruang lingkup yang jelas dari fitur dan konten yang dimilikinya. Anda bisa melakukan analisa bagaimana element Scope direncanakan pada contoh mesin ATM tersebut. Sebagai contoh, salah satu bank menyediakan fitur favorite pada mesin ATM-nya, tahukah Anda kegunaan dari fitur tersebut?

 

3. the Structure Plane (interaction design, information architecture)

Setelah mampu memperjelas Kebutuhan aplikasi dan membuat prioritas perencanaan, maka pada tahapan tersebut kita sesungguhnya telah memiliki gambaran yang cukup tentang aplikasi yang akan dibuat. Itu artinya element Scope berhasil dikerjakan dan dapat berlanjut pada perencanaan Structure. Pada bagian structure ini kita diminta mendefinisikan secara lebih konkrit lagi kebutuhan user dan proses bisnis dari produk aplikasi, terdiri dari 2 hal yaitu,

  • interaction design
    • Conceptual Model
    • Error Handling
  • information architecture
    • Structuring Content
    • Architectural Approaches
    • Organizing Principles
    • Language and Metadata

Semakin baik strategi yang kita rancang dalam pemilihan ragam interaksi, maka pengguna akan semakin baik menerima aplikasi tersebut. Hal yang sama juga berlaku pada susunan penyajian informasi, semakin baik dan mudah menemukan yang dibutuhkan pengguna maka akan semakin baik arsitektur informasi yang dirancang. Interaksi dapat berupa mekanisme kerja software dan hardware yang memudahkan user mengoperasikan aplikasi. Atau bahkan bisa juga berupa perencanaan yang baik dalam menyajikan urutan proses bisnis aplikasi, sehingga memudahkan user saat berinteraksi untuk mempermudah penggunaan. Arsitektur informasi mencakup kemampuan untuk menyajikan konten secara jelas dan terarah, user tidak dibuat bingung, dan penyesuaian konten terhadap kondisi user (misal penggunaan bahasa yang bergantung pada bahasa user).

Pada kasus mesin ATM, kita bisa melihat dengan sangat jelas bagaimana aplikasi tersebut dioperasikan dengan menu navigasi yang disajikan secara terstruktur. Anda tanpa sadar bisa langsung menggunakan mesin ATM, tanpa perlu mempelajarinya. Hal tersebut mungkin terjadi karena bentuk interaksi dan sajian informasi pada aplikasi ATM telah direncanakan secara terstruktur dan jelas. Tugas Anda saat ini adalah coba untuk mendefinisikan alur dan bentuk interaksi pada aplikasi ATM. Kemudian coba definisikan juga arsitektur atau hirari informasinya yang disajikan aplikasi ATM untuk kasus ambil tunai dan transfer antar bank.

 

2. the Skeleton Plane (interface design, navigation design, information design)

Ibarat kerangka tubuh manusia, atau pola dasar pada jahitan baju atau rangka bangunan rumah, atau sejenisnya (rumahnya belum jadi, tapi kita sudah bisa lihat ruang apa yang ada dan berapa tingkatnya). Skeleton adalah element yang lebih kongkret lagi dari bentuk perancangan UX. Pada tahapan ini kita akan mulai memahami lebih dalam gambaran akhir dari aplikasi yang akan dibuat, seperti bentuk User Interfase Design, Navigation Design dan Information Design.

Beberapa hal yang perlu dipertimbangkan dalam pengembangan Skeleton (cari tahu mengenai istilah aneh berikut),

  • Convention and Metaphor
  • Interface Design
  • Navigation Design
  • Information Design
  • Wireframes

Sangat penting untuk melakukan perencanaan yang jelas dan kongkret pada tahapan Skeleton ini. Hasil perancangan Skeleton akan sangat memudahkan bentuk implementasi Interface dan Interaction pada aplikasi yang dikembangkan. Pada perancangan aplikasi Web atau Mobile, skeleton dapat berupa rancangan layout tampilan web, atau bahkan sampai membuat rancangan mockup atau wireframe aplikasi. Wireframe yang dibuat bisa berupa rancangan tampilan untuk 1 fitur, atau bahkan beragam fitur yang secara struktural saling berinteraksi.

Sekarang Anda coba bayangkan bagaimana bentuk tampilan UI dari aplikasi ATM, dan bayangkan juga tombol-tombol yang disusun pada mesin untuk berinteraksi dengan aplikasi. Buat sketsa atau rancangan Wireframe dari aplikasi ATM tersebut, mendekati bentuk aslinya. Buat secara lengkap pada setiap elemen fitur yang dimilikinya. Sambil Anda perdalam tentang susunan navigasi, informasi dan layout interface dari Aplikasi ATM tersebut. Jika Anda berhasil membuatnya, maka itulah Skeleton dari rancangan UX mesin ATM.

 

1. the Surface Plane (sensory design)

Surface adalah element tertinggi dari 5 Elements of UX. Itu artinya pada element ini rancangan UX dibuat semakin kongkret, dan sesuai dengan konsep user-centered design. Surface dimaksudkan untuk memperjelas penyajian produk aplikasi sesuai dengan kebutuhan natural (panca indera) dari interaksi manusia (sensory design). Beberapa hal penting yang perlu Anda ketahui pada element ini adalah,

  1. Making Sense of the Senses
    1. Smell and Taste
    2. Touch
    3. Hearing
    4. Vision
  2. Follow the Eye
  3. Contrast and Uniformity
  4. Internal and External Consistency
  5. Color Palettes and Typography
  6. Design Comps and Style Guides

Jika Anda menggunakan pengembangan aplikasi berbasis Web, maka pada tahapan ini sebaiknya telah mampu mengimplementasikan bentuk design dalam sajian HTML dan CSS. Faktor-faktor interaksi yang manusiawi dan pengalaman (experience) dari user sangat penting untuk pengembangan tahapan ini.

Pada contoh penerapan surface untuk perancangan web, kita akan menemukan banyak bentuk implementasi. Bisa berupa navigasi, layout konten, form input data, display data table, gambar, interaksi tombol, notifikasi, dan berbagai bentuk implementasi tampilan lainnya.

Kembali kita renungkan aplikasi ATM. setelah mampu membuat hasil wireframe pada tahapan skeleton, maka kini saatnya kita buat implementasi dari tampilan yang sesungguhnya. Seolah-olah Anda membuat tampilan ATM pada layar tablet Android, menggunakan bahasa pemrograman Android. Perhatikan tidak hanya dari sisi fungsionalitas dan konten informasi yang disajikan namun juga susunan interaksi yang natural dan memudahkan pengguna. Hal ini juga bisa kita pelajari dari pengalaman (experience) kita ketika menggunakan mesin ATM, sehingga muncul ide perbaikan dari sisi penyajian fitur dan konten.

5 elements of UX ini hanyalah pendekatan yang bersifat teori, dan menjadi acuan ketika ingin meningkatkan bentuk rancangan berbasis UX pada aplikasi yang kita bangun.

 


Materi yang disampaikan ini akan menjadi bahan Ujian Khusus IUXD 2017. Namun akan disesuaikan pada kasus perancangan UX yang berbeda. Jika masih ada yang belum jelas, silahkan bertanya melalui email atau lewat komentar dibawah blog ini. Thanks

Tugas Ujian Khusus IUXD 2017

Silahkan kerjakan beberapa tugas berikut ini, sebagai syarat mengikuti Ujian Khusus.

1. Mesin ATM

Anda diminta untuk mencoba tahapan 5 Elements of UX diatas. Caranya adanya dengan melakukan napak tilas pembangunan Aplikasi pada mesin ATM. Seolah-olah aplikasi ATM itu belum ada, atau Seolah-olah sudah ada dan Anda diminta untuk mengembangkannya menjadi lebih baik. Pada dunia nyata saat ini, pengembangan experience dari mesin ATM dapat kita lihat dari perubahan bentuk interaksi menggunakan tombol, menjadi layar sentuh. Atau bahkan fitur dan kontennya juga diadopsi pada pengembangan aplikasi Internet Banking dan Mobile Banking.

konsep 5 Elements of UXContoh Interface aplikasi ATM

 

2. Kasus Aplikasi Web.

Anda diminta membuat ringkasan analisis untuk 5 elements of UX secara bertahap (mulai element abstrak sampai element kongkret). Studi kasus bisa Anda ambil dari aplikasi yang sehari-hari Anda gunakan, yaitu YOUTUBE. Hasil perenungan dan analisis Anda bisa ditambahkan juga pengalaman (experience) Anda dalam menggunakan aplikasi tersebut.

 

Dokumentasikan Hasil tugas no.1 dan no.2 dalam bentuk Makalah dengan format sesuai tat tulis ilmiah yang berlaku di Tel-U. Dokumen Hardcopy harus dibawa dan dipresentasikan pada saat Ujian Khusus IUXD.

,