أرشيف شهر يناير, 2010
هذه التدوينة تستهدف: مصممّي ومطوّري المواقع
سأقوم كل سبت ان شاءالله نشر نمط تصميم يساعدك في فهم مواقع الانترنت بشكل أكبر وأعمق، ويساعدك في حل المشاكل التي قد تواجهها في موقعك، فارجو أن لا تبخل علي باقتراحاتك وارائك لتطوير هذه السلسلة حيث انها ما زالت في بدايتها. ( ماهي انماط التصميم؟)
ملاحظة: أعلم ان “كشف العناصر تدريجياً” قد لا تكون الترجمة المناسبة لـResponsive Disclosure، لكنها احدى تلك الحالات التي تصعب فيها الترجمة الحرفية.
تحديث: تم تغيير الترجمة الى “الكشف التفاعي”، أشكر الأخ حسام على اقتراح ترجمة أفضل.
المشكلة التي يحلها هذا النمط
عرض جميع العناصر الموجودة في صفحة موقعك على المستخدم دفعة واحدة قد يتسبّب في تشتيته او يزيد من تعقيد أو “ازدحام” واجهة الموقع بالنسبة له. تبرز هذه المشكلة عادة في النماذج (forms) المطلوب تعبئتها، كما ترى في النموذج التالي:
نموذج استعادة كلمة المرور في موقع STC
الحل المقترح لتلك المشكلة
استخدام طريقة الكشف التفاعلي، أو ما يسمّى بـResponsive Disclosure. فكرة هذا النمط هو اخفاء جميع العناصر التي قد لا يحتاجها المستخدم، والابقاء على الضروري منها فقط، و من ثم اظهار باقي العناصر عند الحاجة.
ابرز مثال على كيفية استخدام هذا النمط هو نموذج مشاركة التحديثات في موقع facebook، فالموقع لا يريك الا اهم عنصر في نموذج المشاركة (الحقل الذي تكتب به)، وثم من يظهر لك باقي العناصر المتعلّقة به عندما تضغط على الحقل الفارغ:
نموذج مشاركة التحديثات في facebook
متى يستخدم هذا النمط
يمكنك استخدام هذا النمط في الحالات التالية:
- لتبسيط واجهة موقعك، وذلك باخفاء اي عنصر غير ضروري أو يعتمد على استخدام عناصر أخرى ترتبط بها (كما في المثال السابق).
- عندما يكون لديك نموذج يحتوي على العديد من الحقول التي قد لا يحتاجها المستخدم الا عند اختياره لاختيارات معيّنة (مثال: لا داعي لاظهار حقول “المدينة” و “الحي” اذا لم يكن المستخدم قد حدّد دولته في حقل “البلد”)
- لديك نموذج طويل نسبياً ويحتوي على عدة أقسام، ولا تريد أن ينفّر ذلك مستخدمي موقعك، فتقوم باظهار القسم الأول من النموذج فقط، ومن اظهار كل قسم عندما يكمل المستخدم تعبئة القسم الذي يسبقه.
كيف يحل هذا النمط المشكلة
يساعد هذا النمط في تبسيط ما يتفاعل معه المستخدم بشكل عام من نماذج أو غيره، وذلك باخفاء العناصر الثانوية والابقاء على العناصر الرئيسية المهمّة، مما يساعد المستخدم على التركيز على ما يحتاجه في تلك اللحظه فقط.
كيفية تطبيق هذا النمط
على افتراض انك تريد تطبيقه على نموذج: أظهر فقط العناصر التي يحتاجها المستخدم للبدء في تعبئة ذلك النموذج، وعندما يبدأ في تعبئة النموذج ابدأ بالكشف عن العناصر الأخرى تدريجياً. لا تخفي ما قام بتعبئتة المستخدم سابقاً، وذلك حتى يستطيع العودة له وتصحيحه.
في حال كان النموذج طويلاً، يفضّل توضيح المدة التي قد يستغرقها تعبئة النموذج مسبقاً.
يمكنك تطبيق هذا النمط بسهولة باستخدام تقنية الجافاسكريبت (javascript).
المزيد من الأمثلة
صورة من حساب الموقع في twitter
مصنف في أنماط التصميم | 4 تعليقات »
هذه التدوينة تستهدف: مصمّمي ومطوّري المواقع
سأقوم كل سبت ان شاءالله نشر نمط تصميم يساعدك في فهم مواقع الانترنت بشكل أكبر وأعمق، ويساعدك في حل المشاكل التي قد تواجهها في موقعك، فارجو أن لا تبخل علي باقتراحاتك وارائك لتطوير هذه السلسلة حيث انها ما زالت في بدايتها. (لا تعرف ماهي انماط التصميم؟)
المشكلة التي يحلها هذا النمط
المستخدم يريد استعراض محتوى الموقع حسب الأكثر شعبية أو الأكثر استخداماً.
الحل المقترح لتلك المشكلة
استخدام ما يسمى بـ”سحابة الأوسمة” (أو Tag Cloud)، والـ”سمة” (أو الـTag) ببساطة هي شيء يساعد في وصف محتوى معيّن (موضوع، خبر، صورة، ملف…الخ)، و ذلك لتسهيل البحث عن المحتويات في الانترنت وتسهيل تصفّحها والربط بينها.
سحابة الأوسمة لاحدى المدوّنات العربية
متى يستخدم هذا النمط
يمكنك استخدام هذا النمط في الحالات التالية:
- اذا كنت تستخدم أكثر من 10-20 وسم مختلف لوصف محتويات موقعك.
- اذا كان موقعك يوفّر للمستخدمين امكانية مشاركة المحتوى (ملفات، صور،مواضيع..الخ) ووضع أوسمة له.
- اذا كان زوّار موقعك قد يرغبون في تصفّح المحتويات حسب الأكثر أهميّة أو شعبية (أمثلة: موقع اخباري: الزوّار قد يرغبون في معرفة الاخبار المهمة أيضاً وليس الجديدة فقط. موقع مشاركة الصور: الزوّار قد يرغبون في معرفة أكثر انواع الصور مشاركة بين الناس في وقت معيّن)
كيف يحل هذا النمط المشكلة
يوفّر هذا النمط صورة لمحتويات موقعك الأكثر شعبية (أو الأكثر عدداً) مقابل محتوياته الأقل شعبية (أو الأقل عدداً) تسهّل على الزوّار أخذ فكرة عن محتويات الموقع وتصفّح المحتويات المهمّة أو الأكثر شعبيّة، حيث أن استخدام التصنيفات لا يحل تلك المشكلة لقلّة عددها عادة.
يعتبر هذا النمط وسيلة مساعدة لتصفّح محتويات الموقع، ولا يجب أن يستخدم كوسيلة أساسية للقيام بذلك.
كيفية تطبيق هذا النمط
ضع أكثر 30 إلى 40 وسم استخداماً تستخدمهم في موقعك (أو يستخدمها مستخدمي موقعك) مجموعة مرتّبة بشكل أبجدي (وتسمّى سحابة) في روابط، بحيث يؤدي كل رابط إلى صفحة تحتوي على قائمة بالمحتويات التي وسمت بذلك الوسم.
بعد ذلك حدّد “وزن” كل وسم (كل ما زاد استخدام وسم معيّن، كل ما زاد “وزنه” في السحابة). يتم تحديد وزن وسم معيّن بتقسيم عدد عناصر محتوى الموقع التي تم استخدام ذلك الوسم لوصفها على اجمالي عدد عناصر المحتوى الموجودة في الموقع، و من ثم مقارنة ناتج ذلك الوسم بنواتج الأوسمة الأخرى في الموقع لمعرفة وزنه أو شعبيّتة (قد تبدو هذه المعادلة معقّدة، ولكنها فعلياً بسيطة).
يمكن تمثيل وزن كل وسم بطريقتين (او باستخدامها معاً بطريقة أو بأخرى):
- باستخدام الأحجام: وزن الوسم يتحدّد حسب حجمه، فكل ما كبر حجمه كلما ثقل وزنه، مما يعني انه مهم أو شعبيته عاليه. هذه الطريقة الأكثر استخداماً.
- باستخدام الالوان: الأوسمة ذات اللون الغامق أثقل وزناً من الأوسمة ذات اللون الباهت.
المزيد من الأمثلة
سحابة الأوسمة في موقع دعم ووردبريس
سحابة الأوسمة في موقع أمازون (لاحظ كيف تم استخدام اكثر من طريقة لعرض وزن الأوسمة)
مصنف في أنماط التصميم | 4 تعليقات »
تفاجأت ليلة أمس عند قيامي بزيارة موقع المؤسسة العامة للتأمينات الاجتماعية بتغيير كامل لتصميم وهيكلة الموقع، وهو في الحقيقة موقع متقدّم 10 سنوات ضوئية (على الأقل) عن المواقع الحكومية الأخرى.
فعند زيارتك للموقع ستلاحظ ان تصميمه جذّاب جدّاً وبسيط وحديث، وهو ما سبّب صدمة كبيره جعلتني اعتقد اني زرت موقعاً خاطئاً، فهل يعقل أن يكون موقع حكومي بسيط وعملي وسهل ويركّز على احتياجات الزائر؟ والأهم من ذلك: كيف استطاع فريق تطوير الموقع الحصول على موافقة جميع المدراء دون أن يشترط احدهم وضع “فلاشات” في الموقع قبل الموافقة عليه؟ لا أعلم حقيقة، لكن ما حصل هو شيء كنت أعتقد انه من سابع المستحيلات، ولكن يبدو انه لا يزال للشعوب العربية بعض الأمل.
والجميل في ما قام به فريق تطوير الموقع هو ليس وضع المعلومات المفيدة في الموقع فحسب، بل حتى تسهيل الوصول لها، وذلك عن طريق تمكينك من عرض المعلومات التي تناسب نوعية اشتراكك فقط بشكل مختصر وبسيط:
تصنيف المعلومات حسب نوع الزوار في الموقع
نفس الأمر قاموا به في النماذج والاسئلة الشائعة كما ترى هنا:
صورة قائمة الاجراءات والنماذج
حاولت الحصول على بعض المعلومات التي تهمّني من الموقع، وبالفعل كانت التجربة أسهل بمراحل من الموقع السابق.
مع أن الموقع اعجبني كثيراً، الا لا يزال يحتوي على بعض الاخطاء والملاحظات، ولكنها لا تؤثر على تجربة الزائر او المستخدم بشكل عام، ويمكن تصحيحها بسهولة مستقبلاً.
اتمنى من كل قلبي أن تهتم الجهات الحكومية الاخرى بموقعها كما فعلت التأمينات الاجتماعية. اضمن لك ان حياتنا ستصبح اسهل بعشر مرات على الأقل في حال قيامهم بذلك.
ماذا عنك انت؟ ماهو انطباعك عن موقع التأمينات الاجتماعية الجديد؟
شاركنا برأيك في التعليقات.
مصنف في قابلية الاستخدام | 16 تعليقات »
كتبت سابقاً عن نيتي لاختيار اسوأ موقع عربي لعام 2009، ولكن بعد التفكير في الأمر تبيّن لي صعوبته وذلك لوجود عدد مهول من المواقع العربية (السيئة)، فقررت حصرها في المواقع السعودية الحكومية (اي التابعه لجهات حكومية)، وذلك لان عددها محدود.
قضيت ليلة أمس اكثر من ساعة مررت بها على 135 موقع حكومي (استناداً على دليل الردادي للمواقع الحكومية)، وكانت في الحقيقة تجربة محزنة ومقرفة لي كمتخصص في مجال تطوير مواقع الانترنت الحديثه. واخترت في النهاية منها 5 مواقع تمثّل الاسوأ من ناحية قابلية الاستخدام (او سهولة الاستخدام)، و من ناحية تجربة المستخدم ككل. تم تصفّح جميع المواقع في متصفّح Firefox.
الاختيار كان صعب جداً، وذلك لأن الأغلبة العظمى من المواقع الحكومية تعتبر سيئة، ولكن في النهاية اخترت المواقع التالية:
5. صندوق التنمية العقارية فرع المنطقة الشرقية
صورة الصفحة الرئيسية للموقع (اضغط للتكبير)
الموقع: http://www.aqarea.com/content.htm
بغض النظر عن مشاكل الموقع العديدة (ومنها استخدام ترميز خاطيء للغة العربية)، ما دفعني لاضافتة في قائمة اسوأ المواقع هو وضع الصفحة في داخل اطار، مما يعني انك لا تستطيع النزول في الصفحة من المتصفح نفسه بل يجب القيام بذلك من داخل الاطار، ولا يمكنك ايضاً نسخ او حفظ عناوين الصفحات الاخرى بما ان عنوان الصفحة الرئيسية يبقى في المتصفح (بسبب تغير ما بداخل الاطار فقط).
أكمل قراءة بقية الموضوع »
مصنف في قابلية الاستخدام | 19 تعليقات »
يعد موقع “خدماتي” التابع لشركة الاتصالات السعودية أحد الأمثلة الواضحه لعدم تفهّم الشركات لاحتياجات عملائها، وتوفير طريقة بديلة “أسهل” لهم لتنفيذ ما يريدونه من خلال الانترنت، بدلاً من استخدام الطرق التقليدية الغير عملية (مثل الاتصال على الرقم المجاني الخاص بالشركة أو زيارة الفروع).
فشركة الاتصالات السعودية في موقع خدماتي وقعت في نفس الخطأ الذي يقع به أغلب الشركات العربية، وهو اعتقادهم بان مجرّد توفير جميع ما يحتاجه العميل على موقعها على الانترنت يعد كافياً، بغض النظر عن قابلية استخدام الموقع. ولكن ما يحدث في النهايه هو تجاهل الكثير من العملاء لخدمات الانترنت وتمسّكهم بالطرق التقليدية (الاتصال على رقم الشركة المجاني)، مما يسبّب ضغطاً كبيراً على مراكز الاتصال مع تزايد اعداد العملاء.
دعني لك أوضح لك مشكلة الموقع: هذه هي واجهة موقع خدماتي حالياً (بعد تسجيل الدخول):
الشكل الحالي لموقع خدماتي (اضغط الصورة لتكبيرها)
بغض النظر عن مسألة ان خدماتييبدو كموقع عادي وليس كتطبيق، الموقع يضع روابط لجميع الخصائص أمام المستخدم، وكل رابط يجبر المستخدم على المرور بأكثر من خطوة للحصول على ما يريد (معرفة مبلغ الفاتورة فقط يتطلب 4 نقرات كل مره!). أيضاً تم وضع الروابط جميعها بشكل وكأنها جميعها لها نفس الأولويه وتستخدم بنفس التكرار، مع ان ذلك غير صحيح فعلياً. فـ”الفاتورة الالكترونية” على سبيل المثال تستخدم أكثر بكثير من “تأسيس الهاتف”، وبالتالي يجب وضعها بشكل أبرز.
ما يمكن فعله هنا لتطوير الموقع واقناع العديد من العملاء باستخدامه هو أن تجعل الشركة الحصول على المعلومة من خدماتي أسهل بكثير من الاتصال على 902 او 907 (ارقام الشركه المجانيه). على سبيل المثال، بدلا من دفن تفاصيل الفاتورة في داخل التطبيق، يمكن للشركة عرضه في الصفحة الرئيسية بشكل سهل وعملي يساعد العميل على متابعة مصروفاته والتعامل معها مثل:
التطوير المقترح لموقع خدماتي (اضغط الصورة لتكبيرها)
لاحظ كيف قمت بعرض المعلومات حسب أهمّيتها، فقيمة الفاتورة وضعت بلون أسود غامق وبخط أكبر حتى تكون واضحه، والتنبيه على اقتراب آخر موعد لتسديد الفاتورة وضع باللون الأحمر حتى يلفت انتباه العميل، اما موعد اصدار الفاتورة القادمه فوضع بلون رمادي لا يلفت الانتباه كثيراً بما انه معلومه اضافية.
بالطبع، يمكننا القيام بالمزيد لتطوير الصفحة الرئيسية، ولكن قمت بتطوير بسيط جداً لتوضيح الفكرة.
ما رأيك انت؟ هل ترى فرقاً بين الصورتين في الأعلى من ناحية سهولة الاستخدام؟ وهل تعتقد ان اقتراحي سيزيد من استخدام العملاء لموقع خدماتي؟
شاركنا برأيك في التعليقات.
مصنف في قابلية الاستخدام | 7 تعليقات »
أحببت أن أشاركك كقاريء ومهتم في قابلية الاستخدام (usability) وتجربة المستخدم (user experience) عموماً في موقع رائع اكتشفته مؤخراً يمكنه أن يساعدك في الاجابة على أي تساؤل في هذا المجال الجديد نسبياً، وهو موقع UX Exchange.
الموقع باللغة الانجليزية انجليزي، وهو فعلياً ليس “منتدى” (استخدمت كلمة منتدى لتقريب الفكرة فقط)، وانما هو موقع مبني على نظام الاسئلة والأجوبه (ويستخدم نظام موقع Stack Overflow الشهير)، ويزوره نخبه من المتخصصين في مجال تجربة المستخدم (user experience) بشكل عام. فان كانت لديك اية اسئلة في هذا المجال (سواء عن معلومة قرأتها في كتاب أو طلب مساعدة لمشكلة واجهتها في موقعك) فيمكنك أن تطرحها هناك، وسيتم تنقيح وتطوير الأجوبة التي تحصل عليها من قبل الأعضاء انفسهم (باضافة ملاحظات عليها، و بالتصويت لها أو ضدها)، وبذلك تضمن الحصول على أفضل اجابة لسؤالك.
وبالطبع، يمكنك دائماً كتابة سؤالك هنا ان كانت اللغة تعيقك عن استخدام ذلك الموقع.
بالمناسبة، هل تعتقد ان افتتاح موقع عربي للمساعدة في هذا المجال سيصبح مفيداً بشكل عام؟ أم انه لم يأتي وقتها بعد لقلة المتخصصين والمهتمين في هذا المجال؟
شاركنا برأيك في التعليقات.
مصنف في قابلية الاستخدام | 8 تعليقات »
كل ما قل عدد العناصر (أو الخواص) الموجودة في صفحات موقعك، كل ما أصبح أكثر سهولة لزوّاره ومستخدميه. في هذا الموضوع سأشرح لك كيفية التخفيف من الازدحام والتعقيد صفحات موقعك في ثلاث خطوات حتى يصبح أكثر سهولة.
مصمّمين المواقع التقليديين يعتبرون أن تصميم الموقع انتهى عندما لا يجدون شيئاً آخر يمكنهم إضافته، اما من هم في مجالي فهم يعتبرون أن تصميم الموقع انتهى عندما لا يجدون شيئاً آخر يمكنهم التخلص منه. ولكن كيف يمكنك معرفة العناصر أو الأقسام التي يمكنك التخلّص منها بدون أي ضرر؟ يمكنك القيام بذلك في ثلاث خطوات:
1. حدّد النشاط الرئيسي الذي سيقوم به الزائر في موقعك
المواقع الناجحة على الانترنت تسخّر خصائصها لدعم نشاطها الرئيسي. على سبيل المثال:
- النشاط الرئيسي لموقع Flickr هو تبادل الصور.
- النشاط الرئيسي لموقع facebook هو التواصل الاجتماعي.
- النشاط الرئيسي لموقع YouTube هو مشاركة مقاطع الفيديو.
- النشاط الرئيسي لموقع Amazon هو شراء السلع.
وأمثلة من مواقع عربية:
- النشاط الرئيسي لموقع قيّم هو معرفة جودة المطاعم.
- النشاط الرئيسي لموقع شركة اتصالات هو الاشتراك مع الشركة (في خدمة أو أكثر).
ان لم تتمكّن من تحديد النشاط الرئيسي لموقعك، فاسأل نفسك “ماهو الشيء الذي ان قام الناس بزيارة الموقع من أجله فسأعتبره ناجحاً؟”. قد يكون الجواب هو “تبادل الملفات” (موقع رفع ملفات) أو “معرفة جديد التقنية” (مدوّنه تقنيّة).
أكمل قراءة بقية الموضوع »
مصنف في تجربة المستخدم | 13 تعليقات »
بعد قضاء بعض الوقت في تطوير بنية الموقع التحتية لموقع قيّم، عدنا للعمل مره أخرى على تطوير واجهة الموقع. وهذه المره كان الهدف هو الصفحة الرئيسية.
فسابقاً كانت هناك صفحتين رئيسيتين، احداها يراها الزوّار الذين لم يسجلوا دخولهم للموقع (وهي تحوي شرح بسيط عن فكرة الموقع) ،و الأخرى يراها من من قام بتسجيل دخوله للموقع أو اجتاز الصفحة الرئيسية الأولى بالضغط على زر “تصفّح محتويات الموقع” كما ترى في الصوره:
الصفحة الرئيسية السابقه لقيّم (بعد التعديل)
الصفحة الرئيسية الأولى تلك صممتها كتعديل أو تطوير مؤقّت لتسبتدل الصفحة القديمة التي كانت أكثر تعقيداً وازدحاما:
الصفحة الرئيسية السابقة لقيّم (قبل التعديل)
ومع انني بسّطتها بشكل كبير، الا أن الكثير من الزوّار كانوا يعتقدون أن الموقع يتطلب التسجيل بمجرّد رؤية تلك الصفحة دون قرائتها حتى! وذلك ليس قصوراً فيهم، بل ببساطة توصّلوا الى استنتاج سريع بناء على خبرتهم وتجاربهم مع مواقع أخرى دون تضييع وقتهم في قراءة الصفحة، فالمواقع التي لا تظهر أياً من محتواها في الصفحة الرئيسية غالباً تتطلّب التسجيل لتصفّح المحتوى.
ولهذا السبب، قمنا بحذف الصفحة الرئيسية الأولى ووضع الشرح في شريط في أعلى الصفحة يظهر للزوّار الذين لم يسجّلوا دخولهم للموقع، يشرح لهم مختصر الموقع ويعرض عليهم الانضمام.
الصفحة الرئيسية الحالية بعد التعديل (اضغط الصورة للتكبير)
وبذلك نكون قد تخلصنا من احدى أهم المشاكل في واجهة الموقع. وما تراه لن يكون الشكل النهائي بالطبع، فتطويرنا لواجهة الموقع يتم على شكل “جرعات” مستمره حسب الحاجة وحسب كيفيّة تعامل الزوّار والأعضاء التغييرات الجديدة (التي يمكننا معرفتها من خلال احصائيات الموقع).
ما رأيك في هذا التغيير؟ هل ترى أنه للأفضل؟
وان كنت ترغب المزيد عن تفاصيل هذا التطوير وأسبابه، فلا تتردّد بسؤالي في التعليقات.
مصنف في مشاريع | 11 تعليقات »
لا قيمة لمواضيع المدونة -مهما كانت مفيدة- ان لم تناسبك كقاريء.
ولهذا السبب رغبنا في القيام باستبيان خفيف (8 اسئلة فقط) لمعرفة كيفية قرائتك للمدوّنة، حتى يمكننا تطوير مواضيعنا القادمة ان شاءالله لتلائمك بشكل أكبر.
تعبة الاستبيان التالي لن يأخذ منك أكثر من دقيقتين: رابط الاستبيان
ملاحظة: قد يحوّلك الاستبيان أحياناً الى الصفحة الرئيسية بعد ارسال اجابتك. لا تقلق، فاجاباتك ستصل حينها.
شكراً لك مقدماً!
مصنف في تحديثات الموقع | 7 تعليقات »
