Laporan Human Computer Interaction Redesign UI Cinepolis Indonesia

Demikian adalah laporan akhir dengan mata kuliah HCI dari kelompok kami kelompok 6

dengan nama anggota kelompok :

• Calvin Surya NIM: 2201744834

• Jason Timotius Purwoko NIM: 2201746612

• Aeron Mitchell NIM: 2201752691

Link untuk laporan : Link Laporan

Link untuk presentasi : Link Presentasi

Laporan Pribadi :

Dalam laporan akhir mata kuliah HCI ini UI/UX yang kami ingin benarkan adalah aplikasi mobile bernama Cinepolis Indonesia .

Dalam laporan ini kami menganalisa aplikasi Cinepolis Indonesia. Dari hasil analisa kami aplikasi Cinepolis Indonesia yang sudah ada kurang jika diukur dengan metode 10  usability heuristic yang dibuat oleh Jacob Nielsen dengan kemungkinan karena adanya pandemi yang sedang terjadi pada saat blog ini dibuat dan menyebabkan bioskop tidak dapat beroperasional dan tidak dapat menampilkan movie sehingga kami mencoba untuk memperbaiki UI/UX aplikasi tersebut dengan 10 metode dibuat oleh Jacob Nielsen yaitu :

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 Dari Evaluasi :

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).

2. 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 upcoming secara actual walaupun tidak bisa ditonton di bioskop tetapi membuat user tetap menggunakan aplikasi yang diberikan (mempunyai value yaitu informasi film).

3. 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 

4. 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.

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.

10. 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.

Analisa Dan Pembahasan

• 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. 

Cloud

PENGERTIAN

Secara umum, definisi cloud computing (komputasi awan) merupakan gabungan pemanfaatan teknologi komputer (komputasi) dalam suatu jaringan dengan pengembangan berbasis internet (awan)

Fungsi

Menjalankan program atau aplikasi melalui komputer – komputer yang terkoneksi pada waktu yang sama

Penerapan

Penerapan cloud computing banyak dilakukan di kegiatan sehari-hari kita Seperti
- Social Networking (Twitter,Line)
- Data Sharing (drive , github)
- Company Business

Model

Model yang bekerja pada cloud adalah:
Deployment model  yang dibagi menjadi:

    - Public cloud 
           Siapa saja dapat mengakses cloud sistem

    - Private cloud 
           Hanya pihak tertentu saja yang dapat mengakse cloud sistem misal dalam perusahaan terdapat             private cloud yang hanya dapat diakses pegawainya atau atasan yang bersangkutan.

    - Hybrid cloud 
           Gabungan antara public dan private cloud

Cloud memiliki 3 Service model  yaitu:

 - Software as a Service (SaaS) :  aplikasi terdapat di host cloud service dan penggunanya dapat  sesuka hati                                                           menggunakan aplikasi tersebut

 - Infrastructure as a Service (IaaS) : menyediakan resource dan infrastruktur seperti server atau storage

 - Platform as a Service (PaaS) : menyediakan alat pengembangan sebuah aplikasi

Keuntungan

Keuntungan yang didapat jika menggunakan cloud service

- biaya lebih murah

- bekerja nonstop atau 24 jam per hari

- storage yang hampir tak terhingga

- menaikkan performansi sebuah aplikasi dan server

Kerugian

Ada juga beberapa kekurangan yang didapat

- internet menentukan kelangsuan aplikasi jika internet bermasalah maka aplikasi juga bermasalah ,jika lambat maka aplikasi akan lambat dan seterusnya

- memperbatas fitur sebuah aplikasi

- data storage cloud bisa saja hilang dan bisa saja terancam diambil oleh saingan
    

Hubungan algo dengan cloud

Hubungan antara algoritma dengan cloud computing skearang dapat dilihat pada cloud yang umumnya dipakai sebagai datastorage pada beberapa aplikasi salah satunya adalah line.

Pada line terdapat sistem yang dinamakan timeline dimana kita dapat memposting sesuatu dan postingan tersebut itu akan tersambung pada cloud dan disimpan sebagai posting kita.

Lalu dalam sistem dalam si linenya akan memostingkan timeline tersebut kepada orang tertentu di line disebutnya friend untuk melihat postingan kita

Pointer dan Array

POINTER

Pointer merupakan sebuah variabel yang digunakan untuk menyimpan data alamat suatu variabel lain
Cara penulisan deklarasinya seperti ini :
 <var_name> *ptr_name;

Dalam pointer kita memakai 2 operator berikut :
 & : untuk menampilkan alamat dari variabel
  * : untuk menampilkan konten dari variabel
contoh:

int a=1;

int *ptr=&a;

ptr sama dengan alamat si a;

*ptr sama dengan isi si a =1.

POINTER TO POINTER
Pointer to pointer adalah variabel pointer yang gunanya untuk menyimpan alamat dari pointer lain dengan menambahakan bintang ke variabel tersebut misal :*ptr,**ptr_ptr,***ptr_ptr_ptr

Penentuan jumlah '*' sesuai kebutuhan.
Jika pointer ptr_ptr menunjuk pointer ptr saja maka jumlah '*' untuk pointer A = 2
Jika pointer ptr_ptr_ptr menunjuk pointer ptr_ptr yang menunjuk pointer ptr maka jumlah '*' untuk pointer A = 3

Contoh penggunaannya :
int nilai=5;
int *ptr;
int **ptr_ptr;
int ***ptr_ptr2;

ptr_ptr2 itu berisi alamat ptr_ptr

*ptr_ptr2 itu berisi alamat ptr

**ptr_ptr2 itu berisi alamt nilai

***ptr_ptr2 itu berisi nilai=5

ARRAY
Array merupakan kumpulan data berurutan yang bertipe sama
Cara penulisannya seperti ini :
      <var_type>array_name[index];

indx adalah tempat kita ingin berapa macam data sesuai var_type.
Jika ingin menyediakan slot untuk 10 integer maka,
contoh penulisannya seperti ini :
      int a [10];

maka didalam int a dapat diisi 10 variabel int yang dimulai dalri index 0 sampai 9

untuk pengisian nilai dalam array tinggal dilakukan seperti ini:
contohnya kita ingin meletakkan angka 1 pada slot pertama yaitu index 0
maka penulisannya seperti berikut:
     a [0] = 1;

maka pada index ke 0 pada array a berisi angka 1

jika ingin memanggil slot 1 pada array maka tinggal dilakukan seperti berikut:
     printf ("%d", a [0] );
kita perlu mengisi kurung siku dengan index slot yang ingin kita panggil
kurung siku tersebut disebut juga dengan tempat mengisi dimensional value

terkecuali string atau array of char yang bisa tidak membutuhkan kurung siku.

Dalam array terdapat juga pointer .Namun pointer di array bersifat tetap atau constant sehingga kita hanya bisa memanggil alamat pada array tersebut dan tidak bisa mengubahnya

kita dapat juga menginisialisasi array langsung dengan isi-isinya seperti berikut:
kita dapat menginisialisasi tanpa mengisi index value yang akan otomatis menghitung jumlah index kita:
     int arr [ ] = {1,2,3,4,5};
kita juga dapat menginisialisasi dengan index value:
     int arr [6] = {1,2,3,4,5};

perlu diketahui jika kita menginialisasi isi array yang lebih dikit dari index value kita akan menyebabkan run time error,tetapi kadang-kadang tidak sehingga disarankan untuk untuk tidak dilakukan.

ARRAY 2 DIMENSI
syntaxnya sebagai berikut:
      <var_type> array_name [row][col];
contoh penulisannya seperti ini :
      int a [4][4];
jumlah barisnya 4 dan jumlah kolomnya 4
jadi kalau digambarkan  akan seperti ini:

          col 1   col 2   col 3   col 4
row 1  |__|     |__|     |__|     |__|
row 2  |__|     |__|     |__|     |__|
row 3  |__|     |__|     |__|     |__|
row 4  |__|     |__|     |__|     |__|

ketika kita ingin memanggil nilai yang ada pada kolom tertentudan baris tertetu maka tinggal menulis seperti ini:
      printf ("%d", a [baris][colom]);

untuk inisialisasi array 2 dimensi dapat ditulis sebagai berikut:
int a [2][2] = { 1,2,3,4 };

maka akan berisi dari row 0 dan col 0 sampe ke row 0 col 1dan dilanjutkan ke row 1 col 0 sampe ke row 1 col 1
ataupun kalo ingin rapi seperti ini,
int array_name [2][2] = { (1,2), (3,4) };

Selain itu ada juga array 3 dimensi, seperti 2 dimensi hanya saja ada dimensi tambahan yaitu kedalamannya
contoh:
      int arr[2][2][2];
maka deklarasinya akan terlihat seperti ini:
      int arr[2][2][2] = {(1,2),(3,4),(5,6),(7,8)};


ada library yang menyediakan function untuk memanipulasi string atau array of character dan ini tidak berlaku pada int maupun char.
nama headernya : string.h
beberapa nama fungsinya sebagai berikut :
- strlen()               : return nilai yang isinya panjang string
- strcpy (s1,s2)     : menyalin s2 ke s1
- strcpy (s1,s2,n)  : menyalin n karakter dari pertama dari s2 ke s1
- strcat (s1,s2)      : menambahkan s2 ke akhir dari s1
- strcat (s1,s2,n)   : menambahkan n karakter s2 ke akhir dari s1
- strcmp (s1,s2)    : mengcompare nilai dari string 1 dan string 2, jika sama maka return 0

LOOPING BAHASA C

Dalam koding, looping/repetisi salah satu operasi penting dalam semua bahasa yang seringkali dipakai untuk mempermudah suatu pengerjaan yang membutuhkan pengulangan.

Seperti saat seseorang ingin print kata 'hello world' sebanyak 10000 kali.

Tidak mungkin kalau seseorang membuat 10000 baris berisi 'hello world' tentu akan membuat seseorang lelah.

Untuk itu, kita perlu memakai looping untuk memudahkannya ,karena dengan looping kita hanya perlu sedikit baris .

Dalam bahasa C, looping/repetisi pada umunya dibagi 3 yaitu FOR ,WHILE,dan DO.. WHILE dalam ketiga looping tersebut juga ad fungsi BREAK dan CONTINUE.

1. FOR

Syntax FOR pada umumnya adalah sebagai berikut:

           for ( inisialisasi ; kondisi ; increment/decrement ) 

           {

                     statement1;

                     statement2;

                     .....

           }

Bagian inisialisasi, kondisi, dan increment/decrement tersebut bersifat optional, artinya salah satu bisa dihilangkan (sesuai kebutuhan). dan di bagian increment/decrement tidak selalu increment /decrement melainkan fungsi matematika lainnya seperti kali bagi maupun modulus.

pada for expresi inisialisasi,konidisi maupun increment decrement dapat lebih dari 1 ekspresi akan tetapi harus dipisahkan dengan koma. Contohnya :

   

           int i, j;

           for ( i=10, j=0 ; i > j ; i--, j++ )

2. WHILE

Format WHILE adalah sebagai berikut:

            while ( kondisi ) {

                      statement;

             }

Pada WHILE dia akan mengecek apakah kondisinya TRUE /FALSE jika TRUE maka akan dijalankan statement tersebut sedangkan jika FALSE tidak

Contoh dari looping menggunakan WHILE untuk menampilkan angka 1 sampai 5

             int i = 1;              

             while ( i <= 3 ){

                       printf ("%d", i ); // Output : 123

                       i++;

             }

3. DO.. WHILE

Format DO.. WHILE adalah sebagai berikut:

             do {

                     statement1;

                     statement2;

                     ....

             }

             while ( kondisi);

DO..WHILE sekilas sama dengan WHILE ,namun memiliki perbedaan yaitu DO..WHILE menjalankan statement dulu baru mengecek jika kondisi benar apa salah/TRUE or FALSE.

Contoh dari DO.. WHILE sebagai berikut :

             int i = 0;               

             do {

                     printf ("%d" , i );  // Output : 0

                     i++;

             }

             while ( i < 0 );

4.BREAK AND CONTINUE

Dalam loop, ada yang fungsi yang bernama BREAK dan CONTINUE. BREAK berfungsi untuk looping hanya berhenti pada situ saja dan keluar dari looping tersebut.Sedangkan CONTINUE melewatkan statement yang ada dibawahnya dan melanjutkan ke looping selanjutnya

Contoh BREAK :

            int i = 0;

            while ( i < 100 ) {

                      if ( i > 10 ) {

                             break;

                      }

                      printf("%d",i);

                      i++;

             }

        

Output diatas akan menghasilkan angka '0123...10' karena ketika looping i = 10 maka ia akan memasuki kondisi if ( i > 10 ) dan melakukan fungsi BREAK sehingga berhenti looping dan keluar dari looping

Contoh CONTINUE:

           int i;

           for ( i=1; i <= 10; i++) {

                           printf ("hai");

                           continue;

                           printf ("hello");

           }

Output diatas akan menampilkan kata 'hai' sebanyak 10 kali sedangkan hello tidak disebutkan sama sekali karena ada fungsi continue yang membuat statement mengrint 'hello' tidak dilaksanakan.


5. INFINITE LOOP AND NESTED LOOP

Dalam loop ada juga yang disebut infinite loop. Infinite loop merupakan proses looping yang tidak memiliki batas dikarenakan kondisi yang tidak memenuhi sehingga berulang selamnya .

Contoh:

          int i;

          for (i=0 ; i<0 ;i++ ) {

                    printf ("Kami");  // akan menampilkan "Kami" terus menerus

          }

Selain itu, ada yang namanya nested loop. Nested loop artinya loop di dalam loop. Loop yang didalam akan mengulang lebih dulu daripada loop yang diluar. Contohnya :

         int i,j;

         for ( i=1 ; i <=3 ; i++ ){

                    for ( j=1 ; j <= 5 ; j++ ){

                            printf ("%d", j );

                    }

                    printf (" %d " , i );

         }