منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · شهریور ۱۴۰۵ · زمان مطالعه: حدود ۱۲ دقیقه

خوانایی (Readability) در طراحی UX چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

منبع تفکیک درستی می‌سازد: خوانا‌پذیری (legibility) دربارهٔ تشخیص‌دادن حروف از هم است، و خوانایی (readability) دربارهٔ فهمیدن.

و بعد هر شش توصیهٔ عملی‌اش دربارهٔ خوانا‌پذیری است.

تعریف

خوانایی در طراحی UX به این اشاره دارد که کاربر چقدر آسان می‌تواند محتوای متنی را بخواند و بفهمد. و منبع مرزش را دقیق می‌کشد: خوانا‌پذیری دربارهٔ تشخیص یک حرف از حرف دیگر در یک قلم است؛ خوانایی گسترهٔ وسیع‌تری دارد و شامل این است که خواننده چقدر راحت می‌تواند آنچه روی صفحه است را رمزگشایی و پردازش کند و به معنای مقصود برسد.

و می‌گوید این کار تعادلی ظریف میان دسترس‌پذیری، خوانا‌پذیری و فهم‌پذیری است.

چه چیزی بر خوانایی اثر می‌گذارد

• - واژگان و فهم کاربر. واژه‌هایی که با سطح خواندن کاربر می‌خوانند، پیام را مؤثرتر می‌رسانند.
• - سبک هرم وارونه. مهم‌ترین اطلاعات اول، بعد جزئیات مهم، و در آخر اطلاعات پس‌زمینه.
• - چیدمان متن و اسکن‌پذیری. شکستن بلوک‌های بزرگ متن به بندهای دو‌–‌سه‌جمله‌ای، و تراز از یک سمت به‌جای تراز وسط.
• - یکدستی عناصر طراحی، که هم هویت برند را تقویت می‌کند و هم خوانایی را.

و در بخش چطور محتوا بسازیم، شش تکنیک می‌دهد: پژوهش کاربر برای دانستن اینکه برای چه کسی می‌نویسید · انتخاب تایپوگرافی و قلم · استفادهٔ یکدست از عناصر · استفادهٔ مؤثر از فضای منفی · رنگ و کنتراست با پرهیز از کنتراست بیش‌از‌حد تند · و بهینه‌سازی چیدمان متن با طول سطر ۴۵ تا ۷۲ نویسه و بندهای کوتاه‌تر.

و نُه فایده برمی‌شمارد، از افزایش درگیری و فهم و رضایت تا بهبود SEO و کاهش بار شناختی و کمک به انجام کنش مورد نظر پس از خواندن.

تفکیکی که ساخته می‌شود و بعد رها می‌شود

این بخش افزودهٔ مترجم است. فهرست توصیه‌ها را با تعریف خودِ منبع مقایسه کنید:

تایپوگرافی، یکدستی، فضا، رنگ و کنتراست، چیدمان، طول سطر — همه دربارهٔ دیدن متن‌اند، نه فهمیدنش. از سهم «فهم»، فقط یک قلم می‌ماند (واژگان) به‌علاوهٔ هرم وارونه.

یعنی مقاله حدود هشتاد درصد توصیه‌هایش را به همان چیزی می‌دهد که خودش مفهوم باریک‌تر نامیده.

و این پیامد عملی دارد: یک تیم می‌تواند همهٔ سنجه‌های خوانا‌پذیری را کامل کند — کنتراست بی‌عیب، سطر ۶۰ نویسه‌ای، فاصلهٔ سطر سخاوتمندانه — و متنی منتشر کند که هیچ‌کس نمی‌فهمد.

و علتش ساده است: کنتراست عددی دارد و فهم ندارد. پس سنجهٔ قابل‌اندازه‌گیری، جای آن چیزی را گرفته که اهمیت دارد.

اما آزمون فهم هم ارزان است — فقط عدد نمی‌دهد: صفحه را دست کسی بدهید و بخواهید با کلمات خودش بگوید قرار است چه کاری بکند.

• - نپرسید «واضح است؟» — جواب بله است.
• - بپرسید «اگر این را بزنی چه می‌شود؟» و «این پیام به تو چه می‌گوید که انجام بدهی؟»
• - و اگر توضیحش با قصد شما نخواند، مسئله قلم نیست.

«۴۵ تا ۷۲ نویسه» متغیر چاپ است

این بخش هم افزودهٔ مترجم است. آن قاعده دلیل واقعی دارد: سطر بلند باعث می‌شود چشم در بازگشت به ابتدای سطر بعد جایش را گم کند. اما روی صفحهٔ ۳۶۰ پیکسلی، در اندازهٔ خوانا، اصلاً نمی‌توانید سطر ۷۲‌نویسه‌ای داشته باشید — چیزی حدود ۳۰ تا ۳۵ نویسه می‌گیرید.

پس آن قاعده در موبایل قید‌کننده نیست؛ خودبه‌خود برآورده شده. و چیزی که واقعاً در موبایل قید می‌گذارد چیز دیگری است:

طول بند بر حسب صفحه. بندی که کل نمای صفحه را پر می‌کند، هیچ خروجی مرئی ندارد — کاربر نمی‌تواند ببیند کجا تمام می‌شود، و همین است که او را می‌پراند. قاعدهٔ عملی: بیش از چهار‌–‌پنج سطر بی یک نقطهٔ جهت‌یابی (تیتر، فاصله، فهرست) نروید.

و دو تصحیح کوچک‌تر:

• - توصیهٔ «تراز از یک سمت به‌جای وسط» درست است، و دلیلش مهم‌تر از خودش است: چشم به یک نقطهٔ شروع ثابت نیاز دارد. و همین دلیل توضیح می‌دهد که چرا متن هم‌تراز‌شده (justified) در وب بدتر است — فاصلهٔ کلمات ناهموار می‌شود و مرورگر ابزار درست بخش‌بندی کلمه را ندارد.
• - و توصیهٔ «قلم بی‌سریف برای تیتر و سریف خوانا برای متن»: در رزولوشن‌های امروزی، سریف در برابر بی‌سریف تقریباً غیر‌عامل است. آن جمله ترجیح سلیقه‌ای است که به‌شکل قاعدهٔ خوانایی ارائه شده. چیزی که واقعاً فهم را جابه‌جا می‌کند به‌ترتیب این‌هاست: اندازه، فاصلهٔ سطر، کنتراست، و طول سطر.

و پرنفوذترین تصمیم خوانایی، تایپوگرافیک نیست

این بخش هم افزودهٔ مترجم است و کوتاه است. در هیچ‌کدام از نُه فایده و شش تکنیک منبع این جمله نیست: کمتر بنویسید.

اما نصف‌کردن یک بند، خوانایی را بیشتر از هر تغییر قلمی بالا می‌برد — و رایگان است.

و برای متن رابط، سقف بسیار پایین‌تر از تصور رایج است: دکمه یک تا سه کلمه · برچسب فیلد یک تا چهار کلمه · پیام خطا یک جمله که راه‌حل را نام می‌برد.

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

در بافت فارسی: نصف قواعد خوانایی برای این خط نوشته نشده‌اند

این بخش هم افزودهٔ مترجم است و شش نکته دارد — و به‌نظرم مهم‌ترین بخش این نوشته، چون بیشتر این قواعد برای خط لاتین نوشته شده‌اند.

یک: فارسی حروف بزرگ ندارد. توصیهٔ منبع به «ترکیب حروف بزرگ و کوچک برای سلسله‌مراتب» اینجا ابزارش وجود ندارد. و چون در بیشتر فونت‌های وب فارسی وزن ضخیم تفاوت ضعیفی می‌سازد، سلسله‌مراتب باید از اندازه، فاصله و رنگ بیاید.

دو: فاصلهٔ سطر باید بیشتر باشد. فارسی نقطه‌های زیر و بالای خط دارد (ی، ج، پ، ز) و لنگر حروف بزرگ لاتین را ندارد؛ پس در همان مقدار line-height که در لاتین درست به‌نظر می‌رسد، نویسه‌ها به هم می‌خورند. نقطهٔ شروع عملی: حدود ۱٫۷ تا ۱٫۸ برای متن اصلی، نه ۱٫۴ تا ۱٫۵ رایج در لاتین.

سه: هم‌ترازکردن (justify) در فارسی از لاتین هم بدتر است. کلمه‌ها پیوسته‌اند و بخش‌بندی متعارف ندارند، پس فاصله‌های بزرگ می‌افتد؛ و کشیدهٔ چاپی (کشش نویسه) در مرورگر در دسترس یا زیبا نیست. پس متن اصلی را هم‌تراز نکنید — راست‌چین با لبهٔ چپ آزاد.

چهار: کف اندازه بالاتر است. در فارسی معنا در نشانه‌های کوچک است — نقطه‌ها، ه در برابر ة، ی در برابر ئ — پس همان اندازهٔ پیکسلی عملاً کوچک‌تر است. متن ۱۴ پیکسلی لاتین خوانا است؛ فارسی‌اش نه. از ۱۶ تا ۱۷ پیکسل شروع کنید و برای هیچ چیزی که کاربر باید بخواند زیر ۱۴ نروید.

پنج: رشته‌های چپ‌به‌راست داخل متن راست‌به‌چپ — عدد، نام محصول انگلیسی، نشانی، قطعه‌کد — جایی است که شکستن سطر و جای نقطهٔ پایان خراب می‌شود. راهکار: هر رشته را در عنصری با جهت صریح بپیچید، و جای نقطه در انتهای سطر را چشمی چک کنید؛ باگ کلاسیک این است که نقطه سر دیگر سطر می‌افتد.

شش و مهم‌تر از همه: خوانا‌نبودنِ فارسی رابط‌ها معمولاً مسئلهٔ قلم نیست — مسئلهٔ گرته‌برداری است. «لطفاً منتظر بمانید»، «شما هیچ آیتمی ندارید»، «عملیات با موفقیت انجام شد» — این‌ها دستوری درست‌اند و هیچ‌کس این‌طور حرف نمی‌زند.

و آزمونش رایگان است: بلند بخوانیدش. اگر این جمله را به یک آدم نمی‌گفتید، بازنویسی‌اش کنید — و این تنها کاری است که خوانایی را در معنای واقعی کلمه بالا می‌برد، نه در معنای قابل‌اندازه‌گیری‌اش.

جمع‌بندی

• - خوانایی دربارهٔ فهمیدن متن است و خوانا‌پذیری دربارهٔ تشخیص‌دادن حروف؛ منبع این مرز را درست می‌کشد.
• - اما هر شش توصیهٔ عملی‌اش دربارهٔ خوانا‌پذیری است — چون کنتراست عدد دارد و فهم ندارد. نتیجه: می‌شود همهٔ سنجه‌ها را کامل کرد و متنی منتشر کرد که کسی نمی‌فهمد.
• - آزمون فهم ارزان است: «اگر این را بزنی چه می‌شود؟» با کلمات خودِ کاربر — نه «واضح است؟».
• - «۴۵ تا ۷۲ نویسه» متغیر چاپ است و در موبایل خودبه‌خود برآورده می‌شود؛ متغیر واقعی طول بند بر حسب صفحه است — بیش از چهار‌–‌پنج سطر بی نقطهٔ جهت‌یابی نروید.
• - سریف در برابر بی‌سریف تقریباً غیر‌عامل است؛ آنچه فهم را جابه‌جا می‌کند: اندازه، فاصلهٔ سطر، کنتراست، طول سطر.
• - و پرنفوذترین تصمیم، تایپوگرافیک نیست: کمتر بنویسید. آزمونش: می‌توانید جمله‌ای را حذف کنید بی از‌دست‌رفتن اطلاعات؟
• - در بافت ما: فارسی حروف بزرگ ندارد و وزن ضخیمش ضعیف است، پس سلسله‌مراتب از اندازه و فاصله و رنگ · فاصلهٔ سطر ۱٫۷ تا ۱٫۸ · هم‌تراز نکنید · از ۱۶ تا ۱۷ پیکسل شروع کنید · رشته‌های لاتین را با جهت صریح بپیچید و جای نقطه را چک کنید · و گرته‌برداری را با بلند‌خواندن بگیرید.