مطالعه/وب/بهبودهای دسکتاپ/پنجمین آزمایش نمونهٔ اولیه

This page is a translated version of the page Reading/Web/Desktop Improvements/Fifth prototype testing and the translation is 90% complete.

Outdated translations are marked like this.

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

دستورالعمل‌ها

محتوای این صفحه را بررسی کنید
با استفاده از فرم زیر بخش جدیدی در این صفحه ایجاد کنید (این بخش پیشاپیش توسط پرسش‌هایی که باید پاسخ دهید پر می‌شود).
بازخوردتان را در بخش جدیدی که ساخته‌اید وارد کنید.

لطفا به خاطر داشته باشید:

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

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

نوارها: نمونه اولیه را در یک برگه جدید باز کنید: https://di-visual-design-menus.web.app/%D8%AE%D8%B1%D8%B3?fa. کدام گزینه را ترجیح می‌دهید و چرا؟ لطفاً نوار جستجو، نوار کاربر، نوار زبان و نوار ابزارها را بررسی کنید.
کادر و پس‌زمینه: نمونه اولیه را در یک برگه جدید باز کنید: https://di-visual-design-borders-bgs.web.app/%DA%AF%D9%88%D8%B1%D8%AE%D8%B1?fa. کدام گزینه را ترجیح می‌دهید و چرا؟
بخش فعال در فهرست مطالب: نمونه اولیه را در یک برگه جدید باز کنید: https://di-visual-design-link-colors.web.app/%DB%8C%D9%88%D8%B2%D9%BE%D9%84%D9%86%DA%AF?fa. کدام گزینه را ترجیح می‌دهید و چرا؟
لوگو در سربرگ: نمونه اولیه را در یک برگه جدید باز کنید: https://di-visual-design-header-logo.web.app/%D9%BE%D8%A7%D9%86%D8%AF%D8%A7?fa. کدام گزینه را ترجیح می‌دهید و چرا؟
رنگ‌های پیوند: نمونه اولیه را در یک برگه جدید باز کنید: https://di-visual-design-toc-active.web.app/%D8%B4%D8%AA%D8%B1?fa. آیا چیز دیگری وجود دارد که قبل از ایجاد این تغییر باید انجام شود؟
اندازه قلم: نمونه اولیه را در یک برگه جدید باز کنید: https://di-visual-design-font-size.web.app/%D8%A8%D9%84%D9%88%D8%B7?fa. آیا در مورد اندازه قلم پیشنهادی دارید؟

پیشینه و محتوا

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

چگونه می‌توانی از طراحی دیداری برای بهبود رابط استفاده کرد؟
آیا فکر می‌کنیم که پوسته دارای خصوصیات اضافی (مانند خطوط آبی و گرادیان در وکتور قدیمی) ارزش دارد؟
در نقطه‌ای مقدار آن بیش از حد است به طوری که ممکن است حواس‌تان را پرت کند یا رابط را گیج‌کننده کند؟
اگر تا حد امکان آن را به کمترین میزان برسانیم و رویکردی کمینه مشابه واسط ویکی‌پدیا داشته باشیم چطور؟

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

رابط‌های مقایسه‌ای
تصویری از ویکی‌پدیای هندی با پوسته منوبوک	تصویری از ویکی‌پدیای ژاپنی با پوسته وکتور قدیمی

تغییرات در نظر گرفته‌شده

نوارها

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

پیوند به نمونه اولیه به همراه گزینه‌ها: https://di-visual-design-menus.web.app/%D8%AE%D8%B1%D8%B3?fa.


۱) دکمه آبی، پیوندهای آبی	۲) دکمه آبی، پیوندهای سیاه	۳) دکمه سیاه، پیوندهای آبی
۴) دکمه سیاه، پیوندهای سیاه

حاشیه‌ها و پس‌زمینه‌ها

آیا باید حاشیه‌ها و پس‌زمینه‌ها را اضافه کنیم تا به تقسیم نواحی رابط کمک کنیم، و اگر چنین است چگونه باید به نظر برسند؟ همانطور که در بخش پس‌زمینه و محتوا و در بالا اشاره کردیم، وکتور و منوبوک از پس‌زمینه و حاشیه‌ها برای جدا کردن رابط از محتوا استفاده می‌کنند. پس‌زمینه‌ها و حاشیه‌ها نیز می‌توانند خصوصیاتی را به رابط اضافه کنند. با این حال، دانستن میزان کاربردی یا ضروری بودن آنها دشوار است. چندین گزینه با حاشیه‌های بیشتر و پس‌زمینه‌های تاریک‌تر ایجاد شده است.

پیوند به نمونه اولیه به همراه گزینه‌ها: https://di-visual-design-borders-bgs.web.app/%DA%AF%D9%88%D8%B1%D8%AE%D8%B1?fa.


۱) خلوت	۲) حاشیه‌های مقاله	۳) حاشیه‌های مقاله + سربرگ با خطی زیر آن
۴) خط جدول مطالب + سربرگ با خطی زیر آن	۴) خط جدول مطالب + خطی زیر عنوان صفحه	۳) حاشیه‌های مقاله + سربرگ پس‌زمینه (ساده)
۳) حاشیه‌های مقاله + سربرگ پس‌زمینه (گرادیان)	۸) پس‌زمینه خارج از مقاله (گرادیان)	۹) پس‌زمینه خارج از مقاله (ساده)

بخش فعال در فهرست مطالب

فهرست مطالب اکنون در کنار مقاله (سمت چپ) و در جای خود ثابت است تا با پیمایش صفحه به پایین قابل مشاهده باقی بماند. ویژگی دیگر این است که فهرست مطالب نشان می‌دهد که در حال خواندن کدام بخش از مقاله هستید (که ما آن را «بخش فعال» می‌نامیم). در حال حاضر، برگه‌های مقاله، بحث و فهرست مطالب سیاه و بخش‌های غیرفعال آبی هستند. ما این الگو را دوست داریم زیرا ساده است، حواس را پرت نمی‌کند و در جاهای دیگر استفاده می‌شود. همچنین می‌توانیم از یک قالب اضافی برای نشان دادن بخش فعال استفاده کنیم.

پیوند به نمونه اولیه به همراه گزینه‌ها: https://di-visual-design-link-colors.web.app/%DB%8C%D9%88%D8%B2%D9%BE%D9%84%D9%86%DA%AF?fa.


۱) خلوت	۲) ضخیم	۳) پس‌زمینه	۴) خط با کادر
۵) خط با کادر (۲)

لوگو در سربرگ

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

پیوند به نمونه اولیه به همراه گزینه‌ها: https://di-visual-design-header-logo.web.app/%D9%BE%D8%A7%D9%86%D8%AF%D8%A7?fa.


۱) لوگوی مستطیلی در سمت چپ	۲) لوگوی مربعی در سمت چپ	۳) لوگوی مربعی در سمت چپ (گرادیان)
۴) لوگوی مربع در وسط

رنگ پیوند

کنسرسیوم وب جهانی (W3C) دستورالعمل دسترسی به محتوای وب دارد. این دستورالعمل‌ها حداقل سطح کنتراست را برای پیوندها تعریف می‌کند: «برای قابلیت استفاده و دسترسی، پیوندها باید به طور پیش‌فرض زیر خط کشیده شوند. در غیراین‌صورت، متن پیوند باید حداقل کنتراست ۳:۱ با متن اطراف داشته باشد و یک نشانگر غیررنگی (معمولاً زیر خط کشیده شده) روی نشانگر موشواره در حال حرکت و فوکوس صفحه کلید ارائه دهد.»^[1] از آنجایی که به طور پیش‌فرض زیر پیوند خطی وجود ندارد، انتخاب رنگ پیوند ما باید کنتراست ۳:۱ را داشته باشد. برای بررسی کنتراست پیوندهایمان با متن محتوای صفحه، می‌توانیم از بررسی‌کننده کنتراست ارائه‌شده توسط WebAIM استفاده کنیم.

رنگ‌های کنونی پیوند
رنگ	کنتراست با متن `#202122`	نتیجه آزمون	پیوند به نتیجه آزمون
پیوندهای آبی `#0645ad`	۱.۸۹:۱	❌ مردود	پیوند به نتایج
پیوندهای بازدیدشده `#0b0080`	۱.۰۱:۱	❌ مردود	پیوند به نتایج

رنگ‌های پیشنهاد داده‌شده پیوند
رنگ	کنتراست با متن `#202122`	نتیجه آزمون	پیوند به نتیجه آزمون
پیوندهای آبی `#3366cc`	۳:۱	✅ موفق	پیوند به نتایج
پیوندهای بازدیدشده `#795cb2`	۳.۰۶:۱	✅ موفق	پیوند به نتایج

علاوه بر این، رنگ پیوند آبی پیشنهاد داده شده بخشی از شیوه‌نامه طراحی ویکی‌مدیا بوده است و در وبگاه‌های تلفن همراه و همچنین در لوگوی پروژه‌های مختلف استفاده می‌شود، بنابراین یکپارچگی وجود خواهد داشت.

پیوند به نمونه اولیه به همراه گزینه‌ها: https://di-visual-design-toc-active.web.app/%D8%B4%D8%AA%D8%B1?fa.


رنگ‌های کنونی پیوند	رنگ‌های پیشنهاد داده شده

اندازه قلم

ماموریت ما این است که دانش جهان را در اختیار هر چه بیشتر مردم قرار دهیم. در حال حاضر اکثر دانشی که ارائه می‌دهیم به صورت متنی است. تحقیقات نشان داده است که تنظیمات نویسه‌نگاری (مانند اندازه قلم، طول خط و ارتفاع خط) بر تجربه خواندن تأثیر می‌گذارد، هم از نظر راحتی عمومی (یعنی خستگی چشم)، و هم درک و حفظ مطلب.^[2]^[3]^[4]^[5] بنابراین مهم است که از تنظیمات نویسه‌نگار بهینه در رابط کاربری استفاده شود. عامل مهمی که باید در هنگام تعیین اینکه چه چیزی برای پروژه‌های ما بهینه است در نظر داشته باشیم این است که افراد هم در خواندن عمیق و هم در پویش متن مشغول هستند.^[6]^[7]

در مرحله قبلی پروژه، مطالعات تحقیقاتی را در مورد طول خط خواندیم و به این نتیجه رسیدیم که بین ۹۰ تا ۱۴۰ نویسه در هر خط برای پروژه‌های ما بهینه است (پیوند به متن). اخیراً زمانی را صرف خواندن مطالعات تحقیقاتی در مورد اندازه قلم کرده‌ایم. قانع‌کننده‌ترین و کاربردی‌ترین تحقیقی که تاکنون یافته‌ایم، مطالعه‌ای در سال ۲۰۱۶ است که از ردیابی چشم برای ارزیابی تأثیر اندازه قلم و فاصله خطوط برای افرادی که ویکی‌پدیا می‌خوانند، استفاده کرد:

با استفاده از یک طرح اندازه‌گیری ترکیبی، خوانایی و درک عینی و ذهنی مقالات را برای اندازه قلم بین ۱۰ تا ۲۶، و فاصله خطوط از ۰/۸ تا ۱/۸ (فونت: Arial) مقایسه کردیم. یافته‌های ما شواهدی ارائه می‌دهند که خوانایی با اندازه قلم به طور قابل‌توجهی افزایش می‌یابد. علاوه بر این، سؤالات درک مطلب برای فونت های ۱۸ و ۲۶ پاسخ‌های صحیح‌تری داشتند. این یافته‌ها شواهدی را ارائه می‌دهند که نشان می‌دهد وبگاه‌های پرمتن باید از قلم‌هایی با اندازه ۱۸ یا بزرگتر استفاده کنند و از فاصله خطوط پیش‌فرض زمانی که هدف آسان‌کردن یک صفحه وب برای خواندن و درک کردن است، استفاده کنند. نتایج ما به طور قابل توجهی با توصیه‌های قبلی متفاوت است، احتمالاً به این دلیل که اولین اثری است که اندازه قلم‌های بیش از ۱۴ را پوشش می‌دهد.^[8]

ابتدا باید اندازه‌گیری مورد استفاده توسط محققان (نقاط) را به اندازه‌گیری که مرورگرها در نهایت ارائه می‌کنند (px) تبدیل کنیم. این تبدیل عبارتست از: 1px = 72pt / 96.^[9]^[10] بنابراین محدوده مورد مطالعه در تحقیق (۱۰ تا ۲۶ نقطه) معادل ۱۳/۳ تا ۳۴ پیکسل است. نتیجه گیری آنها، ۱۸ نقطه برابر است با 24 پیکسل.

بنابراین آیا باید اندازه قلم را به ۲۴ پیکسل افزایش داد؟ این تحقیق خواندن عمیق را مورد مطالعه قرار داد، با این حال خوانندگان اغلب صفحه را پویش می‌کنند تا اطلاعات خاصی را پیدا کنند. این یک رفتار خواندن متفاوت است که مسلماً از اندازه قلم کوچکتر نسبت به خواندن عمیق سود می‌برد. پیشنهاد محافظه کارانه ما با در نظر گرفتن پویش، افزایش اندازه قلم برای شروع به ۱۶ پیکسل است (حداکثر عرض مقاله را نیز از ۹۶۰ پیکسل به ۱۰۵۰ پیکسل افزایش می دهیم.). (حداکثر عرض مقاله را نیز از ۹۶۰ پیکسل به ۱۰۵۰ پیکسل افزایش می‌دهیم.) به عنوان گام بعدی، برنامه‌ریزی خواهیم کرد تا تحقیقات خود را برای مطالعه بیشتر اندازه قلم در ویکی‌های ویکی‌مدیا انجام دهیم.

کتابشناسی مشروح تحقیق نویسه‌نگاری و خوانایی

پیوند به نمونه اولیه به همراه اندازه قلم پیشنهاد داده شده: https://di-visual-design-font-size.web.app/%D8%A8%D9%84%D9%88%D8%B7?fa.

Feedback

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

منابع

↑ کنتراست و قابلیت دسترسی به رنگ، درک کنتراست و رنگ مورد نیاز WCAG 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.
↑ Nanavati, Bias (2005). "Optimal Line Length in Reading--A Literature Review". Visible Language, v39 n2 p121-145 2005.
↑ 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.
↑ 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.
↑ 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.
↑ Moran (2020-04-05). "How People Read Online: New and Old Findings". Nielsen Norman Group.
↑ 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.
↑ Schaeffer, Kyle (30-09-2008) "CSS Font-Size: em vs. px vs. pt vs. percent"
↑ مبدل PT به PX

[1] کنتراست و قابلیت دسترسی به رنگ، درک کنتراست و رنگ مورد نیاز WCAG 2: «شناسایی رنگ پیوندها».

[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] مبدل PT به PX

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]