IMK - 07. Prinsip Desain UI Mobile Apps.

00:30:44
https://www.youtube.com/watch?v=eKnDqubqzEM

Zusammenfassung

TLDRVideo ini membahas prinsip desain dan kegunaan (usability) dalam pengembangan aplikasi mobile. Desain mobile harus menghadirkan tantangan yang berbeda dibandingkan dengan desktop dan web, terutama karena keterbatasan ruang dan kebutuhan untuk menjaga kesederhanaan. Perhatian khusus diberikan pada penciptaan tata letak yang intuitif dan ramah pengguna, navigasi yang jelas dan konsisten, serta pentingnya konsistensi pengalaman pengguna di seluruh perangkat. Video ini juga menekankan pada pengurangan kebutuhan mengetik dan penyesuaian elemen antarmuka untuk jari, serta memastikan teks dapat dibaca. Di akhir, video memberikan tugas untuk mendesain aplikasi mobile yang efektif.

Mitbringsel

  • 🖌️ Desain mobile memerlukan kesederhanaan namun kompleksitas dalam kegunaan.
  • 📏 Ruang kecil pada layar mengharuskan desain yang efektif dalam penggunaan elemen.
  • 🧭 Navigasi harus intuitif dan konsisten untuk pengalaman pengguna yang baik.
  • 📱 Konsistensi antar perangkat penting untuk pengalaman mulus.
  • 👆 Elemen harus ramah jari untuk memudahkan interaksi.
  • 🔠 Ukuran teks harus dapat dibaca, setidaknya 11 poin.
  • 🔍 Mengurangi kebutuhan mengetik dengan autofill dan input minimal.
  • 🗑️ Hindari kekacauan dengan menyingkirkan elemen tidak perlu.
  • 📐 Peta tata letak harus memperhatikan kebiasaan interaksi pengguna.
  • 📄 Tugas akhir video adalah mendesain aplikasi mobile minimal tiga halaman.

Zeitleiste

  • 00:00:00 - 00:05:00

    Introducerea tematicii videoclipului: interacțiunea umană cu computerul și mulțumiri abonaților. Subiectul discuției este design-ul UI pentru aplicații mobile și dificultățile sale comparativ cu design-ul pentru web și desktop.

  • 00:05:00 - 00:10:00

    Se discută despre provocările specifice designului UI pentru aplicații mobile, cum ar fi spațiul limitat și necesitatea unui design simplu dar funcțional. Exemplul unui formular lung pe web vs. mobil subliniază complexitatea adăugată pe dispozitivele mici.

  • 00:10:00 - 00:15:00

    Sunt prezentate principiile designului UI pentru mobile: 1) Reducerea dezordinii prin minimalizarea componentelor inutile. 2) Importanța suportului unei singure funcționalități per ecran pentru a menține claritatea și ușurința utilizării.

  • 00:15:00 - 00:20:00

    Este accentuată necesitatea reducerii efortului utilizatorului prin optimizări precum utilizarea hărților pentru stabilirea locației în loc de introducerea manuală a adresei. Navigația este esențială pentru ca aplicația să fie intuitivă și clară.

  • 00:20:00 - 00:25:00

    Principiul consistenței în design pe diverse device-uri: experiența trebuie să fie fluidă între smartphone, PC și tabletă. Importanța designului touch-friendly dat fiind prevalența ecranelor tactile pe dispozitivele moderne.

  • 00:25:00 - 00:30:44

    Se discută despre importanța clarității textului și vederii elementelor UI pe display-ul mai mic al smartphone-urilor. Navigația trebuie să fie consistentă și ușor accesibilă, plasând controalele frecvent utilizate în zonele ușor accesibile.

Mehr anzeigen

Mind Map

Video-Fragen und Antworten

  • Apa itu prinsip desain dalam mobile apps?

    Prinsip desain adalah pedoman untuk membuat aplikasi yang efektif dari segi tampilan dan kegunaan khusus pada perangkat mobile.

  • Mengapa desain mobile dianggap rumit?

    Desain mobile dianggap rumit karena keterbatasan ruang dan kebutuhan untuk menjaga kesederhanaan tanpa mengurangi fungsionalitas.

  • Bagaimana cara mengatasi masalah navigasi pada aplikasi mobile?

    Navigasi harus jelas, konsisten, dan mudah diakses dengan menggunakan ikon yang informatif dan penempatan yang tepat.

  • Apa pentingnya desain konsisten antar perangkat?

    Desain konsisten antar perangkat memastikan pengguna memiliki pengalaman yang seragam dan mulus, tanpa kebingungan dalam penggunaan.

  • Mengapa ukuran elemen harus dipertimbangkan dalam desain mobile?

    Ukuran elemen harus disesuaikan agar ramah jari, memudahkan interaksi dan mengurangi kesalahan dalam pemakaian.

  • Bagaimana cara mengurangi kebutuhan mengetik di aplikasi?

    Kurangi kebutuhan mengetik dengan otomatisasi, seperti autofill, dan menyederhanakan input yang diperlukan.

  • Apa yang bisa dilakukan untuk membuat konten lebih bisa dibaca?

    Gunakan ukuran teks yang cukup besar (11 poin atau lebih) dan hindari penggunaan teks yang terlalu dekat satu sama lain.

  • Kenapa penting untuk mengurangi kekacauan di UI mobile?

    Mengurangi kekacauan UI membantu pengguna fokus dan mengurangi kebingungan dengan tidak terlalu banyak informasi dalam satu tampilan.

  • Bagaimana memanfaatkan ruang kecil di layar mobile dengan baik?

    Dengan memprioritaskan informasi penting, mengelola tata letak yang intuitif, dan menghindari elemen yang tidak perlu.

  • Apa saja tantangan yang sering dijumpai dalam desain mobile?

    Tantangan umum termasuk ruang terbatas, konsistensi antar perangkat, dan membuat navigasi yang intuitif.

Weitere Video-Zusammenfassungen anzeigen

Erhalten Sie sofortigen Zugang zu kostenlosen YouTube-Videozusammenfassungen, die von AI unterstützt werden!
Untertitel
id
Automatisches Blättern:
  • 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
Tags
  • desain mobile
  • usability
  • user interface
  • desain konsisten
  • navigasi mobile
  • prinsip desain
  • pengalaman pengguna
  • kekacauan UI
  • tampilan mobile
  • ramah jari