أساسيات إعادة تصميم الموقع - دراسة حالة

ليس من غير المألوف إنهاء مشروع إعادة تصميم موقع الويب فقط للنظر إلى الوراء والتفكير ، "كنت سأفعل الأشياء بشكل مختلف لو كنت أعرف ما أعرفه اليوم."

كلنا كنا هناك. نحن متحمسون لمشروع جديد ، نمزح مع العميل ، نوقع العقود ، ونبدأ في محاكاة النماذج الأولية. تبدو الحياة جيدة ، لكن أسس المشروع متزعزعة.

حتما ، تبدأ المراجعات وتسلل النطاق بالتسلل بمجرد تقديم مفهوم التصميم الأول ، ومن هناك ينحدر. تنهار الاتصالات ، ولا شيء يسير كما هو مخطط له ، وفي النهاية ، يشبه موقع الويب المصمم حديثًا البشاعة التي تم تعيينك لإصلاحها.

لا يبدأ التصميم ذو المستوى العالمي وتجربة المستخدم بنموذج جميل - بل يقوم على التخطيط الاستراتيجي ورؤية التصميم التي تركز على أهداف الشركة. لا يمكن أن يكون الهدف الأساسي هو "لنجعل موقعًا أجمل."

يتحمل مصممو مواقع الويب مسؤولية تجربة المستخدم (UX) وواجهة المستخدم (UI). مهمتنا هي التأكد من أن المستخدمين يتمتعون بتجربة مثالية في التفاعل مع الواجهات التي نصممها. هذا يتطلب تخطيطًا شاملاً من تصور المشروع.

توضح هذه المقالة عملية يمكن الاعتماد عليها من شأنها أن تساعد في ضمان إعادة تصميم موقع الويب التالي الخاص بك على أساس متين.

قيمة إعادة تصميم الموقع البحث قبل المشروع

لإثبات هذه العملية ، دعنا نتصفح مراحل إعادة تصميم موقع الويب المكتمل لـ Archaeology Southwest ، وهي منظمة غير ربحية تستكشف وتحمي المواقع الأثرية في جنوب غرب الولايات المتحدة.

بعد إجراء تحقيق أولي في مجال العميل والمنافسة ، افحص عن كثب كل أصل متاح من مواقع الويب. يتم إعداد فواتير هذا التحليل بشكل منفصل ويتم قبل كتابة عرض أسعار المشروع على الإطلاق. العمل بهذه الطريقة يمنع التقديرات الغامضة أو المتضخمة التي تنتج عندما يحاول مصممو الويب تفسير المشكلات التي قد تتسلل إلى السطح لاحقًا في المشروع.

في حالة Archaeology Southwest ، واجهت موقعًا في حاجة ماسة إلى الاهتمام - الجبال والجبال ذات المحتوى الفوضوي داخل بوابة CMS القديمة. كان الأمر سيئًا ، لذلك شرعت في إنشاء النظام.

الخطوة الأولى: التعرف على المحتوى

عند إعادة تصميم المنزل ، من المهم محاولة إنقاذ المواد القيمة قبل يوم الهدم. نفس المبدأ ينطبق على تصميم الموقع. أنت بحاجة إلى السير عبر صفحة الموقع بصفحة وسحب كل المحتوى. كمصممين ، يجب علينا معرفة المحتوى الذي يستحق أن يكون نوع منشور فريدًا وما هي الصفحات الثابتة.

بمجرد الانتهاء من ذلك ، قم بصياغة إستراتيجية لكيفية تنظيم كل شيء ، ولكن لا تقرر ما هو المحتوى الذي يجب أن يبقى وما الذي يجب إزالته. لما لا؟

عند التعامل مع الشركات والمؤسسات الواقعية ، هناك عدد من الأشخاص المختلفين المسؤولين عن محتوى الموقع ، ويمكن أن يكون مقدار المحتوى الموجود مذهلاً. أفضل نهج هو تصنيف كل شيء أولاً.

عادةً ما أبدأ بالملاحة الرئيسية وأذهب صفحة بصفحة. بهذه الطريقة ، سأحصل على هندسة المعلومات وخريطة الموقع قبل الاجتماع الأول للعميل.

لسوء الحظ ، لم يكن موقع Archaeology Southwest نموذجيًا. لا يمكن الوصول إلى معظم الروابط من خلال التنقل العلوي وتم إخفاؤها داخل المحتوى. كنت سأواجه مفاجأة سيئة إذا كنت قد اقتبست المشروع على أساس التنقل وحده.

من خلال التحدث إلى العديد من الأشخاص في فريق العميل ، تمكنت من الحصول على صورة أفضل لنطاق المشروع ، وبعد اجتماع مع العميل ، تمكنت من تحديد تركيز موقع الويب الخاص به وسير العمل والمحتوى والميزات. من هناك ، توصلنا إلى الأنواع الأساسية التالية من المحتوى (بعضها جديد وبعضها موجود):

الخطوة الثانية: خلق التركيز. تبسيط. تنظم.

بمجرد تنظيم كل المحتوى في مربعات معنونة ، حان الوقت لتطوير مخطط لهيكل جديد ، والذي سيعرض المحتوى في أفضل أشكاله. لكن أولاً ، نحتاج إلى خلق التركيز.

وفقًا لـ Archaeology Southwest ، يزور الأشخاص موقع الويب الخاص بهم للبحث عن معلومات حول المشاريع الجارية ، والتعرف على الأحداث القادمة ، وقراءة مجلة شهرية. تجيب هذه الأنشطة على السؤال ، " ماذا يفعل الناس في الموقع؟" لكن لا تكشف عن سبب زيارة الأشخاص للموقع في المقام الأول.

" لماذا " هو تركيز الموقع. من أجل العثور على التركيز ، انظر إلى جوهر المنظمة.

في هذه الحالة ، حددت "الموقع" ليكون قلب علم الآثار في الجنوب الغربي. بدون الموقع ، لن تكون هناك مواقع أثرية ، ولا أطلال ، وبالتأكيد لن تكون هناك متاحف أو معروضات. كل شيء في علم الآثار يتعلق بالمكان.

مع تحديد التركيز ، يمكننا التبسيط والتنظيم. بالنسبة إلى Archaeology Southwest ، بدأت بتقسيم المحتوى إلى فئات لا تتعلق بالمواقع ، مثل صفحات الفريق والتقارير السنوية. بعد القليل من الترتيب ، انتهى بي الأمر بهذه الخريطة التقريبية:

تمثل الصورة أعلاه المجالين الأساسيين اللذين ظهرا: الأشياء التي يجب القيام بها والمواقع . الأشياء التي يجب القيام بها (على اليسار) تغطي الأنشطة التي يمكن لزائر الموقع التعرف عليها والقيام بها. تركز المواقع (يمين) على محتوى الموقع المرتبط بمواقع محددة. لماذا هيكلها بهذه الطريقة؟

الفكرة هي أن المستخدم العادي قد لا يعرف اسم مقطع فيديو أو مشروع ولكن من المحتمل أن يعرف اسم الموقع. بهذه الطريقة ، يمكن للزوار العثور على المحتوى من حيث صلته بالموقع.

بالإضافة إلى ذلك ، تمثل كل كتلة لونية في " المواقع " نوعًا فريدًا للنشر. من منظور تنظيمي ، تعتبر المعارض والفصول والمعارض عبر الإنترنت كلها أحداثًا ذات طبيعة مختلفة.

في موقع Archaeology Southwest القديم ، كانت هناك صفحات ثابتة منفصلة لمجلة ومتجر على الإنترنت حيث يمكن للزوار شراء المجلة. لتبسيط عملية الشراء ، قمت بدمج خيار شراء في قالب المجلة.

كان الهيكل التنظيمي المتبقي واضحًا:

• صفحة "حول" لمعرفة المزيد عن المنظمة
• رابط مباشر لصفحة "المتجر"
• صفحة "تبرع"
• صفحة "تحديثات" جديدة

يعد المتجر وصفحات التبرعات صانعي أموال ، لذا كان من الضروري تضمينهما في قائمة التنقل الرئيسية.

بمجرد اكتمال المخطط التنظيمي ، حان الوقت لربط المحتوى الفعلي.

الخطوة 3: إشراك العميل

يتضمن ملف Sitemap أنواع الصفحات ، لكنه لا يتضمن تعيين المحتوى. يعرف مصممو الويب المتمرسون أن معظم المشكلات تحدث عندما يبدأ العميل في إضافة محتوى إلى موقعه. لتجنب هذه المشكلة ، احتفظ بالعميل متكررًا من البداية.

بالنسبة إلى Archaeology Southwest ، قمت بإنشاء مستند Google يتضمن خريطة الموقع ، وطلبت من العميل تعيين محتواه القديم بالهيكل الجديد.

إذا كان هناك شيء غير مناسب تمامًا ، فقد تناولناه لاحقًا. هذه خطوة حاسمة. لماذا ا؟ إلى جانب إشراك العميل في العملية ، فإنه يكشف عن مشكلات في الهيكل قبل بدء التنفيذ.

في هذه الحالة ، تم تغيير بعض عناصر قائمة خريطة الموقع ، ونظرًا لأن العميل لديه صفحات تبرع متعددة ، فمن المنطقي إنشاء نوع منشور فريد لهذا الغرض فقط.

إنشاء هيكل مرئي من خلال Wireframing

في هذه الخطوة ، أبدأ في إعطاء العمل بنية بصرية. لكي يعمل النظام بشكل جيد ويدمج بنجاح فكرة أن "كل شيء مرتبط بالموقع" ، قمت بإنشاء علاقة ثنائية الاتجاه بين أنواع المنشورات.

إليك الفكرة الأساسية: عندما يأتي الزائرون إلى موقع ويب Archaeology Southwest ويختارون Grand Canyon ، سيرون معلومات حول هذا الموقع ، لكنهم سيجدون أيضًا معلومات متعلقة بالمشاريع والأحداث والمعارض وكل شيء آخر يضعه مسؤولو الموقع على أنه موقع- محدد.

نظرًا لأن الرابط ثنائي الاتجاه ، يمكن للزوار أيضًا الوصول إلى Grand Canyon من خلال زيارة صفحة المشروع. في النهاية ، انتهى بي الأمر بهذا:

تعرض صفحة فهرس المواقع جميع المواقع مع وجود أحدثها في الأعلى. شريط البحث هو أول ما يراه المستخدم عند وصوله إلى الصفحة. ستشغل خريطة Google حوالي 80 بالمائة من الشاشة. يتيح ذلك للمستخدمين انتقاء النقاط على الخريطة ، وأثناء التمرير أو البحث ، ستظهر شبكة القائمة.

في صفحة موقع واحدة ، يكون النص الرئيسي على اليسار لأنه أهم المعلومات. المعلومات الوصفية ذات الصلة ثانوية ، لذا فهي على اليمين. لتحقيق تخطيط متوازن ، من الضروري أن يكون لديك تسلسل هرمي مميز بين كتل العناصر الأولى والثانية والثالثة. هذا يسمح للعين بالتحرك بسهولة بين الأقسام.

في مخطط Archaeology Southwest ، تبدأ عين المستخدم بالرأس ، ثم تنتقل إلى كتلة المحتوى ، وأخيراً المسارات إلى الشريط الجانبي الأيمن. يتم عرض كل جزء من المحتوى ذي الصلة بالترتيب من حيث الصلة. على سبيل المثال ، إذا كان المستخدم يقرأ عن جراند كانيون ، فمن المحتمل أن يتبع هذا المحتوى صور وخريطة.

نظرًا لأن هذا موقع تعليمي بشكل أساسي ، فمن المهم أن يكون لديك خيار "متعلق بهذا الموقع". ومع ذلك ، لا يوجد الكثير من المحتوى المرتبط بشكل فريد بكل موقع ، لذلك نادراً ما جمعت المحتوى المستخدم (ولكن المرتبط) في كتلة واحدة أسفل الجسم.

يؤدي وضع الصور المصغرة للمجلات والفيديو أسفل المحتوى ذي الصلة إلى إضافة عناصر مرئية إضافية وتوجيه المستخدمين إلى صفحة "الشراء". تكتمل الصفحة من خلال إظهار المواقع ذات الصلة. هذه طريقة رائعة لجذب المستخدمين لمزيد من استكشاف الموقع. الخطوة التالية هي الاستمرار في هذا الهيكل لأنواع المنشورات الأخرى.

وفر للصفحة الرئيسية هدفًا واضحًا

مع وجود نموذج عام لأنواع المنشورات المعمول بها ، يمكنني التركيز على الصفحة الرئيسية. تتمثل الخطوة الأولى في الوصول إلى هدف الصفحة الرئيسية - وهذا جزء مهم من تصميم واجهة المستخدم. أظهر بحث العميل أن العديد من المستخدمين يعثرون على الموقع دون فهم كامل لما هو عليه. لذلك ، يجب أن تكون المقدمة والنص الترحيبي أول ما يراه المستخدمون.

يدور التركيز الأساسي الجديد حول الكتلة الثانوية للمواقع. يتبع ذلك كل ما يحدث في archaeologysouthwest.org (المجلة الحالية ، والمدونة ، والأحداث ، والنشرة الإخبارية ، وما إلى ذلك). هنا هو تكرار عملية التخطيط:

باستخدام V1 (على اليسار) ، قمت بتصميم تخطيط أساسي يشبه الصفحة الرئيسية الأصلية. ليس هناك الكثير من التسلسل الهرمي. أول شيء يراه المستخدمون هو الموقع المميز ، ولكن من هناك ، من المحتمل أن يضيعوا في الأعمدة.

بالنسبة لـ V2 (الوسط) ، قمت بإنشاء عمود منفصل يسهل على العين متابعته. ومع ذلك ، لا يزال من الممكن تحسينه. هذا هو المكان الذي تلعب فيه معرفة المحتوى دورًا رئيسيًا. أعلم أن Archaeology Southwest ليس بها أكثر من حدثين في وقت واحد ، لذلك ليس من المنطقي أن يكون لديك مساحة للعديد من الأحداث على الصفحة الرئيسية.

في V3 (على اليمين) ، ركزت على الأحداث القادمة. إذا كان هناك ، لسبب ما ، أكثر من حدثين ، يمكن للمستخدم النقر فوق الزر "المزيد" والاطلاع على الباقي. كما أنني أضع تركيزًا إضافيًا على المجلة الحالية نظرًا لأنها مصدر ربح العميل. يبدأ المستخدمون من الأعلى ويتجهون لأسفل في نمط F. تدفق العين هو:

موقع مميز> مرحبًا> مجلة> أحداث> أخبار

مع وجود إطار سلكي مرئي وهيكل الموقع في مكانه ، من الأسهل بكثير ترسيخ الميزات وكيفية عمل الأشياء. في هذه المرحلة ، لدي اجتماع آخر مع العميل لاستعراض الوظائف وتدفق تفاعل المستخدم ، وكلاهما أوضح كثيرًا في هذه المرحلة.

هل ستظل هناك مراجعات لاحقًا على الطريق؟ نعم ، لكنها ستكون تعديلات ، ولن تتغير العملية بأكملها. الأهم من ذلك ، لن تكون هناك مفاجآت.

قم بتضمين دليل نمط العلامة التجارية

الآن يأتي الجزء المثير - تحويل الإطارات الشبكية إلى شيء سيستخدمه الناس ويختبرونه. بالنسبة لهذا المشروع ، كنت أهدف إلى جعل المحتوى المكتوب سهل الفهم من خلال تطبيق ألوان العلامة التجارية والطباعة.

جرب تركيبات الطباعة

تعد الطباعة جزءًا لا يتجزأ من تصميم الويب الجيد ، لذلك يجب علينا اكتشاف مخطط النوع الخاص بنا مبكرًا. تستخدم معظم هوية Archaeology Southwest خط Univers Condensed Light وخط Adobe Caslon. لم تكن هناك قواعد لاستخدام Adobe Caslon ، لكنني لاحظت أنه لم يتم استخدامه كثيرًا مثل Univers.

لقد أجريت دراسة صغيرة عن الخطوط لمعرفة ما هي عمليات الاقتران التي تخلق أفضل إحساس لمنظمة مهنية غير ربحية. ومع ذلك ، لم أرغب أيضًا في أن يبدو مخطط النوع الخاص بي مختلفًا جدًا عن ضمانات التسويق الخاصة بالعميل.

بعد إجراء مقارنات بين الخطوط ، أصبح من الواضح أن Adobe Caslon يجب أن يكون هو خط العنوان وسيتم استخدام Univers للترجمات. يمنح تعيين العناوين الرئيسية في حالة الجملة للعلامة التجارية إحساسًا شخصيًا أكثر ، في حين أن جميع الأحرف الكبيرة تخلق المزيد من أجواء الشركة.

صقل مظهر ومضمون موقع الويب

شرعت في إنشاء تجربة خفيفة ومفتوحة حتى يشعر المستخدمون أن Archaeology Southwest هو ودود وكفء للغاية. استنادًا إلى بيانات التحليلات ، يستخدم غالبية الزائرين متصفحات سطح المكتب (ربما لأن معظم الأشخاص يزورون الموقع للبحث). لذلك ، كان تركيزي الأولي هو التصميم لمستخدمي سطح المكتب.

عندما أتيت من أجهزة الكمبيوتر المكتبية ، أردت أن يرى الزوار على الفور الموقع المميز ونص الترحيب والأحداث القادمة متبوعة بجزء من عنوان المجلة. بهذه الطريقة ، يرى الناس أولاً ما تدور حوله الشركة وما يروجون له.

تختلف الأولويات قليلاً على الأجهزة المحمولة. نظرًا لأن المستخدمين يصلون إلى المعلومات أثناء التنقل ، فإن الأحداث أكثر أهمية ، لذلك يتم وضعها في أعلى القائمة.

لقد قمت أيضًا بتحديث زر التبرع في التذييل ليكون أكثر ودية من خلال تغييره من زر إلى جملة.

إنهاء قوي: اهتم بالتفاصيل

هناك سببان يدفعان المستخدمين إلى زيارة صفحة التفاصيل — إما أنهم يريدون معرفة المزيد حول أحد المعالم ، أو أنهم يعرفون بالفعل موقعًا ويبحثون عن معلومات إضافية (الاتجاهات ، وأرقام الهواتف ، وما إلى ذلك). لذلك ، من المهم تقديم كلا الخيارين على الفور حتى لا يضطر المستخدمون إلى البحث.

قررت فصل عمود التفاصيل عن منطقة المحتوى لمنحه وزناً أكبر وجعل الصفحة أكثر تشويقًا. يساعد هذا في إنشاء تسلسل هرمي تركيبي ، لذلك عندما يأتي الزائر إلى الصفحة ، سيرى أولاً عنوان الصفحة متبوعًا بمعرض صغير للصور ثم عمود التفاصيل.

يضمن هذا النوع من التصميم أن يلاحظ المستخدمون التفاصيل الإضافية للموقع على الفور. القليل من الحشو الإضافي المحيط بالعمود يحافظ على تركيز العينين ويجعل من السهل فحص المعلومات.

ينهار عرض الهاتف المحمول كما يتوقع المرء. يمسح المحتوى أولاً ، ثم تتبع المعلومات الوصفية. لقد وضعت مقاطع الفيديو والمجلات في آخر مرة على صفحة الجوال لأنها الأقل أهمية لمستخدمي الجوال. تتبع الصفحات الأخرى نفس الهيكل لإنشاء تدفق وتجربة متسقة.

تم بناء إعادة تصميم الويب على أساس التخطيط الدقيق

بالنظر إلى عملية إعادة تصميم موقع الويب ، من الواضح أن معظم الوقت كان مخصصًا للتنظيم والتخطيط. تم إنفاق 30 في المائة فقط من المشروع على تصميم الموقع.

في كثير من الأحيان ، عندما يعرض المصممون أعمالهم ، فإنهم يفشلون في نقل مقدار الوقت المخصص لصواميل ومسامير الاتصال ، مما يؤدي إلى قيام المصممين عديمي الخبرة بالقفز مباشرة إلى النماذج بالأحجام الطبيعية. النتيجة؟ مشاريع خرجت عن مسارها وعملاء غير سعداء.

يجب أن يتم التخطيط التفصيلي من أجل إعادة تصميم موقع الويب بنجاح. إن أخذ الوقت الكافي لإجراء بحث ما قبل المشروع ، والتعرف على المحتوى الحالي ، وإشراك العميل هي خطوات حاسمة.

في النهاية ، لا توجد طريقة للتغلب عليها ؛ الطريق إلى إعادة تصميم مواقع الويب المذهلة والثقة المهنية ممهد من خلال نهج منهجي لتنظيم المشروع.