MAKALAH HUMAN INTERFACE GUIDELINES (HIG)

PLATFORM APPLE

Dosen Pengampu : Pratyaksa Ocsa N. Saian

Disusun Oleh :
Faizal Anjar Mukti (672017090)
Duan Je Martiko Manurung (672017002)
Afril Caesar M.H. (672017047)
Christofer P.S.U. (672017072)
Andreas Rizky K. (672017092)

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INFORMASI
UNIVERSITAS KRISTEN SATYA WACANA

2019

i
 DAFTAR ISI
JUDUL ........................................................................................................................... i
DAFTAR ISI.................................................................................................................. ii
BAB I PENDAHULUAN .............................................................................................. 1
A. Latar Belakang Permasalahan ............................................................................. 1
B. Rumusan Masalah ............................................................................................... 1
C. Tujuan Pembahasan ............................................................................................ 1
BAB II PEMBAHASAN ............................................................................................... 2
A. iOS ...................................................................................................................... 2
B. macOS ................................................................................................................. 20
C. watchOS .............................................................................................................. 57
BAB III PENUTUP ....................................................................................................... 70
A. Kesimpulan ......................................................................................................... 70
DAFTAR PUSTAKA .................................................................................................... 71

ii
 BAB I PEMBAHASAN
A. Latar Belakang Masalah
Human interfaces guidelines atau biasa disebut HIG merupakan dokumen
pengembangan software yang menyediakan pengembang aplikasi beberapa rekomendasi
tentang pembuatan sebuah aplikasi. Tujuan pembuatan dokumen ini untuk meningkatkan
pengalaman pengguna dengan membuat interface aplikasi yang lebih intuitif, mudah
dimengerti dan konsisten.
HIG berisikan rekomendasi dan nasihat yang dimaksudkan untuk membantu
developer membuat aplikasi yang lebih baik. Dan tujuan utama dari HIG adalah untuk
membuat pengalaman yang konsisten ke seluruh lingkungan sistem operasi atau
lingkungan desktop termasuk aplikasi dan tools yang digunakan.
Pada platform apple, terdapat beberapa HIG seperti pada perangkat iPhone dengan
sistem operasi iOS, perangkat macbook dengan sistem operasi macOS, dan perangkat apple
watch dengan sistem operasi watchOS. Dalam HIG ini, berisikan panduan pembuatan
aplikasi yang sesuai dengan standar perusahaan apple sehingga developer aplikasi dapat
membuat aplikasi yang sesuai dengan ekspetasi perusahaan.
B. Rumusan Masalah
a. Apa isi Human Interfaces Guidelines pada platform apple ?
b. Bagaimana apple mengharapkan aplikasi yang dibuat oleh developer sesuai dengan
standar mereka ?
C. Tujuan Pembahasan
a. Mengetahui isi Human Interfaces Guidelines pada platform apple.
b. Mengetahui standar aplikasi pada platform apple.

1
 BAB II PEMBAHASAN
A. iOS
THEME
Sistem operasi iOS memberikan seorang desainer aplikasi kesempatan untuk memberikan
sebuah produk yang terbaik. Namun untuk membuat aplikasi, aplikasi tersebut harus sesuai dengan
ekspetasi yang tinggi pada kualitas dan fungsionalitas aplikasi tersebut. terdapat tiga tema yang
membedakan iOS dari platform lain
a. Clarity
Pada seluruh sistem, teks terbaca pada semua ukuran, icon tepat dan jelas, hiasan yang lembut
dan jelas, dan fokus pada fungsionalitas adalam motivasi dari desain ini.
b. Deference
Gerakan yang lancar dan interface yang cantik membantu pengguna mengerti dan berinteraksi
dengan konten walaupun belum pernah menggunakannya.
c. Depth
Lapisan visual yang berbeda dan gerakan yang realistis menyampaikan hierarki dan
memfasilitasi pemahaman.
Selain itu, untuk memaksimalkan dampak dan jangkauan, terdapat beberapa prinsip desain
yang diikuti:
a. Aesthetic Integrity
Pada prinsip ini melambangkan bagaimana tampilan aplikasi berintegrasi dengan fungsinya.
b. Consistency
Aplikasi yang konsisten mengimplementasikan paradigma dan standar yang familiar dengan
menggunakan elemen interface yang disediakan sistem, icon yang sudah dikenal, bentuk teks
yang standar, dan terminologi yang seragam.
c. Direct Manipulation
Manipulasi secara langsung pada layar yang melibatkan pengguna dan memfasilitasi
pemahaman terhadap aplikasi tersebut.
d. Feedback
Feedback menangkap tindakan user dan menampilkan hasil dari tindakan tersebut agar
pengguna mengetahui hasil dari tindakan tersebut.
e. Metaphors
Dalam prinsip ini, pengguna akan mempelajari aplikasi tersebut lebih cepat dengan objek
virtual dan tindakan.
f. User Control
Pada iOS, pengguna mengontrol aplikasi, sebuah aplikasi dapat memberikan pilihan
tindakan atau memberi peringatan terhadap konsekuensi yang berbahaya, tapi semua
keputusan diambil oleh pengguna.

2
 Sebagian besar aplikasi iOS dibuat menggunakan UIKit. Pada elemen interface yang
disediakan UIKit dibagi menjadi tiga kategori :
a. Bars
Bagian bar ini memberikan pengguna navigasi didalam aplikasi dan mungkin terdapat
tombol atau elemen lain untuk memulai tindakan dan mengkomunikasikan informasi.
b. Views
Berisi konten utama seperti teksm grafik, animasi, dan elemen interaktif yang pengguna
lihat.
c. Control
Berisikan tombol, text field, dan progress indicators yang berguna untuk memulai tindakan
dan menyampaikan informasi.
ARCHITECTURE
a. Loading
Ketika konten dalam aplikasi sedang loading, jika hanya berisikan layar yang blank atau
statik dapat menyampaikan aplikasi tersebut bukan loading namun aplikasi tersebut frozen.
Sehingga pada saat loading, aplikasi tersebut harus memberi tahu ketika loading sedang
terjadi.
1. Menjelaskan bahwa proses loading sedang terjadi
2. Mendidik atau menghibur orang untuk menutupi waktu loading.

Gambar 1 Loading

b. Modality
Modality adalah teknik desain yang menampilkan konten dalam mode sementara yang
terpisah dari konteks pengguna sebelumnya dan membutuhkan tindakan untuk keluar.
Dengan menggunakan modality ini, aplikasi dapat membantu pengguna fokus pada tugas
mandiri atau serangkaian opsi yang terkait dan memsatikan pengguna menerima dan, jika
perlu, melakukan tindakan pada suatu informasi yang kritis.
1. Gunakan modality sesuai dengan kebutuhan.
2. Buat modal task singkat, pendek, dan fokus terhadap informasi tersebut.
3. Tampilkan judul yang menjelaskan modal task.

3
 Gambar 2 Modality

c. Navigation
Pengimplementasian navigasi merupakan salah satu cara untuk mendukung struktur dan
tujuan aplikasi tersebut tanpa menarik perhatian pengguna. Dalam iOS, terdapat tiga tipe
navigasi yaitu hierarchichal Navigation, Flat Navigation, dan Content-Driven Navigation.
1. Desain struktur informasi yang membuat navigasi ini cepat dan mudah untuk
mendapatkan konten.
2. Gunakan gestur sentuh untuk menciptakan navigasi yang lancar.
3. Gunakan komponen navigasi standar.
d. Onboarding
Pada saat waktu peluncuran merupakan kesempatan untuk mengajarkan pengguna baru dan
terhubung kembali dengan pengguna lama.
1. Sediakan launch screen.
2. Antisipasi kebutuhan tentang help.
3. Tetap pada tutorial yang penting.
4. Hindari menanyakan informasi pengaturan didepan.
5. Hindari menampilkan lisensi persetujuan dan penolakan
e. Requesting Permission
Permintaan perizinan memungkinkan pengguna harus memberikan izin untuk sebuah
aplikasi untuk mengakses informasi pribadi. Meskipun user menghargai kenyamanan
menggunakan aplikasi untuk mengakses informasi ini, tetapi mereka harus memiliki
kontrol terhatap data pribadi mereka.
1. Permintaan data pribadi hanya ketika aplikasi benar-benar membutuhkannya.
2. Gunakan peringatan yang disediakan oleh sistem.

4
 f. Settings
Beberapa aplikasi mungkin membutuhkan cara untuk membuat pilihan pengaturan atau
konfigurasi, tetapi aplikasi dapat menghindari atau menunda melakukan pengaturan.
Ketika desain aplikasi berfungsi dengan keinginan pengguna, hal tersebut dapat
mengurangi penggunaan pengaturan.
1. Prioritaskan opsi konfigurasi didalam aplikasi.
2. Tampilkan opsi konfigurasi yang jarang berubah di pengaturan.
USER INTERACTION
a. 3D Touch
Pada perangkat yang medukung, pengguna dapat mengakses fungsi tambahan dengan
menerapkan banyak tingkatan penekanan pada layar. Pada perangkat dengan iOS 13 dan
selanjutnya, pengguna dapat menggunakan gestur tekan dan tahan untuk membuka menu
konteks, terlepas jika perangkat tersebut mendukung 3D touch. Pada perangkat 3D, gestur
dapat menampilkan menu konteks lebih cepat.
b. Apple Pencil
Apple pencil merupakan alat yang menawarkan ketelitian tingkat piksel ketika menulis
notes, menggambar, mewarnai, dan lebih di iPad apps.
1. Mendukung perilaku yang diharapkan.
2. Menyediakan pengalaman jari dan apple pencil secara konsisten.
3. Menggunakan feedback visual yang mengindikasikan koneksi langsung dengan
konten.
4. Didesain dengan pengalaman terbaik bagi pengguna tangan kanan dan tangan kiri.
c. Audio
Pengguna dapat mengontrol suara melaui tombol volume, tombol diam, kontrol headphone
dan volume slider di layar.
1. Menyesuaikan tingkat suara aplikasi secara otomatis,tetapi tidak suara perangkat
keseluruhan
2. Gunakan tampilan volume yang disediakan sistem untuk mengizinkan pengaturan
audio
3. Gunakan layanan sistem suara untuk suara pendek dan getaran
4. Kategorikan audio aplikasi jika itu penting terhadap aplikasi
5. Respon terhadap kontrol audio hanya ketika itu perlu
d. Authentication
Aplikasi memberi tahu pengguna mengautentikasi hanya untuk berbagi data, mengakses
fitur tambahan, pembelian konten, atau mensinkronisasi data.
1. Jika pengguna tidak menggunakan Sign In with Apple, gunakan password autofill/
2. Tunda Sign-in selama mungkin
3. Jelaskan keuntungan autentikasi dan bagaimana untuk sign up ke pelayanan tersebut
4. Meminimalkan data entry dengan menampilkan keyboard yang sesuai
5. Jangan pernah menggunakan istilah passcode

5
e. Data Entry
Ketika menyentuh elemen interface atau menggunakan keyboard, memasukkan informasi
dapat menjadi proses yang membosankan. Ketika aplikasi terlalu banyak menggunakan
inputan sebelum melakukan sesuatu yang berguna maka pengguna dapat meninggalkan
aplikasi.
1. Dapatkan informasi dari sistem jika memungkinkan
2. Sediakan value default yang masuk akal
3. Memvalidasi value secara dinamis
4. Memudahkan navigasi melalui value list

Gambar 3 Data Entry

f. Drag and Drop

Fungsi drag and drop memudahkan pengguna untuk memindahkan atau menduplikasi foto,
teks, atau konten yang lain dengan cara menarik konten tersebut dari satu lokasi ke lokasi
lain kemudian melepas konten untuk meletakkannya. Drag and drop ini merupakan fitur
yang intuitif dan efisien yang diharapkan pengguna agar diimplementasikan secara luas
kedalam sistem.
g. Feedback
Feedback membantu pengguna mengetahui sedang apa aplikasi tersebut.
1. Status dan jenis feedback yang lain jangan terlalu berlebihan.
2. Hindari peringatan yang tak perlu
h. File Handling
Pengguna tidak perlu memikirkan sistem file ketika membuat, melihat dan memanipulasi
file. Jika aplikasimu bekerja dengan file, gunakan file handling sebanyak mungkin
1. Pastikan pengguna bahwa file akan tersimpan kecuali dibatalkan atau dihapus
2. Jangan memberikan opsi untuk membuat file local-only
3. Terapkan antarmuka penelusuran file yang intuitif dan grafis.
4. Biarkan pengguna melihat file tanpa keluar dari aplikasi

6
 i. Gestures
Pengguna berinteraksi dengan perangkat iOS dengan gestur pada layar.
1. Gunakan gestur standar
2. Hindari penggunaan gestur standar untuk melakukan tindakan yang tidak standar
3. Sediakan gestur shortcut untuk mendukung, tidak mengganti, navigasi dan tindakan
berdasarkan interface
j. Haptics
Haptics memberikan indera peraba pengguna untuk meningkatkan interaksi dengan
interface seperti getaran. Aspek yang perlu diperhatikan antara lain :
1. Bangun relasi yang jelas antara haptic dan pemicunya
2. Gunakan haptic untuk melengkapi feedback aplikasi
3. Gunakan haptic dengan bijaksana
4. Pastikan sudah mengetes haptic di aplikasi
5. Pastikan haptic opsional
k. Near Field Communication
Komponen ini memungkinkan perangkat didalam beberapa centimeter untuk bertukar
informasi nirkabel.

Gambar 4 Near Field Communication

l. Undo and redo

Banyak aplikasi yang memungkinkan pengguna untuk menggoyangkan perangkat untuk
undo dan redo beberapa operasi, seperti mengetik atau menghapus.
1. Jelaskan operasi yang akan di undo atau redo secara jelas dan tepat.
2. Jika aplikasi menggunakan gestur goyang untuk undo dan redo, jangan gunakan gestur
tersebut untuk tindakana lain.
SYSTEM CAPABILITIES
a. Augmented Reality
ARKit, teknologi augmented reality apple, meberikan pengalaman yang menarik yang
menggabungkan objek virtual dengan dunia nyata.
1. Gunakan seluruh tampilan
2. Perhatikan kenyamanan pengguna
3. Perhatikan keamanan pengguna
4. Tunjukkan jika lebih banyak informasi tersedia untuk teks penting.

7
b. Multitasking
Multitasking memungkinkan user berganti dari satu aplikasi ke aplikasi yang lain dalam
setiap waktu.
1. Desain interface yang dapat beradaptasi ketika berjalan di split view
2. Jeda aktivitas ketika ada aplikasi yang memerlukan tindakan lebih
3. Gunakan notifikasi seperlunya
c. Multiple Windows
Pada iOS 13 dan seterusnya, aplikasi apps mendukung adanya jendela yang banyak
sehingga dapat melakukan beberapa tugas dalam aplikasi yang berbeda ataupun sama.
1. Mendukung pengalaman multiple-window untuk jendela utama dan jendela bantu yang
berguna
2. Gunakan tombol selesai atau tutup pada jendela bantu

Gambar 5 Multiple Windows

d. Notifications
Aplikasi dapat menggunakan notifikasi untuk menyediakan informasi yang penting setiap
waktu, baik pada saat perangkat terkunci atau terpakai.
1. Berikan notifikasi yang berguna dan informatif
2. Jangan mengirim banyak notifikasi untuk hal yang sama, bahkan jika pengguna belum
merespons
3. Jangan sertakan nama atau ikon aplikasi
e. Printing
Aplikasi dapat menggunakan keuntukan teknologi AirPrint yang tersedia di sitem untuk
memungkinkan untuk mencetak gambar, PDFs, dan konten lain yang ke printer yang
kompatibel tanpa kabel.
f. Quick Look
Didalam aplikasi, quick look memberi pengguna preview file, bahkan jika aplikasi tidak
mendukung format file tersebut.

8
 g. Rating and Reviews
Rating dan review membantu pengguna memberikan keputusan penting dimana apakah
pengguna ingin mencoba aplikasi tersebut.
1. Meminta rating kepada pengguna setelah pengguna menggunakan aplikasi tersebut
2. Jangan ganggu pengguna untuk meminta rating ketika pengguna sedang melakukan
tugas yang berat.
h. Screenshots
Pengguna dapat menangkap apa yang ditampilkan pada layar mereka menggunakan fitur
screenshot.
i. TV providers
Aplikasi dapat berintegrasi dengan aplikasi TV dan single sign-on sehingga memudahkan
pengguna untuk mengakses ke film dan acara TV favorit.
VISUAL DESIGN
a. Adaptivity and Layout
Elemen interface dan layout suatu aplikasi dapat beradaptasi ke seluruh iOS yaitu iPad dan
iPhone, tidak hanya pada satu perangkat saja.
b. Animation
Animasi yang indah dan halus di seluruh iOS membangun rasa koneksi visual antara
pengguna dan konten di layar.
1. Gunakan animasi dan efek grakan secara bijaksana
2. Buat animasi menjadi opsional
c. Branding
Suatu aplikasi dapat menampilkan brand yang unik melalui tulisan, warna, dan gambar
tetapi jangan sampai branding tersebut menjadi gangguan.
d. Color
Warna adalah cara bagus untuk memberikan kesinambungan visual, mengkomunikasikan
informasi status, memberikan umpan balik dalam menanggapi tindakan pengguna, dan
membantu orang memvisualisasikan data.
1. Gunakan warna dengan bijaksana untuk komunikasi
2. Berikan dua versi warna pada aplikasi untuk memastikannya terlihat bagus dalam mode
terang maupun gelap
3. Hindari penggunaan warna yang menyulitkan orang untuk melihat konten pada aplikasi
e. Dark Mode
Dalam Mode Gelap, sistem menggunakan palet warna yang lebih gelap untuk semua layar,
tampilan, menu, dan kontrol, dan menggunakan lebih banyak warna untuk membuat konten
latar depan menonjol dibandingkan latar belakang yang lebih gelap.
f. Materials
iOS menyediakan material atau efek blur yang menciptakan efek tembus pandang yang
memungkinkan tampilan dan kontrol mengisyaratkan tampilan konten latar belakang tanpa
mengganggu dari konte latar depan.

9
 g. Terminology
Setiap kata didalam aplikasi adalah bagian dari percakapan dengan pengguna aplikasi.
Gunakan terminologi yang sesuai untuk membantu mereka merasa nyaman pada saat
penggunaan aplikasi.
1. Gunakan kata dan frasa yang familiar dan mudah dimengerti
2. Hindari bahasa yang mungkin terdengar merendahkan
h. Typography
Menggunakan jenis font yang dioptimalkan untuk memberikan teks aplikasi dengan
kejelasan dan konsistensi yang lebih.
1. Tekankan informasi penting
2. Gunakan tipe satu tipe font jika memungkinkan
i. Video
Pemutar video yang disediakan sistem menawarkan dua mode tampilan: layar penuh
(pengisian aspek) dan pas ke layar (aspek).
ICON AND IMAGES
a. Image Size and Resolution
1. Gunakan ukuran 8px-by-8px
2. Optimisasi file JPEG untuk menemukan keseimbangan dalam ukuran dan kualitas
3. Sediakan label teks alternatif untuk gambar dan ikon
b. App Icon
Ikon aplikasi adalah kesempatan pertama untuk mengkomunikasikan tujuan aplikasi
tersebut.

Gambar 6 App Icon

c. Custom Icons
1. Buat desain yang mudah dikenali dan disederhanakan
2. Buat ikon aplikasi konsisten
3. Pastikan ikon terbaca
d. Launch Screen
Launch screen dimaksudkan untuk meningkatkan persepsi aplikasi cepat diluncurkan dan
segera siap digunakan.
1. Rancang launch screen yang hampir identik dengan layar pertama aplikasi
2. Hindari memasukkan teks pada launch screen

10
BARS
a. Navigation Bars
Navigation bar muncul di bagian atas layar aplikasi, di bawah bilah status, dan
memungkinkan navigasi melalui serangkaian layar hirarkis. Pertimbangkan untuk
sementara menyembunyikan navigation bar saat menampilkan konten layar penuh.
Judul Navigation Bar
1. Pertimbangkan untuk menunjukkan judul tampilan saat ini di navigation bar
2. Gunakan judul yang jelas ketika aplikasi ingin memberikan penekanan ekstra pada
konteks.

Gambar 7 Navigation Bar

Kontrol Navigation Bar

1. Hindari memadati navigation bar dengan terlalu banyak kontrol
2. Gunakan tombol kembali yang standar
b. Search Bars
Search bar memungkinkan orang untuk mencari melalui koleksi nilai yang besar dengan
mengetik teks ke dalam bidang.
1. Gunakan search bar dibandingkan text field untuk menerapkan pencarian
2. Mengaktifkan tombol clear dan tombol cancel
3. memberikan petunjuk dan konteks di search bar

Gambar 8 Search Bar

Scope Bars
Scope bar dapat ditambahkan ke bilah pencarian untuk memungkinkan orang
mempersempit cakupan pencarian.

11
c. Status Bars
Status bar muncul di sepanjang tepi atas layar dan menampilkan informasi bermanfaat
tentang keadaan perangkat saat ini, seperti waktu, operator seluler, status jaringan, dan
tingkat baterai.
1. Gunakan status bar yang disediakan sistem dan koordinasikan gaya status bar sesuai
dengan desain aplikasi
2. Pertimbangkan untuk menyembunyikan status bar sementara saat menampilkan media
layar penuh

Gambar 9 Status Bar

d. Tab Bars
Tab bar muncul di bagian bawah layar aplikasi dan memberikan kemampuan untuk dengan
cepat beralih di antara berbagai bagian aplikasi.
1. Secara umum, gunakan tab bar untuk mengatur informasi di tingkat aplikasi
2. Jangan sembunyikan tab bar saat orang menavigasi ke area yang berbeda di aplikasi
Anda
3. Pastikan ikon tab bar konsisten secara visual dan seimbang.

Gambar 10 Tab Bar

e. Toolbars
Toolbar muncul di bagian bawah layar aplikasi dan berisi tombol untuk melakukan
tindakan yang relevan dengan tampilan saat ini atau konten di dalamnya.
1. Berikan tombol toolbar yang relevan
2. Pertimbangkan apakah ikon atau tombol dengan judul teks tepat untuk aplikasi Anda.

Gambar 11 Toolbars

12
VIEWS
a. Action Sheets
Action Sheets merupakan peringatan khusus yang muncul sebagai respons terhadap kontrol
atau tindakan, dan akan ada dua pilihan atau lebih yang terkait dengan konteks saat ini.
1. berikan tombol Batal untuk klarifikasi kitika pengguna menutup tugas
2. buat pilihan destruktif yang menonjol
3. hindari mengaktifkan pengguliran dalam lembar tindakan

Gambar 12 Action Sheet

b. Activity Views
Activity views menampilkan aktivitas yang dilakukan oleh iOS seperti salin, favorit, atau
find, yang berguna dalam teks ini. Setelah dimulai suatu kegiatan dapat melakukan dengan
segera, atau meminta informasi sebelum lanjut.
1. desain template gambar yang sederhana untuk mewakili aktivitas khusus and
2. buat judul aktivitas yang secara ringkas menjelaskan tugas anda
3. pastikan kegiatan sesuai untuk konteks saat ini
4. gunakan tombol tindakan untuk menampilkan aktivitas

Gambar 13 Activity Views

c. Alerts
Alerts menyampaikan informasi penting yang terkait dengan keadan aplikasi atau
perangkat, dan sering kali meminta feed back.
1. Peringatan judul dan pesanTulisan judul peringatan singkat, deskriptif
2. Jika anda harus memberikan pesan, tulislah kalimat yang pendek dan lengkap
3. Gunakan kata kata yang baik

13
 Tombol peringatan
1. Secara umum, gunakan peringatan dua tombol
2. Berikan tombol peringatan judul singkat
3. Tempatkan tombol ditempat sesuai keinginan user
4. Label tombol pembatalan dengan tepat tepat.
5. Identifikasi tombol yang merusak
6. Izinkan orang untuk membatalkan peringatan dengan keluar
d. Collections
Mengelola serangkaian konten, seperti serangkaian foto, dan menyajikannya dalam tata
letak yan dapat disesuaikan
1. Hindari membuat desain baru ketika tata letak sudah sesuai
2. Pertimbangkan menggunakan tabel koleksi untuk teks
3. Berhati-hati saat membuat tata letak
e. Image Views
Menampilkan satu gambar atau urutan gambar animasi. Dalam tampilan gambar, gambar
dapat direntangkan, di skalakan, ukurannya agar pas.
1. Jika memungkinkan, pastikan semua gambar dalam urutan animasi berukuran
konsisten
f. Pages
Menampilkan halaman yang menyediakan cara untuk menerapkan cara untuk menerapkan
navigasi linier antara halaman konten, seperti dalam dokumen, buku, notepad, atau
kalender
1. Jika sesuai, terapkan cara menavigasi nonlinier
g. Popovers
Popovers adalah tampilan sementara yang muncul di atas konten lain dilayar ketika anda
mengetuk sebuah kontrol atau disuatu area. Biasanya, popovers menyertakan panah yang
menunjuk ke lokasi dari mana ia muncul
1. Hindari menampilkan popovers di iPhone
2. Gunakan tombol tutup untuk konfirmasi dan panduan saja
3. Selalu simpan pekerjaan secara otomatis menutup popover
4. Posisi popover tepat dilayar
5. Tampilkan satu popover sekaligus
6. Jangan tampikan tampilan lain diatas popover
7. Jika memungkinkan, biarkan penngguna mmenutup satu popover dan membuka yang
lainnya dengan satu ketukan
8. Hindari membuat popover terlalu besar
9. Berikan transisi yang mulus saat mengubah ukuran popovers

14
 Gambar 14 Popovers

h. Scroll Views
Scroll view memungkinkan pengguna untuk menelusuri konten, seperti teks dalam
dokumen atau kumpulan gambar, yang lebih besar dari area yang terlihat
1. Mendukung fungsi zoom yang tepat
2. Pertimbangkan untuk menampilkan kontrol halaman
3. Jangan letakkan tampilan gulir di dalam tampilan gulir lain
i. Split Views
Split views mengelola presentasi dua panel konten berdampingan, dengn konten persisten
dipanel primer dan informasi terkait dipanel sekunder. Setiap panel dapat berisi sebagai
elemen, termasuk bilah navigasi, alat, tab, tabel, koleksi, gambar, peta, dan tampilan
kustom
1. Pilih tata letak tampilan terpisah yang berfungsi baik dengan konten anda
2. Sorot pilihan aktif secara terus-menerus di panel utama
3. Secara umum, batasi navigasi ke satu sisi tampilan split
4. Berikan beberapa cara untuk mengakses panel utama tersembunyi
j. Tables
Tables menyajikan data sebagai daftar baris tunggal kolom yang bergulir yang dapat dibagi
menjadi beberapa bagian. Gunakan tabel untuk menmpilkan sejumlah besar atau kecil
informasi secara bersih dan efisien dalam bentuk daftar. iOS mengimlementasikan dua
gaya tabel, yaitu polos dan dikelompokan
k. Text Views
Text views menampilkan konten teks multiline dan gaya teks. Tampilan teks bisa beberapa
pun dan memungkinkan pengguliran ketika konten meluas di luar tampilan. Secara default,
konten dalam tampilan teks rata kiri dan menggunakan font sistem hitam
l. Web Views
Tampilan web membuat dan menampilkan konten web yang kaya, seperti HTML yang
disematkan dan situs web, langsung dalam aplikasi anda

15
CONTROL
a. Buttons
Buttons memmulai memulai tindakan khusus aplikasi, memiliki latar belakan yang dapat
disesuaikan, dan dapat mmenyertakan judul atau ikon. Sistem menyediakan sjumlah gaya
tombol yang telah ditentukan untuk sebagian besar kasus penggunaan
b. Context Menus
Di iOS 13 dan yang lebih baru, anda dapat menggunakan menu konteks untuk memberi
orang akses ke fungsionalitas tambahan yang yang terkait dengan item di layar tanpa
mengacaukan antarmuka
1. Terapkan menu konteks secara konsisten
2. Hanya menyertakan perintah yang paling sering digunakan yang berlaku untuk item
3. Gunakan sub menu untuk mengelola kompleksitas
4. Pertahankan submenu untuk mengelola kompleksitas
5. Tempatkan submenu ke satu tingkat
6. Tempatkan item yang paling sering digunakan dibagian atas menu
7. Gunakan pemisah untuk mengelompokan item menu terkait
8. Hindari menyediakan menu konteks dan menu edit untuk item yang sama
9. Hindari memberikan tombol tindakan yang membuka pratinjau item

Gambar 15 Context Menu

c. Edit Menus
Pengguna dapat menyentuh dan menahan atau mengetuk dua kali suatu elemen dalam
bidang teks, tampilan teks, tampilan web, atau tampilan gambar untuk memilih konten dan
mennggunakan opsi edit, seperti salin dan tempel
1. Tampilkan perintah yang sesuai untuk konteks saat ini
2. Sesuaikan penempatan opsi edit, jika perlu
3. Jangan menerapkan kontrol lain dengan fungsi yang sama dengan menu edit
4. Izinkan teks yang berpotensi bermanfaat yang tidak dapat diedit untuk dipilih dan
disalin
5. Jangan menambahkan opsi edit ke tombol

16
 6. Buat operasi edit tidak dapat dibatalkan
7. Luaskan opsi edit dengan perintah kustom yang berguna
8. Tampilkan perintah khusus setelah yang disediakan sistem
9. Minimalkan jumlah perintah khusus
10. Buat nama perintah khusus singkat

Gambar 16 Edit Menu

d. Labels
Labels menggambarkan elemen antarmuka layar atau memberikan pesan singkat.
Meskipun orang tidak dapat mengedit label, mereka terkadang dapat menyalin konten
label. Label dapat menampilkan teks statis dalam jumlah berapa pun, tapi sebaiknya tetap
pendek.
e. Page Controls
Page Controls menunjukan posisi saat ini dalam daftar halaman yang datar, ini muncul
sebagai serangkaian titik indikator kecil, mewakili halaman yang tersedia sesuai urutan
pembukaannya.
1. Jangan gunakan kontrol halaman dengan halaman hierarkis
2. Jangan tampilkan terlalu banyak halaman
3. Kontrol halaman tengah di bagian bawah layar
f. Pickers
Pickers menyertakan satu atau beberapa daftar nilai berbeda yang dapat digulir, masing-
masing memiliki nilai tunggal yang dipilih muncul dalam teks yang lebih gelap ditengah
tampilan.
1. Gunakan nilai yang dapat diprediksi dan dipesan secara logis
2. Hindari beralih layar untuk menunjukkan pemilih
3. Gunakan tabel alih-alih pemilih untuk daftar nilai besar
g. Progress Indicators
Pada progress indicators akan memberi tahu pengguna bahwa aplikasi anda tidak macet
dan memberi mereka gambaran berapa lama mereka akan menunggu
Activity Controls
Merupakan progress indicator bahwa aplikasi sedang memuat tugas namun tugas tidak
dapat diverifikasi, seperti memuat atau menyinkronkan data yang kompleks, dilakukan,
dan akan hilang ketika tugas selesai.
1. Mendukung bilah kemajuan daripada indikator aktivitas
2. Biarkan indikator aktivitas terus bergerak
3. Jika ini membantu, berikan informasi berguna sambil menunggu tugas selesai

17
 Progress Bars
Menyertakan trek yang mengisi dari kiri ke kanan untuk menunjukan perkembangan tugas
dengan durasi yang dikethui
1. Selalu laporkan kemajuan secara akurat
2. Gunakan bilah progres untuk tugas dengan durasi yang ditentukan dengan baik
3. Sembunyikan bagian lagu yang tidak terisi di bilah navigasi dan bilah alat
4. Pertimbangkan untuk menyesuaikan tampilan progress bar untuk mencocokkan
aplikasi Anda
Network Activity Indicators
Indikator aktivitas jaringan berputar dibilah status di bagian atas layar saat pemuatan
jaringan
1. Tampilkan indikator ini hanya untuk operasi jaringan yang berlangsung lebih dari
beberapa detik
h. Refresh Content Controls
Refresh content controls dimulai secara manual untuk segera memuat kembali konten,
biasanya dalam tampilan tabel, tanpa menunggu pembaruan konten otomatis berikutnya.
Refresh controls adalah jenis khusus dari indikator aktivitas, disembunyikan secara default,
dan menjadi terlihat ketika menyeret kebawah pada tampilan yang akan dimuat ulang.
1. Lakukan pembaruan konten otomatis
2. Berikan judul pendek hanya jika itu menambah nilai
i. Segmented Controls
Segmented controls adalah dua himpunan linier dua atau lebih segmen, yang masing-
masing berfungsi sebagai tombol eksklusif. Didalam kontrol, semua segmen memiliki
lebar yang sama. Seperti tombol, segmen dapat berisi teks attau gambar.
1. Batasi jumlah segmen untuk meningkatkan kegunaan
2. Cobalah untuk menjaga ukuran konten segmen konsisten
3. Hindari pencampuran teks dan gambar dalam kontrol tersegmentasi
4. Posisikan konten dengan tepat dalam kontrol tersegmentasi khusus

Gambar 17 Segmented Control

j. Sliders
Sliders adalah trek horizontal dengan kontrol yang dapat anda geser dengan jari anda untuk
bergerak di antara nilai minimum dan maksimum, seperti tingka kecerahan layar atau posisi
selama pemutaran media.
1. Kustomisasi tampilan slider jika menambah nilai
2. Jangan gunakan slider untuk menyesuaikan volume audio

18
 k. Steppers
Steppers adalah kontrol dua segmen yang digunakan untuk menambah atau mengurangi
nilai tambahan. Secara default, satu segmen stepper menampilkan simbol plus dan minus.
Simbol simbol ini daoat diganti dengan gambar khusus, jika diinginkan.
1. Jadikan nilai dipengaruhi oleh stepper menjadi jelas
2. Jangan gunakan stepper ketika perubahan nilai besar kemungkinan
l. Switches
Switch adalah sakelar visual antara dua keadaan eksklusif, hidup atau mati.
1. Pertimbangkan untuk menyesuaikan tampilan sakelar agar sesuai dengan gaya aplikasi
Anda
2. Gunakan sakelar di baris tabel saja
3. Hindari menambahkan label untuk menggambarkan nilai-nilai switch
4. Pertimbangkan untuk menggunakan sakelar untuk mengelola ketersediaan elemen
antarmuka terkait
m. Text Fields
Text fields adalah bidang tunggal, ketinggian tetap, sering dengan sudut bulat, yang secara
otomatis menampilkan keyboard ketika pengguna mengetuknya. Gunakan bidang teks
untuk meminta sejumlah kecil informasi, seperti alamat email.
1. Tampilkan petunjuk di bidang teks untuk membantu mengomunikasikan tujuan
2. Tampilkan tombol Hapus di ujung kanan bidang teks bila perlu
3. Gunakan bidang teks aman saat yang tepat
4. Gunakan gambar dan tombol untuk memberikan kejelasan dan fungsionalitas dalam
bidang teks
5. Tampilkan jenis keyboard yang sesuai
EXTENSIONS
a. Custom Keyboards
Ekstensi keyboard menggantikan keyboard standar dengan keyboard khusus. Setelah
diaktifkan, keyboard tersedia selama entri teks dalam aplikasi apa pun, kecuali saat
mengedit bidang teks aman dan bidang nomor telepon.
b. Document Providers
Ekstensi document providers mengimplementasikan antarmuka khusus untuk mengimpor,
mengekspor, membuka, atau memindahkan dokumen aplikasi dari dalam aplikasi lain pada
sistem.
c. Home Screen Actions
Home screen quick action adalah cara mudah untuk melakukan tindakan yang berguna dan
spesifik aplikasi langsung dari layar Beranda.
1. Buat quick action untuk tugas yang menarik dan bernilai tinggi
2. Berikan judul ringkas untuk setiap quick action
3. Berikan ikon yang dapat dikenali untuk setiap quick action
d. Messaging
Aplikasi memungkinkan orang untuk berkomunikasi, berbagi data dan media,
berkolaborasi dalam tugas bersama, dan bermain game satu sama lain.

19
 e. Photo Editing
Ekstensi photo editing memungkinkan orang memodifikasi foto dan video dalam aplikasi
Foto dengan menerapkan filter atau membuat perubahan lain.
f. Sharing and Actions
Ekstensi sharing menyediakan cara yang mudah untuk berbagi informasi dari konteks saat
ini dengan aplikasi, akun media sosial, dan layanan lainnya.
g. Widgets
Widget adalah ekstensi yang menampilkan sejumlah kecil informasi tepat waktu, berguna
atau fungsionalitas khusus aplikasi

B. macOS
THEMES
Desain tema macOs
Empat tema dasar membedakan MacOS apps dari IOS, Tv Os dan watchOs apps. Tema ini
tetap dalam pikiran sebagai apps yagn anda bayangkan.

a. FLEXIBLE
Masyarakat mengharapkan MacOs apps itu menjadi intuitif, sementara itu secara
bersamaan akan disusuaikan dengan workflow (alur kerja) mereka melalui apa yang
diharapkan pembuatan sesuai dengan pesanan atau penyesuaian dan fleksiibilitas. Banyak
apliaksi menawarkan preferensi yang dapat dikonfigurasi, antarmuka yang dapat
disesuaikan, dan cara alternative untuk menyelesaikan tugas. Windows sering dapat diubah
ukurannya dan elemen antarmuka disembunyikan atau diposisikan ulang. Tugas dapat
dimulai dari bilah Tool, menu, control, pintasan keyboard, panel sentuh, fitur eksebilitas,
dan lainnya. Aplikasi yang fleksibel memfasilitasi pembelajaran melalui kemampuan
menemukan.

b. EXPANSIVE (LUAS)
Tampilan besar dan berevolusi tinggi adalah tipikal bagi sebagian besar pengguna Mac,
dan orang sering memperluas ruang kerja mereka dengan menghubungkan monitor
tambahan, Aplikasi dapat memanfaatkan bebagai komponen antarmuka – seperti tabs,
sidebars (bilah sisi), sheets (lembaran), dan panel – dan mendukung fitur – fitur mendalam
seperti mode layer penuh.

c. CAPABLE (bekemampuan)
Mac sangat mampu dalam hal perangkat keras (hardware) dan perangkat lunak (software).
Aplikasi dapat memanfaatkan kekuatan ini untuk menawarkan berbagai fitur dan alur kerja
yang memenuh berbagai kebutuhan pengguna yang sederhana, canggih, dan khusus.

20
d. FOCUSED (focus / terpusatkan)
MacOs dirancang untuk menjaga tugas saat ini jelas dan focus. Kontras visual, tembus
cahaya, dan banyak bayangan besar memudahkan untuk membedakan windows atau
jendela tidak aktif. Antarmuka tunduk pada konten dan control terkait, di seluruh system,
perhiasan halus dan sesuai.
VISUAL INDEX
Sebagian besar aplikasi macOs dibangun menggunakan komponen dari AppKit, kerangka kerja
pemograman yang mendefinisikan elemen antarmuka umum. Kerangka kerja ini
memungkinkan aplikasi mencapai tampilan yang konsisten di seluruh system, sementara pada
saat yang sama menawarkan tingkat enyesuaian yagn tinggi. Elemen AppLit berikut ini
fleksibel dan akrab, dan mereka secara ototmatis memperbaharui ketika system
memperkenalkan perubahan tampilan.
a. Windows and Views
b. Menus
c. Button
d. Fields and labels
e. Selector
f. Indicator
g. Touch bar control and Views
Selain mendefinisikan antarmuka MacOs. AppKit mendefinisikan fungsionalitas yang dapat
diapdosi aplikasi anda. Melaluli kerangka kerja ini, misalnya aplikasi anda dapat merespons
gerakan di trackpad dan mengaktifkan fitur seperti menggambar, eksebilitas, dan pencetajan,
MacOs terintegrasi erat dengan kerangka kerja dan teknologi pemograman lainnya juga, seperti
Gamekit, Metal, SceneKit, dan SpriteKit, memungkinkan anda untuk merancang aplikasi yagn
luar biasa kuat.
Windows And Views
Windows terdiri dari satu atau lebih tampilan yang berisi konten yang dilihat orang dilayar,
termasuk teks, grafik, animasi, dan elemen interaktif.
1. Outline view, menyajika data hirarki dalam daftar gulir sel yang disusun dalam kolom dan
baris.
2. Panel (HUD-style), menampilkan control, opsi, atau informasi yang terkait denagn
dokumen atau selekssi aktif dalam aplikasi yang sangat visual atau imersif.
3. Panel (standard), menampilkan control, opsi, atau informasi yang terkait dengan dokumen
atau seleksi aktif.
4. Popover, menampilkan kontorl, opsi, atau, informasi di atas kontrn lain di layer ketika anda
mengklik control atau tampilan
5. Scoll view, mengaktifkan penjelajahan konten yang lebih besar dari area yang terkait
dengan menggulir secara horizontal dan vertical
6. Sheet, menampilkan control, opsi, atau informasi dalam dialog modal yang ditampilkan ke
windows
7. Sidebar, muncul di satu sisi windows memungkinkan navigasi dan pemilihan item untuk
ditindak lanjuti di bagian utama jendela.
8. Split view, mengelola presentasi 2 atau lebih panel konten

21
9. Tab View, menyajikan beberapa panel konten yang saling eksklusif di area yang sama
10. Table View, menyajikan data dalam daftar gulir sel yang disusun dalam kolom dan baris
11. Toolbar, memberikan akses cepat ke perintah dalam fitur yang sering digunakan dalam
jendela aplikasi
12. Web view, memuat dan menampilkan konten web yagn kaya, seperti HTML dan situs yang
disematkan
13. Windows, terdiri dari area bingkai dan area tubuh yang memungkinkan untuk melihat dan
berinteraksi dengan konten dalam suatu aplikasi

Gambar 18 Windows and View

Menus
Menu menyajikan daftar pilihan, sperti perintah perintah, atibut, atau status.
1. Contextual menu, ditampilkan oleh control mengklik item. Memberikan akses ke perintah
yang sering digunakan terkait dengan konteks saat ini
2. Dock menu, ditampilkan oleh control mengkklik ikon dock aplikasi anda. Memberikan
akses ke seluruh system untuk perintah yang berguna
3. Menu bar Menu, menyediakan akses bilah menu ke perintah khusus aplikasi/

Gambar 19 Menus

Buttons
Tombol memulai tindakan memungkinkan orang untuk membuat pilihan
Action button, biasanya ditemukan di bilah atau di bawah tabel. Menampilkan perintah aplikasi
lebar atau tabel khusus. Mirip dengan menu contextual;

22
1. Checkbox, menawarkan pilihan antara dua kondisi, tindakan atau nilai yang berlawanan
2. Disclosure button, menggunakan dan menyembunyikan fungsionalitas yang terkait dengan
control tertentu seperti bidang teks simpan sebagai dalam dialog simpan
3. Disclosure triangle, menggungkpakan dan menyembunyikan informasi atau fungsionalitas
yang terkait dengan tampilan atau daftar item yang bias diungkap
4. Gradient button, memulai tindakan langsung terkait dengan tampilan tertentu, seperti
menambah atau menghapus baris tabel
5. Help button, membuka dokumentasu bantuan khusus aplikasi si penampilan bantuan yang
disediakan system
6. Image button, berisi gambar atau ikon dan memulai tindakan

Gambar 20 Button

Fields and Labels

Bidang dan label menampilkan informasi statis atau dapat diedit
1. Combo box, menggabungkan bidang teks dengan tombol pull-down dalam satu control
2. Label, menjelaskan elemen antarmuka layer atau memberikan pesan singkat
3. Search field, memulai pencarian berbasis teks dalam koleksi nilai yang besar
4. Text field, mengizinkan pengguna memasukkan dan mengedit satu atau beberapa baris teks.

Gambar 21 Fields and Labels

23
APP ARCHITECTURE
a. Full screen mode
Mode layer penuh yang bebas gangguan dengan toolbar, menu dan standar control lain.
1. Menggunakan full-screen ketika dibutuhkan
2. Memperrtahankan tampilan toolbar , sembunyikan jika focus pengguna ke konten
3. Pertahankan akses ke fitur-fitur penting
4. Konfigurasi jendela bantu menggunakan full screen mode
5. Desain yang efisien ketika dengan file eksternal
6. Respon yang tepat ketika pengguna beralih dari satu aplikasi ke aplikasi lain
7. Biarkan user memilih untuk keluar dari mode full screen
8. Biarkan pengguna menentukan Dock
b. Loading
1. Memberikan interaksi instan ke pengguna
2. Membantu pengguna seberapa lama proses hingga selesai
3. Ketika loading sudah selesai usahakan memunculkan konten segera

Gambar 22 Loading

c. Modality
Memberikan focus ke pop up
1. Menggunakan tampilan lebih kecil dari aplikasi
2. Berikan cara yang jelas dan aman untuk keluar dari pop up
3. Buat modal task simple, singkat dan to the point
4. Menunjukkan dengan jelas mode saat ini
5. Menghargai preferensi pemberitahuan
6. Jangan menampilkan modal view diatas pop up

Gambar 23 Modality

24
d. Onboarding
First page for new user
1. Hindari menanyakan setup informasi di depan
2. Berisi konfigurasi default
3. Hindari splash screen dan intruksi
4. Antisipasi apabila butuh bantuan
5. Berpegang pada hal penting dalam tutorial
6. Buatlah pembelajaran secara menyenangkan dan menimbulkan rasa ingin tahu
7. Berikan bantuan secara bertahap
8. Otomatis menyimpan kerja dari user
9. Selalu bersiap untuk stop dan restart
e. Preference
Pengaturan yang ditentukan pengguna untuk mengingatkan pengguna dari sesi ke sesi.
1. Menawarkan settingan terbatas yang berguna
2. Memberikan preferensi spesifik dari aplikasi
3. Cadangkan preferensi untuk pengaturan yang jarang diubah
4. Memberikan menu items , bukan toolbar items untuk mengakses preferensi aplikasi
Preference Windows
Dialog kecil untuk menyesuaikan preferensi aplikasi, biasanya berisi bilah alat untuk
pengaturan.
1. Menerapkan perubahan seketika ketika diganti
2. Menonaktifkan fitur minimize dan zoom button
3. Pastikan toolbar selalu terlihat dan tidak dapat dicustomisasi
4. Tunjukkan toolbar button yang aktif
5. Pemulihan panel preferensi yang terakhir dilihat
f. Restoring state
Pengguna tidak perlu menelusuri langkah2 dari awal ketika memulai ulang aplikasi
1. Mempertahankan dan merestorasi aplikasi sehingga user dapat melanjutkan pekerjaan
yang mereka tinggalkan pada saat sebelumnya
2. Konfigurasi tampilan yang dibuka kembali seperti yang diharapkan
g. Security
Keamanan pada Apple sangat baik sehingga pengembang dapat menyimpan informasi
secara aman dan mengijinkan untuk operasi tertentu menyangkut informasi di seluruh jaringan
1. Hindari penggunaan kata sandi saja sebagai otentikasi
2. Simpan informasi yang sensitive pada keychain
3. Jangan pernah menyimpan password atau konten keamanan pada plain-text files

25
 4. Buat asumsi dengan bijak
5. Hindari menciptakan skema otentikasi khusus
USER INTERACTION
a. Authentication
Aplikasi meminta pengguna untuk mengautentikasi hanya pada saat pertukaran data, seperti
kemampuan untuk mempersonilasikan pengalaman, mengakses fitur tambahan, membeli
konten, atau mensinkronisasikan data dengan cara masuk dengan sign in with apple.
b. Data Entry
Ketika menyentuh elemen interface atau menggunakan keyboard, mouse, trackpad, atau
suara, memasukkan informasi dapat menjadi proses yang membosankan. Ketika sebuah
aplikasi terlalu banyak meminta inputan sebelum melakukan sesuatu yang berguna,
pengguna akan merasa bosan dengan cepat.
1. Biarkan orang membuat pilihan
2. Gunakan label pengantar atau teks pengganti untuk membantu mengomunikasikan
tujuan.
3. Dapatkan informasi dari sistem jika memungkinkan
4. Pastikan akurasi data yang diisi
5. Memvalidasi value secara dinamis

Gambar 24 Data Entry

c. Drag and Drop

Drag and drop memungkinkan pengguna untuk memilih sumber konten, seperti teks, file,
atau gambar, dan menarik konten tersebut ke lokasi atau tempat yang lain, yang
menghasilkan antara memindah konten tersebut atau menduplikasinya.
1. Implementasikan dukungan drag and drop ke aplikasi
2. Menentukan bahwa operasi drag and drop tersebut memindah file atau
menduplikasinya
3. Buat operasi drag and drop dapat dibatalkan
4. biarkan pengguna memilih dan menarik konten dalam satu langkah
5. Tampilkan feedback gambar seret di bawah penunjuk segera setelah konten diseret
sejauh setidaknya tiga titik

26
d. File handling
Aplikasi dapat menggunakan dialog standar yang disediakan sistem untuk
memungkinkan pengguna berinteraksi dengan sistem file untuk membuka dan
menyimpan file.
Open dialog
1. Putuskan apakah akan menampilkan dialog Terbuka sebagai jendela atau lembar
mandiri
2. Pertimbangkan untuk menambahkan judul atau pesan deskriptif
3. Biarkan orang membuka dokumen dengan cara yang diharapkan
Save dialog
1. Aktifkan auto-save jika aplikasi Anda berbasis dokumen
2. Default ke folder output yang masuk akal
3. Biarkan pengguna memilih format output jika aplikasi dapat menyimpan dalam
berbagai format file
e. Help
Help tag memungkinkan Anda memberikan bantuan sementara, peka konteks, sedangkan
Apple Help memungkinkan Anda memberikan diskusi yang lebih menyeluruh tentang
suatu topik atau tugas. Hindari membatasi tindakan pengguna.
Help tag
1. Jelaskan hasil kontrol yang tepat di bawah pointer.
2. Fokus pada aksi yang dimulai oleh kontrol
3. Gunakan kata-kata sesedikit mungkin
Apple Help
1. Berikan bantuan berbasis tugas.
2. Gunakan aplikasi Help Viewer yang disediakan sistem
f. Keyboard
Keyboard adalah perangkat input penting untuk memasukkan teks, menavigasi, dan
memulai tindakan.
Keyboard-Only interaction
1. Hormati pintasan keyboard standar dan buat pintasan khusus aplikasi untuk perintah
yang sering digunakan.
2. Tambahkan dukungan mode akses keyboard lengkap ke semua elemen antarmuka
khusus

27
 Keyboard shortcut
1. Aktifkan pintasan keyboard yang diharapkan untuk item menu standar.
2. Tetapkan pintasan keyboard baru hanya untuk hal-hal yang dilakukan orang secara
teratur
3. Secara umum, jangan timpa pintasan keyboard standar
4. Pilih tombol Shift sebagai pengubah sekunder ketika tombol pintasan sama seperti
pintasan lain
5. Daftar kunci pengubah dalam urutan yang benar
g. Mouse dan trackpad
Mouse atau trackpad menyediakan cara untuk mengaktifkan elemen antarmuka dan
memulai tindakan menggunakan klik dan gerakan jari yang intuitif untuk menambah input
keyboard.
Click and Gestures
1. Gunakan kontrol dan tampilan standar
2. Tanggapi gerakan dengan cara yang konsisten sama dengan aplikasi lain
3. Tangani gerakan se-responsif mungkin
4. Pastikan gerakan diterapkan ke konten yang sesuai
Pointer
1. Gunakan petunjuk yang disediakan sistem sebagaimana dimaksud.
2. Pilih petunjuk yang disediakan sistem karena mereka familiar
Haptic Feedback
1. Gunakan haptics dengan bijaksana
2. Sinkronisasi haptics dengan suara yang menyertainya
h. Menampilkan feedback user
Umpan balik memberi tahu orang-orang apa yang dilakukan aplikasi dan membantu
mereka memahami hasil tindakan dan apa yang dapat mereka lakukan selanjutnya
1. Status dan jenis feedback yang lain jangan terlalu berlebihan.
2. Hindari peringatan yang tak perlu
i. Requesting permission
Permintaan perizinan memungkinkan pengguna harus memberikan izin untuk sebuah
aplikasi untuk mengakses informasi pribadi. Meskipun user menghargai kenyamanan
menggunakan aplikasi untuk mengakses informasi ini, tetapi mereka harus memiliki
kontrol terhatap data pribadi mereka.
1. Permintaan data pribadi hanya ketika aplikasi benar-benar membutuhkannya.
2. Jelaskan mengapa aplikasi membutuhkan informasi.
3. Gunakan peringatan yang disediakan oleh sistem.

28
SYSTEM CAPABILITIES
a. Auto Save
Aplikasi berbasis dokumen dapat menerapkan autosave untuk secara otomatis menyimpan
versi dokumen saat pengguna mengerjakannya. autosave mengurangi kerja manual saat
mengedit dokumen, meningkatkan fokus pada pembuatan konten dan memastikan
pelestarian data.
b. Dock
Dock menawarkan akses mudah ke aplikasi, situs web, dokumen, jendela, dan folder yang
sering digunakan. Pengguna mengharapkan Dock tersedia setiap saat, di aplikasi apa pun,
dan berperilaku sesuai dengan konfigurasi khusus mereka.
1. Ambil posisi Dock ke akun saat membuat dan mengubah ukuran jendela
2. Perlu diingat menjalankan indikator aplikasi tidak selalu terlihat di Dock

Gambar 25 Dock

Badging
Aplikasi dapat menampilkan oval merah kecil yang berisi angka putih pada ikon Dock
mereka untuk menunjukkan kapan informasi baru yang menarik — tetapi tidak kritis —
tersedia.
1. Jadikan badging intuitif
2. Hindari menggunakan peringatan bersamaan dengan badging

Gambar 26 Badging

c. Finder
Pengguna menggunakan finder untuk mengakses sistem file macOS
1. Pastikan aplikasi memiliki ekstensi nama file .app.
2. Laporkan penggunaan disk dan ukuran file secara akurat dan konsisten
3. Hindari mengubah jenis pencipta file yang ada

29
d. Mission control
Mission Control memungkinkan orang melihat dan menavigasi antara jendela terbuka,
aplikasi layar penuh, desktop, spasi, dan Dashboard dengan cepat. Secara default, Mission
Control dimasukkan menggunakan gerakan dan pintasan keyboard — seperti
menggesekkan dengan tiga jari di trackpad atau menekan Control-Up Arrow.
e. Notifications
Aplikasi dapat menggunakan notifikasi untuk menyediakan informasi yang penting setiap
waktu, baik pada saat perangkat terkunci atau terpakai. Pengguna melihat notifikasi di
bagian atas layar dan di panel pusat notifikasi, yang diakses dengan mengeklik ikon Pusat
notifikasi di bagian atas layar atau menggesek dengan dua jari dari sisi trackpad.
1. Berikan notifikasi yang berguna dan informatif
2. Jangan mengirim banyak notifikasi untuk hal yang sama, bahkan jika pengguna belum
merespons
3. Jangan sertakan nama atau ikon aplikasi
f. Printing
Pengguna aplikasi akan mengapresiasi pilihan luas yang ditawarkan, salah satunya pilihan
printing. Jika pilihan printing diterapkan, maka aplikasi harus berintegrasi dengan sistem
printing sehingga pengguna dapat mencetak dokumen, gambar, PDF, dan konten lainnya
g. Quick Look
Quick Look memungkinkan aplikasi seperti Finder dan Mail untuk menampilkan gambar
mini dan preview ukuran penuh dari Keynote, Numbers, Pages, dan dokumen PDF, serta
gambar dan jenis file lainnya
h. Rating and reviews
Rating dan review membantu pengguna memberikan keputusan penting dimana apakah
pengguna ingin mencoba aplikasi tersebut.
1. Mintalah peringkat ketika pengguna punya waktu untuk mendapatkan pemahaman
yang jelas tentang nilai aplikasi Anda
2. Jangan ganggu pengguna untuk meminta rating ketika pengguna sedang melakukan
tugas atau bermain game
i. Search and spotlight
Spotlight
Spotlight adalah teknologi pencarian yang kuat yang membuatnya mudah untuk
menemukan file dan konten di seluruh sistem
1. Jadikan konten aplikasi dapat dicari
2. Gunakan Spotlight untuk menawarkan kemampuan pencarian file tingkat lanjut dalam
konteks aplikasi

30
 3. Tetapkan metadata untuk jenis file khusus Anda
In-App content search
1. Gunakan API sistem untuk mengaktifkan pencarian tekstual secara menyeluruh
2. Biarkan orang menyimpan pencarian kapan pun
3. Jika aplikasi berbasis dokumen, pertimbangkan untuk menerapkan jendela Find
4. Gunakan search field dan scope bar untuk mengaktifkan pemfilteran konten dalam
tampilan
VISUAL DESIGN
a. Animation
1. Mengusahakan realisme animasi
2. Hindari menggunakan animasi untuk interaksi yag sering terjadi
3. Meningkatkan feedback dan pemahaman
4. Membuat transisi yang halus / lembut
5. Memastikan mode fullscreen berjalan halus/lembut
6. Gunakan efek animasi dan motion efek secara bijak
b. Color
1. Menggunakan warna sesuai dengan kepentingannya
2. Pertimbangkan dengan budaya / pemahaman tiap negara
3. Hindari penggunaan warna yang sulit dipahami
4. Uji warna dengan berbagai macam pencahayaan
5. Menggunakan standar color panel untuk pengguna jika ingin mengganti warna
c. Dark Mode
1. Focus pada konten
2. Darkmode hayalah sebuah pilihan dari user
3. Test design pada kedua macam mode , dark mode and light mode
d. Translucency and vibrancy
Mengaktifkan tampilan dan control untuk mengisyaratkan konten yang berada di latar
belakang. Vibrancy digunakan untuk memberi efek halus secara dinamis dengan memadukan
warna foreground dan background dengan menggunakan keseimbangan pencahayaan dan
penggelapan yang cermat.
1. Selalu bersiaga untuk vibrancy
2. Pengaktifan dan penonaktifan vibrancy pada aplikasi ketika seuai
3. Menggunakan template gambar

31
 Gambar 27 Translucency and vibracy

e. Typografi
1. Menggunakan variasi font yang tepat pada interface
2. Pemakaian ukuran font yang disesuaikan dengan konten
3. Jika memungkinkan hanya gunakan satu type font
4. Pastikan font dapat terbaca dengan baik
5. Gunakan panel standart untuk pengguna jika ingin mengganti style font
6. Gunakan varian font system dinamis untuk mencocokkan tampilan teks dengan standard
controls
ICON AND IMAGES
a. Image size and resolution
1. Menggunakan resolusi tinggi untuk semua tampilan aplikasi
2. Hasilkan gambar dengan size paling besar dan scale ke ukuran terkecil
3. Memakai grid 8x8 px
4. Selalu tayangkan gambar resolusi tinggi
b. App icon
1. Selalu berikan ikon yang realistic dan unik
2. Desain ikon yang bisa diubah
3. Buat desain yang simple
4. Menganduk satu focus point
5. Gunakan warna yang menarik
6. Hindari pemakaian text
7. Hindari penggunaan foto , screenshoot
8. Jangan menggunakan replica dari apple hardware product
c. Custom icons
1. Buat simple dan mudah dipahami
2. Pertahankan konsistensi icon
3. Hindari penggunaan text
4. Tidak menggunakan replica Apple hardware produk
5. Gunakan alternative text label untuk icon

32
 6. Menggunakan ukuran yang tepat
d. Multi-item drag images
Memungkinkan pengguna menginput lebih dari 1 gambar pada workspace
1. System icon
2. Control Icons
3. Freestanding Button Icons
4. Menu Icons
5. Multi-Item Drag Image Icons
6. Permissions Icons
7. Preferences Icons
8. Status Icons
9. System Entity Icons
WINDOWS AND VIEW
a. Windows anatomy
Windows terdiri dari area bingkat dan area tubuh yang memungkinkan pengguna
melihat dan berinteraksi dengan konten dalam suatu aplikasi. Sebuah windows dapat
muncul di layer di samping windows yang lain, atau dapat mengisi seluruh layar. Di
windows yang bukan layar penuh, pengguna dapat mengklik dan menarik bingkai untuk
memposisikan ulang windows di layar. Pengguna juga daoat mengklik dan menyeret tepi
jendela untuk mengubah ukurannya, juka jendela mendukung perubahan ukuran.
Types of windows
Banyak jenis jenis windows di macOS
Type of windows Descriptions Examples
Menyajikan data untuk Dokumen textedit
dilihat, diedit dan dicetak
Document utama
oleh pengguna
Document windows PDF dalam pratinjau
dan jendela yang
menampilkan situs
web di safari
Menyajikan konten dan The calender
fungsi yang tidak terkait windows
dengan dokumen, windows
The contaaacts
App windows utama dalam suatu aplikasi
windows
dianggap sebagai windows
aplikasi utama Finger windows

33
 Floats di atas windows lain The standard color
untuk memberikan informasi panel, the standard
Panel
konfigurasi atau alat untuk fonts panel, dan the
berinteraksi dengan konten document inspector
di jendela lainnya in preview
Muncul sebagai respons Save dialog, open
terhadap tindakan pengguna dialog, print dialog
Dialog
dan memerlukan tindakan
pengguna
Memberikan informasi A warning when
penting tentang kondisi empetying the trash
kesalahan atau
Alert memperingatkan pengguna
tentang situasi aau
konsekuensi yang berpotensi
berbahaya

The window frame

Bingkai (frame) adalah bagian dari jendela yang mengelilingi konten tubuh.
Bingkai jendela dapat menyertakan bilah judul, bilah alat, bilah tabs, dan (dalam khusus
yang jarang terjadi ) bilahh bawah.
Title Bar
Berada di bagian atas judul atas windows dan termasuk untuk menutup,
meminimalkan, dan memperbesar window. Bilah judul windows dokumen juga dapat
menampilkan ikon dan membiarkan pengguna mengklik judul untuk mengubah nama file,
tag, dan lokasi dokumen dan harus terlihat, tetapi tidak dapat disembunyikan di aplikasi
yang mendalam seperti game.
1. Berikan judul kecuali ada konteks yang cukup sehingga tidak diperlukan
Judul adalah nama dokumen atas tanpa judul (untuk dokumen baru). Untuk
jendela aplikasi, judulnya adalah nama aplikasi tersebut. Untuk window lain, judul
mungkin jenis fungsionalitas tertentu, seperti inspector
2. Gunakan nama tampilan saat menggunaakan nama file sebagai judul window
Nama tampilan mencerminkan preferensi pengguna untuk menampilkan atau
menyembunyikan ekstensi file dan mungkin juga menyertakan teks yang dilokasikan

34
3. Jangan tampilan jalur file atau folder di bilah judul
Tunjukkan nama file di bilah judul, jika anda ingin mengekspos jalur lengkap,
lakukan dengan cara lain seperti melalui panel inspektur
4. Gunakan sufiks numerik untuk membedakan judul duplikat
Judul tidak boleh memiliki akhiran angka, ketika ada window lain dengan
judul sama windows harus menyertkan sufiks numerik, dimulai dengan 2.
5. Pastikan pengguna masih dapat berinteraksi dengan window jika anda
menyembunyiakan bilah judul.
Pastikan pengguna masih dapat mengklik dan menarik bingkai untuk
memindahkan windows pastikan ada cukup ruang di bilah alat untuk mengklik dan
menarik window tanpa mengaktifkan item Tollbar
Toolbar
Toolbar berada di bawah title bar dan mencakup control dikenal sebagai item toolbar yang
menyediakan akses cepat ke perintah perintah dan fitur yang sering digunakan, contoh
menghapus, membalas, meneruskan, menandai dan mencari pesan. Toolbar dapat
disembuunyikan dalam mode layar penuh untuk meningkatkan focus pada konten.

Gambar 28 Toolbar

Tab bar
Tab bar berada di bawah bilah judul dan toolbar, dan pengguna dapat mengklik dan
menarik tab keluar dan dari tab bar untuk menampilkan di window terpisah
Bottom bar
window mungkin menyertakan bilah bawah yang berada di bawah area tubuh dan
termasuk control untuk mempengaruhi konten window
The window body
konten ini dapat mengisi seluruh area tubuh, seperti situs web di window safari atau
gambar di pratinjau. Konten yang melampui batas tampilan induknya si area tubuh dapat
digulir.

35
 Scope bar
Scope bar ketika disertakan di atas konten tubuh, memungkinkan pengguna
mempersempit operasi pencarian atau memfilter konten berdasarkan atribut tertentu.
Ketika meringkas pencarian ke lokasi dan attribute tertentu bilah lingkup berada debawah
bilah judul, bilah alat, dan bilah tab.

Gambar 29 Scope Bar

Window states
Window yang ditampilkan di layar berlapis dalam hirarki berddasarkan kapa
terakhir di akses. Window yang lebih baru diakses lebih berlapis dan hirarki berubah
ketika pengguna beralih antara aplikasu dan window. Dalam hirarki window, ada 3 status
window
1. Main window state
Yeng terpenting di dalam window menjadi focus perhatian pengguna dalam suatu
aplikasi adalah jendela utama aplikasi itu
2. Key window state
Jendela kunci juga dapat disebut sebaga jendela aktif hanya dapat ada satu jendela
kunci layar pada setiap saat, juga merupakan jendela kunci namun tidak selalu terjadi.
3. Inactive window state
Window yang tidak dapat ada di latar depan adalah jendela yang tidak aktif
Window appearances
Main key, tombol, dan tidak aktif bervariasi dalam tampilan di layarnya. Jendela tidak aktif
ditundukkan dan tampak jatuh ke belakang. Perbedaan perbedaan ini memudahkan pengguna
untuk dengan cepat mengidentifikasi jendela utama dan kunci.
Vibrancy adalah efek kabur halus yang secara dinamis memandukan latar depan dan latar
belakang menggunakan keseimbangan teknik pencahayaan dan penggelapan yang cermat,
efek ini membangkitkan perasaan mendalam dengan mengaktifkan tampilan dan control untuk
mengisyaratkan konten yang berada di latar belkang.
Activating window
Ketika uer ada di window user dapat mengklik untuk mengaktifkan window yang
membawanya ke depan dan menjadikan window kunci. User juga dapat mengklik ikon Dock
aplikasi untuk mrmbawa semua jendela aplikasi ke depan.
36
 Consider offring a menu of windoe command.
Untuk meminimalkan jendela kunci, memperbesar jendela kunci, menavigasi tab,
memindahkan masing masing jendela ke depan, dan memindahkan semua jendela ke depan.
b. Alert
Peringatan muncul ketika sistem atau aplikasi perlu memperingatkan pengguna
tentang kondisi kesalahan, atau situasi atau konsekuensi yang berpotensi berbahaya. Alert
adalah modal dalam suatu aplikasi kecuali jika itu berkaitan dengan satu dokumen atau
jendela, dalam hal ini ditampilkan sebagai sebuah lembar.

Gambar 30 Alert

Lansiran dapat mencakup elemen elemen berikut :

1. Massage
Ringkasasn singkat tentang kesalahan atau kondisi yang mamanggil, semua
peringatan menyertakan pesan
2. Informative text
Deskripsi lengkap tentang situasi, konsekuensi, dan cara pengguna dapat mengatasi
situasi tersebut, teks yang bersifat informastif dan bersifat opsional tetapi dianjurkan
3. Response buttons
Peringatan dapat mencakup hingga 3 tombol, salah satunya dapat ditetapkan sebaai
tombol default, untuk membatalkan peringatan atau mengambil tinfakan.
4. Icon
System secara otomatis menampilkan ikon aplikasi anda pada peringatan dan juga
didukung oleh ikon khusus
5. Suppression chexbox
Peringata berulang dapat dikonfigurasikan untuk memungkinkan pengguna
menekan kejadian berikutnya dari peringatan yang sama
6. Accessory view
Jika aplikasi memanggilanya maka tampilan khusus ditambahkan ke peringatan
untuk emberikan informasi tambahan
7. Help button
Jika aplikasi anda menawarkan dokumentasi bantuan, anda dapat memasukkan
tombol bantuan dalam peringatan anda yang mengarahkan pengguna ke dokumentasi

37
Minimize alerts
Alert mengganggu pengalaman pengguna dan hanya boleh digunakan dalam situasi
penting seperti mengkorfirmasi pembelian dan tindakan destrktif (seperti penghapusan)
Ensure that each alert offers critical information and useful choices.
Alert harus memperingatkan orang tentang operasi tidak dapat dibatalkan dan memberikan
tombol yang memungkinkan pengguna melanjutkan operasi atau membatalkan jika mereka
berubah pikiran
Avoid using an alert merely to provide information
Peringatan hanya untuk memberikan informasi, pengguna tidak dapat ditindaklanjuti,
pengguna dapat mengklik indicator peringatan jika mereka menginginkan informasi lebih
lanjut tentang situasi tersebut
Use standard alerts
Informasi peringatan yagn disajikan dengn cara cara khusus atau tidak standard dapat
membingungkan dan kecil kemungkinannya untuk dianggap serius
avoid dispaying alerts for common
Pengguna tidak perlu diberitahu tenatang kemungkinan kehilangan data setiap kali mereka
menghapus email atau file. Yang bertujuan membuang data dan dapat dibatalkan.
Use the caution symbol sparingly
Gunakan symbol ini hanya ketika perhatian ekstra bernar benar diperlukan, untuk
mengkonfirmasi tindakan yang dapat mengakibatkan hilangnya data yang tidak disengaja atau
tisak terduga.
Pertimbangkan untuk menyertkan opsi untuk menekan peringatan di masa mendatang dari
jenis yang sama.
Alert Text
1) Berikan pesan yang menggambarkan situasi dengn jelas dengan ringkas
2) Pertimbangkan ungkapan pesan sebagai pertanyaan ketika tindakan default memiliki
konsekuensi negative
3) Cuplikan layar window pweringatn finger yang menggunakan teks untuk memberi
tahunorang orang bahwa tindakan kosong tidak dapat diurungkan
4) Lengkapi pesan peringatan anda dengan teks informatif .
5) Hindari pesan terdengar seperti menuduh menghakimi atau menghina .
6) Hindari menjelaskan tombol tombol peringatan

38
 Alert Buttons
1) Secara umum, gunakan peringatan 2 tombol dengan peringatan 2 tombol menyediakan
pilihan yang mudah antara dua alternative
2) Berikan tombol peringatan judul singkat, logis, judul terbaik terdiri dari satu atau dua kata
yang menggambarkan hasil mengklik tombol
3) Pastikan bahwa juduk tombol default mencerminkan tindakan yang dilakukan tombol.
Hindari menggunakan OK untuk tombol default kecuali jika peringatan itu murni bersifat
informasi
4) Tempatkan tombol di temat orang mengharapkannya, dianjurkan di sebelah kanan,
tombol default sesalu di sebelah kanan dan tombol batal di sebealh kiri
5) Label tombol pembatalan dengan tepat, tobol yang membatalkan tindakan peringatan
harus selalu diberi label BATALKAN
6) Sertakan tombol Batal ketika ada tombol yang merusak . tombol ini memberikan cara
yang jelas dan amam untuk memilih keluar dari tindakan yang merusak.
7) Izinkan tombol Esc dan pintasan keyboard periode- perintah untuk membatalkan
peringatan
8) Pertimbangkan untuk menawarkan pintasan keyboars hemat waktu untuk semua tombol.
c. Boxes
Adalah jenis tampilan yang membuat pengelompokan control yang unik dan logis, bidang
teks, dan elemen antarmuka lainnya. Secara default sebuah kotak memiliki batas dan judul,
yang keduanya dapat dinonaktifkan jika masuk akal untuk alikasi anda.
1) Hindaari kotak yang bersarang, kotak yang bersarang mengambil ruang dan menyulitkan
orang untuk membedakan batas kotak individu
2) Gunakan kapitalisasi gaya kalimat dalam judul kotak, gunaka n huruf besar untuk kata
pertama dan buat sisanya menjadi huruf kecil kecil kecuali kat abenda atau kata sifat yang
tepat
3) Jangan akhiri judul kotak dengan titik dua. Tanfa titik dua tidak penrlu karena kotak itu
sendiri menciptakan hubungan visual antara judul kotak dan isinya.
d. Column Views
Juga dapat disebut dengan browser, kemungkinan pengguna melihat dan menavigasi
hirarki data menggunakan serangkaian kolom vertical. Pertimbangkan untuk menggunakan
tampilan kolom ketika data anda tidak perlu diurutkan beberapa cara, atau ketika anda
memiliki hirarki data yang mendalam di mana pengguna cenderung bernavigasi bolak balik
antar level
1) Tempilkan level root hirarki data anda di kolom pertama. Pengguna tahu mereka dapat
dengan cepat mengulir kembali ke kolom pertama untuk memulai menavigasi hirarki
dari atas lagi
2) Pertimbangkan menunjukkan informasi tentang item yang dipilih ketika tidak ada item
bersarang untuk ditampilkan

39
 3) Biarkan orang mengubah ukuran kolom , ini saangat penting jika nama beberapa item
data tertentu Panjang untuk masuk dalam lebar kolom default.

Gambar 31 Column Views

e. Dialogs
Adalah jenis jendela yang memunculkan respons dari pengguna, dialog disajikan dalam
tiga cara yaitu document-modal,app-modal, dan modeless
1) Document = modal Dialogs
Dilampirkan sebagai lembar (lihat lembar ) dan emncegah pengguna dari
melakukan apa pun dlam dokumen dampai sialog ditolak
2) App – modal dialogs
Mencegah pengguna dari melakukan apapun di aplikasi higga dialognya
diberhentikan
3) Modeless dialogs
Disebut juga panel pengguna dapar terus berinteraksi dengan dokumen dan apliksi
tannpa gangguan
Dialog Entry
Yang dimaksudkan sebagai jendela kecil dan sementara yang tidak memerlukan
interaksi pengguna yang mendalam
1. Berikan nilai default untuk control dan bidang bila memungkinkan
2. Tetapkan focus ke awal lokasi pertama yang menerima input pengguna
3. Jadikan teks statis dapat dipilih
4. Periksa kesalahan selama entry data,\
5. Kapanpun memungkinkan, meminimalkan potensi input yang tidak valis
6. Pertimbangkan untuk memasukkan tombol terapkan yang memungkinkan pratinjau
pengguna berubah sebelum membuatnya.

40
 Layout
1. Gunakan control penggungkapan untuk memberikan informasi atau fungsi yang
hanya dibutuhkan sesekali
2. Pastikan elemen antarmuka berskala dengan benar saat dialog diubah ukurannya
3. Cuplikan layar dialog cetak, dengan info ke kontrol
4. Posisi tombol seperti yang diharapkan, setiap tombol di kanan bawah dialog harus
mengabaikan dialog
5. Pisahkan tombol destruktif dari tombol tidak destruktif

Gambar 32 Layout Dialog

Dialog dismissal
1. Berikan tombol default ketika tindakan yang paling mungkin dilakukan pengguna
tidak berbahaya
2. Berikan tombol default hanya ketika tombol kembali belum digunakan oleh
bidang teks pada dialog
3. Sertakan tombol batal yang melibatkan pintasan keyboard
4. Pastikan tombol batal membatalkan semua perubahan yang diterapkan
5. Gunakan tombol , ok, dan batal sebagaimana mestinya
6. Pastikan tindakan dialog berlangsung cepat.
f. Images views
Tampilan gambar menampilkan gambar tunggal atau urutan gambar animasi diatas
latar belakang transaparan atau buram
1. Aktifkan pengeditan jika berlaku untuk aplikasi anda
2. Gunakan tombol alih alih tampilan ganbar untuk membuat gambar yang dapat
diklik
3. Gunakan gambar template untuk mengadopsi warna tampilan terlampir. Biasanya
digunakan untuk menampilkan ikon di tombol bilah alat.
4. Pastikan bahwa semua gambar dalam urutan animasi berukuran konsisten
g. Outline Views
Menyajikan hirarki seperti folder dan item didalamnya secara bersih dan efisien
dalam daftar gulir sel yang di susun dalam kolom dan baris. Dalam tampilan garis besar,
folder utama diawali dengan segitiga pengungkapan yang dapat diperluas untuk
membuka sub folder.

41
 1. Gunakan tampilan tabel bukan tampilan kerangka untuk menyajikan data yang tidak
hirarki
2. Paparkan hirarki data hanya di kolom pertama
3. Gunakan judul kolom deskriptif untuk memberikan konteks
4. Biarkan orang mengklik judul kolom untuk mengurutkan tampilan kerangka garis
besar jika memeberikan nilai
5. Izinkan orang untuk mengubah ukuran kolom
6. Memudahkan orang untuk memperluas atau mengecilkan folder
7. Pertahankan pilihan ekspansi pengguna
8. Pertimbangkan untuk menggunakan warna baris bergantian dalam tampilan kerngka
multi-kolom
9. Aktifkan pengeditan data jika masuk akal di aplikasi anda
10. Gunakan elipsis terpusat untuk memotong teks sek yang seharusnya terpotong
11. Pertimbangkan untuk menawarkan bidang pencarian untuk membantu orang
menemukan nilai dengan cepat dalam tampilan garis besar yang Panjang
h. Panels
Jendela bantu yang berisi control, opsi, atau informasi yang terkait dengan
document atau selesksi aktif.
1. Gunakan panel untuk memberikan akses penting atau informasi terkait dengan
konten
2. Pertimbangkan alternatif untuk panel
3. Beri judul panel berdasarkan tujuannya
4. Tampilkan dan sembunyikan panel dengan tepat
5. Jangan sertakan panel dalam daftar dokumen di bagian bawah menu window
6. Pastikan semua panel menyertakan bailah judul
7. Secara umum, nonaktifkan tombol minimalkan pada panel
8. Lihat panel dengan judul di antermuka anfa dan dokumenrasi pegnguna
9. Selalu perbaharui panel inspector, inspector adalah jenis panel yang memungkinkan
orang melihat dan terkadang mengedit atribut dari konten yang dipilih
10. Pertimbangkan untuk menyediakan jendela info selain inspector
HUD – style panels
Hanya dikenal sebagai HUD memiliki fungsi yang sama dengan panel normal tetapi
tampilannya lebih gelap dan tembus cahaya
1. Gunakan panel standar
Anda berfokus pada konten yang sangat visual hanya pada waktu jenis panel yang
paling cocok dengan tugasnya
 Dalam aplikasi berorientasi media yang berfokus pada film foto dan slide
 Dalam aplikasi imersif dengan antarmuka gelap
 Ketika panel digunakan untuk melakukan penyesuaian cepat lalu diubahkan

42
 2. Jangan beralih jenis panel saat aplikasi anda beralih mode
3. Gunakan control penyesuaian sederhana dalam HUD
4. Gunakan warna dengan hemat dalam HUD
5. Sedapat mungkin pertahankan HUD kecil,.
i. Popovers
Tampilan yang muncul diatas konten lain di layar ketika anda mengklik kontrol
atau tampilan. Popover dapat ditutup sebagai respons terhadap interaksi pengguna
1. Gunakan popover untuk memaparkan sejumlah kecil informasi atau fungsionalistas
2. Pertimbangkan untuk menggunakan popover daripada tampilan sementara seperti
sidebar dan panel
3. Aktifkan perilaku penutupan yang masuk akal berdasarkan fungsi popover
4. Berikan tombol tutup untuk konfirmasi atau panduan saja
5. Selalu simpan pekerjaan saat menutup popover secara otomastis
6. Posisikan popover dilayar dengan hati hati, harus mengarah langsung ke elemen yang
mengungkapkannya
7. Pertimbangkan untuk membiarkan orang melepaskan popover
8. Buat perubahan penampilan minimal menjasi popover terpisah
9. Tampilkan satu layar popover pada suatu waktu
10. Jangan tampilkan tampilan lain si atas popover kecuali untuk peringatan, tidak ada
yang ditampilkan diatas popover
11. Hindari membuat popover terlalu besar
12. Secara umum pertahankan tampilan popover standar
13. Pastikan popover yang dikostomisasi masih menyerupai popover
14. Berikan transisi yang mulus saat mengubah ukuran popover
15. Jangan gunakan popover sebagai peringatan
16. Hindari menggunakan kata popover dalam dokumentasi pengguna
j. Scroll Views
Tampilan gulir memungkinkan pengguna menelusuri konten yang lebih besar dari
area tampilan, seperti teks dalam dokumen atau kumpulan gambar dengan menggulir
secara horizontal dan vertical
 Continuous scrolling
Ketika pengguna menggesek trackpad dengan dua jari
 Line by line scrolling
Menggulikan satu baris sekaligus saat pengguna menekan tombol panah
 Page by page scrolling
Mengulirkan halaman sampai halaman selanjutnya
1. Akun untuk bilah gulir ditata letak anda
2. Hormati pengaturan bilah gulir pengguna
3. Jangan timpa gerakan gulir default atau pintasan keyboard
4. Pertimbangan utnuk membantu orang menemukan kapan konten suatu jendela dapat
digulir

43
 5. Koordinasikan warna tombol dengan antarmuka anda
6. Jangan letakkan tampilan gulir di dalam tampilan gulir lainnya
7. Jangan pindahkan konten jendela saat bilah gulir sementara muncul
8. Gulir jumlah yang sesuai saat melakukan pengguliran halaman demi halaman
9. Gulir jumlah yang sesuai ketika trek bilah gulir diklik
10. Gulir secara otomatis saat yang tepat pengguna harus memeulai pengguliran sebagan
besar waktu tetapi aplikasi anda harus melakukan pengguliran otomatis dalam situasi
tertentu
11. Jika memungkinkan perlihatkan pilihan dalam konteks ketika secara otomatis
menggulir kesana
12. Jangan pernah menggunakan bilah gulir sebagai bilah geser
13. Pertimbangkan untuk menggunakan bilah gulir kecil atau mini di panel jika
diperlukan
k. Sheets
Lembar adalah dialog modal yang dilampirkan ke jendela tertentu biasanya
dokumen dan mencegah interaksi lebih lanjut dengan jendela hingga lembar itu
dibubarkan
Sheet adalah cara yang baik untuk meminta input pengguna sebelum melanjutkan
dengan tindakan spesifik dokumen seperti melampirkan file mengekspor menyimpan dan
mencetak
1. Gunakan lembar hanya ketika jendela memiliki bingkai lembar harus selalu muncul
dari bingkai jendela diatas area tubuh
2. Buka lembar diatas jendela lain
3. Sebisa mungkin hindari menampilkan lebih dari satu lembar yang melekat pada
sebuah jendela sekaligus
4. Gunakan dialog app-modal bukan sheet ketika dokumen yang sama dibuka di
beberapa jendela
5. Gunakan panel bukan sheet jika pengguna perlu melihat atau berinteraksi dengan
jendela untuk mengatasi dialog
6. Gunakan panel bukan sheet jika pengguna perlu berulang kali memberikan input
dan mengamati hasil
l. Sidebars
Berada di satu sisi jendela dan biasanya dipisahkan dari sisa jendela oleh pembagi
horizontal yang seringkali dapat dipindahkan
1. Pertimbangkan untuk menggunakan bilah sisi untuk memungkinkan pengguna
berinteraksi dengan data berbasis file tanpa memapaerkan ke system file
2. Gunakan judul untuk membentuk pengelompokan logic dari item terkait
3. Secara umum jangan mengekspos lebih dari dua tingkat hiraiki dalam bilah sisi
4. Tangkapan layar sebagian jendela finder dengan bilah sisi trasnparan yang
memperlihatkan beberapa gambar desktop

44
 5. Terapkan tampilan latar belakang ketika jendela berisi lebih dari satu bilah sisi
6. Pertimbangkan untuk menyembunyikan dan menampilkan sidebar secara otomatis
saat jendela induknya diubah ukurannya
7. Kapan pun memungkinkan biarkan orang menyesuaikan konten bilah samping
8. Di bilah sisi yang diedit pertimbangkan untuk menyediakan tombol yang menambah
menghapus memanipulaisi dan yang lainnya
9. Pertimbangkan untuk menggunakan popover alih alih bilah sisi saat anfa
memerlukan cara untuk mengekspos fungsionalistas yang tidak penting
m. Split Views
Tampilan terpisah mengelola presentasi dua atau lebih panel setiap konten pane
dari tampilan split dapat diatur secara horizontal atau vertical dan dipisahkan oleh
pembagi yang biasanya dapat diseret untuk mengubah ukuran panel
1. Biarkan panel disembunyikan saat itu masuk akal
2. Berikan beberapa cara untuk mengakses panel tersembunyi
3. Tetapkan ukuran panel minimum dam maksimum yang sesuai
Dividers
Tampilan split dapat mengadopsi salah satu gaya pembagi berikut. Pengguna dapat
mengklik bagian mana saja dari pembagi tipis . lebih suka gaya pembagi tipis, pengguna
terbiasa denagan tampilan pembagi tipis
n. Tab Views
Meyajikan beberapa panel konten eksklusif di area yang sama, yang mencakup
control tab dan area konten
1. Gunakan tampilan tab untuk menyajikan dicang konten yang terkait erat
2. Berikan antara dua dan enam tab dalam tampilan tab
3. Patikan control di dalam panel hanyak memengaruhi konten di panel yang sama
4. Secara umum sisipkan tampilan tab dengan mninggalkan margin area jendela badan
di semua sisi tampilan tab
5. Berikan label untuk setiap tab yang menjelaskan konten panelnya
6. Hindari menggunakan tombol pop – up sebagai tab- switcher
o. Table views
Menyajikan sejumlah kecil atau besar data secara bersih dan efisien dalam daftar
gulir sel yang disusun dalam kolom dan baris, ideal untuk menampilkan konten berbasis
teks dan sering digunakan untuk navigasi di satu sisi tampilan terpisah dengan konten
terkait di sisi yang berlawanan
1. Gunakan judul kolom deskriptif untuk memberikan konteks, harus berupa kata benda
atau frasa kata benda pendek dengan huruf kapital degan judul dan tanpa tanda baca.
2. Biarkan orang mengklik judul kolom untuk mengurutkan tampilan table jika
memberikan nilai
3. Biarkan orang mengubah ukuran kolom

45
 4. Pertimbangkan untuk menggunakan warna baris bergantian dalam tampilan table
multikolom
5. Aktifkan pengeditan data jika akal di aplikasi anda
6. Pertimbangkan untuk menggunakan tombol sembulan alih alih tampilan tabel satu
kolom saan menyajikan daftar pilih datu kolom
7. Gunakan tampilan garis besar alih alih tampilan table untuk menyajikan data hirarki
8. Gunakan elipsis terpusat untuk memotong teks sel yang seharusnya terpotong
9. Pertimbangkan menawarkan bidang pencarian untuk membantu orang menemukan
niali dengan cepat dalam tampilan tabel yang Panjang
p. Toolbars
Menyediakan akses mudah ke perintah dan fiktur sering digunakan dan berada di
bingkai di bagian atas jendela baik di bawah atau diintegrasikan dengan bilah judul.
1. Toolbar item
Elemen dalam bilah alat ini disebut item bilah alat dan terdiri dari tombo
tombol gambar atau tkontrol system tertentu yang dioptimalkan untuk digunakan
dalam bilah alat

2. Appearance
3. Layout
4. Visibility
5. Costumization
6. Behaviour

46
 q. Web Views
Tampilan web memuat dan menampilkan konten web yang kaya sperti HTML yang
di sematkan da situs web langsung di salam aplikasi anfa
1. Aktifkan navigasi maju dan mundur bila perlu
2. Hindari menggunakan tampilan web untuk membangun browser web. Untuk
memunkginkan orang mengakses situs web secara singkat tanpa meninggalkan
konteks aplikas andabaik baik daja,.
MENUS
a. Menu Anatomy
Menu menyajikan daftar item — perintah, atribut, atau status — dari mana pengguna dapat
memilih. Item dalam menu dikenal sebagai item menu, dan dapat dikonfigurasikan untuk
memulai tindakan, mengaktifkan atau menonaktifkan status, atau menampilkan submenu item
menu tambahan saat dipilih atau sebagai respons terhadap pintasan keyboard yang terkait.
Menu Titles
1. Berikan judul menu yang intuitif
2. Tetap aktifkan menu meskipun item menu tidak tersedia.
Submenus
1. Batasi penggunaan submenu.
2. Berikan judul submenu yang intuitif
3. Gunakan submenu sebagai indentasi item menu
Organizing Menu Item
1. Gunakan garis pemisah untuk membuat grup item menu terkait yang secara visual berbeda
2. Jangan sengaja merancang menu gulir
Variables Menu Item
1. Dynamic Menu Item
2. Toggled Menu Item
b. Contextual Menu
Menu kontekstual, atau menu pintasan, memberikan orang akses ke perintah yang sering
digunakan terkait dengan konteks saat ini.
1. Hanya menyertakan perintah yang paling umum digunakan yang sesuai dalam konteks
saat ini
2. Jangan menetapkan item default dalam menu kontekstual.
3. Tampilkan pintasan keyboard di menu bilah menu, bukan menu kontekstual
c. Dock Menu
Menu Dock muncul ketika pengguna mengontrol-klik ikon Dock aplikasi. Menu ini secara
otomatis mencakup item menu yang disediakan sistem untuk memulai tindakan seperti
membuka aplikasi, keluar dari aplikasi, menyembunyikan jendela aplikasi, menampilkan
jendela aplikasi, mengungkapkan aplikasi di Finder,dan menyimpan aplikasi di Dock.

47
 1. Memberikan item nilai spesifik pada menu aplikasi
2. Tempatkan item menu khusus aplikasi di atas item menu yang disediakan sistem.
d. Menu Bar Menu
Menu Bar di bagian atas layar menyediakan rumah untuk menu tingkat atas di aplikasi Anda.
Menu-menu ini dapat mencakup menu standar, yang disediakan sistem, serta menu khusus
yang ditentukan aplikasi Anda.

BUTTONS
a. Checkboxes:
1. Digunakan hanya untuk menandakan antara 2 status (enable/disable, agree/disagree)
2. Penataan radio button baiknya secara vertical agar lebih mudah di mengerti
3. Status tercampur digunakan
b. Disclosure controls:
1. Disclosure control adalah button yang menampilkan berbagai aksi atau control tambahan
ketika diklik
2. Dalam satu view baiknya tidak menggunakan lebih dari satu disclosure button karena
dapat membingungkan
3. Peletakan disclosure button baiknya diletakan dekat dengan control yang bresangkutan
c. Help button:
1. Tombol yang digunakan untuk memberikan sebuah arahan/penjelasan terhadap sebuah
view
2. Lebih baik hanya ada satu tombol help saja dalam satu view
3. Button yang digunakan baiknya menggunakan help button standard dan posisi kan tombol
pada tempat yang mudah ditemukan
d. Image Button:
1. Image button baiknya diberikan tambahan permukaan yang dapat di klik setidaknya 10px
dari sisi-sisi image
2. Berikan jarak yang mencukupi antara image button dan button lain agar user tidak
memencet tombol lain tanpa sengaja
e. Pop-up Button:
1. Pop-up button digunakan sebagai alternative lain dalam bentuk selection
2. Pop-up digunakan untuk menampilkan list status atau hal lain, tapi bukan command/aksi
yang bisa di ambil
f. Pull-down Button:
1. Gunakan pull-down button untuk menampilkan aksi-aksi yang dapat dilakukan user
2. Pull-down button baiknya memiliki batasan opsi–opsi yang ditampilkan, idealnya di
antara 3 sampai 12
3. Gunakan title/label yang simple dan dapat membuat user paham/mengerti isi dan guna
dari pull-down button ini

48
g. Push Button:
1. Display button baiknya menggunakan text kebanding icon
2. Disarankan menggunakan kata kerja sebagai text yang diletakan di push button(save,
close, print, delete)
3. Text baiknya specific akan aksi yang akan dilalukan
4. Push button digunakan untuk melakukan satu aksi yang berdampak/terjadi secara
langsung yang biasanya akan dilakukan user secara default
h. Radio Button:
1. Text yang digunakan sebagai label harus jelas dan bermakna
2. Jarak antar tiap radio button harus consistent
3. Jika ada keperluan untuk memilih lebih dari satu opsi disarankan menggunakan
checkbox
FIELDS AND LABELS
a. Combo Boxes:
1. Walaupun combo box tidak apa-apa untuk tidak diberikan default value tapi baiknya
salah satu value dari list dibuat menjadi default value, default value tidak harus value
yang pertama dalam list
2. Combo boxes hanya dapat menerima satu pilihan
3. Pastikan text dari value tidak lebih panjang dari field yang disediakan combo box
4. Memberikan pilihan untuk user memasukan custom value itu baik tapi lebih baik lagi
jika disediakan berbagai pilihan relevant/mirip
b. Labels:
1. Label bisa menggunakan text polos atau menggunakan custom style, tapi harus text
dari label tersebut harus diperhatikan kejelasannya jika accessibility settings ada yang
dinyalakan
2. Text label yang merupakan informasi yang berguna sebaiknya selectable(bisa di block
untuk copy/paste contohnya)
c. Search Fields:
1. Gunakan search field kebanding text field biasa agar user dapat mengetahui bahwa ini
adalah search field
2. Karena user sudah familiar dengan dengan tampilan search field disarankan untuk
menghindari penggunaan label penanda bahwa ini search field
3. Sediakan cancel button untuk mebatalkan search
4. Jika diperlukan, berikan hint/bantuan untuk apa yang perlu di search
d. Text Fields:
1. Gunakan label penjelasan dari text field tersebut, text field juga dapat menggunakan
placeholder sebagai penjelasan atas text field
2. Text field baiknya mampu memberi tahukan user jika value yang di input valid atau
tidak.
3. Untuk text field yang dimana informasi sensitive seperti password gunakan password
field

49
 4. Sangat disarankan mengatur ukuran dari text field untuk mencukupi ukuran text yang
diantisipasi yang akan di input.
5. Pastikan agar user dapat menggunakan tombol tab untuk pindah dari satu text field the
text field yang berikutnya untuk mempercepat alur kerja
6. Text field baiknya di tata secara vertical dan ukuran dari tiap text field konsisten agar
memudahkan user saat membaca tiap text fieldnya
INDICATOR
a. Level Indicator:
1. Level indicator digunakan untuk mempresentasikan sebuah nilai dalam bentuk range
numeric, mirip seperti slider tapi ini tujuan lebih ke presentasi kebanding control
2. Level indicator juga bisa menggunakan tick marks(penanda) untuk memberikan kejelasan.
3. Ada 2 style dari level indicator, continuous dan discrete

Gambar 33 Continuous Indicator

Indicator continuous yang bertambah dan akan mengisi bar untuk menandakan value,
gunakan tick marks untuk memberikan context pada bar tersebut

Gambar 34 Discrete Indicator

Indicator discrete merupakan kumpulan dari bar-bar yang kecil disusun secara horizontal,
umumnya tiap bar kecil menandakan beberapa persen tertentu dari 100 persen, tiap bar
akan diisi satu persatu untuk menunjukan value

4. Level indicator bisa digunakan untuk menunjukan tingkatan dari disk space yang sudah
terpakai
5. Penggunaan warna juga disarankan untuk memberikan kejelasan pada indicator seperti
battery yang sudah sedikit/low pada level indicator battery akan diisi dengan bar warna
merah
6. Tick marks hanya digunakan pada Level indicator continuous style
b. Progress Indicator:
1. Progress indicator akan memberikan kepada user sebuah penanda bahwa sebuah progress
berjalan atau tidak

50
 2. Ada 2 style progress indocator, yaitu bar indicator dan spinning indicator
Dan pada tiap style ada 2 tipe indicato, yaitu determinate dan indeterminate

Gambar 35 Determinate Progress

Determinate adalah progress indicator yang dimana berapa persen dari progress yang
telah berjalan dan seberapa dekat lagi progress akan selesai

Gambar 36 Indeterminate Progress

Sedangkan indeterminate adalah indicator yang tingkat progress tidak ditampilkan

melainkan hanya penanda bahwa progress sedang berjalan atau tidak
3. Tidak disarankan untuk mentrasisikan indicator dari bar ke spinning
4. Saat menggunakan indeterminate indicator pastikan untuk menggerakan bar agar user
tahu bahwa progressnya berjalan
5. Jika perintah yang dilaksanakan tidak dapat dihitung gunakan indeterminate
6. Jika perlu berikan label pada determinate indicator untuk menunjukan proses apa yang
sedang dijalankan
7. Spinner indicator tidak disarankan untuk diberikan label
SELECTORS
a. Date Picker:
1. Saat memilih date picker pilih design yang cocok dengan aplikasi, antara textual atau
graphical

51
2. Contoh dari textual dan kombinasi dari tanggal, bulan, tahun, jam, menit, detik yang
ditampilkan

Gambar 37 Textual Date Picker

Textual style(yang di highlight digambar diatas) menampilkan text saja dan user dapat
memasukan secara manual atau mau menggunakan panah atas/bawah untuk increment
atau decrement

52
 3. Berikutnya contoh dari Graphical style

Gambar 38 Graphical Date Picker

Untuk menginput tanggal/bulan/tahun menggunakan tampilan kalender dan tampilan jam

yang dimana user dapat menginput waktu tertentu dengan men-drag jarum jam.
b. Path Controls:
1. Digunakan untuk menunjukan file path dari folder/file yang sedang dibuka/dipilih
2. Ada 2 style dari path control, linear yang seluruh path dari file akan ditampilkan.

Gambar 39 Path Control

Dan Pop-up yang saat di klik baru akan menampilkan file pathnya
3. Disarankan untuk menggunakan path control hanya saat fitur ini akan berguna untuk user

c. Sliders:
1. Slider menggunakan slider linear, slider dengan tick marks(penanda) atau slider circular
tinggal menyesuaikan dengan aplikasi

Gambar 40 Slider

53
 2. Disarankan untuk menerapkan perubahan secara langsung saat menggunakan slider agar
user dapat melihat perubahan secara langsung saat menggunakan slider
3. Gunakan tick marks(penanda) untuk memperjelas dan memberikan tingkat keakurasian
yang tinggi
4. Gunakan label pada tick marks untuk memberikan kejelasan pada tiap tick(penanda)
5. Pengunaan icon juga disarankan untuk memperjelas slider
d. Steppers:
1. Stepper adalah arah panah atas/bawah yang digunakan untuk
menambahkan/mengurangi suatu value dari sebuah text field yang membantu user
mengatur value.
TOUCH BAR
o Hindari menggunakan animasi pada touch bar, karena touch bisa dianggap sebagai
perpanjangan dari keyboard dan biasanya user tidak mengharapkan ada animasi pada
keyboard mereka
o Gunakan pewarnaan yang monochromatic agar penampilan semirip mungkin dengan
keyboard fisik
o Jika perlu menggunakan warna maka gunakan dengan minimal dan dengan selera yang bagus
o Porsi untuk touch bar yang disediakan dengan lebar 2170px dan tinggi 60px, pembagian tiap-
tiap bagian control dipisah dengan jarak 32px

Gambar 41 Porsi Touch Bar

 Control Strip adalah bagian control system level berada, seperti volume up/down atau SIRI
 App region adalah bagian control tambahan yang berdasarkan aplikasi yang sedang dijalankan
 System button contohnya seperti cancel/exit, escape

54
o Dibawah ini adalah beberapa layout touch bar yang umum

Gambar 42 Layout Touch Bar

55
EXTENSION
a. Action Extensions:
1. Ada dua tipe action extesions:
 Viewer: extension yang memberikan cara menamppilkan sesuatu seacara custom
 Editor: extension yang memberikan kemampuan untuk meng-edit konten yang
sedang dibuka
2. Hanya memberikan extension jika diperlukan
b. Automator actions:
1. Buat agar aksi-aksi yang disediakan simple
2. Pastikan agar aksi dapat dikonfigurasi sesuai bagaimana user meninginkanya
3. Gunakan font yang simple dan jelas.
c. Dashboard Widgets
Dashboard memberi pengguna cara untuk mendapatkan informasi dan melakukan tugas-
tugas sederhana dengan cepat dan mudah, tanpa meninggalkan konteks aplikasi saat ini

Gambar 43 Dashboard Widget

d. Finder Sync Extension

Aplikasi yang menyinkronkan file lokal dan jarak jauh harus menyertakan ekstensi Finder
Sync. Misalnya, jika aplikasi Anda menyinkronkan folder di dalam folder Beranda
pengguna, ekstensi Finder Sync dapat menyampaikan informasi status kepada pengguna di
dalam Finder.
e. Menu Bar Extra
Bilah menu tambahan memperlihatkan fungsionalitas khusus aplikasi melalui ikon yang
muncul di bilah menu saat aplikasi Anda berjalan, meskipun itu bukan aplikasi yang paling
depan.

Gambar 44 Menu Extra Bar

56
 f. Notification Center Widgets
Widget adalah ekstensi yang menampilkan sejumlah kecil informasi atau fungsionalitas
khusus aplikasi di panel Today of Notification Center.

Gambar 45 Notification Center

g. Services
Layanan memungkinkan orang mengakses fungsionalitas dalam satu aplikasi dari yang lain.
Aplikasi yang menyediakan layanan mengiklankan operasi yang dapat dilakukan pada tipe
data tertentu. Sistem kemudian secara cerdas memaparkan layanannya di menu aplikasi dan
dalam menu kontekstual yang muncul ketika Mengeklik teks, file, dan jenis data lainnya.
h. Share Extension
Share extension menyediakan cara yang mudah untuk berbagi informasi dari konteks saat
ini ke aplikasi, akun media sosial, dan layanan lainnya.

C. watchOS
THEME
Theme
a. Lightweight interaction
o Memaksimalkan tampilan dan posisi serta informasi yang cepat dan mudah diakses
b. Holistic Design
o Force touch and the digital crown memungkinkan pengguna berinteraksi secara
mulus dengan konten di layer
o Meningkatkan presepsi ke pengguna bahwa hardware dan software tidak dapat
dibedakan
c. Personal Communication
o UI disesuaikan dengan keberadaan pengguna

57
Glanceable
Aplikasi harus menyampaikan informasi dengan jelas dan tanpa gangguan. Memberikan
komplikasi untuk memberi informasi ke pengguna langsung melalui tampilan jam dan
menggunakan notifikasi khusus untuk dapat memaksimalkan kemampuan memindai konten
notifikasi
Actionable
Mengantisipasi dan memastikan kebutuhan pengguna tetnang apa yang ada di layer selalu
terkini dan relevan. Antarmuka notifikasi khusus menangani tugas umum tanpa membuka aplikasi
Responsive
Interaksi harus cepat dan terkini (up to date). Meminimalkan waktu untuk meluncurkan
dan memuat layer baru.
APP ARCHITECTURE
a. Apps
Memberikan pengguna informasi lebih lanjut dengan pelengkapan fungsi dari
iphone yang dimaksud untuk segera memberi informasi kepada pengguna tanpa harus
melihan iphone. Memanfaatkan Handoff untuk meneruskan tugas kembali ke iOS dan
macOS sesuai kebutuhan
1. Atur text dan gambar sehingga dapat menemukan informasi yang pengguna butuhkan
dengan cepat dan mudah
2. Cuplikan snapshot pastikan berisi informasi terbaru , relevan , dan dapat ditindaklanjuti
serta tampilan harus dimenegerti oleh pengguna, tidak menampilkan peringatan di
snapshot
3. Rancangan antar muka dengan snapshot, gambar foto di dock ditampilkan 2/3 dari
normal. Pastikan ukuran font mudah dibaca
b. Interface
Menggunakan komponen WatchKit. Terdapat kerangka kerja untuk menghasilkan
penampilan konsisten dan penyesuaian tampilan untuk aplikasi pengembang. Terdapat 2
kategori :
1. VIEW
o Berisi konten yg dilihat pengguna , seperti text, gambar, animasi, video.
2. KONTROL
o Tindakan dan sampaian informasi. Tombol , switch , dan sliders.
Aplikasi yang komplikasi dapat menggunakan ClockKit agar dapat menyesuaikan template pada
tampilan jam

58
c. Complications
Sebuah interface arloji memiliki setidaknya satu komplikasi, beberapa bahkan 4
atau lebih. System membagi kedalam kelompok yang berbeda, misalnya bezel
lingkaran dan grafik. Aplikasi yang dirancang menyediakan data untuk komplikasi
dalam berntuk garis waktu, untuk menampilkan data mana yang akan ditampilkan
berdasarkan waktu saat ini.
1. Support dengan banyaknya kelompok komplikasi
2. Tampilkan data yang bermanfaat dan relevan
3. Memutuskan apa dan kapan untuk menampilkan data
4. Dapat menentukan ukuran gambar agar sesuai dengan template tertentu
5. Memberikan data realistis pada setiap komplikasi
6. Selalu memberikan informasi tanpa gambar untuk mengurangi kerumitan
7. Menentukan ring / ukuran yang cocok dengan pengembang
8. Menggunakan SF Compact Rounded jika ingin mneggambar text menjadi gambar
Macam-macam komplikasi
a. Circular

Gambar 46 Circular

b. Modular small

Gambar 47 Modular Small

59
c. Modular large

Gambar 48 Modular Large

d. Utility small

Gambar 49 Utility Small

e. Utility large

Gambar 50 Utility Large

f. Extra large

Gambar 51 Extra Large

g. Graphic corner

Gambar 52 Graphic Corner

60
 h. Graphic circular

Gambar 53 Graphic Circular

i. Graphic bezel

Gambar 54 Graphic Bezel

j. Graphic rectangular

Gambar 55 Graphic Rectangular

d. Modal Sheets
Tampilan layer penuh untuk slide diatas aplikasi yang sedang digunakan. Sudut kiri
atas dicadangkan untuk tombol close. Tombol close selalu putih
1. Mengubah close button untuk penyampaian arti yang berbeda, judul alternative
paling umum adalah Selesai dan Singkirkan.
2. Jangan mengguakan “Kembali” atau “<” pada close button karena akan
menyesatkan pengguna.
3. Jangan menggunakan tombol tutup untuk memberi judul pada halaman.
4. Hindari menampilkan lembar kedua dari lembar yang ada , pengguna berharap
untuk kembali ke antarmuka utama.
5. Jangan menyalahgunakan lembar modal, jangan menggunakan untuk menavigasi
konten aplikasi lain.
6. Gunakan system peringatan dan action sheet dalam situasi yang sesuai.

61
 e. Navigation
Aplikasi watchOS dapat mencakup lebih dari satu layer, maka harus memilih model
navigasi antara berbasis halaman atau hirarki, pengembang tidak boleh menggabungkan
kedua jenis model tersebut dalam satu aplikasi.
1. Hirarki = menu bersusun dari atas kebawah
2. Page based = pindah aplikasi slide ke kanan / kiri
1. gunakan lembar modal untuk memperluas antarmuka , jika diperlukan
2. focus pada konten
3. hindari membuat hirarki yang lebih dari 2-3 level
USER INTERACTION
a. Accelerometer and gyroscope
Digunakan untuk kebugaran atau kegiatan yang berhubungan dengan permainan,
misalnya untuk mengukur tingkat aktivitas atau melacak jenis gerakan tertentu. Apple
Watch memungkinkan pengguna merekam data selama beberapa hari sehingga dapat
mengidentifikasi pergerakan jangka Panjang
1. menggunakan data untuk memberikan manfaat kepada pengguna
2. menghindari untuk memanipulasi langsung antarmuka di aplikasi, sentuhan ,
gerakan , menu digital crown, dan force touch adalah cara yang lebih tepat untuk
berinteraksi antarmuka dengan pengguna.

b. Audio and Video

Aplikasi dapat memutak video pendek atau audio clip saat aplikasi lain aktif dan
berjalan di layer depan. Aplikasi dapat memuat konten audio-only lebih lama melalui
headset Bluetooth.
1. Simpan audio dan video layer depan terlebih dahulu, tidak boleh lebih dari 30 detik
dan yang lebih pendek lebih disarankan.
2. Menggunakan waktu akhir video . audio sebelumnya untuk pemutaran yang lama
3. Menggunakan pengkodean yang tepat untuk asset media

Attribute Value
Video codec H.264 High Profile
Video bit rate 160 kbps at up to 30 fps
Resolution (full-screen) 208px × 260px (portrait orientation)
Resolution (16:9) 320px × 180px (landscape orientation)
Audio 32 kbps stereo

62
c. Gestures

Interaksi pengguna Apple Watch menghasilkan sentuhan dan gerakan, ketika

pengguna mengetuk tombola tau control lain, apple watch memanggil metode tindakan
terkait control itu.

1. Taps trigger action-based events in interface elements

2. Vertical swipes scroll the current screen or swipe between detail rows in a table
3. Horizontal swipes display the previous or next page in a page-based interface
4. Left edge swipes navigate back to a parent screen in a hierarchical interface

Aplikasi dapat menggunakan custom gesture untuk meningkatkan kemampuan

isyarat yang disediakan oleh system. Hal itu memungkinkan untuk mendeteksi ketukan
, gesekan , tekanan dan mengubahnya menjadi tindakan di aplikasi.
1. Jangan mengganti pengenal isyarat bawaan
2. Jangan menggunakan gesture yang terlalu lama
3. Hindari penggunakan standart gesture agar tidak terjadi gerakan yang bermaksud
ganda
d. Haptic feedback
Cara penting untuk mendapatkan perhatian pengguna sehingga dapat
menyampaikan informasi yang sama secara konsisten
1. Berlatih pengendalian saat menggunakan haptics
2. Menggunakan haptics hanya untuk alas an yang penting
3. Berikan respon secara visual untuk berinteraksi dengan pengguna
4. Memulai penggunaan haptics disaat yang tepat

e. Digital crown
Memungkinkan pengguna untuk scroll ke konten lain tanpa menghalangi
pandangan tentang konten tersebut. Gunakan tampilan navigasi list item dan tangani
pemilihan item dari daftar itu
1. Menggunakan feedback berupa visual kepada pengguna
2. Perbarui interface dengan kecepatan yang sesuai untuk pengguna

63
SYSTEM CAPABILITIES
a. Handoff
Menyampaikan informasi tentang aktivitas pengguna saat ini ke perangkat
pengguna yg lain.

Gambar 56 Handoff

b. HomeKit
Memungkinkan terhubung dan mengontrol accesoriess rumah dari apple watch.
Cameras
Bisa menampilkan homekit IP Camera
c. Health and Fitness
Dapat memantau perkembangan saat olahraga , dapat mengatur waktu ideal untuk
istirahat.
d. Notifikasi
Tampilan singkat muncul di pergelangan tangan dan berisi informasi singkat
sedangkan tampilan Panjang akan muncul saat pergelangan tangan pengguna terangkat
yang menampilkan informasi lebih detail.
Short Looks
Memberikan tampilan waktu dan notifikasi acara pada waktu tersebut secara singkat
1. Buat judul singkat dan mudah dipahami
2. Privasi terjaga
Long Looks
Memberikan tampilan detail pada notifikasi waktu
e. SpriteKit and SceneKit

64
 SpriteKit menyediakan rendering grafik dan infrastruktur animasi untuk
memanipulasi gambar bertekstur. SceneKit menyediakan infrastruktur serupa untuk
konten 3D
VISUAL DESIGN
a. Animasi
1. Membuat animasi tetap pendek
2. Membuat animasi yang memiliki makna spesifik
3. Jangan membuat layout animasi di interface notifikasi
4. Minimalkan jumlah animasi yang berjalan bersamaan
5. Jadikan animasi menjadi opsional
Layout and Appearance Animations
Dapat memodifikasi ukuran elemen karena perubahan tata letak. Semua animasi
berdasarkan tata letak dan tampilan animasi memiliki pelonggaran ukuran bawaan yang
sudah diterapkan secara otomatos pada awal dan akhir animasi.
Dapat menganimasikan perubahan pada atribut elemen :
1. Alignment
2. Background color
3. Group insets
4. Height
5. Opacity
6. Tint color
7. Width
Animated image sequences
Dapat menampilkan urutan animasi yang terdiri dari 2 atau lebih gambar individual
dari waktu ke waktu
1. Simpan gambar dalam bundle aplikasi watchOS bila memungkinkan
2. Optimalkan semua gambar dalam urutan
3. Gunakan urutan gambar yang sama untuk animasi maju / mundur
b. Color
Penggunaan warna bebas sesuai ciri khas aplikasi tetapi pastikan menggunakan
warna terang untuk text agar dapat terbaca.
1. Menggunakan background warna hitam
2. Hati-hati untuk penggunaan warna terutama ditujukan kepada pengguna buta warna
3. Hindari penggunaan warna untuk menunjukkan interactivity
4. Hindari penggunaan warna yang dapat menyebabkan pengguna sulit memahami
content

65
 c. Customisasi
Pengembang diperbolehkan untuk menentukan font , color dan gambar sesuai
dengan ciri khas aplikasi pengembang.
1. Hindari menampilkan logo di aplikasi karena tempat terbatas dan lebih penting
digunakan untuk content
2. Pastikan text terbaca
3. Hindari penggunaan logo pada background aplikasi
d. Display Size
1. Tampilan content apapun dengan display size yang sama
2. Pakai satu gambar untuk semua display size
e. Layout
1. Hindari memberi informasi terlalu banyak pada satu layer
2. Buat grup visual untuk membantu user menemukan informasi yang dimau
3. Gunakan lebar maksimal dari layer
4. Gunakan tampilan menu
5. Batasu binir side-by-side control di interface
6. Penggunaan kalimat rata kiri
Support multiple screen sizes
Didesain untuk ujung yang melengkung
f. Typografi
1. Menggunakan font yang tepat
2. Menggunakan tidak lebih dari satu jenis font
3. Menggunakan size yang sama
4. Tekankan pada informasi terpenting
5. Jangan gunakan font terlalu kecil
ICON AND IMAGE
a. Image Optimizations
1. Pakai karya seni sesuai ukuran yang sudah ditetapkan
2. Gunakan tipe warna 8bit untuk PNG yang dimana tidak memerlukan full 24bit
color
3. Optimasi JPG agar sesuai ukuran
4. Hindari transparency
b. Complication Image
1. Tetapkan lebar garis menjadi 4 pixel / lebih untuk memastikan dapat terbaca
2. Usahakan menggunakan format gambar PNG
c. Home Screen Icons
1. Buat desain sederhana
2. Merangkul beberapa kesamaan antara watchOS dan iOS pengguna
3. Memastikan satu point utama

66
 4. Desain ikpn sebagai gambar persehi full-bleed dengan ukuran yang sudah
ditentukan
5. Menggunakan icon PNG
6. Jangan menggunakan background hitam pada icon
7. Hindari penggunaan text pada icon
8. All icons should adhere to the following specifications.

Attribute Value
Format PNG
Color space sRGB
Layers Flattened with no transparency
Resolution @2x
Shape Square with no rounded corners
d. Menu Icon
Pada menu icon terdapat label dan ikon, label hanya dapat memiliki 2 baris text dan
ikon adaah template image
INTERFACE ELEMENT
a. Alert and Action Sheets
Alert memungkinkan menampilkan kesalahan atau informasi penting yang terkait
dengan keadaan aplikasi dan aktivitasnya. Action Sheets memungkinkan pengguna untuk
memilih salah satu dari beberapa opsi yang memungkinkan.
1. Menggunakan pesan alert seperlunya

Gambar 57 Alert

Text
1. Memberikan judul yang singkat , jelas agar pengguna mudah memahami
2. Hapus bagian jika dianggap tidak penting.
3. Menggunakan huruf besar dan tanda baca yang benar
b. Button
Gaya tombol memengaruhi tampilan dan penempatan tombol di setiap lebar.
1. Selalu menggunakan input button
2. Memilih style yang tepat berdasarkan jumlah button yang diperlukan
3. Hindari menggunakan halaman pilihan dengan lebih dari 4 button

67
 Buttons
1. Usahakan memakai tombol yang sesuai dengan lebar layer
2. Memakai tinggi yang sama di setiap baris tulisan
3. Menggunakan standar corner radius
4. Pastikan tombol yang ukurannya kecil dapat diketuk dengan cukup mudah
c. Dates and Timers
1. Menampilkan combinasi dari tanggal dan waktu
2. Menampilkan penghitung waktu yang tepat
d. Group
Membantu menata elemen seperti gambar dan label. Grup memiliki atribut untuk
menentukan posisi, ukuran, margin, dan property tentang tata letak lainnya, mencakup
background, warna , radius sudut.
1. Gunakan frup untuk mengatur item secara horizontal atau vertical
2. Next groups untuk mix horizontal dan vertical content
3. Optimalkan gambar yang digunakan untuk latar belakang grup
e. Images
1. Ukuran gambar 38mm x 42mm
2. Buat gambar dengan 2x resolusi awal
3. Menggunakan placeholder graphic untuk menunggu halaman ketika sedang
memuat
4. Optimalisasi gambar
f. Labels
1. Gunakan text dengan warna yang lebih terang dan usahakan tetap terbaca. Hindari
penggunaan font style terlalu berlebihan
g. Menus
Disesuakan dengan tampilan Apple Watch , menu dapat menampilkan hingga 4
tindakan yang relevan untuk layer saat ini tanpa menghilangkan ruang di interface
pengguna
1. Menyertakan menu ketika layer terkini memiliki relevant actions , jika tidak ada
menu maka system akan memutar animasi ketika pengguna menekan layer
2. Menggunakan label dan icon untuk menunjukkan arti dari tiap menu
h. Movies
1. Tetapkan audio dan video yang pendek
2. Tetapkan ukuran video clip yang tepat
3. Gunakan poster untuk tumbnail clips content
4. Jangan gunakan gambar poster yang mirip dengan system control

68
i. Pickers
Menampilkan daftar item yang dapat dinavigasi menggunakan digital crown
1. List = menampilkan text dan gambar dengan scroll
2. Stack = menampilkan gambar
3. Sequence = menampilkan sesuai urutan
j. Sliders
Seperti tombol volume , pengguna dapat menentukan besar kecilnya sebuah
variable dengan klik pada bagian yang diinginkan

Gambar 58 Sliders

k. Switcher
Seperti tombol on / off pada sebuah opsi pilihan
l. Table
Menyajikan baris konten dalam satu kolom. Table pada dasarnya bisa discroll,
mendukung beberapa interaksi dan dapat diberi warna latar belakang
1. Gunakan tipe baris secara konsisten
2. Batasan baris hingga 20
3. Jangan menematkan group pada table
4. Gunakan vertical page-based navigasi pada konten table

Gambar 59 Table

69
 BAB III PENUTUP
A. Kesimpulan
Human Interfaces Guidelines membantu para developer aplikasi untuk membuat
aplikasi yang sesuai dengan standar platform. Para platform apple, terdapat beberapa
human interaction guidelines untuk beberapa perangkat berbeda. Seperti pada perangkat
iPhone dengan sistem operasi iOS, macbook dengan sistem operasi macOS, dan apple
watch dengan sistem operasi watchOS. Oleh karena itu, dengan adanya HIG ini,
memudahkan developer untuk mengembangkan aplikasinya.

70
 DAFTAR PUSTAKA
https://en.wikipedia.org/wiki/Human_interface_guidelines
https://developer.apple.com/design/human-interface-guidelines/

71