مكعب تقني

جديد اخبار التقنية والشروحات والدروس في مختلف مجالاتها

آخر الأخبار

جاري التحميل ...

21 من نصائح تحسن من مظهر وتصميم مدونتك

في هذه المقالة ، أقترح 21 نصيحة حول تصميم مواقع الويب لتحسين بيئة العمل ومظهر مدونتك. الهدف من اللعبة: جعل التصفح ممتعًا للزائرين ، مع مراعاة قيود محركات البحث.

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

1. ضع العناصر الأساسية التي سيختارها زوار موقعك

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

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

2. انقر على شعارك أو عنوان موقعك

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

3. يجب هيكلة المعلومات بطريقة منطقية

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

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

من الواضح أن البعض لديهم قيادة رائعة للموضوع. مهم. أن نرى على Arngren.net.
Arngren

4. المحتوى المهم هو فوق الخط المائي.

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

5. اسمح للزائرين بالبحث في موقعك

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

7. قل وداعًا للقوائم التي لا تنتهي.

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

8. يجب أن تكون الروابط سهلة الكشف

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

9. لا تضاعف المصادر الأصلية

استخدم مصدرًا أصليًا للعناوين ، لم لا ... ولكن كتابة جميع النصوص الخاصة بك مع هذا النوع من المصدر يمكن أن تثبط الزائرين. في تصميم الويب ، من الأفضل أن تقصر نفسك على 3 مصادر مختلفة ، مع الحفاظ على خط قابل للقراءة للغاية لنص النص.
Tipografía web

10. تأكد من أن الشخصيات قابلة للقراءة

يمر عبر عدة عوامل:

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

11. يجب أن يكون هناك بعض التباين ...

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

12. ... ولكن كن حذرا مع خلفيات سوداء!

كانت النصوص الواضحة على خلفية سوداء شائعة للغاية في التسعينيات ... ولكن يجب أن تكون حذراً للغاية مع هذا النوع من الاختيار ، خاصةً إذا كان لديك موقع يركز على النص. القراءة على خلفية سوداء أكثر تعبًا. إذا اخترت خلفية سوداء ، تفضل بنص رمادي فاتح على نص أبيض بالكامل لتقليل هذا التعب البصري قليلاً.
Texto blanco sobre fondo negro y texto negro sobre fondo blanco

13. تجنب أقواس قزح!

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

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

الاستخدام الجيد للألوان غالبًا ما يمنح موقعك مظهرًا أكثر احترافًا.

14. يحتاج موقعك إلى التحميل بسرعة

إذا استغرق تحميل صفحتك أكثر من ثانيتين ، فإنك تفقد بالفعل 12٪ من زائريك. بعد 4 ثوان ، فقدت ربع. على الهواتف المحمولة ، يكون الزوار أكثر صبرًا ... لكن لا يتم أبدًا شحن أكثر من 6 إلى 10 ثوانٍ. فكر في تحميل الصور ، والتي تزن الصفحات غالبًا.

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

أصبحت سرعة التحميل معيارًا ، ويتم تطوير تنسيقات مثل تنسيق AMP لجعل الويب أسرع على الأجهزة المحمولة.

أوصي بمقالتي حول تحسين سرعة التحميل لمزيد من النصائح!

15. الإعلان لا يتداخل مع الملاحة.
النوافذ المنبثقة ، الإعلانات التي لا نعرف كيفية إيقاف تشغيل الصوت تميل إلى أن تكون غير مقبولة للزوار ... بل إنها أكثر إحراجًا للهواتف المحمولة عندما يغطى الإطار المنبثق خارج الشاشة الشاشة بأكملها دون أن نعرف كيفية التخلص منها.
El peor sitio web del mundo: el peor sitio web del mundo
6. النظر في الاختلافات في دقة الشاشة
لا أستطيع أن أقول ما يكفي: التصميم الحساس ضروري الآن. يجب أن يتكيف موقعك مع القراءة على الأجهزة المحمولة والأجهزة اللوحية (43٪ من عدد زياراتي لأعطيك فكرة ، بل لدي عملاء يصلون إلى 70٪!).

لا تتردد في تجربة الشاشة في متصفحات مختلفة. يجب ألا يضطر الزائر أبدًا إلى التمرير أفقيًا لعرض صفحته بالكامل.

17. تجنب نظم النزوح لانهائية

هذه تصميمات خالية من الصفحات ، حيث يتم عرض المحتوى مع تقدم الصفحة.

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

يمكنك تصفح هذه النصائح الإضافية للإشارة الصحيحة إلى صور المدونة الخاصة بك.

19. المواد ذات أولوية جيدة

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

20. الكتابة للبشر

وداعا العناوين المليئة بالكلمات الرئيسية ...

21. لا تتردد في استخدام الأدلة البصرية


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

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




عن الكاتب

Sabine Berthelot

التعليقات


اتصل بنا

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

جميع الحقوق محفوظة

مكعب تقني