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

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

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

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

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

بالتأكيد!

البديل هو ببساطة وضع فيديو يشغل مساحة بسيطة في الصفحة الرئيسية ويؤدّي نفس غرض المقدّمة الفلاشيّة، وهو ما يقوم به الكثير من مطوّري مواقع الانترنت الحديثة حتى كبار الشركات. احد المواقع الجميله التي طبقّت هذه الطريقة هو موقع 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
• مصدر صورة الموضوع

يعتقد الكثير من أصحاب المواقع أن الشيء الوحيد المهم (أو الأكثر أهميّة) في تقارير احصائيات مواقعهم (web logs أو web statistics) هو عدد الزوّار للموقع. فهل هذا صحيح؟

لنعرف إن كان ذلك صحيحاً أم لا، دعنا نشبّه مواقع الانترنت بالمطاعم، و من ثم نفترض انك صاحب احد تلك المطاعم. لو عرفت أن مطعمك يزوره 500 شخص في اليوم، ستفترض أن المطعم ممتاز، أليس كذلك؟ ماذا لو أكتشفت لاحقاً أن 90% من زوّار مطعمك يزورونه لاستخدام دورة المياه فقط؟ أو أن 50% يزورونه بحثاً عن نوع معيّن من الوجبات و من ثم يغادرون بعد أن يكتشفون أنه يقدّم نوعاً مختلفاً؟ ستتغير نظرتك لمطعمك، أليس كذلك؟

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

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

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

قد تتسائل: ما علاقة احصائيات الموقع بقابلية الاستخدام؟

في الحقيقة هي مرتبطة بتجربة المستخدم (user experience) بشكل عام (التي يندرج تحتها قابلية استخدام الموقع)، ويمكنك الاستفادة من تلك الاحصائيات لتطوير تجربة المستخدمين في الموقع في أكثر من طريقة مثل:

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

وسأقوم بالتطرق لتفاصيل هذا الموضوع مستقبلاً في هذه المدوّنة بعد الانتهاء من قراءة كتاب ممتاز يشرح هذا الموضوع بالتفصيل (انصحك بقرائته)، وهو كتاب Web Analytics: An Hour A day.

ماذا عنك انت؟ ما هي الاحصائيات التي تهتم بها في موقعك؟ شاركنا برأيك في التعليقات.

صورة من احدى المنتديات

و بالمناسبة، “الموضوع الهام” هو اعلان لافتتاح قسم جديد فقط.

أتمنّى أن أفهم كيف يفكّر أصحاب المنتديات…

صورة اليوم هي من موقع مكتبة جرير:

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

أين المشكلة؟

النظام الجديد للصفحة الرئيسية

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

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

• التحديثات النصّية (status) تظهر بشكل معيّن (نص فقط).
• التحديثات النصيّة التي تم التعليق عليها تظهر بشكل آخر (نص يليه مربّع يحتوي على الردود)
• مقاطع الفيديو المشاركة تظهر بشكل صورة من مقطع الفيديو مع اسم الفيديو

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

برأيي يمكن حل تلك المشكلة بتوحيد الشكل التي تظهر به النشاطات (أو التحديثات) بحيث تظهر بالشكل التالي:

التصميم المقترح

ما قمت به هنا هو:

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

قد يقول البعض “و لكن مشهور، بتلك الطريقة سيصبح facebook أشبه بـtwitter!”، و هذا صحيح، و لكن لا يهم التشابه طالما أن مستخدم الـfacebook في النهاية هو المستفيد، و من يتابع أخبار شركات الانترنت الغربية سيعرف أن facebook يخشون منافسة twitter و يقومون بمحاولة محاكاته منذ فترة طويلة بأية حال.

ماذا عنك أنت؟ ما رأيك بتصميم صفحة الـfacebook الرئيسية؟ و هل تعتقد أن تصميمي المقترح قد يطوّر من تجربك في الموقع إلى الأفضل؟

شاركنا برأيك في التعليقات.