独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Heuristic Evaluation in Del Institute of Technology Website

Tahap 1 : Evaluasi Website IT Del

1.1 Heuristic Evaluation

Tahap 2 : Eksplorasi dan Analisis

2.1 User Flow

2.1.1 Website Universitas Luar Negeri

2.1.2 Website Universitas Dalam Negeri

2.2 Task Flow

2.2.1 Website Universitas Luar Negeri

2.2.2 Website Universitas Dalam Negeri

2.3 Arsitektur Informasi

2.3.1 Website Universitas Luar Negeri

2.3.2 Website Universitas Dalam Negeri

Tahap 3: Merancang Ulang Website IT Del

3.1 Daftar Masalah

3.1 Deskripsi

3.2 Rancangan UI

3.2.1 Tentang Del

3.2.2 Program Pendidikan

Usability Testing

Selamat datang kembali di artikel saya, kali ini saya akan membahas proses evaluasi yang saya lakukan terhadap website IT Del berdasarkan konsep usability guideline Pada 10 Heuristics oleh Jakob Nielsen.

Heuristic Evaluation (evaluasi heuristik) adalah metode penilaian kegunaan suatu produk digital yang bertujuan untuk memperbagus user experience. Proses ini dilakukan oleh ahli/evaluator UI/UX dengan upaya mendeteksi masalah yang ada pada fungsionalitas produk.

Sebelum memulai evaluasi diperlukan Pengenalan strukur Information Architecture pada website IT Del. Information Architecture (IA) adalah ide untuk menyusun struktur pada sekelompok informasi yang dimiliki sebuah website. Struktur Information Architecture menggambarkan bagaimana konten diatur dalam sebuah website. Salah satu penggunaannya adalah Site Map. Site Map akan memberikan gambaran umum tentang navigasi website dan dalam beberapa kasus akan menampilkan semua koneksi yang dimiliki setiap halaman. Site Map membantu mengidentifikasi struktur website dan aplikasi yang menunjukkan hirarki yang memungkinkan user untuk memahami di mana dia dapat menemukan konten yang dicari.

Berdasarkan sitemap yang terdapat pada gambar 1, susunan Site Map website IT Del berbentuk deep. Hal ini dapat dilihat dari banyaknya submenu yang akan di klik user ketika mencapai suatu halaman yang ingin ditujunya. Dalam Site Map terdapat berbagai tindakan yang dapat dilalui user pada bagian-bagian website yang disebut dengan Task Flow. Task flow menggambarkan koneksi ke status error, konten, atau tampilan halaman selama aktivitas user dalam website berlangsung. Saat digunakan bersama-sama, Site Map dan Task Flow dapat memberi gambaran yang jelas bagi user terkait dengan struktur konten dan bagaimana user dapat menavigasi prosesnya. Tools yang digunakan dalam membuat Site Map dan Task Flow Website IT Del ini adalah Microsoft Visio.

Berikut merupakan elemen dasar yang digunakan dalam pembuatan Site Map, Task Flow dan User Flow pada website IT Del.

a) Page

Page (halaman) adalah unit dasar dari User Experience pada website. Page pada Site Map diberikan penomoran page untuk setiap halaman yang terdapat dalam website IT Del

b) Decision Point

Decision Point digunakan untuk menunjukkan jalur yang bisa ditempuh user, bergantung pada jawaban atas satu pertanyaan. Jawaban untuk pertanyaan itu akan menentukan halaman mana (atau tampilan konten) yang akan ditampilkan.

c) Connector dan Arrow

Connector (penghubung) dan Arrow (panah) digunakan untuk menunjukkan gerakan atau progres antar page, pagestack, decision point, dan sebagainya. Berikut merupakan contoh penggunaan connector pada page.

Berikut merupakan salah satu task flow dan user flow ketika user mengakses halaman visi dan misi pada website IT Del.

Dalam task flow yang terdapat dalam gambar 2, untuk menuju halaman visi dan misi maka user perlu mencari menu tentang del dan memilih sub menu visi dan misi. Tampilan visi misi akan muncul. Terdapat beberapa langkah yang dilakukan user pada task flow yang terdapat dalam gambar 2. Berikut merupakan user flow yang terjadi ketika user mengakses halaman visi misi.

Pertama, user sudah berada dihalaman Home website IT Del, dan memilih sub menu visi dan misi pada menu Tentang Del. Apabila tidak ditemukan, maka user kembali mecari pada setiap sub menu yang tedapat pada menu bar. Setelah sum menu visi misi ditemukan, maka user akan melihat tampilan visi misi IT Del. Berikut merupakan gambar task flow yang dilakukan ketika user menuju halaman pendaftaran mahasiswa baru.

Selain task flow untuk megakses halaman visi dan misi, task flow yang terdapat pada gambar 21 merupakan salah satu task flow yang dilakukan user saat mengakses halaman informasi pendaftaran mahasiswa. Ketika user tersebut berada pada halaman daftar program pendidikan. Tentu saja, task yang dilakukan user cukup panjang dikarenakan website IT Del tidak menerapkan indeks atau breadcrumbs yang mempercepat akses user menuju halaman tertentu. Berikut merupakan beberapa langkah yang dilakukan user pada task flow yang terdapat dalam gambar 7.

Ketika user berada di halaman program pendidikan, dan ingin kembali ke tampilan Home untuk mencari informasi pendaftaran mahasiswa baru, maka user perlu mengakses tampilan Home dan melakukan scroll kebagian bawah halaman Home untuk menemukan informasi pendaftaran. Dikarenakan user tidak tahu posisi halaman aktif, maka user kemungkinan akan mengakses websitenya kembali atau mencari menu Home pada bagian header website. Langkah yang dilakukan user ini cukup memakan waktu, sehingga diperlukan adanya indeks dan penambahan breadcrumbs pada website IT Del.

Setelah pengenalan information architecture, task flow, dan user flow dilakukan, maka proses evaluasi dapat dimulai. Proses evaluasi yang saya lakukan terhadap website IT Del berdasarkan konsep usability guideline Pada 10 Heuristics oleh Jakob Nielsen. Heuristic Evaluation (evaluasi heuristik) adalah metode penilaian kegunaan suatu produk digital yang bertujuan untuk memperbagus user experience. Proses ini dilakukan oleh ahli/evaluator UI/UX dengan upaya mendeteksi masalah yang ada pada fungsionalitas produk. Berikut adalah beberapa evaluasi yang saya peroleh dalam studi kasus website IT Del.

Berikut beberapa masalah yang ditemukan dalam website IT Del berdasarkan heuristic evaluation Jacob Nielsen. Urutan masalah berikut dimulai dari heuristic evaluation yang direkomendasikan untuk perbaikan dalam setiap masalah.

1. Visibility of System Status

Suatu kondisi yang mampu memberikan informasi yang terjadi pada user baik yang sedang dilakukan, sedang dibagian apa dan apa yang terjadi dalam website IT Del. Salah satu contohnya adalah penggunaan breadcrumbs.

Ketika mengkases salah satu halaman dalam website IT Del, pada bagian menu bar tidak menampilkan posisi halaman user saat ini. Hal ini memungkinkan user tersesat dalam websitenya.

2. Match Between System and The Real World

Sistem haruslah mempu memberikan informasi yang mudah dipahami seperti bahasa sehari-hari. Untuk memberikan kesan keakraban dan kepercayaan bagi user. Dalam Website IT Del terdapat beberapa menu yang tidak menggambarkan isinya sesuai dengan yang dipikirkan user sebelum mengklik menu tersebut.

Contohnya terdapat dalam menu Regulasi dan Sivitas. Dalam pemikiran orang awam, menu sivitas merupakan bagian dari institusi seperti dosen, mahasiswa, dan orangtua. Namun, ketika diakses ternyata dalam sub menunya terdapat Penerimaan Mahasiswa Baru yang bukan bagian dari sivitas. Sehingga perlu dipisahkan dari menu sivitas menjadi bagian menu yang lain atau menu utama. Karena informasi penerimaan sangat dibutuhkan oleh user yang mengakses website IT Del.

3. Aesthetic and Minimalist Design

Desain layout yang baik haruslah nyaman dipandang dengan menggunakan kontras warna yang baik, posisi yang sesuai dan serasi. Dengan desain yang minimalis dan dipadukan dengan whitespace (jarak antar elemen) yang sesuai akan membuat aplikasi terlihat elegan.

Berdasarkan tampilan halaman utama website IT Del pada gambar 11, terdapat banyak informasi berupa artikel yang cukup membuat user bingung untuk mendapatkan informasi yang dibutuhkan. Sehingga, perlu penyusunan berita untuk ditampilkan di menu utama website seperti informasi penerimaan mahasiswa, dan berbagai penelitian serta penghargaan kampus.

Tampilan user interface dari website IT Del masih kurang terstruktur dengan baik meskipun informasi yang diberikan cukup informatif dan sangat penting. Karena insight pertama yang dilihat adalah tampilan, sehingga perlu melakukan redesaign dengan tampilan website minimalis yang lebih responsive, menarik dan simpel . Susunan layout website IT Del sudah cukup baik namun masih terdapat beberapa whitespace yang terlihat kosong.

4. Consistency and Standard

Desain konsisten dan baik akan memudahkan bagi user dalam mengenal fitur agar tidak membuat user ragu-ragu saat menggunakan fitur tertentu. Hindari penggunaan informasi atau gambar yang berbeda namun memiliki makna yang sama.

Pada halaman Tentang Del Dalam website IT Del terdapat visi, misi, dan target mutu lulusan. Bagi orang yang masih baru mengakses halaman ini akan berpikir bahwa visi, misi dan mutu target lulusan merupakan sebuah link menuju ke halaman tertentu. Dan ternyata bukan sebuah link namun hanya teks biasa yang di underlined. Hal ini dapat membuat user bingung karena tidak sesuai dengan apa yang dipikirkannya. Tentunya, hal ini perlu diperbaiki menggunakan bentuk tulisan yang berbeda atau tanpa menggunakan underlined. Informasi ini perlu di redesign dengan mengubah ukuran font tulsian atau jenis font yang digunakan. Selain Halaman Tentang Del, terdapat juga beberapa halaman yang tidak dapat diakses. Salah satunya adalah link halaman sarjana informatika. Dalam halaman Program pendidikan sarjana informatika terdapat link menuju halaman studi informatika, namun link tersebut menampilkan pesan error seperti gambar berikut.

Hal ini tentunya menjadi masalah yang harus diperbaiki. Kemungkinan masalahnya adalah dibagian kode program yang tidak sesuai routingnya. Oleh karena itu, perlu dilakukan testing untuk setiap halaman yang terdapat dalam website. Hal ini bertujuan untuk memastikan semua halaman dan link dapat diakses oleh user. Berikut merupakan penilaian yang dilakukan berdasarkan severity rating untuk beberapa heuristic evaluation yang akan diperbaiki.

Severity Rating

0 = Bukan termasuk masalah usability

1 = Cosmetic problem: cukup mengganggu user, tapi tidak terlalu menyebabkan masalah pada proses penyelesaian task user. Perbaikan tidak terlalu dibutuhkan

2 = Minor usability problem: berpotensi menyebabkan user mengalami kesulitan dalam proses penyelesaian task. Dibutuhkan perbaikan, tingkat prioritas rendah

3 = Major usability problem: sangat penting untuk diperbaiki, tingkat prioritas tinggi

4 = Usabillity catasthrope: wajib diperbaiki sebelum dapat digunakan

10 Usability Heuristics

[1] Visibility of System Status

[2] Match Between System and The Real World

[3] User Control and Freedom

[4] Consistency and Standard

[5] Error Prevention

[6] Recognition Rather Than Recall

[7] Flexibility and Efficiency of Use

[8] Aesthetic and Minimalist Design

[9] Help Users Recognize, Diagnose, and Recovers from Errors

[10] Help and Documentation

Berikut merupakan beberapa rekomensai perbaikan dalam melakukan redesign tampilan website IT Del sehingga user yang mengakses dapat dengan lebih cepat untuk memperoleh informasi dan tidak tersesat ketika menjelajahi website. Rekomendasi perbaikan dimulai dari masalah utama hingga masalah yang cukup ringan untuk diperbaiki. Berikut adalah beberapa elemen dalam user interface yang perlu ditambahkan dalam website IT Del.

1. Penggunaan Breadcrumbs

Breadcrumbs menawarkan kepada pengguna situs web pilihannya, dalam bentuk tautan internal, untuk segera menemukan jalan mereka kembali ke beranda atau situs web lainnya. Dengan navigasi breadcrumb, pengguna dapat merekonstruksi halaman mana yang telah mereka kunjungi sebelumnya. Pada website IT Del, pengguna kemungkinan mengalami kebingungan (tersesat) dalam website ketika mengunjungi halaman tertentu dan kesulitan untuk kembali ke awal. Hal ini disebabkan karena tidak adanya navigasi breadcrumbs yang menginformasikan posisi user saat mengakses halaman tertentu.

2. Penggunaan Sitemap

Sitemap adalah informasi yang berisi mengenai URL-URL pada situs, seperti peta situs untuk pencarian menu utama dalam suatu website. Dalam website IT Del, perlu dilakukan penambahan sitemap untuk mempermudah pengunjung untuk menuju ke halaman tertentu melalui indeks websitenya.

3. Penggunaan Footer

Website IT Del sudah mempunya footer, namun terdapat beberapa simbol yang tidak terlalu diperlukan karena simbol yang diberikan tidak dapat diakses. Sehingga dapat digantikan dengan penambahan menu bar pada bagian footer untuk mempercepat akses ke menu selanjutnya, tanpa kembali ke halaman Home.

4. Susunan Menu dan Konten

Menu bar pada website IT Del terlalu banyak, sehingga perlu dilakukan minimalisasi agar tidak terlalu panjang dan membingungkan pengunjung website. Penyusunan struktur menunya juga perlu diperbaiki sesuai dengan tingkat hierarkikalnya, yang dimulai dari informasi paling umum yang dibutuhkan oleh user hingga informasi yang terkait dengan Kampus IT Del.

5. Penambahan Logo

Diperlukan Penambahan Logo pada website IT Del pada tampilan utama website. Sebuah logo akan mendeskripsikan gambaran kampus yang membantu user untuk mengingat dan mengenal kampus IT Del.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

Add a comment

What is your view?

Send

Related posts:

Runaway Zebra

I was running late for an appointment. As much as I despise it, I had to use the highway to make it on time. The scariest part of the highway for me is entering and exiting. This day I pushed past my…

Satellites and iPads

At the end of the last millennium, a special investment fund was established. It investments give a perfect insight in the world of tomorrow.

LIVING SIMPLE

Living a simple life is all about enjoying the very good things that makes life comfortable and less cluttered. A simple life is such, that is not overwhelmed by the pressure, to meet up with the…