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

ساختار صفحه (Page Structure) چیست؟

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

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

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

ساختار صفحه چیست؟

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

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

ساختار صفحه پرسشی است که پیش از همهٔ این‌ها می‌آید: این صفحه از چه قطعه‌هایی ساخته شده است؟

منبع این مفهوم را به کتاب Designing Interfaces از Jenifer Tidwell وصل می‌کند. Tidwell در فصلی دربارهٔ چیدمان عناصر صفحه، این کار را با چند الگو توضیح می‌دهد. الگو یعنی راه‌حلی تکرارشونده، با نامی که تیم بتواند درباره‌اش حرف بزند.

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

سه لایه: قاب، صحنه، بخش‌ها

از الگوهای Tidwell سه‌تا برای فهم ساختار کافی است. هرکدام به یک پرسش جواب می‌دهد.

لایهٔ اول قاب است. Tidwell اسمش را قاب بصری (Visual Framework) می‌گذارد. سرصفحه، ناوبری اصلی، پانویس و جای جست‌وجو در همهٔ صفحه‌های محصول یکسان می‌مانند. کاربر یک بار این قاب را یاد می‌گیرد و دیگر به آن فکر نمی‌کند.

لایهٔ دوم صحنهٔ اصلی است. نام این الگو در کتاب Center Stage است. هر صفحه یک کار اصلی دارد و آن کار باید بزرگ‌ترین ناحیه را بگیرد. صفحه‌ای که پنج ناحیهٔ هم‌وزن دارد، به کاربر نمی‌گوید از کجا شروع کند.

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

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

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

بخش‌های عنوان‌دار و رایحهٔ اطلاعات

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

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

ولی ارزش این الگو به کیفیت عنوان بستگی دارد، نه به ظاهرش. منبع اینجا از رایحهٔ اطلاعات (Information Scent) کمک می‌گیرد. عنوان باید به کاربر بگوید که اگر این بخش را بخواند، به هدفش نزدیک‌تر می‌شود یا نه.

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

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

این آزمون با قانون مجاورت فرق دارد. مجاورت به چشم می‌گوید چه چیزهایی با هم‌اند. عنوان به ذهن می‌گوید آن گروه دربارهٔ چیست.

الگوی چیدمان را از روی کار انتخاب کنید

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

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

منبع الگوهای F و Z را هم در همین فهرست آورده است. ولی این دو چیدمان نیستند، توصیف حرکت چشم‌اند. خاستگاهشان را در ردیابی چشم دیده‌ایم.

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

ساختاری که چشم نمی‌بیند

تا اینجا دربارهٔ ساختاری حرف زدیم که دیده می‌شود. ولی هر صفحهٔ وب یک ساختار دوم هم دارد که در کد نوشته شده است. منبع هم تأکید می‌کند که ساختار بصری به‌تنهایی کافی نیست.

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

این تفاوت یک جزئیات فنی نیست. WebAIM هر چند سال یک بار از کاربران صفحه‌خوان نظرسنجی می‌کند. نظرسنجی دهم در زمستان ۲۰۲۳ تا ۲۰۲۴ با ۱٬۵۳۹ پاسخ انجام شد. در آن، ۷۱٫۶ درصد گفتند در یک صفحهٔ طولانی اول از میان عنوان‌ها حرکت می‌کنند تا اطلاعات را پیدا کنند. فقط ۶٫۴ درصد گفتند صفحه را از اول تا آخر می‌خوانند.

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

سطح عنوان‌ها هم مهم است. در همان نظرسنجی، ۸۸٫۸ درصد سطح‌بندی عنوان‌ها را خیلی مفید یا تا حدی مفید دانستند. پس سطح عنوان را برای اندازهٔ فونت انتخاب نکنید. h3 یعنی زیرمجموعهٔ h2 قبلی، نه «عنوانی که کمی کوچک‌تر است».

لایهٔ دیگر این ساختار، نشانه‌ها (landmarks) هستند: header، nav، main، aside و footer. این‌ها همان سه لایهٔ Tidwell هستند، این بار در کد. قاب در header و nav و footer می‌نشیند و صحنه در main. کاربر صفحه‌خوان با یک کلید مستقیم به صحنه می‌رود و قاب را رد می‌کند.

نشانه‌ها کمتر از عنوان‌ها به کار می‌روند. در همان نظرسنجی، ۳۱٫۸ درصد گفتند همیشه یا اغلب با آن‌ها حرکت می‌کنند. ولی گذاشتنشان تقریباً هیچ هزینه‌ای ندارد.

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

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

کجا ساختار از هم می‌پاشد

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

• - ساختار به ترتیب نمودار سازمانی: صفحه به ترتیب واحدهای شرکت تقسیم شده، نه به ترتیب پرسش‌های کاربر. بخش «دربارهٔ ما» بالای «هزینه‌ها» آمده.
• - همه‌چیز هم‌وزن: صحنهٔ اصلی وجود ندارد. شش کارت هم‌اندازه، که هرکدام را یک تیم خواسته است.
• - ترتیب دیداری با ترتیب کد فرق دارد: در موبایل، CSS بلوک‌ها را جابه‌جا کرده ولی ترتیب کد همان مانده است. کاربر صفحه‌کلید و صفحه‌خوان صفحه را به ترتیبی می‌پیماید که کاربر بینا نمی‌بیند. معیار «توالی معنادار» در WCAG دقیقاً همین را می‌پوشاند.
• - ساختاری که پشت تعامل پنهان شده: همهٔ بخش‌ها در آکاردئون بسته‌اند. عنوان‌ها دیده می‌شوند، ولی در بیشتر پیاده‌سازی‌ها جست‌وجوی درون‌صفحه‌ای مرورگر محتوای بسته را پیدا نمی‌کند.

آکاردئون خودش بد نیست. در افشای تدریجی دیدیم که پنهان کردن جزئیات کم‌کاربرد ذهن را سبک می‌کند. خرابی وقتی است که محتوای اصلی صفحه هم پشت آن برود.

در بافت فارسی

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

یک: زبان و جهت را روی خود سند بگذارید. عنصر ریشهٔ صفحهٔ فارسی باید هم lang="fa" داشته باشد و هم dir="rtl". صفحه‌خوان از زبان سند برای انتخاب صدای خواندن استفاده می‌کند. صفحه‌ای که زبانش مشخص نیست یا انگلیسی اعلام شده، ممکن است با موتور انگلیسی خوانده و نامفهوم شود.

دو: بلوک لاتین برچسب زبان خودش را بگیرد. نام محصول، تکه‌کد یا نقل‌قول انگلیسی در دل صفحهٔ فارسی باید lang="en" داشته باشد. WCAG این را معیار «زبان بخش‌ها» می‌نامد. بدون آن، صفحه‌خوان واژهٔ انگلیسی را با قاعده‌های تلفظ فارسی می‌خواند. کنارش dir="ltr" هم ترتیب نویسه‌ها و نشانه‌ها را درست نگه می‌دارد.

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

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

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

جمع‌بندی

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

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

اگر بخواهم یک پرسش بگذارم: اگر همین حالا CSS صفحهٔ اصلی محصولتان را خاموش کنید، فهرست عنوان‌هایش همان داستانی را می‌گوید که طرحتان می‌گوید؟