الدرس5 : 19 خطأ من أخطاء التصميم
ملاحظة: أنا مضطر لطرح الدروس بشكل أسرع، لأنني قد أسافر قريباً وأريد إنهاء دروس التصميم على الأقل قبل أن أسافر :)
----------------------------------------
لكي نحسن تصميم مواقعنا، لا بد أن نتجنب أخطاء التصميم التي يقع فيها المبتدئين عادة، وهذه الأخطاء على بساطتها إلا أنها تضايق زوار الموقع فتدفعهم إلى الخروج من الموقع وعدم العودة مرة أخرى، وعندما نصمم المواقع يجب ان نتذكر دائماً أن التصميم يجب أن يكون سهلاً وبسيطاً حتى يستطيع زوار الموقع الوصول إلى المحتويات والخدمات بسهولة تامة.
وتذكر دائماً: القليل يعني الكثير، وبأسلوب آخر البساطة دائماً هي الأجمل :)
1) صفحة البداية
بعض المواقع تضع صفحة بداية للموقع عبارة عن صورة ضخمة ترحيبية أو فلاش كبير الحجم يعرض جمل وصور إعلانية للموقع، والبعض لا يضع وصلة صغيرة "تجاوز العرض" او بالإنجليزية "Skip intro" فيضطر الزائر إلى إنتظار الصورة أو الفلاش حتى ينتهي ثم يدخل في الموقع، وسيكون لنا درس حول تفاصيل الصفحة الرئيسية :)
2) الرسائل المنبثقة!
عندما تدخل إلى أحد المواقع، تظهر لك رسالة مفاجئة "رشحني في مسابقة أفضل 100 موقع عربي" أو "أهلاً بك في موقعنا" أو "شحالك؟! تفضل في الموقع ولا تطلع منها"!! لا تضع مثل هذه الرسائل أبداً، إنها مزعجة :)
3) وجود كم كبير من الصور
لا تجعل أي صفحة من صفحات موقعك تحتاج إلى أكثر من 20 ثانية لكي يكتمل ظهورها في متصفح الزائر، وإلا سيسأم الزائر من الموقع ويخرج، لذلك لا تكثر من وضع الصور، ولا تضع أي صورة لا فائدة منها، وحاول أن تقلل من حجم الصور بقدر الإمكان.
4) إستخدام تقنيات كثيرة
فلاش، جافا، فيديو، صوت، هذه التقنيات وغيرها تثقل حاسوب الزائر، لا تستخدمها إلا عند الحاجة، وفكر في الزوار الذين يمتلكون حواسيب قديمة كيف تصبح بطيئة كالسلحفاة حينما يزورون مواقع تحوي تقنية الجافا.
5) عدم ترتيب المحتويات بشكل منطقي
بشكل عام المحتويات الرئيسية يجب أن تكون في منتصف الصفحات وتأخذ أكبر مساحة من تصميم الموقع، وغير ذلك الخدمات والوصلات وأية أشياء أخرى يجب أن تكون في أعلى أو يمين الصفحة.
6) الألوان الكثيرة الغير متناسقة
تحدثنا عنها في الدرس الماضي، لا تجعل موقعك يحوي أكثر من أربعة ألوان بشكل عام.
7) تصميم الموقع بحجم أكبر من الشاشة
أيضاً تحدثنا عن هذه النقطة في الدرس الماضي، معظم مستخدمي الحاسوب يستخدمون دقة 600 × 800 في شاشاتهم، فعليك أن تصمم موقعك لهذه الدقة وليس أكبر من ذلك.
8) الصور المفقودة
بعض المواقع تعتمد بشكل كبير على الصور، ويتضايق الزائر عندما يرى صور لا تظهر، فعليك أن تتأكد أن الصور تظهر في جميع صفحات موقعك، قم بزيارة موقعك من حاسوب آخر غير حاسوبك، وتأكد أن مصدر صورك في شفرة HTML ليس حاسوبك بل موقعك، قد تجد مصدر الصور في الشفرة هكذا <img src="c:\site\img\image1.gif"> وبكل تأكيد ستظهر الصورة لديك لكنها لن تظهر لدى الزوار :)
9) عدم وضع نص ALT للصور
عندما تمرر مؤشر الفأرة على الصور في المواقع، تجد أن هناك نص صغير يخبرك بأن هذه الصورة للقسم كذا وكذا أو يخبرك عن فائدة الصور "إضغط هنا لكي تشترك في القائمة" وبعض المتصفحين لا يحبون ظهور الصور في المواقع لكي يتصفحوا الشبكة بشكل أسرع، فيظهر لهم هذا النص مكان الصورة لكي يفهموا فائدة الصورة.
مثال: <img src="img/logo.gif" alt="Site Logo"> عندما يضع الزائر مؤشر الفأرة على الصورة سيظهر له نص "Site Logo".
10) النص غير واضح
ضع صفحة زرقاء واكتب عليها باللون الأحمر! ما رأيك؟ نعم إن هذه الألوان تؤذي العينين :) ما رأيك لو وضعت اللون البنفسجي كخلفية والنص بلون أخضر؟! مريع! لذلك عليك أن تختار الألوان بعناية لكي لا تتبع عيون الزوار الغالية :)
11) صوت في الخلفية
تدخل في بعض المواقع فتسمع أغنية أو زئيراً أو صوت خامل غليظ يقول لك: يا هلا بالضيف اللي جانا! أقلط! :) أرجوكم لا تضعوا أي صوت في الصفحة لأن هذا يبطأ ظهور الصفحات وكذلك الأمر مزعج فعلاً أن لا أستطيع التحكم بالأصوات التي تخرج من سماعات الحاسوب.
12) الصور المتحركة
إنها مزعجة فعلاً خصوصاً إن لم يكن لها فائدة، لا تضع أي صورة متحركة بدون أي هدف أو غاية مفيدة.
13) الإطارات
بعض المواقع تستخدم الإطارات في التصميم frames، وهي مزعجة إن لم تستخدم بشكل حسن، عليك أن تتأكد قبل استخدامها أن الموقع سيصمم بشكل جيد، وإلا فلا تستخدمها أبداً.
14) صفحات لا تنتهي
أعني أن هناك صفحات طويلة جداً، 100 صورة و آلاف الكلمات عدى الفلاش والجافا، وهذا كله يأخذ من وقت الزائر 10 دقائق فقط!! قسم المواد على عدة صفحات ولا تجعل الصفحات طويلة لا تنتهي.
15) الموقع قيد التطوير
لا يوجد موقع إنتهى تطويره إلا إذا قرر صاحبه أن يهمله، لذلك لا تضع أية لافتة أو صورة تفيد أن الموقع قيد التطوير، وإن كان الموقع فعلاً قيد التطوير ولم تضعه على الشبكة، فلا داعي أن تعلن عنه قبل أن تضع على الشبكة.
16) التصميم المتغير
وأعني به التصاميم المختلفة لصفحات الموقع الواحد، وقد تحدثنا عن هذه النقطة في الدرس الماضي، عليك أن توحد تصميم جميع صفحات موقعك بكل بساطة :)
17) الجداول ذات الأبعاد الثلاثية
عند استخدامك للجداول، لا داعي أن تستخدم خاصية الحدود فيها، وإن كنت ستفعل فلا تجعل عرضها أكبر من 1، بعض المواقع تجد فيها عرض حدود الجداول أكثر من 3 فتظهر الجداول كأنها ثلاثية الأبعاد، وهي بشعة حقاً.
18) عدم تسمية الصفحات
البعض ينسى أن يضع عنواناً للصفحة، وما أقصده هو العنوان الذي يظهر أعلى المتصفح، عليك دائماً أن تضع العنوان في صفحاتك عن طريق خاصية <title>العنوان</titel>.
19) الخطوط غير متناسقة
إسنخدم خطين فقط في موقعك، أحدهم للعناوين والآخر للنصوص، ولا تستخدم أية خطوط غير مدعومة من قبل حواسيب الزوار، ومن أفضل الخطوط للمواقع Tahoma وArial وWindows UI وكذلك Veranda.
فكرة: خصص في قائمة المفضلة أو Favorites مجلداً واحفظ عناوين الدروس :)
