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

بخش‌های عنوان‌دار (Titled Sections) چیست؟

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

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

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

بخش‌های عنوان‌دار چیست؟

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

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

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

چرا عنوان جواب می‌دهد

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

منبع سه دلیل برای این تفاوت می‌آورد:

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

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

چطور بخش‌های عنوان‌دار بسازیم

منبع چند گام عملی پیشنهاد می‌کند:

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

یک قاعدهٔ منبع از بقیه مهم‌تر است و بیشتر از همه نادیده گرفته می‌شود: عنوان را نزدیک محتوای خودش بگذارید و بخش‌ها را با فضای خالی از هم جدا کنید.

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

ردّ اطلاعات و عنوان‌های مبهم

منبع مفهومی را پیش می‌کشد که کل این الگو به آن وابسته است: «ردّ اطلاعات». یعنی نشانه‌هایی که به کاربر می‌گویند اگر این راه را برود، به هدفش می‌رسد. عنوانی که ردّ قوی دارد، کاربر را مطمئن می‌کند. عنوانی که ردّ ضعیف دارد، او را مجبور می‌کند محتوا را بخواند تا بفهمد درست آمده یا نه. در این حالت عنوان عملاً کاری نکرده است.

منبع مثال فروشگاه بزرگی را می‌زند که دسته‌هایش در نگاه اول روشن‌اند. اما کسی که دنبال سشوار است، می‌تواند هم در «زیبایی» بگردد و هم در «لوازم برقی». هر دو عنوان بوی درستی می‌دهند. کاربر نصف وقت در دستهٔ اشتباه می‌گردد.

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

منبع یک هشدار دیگر هم دارد. اگر برای یک تکه نمی‌توانید عنوان روشن و کوتاهی پیدا کنید، احتمالاً مشکل از عنوان نیست، از تقسیم‌بندی است. شاید آن تکه دو موضوع را با هم دارد، یا شاید جایش در الگوی دیگری است. یک نکتهٔ لحنی هم می‌آورد. عنوان می‌تواند کنجکاوی برانگیزد، اما نباید اغراق کند. خوانندهٔ وب زود متوجه اغراق می‌شود و اعتمادش را از دست می‌دهد.

وقتی عنوان کافی نیست

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

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

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

عنوان در ساختار، نه فقط در ظاهر

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

در صفحهٔ وب، عنوان واقعی با تگ‌های h1 تا h6 ساخته می‌شود، نه با یک پاراگراف پررنگ. برای چشم این دو یکی‌اند، ولی برای صفحه‌خوان نه. در نظرسنجی‌های WebAIM بیشتر کاربران صفحه‌خوان گفته‌اند که برای پیدا کردن اطلاعات، اول از روی عنوان‌ها می‌پرند. یعنی همان کاری که کاربر بینا با چشم می‌کند، او با صفحه‌کلید می‌کند. عنوانی که فقط ظاهرش عنوان است، برای او اصلاً وجود ندارد.

چند قاعده از همین‌جا بیرون می‌آید. سطح عنوان‌ها را به ترتیب نگه دارید و از h2 مستقیم به h4 نپرید. اندازهٔ قلم را با CSS تعیین کنید، نه با انتخاب سطح عنوان. و هر صفحه یک عنوان اصلی داشته باشد. این قاعده‌ها به موتورهای جست‌وجو هم کمک می‌کنند. اما دلیل اصلی‌شان دسترس‌پذیری است.

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

این بخش هم افزودهٔ من است و از کار روی متن‌ها و رابط‌های فارسی می‌آید.

فارسی حروف بزرگ ندارد. در انگلیسی، حروف بزرگ خودش عنوان را متمایز می‌کند. در فارسی این ابزار نیست. پس اندازه، وزن قلم و فاصله باید کل بار تمایز را بکشند. بعضی قلم‌های فارسی نسخهٔ پررنگ ضعیفی دارند که فرقش با متن عادی کم دیده می‌شود. پیش از انتخاب قلم، عنوان و متن را کنار هم امتحان کنید.

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

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

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

جمع‌بندی

بخش‌های عنوان‌دار شاید ساده‌ترین الگوی طراحی رابط باشند. محتوا را تکه‌تکه کنید و به هر تکه عنوانی بدهید که موضوعش را بگوید. اما کیفیت این الگو در جزئیاتش است. تقسیم‌بندی باید منطقی باشد و عنوان کوتاه و با ردّ قوی. فاصله باید عنوان را به بخش خودش بدوزد و ساختار صفحه را صفحه‌خوان هم بفهمد.

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