Jump to content

Reading/Web/Desktop Improvements/Fifth prototype testing/id

From mediawiki.org
This page is a translated version of the page Reading/Web/Desktop Improvements/Fifth prototype testing and the translation is 72% complete.
Outdated translations are marked like this.
Languages:

Kami mengharapkan umpan balik Anda perihal desain yang akan diterapkan di kulit Vektor 2022. Desain yang diterapkan tersebut berupa penyempurnaan teks, tombol, garis tepi, latar belakang, hingga pemberian jarak.

Panduan

  1. Bacalah seluruh halaman ini terlebih dahulu agar Anda memahami konteksnya
  2. Buat bagian baru pada halaman ini menggunakan formulir yang tersedia di bawah (pertanyaan akan terisi secara otomatis dan Anda hanya perlu menjawab pertanyaan tersebut)
  3. Isi umpan balik Anda pada bagian titik-titik (...) yang tersedia di sana.

Harap perhatikan hal berikut ini:

  • Semua desain dan fitur yang Anda lihat saat ini masih dalam tahap uji coba, jadi sangat besar kemungkinannya terjadi galat maupun kendala di dalamnya.
  • Untuk "formulir bagian baru", saat ini masih belum kompatibel dengan VisualEditor. Apabila Anda menggunakan VisualEditor, silakan buat bagian baru secara manual dan lakukan salin tempel (copy paste) dari daftar pertanyaan umpan balik yang terdapat di bawah subjudul ini.
  • Anda tidak perlu mencoba semua fitur yang ada di sini, silakan fokus kepada fitur yang menarik perhatian Anda.
  • Estetika desain maupun visual merupakan penilaian subjektif bagi setiap orang. While we are all entitled to our own opinions we ask that you do your best to explain yours, and how they relate to our design goals of simplicity and usability.
  • Pilihan yang Anda inginkan mungkin tidak tersedia pada halaman ini. Maka dari itu, kami dengan senang hati menerima masukan perihal pilihan yang mungkin sesuai untuk berusaha kami wujudkan. Apabila Anda memiliki kemampuan dalam desain dan/atau pemograman, silakan tambahkan prototipe yang Anda buat sendiri (opsional). Berkas desain Vektor 2022: Figma, Sketch, Google Drawing. Prototipe Vektor 2022: GitHub.
  • Jika Anda ingin mengirimkan ide milik Anda, jangan sunting halaman ini. Silakan kirimkan ide Anda melalui formulir umpan balik yang tersedia.
  • Kami sangat mengapresiasi siapa saja, baik mereka yang masih pemula hingga sudah berpengalaman. Kami akan memeriksa seluruh umpan balik dan ide yang masuk, serta keputusan final akan diambil berdasarkan penilaian dari mereka yang sudah ahli/berpengalaman.
  • Apabila Anda memilih untuk mengirim umpan balik via surel (email), silakan menghubungi Olga Vasileva di [$1 [email protected]].

Daftar pertanyaan umpan balik

  1. Menu — silakan membuka prototipe berikut di tab baru: https://di-visual-design-menus.web.app/Beruang?id Dari pilihan yang tersedia, mana yang sesuai dengan keinginan Anda? Pastikan untuk memeriksa menu pencarian, pengguna, bahasa, hingga peralatan.
  2. Garis tepi dan latar belakang — silakan membuka prototipe berikut di tab baru: https://di-visual-design-borders-bgs.web.app/Zebra?id Dari pilihan yang tersedia, mana yang sesuai dengan keinginan Anda?
  3. Subjudul yang terpilih/tersorot di bagian daftar isi — silakan membuka prototipe berikut di tab baru: https://di-visual-design-toc-active.web.app/Neptunus?id Dari pilihan yang tersedia, mana yang sesuai dengan keinginan Anda?
  4. Logo di bagian atas — silakan membuka prototipe berikut di tab baru: https://di-visual-design-header-logo.web.app/Gajah?id Dari pilihan yang tersedia, mana yang sesuai dengan keinginan Anda?
  5. Warna pranala — silakan membuka prototipe berikut di tab baru: https://di-visual-design-link-colors.web.app/Paus_biru?id Apakah ada beberapa hal yang perlu kami perbaiki sebelum kami menerapkan perubahan tersebut?
  6. Ukuran teks — silakan membuka prototipe berikut di tab baru: https://di-visual-design-font-size.web.app/Kolibri?id Apakah ada hal yang menjadi perhatian Anda perihal ukuran teks di prototipe tersebut?

Latar belakang dan konteks

Selama dua tahun terakhir, kami melakukan berbagai macam perubahan dan pembaruan tampilan antarmuka. Kami sudah mengatur posisi dari kotak pencarian, ubah bahasa, hingga daftar isi. Selain itu, kami juga merapikan beberapa pranala dan peralatan ke dalam bagian menu. And we have limited the content width, added a sticky header, and moved the page title above the page toolbar. Setelah melakukan beberapa perubahan tersebut, kami berfokus utnuk melakukan pembaruan terhadap tampilan situs web secara keseluruhan. Beberapa pertanyaan yang menjadi pertimbangan kami adalah:

  • Bagaimana kami dapat mengaplikasikan desain visual untuk memperbarui tampilan antarmuka?
  • Apakah sesuai apabila beberapa kulit memiliki "kepribadian" yang unik (misalnya seperti garis biru dan gradasi warna di kulit Vektor Lama)?
  • Apabila terlalu banyak aksen di kulit, apakah akan mengganggu pengguna dan tidak fokus dalam mengakses konten di dalamnya?
  • Apakah memungkinkan bagi kami untuk membuat tampilan antarmuka yang sangat sederhana seperti tampilan situs Wikipedia yang paling pertama?

Dahulu, kami selalu berpikir untuk membuat segala sesuatu secara sederhana dan fungsional. Bisa dikatakan untuk elemen di HTML, tampilan situs webnya sangat sederhana dan mudah bagi mereka yang menggunakan maupun mendesain situs web itu sendiri. Hal ini berarti desain visual yang kami buat memiliki pengaruh hingga saat ini. Kami tidak berkeinginan untuk mengikuti tren dan tidak ingin melakukan perubahan kecil-kecilan setiap tahunnya. Anda bisa melihat sendiri pada tangkapan layar di bawah, bahwa tidak ada perbedaan secara masif di antara kulit Monobook dan Vektor Lama.

Perbandingan tampilan antarmuka
Tangkapan layar dari Wikipedia bahasa Hindi yang menggunakan kulit Monobook
Tangkapan layar dari Wikipedia bahasa Jepang yang menggunakan kulit Vektor Lama

Perubahan yang kami rencanakan

Kami menggunakan beberapa menu di tampilan antarmuka yang kami buat. Hingga saat ini, pendekatan yang kami lakukan di menu sangatlah tidak konsisten. Akhirnya, kami memiliki kesempatan untuk memperbaiki itu semua di kulit Vektor 2022 agar tampilan menunya lebih konsisten dan mudah untuk diakses. Tampilan menu yang akan kami buat memiliki dua elemen: yaitu menu dengan pelatuk (trigger) dan menu dengan butir (item). Kami mempertimbangkan untuk menggunakan warna biru dengan hitam (untuk menu dengan pelatuk dan menu dengan butir), serta tulisan tebal dan standar (untuk menu dengan pelatuk).

Pranala untuk melihat prototipe: https://di-visual-design-menus.web.app/Beruang?id

1) pelatuk dan butir berwarna biru

2) pelatuk berwarna biru, butir berwarna hitam

3) pelatuk berwarna hitam, butir berwarna biru

4) pelatuk dan butir berwarna hitam

Garis tepi dan latar belakang

Apakah kami perlu untuk menambahkan garis tepi dan latar belakang untuk memisahkan bagian-bagian tertentu di tampilan antarmuka? Apabila iya, maka seperti apa tampilannya? Seperti yang sudah kami sebutkan sebelumnya, baik Monobook dan Vektor menggunakan garis tepi dan latar belakang untuk memisahkan tampilan antarmuka dengan konten yang ada. Garis tepi dan latar belakang dapat menambah keunikan dari tampilan antarmuka itu sendiri. Terlepas dari semua itu, sangat sulit untuk mengetahui manfaat dan fungsionalitas dari kedua hal tersebut. Kami membuat beberapa opsi untuk menjadikan garis tepi dan latar belakang menjadi lebih gelap.

Pranala untuk melihat prototipe: https://di-visual-design-borders-bgs.web.app/Zebra?id

1) minimalis/sederhana

1) minimalist

2) garis tepi di artikel

3) garis tepi di artikel dan bagian atas

4) garis di daftar isi dan bagian atas

5) garis di daftar isi dan judul artikel

6) garis tepi di artikel dan latar belakang di bagian atas (warna standar)

7) garis tepi di artikel dan latar belakang di bagian atas (warna gradasi)

8) latar belakang di luar artikel (warna gradasi)

9) latar belakang di luar artikel (warna standar)

Subjudul yang terpilih/tersorot di bagian daftar isi

Sekarang, bagian daftar isi terletak di sebelah kiri dari artikel dan permanen sehingga selalu terlihat ketika sedang membaca artikel. Fitur baru yang kami rencanakan adalah bagian daftar isi dapat mendeteksi subjudul dari artikel yang sedang Anda baca (kami menyebutnya sebagai "bagian yang disorot"). Saat ini, mengikuti pola yang digunakan di tab artikel atau pembicaraan, pada bagian daftar isi yang disorot berwarna hitam dan yang tidak disorot berwarna biru. Kami menyukai pola ini karena sederhana, tidak mengganggu, dan dapat diaplikasikan di mana saja. Selain itu, kami dapat melakukan modifikasi untuk menandakan bagian yang disorot.

Pranala untuk melihat prototipe: https://di-visual-design-toc-active.web.app/Neptunus?id

1) minimalis/sederhana

2) teks tebal

3) latar belakang

4) garis sepanjang daftar isi dengan garis tepi

5) garis sepanjang daftar isi dan garis tepi tebal

Logo di bagian atas

Baik Monobook dan Vektor Lama, keduanya terdapat logo Wikipedia dan bola dunia (globe) dengan ukuran besar. Setelah penerapan kulit Vektor 2022, logo Wikipedia dan bola dunia dibuat lebih kecil agar lebih serasi dan sesuai dengan tampilannya. Meskipun demikian, kami tetap memberikan opsi untuk Anda pilih. Harap diingat bahwa prototipe berikut bergantung dari ukuran layar pada gawai Anda, jadi hasil bisa saja berbeda tergantung dari ukuran layar yang digunakan.

Pranala untuk melihat prototipe: https://di-visual-design-header-logo.web.app/Gajah?id

1) logo sederhana di sebelah kiri

2) logo penuh di sebelah kiri

3) logo penuh di sebelah kiri (logo bola dunia gradasi)

4) logo sederhana di tengah

Warna pranala

Konsorsium World Wide Web (W3C) memiliki Panduan Aksesibilitas Konten Web. Panduan tersebut berisi tingkat kecerahan minimum yang berlaku bagi pranala (link): "Untuk keterbacaan dan aksesibilitas, pranala harus diberi garis bawah. Selain itu, teks di pranala harus memiliki perbandingan kontras antara teks pranala dan teks di sekitarnya sebanyak 3:1, serta harus diberi garis bawah apabila tetikus diarahkan ke pranala tersebut."[1] Semenjak kita tidak memberikan garis bawah di pranala, maka pemilihan warna wajib memenuhi kriteria aturan perbandingan kontras 3:1. Untuk mengecek kontras dari pranala yang kami buat dengan teks yang ada, kami menggunakan pemeriksa kontras yang dibuat oleh WebAIM.

Warna pranala saat ini
Warna Kontras dengan teks #202122 Hasil tes Pranala ke hasil tes
pranala biru #0645ad 1.89:1 ❌ Gagal pranala
pranala yang telah dikunjungi #0b0080 1.01:1 ❌ Gagal pranala
Warna pranala yang kami usulkan
Warna Kontras dengan teks #202122 Hasil tes Pranala ke hasil tes
pranala biru #3366cc 3:1 ✅ Berhasil pranala
pranala yang telah dikunjungi #795cb2 3.06:1 ✅ Berhasil pranala

Tambahan, usulan tersebut merupakan bagian dari Panduan Desain Gaya Wikimedia, serta telah digunakan di situs web versi gawai kami dan beberapa logo proyek kami.

Pranala untuk melihat prototipe: https://di-visual-design-link-colors.web.app/Paus_biru?id

Warna pranala saat ini

Warna pranala yang kami usulkan


Ukuran tulisan

Salah satu misi kami adalah memberikan akses pengetahuan kepada semua orang tanpa terkecuali. Saat ini, sebagian besar akses pengetahuan yang kami berikan adalah berbentuk teks. Hasil penelitian menunjukkan bahwa tipografi (seperti ukuran teks, panjang garis, dan ketinggian garis) dapat memengaruhi pengalaman membaca, baik dalam urusan kenyamanan (seperti lelah mata) dan pemahaman dalam menyerap informasi.[2][3][4][5] Maka dari itu, penting bagi kami untuk menggunakan tipografi secara maksimal di dalam tampilan antarmuka yang kami buat. Faktor terpenting yang perlu diperhatikan adalah menentukan sebuah hal yang optimal bagi proyek dalam mengajak pengguna membaca teks secara menyeluruh maupun secara sekejap mata.[6][7]

Dalam tahap sebelumnya, kami melakukan penelitian mengenai panjang teks dalam suatu baris dan didapatkan bahwa sekitar 90–140 karakter per baris adalah optimal bagi proyek kami (pranala penelitian tersebut). Saat ini, kami sedang bekerja untuk meneliti lebih lanjut mengenai ukuran tulisan yang rencananya akan kami implementasikan. Hal yang paling meyakinkan dan dapat mudah untuk diaplikasikan adalah berdasarkan hasil penelitian yang kami lakukan pada tahun 2016. Penelitian tersebut menjelaskan mengenai pengaruh dari ukuran dan jarak antar tulisan dengan ketertarikan orang membaca artikel Wikipedia. Lebih lengkapnya sebagai berikut:

Kami membandingkan secara objektif dan subjektif terhadap keterbacaan maupun pemahaman akan isi artikel, dengan hasil berupa ukuran tulisan yaitu 10 hingga 26 poin dan jarak antar tulisan dari 0.8 hingga 1.8 (jenis tulisan yang digunakana adalah Arial). Penelitian kami membuktikan bahwa ukuran teks dapat memengaruhi keterbacaan dan memudahkan pengguna dalam menyerap informasi. Lebih jauh lagi, ukuran tulisan 18 dan 26 dapat memudahkan pengguna dalam memahami pertanyaan dan pada akhirnya memberikan jawaban yang benar. Berdasarkan hasil penelitian ini, terbukti bahwa penggunaan ukuran tulisan 18 hingga lebih dapat membuat halaman web terbaca dengan mudah dan lebih cepat bagi pengguna untuk memahami isi tulisannya. Berbeda dengan hasil penelitian sebelumnya yang kami lakukan, yaitu kami merekomendasikan ukuran tulisan lebih besar dari 14 poin.[8]

Pertama, kami perlu melakukan konversi yang digunakan oleh peneliti (poin) ke dalam satuan yang umumnya digunakan oleh peramban web (pixel; px). Nilai konversi yang berlaku: 1px = 72pt (poin) / 96.[9][10] Berdasarkan hasil penelitian di atas, 10–26 poin setara dengan 13.3–34px. Apabila dilihat dari kesimpulan, 18 poin setara dengan 24 px.

Jadi, perlukah bagi kita untuk memperbesar teks menjadi 24 px? Meskipun penelitian di atas berfokus kepada membaca secara menyeluruh, tak jarang pengguna membaca suatu halaman secara singkat untuk menemukan informasi yang mereka inginkan. Mereka yang membaca secara singkat merasa lebih terbantu dengan ukuran tulisan yang kecil. Kami mengajukan proposal untuk memperbesar ukuran teks dari 16px hingga lebih. (Kami juga akan melebarkan artikel dari 960px menjadi 1050px.) Untuk tahap selanjutnya, kami akan merencanakan penelitian lebih lanjut perihal ukuran tulisan di situs web proyek Wikimedia.

Pranala berisi daftar pustaka tentang penelitian tipografi dan keterbacaan suatu teks

Pranala untuk melihat prototipe: https://di-visual-design-font-size.web.app/Kolibri?id

Feedback

Referensi

  1. ↑ Contrast and Color Accessibility, Understanding WCAG 2 Contrast and Color Requirements: "Color-only identification of links".
  2. ↑ Hussain, Sohaib, Ahmed, Qasim Khan, (2011-11-01). "Web readability factors affecting users of all ages". Australian Journal of Basic and Applied Sciences, 2011, 5 (11), pp. 972 - 977.
  3. ↑ Nanavati, Bias (2005). "Optimal Line Length in Reading--A Literature Review". Visible Language, v39 n2 p121-145 2005.
  4. ↑ Banerjee, Majumdar, Majumdar (2011-01). "Readability, Subjective Preference and Mental Workload Studies on Young Indian Adults for Selection of Optimum Font Type and Size during Onscreen Reading". Al Ameen Journal of Medical Sciences.
  5. ↑ Patterson, Tinker (1940). "How to make type readable; a manual for typographers, printers and advertisers, based on twelve years of research involving speed of reading tests given to 33,031 persons". Harper & Brothers Publishers.
  6. ↑ TeBlunthuis, Bayer, Vasileva (2019-08). "Dwelling on Wikipedia: investigating time spent by global encyclopedia readers". OpenSym '19: Proceedings of the 15th International Symposium on Open Collaboration.
  7. ↑ Moran (2020-04-05). "How People Read Online: New and Old Findings". Nielsen Norman Group.
  8. ↑ Rello, Pielot, Marcos (05-2016). "Make It Big! The Effect of Font Size and Line Spacing on Online Readability". Conference on Human Factors in Computing Systems.
  9. ↑ Schaeffer, Kyle (30-09-2008) "CSS Font-Size: em vs. px vs. pt vs. percent"
  10. ↑ konversi dari PT ke PX
Retrieved from "https://www.mediawiki.org/w/index.php?title=Reading/Web/Desktop_Improvements/Fifth_prototype_testing/id&oldid=6728012"