Evaluasi User Experience

User experience adalah bagaimana pengalaman pengguna dalam berinteraksi/menggunakan produk digital Anda. Pengalaman ini dilihat dari betapa mudahnya pengguna untuk mendapatkan apa yang mereka inginkan dari produk tersebut. user experience produk yang bagus tidak akan menyulitkan pengguna untuk mencapai tujuan mereka. Entah itu dari desain UI yang friendly, produk yang ringan untuk diakses, menu yang tidak berbelit-belit, dan lain sebagainya. Sedangkan, user experience yang buruk membuat pengguna frustasi karena kesulitan untuk mendapatkan apa yang mereka inginkan. Kalau sudah begini, ada banyak efek buruk yang bisa terjadi kepada Anda. user experience yang buruk membuat pengguna frustasi karena kesulitan untuk mendapatkan apa yang mereka inginkan. Kalau sudah begini, ada banyak efek buruk yang bisa terjadi kepada Anda.

 

Tips untuk Merancang User Experience

1. Ketahui Siapa Pengguna Produk atau Layananmu

kamu harus tahu siapa yang akan menggunakan produk atau layananmu. Jika tidak, tentu kamu akan kesulitan untuk memahami keinginan mereka. Seorang pemula pasti perlu desain yang tidak rumit dan to-the-point. Sehingga mereka bisa langsung mendapatkan apa yang mereka inginkan.

 

2. Gunakan Desain yang Simpel

Kamu harus memastikan bahwa mereka bisa memahami produkmu dengan mudah. Itulah mengapa kamu perlu membuat desain yang simpel. Dengan tampilan sesimpel itu, pengguna tak akan kebingungan jika ingin langsung mulai belajar.

 

3. Jangan Bombardir Pengguna dengan Informasi

Bayangkan jika kamu sedang ingin belajar bahasa. Alih-alih memulai, kamu malah melihat layar yang isinya penuh dengan informasi tentang sejarah bahasa. Tentu hal ini akan membuatmu jengkel, kan? Jadi saat merancang desain, kamu harus tahu informasi apa saja yang perlu ditunjukkan dan informasi apa saja yang tidak diperlukan oleh pengguna. Dengan begitu, pengguna tidak perlu membuang banyak waktu untuk mendapatkan apa yang mereka inginkan.

 

4. Dapatkan Feedback Langsung dari Pengguna

Sebagus apapun rancangan desain yang kamu buat, tidak akan ada artinya jika tidak sesuai dengan keinginan pengguna.  Itulah mengapa kamu perlu mendapat feedback langsung dari orang-orang yang menggunakan produk atau layananmu. Ada banyak cara yang bisa kamu gunakan. Mulai dari menyebar survei, mewawancarai calon pengguna yang potensial, hingga menyewa beta tester – khususnya jika kamu ingin mengetes UX website atau aplikasi. Setelah mendapat feedback, kamu akan tahu bagian-bagian yang perlu kamu evaluasi dari UX produkmu, serta apa saja bagian yang perlu kamu pertahankan.

Fungsi User Experience

1. Memudahkan Pengguna

Fungsi User Experience yang pertama yaitu memudahkan para pengguna saat memakai aplikasi sebab di dalamnya sdah tersedia penilaian dari aspek usability. Saat ini setiap aplikasi atau software pasti sudah dibuat supaya para pengguna mudah untuk memakainya.

 

2. Menarik Minat Para Pengguna

Fungsi User Experience berikutnya yaitu untuk menarik minat para penggunanya agar menggunakan aplikasi secara terus menerus. Sebuah aplikasi yang tidak memiliki daya tarik bagi pengguna, pasti akan cepat ditinggalkan atau tidak dilirik sama sekali.

 

3. Menghasilkan UI yang Bagus

Perlu Anda ketahui bahwa User Interface (UI) adalah keluaran dari penerapan User Experience. Apabila penerapan UX di sebuah aplikasi sangat diperhatikan, maka dapat menghasilkan desain UI yang sangat bagus sehingga terkesan lebih menarik dan elegan.

 

4. Untuk Memenangkan Persaingan

Penerapan User Experience pada produk-produk digital bertujuan untuk memenangkan persaingan. Terlebih dari tahun ke tahun produk digital yang hadir di dunia juga semakin bervariasi. Untuk memenangkan persaingan produk-produk digital itulah, maka sebuah produk harus memberikan pengalaman yang menarik bagi setiap pengguna.

User Experience Questionnaire

Pengujian UX dapat menggunakan UEQ (User Experience Questionnaire (UEQ). UEQ merupakan alat atau kuesioner yang mudah dan efisien untuk mengukur UX. UEQ sendiri memiliki 26 komponen pertanyaan dan tujuh pilihan jawaban. Versi Asli UEQ menggunakan Bahasa Inggris. UEQ ada versi Bahasa Indonesia. UEQ (User Experience Questionnaire) merupakan alat atau kuesioner yang mudah dan efisien untuk mengukur User Experience (UX). UEQ ini memudahkan kita untuk mengukur UX pada sebuah desain aplikasi. UEQ berisi 6 skala penilaian, yaitu:

• Daya Tarik (Attractiveness): Apakah pengguna menyukai atau tidak menyukai produk?
• Kejelasan (Perspicuity): Apakah mudah untuk mengenal produk? Apakah mudah untuk
• belajar bagaimana gunakan produknya?
• Efisiensi (Efficiency): Bisakah pengguna menyelesaikan tugas mereka tanpa usaha yang
• sederhana?
• Ketepatan (Dependability): Apakah pengguna merasa terkendali terhadap interaksi?
• Stimulasi (Stimulation): Apakah menarik dan memotivasi untuk menggunakan produk
• Kebaruan (Novelty): Apakah produk itu inovatif dan kreatif? Apakah produk menangkap minat pengguna?

 

Read More

Evaluasi Usability

 Evaluasi Usability

Usability atau ketergunaan adalah ukuran atau derajat pengalaman pengguna saat berinteraksi dengan produk atau sebuah sistem, aplikasi, teknologi maupun peralatan yang dioperasikan secara efektif dan efisien dalam ruang lingkup penggunanya. Usability menunjuk pada tingkat sebuah produk yang dapat digunakan oleh pengguna tertentu untuk mencapai tujuan spesifik dengan efektif (effectiveness), efisien (efficiency) dan memuaskan (satisfaction) dalam sebuah konteks penggunaan. Usability merupakan salah satu faktor penting yang dipertimbangkan oleh pengguna untuk membeli produk sesuai dengan fungsinya, harga, pelayanan purna jual, dan sebagainya. Usability adalah kesatuan dari komponen dan erat kaitannya dengan lima dimensi usability, yaitu learnability, efficiency, memorability, error, dan satisfaction.

 

Alat Uji Usability

• SUS (System Usability Scale)
• QUIS (Questionnaire for User Interface Satisfaction)
• CSUQ (Computer System Usability Questionnaire)
• Words (adapted from Microsoft’s Product Reaction Cards)

SUS (System Usability Scale)

Usability Scale (SUS) merupakan kuesioner untuk mengukur persepsi kegunaan. Diciptakan oleh John Brooke pada tahun 1986 dan dahulu digunakan untuk menguji sistem elektronik kantor. System Usability Scale (SUS) berisi 10 pertanyaan dimana partisipan diberikan pilihan skala 1–5 untuk dijawab berdasarkan pada seberapa banyak mereka setuju dengan setiap pernyataan tersebut terhadap produk atau fitur yang kita uji. Nilai 1 berarti sangat tidak setuju dan 5 berarti sangat setuju dengan pernyataan tersebut.  Versi Asli SUS menggunakan Bahasa Inggris. Namum, SUS ada juga yang versi Bahasa Indonesia.

 

Aturan Perhitungan Skor SUS

1. Setiap pertanyaan bernomor ganjil, skor setiap pertanyaan yang didapat dari skor pengguna akan dikurangi 1.
2. Setiap pertanyaan bernomor genap, skor akhir didapat dari nilai 5 dikurangi skor pertanyaan yang didapat dari pengguna.
3. Skor SUS didapat dari hasil penjumlahan skor setiap pertanyaan yang kemudian dikali 2,5.

 

 

Tahapan Pengambilan Data SUS

• Prototype aplikasi harus selesai
• Cari pengguna (responden)
• Diberikan kuesioner (angket)
• Responden mengisi form data diri
• Responden mengerjakan tugas (task)
• Responden mengisi kuesioner SUS
• Wawancara (Opsi)

 

Dalam Usability terdapat beberapa kriteria yang harus dipenuhi yaitu :

1. Efektif untuk digunakan ( Effectiveness)

Produk yang dibuat harus dapat digunakan untuk mengerjakan tugas tertentu. Atau dapat dikatakan seberapa bagus sebuah produk dalam mengerjakan tugas yang harus dilakukan.

2. Efisiensi untuk digunakan ( Efficiency)

Efisiensi dikaitkan pada seberapa cepat user dapat mencapai tujuan pada saat menggunakan produk tersebut.

3. Aman untuk digunakan (Safety)

Keamanan yang dimaksud meliputi pencegahan pengguna dari keadaan bahaya dan situasi yang tidak diharapkan. Jadi pengguna merasa aman saat menggunakan produk dan juga ada pencegahan pengguna dari hal yang bahaya.

4. Mempunyai kegunaan yang baik (Utility)

Utility yang dimaksud berkaitan dengan sejauh mana produk dapat menyediakan fungsi yang baik sehingga pengguna dapat melakukan yang dibutuhkan atau yang ingin dilakukan.

 

5. Mudah dipelajari ( Learnability)

Tingkat kemudahan untuk mempelajari sebuah produk sebelum digunakan. Pengguna seharusnya tidak menghabiskan banyak waktu untuk mempelajari sebuauh produk yang akan digunakan.

6. Mudah untuk diingat (Memorability)

Sekali pengguna sudah pernah mempelajari sebuah produk, maka seterusnya akan ingat bagaimana cara menggunakannya. Umumnya UX terdiri dari tiga karakteristik yaitu pengguna yang terlibat, bagaimana pengguna berinteraksi dengan sebuah produk atau sebuah sistem , dan pengalaman apa yang dirasakan oleh pengguna yang menarik , dapat diobservasi dan dapat diukur (Tullis & Albert, 2013).

Read More

 Implementasi User Interface Mobile

User Interface adalah tampilan visual sebuah produk yang menjembatani sistem dengan pengguna (user). Tampilan UI dapat berupa bentuk, warna, dan tulisan yang didesain semenarik mungkin. Secara sederhana, UI adalah bagaimana tampilan sebuah produk dilihat oleh pengguna. UI menjadi penghubung langsung antara sistem dengan penggunanya. UI merupakan perpaduan dari elemen grafis dan sistem navigasi. UI efektif untuk membuat fokus pengguna pada objek dan subjek yang dilihat menjadi lebih baik. Tujuan dari user interface adalah untuk meningkatkan usability dan tentunya user experience.

 

 

Perbedaan User Interface pada Aplikasi Mobile dan Komputer

Persyaratan dalam desain Mobile UI sangatlah berbeda dengan persyaratan desain UI untuk komputer desktop. Karena ukuran layarnya yang lebih kecil dan layarnya yang touch screen membuat perlunya pertimbangan khusus untuk memastikan kegunaan, keterbacaan, dan konsistensi UI. Dalam mobile interface, simbol dalam mobile interface harus berukuran lebih kecil dan tidak selalu ada cukup ruang untuk teks sehingga terkadang dapat menimbulkan kebingungan. Karena minimnya ruang untuk teks, pengguna harus bisa mengerti arti dari masing-masing icon yang ada pada mobile interface.

 

Pentingnya User Interface dalam Sebuah Aplikasi

User Interface merupakan komponen yang sangat penting dalam pembuatan aplikasi mobile. Umpamakan saja UI sebagai rumah dari sebuah aplikasi. Apabila UI pada suatu aplikasi dirancang dengan sangat indah dan nyaman digunakan, maka pengguna akan nyaman pada aplikasi tersebut dan tidak cepat-cepat meninggalkannya. Sebaliknya, bila desain UI pada suatu aplikasi kurang baik, maka pengguna akan meninggalkan aplikasi tersebut. 

 

UI Mobile

Interaksi pengguna dengan perangkat mobile harus dirancang sedemikian rupa sehingga rentang waktu tindakan pengguna lebih pendek dari pada di perangkat dekstop, tindakan harus sederhana namun terfokus. Selain itu, ukuran layar pada perangkat mobile juga kecil sehingga jumlah informasi yang dapat ditampilkan terbatas. Desain UI haruslah cepat saat dibuka

 

 

Metode Pembuatan Desain UI Mobile

1. Material Design for Android (MDfA)

MDfA adalah panduan untuk membuat desain UI pada sistem operasi Android yang mencakup visual, gerak, dan interaksi di seluruh platform dan perangkat . MDfA ini merupakan template UI Android standar yang digunakan pada aplikasi bawaan atau aplikasi milik Google. Semua panduan mengenai standar desain UI aplikasi Android tersedia secara lengkap, seperti tema, widgets, animasi, dan komponen UI lainnya.

 

2. Common Element Sets (CES)

CES merupakan seperangkat elemen UI yang umum atau populer digunakan oleh aplikasi dan muncul setidaknya satu kali pada desain UI lainnya. CES pada UI bisa seperti desain tata letak, desain tombol, desain navigasi, desain form, desain produk dan lain sebagainya. Komponen UI yang umum digunakan dapat merujuk dari desain aplikasi yang populer saat ini.

 

karakteristik desain Mobile UI yang baik:

Kontras Warna Baik

Untuk mendesain UI yang baik sekaligus indah, tentu diperlukan adanya pemilihan warna yang baik. Agar tampilan tidak mengganggu pandangan pengguna dan terlihat indah, Perlu diperhatikan kontras warna yang pas dengan memperhatikan kombinasi warnyanya yang baik. Misalnya apabila background aplikasi berwarna cerah, warna pada tulisan dan icon harus dibuat kontras dengan warna background yang cerah tersebut.

 

Informasi Terpapar Jelas, Ringkas, dan Terstruktur

Tentunya dalam menggunakan aplikasi, kita tidak menginginkan tampilan yang berantakan dan membingungkan. Secara general, desain UI yang baik adalah saat tampilan terlihat minimalis dengan informasi yang tersampaikan dengan jelas. Penyusunan informasi juga harus disusun dengan terstruktur sehingga tidak menimbulkan kebingungan pengguna.

 

Layar Responsif dengan Ukuran UI yang Efisien

Agar penggunaan aplikasi nyaman dan mudah, perlu diperhatikan bahwa UI aplikasi harus responsif. Selain itu area sentuh pada suatu selection harus memiliki ukuran yang pas sehingga lebih mudah untuk disentuh tanpa mengganggu area sentuh pilihan lain (menghindari fat fingering). Ukuran UI juga tidak boleh mendominasi ukuran layar, karena tujuan pembuatan UI aplikasi adalah untuk memaksimalkan kegunaan aplikasinya sehingga tidak perlu mengambil space yang tidak diperlukan.

 

Jumlah Control Harus Pas

Pada satu halaman pada aplikasi, jumlah control (button, text field, toggle button, dll) harus secukupnya saja. Apabila terlalu banyak, maka penggunaan aplikasi akan membingungkan karena tampilannya yang kurang ringkas dan berantakan. Karena ukuran layar smartphone relatif kecil, UI harus menyesuaikan ukurannya agar efisien sehingga terlihat lebih minimalis dan tidak membingungkan.

Read More

Implementasi User Interface

Pengertian User Interface

User Interface adalah tampilan visual sebuah produk yang menjembatani sistem dengan pengguna (user). Tampilan UI dapat berupa bentuk, warna, dan tulisan yang didesain semenarik mungkin. Secara sederhana, UI adalah bagaimana tampilan sebuah produk dilihat oleh pengguna. UI menjadi penghubung langsung antara sistem dengan penggunanya. UI merupakan perpaduan dari elemen grafis dan sistem navigasi. UI efektif untuk membuat fokus pengguna pada objek dan subjek yang dilihat menjadi lebih baik. Tujuan dari user interface adalah untuk meningkatkan usability dan tentunya user experience.

Di dalam dunia IT, banyak perusahaan yang membutuhkan jasa atau pekerjaan dari seorang UI Designer maupun UI / UX Designer. Tugas dan tanggung jawab yang dimilikinya adalah mampu untuk merancang dan mengembangkan suatu tampilan awal desain aplikasi yang nantinya akan diimplementasikan ke dalam kode program yang akan dikerjakan oleh developer atau pengembang aplikasi.

 

Karakteristik User Interface yang baik

• Desain Menunjukan Informasi yang Jelas & Singkat
• Desainnya Terasa Familiar Bagi User
• Desain yang Responsif
• Konsistensi Desain
• Efisien
• Memenuhi Standar Estetika Suatu Desain Visual
• Kontras Warna yang Baik

 

Pentingnya UI bagi ssebuah Produk

• Memudahkan Interaksi pengguna dengan produk
• Meningkatkan Penjualan dan Pertumbuhan Bisnis
• Meningkatkan Kualitas Branding

UI Mobile

Interaksi pengguna dengan perangkat mobile harus dirancang sedemikian rupa sehingga rentang waktu tindakan pengguna lebih pendek dari pada di perangkat dekstop, tindakan harus sederhana namun terfokus. Selain itu, ukuran layar pada perangkat mobile juga kecil sehingga jumlah informasi yang dapat ditampilkan terbatas. Desain UI haruslah cepat saat dibuka

 

Metode Pembuatan Desain UI Mobile

1. Material Design for Android (MDfA)

MDfA adalah panduan untuk membuat desain UI pada sistem operasi Android yang mencakup visual, gerak, dan interaksi di seluruh platform dan perangkat . MDfA ini merupakan template UI Android standar yang digunakan pada aplikasi bawaan atau aplikasi milik Google. Semua panduan mengenai standar desain UI aplikasi Android tersedia secara lengkap, seperti tema, widgets, animasi, dan komponen UI lainnya.

 

2. Common Element Sets (CES)

CES merupakan seperangkat elemen UI yang umum atau populer digunakan oleh aplikasi dan muncul setidaknya satu kali pada desain UI lainnya. CES pada UI bisa seperti desain tata letak, desain tombol, desain navigasi, desain form, desain produk dan lain sebagainya. Komponen UI yang umum digunakan dapat merujuk dari desain aplikasi yang populer saat ini.

 

Metode Pembuatan Desain UI Website

Ada 3 prinsip dalam mendesain sebuah website menurut Veen’s design principles, yaitu bisa menjawab pertanyaan:

1. Di mana saya?
2. Kemana saya bisa pergi?
3. Ada apa di sini?

Veen’s Design Principles

1. Menggambarkan website harus memiliki header yang menjelaskan website apa
2. Menggambarkan adanya navigasi yang diposisikan di sidebar
3. Menggambarkan konten dari website.

Jenis Desain UI Website

• Static - Desain web memiliki ukuran tetap pada semua  resolusi browser (pixel)
• Fluid - Desain web dapat menyesuaikan lebar layout  sesuai dengan resolusi browser (%)
• Responsive – Desain web dapat berganti layout pada  resolusi tertentu (desktop&mobile)
• Responsive fluid – Gabungan Responsive & Fluid (%)
• Horizontal Scrolling -Desain web dengan  menampilkan konten Horizontal atau menyamping)
• Parallax Scrolling- Desain web dengan layer atau  hanya 1 halaman (one page/single page)

Read More

Desain Mockup

Apa itu mockup

Mockup merupakan media visual yang digunakan untuk melihat preview sebuah konsep desain. Selanjutnya diberikan efek visual sehingga hasil gambar terlihat menyerupai wujud yang sebenarnya. Mockup akan memberikan gambaran desain sebelum diaplikasikan menjadi benda nyata sehingga memudahkan pekerjaan desainer. Mockup pun akan membantu desain terlihat nyata dan lebih menarik karena variasi dua dimensi dan tiga dimensi. bentuk mockup adalah gambaran mid-fidelity ataupun high-fidelity yang menggambarkan pilihan warna desain, layout, tipografi, iconography, visual navigasi, dan keseluruhan tampilan produk yang didesain. Mockup yang mempunyai tampilan menarik dan terkesan modern ini, tentu saja cocok digunakan saat presentasi atau dimasukkan ke dalam Graphic Standard Manual (buku GSM).

 

Fungsi Mockup

1. Mempermudah stakeholder

Mockup menggunakan gambaran high-fidelity, yaitu rencana desain yang sudah menampilkan informasi secara rinci dan menunjukkan dengan jelas bagaimana sebuah situs atau aplikasi akan dibuat.  Oleh karena itu, mockup adalah cara sederhana agar stakeholder dapat dengan mudah melihat dan memahami produk final yang akan dibuat. Stakeholder juga bisa memberikan masukan dan kritik mengenai desain tersebut sebelum melaju ke proses selanjutnya.

 

2.  Memberi perspektif realistis

Dengan rancangan mockup, desainer UI dan UX dapat melihat bagaimana semua elemen yang telah dirancang bekerja serealistis mungkin menyerupai produk final yang direncanakan. Masalah yang mungkin timbul ketika produk digunakan dapat terlihat dengan desain mockup.

 

3. Mempermudah perbaikan

Akan lebih mudah bagi desainer untuk memperbaiki kesalahan atau kekurangan pada desain sebelum desain tersebut dilanjutkan ke tahap coding. Ketika sudah masuk tahap coding, perbaikan akan lebih rumit. Developer web akan dapat mengerjakan coding untuk desain dengan leluasa jika tahu bahwa desain yang mereka buat kodenya telah benar-benar final

 

4. Hemat anggaran

Dengan memastikan tidak ada kesalahan lagi saat desain sudah difinalisasi, biaya produksi akan lebih murah dibanding harus memperbaiki desain dan mengulang coding dari awal jika melakukan proses desain produk tanpa mockup. Uang yang dihemat berkat perencanaan yang baik ini bisa dimanfaatkan untuk sektor produksi lainnya.

Mengapa Mockup Penting?

Mockup adalah tahap penting agar front-end developer tidak kesulitan untuk memperkirakan berapa lama proses pengembangan produk akan berjalan. Meskipun berupa gambaran statis, tetapi mockup dapat menjelaskan bagian-bagian yang akan didesain bergerak atau menggunakan animasi. Dibanding langsung masuk ke proses coding, akan lebih cepat jika menggunakan mockup terlebih dahulu sehingga developer bisa tahu berapa waktu yang dibutuhkan untuk menerjemahkan desain mockup menjadi produk nyata. Para front-end developer membutuhkan mockup untuk mengetahui warna, bentuk, font, serta elemen lain dalam desain yang diinginkan dan menterjemahkannya ke dalam kode. Tanpa mockup, akan sulit untuk mengetahui itu semua dan proses perancangan akan menjadi lebih lama.

Mockup adalah cara awal agar sebuah rancangan produk dilirik investor. Tanpa desain mockup yang bagus dan rinci, investor tidak akan tahu seberapa besar potensi situs atau aplikasi yang kamu rencanakan, dan tentu saja akan sulit untuk merealisasikan sebuah proyek tanpa investor dan dana yang cukup. Situs atau aplikasi buatanmu harus terlihat bagus. Selain itu, pengguna harus bisa menemukan apa yang mereka cari dengan mudah dan bernavigasi tanpa kesulitan. Tahap paling mudah untuk mengidentifikasi kebutuhan pengguna dan keselarasan fitur serta desain yang dirancang adalah mockup, oleh karena itu mockup sangatlah penting.

 

Read More

Desain Wireframe

 Wireframe

Wireframe adalah sebuah kerangka yang berfungsi untuk membuat tata letak suatu website agar sesuai dengan keinginan klien sebelum masuk ke proses desain atau coding. Proses wireframing biasanya dilakukan oleh seorang UI Designer dengan memanfaatkan software desain khusus wireframe atau coretan kertas secara manual. Adapun komponen yang menjadi bahan untuk proses wireframe antara lain meliputi, bagian header, body/content, footer, sidebar, dan beberapa komponen tambahan lainnya. Proses pembuatan wireframe website disebut wireframing di mana Anda akan mengatur semua komponen di atas sesuai dengan tata letak yang diinginkan. Wireframing biasanya dilakukan oleh UI Designer. Dialah orang yang bertanggung jawab membuat website menarik.  Seorang UI designer biasanya akan mendiskusikan wireframe website kepada tim web development atau klien untuk mendapat masukkan demi perbaikan desain. Setelah disepakati, kerangka dasar tersebut akan diwujudkan menjadi desain visual yang lebih rapi. 

 

Komponen Wireframe Website

1.Layout Utama

Hal pertama yang perlu dipersiapkan dalam membuat wireframe website adalah antarmuka atau layout utama. Elemen yang termasuk dalam layout sendiri meliputi bagian kepala (header), menu navigasi, body, pemilihan jenis dan ukuran font, hingga pemilihan letak sidebar apakah ada di sebelah kiri atau sebelah kanan.

 

2. Komponen Navigasi

Salah satu komponen dalam wireframe website adalah navigasi. Komponen ini berguna untuk mengarahkan pengunjung menjelajahi website Anda dengan mudah. Desain yang digunakan bisa berupa menu, tanda panah, atau ikon lain sesuai keinginan. Dengan komponen navigasi yang jelas, nantinya website akan mampu memberikan user experience yang baik kepada pengunjungnya.\

 

3. Komponen Interface

Komponen interface adalah komponen yang terkait dengan media interaksi antara tampilan website dengan pengunjung. Komponen ini digunakan sebagai penunjang informasi pada pengunjung yang biasanya berupa  button, link, judul, font size, logo, dan lain-lain.

4. Komponen Informasi

Komponen informasi merupakan salah satu komponen utama dalam wireframe website Sesuai namanya, komponen informasi merupakan konten utama yang ingin disampaikan pada audiens. Contohnya, input, thumbnail, link, paragraf, dan lain-lain. Oleh karena itu, penting untuk menempatkan komponen ini di bagian yang paling mudah dilihat pengunjung.

 

5 Komponen Tambahan

Komponen tambahan bisa dimasukkan dalam wireframe sesuai jenis dan kebutuhan website. Sebagai contoh jika merancang website untuk toko online. Komponen tambahan yang bisa Anda gunakan seperti, fitur cek resi, form konfirmasi pemesanan, hingga layanan chat dengan pembeli secara langsung.

 

Tipe-Tipe Wireframe

1. Wireframe low-fidelity

Wireframe low-fidelity merupakan representasi visual yang paling dasar. Biasanya, desain wireframe low-fidelity digunakan sebagai titik awal proses desain wireframe. Wireframe low-fidelity adalah desain kasar yang dibuat tanpa ukuran dan akurasi piksel, jadi, desain ini masih sangat sederhana dan tidak terinci.

 

2. Wireframe mid-fidelity

Kebanyakan desainer UI dan UX menggunakan wireframe mid-fidelity. Wireframe mid-fidelity memiliki detail yang lebih baik dibanding low-fidelity. Semua fitur web ataupun aplikasi dapat terdiferensiasi dengan jelas pada tipe wireframe ini. Biasanya, wireframe mid-fidelity dibuat dengan warna hitam putih atau sedikit abu-abu untuk memperjelas elemen-elemen yang ada. Tool yang bisa digunakan untuk membuat wireframe mid-fidelity adalah Sketch atau Balsamiq.

 

3. Wireframe high-fidelity

High-fidelity wireframe adalah tipe wireframe yang paling spesifik. Kerangka desain sudah menggunakan gambar dan tulisan konten yang sebenarnya. Tak hanya itu, tipe wireframe ini juga sudah dilengkapi menu interaktif dalam desainnya.

Read More

Framework

framework adalah fondasi dengan tingkat kerumitan yang ditentukan dan dapat diperluas oleh pemrogram dengan menggunakan kode mereka sendiri termasuk kompiler, juru bahasa, atau API. Secara umum, framework menyediakan lingkungan yang memfasilitasi jenis pemrograman tertentu untuk proyek pengembangan software. Sebuah framework dalam pemrograman seringkali merupakan struktur berlapis yang menunjukkan program apa yang dapat atau harus dibangun dan bagaimana framework akan saling terkait. Framework sengaja diciptakan untuk membantu developer mengembangkan aplikasi atau website lebih cepat serta tersusun dan terstruktur.  Dengan menggunakan framework Anda akan lebih mudah untuk membuat aplikasi atau website, karena Anda hanya perlu menyusun komponen-komponen pemrograman yang sudah jadi. Sehingga developer dan programmer tidak perlu melakukan koding program yang diulang-ulang.

Jenis-Jenis Framework

1. Framework JavaScript

• Vue.js — Walaupun terhitung pemain baru, Vue.js dengan cepat menjadi populer. Selain ringan dengan ukuran hanya 58KB saja, Vue.js juga sangat sederhana dan memiliki keamanan yang baik.
• React.js — Ringan dan sangat cocok digunakan untuk mengembangkan website besar. Memiliki segudang fitur canggih seperti reusable component dan declarative yang memudahkan Anda.
• Angular.js — Sangat direkomendasikan untuk pemula. Terutama bagi Anda yang ingin mengembangkan website dengan konsep Rich Internet Application (RIA) atau Single Page Application (SPA).
• Ember.js — Dikenal mempunyai kecepatan dan performa kodenya yang patut diacungi jempol. Ember.js juga mempunyai banyak plugin yang bisa meningkatkan kinerja lebih baik lagi.

2. Framework CSS

• Bootstrap — Merupakan framework CSS terpopuler. Menawarkan segudang fungsi dengan elemen desain yang responsif. Plus, Bootstrap lah yang pertama kali mempunyai filosofi “Mobile-First.”
• Foundation — Menggunakan sistem open-source berbasis SASS, Foundation menawarkan elemen yang fleksibel, modern, dan kaya akan kustomisasi. Foundation juga menyediakan template siap pakai untuk Anda.
• Bulma — Penggunaannya mudah, open-source, responsif, dan bisa bekerja optimal di berbagai perangkat. Jadi, tak heran walaupun Bulma pendatang baru, tapi sudah cukup populer.
• Semantic UI — Fokus kepada penggunaan human-friendly HTML, sehingga memudahkan Anda. Selain itu, menyediakan 3000+ variabel tema dengan 50.000+ komponen UI.
• UIKit — Cocok bagi Anda yang ingin desain serba minimalis, tapi tetap membuatnya berkelas dan elegan.
• Materialize CSS — Dirancang oleh Google, Materialize CSS bisa menghasilkan elemen dan fitur berkualitas dengan desain unik anti-mainstream. Plus, responsif dan mempunyai kompatibilitas yang baik.

3. Framework PHP

• Laravel : Framework PHP terpopuler di dunia. Laravel mempunyai sintaks yang elegan, rapi, dan ringkas. 
• CodeIgniter : Sangat cocok bagi Anda yang baru belajar PHP framework. Sebab, CodeIgniter mudah dipahami dan mempunyai dokumentasi lengkap.
• Symfony : Menawarkan fitur bundle dan komponen. Sehingga Anda bisa mengambil sebagian fungsi PHP, atau keseluruhan secara langsung.
• Yii : Mempunyai konfigurasi cukup mudah dengan performa dan tingkat keamanan yang baik.
• Zend  : Cocok digunakan bagi Anda yang sudah mengerti dasar-dasar PHP. Sebab, Zend digunakan untuk pengembangan website enterprise yang kompleks.
• CakePHP : Menawarkan kumpulan library yang berisi banyak komponen. Bahkan bisa dibilang komplit.

Read More

 Apa Itu User Experience ?

User experience adalah bagaimana pengalaman pengguna dalam berinteraksi menggunakan produk digital Anda. Pengalaman ini dilihat dari betapa mudahnya pengguna untuk mendapatkan apa yang mereka inginkan dari produk tersebut. User Experience dari sebuah produk yang bagus biasanya tidak akan mempersulit penggunanya untuk mencapai tujuan mereka. Baik itu dari desain UI yang friendly, menu yang simpel, produk yang ringan saat diakses dan sebagainya. Namun sebaliknya, UX yang buruk menjadikan penggunanya merasa frutasi karena kesulitan memperoleh apa yang mereka butuhkan. Jika sudah demikian, terdapat banyak efek buruk yang dapat terjadi pada produk digital tersebut.Sedangkan, user experience yang buruk membuat pengguna frustasi karena kesulitan untuk mendapatkan apa yang mereka inginkan. Kalau sudah begini, ada banyak efek buruk yang bisa terjadi kepada Anda.

 

Fungsi User Experience

1. Memudahkan Pengguna

Fungsi User Experience yang pertama yaitu memudahkan para pengguna saat memakai aplikasi sebab di dalamnya sdah tersedia penilaian dari aspek usability. Saat ini setiap aplikasi atau software pasti sudah dibuat supaya para pengguna mudah untuk memakainya.

 

2. Menarik Minat Para Pengguna

Fungsi User Experience berikutnya yaitu untuk menarik minat para penggunanya agar menggunakan aplikasi secara terus menerus. Sebuah aplikasi yang tidak memiliki daya tarik bagi pengguna, pasti akan cepat ditinggalkan atau tidak dilirik sama sekali.

 

3. Meningkatkan Kesuksesan

Seperti yang sudah dijelaskan sebelumnya, bahwa para pengguna akan lebih cepat meninggalkan aplikasi-aplikasi yang menurut mereka tidak memberikan pengalaman yang menarik. Misalnya, aplikasi WhatsApp dari waktu ke waktu semakin banyak digunakan oleh para pengguna smartphone karena aplikasi ini mampu memberikan pengalaman pengguna yang sangat menarik. Anda dapat membandingkan aplikasi WhatsApp dengan aplikasi kompetitornya yang justru semakin menurun dari waktu ke waktu. Hal inilah yang menjadikan User Experience sangat penting diterapkan untuk sebuah aplikasi agar meningkatkan atau mempertahankan kesuksesan.

 

4. Menghasilkan UI yang Bagus

Perlu Anda ketahui bahwa User Interface (UI) adalah keluaran dari penerapan User Experience. Apabila penerapan UX di sebuah aplikasi sangat diperhatikan, maka dapat menghasilkan desain UI yang sangat bagus sehingga terkesan lebih menarik dan elegan.

 

5. Untuk Memenangkan Persaingan

Penerapan User Experience pada produk-produk digital bertujuan untuk memenangkan persaingan. Terlebih dari tahun ke tahun produk digital yang hadir di dunia juga semakin bervariasi. Untuk memenangkan persaingan produk-produk digital itulah, maka sebuah produk harus memberikan pengalaman yang menarik bagi setiap pengguna.

 

User Experience Questionnaire

Pengujian UX dapat menggunakan UEQ (User Experience Questionnaire (UEQ). UEQ merupakan alat atau kuesioner yang mudah dan efisien untuk mengukur UX. UEQ sendiri memiliki 26 komponen pertanyaan dan tujuh pilihan jawaban. Versi Asli UEQ menggunakan Bahasa Inggris. UEQ ada versi Bahasa Indonesia. UEQ (User Experience Questionnaire) merupakan alat atau kuesioner yang mudah dan efisien untuk mengukur User Experience (UX). UEQ ini memudahkan kita untuk mengukur UX pada sebuah desain aplikasi. UEQ berisi 6 skala penilaian, yaitu:

• Daya Tarik (Attractiveness): Apakah pengguna menyukai atau tidak menyukai produk?
• Kejelasan (Perspicuity): Apakah mudah untuk mengenal produk? Apakah mudah untuk
• belajar bagaimana gunakan produknya?
• Efisiensi (Efficiency): Bisakah pengguna menyelesaikan tugas mereka tanpa usaha yang
• sederhana?
• Ketepatan (Dependability): Apakah pengguna merasa terkendali terhadap interaksi?
• Stimulasi (Stimulation): Apakah menarik dan memotivasi untuk menggunakan produk
• Kebaruan (Novelty): Apakah produk itu inovatif dan kreatif? Apakah produk menangkap minat pengguna?

 

Read More

 Apa itu Usability ?

Menurut Jacob Nielson (1993), Usability dapat dikatakan sebagai ukuran kualitas pengalaman pengguna ketika berinteraksi dengan produk atau sistem apakah situs web, aplikasi perangkat lunak, teknologi bergerak, maupun peralatan-peralatan lain yang dioperasikan oleh pengguna. Hal ini meliputi learnability (kemudahan mengoperasikan fungsi-fungsi), efficiency (ukuran funsi dapat cepat dioperasikan), memorability (mengetahui penggunaan bahkan setelah lama tidak dioperasikan), errors (kesalahan dan perbaikan atas kesalahan yang dilakukan oleh pengguna), dan satisfaction (kepuasan pengguna).

Sedangkan berdasarkan International Organization for Standardization (ISO), Usability adalah tingkat dimana produk bisa digunakan oleh pengguna tertentu untuk mencapai tujuannya dengan lebih efektif, efisien, dan memuaskan dalam ruang lingkup penggunanya. Dari kedua definisi di atas dapat disederhanakan bahwa definisi dari usability itu adalah ukuran kemudahan manusia dalam menggunakan suatu produk atau program aplikasi.

 

Alat Uji Usability

• SUS (System Usability Scale)
• QUIS (Questionnaire for User Interface Satisfaction)
• CSUQ (Computer System Usability Questionnaire)
• Words (adapted from Microsoft’s Product Reaction Cards)

SUS (System Usability Scale)

Usability Scale (SUS) merupakan kuesioner untuk mengukur persepsi kegunaan. Diciptakan oleh John Brooke pada tahun 1986 dan dahulu digunakan untuk menguji sistem elektronik kantor. System Usability Scale (SUS) berisi 10 pertanyaan dimana partisipan diberikan pilihan skala 1–5 untuk dijawab berdasarkan pada seberapa banyak mereka setuju dengan setiap pernyataan tersebut terhadap produk atau fitur yang kita uji. Nilai 1 berarti sangat tidak setuju dan 5 berarti sangat setuju dengan pernyataan tersebut.  Versi Asli SUS menggunakan Bahasa Inggris. Namum, SUS ada juga yang versi Bahasa Indonesia.

 

Aturan Perhitungan Skor SUS

1. Setiap pertanyaan bernomor ganjil, skor setiap pertanyaan yang didapat dari skor pengguna akan dikurangi 1.
2. Setiap pertanyaan bernomor genap, skor akhir didapat dari nilai 5 dikurangi skor pertanyaan yang didapat dari pengguna.
3. Skor SUS didapat dari hasil penjumlahan skor setiap pertanyaan yang kemudian dikali 2,5.

 

 

Tahapan Pengambilan Data SUS

• Prototype aplikasi harus selesai
• Cari pengguna (responden)
• Diberikan kuesioner (angket)
• Responden mengisi form data diri
• Responden mengerjakan tugas (task)
• Responden mengisi kuesioner SUS
• Wawancara (Opsi)

 

Dalam Usability terdapat beberapa kriteria yang harus dipenuhi yaitu :

1. Efektif untuk digunakan ( Effectiveness)

Produk yang dibuat harus dapat digunakan untuk mengerjakan tugas tertentu. Atau dapat dikatakan seberapa bagus sebuah produk dalam mengerjakan tugas yang harus dilakukan.

2. Efisiensi untuk digunakan ( Efficiency)

Efisiensi dikaitkan pada seberapa cepat user dapat mencapai tujuan pada saat menggunakan produk tersebut.

3. Aman untuk digunakan (Safety)

Keamanan yang dimaksud meliputi pencegahan pengguna dari keadaan bahaya dan situasi yang tidak diharapkan. Jadi pengguna merasa aman saat menggunakan produk dan juga ada pencegahan pengguna dari hal yang bahaya.

4. Mempunyai kegunaan yang baik (Utility)

Utility yang dimaksud berkaitan dengan sejauh mana produk dapat menyediakan fungsi yang baik sehingga pengguna dapat melakukan yang dibutuhkan atau yang ingin dilakukan.

 

5. Mudah dipelajari ( Learnability)

Tingkat kemudahan untuk mempelajari sebuah produk sebelum digunakan. Pengguna seharusnya tidak menghabiskan banyak waktu untuk mempelajari sebuauh produk yang akan digunakan.

6. Mudah untuk diingat (Memorability)

Sekali pengguna sudah pernah mempelajari sebuah produk, maka seterusnya akan ingat bagaimana cara menggunakannya. Umumnya UX terdiri dari tiga karakteristik yaitu pengguna yang terlibat, bagaimana pengguna berinteraksi dengan sebuah produk atau sebuah sistem , dan pengalaman apa yang dirasakan oleh pengguna yang menarik , dapat diobservasi dan dapat diukur (Tullis & Albert, 2013).

Read More

Apa Itu User Interface (UI) ?

 

User Interface adalah tampilan visual sebuah produk yang menjembatani sistem dengan pengguna (user). Tampilan UI dapat berupa bentuk, warna, dan tulisan yang didesain semenarik mungkin. Secara sederhana, UI adalah bagaimana tampilan sebuah produk dilihat oleh pengguna. UI menjadi penghubung langsung antara sistem dengan penggunanya. UI merupakan perpaduan dari elemen grafis dan sistem navigasi. UI efektif untuk membuat fokus pengguna pada objek dan subjek yang dilihat menjadi lebih baik. Tujuan dari user interface adalah untuk meningkatkan usability dan tentunya user experience.

 

Desain user interface memang sangat penting karena itu akan menentukan bagaimana seseorang berinteraksi dengan website dan aplikasi tersebut. User interface juga menentukan apakah pengunjung website atau pengguna aplikasi dapat menavigasi website atau aplikasi dengan mudah. Saat seseorang mengunjungi website Anda, user experience harus menjadi prioritas Anda. Kalau orang memiliki user experience yang baik di website Anda, Anda akan mendapat conversion rate yang lebih tinggi. Selain itu, mereka juga akan mempromosikan website atau aplikasi Anda ke orang-orang lain. Kalau mereka mengalami pengalaman buruk dengan website atau aplikasi Anda, pasti mereka tidak mau menggunakannya lagi. Jika Anda adalah bisnis online, ini tentunya penting. Untuk memiliki user experience yang baik, Anda memerlukan user interface yang mudah dinavigasi dan digunakan.

 

UI Mobile

Interaksi pengguna dengan perangkat mobile harus dirancang sedemikian rupa sehingga rentang waktu tindakan pengguna lebih pendek dari pada di perangkat dekstop, tindakan harus sederhana namun terfokus. Selain itu, ukuran layar pada perangkat mobile juga kecil sehingga jumlah informasi yang dapat ditampilkan terbatas. Desain UI haruslah cepat saat dibuka

 

Metode Pembuatan Desain UI Mobile

1. Material Design for Android (MDfA)

MDfA adalah panduan untuk membuat desain UI pada sistem operasi Android yang mencakup visual, gerak, dan interaksi di seluruh platform dan perangkat . MDfA ini merupakan template UI Android standar yang digunakan pada aplikasi bawaan atau aplikasi milik Google. Semua panduan mengenai standar desain UI aplikasi Android tersedia secara lengkap, seperti tema, widgets, animasi, dan komponen UI lainnya.

 

2. Common Element Sets (CES)

CES merupakan seperangkat elemen UI yang umum atau populer digunakan oleh aplikasi dan muncul setidaknya satu kali pada desain UI lainnya. CES pada UI bisa seperti desain tata letak, desain tombol, desain navigasi, desain form, desain produk dan lain sebagainya. Komponen UI yang umum digunakan dapat merujuk dari desain aplikasi yang populer saat ini.

 

Metode Pembuatan Desain UI Website

Ada 3 prinsip dalam mendesain sebuah website menurut Veen’s design principles, yaitu bisa menjawab pertanyaan:

1. Di mana saya?
2. Kemana saya bisa pergi?
3. Ada apa di sini?

Veen’s Design Principles

1. Menggambarkan website harus memiliki header yang menjelaskan website apa
2. Menggambarkan adanya navigasi yang diposisikan di sidebar
3. Menggambarkan konten dari website.

Jenis Desain UI Website

• Static - Desain web memiliki ukuran tetap pada semua  resolusi browser (pixel)
• Fluid - Desain web dapat menyesuaikan lebar layout  sesuai dengan resolusi browser (%)
• Responsive – Desain web dapat berganti layout pada  resolusi tertentu (desktop&mobile)
• Responsive fluid – Gabungan Responsive & Fluid (%)
• Horizontal Scrolling -Desain web dengan  menampilkan konten Horizontal atau menyamping)
• Parallax Scrolling- Desain web dengan layer atau  hanya 1 halaman (one page/single page)

Read More