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

الجواب القصير: لا

الجواب الطويل: اكمل القراءة…

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

متى تشرح الموقع بشكل مختصر

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

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

متى تستعين بالصور لشرح الموقع

هناك حالات يفضّل عندها ان تستعين بالصور لشرح فكرة الموقع، منها:

• اذا كان الموقع يتطلب المرور بخطوات معينة للاستفادة منه، مثل موقع خمسات:

متى تستعين بالفيديو لشرح الموقع

• اذا كان الموقع يقدّم خدمة تحتوي على بعض الافكار الجديدة (او التي قد تكون غير مألوفة لدى الشريحة المستهدفه)، كما رأينا في موقع Google Plus عند اطلاقه.
  
• اذا كان الموقع يقدّم خدمة بمقابل، بحيث تستخدم مقاطع الفيديو لشرح الخدمة أو اقناع الزائر الجديد للاشتراك بها، كما هو موجود في موقع تطبيق Basecamp:
  

متى تستعين بالشروحات الطويلة

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

خلاصة الموضوع

النقاط السابقة قد لا تصلح كقواعد عامة تتبعها في جميع المواقع، لكن مهما كان نوع موقعك، فارجو ان تضع الملاحظات التالية بعين الاعتبار عند التفكير بالطريقة المناسبة للشرح:

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

هل يمكنك اكتشاف الاخطاء الموجودة في طريقة العرض هذه؟ علماً بان “الحل” يوضّح 4 أخطاء في التصميم.

هذه طريقه تقليديه للتصميم: صمّم شيئاً، ارفق ارشادات الاستخدام معه، ودع المستخدمين يتبعونها.

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

قد تتسائل “كيف يحدث ذلك؟ لم أستخدم شيئاً كهذا من قبل”، ولكن في الواقع سبق لك ان استخدمت العديد منها.

على سبيل المثال، لابد انك قمت باستخدام مقص كهذا من قبل:

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

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

هذا باختصار ما أعني بالارشادات الضمنيه.

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

هذا هو شكل النظام الترفيهي:

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

حسناً تحدثّنا بما فيه الكفايه عن الأشياء خارج نطاق الانترنت. ماذا عن مواقع الانترنت؟

هي أيضاً تحتوي على تصاميم ترشد المستخدم ضمنياً الى ما يجب أن يقوم به. على سبيل المثال، يمكنك تصميم حقل ادخال رقم الجوال بهذا الشكل مع الارشادات:

أو بهذا الشكل مع ارشادات ضمنيّة ترشد المستخدم (عن طريق التصميم) الى كيفية ادخال رقم جواله:

أحياناً حتى حجم الحقل يعطي تلميحات معيّنة للمستخدم. مثلاً اذا استخدمنا الحقل التالي لطلب رقم الحساب:

فقد يعتقد المستخدم ان الرقم المطلوب هو الرقم القصير (النظام القديم) وليس رقم الـIBAN (النظام الجديد).

أيضاً أي شيء يكون بارزاً…:

…أو أي نص تحته خط…:

سيعطي للمستخدم تلميحاً انه يمكنه التفاعل معه، لأنه في الحالة الأولى يبدو كزر، وفي الحالة الثانية يبدو كرابط.

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

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

ماذا يعني كل هذا؟

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

اذا كانت لديك أية اسئلة حول هذا الموضوع، فلا تتردد بكتابتها في التعليقات.

بشكل عام، يقوم الشخص بمشاركة محتوى معين على الانترنت…:

1. عندما يفاجئه (الاشياء أو المعلومات الغير المتوقعه).
2. اذا كان شيئاً ممتعاً أو مضحكاً (خاصة الصور والفيديو).
3. اذا كان يدعم او يبسّط افكاراً معيّنة يؤمن بها.
4. اذا كان يسهّل القيام بالمهام الصعبة.
5. اذا قام بتفسير اشياءاً يعرفها مسبقاً (مثال: لماذا يستخدم اللون الأحمر للتحذير. قد تعرف هذا الشيء ولكن في نفس الوقت لا تملك تفسيراً له)
6. اذا اعتقد ان ذلك المحتوى سيجده الآخرون مفيداً.
7. اذا كان شيئاً يحسّن من صورته أمام الآخرين (كأن يجعله يبدوا مثقّفاً أو ذو حس فكاهة عالي…الخ).

قمت بترتيبها من الدافع الأقوى الى الأضعف (برأيي الشخصي).

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

(ملاحظة: القائمة منقوله بتصرّف من كتاب Designing for the Social Web. كتاب رائع سأقوم بالكتابة عنه قريباً ان شاءالله)

المقدّمة الفلاشية في موقع شركة الاتصالات المتكاملة، وهي عبارة عن دعايه لخدماتهم

تستخدم هذه المقدّمات الفلاشية عادة لاحدى الأسباب التالية:

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

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

اذاً لو قرّرنا الاستغناء عن المقدّمات الفلاشيّة، هل هناك بديل يساعدنا على الحصول على نفس تأثيرها دون ازعاج الزوّار؟

بالتأكيد!

البديل هو ببساطة وضع فيديو يشغل مساحة بسيطة في الصفحة الرئيسية ويؤدّي نفس غرض المقدّمة الفلاشيّة، وهو ما يقوم به الكثير من مطوّري مواقع الانترنت الحديثة حتى كبار الشركات. احد المواقع الجميله التي طبقّت هذه الطريقة هو موقع Inspired By Muhammad، وهو موقع باللغة الانجليزية يهدف الى التعريف بالرسول محمد عليه الصلاة والسلام، وتعاليم الدين الاسلامي الحميدة.

الموقع شرح فكرته بشكل مختصر كتابياً ومن ثم وضع الفيديو لشرح الفكره بشكل أعمق

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

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

وبهذه الطريقة نتجنّب مشكلة المقدّمات الفلاشية باستبدالها بطريقة أكثر فعالية وأقل ازعاجاً للزوّار.

سأبدأ بشرح الفرق باستخدام شيء من حياتنا اليوميّه: أكواب شرب القهوة

سأقارن بين ثلاثة أكواب سنستخدمها لشرب القهوة الصباحية على سبيل المثال.

الكوب الأول:

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

الكوب الثاني:

كوب تقليدي ذو حامل مناسب، يمكنك حمله باستخدام جميع اصابعك. ومع أن الكوب يساعدك بالقيام بمهمّتك (شرب القهوة) بكل أريحيّة وسهولة، الا انه لا يوجد أي شيء يميّزه، مما يعني ان تجربتك معه عادية جداً، ومن المؤكّد انك لن تلقي له بالاً عندما يُكسر، وذلك لانك ستجد بدائل كثيرة له.

والآن لنرى الكوب الثالث:

يبدو أقرب للكوب الثاني، ولكنه مغطى تماماً بالبن مما يجعل شكله مميزاً.

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

ما الفرق بين الكوب الثاني والثالث؟ الكوب الثالث لا يخاطب عقلك فقط (سهولة الاستخدام)، وانما يخاطب مشاعرك أيضاً (جمال التجربة).

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

عودة لمواقع الانترنت: لنأخذ كمثال موقع الدكتور جيكوب نيلسن، احد روّاد مجال قابلية الاستخدام:

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

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

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

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

لاحظ انه بما ان تجربة المستخدم تعتمد على الكثير من العوامل، فمن الممكن ان تكون تجربتك جيده في موقع قابلية استخدامه سيئة. القي نظره على موقع “كوووره” على سبيل المثال وستجد ان تصميمه “زحححمه”:

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

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

اذا أردت ان تصل بموقعك لأقصى ما يمكنك الوصول اليه، فيجب ان تراعي قابلية الاستخدام و تجربة المستخدم، وهذا ما لا نجده في أغلب المواقع العربية للأسف.

ارجو ان اكون قد وفّقت في شرح الفرق بين الاثنين.

لديك اسئلة او اضافت؟ لا تتردّد بكتابتها في التعليقات.

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

اضغط على الصورة لعرضها بحجمها الطبيعي

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

فلنبدأ:

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

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

التطبيق:

اضغط على الصورة لعرضها بحجمها الطبيعي

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

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

التطبيق:

اضغط على الصورة لعرضها بحجمها الطبيعي

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

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

التطبيق:

اضغط على الصورة لعرضها بحجمها الطبيعي

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

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

التطبيق:

اضغط على الصورة لعرضها بحجمها الطبيعي

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

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

التطبيق:

اضغط على الصورة لعرضها بحجمها الطبيعي

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

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

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

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

التطبيق:

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

اضغط على الصورة لعرضها بحجمها الطبيعي

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

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

التطبيق:

اضغط على الصورة لعرضها بحجمها الطبيعي

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

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

التطبيق:

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

اضغط على الصورة لعرضها بحجمها الطبيعي

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

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

التطبيق:

اضغط على الصورة لعرضها بحجمها الطبيعي

الختام

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

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

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

1. حدّد النشاط الرئيسي الذي سيقوم به الزائر في موقعك

المواقع الناجحة على الانترنت تسخّر خصائصها لدعم نشاطها الرئيسي. على سبيل المثال:

• النشاط الرئيسي لموقع Flickr هو تبادل الصور.
• النشاط الرئيسي لموقع facebook هو التواصل الاجتماعي.
• النشاط الرئيسي لموقع YouTube هو مشاركة مقاطع الفيديو.
• النشاط الرئيسي لموقع Amazon هو شراء السلع.

وأمثلة من مواقع عربية:

• النشاط الرئيسي لموقع قيّم هو معرفة جودة المطاعم.
• النشاط الرئيسي لموقع شركة اتصالات هو الاشتراك مع الشركة (في خدمة أو أكثر).

ان لم تتمكّن من تحديد النشاط الرئيسي لموقعك، فاسأل نفسك “ماهو الشيء الذي ان قام الناس بزيارة الموقع من أجله فسأعتبره ناجحاً؟”. قد يكون الجواب هو “تبادل الملفات” (موقع رفع ملفات) أو “معرفة جديد التقنية” (مدوّنه تقنيّة).

2. حدّد الأشياء التي تدعم ذلك النشاط الرئيسي بشكل مباشر

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

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

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

أو بعض الأشياء التي تدعم النشاط الرئيسي لموقع Flickr (وهو تبادل الصور):

• تسهيل تبادل ونشر الصور (مثل خاصيّة تساعد في تضمين الصور في المواقع الأخرى أو روابط قصيره للصور…الخ)
• معرفة آراء الناس في الصور التي تعرضها (نظام تعليقات مثلاً)
• رؤية تفاصيل الصور عالية الجودة (توفير احجام مختلفة للصور للتحميل مثلاً)
• أخذ فكرة عن الصور الشائعة التي يتبادلها الناس (خاصيّة الـtag cloud أو “سحابة الأوسمة”)

لاحظ ان عندما حدّدت تلك الأشياء كنت أفكّر بنشاط الموقع كما لو كنت أقوم به خارج الانترنت دون الدخول في كيفية التنفيذ أو في التفاصيل التقنيّة (الا عند استنتاج الخصائص بالطبع).

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

3. اختصر ما تكتبه في موقعك

تعاني الكثير من المواقع مما أسميه “متلازمة الكلام الفاضي”، وهي كتابة الكثير من الكلام الغير مهم للزائر. متجر الكتروني مثلاً (سأسمّيه “متجر سين”) يصف نفسه بالصفحة بالرئيسية بالكلام التالي:

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

شرح لا بأس به ولكن يتسبّب في مشكلتين:

1. الناس في الانترنت فعلياً لا يحبون القراءة ولا يقرؤون كل ما يواجههم، وبالتالي قد تفقد الكثير من الزوّار ان لم تعرض ما يقدّمه موقعك بشكل مختصر و سريع.
2. كثرة النصوص في الموقع تجعل الواجهة تبدو أكثر “ازدحاماً”، فكلما اختصرت ما يكتب على الواجهه كلما بدت أسهل للزائر.

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

يوفّر لك متجر سين امكانيه التسوّق عن طريق الانترنت بسهولة وبسرعة توصيل فائقة.

الختام

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

لديك أية أسئلة حول الموضوع؟ لا تتردد في كتابتها في التعليقات.

السلام عليكم ورحمة الله وبركاته

أخي لدي سؤال عن خاصية تعطيل الزر الأيمن في المدونات، هل هذا شيء إيجابي أم سلبي ؟

وشكراً لكم

عبدالرحمن اسحاق

الجواب

أستغرب في الحقيقة أنه لا زال هناك من يعتقد أن تعطيل الزر الأيمن للفأره في موقعه هو فكره جيّدة، فمستخدمي الانترنت الآن يتوقعون أن زر الفأرة الأيمن سيعمل في جميع المواقع، و تعطيله لهم سيزعجهم و قد يتسبب في تركهم للموقع.

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

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

—-

لديك سؤال عن قابلية استخدام موقعك أو عن قابلية الاستخدام عموماً؟ لا تترد في مراسلتي باستخدام نموذج الاتصال.

لا يقرأ الناس المكتوب في مواقع الانترنت.

من النادر جداً أن أن يقرأ أحد محتويات صفحة موقع كلمة كلمة. الذي يقومون به فعلاً هو مسح الصفحة بأعينهم، والتركيز على كلمات وجمل معينة. في دراسات لكيفيّة قراءة الناس لصفحات الانترنت، وجد أن 79% من الناس يتفحّصون الصفحة بأعينهم. 16% منهم فقط هم من يقومون بقراءة الصفحة كلمة كلمة.

نتيجة لذلك، يجب على مواقع الانترنت (سواء كانت مدوّنات أو تطبيقات أو غيرها) استخدام نصوص واضحة وقابلة للمسح السريع لتسهيل حصول الزوّار على المعلومة التي يريدونها، و يمكنك تحقيق ذلك بالطرق التالية:

1. استخدم لغة واضحة سهلة

   القراءة على الشاشة متعبة وأبطأ من القراءة من الورق. لذلك كلما زاد اسلوب الكتابة سهولة كلما زاد فهم الناس للمكتوب.

   هذه بعض الأساليب التي يمكن استخدامها للكتابة بوضوح وسهولة اذا كان جمهورك هو عامة مستخدمي الانترنت العرب:

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

2. اختصر قدر الامكان

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

3. اجعل كل فقرة تحتوي على فكرة واحدة فقط

   و هذا يمكّن القرّاء من:

   • مسح كل فقرة.
   • التعرف على محتواها بسرعة دون الحاجة لقرائتها كاملة.
   • المتابعة للفقرة التالية.

   جعل الفقرة تحتوي على فكرة واحدة يكون أكثر فائدة عند وضع الأهم في بداية تلك الفقرة.

4. اجعل الأهم في البداية

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

   • مسح بداية الفقرة بأعينهم
   • فهم فكرة وهدف الفقرة بسرعة
   • تقرير ما اذا كانوا يردون مواصلة قرائة الفقرة او لا.

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

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

   تسمى هذه الفكرة بـ “الهرم المقلوب”، لأن أهم المعلومات يأتي ملخصاً وفي البداية. بعكس التعليم الجامعي او المدرسي الذي يعتمد على تأسيس أساسات عامة كبيرة في البداية.

5. استخدم عناوين رئيسية قصيرة توضّح المحتوى

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

6. استخدم عناوين ثانوية

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

7. اكتب الكلمات المهمة بالخط العريض

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

8. استخدم القوائم

   القوائم أفضل من الفقرات الطويلة لأنها:

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

9. أهتم برفع مصداقيتك

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

   • ادراج رسومات أو صور متعلقة بالموضوع وعالية الجودة.
   • الكتابة الجيدة الخالية (قدر الامكان) من الاخطاء الاملائية.
   • استخدام روابط مفيدة لمواقع أخرى متعلقة بالموضوع.

10. ابتعد عن كتابة الكلام التسويقي

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

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

المصادر وقراءات اضافية:

• http://www.useit.com/alertbox/9710a.html
• http://www.webcredible.co.uk/user-friendly-resources/web-usability/web-content.shtml
• http://www.webdesignfromscratch.com/copywriting/writing-for-the-web.php
• مصدر صورة الموضوع