LAPORAN STEP 10,11, DAN 12

INTERAKSI MANUSIA DAN KOMPUTER

APLIKASI TELYUFIT

Dosen Pengampu :
Danang Junaedi, M.T.

Disusun oleh:
Adinda Dwi Maharani 1303213084
Nadya Putri Sinulingga 1303213056
Betari Angeli 1303213017
Carisya Silfania Dewi 1303210180
George Ibrahim hanif 1303213147

PROGRAM STUDI TEKNOLOGI INFORMASI

FAKULTAS INFORMATIKA
UNIVERSITAS TELKOM
 Step 10 - Internationalization dan Accessibility

A. Internationalization
1. Pemilihan Text
● Menggunakan Font Nunito Sans dengan ukuran font 24px dan dapat dengan mudah
diterjemahkan dan diadaptasi ke berbagai Bahasa.
● Menggunakan Bahasa yang baku dan tertuju pada satu orang.
● Tombol CTA (Call-to-Action): "Mulai Latihan"
Tombol yang mengundang pengguna untuk memulai latihan atau rutinitas fitness.
● Instruksi Pelatihan: "Lakukan 10 kali Sit-up"
Instruksi yang jelas dan spesifik tentang latihan yang harus dilakukan oleh pengguna,
memberikan jumlah repetisi yang diperlukan.

2. UI Control
Menggunakan ikon dan kontrol antarmuka pengguna (UI) yang universal dan dikenal secara
internasional. Misalnya, menggunakan ikon lonceng untuk notifikasi atau ikon jam untuk waktu.

3. Icon
Menggunakan ikon yang dapat dikenali secara global dan tidak terkait dengan budaya atau
bahasa tertentu. Misalnya, menggunakan ikon hati untuk menandakan aktivitas yang disukai atau
ikon langkah untuk melacak aktivitas fisik.

4. Color and Graphics

Menggunakan palet warna yang tidak terkait dengan simbolisme atau makna budaya tertentu.
Memilih grafik dan gambar yang universal dan dapat dimengerti secara global tanpa penjelasan
tambahan. Misalnya, menggunakan gambar orang yang berolahraga atau grafik batang untuk
menggambarkan kemajuan.

5. Localization
a. Customization Design Component
Menyesuaikan komponen desain, seperti tombol, input form, atau tata letak halaman,
sesuai dengan preferensi dan kebutuhan target pasar tertentu. Misalnya, mengadaptasi
unit pengukuran atau format tanggal sesuai dengan preferensi wilayah atau negara.

b. Layout Customization
Menyesuaikan tata letak elemen desain seperti font, spasi, dan pengaturan teks untuk
memastikan kecocokan dengan bahasa dan budaya target. Misalnya, mempertimbangkan
posisi elemen teks dalam bahasa yang membaca dari kanan ke kiri atau mengadaptasi tata
letak halaman untuk memasukkan informasi yang lebih relevan dengan budaya lokal.

B. Accessibility

1. Design Component for Disabilities

Memilih dan mengatur komponen desain yang mendukung pengguna dengan disabilitas,
seperti menyediakan opsi teks yang dapat diperbesar, kontras yang tinggi untuk pengguna dengan
penglihatan yang lemah, dan aksesibilitas keyboard untuk navigasi. Misalnya, menyediakan
tombol dengan ukuran yang besar dan kontras tinggi untuk memudahkan pengguna dengan
penglihatan yang lemah.
2. Layout for Accessibility
Mengatur tata letak halaman dan elemen desain dengan mempertimbangkan pengguna dengan
disabilitas, seperti menggunakan markup yang semantik untuk memudahkan pengguna dengan
gangguan visual dalam membaca dan navigasi konten atau menyediakan deskripsi alternatif untuk
gambar untuk penggunaan screen reader.
Penjabaran ini memberikan gambaran umum tentang bagaimana penerapan internasionalisasi,
lokalisasi, dan aksesibilitas dapat diterapkan dalam aplikasi fitness. Penting juga untuk
melakukan riset lebih lanjut dan melibatkan pengguna dari berbagai latar belakang untuk
memastikan penerapan yang tepat serta efektif sesuai dengan kebutuhan dan karakteristik dari
pengguna target.
 Step 11 dan 12 - Graphics, Icons, Images dan Warna

Dibawah ini merupakan rancangan UI project yang diterapkan pada aplikasi ini :
A. Graphics
Dalam aplikasi TelyuFit kami menggunakan grafik seperti ini untuk mengilustrasikan beberapa
hal, dengan tujuan untuk memudahkan pengguna mengerti serta menambah nilai pada penampilan
aplikasi.
B. Icons

No. Gambar Ikon Nama Ikon Keterangan

1 Username_Icon Ikon untuk menginputkan username dan akan

digunakan sebagai nama panggilan user pada
aplikasi

2 Password_Icon Ikon untuk menginputkan kata sandi

(password)

Handphone_Icon Ikon menunjukkan kepada user untuk

menginputkan nomor dari handphone yang
3 digunakannya

4 Walk_Icon Ikon untuk menunjukkan kepada user

informasi jumlah harian dari aktivitas olahraga
user

5 Eat_Icon Ikon untuk menunjukkan kepada user

informasi jumlah kalori dari rencana user

6 Sleep_Icon Ikon untuk menampilkan jumlah waktu tidur

user

7 Home_Icon Ikon untuk menampilkan beranda/menu utama

8 Leaderboard_Icon Ikon untuk menampilkan menu leaderboard

beserta progres langkah yang ditempuh user
9 Profile_Icon Ikon untuk menampilkan menu profil dari user

10 Bars_Icon Ikon untuk menampilkan menu

11 Search_Icon Ikon untuk melakukan pencarian informasi

yang ada di aplikasi
C. Justifikasi Design yang Mengakomodir Pengguna dengan Gangguan Penglihatan
Total estimasi 4.5% dari populasi dunia mengalami buta warna, 4% menderita rabun jauh, dan
0.6% mengalami buta sepenuhnya. Kesulitan penglihatan adalah masalah yang prevalen, di mana
solusinya jarang diimplementasikan oleh designer UI.
Langkah-langkah yang diambil oleh pengembang aplikasi TelyuFit untuk memitigasi
permasalahan tersebut adalah:
- Menghindari menggunakan warna untuk menyampaikan informasi
Warna dapat diinterpretasikan sebagai banyak hal, contohnya hijau berarti positif dan
merah berarti negatif. Konotasi tersebut kerap digunakan oleh pengembang aplikasi demi
meningkatkan aspek simplisitas pada aplikasinya. Namun, warna tersebut tidak dapat
digunakan secara maksimal oleh pengguna yang menderita buta warna.

(Pada penderita buta warna red-green, sulit untuk

menginterpretasikan teks hijau atau merah pada aplikasi)

Sebagai alternatif, TelyuFit menggunakan warna sesuai dengan warna ciri khas
aplikasi dan memanfaatkan teks yang cenderung lebih straightforward. Meskipun harus
mengorbankan minimalisme, hal ini dilakukan untuk mengakomodasi pengguna yang
mengalami buta warna.
 Selanjutnya, TelyuFit juga mengakomodasi pengguna dengan gangguan buta warna
melalui cara memilih warna teks yang memiliki rasio kontras yang tinggi yaitu 5.57:1.
Rasio kontras tinggi tersebut membuat TelyuFit menjadi aplikasi yang dapat dilihat
melalui grayscale secara nyaman.

- Menggunakan skema warna yang monokromatik

Skema warna monokromatik hanya menggunakan satu hue untuk berbagai macam warna.

Role :
1. Fania : Step 11 dan 12
2. Betari : Step 11 dan 12
3. Nadya : Step 11 dan 12
4. Adinda : Step 10
5. George : Step 10