الصفحة السابقة كانت مزدحمة بكثير من العناصر وليست منسّقه كما ترى في الصورة:

صورة الصفحة الرئيسية القديمة لموقع قيّم (اضغط الصورة لتكبيرها)

ما قمنا بتغييره هو التالي:

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

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

الصفحة الرئيسية بعد التطويرات (اضغط الصورة لتكبيرها)

وهنا صورة توضّح عدد العناصر وطريقة عرضها قديماً مقارنة بالآن:

التغييرات بين التصميم القديم (يمين) والجديد (يسار)

تقسيم الصفحة أصبح بلا شك أوضح وأخف من السابق بكثير.

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

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

الموقع: qaym.com

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

الصفحة الرئيسية السابقه لقيّم (بعد التعديل)

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

الصفحة الرئيسية السابقة لقيّم (قبل التعديل)

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

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

الصفحة الرئيسية الحالية بعد التعديل (اضغط الصورة للتكبير)

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

ما رأيك في هذا التغيير؟ هل ترى أنه للأفضل؟

وان كنت ترغب المزيد عن تفاصيل هذا التطوير وأسبابه، فلا تتردّد بسؤالي في التعليقات.

تبسيط الصفحة الرئيسية

الصفحة الرئيسية القديمة

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

صورة الصفحة الرئيسيّة الجديدة

قمت أيضاً بتغيير مكان الزر من اليسار إلى اليمين لأن الصفحة مكتوبة باللّغة العربيّة، و تغيير عنوان الزر من “اذهب” الى “احصل على يوزر”، لأن “اذهب” قد توحي للمستخدم بأنه سيتم تحويله للموقع المدخل. فكّرت قبل ذلك في تغييرها إلى “ابحث”، و لكن قد يوحي ذلك بأنه سيتم البحث عن معلومات الموقع في Google على سبيل المثال، فقرّرت اختيار “احصل على يوزر”.

تغيير لون خلفية رسالة التنبيه

رسالة التنبيه قبل (فوق) و بعد (تحت)

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

تغيير طريقة عرض معلومات الـ”يوزرات” و نظام التصويت

طريقة العرض سابقاً (فوق) و حالياً (تحت)

سابقاً كانت طريقة عرض معلومات الـ”يوزرات” و نظام التصويت صعبة بعض الشيء لمن لا يملك خبرة جيّدة في مواقع الويب 2.0. و بما أن مرتادي المنتديات بشكل عام لا يملكون خبرة جيّدة في الانترنت، قمت بتغيير طريقة عرض المعلومات بحيث تصبح طبيعية أكثر و كأنّه الموقع يخاطب المستخدم.

و في حال عدم توفّر الأصوات، فطريقة العرض تختلف أيضاً كما ترى في الصورة:

طريقة العرض سابقاً (فوق) و حالياً (تحت)

الختام

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

لديك أي اضافات أو استفسارات؟ شاركنا بها في التعليقات.

التصميم القديم لصفحات المطاعم. اضغط للتكبير.

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

ازالة ألسنة تصفّح ألأقسام الفرعية للصفحة

ألسنة تصفّح الأقسام الفرعية في التصميم القديم

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

تطوير نظام التصويت

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

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

نظام التصويت الجديد (يمين) و نظام التصويت القديم (يسار)

عرض أوصاف المطعم بشكل أبرز و أوضح

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

الأوصاف في التصميم الجديد (يمين) و الأوصاف في التصميم القديم (يسار)

تحرير الأوصاف أصبح في نفس صفحة المطعم

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

1. الأوصاف عند عرض الصفحة. 2. الأوصاف عندما تضع مؤشر الفأرة فوق قسمها. 3. الأوصاف بعد الضغط على رابط تصحيح الأوصاف.

تغيير طريقة عرض التقييمات

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

التقييمات في التصميم الجديد (يمين) و التصميم القديم (يسار)

ازالة العناوين من أقسام الصور و الأفرع في الصفحة

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

أزلنا تلك العناوين لتبسيط الصفحة. كما ترى، أستمتع كثيراً بازالة الأشياء من الصفحة

الختام

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

ما رأيك في الشكل الجديد لصفحات المطاعم؟ شاركنا برأيك في التعليقات

1. جميع المصادر مكتوبة باللغة الانجليزية. حسب علمي لا يوجد مصدر أي عربي متخصص في هذا المجال عدا هذه المدونة.
2. تعمّقك في هذا المجال لن يساعدك في الحصول على وظيفة او يميّزك عن غيرك في سوق العمل العربي عموما و السعودي خصوصا، فالاهتمام في قابلية الاستخدام يكاد يكون معدوما في الدول العربية.و لكنه بالتأكيد سيساعدك في صناعة منتجات و برمجيات افضل سواء لك او للجهة التي تعمل بها.
3. على الأغلب، لن تجد أي من الكتب المتعلقة في هذا المجال في الدول العربية. قد تظطر الى استيرادها من الخارج كما أفعل.

و بما ان المجال يهم الكثير من المهتمّين بتطوير البرمجيات و المواقع بمختلف وظائفهم، فقد قمت بتقسمين المصادر الى قسمين:

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

قسم المبتدئين

• كتاب Don’t Make Me Think
  أفضل (و أول) كتاب قرأته في هذا المجال. كتاب خفيف (اقل من 200 صفحة) مليء بالرسومات التوضيحية و بعض الكاريكاتيرات الساخرة. أنصح بشدة بقراءته.
• كتاب Research-Based Web Design & Usability Guidelines(نسخة الكترونية مجانية)
  يحوي الكتاب العديد من القواعد المتعلقة بقابلية الاستخدام معروضة بشكل خفيف و بسيط. كل قاعدة تقريبا مدعومة بصورة على الأقل لتوضيح فكرتها.
• كتاب Letting Go Of The Words
  يفيد هذا الكتاب كتّاب محتويات المواقع بشكل كبير. فطريقة كتابة و عرض محتويات موقع معيّن تلعب دورا كبيرا في قابلية استخدامة. سيريك هذا الكتاب كيف تكتب محتوى سهل القراءة و سهل التصفّح. قد يبدو موضوعا بسيطا لا يستحق كتابة كتاب كامل عنه، و لكنك لن تعي اهمّيته حتى تقوم بقراءة هذا الكتاب.
• مقالات Jakob Nielsen
  يقوم جيكوب نيلسن (احد رواد هذا المجال) بكتابة مقالات بشكل دوري مرتبطة بمجال قابلية الاستخدام، و هي مقالات سهلة الفهم و خفيفة و مفيدة.

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

قسم المحترفين

• كتاب Information Architecture for the World Wide Web
  ستجد في هذا الكتاب كم كبير من المعلومات المتعلقة بكيفية هيكلة المواقع بشكل السليم (تحديد الأقسام و أساميها و طريقة عرض او هيكلة محتواها و ما الى ذلك)، و هو دسم بعض الشيء، و لكنه كتاب رائع و مفيد جدا. و سأبدأ بالكتابة عن هيكلة المواقع قريبا بإذن الله.
• كتاب Designing The Obvious
  يدور هذا الكتاب حول تطوير قابلية استخدام تطبيقات الويب. و مع انه يحوي بعض المعلومات المكرره من الكتب التي سبق ذكرها، الا انه لا يخلو من المعلومات المفيدة التي يتميز بها.
• كتاب Defensive Design for the Web
  يركّز هذا الكتاب على قابلية استخدام النماذج (forms) على الانترنت بشكل عام. و يحوي على العديد من الأمثلة المصوّره. كتاب جيّد و لكن يعيبة انه جميع صوره بالابيض و الاسود، و لذلك قد لا تكون بعض الأمثلة المصوّره مفيدة جدا.
• كتاب Designing Interfaces
  يدور هذا الكتاب حول تطوير قابلية استخدام الواجهات بشكل عام، سواء كانت واجهة برمجيات على الويب او الحاسب الآلي او حتى الجوال، و يحوي العديد على نماذج التصميم (Design Patterns) التي سأشرح فكرتها قريبا في هذه المدونة.

الختام

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

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

ملاحظة: ان رغبت في شراء أي من تلك الكتب عن طريق موقع Amazon, فارجو شرائها عن طريق الروابط في هذا الموضوع حتى تدعمني.

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

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

قد يستغرق تطوير قابلية استخدام موقع قيّم بضعة اشهر و ذلك لضيق الوقت، و عدم وجود اي ميزانية تدعم هذا التطوير.

لا تحرمونا من دعواتكم.