کاربر از جست‌وجو وارد یک مقاله می‌شود، چند سطر می‌خواند و دنبال پاسخ سؤالش می‌گردد. اگر متن زیر تبلیغ و پنجره‌های مزاحم پنهان باشد، عنوان‌ها مسیر را روشن نکنند یا مطلب مرتبطی برای ادامه پیدا نشود، ظاهر زیبای صفحه به‌تنهایی کمکی نمی‌کند. در سایت محتوایی، طراحی باید پیدا کردن و خواندن اطلاعات را آسان کند.
طراحی سایت‌های محتوایی و وبلاگی فقط انتخاب فونت و ساخت کارت مقاله نیست. معماری محتوا، صفحه فهرست، جست‌وجو، تجربه مطالعه، اعتماد به نویسنده و فرایند نگهداری محتوا در نتیجه نقش دارند. در این راهنما یک مجله فرضی درباره طراحی و توسعه را مثال می‌زنیم تا تصمیم‌ها ملموس باشند؛ پیشنهادها نسخه ثابت برای همه وبلاگ‌ها نیستند.
قبل از طراحی، هدف خواننده را مشخص کنید
ممکن است مخاطب برای یک پاسخ کوتاه، یادگیری یک موضوع یا دنبال‌کردن خبر وارد سایت شود. این سه نیاز به ساختار یکسانی احتیاج ندارند. برای راهنمای آموزشی، مثال و مسیر مرحله‌ای مهم است؛ برای خبر، زمان و منبع اهمیت بیشتری دارد؛ برای تحلیل، استدلال و زمینه باید روشن باشند. قالب مقاله را با نوع محتوا هماهنگ کنید.
در مجله فرضی ما، سه مسیر اصلی وجود دارد: کاربر می‌خواهد یک مسئله فنی را حل کند، موضوعی تازه یاد بگیرد یا آخرین مطالب یک حوزه را ببیند. این مسیرها را پیش از طراحی منو بنویسید. نام دسته‌ها و اطلاعات روی کارت باید به انتخاب در همین مسیرها کمک کنند، نه اینکه صرفاً همه فیلدهای پایگاه داده را نمایش دهند.
راهنمای محتوای مفید در Google Search Central نیز بر پاسخ‌دادن به نیاز مخاطب، عنوان توصیفی و ارزش افزوده واقعی تأکید دارد. طراحی نمی‌تواند کمبود محتوای دقیق را جبران کند. یک متن طولانی هم صرفاً به‌خاطر تعداد واژه‌ها مفید نمی‌شود؛ گوگل برای مقاله‌ها تعداد کلمه ترجیحی تعیین نکرده است.
دسته‌بندی را از برچسب و قالب محتوا جدا کنید
دسته‌بندی، مسیر اصلی سازمان‌دهی محتوا را می‌سازد. Tag ارتباط‌های جزئی‌تر و چندگانه را نشان می‌دهد و نوع محتوا می‌تواند «راهنما»، «تحلیل» یا «خبر» باشد. اگر همه این‌ها را در یک منوی بلند قرار دهید، کاربر باید پیش از پیدا کردن مطلب، منطق داخلی سایت را یاد بگیرد. با چند نام روشن شروع کنید و ساختار را با رشد واقعی محتوا گسترش دهید.
مثلاً «طراحی» یک دسته است، «Figma» یک موضوع دقیق‌تر و «راهنمای شروع» نوع یا نقش مطلب. برای هر مفهوم یک نام اصلی داشته باشید تا محتوا میان برچسب‌های نزدیک پخش نشود. صفحه دسته هم فقط یک انبار مقاله نیست؛ عنوان، توضیح کوتاه و انتخاب‌های مرتبط می‌توانند محدوده موضوع را روشن کنند.
رفتار Tagها را مشخص کنید. آیا لینک به صفحه موضوع هستند یا فیلتر همین صفحه؟ کاربر نباید از روی شکل کپسولی حدس بزند. راهنمای طراحی Tag و Label این تفاوت‌ها را توضیح می‌دهد. همچنین دسته خالی را بدون برنامه در منو قرار ندهید؛ مسیرهایی را نشان دهید که واقعاً محتوای قابل استفاده دارند.
صفحه اصلی و فهرست را برای انتخاب طراحی کنید
صفحه اصلی یک وبلاگ شخصی ممکن است با ترتیب زمانی کار کند. در مجله‌ای با موضوع‌های مختلف، نمایش یک مطلب منتخب، تازه‌ترین مطالب و ورودی دسته‌ها می‌تواند مناسب‌تر باشد. این انتخاب به مخاطب و حجم محتوا وابسته است. قرار نیست همه سایت‌ها با یک Hero بزرگ و چند ردیف کارت مشابه آغاز شوند.
روی کارت مقاله، عنوان باید موضوع را روشن کند. تصویر، خلاصه کوتاه، دسته و تاریخ را وقتی اضافه کنید که به انتخاب کمک کنند. اگر تاریخ برای یک خبر تعیین‌کننده است، آن را پنهان نکنید. برای محتوای همیشه‌کاربردی نیز تاریخ بازبینی واقعی می‌تواند مفید باشد؛ تغییر تاریخ بدون اصلاح معنادار محتوا، نشانه تازگی معتبر نیست.
خلاصه را با متن آغاز مقاله اشتباه نگیرید. خلاصه بهتر است بگوید خواننده چه چیزی به دست می‌آورد. عنوان «همه چیز درباره طراحی» در کارت مبهم است، اما «چطور سلسله‌مراتب متن را در صفحه مقاله بسازیم؟» هدف روشن‌تری دارد. اندازه و تعداد ستون‌ها را با عنوان‌های بلند فارسی هم ببینید، نه فقط چند عنوان کوتاه نمونه.
صفحه مقاله باید مسیر مطالعه روشنی داشته باشد
در شروع صفحه، عنوان، معرفی کوتاه و اطلاعات لازم درباره نویسنده و زمان را کنار هم قرار دهید. خواننده باید سریع بفهمد مقاله چه مسئله‌ای را پوشش می‌دهد. بعد، متن اصلی را با عنوان بخش‌ها، مثال و رسانه مرتبط سازمان بدهید. عناصر اشتراک‌گذاری و تبلیغ نباید از خود محتوا واضح‌تر و پررنگ‌تر شوند.
برای مقاله بلند، Table of Contents می‌تواند امکان رفتن مستقیم به بخش مورد نیاز را فراهم کند. آن را از عنوان‌های واقعی متن بسازید و نام‌های کوتاه اما دقیق داشته باشید. برای یک نوشته کوتاه، فهرست مطالب مفصل شاید فقط فاصله بیشتری تا پاسخ ایجاد کند. در موبایل نیز نحوه بازشدن و جای آن را طوری انتخاب کنید که مطالعه را قطع نکند.
سلسله‌مراتب عنوان‌ها باید معنا را نشان دهد، نه صرفاً اندازه ظاهری را. طبق راهنمای Headings در W3C، عنوان‌های منظم به فهم ساختار و پیمایش محتوا، از جمله برای کاربران صفحه‌خوان، کمک می‌کنند. برای درشت‌کردن یک جمله معمولی از عنوان بخش استفاده نکنید؛ سبک ظاهری و نقش ساختاری دو تصمیم مرتبط اما متفاوت‌اند.
خوانایی را با فونت و عرض واقعی بسنجید
اندازه فونت، عرض متن و Line Height را نمی‌توان برای همه خانواده‌ها و همه دستگاه‌ها با یک عدد تعیین کرد. اندازه اسمی یکسان، ارتفاع دیداری یکسان نمی‌سازد. متن را با فونت نهایی و عرض واقعی ببینید. سطرهای بسیار بلند دنبال‌کردن مسیر را سخت می‌کنند و سطرهای بسیار کوتاه نیز ریتم مطالعه را پی‌درپی می‌شکنند.
در فارسی، نقطه‌ها، اتصال حروف، نیم‌فاصله و متن ترکیبی با انگلیسی اهمیت دارند. عنوان بلند، قیمت، شماره نسخه و نام ابزار را در نمونه‌ها قرار دهید. راهنمای تایپوگرافی فارسی به انتخاب فونت، فاصله‌ها و RTL می‌پردازد. برای متن اصلی نیز رنگ کم‌رنگ را فقط به‌خاطر ظاهر آرام انتخاب نکنید؛ خوانایی باید حفظ شود.
فاصله میان عنوان و پاراگراف بعدی باید ارتباطشان را روشن کند. پاراگراف‌ها را با فاصله مناسب از هم جدا کنید و از بلوک‌های بسیار متراکم دوری کنید، بدون اینکه هر جمله را به یک بخش مستقل تبدیل کنید. فضای خالی در طراحی در گروه‌بندی اطلاعات نقش دارد؛ فضای بیشتر همیشه به معنی خوانایی بهتر نیست.
تصویر و کد باید چیزی به توضیح اضافه کنند
کاور به معرفی موضوع کمک می‌کند، اما تصویر داخل متن بهتر است یک نکته، فرایند یا مقایسه را توضیح دهد. تکرار کاور در بدنه معمولاً اطلاعات تازه‌ای نمی‌دهد. برای تصویرهای آموزشی، توضیح و متن جایگزین مناسب بنویسید. اگر تصویر داده واقعی دارد، منبع و شرایط آن را مشخص کنید؛ نمودار مفهومی را به‌عنوان نتیجه اندازه‌گیری‌شده ارائه نکنید.
در مقاله فنی، Code Block باید کد را نشان دهد، نه اینکه به بخشی از صفحه زنده تبدیل شود. نمونه باید اجزای لازم برای فهم یا اجرا را داشته باشد و محدودیت‌هایش روشن باشد. برای CSS وابسته به یک کلاس، HTML متناظر را هم ارائه کنید. نام کلاس‌ها در دو بخش باید یکسان باشد تا خواننده مجبور به حدس‌زدن ساختار نشود.
جدول‌ها و کدهای بلند در موبایل به تصمیم جدا نیاز دارند. اگر اسکرول افقی لازم است، باید داخل همان بلوک باشد و کل صفحه را عریض نکند. متن و رابط مقاله نیز باید با بزرگ‌نمایی قابل استفاده بمانند. طراحی صفحه کوچک را از ابتدا ببینید؛ Mobile First فقط کوچک‌کردن نسخه دسکتاپ نیست.
جست‌وجو و حالت بدون نتیجه را کامل طراحی کنید
جست‌وجو باید در جایی باشد که برای مخاطب قابل پیدا کردن است و نتیجه‌ها با عنوان و خلاصه قابل تشخیص باشند. اگر فیلتر موضوع یا نوع محتوا دارید، انتخاب‌های فعال را نشان دهید. درباره ترکیب فیلترها تصمیم روشن داشته باشید. پاک‌شدن خودکار عبارت یا انتخاب‌ها بعد از نتیجه ناموفق، فهم علت را دشوار می‌کند.
وقتی نتیجه‌ای پیدا نمی‌شود، بگویید کدام جست‌وجو یا ترکیب انتخاب‌ها نتیجه نداشته است. امکان تغییر عبارت یا پاک‌کردن فیلترها را فراهم کنید. خطای دریافت داده را با نبود نتیجه یکی نکنید. راهنمای Empty State تفاوت این وضعیت‌ها و متن مناسب هرکدام را توضیح می‌دهد.
در پیاده‌سازی جست‌وجوی فارسی، تفاوت نویسه‌ها و فاصله‌ها نیز می‌تواند روی پیدا شدن محتوا اثر بگذارد. تصمیم درباره یکسان‌سازی ورودی و نام‌های جایگزین را در لایه جست‌وجو ثبت کنید، نه اینکه برای جبران آن ده‌ها Tag تکراری بسازید. نتیجه‌ها باید بر اساس منطق قابل توضیح مرتب شوند؛ صرفاً تازه‌ترین مطلب همیشه مرتبط‌ترین پاسخ نیست.
مطالب مرتبط را با دلیل انتخاب کنید
پس از خواندن یک راهنما، قدم بعدی ممکن است دیدن مثال، بررسی یک ابزار یا یادگیری موضوع پیش‌نیاز باشد. بخش Related Posts را بر همین اساس بسازید. مشترک‌بودن یک دسته بزرگ مانند «تکنولوژی» دلیل کافی برای ارتباط دو مطلب نیست. یک لینک دقیق در نقطه مناسب متن می‌تواند از یک ردیف طولانی کارت تصادفی مفیدتر باشد.
راهنمای لینک‌ها در Google Search Central بر لینک قابل پیمایش و متن توصیفی تأکید می‌کند. برای ناوبری، لینک واقعی با مقصد مشخص داشته باشید. عبارت «راهنمای انتخاب فونت فارسی» مقصد را بهتر از «اینجا کلیک کنید» توضیح می‌دهد. لینک داخلی را برای کمک به ادامه مطالعه قرار دهید، نه صرفاً تکرار یک کلمه کلیدی.
اگر یک خدمت یا محصول با مسئله مقاله ارتباط واقعی دارد، می‌توان آن را در جای مناسب معرفی کرد. این معرفی نباید وسط پاسخ، مسیر خواندن را قطع کند یا وانمود کند مقاله صرفاً برای فروش نوشته شده است. پیشنهاد را با نیاز مطرح‌شده وصل کنید و عنوان اقدام را دقیق بنویسید.
اعتماد و فرایند نگهداری را در طراحی ببینید
نام نویسنده، تخصص مرتبط، منبع ادعاها و تاریخ بازبینی واقعی به خواننده کمک می‌کنند زمینه مطلب را بفهمد. Author Box را با اطلاعات واقعی پر کنید؛ توضیح کلی و پرطمطراق درباره «تیم متخصص» جای مشخص‌کردن مسئول محتوا را نمی‌گیرد. اگر مطلب نظر یا تجربه است، آن را با داده پژوهشی یا خبر قطعی مخلوط نکنید.
CMS باید به نویسنده اجازه بدهد عنوان‌های ساختاری، خلاصه، تصاویر، متن جایگزین و لینک‌ها را درست وارد کند. اگر ویرایشگر فقط یک فضای آزاد بدون قرارداد باشد، هر مقاله ممکن است ساختار متفاوتی پیدا کند. قالب‌ها و نقش‌های متنی مشترک بسازید، اما آزادی لازم برای نوع‌های متفاوت محتوا را نگه دارید.
برای بازبینی، مسئول و دلیل مشخص داشته باشید: تغییر نسخه ابزار، قدیمی‌شدن منبع یا پیدا شدن خطای واقعی. تاریخ را فقط وقتی تغییر دهید که بازبینی معناداری انجام شده باشد. کیفیت مجموعه محتوا به نگهداری آن وابسته است؛ افزودن مقاله جدید بدون رسیدگی به راهنمای قدیمی می‌تواند پاسخ‌های متناقض بسازد.
سرعت و شاخص‌ها را با هدف صفحه هماهنگ کنید
تصویر بزرگ، فونت‌های متعدد و اسکریپت‌های جانبی می‌توانند تجربه مطالعه را تحت تأثیر قرار دهند. منابع ضروری را از عناصر اختیاری جدا کنید و اثرشان را با گزارش مناسب ببینید. راهنمای PageSpeed Insights تفاوت داده واقعی و آزمایشگاهی را توضیح می‌دهد. یک امتیاز خوب به‌تنهایی ثابت نمی‌کند محتوا مفید یا پیمایش روشن است.
زمان حضور بیشتر همیشه موفقیت نیست؛ ممکن است خواننده نتوانسته پاسخ را پیدا کند. کوتاه‌بودن بازدید هم الزاماً شکست نیست؛ شاید پاسخ روشن بوده است. بر اساس هدف مقاله، پیدا شدن پاسخ، استفاده از لینک مرتبط یا تکمیل اقدام معنادار را کنار داده‌های رفتاری ببینید. درباره مدت مطالعه نیز برچسب تخمینی بدهید، نه وعده دقیق برای همه افراد.
برای شروع پروژه، چند نمونه واقعی از انواع محتوا طراحی کنید: مقاله کوتاه، راهنمای بلند، مطلب تصویری و متن فنی. آن‌ها را با عنوان‌های بلند، صفحه کوچک و وضعیت بدون نتیجه ببینید. طراحی سایت محتوایی زمانی کامل‌تر می‌شود که خواننده موضوع را پیدا کند، متن را بفهمد و در صورت نیاز، قدم بعدی مرتبطی پیش رویش داشته باشد.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!