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

صحنهٔ مرکزی (Center Stage) چیست؟

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

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

تعریف

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

مسئلهٔ طراحی

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

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

راه‌حل و اجرا

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

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

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

مسئله‌های احتمالی

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

صحنه با فرودست‌کردن ساخته می‌شود، نه با بزرگ‌کردن

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

و از این یک نتیجه درمی‌آید که کل ماهیت این الگو را عوض می‌کند: ساختن صحنهٔ مرکزی، بیشتر یک مسئلهٔ سازمانی است تا بینایی. چون کسی باید بپذیرد که ماژولش کوچک‌تر شود، پایین‌تر برود، یا رنگ ملایم‌تری بگیرد — و آن «کسی» معمولاً یک تیم است با یک سنجهٔ خودش.

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

اندازه تنها متغیر نیست — و رنگ می‌تواند همه‌اش را باطل کند

این بخش هم افزودهٔ مترجم است. تنها قاعدهٔ کمّی این متن — «دست‌کم دو برابر بزرگ‌ترین عنصر بعدی» — قاعدهٔ مفیدی است، اما دربارهٔ اندازه است؛ و نقطهٔ کانونی را اندازه به‌تنهایی نمی‌سازد. خودِ منبع هم این را می‌داند: توصیهٔ «مرکز سفید، پیرامون خاکستری» یک قاعدهٔ تباین است، نه اندازه.

صورت‌بندی دقیق‌ترش این است: صحنه وقتی ساخته می‌شود که یک عنصر در چند بُعد هم‌زمان برنده باشد — مساحت، تباین، موقعیت، و اینکه تنها چیزی باشد که تغییر می‌کند یا حرکت دارد.

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

و از همین‌جا یک آزمون ساده برای پنل‌های پیرامون درمی‌آید که منبع نمی‌دهد. برای هر پنل بپرسید: این پنل صحنه را تغییر می‌دهد، یا از آن دور می‌کند؟

• - تغییر می‌دهد → پنل پشتیبان است. جعبهٔ ابزار، تنظیمات لایه، فیلترها. جایش کنار صحنه است.
• - دور می‌کند → رقیب است، نه پشتیبان. «محصولات مشابه»، «پیشنهاد ویژه»، بنر یک بخش دیگر. جایش یک سطح بالاتر است یا پایین صفحه — نه در حاشیهٔ صحنه.

و این یک پرسش، بیشتر نوارهای کنار را مرتب می‌کند.

در موبایل، صحنه کل صفحه است

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

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

• - در دسکتاپ، شکست از شلوغی پیرامون صحنه می‌آید.
• - و در موبایل، شکست از تکه‌تکه‌خورده‌شدن خودِ صحنه می‌آید — بنر به‌روزرسانی، نوار «اپ ما را نصب کنید»، اطلاعیهٔ کوکی، حبابِ چت پشتیبانی، نوار ناوبری پایین، و نوار مرورگر. هیچ‌کدام به‌تنهایی نامعقول نیست و جمعشان صحنه را می‌خورد.

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

آزمون سوم‌میانی

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

سوم میانی صفحه را ببرید و به کسی نشان دهید که آن محصول را نمی‌شناسد و بپرسید «این صفحه برای چه کاری است؟»

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

و ارزش این آزمون در این است که به هیچ آزمایشگاهی نیاز ندارد و همان کاری را می‌کند که منبع درست توصیه‌اش می‌کند («آزمون کنید») اما راهش را نمی‌گوید.

در بافت فارسی: صحنه را چه چیزی گرفته؟

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

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

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

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

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

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

جمع‌بندی

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