سؤال يدور في بال الكثير من مصممي مواقع الانترنت، فلا زال الكثير منهم يعتقد انه من الأفضل تقليص طول الصفحة قدر الامكان حتى تصبح أسهل للزائر ولا يتسبّب طولها في تنفيره، ولكن هل فعلاً يؤثر طول الصفحة سلبياً على تجربة الزائر؟
الاجابة باختصار هي “لا”، فالمهم هو وضع العناصر المهمّة أو التي تدل على (أو تلخّص) محتوى الصفحة في أعلاها حتى يراها الزائر أولاً، ومن ثم – في حال قرر انها قد تحتوي على ما يريد – يمكنه التعمّق أكثر في الصفحة (بالنزول للأسفل)، أو يبحث عن ما يريد في صفحة أخرى .
الكثير من الناس يقولون -عند سؤالهم- انهم يكرهون الصفحات الطويلة، ولكن فعلياً عندما تراقب استخدامهم للمواقع التي يزورونها ستجد انهم فعلياً لا يمانعون ذلك.
لا زلت غير مقتنعاً؟ حسنا. موقع أمازون (من أشهر المتاجر الالكترونيه في العالم ان لم تكن تعرفه) لديه فريق محترف متخصّص في قابلية الاستخدام وتجربة المستخدم بشكل عام، وهو يراقب تصرّفات المستخدمين في الموقع (باستخدام وسائل متعدّدة مثل احصائيات الموقع) ويقوم بالمساعدة في تطوير الموقع بحيث يصبح سهلاً ومريحاً للزوّار، حتى يحقّق نسبة أرباح أعلى.
لو نظرنا الى صفحة منتج Kindle على سبيل المثال (وهو منتج مهم بالنسبة لهم)، ستجد ان طولها يتجاوز الـ20،000 بكسل! أي 5 أمتار تقريباً! هل تتخيل ذلك؟ انظر الى هذه الصورة المصغّره للصفحة:
أعلم ان عنوان الموضوع قد يبدو غريباً، قد تتسائل “رائحة المعلومات؟ وهل للمعلومات رائحة أصلاً؟”. الاجابة هي نعم، ولكنها ليست رائحة نستطيع اشتمامها فعلياً، وانما رائحة نتبعها في المواقع للوصول للمعلومة التي نبحث عنها.
لا زلت غير مستوعباً للفكرة؟ لا عليك، فلم اشرحها بعد.
بداية، هل تعرف كيف تبحث الحيوانات عن فرائسها؟ تقوم بذلك عن طريق تتبّع رائحتها أو أي دليل آخر قد يدل على مكان الفريسة (أصوات، آثار أقدام…الخ)
ماذا عنا نحن عندما نقوم بزيارة موقع معيّن بحثاً عن معلومة نريدها؟ لن نقوم بقراءة كل مافي الموقع بشكل تسلسلي كما يعتقد كثير من أصحاب المواقع، بل سنقوم بتتبّع أي رابط تقع أعيننا عليه يبدو وكأنه سيوصلنا للمعلومة التي نريد، وكأننا نتتبّع رائحة المعلومه في الموقع. تخيّل السيناريو التالي:
شخص عادي يقوم بزيارة موقع شركة الاتصالات السعودية بجثاً عن أسعار خدمة انترنت الجوال. فريسته التي يبحث عنها هنا هي “انترنت الجوال”، وبالتالي سيتبع كل ما يبدو على علاقة بها.
يتأمل قليلاً الواجهة، ثم يلفت انتباهه اعلان في الأسفل يحتوي على كلمة “انترنت”
قد تعتقد عندما تطوّر موقعاً على الانترنت ان العوائق أو المشاكل الصغيرة في الموقع لن تؤثّر فعلياً على تجربة الزوّار فيه، وبالتالي تتغاضى عنها أو تهمل اصلاحها أو تطويرها، ولكنّها في الحقيقة من الممكن ان تفقدك العديد من الزوّار. لكن كيف يحدث ذلك اذا كانت تلك المشاكل اساساً صغيرة وغير مؤثّرة بحد ذاتها؟
دعني أشرح لك كيف يحدث ذلك:
يملك زوّار موقعك نسبة تحمّل معيّنة سيتغاضون خلالها عن بعض مشاكل موقعك، ومن ثم يغادرونه في حال استهلاك تلك النسبة. وحتّى أوضّح ما أقصد بذلك، سأستعين بالمصطلح الذي استخدمه Steve Krug في كتابه Don’t Make Me Think لوصف نسبة التحمّل تلك وهو: خزّان حسن النية.
لنفرض ان كل زائر لموقعك يملك خزّان يحتوي على كميّة معيّنة من حسن النيّة تجاه موقعك (أي انه سيحسن النيّة عند زيارة موقعك وسيفترض مسبقاً انه سيعمل بالشكل الذي يناسبه).
أي مشكلة أو تعقيد أو توهان يواجهه الزائر سيتسبّب في افراغ ذلك الخزّان. اذا تم افراغ كامل الخزّان بسبب كثرة مشاكل موقعك، فسيغادره الزائر مباشرة. تخيّله كما في الرسمة التالية:
يفترض أصحاب المواقع كثيراً بأن زوّار مواقعهم سيقومون بقضاء الوقت الكافي لفهم افكارها ومزاياها بشكل كامل، بينما في الواقع قد لا يقضي الزائر أكثر من 5 ثواني عندما يزور الموقع لأوّل مرّة، ويغادر بعدها في حال لم يفهم ما يميّز الموقع بسرعه (لأنه على الأغلب لديه أشياء أخرى يفضّل قضاء وقته بها). لكن هناك طريقه ستساعدك كثيراً ان شاءالله في ايصال هدف وميزة موقعك بسرعه للزوّار الجدد، والمحافظة على أكبر قدر ممكن منهم، وذلك عن طريق القيام بما يلي:
تخيّل ان موقعك هو عبارة عن محل صغير بين ملايين المحلات الأخرى (المواقع الأخرى)، وهناك الكثير من المتسوّقين (مستخدمي الانترنت) الذي يتجولون في السوق (الانترنت) ويتفحّصون جميع المحلات الموجودة على امل ايجاد منتجات او معلومات تناسبهم. اذا كان موقعك جيداً، فستكون المحادثة بين مسؤول المبيعات في محلك (لنفرض انه يمثّل الصفحة الرئيسية في موقعك) و المتسوّق (زائر موقعك) كالتالي:
الكاريكاتير السابق يمثّل موقع ذو صفحة رئيسية بسيطة توضّح للزائر الجديد فكرته بشكل مختصر وواضح، ومن ثم تتيح للزائر الحصول على المزيد من المعلومات كلما تصفّح الموقع أو استخدمه أكثر، مثل الصفحة الرئيسية لموقع Twitter:
عندما ينضم متخصّص في قابلية الاستخدام الى احدى المشاريع لتطويرها، فهدفه في الحقيقة ليس استيفاء مناسبته للزوّار والمستخدمين فقط كما يعتقد الكثير، بل يتّزن في عمله ليراعي أهداف المشروع على المدى البعيد، وميزانية وقدرات التطوير المخصصّه لذلك المشروع، وقد يؤثّر ذلك في طريقة عمله على المشروع بحيث يستغني عن بعض الأمور التي تطوّر قابلية الاستخدام وتجربة المستخدم في الموقع.
ففي مشاريع الانترنت، هناك ثلاثة ادوار رئيسية عادة يتقمّصها المسؤولين عن المشروع:
دور مسؤول الأعمال: ويراعي طرق الربح من الموقع وتحقيق اهدافه في جلب المزيد من الزوّار والحصول على صفقات الرعاية. يمثّل هذا الدور عادة المدراء أو أعضاء مجلس الادارة (في حال كان المشروع يتبع لشركة) أو المسؤولين أو أي شخص مسؤول عما سبق ذكره في الموقع.
دور مسؤول التطوير: ويراعي الامكانات المتوفّرة لتطوير المشروع (عدد المبرمجين والمصمّمين، امكاناتهم وخبرتهم…الخ) والميزانيّة المخصصّة للتطوير والحلول المتوفّره وما الى ذلك. يمثّل هذا الدور عادة المبرمجين أو مدراء المشاريع أو أي شخص يتّخذ القرارات المتعلّقة بجزئية التطوير.
دور مسؤول قابلية الاستخدام: ويراعي قابلية استخدام (أو سهولة استخدام) الموقع للزوّار والمستخدمين لكي يؤدوا مهامهم ويحصلون على ما يريدونه بسهولة. يمثّل هذا الدور عادة المتخصصين في قابلية الاستخدام أو المصمّمين أو مسؤولي التسويق أو أي شخص يهمّه ضمان سهولة استخدام الموقع.
قد يتقمّص شخص واحد جميع هذه الأدوار، أو يعطى كل دور لشخص أو أكثر، حسب حجم المشروع.
ماذا يحدث عندما يطغى احد تلك الأدوار على الأدوار الأخرى؟
عندما تضطر الى عرض الكثير من المعلومات في احدى صفحات أو أقسام موقعك، ففي كثير من الأحيان لا يكون مناسباً عرضها جميعاً في جدول أو ما شابه (وهو ما يفعله الكثير من مصممّي ومطوّري المواقع)، ويكون حينها من الأفضل عرضها في سياق معيّن مما يجعل الصفحة تبدو ابسط و “أخف” مع انها فعلياً تعرض نفس المعلومات.
على سبيل المثال، في الصورة التالية (التي قمت بتصميمها لاستخدمها كمثال توضيحي فقط)، يتم عرض معلومات المتعلّقة بسيارة معروضة للبيع:
طريقة عرض معلومات السيارة قبل التعديل
كما ترى، عرض المعلومات بهذه الطريقه يجعل الصفحة تبدو مزدحمة، ويصعّب نسبياً الوصول للمعلومة المطلوبة (خاصة من قبل الزوّار الجدد، بما انهم لا يعرفون مكان كل معلومة مسبقاً).
لنرى الآن كيف ستبدو نفس المعلومات عندما نعرضها في سياق معيّن يوصلها للزائر بشكل أبسط وأسرع:
يضيّع مصمّمي المواقع الكثير من الوقت والجهد في تصميم واجهات مواقعهم بشكل كامل ومن ثم تعديلها (أو حتى تغييرها كلياً!) لتتناسب مع احتياجات الموقع او مع رغبة عملائهم أو مدرائهم او ما إلى ذلك، بينما يمكنهم اختصار الكثير من الوقت بتصميم النماذج الأوليّة. فالنموذج (أو Prototype – وسأسميه هنا “نموذج” كاختصار) هو نسخة مبسّطه لتصميم واجهة موقع انترنت تستخدم بشكل مبدأي لتوضيح أفكار مقترحة للتصميم قبل البدء في تنفيذه كما ترى في الصورة:
مثال على نموذج بسيط صمّم باستخدام ورقة وقلم
هناك عدة فوائد لاستخدام النماذج منها:
التركيز على فكرة الموقع وتقسيم المحتوى بدلاً من تضييع الوقت في النقاش حول الجماليات، حيث ان النماذج لا تمثّل التصميم النهائي.
ايجاد تصميم سريع يسهل مناقشته والتعديل عليه بسرعه وبسهولة لتوفير الوقت والجهد قبل البدء في تركيبه وبرمجته.
امكانية اختبار كفاءة وفعالية التصميم (باستخدام اختبار قابلية الاستخدام) قبل البدء في تركيبه وبرمجته (سأوضح طريقتها مستقبلاً).
بشكل عام، يمكننا تصنيف النماذج الى نوعين:
نماذج منخفضة الدقّة (low-fidelity prototypes): وهي النماذج التي تصممّ عادة بشكل سريع باستخدام ورقة وقلم، وهي ليست بالضرورة مطابقة للتصميم النهائي، بل تمثّل فكرته وكيفية عمله فقط. استخدم النماذج منخفضة الدقة عند رغبتك في شرح ومناقشة فكرة التصميم وتقسيم المحتوى.
نماذج عالية الدقّة (high-fidelity prototypes): وهي النماذج التي تصمّم باستخدام برامج الكمبيوتر (مثل Axure RP و Dreamweaver) وتشمل الكثير من تفاصيل واجهة الموقع لتحاكي قدر الامكان التصميم النهائي للموقع، وتستطيع ان رغبت تمكين المستخدم من التفاعل مع العناصر الموجودة به من أزرار وروابط وما الى ذلك كما لو كان يستخدم موقعاً حقيقياً (حتى يعرف كيف سيعمل الموقع عندما ينتهي). استخدم النماذج عالية الدقّة عند رغبتك في عرض الموقع على شخص يشاركك القرار في الموقع (عميل، مدير، مستثمر…الخ) قبل الانتقال الى تركيبه وبرمجته، أو لاستخدام النموذج كمرجع لفريق تطوير الموقع.
مثال على نموذج عالي الدقّه مصمّم باستخدام برنامج Axure RP
قد يعتقد البعض ان تصميم النماذج الأوليّه مضيعة للوقت، لكنه فعلياً يوفّر الكثير من الوقت والجهد والمال على المدى البعيد، اذ انه يمكّنك من اختبار فكرة تصميمك قبل تطبيقها.
اذا كانت لديك أية اسئلة حول هذا الموضوع، فلا تتردّد بكتابتها في التعليقات.
استضافتني قناة المجد مؤخراً في برنامجها “حياة تك” للتحدّث عن مجال قابلية الاستخدام وتوضيح فكرته وأهمّيته. وهذا هو فيديو اللقاء:
أشكر الأخ علي العزازي على اعداده الرائع للقاء وادارته بشكل ممتاز في رأيي.
ان كانت لديك أية ملاحظات في طريقة ايصالي للمعلومة (أو حتى اقتراحات لتطويرها أكثر) فارجو ان تذكرها لي في التعليقات، حيث اني احاول الوصول لانسب وأسرع طريقة يمكنني ان اشرح بها فكرة وفائدة هذا المجال حتى لمن لا يعرف عنه أي شيء مسبقاً.
سلسلة “أين المشكلة؟” هي سلسلة خفيفة تحتوي مواضيعها على صورة من موقع أو تطبيق، و المطلوب منك اكتشاف مشكلة أو أكثر في الصورة المتضمّنة من ناحية قابلية الاستخدام. قد تكون المشكلة خلل واضح في قابلية الاستخدام، أو طريقة غير عملية لعرض المحتوى، أو غير ذلك.
من المهم جداً ان يكون تصميم موقعك جذاب ومريح للعين واحترافي أيضاً، اذ ان ذلك يجذب المزيد من الزوّار ويريح الزوّار الحاليين في تصفّح الموقع، ويرفع من مصداقيّة موقعك. لن تحتاج الى الاستعانة بمصمّم محترف أو حتى أي مهارات في التصميم حتى تقوم بذلك، فسأشاركك في هذا الموضوع بـ9 طرق سهلة تمكّنك من تطوير تصميم موقعك على الانترنت بشكل كبير.
و حتى أوضّح فائدة تلك الطرق، ساطبّق كل واحدة منها لتطوير التصميم البسيط التالي الذي يحتوي على مشاكل تتكرر كثيراً في كثير من المواقع:
اضغط على الصورة لعرضها بحجمها الطبيعي
يرجى ملاحظة اني ساستخدم كلمة “عنصر” للإشارة الى أي عنصر يكون عادة في صفحات الانترنت من عناوين وصور ونصوص وما الى ذلك.
