الدليل المبسط لتصميم رئيسية موقع صديقة للمستخدم

كتبه أحمد مجدي 2 يناير 2012

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

الدليل المبسط لتصميم رئيسية موقع صديقة للمستخدم

  1. هذا الدليل يقدم خطوات إرشادية وليست خطوات مطلقة لكل المواقع … بالتأكيد هناك استثناءات.
  2. هذا الدليل يفترض أنك حددت المحتوى الذي تريد عرضه بالرئيسية وفقا لأهداف الموقع والمؤسسة التابع لها والتى من المفترض أيضاً أنك حددتها فى خطوة سابقة لخطوة تصميم رئيسية الموقع.
  3. هذا الدليل يقدم لك أفكارًا لكيفية تنظيم وترتيب محتوى الرئيسية وفقاً للأولوية والهدف الأهم.

فهرس الدليل

  1. مقدمة
  2. ما يجب أن تشمله رئيسية الموقع.
  3. نموذج رسالة المصعد لتصميم رئيسية الموقع.
  4. مثال لتصميم رئيسية موقع وفقًا لنموذج رسالة المصعد.
  5. الخلاصة ( يمكنك الانتقال اليها مباشرة فى حال عدم رغبتك قراءة التفاصيل ولكنة غير مستحب)
  6. المراجع

مقدمة

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

أولا : ما يجب أن تشمله رئيسية الموقع

  1. توضيح هدف الموقع ومهمته.
  2. يجب أن توضح بطريقة هرمية أقسام الموقع ( الأقسام الرئيسية ثم الأقسام الفرعية ثم …) والمقصود هنا القائمة الرئيسية لمحتويات الموقع.
  3. البحث.
  4. تلميحات عن أفضل محتويات الموقع، مثل العروض، المواضيع الهامة … إلخ
  5. اختصارات الوصول السريع وروابط لأكثر المحتويات أهمية بالأقسام الفرعية والتي يجب أن يضغط الزائر أكثر من رابطٍ للوصول لها. مثال من المحتويات الهامة للزائر العروض الخاصة بالعام الدراسي الجديد، لكي يصل إليها عليه أن يضغط على قائمة العروض > العروض الجديدة > عروض العام الدراسي 2012 … لكن بدلًا من كل هذه الضغطات يجب أن توفر له رابطًا مباشرًا للعروض الخاصة بالعام الدراسي الجديد في الرئيسية وبضغطة زر واحدة.
  6. التسجيل، في حالة وجوب التسجيل بالموقع يجب أن يكون هناك رابط للتسجيل أو نموذج للتسجيل بالرئيسية.

ثانياً : نموذج رسالة المصعد لتصميم رئيسية الموقع

فى علم العلاقات الإنسانية، يوجد نموذج اسمه “نموذج رسالة المصعد” وهو نموذج يهدف إلى مساعدة الشخص في تقديم خدماته أو فكرته أو مشروعه للآخرين خلال 3 إلى 5 دقائق، وهي الفترة التي يقضيها مع الآخرين فى صعوده ونزوله بالمصعد. نموذج رسالة المصعد يتكون من خمسة مراحل سأوضحها بمثال يفترض كاتبًا محترفًا يقدم خدمة كتابة مذكرات التسويق والسير الذاتية… إلخ ويرغب فى إقناع عميل أثناء صعوده معه فى المصعد:-

المرحلة الأولى: اجذب انتباه المستمع

مثال: هل تخسر المال والوقت لعدم قدرتك على الكتابة باستمرار، كيف تتغلب على ذلك؟

المرحلة الثانية: أخبرهم بما ستقدمه

مثال: أنا كاتب مستقل لدي القدرة على كتابة المذكرات ومواد التسويق والسير الذاتية …إلخ

المرحلة الثالثة: صلب الرسالة حدد فيها نقاط إقناع تميزك

مثال: لم أنا؟ لأنني سأوفر وقتك ومالك، لأنني كتبت سير ذاتية لأكثر من شخصية عامة منهم …

المرحلة الرابعة: خاتمة وملخص

مثال: كرر نقاط الإقناع وما يميزك بشكل مختصر ومركز.

المرحلة الخامسة: النهاية، حدد لهم الخطوة التالية فى حال رغبتهم التعاقد معك

مثال: إليك رقم هاتفي والكارت الشخصي الخاص بي للتواصل معى.

عند مقارنتي بين هذا النموذج وبين ما يجب أن تقدمه رئيسية الموقع وجدت أن هناك تشابهًا كبيرًا بينهم، وهذا التشابه وجدته في الآتي:-

الوقت

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

التركيز والإقناع

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

الخطوة التالية

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

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

الصورة التالية توضح تطبيقًا لنموذج رسالة المصعد على تقسيم محتويات ورئيسية موقع …

تطبيق نموذج رسالة المصعد لتصميم رئيسية موقع
تطبيق نموذج رسالة المصعد لتصميم رئيسية موقع

 ثالثاً : مثال لتصميم رئيسية موقع وفقا لنموذج رسالة المصعد

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

صورة توضح مثال لتصميم رئيسية موقع تستخدم نموذج رسالة المصعد

رابعاً : الخلاصة

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

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

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

لو طبقنا هذا النموذج لتصميم رئيسية الموقع سيسهل علينا تنظيم وتحديد أولوية العناصر التي من الممكن تعرض فى الرئيسية. يمكنك مراجعة الصورة التي في الرابط التالي لتوضيح تطبيق هذا النموذج على تصميم الموقع [هنا]، يمكنك رؤية مثال لتصميم رئيسية موقع موجودة فعلاً تطبق نموذج رسالة المصعد وهى واجهة موقع 37signals.com صورة شرح المثال [هنا].

خامسا : المراجع المستخدمة فى إعداد هذا الدليل 

  1. رؤية شخصية مني للشكل الأفضل لرئيسية موقع صديقة للمستخدم.
  2. Don’t Make Me Think by steve krug.
  3. أبحاث نيلسون جاكوب Jakob Nielsen.
  4. العدد رقم 59 من نشرة علاقات التي تصدرها مؤسسة شعاع للإعلام العلمى

عن كاتب المقال

أحمد مجدي
مهندس تجربة الاستخدام، مدير المشروعات في نيوكسيرو ورئيس تحرير معمل ألوان، متخصص في تصميم واجهات مواقع ،تطبيقات الويب والموبايل منذ عام 2006. تويتر: @ahmedmagdi


كل مقالات الكاتب

اترك تعليقك على المقال 3 تعليقات

اترك تعليقاً على المقال

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