مقاييس تصميم صفحات المواقع

مقاييس تصميم صفحات المواقع:

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

إن ما يلي يوضح سبب ضرورة التصميم الناجح والمرن على الشبكة الإلكترونية ,وكذلك السبب الذي من أجله تم صنع هذا الدليل.

أجب عن عدد من الأسئلة الأساسية بهدف التركيز:

من سيقوم بزيارة موقعي الإلكتروني ! ... ولماذا ؟

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

قم بتشكيل / تصميم / صفحة قياسية أساسية للموقع الإلكتروني:

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

· ضع في اعتبارك الحيِّز الحقيقي للشاشة. ضع المعلومات الأكثر أهمية إلى أعلى يسار الشاشة .

· لا تفترض حلول بخصوص الشاشة أو تفترض حجمها.

· قم بتسهيل الإطلاع:

· إن غالبية المشاهدين ( حوالي 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).

بدي الردووووووووووووووود امانة

بناااااات

لا تفشلووووووووني
بدي الردووووود

خطيييير
والله مفييد
تسلمي يالغلآلآ
والله انك رهييبه
دمتي بووود

Thanks

مــنورين موضوعي

» صفحات على الفيس بووك مصممة بطريقة ابداعيه
» اندونيسيا تحجب المواقع الإبآحيـة خلال شهر رمضـان
» عمل تصميم بلندي / ‏
» درس تصميم الأوسمة
» قصر من تصميم فتاة سعودية