أفضل الممارسات لتصميم موقع إخباري إجتماعي
كيف يمكنك الحصول على الأخبار اليومية الخاصة بك في هذه الأيام؟ حسنًا ... قد تزور مواقع الويب والمدونات المفضلة لديك ، ولكن هذا غير فعال لأن تلك المدونات قد لا تكون لديها أي تحديثات. ربما يمكنك الاشتراك فيها باستخدام خدمة RSS ، والتي توفر لك جميع المقالات الجديدة مباشرةً ، ولكن في هذه الحالة ، سيكون عليك فرز كل الأشياء الجديدة للعثور على ما يثير اهتمامك. خيار آخر اليوم هو زيارة موقع الأخبار الاجتماعية .
مواقع الأخبار الاجتماعية هي مواقع تجميع روابط ، مما يعني أن وظيفتها الرئيسية هي جمع ومشاركة الروابط الشيقة. قد يتم ذلك من خلال عمليات إرسال المستخدم ، أو قد يتم إجراؤها تلقائيًا بواسطة النظام. يمثل جانب التجميع جزءًا منه فقط لأن هذه المواقع تقوم أيضًا بفرز الارتباطات. مرة أخرى ، يمكن القيام بذلك من خلال تصويت المستخدم أو بعض الخوارزميات الميكانيكية (على الرغم من أنه في هذه الحالة ، هل يمكننا أن نسميها بالفعل موقع إخباري "اجتماعي"؟). النتيجة النهائية هي نفسها: ترتفع الروابط الأكثر إثارة للاهتمام إلى القمة . تجعل هذه الميزة الخاصة مواقع الأخبار الاجتماعية بديلاً رائعاً لـ RSS.
في هذه المقالة سأعرض بعضًا من أهم مواقع الأخبار الاجتماعية الحالية ، وسوف نحدد الاتجاهات والأنماط في تصاميمها ونقترح عليك بعض أفضل الممارسات التي يجب اتباعها عند تصميم مثل هذه المواقع. دعونا نبدأ بالاطلاع على أربعة مواقع أخبار اجتماعية شعبية ونرى كيف تقارن تصميماتهم.
يسو
Digg هو الموقع الإخباري الاجتماعي الأكثر شعبية ويتميز بتصميم قابل للاستخدام والذي يتم تكييفه في كثير من الأحيان من قبل العديد من منافسيها. يستخدم Digg تخطيط عمودين : قائمة من القصص على اليسار ، بالإضافة إلى أشياء إضافية على اليمين ، مثل مربع أعلى 10 قصص. في الأعلى ، يعرض Digg قائمة بفئات القصص ، وتحت ضوابط الفرز. لذلك ، يمكن للمستخدم تحديد فئة ، مثلاً ... "التكنولوجيا" ، ثم ترتيبها حسب "المرتقب" للاطلاع على أحدث التقديمات.
المروحة
المروحة هي مثال جيد على موقع يتبع تخطيط Digg عن قرب. إنه تخطيط عمودين مع قائمة من القصص على اليسار والمحتوى الثانوي على اليمين ، مثل أحدث التغريدات حول المروحة أو قائمة بأكثر القصص التي تم التعليق عليها.
بخلاف Digg ، يستخدم المروحة فواصل الخطوط الأفقية بين كل من القصص ، بالإضافة إلى خلفية مخططة من zebra لتسهيل مسح القائمة. هذا قد يساعد ، على الرغم من أنني يجب أن أشير إلى أن مخطط حمار وحشي يستخدم تقليديا لتسهيل القراءة على جداول الأعمدة المتعددة ، وخاصة تلك التي تحتوي على العديد من الأعمدة. هذا لأنك ترغب في قراءة جزء من البيانات في عمود بعيد عن الملصق الأصلي على اليسار واستخدام شريط زيبرا كدليل يساعدك على تحريك العين دون أن تفقد مسار الصف . في سياق المروحة ، التي تحتوي على عمود بيانات واحد فقط ، فإن تأثير مخطط حمار وحشي هو أمر مشكوك فيه.
رديت
Reddit هو مثال لتصميم مختلف عن Digg. يركز Reddit بشكل كبير على المحتوى ، لا سيما العناوين الرئيسية. التركيز قوي لدرجة أن كل شيء ما عدا العناوين الرئيسية يتم تصغيره وإبعاده ليترك القصص تأخذ المقعد الأمامي. يسمح هذا التصميم البسيط باستهلاك معلومات سريع للغاية حيث يستطيع الزائر بسرعة مسح الكثير من العناوين الرئيسية للعثور على قصة مثيرة للاهتمام بالنسبة له. نظرًا لعدم احتواء Reddit على حقول وصف ، تستهلك كل قصة مساحة أقل ، وبالتالي يمكن عرض المزيد من القصص على الشاشة .
يحتوي Reddit أيضًا على عنصر فريد في الجزء العلوي من الصفحة الأولى: قصة عشوائية قادمة. كما هو الحال في مواقع الأخبار الاجتماعية الأخرى ، يتم الاحتفاظ بأحدث قصص Reddit في قسم "القادم". نظرًا لأن هذا القسم يحصل على عدد أقل من الزيارات من الصفحة الأولى ، فقد يتم فقد بعض الأخبار المثيرة للاهتمام. لعلاج هذا ، يعرض Reddit قصصًا عشوائية قادمة على الصفحة الأمامية لمنحهم فترة قصيرة من التعرض يمكن أن تساعد في دفعهم إلى الأعلى.
نتسكب
Newsvine يأخذ نهجا مختلفا في تصميمها. على عكس المواقع الإخبارية الاجتماعية الأخرى التي تبدو كقائمة عناوين ، تستخدم Newsvine مظهر المجلة / الصحيفة . ترافق القصص صورة وصف كبيرة ، وفي بعض الحالات ، يمكن أيضًا العثور على محتوى القصة في صفحة التفاصيل / التعليقات.
أحد العناصر المثيرة للاهتمام في Newsvine هو خريطة التأثير الحراري:
يعرض المخطط خطين: أكثر القصص التي تم التصويت عليها والقصص الأكثر مناقشة. كل عرض مجموعة من الكتل ، وجميع الألوان والأحجام المختلفة. تعني الكتل الأكبر أن هناك المزيد من التعليقات عليها أو المزيد من الأصوات ، اعتمادًا على الرسم البياني الموجود بها. يشير اللون إلى عمر القصة - الأخضر طازجًا ، والأحمر قديمًا. يتيح هذا التصور طريقة فريدة لتصفح المحتوى على Newsvine .
الآن دعونا نلقي نظرة على بعض عناصر الواجهة الشائعة الموجودة على مواقع الأخبار الاجتماعية:
صناديق التصويت
جميع مواقع الأخبار الاجتماعية لديها بعض الطرق للتصويت على المقالات ، باستثناء المواقع التي تستخدم خوارزميات الفرز الآلي لوضع الرتب. هذا يجعل مجال التصويت مهم جدا. وتريد أن تلتزم بما يكفي لضمان ألا يفوتها الناس ، ولكن في الوقت نفسه ، تحتاج إلى جعلها تتلاشى بشكل جيد في تصميم الواجهة للتأكد من أنها لا تشتت انتباهك عند فحص قوائم العناوين .
فيما يلي بعض الأمثلة على صناديق التصويت الخاصة بمواقع الأخبار الشهيرة:
ويتكون كل صندوق من أربعة عناصر كحد أقصى : مرتبة التقديم ، ومجموع الأصوات ، ورابط لتصوير القصة ورابط لتصوير القصة . معظم المواقع لا تظهر الرتبة وتعرض فقط مجموع الدرجات - أي ، تم إضافة كل من الأصوات الإيجابية والسلبية. بالحديث عن الأصوات ، فإن معظم مواقع الأخبار الاجتماعية لديها طريقة لتصوير قصة إلى أسفل وكذلك على الرغم من أن البعض يختارون فقط زر واحد. في الحالات التي يظهر فيها الزر لأعلى فقط ، يتم عادة تقديم رابط إلى "دفن" (أو التصويت لأسفل) قصة في مكان آخر.
تفاصيل القصة
تحتوي كل قصة على أكثر من مجرد عنوان رئيسي لتلحق بها. تعرض القصص عمومًا تاريخها ، والمستخدم الذي نشرها ، ووصفًا موجزًا ، ورابطًا إلى قسم التعليقات وربما صورة أيضًا.
في ما يلي بعض الأمثلة على منطقة تفاصيل إرسال المواقع الإخبارية الشهيرة:
يقع مربع التصويت غالبًا على اليسار. هذا يسمح لها بالبقاء في موقع ثابت لكل قصة. يتم وضع رابط التعليقات ، بالإضافة إلى أي إضافات أخرى مثل "مشاركة هذه القصة" أسفل الوصف (إذا كان موجودًا) أو العنوان الرئيسي. من خلال جعل نص التفاصيل حول العنوان الرمادي يتلاشى التفاصيل ويعطي التركيز على العناوين الرئيسية ، مما يجعل مسح قائمة القصص أسهل بكثير حيث يمكن أن تقفز أعيننا بسرعة من واحدة إلى أخرى.
تعرض معظم مواقع الأخبار الاجتماعية الوقت كنسبية - على سبيل المثال قبل 10 ساعات. هذا أمر منطقي لأن الأشخاص يريدون معرفة مدى حداثة القصة ولا يهتمون بشكل خاص بالتاريخ والوقت المحددين عندما تم نشرها.
ستلاحظ أيضًا أن بعض المواقع تعرض النطاق حيث يؤدي رابط الإرسال إلى جانب عنوانه ، وعادةً ما يكون بعد ذلك بين قوسين. هذا مفيد لأنه يسمح للزوار بالحكم على نوع المحتوى الذي يجب أن يتوقعوه . على سبيل المثال ، إذا رأوا "youtube.com" كمصدر ، فسيعرفون أنه مقطع فيديو. يمكن أن تكون المصادر البارزة مثل 'nytimes.com' أيضًا مؤشرًا لجودة القصة وطولها. في حين أن المستخدم سوف يكون قادرا على رؤية المصدر أثناء تحومه فوق ارتباط ، فإن عرضه في جميع الأوقات يساعد على سرعة مسح العناوين.
ترقيم الصفحات
مواقع الأخبار الاجتماعية لديها الآلاف ، أو في بعض الحالات الملايين ، من الروابط المقدمة من قبل المستخدم. عرض كل هذه الروابط دفعة واحدة أمر مستحيل بالطبع. يجب عليك إظهار مجموعة صغيرة في كل مرة للسماح للمستخدمين بهضمها . عادةً ما يتم تقسيم الروابط إلى صفحات باستخدام ترقيم الصفحات . ترقيم الصفحات هو طريقة تقسيم المحتوى إلى عدة صفحات وتوفير مجموعة من الارتباطات التي تراها عادةً في أسفل أو أعلى الصفحة التي تسمح لك بالانتقال إلى الصفحة التالية أو السابقة ، أو اختيار رقم الصفحة الذي تريده يدويًا.
في ما يلي بعض الأمثلة على ترقيم صفحات المواقع الإخبارية الشائعة:
هناك بالطبع بدائل لترقيم الصفحات. يعرض Reddit فقط روابط الصفحات التالية والسابقة:
تجعل هذه الطريقة التنقل أبسط من حيث أنه لا يجب عليك التفكير في الصفحة التي تريدها أو تحتاج إلى تحديد موقع الرابط "التالي" - هناك ارتباطان فقط ، لذلك معظم الوقت الذي تريده فقط الصفحة التالية. بعد قول ذلك ، يجعل الأمر مربكًا بعض الشيء في بعض الأحيان لأنه من الصعب تحديد الصفحة التي تتصفحها.
Slashdot يحمل المزيد من القصص عند الطلب. ما عليك سوى النقر على الزر "المزيد" وتحميل المزيد من الأخبار أدناه باستخدام AJAX:
سيؤدي تحميل الأشياء باستخدام AJAX إلى عدم وجود "الصفحة الأولى" على الرغم من وجود قصص في الأعلى وقصص في الجزء السفلي.
بغض النظر عن الحدود الفاصلة للصفحات التي تختارها ، هناك بعض الأشياء التي يجب أن تضعها في اعتبارك للتأكد من جعل عنصر الواجهة هذا قابلاً للاستخدام. يجب أن تكون مناطق النقرات كبيرة - لا تكتفي بتقديم قائمة بالارتباطات ، بل يمكنك إضافة سمة padding CSS لكل رابط لتسهيل النقر عليه. حدد الصفحة الحالية بوضوح مع التصميم المخصص - يحتاج المستخدمون إلى معرفة مكانهم الآن. أخيرًا ، قم بتوفير روابط "سابقة" و "تالية" . في معظم الأوقات ، يرغب زوارك في تصفح القصص على الصفحة التالية ، لذلك من خلال إنشاء هذه الروابط ، فإنك تأخذ أي تفكير ينطوي عليه تحديد تلك الصفحة التالية.
تعليقات
البند النهائي سأفحص التعليقات. تعتبر التعليقات عنصرًا مهمًا في مواقع الأخبار الاجتماعية لأنها تسمح بنقاشات حول كل قصة. قد لا يحتوي موقع الويب الذي يشير إليه رابط المجموعة النصية على وظيفة التعليقات ، لذا فإن قسم التعليقات في مواقع الأخبار الاجتماعية يعمل كمنصة للمناقشة .
إليك ما تبدو عليه التعليقات على Digg:
يمكن التصويت على التعليقات ، تمامًا مثل القصص الفردية. توجد عناصر التحكم في التصويت على يمين كل تعليق ، كإبداء الإعجاب أو الإبهام. تطفو أعلى التعليقات المصنفة إلى أعلى القائمة ، مما يعني أن المناقشة ذات الجودة الأعلى ستكون دائمًا في القمة ، وأي تعليقات لا قيمة لها سيتم التصويت عليها.
هناك ميزة أخرى يوفرها Digg لجعل التعليقات أفضل: خيوط. يمكن لكل تعليق بدء خيط خاص به إذا قمت بالرد عليه . هذه السلاسل هي "مطوية" ، ولكن يمكنك فتحها باستخدام رابط الردود الصغيرة في أسفل تعليق الموضوع. بعد ذلك يتم تخزين جميع الردود تحت التعليق الرئيسي ويمكن أيضًا التصويت عليها لأعلى أو لأسفل. هذا يسمح لردود مثيرة للاهتمام لتفرخ مناقشاتهم الخاصة.
إليك ما تبدو عليه تعليقات Reddit:
ميزات مماثلة هنا: التصويت والخيوط. يتم وضع ضوابط التصويت على يسار كل تعليق وتبدو مثل الأسهم ، صعوداً ونزولاً. يسمح Reddit بالخيوط العميقة ، مما يعني أن الردود على التعليق يمكن أيضًا أن تحمل مجموعاتهم الخاصة من الردود المرتبطة بهم فقط . في الواقع ، يخلق هذا شجرة من التعليقات حيث أن العديد من التعليقات الفردية تفرخ الفروع والفروع الفرعية للردود.
أخيرا ، دعونا نرى تعليقات Newsvine:
يتبع Newsvine نفس بنية Digg - كل تعليق قادر على استضافة مجموعة من الردود ، ولكن الردود نفسها لا يمكنها استضافة المزيد من الردود. هذا يحافظ على النظرة النظيفة ولكن المناقشة تصبح أكثر جمودا ، سواء كان ذلك أمرا جيدا أم لا يعتمد على مقدار الحرية التي تريد رؤيتها في مناقشاتك.
المظهر المرئي مختلف قليلاً. بدلاً من إضافة هامش الأيسر لكل تعليق ، يتم تغليف تعليقات Newsvine في المربعات. يتم أيضًا تضمين الردود في المربعات ويتم وضعها داخل المربع الأصلي. وهذا يوفر مؤشر واضح للعلاقة. يسمح Newsvine أيضًا بالتصويت فقط على تعليقات الوالدين.
أعتقد أن هذين العنصرين ، التعليق والتصويت والتعليق ، هي المكونات الأساسية التي تحتاج إليها لتسهيل المناقشات الجيدة على مواقع الأخبار الاجتماعية. يعمل التصويت مثل فلتر لإزالة أي تعليقات منخفضة القيمة أو تعليقات غير مرغوب فيها من الأعلى ، بل وإزالتها تمامًا (تخفي بعض المواقع التعليقات ذات النقاط السلبية) ؛ والخيوط تسمح للمناقشة أن تنحرف في مجالات الاهتمام المختلفة. المزيد من مجالات المناقشة تعني المزيد من الأشياء للحديث عنها ومزيد من التعليقات - وهو أمر لن يتمكن هيكل طبقة واحدة جامدة من توفيره.
مكتوبة حصرا ل WDD من قبل ديمتري Fadeyev. يدير بلوق على سهولة الاستخدام ودعا مشاركة قابلية الاستخدام .
هل تستخدم مواقع الأخبار الاجتماعية حاليًا للحصول على الجرعة اليومية من الأخبار ، وإذا لم يكن الأمر كذلك ، فلماذا لا؟ هل هناك أشياء يمكنك تحسينها أو ميزات تضيفها إلى مثل هذه المواقع؟