إعادة تصميم هابي كوج من VisitPhilly.Com:
موقع نموذجي حديث
في يناير ، أرسلت جايسون سانتا ماريا سقسقة يعلن ذلك visitphilly.com وقد تم تصميمه من قبل استوديو التصميم ذات الشهرة العالمية هندي سعيد . كان اهتمامي منزعجاً ، ولم أستطع إلا أن ألقي نظرة.
أستطيع أن أقول بصدق أنني لم أكن أكثر إعجابًا بإعادة تصميم الموقع الإلكتروني مما كنت عليه مع هذا الموقع.
وقد تمكن هذا التمساح السعيد من تحويل مثل هذا الموقع الكبير إلى تجربة مستخدم جميلة ، سهلة الوصول ، وظيفية ومدعومة إلى موهبة الفريق في Happy Cog.
لا أستطيع بأي حال من الأحوال أن أقدم نقدًا ينصف التخطيط والتصميم والتطوير الذي يجب أن يكون قد دخل في هذا المشروع.
ولكني اعتقدت أنه من المفيد أن نوضح لماذا يعيد تصميم هذا التصميم تصميم موقع جميل وفعال للسوق الحالية.
غرض واضح
اسم النطاق ، والشعار الملفت للنظر ، والقوائم المنسدلة الواضحة ، والتصوير الفوتوغرافي الجميل: كل هذا وأكثر يلعب أدوارًا رئيسية في التواصل مع غرض الموقع (لتشجيع المستخدمين على زيارة مدينة فيلادلفيا) ودعوة المستخدمين لاستكشاف ما هو موقع (ما يثير الدهشة) مدينة أمريكية جميلة.
عناصر التنقل الأولى التي يلاحظها المستخدم هي روابط القائمة المنسدلة الضخمة وروابط النص الكبيرة التي تراكب الصورة الرئيسية الدورية.
توضح لقطة الشاشة أدناه هذه الروابط ، وهي "أشياء يجب القيام بها" (تظهر نشطة) ، "خطط لرحلتك" ، "Philly Now" وتراكب الصور "Power Lunch".
من الواضح أن هذه العناصر من المفترض أن يتم ملاحظتها على الفور. في اللقطة الموضحة أدناه ، قمت بتعيين مسار العين الأكثر احتمالاً لمسح المستخدم للصفحة الرئيسية.
بعد ملاحظة (وربما استكشاف) واحد أو أكثر من القوائم المنسدلة ، يقوم المستخدم بفحص النص المرتبط بالصورة النشطة ، ثم ينتقل بشكل طبيعي إلى القسم المسمى "ما الجديد" ، وأخيرًا يعود إلى دائرة كاملة تقريبًا الرأس بالقرب من مربع البحث.
تم تنظيم المحتوى حتى يتمكن المستخدم من القيام برحلة إعلامية لا تنسى مرئيًا عبر أهم أقسام الصفحة في غضون ثوانٍ.
من غير المحتمل أن يتأخر المستخدم أو يختلط أو يكتسح ، على الرغم من وجود الكثير من المحتوى للاستكشاف.
الحد الأدنى من الروابط الأساسية
كما ذكرنا ، واحدة من أبرز المجالات هي القائمة المنسدلة. قرار التمسك بالحد الأدنى من الروابط الأساسية هنا هو القرار الصحيح.
يتيح وجود روابط ثلاثة فقط عرض العناصر بخط أكبر ، مما يؤدي إلى جذب انتباه المستخدم وإظهار البنية المركزة لموقع الويب.
يعتبر شريط الملاحة الحد الأدنى أحد التغييرات الرئيسية في إعادة التصميم ويجلب فوائد رائعة. قارن ذلك بقسم الرأس في التصميم القديم ، والذي لا يركز على:
على الرغم من أن العنوان القديم ليس تصميمًا سيئًا أو غير صالح للاستعمال ، إلا أنه ليس مركّزًا ولا يكاد يكون جميلًا مثل المستوى الجديد. ضعف آخر هو عدم وجود مؤشرات القائمة المنسدلة ، والتي على الموقع الجديد واضحة وجذابة.
عندما يصل أحد المستخدمين إلى موقع ويب مثل هذا الموقع (غالبًا من خلال بحث Google) ، فإنه في أغلب الأحيان يريد أن يفعل أحد أمرين: انظر ما تقدمه مدينة فيلادلفيا أو تخطط لرحلتها.
يساعد التنقل الموضّح في رأس الصفحة المستخدم على تحقيق هذه الأهداف بسرعة وكفاءة.
طباعة جميلة
هل نتوقع أي شيء أقل من هوج كوج؟ أنا أحب بالتأكيد الخط المستخدم لشعار "فيلادلفيا والريف".
ولديها شعور غربي بارع ولكنها لا تزال حديثة وكريمة. للحفاظ على اتساق العلامة التجارية ، يتم إعادة استخدام الخط للعناوين العديدة في جميع أنحاء الموقع ، والتي تم توضيح بعضها في لقطة الشاشة أدناه.
معظم النص على بقية الموقع هو في خط جورجيا ، مع استخدام Arial في بعض الأحيان ، ولكن القيام بأناقة جدا. مجموعة متنوعة من العناوين على شبكة الإنترنت ، ونسخ الجسم ، والتسميات التوضيحية وغيرها من العناصر الوصفية يمكن قراءتها وتقديمها بذكاء.
على الرغم من مقدار المحتوى ، حتى على الصفحات الداخلية ، نادرًا ما يشعر المستخدم بالارتباك ، على عكس التجربة على الموقع القديم .
زيادة الأداء والسرعة المدركة
يحتاج موقع ويب يحتوي على الكثير من المحتوى والعديد من الصور إلى أداء لا محالة. كان المطوّرون على وعي بهذا الأمر وحرصوا بشدة على ضمان عدم تشتيت محتوى التحميل المتأخر أو التسبب في استسلام الزائرين والتطلع إلى مدينة بنسلفانيا أخرى .
كما هو موضح أدناه ، عندما يزور المستخدم الصفحة الرئيسية ، فإن العنصر الأخير الذي سيتم تحميله هو أحد أهم العناصر في التخطيط الجديد: الصورة الرئيسية الدورية. ولكن يتم تخفيف البطء الفعلي من خلال مؤشر تحميل المحتوى (الرسم المتحرك الدوار):
لا يقتصر تحسين قابلية الاستخدام على الصور الكبيرة أيضًا. نظرًا لتنوع المحتوى في القوائم المنسدلة ، يتم عرض رسم مماثل لتحميل المحتوى أثناء تحميل محتوى القائمة عبر Ajax:
بالنسبة لهذه القائمة ، يعد التحسين أمرًا ضروريًا ، نظرًا لأن القوائم المنسدلة لا تتأخر عادةً عند تشغيلها.
لم يكن هناك أي مؤشر تحميل قد تسبب في حدوث ارتباك ، مما قد يجعل الماوس بعيدًا عن المستخدم ثم يعود إلى الفأرة ، متسائلاً سبب توقف الوظيفة.
لذا ، على الرغم من أن الصفحة لا يتم تحميلها بشكل أسرع ، تزداد السرعة المتصورة . هذا هو درس لجميع المصممين والمطورين للتفكير ليس فقط من السرعة الفعلية ولكن من السرعة المتصورة.
ميزات موجهة للمستخدم
واحدة من أهم ميزات الموقع الجديد هي الطريقة التي تم بها الانتقال إلى التصميم الجديد ، مما يضمن عدم تأثر الزوار العائدين بالتغييرات الجذرية.
عند زيارتك لموقع الويب لأول مرة ، تلاحظ بانرًا أحمر كبيرًا في أعلى الصفحة ، لإعلامك بإعادة تصميم موقع الويب ولا يزال في مرحلة تجريبية. يتم منحك خيار تصفح الموقع باستخدام الواجهة القديمة.
إن إعطاء الزائرين الذين اعتادوا على التصميم القديم وبنيته على خيار العودة إليه أمر بالغ الأهمية ، لأنه يضمن عدم إحباطهم في محاولة العثور على محتوى مألوف.
في مثل هذا الموقع الإلكتروني الكبير ، ولا سيما إعادة تصميمه من قبل شركة معروفة بتصاميمها التي تركز على المستخدم ، فإن هذه التغييرات والتحسينات المعمارية الكبرى ستلغي الزائرين الذين اعتادوا على النمط القديم.
وبالتالي ، فإن الرسالة في البانر الأحمر تمنع أي ارتباك أو إحباط من جانب الزائرين.
لم أقضي الكثير من الوقت في مقارنة الموقع القديم بالآخر الجديد ، لذا لا يمكنني تأكيد مدى تشابه المحتوى والمعمارية ، ولكن نظرًا لأننا نمنح خيار زيارة الموقع القديم ، يجب أن تكون المحتويات متشابهة بما فيه الكفاية إذا كنا قادرين على الوصول إلى الأحداث الجارية وغيرها من العناصر التي يتم تحديثها بانتظام في كلا الإصدارين.
أحد العناصر الشائعة هو الرابط الذي يظهر فوق مربع البحث ، والذي يستدعي التعليقات على التصميم الجديد عن طريق دعوة المستخدمين لملء "استبيان تجريبي". وتبين هذه الميزة أن المالكين يشعرون بالقلق حول كيفية تعامل المستخدمين مع موقع الويب وإدراكه.
محتوى يمكن الوصول إليه بالكامل
العديد من أعضاء فريق هانج تسو معروفون على الإنترنت لدعوتهم لمقاييس الويب والمحتوى القابل للوصول ، لذلك ليس من المستغرب أن يكون هذا الموقع الإلكتروني متاحًا بالكامل لأي مستخدم على أي نظام أساسي.
مع تعطيل جافا سكريبت ، تتشابه تجربة المستخدم مع موقع الويب كثيرًا ، على الرغم من أن العديد من التحسينات لم تعد متوفرة.
المغلق text-indent يتم استخدام الخاصية لاستبدال النص الموجود في العناوين بالصور التي تعرض الخط المخصص. هذا يضمن أن الصفحات ستبقى دلالية ، ومحسنة لمحركات البحث SEO ومرئية لجميع المستخدمين.
تعرض الصورة أدناه عنوانًا في صفحة داخلية ، على اليسار مع تعطيل النمط ، على الجانب الأيسر مع تمكينه.
يمكننا أن نرى كيف يتم تحسين العناوين عن طريق الصور دون فقدان قيمتها الدلالية ودون اللجوء إلى اللجوء إلى أساليب استبدال الخط المعقدة دون داع.
ميزة أخرى أساسية للوصول هي كيفية تنفيذ تحسينات جافا سكريبت. تحتوي الصفحة الرئيسية على محولين للمحتوى المبوب ، أحدهما يسمى "Book Online" ، والآخر متصل بالشبكات الاجتماعية لـ visitphilly.com:
عندما يتم تعطيل JavaScript ، يتم عرض كل المحتوى في كلا المربعين المبنيين. تعرض العديد من مواقع الويب التي تحتوي على أدوات tabbed واحدًا فقط من المربعات عند تعطيل JavaScript ، ولكن ذلك لا يعد عادةً أفضل الممارسات.
يتم استخدام هذه التقنية باستمرار في جميع أنحاء الموقع لعدد من الميزات ، مما يضمن أن الطبقة السلوكية (أي Ajax و JavaScript) هي تحسين وليس ضرورة.
وهذا يجعل الوصول إلى المحتوى ليس فقط للمستخدمين الذين يتصفحون دون JavaScript ، بل للبحث عن عناكب المحرك مثل Googlebot.
أي نقاط ضعف في التصميم؟
مرة أخرى ، أنا لست في وضع يسمح بنقد التصميم الذي قامت به شركة مثل هوج كوج. لكنني سأشير (بحذر) إلى نقطتي ضعف ثانويتين في التصميم والبنية الجديدتين.
أولاً ، أجد صياغة الوصلة الثالثة في قائمة التنقل الرئيسية غامضة بعض الشيء ("Philly Now").
لم أكن أعرف على الفور ما يعنيه ذلك. لقد افترضت أنه يعني الأحداث الجارية ، ولكن يبدو أنه مزيج من الأحداث والطقس والصور الحالية. ما زلت غير متأكد من كيفية وصفه ، وأشعر أنه نادرًا ما يتم النقر على الرابط.
نقطة الضعف الأخرى هي المثلثات التي تشير إلى اليمين في قائمة التنقل الثانوية في الصفحات الداخلية:
افترضت أن تلك المثلثات أشارت إلى قوائم طيارة ، لكن لا توجد طيارات. المثلثات هي مجرد مؤشرات لجذب انتباه المستخدم إلى منطقة المحتوى. أفضل المثلثات التي تشير إلى اليمين هي المحجوزة للوصلات المستقلة والقوائم المنبثقة ، وليس التنقل العمودي مثل هذا.
نجد نفس الشيء في الصفحة الرئيسية ، ولكنه ليس سيئًا هناك نظرًا لأن الأسهم جزء من مُبدِّل المحتوى المستند إلى جافا سكريبت.
لا يؤذي أي من "نقاط الضعف" هذه تجربة المستخدم كثيرًا. وحقيقة أنني أستطيع أن أجد نقطتين فقط من نقاط الضعف يظهران مدى إعادة تصميم هذه الحقيقة.
جدير بالفحص والتقليد
يمكن أن يقال الكثير عن فعالية التصميم ورمز visitphilly.com ، خارج نطاق هذه المقالة.
بالإضافة إلى ما ناقشناه هنا ، استطعت الإشارة إلى الشفرة الصحيحة والمعلَّقة بشكل جيد ، والاستخدام الفعال للمساحة البيضاء ، والتسلسل الهرمي المرئي ، والاختيارات الممتازة للألوان ، والتجارب المتطابقة تقريباً في IE6 وأكثر.
آمل أن يعطي هذا التحليل نظرة عامة لائقة لبعض السمات الرئيسية لهذا التصميم الجديد وكيف أنه يجسد تصميم الويب الحديث في الصناعة.
قراءة متعمقة
- شركة فيلادلفيا الكبرى للتسويق السياحي تطلق العلامة التجارية الجديدة visitphilly.com
- هابي كوج استوديوهات بورتفوليو
- هابي توج لاستعراض VisitPhilly
تمت كتابة هذه المقالة حصريًا لـ Webdesigner Depot بواسطة Louis Lazaris ، كاتب مستقل ومطور على الويب. يدير لويس شبكة رائعة حيث ينشر مقالات ودروسًا حول تصميم الويب. يمكنك اتباع لويس على تويتر أو الاتصال به من خلال موقعه على الانترنت .
هل يعجبك موقع visitphilly.com الجديد؟ هل تعمل أي ميزات أخرى في التصميم أو التصميم أو البنية على تحسين تجربة المستخدم؟ يرجى تقديم تعليقاتكم أدناه.