مدونة قابلية الاستخدام

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

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

يرجى ملاحظة اني ساستخدم كلمة “عنصر” للإشارة الى أي عنصر يكون عادة في صفحات الانترنت من عناوين وصور ونصوص وما الى ذلك.

فلنبدأ:

1. تخلّص من توسيط النصوص

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

التطبيق:

2. ضع مسافة كافية بين عناصر الصفحة

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

التطبيق:

3. تخلص من الحدود حول العناصر

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

التطبيق:

4. استخدم الخطوط بشكل سليم

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

التطبيق:

5. اجعل العناصر متوازيه طولياً

اجعل عناصر الصفحة قدر الامكان متوازية طولياً كما توضّح الخطوط الحمراء في الصورة:

التطبيق:

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

6. غيّر الشكل الافتراضي لعناصر الصفحة

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

احرص عند تغييرك للشكل الافتراضي للروابط على أن يكون الشكل جديد لها يجعها تبدو كروابط (ذات لون بارز مميّز، ويفضّل وجود الخط تحت الرابط).

التطبيق:

ما قمت به هنا هو تغيير لون النصوص والعناوين الى أسود باهت بنسبة بسيطة (#222222 بدلاً من #000000)، والقيام بنفس الشيء لالوان الروابط، ومن ثم تغيير شكل نقاط القوائم الى مربّع بدلاً من دائره. تغييرات بسيطة، لكنها تؤثر ضمنياً على تجربة الزائر.

7. استخدم زوايا دائرية للصناديق التي تحيط العناصر

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

التطبيق:

8. استخدم صور عالية الدقه

لا شيء يعطي انطباع سيء و “غير مريح” عن موقعك مثل الصور منخفضة الدقّه، وغالباً تحصل هذه المشكلة في المواقع التي تستخدم صور مصغّره (thumbnails) في الواجهة. استخدم دائماً صور عالية الدقّه، وعند تصغيرك للصور فاستخدم طرق تساعدك في انتاج صور تحافظ على دقتها.

التطبيق:

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

9. استخدم الواناً مريحة ومتناسقة

قد تبدو هذه النقطة بديهية، ولكن أغلب الناس (وانا منهم) لا يستطيعون تركيب عدة ألوان متناسقة مع بعضها البعض. لكن لا تقلق، فموقع مثل Colour Lovers (ومثله الكثير) يوفّر لك العديد من الألوان المتناسقة التي يمكن أن تستخدمها في تصميم صفحتك. وأرجوك، لأجل أعين زوّار موقعك، تجنّب استخدام الألوان الفاقعه للخلفيات أو العناصر الكبيرة.

التطبيق:

الختام

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

لم لا تطبقّها على موقعك الآن وترى الفرق بنفسك؟