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

رویکرد محتوا-اول (Content-First) چیست؟

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

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

محتوا-اول همان ترتیب را وارونه می‌کند. و ارزش واقعی‌اش نه در شعارش است، بلکه در چیزهایی که آن ترتیبِ وارونه زود نشان می‌دهد.

تعریف

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

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

منبع اشاره می‌کند که این تنها رویکرد موجود نیست؛ مثلاً طراحی وظیفه‌محور هم هست که تمرکزش بر تمام‌شدن کار است.

دو مزیتی که منبع می‌شمارد

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

مزیت دوم مهم‌تر از آن است که به‌نظر می‌رسد: انتخاب لحن، بی داشتن محتوا، یک تصمیم سلیقه‌ای است. با محتوا، یک تصمیم مهندسی می‌شود.

متن جایگزین چه چیزی را پنهان می‌کند

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

• - ۱. طول واقعی. متن جایگزین همیشه به‌قدر همان جعبه است. عنوان محصول واقعی یا نصف آن است یا دو برابرش — و همان تفاوت است که چیدمان را می‌شکند.
• - ۲. سلسله‌مراتب واقعی. در متن جایگزین همهٔ بندها هم‌شکل‌اند. در محتوای واقعی، یکی سه کلمه است و یکی هفت سطر، و آن‌وقت معلوم می‌شود سلسله‌مراتب شما با محتوا نمی‌خواند.
• - ۳. حالت‌های مرزی. صفحه‌ای که فقط با محتوای «متوسط» طراحی شده، برای کاربر بی‌داده (خالی)، کاربر با یک قلم، و کاربر با پانصد قلم طراحی نشده. متن جایگزین همیشه حالت متوسط است.
• - ۴. لحن. و مهم‌تر از همه: با متن بی‌معنا نمی‌شود فهمید که این صفحه دارد چه چیزی می‌گوید — پس نمی‌شود فهمید که آیا آنچه می‌گوید همان چیزی است که کاربر آمده بشنود.

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

چهار گام برای اجرای واقعی

• - ۱. سیاههٔ محتوا بگیرید. پیش از هر چیدمانی، فهرست کنید چه چیزهایی باید روی این صفحه بیایند و هرکدام از کجا می‌آید (نوشتهٔ تیم، دادهٔ سامانه، ورودی کاربر، محتوای طرف سوم). همین یک فهرست معمولاً نشان می‌دهد که یک‌سوم اقلام صاحب ندارند.
• - ۲. مدل محتوا را پیش از چیدمان بنویسید. یعنی تعیین کنید هر «قلم» از چه اجزایی ساخته شده و کدام‌ها اجباری‌اند. صفحهٔ محصولی که مدل محتوایش عنوان و قیمت و سه ویژگی است، چیدمان دیگری می‌خواهد تا صفحه‌ای که ویژگی‌هایش اختیاری‌اند.
• - ۳. اولویت را از محتوا دربیاورید، نه از قالب. پرسش درست این نیست که «چه چیزی بالای صفحه بگذاریم»، این است که «از میان این اقلام، کاربر برای کدام آمده». آن یکی بالا می‌رود؛ بقیه به‌ترتیب.
• - ۴. با بلندترین و کوتاه‌ترین حالت آزمون بگیرید. هر چیدمان را دو بار ببینید: یک‌بار با کم‌ترین محتوای ممکن و یک‌بار با بیشترین. اگر هر دو سالم ماندند، حالت‌های میانی هم سالم می‌مانند.

کجا این رویکرد کار نمی‌کند

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

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

در بافت فارسی: متن بلندتر، و آخر از همه نوشته‌شده

سه چیز این رویکرد را در کار فارسی از «خوب» به «ضروری» ارتقا می‌دهند:

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

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

جمع‌بندی

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