Usert Interface & User Experience

User Experience Design atau yang biasa disebut UX Design adalah proses meningkatkan kepuasan pengguna (pengguna aplikasi, pengunjung website) dalam meningkatkan kegunaan dan kesenangan yang diberikan dalam interaksi antara pengguna dan produk. Mudahnya, UX Design merupakan proses membuat sebuah website atau aplikasi agar menjadi mudah untuk digunakan dan tidak membingungkan ketika digunakan oleh pengguna.
User Interface Design atau yang bahasa Indonesianya itu Desain Antarmuka Pengguna adalah desain antarmuka untuk mesin dan perangkat lunak, seperti komputer, peralatan rumah tangga, perangkat mobile, dan perangkat elektronik lainnya, dengan fokus pada memaksimalkan pengalaman pengguna. Mudahnya yaitu UI Design adalah bagaimana suatu website atau aplikasi yang kamu buat terlihat seperti apa. Orang biasa menyebutnya sebagai tampilan atau desain sebuah website.

UX dan UI merupakan 2 hal yang berbeda. UX dimaksudkan untuk memahami kebutuhan user, dan siapa user yang mengunjungi website kita, bagaimana caranya agar user nyaman saat mengunjungi website. Sedangkan UI berfokus pada tata letak, visual desain dan branding dari sebuah website ataupun aplikasi.

Ada 5 aspek penting didalam UX. Yaitu :

Learnability

Learnability artinya adalah kemampuan dimana user dapat dengan mudah mengerti maksud dari komponen yang ada didalam UI. Selain itu, user dapat dengan mudah mempelajari maksud dari komponen yang berada didalam UI tersebut. Jika tidak mudah dipahami, maka otomatis user akan tidak tertarik dalam menggunakan sistem tersebut, sebab sistem tersebut terlalu abstrak untuk dipahami. Contonya adalah dengan menggunakan icon tempat sampah pada button, user akan tau bahwa button tersebut berguna untuk "membuang sesuatu"

Gambar 1 : Penggunaan Icon Trashbin untuk tujuan menghapus data

 Efficiency

Arti dari Efficiency adalah melakukan 'dengan' benar. Artinya melakukan sesuatu tanpa membuang banyak sumber daya. Dengan adanya efficiency, pekerjaan yang akan dikerjakan oleh user akan jauh lebih mudah sehingga pengalaman menggunakan program yang baik akan dialami oleh user. User Interface yang tidak Effisien akan sangan menyusahkan user. Contohnya adalah penggunaan combobox dengan data yang berlebihan. Akan lebih efisien jika menggunakan textbox dengan autocomlete.

Gambar 2 : Penggunaan Combobox yang tidak efisien

Memorability

Adalah kemampuan user untuk mengingat fitur - fitur dan konten - konten yang disediakan pada sistem. User akan sangat lebih mudah menggunakan sistem yang dibuat jika user dapat mengingat penggunaan tiap - tiap fitur yang ada. Ini dapat dilakukan dengan cara menambahkan icon atau simbol yang dapat diingat user. Contoh tombol Play untuk memutar video. Penggunaan menu dan sub menu yang berlebihan dapat mengurang Memorability user karena user harus mengingat langkah - langkah yang panjang.
Gambar 3 : Penggunaan Menu yang buruk

Error Handling

Artinya error yang berasal dari user harus diminimalisir. Dalam konteks ini sangat penting untuk menentukan apa yang dimaksud dengan “error”. Dengan tingkat error yang menurun,, kepercayaan diri pengguna yang semakin meingkat, sehingga user semakin termotivasi dalam menggunakan sistem dan meningkatkan kualitas data dari user. Dengan membuat textbox hanya bisa diisi oleh tipe data tertentu (Angka Contohnya) akan meminimalisir error yang disebabkan oleh user.

User Satisfaction

Artinya membuat user nyaman dalam menggunakan program dari sistem yang dibuat. User yang puas dengan lingkungan pekerjaannya maka akan kinerja akan meningkat dan motivasi juga ikut meningkat.

Referensi :
https://sis.binus.ac.id/2017/04/28/perbedaan-ux-dan-ui-serta-tips-dalam-merancang-ux/

Windows Navigation Diagram

windows navigation diagram adalah sebuah diagram yang menunjukan bagaimana sebuah halaman form pada program perpindah dari satu halaman form ke halaman form yang lain sehingga programmer dapat mengetahui bagaimana halaman form harus dibuat pada sistem yang dikerjakan.

Gambar 1 : Window Navigation Diagram

Seperti pada Gambar 1, Windows navigation diagram digambarkan dengan persegi diikuti dengan jenis komponen dan nama dari komponennya. Contohnya seperti pada gambar 1 terdapat form dengan nama Find Client Forms dan didalam komponen form tersebut terdapat komponen button Find Client.
Setiap komponen, mempunyai event yang apabila dieksekusi akan membuatnya berpindah ke halaman form lain. Perpindahan form digambarkan dengan anak panah dimana anak panah berawal dari komponen yang menerima event menuju form tujuan.

Referensi :
http://wiki.ucalgary.ca/page/Courses/Computer_Science/CPSC_203/CPSC_203_Template/Labs_Template/Week_2_-_Lab_1

State Diagram

State diagram adalah diagram yang menunjukan kondisi atau status pada suatu sistem. Tujuannya agar dapat menjelaskan bagaimana perilaku suatu suatu kondisi agar dapat berpindah ke kondisi yang lainnya.
Gambar 1 : Conth State diagram Mesin ATM.

Komponen State Diagram

Komponen yang dimiliki adalah Behavior/state dan garis yang menghubungkan tiap - tiap state.
Behavior merupakan sebuah kondisi yang sedang terjadi. Suatu state dapat berubah menjadi kondisi yang lain. Untuk mencapai kondisi yang lain, diperlukan syarat atau pemicu yang digambarkan dengan garis disertai dengan nama syarat atau pemicunya.

Class Diagram

Class diagram adalah diagram yang menggambarkan struktur dari sistem dari sudut pandang susunan class. Class diagram bertujuan untuk mengetahui tujuan tiap class , relasi setiap class, ketergantungan dengan class lain dan attribute - attributenya.Class Diagram dibuat agar programmer dapat dengna mudah membuat class untuk program.
Gambar 1 : Contoh Class Diagram.
Pada class diagram ada 2 komponen utama yaitu komponen class yang berbentuk persegi panjang dan komponen association yang menghubungkan tiap - tiap class.

Komponen class

Pada simbol class digambarkan dengan persegi panjang. Diatasnya terdapat nama class dan biasanya disertai dengan jenis class (jenis class akan dijelaskan dibawah). Dibawahnya terdapat attribute yang ada didalam class. penamaan attribut ditulis dengan nama attribut dilanjutkan dengna tipe datanya. pada awal penamaan attribut biasanya digambarkan simbol dari jenis attribut untuk menunjukan jenis attribut.
attribute memiliki 3 jenis yaitu :
Private : menunjukan bahwa attribut hanya bisa diakses oleh class itu sendiri. Disimbolkan dengan "-".
Protected : menunjukan bahwa attribut hanya bisa diakses oleh class itu sendiri dan turunannya. Disimbolkan dengan "#".
Public : menunjukan bahwa attribut bisa diakses oleh class lain. Disimbolkan dengan "+".

Gambar 2 : Komponen class beserta penamaan attribute pada class

Jenis - jenis class

Class dapat dibagi menjadi 3 bagian. yaitu :

Boundary : class yang berhubungan langsung dengan user. class ini biasanya merupakan class yang bertanggung jawab dengan user interface.
Entity : class yang berhubungan dengan database. class ini biasanya yang bertanggung jawab untuk operasi pada database.
Controller : class yang menghubungkan class boundary dan class entity.

Jenis - jenis association

Association menunjukan hubungan antar class. Artinya association menggambarkan class yang memiliki attribute dengan class lain atau class yang harus mengetahui keberadaan class lain. untuk jenis association standard digambarkan dengan garis lurus biasa. Selain itu terdapat beberapa jenis association yang lain yaitu :

Dependency : Menunjukan bahwa suatu class keberadaanya memerlukan//bergantung dengan class lain. Contohnya adalah class detail nota bergantung pada class header nota. Dependency digambarkan dengan garis putus - putus dengan anak panah yang mengarah dari kelas yang bergantung ke klass yang sumber.

Generalisasi : Menunjukan bahwa suatu class merupakan bentuk umum dari class - class turunannya yang berbentuk khusus. Sehingga, class turunannya juga mempunya sifat dengan class induk yang memiliki bentuk umum. Generalis juga disebut dengan inheritance(turunan) pada OOP. Contohnya adalah class kendaraan dengan klass mobil. Generalisasi digambarkan dengan garis utuh dengan tanda panah utuh dimana tanda panah menunjuk ke class bentuk umum/class induk

Agregation dan Composition :Menunjukan bahwa suatu class memiliki hubungan "has a" atau memiliki class lain atau dengan kata lain suatu class yang memiliki atribute berupa class lain. Pada Agregation, jika semisal class A memiliki class B dan class A dihapus, maka class B tetap dapat berdiri sendiri. Lain halnya dengan Composition, jika semisal class A memiliki class B dan class A dihapus, maka class B tidak dapat berdiri sendiri karena keberadaan class B tergantung dengan class A. Agregation digambarkan dengan garis dengan gambar diamond diujungnya sedangkan Compotiion digambarkan dengan garis dengan gambar diamond  yang diarsir pada ujungnya.
Gambar 3: Contoh Association
Gambar 4 : Contoh Dependency

Gambar 5 : Contoh Generalization
Gambar 7 : Contoh Compotition

Gambar 6 : Contoh Agregation






Multiplicity

Multiplicity menunjukan jumlah class yang bisa berhubungan dengan class yang lainnya. Multiplicity digambarkan dengan angka pada ujung garis asociation. Multiplicity hampir sama dengan mandatory di ERD.
Gambar 7 : Penggunaan multiplicity



Referensi : 

https://www.uml-diagrams.org/class-diagrams-overview.html

https://www.uml-diagrams.org/association.html?context=class-diagrams

https://www.uml-diagrams.org/aggregation.html?context=class-diagrams

https://www.uml-diagrams.org/composition.html?context=class-diagrams

https://www.uml-diagrams.org/multiplicity.html?context=class-diagrams

https://dzone.com/articles/uml2-class-diagram-java

https://pccontrol.wordpress.com/2013/01/21/pengetahuan-dasar-dan-contoh-diagram-kelas-class-diagram/

Sequence Diagram

Sequence Diagram

Sequence Diagram adalah salah satu diagram UML yang digunakan pada tahap mendesain sistem yang akan dikerjakan. Hampir sama dengan Communication Diagram, Sequence Diagram berguna untuk menunjukan interaksi - interaksi terhadap object class yang ada didalam sistem. Yang membedakan dengan , Communication Diagram adalah, Communication Diagram menunjukan bagaimana urutan atau alur dari proses sistem untuk mencapai tujuan, Sedangkan Sequence Diagram menunjukan .
alur hidup object dari mulai object dieksekusi sampai berhenti

Gambar 1 : Contoh Sequence Diagram
Sequence Diagram biasanya mewakili satu buah use case dalam use case diagram. Sehingga, sebuah use case dapat dibuat Sequence Diagramnya dan kadang kala juga terdapat aktor didalam Sequence Diagram seperti gambar diatas.

Komponen Penyusun Sequence Diagram.

Adapun komponen penyusun dari sequence diagram adalah sebagai berikut :
  • Actor
Komponen ini hampir serupa dengan Actor yang ada pada use case yaitu komponen yang mewakili user yang menggunakan sistem atau sistem luar yang menggunakan sistem.
Gambar 2 : Actor


  • Lifeline
Lifeline merupakan interpretasi dari sebuah entitas yang ada didalam sistem. Entitas ini bisa berupa objek class atau class. Actor sendiri juga merupakan lifeline dimana actor merupakan lifeline yang berada diluar dari sistem. Lifeline pada umumnya digambargan dengan persegi panjang dengan garis kebawah yang menggambarkan waktu eksekusi. Penamaan untuk entitas objek yaitu :<nama object>:<nama kelas>  sedangkan untuk entitask kelas yaitu  : :<nama kelas>
Gambar 4 : Lifeline berupa kelas

Gambar 3 : Lifeline berupa Objek



  • Message
Message merupakan sebuah event dimana lifeline mengirim atau menerima sesuatu dari lifeline lainnya. Messge biasanya berupa fungsi dari objek. Message digambargan dengan anak panah. Untuk message yang memberikan kembalian, digambarkan dengan anak panah putus - putus.

Gambar 4 : Contoh Message

Gambar 5: Contoh message yang memberikan kembalian



  • Activation box
Merupakan komponen persegi panjang kebawah yang menunjukan lamanya sebuah lifeline berinteraksi dengan lifeline lain. Message keluar dan masuk melalui Activation box. Lamanya lifeline berinteraksi dilihat dari panjangnya activation box. Semakin panjang, semakin lama waktu yang diperlukan suatu lifeline untuk berinteraksi dengan lifeline lain. Dalam bahasa lainnya juga ddisebut execution.

  • Create Message
Merupakan Message yang bertujuan untuk membuat sebuah lifeline (object) baru. Dalam pemrograman diinterpretasikan sebagai insert data.
Gambar 6 : Create Message

  •  Destroy Message

Merupakan Message yang bertujuan untuk menghapus sebuah lifeline (object). Dalam pemrograman diinterpretasikan sebagai delete data. Pada proses delete, pada bagian paling bawah lifeline yang akan dihapus diberikan tanda silang sebagai tanda bahwa lifeline sudah dihapus.

Gambar 7 : Destroy Message

  • Alternative
Berguna memberikan pilihan atau alternative pilihan message mana yang akan dijalankan. Bentuknya seperti operasi kondisional pada bahasa pemrograman. Penggunaannya sendiri adalah dengan membagi daerah menjadi beberapa bagian dan diberi penjelasan untuk tiap - tiap kondisi yang harus dipenuhi agar message dapat dijalankan. (untuk lebih jelasnya lihat gambar 8).
Gambar 8 : Alternative Operator

  • Loop
Berguna untuk melakukan pengulangan eksekusi message. Bentuknya seperti operasi "while" pada bahasa pemrograman. Penggunaannya sendiri adalah dengan membuat daerah yang akan menjalankan operasi loop, disertai dengan keterangan kondisi pengulangannya. Pada contoh gambar 9, operasi diulangi sebanyak 10 kali.
Gambar 9 : Loop operator

Referensi : 

https://www.uml-diagrams.org/sequence-diagrams.html

https://www.uml-diagrams.org/sequence-diagrams-combined-fragment.html

https://www.uml-diagrams.org/interaction-message.html

https://ratnokustiawan.wordpress.com/2011/01/06/sequence-diagram/

Collaboration Diagram

Communication Diagram/Interaction Diagram

Communication Diagram atau Collaboration Diagram atau disebut juga Interacton Diagram adalah salah satu diagram UML yang digunakan pada tahap mendesain sistem yang akan dikerjakan sesuai kebutuhan user. Tujuan dari Communication Diagram adalah untuk menunjukan interaksi - interaksi terhadap object class yang ada didalam sistem. Selain menunjukan interaksi - interaksi setiap object class yang ada didalam sistem, Communication Diagram juga menunjukan bagaimana urutan atau alur dari proses sistem untuk mencapai tujuan.
Gambar 1 : Collaboration diagram



Didalam Collaboration Diagram terdapat lifeline yang merupakan user/sistem lain sampai kepada tujuan (head).

masing - masing object saling berinteraksi menggunakan message yang merupakan fungsi dari kelas yang berinteraksi serta terdapat garis panah yang menunjukan arah interaksi object.


Gambar 2 : message dan arah interaksi

angka yang terdapat disamping message merupakan penanda tugas yang dikerjakan. masing - masing tugas tersebut memiliki urutan atau step - step yang menunjukan langkah - langkah untuk mencapai tujuan. Misal dari angka 1 ke 1.1, 1.2, 1.3 dst atau dari angka 2, 2.1, 2.2, 2.3.

Guard

Guard pada Collaboration diagram merupakan kondisi dimana sebuah message pada object dijalankan. Penulisan guard adalah dengan menuliskan kondisi yang membuat message dijalankan didalam kurung bracket.

Contoh penulisan : [batal beli] -> menunjukan bahwa message akan dijalakan jika user batal membeli barang.

Contoh penggunaan guard dapat dilihat pada gambar 1. ketika user sudah melakukan pencarian di inventory, maka user melakukan pencarian buku (find_book) maka yang akan dilakukan user jika tertarik dengan buku tersebut ([interested]) maka user akan melihat buku. (Ingat urutan tugas pada penomoran message. dari 1 ke 1.1 lalu ke 1.2 dan ke 1.3). jika user memutuskan untuk membeli ([decide to buy]) maka user akan memasukan buku ke dalam shoping chart.

Gambar 3 : Penggunaan Guard

Iteration

Terkadang, pemanggilan fungsi pada object dapat dilakukan secara berulang kali. Pada Collaboration Diagram memungkinkan untuk memodelkan pemanggilan fungsi secara berulang. Message atau fungsi yang dapat dipanggil berulang ditandai dengan tanda "*" di awal nama message.

Batas pengulangan message tidak ditentukan. Bila memang ditentukan, biasanya dituliskan dengan pseudo-code atau bahasa pemrograman. Contoh : *[k=1..12] print_message(). berarti message atau fungsi print_message() diulang sebanyak 12 kali.

Gambar 4 : pengulangan menggunakan pseudo code. pengulangan sebanyak n -kali


Contoh pada gambar 1 menunjukan bahwa message pencarian buku (find_books) dapat dilakukan berulang kali.

 Sumber referensi :
https://www.slideshare.net/ramakantsoni/lecture-7-collaboration-diagram

http://agilemodeling.com/style/collaborationDiagram.htm

http://www.agilemodeling.com/artifacts/communicationDiagram.htm

https://www.slideshare.net/fahad_uaar/collaboration-diagram

https://www.slideshare.net/ASHOKKUMARPALAKI/lecture-6-collaboration-diagrams 

http://slideplayer.com/slide/7117097/

https://www.uml-diagrams.org/communication-diagrams.html

Activity Diagram

Mengenal Activity Diagram

Activity Diagram adalah salah satu diagram yang ada pada UML yang menggambarkan langkah - langkah aktifitas yang dilakukan oleh user dan menunjukan kapan user harus melakukan aktifitas tersebut.

Activity Diagram berada 1 level di atas use case diagram. Artinya, activity diagram menjeleskan bagaimana use case berjalan dan aktivitasnya.

Contoh Activity Diagram

Komponen Pada Activity Diagram

Komponen pada activity diagram


Pada pembuatan dan perancangan activity diagram, ada beberapa komponen yang diperlukan. Adapun beberapa komponen dasar yang digunakan adalah :

  • Start point/initial node : Pada titik ini, aktivitas dimulai
  • Action/Activity : Komponen ini menggambarkan aktivitas/aksi yang berjalan. Actifity dituliskan oleh kata aktif.
  • End point/activity final : Titik dimana aktifitas selesai dikerjakan.
Simbol komponen Activity Diagram.

  • Decision : berfungsi untuk melakukan percabangan dengan syarat kondisi tertentu yang harus terpenuhi. Dalam decision, cabang yang dihasilkan boleh lebih dari dua kondisi. Pada decision, kondisi yang harus terpenuhi dituliskan pada garis yang keluar dari decision.
  • Decision pun dapat digunakan untuk melakukan perulangan. (Seperti do-while).
Penggunaan decision sebagai perulangan.

  • Fork dan Join : Fork dan join digunakan untuk aktifitas yang berjalan bersamaan (concurrent activity).

Concurrent Activity (Aktifitas Yang Berjalan Bersamaan)

Dalam sebuah aktifitas didalam sistem, biasanya ada aktifitas yang berjalan secara beramaan. Contohnya adalah pada sistem makanan cepat saji. Ketika customer memesan makanan, maka aktifitas membuat makanan dan minuman dilakukan secara bersamaan. Pada kondisi tersebut, maka pada activity diagram digambarkan dengan komponen fork dan join.

Fork dan join
Fork dan join berbeda dengan decision meskipun sama - sama melakukan percabangan. Pada decision, aktifitas yang dijalankan adalah yang memenuhi syarat dari decision yang ditentukan. Sedangkan pada fork dan join, aktifitas dijalankan secarah bersamaan.

ada beberapa ketentuan dan syarat pada penggunaan Fork dan Join :

  • Jumlah garis keluar yang keluar dari fork harus sama dengan garis yang masuk kedalam join dalam satu concurrent activity.
  • tidak boleh ada activity yang masuk ke dalam join yang tidak berasial dari fork dalam satu concurrent activity.
  • tidak boleh ada deretan activity yang berasal dari fork yang tidak masuk kedalam join dalam satu concurrent activity.

Swimlane

Dalam sebuah urutan/rangkaian aktivitas didalam sistem, kebanyakan melibatkan lebih dari satu aktor/user. Untuk memisahkan aktivitas - aktivitas berdasarkan aktor/user yang bertanggung jawab maka harus dibuat swimlane untuk memisahkan activity berdasarkan user.

Swimlane berbentuk seperti tabel dimana setiap activity untuk tiap - tiap actor/user dipisahkan oleh kolom.

Pembagian activity berdasarkan actor/user menggunakan swimlane




Usert Interface & User Experience

User Experience Design atau yang biasa disebut UX Design adalah proses meningkatkan kepuasan pengguna (pengguna aplikasi, pengunjung websit...