Mengenal Metode The Elements of User Experience ala J.J. Garrett

Nanda Brilianto
4 min readJan 5, 2019

--

Hi! Kali ini saya akan coba bahas salah satu metode dalam User Experience, yaitu The Elements of User Experience yang dicetuskan oleh Jesse James Garrett. Menurut saya metode ini oke juga dipakai untuk pemula dalam dunia UX/UI, termasuk saya, yang masih belajar dari awal untuk mengenal gimana sih step dalam UX process. Awal mula kenal metode ini karena dikasih tau kakak tingkat di perkuliahan, mas Reza Arkan P dan mba Nadya Arizka. Alhamdulillah akhirnya sekarang otw kepakai deh untuk skripsian heheheu. Terima kasih para suhu UX atas referensinya! 🙏

J.J. Garrett sang pencetus The Elements of UX. Btw silahkan baca bukunya ya untuk versi lengkap! hehehe

Yuk Kenalan dengan kelima elemen!

Jadi ceritanya, menurut J.J. Garrett sebuah produk digital akan memiliki User Experience yang baik jika dibangun dengan memperhatikan ke 5 elemen ini. Oh iya, The Elements of UX ini berlandaskan konsep User Centered Design (UCD) ya. Jadi hal-hal yang dibuat pada setiap elemen dalam proses desain akan melibatkan, mempertimbangkan, dan berlandaskan pada user. Nah apa aja sih elemennya? This is it!

5 Elements of UX

Sudah mulai mengenal kelima elemennya? Mari kita bahas satu per satu tapi secara singkat dulu ya! hehe

Strategy Plane

Strategy plane adalah elemen yang berada pada level pertama. Pada elemen ini kita akan mencari tahu apa kebutuhan dari user (user needs) dan tujuan dari dibuatnya produk (product objectives). Intinya pada tahap ini akan dilakukan research untuk menyelaraskan user goals dan business goals.

User needs adalah goals dari produk yang berasal dari luar organisasi atau perusahaan, yaitu user yang akan menggunakan produk kita. Kita harus mengetahui apa yang user inginkan terhadap produk kita dan seberapa memenuhi kah produk terhadap goals dari produk.

Product objectives adalah goals yang berasal dari dalam organisasi atau perusahaan, yaitu berupa business goals seperti target revenue perusahaan, target conversion rate, dan lain-lain.

Scope Plane

Scope plane adalah adalah elemen yang berada pada level kedua. Elemen ini terdiri dari functional spesifications dan content requirements.

Functional spesifications adalah deskripsi dari sekumpulan fitur apa saja yang akan ada di dalam produk, misalkan fitur pemesanan makanan, fitur cart, fitur pembayaran, dan lain-lain.

Content requirements adalah deskripsi dari sekumpulan elemen konten apa saja yang akan ada di dalam produk, misalkan maps, video, gambar, ilustrasi, icon, button, dan lain-lain.

Structure Plane

Structure plane adalah elemen yang berada pada level ketiga. Elemen ini terdiri dari interaction design dan information architecture. Nah, di structure plane ini, elemen konten dan fitur yang udah ditentukan pada scope plane akan diatur lebih lanjut.

Interaction design adalah kita mendefiniskan bagaimana sistem merespon terhadap apa yang user lakukan. Intinya kita akan membuat sebuah user flow/task flow (alur) yang akan dilalui user dari awal menggunakan produk sampai akhir (sampai goals user terpenuhi), misalkan pada e-commerce: alur yang dilalui oleh user mulai dari home hingga proses checkout dan user berhasil melakukan pembayaran. Selain itu juga kita membuat bagaimana interaksi pada setiap flow, apakah user harus melakukan swipe, scroll, dan lain-lain.

Contoh Task Flow/User Flow

Information architecture adalah pengaturan konten elemen untuk membantu user dalam memahami informasi yang ditampilkan pada produk. Konten-konten tersebut akan dikelompokkan menjadi beberapa kategori atau menu.

Contoh Information Architecture
Skeleton Plane

Skeleton plane adalah elemen yang berada pada level keempat. Elemen ini terdiri dari information design, interface design, dan navigation design. Pada tahap ini kita sudah memulai bagian desain.

Information design adalah penyajian dari informasi untuk memudahkan pemahaman. Informasi yang sudah dikelompokkan dalam information architecture akan dituangkan ke dalam sebuah screen.

Interface design adalah pengaturan elemen interface sehingga memungkinkan user untuk mulai bisa berinteraksi dengan fungsi atau fitur dari produk. Interface design ini berbentuk wireframe.

Navigation Design adalah sekumpulan elemen screen yang memungkinkan user berpindah melalui information architecture.

Implementasi dari skeleton plane adalah pembuatan wireframe yang akan memberikan gambaran secara kasar dari antarmuka dari produk yang nantinya akan digunakan oleh user.

Contoh Wireframe
Surface plane

Ini dia elemen yang paling terakhir!

Surface plane adalah elemen yang berada pada level ke lima. Elemen ini terdiri dari sensory experience yang diwujudkan dalam bentuk high-fidelity design. High-fidelity design merupakan design yang sudah sangat mendetail dari aspek font, warna, resolusi, dan lain-lain.

Contoh high-fidelity design

Ok mungkin cukup sekian dulu sekilas pembahasan tentang metode The Elements of User Experience. Terima kasih banyak sudah menyimak dan semoga bermanfaat! 😁

--

--

Nanda Brilianto

Interested in Human Computer Interaction (HCI) and User Experience (UX) research