Sebuah tim pengembang sedang merancang aplikasi “SehatKita”, platform layanan kesehatan digital yang menyediakan fitur pendaftaran pasien, konsultasi daring, dan akses riwayat medis. Pada tahap awal, tim diminta membuat wireframe digital sebagai rancangan antarmuka utama. Menurut Anda, bagaimana cara desainer menentukan tata letak, hierarki informasi, dan elemen navigasi agar wireframe tersebut tidak hanya fungsional, tetapi juga mudah dipahami dan menarik bagi pengguna dari berbagai usia?
Forum Pertemuan 7 (Dosen : Anita Ratnasari)
Number of replies: 25Menurut pendapat saya, desainer wireframe aplikasi SehatKita harus mempertimbangkan tata letak yang terstruktur dengan komponen utama, seperti menempatkan pendaftaran pasien di tempat yang mudah dijangkau. Ini penting untuk membuat aplikasi fungsional dan mudah dipahami oleh berbagai usia. Hierarki informasi harus memprioritaskan komponen penting, sementara teknik penjelasan progresif dapat digunakan untuk menampilkan lebih banyak informasi hanya saat diperlukan. Navigasi yang mudah digunakan dan umpan balik visual yang jelas akan membuatnya lebih mudah bagi pengguna. Selain itu, memastikan bahwa aplikasi memiliki font yang mudah dibaca, kontras warna yang cukup tinggi, dan desain responsif akan membuatnya lebih mudah diakses dan nyaman digunakan oleh banyak orang.
Setuju Yujara, bisa berikan contoh font yang mudah dibaca seperti apa, dan baiknya pemilihan warna nya bagaimana
untuk font nya seperti Roboto , Open sans , Lato , Arial , untuk warna nya harus kontras hindari warna warna yang sulit di bedakan pada penderita buta warna seperti warna merah dan hijau.
Menurut saya dari pertanyaan tersebut desainer perlu memastikan tata letak yang terstruktur agar pengguna bisa langsung memahami fungsi tiap bagian dengan cukup melihat dan membaca. Khususnys menu utama , menu pendaftaran dan konsultasi, 3 menu ini bisa di tempatkan di posisi yang mudah di jangkau misalnya di bagian utama halaman dan terletak di tengah layar atau bawah jika Apk tersebut versi mobile dan hindari 3 menu tersebut berada di dalam 1 menu / tombol keterangan.
Sedangkan untuk teks , menggunakan teks yang jelas dengan ukuran 14-16pt dengan fonts Roboto, Popping atau Inter agar pengguna memudah membaca. Sedangkan warna menggunakan warna dengan background yang terang dan netral seperti Putih. Dan karena ini digunakan untuk hampir semua umur apk tidak mengaktifkan metode dark/ gelap agar tepat mudah di baca gunakan bahasa sederhana tanpa istilah yang rumit.
Sedangkan untuk teks , menggunakan teks yang jelas dengan ukuran 14-16pt dengan fonts Roboto, Popping atau Inter agar pengguna memudah membaca. Sedangkan warna menggunakan warna dengan background yang terang dan netral seperti Putih. Dan karena ini digunakan untuk hampir semua umur apk tidak mengaktifkan metode dark/ gelap agar tepat mudah di baca gunakan bahasa sederhana tanpa istilah yang rumit.
Setuju, Adhy, terutama untuk pewarnaan, bisa dengan menggunakan pemilihan warna yang kontras yaa
In reply to YUJARA PUTRA UTAMA
Re: Forum Pertemuan 7 (Dosen : Anita Ratnasari)
by RUMENDA CITRA HUTAGAOL -Menurut pendapat saya, desainer perlu membuat wireframe aplikasi “SehatKita” dengan memperhatikan kemudahan dan kenyamanan pengguna dari berbagai usia. Tata letaknya harus sederhana dan teratur, agar pengguna mudah menemukan fitur yang dibutuhkan seperti pendaftaran pasien, konsultasi, dan riwayat medis. Hierarki informasinya juga harus jelas, dengan menampilkan menu atau tombol penting di posisi yang mudah terlihat. Selain itu, elemen navigasi sebaiknya dibuat intuitif dengan ikon dan teks yang mudah dipahami. Saya juga berpikir warna dan ukuran huruf perlu disesuaikan agar tampilan tetap menarik dan tidak membingungkan, sehingga wireframe terlihat fungsional sekaligus ramah bagi semua pengguna.
Menurut saya, Tim pengembang aplikasi “SehatKita” harus menentukan tatak letak yang familiar dan mudah dipahami serta konsisten sehingga mudah dipahami banyak orang. Pengurutan prioritas dengan ukuran font, warna kontras, dan teks bold/tebal untuk seseorang lebih memhami prioritas informasi yang diberikan. Selain itu perlu mengkombinasikan element navigasi yang menggabungkan icon dan label teks untuk mempermudah memahami fungsi dari icon tersebut. Penggunaan font yang dapat dengan mudah dibaca seperti Poppins, Sans-serif, Inter, atau Segoe UI.
Menurut saya jika kita sedang merancang aplikasi "SehatKita" yang semisalnya berbasis platform mobile tentunya mulai dari cara menentukan tata letak saya akan mengambil frame phone lalu frame tersebut akan saya bagi dengan grid pada figma sehingga tata letaknya lebih konsisten, kalau hierarki informasi dalam konteks halaman home saya akan memberikan beberapa informasi kalau dari prioritas "SehatKita" ada jawdal dokter sehingga dari sisi kita sebagai pasien langsung mengetahui dokter yg available untuk daftar ataupun konsultasi online. elemen navigasi wajib ada icon dan icon yg aktif jika dipilih , lalu keterangan dibawah icon sehingga tidak membuat user bingung fungsi dari icon tsb. kalau dari pemahaman dan menarik dari user berbagai usia , kita bisa menambahkan walkthrough saat pertama kali user login dalam aplikasi agar informasi lebih tersampaikan maksimal , mungkin untuk tambahan agar lebih menarik kita dapat menggunakan font "montserrat" karena menurut saya lebih mudah dibaca dan untuk pemilihan warnapun harus yang selaras dengan tema kesehatan.
Menurut pendapat saya, perancangan wireframe aplikasi "SehatKita" harus didasarkan pada prinsip ketergunaan dan aksesibilitas universal. Hal ini dicapai dengan mengadopsi Bottom Navigation Bar untuk fitur inti (Pendaftaran, Konsultasi, Riwayat Medis) karena merupakan pola interaksi mobile yang sangat intuitif. Dalam hal hierarki, kita harus menempatkan tombol aksi prioritas tinggi seperti "Buat Janji" di bagian above the fold dengan penekanan visual yang kuat, sementara struktur konten terkelompok rapi dalam kartu dengan heading yang jelas. Terakhir, menjamin aksesibilitas penting dengan penggunaan ukuran font memadai, kontras warna optimal, dan area sentuh tombol yang luas demi kenyamanan operasional seluruh kelompok pengguna. Pendekatan ini akan menghasilkan rancangan antarmuka yang efisien dan inklusif.
Menurut saya, kuncinya cuma satu: jangan bikin pengguna bingung.
Tata Letak : buat layout yang rapi, konsisten, pola yang umum (dari atas ke bawah), dan beri spes "ruang napas" biar nggak berdekatan.
Hierarki:buat lebih besar. fitur utamanya (Daftar, Konsultasi, Riwayat Medis) di halaman depan supaya kelihatan.
Navigasi:beri menu Tab Bar supaya kelihatan jelas di bagian bawah, bukan menu "hamburger" yang ngumpet. Labelnya juga harus pakai bahasa manusia yang gampang dimengerti.
Tata Letak : buat layout yang rapi, konsisten, pola yang umum (dari atas ke bawah), dan beri spes "ruang napas" biar nggak berdekatan.
Hierarki:buat lebih besar. fitur utamanya (Daftar, Konsultasi, Riwayat Medis) di halaman depan supaya kelihatan.
Navigasi:beri menu Tab Bar supaya kelihatan jelas di bagian bawah, bukan menu "hamburger" yang ngumpet. Labelnya juga harus pakai bahasa manusia yang gampang dimengerti.
Menurut pandangan saya, dalam merancang wireframe aplikasi “SehatKita”, hal terpenting adalah memahami kebutuhan serta kenyamanan pengguna dari berbagai usia dan latar belakang. Tata letak sebaiknya dirancang dengan urutan yang logis, dimulai dari fitur utama seperti pendaftaran dan konsultasi agar pengguna dapat langsung mengakses layanan yang dibutuhkan. Struktur informasi perlu mengalir secara alami, misalnya dari data umum menuju informasi pribadi. Navigasi juga harus dibuat sederhana di setiap halaman, dengan menu utama yang mudah dijangkau di bagian bawah layar. Selain itu, penggunaan warna dan ikon perlu disesuaikan agar setiap fungsi dapat dikenali dengan baik, terutama bagi pengguna yang kurang terbiasa dengan teknologi. Dengan pendekatan seperti ini, wireframe bukan hanya sekadar rancangan tampilan, tetapi juga menjadi dasar pengalaman pengguna yang nyaman, efisien, dan mudah dipahami oleh semua kalangan.
menurut pendapat saya, penentuan tata letak (layout) harus bersih, rapi, dan tidak berlebihan gunanya untuk memastikan kemudahan pengguna diberbagai usia, termasuk lansia. penetapan hierarki informarsi untuk mendefinisikan skala visual agar tertuju pada informasi penting, untuk memakai fontnya seperti font Robotto, Popping, Inter dengan ukuran text 14-16 agar pengguna gampang membacanya. peracangan elevemen navigasi & interaksi haruslah intuituf, cepat, dan mudah diakses dibebagai usia, seperti aksesibilitas sentuh, label dan ikon, jangan hanya menggunakan ikon tetapi ditambahkan dengan text, alur yang jelar, seperti pendaftaran pasien, lokasi berada, dan berapa banyak antrian lagi untuk kita sampai ke pengecekan dokter.
Menurut saya merancang wireframe aplikasi SehatKita, desainer perlu menggunakan tata letak sederhana dengan pembagian area jelas agar fitur utama mudah dijangkau dan gunakan ruang space kosong untuk menghindari tampilan yang berlebihan. Hierarki informasi ditentukan melalui ukuran huruf min 14-16 px dengan sans serif font seperti Roboto, Open Sans, dan Lato, warna, dan posisi elemen berdasarkan prioritas. Gunakan elemen navigasi dengan memberikan ikon/label yang mudah dipahami, serta dilengkapi indikator aktif/ highlight agar pengguna tau posisi di aplikasi tersebut.
Untuk menentukan tata letak, hierarki informasi, dan elemen navigasi pada wireframe aplikasi “SehatKita”, desainer perlu mulai dengan memahami alur kebutuhan pengguna secara umum, misalnya pendaftaran, konsultasi, hingga melihat riwayat medis, lalu mengatur urutan tampilannya dari yang paling sering diakses dan paling penting di bagian depan. Tampilan utama sebaiknya memiliki menu navigasi yang jelas dan mudah dikenali seperti ikon berlabel teks agar dapat dipahami oleh pengguna dari berbagai usia. Informasi penting seperti tombol “Daftar Konsultasi” atau “Riwayat Medis” harus diberi penekanan visual melalui ukuran atau posisi, misalnya ditempatkan di bagian tengah atau atas layar. Selain itu, ruang kosong perlu dimanfaatkan agar tampilan tidak terlalu padat dan tetap memberi kenyamanan visual. Dengan pendekatan ini, wireframe akan terasa terstruktur, jelas, dan mampu mengarahkan pengguna secara natural tanpa perlu banyak penjelasan tambahan.
Menurut saya desainer bisa menentukan tata letak dengan menggunakan grid agar tampilan rapi dan mudah dipahami. Hierarki informasi dibuat berdasarkan tingkat kepentingan fitur, misalnya konsultasi online ditampilan paling utama. Elemen navigasi dibuat sederhana dengan ikon dan label yang jelas agar mudah digunakan semua usia. Selain itu, desain dibuat dengan warna lembut, font yang mudah dibaca, dan tombol button yang bbesar agar lebih fleksibel
menurut saya pertama yang harus diperhatikan adalah tata letak atau layout harus dibuat sederhana dan terstruktur desainer bisa menggunakan gird system supaya posisi elemen seperti tombol, daftar atau konsultasi sebaiknya ditempatkan di bagian yang mudah dijangkau mata pengguna seperti tengah layar atau bagian tengah mobile,
kedua hierarki informasi harus jelas terutama untuk informasi jadwal konsultasi atau riwayat medis ditampilkan lebih menonjol sedangkan menu tambahan bisa di sembunyikan di menu drop down atau tab terpisah ketiga elemen navigasi perlu perlu dibuat intuitif menu utama sebaiknya menggukan ikon atau label yang mudah difahami semua usia seperti simbol dokter untuk konsultasi simbol riwayat untuk data medis dan yang paling penting hindari penggunaan istilah yang membingungkan
kedua hierarki informasi harus jelas terutama untuk informasi jadwal konsultasi atau riwayat medis ditampilkan lebih menonjol sedangkan menu tambahan bisa di sembunyikan di menu drop down atau tab terpisah ketiga elemen navigasi perlu perlu dibuat intuitif menu utama sebaiknya menggukan ikon atau label yang mudah difahami semua usia seperti simbol dokter untuk konsultasi simbol riwayat untuk data medis dan yang paling penting hindari penggunaan istilah yang membingungkan
Menurut saya pribadi, dalam merancang wireframe aplikasi SehatKita perlu diperhatikan keseimbangan antara fungsi dan kemudahan penggunaan. Peletakkan ditentukan berdasarkan alur utama pengguna, dengan elemen penting seperti pendaftaran, konsultasi, dan riwayat medis ditempatkan di posisi strategis agar mudah dijangkau. Urutan dan alur informasi dari aplikasi tersebut dibuat jelas melalui ukuran dan warna elemen untuk menonjolkan fitur utama tanpa membingungkan pengguna. Navigasi menggunakan ikon dan teks yang sederhana agar mudah dipahami oleh berbagai kelompok usia, didukung oleh tampilan responsif dan aksesibilitas tinggi. Dengan ini, wireframe bisa menjadi lebih mudah dipahami bagi semua pengguna.
Menurut saya untuk merancang wireframe aplikasi itu, desainer diharuskan memperhatikan tata letak nya lalu membuatnya jadii sederhana dan terstruktur supaya elemen dapat mudah diakses oleh pengguna. Hierarki informasinya dibuat jelas menonjolkan fitur utama seperti pendaftaran pasien, konsultasi daring, dan riwayat medis menggunakan ukuran dan posisi yang bagus. Elemen navigasi menggunakan ikon serta label yang mudah dipahami atau kenali, seperti menu di bagian bawah layar mempermudah interaksi. Jadi wireframe yang dibuat akan lebih fungsional, intuitif, dan nyaman digunakan oleh pengguna.
Menurut saya, desainer perlu menentukan tata letak dengan menempatkan fitur yang paling sering digunakan di posisi yang mudah terlihat, seperti di bagian utama layar. Hierarki informasi dibuat dari yang paling penting dulu, baru detailnya diakses melalui halaman lanjutan. Navigasi dibuat sederhana dengan ikon dan teks yang jelas, ukuran huruf cukup besar, serta warna yang soft dan kontras agar mudah dipahami oleh pengguna dari berbagai usia.
menurut saya membuat wireframe yang user friendly dan menarik yang tidak hanya fungsional itu baiknya memprioritaskan yang paling penting kaya misalnya tombol pendaftaran dan akses konsultasi dibuat agar mudah ditemukan dan menarik perhatian. navigasi juga baiknya dirancang dengan menu yang jelas dan konsisten di seluruh halaman aplikasi dengan komposisi warna yang soft, posisi yang jelas dari headr, content, footer, dan font yang rapi dan nyaman dilihat seperti roboto atau poppins.
In reply to First post
Re: Forum Pertemuan 7 (Dosen : Anita Ratnasari)
by BHIMA AHDZANAFI ANDIKASVARA -Desainer dapat menentukan tata letak dan hierarki informasi wireframe tsb dengan memprioritaskan kemudahan akses fitur utama seperti pendaftaran, konsultasi, dan riwayat medis melalui struktur yang jelas dan intuitif. Elemen navigasi sebaiknya sederhana, konsisten, dan menggunakan ikon serta label yang mudah dikenali oleh semua usia. Penggunaan grid layout membantu menjaga keseimbangan visual, sementara penempatan elemen penting di area yang mudah dijangkau bisa di bagian atas atau tengah layar meningkatkan kenyamanan pengguna. Desain juga perlu mempertimbangkan ukuran teks yang cukup besar, kontras warna yang baik, dan alur navigasi yang logis agar pengalaman pengguna tetap inklusif dan efisien.
enurut saya , desainer harus menentukan tata letak dan navigasi dengan memahami alur utama pengguna seperti daftar, konsultasi, dan lihat riwayat medis. Elemen penting harus dibuat lebih menonjol lewat ukuran, posisi, dan pengelompokan supaya hierarkinya jelas. Navigasi memakai pola yang familier seperti tab bar sederhana agar ramah untuk semua usia. Ukuran teks, kontras, dan jarak elemen dijaga supaya mudah dibaca. Setelah itu wireframe diuji ke beberapa pengguna untuk memastikan alurnya mudah dipahami.
Dalam merancang wireframe aplikasi “SehatKita”, desainer perlu memastikan tata letak dan navigasinya mudah dipahami oleh pengguna dari berbagai usia. Caranya dimulai dari memahami alur utama yang paling sering digunakan, seperti pendaftaran, konsultasi, dan akses riwayat medis. Alur ini menentukan elemen mana yang harus ditonjolkan di layar utama.
Tata letak sebaiknya sederhana dengan struktur kolom tunggal, jarak antar elemen yang jelas, serta tombol penting yang mudah dijangkau. Hierarki informasi dibuat dengan menempatkan informasi inti di bagian atas, judul halaman yang jelas, dan ukuran elemen yang menunjukkan prioritas. Navigasi idealnya memakai bottom navigation dengan ikon yang mudah dipahami agar pengguna tidak kebingungan.
Terakhir, wireframe sebaiknya diuji sejak awal kepada beberapa pengguna untuk melihat apakah alurnya sudah mudah diikuti. Dengan pendekatan ini, wireframe tidak hanya fungsional, tetapi juga terasa intuitif dan nyaman digunakan.
Tata letak sebaiknya sederhana dengan struktur kolom tunggal, jarak antar elemen yang jelas, serta tombol penting yang mudah dijangkau. Hierarki informasi dibuat dengan menempatkan informasi inti di bagian atas, judul halaman yang jelas, dan ukuran elemen yang menunjukkan prioritas. Navigasi idealnya memakai bottom navigation dengan ikon yang mudah dipahami agar pengguna tidak kebingungan.
Terakhir, wireframe sebaiknya diuji sejak awal kepada beberapa pengguna untuk melihat apakah alurnya sudah mudah diikuti. Dengan pendekatan ini, wireframe tidak hanya fungsional, tetapi juga terasa intuitif dan nyaman digunakan.
Menurut saya, supaya wireframe aplikasi “SehatKita” mudah dipahami dan nyaman digunakan oleh semua kalangan, desainer perlu memperhatikan tiga hal utama: tata letak, hierarki informasi, dan navigasi.
yang pertama : Untuk tata letak, sebaiknya elemen penting seperti tombol “Daftar Pasien” dan “Konsultasi” diletakkan di bagian yang mudah dilihat dan dijangkau. Tampilan juga perlu dibuat rapi, tidak terlalu ramai, dan memiliki ruang kosong agar terlihat lebih ringan.
yang kedua : Dalam hierarki informasi, fitur utama harus lebih menonjol, misalnya dengan ukuran tulisan yang lebih besar atau warna yang kontras, sedangkan informasi tambahan bisa ditempatkan di bagian bawah agar tidak mengganggu fokus pengguna.
Kemudian yang ketiga : untuk navigasi, sebaiknya dibuat sesederhana mungkin. Contohnya, menu di bagian bawah dengan ikon dan teks yang mudah dimengerti, serta tombol “Kembali” dan “Beranda” untuk memudahkan pengguna berpindah halaman.
sebagai desainer perlu memahami kebutuhan pengguna terlebih dahulu dan melakukan uji coba desain. Dengan begitu, wireframe yang dibuat bisa lebih fungsional, mudah digunakan, dan tetap menarik bagi semua usia.
yang pertama : Untuk tata letak, sebaiknya elemen penting seperti tombol “Daftar Pasien” dan “Konsultasi” diletakkan di bagian yang mudah dilihat dan dijangkau. Tampilan juga perlu dibuat rapi, tidak terlalu ramai, dan memiliki ruang kosong agar terlihat lebih ringan.
yang kedua : Dalam hierarki informasi, fitur utama harus lebih menonjol, misalnya dengan ukuran tulisan yang lebih besar atau warna yang kontras, sedangkan informasi tambahan bisa ditempatkan di bagian bawah agar tidak mengganggu fokus pengguna.
Kemudian yang ketiga : untuk navigasi, sebaiknya dibuat sesederhana mungkin. Contohnya, menu di bagian bawah dengan ikon dan teks yang mudah dimengerti, serta tombol “Kembali” dan “Beranda” untuk memudahkan pengguna berpindah halaman.
sebagai desainer perlu memahami kebutuhan pengguna terlebih dahulu dan melakukan uji coba desain. Dengan begitu, wireframe yang dibuat bisa lebih fungsional, mudah digunakan, dan tetap menarik bagi semua usia.
1.Tata Letak
Gunakan layout yang familiar: header di atas, konten di tengah, navigasi di bawah.
Letakkan fitur penting (Daftar, Konsultasi, Riwayat) di area yang mudah dijangkau.
Jaga jarak antar elemen agar tidak terlihat penuh.
2.Hierarki Informasi
Buat judul besar dan jelas, subjudul lebih kecil, isi teks ukuran normal.
Gunakan warna dan ukuran untuk menonjolkan informasi utama.
Kelompokkan informasi yang berhubungan supaya mudah dicari.
3.Navigasi
Gunakan ikon + teks agar mudah dipahami semua usia.
Pilih 4–5 menu utama yang paling sering dipakai.
Navigasi harus konsisten di setiap halaman agar pengguna tidak bingung.
4.Agar Menarik dan Mudah Dipahami
Tampilan sederhana, warna lembut, ilustrasi ringan.
Elemen dekorasi tidak boleh mengganggu fokus pengguna.
Tes cepat dengan beberapa orang: jika mereka langsung paham, berarti wireframe berhasil.
Gunakan layout yang familiar: header di atas, konten di tengah, navigasi di bawah.
Letakkan fitur penting (Daftar, Konsultasi, Riwayat) di area yang mudah dijangkau.
Jaga jarak antar elemen agar tidak terlihat penuh.
2.Hierarki Informasi
Buat judul besar dan jelas, subjudul lebih kecil, isi teks ukuran normal.
Gunakan warna dan ukuran untuk menonjolkan informasi utama.
Kelompokkan informasi yang berhubungan supaya mudah dicari.
3.Navigasi
Gunakan ikon + teks agar mudah dipahami semua usia.
Pilih 4–5 menu utama yang paling sering dipakai.
Navigasi harus konsisten di setiap halaman agar pengguna tidak bingung.
4.Agar Menarik dan Mudah Dipahami
Tampilan sederhana, warna lembut, ilustrasi ringan.
Elemen dekorasi tidak boleh mengganggu fokus pengguna.
Tes cepat dengan beberapa orang: jika mereka langsung paham, berarti wireframe berhasil.