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

لطفاً بازخورد خود را در مورد طراحی‌های بصری وکتور ۲۰۲۲ ارائه دهید. منظور از طراحی بصری، قالب‌بندی متن، دکمه‌ها، حاشیه‌ها، پس‌زمینه‌ها و فاصله‌گذاری است.

دستورالعمل‌ها
لطفا به خاطر داشته باشید:
 * 1) محتوای صفحه را بررسی کنید
 * 2) با استفاده از فرم زیر بخش جدیدی در این صفحه ایجاد کنید (این بخش پیشاپیش توسط پرسش‌هایی که باید پاسخ دهید پر می‌شود).
 * 3) بازخوردتان را در بخش جدیدی که ساخته‌اید وارد کنید.
 * این‌ها نمونه‌های اولیه هستند، اکثر ویژگی‌ها کار نمی‌کنند، و ممکن است باگ‌ها یا مشکلات دیگری نیز وجود داشته باشد که با آنها مواجه شوید.
 * متأسفانه «فرم بخش جدید» با ویرایش‌گر دیداری سازگار نیست. اگر از ویرایش‌گر دیداری استفاده می‌کنید، لطفاً به صورت دستی یک بخش جدید ایجاد کنید و سؤالات بازخورد (ذکر شده در ذیل) را کپی و جایگذاری کنید.
 * شما نیازی به بررسی هر بخش ندارید. روی مواردی تمرکز کنید که برایتان جالب‌تر است.
 * طراحی و به طور خاص طراحی بصری، می‌تواند شخصی باشد. در حالی که همه ما حق داریم نظرات خود را داشته باشیم، از شما می خواهیم که تمام تلاش خود را برای توضیح نظرات خود و نحوه ارتباط آنها با اهداف طراحی ما در مورد سادگی و قابلیت استفاده انجام دهید.
 * ممکن است گزینه‌های خوبی وجود داشته باشد که در اینجا ارائه نشده است. اگر فکر می‌کنید گزینه دیگری وجود دارد که بهتر از گزینه‌های ارائه داده شده عمل می‌کند، می‌توانید آن را به ما پیشنهاد دهید. اگر با طراحی و/یا کدنویسی راحت هستید، لطفاً یا نمونه‌های ایده‌های خود را وارد کنید (این مورد الزامی نیست). پرونده‌های طراحی: فیگما، اسکچ، گوگل. نمونه اولیه: گیت‌هاپ.
 * اگر ایده‌های خود را ارسال می‌کنید، لطفاً این صفحه را ویرایش نکنید‌و آنها را در فرم بازخورد خود بگنجانید.
 * ما پذیرای طراحان مبتدی و حرفه‌ای هستیم. همه نظرات و ایده‌ها را بررسی خواهد شد و در نهایت برای تصمیم‌گیری نهایی به قضاوت طراحان مجرب سپرده می‌شوند.
 * اگر ترجیح می‌دهید بازخورد خود را از طریق ایمیل ارسال کنید، لطفاً با بازخوردتان را به [mailto:Olga@wikimedia.org olga@wikimedia.org] بفرستید.

پیش‌نمایش سوالات بازخورد

 * 1) نوارها: نمونه اولیه را در یک برگه جدید باز کنید: https://di-visual-design-menus.web.app/Brown_bear. کدام گزینه را ترجیح می‌دهید و چرا؟ لطفاً نوار جستجو، نوار کاربر، نوار زبان و نوار ابزارها را بررسی کنید.
 * 2) کادر و پس‌زمینه: نمونه اولیه را در یک برگه جدید باز کنید: https://di-visual-design-borders-bgs.web.app/Zebra. کدام گزینه را ترجیح می‌دهید و چرا؟
 * 3) بخش فعال در فهرست مطالب: نمونه اولیه را در یک برگه جدید باز کنید: https://di-visual-design-toc-active.web.app/Otter. کدام گزینه را ترجیح می‌دهید و چرا؟
 * 4) لوگو در سربرگ: نمونه اولیه را در یک برگه جدید باز کنید: https://di-visual-design-borders-bgs.web.app/Panda. کدام گزینه را ترجیح می‌دهید و چرا؟
 * 5) رنگ‌های پیوند: نمونه اولیه را در یک برگه جدید باز کنید: https://di-visual-design-menus.web.app/Salmon. آیا چیز دیگری وجود دارد که قبل از ایجاد این تغییر باید انجام شود؟
 * 6) اندازه قلم: نمونه اولیه را در یک برگه جدید باز کنید: https://di-visual-design-menus.web.app/Hummingbird. آیا در مورد اندازه قلم پیشنهادی دارید؟

پیشینه و محتوا
در طول دو سال گذشته، تغییرات ساختاری مختلفی در رابط انجام شده است. کادر جستجو، تغییرگر زبان و جدول مطالب انتقال داده شده‌اند. پیوندها و بعضی از ابزارها در نوارها سازماندهی شده‌آند. عرض محتوا محدود شده است، سربرگ چسبنده اضافه شده است و عنوان صفحه به بالای نوار ابزار صفحه انتقال داده شده است. اکنون، با همه این عناصر مختلف که در رابط به‌روزشده قرار گرفته‌اند، توجه خود را به نمای کلی معطوف کرده‌ایم. برخی از پرسش‌های اولیه که در نظر گرفته شده است عبارتند از: رویکرد ما همواره ساده و کاربردی بوده است. جلوه‌های تصویری اندکی (در صورت وجود) در عناصر HTML وجود دارد، که رابط کاربری را هم برای افرادی که از آن استفاده می‌کنند و هم برای افرادی که آن را طراحی و می‌سازند، ساده می‌کند. همچنین به این معنی است که طراحی دیداری نسبتاً سریع است. ما دنبال روندها نیستیم و نیازی نیست که هر چند سال یکبار تغییراتی ایجاد کنیم. با نگاهی به اسکرین‌شات‌های زیر می‌توانیم ببینیم که منوبوک و وکتور قدیمی چگونه از طراحی دیداری (عمدتاً حاشیه‌ها و رنگ‌های پس‌زمینه) استفاده می‌کنند.
 * چگونه می‌توانی از طراحی دیداری برای بهبود رابط استفاده کرد؟
 * آیا فکر می‌کنیم که پوسته دارای خصوصیات اضافی (مانند خطوط آبی و گرادیان در وکتور قدیمی) ارزش دارد؟
 * در نقطه‌ای مقدار آن بیش از حد است به طوری که ممکن است حواس‌تان را پرت کند یا رابط را گیج‌کننده کند؟
 * اگر تا حد امکان آن را به کمترین میزان برسانیم و رویکردی کمینه مشابه واسط ویکی‌پدیا داشته باشیم چطور؟

نوارها
ما از چندین نوار در رابط کاربری خود استفاده می‌کنیم. تاکنون رویکرد ما در مورد نحوه چینش نوارها سازگار نبوده است. با وکتور ۲۰۲۲ این فرصت را داریم تا رویکردی در دسترس‌تر و سازگارتر برای طراحی نوارهای خود ایجاد کنیم. در ساده‌ترین شکل خود، نوارها دارای دو عنصر هستند: دکمه نوار، و گزینه‌های نوار. آبی در مقابل سیاه (هم برای دکمه نوار و هم برای گزینه‌های نوار) و پررنگ در مقابل غیر پررنگ (برای دکمه نوار) را در نظر می گیریم.

پیوند به نمونه اولیه به همراه گزینه‌ها: https://di-visual-design-menus.web.app/Brown_bear.

حاشیه‌ها و پس‌زمینه‌ها
آیا باید حاشیه‌ها و پس‌زمینه‌ها را اضافه کنیم تا به تقسیم نواحی رابط کمک کنیم، و اگر چنین است چگونه باید به نظر برسند؟ همانطور که در بخش پس‌زمینه و محتوا و در بالا اشاره کردیم، وکتور و منوبوک از پس‌زمینه و حاشیه‌ها برای جدا کردن رابط از محتوا استفاده می‌کنند. Backgrounds and borders can also add personality to the interface. However, it is difficult to know how functional or necessary they are. We've created several options with progressively more/darker borders and backgrounds.

Link to prototype with options: https://di-visual-design-borders-bgs.web.app/Zebra

بخش فعال در فهرست مطالب
The table of contents is now on the (left) side of the article, and is fixed in place so it remains visible as you scroll down the page. A new feature is that the table of contents indicates which section of the article you are currently reading (we call this the "active section"). Currently, following from a pattern used on the Article/Talk tabs, the active section in the table of contents is black, and the non-active sections are blue. We like this pattern because it is simple, not distracting, and used elsewhere. We could also use additional styling to indicate the active section.

Link to prototype with options: https://di-visual-design-toc-active.web.app/Otter

لوگو در سربرگ
Monobook and Legacy Vector both feature a square Wikipedia logo with a large globe. Given the various changes to Vector 2022 a smaller, rectangular logo in the corner may fit the layout better. However, we wanted to make sure to try various options. Please remember to try these options at various screen sizes, as the balance of the layout shifts depending on your screen size.

Link to prototype with options: https://di-visual-design-header-logo.web.app/Panda

رنگ پیوند
The World Wide Web Consortium (W3C) have Web Content Accessibility Guidelines. These guidelines define a minimum contrast level for links: "For usability and accessibility, links should be underlined by default. Otherwise, link text must have at least 3:1 contrast with surrounding body text, and must present a non-color indicator (typically underline) on mouse hover and keyboard focus." Since we do not underline links by default, our link color choice must meet the 3:1 contrast requirement. In order to check the contrast of our links with our body text we can use the contrast checker provided by WebAIM.

Additionally, the proposed blue link color is already part of the Wikimedia Design Style Guide, and is used on our mobile websites as well as in various project logos, so we would be gaining consistency.

Link to prototype with proposed colors: https://di-visual-design-link-colors.web.app/Salmon

اندازه قلم
The mission of our movement is to provide all of the world's knowledge to as many people as possible. Currently the majority of the knowledge we offer is in the form of text. Research has shown that typographic settings (such as font size, line length, and line height) influence the experience of reading, both in terms of general comfort (i.e. eye strain and fatigue), and comprehension and retention. Therefore it is important for us to use optimal typographic settings in our interface. An important factor to keep in mind when determining what is optimal for our projects is that people engage both in in-depth reading, as well as scanning of text.

In a previous phase of the project we read research studies regarding the line length and concluded that between 90–140 characters per line is optimal for our projects (link to writeup). 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." Users often scan the page in order to find a certain piece of information. This, however, wasn't included in the study. To accommodate this, we are recommending a font size of 16px instead of their conclusion of 18px. We would be increasing the maximum width of the article as well, from 960px to 1050px.

Annotated bibliography of typography and readability research

Link to prototype with proposed font size: https://di-visual-design-font-size.web.app/Hummingbird