9 مبادئ عامة لمساعدتك في تصميم موقع جيد!

9 مبادئ عامة لمساعدتك في تصميم موقع جيد!

0 المراجعات

دليل شامل للمساعدة في فهم أساسيات تصميم موقع ويب رائع

ملخص سريع

 

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

تصميم ستيف جوبز هو أكثر من مجرد شكل أو شكل. التصميم هو كيف يعمل.

قانون Jakobs: يقضي المستخدمون معظم وقتهم على مواقع الويب الأخرى. هذا يعني أنهم يريدون أن يعمل موقعك بشكل مشابه للمواقع الأخرى المألوفة لديهم.

كيف تصمم موقع ويب رائع؟

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

1. سهولة التنقل

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

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

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

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

2. تصميم مستجيب

لنبدأ أولاً بفهم أساسيات. التصميم سريع الاستجابة هو نمط موقع أو صفحة ويب متوافقة تمامًا مع أجهزة الكمبيوتر المحمولة أو الهواتف الذكية أو أجهزة الكمبيوتر أو أي جهاز عرض آخر ، بغض النظر عن النسب في جوانبها. تشير نسبة العرض إلى الارتفاع إلى حجم جهاز العرض وعرضه. يريد كل مستخدم في الوقت الحاضر تطبيقًا متوافقًا مع الجوّال للموقع. تقع على عاتق المصمم مسؤولية إنشاء موقع ويب مصمم للشاشات الأكبر حجمًا ولكن أيضًا مراعاة الشاشات الأصغر حجمًا. يجب ألا يعمل موقع الويب فقط مع هواتف iPhone و Blackberry (إذا كان هذا هو الحال في الوقت الحاضر) وهواتف Samsung و One Plus. يجب أن يعمل التصميم على جميع الهواتف الذكية في السوق. إذا لم يكن كذلك ، فعلى الأقل حاول كل هاتف على الأقل. تتضمن بعض الاقتراحات الخاصة بالتصميم المستجيب ما يلي:

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

نصيحة إذا كنت تريد أن يكون التصميم الخاص بك عالي الجودة ، فاتبع الخطوات التالية:

تعلم -استكشف و -التقييم -النموذج الأولي

ربما تكون قد شاهدت هذه العبارة قبل ملايين المرات "نهج تصميم الجوال أولاً". معايير التصميم على النحو التالي:

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

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

3. نفس نظام الألوان (الاتساق)

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

تتضمن بعض الاقتراحات ما يلي:

  • لا تستخدم الظلال البراقة للغاية وكذلك الظلال الداكنة على موقعك.
  • ضع علامة على المعلومات الحيوية كلما دعت الحاجة.
  • تأكد من استخدام مجموعة الألوان المناسبة.
  • الحفاظ على اللون في أدنى حد ممكن.

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

4. واجهة مستخدم مريحة

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

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

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

  • من هم الأشخاص الذين يستخدمون HTML0
  • ما هي الأنشطة التي يتم تنفيذها
  • الموقع الذي يحدث فيه التفاعل.

يجب علينا تحسين تفاعل المستخدمين مع منتجاتهم. من أجل ضمان توافقها مع احتياجات وأنشطة المستخدمين.

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

 

5. تلبي المحتويات توقعات المستخدم فيما يتعلق باستخدام مواقع الويب

 

عندما يتعلق الأمر بالعثور على التفاصيل الصحيحة ، لن يكون الشخص راضيًا في حالة عدم تلقي المعلومات التي يحتاجها. كن دقيقا عند إعطاء البيانات. على سبيل المثال ، على سبيل المثال ، على موقع كلية الفنون بجامعة ييل ، في القسم الخاص بالرسوم الدراسية ، أعلنوا مؤخرًا أن "تكلفة التعليم للعام الدراسي 2019-2020 هي 39،924 دولارًا. ووفقًا لمؤسسة جامعة ييل تحتفظ بـ الحق في تغيير معدلات التعليم إذا لزم الأمر ".

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

  • ما هي الرسوم الدراسية للمدرسة 924 دولارًا ، 39 دولارًا
  • كم هي رسوم الطالب الدولي
  • ما هو تقسيم الرسوم الدراسية الصحيح

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

  • سهولة البحث باستخدام HTML0. للبحث
  • تأكد من أن تكون على يقين
  • التركيز على دور المستخدم
  • يجب أن تكون القائمة مصحوبة بإجراءات ملموسة لاتباعها

نصائح: مهما كانت المعلومات التي تقدمها للمستخدمين ، فضع في اعتبارك "عدم التجاوب مع الأدغال مطلقًا"

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

6. الأداء: سريعًا لتوضيح شيء ما

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

  • قم بتحويل ملفاتك
  • تأكد من تحسين صورك
  • لا تستخدم الكثير من الصور: استخدم النص بدلاً من ذلك.
  • تقليل طلبات HTTP

لقد جربت موقع Gmail باستخدام أدوات Pingdom وكانت النتائج مثيرة للاهتمام. بطبيعة الحال ، نظرًا لأنه منتج Google والنتيجة ستكون مذهلة. لذلك ، يجب عليك تصميم موقعك بحيث يبدو الأداء مثل الموجود في الصورة أدناه:

في الصورة ، يقدم موقع الويب هذا اقتراحات لتحسين سرعة الأداء ، مع التوثيق المناسب. الأمر يستحق المحاولة.

7. ردود الفعل على حالة التقدم

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

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

 

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

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

8. لا تستخدم "التنبيه / الحوارات" عندما لا تكون هناك حاجة إليها.

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

لا تفعل هذا

استخدم هذا

تتضمن بعض الإرشادات التي يجب اتباعها ما يلي:

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

9. حاول تقليل عدد الأخطاء إلى 404 أو 500.

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

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

الإغلاق

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

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

التعليقات ( 0 )
الرجاء تسجيل الدخول لتتمكن من التعليق
مقال بواسطة

articles

419

followers

133

followings

3

مقالات مشابة