Tugas 3 Implementasi User Experience Design_D3MI-39-02

PPT Tugas Implementasi User Experience Design ( 6 Kunci Interaction Design)

6 KUNCI INTERACTION DESIGN

Anggota Kelompok :

1. Dhea Widyana Putri
2. Fahsya Permana Putra
3. Fikri Harjo Yudhanto
4. Vivi Rizqia

1.      Visibility

Visibilitas menekankan menekankan kepada seluruh tombol maupun keterangan atau fitur dalam sebuah aplikasi yang jelas terlihat. Selain itu juga dalam pemberian icon atau keterangan sudah jelas.

Pada aplikasi game AOV, insteraksi desain visibility ini baik Karena seluruh tombol dan pemberian icon/keterangan jelas sehingga tidak membuat user kebingungan

2.      Feedback

Feedback menekankan kepada aplikasi untuk memberikan pengembalian atas dasar apa yang kita lakukan. Contoh ketika kita menekan tombol maka akan keluar bunyi dan lain sebagainya

Pada aplikasi yang kita teliti, feedback dari aplikasi terlihat sangat baik. Terdapat bunyi-bunyi yang disajikan tergantung tombol yang ditekan ataupun kejadian dalam aplikasi seperti berhasil membunuh dan mendapatkan item. Selain itu juga ketika karakter yang dimainkan user terbunuh maka handphone akan bergetar dan bersuara ‘you have been killed’.

3.      Constraint

Constraint memiliki arti batasan. Dalam key interaction terdapat tiga batasan yaitu logical, culture dan physical. Logical merupakan batasan yang bergantung pada logika seseorang. Culture berasal dari budaya atau kebiasaan dan physical batasan secara fisik.

Pada aplikasi yang kami teliti, constraint yang terdapat adalah :

                1.              Physical : untuk dapat memainkan game AOV dibutuhkan koneksi internet.

    2.              Logical : pada game AOV, untuk orang yang tidak biasa main game maka akan
                              kebingungan ketika melihat beberapa button. Contoh ketika   
                              berlangsungnya permainan muncul 2 button + disebelah kanan yang
                            tidak ada keterangan fungsinya.

               3.              Culture            : pada aplikasi yang diteliti, penggunaan icon seperti yang banyak  
                                                 orang sepakati secara tidak sadar/cultural. Contoh seperti tanda tanya                                                   untuk help, keranjang untuk belanja, kotak harta karun sebagai hadiah                                                    dan lain sebagainya.

4.      Mapping

Mapping memiliki arti pemetaan. Jadi pada prinsip ini pemetaan yang dimiliki oleh aplikasi harus rapih dan tidak menyulitkan user dalam penggunaannya (tidak menimbulkan masalah)

Pada aplikasi yang kami teliti, seluruh tombol yang umumnya akan sering ditekan, mudah dijangkau. Tapi ada juga beberapa tombol yang mungkin agak sulit karena fungsinya agak minim ketika window game. Contoh pembukaan menu ketika permainan berlangsung.

5.      Consistency

Consistency memiliki artian bahwa ui yang digunakan memiliki konsistensi dari segi warna, letak, dan icon sehingga user tidak merasa bingung ketika pindah halaman

Aplikasi yang diteliti memiliki konsistensi yang sangat baik karena peletekannya tidak berubah-ubah dan memiliki dominasi warna yang sama. Gambar icon pun selalu sama tidak berbeda-beda. Tampilan hanya berbeda ketika masuk ke mode ulti pada hero. Ini untuk menentukan perbedaan skill pada hero

6.      Affordance

Affordance merupakan pembatasan-pembatasan yang ditetapkan sistem/objek agar pengguna dapat melakukan aksi dari reaksi. Affordance dibagi menjadi virtual affordance dan physical affordance.

Pada game ini diterapkan virtual affordance yaitu pemilihan karakter atau item menggunakan scroll.

Disusun Oleh :

Fahsya Permana Putra

Fikri Harjo Yudhanto

Dhea Widyana Putri

Vivi Rizqia

                                                       

8 Golden Rules

   1. Strive For Consistency

                        E-Commerce Bukalapak menerapkan prinsip konsisten karena isi konten dari tampilannya tidak  berubah-ubah.

2.  Enable Frequent User To Use Shortcurt

                                 E-Commerce bukalapak telah menerapkan prinsip enable frequent user to use shortcurt yang dapat membantu user memudahkan dalam memilih menu-menu yang ada di Bukalapak seperti gambar dibawah ini.    

3. Offer Informative Feedback

            E-Commerce Bukalapak memberikan feedback ketika user telah memilih barang yang akan dibeli kemudian user memilih menu “Tambahkan ke Keranjang”, maka Bukalapak memberikan feedback sebagai berikut.

  4.       Design Dialogs To Yield Closure

                   E-Commerce Bukalapak menerapkan prinsip “Design Dialog To Yield Closure”, yaitu mengingatkan user bahwa proses transaksi belum selesai.

  5.      Prevent Error

            E-Commerce Bukalapak telah menerapkan prinsip “Prevent Error”, yaitu mengingatkan user untuk mengisi email yang aktif serta passwordnya mengandung minimal 4 karakter pada saat user melakukan daftar akun.

  6.      Permit Easy Reversal Of Action

            E-Commerce Bukalapak tidak menerapkan prinsip “Permit Easy Reversal Of Action” karena tidak ada button untuk cancel atau back apabila user tidak ingin melanjutkan pemesanan barang.

  7.      Support Internal Locus Of Control

      E-Commerce Bukalapak menerapkan prinsip “Support Internal Locus Of Control”,  yaitu menyediakan fasilitas untuk menambah alamat jika user ingin mengirimkan barang ke alamat yang lain.

  8.      Reduce Short Term Memory Load

            Web bukalapak sudah menerapkan prinsip “Reduce Short Term memory” karena user tidak perlu mengingat nomor tagihan ketika user telah melakukan pembelian barang, nomor tagihan tersebut telah dikirim  melalui  sms sehingga user tidak perlu membuka web setiap kali user ingin melihat nomor tagihan tersebut.

16 Prinsip

  1.      Accesbility

Pada prinsip ini, ui yang diterapkan harus mampu diakses oleh seluruh kalangan yang memang menjadi target.

Untuk website bukalapak.com, website mudah untuk diterapkan oleh targetnya. Penggunaan icon, gambar, dan keterangan dari setiap tombol untuk fungsionalitas sangat rinci dan jelas, juga pengelompokan menu mudah dipahami

  2.      Aesthetically

Pada prinsip ini, ui yang diterapkan harus mampu membuat mata pengguna merasa nyaman dan tertarik

Untuk website bukalapak.com, website menggunakan beberapa icon, gambar dan animasi sehingga membuat user merasa nyaman. Selain itu juga warna tampilan yang digunakan selaras dan tidak terlalu banyak. Penggunaan warna juga tidak terlalu tajam sehingga tidak menyakiti mata saat dibaca

   3.      Availability

Pada prinsip ini, website diharuskan selalu menampilkan menu default dari website tersebut.

Pada aplikasi bukalapak.com, menu2 utama tidak pernah hilang selalu diatas sehingga prinsip ini jelas dilaksanakan dengan baik.

   4.      Clarity

Pada prinsip ini, seluruh tulisan, keterangan ataupun icon harus terlihat secara jelas. Prinsip ini digunakan pada bukalapak.com, karena setiap icon yang digunakan benar-benar mendeskripsikan fungsinya dengan baik. Penjelasan dan keterangan pun menggunakan kata-kata yang baik dan efektif sehingga tidak memusingkan user saat dibaca.

   5.      Compatibility

    - User Compatibility 

          Web ini sudah menerapkan user compatibility karena dapat dimengerti oleh berbagai user.

    - Task and job Compatibility
          Web bukalapak ini struktur dan alirannya sudah sesuai  dan memudahkan user pemula dalam           menggunakannya.

   - Product Compatibility

          Web ini sudah menerapkan prinsip product compatibility dikarenakan produk-produk disertai dengan gambar-gambar yang menarik beserta keterangan nya seperti nama, harga, dll.

   6.      Configurability

Pada prinsip ini, dijelaskan bahwa user boleh mengkonfigurasi beberapa hal dalam website.

Bukalapak.com tidak terlalu memberikan fasilitas ini ke user, tetapi bukalapak.com memberikan fitur untuk mengkonfigurasi data diri dan foto profile yang mungkin dapat membuat user betah untuk berlama-lama didalam aplikasi.

   7.      Consistency

Dalam prinsip ini, aplikasi ditekankan untuk dapat memberikan tampilan yang konsisten. Pada bukalapak.com, tampilan dapat dibilang konsisten mulai dari peletakan tombol dan juga penggunaan warna atau template ui. Dengan konsistennya tampilan, user tidak merasa bingung saat pengoperasian aplikasi.

   8.      Control

Pada tahap ini, aplikasi ditekankan untuk dapat memberikan kontrol atas semua yang ada di aplikasi.

Pada bukalapak.com, semua hal mampu dikontrol oleh user sehingga memberikan kepuasan lebih kepada user.

   9.      Directness

Pada tahap ini, setiap aksi yang dilakukan oleh user harus terlihat hasilnya. Pada website bukalapak.com, setiap aksi sudah menghasilkan hasil yang langsung terlihat oleh user. Seperti setiap tombol ketika di klik langsung menyambungkan ke halaman lain atau ada tampilan yang keluar. Oleh karena itu, website ini menggunakan prinsip ini

   10.  Efficiency

Pada prinsip ini, gerakan tangan user harus seminim mungkin. Pada website bukalapak.com, tampilan yang dirancang sudah memiliki pengkategorian yang baik sehingga gerakan tangan dan mata dari user tidak terlalu banyak atau berlebihan. Oleh karena itu, website bukalapak.com menggunakan prinsip ini dengan baik.

   11.  Familiarity

Pada prinsip ini, user interface pada website harus familiar sehingga user tidak merasa bingung dan mudah memahami fungsionalitas dengan baik. Pada website yang kami teliti, familiarity terjalin dengan baik karena tampilan menggunakan icon-icon yang sudah sering kita lihat. Selain itu template yang digunakan pun sudah sangat umum seperti menu-menu pengkategorian berada di atas kiri, menu login dan register ada di sisi kanan, dll seperti ui yang telah digunakan web-web lain sehingga sasaran dari prinsip ini terjalin dengan baik.

   12.  Flexibility

Web bukalapak sangat fleksibel digunakan untuk kalangan user dengan pengetahuan maupun kebiasaan yang bervariasi.

   13.  Forgiveness

Forgiveness adalah sebuah prinsip dalam pembuatan ui di mana sistem harus mampu memperingatkan segala tindakan user jika tindakan itu membahayakan. Contohnya adalah jika kita ingin logout, harus ditanyakan terlebih dahulu oleh sistem apakah kita yakin untuk di logout.

Pada website ini forgiveness terjalin dengan baik karena memang dari website ini banyak sekali pemberitahuan dari sistem ke user sangat banyak.

   14.  Immersion

 Web bukalapak sudah memenuhi prinsip immersion karena begitu user mengakses halaman web, user langsung fokus pada berbagai hal tentang bukalapak seperti produknya.

   15.  Obviousness

Obviousness adalah prinsip di mana fungsionalitas dapat mudah dipahami oleh user melalui tampilannya.

Pada bukalapak.com, tampilan sangat membantu menjelaskan fungsionalitas yang ada, seperti penambahan jumlah barang diberikan lambang +, ingin belanja diberikan logo keranjang dan lain sebagainya.

   16.  Operability

Operability adalah prinsip yang mengharuskan sistem untuk mampu dengan mudah dioperasikan oleh siapapun.

Pada website bukalapak.com, operability terjalin dengan baik karena aliran tampilan yang pas. Selain itu juga menu-menu yang default tidak hilang jika terscroll dan segala macamnya, sehingga mudah dioperasikan.  

PPT Tugas 1 Implementasi User Experience Design D3MI-39-02

1.Apa saja keyword yang terdapat dalam interface?

2.Apa saja keyword yang terdapat dalam abstract class?

3.Bagaimana penggunaan abstract class?

     Sebelum lanjut ke materi, saya akan menjelaskan terlebih dahulu dari pertanyaan-pertanyaan diatas.

1. Keyword yang terdapat dalam interface yaitu abstract dan implements.

    

   Nah, setelah kita mengetahui apa saja keyword yang terdapat dalam interface kita lanjut ke keyword yang terdapat dalam abstract class ya sesuai dengan pertanyaan di nomer 2.

2. Keyword yang terdapat dalam abstract class yaitu keyword abstract.

3.

•      Hanya class abstract yang memiliki method abstract

•      Method abstract tidak memiliki tubuh method(body)

•      Method abstract harus di override oleh subclass

Untuk lebih jelasnya, saya akan menjelaskan materi lengkapnya sesuai tema yaitu ”PERBEDAAN INTERFACE DENGAN ABSTRACT CLASS”.

ABSTRACT CLASS

Abstract class merupakan suatu class yang terdapat dalam java yang merupakan turunan dari class super ke sub class. Abstract class juga merupakan class khusus dari inheritance. Suatu abstract class tidak dapat diinstansiasi serta tidak dapat digunakan untuk membuat sebuah objek.

Sifat:

•      Dapat diturunkan ke dalam bentuk kelas konkret

•      Dapat  diturunkan ke kelas abstrak selanjutnya

•       menggunakan keyword abstract

INTERFACE

Mengapa kita membutuhkan suatu interface?

Interface dalam bahasa pemrograman java dapat menjadi solusi dalam sebuah permasalahan. Dimana, sebuah interface dapat menjadi pemecah masalah yang rumit serta interface mampu menjawab segala kekurangan  yang terdapat dalam inheritance. Interface dapat menjawab semua kebutuhan kita karena sebuah interface bersifat multiple.

Nah, ini dia pengertiannya.

          

  Interface adalah sekumpulan method yang hanya memuat sturktur-struktur method saja, tipe datanya konstan(tetap) serta digunakan untuk menyatakan spesifikasi fungsional dari beberapa kelas.

Cirri-ciri dari sebuah interface:

1. Method interface tidak mempunyai body method(tidak memiliki tubuh)

2. sebuah interface tidak dapat membuat objek baru.

3. Sebuah interface tidak memiliki kode impelementasi.

 Aturan umum untuk mendeklarasikan sebuah interface:

1. Modifier yang digunakan hanyalah satu yaitu public.

2. Mendeklarasikan sebuah variable dalam interface haruslah diberikan nilai karena bersifat static final.

3. Menggunakan keywords implements.

4. Sebuah class yang mengimplements sebuah interface, harus meng-override method.

Setelah kita mengetahui Interface dan abstract class secara detail. Selanjutnya saya akan menjelaskan perbedaan dari keduanya.

              

                    PERBEDAAN ABSTACT CLASS DAN INTERFACE DALAM JAVA

Abstract Class :

1. Suatu abstract class hanya dapat digunakan sebagai superclass

2. Methodnya concrete

Interface :

1. Seluruh method haruslah method abstract

2. Tipe datanya konstan atau tetap.

abstract class AbstractClass

{

    // Force Extending class to define this method

    abstract protected String getValue();

    abstract protected String prefixValue(String prefix);

    // Common method

    public void printOut() {

        System.out.println( this.getValue() );

    }

}

class ConcreteClass1 extends AbstractClass

{

protected String getValue() {

        return "ConcreteClass1";

    }

    public String prefixValue(String prefix) {

return prefix + "ConcreteClass1";

    }

}

class ConcreteClass2 extends AbstractClass

{

    public String getValue() {

        return "ConcreteClass2";

    }

    public String prefixValue(String prefix) {

return prefix + "ConcreteClass2";

    }

}

class Main

{

public static void main(String args[]) {

ConcreteClass1 class1 = new ConcreteClass1();

class1.printOut();

System.out.println( class1.prefixValue("FOO_") );

ConcreteClass2 class2 = new ConcreteClass2();

class2.printOut();

System.out.println( class2.prefixValue("FOO_") );

}

}

Pengamatan1 :

1. Bolehkah ditambahkan body "{statement1; statement1;}" pada method getValue ataupun method         prefixValue pada class abstract AbstractClass? Jelaskan!

Jawab : Diperbolehkan, karena penambahan statement1; statement1; tidak mempengaruhi suatu
             aturan yang dimiliki abstract class

2. Kembalikan program seperti semula, jelaskan error apa yang terjadi apabila method
    getValue() pada class ConcreteClass1 di hapus!

Jawab : Concrete class tidak abstract dan tidak ada suatu override class di concrete class yang
              mampu meng extends abstarct class

3. Kembalikan program seperti semula, selanjutnya perhatikan perbedaan hak akses method                     getValue() di child class ConcreteClass1 dan ConcreteClass2! Jelaskan apa maksudnya!

Jawab : Di Concreteclass1 hak akses method getValue merupakan suatu protected sedangkan hak
            akses method getvalue di concreteclass2 merupakan suatu public

4. Buatlah abstract method yang bernama getValue2 pada class ConcreteClass1! Compile dan
    mengapa terjadi error?

Jawab : Suatu file yang tidak dapat mencapai hasil akhir dan bersifat sementara

5. Ikuti soal nomor 4, silahkan ubah class ConcreteClass1 menjadi abstract. Selajutnya jelaskan
    mengapa terjadi error?

Jawab : Suatu file dengan nama abstract tidak dapat ditemukan pada file java

6. Dengan mengikuti struktur kode program di atas serta ditambahkan satu abstract method bernama "gabung" TANPA PARAMETER pada parent class, hasilkan output berikut.

interface Mobil

{

    public void setMerk(String merk);

    public String getMerk();

}

interface Mesin extends Mobil

{

    public void setNoMesin(String nomor_mesin);

public String getNoMesin();

}

// This will work

class Mobil1 implements Mesin

{

private String merk, nomor_mesin;

    public void setMerk(String merk){

this.merk = merk;

    }

public String getMerk(){

return merk;

    }

    public void setNoMesin(String nomor_mesin){

this.nomor_mesin = nomor_mesin;

    }

public String getNoMesin(){

return nomor_mesin;

    }

}

// This will not work and result in a fatal error

class Mobil2 implements Mesin

{

private String nomor_mesin;

public void setNoMesin(String nomor_mesin){

this.nomor_mesin = nomor_mesin;

    }

public String getNoMesin(){

return nomor_mesin;

    }

} 

class Main{

public static void main(String[] args){

Mobil1 m1 = new Mobil1();

m1.setMerk("Ford");

m1.setNoMesin("01010");

System.out.println( m1.getMerk() );

System.out.println( m1.getNoMesin() );

}

}

Pengamatan 2:

1. Compile kode program diatas dan jelaskan sebab error yang terjadi!

          Jawab : Tidak ditemukannya simbol:

                       Mobil m1 = new mobill(); yang berlokasi di class main

2. Tambahkan method yang diperlukan untuk mengatasi error yang terjadi (No. 1)!

3. Perhatikan soal 1 (abstract) dan soal 2 ini (interface) dan lakukan poin-poin berikut:

            - Apa yang terjadi apabila ditambahkan method biasa yang mengandung body "{}" pada
               interface Mobil? Jelaskan!

            

             - Jelaskan perbedaan body program antara class abstract dan interface!

          

               jawab :

               pada abstract class tidak terdapat badn method namun hanya mendeklarasikan isi
methodnya saja, sedangkan pada interface, interface tidak mempunyai statement serta
memiliki method yang kosong.

            - Jelaskan perbedaan penggunaan extends antara soal 1 dan soal 2!