MAKALAH

“Human Interface Guidelines”

Diajukan untuk memenuhi Tugas Materi ke – 12 Mata Kuliah Interaksi Manusia Komputer
Dosen : Tubagus Rafi Kusuma

Oleh:
Calista Aulia Ichsan Putri 0102519006
Gilang Suryanegara 0102519010
Mochamad Ridwan Tri Nurdadi 0102519015

PROGRAM STUDI INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS AL-AZHAR INDONESIA

2020

1
 KATA PENGANTAR
Puji dan syukur saya panjatkan kepada Tuhan Yang Maha Esa karena atas berkat harmat
dan karunia – Nya sehingga saya dapat menyelesaikan makalah yang berjudul “Human Interface
Guidelines” untuk memenuhi tugas materi ke – 12 mata kuliah Interaksi Manusia Komputer
dengan baik.
Saya mengucapkan terimakasih kepada Dosen Interaksi Manusia Komputer yang telah
membantu dan membimbing saya dalam proses pembuatan makalah ini. Saya mencoba berusaha
untuk menyusun makalah ini sedemikian rupa dengan harapan dapat membantu dalam
memahami pembaca tentang Human Interface Guidelines.
Saya menyadari bahwa di dalam pembuatan Makalah Human Interface Guidelines ini
masih ada kekurangan sehingga saya berharap saran dan kritik dari pembaca sekalian khususnya
dari Dosen mata kuliah Interaksi Manusia Komputer agar dapat meningkatkan mutu dalam
penyajian berikutnya. Akhir kata saya ucapkan terima kasih.

Jakarta, 29 Desember 2020

KETUA
Calista Aulia Ichsan Putri

2
 DAFTAR ISI

MAKALAH................................................................................................................................................1
KATA PENGANTAR...............................................................................................................................2
DAFTAR ISI..............................................................................................................................................3
BAB I..........................................................................................................................................................4
PENDAHULUAN......................................................................................................................................4
1.1 Latar Belakang................................................................................................................................4
1.2 Rumusan Masalah...........................................................................................................................4
1.3 Tujuan Penulisan.............................................................................................................................4
BAB II........................................................................................................................................................6
PEMBAHASAN.........................................................................................................................................6
2.1 Human Interface Guidelines...........................................................................................................6
2.2 Prinsip Desain App Human Interface Guidelines.........................................................................7
2.3 Elemen Apple Human Interface Guidelines..................................................................................7
2.4 Komponen dan Panduan dalam Apple Human Interface Guidelines.........................................8
2.4.1 iOS..............................................................................................................................................8
2.4.2 App Architecture.........................................................................................................................8
2.4.3 User Interaction........................................................................................................................15
2.4.4 System Capabilities...................................................................................................................15
2.4.5 Visual Design.............................................................................................................................15
2.4.6 Icons and Images......................................................................................................................34
2.4.7 Bars...........................................................................................................................................34
2.4.8 Views........................................................................................................................................40
2.4.9 Controls....................................................................................................................................40
2.4.10 Extensions...............................................................................................................................40
BAB III.....................................................................................................................................................46
PENUTUP................................................................................................................................................46
3.1 Kesimpulan....................................................................................................................................46
DAFTAR PUSTAKA..............................................................................................................................47

3
 BAB I

PENDAHULUAN
1.1 Latar Belakang
Human Interface Guidelines atau biasa disingkat HIG adalah rekomendasi dan saran yang
dimaksudkan untuk membantu pengembang membuat aplikasi yang lebih baik. Pengembang
terkadang dengan sengaja memilih untuk melanggarnya jika menurut mereka pedoman tersebut
tidak sesuai dengan aplikasi mereka, atau pengujian kegunaan menunjukkan keuntungan dalam
melakukannya. Tetapi pada gilirannya, organisasi yang menerbitkan HIG mungkin menahan
dukungan untuk aplikasi tersebut.
Panduan interface manusia sering menjelaskan aturan desain visual, termasuk desain dan
gaya ikon dan jendela. Jauh lebih jarang, mereka menentukan bagaimana input pengguna
dan mekanisme interaksi bekerja. Selain aturan rinci, pedoman terkadang juga memberikan saran
yang lebih luas tentang bagaimana mengatur dan merancang aplikasi dan menulis teks antarmuka
pengguna.
HIG juga dilakukan untuk aplikasi. Dalam hal ini HIG akan dibangun di atas platform
HIG dengan menambahkan semantik umum untuk berbagai fungsi aplikasi. Selain itu, ada juga
pedoman – pedoman yang dapat diikuti bagi para pembuat aplikasi. Berbeda dengan pedoman
khusus platform, pedoman lintas platform tidak terikat pada platform yang berbeda. Panduan ini
membuat rekomendasi yang harus benar di semua platform. Karena hal ini tidak selalu
memungkinkan, pedoman lintas platform dapat mempertimbangkan kepatuhan terhadap beban
kerja yang dikenakan.
1.2 Rumusan Masalah
Dengan melihat dari latar belakang yang sudah dikemukakan, maka ada beberapa
permasalahan yang dapat dirumuskan dan akan dibahas pada makalah ini, yaitu:
1. Apa yang dimaksud dengan Human Interface Guidelines?
2. Apa saja prinsip dari Apple Human Interface Guidelines?
3. Apa saja elemen yang ada di dalam Apple Human Interface Guidelines?
4. Jelaskan komponen dan panduan – panduan yang ada di dalam Apple Human Interface
Guidelines!
1.3 Tujuan Penulisan
1. Memahami apa yang dimaksud dengan Human Interface Guidelines.

4
2. Mengetahui prinsip apa saja yang ada di dalam Apple Human Interface Guidelines.
3. Mengetahui elemen apa saja yang ada di dalam Apple Human Interface Guidelines.
4. Memahami komponen dan mengetahui panduan – panduan yang dapat dilakukan agar
dapat membuat aplikasi yang bagus.

5
 BAB II

PEMBAHASAN
2.1 Human Interface Guidelines
Human interface guidelines (HIG) adalah dokumen pengembangan perangkat lunak yang
menawarkan sekumpulan rekomendasi kepada pengembang aplikasi. Tujuan mereka adalah
untuk meningkatkan pengalaman pengguna dengan membuat interface aplikasi lebih intuitif,
dapat dipelajari, dan konsisten di seluruh lingkungan (umumnya sistem operasi atau lingkup
desktop), termasuk aplikasi dan alat lain digunakan. Ini berarti menerapkan desain visual yang
sama dan menciptakan akses yang konsisten dan perilaku elemen umum interface dari yang
sederhana seperti tombol dan ikon hingga konstruksi yang lebih kompleks, seperti kotak dialog.
Panduan interface manusia sering menjelaskan aturan desain visual, termasuk desain dan
gaya ikon dan jendela. Seringkali mereka menentukan bagaimana input pengguna dan
mekanisme interaksi bekerja. Selain aturan rinci, pedoman terkadang juga memberikan saran
yang lebih luas tentang bagaimana mengatur dan merancang aplikasi dan menulis teks interface
pengguna. Sebagian besar panduan membatasi diri pada definisi tampilan dan nuansa umum
untuk aplikasi di lingkungan desktop tertentu. Panduan menyebutkan kebijakan tertentu.
Kebijakan terkadang didasarkan pada studi manusia – komputer, tetapi sebagian besar
didasarkan pada konvensi yang dipilih oleh preferensi pengembang platform.
HIG adalah rekomendasi dan saran untuk membantu pengembang membuat aplikasi yang
lebih baik. Pengembang terkadang dengan sengaja memilih untuk melanggarnya jika menurut
mereka pedoman tersebut tidak sesuai dengan aplikasi mereka, atau pengujian kegunaan
menunjukkan keuntungan dalam melakukannya. Tetapi pada gilirannya, organisasi yang
menerbitkan HIG mungkin menahan dukungan untuk aplikasi tersebut.  Antarmuka pengguna
Mozilla Firefox, misalnya, bertentangan dengan HIG proyek GNOME , yang merupakan salah
satu argumen utama untuk menyertakan Epiphany alih-alih Firefox dalam distribusi GNOME.
Dalam makalah ini kami akan membahas mengenai Apple Human Interface Guidelines,
lebih tepatnya apa saja yang ada di dalam Apple Human Interface Guidelines, prinsipnya,
elemennya, panduan – panduan, dan pedoman yang bisa dilakukan untuk mengembangkan suatu
aplikasi menjadi lebih baik lagi.

6
2.2 Prinsip Desain App Human Interface Guidelines
Karena kami membahas tentang Apple Human Interface Guidelines, berikut ini ada
beberapa prinsip yang sebaiknya dipahami terlebih dahulu untuk mendesain di platform iOS ini,
yaitu:
1. Aesthetic Integrity
Yaitu desain yang kita buat haruslah sesuai dengan fungsi nya. Misal, aplikasi
yang di desain untuk membantu orang melakukan pekerjaan serius dapat di desain
menggunakan warna yang halus, tidak mencolok, navigasi yang standar agar orang yang
menggunakan tetap fokus.
Sedangkan aplikasi game atau yang sifatnya menghibur bisa menggunakan gambar
yang imersif, dengan warna warna yang kuat dan mencolok agar pengguna bisa merasakan
pengalaman yang menyenangkan dalam menggunakan aplikasi. Jadi, suasana atau tema
dari aplikasi tersebut harus disesuaikan dengan fungsi dan tujuan aplikasi tersebut.
2. Consistency
Aplikasi yang konsisten menyuguhkan pengalaman yang sama tau mirip di setiap
page nya, mulailah menggunakan skema warna yang sama, penggunaan style icon yang
sama dan tipe font yang sama juga. Jadi, dimanapun pengguna berada, dia bisa tau ini app
apa.
3. Feedback
Maksudnya adalah respon balasan yang diterima oleh pengguna saat melakukan
sebuah tindakan. Desain yang baik adalah yang tidak bikin user bingung. Artinya, setiap
tindakan harus ada feedback nya. Feedback tersebut dapat berupa suara, getaran,
perubahan warna, dan lain-lain.
4. User Control
Pengguna harus merasa memegang kendali penuh atas aplikasi yang di gunakan
nya, aplikasi dapat menyarankan tindakan atau memperingatkan pengguna. Sehingga
sebaiknya kita membuat elemen – elemen interaktif yang dapat diprediksi,
mengkonfirmasikan tindakan destruktif, dan membuatnya mudah untuk membatalkan
suatu tindakan.
2.3 Elemen Apple Human Interface Guidelines
Terdapat tiga element utama yang wajib ada dalam mendesain untuk paltform iOS ini,
yaitu:

7
 1. Bars
Memberi tahu pengguna di mana mereka berada di aplikasi, sediakan navigasi, dan
mungkin berisi tombol atau elemen lain untuk memulai tindakan dan menyampaikan
informasi. Pada umumnya berada di bagian paling atas aplikasi.
2. Views
Berisi konten utama yang dilihat pengguna di aplikasi, seperti teks, grafik, animasi,
dan elemen interaktif. Maksudnya, halaman dari app yang kamu buat di sebut sebagai
sebuah view.
3. Control
Elemen di dalam aplikasi yang bisa membuat pengguna mengendalikan apa yang
mereka lakukan di aplikasi, contohnya button dan progress bar.
2.4 Komponen dan Panduan dalam Apple Human Interface Guidelines
2.4.1 iOS
iOS adalah sistem operasi seluler yang dibuat dan dikembangkan oleh Apple Inc. khusus
untuk perangkat kerasnya. Ini adalah sistem operasi yang saat ini memberdayakan banyak
perangkat seluler perusahaan, termasuk iPhone, dan iPod Touch; itu juga mendukung iPad
sebelum pengenalan iPadOS

Ini ada beberapa komponen yang ada di dalam system operasi Ios

1. THEMES

Sebagai desainer aplikasi, Anda memiliki kesempatan untuk menghadirkan produk luar biasa
yang naik ke puncak tangga lagu App Store. Untuk melakukannya, Anda harus memenuhi
ekspektasi tinggi akan kualitas dan fungsionalitas.

8
Tiga tema utama membedakan iOS dari platform lain:

Clarity : Di seluruh sistem, teks dapat dibaca di setiap ukuran, ikon tepat dan jelas, hiasan halus
dan sesuai, dan fokus yang dipertajam pada fungsionalitas memotivasi desain. Ruang negatif,
warna, font, grafik, dan elemen antarmuka secara halus menyoroti konten penting dan
menyampaikan interaktivitas.

Deference : Gerakan yang lancar dan antarmuka yang tajam dan indah membantu orang-orang
memahami dan berinteraksi dengan konten tanpa pernah bersaing dengannya. Konten biasanya
memenuhi seluruh layar, sedangkan tembus pandang dan pemburaman sering kali menunjukkan
lebih banyak. Penggunaan minimal bezel, gradien, dan bayangan menjaga antarmuka tetap
ringan dan lapang, sambil memastikan bahwa konten adalah yang terpenting.

Depth : Lapisan visual yang berbeda dan gerakan realistis menyampaikan hierarki, memberikan
vitalitas, dan memfasilitasi pemahaman. Sentuhan dan kemudahan untuk ditemukan
meningkatkan kesenangan dan memungkinkan akses ke fungsionalitas dan konten tambahan
tanpa kehilangan konteks. Transisi memberikan kesan mendalam saat Anda menavigasi konten.

 SCHEME PRINCIPLES

Untuk memaksimalkan dampak dan jangkauan, perhatikan prinsip-prinsip berikut seperti yang
Anda bayangkan tentang identitas aplikasi Anda.

 AESTHETIC INTEGRITY

Integritas estetika menunjukkan seberapa baik penampilan dan perilaku aplikasi terintegrasi
dengan fungsinya. Misalnya, aplikasi yang membantu orang melakukan tugas serius dapat
membuat mereka tetap fokus dengan menggunakan grafik yang halus dan tidak mengganggu,
kontrol standar, dan perilaku yang dapat diprediksi. Di sisi lain, aplikasi imersif, seperti game,
dapat memberikan tampilan menawan yang menjanjikan kesenangan dan kegembiraan, sekaligus
mendorong penemuan.

 CONSISTENCY

Aplikasi yang konsisten menerapkan standar dan paradigma yang sudah dikenal dengan
menggunakan elemen antarmuka yang disediakan sistem, ikon terkenal, gaya teks standar, dan

9
terminologi seragam. Aplikasi ini menggabungkan fitur dan perilaku dengan cara yang
diharapkan orang.

 DIRECT MANIPULATION

Manipulasi langsung dari konten di layar melibatkan orang dan memfasilitasi pemahaman.
Pengguna mengalami manipulasi langsung saat mereka memutar perangkat atau menggunakan
gerakan untuk memengaruhi konten di layar. Melalui manipulasi langsung, mereka dapat melihat
hasil tindakan mereka yang langsung dan terlihat

 FEEDBACK

Umpan balik mengakui tindakan dan menunjukkan hasil agar orang tetap mendapat informasi.
Aplikasi iOS bawaan memberikan umpan balik yang kentara dalam menanggapi setiap tindakan
pengguna. Elemen interaktif disorot secara singkat saat diketuk, indikator kemajuan
mengkomunikasikan status operasi jangka panjang, dan animasi serta suara membantu
memperjelas hasil tindakan.

 METAPHORS

Orang-orang belajar lebih cepat jika objek dan tindakan virtual aplikasi adalah metafora untuk
pengalaman yang sudah dikenal baik yang berakar di dunia nyata atau digital. Metafora bekerja
dengan baik di iOS karena orang berinteraksi secara fisik dengan layar. Mereka memindahkan
tampilan untuk mengekspos konten di bawahnya. Mereka menyeret dan menggeser konten.
Mereka beralih sakelar, memindahkan slider, dan menggulir melalui nilai alat pilih. Mereka
bahkan membolak-balik halaman buku dan majalah

 USER CONTRO

Di seluruh iOS, orang-orang , bukan aplikasi yang memegang kendali. Aplikasi dapat
menyarankan suatu tindakan atau memperingatkan tentang konsekuensi berbahaya, tetapi
biasanya aplikasi mengambil alih pengambilan keputusan merupakan kesalahan. Aplikasi terbaik
menemukan keseimbangan yang tepat antara mengaktifkan pengguna dan menghindari hasil
yang tidak diinginkan. Sebuah aplikasi dapat membuat orang merasa seolah-olah mereka
memegang kendali dengan menjaga elemen interaktif tetap familier dan dapat diprediksi,

10
mengonfirmasi tindakan destruktif, dan mempermudah pembatalan operasi, bahkan ketika
sedang berlangsung.

2. MAC CATALYST

Saat Anda menggunakan Mac Catalyst untuk membuat versi Mac dari aplikasi iPad Anda, Anda
membuat aplikasi Anda tersedia untuk audiens baru sambil memberikan kesempatan kepada
pengguna yang ada untuk menikmatinya di lingkungan baru

 BEFORE YOUR START

Sebagian besar aplikasi iPad adalah kandidat yang bagus untuk adaptasi, tetapi beberapa
mengandalkan fitur iPad yang tidak ada di Mac. Misalnya, jika fitur penting aplikasi Anda
memerlukan kemampuan iPad seperti giroskop, akselerometer, atau kamera belakang, kerangka
kerja iOS seperti HealthKit atau ARKit, atau fungsi utama aplikasi adalah sesuatu seperti
navigasi, itu mungkin tidak sesuai untuk Mac.

Untuk aplikasi yang tidak memerlukan fitur khusus iPad, cara terbaik untuk memastikan bahwa
aplikasi Anda akan berfungsi dengan baik di Mac adalah dengan memastikannya berfungsi
dengan baik di iPad. Secara khusus, aplikasi Anda harus :

- Mendukung multitasking. Aplikasi yang melakukan pekerjaan yang baik menskalakan

antarmuka untuk mendukung Split View, Slide Over, dan Picture in Picture mendekati

11
 tujuan akhir untuk mendukung pengubahan ukuran jendela ekstensif yang diharapkan
pengguna Mac.
- Mendukung seret dan lepas. Jika Anda mendukung seret dan lepas di aplikasi iPad, Anda
mendapatkan dukungan yang sama di Mac secara gratis.
- Tanggapi pintasan keyboard, termasuk pintasan macOS umum. Meskipun papan ketik
mungkin tidak selalu tersedia untuk aplikasi iPad Anda, pengguna iOS dan macOS
menghargai penggunaan pintasan papan tombol untuk menyederhanakan interaksi
mereka dengan aplikasi Anda.
 Plan Enhancements for Your Mac App

Saat Anda menggunakan Mac Catalyst untuk membuat versi Mac dari aplikasi iPad Anda, Anda
mendapatkan dukungan otomatis untuk fitur-fitur dasar Mac, seperti :

- Preferensi Sistem
- Keyboard, trackpad, mouse, dan input Touch Bar, termasuk fokus tombol dan navigasi
keyboard
- Window management
- Rich text interaction , termasuk Salin dan temple dan menu konstekstual untuk
pengeditan
- File management

Selain itu, banyak elemen UI yang disediakan sistem secara otomatis dikonversi dari iOS ke
macOS. Misalnya, Anda mendapatkan versi yang sesuai untuk macOS dari item yang disediakan
iOS berikut :

- Split view
- File browser
- Activity view
- Form sheet
- Kontekstual action

12
 3. Interface Essentials

Sebagian besar aplikasi iOS dibuat menggunakan komponen dari UIKit, kerangka kerja
pemrograman yang mendefinisikan elemen antarmuka umum. Kerangka kerja ini memungkinkan
aplikasi mencapai tampilan yang konsisten di seluruh sistem, sementara pada saat yang sama
menawarkan penyesuaian tingkat tinggi. Elemen UIKit fleksibel dan familiar. Mereka mudah
beradaptasi, memungkinkan Anda merancang satu aplikasi yang tampak hebat di perangkat iOS
apa pun, dan secara otomatis diperbarui saat sistem memperkenalkan perubahan tampilan.
Elemen antarmuka yang disediakan oleh UIKit masuk ke dalam tiga kategori utama :

BARS. Beri tahu orang-orang di mana mereka berada di aplikasi Anda, berikan navigasi, dan
mungkin berisi tombol atau elemen lain untuk memulai tindakan dan mengkomunikasikan
informasi

VIEWS. Berisi konten utama yang dilihat orang di aplikasi Anda, seperti teks, grafik, animasi,
dan elemen interaktif. Tampilan dapat mengaktifkan perilaku seperti menggulir, memasukkan,
menghapus, dan mengatur.

CONTROLS. Memulai tindakan dan menyampaikan informasi. Tombol, sakelar, bidang teks,
dan indikator kemajuan adalah contoh kontrol.

Selain menentukan antarmuka iOS, UIKit menentukan fungsionalitas yang dapat diadopsi
aplikasi Anda. Melalui framework ini, misalnya, aplikasi Anda dapat merespons isyarat di layar
sentuh dan mengaktifkan fitur seperti menggambar, aksesibilitas, dan pencetakan.

13
iOS terintegrasi erat dengan kerangka kerja dan teknologi pemrograman lain juga, seperti Apple
Pay, HealthKit, dan ResearchKit, memungkinkan Anda merancang aplikasi yang luar biasa kuat.

2.4.2 App Architecture

App architecture atau arsitektur aplikasi merupakan salah satu dari beberapa domain
arsitektur yang membentuk pilar – pilar arsitektur perusahaan. Arsitektur aplikasi juga dikenal
sebagai proses mendefinisikan kerangka solusi aplikasi organisasi terhadap kebutuhan bisnis.
Hal ini melibatkan definisi lanskap aplikasi yang bertujuan untuk mengoptimalkan lanskap ini
terhadap cetak biru yang ideal. Arsitektur aplikasi menggambarkan perilaku aplikasi yang
digunakan dalam bisnis, berfokus pada bagaimana mereka berinteraksi satu sama lain dan
dengan pengguna.
Arsitektur aplikasi ditentukan berdasarkan kebutuhan bisnis dan fungsional. Ini
melibatkan pendefinisian interaksi antara paket aplikasi, database, dan sistem middleware dalam
hal cakupan fungsional. Ini membantu mengidentifikasi masalah integrasi atau celah dalam
cakupan fungsional. Sebuah rencana migrasi kemudian dapat dibuat untuk sistem yang berada di
akhir siklus hidup perangkat lunak atau yang memiliki risiko teknologi yang melekat. Arsitektur
aplikasi biasanya mengikuti prinsip desain perangkat lunak yang secara umum diterima di antara
penggunanya tetapi mungkin tidak memiliki standar industry formal.
Salah satu arsitektur aplikasi yang paling terkenal adalah arsitektur berorientasi layanan
(SOA), yang muncul pada tahun 1990 ketika integrasi aplikasi dan operasi berbagi komponen
menjadi terkait dengan kumpulan sumber daya hosting dan  database terdistribusi. Selama 20
tahun terakhir, SOA telah berkembang menjadi beberapa arsitektur lain, terutama arsitektur
microservice.
Berikut ini ada beberapa hal yang ada di dalam app architecture dan juga panduan –
panduan yang dapat dilakukan untuk bisa lebih menggunakan app architecture, yaitu:
1. Launcing
Launching dalam App Architecture merupakan pengalaman peluncuran yang
berdampak signifikan terhadap perasaan seseorang tentang aplikasi tersebut. Pengalaman
peluncuran harus cepat dan mulus, karena itu dapat berdampak pada seseorang yang
sedang menggunakan aplikasi tersebut. Berikut ini ada panduan yang dapat membantu
dalam merancang pengalaman peluncuran yang menyenangkan, yaitu:
1) Sediakan layar launcing

14
 Layar launcing ini merupakan sistem yang dapat menampilkan layar
launcing Anda saat aplikasi tersebut dimulai dan dengan cepat menggantinya
dengan layar pertama dari aplikasi Anda. Fungsi dari layar launcing ini adalah
memberi kesan kepada orang – orang bahwa aplikasi pengguna cepat dan
responsif. Untuk memastikan transisi yang mulus dari layar launcing Anda, desain
layar biasa yang menyerupai layar aplikasi dan tidak menarik perhatian ke layar
itu sendiri.
2) Launcing dengan orientasi yang sesuai.
Jika aplikasi Anda mendukung mode potret dan lanskap, maka aplikasi
harus diluncurkan menggunakan orientasi perangkat saat ini. Jika hanya bisa salah
satu dari kedua mode tersebut, maka harus selalu diluncurkan dalam orientasi itu.
3) Hindari meminta informasi penyiapan di awal.
Sebisa mungkin, dapatkan informasi pengaturan dari pengaturan perangkat
dan default atau melalui layanan sinkronisasi seperti, iCloud. Jika Anda
diharuskan untuk meminta informasi, minta orang lain untuk memberikan
informasi penyiapan saat pertama kali Anda membuka aplikasi dan biarkan orang
tersebut memodifikasinya sendiri di setelan aplikasi Anda.
4) Hindari menampilkan perjanjian dan penampilan lisensi dalam aplikasi
Izinkan App Store menampilkan perjanjian dan penampilan sehingga
orang dapat membacanya sebelum mengunduh aplikasi Anda.
5) Pulihkan status sebelumnya saat aplikasi dimulai ulang
Pertahankan dan pulihkan status aplikasi Anda agar dapat melanjutkan
dari bagian terakhir yang ditinggalkan.
6) Jangan mendorong reebot
Jangan sering memuat ulang karena itu dapat membuat aplikasi Anda
tampak tidak dapat diandalkan dan sulit digunakan. Jika aplikasi Anda memiliki
memori atau masalah lain yang membuatnya sulit untuk dijalankan kecuali sistem
baru saja melakukan booting, Anda perlu mengatasi masalah tersebut.
7) Hindari meminta orang untuk menilai aplikasi terlalu cepat atau terlalu sering

15
 Berikan waktu kepada orang – orang untuk membentuk opini tentang
Aplikasi Anda sebelum meminta peringkat dan jangan memaksa orang untuk
menilai aplikasi Anda.
2. Onboarding
Onboarding memungkinkan Anda menyambut pengguna baru dan terhubung
kembali dengan pengguna yang kembali. Berikut ini ada beberapa pedoman yang dapat
Anda tunjukan kepada para pengguna untuk bisa melakukan Onboarding tanpa
mengganggu mereka, yaitu:
1) Sediakan onboarding yang membantu orang – orang menikmati aplikasi Anda,
bukan hanya menyiapkannya.
Hindari menyertakan penyiapan atau detail lisensi dalam pengalaman
onboarding Anda.
2) Segera bereaksi.
Setelah sistem mengganti layar launching dengan layar aplikasi awal
Anda, biarkan orang – orang langsung masuk dan mulai menikmati aplikasi Anda.
Jika perlu diadakannya tutorial, maka buatlah tutorial itu hanya bisa ditampilkan
sekali dan tidak secara otomatis menampilkan kembali ke pengguna.
3) Antisipasi kebutuhan akan bantuan.
Adakannya sebuah sistem yang dapat membantu orang – orang yang
sedang kesulitan menggunakan aplikasi Anda. Contohnya pada saat bermain,
izinkan orang yang sedang bermain tersebut memutar ulang tutorial jika mereka
mengamali kesulitan dalam permainan tersebut.
4) Tetap berpegang pada hal – hal penting dalam tutorial  pertama dan terpenting
itu adalah buat aplikasi Anda intuitif.
5) Jadikan pembelajaran yang menyenangkan dan mudah ditemukan  gunakan
animasi dan interaktivitas untuk mengajar secara bertahap.
3. Loading
Saat ada konten yang sedang loading, ada beberapa orang yang menganggap
bahwa aplikasi tersebut berhenti beroperasi sehingga mengakibatkan kebingungan dan
menyebabkan orang meninggalkan aplikasi tersebut. Berikut ini ada beberapa cara agar
orang – orang tidak meninggalkan aplikasi Anda saat sedang loading, yaitu:

16
 1) Perjelas saat loading dilakukan.
Minimal, tunjukkan pemintal aktivitas dan tampilkan kemajuan secara
eksplisit sehingga orang dapat mengukur berapa lama mereka menunggu.
2) Tunjukkan konten secepat mungkin.
Segera tunjukkan layar dan gunakan teks placeholder, grafik, atau animasi
untuk mengidentifikasi di mana konten belum tersedia.
3) Mendidik atau menghibur orang untuk menutupi waktu loading.
Pertimbangkan untuk menunjukkan petunjuk tentang alur game, urutan
video yang menghibur, atau gambar placeholder yang menarik.
4) Sesuaikan layar loading.
Pertimbangkan untuk merancang pengalaman yang lebih imersif melalui
animasi dan elemen khusus yang sesuai dengan gaya aplikasi atau game Anda.
4. Modality
Modality adalah teknik desain yang menampilkan konten dalam mode sementara
yang tepisah dari konteks pengguna sebelumnya saat ini dan memerlukan tindakan
eksplisit untuk keluar. Menyediakan konten yang sederhana dapat:
a. Membantu orang dapat fokus dengan tugas mandiri atau sekumpulan opsi yang
terkait erat.
b. Pastikan orang menerima dan jika perlu bertindak berdasarkan informasi penting.
Berikut ini ada 2 desain yang dapat menampilkan konten dalam mode sementara
yang terpisah, yaitu:
1) Sheet.
Gaya presentasi sheet muncul sebagai card yang menutupi sebagian
konten yang mendasarinya dan meredupkan semua area yang tidak tercakup untuk
mencegah interaksi dengannya. Gunakan sheet untuk konten modal nonimmersive
yang tidak mengaktifkan tugas kompleks.
2) Fullscreen.
Gaya presentasi fullscreen mencakup seluruh layar. Gunakan tampilan
mode fullscreen untuk konten yang imersif seperti video, foto, atau tampilan
kamera atau tugas kompleks yang memanfaatkan presentasi fullscreen, seperti
menandai dokumen atau mengedit foto.

17
 Berikut ini juga ada panduan untuk bisa menggunakan modality dengan
baik dan benar, yaitu:
a) Gunakan modality jika memungkinkan.
Ciptakan pengalaman modal yang dapat membawa orang keluar
dari konteks mereka saat ini dan memerlukan tindakan untuk
memberhentikan, jadi penting untuk menggunakannya hanya jika
memberikan manfaat yang jelas.
b) Pesan peringatan untuk menyampaikan informasi penting dan idealnya
dapat ditinjaklanjuti.
Pesan peringatan ini muncul karena mengganggu pengalaman dan
memerlukan ketukan untuk menutupnya.
c) Jaga tugas modal tetap sederhana, singkat, dan fokus.
Hindari membuat aplikasi dalam aplikasi Anda. Berhati – hatilah
dalam membuat tugas modal yang melibatkan hierarki tampilan karena
orang bisa tersesat dan lupa cara untuk menelusuri kembali langkah yang
sudah mereka buat. Hindari menggunakan tombol “Selesa” untuk apa pun
selain menyelesaikan tugas.
d) Selalu sertakan tombol yang menutupi tapilan modal.
e) Jangan tampilkan card yang muncul di atas popover.
Jika Anda perlu menunjukkan card setelah orang melakukan
tindakan di popover, tutup popover sebelum menampilkan card.
f) Koordinasi tampilan mode dengan aplikasi Anda.
Misalnya, seperti tampilan modal menyertakan navigasi, maka
tampilan tersebut harus sama digunakan seperti tampilan navigasi di
aplikasi Anda.
g) Pilih gaya transisi modal yang masuk akal di aplikasi Anda.
Gunakan gaya transisi modal yang konsisten di seluruh aplikasi
Anda.
5. Navigation

18
 Navigation harus terasa alami dan familier, dan tidak boleh mendominasi
interface atau mengalihkan fokus dari konten. Di iOS, ada tiga gaya navigation utama,
yaitu:
1) Hierarchical Navigation  biasa digunakan dalam email dan pengaturan ketika
Anda harus menelusuri kembali langkah – langkah Anda atau memulai kembali
dari awal dan membuat pilihan yang berbeda.
2) Flat Navigation  biasa digunakan dalam aplikasi musik dan app store.
3) Content – Driven or Experience – Driven Navigation  biasa digunakan dalam
aplikasi games, buku, dan aplikasi imersif lainnya.
Berikut ini ada panduan dalam navigation agar bisa digunakan dengan
baik dan benar, yaitu:
1) Selalu berikan jalur yang jelas.
2) Rancang struktur informasi yang membuatnya cepat dan mudah untuk
mendapatkan konten.
Atur struktur informasi Anda dengan cara ketukan, gesekan, dan layar
yang minimum.
3) Gunakan gerakan sentuh untuk menciptakan kelancaran.
Permudah perpindahan melalui interface Anda dengan gesekan sentuh
yang minimal.
4) Gunakan komponen navigation standar.
Jika memungkinkan, gunakan kontrol navigation standar seperti kontrol
halaman, bilah tab, kontrol tersegmentasi, tampilan tabel, tampilan koleksi, dan
tampilan terpisah agar pengguna terbiasa dengan kontrol ini dan secara intuitif
tahu cara mengakali aplikasi Anda.
5) Gunakan bilah navigation untuk melintasi hierarki data.
6) Gunakan bilah tab untuk menampilkan kategori konten atau fungsionalitas
sesama.
Bilah tab memungkinkan orang dengan cepat dan mudah beralih antar
kategori.
7) Gunakan kontrol halaman ketika Anda memilki beberapa halaman dengan tipe
konten yang sama.

19
6. Requesting Permission
Pengguna harus memberikan izin kepada aplikasi untuk mengakses informasi
pribadi. Meskipun orang – orang menghargai kenyamanan menggunakan aplikasi yang
memiliki akses ke informasi ini, mereka juga berharap dapat mengontrol data pribadi
mereka. Berikut ini ada beberapa panduan yang dapat digunakan dalam requesting
permission, yaitu:
1) Minta data pribadi hanya jika palikasi Anda benar – benar membutuhkannya.
Sediakan teks kustom untuk ditampilkan di peringatan permintaan izin
sistem dan sertakan contoh. Gunakan teks yang pendek dan spesifik dan bersikap
sopan sehingga orang tidak merasa tertekan.
2) Minta izin saat launching hanya jika diperlukan agar aplikasi Anda berfungsi.
Pengguna tidak akan terganggu oleh permintaan ini jika jelas bahwa
aplikasi Anda bergantung pada informasi pribadi mereka untuk beroperasi.
3) Jangan meminta informasi lokasi jika tidak perlu.
4) Gunakan peringatan yang disediakan sistem.
Hindari menambahkan perintah khusus yang meniru perilaku atau
tampilan peringatan standar.
7. Settings
Saat Anda mendesain aplikasi agar berfungsi seperti yang diharapkan oleh
kebanyakan orang, Anda perlu mengurangi kebutuhan akan pengaturan. Berikut ini ada
panduan yang bisa digunakan untuk mengatur pengaturan yang ada di aplikasi Anda,
yaitu:
1) Infer apa yang Anda bisa beri dari sistem.
Jika Anda memerlukan informasi tentang pengguna, perangkat, atau
lingkungan, buat kueri sistem jika memungkinkan daripada bertanya kepada
pengguna. Seperti meminta izin menggunakan lokasi daripada meminta
memasukkan kode posnya.
2) Prioritaskan opsi konfigurasi dalam aplikasi Anda dengan cermat.
3) Tampilkan opsi konfigurasi yang jarang diubah di pengaturan.
4) Berikan pintasan ke pengaturan bila perlu.

20
 Jika aplikasi Anda menyertakan teks yang mengarahkan ke pengaturan,
berikan tombol yang membuka lokasi itu secara otomatis.
2.4.3 User Interaction
Antarmuka pengguna merupakan bentuk tampilan grafis yang berhubungan langsung
dengan pengguna. Antarmuka pengguna berfungsi untuk menghubungkan antara pengguna
dengan sistem operasi, sehingga komputer tersebut bisa digunakan
Di dalam user interaction ini sendiri, ada beberapa komponen diantaranya :
1. 3D TOUCH
Di perangkat yang didukung, orang dapat mengakses fungsionalitas tambahan dengan
menerapkan berbagai tingkat tekanan ke layar sentuh. Aplikasi dapat merespons dengan
menampilkan menu konteks (atau mendukung Peek dan Pop) untuk menampilkan item dan
tindakan yang dapat digunakan orang untuk memengaruhi item.
Pada perangkat yang menjalankan iOS 13 dan lebih baru, orang dapat menggunakan gerakan
sentuh dan tahan untuk membuka menu konteks, terlepas dari apakah perangkat mendukung 3D
Touch. Pada perangkat 3D Touch, gerakan dapat menampilkan menu konteks lebih cepat
 HOME SCREEN INTERACTION
Pada layar Utama perangkat yang menjalankan iOS 13 atau lebih baru, aplikasi dapat
menampilkan menu konteks saat orang menyentuh dan menahan ikon aplikasi (pada perangkat
3D Touch, orang menekan ikon sebentar untuk melihat menu). Menu konteks aplikasi
memungkinkan orang dengan cepat melakukan tugas khusus aplikasi umum dan melihat
informasi menarik. Kalender, misalnya, menyediakan jalan pintas untuk membuat acara, selain
menampilkan acara berikutnya sesuai jadwal. Untuk panduan desain, lihat Tindakan dan Widget
Layar Beranda.
 LIVE PHOTOS
Live Photos menjadi hidup saat orang berinteraksi dengan mereka, menggunakan gerakan dan
suara untuk menunjukkan momen sebelum dan sesudah foto diambil. Di perangkat yang
menjalankan iOS 13 atau lebih baru, orang mengaktifkan Live Photo dengan meletakkan jari
mereka pada foto; pada perangkat 3D Touch, orang menekan sebentar di Live Photo. Untuk
panduan desain, lihat Live Photos.
2. APPLE PENCIL AND SCRIBBLE
Apple Pencil adalah alat serbaguna dan intuitif untuk aplikasi iPad yang menawarkan presisi
tingkat piksel saat membuat catatan, membuat sketsa, melukis, menandai dokumen, dan banyak
lagi. Di iPadOS 14 dan versi lebih baru, Coretan memungkinkan orang menggunakan Apple
Pencil untuk memasukkan teks di bidang teks apa pun melalui pengenalan tulisan tangan yang
cepat, pribadi, di perangkat.

21
Dukung perilaku yang diharapkan. Apple Pencil dirancang untuk membuat gambar, tulisan
tangan, dan penandaan dengan mudah dan alami, dan juga berfungsi sebagai penunjuk atau alat
interaksi UI. Selain mengaktifkan perilaku Apple Pencil yang diharapkan orang, pertimbangkan
juga untuk mendukung interaksi yang tidak terduga. Misalnya, aplikasi Anda mungkin
mengizinkan orang membuat catatan di margin dokumen.
Biarkan orang memilih kapan harus beralih antara Apple Pencil dan masukan jari -
jangan paksa mereka. Misalnya, orang tidak perlu beralih dari Apple Pencil ke jari mereka
untuk berinteraksi dengan kontrol. Jika aplikasi Anda mendukung Apple Pencil untuk
penandaan, kontrol aplikasi Anda juga harus merespons Apple Pencil. Kontrol yang tidak
responsif menyebabkan kebingungan, dan dapat memberikan kesan kegagalan fungsi atau baterai
lemah. Demikian juga, biarlah orang juga menggunakan jari untuk menggambar dan memberi
tanda. (Coretan hanya mendukung masukan Apple Pencil.)
Biarkan orang membuat tanda saat Apple Pencil menyentuh layar. Pengalaman meletakkan
Apple Pencil ke layar harus mencerminkan pengalaman meletakkan pensil klasik di atas kertas.
Jangan minta orang mengetuk tombol atau masuk ke mode khusus sebelum menggunakan Apple
Pencil.

Bantu orang lain mengekspresikan dirinya dengan menanggapi cara mereka

menggunakan Apple Pencil. Apple Pencil dapat merasakan kemiringan (ketinggian), gaya
(tekanan), dan orientasi (azimuth). Aplikasi Anda harus menggunakan informasi ini untuk
memengaruhi goresan yang dibuat Apple Pencil, seperti dengan berbagai ketebalan dan
intensitas. Saat menanggapi tekanan, jaga agar semuanya tetap sederhana dan intuitif. Misalnya,
wajar jika memengaruhi properti berkelanjutan - seperti opasitas tinta atau ukuran kuas - dengan
memvariasikan tekanan.
Gunakan umpan balik visual untuk menunjukkan hubungan langsung dengan konten.
Apple Pencil akan muncul untuk secara langsung dan langsung memanipulasi konten yang
disentuhnya di layar. Ini tidak boleh memulai tindakan yang tampaknya terputus, atau
memengaruhi konten di bagian lain layar.
Rancang pengalaman tangan kiri dan kanan yang luar biasa. Hindari menempatkan kontrol
di lokasi yang mungkin dikaburkan oleh kedua tangan. Jika ada kemungkinan kontrol menjadi
tidak jelas, pertimbangkan untuk membiarkan orang mengubah posisinya
 SUPPORTING SCRIBBLE
Dengan Scribble dan Apple Pencil, orang dapat dengan mudah menulis di mana pun teks
diterima di aplikasi Anda - mereka tidak perlu mengetuk atau beralih mode terlebih dahulu.
Karena Scribble terintegrasi sepenuhnya ke iPadOS 14 dan lebih baru, Scribble tersedia untuk
semua aplikasi secara default, seperti keyboard. Panduan berikut membantu Anda meningkatkan

22
dukungan Coretan default dan memberikan pengalaman menulis yang luar biasa di aplikasi
Anda.
Selalu buat memasukkan teks terasa lancar dan mudah. Secara default, Coretan berfungsi di
semua kontrol teks standar - seperti bidang teks, tampilan teks, bidang pencarian, dan bidang
yang dapat diedit di konten web - kecuali bidang kata sandi. Jika Anda menggunakan bidang teks
khusus di aplikasi Anda, jangan membuat orang mengetuk atau memilihnya sebelum mereka
dapat mulai menulis.
Buat Coretan tersedia di mana pun orang mungkin ingin memasukkan teks. Tidak seperti
menggunakan keyboard, menggunakan Apple Pencil mendorong orang untuk memperlakukan
layar seperti mereka memperlakukan selembar kertas. Bantu perkuat persepsi ini di aplikasi
Anda dengan membuat Coretan tersedia secara konsisten di tempat-tempat di mana entri teks
tampak alami. Misalnya, di Pengingat, wajar jika orang membuat pengingat baru dengan
menuliskannya di ruang kosong di bawah item terakhir, meskipun area tersebut tidak berisi
bidang teks.
3. AUDIO
Orang-orang memanipulasi suara melalui tombol volume, sakelar hening, kontrol headphone,
dan penggeser volume pada layar. Banyak aksesori pihak ketiga menyertakan kontrol suara juga.
Audio dapat dikeluarkan melalui speaker internal atau eksternal, headphone, dan bahkan secara
nirkabel melalui perangkat berkemampuan AirPlay atau Bluetooth. Apakah suara adalah aspek
utama dari pengalaman aplikasi Anda atau hiasan, Anda perlu tahu bagaimana orang
mengharapkan suara berperilaku dan memenuhi harapan tersebut.
 SILENCE
Orang-orang mengalihkan perangkat mereka ke mode senyap agar tidak terganggu oleh suara
yang tidak terduga, seperti nada dering dan suara pesan masuk. Mereka juga ingin suara yang
tidak penting dinonaktifkan, termasuk suara keyboard, efek suara, soundtrack game, dan umpan
balik yang dapat didengar lainnya. Saat perangkat disetel ke hening, hanya suara yang dimulai
secara eksplisit yang akan muncul, seperti audio selama pemutaran media, alarm, dan perpesanan
audio / video.
 VOLUME
Baik menggunakan tombol perangkat fisik atau penggeser di layar, orang-orang mengharapkan
perubahan volume memengaruhi semua sistem suara di seluruh, termasuk musik dan efek suara
dalam aplikasi. Satu-satunya pengecualian adalah volume dering, yang selalu disesuaikan secara
terpisah saat audio tidak diputar secara aktif
 HEADPHONES
Orang menggunakan headphone untuk mendengar suara secara pribadi dan untuk membebaskan
tangan mereka. Saat mencolokkan headphone, pengguna mengharapkan suara dialihkan secara
otomatis tanpa gangguan. Saat mencabut headphone, mereka berharap pemutaran segera dijeda.

23
 4. AUTHENTICATION
Minta pengguna untuk mengautentikasi hanya dengan imbalan nilai, seperti mempersonalisasi
pengalaman, mengakses fitur tambahan, membeli konten, atau menyinkronkan data. Jika aplikasi
Anda memerlukan autentikasi, gunakan Masuk dengan Apple untuk memberi orang cara yang
sederhana dan aman untuk masuk. Saat Anda mendukung Masuk dengan Apple, orang-orang
mendapatkan pengalaman masuk yang konsisten yang dapat mereka percayai dan kenyamanan
karena tidak perlu mengingat banyak akun dan kata sandi.

Jika Anda tidak menggunakan Masuk dengan Apple, gunakan IsiOtomatis Kata Sandi.
Fitur ini secara otomatis menghasilkan dan mengisi kata sandi dan kode keamanan sehingga
orang dapat menghabiskan lebih sedikit waktu di layar otentikasi. Semua aplikasi harus
mendukung fitur ini. Untuk panduan pengembang, lihat Mendukung Pengisian Otomatis Kata
Sandi.

Tunda masuk selama mungkin. Orang sering kali meninggalkan aplikasi saat mereka dipaksa
untuk masuk sebelum melakukan sesuatu yang berguna. Beri mereka kesempatan untuk jatuh
cinta dengan aplikasi Anda sebelum membuat komitmen untuk itu. Di aplikasi belanja, biarkan
orang-orang menjelajahi barang dagangan Anda segera setelah peluncuran, dan perlu masuk
hanya jika mereka siap untuk melakukan pembelian. Di aplikasi streaming media, biarkan orang
menjelajahi konten Anda dan melihat apa yang Anda tawarkan sebelum masuk untuk memutar
sesuatu.

5. DATA ENTRY

Baik mengetuk elemen antarmuka atau menggunakan keyboard, memasukkan informasi bisa
menjadi proses yang membosankan. Ketika sebuah aplikasi memperlambat proses dengan
meminta banyak masukan sebelum melakukan sesuatu yang berguna, orang-orang dapat berkecil
hati dengan cepat, dan bahkan mungkin meninggalkan aplikasi tersebut sepenuhnya

Jika memungkinkan, berikan pilihan. Buat entri data seefisien mungkin. Pertimbangkan untuk
menggunakan alat pilih atau tabel daripada bidang teks, misalnya, karena lebih mudah memilih
dari daftar opsi yang telah ditentukan daripada mengetik tanggapan.

24
Dapatkan informasi dari sistem jika memungkinkan. Jangan memaksa orang untuk memberikan
informasi yang dapat dikumpulkan secara otomatis atau dengan izin pengguna, seperti informasi
kontak atau kalender.

Berikan nilai default yang wajar. Sedapat mungkin, isi ulang bidang dengan nilai yang paling
mungkin. Memberikan default yang baik meminimalkan pengambilan keputusan dan
mempercepat proses.

Aktifkan kemajuan hanya setelah mengumpulkan nilai yang diperlukan. Sebelum

mengaktifkan tombol Berikutnya atau Lanjutkan, pastikan semua bidang wajib memiliki nilai.
Gunakan pengaktifan tombol sebagai petunjuk visual bahwa sudah waktunya untuk melanjutkan.

Validasi nilai bidang secara dinamis. Ini membuat frustasi ketika Anda harus kembali dan
memperbaiki kesalahan setelah mengisi formulir yang panjang. Jika memungkinkan, periksa
nilai bidang segera setelah entri sehingga pengguna dapat segera memperbaikinya.

Wajibkan nilai bidang hanya jika diperlukan. Gunakan kolom wajib hanya untuk informasi
yang benar-benar diperlukan untuk melanjutkan.

Kemudahan navigasi melalui daftar nilai. Terutama dalam tabel dan pemetik, seharusnya
mudah untuk memilih nilai. Pertimbangkan untuk mengurutkan daftar nilai menurut abjad atau
dengan cara logis lainnya yang memfasilitasi pemindaian dan pemilihan yang cepat.

Tunjukkan petunjuk di bidang teks untuk membantu mengkomunikasikan tujuan. Bidang

teks dapat berisi teks placeholder — seperti "Email" atau "Sandi" —ketika tidak ada teks lain di
bidang tersebut. Jangan gunakan label terpisah untuk mendeskripsikan bidang teks jika teks
placeholder cukup.

6. DRAG AND DROP

Dengan satu jari, pengguna dapat memindahkan atau menggandakan foto, teks, atau konten lain
yang dipilih dengan menyeret konten dari satu lokasi ke lokasi lain, lalu mengangkat jari untuk
melepaskannya

25
Menyentuh dan menahan konten yang dipilih membuatnya tampak terangkat dan menempel di
jari pengguna. Saat konten diseret, animasi dan isyarat visual mengidentifikasi tujuan yang
memungkinkan. Sistem juga menampilkan lencana yang menunjukkan bahwa pelepasan tidak
memungkinkan, atau akan mengakibatkan duplikasi konten daripada memindahkannya

SOURCES AND DESTINATIONS

Seret dan lepas melibatkan pemindahan konten yang dipilih dari lokasi sumber ke tujuan. Lokasi
ini bisa berada di penampung yang sama, seperti tampilan teks, atau di penampung yang
berbeda, seperti tampilan teks di sisi berlawanan dari tampilan terpisah. Di Catatan, misalnya,
pengguna dapat menyeret teks yang dipilih ke lokasi baru dalam catatan yang sama. Di
Pengingat, pengguna dapat menyeret pengingat individu dari satu daftar dan melepaskannya ke
daftar lainnya.

7. FEEDBACK
26
Umpan balik membantu orang-orang mengetahui apa yang dilakukan aplikasi, menemukan apa
yang dapat mereka lakukan selanjutnya, dan memahami hasil tindakan.

Integrasikan status dan jenis umpan balik lainnya secara tidak mencolok ke antarmuka
kita. Idealnya, pengguna bisa mendapatkan informasi penting tanpa mengambil tindakan atau
diganggu. Mail, misalnya, secara halus menampilkan informasi status di bilah alat saat
menavigasi kotak surat pesan. Informasi ini tidak bersaing dengan konten utama di layar, tetapi
dapat diperiksa kapan saja dengan sekilas pandang.

Hindari peringatan yang tidak perlu. Peringatan adalah mekanisme umpan balik yang kuat,
tetapi harus digunakan hanya untuk menyampaikan informasi penting — dan idealnya dapat
ditindaklanjuti. Jika orang melihat terlalu banyak lansiran yang tidak berisi informasi penting,
mereka dengan cepat belajar untuk mengabaikan lansiran di masa mendatang.

8. FILE HANDLING

Orang tidak perlu memikirkan sistem file saat membuat, melihat, dan memanipulasi file. Jika
aplikasi Anda bekerja dengan file, kurangi penanganan file sebanyak mungkin.

Tanamkan keyakinan bahwa pekerjaan selalu dipertahankan kecuali dibatalkan atau

dihapus. Secara umum, jangan membuat orang menyimpan file secara eksplisit. Sebagai
gantinya, simpan perubahan secara otomatis secara berkala, saat membuka dan menutup file, dan

27
saat beralih ke aplikasi lain. Dalam beberapa kasus, seperti saat mengedit file yang ada, opsi
simpan dan batalkan mungkin masih masuk akal untuk mengonfirmasi kapan pengeditan benar-
benar diambil.

Jangan berikan opsi untuk membuat file khusus lokal. Pengguna sering berharap semua file
mereka tersedia di semua perangkat mereka. Jika memungkinkan, aplikasi Anda harus
mendukung penyimpanan file berbasis cloud melalui layanan seperti iCloud.

Menerapkan antarmuka penelusuran file yang intuitif dan grafis. Idealnya, gunakan alat
pilih dokumen yang sudah dikenal sistem untuk menjelajahi. Jika Anda menerapkan browser file
khusus, pastikan itu intuitif dan efisien. Browser file bekerja paling baik jika sangat grafis,
memberikan representasi visual file. Untuk navigasi yang lebih cepat, pertimbangkan untuk
memberikan tombol dokumen baru sehingga orang tidak perlu pergi ke tempat lain untuk
membuat dokumen baru.

Izinkan pengguna melihat pratinjau file tanpa meninggalkan aplikasi Anda. Anda dapat
menggunakan Tampilan Cepat agar orang-orang dapat melihat konten dokumen Keynote,
Numbers, dan Pages, PDF, gambar, dan jenis file tertentu lainnya, meskipun aplikasi Anda
sebenarnya tidak membukanya. Lihat Lihat Cepat.

Pertimbangkan berbagi file dengan aplikasi lain. Jika memungkinkan, aplikasi Anda dapat
membagikan file-nya dengan aplikasi lain melalui ekstensi penyedia file. Aplikasi Anda juga
dapat memungkinkan orang menjelajahi dan membuka file dari aplikasi lain

9. GAME CONTROLLERS

Pengontrol game dapat menyempurnakan gameplay dan meningkatkan imersi orang-orang dalam
game. Mendukung sebanyak mungkin pengontrol game memberi orang cara tambahan untuk
menikmati interaksi dengan game atau aplikasi Anda.

28
BUTTONS

Pengontrol permainan cenderung menawarkan set tombol serupa yang diatur dalam berbagai
cara ergonomis. Inilah salah satu contohnya.

10. GESTURES

Orang-orang berinteraksi dengan perangkat iOS dengan melakukan gerakan di layar sentuh.
Isyarat ini memunculkan hubungan pribadi yang erat dengan konten dan meningkatkan rasa
manipulasi langsung objek di layar

Orang-orang berinteraksi dengan perangkat iOS dengan melakukan gerakan di layar sentuh.
Isyarat ini memunculkan hubungan pribadi yang erat dengan konten dan meningkatkan rasa
manipulasi langsung objek di layar

Sebagai aturan umum, gunakan isyarat standar. Orang-orang terbiasa dengan isyarat standar
dan tidak suka dipaksa mempelajari berbagai cara untuk melakukan hal yang sama. Dalam game
dan aplikasi imersif lainnya, gerakan khusus dapat menjadi bagian yang menyenangkan dari
pengalaman. Di aplikasi lain, yang terbaik adalah menggunakan isyarat standar sehingga upaya
ekstra tidak diperlukan untuk menemukan atau mengingatnya.

29
Hindari menggunakan gerakan standar untuk melakukan tindakan nonstandar. Kecuali
jika aplikasi Anda adalah game dalam alur game yang aktif, mendefinisikan ulang arti dari
isyarat standar dapat menimbulkan kebingungan dan kompleksitas.

Hindari mengganggu gerakan tepi layar di seluruh sistem. Bergantung pada perangkatnya,
gerakan tepi layar menyediakan akses ke layar Utama, pengalih app, Pusat Pemberitahuan, Pusat
Kontrol, dan Dock. Orang-orang mengandalkan gerakan ini untuk bekerja di setiap aplikasi.
Dalam kasus yang jarang terjadi, aplikasi imersif seperti game mungkin memerlukan isyarat tepi
layar khusus yang lebih diprioritaskan daripada isyarat sistem gesekan pertama memanggil
isyarat khusus aplikasi dan gesekan kedua memanggil isyarat sistem. Perilaku ini (dikenal
sebagai pelindung tepi) harus diterapkan dengan hemat, karena akan mempersulit orang untuk
mengakses tindakan tingkat sistem. Untuk panduan pengembang.

Menawarkan gerakan pintasan untuk melengkapi, bukan mengganti, navigasi dan

tindakan berbasis antarmuka. Jika memungkinkan, tawarkan cara yang sederhana dan terlihat
untuk menavigasi atau melakukan tindakan, meskipun itu berarti satu atau dua ketukan
tambahan. Banyak aplikasi sistem menyertakan bilah navigasi yang menyediakan tombol yang
jelas dan dapat diketuk untuk kembali ke layar sebelumnya. Namun pengguna juga dapat
menavigasi kembali dengan menggesek dari sisi layar. Di iPad, orang dapat keluar ke layar
Utama dengan menekan tombol Rumah, atau dengan gerakan mencubit empat jari.

Gunakan gerakan multifinger untuk menyempurnakan pengalaman beberapa aplikasi.

Meskipun gerakan yang melibatkan banyak jari sekaligus tidak sesuai untuk setiap aplikasi, hal
itu dapat memperkaya pengalaman di beberapa aplikasi, seperti game dan aplikasi menggambar.
Misalnya, game mungkin menyertakan beberapa kontrol di layar, seperti joystick dan tombol
tembak, yang dapat dioperasikan secara bersamaan.

11. HAPTICS

Haptics melibatkan indera sentuhan orang untuk meningkatkan pengalaman berinteraksi dengan
antarmuka pada layar. Misalnya, saat transaksi Apple Pay dikonfirmasi, sistem memainkan
haptik selain memberikan umpan balik visual dan auditori. Haptics juga dapat meningkatkan
gerakan sentuh dan interaksi seperti menggulir melalui alat pilih atau mengalihkan sakelar.

30
Pada model iPhone yang didukung, kita dapat menambahkan haptics ke aplikasi kita dengan
beberapa cara :

 Gunakan elemen UI standar ,seperti sakelar, penggeser, dan alat

pilih yang memutar haptik sistem rancangan Apple secara
default.
 Jika memungkinkan, gunakan generator umpan balik untuk
memainkan salah satu dari beberapa pola haptik yang telah
ditentukan sebelumnya dalam kategori pemberitahuan, dampak,
dan pemilihan.
 Dalam situasi di mana kita menginginkan lebih banyak kontrol,
buat dan mainkan pola haptik kita sendiri

Saat kita menggunakan haptik sistem, iOS mengelola kekuatan dan perilaku umpan balik.
Misalnya, sebuah tombol secara otomatis memutar ketukan halus dan generator umpan balik
untuk notifikasi "berhasil" memutar pola yang ditunjukkan di bawah ini.

12. NEAR FIELD COMMUNICATION

Near Field Communication (NFC) memungkinkan perangkat dalam jarak beberapa sentimeter
untuk bertukar informasi secara nirkabel. Aplikasi iOS yang berjalan di perangkat yang
didukung dapat menggunakan pemindaian NFC untuk membaca data dari tag elektronik yang
dilampirkan ke objek dunia nyata. Misalnya, pengguna dapat memindai mainan untuk
menghubungkannya dengan video game, pembeli dapat memindai tanda di dalam toko untuk
mengakses kupon, atau karyawan ritel dapat memindai produk untuk melacak inventaris

In-App Tag Reading

Aplikasi dapat mengaktifkan pemindaian satu atau beberapa objek saat aplikasi aktif, dan
menampilkan lembar pemindaian setiap kali pengguna diharapkan memindai sesuatu.

Jangan mendorong orang untuk melakukan kontak dengan benda fisik. Untuk memindai
tag, perangkat iOS harus berada di dekat tag. Tidak perlu benar-benar menyentuh tag. Gunakan
istilah seperti pindai dan tahan di dekat alih-alih ketuk dan sentuh ketika meminta orang untuk
memindai objek.

31
Gunakan terminologi yang bisa didekati. Komunikasi Nirkabel Jarak Dekat mungkin asing
bagi sebagian orang. Untuk membuatnya mudah didekati, hindari merujuk pada istilah teknis
berorientasi pengembang seperti NFC, NFC Inti, Komunikasi Nirkabel Jarak Dekat, dan tag.
Sebaliknya, gunakan istilah percakapan yang ramah yang kebanyakan orang akan mengerti

13. POINTERS (ipad iOS)

iPadOS 13.4 memperkenalkan efek dan perilaku penunjuk dinamis yang meningkatkan
pengalaman menggunakan perangkat penunjuk dengan iPad. Saat orang menggunakan perangkat
penunjuk, iPadOS secara otomatis menyesuaikan penunjuk ke konteks saat ini, memberikan
umpan balik visual yang kaya dan tingkat presisi yang tepat yang diperlukan untuk
meningkatkan produktivitas dan menyederhanakan tugas-tugas umum.

Sistem penunjuk iPadOS memberi orang cara tambahan untuk berinteraksi dengan aplikasi dan
konten - sistem ini tidak menggantikan sentuhan. Beberapa orang mungkin terus menggunakan
sentuhan saja, sementara yang lain mungkin lebih suka menggunakan penunjuk atau kombinasi
keduanya. Biarkan orang memilih cara berinteraksi dengan aplikasi

14. UNDO AND REDO

Banyak aplikasi memungkinkan orang mengguncang perangkat untuk membatalkan dan

mengulangi operasi tertentu, seperti mengetik atau menghapus. Ketika dimulai dengan cara ini,
sebuah peringatan meminta pengguna untuk mengkonfirmasi atau membatalkan operasi
pengurungan atau pengulangan.

Jelaskan secara singkat dan tepat operasi yang akan diurungkan atau diulangi. Judul
peringatan urungkan dan ulangi secara otomatis menyertakan awalan "Urungkan" atau "Ulangi"
(termasuk spasi di belakangnya). Anda perlu memberikan satu atau dua kata tambahan yang
mendeskripsikan apa yang diurungkan atau diulang, untuk muncul setelah awalan ini. Misalnya,
Anda dapat membuat judul peringatan seperti "Urungkan Nama" atau "Ulangi Perubahan
Alamat".

Jika Anda menggunakan gerakan goyang untuk mengurungkan dan mengulangi, jangan
gunakan untuk tindakan lain. Meskipun secara terprogram Anda dapat memberikan

32
banyak arti pada isyarat goyang, Anda berisiko membingungkan orang dan membuat aplikasi
Anda tidak dapat diprediksi.

Sediakan tombol undo dan redo secukupnya. Membingungkan saat aplikasi menyediakan
banyak cara untuk melakukan tugas yang sama. Jika aplikasi Anda benar-benar membutuhkan
tombol urungkan dan ulangi khusus, gunakan ikon standar yang disediakan sistem dan letakkan
di lokasi yang diharapkan, seperti bilah navigasi.

Lakukan operasi urungkan dan ulangi dalam konteks saat ini saja. Urungkan dan ulangi
harus memiliki efek yang jelas dan langsung pada konteks saat ini, bukan konteks sebelumnya.

2.4.4 System Capabilities

1. AUGMENTED REALITY

Augmented reality (atau AR) memungkinkan Anda menghadirkan pengalaman yang imersif dan
menarik yang memadukan objek virtual dengan dunia nyata secara mulus. Menggunakan kamera
perangkat untuk menampilkan dunia fisik di layar secara langsung, aplikasi Anda menempatkan
objek virtual tiga dimensi, menciptakan ilusi bahwa objek ini benar-benar ada. Bergantung pada
pengalaman yang ditawarkan aplikasi Anda, orang dapat mengubah orientasi perangkat untuk
menjelajahi objek dari berbagai sudut, berinteraksi dengan objek menggunakan isyarat dan
gerakan, dan bahkan bergabung dengan orang lain dalam pengalaman AR multipengguna.

Tawarkan fitur AR hanya pada perangkat yang mendukung. Jika tujuan utama aplikasi
Anda adalah AR, buat aplikasi Anda hanya tersedia untuk perangkat yang mendukung ARKit.
Jika aplikasi Anda menyertakan fitur yang memerlukan kemampuan AR tertentu, atau jika fitur
AR bersifat opsional di aplikasi Anda, jangan perlihatkan kesalahan kepada orang-orang jika
mereka mencoba menggunakan fitur ini pada perangkat yang tidak mendukungnya; sebaliknya,
cukup hindari menawarkan fitur tersebut pada perangkat yang tidak didukung

33
 2. HOME SCREEN ACTIONS

Tindakan cepat layar utama adalah cara yang nyaman untuk melakukan tindakan khusus aplikasi
yang berguna langsung dari layar Utama. Orang bisa mendapatkan menu tindakan cepat yang
tersedia saat mereka menyentuh dan menahan ikon aplikasi (pada perangkat 3D Touch, orang
dapat menekan ikon sebentar untuk melihat menu). Misalnya, Mail menyertakan tindakan cepat
yang membuka Kotak masuk atau kotak surat VIP, memulai pencarian, dan membuat pesan baru.
Selain tindakan khusus aplikasi, menu tindakan cepat layar Utama juga mencantumkan item
untuk menghapus aplikasi dan mengedit layar Utama

Buat tindakan cepat untuk tugas yang menarik dan bernilai tinggi. Misalnya, Maps
memungkinkan orang mencari di dekat lokasi mereka saat ini atau mendapatkan petunjuk arah
ke rumah tanpa terlebih dahulu membuka aplikasi Maps. Setiap aplikasi harus mengaktifkan
setidaknya satu tindakan cepat yang berguna; Anda dapat memberikan total empat.

Hindari menggunakan tindakan cepat untuk memudahkan navigasi. Jika sulit atau
memakan waktu untuk mengunjungi area penting di aplikasi Anda, pertama-tama perbaiki
navigasi Anda agar berfungsi dengan baik untuk semua orang. Selanjutnya, fokuslah pada
penyediaan tindakan cepat yang memungkinkan tugas-tugas yang berguna dan kreatif.

Hindari membuat perubahan tak terduga pada tindakan cepat. Tindakan cepat dinamis
adalah cara terbaik untuk menjaga agar tindakan tetap relevan. Misalnya, mungkin masuk akal
untuk memperbarui tindakan cepat berdasarkan lokasi saat ini atau aktivitas terbaru di aplikasi

34
Anda, waktu, atau perubahan dalam setelan. Namun, tindakan tidak boleh berubah dengan cara
yang tidak dapat diprediksi atau membingungkan.

Berikan judul yang ringkas untuk setiap tindakan cepat. Judul tindakan harus langsung
mengkomunikasikan hasil tindakan; misalnya, "Petunjuk Arah Rumah", "Buat Kontak Baru",
dan "Pesan Baru". Jika Anda perlu memberi lebih banyak konteks, berikan juga subtitle. Mail
menggunakan subtitle untuk menunjukkan apakah ada pesan yang belum dibaca di folder Kotak
Masuk dan VIP. Jangan menyertakan nama aplikasi Anda atau informasi asing apa pun dalam
judul atau subtitle, buat teks tetap pendek untuk menghindari pemotongan, dan pertimbangkan
pelokalan saat Anda menulis teks.

Jangan gunakan tindakan cepat untuk pemberitahuan. Orang berharap menerima

pemberitahuan dari aplikasi dengan cara lain. Lihat Notifikasi.

Berikan ikon yang dapat dikenali untuk setiap tindakan cepat. Pertimbangkan untuk
menggunakan simbol SF untuk mewakili setiap tindakan (untuk panduan, lihat Simbol SF).
Sebagai alternatif, Anda dapat menggunakan ikon sistem yang sudah dikenal yang terdaftar di
Ikon Tindakan Cepat. Jika Anda mendesain ikon Anda sendiri, gunakan Template Ikon Tindakan
Cepat yang disertakan dengan Sumber Daya Desain UI Apple untuk iOS dan ikuti panduan di
Ikon Kustom.

Jangan gunakan emoji sebagai pengganti ikon. Emoji tidak sejajar dengan benar dengan teks
rata kanan. Selain itu, emoji berwarna penuh, sedangkan ikon tindakan cepat bersifat
monokromatik.

Buat tindakan cepat untuk tugas yang menarik dan bernilai tinggi. Misalnya, Maps
memungkinkan orang mencari di dekat lokasi mereka saat ini atau mendapatkan petunjuk arah
ke rumah tanpa terlebih dahulu membuka aplikasi Maps. Setiap aplikasi harus mengaktifkan
setidaknya satu tindakan cepat yang berguna; Anda dapat memberikan total empat.

Hindari menggunakan tindakan cepat untuk memudahkan navigasi. Jika sulit atau
memakan waktu untuk mengunjungi area penting di aplikasi Anda, pertama-tama perbaiki
navigasi Anda agar berfungsi dengan baik untuk semua orang. Selanjutnya, fokuslah pada
penyediaan tindakan cepat yang memungkinkan tugas-tugas yang berguna dan kreatif.

35
Hindari membuat perubahan tak terduga pada tindakan cepat. Tindakan cepat dinamis
adalah cara terbaik untuk menjaga agar tindakan tetap relevan. Misalnya, mungkin masuk akal
untuk memperbarui tindakan cepat berdasarkan lokasi saat ini atau aktivitas terbaru di aplikasi
Anda, waktu, atau perubahan dalam setelan. Namun, tindakan tidak boleh berubah dengan cara
yang tidak dapat diprediksi atau membingungkan.

Berikan judul yang ringkas untuk setiap tindakan cepat. Judul tindakan harus langsung
mengkomunikasikan hasil tindakan; misalnya, "Petunjuk Arah Rumah", "Buat Kontak Baru",
dan "Pesan Baru". Jika Anda perlu memberi lebih banyak konteks, berikan juga subtitle. Mail
menggunakan subtitle untuk menunjukkan apakah ada pesan yang belum dibaca di folder Kotak
Masuk dan VIP. Jangan menyertakan nama aplikasi Anda atau informasi asing apa pun dalam
judul atau subtitle, buat teks tetap pendek untuk menghindari pemotongan, dan pertimbangkan
pelokalan saat Anda menulis teks.

3. MULTITASKING

Multitasking memungkinkan Anda beralih dengan cepat dari satu aplikasi ke aplikasi lain kapan
saja melalui antarmuka multitasking di perangkat iOS, atau dengan menggunakan gerakan
multifinger di iPad. Di iPad, multitasking juga memungkinkan Anda menggunakan dua aplikasi
sekaligus dalam mode Slide Over, Split View, atau Picture in Picture. Slide Over diakses dengan
menggesek dari sisi kanan layar untuk sementara menggunakan aplikasi kedua tanpa
meninggalkan konteks aplikasi saat ini, seperti untuk melihat kotak masuk Mail Anda dengan
cepat saat Anda menggunakan Safari. Split View memungkinkan Anda menggunakan dua
aplikasi berdampingan secara bersamaan, dan Picture in Picture memungkinkan Anda menonton
video sambil bekerja di aplikasi lain.

Mendesain aplikasi yang berkembang dalam lingkungan multitasking bergantung pada aplikasi
Anda yang berdampingan secara harmonis dengan aplikasi lain di perangkat. Artinya, aplikasi
Anda tidak boleh menggunakan terlalu banyak CPU, memori, ruang layar, atau sumber daya
sistem lainnya. Ini harus merespon dengan baik gangguan mendadak dan audio dari aplikasi lain,
transisi ke dan dari latar belakang dengan cepat dan lancar, dan berperilaku bertanggung jawab
saat beroperasi di latar belakang.

36
 4. MULTIPLE WINDOWS

Di iOS 13 dan lebih baru, aplikasi iPad dapat mendukung banyak jendela. Misalnya, di aplikasi
iPad yang memungkinkan pembuatan dokumen, orang-orang dapat membuka beberapa jendela
dokumen secara bersamaan.

Ada beberapa cara untuk membuka jendela baru. Sebagai contoh :

o Seret ikon Dock aplikasi ke sisi layar untuk memilih salah

satu jendelanya saat ini atau buat yang baru
o Seret objek ke sisi layar dan jatuhkan ke target penurunan
yang disediakan system
o Sentuh dan tahan ikon aplikasi di layar Utama atau Dock,
ketuk Tampilkan Semua Windows di menu konteks yang
muncul, dan ketuk tombol Tambah (+)
o Sentuh dan tahan objek hingga muncul menu konteks yang
menyertakan opsi untuk melihat objek di jendela baru

Aplikasi iPad biasanya menggunakan dua jenis jendela. Jendela utama memungkinkan orang
menavigasi hierarki penuh aplikasi dan mengakses semua objek aplikasi dan tindakan yang
terkait dengannya. Jendela tambahan sering kali mendukung tugas modal atau berisi satu objek
dan tindakan yang terkait dengannya; dalam kedua kasus, orang cenderung menutup jendela

37
tambahan setelah mereka menyelesaikan pekerjaannya di dalamnya. Di Mail, misalnya, jendela
utama berisi semua kotak surat dan pesan, sedangkan jendela tambahan menampilkan satu pesan.

5. NOTIFICATIONS

Aplikasi dapat menggunakan pemberitahuan untuk memberikan informasi yang penting dan
tepat waktu kapan saja, baik perangkat terkunci atau sedang digunakan. Misalnya,
pemberitahuan dapat memberi sinyal ketika pesan telah tiba, acara akan segera terjadi, data baru
tersedia, atau status sesuatu telah berubah. Orang-orang melihat pemberitahuan di layar kunci, di
bagian atas layar saat menggunakan perangkat, dan di Pusat Pemberitahuan.

6. PRINTING

Aplikasi Anda dapat memanfaatkan teknologi AirPrint yang ada di dalam sistem untuk
memungkinkan pencetakan gambar, PDF, dan konten lainnya secara nirkabel ke printer yang
kompatibel. Saat melihat konten yang dapat dicetak di aplikasi berkemampuan AirPrint, orang
biasanya mengetuk tombol tindakan di bar navigasi atau bar alat, lalu ketuk tindakan Cetak
untuk menampilkan tampilan printer. Tampilan ini menyediakan daftar printer yang tersedia dan
opsi yang dapat disesuaikan, seperti jumlah salinan dan kisaran halaman, dan menyediakan
tombol untuk memulai pencetakan

Jadikan pencetakan dapat ditemukan. Aktifkan pencetakan melalui tombol Tindakan yang
disediakan sistem jika aplikasi Anda memiliki bilah alat atau bilah navigasi. Pengguna terbiasa
38
dengan tombol ini dan menggunakannya untuk mencetak di aplikasi lain. Jika aplikasi Anda
tidak memiliki toolbar atau menu navigasi, desain tombol cetak kustom sebagai gantinya.

Aktifkan pencetakan hanya jika memungkinkan untuk mencetak. Jika tidak ada apa pun di
layar untuk dicetak atau tidak ada printer yang tersedia, jangan tampilkan tindakan Cetak ketika
seseorang mengetuk tombol Tindakan. Jika aplikasi Anda menerapkan tombol cetak khusus,
nonaktifkan atau sembunyikan saat pencetakan tidak memungkinkan.

Sediakan opsi pencetakan yang menambah nilai. Pikirkan tentang opsi yang mungkin ingin
ditentukan orang saat mereka mencetak konten Anda. Pertimbangkan opsi untuk memilih
rentang halaman dan meminta banyak salinan. Aktifkan opsi tambahan, seperti pencetakan depan
dan belakang, jika masuk akal dan printer mendukungnya

7. QUICK LOOK

Dalam aplikasi Anda, Quick Look memungkinkan orang melihat pratinjau dokumen Keynote,
Numbers, Pages, dan PDF, serta gambar dan jenis file lainnya, meskipun aplikasi Anda tidak
mendukung format file tersebut. Mail menggunakan Quick Look untuk melihat lampiran. Setelah
mengunduh lampiran, Mail menampilkan ikon lampiran dan nama file di dalam pesan. Mengetuk
ikon menampilkan pratinjau lampiran.

Sajikan pratinjau dengan tepat untuk konteks saat ini. Di iPhone, jika aplikasi Anda
memiliki bilah navigasi, geser pratinjau ke tempatnya seperti tampilan lain di hierarki
aplikasi Anda. Di iPads, atau jika aplikasi Anda tidak memiliki bilah navigasinya sendiri, buka
pratinjau dalam tampilan modal layar penuh yang menyertakan bilah navigasi. Dengan kedua
metode tersebut, bilah navigasi menyertakan tombol untuk keluar dari Tampilan Cepat, serta
tombol khusus pratinjau untuk melakukan tindakan seperti berbagi dan markup. Jika aplikasi
Anda menyertakan bilah alat, tombol khusus pratinjau apa pun akan muncul di sini, bukan di
bilah navigasi.

8. RATINGS AND REVIEWS

39
Peringkat dan ulasan membantu orang membuat keputusan yang tepat ketika mempertimbangkan
apakah akan mencoba aplikasi Anda. Peringkat dan ulasan positif dapat berarti lebih banyak
unduhan aplikasi Anda, dan umpan balik pelanggan memberi Anda wawasan tentang
penggunaan dunia nyata yang membantu mengarahkan upaya pengembangan di masa
mendatang.

Memberikan pengalaman keseluruhan yang luar biasa adalah cara terbaik untuk mendorong
peringkat dan ulasan positif, tetapi penting juga untuk meminta umpan balik pada waktu yang
tepat. Ingatlah pertimbangan ini saat meminta orang untuk menilai aplikasi Anda.

Minta peringkat hanya setelah pengguna menunjukkan keterlibatan dengan aplikasi

Anda. Misalnya, minta pengguna setelah menyelesaikan level game atau tugas produktivitas.
Jangan pernah meminta peringkat pada peluncuran pertama atau selama orientasi. Berikan waktu
yang cukup untuk membuat opini.

Jangan mengganggu pengguna, terutama saat mereka melakukan tugas yang sensitif
terhadap waktu atau stres. Cari jeda logis atau titik berhenti, yang paling sesuai dengan
permintaan penilaian.

Jangan jadi hama. Permintaan rating yang berulang dapat mengganggu, dan bahkan dapat
memengaruhi opini pengguna tentang aplikasi Anda secara negatif. Izinkan setidaknya satu atau
dua minggu antara permintaan rating dan hanya minta lagi setelah pengguna menunjukkan
interaksi tambahan dengan aplikasi Anda

9. SCREENSHOOTS

Seorang pengguna dapat menangkap apa yang ditampilkan di layar mereka dengan mengambil
tangkapan layar. Mulai di iOS 11, tangkapan layar muncul sebentar dalam bentuk pratinjau di
bagian bawah layar setelah diambil. Pengguna dapat menggesek pratinjau ke samping untuk
menutupnya (pratinjau otomatis ditutup setelah beberapa detik jika pengguna tidak melakukan
apa-apa) atau mengetuk pratinjau untuk akses cepat ke Markup Instan dan alat berbagi.
Tangkapan layar disimpan ke dalam album Tangkapan Layar di Foto.

Jangan mengubah antarmuka aplikasi Anda saat tangkapan layar lokal diambil. Fitur
tangkapan layar yang disediakan sistem menyediakan konteks dan fungsionalitas yang memadai

40
saat mengambil tangkapan layar. Perubahan dan fitur antarmuka yang dimulai tangkapan layar
khusus berulang, tidak perlu, dan berpotensi membingungkan. Jika sesuai untuk aplikasi Anda,
tidak apa-apa untuk memberi tahu pengguna saat tangkapan layar diambil oleh pengguna lain
atau pada perangkat lain.

10. TV PROVIDERS

Aplikasi Anda dapat berintegrasi dengan aplikasi TV dan Autentikasi Penyedia TV untuk
menawarkan pengalaman hiburan yang sangat nyaman dan konsisten kepada orang-orang

11. WIDGETS

Widget meningkatkan konten utama dari aplikasi Anda dan menampilkannya di tempat yang
dapat dilihat orang secara sekilas di iPhone, iPad, dan Mac. Berguna dan menyenangkan, widget
juga dapat membantu orang mempersonalisasi layar Utama iPhone mereka dengan cara yang
unik.

41
Di iOS 14, iPadOS 14, dan macOS 11, widget berbeda dari widget Today yang tersedia di versi
sebelumnya, menawarkan tampilan yang didesain ulang dan kemampuan yang diperluas. Widget
juga menggunakan kerangka implementasi yang berbeda.

2.4.5 Visual Design

Visual design adalah sebuah bentuk desain yang dikomunikasikan secara visual untuk
menyampaikan pesan dan diharapkan dapat mempengaruhi seseorang yang membacanya. Visual
design sendiri memiliki tujuan, yaitu untuk meningkatkan daya tarik estetika dari suatu desain
atau produk dan kegunaannya melaui gambar, tipografi, ruang, tata letak, dan warna yang sesuai.
Visual design yang sukses atau berhasil tidak mengurangi konten yang ada di halaman atau
fungsinya. Sebaliknya, itu akan meningkatkannya dengan melibatkan pengguna dan membantu
membangun kepercayaan dan minat pada barang atau produk.
Visual design juga biasa dikenal sebagai proses penyempurnaan UI dan UX web atau
aplikasi melalui elemen dan efek visual, termasuk warna, ilustrasi, fotografi, tipografi, tata letak,
spasi, dan sejenisnya. Berbeda dengan desain UI, visual design ini lebih berfokus pada efek
visual desain web atau aplikasi atau produk atau barang dan bertujuan untuk melibatkan para
penggunanya.
Setelah sebelumnya ada elemen dan juga prinsip, di dalam visual design ini juga terdapat
komponen. Berikut ini ada komponen – komponen yang ada di dalam visual design, yaitu:
1. Adaptivity and Layout
Sangat penting untuk merancang interface yang dapat beradaptasi yang
memberikan pengalaman hebat di lingkungan apa pun. Berikut ini ada beberapa hal yang
berada di dalam adaptivity dan layout, yaitu:
1) Ukuran layar perangkat dan orientasi.
Perangkat iOS memiliki berbagai ukuran layar dan dapat digunakan dalam
orientasi potret atau lanskap. Dengan kata lain, aplikasi khusus iPhone harus
berjalan di setiap ukuran layar iPhone dan aplikasi khusus iPad harus berjalan di
setiap ukuran layar iPad.
2) Tata letak otomatis.
Tata letak otomatis adalah alat pengembangan untuk membangun interface
adaptif. Dengan menggunakan alat ini, Anda dapat menentukan aturan yang
mengatur konten di dalam aplikasi Anda. Tata letak ini juga akan secara otomatis

42
 menyesuaikan tata letak yang sesuai dengan batasan yang ditentukan saat variasi
lingkungan tertentu terdeteksi.
3) Panduan tata letak dan safe area.
Panduan tata letak sebenarnya tidak terlihat di layar. Sistem ini
menyertakan panduan tata letak standar yang memudahkan penerapan margin
standar di sekitar konten dan membatasi lebar teks untuk keterbacaan optimal.
Panduan tata letak ini memastikan penyisipan yang sesuai berdasarkan perangkat
dan konteks. Safe area juga mencegah konten menimpa bilah, status, bilah
navigasi, bilah alat, dll.
4) Kelas ukuran.
Kelas ukuran adalah ciri yang secara otomatis ditetapkan ke area konten
berdasarkan ukurannya. Sistem mendefinisikan dua kelas ukuran yang
menggambarkan tinggi dan lebar tampilan, yaitu regular (ruang yang luas) dan
kompak (ruang yang terbatas).
5) Kelas ukuran perangkat.
Kombinasi kelas ukuran yang berbeda berlaku untuk pengalaman
fullscreen di perangkat yang berbeda berdasarkan ukuran layar.
6) Kelas ukuran multitasking.
Di iPad, kelas ukuran juga berlaku saat aplikasi Anda berjalan dalam
konfigurasi multitasking.
7) Pertimbangan tata letak umum.
a) Pastikan konten utama jelas pada ukuran defaultnya.
Jadinya orang tidak perlu mengguliar secara horizontal untuk
membaca teks penting atau memperbesar/memperkecil untuk melihat
gambar, kecuali mereka memilih untuk mengubah ukurannya.
b) Pertahankan keseluruhan tampilan yang konsisten di seluruh aplikasi
Anda.
c) Gunakan bobot dan keseimbangan visual untuk menyampaikan
kepentingan.

43
 Secara umum, tempatkan item utama atau item besar di paruh atas
layar dan dalam konteks membaca kiri ke kanan di dekat sisi kiri layar
karena biasanya itu menarik perhatian dan tampak lebih penting.
d) Gunakan penyelarasan untuk memudahkan pemidaia dan untuk
mengkomunikasikan organisasi dan hierarki.
Hal itu membuat aplikasi terlihat rapih dan teratur, membantu
orang fokus saat menggulir dan mempermudah menemukan informasi.
e) Jika memungkinkan, dukung orientasi potret dan lanskap.
Orang – orang lebih suka menggunakan aplikasi dalam orientasi
yang berbeda.
f) Bersiaplah untuk perubahan ukuran teks.
Orang – orang berharap aplikasi dapat merespon saat mereka
memilih ukuran teks yang berbeda di pengaturan, untuk itu Anda mungkin
perlu menyesuaikan tata letaknya.
g) Berikan target sentuh yang cukup untuk elemen interaktif.
Cobalah untuk mempertahankan area yang dapat disadap minimal
44pt x 44pt untuk semua kontrol.
h) Pertinjau aplikasi Anda di beberapa perangkat.
Anda dapat menggunakan simulator (disertakan dengan Xcode)
untuk memeriksa kliping dan masalah tata letak lainnya.
i) Terapkan margin keterbacaan saat menampilkan teks pada perangkat yang
lebih besar.
Margin ini membuat baris teks cukup pendek untuk memastikan
pengalaman pembaca yang aman.
8) Beradaptasi dengan pengubahan konteks.
a) Pertahankan fokus pada konten saat ini selama perubahan konteks.
Mengubah fokus konten dapat membuat bingung dan frustasi, dan
dapat membuat orang merasa seperti mereka telah kehingalan kendali atas
aplikasi.
b) Hindari perubahan tata letak yang tidak beralasan.

44
 Cobalah untuk mempertahankan tata letak yang sebanding di
semua konteks.
c) Jika penting bahwa aplikasi Anda hanya berjalan dalam lanskap, dukung
kedua varian tersebut.
Aplikasi khusus lanskap Anda harus berjalan sama baiknya ketika
orang memutar perangkat mereka ke kiri atau ke kanan.
d) Sesuaikan respons aplikasi Anda terhadap rotasi menurut konteks.
Game yang memungkinkan orang memindahkan karakter dengan
memutar perangkat, itu bisa, bagaimanapun, menampilkan menu dan
urutan intro berdasarkan orientasi saat ini.
e) Bertujuan untuk mendukung iPad dan iPhone.
Jika fitur tertentu dari Aplikasi Anda memerlukan perangkat keras
khusus iPhone, pertimbangkan untuk menyembunyian atau menonaktifkan
fitur tersebut di iPad dan membiarkan orang menggunakan fitur lain dari
aplikasi Anda.
f) Perhatikan perbedaan rasio aspek saat menggunakan kembali karya seni
yang ada.
Ukuran layar yang berbeda menyebabkan konten visual tampak
terpangkas. Pastikan konten visual penting tetap terlihat di semua ukuran
tampilan.
9) Merancang pengalaman fullscreen.
a) Perluas elemen visual untuk mengisi layar.
Pastikan latar belakang meluas ke tepi layar dan tata letak yang
dapat digulir secara vertical, seperti table dan koleksi, terus berlanjut
hingga ke bawah.
b) Hindari menempatkan kontrol interaktif secara eksplisit di bagian paling
bawah layar dan di sudut.
Sudut terjauh layar bisa menjadi area yang sulit dijangkau orang.
c) Sisipkan konten penting untuk mencegah pemotongan.
Secara umum, konten harus dipusatkan dan disisipkan secara
simetris sehingga terlihat bagus dalam orientasi apa pun, tidak terpotong oleh

45
 sudut membulat, tidak tersembunyi oleh rumah sensor, dan tidak dikaburkan
oleh indikator untuk mengakses layar beranda. Untuk hasil terbaik, gunakan
elemen antarmuka standar yang disediakan sistem dan tata letak otomatis
d) Sisipkan tombol lebar penuh.
Tombol lebar penuh yang muncul di bagian bawah layar terlihat
paling baik jika memiliki sudut membulat dan sejajar dengan bagian
bawah safe area yang juga memastikan bahwa tidak bertentangan dengan
indikator beranda.
e) Jangan menutupi atau memberi perhatian khusus pada fitur tampilan
utama.
f) Perhatikan ketinggian bilah status.
Perhatikan bahwa bilah status pada iPhoe fullscreen tidak berubah
tinggi saat tugas seperti perekaman suara dan pelacakan lokasi aktif.
g) Jika saat ini Anda menyembunyikan bilah status, pertimbangkan kembali
keputusan tersebut saat aplikasi Anda berjalan pada iPhone fullscreen.
Bilah status menampilkan informasi yang menurut orang itu
berguna. Itu hanya boleh disembunyikan untuk ditukar dengan nilai
tambah.
h) Izinkan penyembunyian otomatis indicator untuk mengakses layar beranda
dengan hemat.
Saat sembunyi otomatis diaktifkan, indicator akan memudar jika
pengguna tidak menyentuh layar selama beberapa detik. Hal ini harus
diaktifkan hanya untuk pengalaman menonton pasif seperti memutar
video.
10) Pertimbangan tata letak tambahan.
Pastikan situs web Anda terlihat bagus pada tampilan tepi ke tepi.
2. Animation
Saat digunakan dengan tepat, animasi dapat menyampaikan status, memberikan
umpan balik, meningkatkan rasa manipulasi langsung, dan membantu pengguna
memvisualisasikan hasil tindakan mereka.
1) Gunakan animasi dan efek gerakan dengan bijaksana.

46
 Animasi yang berlebihan atau serampangan dapat membuat orang merasa
teganggu, terutama di aplikasi yang tidak memberika pengalaman imersif. Jika
Anda menerapkan efek gerakan, selalu uji hasilnya untuk memastikannya bekerja
dengan baik.
2) Berusaha keras untuk realism dan kredibilitas.
Orang cenderung menerima lisensi artistik, tetapi mereka bisa merasa
bingung ketika gerakan tidak masuk akal atau tampak menetang hukum fisik.
3) Gunakan animasi yang konsisten.
Kecuali Anda membuat pengalaman yang imersif, seperti game, animasi
kustom harus sebanding dengan animasi bawaan.
4) Jadikan animasi opsional.
Jika opsi untuk mengurangi gerakan diaktifkan di preferensi aksebilitas,
aplikasi Anda harus meminimalkan atau menghilangkan animasi aplikasi.
3. Branding
Pencitraan merek yang sukses melibatkan lebih dari sekadar menambahkan asset
merek ke aplikasi Anda. Berikan pencitraan merek yang cukup untuk memberikan
konteks kepada orang – orang di aplikasi Anda, tetapi jangan terlalu banyak.
1) Gabungkan branding yang halus dan tidak menganggu.
Menggunakan warna dari ikon aplikasi Anda di seluruh interface Anda
adalah salah satu cara yang bagus untuk memberikan konteks di aplikasi Anda.
2) Jangan biarkan pencitraan merek menghalangi desain aplikasi yang hebat.
Pastikan itu intuitif, mudah dinavigasi, mudah digunakan, dan berfokus
pada konten. Bahkan, jika aplikasi Anda tersedia di platform lain, hindari
mengurangi desain Anda dengan terlalu berfokus pada pecintraan merek yang
konsisten.
3) Tangguhkan konten daripada branding.
Pertimbangkan cara yang tidak terlalu mengganggu untuk menerapkan
pencitraan merek, seperti menggunakan skema warna atau font khusus.
4) Tahan godaan untuk menampilkan logo Anda di seluruh aplikasi Anda.
Hindari menampilkan logo di seluruh aplikasi Anda kecuali jika
diperlukan untuk memberikan konteks.

47
 5) Patuhi pedoman merek dagang Apple.
Merek dagang Apple tidak boleh muncul di nama aplikasi Anda.
4. Color
Warna adalah cara bagus untuk memberika vitalitas, memberikan kontinuitas
visual, mengkomunikasikan informasi status, memberikan umpan balik sebagai
tanggapan atas tindakan pengguna, dan membantu orang memvisualisasikan data.
1) Gunakan warna dengan bijaksana untuk komunikasi.
2) Gunakan warna pelengkap di seluruh aplikasi Anda.
Warna – warna di aplikasi Anda harus bekerja sama dengan baik. Jika
pastel penting untuk gaya aplikasi Anda, misalnya, gunakan sekumpulan pastel
yang terkoordinasi.
3) Secara umum, pilih palet warna terbatas yang sesuai dengan logo aplikasi Anda.
Penggunaan warna yang halus adalah cara yang bagus untuk
mengkomunikasikan merek Anda.
4) Pertimbangkan memilih warna tint untuk menunjukkan interaktivitas di seluruh
aplikasi Anda.
Jika Anda menentukan warna tint yang menunjukkan interaktivitas,
pastikan warna lain tidak bersaing dengannya.
5) Sediakan dua versi warna tint Anda untuk memastikan tampilannya bagus dalam
mode terang dan gelap.
Saat Anda menggunakan warna sistem untuk warna tint Anda, Anda
mendapatkan dukungan otomatis untuk kontras tinggi.
6) Hindari menggunakan warna yang sama untuk elemen interktif dan non –
interaktif.
Jika elemen interaktif dan noninteraktif memiliki warna yang sama, sulit
bagi orang untuk mengetahui di mana harus mengetuk.
7) Pertimbangkan bagaimana karya seni dan tembus cahaya memengaruhi warna d
sekitar.
Variasi dalam karya seni terkadang membutuhkan perubahan pada warna
terdekat untuk menjaga kontinuitas visual dan mencegah elemen antarmuka
menjadi terlalu kuat atau mengecewakan.

48
 8) Uji skema warna aplikasi Anda dalam berbagai kondisi pencahayaan.
Selalu pratinjau aplikasi Anda dalam berbagai kondisi pencahayaan,
termasuk di luar ruangan pada hari yang cerah, untuk melihat bagaimana warna
muncul. Jika perlu, sesuaikan warna untuk memberikan pengalaman menonton
terbaik di sebagian besar kasus penggunaan.
9) Pertimbangkan bagaimana tampilan True Tone memengaruhi warna.
Aplikasi yang fokus utamanya pada membaca, foto, video, dan game
dapat memperkuat atau melemahkan efek ini dengan menentukan gaya adaptivitas
titik putih.
10) Pertimbangkan bagaimana penggunaan warna Anda dapat dianggap di negara dan
budaya lain.
Di beberapa budaya, misalnya, warna merah menunjukkan bahaya. Di sisi
lain, merah memiliki konotasi positif. Pastikan warna di aplikasi Anda
mengirimkan pesan yang sesuai.
11) Hindari penggunaan warna yang mempersulit orang untuk melihat konten di
aplikasi Anda.
Misalnya, orang buta warna mungkin tidak dapat membedakan beberapa
kombinasi warna, dan kontras yang tidak memadai yang dapat menyebabkan ikon
dan teks berbaur dengan background dan membuat konten sulit dibaca.
Warna sistem adalah warna yang secara otomatis akan menyesuaikan dengan
kecerahan dan perubahan dalam pengaturan aksesibilitas seperti tingkatan kontras dan
kurangin transparansi. Warna sistem tampak hebat secara individual dan dalam
kombinasi, pada background terang dan gelap, dan dalam mode terang dan gelap.
 Jangan membuat kode keras nilai warna sistem di aplikasi Anda.
Nilai warna yang diberikan di bawah ini dimaksudkan sebagai referensi
selama proses desain aplikasi Anda. Nilai warna sebenarnya dapat berfluktuasi
dari rilis ke rilis, berdasarkan berbagai variabel lingkungan. Selalu gunakan API
untuk menerapkan warna sistem.
Warna sistem dinamis adalah warna sistem yang ditentukan secara semantik yang
secara otomatis menyesuaikan dengan mode terang dan gelap. Sebuah warna semantik
menyampaikan tujuannya daripada menampilkan atau warna nilai – nilainya. iOS

49
mendefinisikan dua set warna background, yaitu sistem dan dikelompokkan. Secara
umum, gunakan kumpulan warna background saat Anda memiliki tampilan table yang
dikelompokkan, jika tidak, gunakan kumpulan warna background sistem.
Dengan kedua kumpulan warna latar belakang, Anda biasanya menggunakan
varian untuk menunjukkan hierarki dengan cara berikut:
 Utama untuk menampilkan keseluruhan
 Sekunder untuk mengelompokkan konten atau elemen dalam tampilan
keseluruhan.
 Tersier untuk mengelompokkan konten atau elemen dalam elemen sekunder.
1) Jangan mendefinisikan ulang arti semantic dari warna sistem dinamis.
Untuk memberikan pengalaman yang konsisten kepada orang-orang dan
memastikan bahwa antarmuka Anda terlihat bagus di semua konteks, gunakan
warna sistem dinamis seperti yang diinginkan.
2) Jangan mencoba meniru warna sistem dinamis.
Alih-alih mencoba membuat warna ubahsuaian yang cocok dengan warna
sistem, gunakan warna sistem dinamis.
Manajemen warna
1) Terapkan proful warna ke gambar Anda.
Ruang warna default di iOS adalah RGB Standar (sRGB). Untuk
memastikan bahwa warna benar-benar cocok dengan ruang warna ini, pastikan
gambar Anda menyertakan profil warna yang disematkan.
2) Gunakan warna lebar untuk meningkatkan pengalaman visual pada tampilan yang
kompatibel.
Hasilnya, foto dan video yang menggunakan warna lebar menjadi lebih
hidup, dan data visual serta indikator status yang menggunakan warna lebar lebih
berdampak. Jika perlu, gunakan profil warna Tampilan P3 pada 16 bit per piksel
(per saluran) dan ekspor gambar dalam format PNG.
3) Berikan gambar khusus ruang warna dan variasi warna saat pengalaman
membutuhkannya.

50
 Anda dapat memberikan gambar dan warna yang berbeda dalam katalog
aset proyek Xcode Anda untuk memastikan ketepatan visual pada perangkat wide
color dan sRGB.
4) Pratinjau waarna aplikasi Anda pada sRGB actual dan tampilan warna lebar.
Lakukan penyesuaian seperlunya untuk memastikan pengalaman visual
yang sama hebatnya di kedua jenis tampilan.
5. Dark Mode
Dalam dark mode, sistem menggunakan palet warna yang lebih gelap untuk
semua layar, tampilan, menu, dan kontrol, dan menggunakan lebih banyak semangat
untuk membuat konten latar depan menonjol dengan latar belakang yang lebih gelap.
Dark mode mendukung semua fitur aksesibilitas. Di pengaturan, orang dapat memilih
dark mode sebagai gaya interface default mereka dan menjadwalkan perubahan otomatis
di antara mode tampilan.
1) Mematuhi mode penampilan yang dipilih orang di pengaturan.
Jika Anda menawarkan opsi mode tampilan khusus aplikasi, Anda
membuat lebih banyak pekerjaan untuk orang karena mereka harus menyesuaikan
lebih dari satu pengaturan. 
2) Uji desain Anda dalam tampilan terang dan gelap.
Lihat bagaimana tampilan inteface Anda di kedua tampilan dan sesuaikan
desain Anda sesuai kebutuhan untuk mengakomodasi masing-masing
tampilan. Desain yang bekerja dengan baik di satu tampilan mungkin tidak
berfungsi di tampilan lain.
3) Pastikan konten Anda tetap dapat dibaca dengan nyaman dalam dark mode saat
Anda menyesuaikan pengaturan aksesibilitas kontras dan transparansi.
Dalam dark mode, Anda harus menguji konten Anda dengan aktifkan
kontras dan kurangi transparansi, baik secara terpisah maupun bersamaan.
Meskipun orang dengan penglihatan yang kuat mungkin masih bisa membaca teks
kontras rendah, teks seperti itu mungkin tidak terbaca oleh orang dengan
gangguan penglihatan.

51
 Warna dark mode  dalam sistem menggunakan dua set warna background yang
disebut base dan elevated yang berfungsi untuk meingkatkan persepsi kedalaman ketika
satu interface gelap dilapisi di atas yang lain.
1) Lebih suka warna background sistem.
Dark mode bersifat dinamis, yang berarti bahwa warna background secara
otomatis berubah dari dasar ke tinggi saat inteface berada di latar depan, seperti
popover atau lembar modal. Sistem juga menggunakan warna background yang
ditinggikan untuk memberikan pemisahan visual antara aplikasi dalam
lingkungan multitasking dan antar jendela dalam konteks banyak jendela.
2) Gunakan warna dinamis yang menyesuaikan dengan tempilan saat ini.
Saat Anda membutuhkan warna kustom, tambahkan aset Color Set ke
katalog aset aplikasi Anda dan tentukan varian terang dan gelap warna tersebut
sehingga dapat beradaptasi dengan mode tampilan saat ini. Hindari menggunakan
nilai warna hard – code atau warna yang tidak beradaptasi.
3) Pastikan kontras warna yang cukup di semua tampilan.
Untuk warna kustom, bidik rasio kontras 7: 1, terutama untuk teks yang
lebih kecil. 
4) Memperluas warna background putih.
Pilih warna putih yang sedikit lebih gelap yang mencegah background
bersinar terhadap konten gelap di sekitarnya.
Warna gambar, ikon, dan simbol  sistem menggunakan simbol SF, yang secara
otomatis terlihat bagus dalam dark mode dan gambar berwarna penuh yang dioptimalkan
untuk tampilan terang dan gelap.
1) Gunakan simbol SF jika memungkinkan.
Simbol terlihat bagus di kedua mode tampilan saat Anda
menggunakan warna dinamis untuk mewarnainya
2) Rancang mesin terbang individu untuk tampilan terang dan gelap bila perlu.
Mesin terbang yang menggunakan garis berongga dalam mode terang
mungkin terlihat lebih baik sebagai bentuk padat yang terisi dalam dark mode.
3) Pastikan gambra dan ikon berwarna lengkap terlihat bagus.

52
 Gunakan aset yang sama jika terlihat bagus dalam mode terang dan gelap.
Gunakan katalog aset untuk menggabungkan aset Anda menjadi satu gambar
bernama.
Bahan  Kecerahan dapat membantu mempertahankan kontras teks yang baik
pada latar belakang yang lebih gelap.
1) Gunakan warna label yang disediakan sistem untuk label.
Warna label primer, sekunder, tersier, dan kuaterner menyesuaikan secara
otomatis dengan tampilan terang dan gelap. 
2) Gunakan tampilan sistem untuk menggambar bidang teks dan tampilan teks.
Tampilan dan kontrol sistem membuat teks aplikasi Anda terlihat bagus di
semua background, menyesuaikan secara otomatis ada atau tidak adanya
semangat. 
6. Launch Screen
Launch screen akan langsung muncul saat aplikasi Anda dimulai dan dengan
cepat diganti dengan layar pertama aplikasi, memberikan kesan bahwa aplikasi Anda
cepat dan responsif. Setiap aplikasi harus menyediakan layar peluncuran. Untuk
mengakomodasi ukuran layar berbagai perangkat dan lingkungan, seperti multitasking,
gunakan papan cerita Xcode untuk menyediakan launch screen.
1) Rancang layar peluncuran yang hampir identic dengan layar pertama aplikasi
Anda.
Jika Anda menyertakan elemen yang terlihat berbeda saat aplikasi selesai
diluncurkan, orang dapat mengalami flash yang tidak menyenangkan antara
launch screen dan layar pertama aplikasi.
2) Hindari menyertakan teks di launch screen Anda.
Karena konten di layar peluncuran tidak berubah, teks apa pun yang
ditampilkan tidak akan dilokalkan.
3) Meremehkan launcing.
Mendesain launch screen yang menyerupai interface aplikasi menciptakan
ilusi bahwa aplikasi dimulai secara instan. Dikombinasikan dengan waktu
peluncuran yang cepat, pendekatan desain ini membuat aplikasi Anda langsung
terasa responsif.

53
 4) Jangan beriklan.
Layar peluncuran bukanlah peluang branding. Jangan menyertakan logo
atau elemen pencitraan merek lainnya kecuali itu adalah bagian tetap dari layar
pertama aplikasi Anda. Jika game Anda atau aplikasi imersif lainnya
menampilkan warna solid sebelum beralih ke layar pertama, Anda dapat membuat
launch screen yang hanya menampilkan warna solid tersebut.
7. Materials
Efek material memungkinkan tampilan dan kontrol memberi petunjuk pada
konten latar belakang tanpa mengganggu konten latar depan. Untuk menghasilkan efek
ini, material memungkinkan informasi warna background melewati tampilan latar depan,
sekaligus mengaburkan konteks background untuk menjaga keterbacaan. Saat Anda
menggunakan material yang ditentukan sistem, elemen Anda tampak hebat dalam setiap
konteks, karena efek ini secara otomatis beradaptasi dengan mode terang dan gelap
sistem.
1) Dipandu oleh materi yang digunakan sistem.
Jika memungkinkan, bandingkan tampilan kustom Anda dengan tampilan
yang disediakan sistem yang memungkinkan fungsi serupa dan menggunakan
bahan yang sama.
2) Manfaatkan warna yang disediakan sistem untuk teks, isian, mesin terbang, dan
pemisah.
Warna yang disediakan sistem secara otomatis membuat item ini tampak
bagus pada latar belakang yang tembus cahaya.
3) Jika memungkinkan, gunakan simbol SF.
Saat Anda menggunakan warna sistem dinamis untuk mewarnai simbol,
atau menerapkan efek semangat padanya, simbol tampak hebat dalam konteks apa
pun.
Material dan vibrancy yang ditentukan sistem  iOS menentukan materi
yang dapat Anda gunakan di area tertentu untuk mengontrol pemisahan visual
antara konten latar depan dan tampilan latar belakang. Materi yang disediakan
sistem mencakup varian terang dan gelap yang bekerja dengan baik pada sebagian

54
 besar latar belakang. iOS 13 mendefinisikan empat materi yang memiliki tingkat
tembus cahaya berbeda (setiap materi juga menyertakan varian gelap):
 SystemUltraThinMaterial
 SystemThinMaterial
 SystemMaterial (default)
 SytemThickMaterial
a) Pertimbangkan kontras dan pemisah visual saat memilih material.
Saat Anda membuat pilihan ini, pertimbangkan bahwa:
 Bahan yang lebih tebal dapat memberikan kontras yang lebih baik untuk
teks dan elemen lain dengan fitur halus.
 Translucency dapat membantu orang mempertahankan konteksnya dengan
memberikan pengingat yang terlihat dari konten yang ada di latar
belakang.
Vibrancy mencerahkan atau menggelapkan elemen UI dengan
mengambil sampel warna background dan mengubah saturasi dan
nilai. Elemen UI yang cerah terintegrasi lebih baik dengan material dan
meningkatkan efek tembus cahaya.
Label dan isian masing-masing memberikan beberapa tingkat
semangat, yaitu  pemisah memiliki satu tingkat. Nama level menunjukkan
jumlah relatif kontras antara elemen dan latar belakang: tingkat default
memiliki kontras tertinggi, sedangkan kuartener (jika ada) memiliki
kontras terendah.
Kecuali untuk kuaterner, Anda dapat menggunakan nilai kecerahan
berikut untuk label pada bahan apa pun. Tidak disarankan menggunakan
kuaterner pada material tipis dan ultra tipis, karena kontrasnya terlalu
rendah
 Label (default).
 secondraryLabel.
 tertiaryLabel.
 quaternaryLabel.

55
 Anda dapat menggunakan nilai getaran berikut untuk isian pada semua
material, yaitu isi (default), secondaryFill, dan tertiaryFill.
b) Pilih efek getaran berdasarkan makna semantiknya.
Hindari mencampurkan efek ini, misalnya jangan gunakan efek label
untuk pemisah.
8. Terminology.
Setiap kata di aplikasi Anda adalah bagian dari percakapan dengan pengguna
Anda. Gunakan percakapan ini untuk membantu mereka merasa nyaman di aplikasi
Anda.
1) Gunakan kata dan frase yang familiar dan mudah dimengerti.
Hindari akronim dan jargon teknis yang mungkin tidak dipahami
orang. Gunakan apa yang Anda ketahui tentang audiens Anda untuk menentukan
apakah kata atau frasa tertentu sesuai.
2) Jaga teks interface jelas dan ringkas.
Sehingga orang tidak perlu terlalu banyak membaca untuk menemukan
apa yang mereka cari atau mencari tahu apa yang harus dilakukan selanjutnya.
3) Identifikasi elemen interaktif dengan tepat.
Orang harus dapat mengetahui sekilas apa yang dilakukan suatu
elemen. Saat memberi label pada tombol dan elemen interaktif lainnya, gunakan
kata kerja tindakan, seperti Connect, Send, dan Add.
4) Hindari bahasa yang memungkinkan terdengar merendahkan.
5) Berusahalah untuk nada informal dan ramah.
6) Berhati – hatilah saat menggunakan humor.
Ingat bahwa humor dalam satu budaya tidak selalu diterjemahkan dengan
baik ke budaya lain.
7) Gunakan bahasa dan citra yang relevan dan konsisten.
Gunakan bahasa yang konsisten dengan platform. Anda mengetuk,
menjentik, menggesek, mencubit, dan menyeret konten pada layar sentuh. Anda
menekan tombol fisik dan konten yang merespons 3D Touch. Anda memutar dan
mengguncang perangkat.
8) Lihat tanggal secara akurat.

56
 Pertimbangkan acara yang dimulai sebelum tengah malam. Di satu zona
waktu, acara dapat dimulai hari ini. Di zona waktu lain, acara yang sama mungkin
telah dimulai kemarin. Umumnya, tanggal harus mencerminkan zona waktu orang
yang menonton acara tersebut. 
9. Typograpy
San Francisco adalah keluarga tipe sans serif yang mencakup SF Pro, SF Pro
Rounded, SF Mono, SF Compact, dan SF Compact Rounded. SF Pro adalah font sistem
di iOS, macOS, dan tvOS; SF Compact adalah font sistem di watchOS. Dirancang agar
sesuai dengan kejernihan visual dari UI platform, font sistem dapat dibaca dan netral.
New York (NY). New York adalah jenis huruf serif yang memberikan nada unik
yang dirancang untuk melengkapi font SF. NY bekerja dengan baik dalam konteks
tampilan grafik (dalam ukuran besar) seperti halnya dalam konteks membaca (pada
ukuran teks).
Tipografi yang dirancang Apple mendukung berbagai macam bobot, ukuran,
gaya, dan bahasa, sehingga Anda dapat merancang pengalaman membaca yang nyaman
dan indah di seluruh aplikasi Anda. Saat Anda menggunakan gaya teks dengan font
sistem, Anda juga mendapatkan dukungan untuk Tipe Dinamis dan ukuran tipe
aksesibilitas yang lebih besar, yang memungkinkan orang memilih ukuran teks yang
sesuai untuk mereka. Sistem mendefinisikan API yang memudahkan penggunaan
tipografi SF dan NY.
1) SF Pro dan SF Compact.
Fleksibilitas font sistem membantu Anda mencapai keterbacaan yang
optimal di setiap ukuran titik dan memberi Anda keluasan dan kedalaman yang
Anda butuhkan untuk penyusunan huruf yang presisi di seluruh aplikasi Anda.
Dukungan SF Pro dan SF Compact:
 Lebih dari seratus bahasa menggunakan skrip Latin, Yunani, dan Sirilik.
 Sembilan bobot – dari ultralight hingga hitam – dalam warna tegak dan
miring.
 Penspasian huruf variable yang secara otomatis menyesuaikan
berdasarkan ukuran teks.
 Huruf capital kecil, pecahan, dan angka inferior dan superior.

57
  Ukuran optik dinamis, selain ukuran optik diskrit teks dan tampilan.
2) SF Pro Rounded dan SF Compact Rounded.
Varian bulat dari font sistem dapat membantu Anda mengoordinasikan
gaya teks Anda dengan tampilan elemen UI yang lembut atau bulat, atau untuk
memberikan suara tipografi alternatif. Dukungan SF Pro Rounded dan SF
Compact Rounded:
 Lebih dari seratus bahasa menggunakan skrip Latin, Yunani, dan Sirilik.
 Tegak dalam Sembilan bobot – dari ultralight hingga hitam.
 Penspasian huruf variable yang secara otomatis menyesuaikan
berdasarkan ukuran teks.
 Huruf capital kecil, pecahan, dan angka inferior dan superior.
 Ukuran optik dinamis.
3) SF Mono.
SF Mono adalah varian spasi tunggal dari San Francisco - yaitu, jenis
huruf yang semua karakternya memiliki lebar yang sama. SF Mono mendukung:
 Lebih dari seratus bahasa menggunakan skrip Latin, Yunani, dan Sirilik.
 Enam bobot – dari regular hingga hitam dengan huruf tegak dan miring.
 Monospacing di semua bobot, yaitu mengubah bobot font tidak
menyebabkan teks mengalir ulang.
 Ukuran optik dinamis.
4) New York.
New York adalah jenis huruf serif klasik yang dapat Anda gunakan di
antarmuka atau untuk memberikan pengalaman membaca tradisional. NY
mendukung:
 Lebih dari seratus bahasa menggunakan skrip Latin, Yunani, dan Sirilik.
 Enam bobot – dari regular hingga hitam – dengan huruf tegak dan miring.
 Penspasian huruf variable yang secara otomatis menyesuaikan
berdasarkan ukuran teks.
 Ukuran optik dinamis, selain ukuran optik disktrit Small, Medium, Large,
dan Extra Large.

58
Memilih font untuk meningkatkan aplikasi Anda
1) Gunakan gaya teks bawaan jika memungkinkan.
Gaya teks bawaan memungkinkan Anda mengekspresikan konten dengan
cara yang berbeda secara visual, sekaligus mempertahankan keterbacaan yang
optimal dan memungkinkan Anda memanfaatkan fitur tipografi utama, seperti
Jenis Dinamis, yang secara otomatis menyesuaikan pelacakan dan memimpin
untuk setiap ukuran font.
2) Tekankan informasi penting.
Gunakan berat font, ukuran, dan warna untuk menyoroti informasi paling
penting di aplikasi Anda.
3) Prioritaskan konten saat menanggapi perubahan ukuran teks.
Ketika seseorang memilih ukuran yang lebih besar, mereka ingin membuat
konten yang mereka sukai lebih mudah dibaca. Mereka tidak selalu ingin setiap
kata di layar menjadi lebih besar.
4) Minimalkan jumlah tipografi yang Anda gunakan di interface Anda.
Mencampur terlalu banyak tipografi yang berbeda dapat membuat aplikasi
Anda tampak terfragmentasi dan ceroboh.
5) Modifikasi untuk meningkatkan keterbacaan atau menghemat ruang.
Sistem mendefinisikan API yang memungkinkan Anda menambah atau
mengurangi ruang antar baris sebanyak dua titik, untuk panduan pengembang,
traitLooseLeading, traitTightLeading (UIKit), dan loose dan tight (SwiftUI).
6) Pastikan font kustom dapat dibaca.
Pertimbangkan untuk menggunakan font kustom hanya untuk teks
tampilan. Jika Anda menggunakannya untuk membaca atau teks interface,
pastikan itu terbaca, bahkan dalam ukuran kecil.
7) Menerapkan fitur aksesibilitas untuk font kustom.
Font sistem secara otomatis bereaksi terhadap fitur aksesibilitas seperti
teks tebal dan tipe yang lebih besar.
8) Sesuaikan pelacakan seperlunya dalam maket interface.

59
 Untuk menghasilkan mockup interface yang akurat dari UI yang
menggunakan font sistem variabel, Anda tidak perlu memilih ukuran optik diskrit
pada ukuran titik tertentu, tetapi Anda mungkin perlu menyesuaikan pelacakan.
9) Dalam mockup interface, gunakan ukuran teks untuk menentukan kapan harus
menggunakan teks dan tampilan SF Pro, teks dan tampilan SF Compact, atau NY
Small, Medium, Large, dan Extra Large.
Jika Anda menggunakan ukuran optik diskrit ini dalam maket antarmuka,
Anda perlu menggunakan varian yang berbeda pada ukuran teks yang berbeda,
seperti:
 Untuk SF, gunakan Teks untuk teks yang lebih kecil dari 20 poin; gunakan
Tampilan untuk teks yang berukuran 20 poin atau lebih besar.
 Untuk NY, gunakan Kecil untuk teks yang lebih kecil dari 20 poin, Sedang
untuk teks antara 20 dan 35 poin, besar untuk teks antara 36 dan 53 poin,
dan Ekstra Besar untuk teks yang berukuran 54 poin atau lebih besar.
Ukuran tipe dinamis  Jenis Dinamis memberikan fleksibilitas tambahan
dengan memungkinkan pembaca memilih ukuran teks yang mereka sukai.
Ukuran jenis aksesibilitas lebih besar  Selain ukuran tipe dinamis
standar, sistem menawarkan sejumlah ukuran yang lebih besar untuk pengguna
dengan kebutuhan aksesibilitas.
Nilai pelacakan  Untuk membantu Anda membuat mockup antarmuka
yang akurat, gunakan nilai pelacakan yang ditentukan sistem untuk berbagai
ukuran SF Pro, SF Pro Rounded, dan New York.
10. Video
Pemutar video yang disediakan sistem menawarkan dua mode tampilan, yaitu:
1) Mode tampilan layar fullscreen (pengisian aspek)  ini adalah mode tampilan
default untuk video lebar (2:1 hingga 2.40:1).
2) Mode tampilan pas – ke – layar (aspek)  ini adalah mode tampilan default untuk
video standar (4:3, 16:9, dan apa pun hingga 2:1) dan video ultra-lebar (apa pun di
atas 2.40:1). 
a) Putar atau jeda pemutaran media saat orang menekan spasi pada keyboard
Bluetooth yang tersambung.

60
 Menekan Spasi untuk mengontrol pemutaran media adalah interaksi yang
diharapkan orang-orang, terlepas dari keyboard yang mereka gunakan.
b) Pastikan pemutar video kustom berperilaku seperti yang diharapkan.
Tujuannya adalah untuk mengisi tampilan secara default saat memutar
konten video pada perangkat layar penuh. 
c) Selalu tampilkan konten video dengan rasio aspek aslinya.
Saat konten video menggunakan kotak surat atau bantalan kotak pilar yang
disematkan untuk menyesuaikan dengan rasio aspek tertentu, iOS tidak dapat
menskalakan video dengan benar berdasarkan pilihan mode tampilan
pengguna. Padding yang disematkan di dalam bingkai video dapat menyebabkan
video tampak lebih kecil dalam mode layar penuh dan mode pas – ke – layar.

2.4.6 Icons and Images

Berikut ada beberapa hal penjelasan mengenai icons and images, yaitu:
1. Image Size and Resolution
System kordinat yang digunakan iOS untuk menempatkan konten di layar
didasarkan pada pengukuran dalam poin, yang dipetakan ke piksel di tampilan.
Layar resolusi standar memiliki kerapatan piksel 1: 1 (atau @ 1x), di mana satu
piksel sama dengan satu titik. Layar resolusi tinggi memiliki kerapatan piksel
lebih tinggi, menawarkan faktor skala 2.0 atau 3.0 (disebut sebagai @ 2x dan @
3x). Akibatnya, tampilan resolusi tinggi menuntut gambar dengan lebih banyak
piksel.
2. Ikon Aplikasi
Setiap aplikasi membutuhkan ikon indah dan mudah diingat yang menarik
perhatian di App Store dan menonjol di layar Utama. Ikon Anda adalah
kesempatan pertama untuk menyampaikan, secara sekilas, tujuan aplikasi Anda.
Itu juga muncul di seluruh sistem, seperti di Pengaturan dan hasil pencarian.
3. Custom Icons
Kelompok ikon aplikasi Anda harus memiliki ukuran yang konsisten
secara visual. Jika setiap desain ikon berbeda beratnya, beberapa ikon mungkin
perlu sedikit lebih besar daripada yang lain untuk mendapatkan efek ini. Dalam
orientasi potret, ikon bilah tab muncul di atas judul tab. Dalam orientasi lanskap,

61
 ikon dan judul muncul berdampingan. Bergantung pada perangkat dan
orientasinya, sistem menampilkan bilah tab biasa atau kompak. Aplikasi Anda
harus menyertakan ikon bilah tab khusus untuk kedua ukuran.
4. System Icons
Sistem menyediakan ikon bawaan yang mewakili tugas umum dan jenis konten
dalam berbagai kasus penggunaan.
 Ikon Bilah Navigasi dan Bilah Alat
 Ikon Tab Bar
 Ikon Tindakan Cepat Layar Beranda

Setiap gambar yang disediakan sistem memiliki arti yang spesifik dan terkenal.
Untuk menghindari kebingungan pengguna, setiap gambar harus digunakan sesuai
dengan artinya dan penggunaan yang disarankan. Label teks alternatif tidak
terlihat di layar, tetapi memungkinkan VoiceOver mendeskripsikan dengan jelas
apa yang ada di layar, membuat navigasi lebih mudah bagi orang dengan
gangguan penglihatan. Rancang ikon ubahsuaian jika Anda tidak dapat
menemukan ikon yang disediakan sistem yang memenuhi kebutuhan Anda. Lebih
baik mendesain sendiri daripada menyalahgunakan gambar yang disediakan
sistem. Lihat Ikon Kustom.

2.4.7 Bars
Berikut ini ada beberapa jenis, komponen, dan hal yang dapat dilakukan agar Bars dapat
digunakan dengan baik, yaitu:
1. Bar Navigasi
Bar navigasi muncul di bagian atas layar aplikasi, di bawah bar status, dan
memungkinkan navigasi melalui serangkaian layar hierarki. Saat layar baru ditampilkan,
tombol kembali sering kali diberi label dengan judul layar sebelumnya, muncul di sisi kiri
bar. Terkadang, sisi kanan bar navigasi berisi kontrol, seperti tombol edit atau selesai,
untuk mengelola konten dalam tampilan aktif. Bar navigasi tembus cahaya, mungkin
memiliki warna background dan dapat dikonfigurasi untuk bersembunyi saat papan ketik
di layar, gerakan terjadi, atau tampilan diubah ukurannya.

62
 1) Pertimbangkan untuk menyembunyikan sementara bar navigasi saat menampilkan
konten layar penuh.
Sembunyikan bar sementara untuk memberikan pengalaman yang lebih
imersif. Jika Anda menerapkan jenis perilaku ini, izinkan orang memulihkan bilah
navigasi dengan gerakan sederhana, seperti ketukan.
Judul Bar Navigasi
1) Pertimbangkan untuk menunjukkan judul tampilan saat ini di bar navigasi.
Dalam kebanyakan kasus, judul membantu orang memahami apa yang
mereka lihat. Namun, jika itu membuat judul bar navigasi tampak berlebihan,
Anda dapat mengosongkan judulnya.
2) Gunakan judul besar jika Anda ingin memberikan penekanan ekstra pada konteks.
Judul besar tidak boleh bersaing dengan konten, tetapi di beberapa
aplikasi, teks besar dan tebal dari judul besar dapat membantu mengarahkan orang
saat mereka menjelajah dan menelusuri. Dalam tata letak tab, misalnya, judul
besar dapat membantu memperjelas tab aktif dan menunjukkan saat orang telah
menggulir ke atas.
3) Pertimbangkan untuk menyembunyikan batas judul besar bar navigasi.
Di iOS 13 dan versi lebih baru, Anda dapat menyembunyikan batas bawah
biar navigasi dengan menghapus bayangan bar (batas secara otomatis muncul
kembali saat orang menggulir area konten). Borderless style (gaya tanpa batas)
berfungsi dengan baik di bar navigasi judul besar karena meningkatkan kesan
hubungan antara judul dan konten.
Kontrol Bar Navigasi
1) Hindari memenuhi bar navigasi dengan terlalu banyak kontrol.
2) Gunakan tombol kembali standar.
Orang tahu bahwa tombol kembali standar memungkinkan mereka
menelusuri kembali langkah-langkah melalui hierarki informasi. Namun, jika
Anda menerapkan tombol kembali khusus, pastikan tombol itu masih terlihat
seperti tombol kembali, berperilaku secara intuitif, cocok dengan antarmuka Anda
lainnya, dan diterapkan secara konsisten di seluruh aplikasi Anda.
3) Jangan menyertakan jalur runut tautan multisegmen.

63
 Tombol kembali selalu melakukan satu tindakan (kembali ke layar
sebelumnya). Jika menurut Anda orang mungkin tersesat tanpa jalur lengkap ke
layar saat ini, pertimbangkan untuk meratakan hirearki aplikasi Anda.
4) Beri ruang yang cukup untuk tombol bertajuk teks.
Jika bilah navigasi Anda menyertakan beberapa tombol teks, teks dari
tombol tersebut mungkin tampak berjalan bersamaan, membuat tombol tidak
dapat dibedakan. Tambahkan pemisahan dengan memasukkan item spasi tetap di
antara tombol.
5) Pertimbangkan untuk menggunakan kontrol tersegmentasi di bar navigasi untuk
meratakan hierarki informasi aplikasi Anda.
Jika Anda menggunakan kontrol tersegmentasi di bilah navigasi, lakukan
hanya di tingkat atas hierarki Anda dan pastikan untuk memilih judul tombol
kembali yang akurat di tingkat yang lebih rendah.
2. Bar Pencarian
Bar pencarian memungkinkan orang mencari dengan mengetik teks ke dalam bidang. Bar
pencarian dapat ditampilkan sendiri, atau di bar navigasi atau tampilan konten.
1) Gunakan bar penelusuran alih – alih bidang teks untuk menerapkan penelusuran.
Bidang teks tidak memiliki tampilan bar pencarian standar yang
diharapkan orang – orang.
2) Aktifkan tombol hapus  biasanya digunakan untuk menghapus konten bidang.
3) Aktifkan tombol batal jika perlu  biasanya digunakan untuk menghentikan
pencarian.
4) Jika perlu, berikan petunjuk dan konteks di bar pencarian.
Bidang bilah penelusuran dapat berisi teks placeholder, seperti “Telusuri
Pakaian, Sepatu, dan Aksesori” atau cukup “Telusuri” sebagai pengingat konteks
yang sedang ditelusuri. Perintah singkat satu baris dengan tanda baca yang sesuai
juga dapat muncul langsung di atas bilah pencarian untuk memberikan panduan.
5) Pertimbangkan untuk memberikan pintasan yang bermanfaat dan konten lainnya
di bawah bar pencarian.
Gunakan area di bawah bar pencarian untuk membantu orang – orang
mendapatkan konten lebih cepat. Safari, misalnya, menampilkan penanda Anda

64
 segera setelah Anda mengetuk bidang pencarian. Pilih satu untuk langsung
membukanya tanpa memasukkan istilah pencarian apa pun. 
Scope Bars
Bar lingkup dapat ditambahkan ke bar pencarian agar orang – orang dapat
mempersempit ruang lingkup pencarian.
1) Lebih suka meningkatkan hasil pencarian daripada menyertakan bar lingkup.
Bilah ruang lingkup dapat berguna ketika ada kategori yang ditentukan
dengan jelas untuk mencari. Namun, yang terbaik adalah meningkatkan hasil
pencarian sehingga pelingkupan tidak diperlukan.
3. Sidebars
Sidebar menyediakan navigasi tingkat aplikasi dan akses cepat ke koleksi konten
tingkat atas di aplikasi Anda. Memilih item di sidebar memungkinkan orang menavigasi
ke konten tertentu. Misalnya, bar samping di Mail menampilkan daftar semua kotak
mail. Orang dapat memilih kotak surat untuk mengakses daftar pesannya, dan memilih
pesan tertentu untuk ditampilkan di panel konten.
1) Terapkan tampilan yang benar ke sidebar.
Untuk membuat sidebar, gunakan tampilan sidebar dari tata letak daftar
tampilan koleksi.
2) Gunakan sidebar untuk mengatur informasi di tingkat aplikasi.
Sidebar adalah cara yang baik untuk meratakan hirearki informasi Anda
dan menyediakan akses ke beberapa kategori atau informasi secara bersamaan.
Gunakan sidebar untuk navigasi cepat ke bagian – bagian utama aplikasi atau
koleksi tingkat atas seperti folder.
3) Jika memungkinkan, biarkan orang menyesuaikan konten sidebar  agar orang
dapat cepat mengakses konten yang mereka sukai.
4) Jangan mencegah orang menyembunyikan sidebar.
5) Buat judul di sidebar dengan singkat dan jelas.
6) Secara umum, jangan mengekspos lebih dari dua tingkat hirearki dalam sidebar.
Jika hirearki data lebih dari dua tingkat, gunakan tampilan daftar di kolom
tambahan dari interface tampilan terpisah.
4. Status Bars

65
 Status bar memiliki letak di sepanjang tepi atas layar dan menampilkan informasi
yang berguna tentang status perangkat saat ini, seperti waktu, operator seluler, baterai,
dll. Informasi tersebut yang ditampilkan di bar status bervariasi tergantung pada
perangkat dan konfigurasi sistem.
1) Gunakan status bar yang disediakan sistem.
2) Koordinasi gaya status bar dengan desain aplikasi Anda.
Gaya visual teks dan indikator status bar terang atau gelap, dan dapat
disetel secara global untuk aplikasi Anda atau satu per satu untuk layar yang
berbeda. Status bar gelap bekerja dengan baik di atas konten berwarna terang,
begitu juga sebaliknya.
3) Konten yang tidak jelas di bawah status bar.
Jaga agar status bar dapat dibaca dan jangan menyiratkan bahwa konten di
baliknya bersifat interaktif. Ada beberapa teknin umum untuk melakukan ini:
 Gunakan bar navigasi di aplikasi Anda, yang secara otomatis
menampilkan background status bar dan memastikan bahwa konten tidak
muncul di bawah status bar.
 Menampilkan gambar kustom, seperti gradien atau warna yang solid di
background status bar.
 Tempatkan tampilan buram di belakang status bar.
4) Pertimbangkan untuk menyembunyikan sementara status bar saat menampilkan
media layar penuh.
Sembunyikan sementara status bar agar tidak menganggu pengguna dan
hal tersebut dapat memberikan pengalaman yang lebih imersif.
5) Hindari menyembunyikan status bar secara permanen.
Hal tersebut dapat menyulitkan pengguna, karena mereka harus keluar dari
aplikasi Anda untuk memeriksa waktu atau yang lainnya. Izinkan orang dapat
menampilkan kembali status bar yang sudah disembunyikan.
5. Tab Bars
Tab bars biasanya muncul di bagian bawah layar aplikasi dan memberikan
kegunaan untuk beralih dengan cepat di antara berbagai bagian aplikasi. Tab bar dapat
berisi sejumlah tab, tetapi jumlah tab yang terlihat bervariasi berdasarkan ukuran dan

66
orientasi perangkat. Biasanya tab bar tembus cahaya karena memiliki warna yang sama
dengan background, dapat mempertahankan ketinggian yang sama di semua orientasi
layar, dan tersembunyi saat papan ketik ditampilkan.
1) Secara umum, gunakan tab bar untuk mengatur informasi di tingkat aplikasi.
Tab bar adalah cara yang baik untuk meratakan hirearki informasi Anda
dan memberikan akses ke beberapa kategori atau mode infromasi sekaligus.
2) Gunakan tab bar hanya untuk navigasi.
Tombol tab bar tidak boleh digunakan untuk melakukan tindakan. Jika
Anda perlu memberikan control yang bekerja pada elemen dalam tampilan saat
ini, gunakan toolbar sebagai gantinya.
3) Hindari memiliki terlalu banyak tab.
Karena jika terlalu banyak tab maka akan mengurangi area yang dapat
diketuk untuk memilih tab yang membuatnya lebih sulit menemukan informasi.
Sertakan tab yang penting saja dan gunakan tab minimum yang diperlukan untuk
hirearki informasi Anda. Tab yang terlalu sedikit juga dapat membuat interface
Anda tampak terputus.
4) Jangan menyembunyikan tab bar saat orang bernavigasi ke area berbeda di
aplikasi Anda.
Tab bar memungkinkan navigasi global untuk aplikasi Anda, jadi harus
tetap terlihat. Pengecualian untuk tampilan modal, karena tampilan modal
memberi orang pengalaman terpisah yang mereka hilangkan setelah selesai, itu
bukan bagian dari keseluruhan navigasi di aplikasi Anda.
5) Jangan menghapus atau menonaktifkan tab jika fungsinya tidak tersedia.
Pastikan semua tab selalu diaktifkan dan jelaskan mengapa konten tab
tidak tersedia.
6) Selalu ganti konteks dalam tampilan terlampir.
Agar interface Anda tetap dapat terdeteksi, memilih tab harus selalu
memengaruhi tampilan yang lansgung dilampirkan ke tab bar, bukan tampilan
lain di layar.
7) Pastikan ikon tab bar konsisten dan seimbang secara visual.
8) Gunakan lencana untuk berkomunikasi dengan tidak mencolok.

67
 Anda dapat menampilkan lencana (oval merah berisi teks putih dan angka
atau tanda seru) pada tab untuk menunjukkan bahwa informasi baru terkait
dengan tampilan atau mode tersebut.
6. Toolbar
Toolbar muncul di bagian bawah layar apliksi dan berisi tombol untuk melakukan
tindakan yang relevan dengan tampilan atau konten saat ini di dalamnya. Biasanya
toolbar tembus cahaya, memiliki warna yang sama dengan background, dan sering kali
tersembunyi saat orang sedang tidak membutuhkannya. Toolbar dapat dimunculkan
ketika orang mengetuk bagian bawah layar. Tab bar jua disembunyikan saat papan ketik
ada di layar.
1) Sediakan tombol toolbar yang relevan  tombol toolbar harus berisi perintah
yang sering digunakan dalam konteks saat ini.
2) Pertimbangkan apakah ikon atau tombol berjudul tepat untuk aplikasi Anda.
Ikon berfungsi dengan baik saat Anda membutuhkan lebih dari tiga
tombol toolbar. Jika kurang dari tiga tombol, teks terkadang bias lebih jelas.
3) Hindari menggunakan control tersegmentasi di toolbar.
Karena ini dapat mengakibatkan orang beralih konteks, sedangkan toolbar
dikhususkan untuk layar saat ini. Jika Anda perlu menyediakan cara untuk beralih
konteks, pertimbangkan untuk menggunakan tab bar sebagai gantinya.
4) Beri ruang yang cukup untuk tombol bertajuk teks.  tambahkan pemisah dengan
memasukkan spasi tetap di antara tombol.
2.4.8 Views
Tampilan adalah sebuah tampilan yang dirancang dengan desain agar dapat
mempermudah pengguna menggunakannya.

Berikut ada beberapa hal penjelasan mengenai tampilan, yaitu:

1. Action Sheets
Adalah tindakan gaya peringatan tertentu yang menyajikan dua atau tidak
lebih pemilihan yang terkait dengan konteks saat ini. Pada layar yang lebih kecil,
action sheets bergeser ke atas dari bawah layar.
2. Activity Views

68
 Activity adalah tugas, seperti menyalin, favotit, yang berguna dalam
konteks saat ini. Activity juga dapat melakukan tugas dengan segera, atau
meminta informasi lebih lanjut sebelum melanjutkannya. Sistem menyediakan
sejumlah aktifitas internal, termasuk including print, Message, dan AirPlay.
Tugas ini selalu muncul pertama kali dalam tampilan aktivitas dan tidak dapat di
ulang. Aktivitas untuk memberi orang akses ke layanan kustom atau tugas yang
dapat dilakukan aplikasi yang kita buat.
3. Alert
Notifikasi menyampaikan informasi penting terkait situs aplikasi atau
perangkat pengguna, dan sering kali meminta masukan. Peringatan terdiri dari
judul, pesan opsional, satu atau beberapa tombol, dan dapat dikonfigurasi ini,
tampilan visual dari peringatan bersifat statis dan tiddak dapat
disesuaikan.minimal notifikasi. Lansiran mengganggu pengalaman pengguna dan
hanya boleh digunakan dalam situasi penting seperti mengonfirmasi pembelian
dan tindakan merusak (seperti pengapusan), atau memberi tahu orang tentang
masalah. Pastikan setiap peringatan menawarkan informasi penting dan pilihan
yang berguna.
4. Collection
Mengelola sekumpulan konten yang teratur, seperti sekumpulan foto, dan
menyajikannya dalam tata letak yang dapat disesuaikan dan sangat visual. Karena
tidak memberlakukan format linear yang ketat, koleksi sangat cocok untuk
menampilkan item dengan ukuran yang bervariasi. Secara umum, koleksi ideal
untuk memamerkan konten berbasis gambar. Latar belakang dan tampilan
dekoratif lainnya secara opsional dapat diterapkan untuk membedakan subset item
secara visual.
5. Image Views
Menampilkan satu gambar atau urutan gambar animasi di atas latar
belakang transparan atau buram. Dalam tampilan gambar, gambar dapat
diperpanjang, diskalakan, ukurannya pas, atau disematkan ke lokasi tertentu.
6. Pages

69
 Pengontrol tampilan halaman menyediakan cara untuk mengimplementasi
navigasi linear antara halaman konten, seperti dalam dokumen, buku, notepad,
atau kalender. Pengontrol tampilan halaman menggunakan salah satu dari dua
gaya untuk mengelola transisi antara halaman.
7. Popovers
Adalah tampilan sementara yang muncul di atas konten lain dilayar saat
anda mengetuk komtrol atau di suatu area. Biasanya, popover menyertakan panah
yang menunjuk ke lokasi kemunculannya. Popovers bisa nonmodal atau modal.
Popover nonmodal ditutup dengan mengetuk bagian lain dari layar atau tombol
pada popover. Sebuah popover modal diberhentikan dengan menekan tombol
batal atau tombol lain pada popover. Saat popover terlihat, interaksi dengan
tampilan lain biasanya dinonaktifkan sampai popover ditutup.
8. Scroll Views
Memungkinkan pengguna untuk menjelajahi konten, seperti teks dalam dokumen
atau kumpulan gambar, yang lebih besar dari area yang terlihat. Saat orang
menggesek menjentik, menyeret, mengetuk, dan mencubit, tampilan gulir
mengikuti gerakan, menampilkan atau membesar konten dengan cara yang terasa
alami. Tampilan gulir itu sendiri tidak memiliki tampilan, tetapi menampilkan
indikator gulir sementara saat orang berinteraksi dengannya. Tampilan gulir juga
dapat dikonfirmasi untuk beroperasi dalam mode paging.
9. Split Views
Mengelola penyajian konten hierarki di tingkat atas aplikasi Anda.
Tampilan terpisah terdiri dari antarmuka dua atau tiga kolom yang
memperlihatkan kolom utama, kolom tambahan opsional, dan panel konten
sekunder. Perubahan di drive kolom utama, perubahan di kolom tambahan
opsional, yang memengaruhi konten itu sendiri. Tampilan terpisah berguna untuk
menavigasi beberapa tingkat hierarki konten, seperti melintasi kotak mail dan
pesan di Mail untuk melihat setiap pesan.
10. Tables
Menyajikan data sebagai daftar baris satu kolom bergulir yang dapat
dibagi menjadi beberapa bagian atau grup. Gunakan tabel untuk menampilkan

70
 informasi dalam jumlah besar atau kecil dengan bersih dan efisien dalam bentuk
daftar. Secara umum, tabel ideal untuk konten berbasis teks, dan sering kali
muncul sebagai alat navigasi di satu sisi tampilan terpisah, dengan konten terkait
ditampilkan di sisi yang berlawanan.
11. Text views
Menampilkan konten teks multiline dan bergaya. Tampilan teks bisa
setinggi apa pun dan memungkinkan pengguliran saat konten meluas ke luar
tampilan. Secara default, konten dalam tampilan teks diratakan ke kiri dan
menggunakan font sistem dalam warna hitam. Jika tampilan teks dapat diedit,
keyboard muncul saat Anda mengetuk di dalam tampilan.
12. Web Views
Memuat dan menampilkan konten web yang kaya, seperti HTML tersemat
dan situs web, langsung di dalam aplikasi Anda. Mail menggunakan tampilan
web, misalnya, untuk menampilkan konten HTML dalam pesan.

2.4.9 Controls
Control adalah bagian yang mengenai interaksi, berkerja dengan model, memilih view
yang digunakan

Berikut ada beberapa hal penjelasan mengenai tampilan, yaitu:

1. Buttons
Memulai tindakan khusus aplikasi, memiliki latar belakang yang dapat
disesuaikan, dan dapat menyertakan judul atau ikon. Sistem menyediakan
sejumlah gaya tombol standar untuk sebagian besar kasus penggunaan. Anda juga
dapat mendesain tombol kustom sepenuhnya. System Buttons sering muncul di
bilah navigasi dan bilah alat, tetapi dapat digunakan di mana saja. Tombol Info
mengungkapkan detail konfigurasi tentang suatu aplikasi, terkadang di belakang
tampilan saat ini, setelah membalik tampilan. Tombol Tambah Kontak untuk
menelusuri daftar kontak yang ada dan memilih satu untuk dimasukkan ke dalam
bidang teks atau tampilan lain.
2. Color Wells

71
 Adalah bidang warna menampilkan pemilih warna yang disediakan
sistem. Pemilih warna untuk memilih warna teks, bentuk, alat penandaan, dan
elemen lainnya.
3. Context Menus
Menampilkan menu konteks dapat menggunakan gerakan sentuh dan
tahan yang ditentukan sistem atau 3D Touch (Sentuhan 3D dapat membuat menu
konteks muncul lebih cepat). Saat terbuka, menu konteks menampilkan pratinjau
item dan mencantumkan perintah yang bertindak padanya.
4. Edit Menus
Menyentuh dan menahan atau mengetuk dua kali elemen di bidang teks,
tampilan teks, tampilan web, atau tampilan gambar untuk memilih konten dan
menampilkan opsi edit, seperti Salin dan Tempel.

5. Labels
Menjelaskan elemen antarmuka pada layar atau memberikan pesan
singkat. Label tidak dapat mengedit, terkadang mereka dapat menyalin. Label
dapat menampilkan teks statis dalam jumlah berapa pun, tetapi sebaiknya dibuat
pendek.
6. Page Controls
Menunjukkan posisi halaman saat ini dalam daftar halaman datar. Itu
muncul sebagai rangkaian titik indikator kecil, mewakili halaman yang tersedia
sesuai urutan pembukaannya. Titik padat menunjukkan halaman saat ini. Secara
visual, titik-titik ini selalu memiliki jarak yang sama, dan terpotong jika terlalu
banyak yang muncul di layar. Pengguna dapat mengetuk tepi depan atau tepi
belakang dari kontrol halaman untuk mengunjungi halaman berikutnya atau
sebelumnya, tetapi mereka tidak dapat mengetuk titik tertentu untuk pergi ke
halaman tertentu. Navigasi selalu terjadi secara berurutan, biasanya dengan
menggesek halaman ke satu sisi.
7. Pickers
Adalah alat yang dapat menampilkan satu atau beberapa daftar nilai
berbeda yang dapat digulir yang dapat dipilih pengguna. Seperti memilih hari

72
 dalam tampilan kalender atau memasukkan tanggal dan waktu menggunakan
keypad numerik (untuk panduan, lihat Pemilih Tanggal). Kedua jenis pemetik
memudahkan pengguna untuk memasukkan informasi dengan memilih nilai
tunggal atau multi bagian.
8. Progress Indicator
Jangan membuat pengguna duduk sambil menatap layar statis menunggu
aplikasi Anda memuat konten atau melakukan operasi pemrosesan data yang
lama. Gunakan indikator aktivitas dan bilah kemajuan untuk memberi tahu para
pengguna bahwa aplikasi Anda tidak macet dan memberi mereka gambaran
tentang berapa lama mereka akan menunggu. Indikator aktivitas berputar saat
tugas yang tidak dapat diukur, seperti memuat atau menyinkronkan data
kompleks. Progress Bars menyertakan lintasan yang mengisi dari kiri ke kanan
untuk menunjukkan kemajuan tugas dengan durasi yang diketahui. Progress bar
tidak interaktif, meskipun seringkali disertai dengan tombol untuk membatalkan
operasi terkait.
9. Pull Down Menus
Tombol dapat menampilkan menu tarik-turun yang mencantumkan item
atau tindakan yang dapat dipilih pengguna.
10. Refresh Content Control
Dimulai secara manual untuk segera memuat ulang konten, biasanya
dalam tampilan tabel, tanpa menunggu pembaruan konten otomatis berikutnya
terjadi. Kontrol penyegaran adalah jenis indikator aktivitas khusus,
disembunyikan secara default, dan menjadi terlihat saat menyeret ke bawah pada
tampilan untuk dimuat ulang. Di Mail, misalnya, Anda dapat menyeret daftar
pesan Inbox ke bawah untuk memeriksa pesan baru.
11. Segmented Controls
Adalah kumpulan linier dari dua atau lebih segmen, yang masing-masing
berfungsi sebagai tombol yang saling eksklusif. Di dalam kontrol, semua segmen
memiliki lebar yang sama. Seperti tombol, segmen dapat berisi teks atau gambar.
Kontrol tersegmentasi sering digunakan untuk menampilkan tampilan yang

73
 berbeda. Di Peta, misalnya, kontrol tersegmentasi memungkinkan Anda beralih
antara tampilan Peta, Transit, dan Satelit.
12. Sliders
Adalah trek horizontal dengan kontrol yang disebut ibu jari, yang dapat
Anda geser dengan jari Anda untuk berpindah antara nilai minimum dan
maksimum, seperti tingkat kecerahan layar atau posisi selama pemutaran media.
Saat nilai penggeser berubah, bagian lintasan antara nilai minimum dan jempol
terisi dengan warna. Penggeser secara opsional dapat menampilkan ikon kiri dan
kanan yang menggambarkan arti dari nilai minimum dan maksimum.
13. Steppers
Adalah kontrol dua segmen yang digunakan untuk menambah atau
mengurangi nilai inkremental. Secara default, satu segmen stepper menampilkan
simbol plus dan segmen lainnya menampilkan simbol minus. Simbol-simbol ini
dapat diganti dengan gambar kustom, jika diinginkan.
14. Switches

Adalah pengalih visual antara dua status yang sering eksklusif aktif dan
nonaktif. Sakelar dimaksudkan untuk digunakan dalam tabel, seperti dalam daftar
pengaturan yang dapat diaktifkan dan dinonaktifkan. Jika Anda memerlukan
fungsi serupa di toolbar atau bilah navigasi, gunakan tombol sebagai gantinya,
dan sediakan dua ikon berbeda yang mengomunikasikan status. Sakelar hidup
atau mati. Memberikan label yang mendeskripsikan status ini berlebihan dan
mengacaukan antarmuka. Sakelar sering kali memengaruhi konten lain di layar.
Mengaktifkan sakelar Mode Pesawat di Pengaturan, misalnya, menonaktifkan
pengaturan tertentu lainnya, seperti Seluler dan Hotspot Pribadi. Menonaktifkan
sakelar Wi-Fi di Pengaturan> Wi-Fi menyebabkan jaringan yang tersedia dan opsi
lain menghilang.

15. Text Fields

Adalah bidang dengan tinggi tetap satu baris, sering kali dengan sudut
membulat, yang secara otomatis menampilkan keyboard saat pengguna
mengetuknya. Dapat menampilkan gambar khusus di sisi kiri atau kanan bidang

74
 teks, atau Anda dapat menambahkan tombol yang disediakan sistem, seperti
tombol Bookmark. Secara umum, gunakan ujung kiri bidang teks untuk
menunjukkan tujuan bidang dan ujung kanan untuk menunjukkan adanya fitur
tambahan, seperti bookmark.

2.4.10 Extensions
Extension adalah nama keterangan pada suatu file, yaitu tiga huruf setelah titik pada
nama file. Extension akan menunjukkan jenis file tersebut. Dalam sistem operasi komputer,
ekstensi nama file adalah tambahan opsional untuk nama file dalam bentuk akhiran ".xxx" di
mana "xxx" mewakili sejumlah karakter alfanumerik tergantung pada sistem operasi. Ekstensi
nama file memungkinkan format file dideskripsikan sebagai bagian dari nama sehingga
pengguna dapat dengan cepat memahami jenis filenya tanpa harus "membuka" atau mencoba
menggunakannya. Ekstensi nama file juga membantu program aplikasi mengenali apakah suatu
file adalah tipe yang dapat dikerjakannya.
Berikut ini ada beberapa hal yang berada di dalam extension dan penduan – panduan
yang dapat dilakukan agar dapat membuat extension dengan baik, yaitu:
1. Custom Keyboards
Anda dapat memberikan izin custom keyboard dengam membuat ekstensi
keyboard yang menggantikan keyboard standar. Setelah orang mengaktifkan custom
keyboard di pengaturan, mereka dapat menggunakannya untuk entri teks dalam aplikasi
apa pun, kecuali saat mengedit bidang teks aman dan bidang nomor telepon.
1) Pastikan Anda benar – benar membutuhkan custom keyboard.
Jika Anda ingin menyediakan custom keyboard untuk digunakan orang –
orang hanya saat mereka berada di aplikasi Anda, pertimbangkan untuk membuat
tampilan masukkan custom.
2) Memberikan cara yang jelas dan mudah untuk beralih antara keyboard.
3) Jangan menduplikasi fitur keyboard yang disedaiakan sistem.
4) Pertimbangkan untuk memberikan tutorial keyboard di aplikasi Anda.
Jadikan proses orientasi lebih mudah dengan memberikan petunjuk
penggunaan di aplikasi Anda. Beri tahu orang – orang cara mengaktifkan

75
 keyboard Anda, mengaktifkannya selama entri teks, menggunakannya, dan
beralih kembali ke keyboard standar.
5) Jadikan fungsionalitasnya jelas.
6) Mainkan suara klik keyboard standar selama mengetik.
Suara klik keyboard memberikan umpan balik yang dapat didengar saat
pengguna mengetuk tombol pada keyboard. Mengetuk custom control di tampilan
masukkan Anda harus menghasilkan suara ini juga.
7) Berikan tampilan aksesori masukkan jika perlu.
Di Numbers, tampilan aksesori input membantu orang memasukkan
penghitungan standar atau custom.
2. File Providers
Ekstensi penyedia file menerapkan interface khusus untuk mengimpor,
mengekspor, membuka, atau memindahkan dokumen aplikasi dari dalam aplikasi lain di
sistem. Saat ekstensi penyedia file dimuat, interface ditampilkan dalam tampilan modal
yang berisi bar navigasi.
1) Saat pengguna membuka atau mengimpor file, tampilkan hanya dokumen dan
infromasi khusus konteks.
Selain itu, pastikan juga untuk membuat daftar informasi lain yang
mungkin berguna juga, seperti tanggal modifikasi, ukuran, dan apakah dokumen
lokal atau bukan.
2) Biarkan orang memilih tujuan saat mengekspor dan memidahkan dokumen.
Kecuali aplikasi Anda menyimpan dokumen dalam satu direktori, biarkan
pengguna menavigasi ke tujuan tertentu dalam hirearki direktori Anda.
Pertimbangkan juga menyediakan cara untuk menambahkan subdirektori baru.
3) Jangan berikan bar navigasi custom.
Menyediakan bar navigasi kedua akan membingungkan dan
menghabiskan ruang di konten Anda.
3. Messaging
Aplikasi iMessage dan sticker packs adalah ekstensi perpesanan yang
memungkinkan orang berbagi konten dengan teman, berkomunikasi secara ekspresif, dan
berbagi pengalaman kolaboratif.

76
 Aplikasi iMessage memberikan pengalaman interaktif dalam konteks percakapan
pesan. Aplikasi ini memungkinkan orang untuk berbagi data dan media, berkaloborasi
dalam tugas bersama, dan bermain games satu sama lain.
1) Rancang interface yang inuitif.
Jika aplikasi iMessage Anda menyediakan konten statis, seperti teks, foto,
atau video, pastikan mudah bagi orang untuk menjelajahi dan memilih item untuk
dimasukkan ke dalam percakapan. Jika aplikasi Anda interaktif seperti
multiplayer game pastikan fungsinya berguna dan dapat dipahami.
2) Sediakan konten yang terfokus  jangan mencoba merancang satu aplikasi yang
menggabungkan stiker dan berbagi tumpangan.
3) Berikan pengalaman kolaboratif yang menyenangkan.
Aplikasi iMessage biasanya digunakan dalam konteks percakapan
informal yang serba cepat antara dua orang atau lebih. Manfaatkan lingkungan ini
secara kreatif untuk mendorong partisipasi melalui berbagi, mengedit, atau
menambah konten.
4) Sorot konten aplikasi iOS yang menarik.
Pikirkan tentang jenis informasi yang mungkin ingin dibagikan orang dan
bagaimana mereka dapat berinteraksi dengan aplikasi Anda dalam konteks
percakapan aktif.
5) Sisipkan konten untuk mengindari pemangkasan.
Konten aplikasi Anda disajikan dengan gelembung pesan dengan sudut
membulat, jadi jangan letakkan informasi penting di sudut tersebut.
6) Bedakan tampilan ringkas dan luas.
Tampilan ini harus membedakan aplikasi Anda dari aplikasi lain secara
visual dan memberikan akses ke fitur yang sering digunakan. Orang juga dapat
membuka aplikasi Anda dalam tampilan yang diperluas untuk mengakses fitur
lanjutan atau melihat lebih banyak opsi sekaligus.
7) Izinkan pengeditan teks dalam tampilan yang diperluas saja.
Stiker adalah gambar atau animasi yang dapat dikirim atau ditempatkan pada
pesan, foto, dan yang lainnya untuk menambahkan penekanan dan mengkomunikasikan
emosi tanpa mengetik.

77
 1) Desain yang ekspresif.
Pertimbangkan untuk menggabungkan citra, kata, dan frasa untuk
menambahkan dimensi baru pada percakapan agar dapat menyampaikan suasana
hati dan seaksi secara visual.
2) Berpikirlah secara global  bidik stiker yang memiliki daya tarik internsional
yang luas.
3) Gunakan nama gambar deskriptif atau berikan label teks alternative.
Meskipun tidak terlihat di layar, nama gambar dan label teks alternative
memungkinkan VoiceOver mendeskripsikan stiker dengan suara, membuat
navigasi lebih mudah bagi orang dengan gangguan penglihatan.
4) Tambahkan vitalis melalui animasi.
5) Menguji kemungkinan penempatan  pengguna dapat mengatur skala, memutar,
dan menempelkan stiker di bagian percakapan.
6) Pertimbangkan untuk menggunakan warna yang cerah dan transparansi.
Warna yang cerah dapat menambah kekayaan dan keseruan dalam
percakapan, sedangkan transparansi memungkinkan penempatan stiker yang
bermakna ke dalam foto, pesan, dan stiker lainnya.
7) Ukuran stiker  pilih ukuran yang paling sesuai dengan konten Anda dan
persiapkan semua stiker Anda pada ukuran tersebut.
8) Skala stiker dengan tepat  yang terbaik adalah memberikan stiker prescaled
untuk kualitas dan kinerja yang optimal.
9) Perhatikan batasan ukuran file  untuk efisiensi, stiap stiker tidak boleh melebihi
500 KB.
iMessege app dan sticker pack memerlukan ikon aplikasi yang dapat dikenali.
1) Buat background tetap sederhana dan berikan satu titik fokus.
2) Jaga agar sudut ikon tetap persegi.
3) Berikan ikon dengan ukuran yang berbeda.
4. Photo Editing
Ekstensi pengeditan foto memungkinkan orang mengubah foto dan video dalam
aplikasi dengan menerapkan filter atau membuat perubahan lain. Untuk mengakses
ekstensi pengedtian foto, foto harus dalam mode edit. Saat dalam edit, mengetuk ikon

78
 ekstensi di toolbar akan menampilkan menu tindakan dari ekstensi pengeditan yang
tersedia.
1) Konfirmasikan pembatalan pengeditan.
Jika seseorang menekan tombol batal, jangan langsung membuang
perubahannya. Minta mereka untuk mengonfirmasi bahwa mereka benar – benar
ingin membatalkannya, dan beri tahu mereka bahwa setiap hasil akan hilang
setelah pembatalan.
2) Jangan berikan bar navigasi custom  menyediakan bar navigasi kedua akan
membingungkan dan menghabiskan ruang untuk konten yang sedang diedit.
3) Izinkan orang untuk melihat hasil edit.
4) Gunakan ikon aplikasi Anda untuk ikon ekstensi pengeditan foto  hal ini
menambah keyakinan bahwa ekstensi sebenarnya disediakan oleh aplikasi Anda.
5. Sharing and Actions
Ekstenti sharing atau berbagi memberikan cara yang nyaman untuk berbagi
informasi dari konteks saat ini dengan aplikasi, akun media social, dan layanan lainnya.
Ekstensi action atau tindakan memungkinkan orang memulai tugas khusus konten, seperti
menambahkan bookmark, menyalin link, atau menyimpan gambar. Orang – orang
mengakses ekstensi berbagi dan ekstensi tindakan dengan mengetuk tombol tindakan di
aplikasi untuk menampilkan tampilan aktivitas. Tampilan aktivitas hanya menampilkan
ekstensi yang relevan dengan konteks saat ini. Dalam tampilan aktivit, ekstensi berbagi
dicantumkan di atas ekstensi tindakan.
1) Aktifkan satu tugas terfokus  ekstensi bukanlah aplikasi mini. Ini melakukan
tugas dengan cakupan sempit terkait dengan konteks saat ini.
2) Buat interface yang familiar.
Untuk ekstensi berbagi, tampilan komposisi yang disediakan sistem sudah
biasa dan memberikan pengalaman berbagi yang konsisten di seluruh sistem.
Untuk ekstensi tindakan, sertakan nama aplikasi Anda atau rancang interface yang
dapat dikenali dan terasa seperti ekstensi alami dari aplikasi Anda.
3) Sederhanakan dan batasi interaksi.

79
 Ekstensi terbaik memungkinkan orang melakukan tugas hanya dalam
beberapa langkah. Misalnya, ekstensi berbagi mungkin langsung memposting
gambar kea kun media social hanya dengan satu ketukan.
4) Hindari menempatkan tampilan modal di atas ekstensi Anda.
5) Gunakan aplikasi utama Anda untuk menunjjukan kemajuan operasi yang
panjang.
Tampilan aktivitas harus segera ditutup setelah memulai berbagi atau
tindakan. Tugas yang memakan waktu akan berlanjut di background dan aplikasi
utama Anda harus menyediakan beberapa cara untuk memeriksa status tugas ini.
Jangan gunakan notifikasi untuk pemberitahuan ini.
6) Gunakan gambar template untuk ikon ekstensi tindakan.
Gunakan warna hitam dan putih dengan transparansi dan antialiasing yang
sesuai dan jangan menyertakan bayangan jatuh. Gambar template harus
dipusatkan di area berukuran sekitar 70px x 70px.

80
 BAB III

PENUTUP
3.1 Kesimpulan
Human Interface Guidelines atau biasa disingkat HIG adalah rekomendasi dan saran yang
dimaksudkan untuk membantu pengembang membuat aplikasi yang lebih baik. Pengembang
terkadang dengan sengaja memilih untuk melanggarnya jika menurut mereka pedoman tersebut
tidak sesuai dengan aplikasi mereka, atau pengujian kegunaan menunjukkan keuntungan dalam
melakukannya. Tetapi pada gilirannya, organisasi yang menerbitkan HIG mungkin menahan
dukungan untuk aplikasi tersebut.
Dalam Apple Human Interface Guidelines, banyak sekali hal yang ada dilamanya, seperti
prinsip, elemen, komponen, panduan, serta pedoman yang bisa digunakan oleh para pembuat
aplikasi untuk bisa menghasilkan aplikasinya menjadi aplikasi yang dapat disukai dan banyak
digunakan oleh orang banya, terutama iOS. Selain itu juga, kita dapat belajar mengenai apa – apa
saja yang nantinya akan terjadi saat kita membuat aplikasi.

81
 DAFTAR PUSTAKA
2014. Applications Architecture. URL: https://en.wikipedia.org/wiki/Applications_architecture .
Diakses tanggal 20 Desember 2020.

Rouse, Margaret. Application Architecture. URL:

https://searchapparchitecture.techtarget.com/definition/application-architecture . Diakses tanggal
20 Desember 2020.

App Architecture. URL: https://developer.apple.com/design/human-interface-guidelines/ios/app-

architecture/launching/ . Diakses tanggal 20 Desember 2020.

Jhanwar, Muskan. 2020. What is Visual Design?. URL: https://uxdesign.cc/what-is-visual-

design-2ac385f9b279 . Diakses tanggal 21 Desember 2020.

Ye, Summer. 2017. What is The Visual Design?. URL:

https://www.mockplus.com/blog/post/what-is-the-visual-design . Diakses tanggal 21 Desember

Visual Design. URL: https://developer.apple.com/design/human-interface-guidelines/ios/visual-

design/adaptivity-and-layout/ . Diakses tanggal 21 Desember 2020.

Bars. URL: https://developer.apple.com/design/human-interface-guidelines/ios/bars/navigation-

bars/ . Diakses tanggal 28 Desember 2020.

Extensions. URL: https://developer.apple.com/design/human-interface-

guidelines/ios/extensions/custom-keyboards/ . Diakses tanggal 28 Desember 2020.

FAQ: Mozilla and Firefox – GNOME, Project. 2020. Human Interface Guidelines. URL:
https://en.wikipedia.org/wiki/Human_interface_guidelines . Diakses tanggal 28 Desember 2020.

Handy, Ryan. 2019. Apple’s Human Interface Guidelines. URL: https://medium.com/belajar-

desain/apples-human-interface-guidelines-1fd9d2e77db7 . Diakses tanggal 28 Desember 2020.

Ramachandran, Vivek. 2018. Understanding a Human Interface Guidelines for Development.

URL: https://medium.com/nyc-design/understanding-a-human-interface-guidelines-for-
development-c95c6303f299 . Diakses tanggal 28 Desember 2020.

82
Human Interface Guidelines, Kemampuan Sistem URL :
https://muhammadghazali.wordpress.com/tag/kemampuan-dari-sistem-informasi/. Diakses
Tanggal 29 Desember 2020

Human Interface Guideline (Themes) , URL : https://developer.apple.com/design/human-

interface-guidelines/ios/overview/themes/

Human Interface Guidelines , User Interaction,URL : https://developer.apple.com/design/human-

interface-guidelines/ios/user-interaction/

Human Interface Guidelines, System Capabilities, URL :

https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/

83