TUGAS INTERAKSI MANUSIA DAN KOMPUTER

(Tugas Individu Resume Design UI)

Diajukan Untuk Memenuhi Salah Satu Persyaratan Akademik Dalam Penyelesaian

Tugas Interaksi Manusia dan Komputer

Oleh

Azzah Shafiyyah

2065061001

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNIK ELEKTRO
FAKULTAS TEKNIK
UNIVERSITAS LAMPUNG
BANDARLAMPUNG
2021
Video 1 : Belajar memahami lingkungan kerja sebelum melakukan Design UI

Cara mendesain UI dengan cepat dan efektif:

 Kita harus memahami ligkungan di sekitar kita, seperti apa saja komposisi tim di
dalamnya, proses kerjanya
 Kita harus paham seperti apa desain yang bagus, paham akan teori, prinsip dan kita bisa
mengimplementasikannya
 Kita tau bagaimana cara agar kita dapat bekerja dengan lebih efektif

a) The Environment (Bagaimana cara kita collaborate di lingkungan dengan cepat?)

 Biasanya tim design/kamu kerja bareng siapa aja?

Biasanya terdapat product manager dan UI/UX designer, data scientist, UX researcher,
marketing designer
 Siapa biasanya main stakeholder yang mengambil keputusan?
Pada umumnya untuk pengambilan final decision akan dilakukan oleh Product Manager
 Gimana lingkungan kerjanya? Berapa lama waktu proses antara kickoff meeting ke
final design? Pembagian tugas diawali oleh Data Scientist melakukan pengecekan panel
terlbih dahulu, UI Designer mecoba untuk cruff structure sampai designnya Marketing
Designer di waktu yang sama menyiapkan asset-asetnya seperti ilustrasinya, dan di
akhir Ux Researcher melakukan evaluative research berupa usebilated testing, atau UX
Research bisa maju ke depan untuk ekspolrasi (exploratory research) jadi nanti kita
menunggu hasil riset, baru setelahnya ada negosiasi kira-kira akan berapa lama projek
ini akan slesai hingga bisa lanjut ke proses selanjutnya.
 b) Aligning & Sharing Expectation
Kalau misalkan kita dihadapkan dengan situasi waktu yang tidak cukup, pastikan untuk
sharing sesame tim agar dicari jalan keluarnya seperti dikasi waktu lembur atau alinnya
agar saling paham mengenai timeline projek tersebut

WHAT IS GOOD DESIGN?

 Design is not an art

design itu bukan hanya sekedar apa yang kita lihat, tapi design it “How it Works?”
atau tentang bagaimana dia bekerja untuk menyelesaikan masalah user atau
menyelesaikan suatu urusan.

Contoh pada aplikasi Netflix

Whats good? : dari segi tamplian, seperti gradient dari transisi gambarnya dengan
backgroundnya yang hitam, sudah menjelaskan di mana user berada, pada genre apa film
tersebut, lalu ditampilkan film-film lain dengan 3 pattern.
Whats bad? : pada bagian navigation bar di bagian atas yang menampilkan genre dari film
tersebut kurang terlihat karena background imagenya berwarna putih dan warna dari font
tersebut juga putih jadi membuat user awam kurang paham bahwa ada tulisan tersebut

Sebuah good design harus bisa menjawab following description, ketika kita buka suatu
aplikasi, kita tahu kita sedang berada di mana, ada apa saja di dalamnya, dan selanjutnya kita
bisa pergi ke halaman yang mana
Video 2 : Membuat visual design yang bagus untuk UI Designer pemula

1. Shape, Simple

Bagaimana kita membuat ilustrasi, gambar ataupun banner yang detail atau
simple. Kalu simple misalnya berbentuk kotak atau segitiga. Kalau detail
segitiga bentuknya tiga dimensi ada shadownya, gradient, lightning. Jika di UI
design itu ada dua kombinasi kita harus bikin di simple shape. harus simple
shape jangan sampai terlalu detail. Seperti pada contohnya tempat obat dan pil
dan sebenarnya bikin nya benar2 simple dari simple step yang tiap ronde
berbeda beda dan bergambar kotak semua kita cari yang simple tapi mudah
untuk dikenali. Alasannya yang pertama agar user lebih mudah untuk melihat
pola yang simple yang kedua dilihat dari sisi technical kalau misalkan semakin
simple ilustrasi nya size nya semakin kecil dan lot nya semakin cepat berarti
performance partnya semakin bagus. Ada bagian performa dan mudah dikenali
dari user sehingga kita tidak perlu membuat aplikasi yang detail seperti melihat
lukisan.

2. Color, Universal(luas)
Pada saar kita ingin menentukan sendiri warnanya tidak seperti pada perusahaan
Start Up besar UX design kita harus membuat warna nya.
 Yang pertama kita harus paham kalau color itu mempunyai universal
understanding contohnya lampu merah kuning dan hijau disemua negara
itu sudah pasti sama jadi user tidak perlu belajar banyak terkait maksud
dari warna ini.

Contoh lain ada medal ada gold silver dan bronze jangan sampai warna
bronze jadi warna biru nanti user bingung ini medali apa ya gold silver
bronze atau yang lainnya. Universal color boleh dipakai tapi jangan
sampai ketukar seperti contohnya delete kita tandai dengan warna
hijau.ketika pada apps yang kita buat you want to delete berwarna hijau.
 Delete kan identik dengan merah dan negatif sedangkan hijau adalah
positif.
 Pahami bahwa Color itu ada meaningnya, lebih ke brand visual seperti
hitam itu artinya apa hijau itu apa kuning itu apa itu ada sisi ekspresi dan
meaningnya itu seperti apa.

Pastikan accessibility, jangan sampai kita pilih warna jangan sampai kita
pilih warna yang menurut kita secara visual tetapi tidak kontras dengan
teksnya.

 Color Combination
Pada saat kita meng combin biasanya kita coba coba bagus nya seperti
apa tetapi pada design biasanya pada color combination ada 5 cara yang
bisa kita pakai.

Misalnya di Monochromatic Kita fix salah satu yang akan kita pakai ada
yang lebih terang dan gelap.
 Typography Readability, dimana kita harus memastikan memilih font
yang mudah untuk dibaca. Pastikan saat pemilihan font kita dan kita
tidak mempunya font sendiri, maka kita bisa mengikuti font yang ada
pada sistem operasi yang dimiliki. Contohnya pada google dia memiliki
font Roboto dan di apple terdapat font Sun Francisco. Hirarki merupakan
hal yang paling penting saat mendesign UI yang ditentukan oleh posisi,
spasi, kontras, dan skala.
Contoh untuk hirarki :

Gambar sebelah kiri merupakan aplikasi karosol, tengah aplikasi china,

dan yang kanan adalah bukalapak. Dapat dilihat bahwa adanya perbedaan
untuk masalah spasi antara yang kiri dan kanan. Jika kita memberikan
spasi serta posisi yang rapih, maka kita tetap bisa memberi hirarki yang
bagus.
 Contoh untuk penggunaan piksel yang baik, ada pada aplikasi bukalapak.
Dimana aplikasi ini menggunakan piksel dengan kelipatan 4. Yang
mengakibatkan pada setiap spasinya ada dikelipatan 4. Jangan sampai
adanya koma yang terlalu banyak apalagi kemiringan.

Gambar di atas merupakan contoh untuk kejelasan dalam

pengimplementasian skala. Dimana pada contoh yang sebelah kiri,
mungkin kita tetap bisa membacanya hingga akhir. Namun, jika
dibandingkan dengan yang sebelah kanan, maka akan terasa
perbedaannya. Dimana contoh yang kanan terasa lebih praktis, dan
terkesan singkat serta padat.

Pertanyaan
Pernahkan narasumber mengalami perbedaan scope saat mendesign?

Pembahasan
Ketika kita ingin lebih mendetailkan sesuatu dalam projek kita harus sadar bahwa dalam
membangun sebuah produk itu bukan hanya bergantung pada designer tetapi juga ada
engineer. Yang dimana kedua bagian ini harus memiliki kolaborasi yang pas agar
berjalannya penciptaan sebuah produk yang berkualitas.
Video 3 : Designing User Interface in a Fast-Paced Environment

What is UI Design Pattern?

 Solusi berulang untuk masalah umum di UI.

 Bantu desainer menghindari untuk menemukan kembali roda dan membuat merancang
solusi yang andal lebih cepat.
 Berakar pada arsitektur dan pemrograman dan dapat mengoptimalkan tahap
pengembangan.

Apa pola desain UI yang paling umum?

Navigation, Input Area, Content Structuring, Dialog, dan Action.

1) Navigation
Top Navigation, Bottom Navigation, dan Tab Navigation.

Gambar 1 Top Navigation

Gambar 2 Bottom Navigation

 Gambar 3 Tab Navigation

2) Content Structuring
Card, Section

Gambar 4 Card

3) Input Area
textfield, radio button, checkbox

Gambar 5 Textfield
 Gambar 6 Radio Button, Checkbox

4) Dialog
Memberitahu design untuk memilih pilihan dalam aplikasi.
popup/modal

Gambar 7 Popup/Modal
 5) Action
Primary button : merupakan action yang harus dilakukan user untuk menyelesaikan
task, Secondary Button, dan toggle

Gambar 8 Primary Button

Gambar 9 Toggle

Pattern bisa berupa halaman atau bahkan aliran. Langkah pertama yang dapat dilakukan untuk
membuat design pattern UI Anda sendiri.

 Atur satu file sumber untuk perpustakaan Anda sendiri (figma/miro file)
 Kembangkan file dengan hierarki yang jelas
 Pastikan perpustakaan dapat digunakan dan mudah dikembangkan
 Berevolusi menjadi panduan gaya atau bahkan sistem desain Anda untuk
proyek/produk tertentu

Dalam pembuatan suatu produk atau sistem terutama dalam pembuatan desain UI,
diperlukan pemerhatian terhadap kebutuhan pelanggan/pengguna/user yang mana
menjadi acuan develop atau designer UI untuk menentukan desain seperti apa yang baik
dan sesuai. Dengan mengetahui informasi-informasi tersebut, UI designer dapat memulai
pekerjaannya dengan menentukan tingkatan-tingkatan tiap item yang akan digunakan
sesuai dengan fungsionalnya, penempatan ruang kosong atau space pada setiap item,
pemposisian tiap item untuk memudahkan pemahaman user dalam menggunakannya.
Pemilihan kontras dan warna untuk kenyamanan user dalam penggunaan sistem atau UI
yang digunakan. Dalam pembuatan UI perlu adanya penyediaan solusi pada setiap
permasalahanpermasalahan umum yang dihadapi pengguna untuk membantu designer
menghindari permasalahan tersebut berulang kali sehingga munculnya solusi yang dapat
diterapkan dengan lebih baik dan cepat. Setiap pembuatan UI juga perlu didasari atas
arsitektur dan pemrograman yang digunakan pada produk yang disediakan pada setiap
fase yang ada. Permasalahan-permasalahan tersebut umumnya dapat diselesaikan dengan
penambahan ragam dialog yang sesuai dan mudah untuk diterapkan dan jika diperlukan
designer UI pun dapat menyediakan library pada setiap kegiatannya agar pendesainan
dapat lebih cepat, dan lebih mudah untuk ditingkatkan ke tahap yang lebih baik lagi. Dari
saya pribadi, mungkin perlu lebih memahami pola-pola pekerjaan tiap job dan
hubungannya satu dengan yang lain agar dapat menciptakan Design UI yang maksimal
serta lebih memahami apa saja yang menjadi penghalang dalam menerapkan pola-pola
tersebut. Selain itu sepertinya saya perlu mengetahui mengetahui cara-cara improvisasi
serta cara menyikapi yang baik terhadap perubahan-perubahan yang tidak terduga dalam
pembuatan desain UI yang digunakan. 