Galeri ilustrasi adalah satu sumber *file* Figma untuk menyimpan semua aset ilustrasi yang telah dibuat. Aset-aset ilustrasi di dalam galeri dapat digunakan ulang di banyak medium dengan kebutuhan dan konteks yang sesuai.

![Group 40092](//images.ctfassets.net/jf73m8fzk99f/ksbazzPbloOqi3uGHWLui/c3d05f935b625bb1799e0532a9d40d59/Group_40092.png)

Galeri Ilustrasi

Tooltip

Toast

Text Field

Select

Pagination

Loading

List

Chips

Checkbox

Button

Banner

Avatar

Popover

Link

Breadcrumbs

Accordion

Text Expander

Search

Stepper

Empty State

Modal

Header

Table

Radio

Tabs

Spacing

Elevasi

Tipografi

Warna

Token

Ilustrasi

Penulisan

Desain

Peran Ilustrasi

Cara Menggambar: Ilustrasi Spot dan Ilustrasi Empty State

Tipe Ilustrasi

Palet Warna Ilustrasi

Prinsip Ilustrasi

Cara Menggambar: Ilustrasi Hero

Inklusivitas

Gaya Bahasa

Penyesuaian konten substansi

Pengguna tidak membaca keseluruhan tulisan

Pantun

Pengantar

Prinsip Komunikasi

![Tooltip - container](//images.ctfassets.net/jf73m8fzk99f/6c1ZgCNIq0D91Y4xlmtYHD/fa456353de72b9e7393d56e83f586a14/Tooltip_-_container.png)

## **Anatomi**

![Tooltip - Anatomi](//images.ctfassets.net/jf73m8fzk99f/NP3tlxBdXFM4OAbXUikdQ/f93c6884a7ab37cfc054db0ed160a33b/Tooltip_-_Anatomy.png)

## **Jenis dan variasi**

### Tooltip panah kanan

Digunakan untuk penempatan Tooltip yang muncul di bagian kiri suatu elemen.

![Tooltip - container2](//images.ctfassets.net/jf73m8fzk99f/3hT4IlhfJx5QeybMaiFCcx/c253c280e28757e2580e6e68d80f2d4b/Tooltip_-_container2.png)

### Tooltip panah kiri

Digunakan untuk penempatan Tooltip yang muncul di bagian kanan suatu elemen.

![Tooltip - container3](//images.ctfassets.net/jf73m8fzk99f/5wrx8LpF8O4wDQNoNWSqmF/d8ad2d8dd19dfdb4ed30392e2a5bed4b/Tooltip_-_container3.png)

### Tooltip panah bawah

Digunakan untuk penempatan Tooltip yang muncul di bagian atas suatu elemen.

![Tooltip - container4](//images.ctfassets.net/jf73m8fzk99f/6XzRbxSv5drOOUTbvBbrgP/79f3938b7cedf3d15adbdc29c20bc51d/Tooltip_-_container4.png)

### Tooltip panah atas

Digunakan untuk penempatan Tooltip yang muncul di bagian bawah suatu elemen.

![Tooltip - container5](//images.ctfassets.net/jf73m8fzk99f/605Deqc42hn7boCEq2SwzW/68b4be3027e3688ee060344b09cd7fcc/Tooltip_-_container5.png)

## ***Behaviors***

Tooltip hanya akan muncul jika ada sebuah aksi yang dilakukan terhadap suatu elemen, seperti **Hover, Focus,** atau **Tap**.

## **Panduan penggunaan**

### Gunakan Tooltip untuk informasi yang sifatnya sekunder/penjelas dari sebuah elemen

Jangan gunakan Tooltip untuk informasi yang sifatnya penting/utama.

![Group 39960](//images.ctfassets.net/jf73m8fzk99f/4j6LoaQr0d0SHrur6TEDHV/5a45e8cb4783bab69202e06a2a8e2549/Group_39960.jpg)

### Harus dipasangkan dengan suatu elemen (tidak berdiri sendiri)

Tooltip merupakan informasi tambahan sehingga kemunculannya harus dipicu oleh suatu interaksi pada sebuah elemen utama, tidak langsung muncul.

![Group 7](//images.ctfassets.net/jf73m8fzk99f/4TlQCUnc7Ao6VkJrjKrTSq/408ca7b12542060ad89888b03d46da67/Group_7.jpg)

### Sifatnya tidak permanen

Tooltip tidak boleh menjadi distraksi dalam sebuah tampilan tatap muka, sehingga Tooltip ini hanya dapat keluar jika dipicu oleh sebuah aksi tertentu, dan bisa hilang dengan sendirinya.

## **Panduan penulisan**

![Tooltip - PT](//images.ctfassets.net/jf73m8fzk99f/2s2dI8jeM68lspOmfmqfml/e7910062e0f81406ae7cb796ebaced96/Tooltip_-_PT.png)

### Cukup satu atau dua kalimat

Untuk menyampaikan informasi, cukup berikan informasi inti dengan kata-kata inti. Jelaskan fungsi atau tindakan elemen dengan jelas dan sederhana.

### Gunakan *sentence case*

Hanya huruf di awal kalimat yang ditulis kapital, serta hindari tanda titik “.” di akhir kalimat.

Dara Tasha

Designer

Muhammad Faris Fatahillah

Writer

Komponen teks yang bertujuan untuk memberikan informasi tambahan secara singkat dan kontekstual ketika pengguna melakukan interaksi tertentu, seperti hover, focus, atau tap pada sebuah elemen.

![Toast - main image](//images.ctfassets.net/jf73m8fzk99f/1EUqM7cUI1UeLcNU9yKhsn/1cd6039a6cabc670f67fb4310ef8b8f7/Toast_-_main_image.png)

## **Anatomi**

![Toast - Anatomy](//images.ctfassets.net/jf73m8fzk99f/5lwcNtdizEqcCO8F8syP7T/68c5a7d4f4bbc9f96620a3c006b66471/Toast_-_Anatomy.png)

## **Jenis dan variasi**

### Action link

Toast dengan Action Link dapat digunakan ketika ada aksi spesifik yang dapat diambil oleh user sebagai tindak lanjut dari informasi yang ditampilkan.

![Toast - Action Variant](//images.ctfassets.net/jf73m8fzk99f/2GILq4bk8EpmeUHdMcRXfF/9feed43dfd9452eca42376a9359dcdae/Toast_-_Action_Variant.png)

### Default

Digunakan untuk aksi yang bersifat netral.  

![Toast - Default](//images.ctfassets.net/jf73m8fzk99f/2vntaNOow5RwhNCvQ8JWgQ/5a8e82a719ec0a6ae9d456e40ec3c4e2/Toast_-_Default.png)

### Success

Digunakan untuk menginformasikan aksi yang berhasil. Icon ditambahkan untuk mempertegas visual bahwa aksi yang dilakukan telah berhasil.

![Toast - Success](//images.ctfassets.net/jf73m8fzk99f/10pNU2UIBbJBBEi1iQb5QX/c13c3ac16eb6b69df438bb87294dca18/Toast_-_Success.png)

## ***Behaviors***

### Durasi

Untuk memastikan keterbacaan, Toast memiliki durasi muncul selama minimal 4 detik.

### *Dismissing Toast*

Toast akan hilang dengan sendirinya setelah durasi waktu yang ditentukan. Selain itu, pengguna dapat menghilangkan Toast secara manual dengan interaksi *swipe up* untuk *mobile*.

### *Multiple Toast*

Jika aksi yang dilakukan pengguna memunculkan Toast berulang, maka Toast baru akan menggantikan Toast yang sebelumnya.

## **Panduan penggunaan**

### Gunakan Toast untuk informasi yang singkat dan tidak membutuhkan aksi mendesak

Toast merupakan komponen desain yang akan hilang setelah durasi tertentu. Jika ingin memberikan informasi/konten yang lebih panjang atau ada aksi mendesak yang harus dilakukan pengguna, disarankan untuk menggunakan komponen yang lebih prominen seperti Banner. Pastikan tombol aksi dapat diakses di tempat lain selain Toast dan berisi aksi yang umum. Jika tombol berisi aksi yang spesifik, diskusikan apa info tersebut tepat ditempatkan di Toast atau justru di komponen lain.

### Peletakan di tengah layar

![Toast - Placement](//images.ctfassets.net/jf73m8fzk99f/7BbJla4hJMaLIwkGnvFfne/9b05130de15ccedf4838144df0ab5852/Toast_-_Placement.png)

### Jumlah baris

![Do Donts Toast](//images.ctfassets.net/jf73m8fzk99f/4Dq4GUDcriBkC0qUhRN9aN/084f3fa1dc9ea98ffdc49c994dbfb0ad/Do_Donts_Toast.jpg)

## **Panduan penulisan**

Komponen Toast menyediakan cara untuk menampilkan pesan sementara yang informatif kepada pengguna. Komponen ini dapat digunakan untuk menunjukkan pesan keberhasilan, pesan kesalahan, atau jenis pesan lainnya. Komponen Toast juga dapat dikatakan sebagai cara langsung, singkat, dan tidak mengganggu untuk menginformasikan pengguna tentang hasil tindakan mereka. Berikut panduan menulis untuk komponen ini.

### Perhatikan batas karakter

Toast biasanya muncul selama 4 detik, setelah itu otomatis hilang. Sehingga, pastikan untuk memberikan pesan yang ringkas dan sebaiknya tidak melebihi batas karakter berikut ini.

1. Untuk versi mobile, komponen memiliki ruang yang kecil:  
   1. 1 baris maksimal 64 karakter. Lebih dari itu akan menjadi 2 baris.  
   2. 2 baris maksimal 84 karakter. Lebih dari itu akan terpotong dengan elipsis (“...”).  
2. Untuk versi desktop, tidak ada batas karakter. Namun, lebih singkat lebih baik.  
   1. 1 baris maksimal 66 karakter. Lebih dari itu akan menjadi 2 baris dan seterusnya.

### Tentukan jenis pesan

Penulisan Toast bergantung pada jenis pesannya, baik itu pesan informatif yang netral, pesan kesalahan, atau pesan keberhasilan.

### Pesan informatif

Pesan informatif biasanya menggunakan bentuk umum (*default*) dari Toast.

![Toast - PT](//images.ctfassets.net/jf73m8fzk99f/OhnkSvtjFsMkGYsApBj8T/d1e1e1af92681f5f3f0f453a969a5df5/Toast_-_PT.png)

Formula yang disarankan:   
*subjek \+ kata kerja (bisa disertai kata sifat) \+ keterangan opsional  \+ tanda titik*.

### Pesan kesalahan

Pesan kesalahan juga biasanya menggunakan bentuk umum (*default*) dari Toast.

![Toast - PT2](//images.ctfassets.net/jf73m8fzk99f/5au1zZ47kg0uAvzbO2hug4/11c2562441e47e2dfea43fcef9fb053c/Toast_-_PT2.png)

Formula yang disarankan:   
*“Gagal” \+ kata kerja \+ objek  \+ “Coba lagi” \+ tanda titik*.

### Pesan keberhasilan

Pesan keberhasilan biasanya menggunakan bentuk berhasil (*success*) dari Toast. Bentuk ini mencakup ikon centang untuk memberi tahu pengguna secara cepat bahwa aksi mereka berhasil.

![Toast - PT3](//images.ctfassets.net/jf73m8fzk99f/3N0clDxCaegdvFMHnFY5gY/91d8827498b49942a92a1484de9ee490/Toast_-_PT3.png)

Formula yang disarankan:   
*“Berhasil” \+ kata kerja \+ objek \+ tanda seru*.

### Pesan dengan tombol aksi

Komponen Toast memiliki **varian dengan tombol aksi** (*call to action*) seperti di bawah:

![Toast - PT4](//images.ctfassets.net/jf73m8fzk99f/3fByXJlRIBQuuKjhrIUjQ1/45e9bdaf781ce1a83b10001114f99a38/Toast_-_PT4.png)

Penulisan yang disarankan:

1. Pastikan tombol aksi mendukung pesan di Toast dan sebaiknya diawali dengan kata kerja  
2. Karena Toast hanya muncul sementara, pastikan tombol aksi dapat diakses di tempat lain selain Toast dan berisi aksi yang umum. Jika tombol berisi aksi yang spesifik, diskusikan apa info tersebut tepat ditempatkan di Toast atau justru di komponen lain

## Gunakan kalimat singkat, kata benda umum, dan bahasa yang *straightforward*

### Tempatkan kata yang paling penting di awal kalimat

Terutama untuk komponen seperti Toast yang hanya muncul sepersekian detik saja, kadang pengguna tidak sempat melihat keseluruhan kalimat. Dalam hal ini, kata “Gagal” dan “Berhasil” lebih penting dari kata lainnya karena dengan langsung menginformasikan hasil dari aksi pengguna.

### Sebaiknya gunakan kata benda umum

Hal ini dilakukan untuk menjaga panjang kalimat menjadi 1 baris saja. Kata benda umum biasanya lebih singkat dan bisa digunakan untuk kasus serupa.

### *Straightforward*

Karena hanya muncul sepersekian detik, sebaiknya jangan menyorot gaya bahasa. Langsung sampaikan pesan saja, lalu biarkan pengguna kembali ke hal yang mereka sedang lakukan. Toast juga kurang cocok untuk pesan promosi atau penawaran yang menunjukkan manfaat mencoba atau melakukan sesuatu.

Elvaretta Angelina Gunawan

Gayuh Karmantary

Toast digunakan untuk menampilkan notifikasi singkat dan sementara, tanpa mengganggu pengalaman pengguna.

## **Anatomi**
![Text field](//images.ctfassets.net/jf73m8fzk99f/6SFlvy2grl1t3pUrEBv8Hc/464f31718dda65e1805a64f6e00a29a8/Screenshot_2024-12-20_at_14.43.28.png)

## **Jenis dan variasi**

### Text field 

Input sederhana yang digunakan untuk memasukkan teks singkat, seperti nama, email, atau kata sandi.

![Text field](//images.ctfassets.net/jf73m8fzk99f/6SFlvy2grl1t3pUrEBv8Hc/464f31718dda65e1805a64f6e00a29a8/Screenshot_2024-12-20_at_14.43.28.png)

### Text field with label

Input sederhana yang digunakan untuk memasukkan teks singkat, seperti nama, email, atau kata sandi dengan judul di bagian atasnya.

![Text field with label](//images.ctfassets.net/jf73m8fzk99f/lCPsk8c5MI09HgNOgirt6/4dbfc45e8b49b08ee92368043e3a1b9c/Screenshot_2024-12-20_at_14.44.34.png)

### Text area

Input yang dirancang untuk memasukkan teks panjang, seperti komentar, deskripsi, atau pesan.

![Text area](//images.ctfassets.net/jf73m8fzk99f/5k7aE94RXwjUpy6KCF1VUT/ed082e07433622eec790a2d6d7ec976f/Screenshot_2024-12-20_at_14.45.15.png)

### Text area with label

Input yang dirancang untuk memasukkan teks panjang, seperti komentar, deskripsi, atau pesan dengan judul di bagian atasnya.

![Text area with label](//images.ctfassets.net/jf73m8fzk99f/5MEFFEWaryzwgQI2i05AHU/f63750830af07903da748ccf354f4521/Screenshot_2024-12-20_at_14.45.56.png)

### *States*

Terdapat 4 *states* untuk Text field, yaitu Default, Focused, Disabled, dan Error. Berikut contoh gambar dan penjelasannya:  
![State text field](//images.ctfassets.net/jf73m8fzk99f/423TzglRIByISjCnNQ9LZK/3f6084fce7913ab30e1f801afa07da88/Screenshot_2024-12-20_at_14.48.21.png)

**Default**

Tampilan awal Text Field saat belum ada interaksi. Memiliki label atau *placeholder*, dengan border warna abu-abu.

**Focused**

Tampilan saat pengguna sedang mengetik atau berinteraksi dengan Text Field. Border berwarna biru, dan fokus kursor terlihat di dalam Text Field.

**Disabled**

Text Field dinonaktifkan dan tidak bisa diisi oleh pengguna. Tampilan lebih redup (warna abu-abu) dan tidak interaktif.

**Error**

Menunjukkan ada kesalahan dalam input pengguna. Border atau pesan kesalahan berwarna merah, sering disertai teks bantuan untuk memperbaiki kesalahan.

## ***Behaviors***

### Penggunaan Text Field dan Text Area

Gunakan **Text Field** jika data yang dimasukkan singkat dan spesifik seperti nama depan, alamat email, atau kata sandi. Gunakan **Text Area** jika data lebih panjang atau memungkinkan pengguna untuk menulis secara detail seperti umpan balik pengguna, deskripsi tugas atau proyek, atau catatan tambahan.
![Penggunaan text field/area](//images.ctfassets.net/jf73m8fzk99f/1dCStE6UZE8wOwKqcsJQYA/6ea034f2b9f299ffa9bc8225c63774c6/Screenshot_2024-12-20_at_14.49.24.png)

### Warna teks pada Text Field

Text Field yang sudah diisi akan berwarna hitam.  
![Text field color](//images.ctfassets.net/jf73m8fzk99f/4tiY6bN374kgjf4Uopko5r/8f7ceaf052dfae5ecdb9ef12755e0f16/Screenshot_2024-12-20_at_14.50.18.png)

## Panduan penulisan
Mempertimbangkan area Text Field yang kecil, maka pastikan untuk:

### **Menulis dengan ringkas dan jelas**  
Baik untuk label, Text Field, maupun Text Area, pastikan untuk menulis dengan lugas.

### **Menggunakan *call to action* atau kalimat tanya**  
Jika perlu memberikan petunjuk pengisian Text Field, pertimbangkan gunakan kata kerja/*call to action* atau pertanyaan sehingga pengguna tahu apa yang harus diisi.

### **Menggunakan peringatan**  
Jika informasi yang perlu diisi bersifat sensitif, Text Field dapat menampilkan peringatan sehingga pengguna lebih berhati-hati dalam mengisi.

### **Menggunakan Tooltip**  
Jika area Text Field sangat terbatas dan tidak memungkinkan menggunakan Text Area, maka gunakan Tooltip sebagai ekstensi area informasi.

Jika pengisian pada Text Field salah, maka *help text* akan memunculkan *error message* agar pengguna memperbaiki informasi. Secara umum, ada beberapa cara untuk menulis *error message* pada help text:

### **Menampilkan informasi yang tidak diperbolehkan untuk diisi**  
Pengguna dapat terhindar dari kesalahan yang lain jika mencoba mengisi kembali.

### **Menampilkan kesalahan yang telah dilakukan/diisi oleh pengguna**  
Pengguna dapat mengidentifikasi kesalahan sehingga tidak mengisi informasi yang salah untuk kedua kali.

### **Menampilkan peringatan/petunjuk teknis pengisian informasi**  
Pengguna dapat lebih berhati-hati dalam mengisi informasi.

Khansaa Ziz Fathima

Nur Kumalaningtyas

Text Field biasanya berupa area berbentuk kotak yang digunakan untuk memasukkan komponen alfanumerik hingga simbol.

## **Anatomi**
![Select Anatomy](//images.ctfassets.net/jf73m8fzk99f/3tf7yHjvdcH0IVDWZI0PNr/5db7400b4f7a3dd204426d9caee5222a/Select_Anatomy.png)

## **Jenis dan variasi**

### Default Select

Menggunakan *dropdown* bawaan dari *browser* atau sistem operasi. Biasanya sederhana dan konsisten dengan antarmuka *platform*.  
![Select Default](//images.ctfassets.net/jf73m8fzk99f/6qvorlcXUeWGKmg5H3BVDB/c7fb376716fbe32e7d717df73c4140a6/Select_Default.png)

### Custom Select

Menggunakan *dropdown* yang dirancang khusus, bukan bawaan *browser* atau sistem operasi. Memberikan fleksibilitas dalam gaya dan fungsi.

![Select Custom](//images.ctfassets.net/jf73m8fzk99f/F0cudEDm2phgaHldZovLL/1e797b6797ad40dc31e4a36304cebd27/Select_Custom.png)

### Custom List Menu

Dalam beberapa kasus, komponen Select digunakan sebagai *entry point* untuk membuka Modal. Modal ini berfungsi seperti Select, namun dapat menampilkan lebih banyak informasi dan konteks. Contoh ini termasuk dalam kategori Custom List Menu.  

![Select Custom Image](//images.ctfassets.net/jf73m8fzk99f/3KEWqzkocK1xlCTamS1wrT/1a4320459c30fecd47a7510df50442de/Select_Custom_Image.png)

## ***Behaviors***

### *State* dan umpan balik visual

Komponen Select memiliki beberapa *state* utama:

![Select States](//images.ctfassets.net/jf73m8fzk99f/4xCEVBYRcIZaFy3zot1Dio/87cb2f8f7369fadf9fa3c63548ce38a3/Select_States.png)

* Default: Saat tidak ada interaksi yang dilakukan.  
* Focused: Saat pengguna memilih atau berinteraksi dengan komponen.  
* Disabled: Saat komponen dinonaktifkan dan tidak dapat digunakan.  
* Error: Saat terjadi kesalahan input oleh pengguna, seperti memilih opsi yang tidak valid.

## **Panduan penggunaan**

### Kapan menggunakan

* __Menghemat ruang antarmuka__: Select cocok untuk tampilan dengan banyak opsi (lebih dari 5\) agar tidak memakan tempat.  
* __Data yang dinamis__: Cocok untuk pilihan yang dapat berubah seiring waktu, seperti daftar kategori yang terus bertambah. Komponen Select membantu menjaga tampilan tetap terorganisir, dengan konten yang fleksibel dan mudah disesuaikan.

### Hindari penggunaan (dengan pertimbangan)

* __Opsi tetap dan sedikit:__ Jika hanya ada maksimal 3 opsi yang bersifat tetap dan tidak berubah, sebaiknya gunakan Radio dengan label. Komponen ini memberikan interaksi yang lebih cepat, sederhana, dan langsung bagi pengguna.

Arvie Pravira

Komponen antarmuka yang memungkinkan pengguna memilih satu opsi dari daftar yang tersedia. Ketika pengguna mengklik atau mengetuk komponen ini, sebuah dropdown (menu tarik-turun) akan muncul, menampilkan daftar opsi yang bisa dipilih.

## **Anatomi**

![Anatomy Pagination](//images.ctfassets.net/jf73m8fzk99f/1AdGYITXRXdMWgBy6doFsg/b9217abe447fd23837450b95a0327ee7/Anatomy_Pagination.png)

## **Jenis dan variasi**

### Default

Digunakan ketika semua angka halaman dapat dicantumkan.  
![Default Pagination](//images.ctfassets.net/jf73m8fzk99f/28gerxbQGyFb5B5Pmy0pyO/9555561352cc6c89c9c85afd3c391b44/Default_Pagination.png)

### Truncated

Digunakan ketika tempat terbatas, sehingga tidak seluruh angka halaman dapat ditampilkan.  
![Truncation Pagination](//images.ctfassets.net/jf73m8fzk99f/26RbTaGWVics7g0GdxAbfs/cfd05e4b477519fc7db76893b74c39f5/Truncation_Pagination.png)

## ***Behaviors***

### Elemen interaktif

Simbol (...) bukan merupakan elemen interaktif. Jika pengguna ingin mengakses halaman yang berada di bawah simbol (...), maka pengguna harus berpindah ke halaman lain yang lebih dekat dengan halaman yang dituju.

### Double truncation

Jika halaman tempat pengguna berada berjarak lebih dari lima halaman dari halaman paling awal dan terakhir.  
![Behavior Pagination](//images.ctfassets.net/jf73m8fzk99f/7mLRWRS64RXwBazXNZoMo6/f7a012e1cf85fb02d9b93e54be0ade82/Behavior_Pagination.png)

## **Panduan penggunaan**

### Peletakan komponen

Pagination biasanya diletakkan di bawah dan sisi kanan halaman (biasanya di bawah Table/daftar/data terkait). Dengan demikian komponen Pagination tidak akan mengganggu elemen navigasi utama.

### Praktik baik

![Best Practice Pagination](//images.ctfassets.net/jf73m8fzk99f/1uwzz7kNZXvX3OKFuTirkA/7c6e9a57c6889868bcf0a71224fe111f/Best_Practice_Pagination.png)


Pagination adalah komponen desain yang digunakan untuk membagi konten yang besar menjadi informasi yang lebih kecil ke dalam beberapa halaman.

![Header](//images.ctfassets.net/jf73m8fzk99f/6sJ9hmc1StHrfetbdZ1dkS/14f1e68ef1ceaae8bda19d64f3e004fb/Header_Loading.png)

## **Anatomi**

### Progress Bar

![Anatomy 1 ](//images.ctfassets.net/jf73m8fzk99f/5dFxv3Em9ZIsw10dUpJ0i0/a3b49c76e9f0da7a7c22808dbfaba0c2/Anatomy_1.png)

### Spinner

![Anatomy 2 ](//images.ctfassets.net/jf73m8fzk99f/7OsyIGHsX7xbMv53skhlb/d1d020d2a1a557bf6572e6841115389a/Anatomy_3.png)

### Shimmer

![Anatomy 2](//images.ctfassets.net/jf73m8fzk99f/6B3GYubMBFQivEGxRNzNL8/439f9c7e836f16901c3b74da322584af/Anatomy_2.png)

## **Jenis dan variasi**

### Progress Bar

Elemen visual yang menunjukkan kemajuan proses dalam bentuk bar horizontal atau vertikal yang terisi seiring berjalannya waktu.

### Spinner

Elemen berbentuk lingkaran atau ikon berputar yang menunjukkan bahwa proses sedang berjalan tetapi tidak memberi estimasi waktu.

### Shimmer

Efek animasi berkilau atau bergeser pada *placeholder* yang menyerupai konten sebenarnya, biasanya digunakan untuk memberi kesan bahwa konten sedang dimuat.

## ***Behaviors***

### Memberikan umpan balik ke pengguna

Loading harus menunjukkan bahwa proses sedang berjalan untuk mencegah pengguna merasa aplikasi tidak responsif.

### Memberikan informasi estimasi waktu

Jika memungkinkan, informasikan durasi proses agar pengguna dapat memutuskan untuk menunggu atau bertindak.

### Menjaga keterlibatan pengguna dengan visual atau animasi yang menarik

Gunakan animasi, ilustrasi, atau teks mikro untuk menghibur atau menginformasikan pengguna selama waktu tunggu yang lama.

## **Panduan penggunaan**

### Progress Bar

Ketika sesaat melakukan aksi (contoh: *submit*, unduh, unggah, simpan, dll) kemudian dibutuhkan waktu untuk memproses suatu data atau aksi. Maka, Progress  Bar ini diharapkan akan memberikan informasi, gambaran, atau *feedback* dalam bentuk diagram batang horizontal, tentang seberapa lama user harus menunggu untuk sebuah data atau aksi diproses.  

### Spinner

Penggunaannya masih sama dengan Progress Bar. Namun, Spinner menyampaikannya dalam bentuk visual berupa objek bulat dilengkapi dengan indikator progres yang berputar-putar mengelilingi objek bulat tersebut. 

### Shimmer

Shimmer biasanya berbentuk menyerupai anatomi yang sama persis dengan komponen yang akan dimuat, namun masih dalam bentuk kerangka dari komponen tersebut. Pada umumnya, Shimmer digunakan untuk memuat komponen secara bertahap dalam suatu halaman.

<DoDontWrapper>
  <DoCard
    title="Do Card"
    description="Berikan umpan balik waktu nyata, estimasi waktu tunggu yang ditampilkan harus sesuai."
    imageUrl="https://images.ctfassets.net/jf73m8fzk99f/49fpqQ7wbM2o5QbUkYTNOz/963f002d55ceda5349efc7e73e52c87c/Progress_bar.png" />

  <DontCard
    title="Do Card"
    description="Hindari memberikan harapan palsu kepada pengguna yang membuat waktu tunggu  seolah-olah sudah selesai."
 imageUrl="https://images.ctfassets.net/jf73m8fzk99f/4mM3ZSEhLeXLdtk8qOsBgk/1738ce212c28e78ff160b1468e99b260/Progress_bar_donts.png" />
</DoDontWrapper>

## **Panduan penulisan**

Loading berfungsi sebagai pemberitahuan kepada pengguna bahwa sistem sedang menjalankan aksi. Biasanya tak banyak yang dapat pengguna lakukan selain menunggu sampai sistem selesai menjalankan aksi tersebut. Berikut panduan menulis untuk komponen ini.

![memuathalaman](//images.ctfassets.net/jf73m8fzk99f/4sc9ff2bTSZeB9sUcYg51Y/2dbafa46e05cd3e1bb7ca9d987237243/memuathalaman.png)

### Berikan informasi tentang aksi yang sedang berjalan

Apakah Loading disebabkan karena halaman sedang dimuat? Atau karena data sedang dialirkan? Atau mungkin karena dokumen sedang disimpan? Apa pun yang sedang dijalankan sistem, pastikan pengguna tahu dengan jelas dan spesifik. Panduan teknisnya:

- Letakkan info di judul.  
- Sebaiknya gunakan kalimat aktif (“Sedang memuat halaman”). Namun, kalimat pasif juga tidak dihindari jika ingin menggunakan struktur kalimat yang diawali subjek (“Halaman sedang dimuat”).  
- Selalu gunakan elipsis untuk memberi tahu proses masih berlangsung.

### Pastikan berapa lama pengguna harus menunggu

Tentukan estimasi waktu Loading akan ditampilkan. Apakah beberapa detik saja? Atau butuh beberapa hari? Berikan ekspektasi ke pengguna agar dapat melanjutkan aksi atau perjalanannya di sistem. Panduan teknisnya:

- Letakkan info di deskripsi atau *subtitle.*  
- Kalimat yang paling umum digunakan adalah “Mohon tunggu sebentar”. Namun, tergantung juga dengan estimasi waktu Loading tersebut.  
- Jika estimasi waktu Loading lebih lama dari beberapa detik atau perkiraan sistem, gunakan deskripsi untuk memberi ketenangan atau kenyamanan selama pengguna menunggu. Misalnya, fakta unik tentang sistem atau produk, atau visual dan *motion*.  
  - Catatan: Pastikan untuk cek gaya bahasa dan objektif produk juga.

![Relfleksi](//images.ctfassets.net/jf73m8fzk99f/1edpF3OqXUCwnfgjGnyfF1/796a66c41552a1e39f93348c4fa9a075/Relfleksi.png)

## **Kontributor**


Diodona Maenggartama

Sebuah komponen visual atau interaksi yang muncul saat sistem memproses data atau menjalankan tugas, seperti memuat halaman, mengambil data dari server, atau menjalankan fungsi kompleks.

## **Anatomi**
![List-Anatomy](//images.ctfassets.net/jf73m8fzk99f/vOT5oDKjba8Fb9qiWLWwo/764b0928430a96b42d0aeb9f50476b1b/List-Anatomy.png)

## **Jenis dan variasi**

### Atribut data

Variasi pada List bergantung pada jenis data yang ditampilkan:

* **Satu atribut**: Menampilkan satu jenis data dalam bentuk teks saja.  
  Contoh: Daftar nama pengguna.  
* **Beberapa atribut**: Menampilkan kombinasi data, seperti teks dan gambar.  
  Contoh: Daftar produk dengan nama, harga, dan foto.

![list-basic usage](//images.ctfassets.net/jf73m8fzk99f/6GC3YTyTpxuDOj891aiJ2n/6a043c31d2b1a19435bee4ba7d1afda8/list-basic_usage.png)

![list-with artwork](//images.ctfassets.net/jf73m8fzk99f/3Q57vDzWd99GBedpw4zTVN/9499f95c9bf52bdce01b35ee3b10d23e/list-with_artwork.png)

### Tambahan komponen interaktif

List dapat ditambahkan komponen interaktif seperti tombol, ikon, atau label untuk menunjukkan bahwa pengguna dapat berinteraksi dengan item di dalam List.  
Contoh: Tombol "hapus" atau ikon "info" di setiap item list.

![list-enhancer](//images.ctfassets.net/jf73m8fzk99f/1ZJCOOGCgiYFshtxQG6dfy/492afd4b10739015c4311df26b47e5f2/list-enhancer.png)

## ***Behaviors***

### Umpan balik visual

Secara default, List tidak memiliki *state* atau umpan balik visual yang khas. Namun, komponen ini dapat dikustomisasi sesuai kebutuhan desain, misalnya dengan *highlight* saat List dipilih.

### Interaksi

* List biasanya hanya digunakan untuk menampilkan data.  
* Interaksi umum meliputi klik untuk membuka halaman baru atau memunculkan Modal.  
* List tidak mendukung interaksi kompleks seperti *expand* atau *collapse* secara *default*.

## **Panduan penggunaan**

### Kapan menggunakan List

* Cocok untuk menampilkan informasi yang **fokus pada teks**, dengan gambar sebagai elemen pendukung.  
* Hemat ruang secara vertikal, sehingga dapat memuat banyak data dalam satu layar.  
* Ideal untuk daftar yang memerlukan navigasi sederhana, seperti membuka halaman detail.

![Frame 427320080](//images.ctfassets.net/jf73m8fzk99f/2o6KAyjLRfue2anczbowcw/ee6def599897f43b3c513923bfccba92/Frame_427320080.png)

### Perbedaan dengan Card

* **List**: Lebih cocok untuk data berbasis teks. Gambar hanya sebagai pelengkap.  
* **Card**: Lebih cocok jika gambar atau visual menjadi fokus utama, karena memiliki ruang lebih besar untuk elemen visual.

### Hindari menggunakan List jika:

* Data yang ditampilkan mengutamakan elemen visual seperti gambar.  
* Informasi membutuhkan tampilan yang lebih interaktif atau mencolok, di mana Card bisa menjadi pilihan yang lebih tepat.

## **Panduan penulisan**

![list](//images.ctfassets.net/jf73m8fzk99f/2i96eOVOx0EyBSBheu2Xyi/c61e8cd3866d150f31b442039a34f788/list.png)

### Sesuaikan judul dengan isi data 

Pastikan kata yang dipakai sesuai dengan konteks yang menjelaskan data yang dimaksud.

### Singkat

Maksimal 2-3 kata dan fokus pada penjelasan data yang ditampilkan.

### Gunakan *sentence case* 

Untuk isi data menggunakan hanya huruf di awal kalimat yang ditulis kapital, serta hindari tanda titik “.” di akhir kalimat.

Dipublikasikan pada 1 Desember 2024\. Terakhir diperbarui pada 2 Desember 2024\.

Komponen antarmuka yang digunakan untuk menyusun dan menampilkan informasi dalam format yang terorganisir, baik berupa satu atribut data sederhana maupun kombinasi beberapa atribut data. Komponen ini dirancang untuk mempermudah pengguna membaca, memahami, atau mengakses informasi yang dikelompokkan dalam satu jenis yang sama.

## **Anatomi**

![chips-Anatomy](//images.ctfassets.net/jf73m8fzk99f/6169nxdKZfDBTGyEeHJIC/61848f70101ccb922c650c49eb87408c/chips-Anatomy.png)

## **Jenis dan variasi**

### Ukuran

Chips memiliki 2 ukuran (Regular dan Small) yang bisa disesuaikan dengan kebutuhan masing-masing.  
![Chips Ukuran](//images.ctfassets.net/jf73m8fzk99f/4CheHwxzPdDER5il8A3FN1/72e508b5999d6527d96d6e240727fe95/Chips_Ukuran.png)

### Non-Active dan Active

Chips memiliki 2 macam variasi yang menandakan pilihan mana yang sedang dipilih oleh pengguna. Varian aktif digunakan ketika opsi terkait sedang menjadi opsi yang berlaku dalam sistem, sedangkan varian nonaktif digunakan pada situasi sebaliknya.

![Chips-jenis](//images.ctfassets.net/jf73m8fzk99f/2jjzmZmaffg1BOQYWFQ4EB/d2211a04efcb66d960ad95527b848fc8/Chips-jenis.png)

### Icon

#### Leading (Optional)

![chips-leading](//images.ctfassets.net/jf73m8fzk99f/74oGR2QsGMRTLrI5Bih95N/31ecabc4c3ed386e5209f014a736250d/chips-leading.png)

Chips dapat berisi ikon atau logo di depan. Gunakan ikon sistem untuk membantu mengidentifikasi kategori chips.

#### Trailing (Optional)

![chips-trailing](//images.ctfassets.net/jf73m8fzk99f/59M0no1itpi3fXE75u4rrm/2a6195bcbe4ba2e41f3852b2bf6aed43/chips-trailing.png)

Chips dapat berisi ikon atau logo di belakang. Gunakan ikon di belakang untuk menambahkan aksi sekunder seperti menutup Chips atau *close*.  

### *States*

Terdapat 5 *states* untuk Chips, yakni Default, Hovered, Focused, Pressed, dan Disabled. Berikut contoh gambar dan penjelasannya:

#### Non-Active

![chips-nonactive](//images.ctfassets.net/jf73m8fzk99f/huREsd3j38GY6nUHioTlJ/dae668e7f8fbf3bc6d5c3f7876bfa254/chips-nonactive.png)

#### Active

![chips-active](//images.ctfassets.net/jf73m8fzk99f/7gzrBMG4gK7k6DiBVGUkA3/5ed025f81298be6171c6cae7e0f5cb41/chips-active.png)

## ***Behaviors***

### *Keyboard focus*

![chips-focused](//images.ctfassets.net/jf73m8fzk99f/6Fu7vsp7qsiq0bl2zJVGIG/34c5d6b23f45752f41c94d803ed17922/chips-focused.png)

Chips dapat dinavigasi menggunakan *keyboard*. Status *keyboard focus* mengambil status visual hover tombol Chips dan menambahkan cincin biru ke Chips dalam fokus.

## **Panduan penggunaan**

Chips membantu pengguna memasukkan informasi, membuat pilihan, memfilter konten, atau memicu tindakan. 

### Chips bukan Button

Chips mendukung dan memperkaya perjalanan pengguna tanpa mengganggu fokus alur utama, sedangkan Button berfungsi sebagai pendorong utama untuk melanjutkan alur atau menyelesaikan tugas penting. Button memiliki hierarki visual yang lebih tinggi dibandingkan Chips untuk memastikan mereka menarik perhatian pada tindakan utama.

<DoDontWrapper>
  <DoCard
    title="Do Card"
    description="Gunakan Chips untuk menyajikan opsi kontekstual dan tambahan."
    imageUrl="https://images.ctfassets.net/jf73m8fzk99f/3AeJ9mYdHzuY6ESHowNwSM/86264d837c7fc0ae8e0307d977123f8f/chips-do.png" />

  <DontCard
    title="Don't Card"
    description="Hindari mengganti tindakan utama dengan Chips. Tindakan yang membawa pengguna ke langkah berikutnya atau sebelumnya harus selalu ditampilkan sebagai Button"
    imageUrl="https://images.ctfassets.net/jf73m8fzk99f/4JhJSUNWvp6RlBQGqG6ysM/988cd3b3f0705510e695f38af03fb182/chips-dont.png" />
</DoDontWrapper>

### Memfilter konten

Chips dapat digunakan untuk memfilter atau menyaring konten. Contohnya seperti hasil pencarian.

![chips-filter](//images.ctfassets.net/jf73m8fzk99f/4kqPT7zsXdVlUmPbW029tv/6de223770b76c01e36428edb979a45cb/Screenshot_2024-12-20_at_14.45.12.png)

### *Assist* Chips

*Assist* Chips dapat memicu tindakan sekunder pada pengalaman pengguna.

![chips-dropdown](//images.ctfassets.net/jf73m8fzk99f/3d4G56cztdUiMQ6gg55ySh/cd80c64ee86d2ee68ca0eb9dc6f85763/chips-dropdown.png)

### Penempatan

Input Chips dapat diintegrasikan dengan komponen lain. Chips ini dapat muncul:

1. Dalam daftar yang dapat digulir secara horizontal.  Untuk pengguna yang tidak ahli dalam teknologi, variasi ini tidak direkomendasikan karena mudah dilewatkan oleh pengguna.  
2. Dalam daftar bertumpuk.

![chips-bertumpuk](//images.ctfassets.net/jf73m8fzk99f/3rQOYbyMOEeR9njwH61lcG/e367bb6164d8326d48c8d8ece97fd15e/chips-bertumpuk.png)

### Jarak antar Chips

Jaga jarak minimum 8dp antar Chips.

![chips-jarak](//images.ctfassets.net/jf73m8fzk99f/2XSvayr9g2Xm18hqWzag7F/6812c18f48678e1de9be7346a22920c5/chips-jarak.png)

## **Panduan penulisan**

Chips memiliki fungsi spesifik dengan area penulisan yang terbatas, maka pertimbangkan untuk:

### Menampilkan jenis kategorisasi

Menampilkan jenis kategorisasi yang berhubungan atau sesuai dengan konten yang akan disaring oleh pengguna.

### Menghindari penggunaan *call to action*  
Chips tidak akan menggantikan tombol aksi, maka sebaiknya tidak menggunakan kata kerja/*call to action*.

### Pakai maksimal 3-4 kata  
Idealnya, chips menggunakan 1-2 kata saja. Namun jika memang tidak memungkinkan, sebisa mungkin gunakan tidak lebih dari 4 kata (termasuk karakter) untuk menyesuaikan area yang terbatas.


Ade Andreansyah

Rizqie Aulia

Chips adalah komponen interaktif kecil yang digunakan untuk merepresentasikan informasi atau tindakan. Chips memiliki berbagai tujuan seperti memungkinkan pengguna memasukkan informasi, membuat pilihan, memfilter konten, atau memicu tindakan.



![anatomy](//images.ctfassets.net/jf73m8fzk99f/3ydJVqHTWTtPpwUZK5L16g/54fd8e9395b8f9c121a1122a25ce2b14/container.png)

## **Anatomi**

![anatomi](//images.ctfassets.net/jf73m8fzk99f/22hhu4hItzC1j9KkPVvhxN/8615e99369867a83b8ce497dc5c8c9de/Anatomy.png)

## ***States***

![State](//images.ctfassets.net/jf73m8fzk99f/71KSN5y6LwUD1mXn9yiauA/566d36478cf79c045430b12522033663/State.png)

## **Jenis dan variasi**

### Checked

Kondisi setelah pengguna memilih.

![checked](//images.ctfassets.net/jf73m8fzk99f/7f2zMdDvE6BTnkKd3boV0k/b999a6e39be6923939732b5014f99d03/checked.png)

### Unchecked

Kondisi sebelum pengguna memilih.

![unchecked](//images.ctfassets.net/jf73m8fzk99f/15cKg64vUWDRmRsa9SgaGs/b3fb3482723d3b54f52305f0b65b2349/unchecked.png)

### Undetermined

Kondisi yang menunjukkan salah satu atau lebih sub pilihan sudah terpilih.

![indetermined](//images.ctfassets.net/jf73m8fzk99f/5SCqFaubxCjc2jatq3MJ3o/0f89746c6c787e42941548d090c039f8/indetermined.png)

## ***Behaviours***

Pengguna dapat menekan label teks atau Checkbox untuk memilih pilihan.  
![behaviour](//images.ctfassets.net/jf73m8fzk99f/64ZU6oLwpUIhIR7F9HHLBo/2698094501dcee6992fa1660303079f7/behaviour.png)

## **Panduan penggunaan**

### Gunakan kotak centang untuk:

* Mengkonfirmasi persetujuan  
  ![confirm](//images.ctfassets.net/jf73m8fzk99f/1OGnwKYpFSUTRe03kswhyl/924735d3eff31f8d7890af13e3a76532/confirm.png)  

* Pilih satu atau beberapa pilihan dari daftar  
  ![behaviour 2](//images.ctfassets.net/jf73m8fzk99f/65zI8dQJ0heBTTBq5lpCuz/1c7bcf3991b50bb34dcb3cf53cd638f1/behaviour_2.png)  

* Menampilkan daftar yang berisi sub-pilihan  
  ![behaviour](//images.ctfassets.net/jf73m8fzk99f/2Xyryu34D7bnGqItdfxAaR/1239343da2a0a344dbad2c07153bc3bb/behaviour.png)

## **Panduan penulisan**

Checkbox adalah elemen interaktif yang meminta konfirmasi atau persetujuan atas tindakan yang diambil atau memungkinkan pengguna untuk memilih satu atau lebih opsi dari sebuah daftar.

### Sampaikan pilihan dengan tepat

Hindari ambiguitas.

### Formulasikan teks dalam bentuk pernyataan atau tindakan yang positif 

Agar lebih mudah dipahami.

### Singkat

Namun tetap menjelaskan konsekuensi atau dampak dari pilihan.


Moga Adiangga

Komponen yang memungkinkan pengguna memilih satu atau beberapa item dari daftar, atau mengaktifkan/menonaktifkan item.

![container](//images.ctfassets.net/jf73m8fzk99f/56yxG4WdSgcQLUS3vl3r70/f027dccf85b24a95c742dc0dd64c9ea4/container.png)

## **Anatomi**

![Anatomy](//images.ctfassets.net/jf73m8fzk99f/3VUg1oeiJxUCreBXxo6IyA/7f5e0c1c54e16608a2d0ab56c9d3e537/Anatomy.png)

## **Jenis dan variasi**

### *Icon* dan *text label*

Komponen Button dapat memiliki elemen *icon* dan/atau *text label*. Pada umumnya, Button selalu memiliki teks untuk mengkomunikasikan fungsi dari Button tersebut. *Icon* dapat digunakan untuk mempertegas fungsi dari komponen Button.

Dalam penggunaan tertentu, Button dapat hanya menggunakan *icon* tanpa *text label*. Pastikan icon yang digunakan dapat dipahami pengguna. Jika dibutuhkan, *icon-only* Button dapat dijelaskan dengan menggunakan tooltip.

![Icon Button](//images.ctfassets.net/jf73m8fzk99f/4dRgDFbghhwLjxvhXkQ3OK/5c5e591a61883dae0badeba8dd0c1205/Icon_Button.png)

### Ultimate

Digunakan untuk aksi umum.

![container](//images.ctfassets.net/jf73m8fzk99f/7g3F5ZhpRoiN3ZlF206EC2/56139ed289fc74cdfd4d827d00bed863/container.png)

### Primary

Digunakan untuk tindakan utama atau yang paling penting.

![primary](//images.ctfassets.net/jf73m8fzk99f/2oXwD9nE120v2bUvU6rHBe/c0b4e3d938b490ec012434416771d128/primary.png)

### Secondary

Digunakan untuk tindakan sekunder atau opsional.

![secondary](//images.ctfassets.net/jf73m8fzk99f/5j74j9hYI0U0t8WiAzWAMH/f319650573b11d1d08fa4a9d609234e7/secondary.png)

### Quiet 

Digunakan ketika konten tidak menjadi fokus utama di sebuah halaman, misalnya “Cek selengkapnya”.  
![Quite Button](//images.ctfassets.net/jf73m8fzk99f/7c0rrWP104i1cN7uLcky7h/276e79b57afd794ed71f78a16484b3d6/Quite_Button.png)

### Destructive

Digunakan untuk aksi yang bersifat destruktif, misalnya “Hapus” atau “Tolak”.  
![Destructive Button](//images.ctfassets.net/jf73m8fzk99f/F462sTrG5GP6S33qrNoy7/207f990675124259ba404b1d94c28a1d/Destructive_Button.png)

### Inverse 

Digunakan pada *background* berwarna gelap.  
![Inverse Button](//images.ctfassets.net/jf73m8fzk99f/2dS7A0WXT8wl5nAN4eOmoH/d19ada75c28afc408decc7fa3001f6d7/Inverse_Button.png)

### Floating

Digunakan sebagai navigasi yang aksesibel bagi pengguna, misalnya “Geser ke bawah” atau “Kembali ke atas”.  
![Floating Button](//images.ctfassets.net/jf73m8fzk99f/1iOYPNeW9OEbD7sTZlUpCE/8203904e1785b6da62598f14f8b998db/Floating_Button.png)

## ***Behaviors***

### States

Button harus memberikan umpan balik visual ketika diklik dan merespons dengan cepat. Pastikan tombol memberikan respons yang jelas ketika pengguna mengkliknya, seperti perubahan warna atau animasi sederhana. Terdapat 5 *states* untuk Button, yakni Ultimate, Hover, Focused, Pressed, dan Disabled.

![States Button](//images.ctfassets.net/jf73m8fzk99f/7kPv2XWPAemqP7ip44iSCB/cbd5aa2e817a52314ea19e4bf2b46b03/States_Button.png)

### Flexible width

Lebar komponen biasanya menyesuaikan dengan teks label. Selain itu, Button bisa juga digunakan *full-width* untuk menyamai lebar layar terutama *mobile*.

![flexible](//images.ctfassets.net/jf73m8fzk99f/7JY6PxQDI7A9D8JKtTi2zr/679fc897bfd264496eb9199e9ae0d072/flexible.png)

## **Panduan penggunaan**

Button adalah elemen interaktif yang memungkinkan pengguna melakukan aksi atau memulai proses di dalam aplikasi atau situs web.

### Pastikan ukuran aksesibel

Pastikan tombol memiliki ukuran yang cukup untuk ditekan dengan mudah pada perangkat berbasis sentuh.

### Gunakan *icon* sebaga info tambahan

Pertimbangkan penggunaan ikon bersama dengan teks untuk memberikan penekanan visual tambahan tentang aksi yang akan dilakukan tombol.

### Hindari meletakkan Button dengan variasi yang sama bersebelahan

Ketikan menggunakan dua Button bersebelahan, pastikan menggunakan variasi yang berbeda agar pengguna memahami aksi mana yang lebih penting pada alur terkait.  
<MediaCard
 imagePosition="right"
 title="Dihindari"
 description="Jangan menempatkan Button untuk dua tindakan penting bersebelahan."
 imageUrl="https://app.contentful.com/spaces/jf73m8fzk99f/assets/3suHPJMzkRUTOpLz8yaC2n"
/>

<MediaCard
 imagePosition="left"
 title="Disarankan"
 description="Menggunakan kombinasi Button yang memiliki penekanan visual yang berbeda."
 imageUrl="https://app.contentful.com/spaces/jf73m8fzk99f/assets/2hdOsNZhLgn2OEcsYgJeyO"
/>

### Peletakan Floating Button

Pada *mobile*, Floating Button diletakkan di bawah layar. Peletakan ini bertujuan agar Floating Button tetap aksesibel dan tidak mengganggu atensi pengguna.

![Floating Button Placement](//images.ctfassets.net/jf73m8fzk99f/4BK55e4IKbWjwGNlHT4dIu/8a2262c974d485433c35baf6488e42f4/Floating_Button_Placement.png)

## **Panduan penulisan**

Tombol CTA atau *call to action* adalah tombol interaktif yang mendorong atau menginstruksikan pengguna untuk melakukan tindakan tertentu. Berikut panduan menulis untuk komponen ini.

### Gunakan kata kerja spesifik 

Sesuaikan kata kerja dengan tindakan yang akan diambil. Pastikan kata yang dipakai sesuai dengan konteks dan tujuan halaman atau tindakan yang akan diambil.

### Singkat

Maksimal 2-3 kata dan fokus pada tindakan utama.

![singkat](//images.ctfassets.net/jf73m8fzk99f/7eyj1roOiGYQaqo23C9T2v/09af24c07c63e63f21ac3d312c1bbd5e/singkat.png)

### Gunakan *sentence case*

Hindari gunakan *Title Case* atau huruf kapital semua untuk menyorot tombol tertentu. Serta hindari tanda titik “.” di akhir kalimat.

Sebuah elemen yang dapat diklik yang mengkomunikasikan bahwa pengguna dapat memicu suatu tindakan.

![container (4)](//images.ctfassets.net/jf73m8fzk99f/6Q77mfqJDQIh8npLjbfoOW/056d2a2be124097fc80924a221f7f13f/container__4_.jpg)

# **Anatomi**

![Anatomy (3)](//images.ctfassets.net/jf73m8fzk99f/6ncx5kIQwVi6rVQiNw2kZs/a6784f5acc7299423ab302fe6a3cc666/Anatomy__3_.jpg)

# **Jenis dan variasi**

## Banner Success

Memuat informasi yang sifatnya positif dan biasanya berupa respon lanjutan dari sebuah aksi yang telah dilakukan sebelumnya.

![container (5)](//images.ctfassets.net/jf73m8fzk99f/4ct09GMfEDMYBeNydFcDM4/add98d3d76590b10b280148ecf3c8809/container__5_.jpg)

## Banner Informational

Memuat informasi yang sifatnya netral, umum, dan berdiri sendiri (bukan berupa respon lanjutan).

![container (6)](//images.ctfassets.net/jf73m8fzk99f/4mnwcgEsH9AVTouavs0UFo/30e7a8aa99f136711bbf50688c246e80/container__6_.jpg)

## Banner Warning

Memuat informasi yang sifatnya berupa sebuah peringatan yang harus dibaca dan membutuhkan aksi tindak lanjut yang perlu dilakukan.

![container (7)](//images.ctfassets.net/jf73m8fzk99f/39kgVxomTLwcgZG6f2VccH/18ec297cc3d47541f7eb70007aef1e4e/container__7_.jpg)

## Banner Critical

Memuat informasi yang sifatnya *error*/*blocking* dan mewajibkan kita untuk melakukan sebuah aksi terlebih dahulu agar dapat melanjutkan.

![container (8)](//images.ctfassets.net/jf73m8fzk99f/33oYwkvbZIHauvkeJQGfIx/87e369c8798dd9b772853436e4bec4e4/container__8_.jpg)

# ***Behaviors***

Tidak ada interaksi spesifik terhadap komponen Banner, Banner merupakan komponen statis.

# **Panduan penggunaan**

## Gunakan Banner ketika ada informasi penting yang perlu dibaca

Banner dapat digunakan untuk menarik perhatian kita agar membaca informasi yang ada di dalamnya, sehingga sangat cocok digunakan untuk informasi yang penting, namun tidak terlalu panjang.

## Jangan pakai 2 tipe Banner yang berbeda dalam satu halaman.

Hanya gunakan Banner jika memang ada informasi yang penting saja, hindari penggunaan Banner yang terlalu banyak dalam 1 halaman agar tidak mereduksi tingkat urgensinya.

## Pastikan penggunaannya sesuai dengan tipe informasi

Gunakan jenis Banner yang sesuai dengan tipe informasinya untuk memastikan penerimaan informasinya tepat sasaran.

![doCard](//images.ctfassets.net/jf73m8fzk99f/7xaP13oM4BC9rVArpRWbhQ/a9a92eaed5e5bd550922e68718b4b842/doCard.jpg)

![dontCard](//images.ctfassets.net/jf73m8fzk99f/4Dfsa5NR8CIWJp1scEJkPF/7ee86b13f52c1ea5ad05ef4ab0406729/dontCard.jpg)

# **Panduan penulisan**

![Banner (1)](//images.ctfassets.net/jf73m8fzk99f/25mNHVJfUZXo0mqR8Jbefu/0446036d49d66ae7e4a28caf0816a7b0/Banner__1_.jpg)

## Sampaikan informasi dalam satu kalimat

Maksimal 2 baris.

## Gunakan tombol *call-to-action* (CTA) yang jelas

Pastikan ada tindakan yang perlu diambil.

## Fokus pada pesan penting

Hindari informasi berlebihan, hanya berikan pesan yang relevan.


Komponen desain yang digunakan untuk menyampaikan pesan penting atau bersifat sementara di antarmuka pengguna (user interface).


![Anatomy Avatar](//images.ctfassets.net/jf73m8fzk99f/bgripln3ikFs9lK1myMnJ/4095eee8eef6febc9dfd3d576b46e5f0/Anatomy_Avatar.png)

## **Anatomi**

![Anatomy Avatar 2](//images.ctfassets.net/jf73m8fzk99f/4Kihg0W3JszLh5zViZa1Zn/17f7e6254d03103f4c9cbf026cef25d7/Anatomy_Avatar_2.png)

### **Jenis dan variasi**

### Circle

Avatar dengan bentuk lingkaran biasanya untuk mereprentasikan invidiual user

### Square

Avatar berbentuk persegi membantu mengidentifikasi entitas non-manusia seperti komunitas, sampul playlist, grup, atau proyek.

## ***Behaviors***

Komponen avatar dapat digunakan dalam berbagai konteks, seperti profil pengguna, komentar, pesan, dan area lain di mana identifikasi pengguna diperlukan. Pengguna biasanya mengunggah gambar mereka sendiri di Akun Belajar.id SSO, jika tidak, gambar default akan ditampilkan.

Lody Andrian

Afnizar Nur Ghifari

Sebuah representasi grafis dari pengguna. Ini digunakan untuk mengidentifikasi pengguna dalam sebuah sistem secara visual dengan menampilkan gambar kecil atau inisial nama pengguna.

## **Anatomi**
![Anatomy Popover](//images.ctfassets.net/jf73m8fzk99f/2z7anMXzo1P8E0mO5QeUm6/bc249d1aedd974ba24ce9d92dfc8dea8/Anatomy_Popover.png)

## **Jenis dan variasi**

### Default  
Tampilan utama sebelum adanya interaksi.
![Default Popover](//images.ctfassets.net/jf73m8fzk99f/13voiFh9aElEFHUjQZTRV0/8a58a86ed3658d137b41d5b7dec034dc/Default_Popover.png)

### Hover  
Tampilan saat adanya interaksi dari mouse yang mengarah ke kontainer.![][image3]
![Hover](//images.ctfassets.net/jf73m8fzk99f/323fz4M5W7k1kafCtUWB7P/f041ac5c4ac5adbc5657931f4053a8bf/Hover.png)

### Focused  
Tampilan saat salah satu menu sedang aktif.
![Focused](//images.ctfassets.net/jf73m8fzk99f/NkIeUlilVCuK9aTTrrlqJ/0796a2e64038e7b1e0a241bca0332317/Focused.png)

### Pressed  
Tampilan saat adanya interaksi klik dari *mouse*.
![Pressed](//images.ctfassets.net/jf73m8fzk99f/1ZDucHmsnJ9zINzpTzD3l6/82815cf7da078720af6dfe08cec1ba92/Pressed.png)

### Variasi

Tampilan saat adanya *multiple* menu yang ada di dalam kontainer.
![Variants](//images.ctfassets.net/jf73m8fzk99f/54Rz50LNXsLr0TNxnPzu4M/53e6dd790af441edaa5e10c6d717bd6c/Variants.png)

### Spesifikasi
![Specs](//images.ctfassets.net/jf73m8fzk99f/6AqLqz27CDO35El4idmEur/9a7ccfda008cd0859a050a666b3a3779/Specs.png)

## ***Behaviors***

### Interaksi  
Popover muncul dan tertutup dengan *clicking* atau *hovering* pada sebuah Button.

### Lokasi  
Popover muncul di berbagai posisi bisa di atas, samping kanan-kiri, atau bawah tergantung dari kebutuhan desain.

## **Panduan penggunaan**

Gunakan untuk informasi pelengkap atau singkat  
Jangan gunakan Popover sebagai tempat menampilkan informasi yang besar dan banyak.

Ilham Pradwito

Popover adalah komponen yang muncul di lapisan paling atas pada semua konten di sebuah halaman, hanya satu Popover yang dapat muncul pada suatu waktu dan dapat berisi berbagai teks dan elemen interaktif. 

## **Anatomi**

![link-anatomy](//images.ctfassets.net/jf73m8fzk99f/4Mh3ZN7DkBI0eKB0ak8UuT/94cf2a316f3c8d224fc1136efbd142ca/link-anatomy.png)

## **Jenis dan variasi**

### Primary

Digunakan untuk menarik perhatian pengguna pada Link tersebut, terutama jika warna biru tidak terasa terlalu mencolok dalam pengalaman pengguna.

![link-container](//images.ctfassets.net/jf73m8fzk99f/6ykFikwD6nwLqfuskR13ML/4df0d2bd0777a84520e7fffa9b2b870f/link-container.png)

### Secondary

Digunakan saat varian Primary terasa terlalu mencolok, seperti pada blok teks dengan banyak tautan referensi di dalamnya.

![link-secondary](//images.ctfassets.net/jf73m8fzk99f/4eMLWN5oKKkvFvATPoFSkC/e8f90150c866b69fd665364f999388f7/link-secondary.png)

### Inverse

Digunakan saat sebuah Link perlu ditempatkan di latar belakang yang berwarna gelap. Contohnya seperti hitam.

![inverse](//images.ctfassets.net/jf73m8fzk99f/41MPWLXT92zqX44FWdvEgy/d94988d627043e610bd2485349ae2457/inverse.png)

### Without Underline

Semua Link dapat memiliki variasi tanpa *underline* atau garis bawah. Variasi ini sebaiknya hanya digunakan jika penempatan dan konteks tautan sudah cukup jelas sehingga garis bawah tidak diperlukan.

Variasi ini kurang bagus secara akses dan visibilitas, jadi hindari jika Link memiliki peran penting dalam pengalaman pengguna.

![Link No Underline](//images.ctfassets.net/jf73m8fzk99f/3g7sBdQ2W3srPh6z68nRAx/fb9c6ac378bd2bb3d7c35a796aef5213/Link_No_Underline.png)

## Platform

Terdapat 2 *platform* untuk Link, yakni Mobile dan Desktop. Berikut contoh gambar dan penjelasannya.

![Frame 427320035](//images.ctfassets.net/jf73m8fzk99f/6XW81jYidyU2fZ9UK4KcRm/f302be4b8cafd0493ce2673043212838/Frame_427320035.png)

## *States*

Terdapat 5 *states* untuk Link, yakni Default, Hovered, Focused, Pressed, dan Disabled. Berikut contoh gambar dan penjelasannya:

### Primary

![Frame 427320036](//images.ctfassets.net/jf73m8fzk99f/1Zthnts5POw5P00hn7Dgyj/2b69084ead4165830ee639c7e4104680/Frame_427320036.png)

### Secondary

![Frame 427320037](//images.ctfassets.net/jf73m8fzk99f/6EUNKC6pHzDvL0RDTLvEJC/09c83266a3b63245658582e24b8f8073/Frame_427320037.png)

### Inverse

![Frame 427320038](//images.ctfassets.net/jf73m8fzk99f/5hcG3bGA6r4NJVNBFsaOCc/0d69bbe1a1e19dcc7b26d0755a97d1ab/Frame_427320038.png)

## **Panduan penggunaan**

### Gunakan link di dalam deskripsi atau *subtitle*

Link sebaiknya digunakan di dalam isi teks, bukan di judul. Jika butuh ajakan yang lebih mencolok, gunakan komponen lain, seperti Button.

![Image 1](//images.ctfassets.net/jf73m8fzk99f/2gwoEvQzOpbIwsdzS23Lf9/4f84d0d4dbec7000856eaf9ae73afb36/Group_39928.png)

## **Panduan penulisan**

### Gunakan kata kerja spesifik 

Pengguna mungkin akan menavigasi dengan menekan Link tanpa mendapatkan atau membaca teks yang ada di antara Link tersebut, sehingga penggunaan kata-kata Link yang terlalu umum seperti "pelajari lebih lanjut" atau "klik di sini" tidak menyampaikan konteks dari bagian lain dalam pengalaman tersebut. Tentukan tujuan setiap Link secara langsung di teks Link untuk menyampaikan konteks dan menetapkan harapan yang jelas tentang ke mana tautan tersebut akan mengarah.

![Image 2](//images.ctfassets.net/jf73m8fzk99f/4VvE53rF15M4m2wteUUf9t/1da40c969fa41de638b8d4e36330cb42/Group_39958.png)

### Perhatikan penulisan link yang berjejer

Jangan gunakan Link yang sama untuk menautkan ke informasi berbeda dalam satu tampilan. Jika teks Link perlu diduplikasi dalam satu halaman atau tampilan, pastikan untuk eksplor cara lain atau memanfaatkan komponen lain seperti Button.

Menggabungkan beberapa tautan ke dalam kalimat yang sama selama tautan tersebut kontekstual dan relevan tidak dihindari. Tetapi, lebih baik tidak dilakukan karena dapat memecah fokus pengguna.

![Image 3](//images.ctfassets.net/jf73m8fzk99f/5WtYs5iUyo5PsaMx43u2Cl/6829d1fe625b53688709a5eaaaa98075/Group_39959.png)


Link memungkinkan pengguna untuk menavigasi ke lokasi lain. Link dapat disajikan di dalam paragraf atau sebagai teks mandiri.


## **Anatomi**

Terdiri dari rangkaian judul halaman yang memiliki hierarki sesuai dengan urutan halaman. Karena ini adalah komponen navigasi, halaman di mana pengguna sedang berada, perlu diberikan *highlight*. 

![Anatomy (1)](//images.ctfassets.net/jf73m8fzk99f/4d2AIM7KgqoLOua6rnxZ7Y/d57d06dcbc5b06d890655c9694989411/Anatomy__1_.jpg)

## **Jenis dan variasi**

### *Regular*

Digunakan di atas *background* halaman yang berwarna cerah.

![Group 39938](//images.ctfassets.net/jf73m8fzk99f/1ojUBLo6uVJbD9dmSDfc6D/f57d563a3f34c53882f572c605c4ee66/Group_39938.jpg)

### *Inverted*

Digunakan di atas *background* yang berwarna gelap.

![Group 39939](//images.ctfassets.net/jf73m8fzk99f/1k7Cy3ylFNTRDwP14L3qAY/6685c4b1cc8318a382a74a7f7f635eec/Group_39939.jpg)

## ***Behaviors***

### *Clickable*

Judul halaman berperan sebagai tombol yang bisa pengguna klik untuk mengakses halaman sebelumnya.

### *Truncated*

Jika urutan halaman sudah terlalu panjang atau pada layar kecil, gunakan pendekatan *truncated* Breadcrumbs (misalnya, “Beranda” \> ... \> “Halaman Saat Ini”) 

![Truncated (1)](//images.ctfassets.net/jf73m8fzk99f/3Bxv6XFnfFYD9wLh47WT6/f055f22d2839e783cf94dc3d86c04a41/Truncated__1_.jpg)

## **Panduan penggunaan**

Gunakan Breadcrumbs ketika kita perlu memberikan jejak visual ke pengguna saat menavigasi rangkaian halaman, terutama untuk tipe situs/*platform* yang memiliki hierarki halaman yang cukup banyak dan dalam.

### Prominen namun tidak mencuri perhatian

Secara peletakan, Breadcrumbs digunakan di atas dan sisi kiri halaman (biasanya di bawah "main navigation"), posisi ini diharapkan agar Breadcrumbs tetap prominen walaupun komponen ini tergolong kecil dan tidak terlalu mencuri perhatian pengguna.

![Group 39940](//images.ctfassets.net/jf73m8fzk99f/1hXOulLVP6lKjP7lecChCt/a3d0b47765f2510c12aafcb2f80a4338/Group_39940.jpg)

### Ditampilkan secara ringkas

Urutan halaman yang terlalu banyak atau judul halaman yang terlalu panjang dapat menyebabkan distraksi. Jika menghadapi kasus tersebut, gunakan *truncated* Breadcrumbs dengan mempertahankan halaman urutan paling pertama, halaman kedua terakhir, dan halaman yang sedang diakses.

![Truncated (2)](//images.ctfassets.net/jf73m8fzk99f/4gYLvlOXxUHAO1f1Vz7gyS/6509ced96eee83dc2034e5e3ef6b451f/Truncated__2_.jpg)

## **Panduan penulisan**

### Pastikan ringkas

Usahakan agar satu Breadcrumbs tidak melebihi dari 3 kata. Pastikan untuk memeriksa panjang tulisan di desain agar tidak terpotong.

### Gunakan *sentence case*

Serta hindari tanda titik “.” di akhir kalimat.

<DoDontWrapper>
  <DoCard
    title="Do Card"
    description="Selalu gunakan Sentence case atau huruf kapital di awal kata. Kecuali untuk singkatan atau kata benda khusus."
    imageUrl="https://images.ctfassets.net/jf73m8fzk99f/2YafOli7FmegiKfEulMr12/5a5705137faa48cdcb8f934742adff4d/image.jpg" />

  <DontCard
    title="Do Card"
    description="Hindari penggunaan kapitalisasi yang tidak konsisten."
   imageUrl="https://images.ctfassets.net/jf73m8fzk99f/2KbqLinJT3NNyEv5QCLUym/c0567e4679549d5b746586998df97269/image__1_.jpg" />
</DoDontWrapper>


Komponen navigasi yang menampilkan jalur hierarki dari halaman awal ke halaman yang sedang diakses.

## **Anatomi**

![accordion-anatomy](//images.ctfassets.net/jf73m8fzk99f/24Mq8CSameXvjWSRqfYDUs/0eb32bd514db5007902bf3e80ac527f9/accordion-anatomy.png)

1. *Header* atau *Trigger*: Bagian yang dapat diklik untuk menampilkan dan menutup panel.  
2. Panel Konten: Area yang menampilkan informasi tambahan.  
3. Ikon Ekspansi: Indikator visual status panel (tampilkan/tutup).

## **Jenis dan variasi**

Accordion dapat diimplementasikan dalam dua pendekatan utama desain yaitu Card dan Custom.

### Card

Accordion Card menggunakan pendekatan terkontrol dengan margin pada sisi kiri dan kanan, cocok untuk antarmuka dengan ruang terbatas.

### Custom

Accordion Custom memberikan fleksibilitas penuh, dapat mengisi seluruh lebar halaman dan disesuaikan dengan kebutuhan desain spesifik.

### States

Komponen Accordion memiliki lima status interaksi yang berbeda. Status Default menampilkan komponen dalam keadaan netral sebelum interaksi. Saat kursor diarahkan ke header, status Hover memberikan umpan balik visual kepada pengguna. Status Focus aktif saat komponen menerima fokus keyboard, menekankan aksesibilitas.

## ***Behaviors***

![accordion Content](//images.ctfassets.net/jf73m8fzk99f/3iL7TSnHx2jjMU6BNRfZhG/4ee1365ba0fde01a2d93d8c08c5e7b3a/accordion_Content.png)

## Klik Header pada Accordion untuk menampilkan/menutup

Interaksi dengan Accordion dilakukan melalui klik sederhana pada Header Panel. Secara *default*, panel akan tertutup, namun desainer memiliki fleksibilitas untuk mengatur panel agar terbuka pada kondisi tertentu. 

Terdapat dua model utama interaksi: Single Expand, di mana hanya satu panel yang dapat terbuka pada satu waktu. Dan Multi Expand, yang memungkinkan beberapa panel terbuka bersamaan.

# **Panduan penggunaan**

## Kapan menggunakan

Accordion paling tepat digunakan dalam beberapa konteks spesifik. Konten panjang yang membutuhkan penyederhanaan, navigasi informasi bertingkat, antarmuka dengan keterbatasan ruang, dan dokumentasi interaktif adalah beberapa contoh penggunaan optimal.

## Praktik terbaik

- Pembatasan jumlah panel untuk menghindari kelebihan informasi.  
- Penggunaan judul deskriptif dan pertimbangan hierarki informasi.   
- Petunjuk visual seperti ikon atau animasi transisi dapat meningkatkan pengalaman pengguna.


Komponen antarmuka yang memungkinkan pengguna menampilkan dan menutup bagian konten secara interaktif, menghemat ruang layar, dan memudahkan navigasi informasi

![Text Expander - Anatomy](//images.ctfassets.net/jf73m8fzk99f/59XxNuI31A549hoM8j0eiE/7a9cbfa3397fd7b1bc77d0053d6e57f2/Text_Expander_-_Anatomy.png)

# **Anatomi**

![Text Expander - Anatomy 2](//images.ctfassets.net/jf73m8fzk99f/FhkTMNUUGnlqSYB71Q6cW/413c01e3faed779373b823471e4514fa/Text_Expander_-_Anatomy_2.png)

## **Jenis dan variasi**

![Text Expander - image1](//images.ctfassets.net/jf73m8fzk99f/1AHzUWWmXgrdu6QSrK7ORN/76e869f866a1bf67ac8b4e46bd99d6a2/Text_Expander_-_image1.png)

### Default \- Expand

Text Expander yang digunakan untuk membuka tampilan konten.  
![Text Expander - image2](//images.ctfassets.net/jf73m8fzk99f/4tevIpcC2krjdyX8j8Zqzx/bf44eee544c2700a6698e9eb8eefee16/Text_Expander_-_image2.png)

### Default \- Collapse

Text Expander yang digunakan untuk menutup tampilan konten.

![Text Expander - image3](//images.ctfassets.net/jf73m8fzk99f/2eTc7P30awhe5Y3mF8XzzP/d5dd701a3d864d6ecbc8dab7d6e0bc29/Text_Expander_-_image3.png)

### Inverted \- Expand

Text Expander yang digunakan untuk membuka tampilan konten di latar yang gelap.  

![Text Expander - image4](//images.ctfassets.net/jf73m8fzk99f/5mBeHtpYRluw6Fo4868BvD/ce8b48d4c5cd75765b2861add5f9792c/Text_Expander_-_image4.png)

### Inverted \- Collapse

Text Expander yang digunakan untuk menutup tampilan konten di latar yang gelap.

![Text Expander - image5](//images.ctfassets.net/jf73m8fzk99f/2kZXHYV27u4lOP9Sq3agn8/71fa03df627724769703b1871e9c9dd6/Text_Expander_-_image5.png)

## **Panduan penggunaan**

Text Expander bertujuan untuk mengurangi kepadatan teks/konten pada sebuah halaman sehingga pengguna dapat mencerna informasi secara lebih fokus dan nyaman. Tampilkan sebagian konten terlebih dahulu agar pengguna mendapatkan konteks pada informasi tersebut, lalu letakkan Text Expander setelahnya.

### Peletakan di sebelah kiri sesuai grid paragraf (*align left*)

![Frame 427320096](//images.ctfassets.net/jf73m8fzk99f/1XgevsyxXAJAnd1Q0vmHGG/88af8dfa3222877f8c5f61661abe4b69/Frame_427320096.jpg)

## **Panduan penulisan**

### Pastikan konsistensi kata

Pastikan kata yang digunakan konsisten di tempat lainnya pada suatu *platform*. Kata yang paling umum digunakan adalah: “Selengkapnya” dan “Tampilkan semua”.

### Sediakan kata untuk menutup

Biasanya ketika menulis untuk Text Expander yang berfungsi untuk menampilkan keseluruhan teks, dibutuhkan juga kata untuk menutup teks tersebut. Kata yang paling umum digunakan adalah: “Tutup” dan “Sembunyikan”. Pastikan juga konsisten di seluruh tempat pada *platform* tersebut.

![Frame 427320097](//images.ctfassets.net/jf73m8fzk99f/6ysGcuHOgSuBZJWdtEIGGN/25ad56c9ea442d268ec2d250ee240396/Frame_427320097.jpg)

### Gunakan *sentence case*

Serta hindari tanda titik “.” di akhir kalimat.

Komponen interaktif untuk meminimalisir tampilan konten yang banyak pada sebuah halaman dengan menyembunyikan konten secara sebagian atau sepenuhnya.

![container](//images.ctfassets.net/jf73m8fzk99f/lleyT27bfR9ZT991vwW10/2b944da1e41c69fbf6494edb5ac963b0/container.jpg)

## **Anatomi**

![Anatomy (2)](//images.ctfassets.net/jf73m8fzk99f/7fOrZEZuyIJOM18cqdOkw1/a127a876a1a8c5f8a073ce021b08e949/Anatomy__2_.jpg)

## **Jenis dan variasi**

### States

Terdapat 5 *states* untuk Search, yaitu Default, Hovered, Focused, Filled dan Error. Berikut contoh gambar dan penjelasannya:

#### Search Bar

![Frame 427320066](//images.ctfassets.net/jf73m8fzk99f/4iGpQyPj9e4tAfHvZQEiab/04f13b179c56182a833d6c8cf42f8306/Frame_427320066.jpg)

#### Search Icon

![Frame 427320067](//images.ctfassets.net/jf73m8fzk99f/7jMJbaami5wTtjmDDIbUbD/b5a5ad80ad957670407ee389e87a478c/Frame_427320067.jpg)

## ***Behaviors***

### Pindah ke halaman lain

Pengguna pindah ke satu halaman khusus pencarian saat mereka mengklik kotak Search (mode fokus) atau saat mengetik kata pencarian (*typing*). Kami merekomendasikan *behavior* ini jika ada kebutuhan untuk menambahkan informasi pendukung terkait pencarian seperti riwayat, rekomendasi, dan lain-lain.  

![container (1)](//images.ctfassets.net/jf73m8fzk99f/5XOdFVTkTFnb53DGOAbici/99900a718098058e4aaa1c8b779138ad/container__1_.jpg)

### Berada di halaman yang sama

Pencarian tetap berada di halaman yang sama. *Behavior* ini kami rekomendasikan jika ingin menampilkan hasil pencarian secara instan ketika pengguna masih dalam mode fokus atau mulai mengetik.

![container (2)](//images.ctfassets.net/jf73m8fzk99f/6VQe8rzJSZctbSQFN4lXom/66bea64d08842b61de3ffb67fb5c9622/container__2_.jpg)

## **Panduan penggunaan**

Search memudahkan pengguna mencari dan menemukan informasi lewat memasukkan kata atau kalimat kunci yang relevan.

### Penempatan

Search berada di tengah dan biasanya di bagian atas layar.  

![container (3)](//images.ctfassets.net/jf73m8fzk99f/5Pf6esQwKl9j5EU9aE8oFR/6f31d2ad116b84b1c376b9f5465dfeff/container__3_.jpg)

### Penggunaan *error*

<DoDontWrapper>
  <DoCard
    title="Do Card"
    description="Helper text hanya digunakan untuk error yang disebabkan oleh pengguna seperti kata kunci pencarian belum diketik."
    imageUrl="https://images.ctfassets.net/jf73m8fzk99f/1P5o5Y1NpAU6PxbPnK6y2C/f49b49878390a612ed59b04d8cc935b5/image__2_.jpg" />

  <DontCard
    title="Don’t Card"
    description="Helper text tidak digunakan untuk memberikan informasi pencarian tidak ada hasil."
    imageUrl="https://images.ctfassets.net/jf73m8fzk99f/1kFzkeqMr62WFAcewQk3oG/7ee4319088aa0c37d02fa0878f8a7ca2/image__3_.jpg" />
</DoDontWrapper>

Untuk kasus "Tidak ada hasil" bisa menggunakan komponen seperti ini: 

![Frame 427320068](//images.ctfassets.net/jf73m8fzk99f/3PImWI34DagkH1KXdbmR0U/9f3d4579c3ca5e14ac99ec5971c361be/Frame_427320068.jpg)

## **Panduan penulisan**

Untuk mencapai penulisan pada fitur Search yang jelas, ringkas, dan lugas:

### Gunakan kata kerja aktif/call to action  
Tulis instruksi atau petunjuk penggunaan yang spesifik dengan kata kerja aktif, yang sesuai dengan kegiatan yang pengguna lakukan. Misalnya kata “Cari” atau “Ketik”. 

### Lengkapi kalimat dengan objek atau tipe informasi  
Jelaskan fungsi atau hasil dari fitur tersebut ke pengguna. 

![container](//images.ctfassets.net/jf73m8fzk99f/6bXmEVjh4vXeqIvW4at6Qy/4732195cddc1937ce7ab688867edb478/container.jpg)

Di fitur ini kami menggunakan kata “Cari” untuk menekankan fungsi fitur, dan “modul ajar”, “aksi nyata”, dan lain-lain untuk menjelaskan jenis informasi yang bisa dicari beserta cakupannya.


Sri Izzati Soekarsono

Search memudahkan pengguna mencari dan menemukan informasi lewat memasukkan kata atau kalimat kunci yang relevan.


![Stepper](//images.ctfassets.net/jf73m8fzk99f/6OIj8hs76r0v8PQg8ARp5U/21e9e8579709e3e4aad201cc10676e5f/stepper.png)

## **Anatomi**

![Anatomy](//images.ctfassets.net/jf73m8fzk99f/7IbdIt7VFC0WrDJYW8i5cX/394edca7802d2f0abb862c98638b6581/Anatomy.png)

## **Jenis dan variasi**

### States

Terdapat 5 *states* untuk Stepper, yakni Default, Filled, Focused, dan Disabled. Berikut contoh gambar dan penjelasannya:

![Content](//images.ctfassets.net/jf73m8fzk99f/5oTzp2ifiiE2VYsgLn2kKH/4994e0f48ddfeb09867aad10bbe43a2a/Content.png)

### Default

Digunakkan apabila ingin menunjukkan bahwa pengguna belum berinteraksi dengan komponen tersebut. 

![Default](//images.ctfassets.net/jf73m8fzk99f/44VuUvxFeQQFERIu4zfGII/384c821795e0623e57e8abf9370823a0/Default.png)

### Filled

Digunakkan apabila ingin menunjukkan bahwa pengguna sudah berinteraksi dengan komponen tersebut.

![Filled](//images.ctfassets.net/jf73m8fzk99f/6rMyScfI2QafTAwRZuSSY3/6cbc3c081a0029ebac33a96793a898c7/Focused.png)

### Focused

Digunakan untuk menunjukkan bahwa komponen sedang dalam keadaan aktif atau dipilih oleh pengguna, biasanya ditandai dengan *highlight* atau border khusus untuk memberi tahu pengguna bahwa mereka dapat berinteraksi dengan komponen tersebut.

![Focused](//images.ctfassets.net/jf73m8fzk99f/n1RVQ2AmPJ1uPSOqTXErN/da0096815daa809371ca59d267e34bf4/Focused.png)

## Disabled

Digunakkan apabila ingin menunjukkan bahwa pengguna tidak bisa menggunakan komponen tersebut karena ada sebuah aturan yang melarang pengguna.

![disabled](//images.ctfassets.net/jf73m8fzk99f/1QcOJcc12vcJaI25BYW3W1/4c0f8dcdf10bb8cbb515e39832c09312/disabled.png)

### Error

Digunakan ketika ingin menunjukkan ke pengguna bahwa ada hal yang salah yang telah dilakukan di area komponen ini yang harus dikomunikasikan secara jelas ke pengguna.

![Error](//images.ctfassets.net/jf73m8fzk99f/2ib2eWbgqpwvVY8AUdNbXQ/d7397e5774e6e2d2e89754e27cda9763/Error.png)

## **Panduan penggunaan**

Gunakan Stepper apabila kamu ingin pengguna menginput sebuah *value* angka yang bukan tanggal.

Pengguna bisa menambah atau mengurang jumlah angka menggunakan Stepper ini.

Contoh: Pengguna diminta untuk membeli alat pensil, pengguna bisa menambah atau mengurangi jumlah pensil tersebut.

<DoDontWrapper>
  <DoCard
    title="Disarankan"
    description="Menggunakan copy atau elemen visual lainnya untuk menjelaskan konteks."
    imageUrl="https://images.ctfassets.net/jf73m8fzk99f/7Kwv0JnUf6xpnSVzmTln1R/eb36732be5b8fb80b9a300524e2f5db6/stepper_dos.png" />

  <DontCard
    title="Don’t Card"
    description="Use concise, easy to scan, and clear button labels to indicate the next action to the user."
            imageUrl="https://images.ctfassets.net/jf73m8fzk99f/64Ydgh9MxQ9stPgbAgzHJl/af3de57c64f9d2bab940d233a13cf42b/stepper_donts.png" />
</DoDontWrapper>

### Gunakan penjelasan konteks

Gunakan komponen ini dengan sebuah *text* atau elemen visual di sebelah untuk menjelaskan konteks jumlah yang harus dipilih itu untuk apa.

### Hindari komponen bersebelahan

Jangan menggunakan komponen ini bersebelahan satu sama lain tanpa ada konteks, karena dapat membingungkan pengguna untuk tau harus melakukan apa.  

## **Kontributor**

Gupita Prameswari

Sebuah komponen yang digunakkan untuk mengatur nilai secara bertahap, dengan tombol **"+"** untuk menambah nilai, tombol **"-"** untuk mengurangi nilai, dan tampilan angka di tengah yang menunjukkan nilai saat ini.

![Header](//images.ctfassets.net/jf73m8fzk99f/4GfBVOKlOs6tOXCaOAhhrD/ae83552938a6d0277fbce3d34d0f3abd/Header.png) 

## **Anatomi**

### Default Empty State ###

![Anatomy 1a](//images.ctfassets.net/jf73m8fzk99f/4IZ5PoKpJYwfkUgw7Jx6eU/8e3a2201430fc0e558710177f2c58dfd/Anatomy_1a.png)

### Empty State dengan aksi ###

![Anatomy 2a](//images.ctfassets.net/jf73m8fzk99f/3uacLvmsnsLb3sEmuQyUDd/c8643e4ef270b97a4d21394877cb4d60/Anatomy_2a.png)

## **Jenis dan variasi**

### Default Empty State ###

Komponen visual yang digunakan untuk memberikan informasi kepada pengguna saat tidak ada data, konten, atau hasil yang dapat ditampilkan, tanpa menyertakan opsi tindakan langsung. 
![Anatomy 1b](//images.ctfassets.net/jf73m8fzk99f/46Le88SBgMLrX0nRThS5Q6/358ab689f7c2b8f4afd1d3ac5fb12539/Anatomy_1b.png)

### Empty State dengan aksi 

Komponen visual yang digunakan untuk memberikan informasi kepada pengguna saat tidak ada data, konten, atau hasil yang dapat ditampilkan, namun dilengkapi dengan elemen tindakan (*action*) untuk membantu pengguna mengambil langkah berikutnya.

![Anatomy 2b](//images.ctfassets.net/jf73m8fzk99f/1q1gyRXt3L90jjAteQrd2r/de2fe9b436a1d2944f8752c2ab0a7f92/Anatomy_2b.png)

## ***Behaviors***

### Ditampilkan ketika data tidak tersedia 

Empty State yang muncul saat data tidak tersedia dirancang untuk memberikan konteks kepada pengguna dan menawarkan solusi untuk melanjutkan.

### Dapat ditampilkan dalam satu layar penuh atau menjadi bagian dari suatu komponen visual lain

Empty State layar penuh digunakan untuk halaman mandiri tanpa data utama, seperti *dashboard* kosong. Tujuannya adalah memberikan fokus penuh pada pesan yang ingin disampaikan tanpa gangguan dari elemen lain, memastikan pengguna memahami konteks dengan jelas. Selain itu, Empty State sebagai bagian dari komponen visual diterapkan pada elemen tertentu dalam halaman seperti Table, Card, dan lain-lain. 

#
## **Panduan penggunaan**

### Memberikan konteks

Empty State harus menjelaskan alasan mengapa halaman kosong atau mengapa data tidak bisa ditampilkan.

### Mengarahkan tindakan pengguna

Selalu informasikan langkah selanjutnya yang harus dilakukan oleh pengguna.

<DoDontWrapper>
  <DoCard
    title="Do Card"
    description="Berikan konteks yang detail untuk membuat pengguna mengetahui konteks kenapa Empty State ini muncul."
    imageUrl="https://images.ctfassets.net/jf73m8fzk99f/57uLn0rcYf4WalXFIxFmeG/9121b58a83f65e066c28d886b0573bdd/do_card_empty_state.png" />

  <DontCard
    title="Do Card"
    description="Hindari menggunakan pesan yang generik, tanpa konteks atau arahan yang dapat membuat pengguna frustrasi."
 imageUrl="https://images.ctfassets.net/jf73m8fzk99f/2rdkQ1BN5Lt0lnNnCedsSv/036d0b1ff1b8aefd34fa6eec536bf3de/dont_card_empty_state.png" />
</DoDontWrapper>

## **Panduan penulisan** ##

Secara umum, Empty State (halaman kosong) digunakan ketika belum/tidak ada informasi yang dapat ditampilkan kepada pengguna, contohnya:

* Pada halaman riwayat dan pengguna belum memiliki riwayat apapun yang tercatat di dalam sistem.  
* Pada halaman dasbor dan pengguna belum pernah melakukan tindakan apapun di dalam *platform*.  
* Pada halaman hasil pencarian ketika sistem tidak dapat menemukan hasil pencarian yang sesuai dengan kata kunci terkait.  
* Dan lainnya.

### Jelaskan situasi ###

Penulisan pada halaman Empty State perlu didesain dengan fokus untuk memberikan informasi sejelas mungkin mengenai apa yang sedang terjadi. Pastikan penulisan mencakup informasi terkait fungsi dari halaman atau informasi yang akan muncul nantinya.

### Dorongan untuk melakukan tindakan ###

Penulisan pada halaman Empty State dapat juga mencakup informasi mengenai hal apa yang dapat dilakukan oleh pengguna. Gunakan pilihan kata yang sifatnya mendorong (*encouraging*) agar pengguna dapat memahami bahwa mereka perlu melakukan sesuatu agar halaman ini tidak lagi kosong. Jika ada aksi yang bisa langsung dilakukan pengguna di halaman tersebut, dorongan ini bisa ditampilkan melalui interaksi tombol atau *clickable text* untuk memudahkan.

### Penggunaan kapitalisasi ###

Judul dari halaman Empty State menggunakan kapitalisasi judul (*title case*), sedangkan bagian deskripsi menggunakan kapitalisasi kalimat (*sentence case*).

![Empty State Penggunaan Kapitalisasi](//images.ctfassets.net/jf73m8fzk99f/784pMCqJOMhRT9cv30tWog/9b77d575a2e520875854c2aad08f3fbf/Empty_State_Penggunaan_Kapitalisasi.png)


Atika Sulistyan

Empty state adalah kondisi di mana sebuah antarmuka tidak memiliki data atau konten untuk ditampilkan kepada pengguna.

## **Anatomi**
![Anatomy Modal](//images.ctfassets.net/jf73m8fzk99f/2nsjJHIRrLYnOFuvBtl0la/36aedab72f7579475436f38633b5e334/Anatomy_Modal.png)

## **Jenis dan variasi**

### Passive Modal ###
Tidak membutuhkan aksi.
![Passive Modal](//images.ctfassets.net/jf73m8fzk99f/2dqBim6d6QRuwRJlG1grnV/99df01b94d57d2e588d671bd6a41d0c2/Passive_Modal.png)

### Transactional Modal ### 
Membutuhkan aksi.
![Transactional Modal](//images.ctfassets.net/jf73m8fzk99f/34kflo7YBNhmCE6Mh1gWEw/cce6288019b196e66639e1e8da99d228/Transactional_Modal.png)

### Scrollable Modal ###  
Saat konten yang ditampilkan melebihi kontainer Modal.
![Scrollable Modal](//images.ctfassets.net/jf73m8fzk99f/4NZc7Wg5Kqda6wjhCOvCfZ/8c915cdacc973c98322cd7bea9f0b768/Scrollable_Modal.png)

## ***Behaviors***

### Seek for attention ###
Modal muncul ketika ada informasi yang membutuhkan atensi atau konfirmasi dari pengguna untuk segera melakukan sebuah aksi tertentu.

### Feedback ###
Modal muncul ketika ada informasi yang membutuhkan umpan balik dari pengguna sehingga proses yang sedang berjalan dapat berlanjut.

### Progres ###
Modal muncul ketika ada informasi yang masih jadi bagian dari proses besar yang sedang berjalan.

### Additional space ###
Modal muncul ketika ada informasi yang tidak bisa ditampilkan secara lengkap di suatu halaman namun membutuhkan tempat yang lebih luas dan dalam.

## **Panduan penggunaan**

### As support ### 
Gunakan Modal sebagai komponen pendukung dari proses yang sedang berjalan dan jadikan Modal sebagai pendukung pengguna untuk sampai ke tujuan mereka.

### Context first ###
Perhatikan konteks dan alur pengguna saat ingin menampilkan Modal.

### Problem solving ###
Permudah alur pengguna sehingga memberikan solusi dari sebuah masalah atau informasi. Seperti nasihat yang satu ini, "*No one likes to be interrupted, but if you must, make sure it’s worth the cost*".

## **Panduan penulisan**

Modal memiliki banyak jenis komponen yang memenuhi segala jenis konten. Sehingga, tidak ada batas karakter untuk tulisan. Namun, kami sarankan tetap berpedoman pada prinsip penulisan, yakni ringkas untuk memastikan keterbacaan tetap terjaga. Berikut panduan menulis untuk komponen ini.

### Tentukan jenis pesan

Penulisan untuk Modal dimulai dengan menentukan jenis pesannya. Dengan menentukan jenis pesan, kita dapat memilih struktur pesan, gaya bahasa, serta jenis komponen yang pas agar tulisan dan visual saling bersinergi. Berikut beberapa jenis pesan yang dapat disampaikan melalui Modal:

| Jenis Pesan | Keterangan | Panduan Penulisan |
| :---- | :---- | :---- |
| Konfirmasi | Meminta pengguna untuk mengonfirmasi aksi yang ingin dilakukan. | Instruktif |
| Informasi | Membagikan informasi penting yang perlu diketahui pengguna. Bisa berupa pesan peringatan juga. | Membantu |
| Kesalahan | Mengkomunikasikan informasi kritis tentang masalah yang perlu diselesaikan oleh pengguna sebelum mereka dapat melanjutkan aksi. | Mendukung |

### Perhatikan struktur pesan

Berikut struktur pesan yang biasa digunakan untuk Modal:

#### Judul

- Semua Modal harus memiliki judul. Judul mengkomunikasikan inti pesan, seperti hasil akhir, dampak, atau kesimpulan dari suatu aksi. Sebisa mungkin pengguna harus mengerti apa yang terjadi hanya dengan membaca judulnya.

- Judul sebisa mungkin berupa kalimat lengkap (subjek \+ kata kerja), tidak menggunakan titik, dan menggunakan *sentence case*. 

#### Deskripsi

- Deskripsi atau *subtitle* biasanya berisi informasi tambahan atau konteks yang perlu diketahui pengguna untuk melanjutkan aksinya. Biasanya disertakan dengan alasan kenapa Modal muncul, apa yang pengguna harus lakukan, dan apa yang terjadi jika pengguna tidak melakukannya.

- Deskripsi biasanya berupa kalimat lengkap (subjek \+ kata kerja \+ objek), menggunakan titik atau tanda baca berhenti lainnya di akhir kalimat, menggunakan *sentence case*. Hindari mengulangi konten dari judul.

#### Tombol

- Biasanya tombol berisi kata yang sama dengan yang disebutkan dalam judul. Misalnya, jika judul adalah "Kirim data," maka tombol tindakan utamanya adalah "Kirim".  
- Gunakan kata kerja imperatif seperti "Simpan", "Hapus", atau "Kirim" untuk menggambarkan tindakan yang akan dilakukan oleh pengguna tersebut.  
  - Untuk beberapa kasus dan sifat produk, menggunakan kata yang ambigu seperti “Lanjut” tidak dihindari. Hal ini karena beberapa pengguna terintimidasi dengan kata kerja imperatif. Khususnya kata kerja imperatif yang negatif seperti “Hapus” dan “Tolak”. Sesuaikan dengan perilaku pengguna dan diskusikan dengan tim terutama Tim Riset.

Selaraskan dengan ilustrasi

- Ilustrasi biasanya termasuk dalam komponen, namun bisa juga tidak termasuk. Diskusikan dengan tim terutama desainer dan ilustrator apakah ilustrasi dibutuhkan atau tidak.

- Jika dibutuhkan, pesan yang ditampilkan bisa juga mendukung ilustrasi (atau sebaliknya). Biasanya ini dilakukan untuk mendukung keselarasan pesan dan visual atau untuk sekedar menyisipkan sedikit kesenangan atau delight.


Modal adalah komponen yang muncul di tengah-tengah layar dan menutupi sebagian atau seluruh konten utama halaman. Ketika Modal muncul, pengguna biasanya tidak dapat berinteraksi dengan komponen lain di halaman tersebut hingga mereka menutup Modal tersebut atau menyelesaikan tindakan yang diminta di dalamnya.


## **Anatomi**

![Header bar](//images.ctfassets.net/jf73m8fzk99f/oI6wGJWsrE5Uwgdfx6NQH/df4a5062460a69dbaf8074c11e51ddba/1.png)

## **Jenis dan variasi**

### Small Header

Ukuran Header yang ringkas, cocok untuk layar dengan ruang terbatas atau tampilan minimalis.

![Header bar](//images.ctfassets.net/jf73m8fzk99f/oI6wGJWsrE5Uwgdfx6NQH/df4a5062460a69dbaf8074c11e51ddba/1.png)

### Large Header

Ukuran Header yang lebih tinggi, ideal untuk menampilkan informasi tambahan atau memberikan kesan visual yang lebih menonjol.

![Large header](//images.ctfassets.net/jf73m8fzk99f/34BeWbM2unE4wQUEJ86H4c/6da7eb289f7444f0e44b06c578d86ebd/2.png)

### Transparent Header

Ukuran Header yang ringkas dengan *background* transparan.
![Transparent header bar](//images.ctfassets.net/jf73m8fzk99f/31v3WR22lrP9G72TwWLLEJ/803fd015f26ad35c564d7fe24958d08c/3.png)

#### Variasi

Terdapat 4 *states* untuk *Text field*, yaitu Default, Text action active, 1 icon action active, 2 icons action active, dan \>2 icons active. Berikut contoh gambar dan penjelasannya:
![Variant header bar](//images.ctfassets.net/jf73m8fzk99f/z33FO96ixkeVp4sfKOcVj/6ac1ba33f9ad096f35c81fa1982a65e1/Screenshot_2024-12-20_at_14.28.23.png)

**Default**

Tampilan Header tanpa interaksi atau aksi aktif. Biasanya hanya menampilkan elemen utama seperti judul dan navigasi.

**Text Action Active**

Tampilan Header dengan interaksi menu singkat.

**1 Icon Action Active**

Header dengan satu ikon seperti ikon pencarian, notifikasi, atau menu tertentu. 
**2 Icons Action Active**

Header dengan dua ikon seperti ikon pencarian, notifikasi, atau menu tertentu.

**\>2 Icons Active**

Header dengan satu ikon seperti ikon pencarian, notifikasi, atau menu tertentu. Tata letak harus dirancang agar tetap jelas dan tidak membingungkan, dengan mempertahankan jarak dan hierarki visual yang baik.


Header atau Header Bar adalah komponen antarmuka di bagian atas layar yang berfungsi sebagai navigasi utama atau penyedia informasi penting. Komponen ini mencakup elemen seperti judul halaman, ikon navigasi, dan tombol aksi utama (seperti pencarian atau menu).

![Table](//images.ctfassets.net/jf73m8fzk99f/35GBkHSfhxCl6J6Fh6BJZX/9c87a2450786d98e1067b73e8e9801f1/Anatomy-4.png)

## **Anatomi**

![Anatomy](//images.ctfassets.net/jf73m8fzk99f/58vLKlb6F2yLPW3BHX7m30/e97f9c0850cb1effaec76b824886bac1/Anatomy.png)

## **Jenis dan variasi**

### *Plain (Optimizing interaction) or Stripes (Optimizing read-only feature)*

Gunakan Table *plain* ketika ada interaksi spesifik yang dilakukan pada Table tersebut dan berimbas pada perubahan *interface* Table karena **sifat datanya yang dinamis** (contoh: Table dengan fungsi *checklist* untuk melakukan perubahan). Gunakan Table *striped* ketika tidak ada interaksi spesifik yang merubah *interface* Table, dan **sifat datanya cenderung banyak dan statis** (contoh: Table tanpa *checklist*).
![Plain & Stripes](//images.ctfassets.net/jf73m8fzk99f/35a1uT9bcbzLtj7I0hVbjG/faba69f7c8f2c9cdff130b5220a2ecdd/Anatomy-1.png)

### *Selection*

Beberapa Table memungkinkan pengguna untuk memilih baris, yang kemudian dapat digunakan untuk mengambil tindakan. Jika sebuah Table memiliki baris yang dapat dipilih, maka Table tersebut harus memiliki *checkboxes* di sebelah kiri Table.

Semua Table memiliki status *hover*, terlepas dari apakah tindakan atau pemilihan dapat dilakukan. Hal ini membantu pengguna dalam melihat konten pada satu baris secara lebih jelas.
![Selection](//images.ctfassets.net/jf73m8fzk99f/3smPnUwAST0xoVdKxkVd3A/a7b338e56b1b0ed1b4916ca403a52831/Anatomy-3.png)

## ***Behaviors***

### *Text overflow*

Di setiap *cell*, maksimal baris kalimat yang dapat diperlihatkan adalah 2 baris di perangkat desktop dan 3 baris untuk perangkat *mobile* untuk memastikan kemudahan keterbacaan. Melebihi itu, gunakan *truncate* atau *scrollable table* (hanya untuk *mobile*).
![Text Overflow](//images.ctfassets.net/jf73m8fzk99f/7nt4md2ScQBI8Xm6qqMOyT/16481e0e10078e6aa695f97e133fc19e/Preview.png)

## **Panduan penggunaan**

Selain sifatnya yang statis dan interaktif, Table adalah elemen yang dinamis dalam tampilannya baik di dalam aplikasi *mobile* maupun desktop.

### Table di perangkat *mobile/App (Fit* dan *Scrollable)*

Dalam desain untuk perangkat *mobile*, komponen Table dapat dibagi menjadi dua jenis utama berdasarkan cara Table ditampilkan di layar: *Fit* dan *Scrollable*.

* ***Fit***  
  ![Fit Table](//images.ctfassets.net/jf73m8fzk99f/3MKpMb7DGdcH0jYgKtqtkz/cf6b7af00c88a3273565049a09bd737a/Anatomy-5.png)  
  Table jenis fit dirancang agar seluruh isi Table dapat ditampilkan secara utuh dalam lebar layar perangkat tanpa perlu digeser (*scroll*). Fit cocok untuk Table dengan jumlah kolom yang sedikit atau data yang sederhana sehingga dapat dengan mudah terbaca tanpa kehilangan konteks.  
  * Keunggulan:  
    * Memastikan semua data langsung terlihat tanpa interaksi tambahan.  
    * Menawarkan pengalaman yang lebih intuitif, terutama untuk informasi yang bersifat ringkas.  
  * Batasan:  
    Tidak cocok untuk data kompleks atau Table dengan banyak kolom karena akan memaksa teks atau elemen menjadi terlalu kecil dan sulit dibaca. 

  * Variasi:  
    Terdapat 3 variasi Table Fit sesuai dengan ukuran penggunaannya, yaitu: *Small*, *Medium*, dan *Large.*  

* ***Scrollable***  
  ![Scrollable Table](//images.ctfassets.net/jf73m8fzk99f/2bawMTPPZLroPgIafO0eW3/8b0f26039195f3019395792bbc548cf4/Anatomy-6.png)
  Table jenis *scrollable* memungkinkan pengguna menggulir secara horizontal untuk melihat data pada kolom yang tidak cukup dimuat di layar. Scrollable ideal untuk Table dengan banyak kolom atau data kompleks yang memerlukan lebih banyak ruang daripada lebar layar perangkat.  
  * Keunggulan:  
    * Menjaga ukuran teks dan elemen tetap proporsional sehingga lebih mudah dibaca.  
    * Fleksibilitas untuk menampilkan data yang lebih kaya tanpa mempengaruhi tata letak.  
  * Batasan:  
    * Membutuhkan interaksi tambahan untuk mengakses semua data, yang dapat memperlambat pengalaman pengguna.  
    * Potensi kehilangan konteks jika tidak ada penanda atau "sticky column" sebagai referensi.

### Rata kiri untuk data teks

Seperti halnya paragraf teks, data teks dalam Table selalu di rata kiri. Jangan pernah menggunakan perataan tengah.  
![Text Alignment](//images.ctfassets.net/jf73m8fzk99f/369w6OCJ1F1aXJJOJBpLfu/6786e4c60b48ea84e49a88c10dc55357/Preview-1.png)

### Perhatikan perataan vertikal

Semua konten dalam Table harus rata secara vertikal di tengah baris/*row* untuk memastikan keseimbangan visual yang tepat.  
![Vertical Alignment](//images.ctfassets.net/jf73m8fzk99f/61nLU1GhqpvbbI4mANGWjp/79810c2cfd5fd020e80a678c7c1a76e1/Preview-3.png)

### Gunakan en dash (–) untuk *values* yang hilang

Saat terdapat celah dalam data, gunakan en dash (–) untuk mewakili nilai yang kosong atau tidak berlaku.  
![En Dash](//images.ctfassets.net/jf73m8fzk99f/6EyNLdPB4lpZ5AXoJrXT7A/46e720e80efdb7ef392566493e0336a3/Preview-2.png)

### Hindari varian *Stripe* untuk Table yang interaktif

Banyaknya variasi warna karena *interaction states* dalam Table interaktif dapat membingungkan pengguna di dalam Table *Stripe*.

## **Panduan penulisan**

![Copywriting](//images.ctfassets.net/jf73m8fzk99f/J2YJDbswC52Fxmlvu5P9V/fc03963449e36e53fa1c3fb8ee5fd23b/Screenshot_2024-12-20_at_15.10.02.png)

### Gunakan *title* *case* untuk judul dan isi *column* 

Maksimal 2-3 kata untuk memudahkan pemahaman pengguna terhadap data set dalam kolom yang dimaksud. Serta hindari tanda titik “.” di akhir kalimat.

### Singkat dan jelas

Maksimal 2-3 kata untuk memudahkan pemahaman pengguna terhadap data set dalam kolom yang dimaksud. 

Clarissa Adeline

Table digunakan untuk menampilkan satu set data dalam bentuk kolom dan baris. Komponen Table dalam desain sistem biasanya dirancang untuk memastikan konsistensi dalam tampilan dan interaksi dengan data yang mencakup desain elemen-elemen seperti header table, baris data, serta tindakan yang tersedia dalam Table (seperti penyortiran, pencarian, atau paginasi). 
Bentuk aplikasi Table dapat dibuat responsif (untuk berbagai perangkat) dan juga interaktif sesuai kebutuhan tindak lanjut data yang ditampilkan.

## **Anatomi**

![Anatomy](//images.ctfassets.net/jf73m8fzk99f/8MVy9yrEyf26YSawu1YpF/78ea831fde79337ceddfcd1e7943d3e6/Anatomy.png)

Komponen Radio terdiri dari beberapa elemen kunci yang bekerja secara harmonis untuk menciptakan pengalaman pemilihan yang intuitif. Inti dari komponen ini adalah lingkaran kecil yang dapat dipilih, yang berubah status dari tidak aktif menjadi aktif ketika dipilih.

## **Jenis dan variasi**

### Radio

Radio yang dapat berdiri sendiri sebagai elemen atom, memberikan fleksibilitas maksimal dalam desain.

![container](//images.ctfassets.net/jf73m8fzk99f/7o1pa5otfmwozTBgYMvSu4/67077311dc52a4daef8f635bc1c67f49/container.png)

### Radio with label

Umumnya digunakan dalam konteks formulir, memberikan konteks dan kejelasan tambahan pada pilihan yang tersedia.

## ***Behaviors***

### Navigasi menggunakan *keyboard*

Interaksi dengan komponen Radio dirancang untuk menjadi intuitif dan mudah diakses. Navigasi menggunakan *keyboard* memungkinkan pengguna bergerak di antara opsi tanpa memerlukan *mouse*. Ketika Radio mendapatkan fokus *keyboard*, komponen akan menampilkan cincin biru yang jelas, memberikan indikasi visual yang kuat tentang elemen mana yang saat ini aktif.

![focus](//images.ctfassets.net/jf73m8fzk99f/2FQIyEhHAB3Mo95aWs3QvY/dd3d35e524a76b00cb7febc8900403b5/focus.png)

### Hanya satu aktif dalam satu inputan

Batasan kunci dalam interaksi Radio adalah sifat eksklusifnya. Hanya satu Radio dalam satu kelompok yang dapat dipilih pada satu waktu. Pengguna dapat mengaktifkan seleksi dengan mengklik Radio itu sendiri atau labelnya, menciptakan mekanisme interaksi yang fleksibel.

## **Panduan penggunaan**

### Jangan gunakan Radio ketika hanya ada satu opsi pilihan

Komponen ini paling efektif digunakan dalam skenario dengan pilihan eksklusif dan opsi terbatas. Dalam merancang formulir atau antarmuka pemilihan, disarankan untuk membatasi jumlah opsi Radio menjadi kurang dari lima untuk menghindari kompleksitas berlebihan.

![container](//images.ctfassets.net/jf73m8fzk99f/1cJwNt50kCJ7l20bwcEgy9/f87d45c7fd4d72dff7b09ffbd6193504/container.png)

### Selalu gunakan label sebelum daftar pilihan yang secara jelas menjelaskan apa opsi yang ditampilkan

Label memainkan peran krusial dalam keberhasilan komponen Radio. Label harus ditempatkan sebelum daftar pilihan dan secara jelas menjelaskan konteks pilihan. Fleksibilitas dalam penempatan label memungkinkan desainer untuk beradaptasi dengan berbagai tata letak. Label dapat ditempatkan di atas atau di samping Radio button.


Komponen Radio merupakan elemen antarmuka pengguna yang memungkinkan pengguna memilih satu opsi dari sekelompok pilihan dengan mekanisme seleksi tunggal.

![Tabs](//images.ctfassets.net/jf73m8fzk99f/5qQfhGBE2AqFZUBTxJWxC2/d4cdd123bb4cb917c01f4331b3889314/Preview.png)

## **Anatomi**
![Anatomi](//images.ctfassets.net/jf73m8fzk99f/4J5wfEYutc5fQ4jA1PkQ9D/cd3efae8f43281b8ad3bb8092b06262f/Anatomy.png)

## **Jenis dan variasi**

### Fixed Tabs

Fixed Tabs menampilkan semua tab pada satu layar, dengan lebar masing-masing tab yang tetap (*fixed*).

![Fixed Tabs](//images.ctfassets.net/jf73m8fzk99f/2OYCmuPSoV8PPq29ndFvCR/465e480ab873017aa6b6359483d5a260/Content.png)

### Scrollable Tabs

Scrollable Tabs ditampilkan tanpa lebar tetap dan memungkinkan sebagian Tabs terlihat terpotong untuk dapat digeser atau digulir (*scroll*) oleh pengguna. Gunakan jenis Tabs ini bila jumlah Tabs atau ukuran tetap setiap Tabs yang disejajarkan melebihi lebar minimum layar.

![Scrollable Tabs](//images.ctfassets.net/jf73m8fzk99f/47cqbuH9EB9zurNAhui44Y/29d52b64c04397bfbaca9b09cff51c02/Content-2.png)

### States

Terdapat 5 *states* untuk Tabs, yakni Default, Focused, Hovered, Pressed, dan Disabled. Berikut contoh gambar dan penjelasannya:  

![Tab States](//images.ctfassets.net/jf73m8fzk99f/3m1U21ydGgW1vk0u9T2yu0/eb54ba054a52e8855fc01dfccc89b84b/states.png)

* Default: Tampilan standar saat pengguna belum melakukan aksi apapun.  
* Focused: Tampilan Tabs saat *keyboard* fokus pada sebuah Tabs.  
* Hovered: Tampilan Tabs saat mouse *hover* pada sebuah Tabs.  
* Pressed: Tabs terpilih menunjukkan halaman yang sedang dilihat pengguna.  
* Disabled: Tabs tidak dapat dipilih pengguna.

## ***Behaviors***

### Penempatan

Secara penempatan, Tabs dapat digabungkan dengan komponen seperti Header atau disematkan di suatu bagian.  
![Placement](//images.ctfassets.net/jf73m8fzk99f/5LQMQxhvLg53yDJdqRDRhM/5242f70f13215e68f5c41c6c8d5f1b9e/Content-1.png)

## **Panduan penggunaan**

Tabs adalah elemen interaktif yang membantu pengguna untuk mempelajari lebih dari 1 kategori informasi di dalam satu halaman.

### Tidak dapat mengaktifkan lebih dari 1 tab sekaligus

Bila ada kebutuhan ini, dapat refer ke komponen Filter.
![Active Tab](//images.ctfassets.net/jf73m8fzk99f/4VTs31hp4y2ZprbVHtF8zg/919e9f2a201b19cab22a07d0f7d58905/Preview-1.png)

### Tombol Tabs tidak mengarahkan pengguna ke halaman lain

Tabs bertujuan untuk mengumpulkan beberapa kategori informasi di bawah satu induk konteks. Sehingga untuk mempermudah pencernaan informasi, peralihan dari satu Tabs ke lainnya tidak boleh berpindah halaman.

### Terlalu banyak Tabs

Bila terdapat banyak Tabs yang melebihi batas tampilan layar secara horizontal, gunakan variasi Scrollable Tabs. Tidak diperbolehkan untuk menggunakan *truncate* untuk membantu keterbacaan pengguna.
![Tabs Amount](//images.ctfassets.net/jf73m8fzk99f/1la84jTtDXvYMsuFfUZu9e/625845823bf8ba4c1a6a69fa9f773c6a/Preview-2.png)

### Tabs yang bersarang

Hindari menggunakan beberapa tingkat Tabs. Sebagai gantinya, pertimbangkan untuk menggunakan komponen organisasi lain seperti *side navigation* atau Accordion sesuai dengan kasus dan kebutuhannya. Tabs yang bersarang dapat diterima jika ada tingkat pemisahan yang tinggi antara dua pengalaman Tabs, atau jika tujuan penggunaannya berbeda. Jangan mengorbankan kejelasan hierarki dengan menggunakan variasi atau orientasi Tabs yang sama.  
![Nested Tabs](//images.ctfassets.net/jf73m8fzk99f/5sQ7tpMei8DxrBszyEnfvZ/4378c67225d28e08067679b43a19b902/Preview-3.png)

## **Panduan penulisan**

### Nama Tabs maksimal 3 kata tanpa *truncate*

Dengan tujuan mempermudah keterbacaan dan navigasi pengguna, penulisan nama Tabs yang disarankan tidak melebihi 3 kata. Penulisan yang terlalu panjang akan mengurangi visibilitas dari Tabs lain yang tersedia.

### Utamakan kata yang paling penting

Untuk  mencapai penggunaan 3 kata maksimal, pertimbangkan dan pilih kata yang paling penting/mewakili. 

Misalnya, untuk kolom yang memuat nama-nama kontributor Perangkat Ajar, kita bisa memilih menggunakan kata “Kontributor” saja (alih-alih “Nama kontributor”). 

### Gunakan *sentence case*

Penggunaan *Sentence case* atau hanya huruf pertama di awal kalimat yang ditulis kapital akan menyederhanakan tampilan kata-kata dalam satu baris dan meningkatkan keterbacaan. Pembaca akan lebih mudah membedakan satu Tabs dengan lainnya. Hindari tanda titik “.” di akhir kalimat.

Tabs digunakan untuk menampilkan dan mengorganisir kelompok informasi serupa di halaman yang sama, sehingga pengguna dapat melihat konten tanpa perlu meninggalkan halaman tersebut.

Spacing (jarak) adalah aspek penting dalam design system yang membantu menciptakan konsistensi, hierarki visual, dan kenyamanan pengguna. Dalam Seragam, kami menggunakan **kelipatan 4** sebagai dasar untuk menentukan ukuran spacing. Pendekatan ini memastikan keselarasan dan skalabilitas di seluruh komponen dan tata letak.

## Mengapa Kelipatan 4?

Penggunaan kelipatan 4 (4, 8, 12, 16, 20, 24, dst.) dipilih karena:

1. **Konsistensi**: Kelipatan 4 memudahkan pengembang dan desainer untuk menjaga konsistensi dalam tata letak.
2. **Responsivitas**: Kelipatan 4 cocok untuk sistem grid yang responsif, memastikan elemen terlihat seimbang di berbagai ukuran layar.
3. **Kemudahan Penggunaan**: Angka genap seperti 4 lebih mudah dibagi dan dikalikan, sehingga memudahkan perhitungan spacing.

## Skala Spacing

Berikut adalah skala spacing yang digunakan dalam sistem desain ini:

| Nama Spacing | Ukuran (px) | Penggunaan Umum                                                                 |
|--------------|-------------|---------------------------------------------------------------------------------|
| `space-4`    | 4px         | Jarak kecil, seperti padding internal pada ikon atau elemen kecil.              |
| `space-8`    | 8px         | Jarak dasar untuk padding atau margin antara elemen yang berdekatan.            |
| `space-12`   | 12px        | Jarak sedang, cocok untuk spasi antara teks dan elemen terkait.                |
| `space-16`   | 16px        | Jarak yang lebih besar, sering digunakan untuk margin antara komponen.          |
| `space-20`   | 20px        | Jarak untuk memisahkan bagian yang lebih signifikan dalam tata letak.           |
| `space-24`   | 24px        | Jarak besar, digunakan untuk memisahkan grup elemen atau bagian halaman.       |
| `space-32`   | 32px        | Jarak ekstra besar, cocok untuk spasi antara bagian utama dalam tata letak.    |
| `space-40`   | 40px        | Jarak untuk memisahkan bagian yang membutuhkan penekanan visual lebih besar.   |
| `space-48`   | 48px        | Jarak maksimal, digunakan untuk spasi yang sangat besar antara elemen utama.   |

## Contoh Penggunaan Spacing

### 1. **Padding dan Margin**
   - Padding internal pada tombol: `space-8` (8px).
   - Margin antara dua kartu: `space-16` (16px).

### 2. **Tata Letak Grid**
   - Jarak antara kolom dalam grid: `space-24` (24px).
   - Jarak antara baris dalam daftar: `space-12` (12px).

### 3. **Hierarki Visual**
   - Jarak antara judul dan konten: `space-16` (16px).
   - Jarak antara grup elemen yang berbeda: `space-32` (32px).

## Best Practices

1. **Gunakan Spacing yang Konsisten**: Pastikan spacing yang sama digunakan untuk elemen serupa di seluruh aplikasi.
2. **Hindari Nilai Custom**: Selalu gunakan nilai spacing dari skala yang telah ditentukan untuk menjaga konsistensi.
3. **Pertimbangkan Responsivitas**: Sesuaikan spacing berdasarkan ukuran layar. Misalnya, gunakan `space-16` untuk desktop dan `space-8` untuk mobile.


Spacing adalah aturan yang mendefinisikan jarak antar elemen dalam sebuah antarmuka. 

| Elevation Level | Penggunaan                          | Penjelasan                                                                 |
|-----------------|-------------------------------------|-----------------------------------------------------------------------------|
| elevation-00    | Latar belakang                      | Level elevasi paling dasar, digunakan untuk latar belakang utama tanpa bayangan. |
| elevation-01    | Panel, kartu minimal                | Memberikan sedikit bayangan, cocok untuk pemisahan visual minimal.          |
| elevation-02    | Panel, kartu dengan sentuhan halus  | Menambahkan lebih banyak bayangan daripada elevation-01, untuk sentuhan halus. |
| elevation-03    | -                                   | Level elevasi menengah, mungkin untuk komponen yang membutuhkan penekanan lebih. |
| elevation-04    | Panel, bilah navigasi, kartu tebal  | Bayangan lebih tegas, untuk komponen yang perlu menonjol lebih jelas.       |
| elevation-05    | Menu, pemilih tanggal               | Digunakan untuk komponen yang muncul di atas elemen lain, seperti menu dropdown. |
| elevation-06    | Modal                               | Elevasi signifikan untuk modal yang muncul di atas semua elemen lain.       |
| elevation-07    | -                                   | Level elevasi tinggi, mungkin untuk komponen yang perlu sangat menonjol.    |
| elevation-08    | -                                   | Level elevasi tertinggi, untuk komponen yang perlu muncul di atas segalanya. |

![2025-03-03 at 12.03.19](//images.ctfassets.net/jf73m8fzk99f/2lWcxlNGvUueNbCubk3npf/6e5950c527857fa5af70076036187fcb/2025-03-03_at_12.03.19.png)

Elevasi dalam desain sistem merupakan representasi visual dari hierarki dan kedalaman antarmuka digital. Sistem ini menggunakan bayangan, transformasi, dan efek visual untuk menciptakan lapisan keruangan yang memandu perhatian pengguna dan memberikan konteks struktural pada elemen antarmuka.

## Skala Tipografi Desktop

Berikut adalah skala tipografi yang digunakan dalam sistem desain desktop:

| Nama Tipografi       | Ukuran Font | Berat Font | Contoh Penggunaan                          |
|----------------------|-------------|------------|--------------------------------------------|
| **Display Large**    | 48px        | Bold       | Judul utama pada halaman hero atau landing.|
| **Display Medium**   | 36px        | Bold       | Judul besar untuk bagian utama.            |
| **Display Small**    | 24px        | Bold       | Judul untuk bagian yang lebih kecil.       |
| **Heading Large**    | 20px        | Semi-Bold  | Judul bagian atau subjudul besar.          |
| **Heading Medium**   | 18px        | Semi-Bold  | Judul untuk grup konten.                   |
| **Heading Small**    | 16px        | Semi-Bold  | Judul kecil atau subjudul.                 |
| **Body Large**       | 18px        | Regular    | Teks panjang untuk konten utama.           |
| **Body**             | 16px        | Regular    | Teks standar untuk paragraf.               |
| **Body Small**       | 14px        | Regular    | Teks kecil untuk keterangan atau caption.  |
| **Action**           | 16px        | Medium     | Teks untuk tombol atau tautan.             |

## Skala Tipografi Mobile

Berikut adalah skala tipografi yang digunakan dalam sistem desain mobile:

| Nama Tipografi       | Ukuran Font | Berat Font | Contoh Penggunaan                          |
|----------------------|-------------|------------|--------------------------------------------|
| **Display Large**    | 32px        | Bold       | Judul utama pada halaman hero atau landing.|
| **Display Medium**   | 24px        | Bold       | Judul besar untuk bagian utama.            |
| **Display Small**    | 20px        | Bold       | Judul untuk bagian yang lebih kecil.       |
| **Eyebrow Large**    | 16px        | Medium     | Teks pengantar atau kategori besar.        |
| **Eyebrow Medium**   | 14px        | Medium     | Teks pengantar atau kategori sedang.       |
| **Eyebrow Small**    | 12px        | Medium     | Teks pengantar atau kategori kecil.        |
| **Heading Large**    | 18px        | Semi-Bold  | Judul bagian atau subjudul besar.          |
| **Heading Medium**   | 16px        | Semi-Bold  | Judul untuk grup konten.                   |
| **Heading Small**    | 14px        | Semi-Bold  | Judul kecil atau subjudul.                 |
| **Action**           | 16px        | Medium     | Teks untuk tombol atau tautan.             |
| **Body**             | 14px        | Regular    | Teks standar untuk paragraf.               |
| **Body Small**       | 12px        | Regular    | Teks kecil untuk keterangan atau caption.  |
| **Helper**           | 10px        | Regular    | Teks untuk informasi tambahan atau footer. |

## Best Practices

1. **Konsistensi**: Gunakan skala tipografi yang konsisten di seluruh aplikasi untuk menjaga keseragaman.
2. **Hierarki Visual**: Gunakan ukuran dan berat font yang sesuai untuk menciptakan hierarki yang jelas.
3. **Keterbacaan**: Pastikan teks mudah dibaca dengan memilih ukuran font yang sesuai dan kontras yang baik.


Tipografi memainkan peran penting dalam menciptakan hierarki visual dan meningkatkan keterbacaan antarmuka pengguna. Berikut adalah panduan tipografi untuk sistem desain desktop, termasuk ukuran font, berat, dan penggunaan yang direkomendasikan.

Sistem warna merupakan elemen fundamental yang melampaui sekadar estetika visual. Warna adalah bahasa komunikasi yang menghubungkan identitas brand, menciptakan hierarki informasi, dan membimbing pengalaman pengguna melalui antarmuka digital.

![Primitive](//images.ctfassets.net/jf73m8fzk99f/70mH8XCvZy3jjAEorauhJ6/2a18a98abe5efe41d25fc73d3a199ca6/Primitive.png)

Sistem warna merupakan elemen fundamental yang melampaui sekadar estetika visual. Warna adalah bahasa komunikasi yang menghubungkan identitas brand, menciptakan hierarki informasi, dan membimbing pengalaman pengguna melalui antarmuka digital.

 # Struktur dan hierarki

*Design tokens* diorganisasikan dalam hierarki bertingkat yang menciptakan sistem yang terstruktur dan dapat diperluas. Hierarki ini dimulai dari level paling abstrak hingga implementasi konkret, memungkinkan fleksibilitas dan kemudahan pemeliharaan.

# Tingkatan

Sistem *design tokens* terdiri dari beberapa lapisan konseptual yang saling terkait. Dimulai dari *tokens* paling dasar atau primitif, kemudian berkembang menjadi *tokens* semantik, dan akhirnya mencapai *tokens* komponen spesifik.

## *Primitive*

Token *Primitive* adalah fondasi paling dasar dalam sistem. Mereka merepresentasikan nilai mentah seperti warna, tipografi, ukuran, dan spasi dalam bentuk paling murni. Contohnya mencakup kode warna spesifik, ukuran *font* absolut, atau nilai spasi fundamental.

## *Semantic*

Token *Semantic* memberikan makna dan konteks pada Token *Primitive*. Mereka menerjemahkan nilai dasar ke dalam konsep yang lebih bermakna dalam desain. Misalnya, mengubah kode warna mentah menjadi "warna primer", "warna aksen", atau "warna latar belakang".

## Komponen

Token Komponen adalah implementasi langsung dari Token *Semantic* pada elemen antarmuka spesifik. Mereka menentukan bagaimana Token *Semantic* diaplikasikan pada komponen seperti tombol, input, atau Card.

![Color](//images.ctfassets.net/jf73m8fzk99f/7pVrf5KG2LVGiWUTgS9phl/9fd26fd2abc6f2a4d70b0692211fd211/Color.png)

Token desain merupakan abstraksi fundamental yang menghubungkan desain dan pengembangan, bertindak sebagai variabel global yang mendefinisikan elemen visual dan perilaku dalam sebuah sistem desain. 

![img-Merefleksikan peran di masyarakat](//images.ctfassets.net/jf73m8fzk99f/2XkA6nZnJ7oVhKFMWuWYBV/d1b94e91ef166ffeaf6a8802d0c18d96/img-Merefleksikan_peran_di_masyarakat.png)

Ilustrasi adalah salah satu alat dalam berkomunikasi yang dapat memberi kejelasan, memperkuat sebuah pesan, dan memberi nilai tambah dalam sebuah komunikasi. Kami percaya bahwa panduan ilustrasi ini dapat membantu ilustrator maupun desainer dalam memahami apa yang digambar dan bagaimana cara menggambar dalam sebuah proses pembuatan ilustrasi yang memberikan dampak ke pengguna.

1. Prinsip Ilustrasi
2. Tipe Ilustrasi
3. Peran Ilustrasi
4. Palet Warna Ilustrasi
5. Cara Menggambar: Ilustrasi Hero
6. Cara Menggambar: Ilustrasi Spot dan Ilustrasi Empty State
7. Galeri Ilustrasi

Berikut beberapa catatan kami, untuk memulai panduan ini.

![Screenshot 2024-12-23 at 13.46.49](//images.ctfassets.net/jf73m8fzk99f/6nQqfQHs9gxy9tbX5ngj1H/0e908ff4ce69316b73869b8326c06638/Screenshot_2024-12-23_at_13.46.49.png)

## **Kata pengantar**

INA Digital Edu memayungi produk-produk dengan ragam tujuan dan demografi pengguna. Desain dan komunikasi tiap produk ini dirawat oleh tim masing-masing, termasuk kami, tim penulis produk. Kami bertanggung jawab akan efektivitas komunikasi tertulis (*copywriting*/*microcopy*, atau mikrokopi) dalam desain aplikasi. Lebih dari itu, kami mendokumentasikan  beberapa panduan menulis produk, demi memudahkan proses mengenal pengguna dan menerapkan konsistensi pada seluruh produk INA Digital Edu. 

Kami harap panduan ini bisa menjadi teman pengingat, acuan barangkali, yang membantu tim pengembang atau tim penulis saat ini dan berikutnya dalam mendesain komunikasi produk-produk INA Digital Edu untuk pengguna di kemudian hari.

Selamat membaca!

---
## **Latar belakang**

Panduan ini dikerjakan dari tengah sampai akhir tahun 2024\. Di rentang waktu tersebut, INA Digital Edu sudah memiliki banyak *platform*/produk teknologi dengan fungsi dan penggunanya masing-masing, dan penulisnya masing-masing.

Ketika panduan ini sedang dikerjakan, beberapa produk sudah dalam proses transisi ke lembaga atau kementerian terkait (khususnya di bidang pendidikan) untuk mereka lanjutkan secara mandiri. Maka, hadirlah panduan dan dokumentasi penulisan ini, tidak hanya untuk turut mendukung proses transisi itu tapi juga sebagai kesempatan untuk menyatukan pengalaman dan pengetahuan para penulis INA Digital Edu. Panduan ini berdiri berkat kolaborasi tim penulis produk dan tim-tim penulis lainnya seperti tim *brand*.

Kami berharap panduan dan dokumentasi ini akan selalu bisa diperbarui, sesuai pengembangan produk dan organisasi ke depan.

---
## **Tujuan**

Dua tujuan utama panduan ini adalah:

### Mengenali pengguna

Mengenal para pengguna produk teknologi INA Digital Edu dan cara mereka menyerap komunikasi dalam bentuk tulisan bisa membantu penulis menyajikan informasi dengan lebih efektif.

### Menerapkan konsistensi

Penulis yang menerapkan konsistensi dalam penyampaian informasi lewat tulisan diharapkan bisa turut menajamkan *branding* ekosistem teknologi INA Digital Edu.

Selain dua tujuan utama tadi, dua tujuan lain yang juga jadi jangkar penyusunan panduan ini adalah:

### Materi dokumentasi

Menjadi satu sumber pengetahuan para penulis tentang produk-produk INA Digital Edu yang terdokumentasi dengan rapi, mudah disebarluaskan, praktis digunakan, dan bisa memantik diskusi tentang peran tulisan serta kolaborasi antar penulis.

### Memandu tahun-tahun berikutnya

Panduan ini sudah melewati banyak *trial* dan *error*, sampai akhirnya memiliki pola-pola yang terbukti dan bisa digunakan. Sehingga, tim penulis tidak perlu memulai dari halaman kosong lagi di kemudian hari.


Selamat datang di **Seragam Design System**, sebuah *design library* yang dirancang secara kolektif oleh *Product Designer*, *UX Writer*, *Researcher* dan *Illustrator* di INA Digital Edu untuk mendukung platform prioritas kementerian (khususnya di bidang pendidikan). Panduan ini menjadi dasar dalam menciptakan pengalaman digital yang konsisten dan intuitif bagi pengguna, khususnya tenaga pendidik di seluruh Indonesia.

Seragam Design System lahir dari kolaborasi yang solid, dirancang untuk menghadirkan solusi desain yang efektif bagi tim pengembang teknologi pendidikan dan berorientasi pada perilaku pengguna. Seluruh komponen dan elemen desain di dalamnya telah melalui pengujian dan iterasi berulang kali untuk memastikan kualitas dan ketepatannya dalam berbagai situasi nyata.

Panduan ini didasari oleh 5 Prinsip Desain INA Digital Edu, yaitu:

## ***Design for Assurance***

Membantu pengguna merasa percaya diri dalam mengambil keputusan dengan panduan yang jelas dan umpan balik yang responsif.

## ***Minimize Cognitive Load for Users***

Menyederhanakan tugas dengan informasi yang ringkas, panduan yang relevan, dan langkah-langkah yang mudah diikuti.

## ***Tap into Users’ Collective Wisdom***

Memfasilitasi kolaborasi dan berbagi wawasan antar pengguna untuk mendukung pembelajaran dan pertumbuhan bersama.

## ***Balance Utility and Delight***

Menggabungkan kemudahan penggunaan dengan elemen desain yang menyenangkan, menciptakan pengalaman yang memotivasi pengguna.

## ***Consistent and Familiar, over Novel Experiences***

Menawarkan konsistensi untuk menciptakan rasa nyaman dan mengurangi kurva belajar.

Kami percaya bahwa Seragam Design System bisa menjadi fondasi awal untuk pengembangan ekosistem digital pendidikan yang dapat berguna untuk hari ini dan masa depan di Indonesia. Kami mengundang pembaca untuk mengeksplorasi panduan ini untuk memahami lebih dalam implementasinya dan potensi pemanfaatannya dalam mendukung transformasi pendidikan. 


Berikut beberapa catatan kami, untuk memulai panduan ini

## **Peran di antarmuka atau *user interface* (UI)**

Bagian ini menjelaskan peran-peran apa saja yang dilakukan ilustrasi di antarmuka. Sehingga, membuat ilustrasi dapat berdampingan dengan tulisan, konten, dan desain komponen di antarmuka secara selaras.

| Peran ilustrasi | Contoh |
| :---- | :---- |
| **Memberikan petunjuk cepat** bagi pengguna dalam memahami makna dan ide dari pesan atau komunikasi yang kompleks. | ![image 12](//images.ctfassets.net/jf73m8fzk99f/6HvtWNAEB118tS2JQ4dF93/768e8e6fd313a9b46c15cc2c63dc963f/image_12.png) |
| **Memberikan kejelasan**  dalam penyampaian ilustrasi secara lugas ke pengguna. | ![image 17](//images.ctfassets.net/jf73m8fzk99f/712XtBE4kuNU5gCiU1UZgS/78a901788f8b90c6c20e2491edf618c7/image_17.png) |
| **Melengkapi sebuah teks informasi** dan tidak mendominasi keseluruhan informasi. | ![image 17-1](//images.ctfassets.net/jf73m8fzk99f/1OnOFEdQu8IWVXbXqgZ0u7/66f01990e4d60dcf641f19ee8c37adb8/image_17-1.png) |
| **Menuntun pengguna** dan meningkatkan kepercayaan diri pengguna dalam melakukan aksi tertentu. | ![image 14](//images.ctfassets.net/jf73m8fzk99f/5uLDAygtkXr7BK3NhwfYNe/a1449ecd6a82525abeea7b15329486e1/image_14.png) |
| **Merayakan kesuksesan pengguna** sehingga membangkitkan emosi dan minat. | ![image 16](//images.ctfassets.net/jf73m8fzk99f/3GWzefxAJHTLjdyaauEJAQ/3e5732b564d4914836ad4618d901a60c/image_16.png) |

## **Peran di media komunikasi dan *brand***

Bagian ini menjelaskan peran-peran apa saja yang dilakukan ilustrasi dalam membantu keseluruhan tujuan komunikasi menjadi lebih mudah dipahami oleh audiens di media komunikasi dan *brand*.

| Peran ilustrasi | Contoh |
| :---- | :---- |
| **Menerjemahkan ide kompleks/abstrak** menjadi bentuk komunikasi visual yang simpel dan mudah dipahami audiens. | ![Email Blast 1@2x-100 2](//images.ctfassets.net/jf73m8fzk99f/5hrZQoKsty5HnjwYStfAUZ/16ae71a53ec9a64c474292b18293be77/Email_Blast_1_2x-100_2.png) |
| **Menggambarkan pengalaman, situasi, dan aktivitas yang kontekstual** di kehidupan sehari-hari audiens sehingga menimbulkan kedekatan dalam komunikasi visual. | ![Artboard 30 copy@2x-100 1](//images.ctfassets.net/jf73m8fzk99f/2y13ZYcJv7Ep8jYAkfKDYL/dea1f96351a1408aa7bdfaad8fc218b7/Artboard_30_copy_2x-100_1.png) |
| **Memperkuat tujuan dari objektif komunikasi atau *brand*** yang ingin disampaikan ke audiens. | ![20220902 Fitur Rekomendasi PBD-04 1](//images.ctfassets.net/jf73m8fzk99f/5WQFZ4HtMEaH0q6BjnmTed/dba72f30d061213e4265a5e06eba61a8/20220902_Fitur_Rekomendasi_PBD-04_1.png) |
| **Memandu audiens** dalam memahami informasi dan langkah yang harus diambil dari sebuah materi komunikasi. | ![Infographic 1 Rapor Pendidikan 2023 01 2](//images.ctfassets.net/jf73m8fzk99f/QLj4b7V92eB9pFca2F148/7832d12f44c3bb39f9a77328ba46c4cb/Infographic_1_Rapor_Pendidikan_2023_01_2.png) |


Dalam visual komunikasi di berbagai platform dan media, ilustrasi memiliki peranan yang beragam. Bagian ini akan menjelaskan peranan apa saja yang dapat dilakukan ilustrasi dan dapat membantu illustrator dalam proses pembuatan ilustrasi.

## ***Style*** **Ilustrasi Spot dan Empty State**

![image 1](//images.ctfassets.net/jf73m8fzk99f/4k1thNSJW1IUGSrjWMvJ9u/ef24aad59dcc54fbc78a8ab73189149b/image_1.png)

*Style* *flat* di Ilustrasi Spot dan Empty State secara umum dibentuk menggunakan bentuk yang geometris dengan ujung *shape* yang tumpul sebagai fondasinya. Namun, ilustrasi tidak boleh terlihat kaku saat menampilkan elemen manusia seperti tangan. *Style* ilustrasi ini membutuhkan perhatian khusus terutama dalam penerapan warna, agar memberi kedalaman dan pencahayaan yang dinamis pada sebuah objek ilustrasi.

---

## **Bentuk *shape***

Bentuk *shape* pada objek di Ilustrasi Spot dan Empty State harus terlihat simpel dan tidak memiliki detail yang kompleks. Sehingga, mudah dipahami pengguna atau audiens di dalam ukuran ilustrasi yang relatif kecil.

### **Simpel dan minimalis** 
Bentuk *shape* ilustrasi dibuat secara simpel, minimalis, dan sederhana dengan ujung *shape* yang *rounded*. Sehingga, membuat objek mudah dikenali dan dipahami oleh pengguna.  
![image 17](//images.ctfassets.net/jf73m8fzk99f/68hc5DHxsZ0xFdBtQPKGnX/f70e35080f956eb9edb84e90cbfaefa5/image_17.png)

### **Detail ilustrasi** 
Ilustrasi memerlukan detail dalam memberikan kejelasan sebuah objek dan memberikan kesan realistis. Namun, pendekatan yang minimalis juga sangatlah penting. Sehingga dalam membuat objek, ilustrator perlu menghindari detail yang tidak penting yang berpotensi membuat ilustrasi menjadi terlalu kompleks. 
![image 16](//images.ctfassets.net/jf73m8fzk99f/4u0f5316WLzthIYPLHIumD/4c7a5e715d43f1d317e163e52be11ce5/image_16.png)

### **Lebih dari satu objek** 
Apakah Ilustrasi Spot dan Empty State dapat memuat lebih dari satu objek? Jawabannya iya, dengan kondisi: Satu objek tidak cukup dalam menginformasikan sebuah konteks. Objek lainnya berperan sebagai pendukung objek utama. Objek pendukung tidak boleh terlihat dominan Keseluruhan objek dapat menjadi satu kesatuan ilustrasi dalam berkomunikasi.
![image 18](//images.ctfassets.net/jf73m8fzk99f/qfK181rpzLDz79znft5iB/978cfea163656d9fcd43c7fb113d1efa/image_18.png)

---

## **Panduan warna**

Bagian ini akan memandu *illustrator* dalam memadukan warna dan hal-hal yang dapat mendukung dalam pewarnaan ilustrasi yang tepat.

### **Kombinasi warna** 
Dalam fase pewarnaan ilustrasi, terkadang *illustrator* membutuhkan waktu untuk mendapatkan kombinasi warna yang tepat untuk ilustrasi. Gambar di bawah adalah contoh kemungkinan yang dapat digunakan agar fase pewarnaan ilustrasi lebih cepat. 
![image 6](//images.ctfassets.net/jf73m8fzk99f/2tfI7JEEKfVzNupGoq7igR/2291e51e923b4a55c4d2494a0b60f5c3/image_6.png) 
### **Kontras warna** 
*Illustrator* harus memperhatikan kontras warna dalam melakukan padu padan warna dari palet. Pastikan *intersection* setiap warna di objek ilustrasi memiliki *value* warna yang berbeda agar menciptakan kedalaman objek, pencahayaan yang dinamis, dan bayangan yang tepat.
![image 7](//images.ctfassets.net/jf73m8fzk99f/4srpRwcAXob0R9NBhacO9C/d8fbfeb7eac76919ad33784e07a0e038/image_7.png)
### **Kecerahan warna** 
Pastikan latar depan ilustrasi memiliki kecerahan warna yang cenderung tinggi dalam melakukan padu padan warna dari palet. Hindari penggunaan warna yang kusam dalam memadukan warna dari palet. Pastikan juga kecerahan warna tidak terlalu mencolok dan membuat mata lelah. 
![Artboard 11 copy 4 1](//images.ctfassets.net/jf73m8fzk99f/6ZVTNMztkxCkIwubUpgp7V/29a210576882994700b19cae0b10c722/Artboard_11_copy_4_1.png) 

### **Hindari warna gradasi** 
Hindari penerapan warna gradasi karena pendekatan pewarnaan seperti ini tidak sesuai dengan *style* ilustrasi dan tidak menciptakan pencahayaan yang dinamis, serta bayangan yang tepat untuk ilustrasi. ![Artboard 11 copy 2 2](//images.ctfassets.net/jf73m8fzk99f/68exFTO6xjlAXTNOIrkhja/00e5f010d16c4b5d436a1a3cf3f597f1/Artboard_11_copy_2_2.png)

---

## **Pencahayaan dan bayangan**

Penerapan pencahayaan dan bayangan yang tepat di objek ilustrasi sangat penting untuk membentuk objek yang presisi, dalam, dan juga kontras. Selain itu, pencahayaan dan bayangan pada ilustrasi dapat membuat keseluruhan ilustrasi terasa hidup.

### **Struktur cahaya dan bayangan** 
Dalam penerapan pencahayaan dan bayangan di ilustrasi, *illustrator* harus paham elemen penting dalam pencahayaan dan bayangan, yakni *light*, *base*, dan *shadow*. Elemen-elemen ini membedakan penerapan warna pada objek ilustrasi. Catatan: Gambar di bawah adalah contoh pembagian elemen cahaya dan bayangan. Elemen *optional* dapat dihapus jika dirasa membuat ilustrasi terlihat kompleks.
![image 10](//images.ctfassets.net/jf73m8fzk99f/3LNby8RrkY48UcyLr9sJ9O/047aafdd99da66570eced57ca6ef13c1/image_10.png)

###  **Pewarnaan cahaya dan bayangan** 
Palet yang digunakan pada  ilustrasi dibuat khusus untuk memudahkan kita dalam menciptakan spektrum pencahayaan dan bayangan pada ilustrasi dengan tepat. *Illustrator* dapat dengan mudah memilih warna beserta turunan warnanya untuk membuat cahaya dan bayangan yang dinamis. Turunan warna pada palet dibuat dengan memperhatikan tingkatan saturasi dan *hue* dari setiap warna. 
![image 12](//images.ctfassets.net/jf73m8fzk99f/7xyyacNSD2WftusekE2OoC/6fc0549f6e7dd877e9835399fa096446/image_12.png)

###  **Sumber cahaya dan jatuhnya bayangan** 
Posisi sumber cahaya akan menentukan jatuhnya bayangan pada objek ilustrasi. Posisi sumber cahaya harus di pojok atas objek ilustrasi dengan posisi yang tidak terlalu tinggi maupun rendah. Sehingga, menciptakan bayangan yang minimalis dan tidak terlalu besar di objek ilustrasi.
![image 14](//images.ctfassets.net/jf73m8fzk99f/gvnj16sxfyPqZBWb6Qpul/c415863f7e7eb6a49bf1f358f4dcd3a0/image_14.png)

### **Cahaya dan bayangan di variasi objek** 
Dalam menerapkan pencahayaan dan bayangan, *illustrator* tidak bisa menerapkan pendekatan yang selalu sama. Setiap objek memiliki bentuk, materi, dan permukaan yang berbeda. Hal-hal tersebut memengaruhi bagaimana cahaya dan bayangan berinteraksi dengan objek ilustrasi. 
![image 11](//images.ctfassets.net/jf73m8fzk99f/1mEPMIRPeYG6dzEsuohjhc/af743a214f32e308f80438a70b9d3e6c/image_11.png)

### **Penerapan pencahayaan yang dinamis** 
Di dalam ruang yang lebih lebar seperti Ilustrasi Empty State, *illustrator* dapat mengeksplorasi penerapan pencahayaan dan bayangan yang tidak hanya berinteraksi dengan objek. Namun, juga berinteraksi dengan lingkungan yang bisa menciptakan suasana yang lebih dinamis dan terasa hidup. Gambar di bawah adalah contoh di mana sumber cahaya masuk dari sela-sela jendela kelas.
![image 16](//images.ctfassets.net/jf73m8fzk99f/4ldLvHoX60lWk0D5uHk46b/e58a782e43adb24f88b53e3c41f6056d/image_16.png)

---

## **Perspektif dan titik fokus**

Penerapan perspektif dan titik fokus yang tepat pada Ilustrasi Spot dan Empty State akan membuat ilustrasi terasa seimbang, ringkas, dan mudah dipahami pengguna.  Bagian ini akan menjelaskan penerapan perspektif dan titik fokus yang direkomendasikan.

### **Perspektif pada ilustrasi**  
Untuk Ilustrasi Spot dan Empty State, perspektif yang digunakan harus seimbang dan proporsional dari segi ukuran. Hindari penerapan arah *angle* ekstrem yang dapat mengakibatkan perspektif yang janggal dan memakan banyak ruang.
![image 16](//images.ctfassets.net/jf73m8fzk99f/6BUDZ9qzfJ1JKnm5pz4grn/f6bb9684f849caaa0fd3cde5eda8de57/image_16.png) 

### **Titik fokus** 
 Titik fokus di ilustrasi adalah sebuah alat untuk meberikan petunjuk cepat kepada pengguna dalam memahami pesan atau  objektif tertentu yang kita tekankan dalam komunikasi. Titik fokus ini bisa diciptakan melalui warna, ukuran, frame, elemen penunjang, dan lain-lain.
![image 11](//images.ctfassets.net/jf73m8fzk99f/3nEojiqNZ0Ge2zhLqHhnzK/37da8b1a8e7340f525cc1c8acb1bc0fe/image_11.png)

---

## **Ukuran *grid* dan kanvas** 

Ukuran garis *grid* dan kanvas ilustrasi dapat membantu ilustrator dalam menghasilkan ilustrasi yang seimbang di berbagai bentuk objek, serta menciptakan ilustrasi yang simpel dan tidak kompleks.

### **Ukuran garis *grid* dan kanvas: Ilustrasi Spot**

![Group 40118](//images.ctfassets.net/jf73m8fzk99f/66qKQORAevrcbcujovmZ83/fd2ad2f9ef36bb298313042792706a78/Group_40118.png)
![Group 40119](//images.ctfassets.net/jf73m8fzk99f/1Rd0choOeGvcGdRzC5hAGO/97aa1a1e21902a9ba2d9017f548858c7/Group_40119.png)

Ada dua jenis ukuran garis *grid* dan kanvas untuk Ilustrasi Spot, yakni:

1. 84x84 pixel untuk ukuran besar  
2. 60x60 pixel untuk ukuran kecil

### Implementasi variasi objek pada grid dan kanvas 

![image 11](//images.ctfassets.net/jf73m8fzk99f/3LPHS8bl71EHoyIGINxiKu/32c2a0f1459607b6f52b6298ce50ccba/image_11.png)

Garis grid dan kanvas tidak bersifat membatasi dan kaku dalam pembuatan ilustrasi. Garis *grid* dan kanvas adalah garis bantu untuk menyeimbangkan ukuran objek ilustrasi, seperti persegi panjang vertikal, horizontal, kotak, maupun lingkaran.  Terkadang, beberapa objek harus disesuaikan lebih besar dari garis *grid* karena memiliki jumlah ruang kosong (*white space*) yang luas.

### Memadukan Ilustrasi Spot dengan ukuran teks 

![image 10](//images.ctfassets.net/jf73m8fzk99f/6HI3HjbQguGZYIyZij5ZWW/1b7a1e9dba0146a458f631c8b8999f4c/image_10.png)

Untuk mengurangi kebingungan tentang penggunaan ukuran Ilustrasi Spot yang tepat, gambar di atas adalah contoh panduan memasangkan Ilustrasi Spot dengan teks di antarmuka untuk memastikan ukuran ilustrasi sesuai dengan konten teks. 

### **Ukuran garis *grid* dan kanvas: Ilustrasi Empty States**

![image 15](//images.ctfassets.net/jf73m8fzk99f/1zQPUOteJJ1qGJIBjPGqRh/1a0989e25d340f177699b10831370e01/image_15.png)

Tidak ada ukuran garis *grid* yang pasti untuk Ilustrasi Empty State, namun Ilustrasi Empty State memiliki ukuran kanvas 120 pixel dengan bentuk lingkaran. 


Bagian ini menjelaskan bagaimana cara ilustrator membuat Ilustrasi Spot dan Empty State yang sesuai dengan arahan produk dan brand, termasuk style, bentuk, pewarnaan, komposisi, ukuran, pencahayaan, dan bayangan ilustrasi.

## **Ilustrasi Hero**

![Group 1141](//images.ctfassets.net/jf73m8fzk99f/42ModXX5rzzzP3gncGVsAl/2325ace86043810ff5d529b97146f72d/Group_1141.png)

Tipe ilustrasi ini harus dapat menggambarkan ringkasan dari keseluruhan pesan sebuah komunikasi yang disampaikan. Tipe ilustrasi ini juga harus dapat mengambil perhatian dan minat audiens atau pengguna dalam memahami informasi. Tipe ilustrasi ini biasanya muncul di area produk seperti *head banner* dan *cover banner*. Sedangkan di materi komunikasi, biasa tampil di poster, *social media banner*, dan video.

## **Ilustrasi Spot**

![image 5](//images.ctfassets.net/jf73m8fzk99f/6dJP1qNg0aW2ivr7xK2LTv/3fc35e22ad59c74656393477c8f9efd2/image_5.png)

Tipe ilustrasi ini dapat menyampaikan pesan dan memberi petunjuk yang cepat ke pengguna atau audiens dalam bentuk yang relatif lebih kecil dan simpel. Biasanya tipe ilustrasi ini muncul di area produk seperti USP (*Unique Selling Proposition*), *onboarding*, pengumuman, dan indikator progres.

## **Ilustrasi Empty State**

![Group 40116](//images.ctfassets.net/jf73m8fzk99f/68bh7RcW8p7v2rl22hkT5E/168f85f84af3af95846007a51b7ccb13/Group_40116.png)

Tipe ilustrasi ini mirip seperti Ilustrasi Spot, namun dengan ukuran yang relatif lebih besar. Tipe ilustrasi ini biasanya digunakan dalam memberikan ekspektasi ke pengguna mengenai konteks dari situasi yang mereka hadapi, dan menuntun mereka untuk melanjutkan atau melakukan aksi tertentu.

Setiap tipe ilustrasi tidak hanya dibedakan dari ukuran, namun juga dari intensi pesan yang ingin kita sampaikan ke pengguna atau audiens.

Berikut palet warna yang dapat digunakan *illustrator* dalam pembuatan ilustrasi. Palet warna ini dirancang khusus agar bisa sesuai dengan gaya ilustrasi yang digunakan. Turunan warna dalam palet warna ini dipisah menjadi 5 bagian, mulai dari terang hingga gelap, dengan *value* dan *hue* warna yang berbeda dalam menghasilkan cahaya dan bayangan di subjek dan objek ilustrasi.

![Group 40120](//images.ctfassets.net/jf73m8fzk99f/5afMnpATI2lAzhBq9jGnSh/152da91dbc6482c6252bf5b5cf45e0ea/Group_40120.png)

| Prinsip Ilustrasi | Penjelasan |
| :---- | :---- |
| **Lugas dalam penyampaian ![img-chat-talk](//images.ctfassets.net/jf73m8fzk99f/7GcewV3iYl9uxmkiagTVbe/536fcee967aba56c7e806155266886a2/img-chat-talk.png)** | Ilustrasi yang dihasilkan harus lugas dan memiliki interpretasi yang umum, dalam arti tidak ambigu dan samar untuk dimaknai oleh pengguna atau audiens. |
| **Membangkitkan minat, emosi, dan aksi ![img-heart-empathic-give](//images.ctfassets.net/jf73m8fzk99f/6CrX9alATc4wpuqdeWLaE0/1dba047317b9a394a8a01ff77bf895c5/img-heart-empathic-give.png)**  | Ilustrasi yang dihasilkan harus dapat menggugah dan membangkitkan minat, emosi, dan aksi bagi pengguna atau audiens. |
| **Akrab dan dekat dengan keseharian ![img-chalk-board](//images.ctfassets.net/jf73m8fzk99f/5GRowOz7hHRgUJC58Lx89n/2af5c97eb2440431b67d01a856be881e/img-chalk-board.png)** | ilustrasi yang dihasilkan harus memiliki  kedekatan dan pengalaman yang familiar bagi pengguna atau audiens dalam kehidupan sehari-hari. |
| **Sederhana dalam detail ![img-folder-document](//images.ctfassets.net/jf73m8fzk99f/13zltmEpirC6TY1qOj2PmL/6efe961a2966f7ac60a51e7c3191c2d4/img-folder-document.png)** | ilustrasi harus simpel dan jelas dari segi bentuk, perspektif, dan warna, sehingga tidak terlalu rumit dipahami oleh pengguna atau audiens. |
| **Inklusif dan menunjukkan keberagaman ![img-handshake](//images.ctfassets.net/jf73m8fzk99f/2e0uXrT4oYMx08utcGVEYH/59e9c0db2701781a6c154652c5ae30e7/img-handshake.png)** | Karena pengguna atau audiens memiliki keberagaman yang sangat luas, usahakan agar ilustrasi dapat menggambarkan inklusivitas. |


Prinsip ilustrasi memberikan pemahaman apa saja yang harus diperhatikan dalam membuat ilustrasi dari tahap konsep, teknik digital, dan penyampaiannya ke pengguna atau audiens. Prinsip ini berguna sebagai pemandu untuk setiap ilustrasi yang dihasilkan.

Bagian ini menjelaskan bagaimana cara ilustrator membuat ilustrasi hero yang sesuai dengan arahan produk dan brand, termasuk style, struktur dan gestur karakter, komposisi, dan arah kamera. 

Bahasa memiliki kekuatan luar biasa untuk mendorong inklusivitas. Sebagai pembuat produk yang ditujukan untuk orang lain, kita suka percaya bahwa kita terhubung secara mendalam dengan setiap orang yang menggunakan produk yang kita ciptakan. Namun, pikiran dan tindakan kita sering kali secara tidak sadar dipengaruhi oleh bias dari lingkungan sosial kita. Ketika kita terus membangun produk yang berpusat pada satu jenis pengguna yang dianggap "tipikal" atau "standar," kita gagal memastikan bahwa produk tersebut dapat diakses oleh sebanyak mungkin orang dari berbagai latar belakang.

Berbicara tentang inklusivitas tidak luput dari aksesibilitas. Aksesibilitas sebagai disiplin berada di bawah payung besar inklusivitas. Sehingga, panduan penulisan inklusif di sini juga akan disertai dengan bagaimana cara menulis yang aksesibel. 

Lebih dari itu, penulis produk memiliki amanat untuk mempertimbangkan bagaimana penyandang disabilitas mengakses informasi, namun tentunya tidak bisa dilakukan sendiri. Penting juga untuk memikirkan bagaimana desainer dan Tim Pengembang dapat membantu dalam mewujudkan hal tersebut.

## **Panduan umum**

Menulis secara inklusif adalah penggunaan kata, frasa, atau nada yang tidak mencerminkan pandangan yang penuh prasangka, stereotip, atau diskriminatif terhadap kelompok tertentu. Sebelum masuk ke panduan umum, penting untuk terlebih dahulu paham beberapa jenis konten atau penulisan yang dapat dipertimbangkan ketika hendak menulis secara inklusif:

1. **Teks yang terlihat**: Teks yang ditampilkan pada antarmuka (*user interface*/UI). Contohnya, tulisan pada komponen desain,  seperti teks pada tombol, tautan, atau formulir.  
2. **Teks yang tidak terlihat**: Teks yang tidak muncul di layar, namun mendukung alat bantu pembaca layar (*screen reader*), seperti VoiceOver di Android dan TalkBack di iOS. Ada pula teks yang tidak langsung terlihat, seperti teks alternatif (*alt text*) untuk tombol dengan ikon, gambar, alur kerja, dan format tutorial.

Apa pun jenis kontennya, penulisannya harus deskriptif dan bermakna. Mari kita cari tau penulisan seperti apa yang termasuk dalam panduan umum inklusivitas:

### Perhatikan pemilihan kata

| Dihindari | Disarankan | Catatan |
| :---- | :---- | :---- |
| “Lihat”, “Baca”, “Tonton video” | “Cek”, “Pelajari”, “Tampilkan”, “Putar video” | Tidak semua orang “melihat” dan “menonton”. |
| “Pengguna” | “Anda”, “Kamu” | Jika konteksnya tergantung pada peran tertentu (misalnya, admin yang mengelola izin akses), "pengguna" dapat digunakan. |
| “Bukti Karya ditujukan untuk Guru yang ahli videografi” | “Bukti Karya membantu Anda berkreasi dalam bentuk video” | Hindari menyorot target audiens tertentu saja. |
| “Perbarui data” | “Perbarui data (1 dari 3 tahap)” | Pandu pengguna melalui proses bertahap dan beri mereka ekspektasi apa yang harus dilakukan. |
| “Balik” | “Kembali”, “Ke \[nama halaman\]” | Gunakan kata ringkas yang sudah dikenal dan jelas maknanya. |
| “Singkirkan”, “Hentikan”, “Buang” | “Tutup”, “Batalkan”, “Sembunyikan” | - |
| “Modifikasi | “Ubah”, “Edit” | - |
| “Rasakan”, “Alami” | “Coba”, “Mulai” | - |
| “Terjadi server error timeout. Kunjungi Pusban untuk selengkapnya atau hubungi CS.” | “Terjadi kendala sistem. Kunjungi Pusat Bantuan atau coba lagi dalam beberapa saat.” | Hati-hati dengan kata-kata yang tidak umum (*slang*, jargon, istilah teknis, dan singkatan). Jika ada singkatan, jelaskan artinya saat pertama kali disebut atau dalam tanda kurung. |

### Utamakan kejelasan

| Dihindari | Disarankan | Catatan |
| :---- | :---- | :---- |
| “Buah pepaya, buah pisang… Coba Bukti Karya, dari sekarang\!” | “Coba Bukti Karya supaya bisa cek karya rekan guru lainnya. Buah ceri, buah pisang. Mari coba sekarang?” | *Witty* bisa menambah kesenangan saat membaca, namun pastikan informasi tetap jelas dari kalimat pertama dan sesuai dengan gaya bahasa produk. |
| “Koneksi Anda terputus. Coba muat ulang halaman.” | “Muat ulang halaman. Sepertinya ada kendala internet.” | Pengguna *screen reader* biasanya tidak mendengarkan kata per kata yang dibacakan; mereka biasanya hanya mendengarkan kalimat pertama dan dalam kecepatan yang cepat. |
| “Tekan tombol di kanan atas.” | “Tekan nama Anda di pojok kanan atas dan pilih “Ganti periode” atau cek cara selengkapnya.” | Petunjuk arah atau petunjuk visual seharusnya menjadi pelengkap, bukan informasi utama. |
| “Buka ![Inklusivitas1](//images.ctfassets.net/jf73m8fzk99f/14tROmTj5d6liytQQ6WGGh/195d36df037c247ba4991b4d2a01d2bc/Inklusivitas1.png) dengan klik tombol biru di bawah ✨” | “Buka Refleksi Kompetensi dengan tekan tombol Mulai.” | *Screen reader* tidak selalu bisa membaca sebuah ikon (apalagi jika tanpa *alt text*). Jaga gaya bahasa serta penggunaan emoji agar tetap sesuai konteks produk. |

Selain contoh di atas, beberapa praktik lainnya dalam mengutamakan kejelasan adalah hal-hal berikut ini, disertai contoh gambar:

#### Struktur informasi menggunakan format yang sesuai

Hal ini membantu otak kita memproses informasi lebih cepat dan akurat. Manfaatkan komponen desain juga untuk membagi informasi.

**Dihindari**

![Inklusivitas2](//images.ctfassets.net/jf73m8fzk99f/3kqxvgZEdhTjV9QHwI958i/d487cf6f145a07dc13371588885a35b9/Inklusivitas2.png)

**Disarankan**

![Inklusivitas3](//images.ctfassets.net/jf73m8fzk99f/5KtTMBhMZdSbDKDbZBYbJA/600111c0c612fb7ef534e01deef0e969/Inklusivitas3.png)

### Pertimbangkan konteks budaya

| Dihindari | Disarankan | Catatan |
| :---- | :---- | :---- |
| “Selamat datang di Pengelolaan Kinerja, Bapak Dinas\!” | “Selamat datang di Pengelolaan Kinerja, Hendrawan\!”, “Selamat datang di Pengelolaan Kinerja, Bapak/Ibu Dinas\!” | Pastikan tetap inklusif meskipun target audiens kita mungkin sangat spesifik. Jangan berasumsi bahwa jabatan tertentu hanya dipegang oleh gender tertentu. Langsung menyebut nama pengguna lebih baik. |
| “*Arek-arek* SD di daerah Provinsi Jawa Timur.” | “Para siswa sekolah dasar di daerah Provinsi Jawa Timur.” | Gunakan *lingua franca* atau bahasa yang diadopsi sebagai bahasa umum di antara penutur bahasa daerah yang berbeda. |

## **Panduan untuk teks alternatif**

Hal pertama yang perlu dilakukan adalah menentukan apa sebuah gambar membutuhkan *alt text* atau teks alternatif. Beberapa gambar bekerja sama dengan teks untuk menyampaikan informasi, sementara gambar lainnya bersifat dekoratif. Untuk menentukan, mulai dari apakah ada konteks tambahan yang mungkin disampaikan oleh tulisan di tempat lain dalam alur aksi tersebut? Cek apakah tulisan yang mendahului atau mengikuti gambar cukup deskriptif tentang apa yang disampaikan oleh gambar itu sendiri. Jika jawabannya ya, maka teks alternatif mungkin tidak diperlukan. Teks alternatif yang ditambahkan pada tulisan lain yang sudah menyampaikan informasi yang sama bisa terasa repetitif dan berlebihan.

Jika sudah menentukan bahwa sebuah gambar memerlukan teks alternatif, mari kita cek panduannya\!

### Bersifat tambahan

Tidak perlu mengulang informasi yang sama dengan teks yang menyertai gambar. Berikan konteks yang mungkin hilang jika seseorang tidak dapat melihat gambar.

### Konsisten

Teks alternatif adalah bagian dari komunikasi produk, jadi pastikan bahwa gaya bahasa dan kata-katanya cocok. Jangan gunakan jargon yang belum diperkenalkan di tempat lain.

### Gunakan suara aktif

Suara aktif biasanya lebih sederhana, lebih jelas, dan lebih seperti bercakap sehari-hari, sehingga membuat teks alternatif terdengar lebih manusiawi.

### Gunakan kapitalisasi yang sesuai

Mulailah dengan huruf kapital di kata pertama saja (*sentence case*), dan akhiri dengan titik. Meskipun teks alternatif tidak selalu dalam kalimat lengkap, melakukan ini membantu *screen reader* membaca konten dengan intonasi yang alami. Hindari menggunakan singkatan.

### Contoh penerapan

Selain panduan di atas, secara umum cukup tulis tentang apa yang ada di gambar. Salah satu cara yang paling mudah adalah dengan membayangkan situasi sedang mendeskripsikan gambar kepada seseorang lewat telepon.

![Inklusivitas4](//images.ctfassets.net/jf73m8fzk99f/4bxhZ2nFRT97xmFbmzLip4/eee1f9143efc2f4ba616e5c1e0855065/Inklusivitas4.png)

| Dihindari | Disarankan |
| :---- | :---- |
| Mengulang kembali kata-kata yang ada di bawah gambar. Jika ada banyak gambar, pastikan beri petunjuk gambar nomor berapa. | “Gambar 1 Seseorang sedang memperhatikan dengan seksama hasil capaian Rapor Pendidikan melalui layar gawai.” |

![Inklusivitas5](//images.ctfassets.net/jf73m8fzk99f/64nJ7RGsy4tycMrJ5pTPEI/a36bd0b65487c09fe16126628a7d4be3/Inklusivitas5.png)

| Dihindari | Disarankan |
| :---- | :---- |
| “Tanda tanya” “Informasi tambahan dibuat oleh tim Refleksi Kompetensi dengan bentuk tanda tanya.” | “Informasi tambahan” |

## **Catatan**

### Sumber panduan

Banyak panduan di atas yang bersumber dari panduan-panduan yang sudah tersedia sebelumnya. Beberapa panduan yang kami sediakan di bagian ini hanya kami bantu terjemahkan dan melakukan lokalisasi agar sesuai dengan konteks di Indonesia. Terjemahan dan lokalisasi yang kami lakukan bisa jadi belum sempurna. Sehingga, pastikan untuk memeriksa referensi berikut untuk melengkapi konteks.

**Referensi:**

[Adobe](https://spectrum.adobe.com/page/inclusive-ux-writing/)

[Atlassian](https://atlassian.design/content/inclusive-writing)

[Conscious Style Guide](https://consciousstyleguide.com/)

[Material Design Accessibility: Writing](https://material.io/design/usability/accessibility.html#writing)

[National Center on Disability and Journalism (NCDJ)](https://ncdj.org/)

[POUR](https://uiowa.instructure.com/courses/40/pages/accessibility-principles-pour)

[Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)

### Rencana pengembangan

Kami sangat ingin meneruskan penyusunan panduan ini agar lebih lengkap. Di antaranya adalah panduan yang membahas seputar:

1. Disabilitas (Mental, Netra, Tuli, Bisu, Fisik, Bahasa Isyarat)  
2. Gender  
3. Umur  
4. Status Ekonomi dan Sosial

Tentunya kami sangat senang dengan panduan ini sebagai langkah awal menuju pengembangan produk yang lebih inklusif. Kami harap dapat memulai penyusunan untuk mengembangkan panduan ini ke depannya. Doakan, ya\!

Berikut serba-serbi praktik penulisannya. Pastikan untuk cek Referensi untuk selengkapnya.

Jika prinsip komunikasi adalah elemen pertama dan utama yang memandu kita ketika menulis, maka gaya bahasa merupakan elemen sekunder atau pendukung. Secara umum, perusahaan dan pengguna sama-sama membutuhkan produk yang mudah digunakan, namun hanya perusahaan yang membutuhkan kepastian bahwa “suara” produk unik atau mudah dikenali. Pengguna memang bisa mendapat pengalaman yang menyenangkan saat menggunakan produk dengan “suara” yang unik, namun itu tidak selalu jadi fokus atau kebutuhan utama mereka. 

Karena itu, penerapan gaya bahasa di produk INA Digital Edu:

1. Prinsip komunikasi sifatnya **wajib** dan lebih diprioritaskan. Merujuk ke pesan **apa** yang disampaikan (*The What*).  
2. Gaya bahasa sifatnya **opsional** dan sebagai pelengkap. Merujuk ke **bagaimana** pesan disampaikan (*The How*).

Manusia memiliki pengalaman, perasaan, dan persepsi yang “berbeda” terhadap kata-kata, meski dengan kesamaan bahasa, budaya, dan latar belakang. Sehingga, menulis dengan jelas (prinsip komunikasi) kami anggap lebih utama dibanding menulis dengan suatu gaya tertentu.

Gaya bahasa biasanya terdiri dari *voice* (sosok) dan *tone* (nada). *Voice* dapat dianggap sebagai persona atau sosok. Sedangkan, *tone* dapat dianggap sebagai cara kita mengekspresikan sosok tersebut. Biasanya juga, untuk kebutuhan konsistensi, satu *voice* dan *tone* itu berlaku untuk semua produk.

Dalam konteks ekosistem produk INA Digital Edu yang tergolong unik, kami merasa perlu mengambil langkah implementasi gaya bahasa yang lebih relevan. Maka dari itu, kami menyepakati **dua gaya bahasa umum** untuk diterapkan ke **beberapa sosok**, dengan **derajat penerapan** yang sesuai konteks, objektif, dan perilaku pengguna produk INA Digital Edu yang berbeda-berbeda juga.

Mari kita coba pahami bersama-sama.

## **Gaya bahasa umum**

Terdapat dua gaya bahasa umum yang kami sepakati dapat diterapkan untuk semua penulisan produk INA Digital Edu, yakni:

### Lugas (*Straightforward*)

Tulisan kita perlu menyampaikan pesan secara langsung, jelas, dan tidak berbunga-bunga. Hindari tambahan informasi yang tidak relevan atau kata-kata yang tidak mendukung pesan utama. Tujuannya untuk memfokuskan pesan yang ingin disampaikan ke target audiens, sehingga pesan tersebut dapat dipahami dengan baik.

### Formal tapi tidak kaku

Tulisan kita perlu menyampaikan pesan yang jelas secara sopan dan profesional, tapi tidak terlalu kaku. Tujuannya agar komunikasi seimbang: Tetap sopan tanpa mengorbankan kejelasan. Hindari menulis baku sepenuhnya demi menjaga formalitas, tanpa mengutamakan kejelasan pesan yang perlu dimengerti oleh pengguna. Penulisan yang jelas dan lugas bisa tetap terasa profesional, begitu pula sebaliknya.

## **Sosok**

“Sosok” adalah *voice* atau persona (versi kami) di balik tulisan-tulisan dalam produk. Sosok-sosok ini yang kami anggap dapat mewakili bagaimana INA Digital Edu ingin terdengar (dan terasa) oleh pembaca. Sosok-sosok ini jugalah yang menjadi referensi Tim Pengembang, sebagai perpanjangan tangan dari lembaga atau kementerian tertentu, saat memilih dan menyesuaikan kata. Para sosok tersebut adalah:

![Gaya Bahasa1](//images.ctfassets.net/jf73m8fzk99f/1lbkl8rFgpSm87t34TknuI/c83d1165cfc6651141c835eb0da63e9e/Gaya_Bahasa1.png)

Ketiga sosok ini memiliki penjelasan dan derajat gaya bahasa utamanya masing-masing. Mari simak penjabarannya di bawah ini.

### Rekan

Melalui sosok Rekan, kita bercakap dengan pengguna layaknya kita **sesama rekan kerja yang setara** atau bahkan teman curhat mereka. Tidak lebih tinggi, tidak lebih rendah. Kata kunci: persuasif, kasual, naratif, jelas, humanis, pantun, yel-yel, setara, suportif.

![Gaya Bahasa2](//images.ctfassets.net/jf73m8fzk99f/5nkkwfjSleedT6BTS9oEZJ/8d3605793431505b5628407f87f981d7/Gaya_Bahasa2.png)

Rekan memiliki derajat kelugasan yang terletak di tengah. Artinya, ketika berbicara bisa langsung ke inti pesan, namun tetap ada ruang untuk seruan semangat dan mengajak.

![Gaya Bahasa3](//images.ctfassets.net/jf73m8fzk99f/6Ny5qaXz90F8taXhvq0nQk/71429c3b1d834c067301ab84eb2eb10c/Gaya_Bahasa3.png)

Derajat formal Rekan lebih ke tidak formal. Artinya, bahasa yang digunakan bisa kasual dan dekat dengan budaya pengguna.

### Tenaga Operasional

Melalui sosok Tenaga Operasional, kita bercakap dengan pengguna layaknya kita adalah **orang Tata Usaha (TU)**. Kita memiliki lebih banyak pengetahuan, namun posisi kita tetap setara pengguna. Kata kunci: formal, teknis, diandalkan, mengutamakan kecepatan, efektif, pengetahuan operasional, tau jalan tikus, koncian.

![Gaya Bahasa4](//images.ctfassets.net/jf73m8fzk99f/1e1jNkGT9kdkmhDx5ErzEn/bd3dcf4d5b8eb183bab1137a8b3ae806/Gaya_Bahasa4.png)

Derajat kelugasan Tenaga Operasional lebih ke arah sangat lugas dan langsung ke inti pesan. Artinya, ketika berbicara tidak perlu berbunga-bunga atau menjelaskan dengan panjang. Bahkan bisa langsung menggunakan bahasa teknis.

![Gaya Bahasa5](//images.ctfassets.net/jf73m8fzk99f/6P8GffEbYg0fotbmGHwjKy/4cee265196c6a7f3e458a96fb9ff07c3/Gaya_Bahasa5.png)

Derajat formal dari Tenaga Operasional terletak di tengah. Artinya, bahasanya bisa netral. Tidak kasual atau pun sangat formal.

### Atasan

Melalui sosok Atasan, kita bercakap dengan pengguna layaknya kita adalah **atasan atau manajer mereka**. Posisi kita lebih tinggi karena kita memiliki banyak wewenang dan wawasan. Kata kunci: deskriptif, kredibel, sopan, regulasi, substansi, instruktif, menginspirasi, berhati-hati.

![Gaya Bahasa6](//images.ctfassets.net/jf73m8fzk99f/5wCo1uAfv3V5CG4LskmImv/448ab1b22ec582e8dfb55f4c9a3e26ee/Gaya_Bahasa6.png)

Atasan memiliki derajat kelugasan yang terletak di tengah. Artinya, ketika berbicara bisa langsung ke inti pesan, namun ruang untuk tidak terlalu transparan atau pun bertele-tele juga tetap ada.

![Gaya Bahasa7](//images.ctfassets.net/jf73m8fzk99f/3uJHjb81WzLIz1xd4NC6qr/e0d0ea6ddec992b686ac8c7872f7b502/Gaya_Bahasa7.png)

Derajat formal dari Atasan lebih ke arah sangat formal. Artinya, bahasa yang digunakan bisa sopan dan profesional.

## **Terjemahan ke produk**

Berikut peta ketiga sosok dan produk-produk di INA Digital Edu:

![Gaya Bahasa8](//images.ctfassets.net/jf73m8fzk99f/7b26JG5zvBtXD9EVh0Sikf/f2ae6943604a485de77a0079b79b9afc/Gaya_Bahasa8.png)

## **Catatan**

### *Clarity above all*

Salah satu dari empat prinsip komunikasi produk INA Digital Edu yang tidak cuma perlu dipegang teguh, namun juga perlu diberikan penekanan adalah **Kejelasan**. Kami menyebutnya *clarity above all*. Kejelasan adalah prioritas pertama dan yang paling utama\! Jadi, sebuah produk harus mengutamakan penulisan informasi sejelas-jelasnya sebelum mempertimbangkan faktor lain. 

Ketika informasi sudah jelas, barulah pertimbangan gaya bahasa atau penuansaan dapat bermain di situ. Prinsip kejelasan inilah yang akan membuat penulisan menjadi lebih kontekstual dan sesuai dengan kebutuhan tiap produk.

### Terjemahan ke produk

Gaya bahasa bisa berbeda ketika diturunkan ke masing-masing produk. Namun, perlu diingat bahwa yang menyatukan produk-produk tersebut adalah prinsip komunikasi dan gaya bahasa utama, yakni 1\) Lugas (*straightforward*) dan 2\) Formal tapi tidak kaku.

### Panduan Gaya Bahasa ini dapat digunakan untuk

1. Penulis Produk (UX Writers)  
2. Penulis Brand and Communication (B\&C). Khususnya untuk merancang materi komunikasi (penulisan *script*, *key visual*, *push notification*, dan lainnya), serta menentukan suara dibalik *voice over*  
3. Penulis Tim Ops, Konten, Substansi, Marketing, dan lainnya—siapa pun yang menyusun komunikasi/tulisan yang berhadapan langsung dengan pengguna

## **Referensi**

[Strategic Writing for UX oleh Torrey Podmajersky](https://www.oreilly.com/library/view/strategic-writing-for/9781492049388/)

[Spectrum oleh Adobe](https://spectrum.adobe.com/page/voice-and-tone/')

Nada bicaranya ramah atau kaku? Mari cari tahu!

Konten substansi adalah konten yang memiliki keterkaitan erat dengan metadata yang dibuat oleh tim substansi (biasanya direktorat jenderal di bawah kementerian, pembuat kebijakan, tim dari pusat studi, tim konsultan, dan lain-lain). 
Konten substansi sangat perlu disesuaikan terutama saat target pembaca merupakan masyarakat umum di luar warga sekolah atau pemerintah daerah yang tidak memiliki pengetahuan mendalam tentang terminologi dunia pendidikan. Dengan mengubah cara penyampaian dan menyederhanakan pilihan bahasa, pesan dapat diterima dengan lebih maksimal dan tujuan pesan bisa tercapai.

## Area penyesuaian

Penyesuaian konten substansi dilakukan di area:

### Pilihan kata

Gunakan pilihan kata yang umum digunakan atau dipahami target audiens, namun tetap tidak menyimpang dari makna. Contoh penyesuaian konten dengan target audiens orang tua murid: 

| Narasi substansi | Penyesuaian |
| :---- | :---- |
| “Pendidik perlu memberikan dukungan afektif kepada setiap peserta didiknya.”  | “Guru perlu memberikan dukungan moral kepada setiap muridnya.” |

### Gaya bahasa

Gunakan gaya bahasa yang lebih informal, namun tetap menggunakan ejaan yang sesuai. Contoh penyesuaian konten dengan target audiens orang tua murid: 

| Narasi substansi | Penyesuaian |
| :---- | :---- |
| “Pendidik perlu memberikan dukungan afektif kepada setiap peserta didiknya. | “Dukungan psikologis adalah hal yang penting untuk diberikan oleh guru ke setiap muridnya.” |

### Cara penyampaian informasi

“Hook” ketertarikan dengan menyampaikan informasi lewat sudut pandang manfaat atau relevansinya ke target audiens. Contoh penyesuaian konten dengan target audiens orang tua murid: 

| Narasi substansi | Penyesuaian |
| :---- | :---- |
| “Pendidik perlu memberikan dukungan afektif kepada setiap peserta didiknya.” | “Sebagai murid, anak Anda dapat belajar lebih maksimal jika mendapat dukungan psikologis dari gurunya.” |

## Alur kerja

Pada akhirnya, penyesuaian konten substansi harus disetujui oleh Tim Substansi dan Dewan Pengarah. Berikut praktik baik alur kerja penyesuaian konten yang selama ini telah diterapkan oleh tim INA Digital Edu:

### *Drafting* 

1. Pelajari dokumen substansi asli secara menyeluruh

2. Manfaatkan hasil studi/riset yang sudah ada dalam membuat penyesuaian konten

3. Jelaskan rasionalisasi dari *draft* yang dibuat untuk membantu pemberi umpan balik memahami konteks

### Umpan balik

1. Jika hasil studi sebelumnya dirasa kurang lengkap dan waktu memungkinkan, uji cobakan *draft* ke pengguna

2. Bagikan dokumen secara *async* ke Tim Substansi (misal lewat grup WhatsApp) untuk mendapatkan umpan balik awal

3. Buat *working-session* bersama Tim Substansi untuk mendiskusikan umpan balik

### Finalisasi

1. *Preview* hasil revisi ke Tim Substansi untuk penyelarasan 

2. *Preview* konten yang sudah disepakati bersama tim Substansi ke Dewan Pengarah untuk konfirmasi akhir

Hasil riset sering kali membuktikan bahwa kebanyakan pengguna tidak membaca keseluruhan tulisan dan melakukan *skimming* di bagian-bagian desain tertentu. Biasanya pengguna hanya membaca judul dan tombol *call-to-action* (CTA) saja. Akan tetapi, dua tempat tersebut jarang memiliki ruang yang cukup untuk mengkomunikasikan konteks lengkap. Sehingga, pengguna sering ketinggalan informasi dan tidak mengerti sepenuhnya akan dampak dari aksi yang dilakukan. Hal ini kadang berujung mereka merasa tidak puas dan meningkatnya angka tiket *customer ops* yang masuk.

Berbagai cara sudah dilakukan untuk mendorong minat baca pengguna. Mari kita coba bahas\!

## **Gunakan kalimat persetujuan**

Gambar di  bawah adalah salah satu contoh *confirmation pop up* ketika pengguna A hendak mengirim data ke pengguna B. 

![Tidak membaca1](//images.ctfassets.net/jf73m8fzk99f/6mssY3A7PMkAJtjzLzDUpO/361f1e52e33503419636e51aae79aec4/Tidak_membaca1.png)

Berikut jika dibedah:

1. **Pengguna hanya membaca kotak hijau: *title* dan tombol *call-to-actio*n**. Seringkali bahkan pengguna langsung menekan tombol tanpa membaca informasi apa pun.

2. **Adanya kotak merah: kalimat persetujuan** membuat pengguna tidak dapat lanjut jika belum mengetik kalimat persetujuan tersebut.

Formula yang disarankan adalah Subjek (“Saya”)+“setuju”+aksi+dampak+tanda baca titik.

3. **Diskusi dengan tim** karena ini dapat menimbulkan rasa frustasi pengguna. Tanya kembali, apakah frustasi pengguna dapat dikorbankan jika dibandingkan dengan resiko pengguna tidak membaca dan tidak mengerti dampak dari aksinya?

## **Perbanyak elemen visual**

Gambar di  bawah adalah contoh *introduction pop up* ketika pengguna baru saja tiba di suatu halaman. 

![Tidak membaca2](//images.ctfassets.net/jf73m8fzk99f/7EyQcYNUEfXWO7RGjNlcNn/3aec80292e14c537e154b6cccad294bc/konfirmasi_pemasangan.png)

Berikut jika dibedah:

1. **Menyematkan elemen grafis** (statis maupun *motion*, jangan terlalu perlihatkan tombol menutup) dan membesarkan ukuran *font* (*less copy*) akan lebih menarik perhatian dan tidak mengintimidasi. Hal ini karena pola konsumsi informasi pengguna adalah tidak membaca tulisan ketika sedang navigasi produk.

2. **Judul** sebaiknya diawali kata kerja dan sama dengan tombol utama.

3. ***Subtitle*** atau deskripsi sebaiknya tidak lebih dari dua baris.

4. **Tombol** menutup sebaiknya menggunakan kata yang singkat agar semakin tidak terlihat (misal “Tutup”  dibandingkan “Kembali” lebih singkat “Tutup” meskipun jadinya tidak konsisten dengan halaman lainnya).

Contoh lain memperbanyak elemen visual yang dapat dicek di Refleksi Kompetensi bagian *onboarding*:

![Tidak membaca3](//images.ctfassets.net/jf73m8fzk99f/6WnYKBdEhJrbU9TnFdcRw6/7134f6d243000aaaf9a00868664ca972/Tidak_membaca3.png)

# **Gunakan animasi atau *motion***

Gambar di bawah adalah contoh animasi pada eksperimen Refleksi Kompetensi. 

![tidak membaca6](//images.ctfassets.net/jf73m8fzk99f/6TP8vj6biotaUchaMTw08k/4dec1dfa066375d503b1a7d4f725ce37/tidak_membaca6.png)

Berikut jika dibedah:

1. **Menggunakan *typing motion*** untuk menangkap perhatian pengguna dan memastikan mereka membaca. Kolaborasi bersama desainer dan illustrator.

2. **Membuat gambar/*icon* bergerak** juga dapat menarik perhatian pengguna dengan cepat.

# **Cacah informasi**

Gambar di samping adalah contoh fitur di ARKAS atau aplikasi penganggaran sekolah. Fitur di atas adalah Perbarui Data BKU (Buku Kas Umum) yang mengkalkulasi ulang tanggal dan nominal laporan keuangan. 

![Tidak membaca4](//images.ctfassets.net/jf73m8fzk99f/5e6rLSD7wq0jPt7uyCUDIn/8febc3b4d5e598c99148d2043ae84df9/Tidak_membaca4.png)

Halaman ini berpotensi menimbulkan kebingungan bagi pengguna, maka yang bisa dilakukan adalah:

1. **Memberikan pemisah yang jelas** untuk setiap informasi sesuai dengan alurnya, yaitu dari atas ke bawah.

2. **Gunakan warna yang berbeda untuk memberikan informasi utama**. Pada kasus ini, Banner digunakan untuk menampilkan hasil kalkulasi ulang dan memberikan instruksi lanjutan tentang cara membaca data.

3. **Gunakan Table jika ada banyak kategori**. Pengguna dapat mengidentifikasi per kategori dengan mudah daripada ditampilkan dalam paragraf atau *bullet points*.

Menyisipkan pantun dan menyusun kalimat dengan akhiran kata yang berima terbukti lebih merenggangkan emosi pengguna dan memberi kesan kedekatan dalam hal budaya. Berikut praktik baik dalam mencantumkan pantun ke dalam pengalaman pengguna.

![Pantun](//images.ctfassets.net/jf73m8fzk99f/2XQdPtu4kxgg1O4y5iJHIW/1c981ebb9c1ef3d2c8570a2f87666d52/Pantun.png)

## **Akhiri bait dengan kata yang berima**

Bukan pantun namanya jika tanpa kata yang berima. Kalimat yang berima atau yang berakhiran dengan suara yang sama membuat pembaca lebih mudah mengingat pesan. Pengalamannya mirip seperti menghafal sebuah lagu. Manfaatkan [salah satu situs rima kata](https://kuncitts.com/rima-kata.php) agar lebih mudah merangkai kata-kata.

## **Sisipkan di tempat tertentu**

Sebaiknya sisipkan pantun di tempat tertentu saja agar lebih efektif. Biasanya di *onboarding* atau panduan, di mana mental pengguna siap untuk informasi yang banyak.

## **Gunakan bahasa inklusif**

Hindari nama daerah tertentu atau yang hanya dimengerti sebagian pembaca saja. Gunakan nama yang dapat dimengerti semua pembaca, seperti nama buah, bunga,  sayur, dan sebagainya.

Setelah membahas berbagai panduan penulisan di bagian sebelumnya, kami juga turut mendokumentasikan beberapa strategi yang dilakukan untuk kasus-kasus unik ketika menulis dengan konteks pemerintahan dan bekerja sama lintas tim. Harapannya dokumentasi strategi ini dapat menjadi pegangan ketika pembaca menghadapi kasus yang mirip. Beberapa strategi yang akan dibahas adalah untuk kasus:

1. Pengguna tidak membaca keseluruhan tulisan

2. Pantun

3. Penyesuaian konten substansi

Catatan: Contoh strategi yang dibahas sejatinya hanyalah contoh. Diskusikan kembali dengan tim cara terbaik untuk mengaplikasikannya, ya.

Membedah penulisan untuk kondisi unik seputar pengguna dan kolaborasi antar fungsi.

Prinsip komunikasi di panduan ini diturunkan langsung dari temuan perilaku pengguna. Karena itu, prinsip komunikasi sebaiknya menjadi hal utama yang harus diketahui dan dikuasai, serta **wajib** diterapkan dalam penyampaian pesan apa pun dalam produk. Jika sudah memahami dan mengilhami prinsip komunikasi, penulis akan lebih mudah untuk terjun ke panduan yang lebih rinci seperti Gaya Bahasa, Inklusivitas, dan lainnya.

Ada empat prinsip komunikasi agar pengguna produk dapat menerima dan mengerti tulisan kita dengan lebih baik:

## **Menulis dengan empati**

Tulisan kita harus mencerminkan bahwa kita **memahami tantangan** yang dialami pengguna dan **memberikan solusi** atas tantangan tersebut.

## **Jelas dan ringkas**

Tulisan kita harus dapat membantu pengguna memahami informasi penting dengan mudah, **dalam waktu sesingkat-singkatnya.**

## **Membimbing**

Tulisan kita mengambil peran sebagai panduan, bukan perintah, sehingga lebih mengedepankan **motivasi yang membangun kemandirian dan kepercayaan diri pengguna**.

## **Menggunakan fakta**

Tulisan kita harus didasarkan pada **sumber informasi yang resmi atau tepercaya**, sehingga memiliki kekuatan untuk dijadikan referensi atau *source of truth* bagi pengguna.

Prinsip payung untuk segala jenis komunikasi.