مقاييس تصميم صفحات المواقع :
في ظل وجود الخيارات العديدة المتوفرة على الإنترنت فإن مقاييس تصميم صفحات المواقع ضرورية . فعلى سبيل المثال يقوم العديد من زائري المواقع الإلكترونية بإغلاق نوافذ الرسوم، وذلك من أجل تسريع عملية تنزيل الصفحات على الشاشة، إذن نجد أن من الضروري وجود خيار نصي يغني عنها.
كم أن وسائل القراءة الصوتية الخاصة لمساعدة ذوي المشاكل البصرية تقوم أيضاً بقراءة خيارات النصالموجودة. وكذلك الحال بالنسبة لمواقع المكتبات القائمة على أساس النص.
كما قد تم إيجاد تكنولوجيات متنقلة جديدة تعتمد على النص بشكل أكبر وهي تتضمن أمور مثل المفكرة الشخصية الرقميةو الجوالات …الخ.
إن ما يلي يوضح سبب ضرورة التصميم الناجح والمرن على الشبكة الإلكترونية ,وكذلك السبب الذي من أجله تم صنع هذا الدليل.
أجب عن بعض الأسئلة الأساسية بهدف الوصول للفكرة :
- من سيقوم بزيارة الموقع الإلكتروني؟ ولماذا ؟
- وكيفية الوصول اليهم؟
- كيف للمحتوى أن يلبي رغباتهم ويجعلهم يتواصلون معك؟
لابد من الكتابة لهم بشكل خاص واستعمال مفردات مناسبة أو توضيحها بالتعريف وأيضا استعمال مفاهيم عريضة للمفاهيم الخاصة قبل تطوير موقعك وذلك كي تتجنب البعد والتشتت عن الفكرة الأساسية.
قم بتشكيل و تصميم صفحة قياسية أساسية للموقع الإلكتروني ولا تفترض أن الشيء الذي تراه أنت هو ذات الشيء الذي سيراه المستخدمون الآخرون.
فانه يوجد القليل من الثبات ما بين المنصات التي تنطلق منها المعلومات، وأحجام الشاشات، والألوان وأنواع الحروف الموجودة كخيار أول في البرنامج، وكذلك حتى في أذواق الأفراد بخصوص تصفح الإنترنت.
- الحيِّز الحقيقي للشاشة فلابد من وضع المعلومات الأكثر أهمية في مكانها المناسب بالشاشة.
- الاخذ في الاعتبار اختلاف الشاشات وحجمها.
- تسهيل الإطلاع: فغالبية المشاهدين (حوالي 75%) يقومون أولاً بالإطلاع على النص والقوائم للحصول على المعلومات ( ويقومون بتجاهل الصور) .
- تقليل التفاصيل والعناوين الفرعية في الصفحة الأساسية، ( أقل من 20% يقومون بالقراءة التفصيلية كلمة كلمة).
- لابد من جعل العرض والتصفح عادياً من حيث المقاييس: الشعارات – القوائم – والصفات في مواقع ثابتة وبالإمكان توقعها.
- استخدام (وصلة العودة إلى أعلى) في نهاية الصفحات الطويلة .
- تسمية الروابط – الوصلات حسب المضمون والـ (URL) الخاص بالصفحة .
- تقليل وجود المساحة البيضاء على صفحات القائمة الأساسية فإنها تسهّل عملية البحث.
- بناء المضمون من خلال صفحات متصلة ومترابطة.
- إن الصفحات الموصولة يجب أن تكون ثلاثة أو أقل ضمن الموقع.
- يجب دائماً أن يعرف الزائرون أين هم على الموقع ( أين يتواجدون على موقعك)، وأن يكونوا قادرين على الرجوع والوصول لنقطة البداية .
- جعل النص سهلاً للقراءة : استعمال النشرات القصيرة – العناوين – العناوين الفرعية – نوع الخط وحجمه
- فصل أجزاء النص بواسطة مساحات بيضاء.
استعمال النصوص:
- لا نملأ الشاشة بالنص : أي جعل أجزاء النص تقع في الوسط وأن تكون محاطة بهوامش.
- أنواع الخطوط وأشكال الحروف وأحجامها : استعمال أنواع الحروف العادية أو الحجم الشائع استعماله، هذا إن لم نستعمل نوع الحروف الموجودة اصلاً كخيار أول في البرنامج.
- استعمال البنوط المناسبة للحروف التي تظهر على الشاشة يحكمها قياس الشاشة ودرجة الوضوح عليها .
- ومن أجل أكبر قدر من سهولة الوصول، فإن حجم الحروف يجب أن يكون ملائماً ومتناسقا.
- فإن أصغر حجم للحروف يجب أن يكون 10 ( PC) أو 12( Macitosh) أومتوسط أو ” 3″.
- قم باستعمال حجم كبير من الحروف في المواقع التي تخاطب الأطفال الصغار وكبار السن.
- لقد أظهرت الأبحاث وجود اختلاف بسيط من حيث سرعة القراءة أو مسألة التفضيل عند استخدام أحجام وبنوط مختلفة .
- استعمال نوع واحد من البنوط لتوضيح، الاتجاهات والتجوال , وقم باستعمال بنطاً آخر للمضمون . لا تقم باستعمال أكثر من نوعين من البنوط ضمن نفس الموقع.
- تجنب أنواع الحروف ذات الأشكال ( الملونة، التي تظهر وتختفي والتي تبدو وكأنها انفلتت من لفافة ) ففي أغلب الأحيان هذه الحروف لا تحقق عرضاً مناسباً أو أنها تعتبر مزعجة.
استعمال الألوان بحكمة :
- تناسق الألوان ومطابقتها أو تناسبها مع الهوية الخاصة بعملك.
- قم باستعمال ألوان تختلف عن بعضها البعض بشكل كبير وذلك بالنسبة للون الخلفية من جهة ولون النص من جهة أخرى . ومن المفضل أن تكون الخلفية فاتحة اللون وأن يكون النص داكن اللون.
- تجنب الخلفيات التي تؤثر سلباً على وضوح النص.
- استعمل لوحة ألوان آمنة للمتصفح وتتألف من 216 لوناً فإن هذه الألوان تتسم بالمقاييس المألوفة لجميع المتصفحين .
استعمال الصور:
- إن الصور يجب أن لا تتجاوز 75 وحدة من وحدات تشكيل الصورة للبوصة الواحدة (Pixels) فهذا هو الحد الذي بالإمكان توصيله عبر الإنترنت، أما ما يزيد عن ذلك فسوف يؤدي إلى بطء عملية التنزيل على الجهاز.
- استعمال ملفات الـ ( JPG) وذلك للصور الفوتوغرافية ومن مثل تلك التي تحتوي على ألوان مظللة.
- استعمال ملفات ( gif) للصور مثل الأشكال ذات المجالات الملونة الواسعة والثابتة.
- تجنب عرض الصور على أنها وصلات وروابط وإذا كان ذلك ضرورياً فإن النص البديل يجب أن يصف محتوى الصفحة الموصلة.
- تجنب الإشارة إلى الصور على أنها نص بشكل ديكور أو غير ذلك فقد تتحقق قيمة بصرية ضئيلة في حالة وجود حجم نسبي للنص.
- تجنب استعمال الصور الشفافة أو الصور ذات الـ ( Gif) المؤلفة من وحدة واحدة ملونة من الأجزاء التي تتكون منها الصورة على الشاشة دون وجود سبب جيد لعمل ذلك. فبعض الناس يقومون باستعمال هذه الوسائل كحشوات للوصول إلى شكل ترتيب الصفحة وينتج عن ذلك أنهم يعملون صفحات لا يمكن استعمالها من قبل الزائرين الذين يتجولون وهم يغلقون برنامج تنزيل الصور.
استعمال القوائم كي تشكل عرضاً أو تصميماً ، ولكن :
- تحديد عرض القوائم وخلايا القوائم بنسب مئوية وليس بالوحدات المطلقة لأجزاء الصورة على الشاشة بشكل عام، فإن الصفوف الأفقية يجب أن تتقلص أو تتمدد لتلائم حجم الشاشة.
- الصفوف الأفقية ذات العرض الثابت لا تتطابق في الكثير من الأحيان مع أحجام الحروف المكبرة. كما أن الصفوف ذات العرض الثابت قد تملأ وتحدد المساحة العمودية على الشاشات الصغيرة .
- تجنب وضع القوائم مع الفقرات أو خلطها مع النصوص .
- تجنب السطور المتعددة من النص في خلايا عبر الصفوف بقراءة السطر العلوي عبر الصف الأفقي قبل أن تتوجه إلى السطر الثاني الذي يقع في الأسفل منه.
الوصلات والروابط (اللينكات):
- كن جيداً في الوصف قدر الإمكان عندما تقوم بوصف مضمون وصلة ما.
- قم بترك فراغ ثم ضع إشارة العمود ثم فراغ وذلك للفصل ما بين الوصلات التي تأتي بشكل متتالي.
- لا تستعمل عبارات مثل “اضغط هنا” – “أدخل”.
- تجنب الصور المستعملة كروابط فمن الصعب من ناحية الإبصار الإنتباه إلى كونها وصلات.
- تجنب أسلوب الإنسياب المستمر (Roll Over) للقوائم النازلة من الأعلى إلى الأسفل. إذ أنه من الصعب من ناحية الإبصار معرفة ما إذا كانت هذه القوائم تحتوي على وصلات. كما أنه من الصعب تقديم وصف كافٍ لمحتويات الوصلات.
ما الذي يجب تجنبه؟:
- البراويز أو نستعمل بديل ليس له إطار.
- برمجة الجافا (Java) والفلاش (Flash) حيث كان ممكناً.
- الأشكال التي ليس لها فائدة حيث إنها تشد الانتباه بعيداً عن المضمون.
- الأشكال التي تفتقر إلى الأعلى وإلى الأسفل والتي تدور أو التي تتحرك بشكل عام دون أن تكون ذات أهمية من حيث القيام بدور توضيحي للمضمون.
- النص المطول الذي يبدو على الشاشة وكأنه انفلت من لفافة.
- شاهد الصفحات الخاصة بك: برمجة تقوم على أساس الأبيض والأسود وذلك للتأكد من إمكانية وصول ذوي مشكلة عمى الألوان.
- إلغاء الصور للتأكد من إمكانية وصول ذوي المشاكل البصرية , وكذلك إمكانية وصول التكنولوجيات الخالية من الصور.
- قم بالمشاهدة بواسطة بدائل من وسائل التجوال (Linux , Macintosh , PC… الخ)
- قم بالمشاهدة بواسطة بدائل من وسائل التجوال (Internet Explorer , Netscape , Opera , Linux).
- قم بالمشاهدة بواسطة بدائل من أحجام النص والـ (Windows).
اطلب الان
