CONCEPT IN

INTERFACE DESIGN
01/09/2021 2
BIDANG STUDI

01/09/2021 3
BIDANG STUDI/ILMU IMK
1. Teknik elektronika & ilmu komputer
Memberikan kerangka kerja untuk dapat merancang sistem IMK
2. Psikologi
Memahami sifat & kebiasaan, persepsi & pengolahan kognitif, ketrampilan
motorik pengguna
3. Perancangan grafis dan tipografi
Sebuah gambar dapat bermakna sama dengan seribu kata. Gambar dapat
digunakan sebagai sarana dialog cukup efektif antara manusia & komputer
4. Ergonomik
Berhubungan dengan aspek fisik untuk mendapatkan lingkungan kerja yang
nyaman, misal : bentuk meja & kursi kerja, layar tampilan, bentuk keyboard,
posisi duduk, pengaturan lampu, kebersihan tempat kerja
5. Antropologi
Ilmu pengetahuan tentang manusia, memberi suatu pandangan tentang cara kerja
berkelompok yang masing – masing anggotanya dapat memberikan konstribusi sesuai
dengan bidangnya
6. Linguistik
Merupakan cabang ilmu yang mempelajari tentang bahasa. Untuk melakukan dialog
diperlukan sarana komunikasi yang memadai berupa suatu bahasa khusus, misal
bahasa grafis, bahasa alami, bahasa menu, bahasa perintah
7. Sosiologi
Studi tentang pengaruh sistem manusia-komputer dalam struktur sosial, misal adanya
PHK karena adanya otomasi kantor.
8. Perancangan Industri
Membahas tentang produk interaktif. Penggunaan layar sentuh, beserta teknologi
dibelakangnya, telah menjadi bahan kajian yang menarik dan banyak digunakan.
HCI (Human Computer Interaction) Concept
Sebenarnya antarmuka seperti
apa yg diinginkan oleh User ?
CONTOH UI
CONTOH UI
TUJUAN USER INTERFACE
◦ Agar sistem komputer yang digunakan user bisa memperhatikan
aspek-aspek kemudahan user :
◦ Efektifitas
◦ Fleksibilitas ( keluwesan )
◦ Kemudahan dipelajari
◦ Sikap orang terhadap sistem
◦ Hubungan manusia, interface dan komputer adalah :
◦ Manusia  Interface  Sistem Komputer
ANTARMUKA MANUSIA & KOMPUTER
◦ Antarmuka komputer hrs user friendly (ramah dengan pengguna)
yaitu :
 antarmuka yg bagus
 mudah dioperasikan
 mudah dipelajari
pengguna merasa senang menggunakan software tsb.
JENIS ANTARMUKA KOMPUTER

◦ Antarmuka berbasis teks

◦ Antarmuka berbasis grafis / GUI (Graphical User Interface)
◦ Antarmuka berbasis web
◦ Antarmuka berbasis mobile
PIRANTI BANTU PENGEMBANG SISTEM

◦ Pemrograman Berorientasi Objek :

◦ Visual Basic
◦ Delphi
◦ Visual C++
◦ Java
◦ Visual dBase
◦ dll
 STRATEGI PENGEMBANGAN ANTARMUKA

01/09/2021 14
Apa Bedanya UI & UX Design?
“UI is about how the product is laid out (tertata)”

“UX is about how the product feels”

UI DESIGN
UI DESIGN
◦ UI Design adalah bagaimana suatu product yang dibuat terlihat
seperti apa. Apa yg bisa dilihat oleh mata (visible) ya itu UI Design.
◦ Gambar diatas memperlihatkan ranah utama dari user interface
yang terdiri dari interface design, grafis, icon, dan visual design.
◦ User interface designer akan mampu memproduksi 4 hal diatas
dengan sangat baik. Tujuan utama dari UI adalah menampilkan
interface yang memiliki keseragaman yang baik dari segi warna,
font, gambar dll.
UI DESIGN
◦ Untuk UI designer mereka lebih fokus pada visualisasi, coloring,
dan hal-hal yang berkaitan dengan kreativitas dari interface yang
akan digunakan oleh user.
◦ Visualisasi adalah kunci dari UI design dan fokus pada bagaimana
tampilan interface yang akan dipakai user bisa menjadi menarik.
Penataan bentuk yang kita lihat pada user interface adalah karya
seorang UI designer.
Pengertian User Interface
Antarmuka pemakai (User Interface) merupakan mekanisme komunikasi antara pengguna (user) dengan
sistem. Antarmuka pemakai (User Interface) dapat menerima informasi dari pengguna (user) dan
memberikan informasi kepada pengguna (user) untuk membantu mengarahkan alur penelusuran masalah
sampai ditemukan suatu solusi.
Pengertian User Interface
Contoh konsep luas user interface mencakup aspek interaktif sistem operasi komputer, perkakas tangan,
operator kontrol mesin berat. dan proses kontrol. Pertimbangan desain yang berlaku saat membuat user
interface berkaitan dengan ergonomik dan psikologi.
User interface yang ada untuk berbagai sistem, dan menyediakan cara :
◦ Input, memungkinkan pengguna untuk memanipulasi sistem.
◦ Output, memungkinkan sistem untuk menunjukkan efek manipulasi pengguna.
Macam-macam User Interface
User Interface ada dua jenis, yaitu :
1. Graphical User Interface (GUI) : Menggunakan unsur-unsur multimedia (seperti gambar, suara,
video) untuk berinteraksi dengan pengguna.
2. Text-Based : Menggunakan syntax/rumus yang sudah ditentukan untuk memberikan perintah.
Keunggulan GUI
Saat ini interface yang banyak digunakan dalam software adalah GUI (Graphical User Interface). GUI
memberikan keuntungan seperti:
1. Mudah dipelajari oleh pengguna yang pengalaman dalam menggunakan komputer cukup minim.
2. Berpindah dari satu layar ke layar yang lain tanpa kehilangan informasi.
3. Akses penuh pada layar dengan segera untuk beberapa macam tugas/keperluan.
Karakteristik GUI
Tipe-tipe Interaksi Dengan User
Ada 5 tipe utama interaksi untuk user interaction:
1.Direct manipulation – pengoperasian secara langsung : interaksi langsung dengan objek pada layar.
Misalnya delete file dengan memasukkannya ke trash. Contoh: Video games. Kelebihan : Waktu
pembelajaran user sangat singkat, feedback langsung diberikan pada tiap aksi sehingga kesalahan
terdeteksi dan diperbaiki dengan cepat. Kekurangan : Interface tipe ini rumit dan memerlukan banyak
fasilitas pada sistem komputer, cocok untuk penggambaran secara visual untuk satu operasi atau objek.
2.Menu selection – pilihan berbentuk menu : Memilih perintah dari daftar yang disediakan. Misalnya saat
click kanan dan memilih aksi yang dikehendaki. Kelebihan : User tidak perlu ingat nama perintah.
Pengetikan minimal. Kesalahan rendah. Kekurangan : Tidak ada logika AND atau OR. Perlu ada struktur
menu jika banyak pilihan. Menu dianggap lambat oleh expert user dibanding command language.
3.Form fill-in – pengisian form : Mengisi area-area pada form. Contoh : Stock control. Kelebihan :
Masukan data yang sederhana. Mudah dipelajari Kekurangan : Memerlukan banyak tempat di layar.
Harus menyesuaikan dengan form manual dan kebiasaan user.
Tipe-tipe Interaksi Dengan User
4. Command language – perintah tertulis : Menuliskan perintah yang sudah ditentukan pada program.
Contoh: operating system. Kelebihan : Perintah diketikan langsung pada system. Misal UNIX, DOS
command. Bisa diterapkan pada terminal yang murah.Kombinasi perintah bisa dilakukan. Misal copy
file dan rename nama file. Kekurangan : Perintah harus dipelajari dan diingat cara penggunaannya, tidak
cocok untuk user biasa. Kesalahan pakai perintah sering terjadi. Perlu ada sistem pemulihan
kesalahan.Kemampuan mengetik perlu.
5. Natural language – perintah dengan bahasa alami : Menggunakan bahasa alami untuk mendapatkan
hasil. Contoh: search engine di Internet. Kelebihan: Perintah dalam bentuk bahasa alami, dengan kosa
kata yang terbatas (singkat), misalnya kata kunci yang kita tentukan untuk dicari oleh search engine. Ada
kebebasan menggunakan kata-kata. Kekurangan: Tidak semua sistem cocok gunakan ini. Jika digunakan
maka akan memerlukan banyak pengetikan.
Bahasa dalam User Interface
Tujuan sebuah user interface adalah mengkomunikasikan fitur-fitur sistem yang tersedia agar user mengerti
dan dapat menggunakan sistem tersebut. Dalam hal ini penggunaan bahasa amat efektif untuk membantu
pengertian, karena bahasa merupakan alat komunikasi tertua kedua gestur, yang dipakai orang untuk
berkomunikasi sehari-harinya.
Tanpa bahasa pun kadang ikon bisa tidak jelas maknanya, sebab tidak semua lambang ikon bisa bersifat
universal.
Meski penting, namun sayangnya kadang penggunaan bahasa, seperti pemilihan istilah, sering dianggap
kurang begitu penting. Bahasa sering menjadi sesuatu yang nomor dua ketimbang elemen-elemen interface
lainnya.
DASAR-DASAR UX
UX DESIGN
UX DESIGN
◦ UX Design adalah proses untuk membuat product yang telah kita buat menjadi mudah untuk
digunakan dan tidak membingungkan ketika digunakan oleh user
◦ User experience memiliki ranah yang lebih luas dari UI, karena ranah UX ini dimulai dengan
research pasar sampai kemudian diimplementasi kedalam sebuah interface
◦ UX designer harus mengeksplorasi lebih dalam bagaimana memecahkan masalah spesifik
seorang pengguna. Tanggung jawab seorang UX designer adalah memastikan bahwa setiap
langkah demi langkah berjalan dengan logis dan jelas. Salah satu hal yang harus dipahami UX
designer ialah harus memahami betul bagaimana kebiasaan dan kebutuhan dari user
◦ (https://uxchecklist.github.io/)  Checklist
UX DESIGN
SIMPULAN
◦ Jadi kesimpulannya UI & UX itu adalah hal yang berbeda tapi
saling terkait. Dan tugas dari UI/UX Designer sendiri bukan berarti
dia cuma bisa membuat design suatu aplikasi atau website yang
keren dan bagus. Tapi bagaimana memecahkan suatu masalah,
membuat aplikasi tersebut terlihat simple, dan mudah untuk
digunakan
USER EXPERIENCE
“DESAIN SPRINT”
KONSEP DISAIN SPRINT
◦ Design sprint adalah suatu metode untuk membangun konsep produk
dan prototype dalam waktu 5 hari dimana memiliki 5 tahapan yang sangat
komunikatif dan interaktif untuk mengeluarkan semua ide, inspirasi,
kreatifitas, masalah-masalah yang ada, solusi yang kemudian diwujudkan
dalam prototype yang harus dan di cross check ke calon pengguna.
◦ Design Sprint akan membantu seluruh tim untuk mendapatkan tujuan dan arah
yang jelas. Penggunaan metode ini sangat membantu untuk memulai produk
baru, penambahan feature produk, workflow, bisnis dan memecahkan
permasalahan terhadap produk yang ada.
KONSEP DISAIN SPRINT
◦ Design Sprint merupakan metodologi yangdiciptakan oleh Google
yang membantu tim untukmenyelesaikan dan menguji masalah
design dalam 2-5 hari
◦ Menggabungkan dua konsep: sprint dari Agile dan Design Thinking
oleh IDEO
TAHAPAN DESAIN SPRINT
Proses design sprint ini terdiri atas 6 tahapan :
◦ Pemahaman (Understand)
◦ Menentukan (Define)
◦ Variasi (Diverge)
◦ Konvergensi (Decide)
◦ Purwa Rupa (Prototype)
◦ Validasi (Validate)
TAHAPAN DESAIN SPRINT
TAHAPAN DESAIN SPRINT (1)
Persiapan
◦ Persiapan lokakarya sangat penting bagi keberhasilan Sprint.
◦ Merekrut sekelompok 8 peserta dari berbagai aspek perusahaan: bisnis, pemasaran, teknologi,
produk dan desain sangatlah penting untuk mendapatkan perspektif terbaik dari tantangan.
◦ Selanjutnya, persiapan logistik termasuk menemukan tempat yang tepat, mengumpulkan
peralatan dan membuat jadwal yang sebenarnya sehingga sprint akan bekerja dengan lancar.
◦ Ada sekelompok orang yang tepat—maksudnya cukup mewakili pihak-pihak yang penting.
Contoh: (Designer, CEO, Product Manager, User Expert, Software Developer, dll).
◦ Ada fasilitator. Pastikan jadwal mereka kosong lima hari ke depan. Pastikan logistik untuk
Design Sprint terpenuhi (kertas, pulpen, spidol, post-it, dll)
TAHAPAN DESAIN SPRINT (2)
Persiapan
◦ Beberapa diantaranya yang akan Anda butuhkan untuk menjalankan design sprint:
◦ Sticky notes
◦ Voting dot sticker
◦ Kertas A4
◦ Erasable marker
◦ Pensil
◦ Buku Catatan
◦ WhiteBoard
◦ Kertas Berwarna
HARI PERTAMA
TAHAPAN DESAIN SPRINT (3)
◦ Hari Pertama: Understanding
◦ Hari pertama design sprint ini adalah menyamakan gelombang/persepsi terhadap pembahasan produk.
Output dari hari pertama ini adalah sketch user story yang terpenting.
◦ Perjelas apa yang menjadi masalah Anda dan apa yang akan Anda lakukan untuk menyelesaikannya.
“Jika Anda tidak Benar maka Anda akan dalam Masalah Besar”. Itulah kira-kiranya maksud dari
Understand.
◦ Pemahaman disini menjelaskan bahwa Tim Anda harus mampu melihat dengan jelas masalah konsumen
yang perlu diselesaikan melalui produk. Disinilah tantangannya agar Anda mereview hasil observasi dan
penelitian terhadap konsumen atau pengguna potensial dari produk.
TAHAPAN DESAIN SPRINT (4)
◦ Hari Pertama: Definding (Menentukan)
◦ Setelah Anda memahami tantangan dan komponennya, selanjutnya mendefinisikan strategi awal dari
solusi yang kita cari.
◦ Kita mulai dengan membuat berbagai personas yang menggambarkan pengguna produk, membuat peta
perjalanan saat dikenalkannya produk pertama kali sampai menjadi “power user“.
◦ Kemudian kita buat pernyataan pengguna yang merupakan kalimat sederhana dengan menggambarkan
karakteristik pengguna, kebutuhannya, motivasi apa yang paling dia hargai.
◦ Sebagai referensi berikut ada salah satu kutipan singkat tweet dari Google yang sangat
menginspirasi ketika merilis “OnHub” router
HARI KEDUA
TAHAPAN DESAIN SPRINT (5)
◦ Hari Kedua: Diverging (Variasi)
Hari kedua, Lakukanlah Brainstorming untuk mendapatkan beberapa pilihan
jenis produk. Ada beberapa cara untuk melakukan hal ini, termasuk
brainstorming tradisional atau menggunakan alat bantu. Anda juga dapat
melakukan permainan untuk menghasilkan sesuatu yang baru. Menggali dan
mengeluarkan solusi-solusi dengan beberapa aktifitas yang menarik seperti
mind map, crazy eights, silent critique dan lain-lain
◦ Tujuan di hari ini adalah menghasilkan sebanyak mungkin opsi solusi, untuk
memecahkan satu masalah bersama.
HARI KETIGA
TAHAPAN DESAIN SPRINT (4)
◦ Hari Ketiga: Deciding
◦ Pada hari ketiga, setelah mendapatkan beberapa pilihan melalui Brainstorming, selanjutnya
Anda akan meranking dan memilih. Pada fase ini, penting untuk diingat Anda ada dua fase
yakni Prototyping dan Testing. Jadi, ketika Anda sudah memutuskan solusi apa yang akan
dikerjakan, Anda tidak lagi berbicara produk secara abstrak. Saatnya sekarang untuk membuat
peringkat solusi untuk dieksekusi oleh sebuah tim. Singkatnya, “konvergen” adalah fase
menyaring ide-ide Anda ke dalam satu atau dua solusi yang dapat diuji. Solusi-solusi yang
didapat dari hari kedua, diberikan porsi yang sesuai dan dibahas dengan teknik tertentu untuk
dapat dibuat prototype.
◦ Tujuan di hari ini adalah menemukan satu atau lebih story board, yang ingin diuji nilai
manfaatnya ke pengguna di hari kelima. Proses awalnya adalah voting, lalu dilanjutkan
dengan penggabungan ide-ide yang serupa atau komplementer. Lalu diakhir dengan memilih
—baik dengan voting ataupun tidak—satu atau lebih story board untuk divalidasi.
HARI KEEMPAT
TAHAPAN DESAIN SPRINT (5)
◦ Hari Keempat: Prototyping
◦ Tujuan di hari ini adalah membuat versi prototype dari story board
yang sudah dipilih kemarin. Prototype bisa dibuat dengan software
sederhana seperti Keynote atau Power Point. Prototype
menggunakan program asli baru dilakukan, jika prototype ala
wireframe dinilai kurang bisa menggambarkan manfaat software.
HARI KELIMA
TAHAPAN DESAIN SPRINT (6)
◦ Hari Kelima: Validating
◦ Pada hari terakhir ini prototype diuji secara langsung kepada calon pengguna.
Semua hal yang terjadi direkam dan dicatat di ruang observasi. Hasil dari
validate ini akan menentukan proses selanjutnya, apakah iterasi besar atau
kecil.
◦ Tujuan di hari ini adalah mendapatkan pembelajaran penting dari pengguna
terhadap prototype yang dibuat kemarin. Informasi penting tersebut
umumnya berupa
◦ angka metrik yang ditentukan di hari pertama &
◦ masukan-masukan lain dari pengguna.
TAHAPAN DESAIN SPRINT (7)
◦ Keluaran Design Sprint
◦ Dalam bentuk rancangan-rancangan dengan respon yang positif,
ataupun yang ternyata negatif.
◦ Dengan Design Sprint, setiap pihak bisa menilai secara (lumayan
valid) manfaat bisnis dari rancangan kecil software, bahkan tanpa
menulis satu baris kodepun.
◦ Manfaat dari Design Sprint—atau lebih tepatnya Prototyping—
adalah komunikasi yang jauh lebih baik antara orang bisnis dengan
orang teknis.
CONTOH MOCKUP
CONTOH MOCKUP
CONTOH MOCKUP