5 Elemen User Experience Design, Studi case: website Institut Teknologi Del
Pada artikel User Experience Design (UX Design), saya telah menjabarkan 5 elemen User Experience Design. Pada artikel ini, saya akan menjelaskan kelima elemen tersebut dengan studi kasus website Institut Teknologi Del dan nantinya akan dibandingkan dengan website 2 universitas dalam negeri dan 2 universitas luar negeri.
Sebelum membahas studi kasus, Bagaimana sih ke-5 elemen User Experience itu?
Didalam buku “The Elements of User Experience: User-Centered Design for the Web and Beyond, Second Edition”, Jesse James Garret menjelaskan bahwa User Experience dibagi menjadi 5 elemen, antara lain:
- Strategy Plane
Layer Strategy bukan hanya membahas Apa yang ingin dijalankan pengguna pada situs itu melainkan Apa keluaran yang diinginkan pengguna dari situs tersebut. Elemen ini berfokus pada “who build it” dengan kata lain adalah Product Objectives, dan “who use it?” dengan kata lain adalah User Needs. Product Objectives yang berupa Business goals, Brand identity, Success metrics, dan User Needs yang berupa User segmentation, Usability and user research (Contextual inquiry, User testing), Creating personas, merupakan tujuan dari elemen startegy ini.
2. Scope Plane
Layer Scope ditentukan secara fundamental dari strategy yang dibuat untuk situs yang dibuat. Strategy akan menjadi scope ketika kita menarik kesimpulan dari product objectives dan user need. Pada plane ini, kita menentukan Functional Spesification dan Content Requirements. Fungsi yang dimaksud adalah fitur yang dibutuhkan oleh pengguna untuk mencapai tujuan. Sedangkan Konten yang dimaksud adalah informasi yang kita butuhkan untuk menyampaikan sesuatu yang bernilai. Fitur dalam hal ini bagaikan memiliki pemutar media untuk lagu, sedangkan kontennya adalah file audio dari lagu-lagu tersebut.
3. Structure Plane
Layer Structure akan menentukan bagaimana pengguna akan sampai pada halaman tertentu, dan halaman apa yang dapat dijangkau pengguna setelah selesai dari halaman tersebut. Struktur akan menentukan kategori dari suatu halaman. Structure plane mencakup Interaction Design dan Information Architecture.
Interaction desain merupakan interaksi dua arah antara pengguna dengan produk. Hal ini mencakup bagaimana respon produk/layanan ketika pengguna melakukan tindakan tertentu pada suatu halaman. Sedangkan Information Architecture berkaitan dengan bagaimana pengguna memproses informasi yang terdapat dalam produk/layanan kita.
4. Skeleton Plane
Layer Skeleton merupakan eskpresi konkret dari struktur situs yang lebih abstrak. Skeleton dirancang untuk mengoptimalkan pengaturan elemen-elemen halaman untuk efek yang maksimum dan efisien sehingga pengguna dapat mengingat logo dan dapat menemukan tombol keranjang belanja saat pengguna membutuhkannya. Skeleton terdiri dari 3 komponen, antara lain: Interface Design, Navigation Design, dan Information Design.
Interface Design menyajikan dan mengatur antarmuka untuk memungkinkan pengguna berinteraksi dengan fungsionalitas sistem. Navigation Design mengenai bagaimana cara menavigasi informasi menggunakan antarmuka. Dan Information Design mendefiinisikan penyajian informasi dengan cara yang memfasilitasi pemahaman pengguna.
Setelah ketiga komponen tersebut, langkah selanjutnya adalah membuat wireframe sesuai dengan ketiga komponen tersebut.
5. Surface Plane
Layer Surface berkaitan dengan perancangan sensory design. Sensory Design berkaitan dengan panca indera manusia yang mencakup bagaimana melihat, mendengar, menyentuh, mencium, dan merasakan. Pada layer ini, UX Designer berkoordinasi dengan UI Designer dalam bertanggung jawab untuk memastikan hasil visualisasi desain sesuai dengan yang diinginkan. Hal yang perlu diperhatikan pada layer ini antara lain:
Follow the Eye à Bagaimana pengguna memmbaca suatu halaman (Z pattern/F pattern).
Contrast à Contrast yang sesuai dapat membantu mengkomunikasikan informasi utama kepada pengguna dan membuat perhatian lebih pada daerah tertentu.
Consistency, Color Palletes, Typography, Style Guide juga merupakan hal yang tidak dapat diabaikan pada Layer ini.
Nah, kelima elemen sudah saya jabarkan, sekarang kita beralih ke studi kasus.
Studi Kasus Web Institut Teknologi Del
Institut Teknologi Del merupakan institusi dalam bidang pendidikan yang bertempat di desa Sitoluama, Laguboti, Toba Samosir, Sumatera Utara, Indonesia. Bagaimana elemen-elemen User Experience diterapkan pada website Institut Teknologi Del?
1. Strategy
Product Objectives: Menyampaikan informasi tentang Del kepada pengguna melalui fitur-fitur yang diberikan.
Pengguna: Masyarakat, calon mahasiswa.
Informasi yang disampaikan antara lain: brand/motto Del (MarTuhan, Marroha, dan Marbisuk), Tentang Del, program pendidikan, sivitas, prestasi, regulasi, lembaga, fasilitas, komunitas, dan karir.
Berdasarkan analisis strategy, informasi yang diberikan sudah mencakup user needs. Namun, informasi yang disampaikan terlalu banyak dan beberapa informasi tidak cukup urgensi untuk disampaikan dalam website. Contohnya seperti statuta. Dan informasi prestasi seharusnya dilengkapi dengan informasi Research yang ada pada Institut Teknologi Del.
2. Scope
Berdasarkan product objectives, scope dari website Institut Teknologi Del adalah informasi tentang Del sampai kepada Karir. Fungsi yang disediakan cukup memenuhi kebutuhan pengguna untuk memperoleh informasi.
3. Structure
Struktur website Institut Teknologi Del adalah Hierarchical (level 0 sampai level 3). Namun, pada penyusunan menu dan sub menu, beberapa menu tidak tepat penempatannya. Seperti Testimonial yang merupakan hal yang tidak kalah penting jika diletakkan pada menu level 1. Submenu penerimaan mahasiswa baru seharusnya dibuat dalam level 1, dan langsung dialihkan ke web penerimaan mahasiswa baru yang memang merupakan web khusu untuk penerimaan mahasiswa baru yang sudah dimiliki Institut Teknologi Del.
4. Skeleton
Navigasi untuk menu level 1 dalam website Institut Teknologi Del sudah diberikan. Namun masih terdapat bug pada halaman Home yang juga menyoroti menu regulasi (dapat dilihat pada gambar).
Dan pada saat pengguna berada di menu level 2 dan level 3, navigasi tidak diberikan. Seperti pada gambar dibawah ini, yang merupakan potongan cuplikan menu fakta dan angka yang ada pada menu tentang del.
Namun, website Institut Teknologi Del yang memiliki struktur hierarchical seharusnya menyediakan breadcrumbs yang akan membantu pengguna dalam mengetahui keberadaanya pada website.
5. Surface
Website Institut Teknologi Del menggunakan F-pattern, dikarenakan website merupakan website yang menyampaikan informasi dan sedikit membutuhkan aksi dari pengguna. Hal tersebut dapat dilihat dalam peletakan konten pada halaman website. Pengumuman menjadi hal yang sangat ditonjolkan.
Sekarang, kita membahas perbandingannya dengan website universitas lain.
Homepage: Berfokus pada berita hari ini, informasi publik, infografis, penerimaan mahasiswa baru, kemitraan dan hubungan internasional,
Target audiens: Masyarakat dan calon mahasiswa.
Scope pada website: Website diperuntukkan untuk menyampaikan informasi.
Struktur fungsi/fitur: website menggunakan dropdown menu list sampai level 3. Website juga menyediakan fitur berita, video, kalender, kontak, pencarian,
Struktur informasi: website mengurutkan informasi dari tingkat kepentingannya mulai dari yang terpenting.
Navigasi: Tidak menyediakan navigasi sehingga membuat pengguna bingung posisi halaman yang sedang diakses.
Homepage: Berfokus pada kegiatan universitas, recognition institusi, informasi terkait universitas, knowledge yang dapat diakses pengunjung, dan penghargaan yang telah diperoleh universitas.
Target audiens: Calon mahasiswa, masyarakat, dan mahasiswa.
Scope pada website: Website diperuntukkan untuk menyampaikan Informasi terkait universitas
Struktur fungsi/fitur: Website menyediakan fitur berita, iklan, kontak, pencarian, sosial media.
Struktur informasi: Menggunakan gambar dan video
3. Delf Institute of Technology (TU Delft)
Homepage: Berfokus pada penyajian informasi penelitian yang dilakukan universitas.
Target audiens: calon mahasiswa dan mahasiswa lain yang ingin mengetahui tentang penelitian yang dilakukan.
Scope pada website: Informasi yang disajikan terkait penelitian dan akademis.
4. Berkeley University of California
Homepage: Berfokus pada bidang akademis universitas, event, penghargaan dan berita
Target audiens: Calon mahasiswa
Scope pada website: Informasi yang disajikan terkait penelitian dan akademis.
Struktur fungsi/fitur: Fitur pencarian, sosial media, kontak.
Struktur informasi: Informasi yang disajikan menggunakan menu level 1
Referensi
[1] Jesse James Garrett. 2011. “The Elements of User Experience: User-Centered Design for the Web and Beyond, Second Edition”. Berkeley: New Riders1249.
[2] Institut Teknologi Del https://www.del.ac.id/
[3] Institut Teknologi Bandung https://www.itb.ac.id/
[4] Universitas Bina Nusantara https://binus.ac.id/
[5] Delf Institute of Technology (TU Delft) https://www.tudelft.nl/en/
[6] Berkeley University of California https://www.berkeley.edu/
