تصميم موقع CNN الجديد تم تفكيكه
يوم الاثنين ، 26 أكتوبر ، CNN.com قدم تصميم موقع جديد ، مما يجعل عددًا من التغييرات الرئيسية في تخطيط المعلومات الثقيلة.
التصميم الجديد جميل ، نظيف ، منظم ومنظم جيدًا. ويدعو العين إلى البحث والعثور على شيء مثير للاهتمام بهدف النقر من خلال صفحة أخرى.
التصميم السابق كان مشوشًا إلى حدٍ ما وغير جذاب جدًا. بدا المحتوى يحب أن يتم إجباره على الفضاء غير منظم. يختلف التصميم الجديد تمامًا ويحتضن عددًا من أفضل الممارسات والاتجاهات الحديثة في تصميم الويب وسهولة الاستخدام .
لذا ، دعونا ننظر بمزيد من التفصيل ليس فقط إلى التحسينات الملحوظة ، بل بعض قرارات التصميم وسهولة الاستخدام المشكوك فيها.
شبكة مستوحاة من التخطيط
أنا أستخدم عبارة "مستوحاة من الشبكة" نظرًا لأن التصميم الجديد يبدو أنه يعتمد على شبكة ، لكن محاذاة العناصر بدقة ليست موجودة تمامًا.
إلقاء نظرة خاطفة على ورقة الأنماط الأساسية يبدو أنها تعتمد على أسلوبها وشبكتها بشكل فضفاض مخطط CSS الإطار.
إن عملية إعادة ضبط CSS الخاصة بها تحمل العديد من أوجه التشابه مع إطار مخطط العمل ، ويتم تضمين كلمة "مخطط عمومي" في الأعلى ، لذا سيكون هذا بمثابة تقييم منطقي يعتمد على معرفتي المحدودة لمخطط البيانات.
بعد تحليل لقطة شاشة لصفحتهم الرئيسية ، استنتجت أنه إذا كانت تستند إلى التخطيط الجديد على الشبكة ، فستكون خصوصيات هذه الشبكة: 16 عمودًا ، 50 بكسل لكل عمود ، مع مزاريب بحجم 12 بكسل (المسافة بين الأعمدة) ، يبلغ مجموعها 980 بكسل.
فيما يلي تمثيل مرئي لتقديرات الشبكة الخاصة بي ، حيث يقوم Photoshop بعمل نسخة وهمية:
على الرغم من أن العناصر الموجودة على الصفحة لا تتبع نوع المحاذاة والتوازن المتوقع عادةً من تخطيط الشبكة ، إلا أن هناك تحسن ملحوظ في هذا التصميم مقارنة بالتصميم السابق ، كما هو موضح أدناه:
يحافظ التصميم الجديد على جميع عناصر الصفحة داخل الحاوية التي يبلغ عرضها 980 بكسل - بخلاف التصميم السابق ذو الكعب العالي والذي يحتوي على رأس عرض قابل للسائل يمتد على كامل الصفحة أعلى قسم محتوى ذي عرض ثابت.
أيضا ، في حين أن التصميم القديم لا يبدو أنه يقرر بين الزوايا الدائرية والمربعة ، فإن التصميم الجديد يتميز باستمرار بزاوية مربعة مع تأثيرات شطبة خفية تفصل العناصر المناسبة ، كما هو موضح في الصورة أدناه.
وبالرغم من أن الشكل يشبه الشبكة ، إلا أنه ، كما ذكر ، ليس تنسيقًا صارمًا للشبكة ، والأقسام الموجودة تحت الطية تنحرف قليلاً في البنية عن تلك المذكورة أعلاه.
قسم الرأس المحسنة بشكل كبير
أحد أكثر التحسينات الظاهرة في التصميم الجديد هو قسم الرأس.
شريط التنقل الأفقي حديث ونظيف وواضح . يوجد مربع البحث وخيار الاشتراك ورابط تسجيل الدخول في الركن العلوي الأيسر ، حيث يجب أن يكونا.
وعلى الرغم من أنه ليس من المعتاد في التصميم الحديث توسيط شعار الموقع ، فإنه يعمل في هذه الحالة. فهي تخلق تجربة مميّزة وحيوية للغاية لا يمكن نسيانها بسهولة .
ميزة أخرى لطيفة من شريط التنقل هو أنه يشير عن طريق اللون والرسومات التي الروابط الأولية ، والتي هي ثانوية ، والتي ستفتح في المواقع الصغيرة أو المواقع الشقيقة. يشار إلى الأخير بمثلثات يمينية ("مال" و "رياضة" - أكثر على هذا أدناه).
الاستخدام الفعال للفضاء
على الجانب الأيسر من الصفحة ، أسفل الوحدة الإعلانية الأساسية ، قاموا بتضمين محول تبديل على غرار الأكورديون ، مما يسمح للمستخدم بعرض معاينات ، في منطقة صغيرة نسبيًا ، من المحتوى المرتبط بعدد من الموضوعات المختلفة.
التركيز على الفيديو وقصة القصة
في التصميم السابق ، كان الفيديو يحتوي على تركيز قوي إلى حد ما ، وظهر في مربع على الجانب الأيمن. في التصميم الجديد ، يعد الفيديو فئة رئيسية في شريط التنقل الأساسي ، مع إعطاء نفس الأهمية البصرية للرابط "الرئيسي".
يتم عرض قصص الفيديو في جميع أنحاء الموقع ، ويتم الإشارة إليها بوضوح من خلال رابط "زر التشغيل" المعتاد على الصور المرتبطة بمحتوى الفيديو ، كما هو موضح أدناه:
فئة أخرى تُعطى نفس الأهمية مثل "المنزل" و "الفيديو" ، كما هو موضح في الصورة أعلاه ، هي قسم "NewsPulse" ، وهو جديد ولا يزال في مرحلة تجريبية.
يعرض هذا القسم القصص الإخبارية بشعبية (والتي يبدو أنها تحسب بإجمالي مشاهدات الصفحة وليس التعليقات) ، ويسمح للقارئ بتصفية النتائج حسب الفئة أو نوع القصة.
صفحات الفئات القوية
صفحات الصفحات الرئيسية ("الولايات المتحدة" ، "العالم" ، "السياسة" ، وما إلى ذلك) ، التي يتم الوصول إليها من شريط التنقل الأساسي ، تعمل بشكل مشابه للصفحة الرئيسية .
في الواقع ، إذا لم تكن تعرف الصفحة التي كنت عليها ، فقد تعتقد أنك كنت في الصفحة الرئيسية. تظهر فئة "الولايات المتحدة" أدناه:
يعرض كل قسم من هذه الأقسام أهم الأخبار وآخر الأخبار والعناصر الأخرى المرتبطة بهذه الفئة.
التسميات التوضيحية بالأبيض والأسود الموجودة أسفل الصور ، كما تظهر على الصفحة الرئيسية وصفحات المقالات ، هي لافتة للنظر وسهلة القراءة ، دون استخدام رسومات أو أنماط خطوط رائعة.
صفحات المادة قوية
تحافظ صفحات المقالات ، في أغلب الأحيان ، على العلامة التجارية الواضحة للصفحة الرئيسية. يتم عرض نص النص بشكل رائع في 14 بكسل Arial بارتفاع خط قابل للقراءة .
على الرغم من أن بعض العناصر على الصفحات تبدو صغيرة إلى حد ما ، إلا أنني شخصياً أحب الطريقة التي يبرز بها حجم خط نص المقالة على الصفحة ، بحيث يمكن للقارئ أن يستمر في التركيز عليها.
أيضا ، على الجانب الأيسر من كل قصة ، هناك قسم يسمى "يسلط الضوء على القصة" الذي يلخص القصة الحالية في عدد قليل من نقاط قائمة التعداد النقطي. وهذا يدل على أن مصممي CNN يدركون ميل المستخدمين على الإنترنت "لفحص" المواد المطولة.
الحمل الزائد للمعلومات
من بين جميع الجوانب السلبية للتصميم الجديد ، ربما تكون المشكلة الأولى التي تظهر على الفور هي زيادة عدد الروابط والمعلومات في الصفحة الرئيسية - على الرغم من أنها أكثر تنظيما وتنظيما ، كما تمت مناقشته في وقت سابق.
يبلغ طول الصفحة الرئيسية حوالي ساعتين ونصف ، وتشمل أقسامًا مكررة لعناصر في شريط التنقل الرئيسي ، مع حوالي نصف روابط فرعية تحت كل فئة. تظهر هذه الأقسام في الجزء السفلي غير المرئي من الصفحة وتظهر في هذه الصورة:
وبما أن شبكة CNN هي واحدة من أكثر المواقع شعبية في العالم (38 مليون زائر فريد كل شهر) ، فإن هذه الأقسام ستحصل على عدد كبير من الزيارات مقارنة بالمواقع الأخرى ، لأنها تظهر حتى الآن في الجزء السفلي غير المرئي من الصفحة ، ولأن هناك الكثير من المواقع الروابط ، من المرجح أن يكون العدد النسبي لحركة الزيارات التي تؤدي إلى هذه الروابط من خلال الصفحة الرئيسية منخفضًا جدًا.
أقسام مهمة دفن؟
كما أشرنا أعلاه ، تظهر الكثير من المعلومات في الصفحة الرئيسية في الجزء السفلي غير المرئي من الصفحة. وبشكل ملحوظ ، يبدو أن بعض المحتوى المهم مدفون بالكامل في أسفل الصفحة الرئيسية ، أكثر من شاشتين كاملتين أسفل العنوان .
على سبيل المثال ، يظهر قسم بعنوان "الموضوعات الساخنة" بالقرب من الأسفل ، على الجانب الأيمن ، أعلى بعض العروض الترويجية والإعلانات.
يبدو من المنطقي أن يحل هذا القسم محل مبدلات محتوى الأكورديون ، أو يتم دمجه في الأكورديون.
تظهر أيضًا الإعلانات والعروض الترويجية التي تظهر أسفل "الموضوعات الساخنة" أكثر أهمية من ظهور موقعها. مرة أخرى ، على الرغم من أن موقع الويب عالي الزيارات هذا سيحصل على عدد كبير من النقرات على هذه المناطق ، فمن المرجح أن يكون معدل النقر إلى الظهور مختلفًا مقارنة بالأقسام والإعلانات في الجزء المرئي من الصفحة.
بطبيعة الحال ، يعرف منتجو سي إن إن ما هو المحتوى الأكثر أهمية ، ويفهمون عادات مستخدميهم بشكل أفضل من أي شخص آخر - ولكن هذه التحديات في التخطيط والاستعمال مفيدة في التحليل إذا ما واجه المطورون الآخرون قرارات مماثلة.
اسرار قابلية الاستخدام
هناك بعض العناصر على الموقع الجديد والتي قد لا تكون مصممة للاستخدام الأمثل.
أحد الأمثلة على ذلك هو المثلث الذي يشير إلى اليمين والذي يظهر على كل رابط من مواقع الويب الصغيرة. للوهلة الأولى ، لم أكن متأكدًا من طبيعة تلك المثلثات. يبدو أنها تشير إلى نوع من قسم منزلق جافا سكريبت المنبثق.
قد يخطئ بعض المستخدمين الذين لا يولون اهتمامًا كاملًا للأسهم التي تشير إلى الانخفاض والتي تنتج القوائم المنسدلة.
سيكون كافيا - ولكن بعد ذلك من شأنه أن يقدم مشكلة المستخدمين بافتراض أن الروابط فتحت في نافذة جديدة ، والتي في هذه الحالة ليست صحيحة. يحتوي مبدّل محتوى الأكورديون ، الذي تمت مناقشته سابقًا ، أيضًا على بعض المشاكل المتعلقة بسهولة الاستخدام. أولاً ، عندما يتم تعطيل JavaScript ، يتم عرض الأكورديون بدون فائدة ولا يعرض أي محتوى.
يجب أن يتم توسيعه افتراضيًا لعرض كافة المحتويات ، أو عرض أحد العناصر. أيضًا ، يجب أن ترتبط الرؤوس ذات الروابط التشعبية لأقسام الأكورديون بأقسامها ، ولكنها لا تفعل ذلك.
هناك مشكلة أخرى تتعلق بمحتوى الأكورديون ، حيث أن النص الذي يحتوي عليه صغير جدًا ، وليس من الواضح دائمًا ما هو قابل للنقر داخل الأكورديون. وهذا يجعل الروابط أقل تمييزًا عن بقية محتوى الأكورديون.
في الصورة أدناه ، يشير السهم الأحمر الذي رسمته إلى عنصري قائمة نقطية. النص الموجود في عناصر القائمة هذه مرتبط ارتباطًا تشعبيًا ، ولكن هذا ليس واضحًا للوهلة الأولى.
بعض المقاطع لا تزال تعكس التصميم القديم
وكما هو الحال مع أي تصميم جديد للموقع بحجم CNN ، ستظل بعض الأقسام تعكس التصميم القديم حتى يتم دمج جميع الصفحات بالكامل.
هذا هو الحال عادةً مع المحتوى الأقدم الذي لن تتم زيارته في كثير من الأحيان ، ولكن في حالة CNN ، لا تزال بعض الأجزاء الهامة تحتوي على الجلد القديم.
مثالان هما حول و اتصل الصفحات.
الطباعة الصغيرة
تتمثل إحدى مشكلات التصميم المحددة التي لا تتوافق مع اتجاهات تصميم الويب الحديثة في استخدام النص الصغير وعناصر الطباعة الصغيرة.
تمت مناقشة الحجم الصغير للخط في محتوى الأكورديون في وقت سابق. يوجد أيضًا شريط "المشاركة" الذي يظهر على صفحات المقالات والفيديو ، وقسم "آخر الأخبار" في الصفحة الرئيسية ، و "تسجيل الدخول" و "تسجيل الدخول" في رأس الصفحة ، والارتباطات النصية أسفل الطية على الصفحة الرئيسية ، على سبيل المثال لا الحصر.
هل سيكون شريط "المشاركة" ، الموضح أعلاه ، أكثر فعالية مع الطباعة الكبيرة؟ ماذا عن القسم "موصى به" ، الموضح أدناه ، أو الأقسام الأخرى ذات النوع الأصغر؟
استنتاج
أضاف موقع CNN.com الجديد عددًا من الميزات التي لم تتم مناقشتها هنا والتي ترتبط بشكل أكبر بخدمات الأخبار والمحتوى المخصص. يحتوي الرابط الأول أدناه على فيديو مقدم من CNN يناقش بعض الميزات الجديدة.
أعتقد بالتأكيد أن الموقع الجديد يقدم تجربة مستخدم أكثر جمالا وإثارة للاهتمام من القديم ، وبغض النظر عن نقاط الضعف في مبدلات محتوى الأكورديون ، فإن عيوب التصميم الجديد ليست ذات أهمية كبيرة.
يبدو أن الكثير من الوقت والتخطيط تم في تصميم CNN.com الجديد ، وأعتقد أن مصممي الويب والمهتمين بتحسين قابلية الاستخدام على مواقعهم الخاصة سيفعلون جيدًا في التفكير ومحاولة التعلم من بعض التغييرات المقدمة على موقع CNN الجديد.
قراءة متعمقة
- مرحبًا بك في موقع CNN.com الجديد (فيديو على موقع CNN.com)
- CNN.com الجديد (أول لقطات على TechCrunch)
- جديد CNN.com يذهب لايف: ما رأيك؟
تمت كتابة هذه المقالة حصريًا لـ Webdesigner Depot بواسطة Louis Lazaris ، كاتب مستقل ومطور على الويب. يدير لويس شبكة رائعة حيث ينشر مقالات ودروسًا حول تصميم الويب. يمكنك اتباع لويس على تويتر أو الاتصال به من خلال موقعه على الانترنت .
ما الذي يعجبك أو لا يعجبك في تصميم موقع CNN الجديد؟ شارك بتعليقاتك أدناه.