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

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
Harap perhatikan hal berikut ini:
 * 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.
 * 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 [mailto:Olga@wikimedia.org olga@wikimedia.org].

Daftar pertanyaan umpan balik

 * 1) Menu — silakan membuka prototipe berikut di tab baru: https://di-visual-design-menus.web.app/Brown_bear. 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. 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/Otter. 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/Panda. 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/Salmon. 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/Hummingbird. 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.

Menu
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/Brown_bear

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

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/Otter

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/Panda

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." 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.

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/Salmon

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. 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.

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). Recently we have spent time reading research studies about font size. The most convincing, and directly applicable, research we have found thus far is a 2016 study that used eye-tracking to evaluate the affects of font size and line spacing for people reading Wikipedia:

Using a hybrid-measures design, we compared objective and subjective readability and comprehension of the articles for font sizes ranging from 10 to 26 points, and line spacings ranging from 0.8 to 1.8 (font: Arial). Our findings provide evidence that readability, measured via mean fixation duration, increased significantly with font size. Further, comprehension questions had significantly more correct responses for font sizes 18 and 26. These findings provide evidence that text-heavy websites should use fonts of size 18 or larger and use default line spacing when the goal is to make a web page easy to read and comprehend. Our results significantly differ from previous recommendations, presumably, because this is the first work to cover font sizes beyond 14 points.

Firstly, we need to convert the measure used by the researchers (points) into the measure that browsers ultimately render (px). The conversion is: 1px = 72pt / 96. So the range studied in the research (10–26 points) is equivalent to 13.3–34px. Their conclusion, 18 points, is equal to 24px.

''' So should we increase the font size to 24px? ''' The research studied in-depth reading, however people often scan the page in order to find a certain piece of information. This is a different reading behavior, that arguably benefits from a smaller font size than in-depth reading does. Our conservative proposal, taking into account scanning, is to increase the font size to 16px to begin with. (We would be increasing the maximum width of the article as well, from 960px to 1050px.) As a next step, we will plan to conduct our own research to further study font size on Wikimedia wikis.

Annotated bibliography of typography and readability research

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