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

برای همین یکی از خبرگزاری های بزرگ ایران یعنی خبرگزاری فارس رو بررسی می کنیم که میلیون ها بازدید ماهانه دارد با رتبه 11 ایران و 877 دنیا .

ابتدا بخش اصلی سایت یعنی بالای سایت رو بررسی می کنیم .همون بخشی که هنگام باز کردن سایت توسط کاربر به اون نشون داده میشه (بدون اسکرول به پایین)

نقطه اتکا

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

عدم استفاده مناسب از تصویر

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

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

به علاوه منظور از عکس حتما استفاده از اسلایدر نیست بلکه تصویری مستند که احساس واقعی خبر را در نگاه اول القا کند

تاپیوگرافی بی تایپوگرافی

امروزه تایپوگرافی یکی از علوم بسیار مهم در طراحی وب سایت ها و گرافیک است . زیرا کمتر سایتی است که متن نداشته باشد و در سایتی که متن هست پس باید تایپوگرافی مناسب هم رعایت شود . البته در چند سال گذشته موجی در سایت های ایرانی به راه افتاد و همه از فونت های فارسی مثل فونت سایت بی بی سی یا فونت Mitra , B Nazanin و … شبیه اون استفاده می کنند و البته هنوز هم ادامه دارد . به طوریکه منوی اکثر سایت ها تقریبا با یک نوع فونت هست .(مثلا این، این ، این یا این) این یک قدم مثبت در فاصله گرفتن از Arial و Tahoma بود ولی قدم بعدی می تواند بهبود تایپوگرافی سایت باشد زیرا تغییر فونت یک سایت به معنی تایپوگرافی درست نیست و عوامل زیادی مانند رابطه اندازه فونت عناصر مختلف با هم نیز در یک تایپوگرافی درست دخیل هستند . به طور نمونه خیلی از طراحان از نسبت طلایی (Golden Rate) برای سایز بندی فونت های یک سایت استفاده می کنند . برای اینکار می توانید از این سایت استفاده کنید  : Type Scale

فضای سفید

یکی دیگر از مباحث مهم در طراحی کاربرپسند استفاده مناسب از فضای سفید یا فضای خالی (White Space) است . زیرا این فضا به چشم کاربر اجازه می دهد استراحت کند و سپس سراغ بخش های بعدی سایت برود . این مهم نیز در فارس نیوز زیاد رعایت نشده است و مثل اکثر خبرگزاری های ایرانی با انبوهی از متن به هم فشرده رو به رو هستیم . البته باید گفت این موضوع کمی به سلیقه مخاطبان ایرانی نیز باز می گردد . من زیاد شنیدم که کاربران ، محتوای شلوغ و فشرده سایت ها را به حساب غنی و پربار بودن می گذارند و حتی مشتریان از طراحی خلوت به اسم سایت کچل نام می برند ولی واقعیت چیز دیگریست به طراحان پیشنهاد می کنم در کنار سلیقه قدیمی کاربران ، به فکر به روز کردن آن و استفاده از تکنیک های جدید نیز باشند .

چه بسیار سایت هایی که پر از محتوا هستند ولی با طراحی خلوت و خلاصه و ساده (مخصوصا در صفحه اصلی سایت) بهترین استفاده را از فضاهای خالی می کنند . بهترین نمونه Google است . اگه کسی از فضاهای خالی آن ناراحت است بگه ! البته منظور از فضای سفید فضایی به رنگ سفید نیست بلکه منظور ایجاد فضایی خالی برای کمک به تمرکز و راحتی بیننده است حالا این فضا می تواند سیاه باشد و یا یک عکس مات در پس زمینه . یک نمونه خوب تصویر زیر از سایت مجله theAtlantic است

تبلیغات

تبلیغات خوب است ولی نه تا حدی که مجبور باشیم از ابزارهایی برای مبارزه با آن استفاده کنیم . متاسفانه در وب سایت فارس نیوز (مثل اکثر خبرگزاری های ایرانی یکم کمتر) شاهد انواع تبلیغات فلش متحرک هستیم که دو عیب مهم برای بیننده دارند :

1. حجم صفحه رو بالاتر می برند و در نتیجه هزینه پهنای باند کاربر بالاتر می ره (اگر مرورگر کش نکند)
2. از زیبایی سایت کم می کنند و دشمن فضاهای سفید هستند

همونطور که می دونید سایز اکثر این تبلیغات که فلش هستند بالاست و این مخصوصا در موبایل ها با تعرفه های فضایی اینترنت ، اصلا به صرفه نیست . به عنوان مثال به جزئیات بنر های فلش فارس نیوز دقت کنید :

در این تصویر همه فایل های موجود در قالب سایت فارس نیوز برحسب اندازه فایل از بیشترین به کمترین مرتب شده اند . همونطور که می بینید بیشترین فایل های حجیم مربوط به فایل های تبلیغاتی از نوع فلش هستند که حجم کلی آنها 355 کیلوبایت می شود. اگر خبرگزاری های دیگر ایرانی رو بررسی کنیم وضع بعضی هاشون از نظر تعداد بنر خیلی بدتر از فارس نیوز هست .

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

سبک خبری هرم به جای هرم وارونه

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

در فرهنگ روزنامه‌نگاری و ارتباطات، هرمِ وارونه (به انگلیسی: Inverted Pyramid) یکی از سبک‌های خبری است. در سبک هرم وارونه، مهم‌ترین اطلاعات در قالب لید عرضه شده، و سپس به تدریج تا انتهای خبر از ارزش اطلاعات کاسته می‌شود. به عبارت دیگر، اصلی‌ترین بخش مطالب در بند اول خبر ذکر می‌شوند تا مخاطب بلافاصله در جریان عناصر اصلی خبر قرار بگیرد.

به عنوان یک خواننده خبر ، این سبک مزیت هایی برای من دارد که در ذیل آمده است :

• در لید، چکیدهٔ مهمترین مطالب ارائه می‌شود؛
• از نظر خواننده، زمان کمتری برای دریافت مهمترین مطالب لازم است؛
• خواننده را خسته نمی‌کند؛
• حس کنجکاوی خواننده را از جنبه نیاز خبری، فوراً ارضا می‌کند؛
• متن خبر بر پایهٔ ارزش مطالب تنظیم می‌شود؛
• خواننده را به خواندن خبر ترغیب می‌کند؛
• از لحاظ تصحیح، تیترنویسی و ماکت‌بندی، کار را ساده‌تر می‌کند؛

به خبر زیر در فارس نیوز دقت کنید :

بر خلاف سبک هرم وارونه که بیننده را در سریع ترین زمان ممکن به اصل خبر می رساند ، در اینجا مجبوریم کلی توضیح و تفصیل نویسنده را بخوانیم و در آخر به بخش اصلی برسیم . یعنی یک هرم وارونه ی وارونه !

CSS Sprite ام آرزوست

سایت فارس نیوز اخیرا بازطراحی شده (بیشتر اسکلت اش) و با Bootstrap ایجاد شده است . البته همین که جوری کار کردند که در نگاه اول نشه تشخیص داد بوت استرپ هست کار جالبی انجام دادند . ولی کاش روی بهینه سازی عکس ها هم کمی کار می شد . یکی از اصول اولیه این کار تجمیع همه عکس های ثابتی هست که در قالب همیشه مورد استفاده قرار می گیرد . مثل دکمه جستجو ، آیکن ها و … . به این تکنیک Css Sprite گفته میشه و باعث میشه علاوه بر کاهش تعداد درخواست ها به سرور ، همه تصاویر سایت یکجا لود بشوند و نه کم کم . (ساخت css sprite فارسی)

همونطور که می بینید بیشترین درخواست ها به سرور برای تصاویر صورت می گیرد که با تجمیع تصاویر ثابت می شود تا حد خوبی این تعداد رو کمتر کرد .

تا اینجا سعی کردیم بعضی از نکات مهم که از نظر فنی به ذهنم می رسید رو بگم . جزئیات بیشتر مثل نحوه استفاده از سیستم های Sharing ، کدهای css و … هم هست که برای طولانی نشدن مطلب صرف نظر می کنیم و می زاریم برای وقتی دیگر .

در ادامه بخش هایی رو که به نظر اضافی می رسند مشخص می کنیم :

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

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

علی زمانی