B. KOMPETENSI INTI
Penerapan pengelolaan asset dan user interface (grafis ,
Materi typography, warna, audio, video, tata letak , dan interaksi
pengguna)
“Elemen Struktural User Interface”
Tujuan Pembelajaran Siswa mampu menjelaskan konsep dasar “Elemen Struktural
User Interface”
Pemahaman Bermakna Meningkatkan kemampuan siswa dalam menjelaskan konsep
(berkaitan dengan “Elemen Struktural User Interface” dengan cara
kompetensi keahlian ) mengidentifikasi elemen struktural antar muka sebuah
aplikasi.
Pertanyaan Pemantik Apakah anda mempunyai aplikasi mobile legend atau shopee di
handphone anda? Silahkan buka aplikasi mobile legend atau
B. KOMPETENSI INTI
shopee pada handphone anda. Silahkan perhatikan tampilan
antar muka aplikasi tersebut.
KEGIATAN PEMBELAJARAN
C. ASSESMENT
Assemen : Formatif 1 Penilaian pengetahuan (tes lisan)
2 Penilaian kinerja melalui presentasi
3 Penilaian sikap
Pengayaan : sisw yang sudah mencapai batas nilai ketercapaiaan, dapat menjadi tutor sebaya
membantu temannya menyelesaikan.
D. REFLEKSI
1. Refleksi Peserta Didik
a) Apakah pembelajaran hari ini menyenangkan?
b) Apakah aktivitas pembelajaran hari ini bermakna dalam kehidupan saya?
c) Bagaimana pendekatan saya dalam menganalisis desain antarmuka pengguna? Apakah
saya fokus pada kegunaan, estetika, atau keduanya?
d) Apa langkah-langkah yang saya ambil dalam menganalisis desain UI? Saya mulai
dengan merinci elemen-elemen tampilan, mengidentifikasi masalah, atau melakukan
pengujian pengguna?
2. Refleksi Pendidik
a) Tidak ada kendala dalam pembelajaran
b) Sebagian besar siswa aktif dalam kegiatan pembelajaran
c) Siswa menemukan kesulitan saat mengidentifikasi elemen user interface dikarenakan
belum terbiasa menggunakan aplikasi e commerce tersebut.
d) Kesulitan siswa dapat diatasi dengan cara membimbing siswa tersebut dengan cara
memberikan contoh solusi. Dengan harapan melalui contoh tersebut, siswa dapat
menemukan solusinya sendiri.
E. LAMPIRAN
- LKPD
- INSTRUMENT PENILAIAN (formatif dan kinerja
Bahan Bacaan (handout; link video, dll) :
Dasar desain user interface (Pengelolaan aset/komponen user interface dari aspek grafis,
warna, typografi, dan tata letak komponen).
Glosarium :
User interface (UI) atau tampilan antar muka pada sebuah aplikasi dikatain baik jika memiliki
tata letak komponen/elemen struktural yang baik, gambar, pemilihan warna, dan desain
yang menarik serta typografi yang mudah dibaca oleh pengguna.
Daftar Pustaka :
Dasar – dasar Pengembangan Perangkat Lunak dan Gim. Okta
Purnawirawan,dkk.Erlangga.2002.(Hal.107-109).
MATERI :
Jika sebuah aplikasi atau website dirancang sedemikian indah, tentu akan membuat para
pengguna merasa terkesan dan nyaman. Hal ini tentu membuat mereka tidak akan mudah
meninggalkan produk digital tersebut begitu saja. Sebaliknya jika sebuah produk digital tidak
memiliki User Interface yang baik, maka membuat pengguna cepat bosan dan meninggalkan
produk tersebut. Untuk itulah UI hadir dengan berbagai fungsi antara lain sebagai berikut:
Setelah mengetahui fungsi penting User Interface bagi produk digital, selanjutnya ketahui juga
cara kerjanya. Berikut cara kerja UI yang perlu Anda ketahui:
a. Persiapan
Sebelum Anda membuat user interface untuk produk, terdapat beberapa hal yang perlu Anda
persiapkan antara lain sebagai berikut:
b. Wireframe
Wireframe adalah sebuah sketsa kasar dari tampilan website atau aplikasi. Biasanya dipakai untuk
menyusun tata letak awal pada sebuah desain. Wireframe bisa Anda coret memakai tangan
maupun tools dari aplikasi khusus.
c. Mockup
Mockup memberikan gambaran detail sebelum akhirnya produk dibuat. Mockup biasanya
menggambarkan aspek desain visual, warna, gambar serta tipografi. Dengan mockup ini maka ide
dapat diterjemahkan ke dalam bahasa yang mudah dimengerti tetapi mockup bersifat statis serta
tidak dapat dioperasikan.
d. Prototype
Prototype merupakan simulasi interaksi pengguna dengan tampilan interface produk sehingga
pengguna bisa melihat serta berinteraksi dengan UI secara langsung. Prototype memang belum
terlihat seperti produk akhir namun hampir mendekati.
ELEMEN – ELEMEN STRUKTURAL USER INTERFACE.
1) Kontrol masukan
Elemen kontrol masukkan memungkinkan pengguna memasukkan inputan ke dalam sistem.
Contoh: kotak centang, radio button, pemilih tanggal, kotak teks, pilihan dropdown, tombol,
dan saklar on/off.
2) Komponen navigasi
Elemen komponen navigasi digunakan untuk membantu pengguna berpindah dari satu
halaman ke halaman lain, menggeser tampilan layar dari atas ke bawah atau kesamping.
Contoh : breadcrumbs, pagination, slide dan tab.
3) Komponen Informasi
Elemen komponen informasi digunakan untuk menampilkan informasi pada pengguna.
Contoh : kotak pesan, notifikasi, jendela pop up, progress bar.
4) Kontainer
Elemen kontainer digunakan untuk menyembunyikan beberapa elemen agar tampilan tidak
terlihat ramai dan pengguna fokus kepada elemen – elemen yang penting.
Contoh : accordeon yang digunakan untuk menampilkan informasi FAQ pada situs web.
5) Grafis
Digunakan untuk mengilustrasikan informasi atau untuk tujuan dekoratif dalam antarmuka
pengguna
Contoh : seperti gambar, grafik, dan ikon.
6) Teks, typography.
Digunakan untuk menyampaikan informasi kepada pengguna. Ini mencakup judul, teks berita,
label, dan banyak lagi. Teks juga digunakan untuk membuat tombol, link, atau elemen
interaksi lainnya. Pemahaman typografi sangat penting yang tujuannya adalah untuk
menciptakan tampilan teks yang mudah dibaca, menarik, dan efektif dalam menyampaikan
pesan atau informasi.
7) Grid /layout : Grid dan layout digunakan untuk mengatur dan mengatur elemen-elemen UI
dalam tampilan yang kohesif dan terstruktur. Ini membantu membuat tampilan yang estetis
dan mudah dimengerti.
8) Konten terkait : Konten terkait seperti video, audio, atau elemen interaktif lainnya dapat
dimasukkan ke dalam antarmuka pengguna untuk memberikan pengalaman yang lebih kaya.
9) Lingkungan responsif : UI dapat dirancang agar responsif, artinya elemen-elemen tersebut
akan beradaptasi dengan baik pada berbagai perangkat dan ukuran layar.
LKPD
Mata pelajaran : Dasar – dasar Pengembangan Perangkat Lunak dan Gim
Elemen : Orientasi dasar Pengembangan Perangkat Lunak dan Gim
Materi : Pengelolaan asset dan user interface (Pengelolaan
aset/komponen user interface dari aspek grafis, warna,
typografi, dan tata letak komponen, audio, video, dan interaksi
pengguna). “Elemen Struktural User Interface”
A. Tujuan Pembelajaran :
1) Peserta didik mampu menjelaskan konsep dasar “Elemen Struktural User
Interface” .
B. Alat / bahan yang dibutuhkan
1) Alat : smartphone,
2) Bahan : Kertas, ballpoint.
C. Standar Kinerja
1) Siswa secara berkelompok mengerjakan tugas yang diberikan oleh guru untuk
dikerjakan dan selesai tepat waktu. waktu yang digunakan tidak lebih dari yang
sudah ditetapkan.
2) Penilaian siswa berdasarkan presentasi.
D. Tugas :
Identifikasi elemen User Interface pada tokopedia sebagai Platform e-commerce”
.
E. Langkah kegiatan
1) Silahkan buka aplikasi tokopedia melalui handphone anda.
2) Secara berkelompok, diskusikan identifikasi elemen – elemen struktural user
interface pada aplikasi tokopedia tersebut.
3) Masukkan hasil identifikasi kelompok anda melalui LKPD.
4) Hasil diskusi disampaikan melalui presentasi.
Identitas Kelompok
Nama kelompok : ………………………………………………….
Anggota kelompok : 1)………………………………………………….
2)………………………………………………….
3)………………………………………………….
Pengamatan user interface dari elemen : *Silahkan dilihat kembali materi pada link video…
1) Kontrol masukan
2) Komponen navigasi
3) Komponen Informasi
4) Kontainer
5) Grafis
6) Teks /typografi.
7) Grid/layout
8) Konten terkait
9) Interaksi pengguna
Lembar Analisis :
1) Kontrol masukan yang ada pada aplikasi tokopedia :
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
………………………………………………………………………………………………
Bagaimana tata letak elemen-elemen penting seperti tombol beli, kategori produk, dan
fitur-fitur utama ditempatkan di halaman utama? Apakah tata letak tersebut efisien?
………………………………………………………………………………………………
Apakah Tokopedia menggunakan ikon-ikon khusus atau simbol-simbol tertentu dalam UI-
nya untuk membantu pengguna memahami fungsionalitas?
………………………………………………………………………………………………
Bagaimana tipografi digunakan dalam UI Tokopedia? Apakah penggunaan jenis huruf (font)
dan ukuran huruf memudahkan pengguna dalam membaca dan memahami informasi?
………………………………………………………………………………………………
………………………………………………………………………………………………
Apakah ada efek animasi atau transisi yang digunakan dalam UI Tokopedia? Apakah efek-
efek tersebut memperbaiki pengalaman pengguna atau justru mengganggu?
………………………………………………………………………………………………
………………………………………………………………………………………………
Bagaimana sistem navigasi dalam aplikasi atau situs web Tokopedia? Apakah ada tombol
kembali yang jelas, menu navigasi, atau fitur pencarian yang mudah digunakan?
………………………………………………………………………………………………
Apakah ada konsistensi dalam desain UI di seluruh aplikasi atau situs web Tokopedia?
Misalnya, apakah elemen-elemen seperti tombol memiliki tampilan yang seragam?
………………………………………………………………………………………………
Bagaimana Tokopedia mengatasi masalah aksesibilitas dalam desain UI-nya? Apakah ada
fitur-fitur yang membantu pengguna dengan kebutuhan khusus?
………………………………………………………………………………………………
………………………………………………………………………………………………
Bagaimana penggunaan ruang dan padding dalam desain UI Tokopedia? Apakah elemen-
elemen tertentu terlalu padat atau terlalu renggang?
………………………………………………………………………………………………
Kesimpulan Analisis :
Apakah elemen -elemen user interface aplikasi tokopedia sebagai e-commerce dapat dikatakan
sudah baik/lengkap ? Jelaskan secara singkat!
………………………………………………………………………………………………
………………………………………………………………………………………………
E. Format Penilaian
1) Penilaian Formatif 1.
a. Test Tertulis
Tuliskan defenisi dari user interface aplikasi! (skor maks = 25)
Tuliskan elemen elemen struktural yang ada pada setiap user interface.!
(skor maks= 40)
Tuliskan kriteria user interface yang dikatakan baik (skor maks=35)
Skor Penilaian :
b. Test Lisan
Guru memberikan tampilan antar muka tokopedia melalui infocus. Lalu secara lisan , guru
memberikan pertanyaan mengenai elemen antar muka tersebut.
Fitur keranjang pada user interface tokopedia, termasuk ke dalam elemen apa?
Sebutkan yang termasuk ke dalam elemen kontrol masukan pada user interface!
Pedoman Penskoran
Sikap
No Nam Jumlah Ket
a 1 2 3 4 5
1
2
3
4
5
a. KriteriaPenskoran:
Kategori Skor
Lima indikator terpenuhi 5
Empat indikator terpenuhi 4
Tiga indikator terpenuhi 3
Dua indikator terpenuhi 2
Satu indikator terpenuhi 1
b) Lembar Observasi Penilaian Diri ( dalam diskusi)
Catatan :
Catatan :
Kelompok: 1
Observasi
No
Nama Siswa kerjasama tanggungjawab toleran disiplin Nilai
Absen (1) (2) (3) (4)
1.
2.
3.
4.
5.
6.
Kelompok: 1
Observasi
Penampilan
Sistematika
Keberanian
penyampaia
Komunikasi
Wawasan
Antusias
No Jml
Nama Siswa Nilai
Absen Skor
n
Rubrik: