00:00:04
Hai semua kembali di mata kuliah
00:00:08
interaksi manusia dan komputer Selamat
00:00:10
datang di youtube channel saya terima
00:00:12
kasih sudah subscribe yang belum Saya
00:00:15
tunggu subscrib-nya
00:00:17
oke teman-teman eh kali ini kita akan
00:00:20
memasuki prinsip desain dan juga
00:00:22
usability untuk yang terakhir ya setelah
00:00:26
kita bicara usability secara umum web
00:00:29
usability lalu Minggu lalu kita membahas
00:00:31
tentang desktop usability eh kali ini
00:00:34
kita akan membahas tentang eh prinsip
00:00:37
desain UI dalam mobile apps ya Eh yang
00:00:41
paling rumit itu adalah kalau kita
00:00:44
Disuruh desain web ya kalau paling apa
00:00:49
ee aturannya paling baku kita tidak bisa
00:00:53
improvisasi dari segi estetika dan
00:00:56
dekorasinya itu adalah desktop karena
00:00:59
desktop itu harus e kesannya harus
00:01:02
formal ya kan sementara kalau kita mau
00:01:05
masuk mobile mobile itu simpel dan rumit
00:01:09
ya desainnya simpel tapi untuk Kenya itu
00:01:14
rumit Kenapa karena kita dibatasi oleh
00:01:17
ruang yang kecil sederhana desainnya
00:01:19
sederhana tapi pertanyaannya dengan
00:01:22
kesederhanaan itu at Enggak misalnya
00:01:25
kita diminta untuk
00:01:27
mengisinya
00:01:28
itu banyak sekali kalau kita pakai web
00:01:32
kan enak ya bikin formulir gitu enak
00:01:34
desktop juga masih oke ketika masuk ke
00:01:38
mobile ya satu sisi kita harus sederhana
00:01:42
karena terbatas oleh ruang satu sisi
00:01:45
kita juga harus
00:01:46
ee memenuhi permintaan dari sebuah
00:01:50
aplikasi itu kalau misalnya disuruh
00:01:52
ngisi form ee biasanya form yang panjang
00:01:55
itu kalau jadi ini ya daftar jadi apa
00:01:57
nasabah bank itu kan isiannya puanj
00:02:00
banget ya engak Nah itu kalau by mobile
00:02:02
gimana Misalnya atau mobile mobile
00:02:05
appsnya BCA kalau mau bikin E daftar
00:02:08
jadi nasabah itu gimana prinsipnya
00:02:11
supaya satu
00:02:14
sisi dapat ditangani dengan baik namun
00:02:17
sisi lain ya sisi lain
00:02:19
juga harus memperhatikan prinsip
00:02:23
kesederhanaan karena ukuran nah Oleh
00:02:26
karena itu desain mobile apps ituerh n
00:02:30
tapi sebenarnya cukup sulit untuk
00:02:34
ee membangun usability-nya jadi
00:02:37
masing-masing baik dari web eh dari
00:02:40
desktop maupun dari mobile mempunyai
00:02:43
ciri khas masing-masing ada yang EE
00:02:46
memberikan kebebasan berekspresi ada
00:02:48
yang memberikan kesan formal dan ada
00:02:51
yang memberikan kesan sederhana tetapi
00:02:53
harus usable jadi tiga Hal inilah yang
00:02:57
teman-teman kita semua harus eh apa
00:03:01
namanya perhatikan dalam prinsip
00:03:03
desainnya Baik saya langsung aja masuk
00:03:05
ke prinsip yang pertama dalam desain
00:03:08
mobile ya mobile itu kan terbatas ukuran
00:03:12
sehingga yang pertama kita harus
00:03:13
menghentikan segala kekacauan yang ada
00:03:16
kekacauan antaruka itu akanembani
00:03:18
pengguna dengan terlalu banyak informasi
00:03:21
setiap tombol yang ditambahkan gambar
00:03:23
dan baris tembuat layar menjadibih
00:03:28
rumit annya itu eh aplikasinya itu harus
00:03:32
ada tombol harus ada form harus ada
00:03:35
gambar harus ada teks ya memang idealnya
00:03:38
menggunakan versi web tetapi di versi
00:03:42
mobile kita harus meminimalisir itu
00:03:45
karena begitu itu banyak itu akan
00:03:47
membuat eh sistem kita semakin kacau
00:03:51
kalau kita enggak pintar-pintar
00:03:52
layoutingnya dan Enggak pintar-pintar
00:03:56
navigasinya semua ditumpuk jadi satu
00:03:59
dalam satu layar harus dizoom ya kan
00:04:02
kalau kalian ingat ee apa browser atau
00:04:05
buka browser siasat Ya itu kan harus
00:04:07
dizom gitu ya teman-teman ya harus
00:04:09
ditarik gitu baru Nah itu kan enggak
00:04:11
elegan gitu ya Enggak enggak usable juga
00:04:13
untuk kita ya siasat memang versi
00:04:16
mobile-nya kan belum ada ya itu masih
00:04:18
versi web yang kita buka di apa di
00:04:21
browser mobile kita dan kebetulan belum
00:04:24
responsif belum mengikuti ukuran layar
00:04:28
jadinya
00:04:30
eh semua komponen di sana ya membuat
00:04:33
kerumitan gitu ya kemudian kekacauan
00:04:37
user interface pada mobile itu jauh
00:04:39
lebih buruk daripada desktop maupun web
00:04:41
Iya kalau kalian e desain web atau
00:04:44
desain desktop komponennya kacau Itu
00:04:46
masih di dalam kontrol pandangan mata
00:04:48
lah kalau di dalam mobile Ya sudah rumit
00:04:54
kontrol mata kita hanya terbatas di
00:04:56
layar 7 in atau 5, in atau 4 inch ya
00:05:00
atau yang model apa eh model iPhone itu
00:05:03
ya yang kecil itu nah kita harus Scroll
00:05:06
ke bawah kebetulan tombol scrollnya
00:05:08
disableel Wah
00:05:10
itu kekacauannya akan lebih buruk ya
00:05:13
dibanding dengan kita menggunakan
00:05:14
desktop atau web nah kemudian yang
00:05:17
ketiga kita harus mengurangi
00:05:19
komponen-komponen yang ada pada desain
00:05:20
mobile khususnya yang tidak mutlak
00:05:23
diperlukan Jadi kalau di web ada
00:05:27
misalnya apa ini
00:05:29
headernya ya header yang slider yang
00:05:32
bisa jalan itu di web ada di mobile kita
00:05:35
kalau memang itu tidak mutlak penting ya
00:05:37
kita bisa eh singkirkan gitu ya
00:05:42
jadi komponen yang tidak begitu penting
00:05:45
yang tidak mutlak penting itu bisa
00:05:49
disingkirkan kemudian poin keempat
00:05:51
setiap layar yang ada di ee sor setiap
00:05:54
layar yang didesain untuk aplikasi harus
00:05:56
mendukung satu tindakan yang bernilai
00:05:58
nyata bagi user
00:06:00
hal ini membuatnya lebih mudah
00:06:01
dipelajari dan lebih mudah digunakan
00:06:04
jadi satu tampilan itu satu fungsi
00:06:08
teman-teman jangan sampai dalam satu
00:06:10
layar fungsinya banyak ya Misalnya
00:06:13
Kalian mau bikin ee apa crud ya cre
00:06:17
update delete atau Insert update delete
00:06:19
Ya satu layar itu ya jangan dicampur
00:06:22
gitu kalau kalian pakai web engak
00:06:23
masalah atau pakai desktop gak masalah
00:06:25
Kalian pakai Tab gitu ya gak masalah
00:06:28
kalau di mobile bisa satu layar satu
00:06:32
fungsi contoh misalnya eh itu ya di
00:06:36
slide saya tuh apa aplikasi gojek ya
00:06:39
Enggak tahapannya gojek itu kan kita
00:06:41
harus set apa set lokasi kita set
00:06:45
destinasi kita baru pesan gitu kan
00:06:48
istilahnya gitu ya set lokasi sama set
00:06:51
destinasilah dua itu ini jangan sampai
00:06:53
dicampur gitu ya Eh yang atas peta untuk
00:06:57
mengambil lokasi pick up lo
00:07:00
kan Yang bawahnya untuk pick up
00:07:03
Destination dalam satu tampilan ya kan
00:07:06
enggak bisa teman-teman enggak boleh
00:07:07
seperti itu tampilan mobile itu satu
00:07:11
fungsi harus dalam satu tampilan karena
00:07:14
itu nanti kalau kita mau set location ya
00:07:16
itu tampilan pertama mau set Destination
00:07:20
ya tinggal di next saja gitu ya
00:07:22
Selanjutnya apa gitu jadi jangan
00:07:25
dijadikan dalam satu tampilan ya crud
00:07:28
tadi juga sama yang bagian Insert ya
00:07:30
satu tampilan input itu satu tampilan
00:07:33
nanti delet juga menu lagi update menu
00:07:36
lagi view juga menu lagi jangan jangan
00:07:39
jadikan satu tampilannya gitu ya nah
00:07:44
eh contoh Misalnya ini ya Secara
00:07:47
otomatis
00:07:48
[Musik]
00:07:49
eh lokasi pengguna gojek itu di ambil
00:07:53
berdasarkan data Geo geografis dan
00:07:56
satu-satunya yang hal yang harus
00:07:58
dilakukan pengguna adalah memilih lokasi
00:08:00
pengambilan prinsip yang
00:08:03
ke lima Ini
00:08:05
adalah mengurangi Upaya yang harus
00:08:07
dilakukan pengguna untuk mendapatkan apa
00:08:10
yang diinginkan jadi ee yang perlu
00:08:12
teman-teman perhatikan ketika
00:08:14
mendesain itu kurangi Upaya yang harus
00:08:18
dilakukan user Coba bayangkan kalau
00:08:20
gojek itu tidak menggunakan view atau
00:08:24
model inputan berupa data peta gini ya
00:08:27
Google Maps seperti ini maka
00:08:31
logikanya user itu harus
00:08:34
input alamat ya enggak Alamatnya mana
00:08:37
jalan apa RT berapa RW berapa Kelurahan
00:08:41
apa kecamatan apa kabupaten kota mana
00:08:44
terus ada lagi ancer-ancer ancer-ancer
00:08:46
Ik bahasa Indonesianya adalah
00:08:49
ancer-ancer itu apa ya Eh patokannya ya
00:08:53
kan Oh pannya belakang belakang apa
00:08:55
misalnya belakang ee pos kampling atau
00:08:58
depannya ada pohon ee jambunya atau
00:09:02
samping toko ini nah Ribet sekali ya
00:09:06
enggak Kalian mau pesan gojk disuruh ya
00:09:09
ini sudah enggak tahu lokasinya ya
00:09:10
kalian harus nginput jalannya nomornya
00:09:14
kemudian rt-nya rw-nya Kode Posnya Nah
00:09:18
kita enggak bisa membuat kacau seperti
00:09:20
itu tampilan kita nanti satu layar ya
00:09:22
layarnya iPhone kecil lagi disuruh
00:09:24
nginput panjang lebar seperti itu Nah
00:09:27
Susah kan karena itu dengan memberikan
00:09:30
inovasi pick up by Geographic location
00:09:35
itu jauh lebih mempermudah user lebih
00:09:38
usable dan yang kedua menyederhanakan
00:09:42
tampilan di layar kecil tadi jadi
00:09:44
prinsipnya itu teman-teman ya oke itu
00:09:47
prinsip pertama kita harus menghentikan
00:09:51
kekacauan dengan lima poin yang ada di
00:09:55
sini poin yang kedua Ee Kita harus
00:09:59
menjadikan navigasi itu Cukup jelas jadi
00:10:04
navigasi mobile APPS itu navigasi harus
00:10:08
berperan penting sekali mengingat
00:10:11
aplikasi kita tidak bisa ee kalau
00:10:14
aplikasi kita besar atau cakupannya luas
00:10:17
itu kita enggak bisa kerjakan aplikasi
00:10:20
kita dalam apa namanya ee kerjakan
00:10:23
aplikasi kita hanya dalam satu tampilan
00:10:25
sajikan aplikasi kita dalam satu
00:10:27
tampilan enggak bisa dalam berbagai
00:10:29
tampilan tadi ya dengan demikian
00:10:31
navigasinya harus jelas prinsip yang
00:10:34
pertama navigasi itu perpindahan halaman
00:10:36
ya navigasi yang baik harus terasa
00:10:38
seperti tangan yang tak terlihat yang
00:10:41
memandu pengguna sepanjang perjalanan
00:10:43
mereka prinsip-prinsip navigasi seluler
00:10:46
yang baik adalah yang pertama navigasi
00:10:48
harus jelas Anda harus menggunakan
00:10:50
penanda yang tepat e metafora visual
00:10:53
yang benar ya bahasa Indonesianya
00:10:55
metafora visual yang benar bahasa
00:10:57
Inggrisnya ik
00:11:00
jadi iconnya harus
00:11:03
benar sehingga navigasi tidak memerlukan
00:11:06
penjelasan apapun dan memastikan bahwa
00:11:10
setiap elemen navigasi seperti icon itu
00:11:13
mengarah ke tujuan yang tepat Ini
00:11:15
contohnya ya teman-teman ya ini saya
00:11:17
ambilkan contoh punya Apple
00:11:20
Ya ini yang paling pojok kan foto ini eh
00:11:25
apa ini share kemudian ini album nah ini
00:11:28
harus apa namanya harus dibuat
00:11:32
seolah-olah user tuh enggak usah mikir
00:11:33
tinggal touch touch touch kayak kalian
00:11:35
buka ee dikasih apa kasih lemari atau
00:11:39
kasih apa gitu kan lihat ya mau ngambil
00:11:41
buku ini tinggal ambil di sini mau
00:11:43
ngambil atau ngambil pakaian tinggal di
00:11:45
sini tinggal sini nah prinsip user eh
00:11:48
user interface untuk mobile APPS itu
00:11:50
kita enggak bisa membuat user berpikir
00:11:53
panjang gitu jadi gunakan icon sebagai
00:11:56
navigasi yang mewakili tujuan Misalnya
00:11:58
ini
00:11:59
eh seperti ini ya Nah ini ionnya di
00:12:02
bawah semua jangan sampai yang ion foto
00:12:05
di sini Nanti yang share di atas yang
00:12:07
album di sini nah ini kan bikin user
00:12:09
mikir kemudian ini juga iconnya harus
00:12:11
paling tidak representatif misalnya
00:12:13
share itu kita kita generalisir dengan
00:12:18
gambar awan ya karena kalau gambar awan
00:12:20
Itu sudah pasti biasanya Cloud ya kan
00:12:22
Cloud itu biasanya saling berbagi ya
00:12:25
kalau foldernya seperti ini branasnya
00:12:27
tertutup itu berarti model album ya
00:12:30
album itu berarti ee nah seperti ini
00:12:33
tapi kalau ini brandkasnya terbuka sudah
00:12:35
f-vel terbuka berarti sudah eh apa
00:12:38
file-file-nya sudah bisa dilihat nah ini
00:12:40
juga adalah navigasi yang
00:12:42
merepresentasikan kemudahan navigasi
00:12:45
seluler harus konsisten untuk aplikasi
00:12:47
jangan pindahkan kontrol navigasi ke
00:12:49
lokasi baru atau sembunyikan di halaman
00:12:50
lain ya tadi yang saya cerita ini
00:12:53
navigasi di sebelah sini semua ya
00:12:54
sebelah sini semua
00:12:56
gitu jangan sampai ini di sini nanti
00:13:00
begitu Masuk ke halaman share nah ini
00:13:02
ini tiga menu ini pindah di atas nanti
00:13:05
pas masuk menu album tiba-tiba Turun ke
00:13:08
bawah nah itu enggak konsisten jadi
00:13:10
konsisten ya Instagram itu konsisten di
00:13:13
bawah itu navigasi jelas jangan
00:13:15
sembunyikan
00:13:17
navigasi ya kecuali pas pas lihat Story
00:13:21
memang navigasinya Instagram enggak Apa
00:13:23
enggak muncul ya tapi kalau kalian lihat
00:13:26
Instagram baik-baik mau kalian home mau
00:13:28
kalian
00:13:29
atau search mau kalian apa namanya eh
00:13:33
lihat notif ya yang love itu kemudian
00:13:36
lihat profile anda itu semua navigasi
00:13:40
lima navigasi itu tetap ada di di
00:13:42
bawahnya itu jadi tetap ada di sana Jadi
00:13:45
harus tetap konsisten mau pindah halaman
00:13:48
harus tetap ditampilkan kalau gak
00:13:50
ditampilkan kenapa lah ini susah gitu l
00:13:52
mobile ituah terbatas navigasinya mau
00:13:55
dibuat sembunyi sana sembunyi situ itu
00:13:58
jugaak cocok ya itu prinsip yang kedua
00:14:01
teman-teman kita masuk ke prinsip yang
00:14:03
ketiga tampilannya harus konsisten di
00:14:06
berbagai model device ya tidak sedikit
00:14:08
eh aplikasi mobile itu turunan dari
00:14:11
aplikasi-aplikasi besar baik itu desktop
00:14:14
maupun apa namanya eh web ya jadi jangan
00:14:19
memikirkan desain ponsel atau desain
00:14:21
mobile itu secara
00:14:22
terpisah ciptakan pengalaman Tanpa Batas
00:14:25
di ponsel desktop dan tablet itu sangat
00:14:27
penting bagi ya contohnya Ini Misalnya
00:14:30
Anda dapat mengatur daftar putar di Mac
00:14:33
anda dan itu e akan segera tersedia di
00:14:36
iPhone Anda Apple mengakui bahwa
00:14:38
sementara desain aplikasi selular masih
00:14:40
sangat penting menciptakan pengalaman
00:14:42
Tanpa Batas iPhone dan desktop dan iPad
00:14:45
sama pentingnya bagi pengguna
00:14:47
jadi versi mobile versi desktop maupun
00:14:51
versi tablet itu konsisten tampilannya
00:14:55
kalaupun
00:14:56
berubahtingnya saja menyesuaikan tapi
00:14:59
pemilihan warna pemilihan navigasi
00:15:01
sebisa mungkin tetap ada bahkan tadi
00:15:04
kontennya pun sinkron gitu ya Misalnya
00:15:07
ee muter apa namanya muter musiknya di
00:15:11
di Mac atau di ee di apa di iPad dibuka
00:15:16
di iPad usernya sama ya sinkron dengan
00:15:20
yang di iPhone Maka nanti playlistnya
00:15:23
yang pernah dilihat atau yang sedang
00:15:25
diputar itu sinkron ya saya kebetulan
00:15:28
enggak pakai Apple ya tapi paling tidak
00:15:30
di Android misalnya kita pakai spotify
00:15:32
gitu kan pakai jok gitu spotify itu
00:15:35
sinkron ya Anda buka di browser PC Anda
00:15:39
kemudian Anda buka di mobile ya Bahkan
00:15:42
bisa saling mengendalikan Nah itu
00:15:44
menciptakan pengalaman Tanpa Batas
00:15:46
Jangan sampai Facebook yang di versi
00:15:49
Android dengan yang versi browser PC
00:15:53
beda tampilan
00:15:56
ya jago main Facebook
00:15:59
di PC tapi begitu download yang apa
00:16:03
mobile-nya mobile apps-nya loh kok beda
00:16:07
menunya beda warnanya beda Nah itu
00:16:09
berarti kita tidak
00:16:11
menciptakan pengalaman Tanpa Batas jadi
00:16:15
tampilannya harus konsisten di berbagai
00:16:18
model
00:16:19
eh device gitu
00:16:22
ya lalu bangunlah desain touch yang
00:16:26
ramah Jarina kalau dulu mungkin mobile
00:16:28
apps
00:16:29
basicnya masih yang jadul ya masih model
00:16:32
simbian itu ya Model Nokia yang zaman
00:16:34
dulu mungkin enggak touch screen Tapi
00:16:36
sekarang kan arahnya semua mobile APPS
00:16:38
itu kan touch screen maka kita harus
00:16:40
mendesain teman-teman eh touch screen
00:16:44
sentuhan yang ramah jari ya ramah jari
00:16:47
itu artinya dengan jari kita senang
00:16:50
tersenyum senang menyapa gitu ya ya RAM
00:16:53
jari itu artinya membuat target dengan
00:16:55
ukuran cukup besar sehingga mudah bagi
00:16:58
pengguna untuk mengetuk jadi kita harus
00:17:00
ukur nih rata-rata jari tangan manusia
00:17:03
itu apa ini namanya Berapa lebarnya itu
00:17:06
sekitar 7 sampai 10 mm ya mm sehingga
00:17:10
dapat disentuh Jadi kalau ini misalnya
00:17:12
seperti ini ya Ah Anda harus ukur ini
00:17:15
berapa berapa mili ya rata-ratanya
00:17:18
jangan sampai ee seperti gambar yang di
00:17:21
sini ya ini enggak bagus ya Ee tombolnya
00:17:23
kecil jarinya sama jari manusia gede
00:17:26
jari manusia lah Jejer lagi Apa itu
00:17:30
cancel samave dalam satu sentuhan dalam
00:17:33
satu sentuhan lah ininya nan
00:17:37
nyentuhnyayuhnya nanti bisa
00:17:40
jadiuel malahel makanya dibuat ini
00:17:43
tem-an
00:17:45
apa
00:17:47
ya dengan jari kita ukurannya 7 S 10 mil
00:17:51
sehingga dapat disentuh Ji secara
00:17:54
akuratebemk jarenggunauk Mas keet
00:17:58
pengguna akan tahu bahwa mereka mengenai
00:18:01
target dengan akurat juga pastikan
00:18:03
space-nya antara antar tp-nya antar
00:18:07
tombol ini ada space-nya jangan gandeng
00:18:09
Ya kalau gandeng nanti ya tadi mau
00:18:12
nyentuh satu dapat semua Nah kalau
00:18:15
kalian perhatikan aplikasi mobile itu
00:18:18
kan tombolnya gede-gede ya kalau kalian
00:18:21
bangun web web yang misalnya pakai
00:18:23
bootstrap gitu ya yang sudah responsif
00:18:25
itu tombol sekarang itu gede-gede
00:18:27
teman-teman kalian bandingin a aja
00:18:29
aplikasi siasat itu kan aplikasi 10
00:18:31
tahun yang lalu tombolnya kan masih ee
00:18:34
Visual Studio banget gitu ya karena
00:18:36
dibangun pakai ASP kan tombolnya itu
00:18:38
tombol yang masih
00:18:40
Eh Apa menerima perlakuan by pointer
00:18:44
Mouse klik jadi kecil-kecil sehingga
00:18:47
ketika di mobile ya tadi harus di zooom
00:18:49
ya kan beda cerita dengan
00:18:51
aplikasi-aplikasi mobile sekarang
00:18:53
misalnya Instagram Facebook Ya itu
00:18:56
tombolnya kan gede-gede demikian juga
00:18:58
dengan Framework CSS bootstrap gitu kan
00:19:01
itu responsif website itu semua tombol
00:19:03
gede-gede loh ya karena memang dia
00:19:07
disesuaikan untuk mobile appsnya begitu
00:19:09
masuk mobile kalian bikin form itu
00:19:12
formnya pasti turun ke bawah semua kalau
00:19:14
web kan form itu nama ya nama terus
00:19:17
sampingnya kotak ya enggak alamat
00:19:20
sampingnya kotak terus misalnya nomor HP
00:19:23
terus sampingnya kotak kalau mobile kan
00:19:25
enggak nama atas ya terus bawah bawahnya
00:19:29
kotak kasih jarak alamat kotak
00:19:32
bawahnya nomor HP terus bawahnya kotak
00:19:36
jadi tujuannya seperti itu apa ya itu
00:19:39
untuk mempermudah kita melakukan
00:19:41
navigasi menggunakan jari kita ya Coba
00:19:44
kalau dibuat samping menyamping gitu
00:19:46
udah layaran layar layar apa layar
00:19:49
mobile kita itu kan beda sama layar web
00:19:51
ya kalau web kan gini landscape jadi mau
00:19:55
mau kanan dengan kiri enggak masalah
00:19:57
tapi kalau mob itu rata-rata potrait
00:20:00
gini sehingga kalau mau dibuat sebelah
00:20:02
menyebelah itu menghabiskan Space satu
00:20:05
Yang kedua juga ini eh tangan tangan mau
00:20:08
sentuh itu susah gitu karena kecil-kecil
00:20:11
jadi harus dibuat turuntun turun turun
00:20:15
turun ke bawah nah itu yang harus
00:20:17
teman-teman perhatikan ya yang kelima
00:20:21
konten teks harus bisa dibaca ya jika
00:20:25
dibandingkan dengan desktop smartphone
00:20:27
memiliki layar yang relatif kecil
00:20:29
yang berarti bahwa salah satu tantangan
00:20:31
desain Ponsel adalah menyesuaikan banyak
00:20:33
informasi pada UI kecil nah kalau pakai
00:20:37
tekaknya itu ukurannya 11 poin ya
00:20:39
sehingga dapat dibaca tanpa harusom
00:20:42
tanpa harus memperbesar selain font
00:20:45
siznya Kalian juga harus perhatikan
00:20:47
spacingnya Space ya kalau kalian lihat
00:20:49
ini Kan
00:20:51
fontnya sudah ya kebaca dan ini SPI
00:20:57
antarisnya juga enak di mata Kalau anda
00:20:59
pakai ini kan Wow susah ya tuh
00:21:04
Oke poin 6 elemen antar muka harus
00:21:07
terlihat dengan jelas gunakan warna dan
00:21:09
Kontras untuk membantu pengguna melihat
00:21:12
menafsirkan konten Anda ini prinsipnya
00:21:14
sama dengan prinsip user interface yang
00:21:16
general yang pernah kita bahas tentang
00:21:18
psikologi warna dulu Pilihlah warna
00:21:20
dengan panduan yang tepat ya kontras ini
00:21:23
kan meskipun apa abu-abu dengan hijau
00:21:27
tetapi enggak kontras teman-teman
00:21:29
sehingga bacanya juga susah enggak
00:21:30
readible sementara kalau ini kan hitam
00:21:33
ya dengan hijau gitu jangan terlalu
00:21:36
pilih-pilih warna yang yang penting
00:21:38
colorful gitu tapi colorful tapi kalau
00:21:41
kontrasnya enggak kebaca juga sangat
00:21:43
disayangkan ya pakailah Yang ini tadi
00:21:47
Nah ini peletakan kontrol ya kontrol
00:21:51
desain berdasarkan posisi tangan ya
00:21:53
posisi tangan anda ketika main HP itu
00:21:57
seperti ini ya teman-teman ya
00:21:59
Ee Stepen hober dalam penelitiannya
00:22:02
tentang
00:22:03
ee ini ya sebentar
00:22:06
saya besarkan dulu ini fontnya engak
00:22:10
keliakan jug
00:22:37
Oke Stepen hber dalam penelitiannya
00:22:40
tentang penggunaan perangkat seluler
00:22:42
menemukan bahwa 49% orang menggunakan
00:22:45
satu jempol untuk menyelesaikan
00:22:47
pekerjaan di ponsel karena begitu Anda
00:22:48
pegang ponsel pasti satu tangan kecuali
00:22:53
main game ya main game dibuat landcap
00:22:55
kan gini beda cerita ya Tapi secara
00:22:58
kalau E handphya itu dalam posisi potret
00:23:02
pasti dipegangnya G Ya beda dengan
00:23:06
makmak dan bapak-bapak gini hp-nya
00:23:08
dipegang sini tangannya
00:23:11
gini ya gak tapi kalau sudah kayak
00:23:14
kalian expert gitu ya mau guling-guling
00:23:16
sambil tidur pun HP itu dalam satu
00:23:19
genggaman gitu ya ya ini jari apa ini e
00:23:24
ibu jarinya itu linah sekaliah
00:23:28
9% menggunakan satu ibu jari untuk
00:23:31
menyelesaikan semua pekerjaan di ponsel
00:23:33
nah ini
00:23:35
ee pemetaan ya teman-teman ya pemetaan
00:23:38
dari Stepen houber itu kalau warna hijau
00:23:40
itu adalah area yang mudah dijangkau
00:23:42
pengguna jadi begitu HP dipegang maka
00:23:46
warna hijau ini itu warna yang
00:23:50
paling apa namanya paling mudah untuk
00:23:54
di touch Ya Termasuk yang ini Ini juga
00:23:58
Kalau enggak di sebelah bawah sini atau
00:24:00
agak naik sedikit ya itu daerah
00:24:03
sini warna kuning atau orange ini adalah
00:24:06
area yang membutuhkan perenggangan
00:24:08
perenggangan itu jempolnya harus di
00:24:12
harus di ya harus agak direnggangkan ke
00:24:14
sana sedikit gitu ya sementara warna
00:24:17
merah itu warna yang bisa diouch tapi
00:24:21
harus pengguna harus mengubah cara
00:24:23
mereka memegang perangkat ya merusak
00:24:26
pw-nya sudah PW di sini tiba-tiba harus
00:24:29
karena harus touch yang di situ ya
00:24:31
pegang pakai tangan satu baru di touch
00:24:33
ya itu daerah sini daerah yang pojok
00:24:36
sebelah kanan bawah ini ya Ini adalah
00:24:40
area yang dekat dengan posisi genggaman
00:24:42
tangan sehingga kita harus
00:24:46
memetakan lokasi tombol yang kita
00:24:50
layoutingkan itu di daerah yang berwarna
00:24:53
hijau dan orange hindari di daerah warna
00:24:57
merah ini karena di daerah warna merah
00:25:00
zona merah ini
00:25:02
e kalau kita mau touch di sana mau
00:25:04
sentuh-sentuh di sana mengurangi
00:25:06
kenyamanan user ya jadi tempatkan menu
00:25:10
tingkat atas atau kontrol yang sering
00:25:12
digunakan dan tindakan umum itu ke zona
00:25:15
hijau jadi yang paling sering paling
00:25:18
sering digunakan letakkan di daerah yang
00:25:20
warna hijau
00:25:21
ini Kara nyaman dijangkau dengan
00:25:25
interaksibol
00:25:27
yaud empatkan tindakan negatif seperti
00:25:30
hapus atau menghapus ya hapus itu di
00:25:33
zona merah zona yang sulit dijangkau
00:25:36
jadi delete itu biasanya daerah-daerah
00:25:39
yang susah
00:25:40
dijangkau karena anda tidak ingin
00:25:42
pengguna mengetuknya secara tidak
00:25:44
sengaja tidak sengaja ya tidak
00:25:47
sengaja tidak sengaja Follow ya tidak
00:25:51
sengaja nge-like ngl ya gara-gara
00:25:55
stalking kepencet love ya Nah itu
00:25:59
letakkan di biar enggak biar enggak
00:26:01
sengaja ya letakkan di zona merah tadi
00:26:04
Oke ini prinsip layouting berdasarkan
00:26:07
posisi tangan poin del minimalkan
00:26:10
kebutuhan untuk mengetik tadi saya
00:26:12
singgung di awal kalau kita pesan gojek
00:26:16
Jangan sampai karena kita itu sudah
00:26:18
buru-buru mau pergi atau buru-buru mau
00:26:20
pesan makan selak lapar ya terus kita
00:26:23
apa namanya teman-teman ee diminta dulu
00:26:27
ngisi alamat ya rtrw-nya kode pos dan
00:26:29
lain-lain n hindari itu ya mengetik pada
00:26:33
ponsel itu jelas rawan kesalahan ya atau
00:26:37
ada Anda yang ngoding pakai pakai HP
00:26:40
atau Anda bikin tugas ngetik di HP ya
00:26:42
itu sudah enggak nyaman sekali kalau
00:26:44
menurut saya Ya karena itu yang terbaik
00:26:46
adalah selalu berusaha meminimalkan
00:26:48
jumlah pengetikan yang diperlukan untuk
00:26:51
menggunakan aplikasi seluler ya jadi
00:26:54
jangan gunakan seperti ini ya suruh
00:26:56
ngetik ini kalau web Enggak masalah ya
00:26:58
Yang ini lah ini mobile Kok suruh ngisi
00:27:01
kayak gini n gunakan juga ini auto ya
00:27:05
melengkapi secara otomatis yang sesuai
00:27:09
dengan penggunaannya perlu memasukkan
00:27:11
informasi minimal jadi mobile itu
00:27:13
seperti itu
00:27:14
sekarang misalnya alamat ya diminta dulu
00:27:18
ngisi provinsi provinsi aja kita tinggal
00:27:20
keluarkan menu ambil Jawa Tengah ambil
00:27:22
provinsi Jawa Tengah nanti otomatis
00:27:24
bawahnya sudah ada pilihan atau
00:27:27
ada autofil tadi begitu ketik Sala T
00:27:30
gitu ya baru sa gitu nanti sudah suggest
00:27:34
nama kabupaten kota di Jawa Tengah yang
00:27:35
depannya Sa oh salah T yaud gitu begitu
00:27:39
masuk Kecamatan juga Nanti sudah
00:27:41
langsung keluar opsinya sidukti Argo
00:27:43
sidorjo atau Tingkir itu juga nanti e
00:27:46
apa namanya
00:27:47
eh otomatis jadi
00:27:50
menghindari terlalu banyak mengetik jadi
00:27:53
menggunakan
00:27:56
autof oke Oke delapan aja itu
00:27:59
teman-teman tentang
00:28:02
eh prinsip desain dalam mobile apps Ya
00:28:08
tentu prinsip yang lain masih banyak
00:28:11
Anda bisa cari di berbagai sumber Tapi
00:28:14
satu yang ingin saya tegaskan ke anda
00:28:17
bahwa dalam mobile apps beberapa hal ini
00:28:20
tadi ya Mulai dari menghentikan
00:28:22
kekacauan ya navigasinya harus jelas
00:28:25
tampilan konsisten di berbagai device ya
00:28:28
touch screennya harus ramah jari konten
00:28:31
harus dapat dibaca elemen antar muka
00:28:34
harus dapat terlihat penempatan atau
00:28:37
layoutingnya juga sesuai dengan
00:28:39
kebutuhan user atau kebiasaan user terus
00:28:42
hindari juga seringnya mengetik itu jadi
00:28:45
prinsip dasar di dalam mobile apps Oke
00:28:49
seperti biasa tugas ya ya tugas gak
00:28:52
apa-apa ya teman-teman ya ya sudah mau
00:28:54
dekat akhir semester jadi tenang aja
00:28:57
sebentar lagi tugas tugas seperti ini
00:28:58
akan hilang dan kalian nanti sudah bisa
00:29:01
free ya kalian malah justru nanti kangen
00:29:03
ngerjain tugas ya ini tugas terakhir
00:29:05
untuk desain user interface ya kemarin
00:29:08
sudah desain aplikasi desktop kali ini
00:29:11
silakan mendesain aplikasi mobile ya Oke
00:29:17
jadi
00:29:17
[Musik]
00:29:18
ee nomor 9 tugas saja tugasnya adalah
00:29:23
silakan
00:29:24
Anda mendesain ya desain
00:29:30
desain mobile
00:29:33
apps minimal minimal ya minimal ada
00:29:39
tiga halaman kalau web kan satu aja
00:29:42
kelihatan kalau mobil kan tadi saya
00:29:44
bilang ini kan berpindah kalau ini
00:29:46
diklik pindah ke mana pindah ke mana Nah
00:29:48
itu minimal tiga ya bisa empat bisa l
00:29:51
bisa banyak ya nanti lembar kerjanya dan
00:29:54
ketentuan lainnya nanti saya unggah di
00:29:57
Google class
00:29:58
ya tapi kalian gunakan prinsip itu
00:30:00
aplikasinya apa Bebas apapun aplikasinya
00:30:03
Anda bisa gunakan untuk eh desain kalau
00:30:07
pakai aplikasi turunan bisa mas bisa ya
00:30:09
kan redesain bisa boleh ya redesain apa
00:30:12
redesign Instagram boleh redesain ya
00:30:16
kemarin ada yang siasat ya bikin siasat
00:30:18
boleh redesain aplikasi-aplikasi yang
00:30:20
ada di kampus juga boleh supaya menjadi
00:30:23
satu apa satu inspirasi ya untuk kampus
00:30:27
kita juga gitu teman-teman terima kasih
00:30:29
banyak atas perhatiannya dan juga Terima
00:30:31
kasih sudah menyimak ee perkuliahan kita
00:30:34
pada kesempatan ini sukses untuk anda
00:30:37
semua selamat belajar dan jangan lolah
00:30:40
untuk belajar Terima kasih
