Human Computer Interaction Redesign UI(User Interface) Cinepolis Indonesia


Perkenalkan kami dari kelompok 6 sebagaimana tertera nama kelompok di bawah ini

Nama Kelompok:

  • Calvin Surya NIM: 2201744834

  • Jason Timotius Purwoko NIM: 2201746612

  • Aeron Mitchell NIM: 2201752691


Link dari laporan: Link Laporan

Link dari presentasi: Link Presentasi


Kami merupakan mahasiswa Binus University semester 4 jurusan Teknik Informatika, dimana pada blog ini akan memberikan laporan akhir dari mata kuliah Human Computer Interaction, yang sebagaimana hasil dari laporan akan kami tulis dibawah ini.

Metodologi

Kami menentukan applikasi yang akan kami teliti, yaitu applikasi android yang bernama Cinepolis Indonesia.

Kami menggunakan metode yaitu dengan 10 usability heuristics jakob nielsen.

10 Usabillity Heuristic:

1. Visibility Of System Status
2. Match Between Systems 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 recover from errors
10. Help and documentation

Hasil Analisis

Berikut merupakan hasil evaluasi kami berdasarkan indikator evaluasi yang diberikan diatas:


  1. Visibility of System Status

Navigation bar terlihat bahwa kita ada di tab home karena tulisan nya di bolt tetapi sayangnya icon home tersebut tidak di bolt sehingga kesan tab yang dibuka berkurang, terdapat tulisan see all yang terlalu jauh, see All disini bisa dimaksudkan buat tab di atas(gambar) ataupun tab yang ada di bawah (pesan).







  1. Match between system and the real world

Dikarenakan adanya kondisi corona sekarang ini hampir seluruh bioskop di Indonesia dipaksa untuk memberhentikan pemutaran film untuk mengurangi dampak corona yang terjadi.

Tampilan awal di atas menandakan bahwa semua bioskop cinepolis diatas berhenti beroperasi, sayangnya tulisan ini hanya terlihat sekilas saat kita membuat aplikasi tersebut.

Sedangkan tampilan movies, disini kosong menyebabkan orang bingung, lebih baik jika kita masih bisa melihat movies seperti sinopsis dan trailer ataupun gambar walaupun memang tidak ada movies yang ingin ditampilkan karena jika tidak ditampilkan movies esensi penggunaan aplikasi ini hilang. Contohnya memperlihatkan trailer film terkini secara actual walaupun tidak bisa ditonton di bioskop tetapi membuat user tetap menggunakan aplikasi yang diberikan (mempunyai value yaitu informasi film).

  1. User control and freedom

Fitur undo, sudah ada di dalam aplikasi tersebut dan kita bisa dengan bebas mengganti tab ke tab navigation bar manapun dan juga sehingga tidak ada user control yang akan dievaluasi 

  1. Consistency and Standard

Konsistensi di aplikasi masih kurang bisa diterapkan dengan baik. Terlihat dengan fitur customization yang diberikan.

Walaupun kita menggunakan themes yang ketiga tetapi tanda centang berada di themes pertama yang menyebabkan ambuigitas didalam aplikasi tersebut.

hanya terganti di profil hanya saja profile name ketika kita menekan tombol save jika kita mengisi gender misalnya male tidak akan ditampilkan di profil. Hal ini harus dievaluasi karena untuk apa profil dihalaman pertama jika hanya mengandung nama kita saja.







  1. Error prevention

Tidak ada error prevention sebagai contohnya di birthdate kita bisa menulis tanggal hari ini yang padahal tidak boleh, dan juga  tombol save di atas tidak akan mengubah tampilan di profil yang 

Ketika terjadi error gunakan pesan yang user mudah mengerti , memberi tahu mengapa error itu terjadi, dan memberikan solusi sehingga user dapat menyelesaikan masalah tersebut.


  1. Recognition rather than recall

Terlihat dari navigation bar di atas bahwa home, movies, booking, inbox, dan profile di atas sudah memiliki gambar sebagai recognitionnya sayangnya gambar-gambar tersebut kurang untuk merepresentasikan karena sulit untuk dilihat karena opacitynya yang terlalu kecil. Serta tidak ada bolt di gambar ketika kita berada di page tersebut.




  1. Flexibility and efficiency to use

Aplikasi ini kurang mendukung efisiensi dalam penggunaannya terlihat dalam tab inbox yang tidak diketahui untuk apa fitur tersebut digunakan. Contohnya dibawah walaupun kita telah mengisi profil kita di tab profile, tampilan inbox tidak berubah-ubah maupun memberikan notifikasi untuk apa tab tersebut digunakan.



 Di tab movies, pun tidak ada list movies yang diberikan sehingga tidak ada value. Seharusnya walaupun tidak ada pemutaran film di bioskop masih ada sinopsis film agar pengguna tetap menggunakan aplikasi.



  1. Aesthetic and minimalist design

Desain dari aplikasi ini menurut kami sudah minimalist dan sangat menarik tetapi sayangnya user experience diberikan belum maksimal. Tidak ada yang dievaluasi dari segi pemilihan warna, font dan juga border.



  1. Help users recognize, diagnose, and recover from errors.

Dalam hal error tidak ada yang bisa dievaluasikan karena banyak sekali function seperti pemesanan tiket yang biasanya seringkali error tidak bisa disajikan dikarenakan pandemi corona yang berlangsung di Indonesia.


  1. Help and Documentation

Tidak ada bantuan dalam cara penggunaan aplikasi ini seperti FAQ ataupun guide panduan awal untuk user yang pertama kali menggunakan aplikasi ini, sehingga lebih baik lagi jika terdapat FAQ atau guideline untuk menggunakan aplikasi sebagai contohnya guide untuk membeli tiket, untuk melihat film dan lain-lain.



Hasil Penelitian dan Pembahasan

-        Use Case

Usecase yang dibuat secara garis besar sama dengan aplikasi cinepolisnya yang sedang beredar saat ini. Namun terdapat perbedaan seperti pada use case open help dan report bug adalah use case yang tidak berada pada aplikasi cinepolis yang tidak memenuhi kriteria jacob nielson, oleh karena itu dua use case tersebut kami tambahkan.


  • Home Page

Original

Di original, Cinepolis mempunyai User Interface di bagian homepage sebagaimana tertera diatas, terdapat celah / gap yang sangat besar antara “Welcome Back” dan See All dan juga dapat dilihat ada news di bawah (di atas taskbar), namun terpotong sangat besar sehingga kurang terlihat oleh user, dan juga perbedaan jarak yang sangat besar antara tulisan See All dengan news yang ada sehingga membuat tulisan See All tersebut menjadi ambigu (dikarenakan See All tersebut untuk apa), lalu icon taskbar yang dipilih tidak ditebalkan sehingga membuat agak sulit dilihat taskbar apa yang sedang dipilih.

Modified

Di modification, kami menambahkan banner di celah antara “Welcome Back” dengan “See All News”, banner movie yang akan datang atau yang sedang tayang, dan juga kami mengecilkan jarak antara “See All News” dengan news yang ada, untuk tidak membuat User Interface tersebut menjadi “kosong”, lalu kami juga menebalkan icon pada taskbar yang sedang dipilih.




















  • Profile Page

Original

Pada tab Profile, seperti sebelumnya di Home Page, Icon pada taskbar yang dipilih tidak ditebalkan, sehingga mengurangi visibility dari user, lalu dapat dilihat di kotak profil bahwa walaupun tema yang digunakan merupakan abu abu namun profil tersebut tetap menggunakan warna biru, sehingga terjadi perbedaan dalam suatu tema (inkonsistensi). Lalu hanya ada nama dari user, sehingga terlihat kurang powerful dalam memberikan informasi kepada user.

Modified


Kami merubah card tersebut sesuai dengan tema yang digunakan, lalu menebalkan profile tab yang ada, setelah itu menambahkan informasi-informasi pada Profil, sehingga tujuan dari Profil tersebut dapat dimengerti dengan baik oleh user, dan juga kami menambahkan feature Help untuk membantu para pengguna baru / new user dalam menggunakan aplikasi ini.

Help


Help yang dibuat merupakan QA (Question and Answer) dimana ada pertanyaan mengenai cara penggunaan dari aplikasi tersebut dan feature yang terdapat di dalam aplikasi tersebut, dan Answer merupakan jawaban dari pertanyaan yang diberikan, secara detail dan jelas.

  • Movies Page

Original


Didalam tab Movies hanya menampilkan film yang ditampilkan di dalam cinema pada saat ini juga, namun dikarenakan kondisi seperti ini, dimana film tidak mungkin ditampilkan secara langsung di cinema, maka tab ini kehilangan esensi / nilai / valuenya.

Modified

Kami menambahkan list movie yang sudah pasti tayang nanti seperti dua film diatas yang akan ditayangkan di kedepannya. Lalu kami juga menambahkan details dari film yang ditampilkan.

Detail List


Kami menampilkan judul film, detail film, sinopsis dari film dan juga trailer video.














  • Inbox Page

Original

Inbox di dalam aplikasi ini hanya untuk melihat pesan yang diberikan, sehingga feature inbox kurang digunakan oleh user, dan juga icon di dalam taskbar kurang ditebalkan sehingga mengurangi unsur visibility pada taskbar.





Modified

 

Dikarenakan original app inbox hanya untuk menerima pesan masuk, disini juga ada feature untuk Report Bug, dimana ketika ada user mengalami Bug (Kesalahan) pada program maka tinggal mengklik tombol tersebut.


Report Bug

Setelah menekan tombol Report Bug, maka akan keluar form dimana user menulis kendala / Bug apa yang dialami oleh user, ketika user ingin kembali ke menu awal maka cukup menekan icon < diatas kiri, jika sudah mengisi maka, tekan tombol submit.



Confirmation Dialog

Confirmation Dialog akan muncul setelah user menekan tombol submit di Report Bug, ketika user mengklik tombol Tidak maka akan menampilkan kembali Report Bug tadi, ketika user mengklik tombol Ya maka akan mengalihkan tab ke tab inbox tadi.

Comments