بهترین روش ها برای طراحی وب سایت اخبار اجتماعی

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

سایت های خبری اجتماعی جمع آوری کننده لینک هستند، به این معنی که وظیفه اصلی آنها جمع آوری و اشتراک گذاری لینک های جالب است. این ممکن است از طریق ارسال کاربر انجام شود، یا ممکن است به طور خودکار توسط سیستم انجام شود. جنبه تجمیع تنها بخشی از آن است زیرا این سایت ها پیوندها را نیز مرتب می کنند. باز هم، این ممکن است از طریق رای دادن کاربر یا برخی از الگوریتم‌های مکانیکی انجام شود (اگرچه در این مورد، آیا واقعاً می‌توانیم آن را یک سایت خبری «اجتماعی» بنامیم؟). با این حال، نتیجه نهایی یکسان است: جالب ترین پیوندها به بالاترین سطح می رسند. این ویژگی خاص، سایت های خبری اجتماعی را جایگزینی عالی برای RSS می کند.

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

 

Digg

Digg محبوب ترین سایت خبری اجتماعی است و دارای طراحی قابل استفاده است که اغلب توسط بسیاری از رقبای آن اقتباس می شود. Digg از طرح‌بندی دو ستونی استفاده می‌کند: فهرستی از داستان‌ها در سمت چپ، و موارد اضافی در سمت راست، مانند کادر 10 داستان برتر. در بالا، Digg فهرستی از دسته‌های داستان و دقیقاً در زیر آن‌ها کنترل‌های مرتب‌سازی را نشان می‌دهد. بنابراین کاربر می‌تواند یک دسته را انتخاب کند، مثلاً… «فناوری»، و سپس آن را بر اساس «آینده» مرتب کند تا همه آخرین ارسال‌ها را ببیند.

 

ملخ

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

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

 

Reddit

Reddit نمونه ای از طراحی متفاوت از دیگ است. Reddit تمرکز زیادی روی محتوا، به‌ویژه سرفصل‌ها دارد. تمرکز آنقدر قوی است که همه چیز جدا از سرفصل‌ها به حداقل می‌رسد و از آن دور می‌شود تا داستان‌ها در صندلی جلو قرار گیرند. این طراحی مینیمالیستی امکان مصرف بسیار سریع اطلاعات را فراهم می کند زیرا بازدیدکننده می تواند سریعاً عناوین زیادی را اسکن کند تا داستانی را که برای آنها جالب است بیابد. از آنجایی که Reddit هیچ فیلد توضیحی ندارد، هر داستان فضای کمتری را اشغال می‌کند، بنابراین داستان‌های بیشتری را می‌توان روی صفحه نمایش داد.

Reddit همچنین یک عنصر منحصر به فرد در بالای صفحه اول دارد: یک داستان تصادفی آینده. مانند سایر سایت های خبری اجتماعی، آخرین داستان های Reddit در بخش “آینده” نگهداری می شوند. از آنجایی که این بخش ترافیک کمتری نسبت به صفحه اول دارد، ممکن است برخی از داستان های جالب از بین بروند. برای رفع این مشکل، Reddit داستان‌های تصادفی آینده را در صفحه اول نشان می‌دهد تا لحظه کوتاهی از قرار گرفتن در معرض را به آنها ارائه دهد که به طور بالقوه می‌تواند به رساندن آنها به بالاترین سطح کمک کند.

 

Newsvine

Newsvine رویکرد متفاوتی در طراحی خود دارد. برخلاف سایر سایت‌های خبری اجتماعی که شبیه فهرستی از سرفصل‌ها هستند، Newsvine از نمای مجله/روزنامه استفاده می‌کند. داستان ها با یک عکس و توضیحات بزرگ همراه هستند و در برخی موارد محتوای داستان را می توان در صفحه جزئیات / نظرات آن نیز یافت.

یکی از عناصر جالب Newsvine، نقشه حرارتی تاثیر است:

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

اکنون اجازه دهید به برخی از عناصر رابط رایج موجود در وب سایت های خبری اجتماعی نگاهی بیندازیم:

 

صندوق های رأی

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

در اینجا چند نمونه از صندوق‌های رأی سایت‌های خبری محبوب آورده شده است:

هر کادر حداکثر از چهار عنصر تشکیل شده است: رتبه ارسال، مجموع آرا، پیوندی برای رای دادن به داستان و پیوندی برای رای دادن به داستان. بیشتر سایت‌ها رتبه را نشان نمی‌دهند و فقط مجموع امتیازات را نشان می‌دهند – یعنی هم آرای مثبت و هم آرای منفی جمع می‌شوند. در مورد رای صحبت کردن، اکثر سایت‌های خبری اجتماعی راهی برای رای دادن به یک داستان پایین و بالا دارند، اگرچه برخی انتخاب می‌کنند که فقط دکمه one up را داشته باشند. در مواردی که فقط دکمه بالا نشان داده می‌شود، معمولاً پیوندی برای «دفن کردن» (یا رأی منفی) یک داستان در جای دیگری ارائه می‌شود.

 

جزئیات داستان

هر داستان چیزی بیش از یک تیتر دارد. استوری ها عموماً تاریخ خود، کاربری که آنها را پست کرده است، توضیح مختصری، پیوندی به بخش نظرات و شاید حتی یک عکس را نشان می دهند.

در اینجا چند نمونه از قسمت جزئیات ارسال سایت های خبری محبوب آورده شده است:

جعبه رأی اغلب در سمت چپ قرار دارد. این به آن اجازه می دهد تا در یک مکان ثابت برای هر داستان باقی بماند. پیوند نظرات، و همچنین سایر موارد اضافی مانند “به اشتراک گذاری این داستان” در زیر توضیحات (در صورت وجود) یا عنوان قرار داده شده است. با خاکستری کردن متن جزئیات در اطراف تیتر، جزئیات محو می‌شوند و به تیترها تمرکز می‌کنند، بنابراین اسکن فهرست داستان‌ها را بسیار آسان‌تر می‌کند زیرا چشمان ما می‌توانند به سرعت از یکی به دیگری بپرند.

اکثر سایت‌های خبری اجتماعی زمان را به‌عنوان نسبی نشان می‌دهند – به عنوان مثال. 10 ساعت پیش. این منطقی است زیرا مردم می‌خواهند ببینند یک داستان چقدر تازه است و علاقه خاصی به تاریخ و زمان دقیق ارسال آن ندارند.

همچنین متوجه خواهید شد که برخی از سایت‌ها دامنه‌ای را که پیوند ارسال به آن منتهی می‌شود، در کنار عنوان آن، معمولاً بعد از آن در پرانتز نشان می‌دهند. این مفید است زیرا به بازدیدکنندگان اجازه می‌دهد قضاوت کنند که چه نوع محتوایی را باید انتظار داشته باشند. برای مثال، اگر «youtube.com» را به‌عنوان منبع ببینند، می‌دانند که یک ویدیو است. منابع برجسته ای مانند ‘nytimes.com’ نیز می توانند نشانگر کیفیت و طول داستان باشند. در حالی که کاربر می‌تواند منبع را در حالی که ماوس را روی پیوند قرار می‌دهد ببیند، نمایش آن همیشه در اسکن سریع سرفصل‌ها کمک می‌کند.

 

صفحه بندی

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

در اینجا چند نمونه از صفحه بندی سایت های خبری محبوب آورده شده است:

البته جایگزین هایی برای صفحه بندی وجود دارد. Reddit فقط پیوندهای صفحه بعدی و قبلی را نشان می دهد:

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

Slashdot داستان های بیشتری را در صورت تقاضا بارگیری می کند. فقط روی دکمه “بیشتر” کلیک کنید و داستان های بیشتری در زیر با استفاده از AJAX بارگذاری می شوند:

بارگیری چیزها با AJAX به این معنی است که “صفحه اول” وجود ندارد، فقط داستان در بالا و داستان در پایین وجود دارد.

هر صفحه‌بندی را که انتخاب می‌کنید، چند نکته وجود دارد که باید به خاطر داشته باشید تا مطمئن شوید که این عنصر رابط را قابل استفاده می‌کنید. مناطق کلیک باید بزرگ باشند – فقط فهرستی از پیوندها را ارائه نکنید، بلکه یک ویژگی CSS padding را به هر پیوند اضافه کنید تا کلیک کردن روی آن آسان‌تر شود. صفحه فعلی را به وضوح مشخص کنید با استایل سفارشی – کاربران شما باید بدانند در حال حاضر کجا هستند. در نهایت، پیوندهای «قبلی» و «بعدی» را ارائه دهید. بیشتر اوقات بازدیدکنندگان شما مایلند داستان‌های صفحه بعدی را مرور کنند، بنابراین با ایجاد این پیوندها، هر گونه فکری را که در تعیین مکان صفحه بعدی وجود دارد، از بین می‌برید.

 

نظرات

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

نظرات در Digg به این صورت است:

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

ویژگی دیگری وجود دارد که Digg برای بهتر کردن نظرات ارائه می‌کند: رشته‌بندی. اگر شما به آن پاسخ دهید، هر نظر می‌تواند موضوعی را برای خود شروع کند. این رشته‌ها «جمع شده» هستند، اما می‌توانید با استفاده از پیوند پاسخ‌های کوچک در پایین نظر موضوع، آن را باز کنید. سپس همه پاسخ‌ها در زیر نظر والد ذخیره می‌شوند و همچنین می‌توان به بالا یا پایین رأی داد. این به پاسخ های جالب اجازه می دهد تا بحث های خود را ایجاد کنند.

نظرات Reddit به این صورت است:

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

در نهایت، اجازه دهید نظرات Newsvine را ببینیم:

Newsvine با همان ساختار Digg پیش می رود – هر نظر می تواند مجموعه ای از پاسخ ها را میزبانی کند، اما خود پاسخ ها نمی توانند پاسخ های بیشتری را میزبانی کنند. این منظره را تمیز نگه می‌دارد، اما بحث کمی سخت‌تر می‌شود، اینکه آیا این چیز خوبی است یا نه بستگی به میزان آزادی‌ای دارد که می‌خواهید در بحث‌هایتان ببینید.

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

من فکر می‌کنم که دو عنصر، رأی‌گیری نظر و ارسال نظر، مواد ضروری هستند که برای تسهیل بحث‌های خوبدر سایت‌های خبری اجتماعی به آنها نیاز دارید. رای گیری مانند فیلتری عمل می کند تا هر نظر کم ارزش یا هرزنامه را از بالا حذف کند و حتی آنها را به طور کلی حذف کند (برخی از سایت ها نظرات دارای امتیاز منفی را پنهان می کنند). و threading اجازه می دهد تا بحث به حوزه های مختلف مورد علاقه منحرف شود. مناطق بحث بیشتر به معنای چیزهای بیشتری برای صحبت و نظرات بیشتر است – چیزی که ساختار یک لایه سفت و سخت قادر به ارائه آن نیست.

نوشته شده به طور انحصاری برای WDD توسط دیمیتری فادیف. او وبلاگی در زمینه قابلیت استفاده به نام پست قابلیت استفاده دارد.

آیا در حال حاضر از سایت های خبری اجتماعی برای دریافت اخبار روزانه خود استفاده می کنید و اگر نه، چرا که نه؟ آیا چیزهایی وجود دارد که می‌توانید بهبود ببخشید، یا ویژگی‌هایی وجود دارد که به چنین سایت‌هایی اضافه کنید؟