UI & UX

وصلني السؤال التالي من أحد قراء المدونة، وهو عن الشروحات التي يتم وضعها عادة في الصفحة الرئيسية في مواقع الانترنت لشرح فكرة الموقع:

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

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

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

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

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

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

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

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

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

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

• اذا كان الموقع يعتمد على بعض المزايا المميزة التي قد تحتاج الى ان تعطي المستخدم لمحة عنها حتى يستوعب فكرتها، كما هو موجود في موقع تطبيق campfire:
  

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

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

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

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

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

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

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

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

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

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

• فيديو: مقارنة بين واجهتي جالاكسي اس٢ وجالاكسي نيكسس
• فيديو: اعلان مزعج …. جداً
• فيديو: هل يمكنك تحديد مشاكل هذا النظام الترفيهي؟

قمت في هذا الفيديو بمقارنة الأنظمة الموجودة في جوالي جالاكسي اس ٢ (اندرويد ٢.٣) وجالاكسي نيكسس (٤.٠)، واستعراض بعض التطويرات الموجودة في واجهة نظام اندرويد الجديد.

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

• فيديو: هل يمكنك تحديد مشاكل هذا النظام الترفيهي؟
• مقارنة بين طريقة استخدام الأطفال والبالغين لمواقع الانترنت
• فيديو: اعلان مزعج …. جداً

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

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

 

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

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

بعض الحلول المقترحة :

1. إخبار المستخدم أنه يمكنه أن لا يضع البريد الإلكتروني في حال لم يرغب في الحصول على رد على رسالته .
2. تحويل كلمة “الموقع” إلى “الموقع الإلكتروني”، ووضع http:// قبل الخانة للدلالة على أن المطلوب هو “رابط” .
3. توضيح أن خانة الموقع “غير مطلوبة” أو “غير إجبارية” .
4. تحديد وقت معين للحصول على رد على الرسالة، لـ تشجيع المستخدم لإرسال رسالته و تعزيز الثقة لديه بأنه سـ يحصل على الرد .

الشكل بعد التعديل :

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

خلاصة التجربة :

 

• حاول دائماً أن تجري اختبار قابلية الاستخدام  و اختبار الـ 5 ثواني على الآخرين قبل أن تنشر مشروعك، خصوصاً لو كان على أشخاص لم يجربوا الموقع سابقاً و ليس لهم علاقة بتخصص الموقع .
• عندما تقوم بإعداد نموذج الاتصال بنا، احرص على توضيح الخانات الإجبارية و الاختيارية، خصوصاً إذا لم تكن كلها إجبارية، و حاول أن تجعل عنوان الخانة يُعبر عنها ولا تستعمل كلمات مبهمة مثل “الموقع”، لا مانع من وضع بادئة قبل مربع الإدخال لـ تكون مفتاح للمحتوى كـ http:// او 00966 .
• أيضاً يجب عليك أن تحرص ألا تدرج أي خانة لست في حاجة إليها، فـ ليس من المتوقع أن تطلب رقم الجوال من المستخدم في موقع ألعاب مثلاً .
• حاول أن تضع مدة معينة للرد على الرسالة، فـ هذا يعزز الثقة بشكل كبير في نفس المستخدم ويقوي مصداقية موقعك، لكن لا تضع وقتاً وأنت تعلم أنك لن تلتزم به، لأن هذا سيعود عليك بضرر مُضاعف .
• شيء أخير مهم لم يمر علينا في هذا النموذج، إذا كنت تتوقع أن إجابات زوارك لن تخرج من إجابات معينة، يمكنك أن تضع الإجابات المحتملة كلها على شكل قائمة منسدلة، مثلاً إذا كان زوارك جميعهم من المملكة العربية السعودية و تحتاج أن تحصل منهم على المنطقة، يمكنك وضع قائمة منسدلة “List” فيها مناطق المملكة العربية السعودية كلها مثلاً .

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

• ماهي تجربة المستخدم؟
• “منتدى” متخصص في تطوير سهولة استخدام المواقع

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

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

[[Visit blog to check out this spoiler]]

 

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

• اكتشف الخطأ: رسالة في موقع بنك الراجحي
• اكتشف الخطأ: الصفحة الرئيسية لموقع بنك البلاد
• ماهو الطول المناسب لصفحة موقع انترنت؟

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

اضغط الصورة لتكبيرها

توجد ثلاثة أخطاء -على الأقل- في التصميم، هل تستطيع تحديدها دون النظر الى الحل؟

[[Visit blog to check out this spoiler]]

 

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

• اكتشف الخطأ: رسالة في موقع بنك الراجحي
• جديد موقع “قيّم”: تخسيس الصفحة الرئيسية
• تطوير مقترح لصفحة الـfacebook الرئيسية

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

هل يمكنك معرفة الخطأ الموجود في التصميم دون النظر الى الحل؟

[[Visit blog to check out this spoiler]]

 

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

• تطوير قابلية استخدام موقع يوزرات
• تلميح: استخدامات الألوان الأحمر والأصفر والأخضر
• موقع “خدماتي”: مثال لعدم تفهّم الشركات لاحتياجات عملائها

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

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

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

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

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

شكراً لكل من سأل، واعتذر للجميع عن التوقف عن الكتابة في الفترة السابقة.

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

لا يوجد مواضيع مشابهه هذا الموضوع.

قمت – أخيراً – بالقيام بخطوة أفكّر القيام بها منذ فترة: تغيير اسم المدونة الى اسم أفضل واشمل.

قمت بهذا التغيير لعدة أسباب:

• الاسم القديم (interfacefix) كان طويلاً ويسبب صعوبات للكثير من القراء الحاليين والجدد (كانت تُسمّى “فرفيكس”، “انترفيكس” …الخ)، فضلاً عن صعوبة كتابته بشكل صحيح.
• بما انه كان اسماً طويلاً ومعقداً، فقد كنت اضطر الى اسم عربي مرادف (مدونة قابلية الاستخدام). الآن يمكنني استخدام اسم بسيط وموحد وهو UX Fix.
• توجهي في المدونة لم يعد محصوراً على “قابلية الاستخدام” فقط، بل أصبح اشمل ليعم تجربة المستخدم كاملة (اقرأ الفرق هنا).
• تجهيز الموقع لاشياء قادمة ان شاءالله لا يناسبها اسم الموقع القديم.

ما معنى ْUX Fix؟

UX هي الاختصار المعتمد لـUser Experience، اي “تجربة المستخدم”. اما Fix هنا فتعني “جرعه”. او يمكنك ان تنظر لها على انه “اصلاح” اذا لم يعجبك المعنى الاصلى. في كل الأحوال ما يهمني هنا هو أن يكون اسم قصير ومختصر وموّحد.

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

بالمناسبة، اذا كنت تتابع حساب الموقع في الفيسبوك، فارجو ان تقوم بمتابعة الحساب الجديد، لان فيسبوك لا يسمح لي بتغيير اسم الحساب ليطابق اسم الموقع الجديد.

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

• طرق تغيير التصميم القديم لموقعك
• جديد موقع قيّم: تطوير صفحات المطاعم

طرحت قبل عدة ايام موضوعاً يقترح تغيير دوائر قوقل بلس الى مربعات لحل بعض المشاكل التي واجهتها شخصياً مع الدوائر.

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

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

انت قمت بالتركيز على مهمة “التنظيم” بدلاً من ذلك، وهي مهمة تتبع غرضاً مختلفاً.

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

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

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

عموماً استمتعت بالقيام بهذا التمرين السريع، واستمتعت اكثر بقراءة تعقيبات الجميع على الموضوع، فشكراً لكم.

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

• ماذا لو تحوّلت دوائر قوقل بلس الى مربعات؟
• لماذا يجب الاتزان عند تطبيق قابلية الاستخدام في مشاريع الانترنت
• لماذا لا نحب أن نفكّر

هل قمت بتجربة خدمة Google Plus؟ ان كنت قمت بذلك، فلابد انك لاحظت تميّز الخدمة في صفحة “الدوائر” التي تسمح لك بتصنيف جهات الاتصال لديك في دوائر، كالتي ترى في الصورة:

اضغط الصورة للتكبير

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

مشكلة الدوائر

بعد استخدامي لتلك الدوائر لبعض الوقت، برزت عدة عيوب صعّبت بالنسبة لي موضوع التصنيف:

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

الحل المقترح: مربعات

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

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

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

يظهر الاسم بشكل كبير وجزئي فقط لسببين:

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

  فمع ان جسمه يظهر كاجزاء متفرقه في الصورة، الا ان عقلك سيقوم ذاتياً باكمال الناقص من جسمه والتعرف على انه كائن واحد.

ماذا يحدث عندما يمتليء المربع؟ سيظهر شكله بحيث يلمّح للمستخدم انه هناك المزيد من جهات الاتصال بالاسفل:

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

أما بالنسبة “للمربعات” المنشأة مسبقاً من قبل الخدمة، أو تلك المربعات الفارغة التي تنشئها بنفسك، فهي تبدو بهذا الشكل:

الغرض من المربع الرمادي الصغير هو التلميح للمستخدم بانه يمكنه سحب احدى الصور ووضعها في المربع.

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

اضغط على الصورة لتكبيرها

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

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

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

• أين المشكلة؟ #1
• أين المشكلة؟ #3
• أين المشكلة؟ #2

تستخدم مواقع البنوك المحلية عدة اجراءات لحماية حساب العميل. لكن هل فعلاً تلك الاجراءات تساعد في حماية حسابه؟ أم تجعل حياته أصعب؟ دعنا نستعرض بعضاً منها:

استخدام لوحة المفاتيح الافتراضية

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

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

تعطيل زر العوده الى الخلف

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

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

في كلا الحالتين، اقترح طريقتين لحل تلك المشكله:

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

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

دعم انترنت اكسبلورر فقط

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

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

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

كلمات مرور مؤقته طويلة

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

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

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

تفعيل المستفيد عن طريق الهاتف

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

حسناً، جميل، ماذا لو كنت مسافراً خارج المملكة؟ والأسوأ: ماذا لو كنت أدرس خارج المملكة وأملك حسابي في البنك المحلي؟ لماذا لا يرسل البنك كلمة مرور مؤقته في رسالة نصّية الى الجوال المسجّل تسمح بتفعيل المستفيد بما ان الجوال هو وسيلة التحقّق هنا؟

منع “اللصق” في النماذج

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

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

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

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

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

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

هل هناك “طرق حماية” أخرى لم أذكرها في هذا الموضوع؟ شاركنا بها في التعليقات.

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

• قابلية الاستخدام في حياتنا اليومية
• أسوأ 5 مواقع سعودية حكومية في عام 2009
• البديل الأفضل للمقدّمات الفلاشية في مواقع الانترنت

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

الفيديو عباره عن 25 دقيقه (المحاضره نفسها) بالاضافة الى الاسئلة والاجوبه التي تلت المحاضرة. اتمنى ان تجدها مفيدة.

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

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

• فيديو: محاضرة “مباديء تصميم واجهات المستخدم”
• فيديو: لقائي عن قابلية الاستخدام في قناة المجد
• ست اعتقادات خاطئة عن مجال قابلية الاستخدام

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

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

العجيب ان تصميم الألسنة مقتبس أصلاً من حياتنا اليوميه، مثل هذا النوع من الدفاتر:

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

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

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

• نمط تصميم: فتات الخبر (Breadcrumbs)
• 9 طرق سهلة لتطوير تصميم موقعك بشكل كبير
• نمط تصميم: الكشف التفاعلي (Responsive Disclosure)

ذهبت هذا الشهر الى ورش عمل على مدى 4 ايام تسمى “UX Intensive” تقوم بها احد اشهر الشركات في مجال تجربة المستخدم (User Experience) وهي شركة Adaptive Path. ورش العمل هذه تستهدف المتخصصين وغير المتخصصين في هذا المجال على حد سواء طالما انك تملك خبره في تطوير التطبيقات سواء كمدير او كمصمّم او كمبرمج (والتطبيقات هنا قد تكون تطبيقات انترنت او تطبيقات جوال). أحببت ان اكتب شرحاً مبسطاً عن ورش العمل هذه واختصر تجربتي بها، لعلها تفيدك في حال رغبت في حضورها في السنوات القادمة.

انقسمت ورش العمل الى 4 ايام، كل يوم يركز بشكل كامل (ولمدة 7 ساعات) على موضوع معين مرتبط بتطوير التطبيقات:

• اليوم الأول: استراتيجية التصميم (Design Strategy):
  ويركّز على طريقة وضع استراتيجية لتصميم تطبيقك بحيث تحدّد ماهي الخصائص التي يجب ان يتضمنها التطبيق، ومتى يجب ان تبدا بتطويرها، وتحديد رؤية واضحة للتطبيق.
• اليوم الثاني: أبحاث التصميم (Design Research):
  بعد ان تحدّد استراتيجية ورؤية معينه للتصميم، يأتي الآن دور عمل بحث عن الفئات التي يستهدفها التطبيق حتى تتمكّن من تصميم تطبيق يناسب احتياجاتهم.
• اليوم الثالث: هيكلة المعلومات (Information Architecture):
  ستحصل على كمية معلومات كبيرة بعد اتمامك للبحث، وهنا يأتي دور هيكلتها وتنظيمها والابتداء في بناء هيكل الموقع وترتيب محتواه استناداً الى ما توصلت اليه في بحثك.
• اليوم الرابع: تصميم التفاعل (Interaction Design):
  بعد ان تحصل على هيكله واضحه للموقع، تبدأ الآن بتصميم التفاعل في الموقع ونقله من مجرد مخطط الى نموذج أولي للموقع ثم الى تصميم نهائي يستخدمه ويتفاعل معه المستخدمين.

كل يوم عمل يحتوي على عدد جيد من التمارين التي بلا شك سترهقكك، ولكن هذه ميزه بالطبع.

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

اليوم الأول: استراتيجية التصميم (Design Strategy):

مناسب لك اذا كنت: مدير مشروع، مطوّر أو مبرمج

اعجبني:

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

لم يعجبني:

- لا يوجد ما لم يعجبني -

اليوم الثاني: أبحاث التصميم (Design Research):

مناسب لك اذا كنت: مدير مشروع، مطوّر أو مبرمج، مصمّم

اعجبني:

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

لم يعجبني:

• فكرة المشروع الذي كنا نعمل عليه في التمارين. كانت عن فندق كلاسيكي يرغب في تضمين بعض الاجهزة الالكترونية الحديثة في الغرف ويريد معرفة الاجهزة المناسبة لزوّارة. الفكرة مملّة والابداع فيها محدود.

اليوم الثالث: هيكلة المعلومات (Information Architecture):

مناسب لك اذا كنت: مدير مشروع، مطوّر أو مبرمج، مصمّم، كاتب محتوى

اعجبني:

• ورشة العمل هذه مناسبه جداً لمن لا يملك الا خلفية بسيطة عن هيكلة المعلومات، فمع انها اطول ورشة عمل، الا انه تستهدف المبتدئين بشكل كبير.

لم يعجبني:

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

اليوم الرابع: تصميم التفاعل (Interaction Design):

مناسب لك اذا كنت: مطوّر أو مبرمج، مصمّم

اعجبني:

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

لم يعجبني:

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

خلاصة التجربة

ورش عمل UX Intensive كانت بشكل عام مفيدة وملهمة، ولكن للأسف لم ترتقى الى المستوى العالي الذي كنت أتوقعه، خاصة ان القائم على ورش العمل هذه هي شركة Adaptive Path، وهي من أشهر وأكبر الشركات في مجال تجربة المستخدم (User Experience). ولكن كعادة ورش العمل والمؤتمرات، يضل الجزء الأفضل والأفيد هو التعرف على المتخصّصين من الحضور وتبادل المعلومات والتجارب معهم.

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

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

• تقييم كتاب: A Project Guide To UX Design
• تقييم كتاب: Don’t Make Me Think
• تقييم كتاب: Designing The Obvious

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

• بالصور: الفرق بين قابلية الاستخدام وتجربة المستخدم
• 3 طرق يمكنك استخدامها للفت انتباه المستخدم
• قابلية الاستخدام في حياتنا اليومية

للمهتمين في مجال الموقع، سأكون ان شاءالله أحد المتحدّثين الاسبوع القادم في مؤتمر عرب نت في يومه الأول الموافق الثلاثاء 22 مارس. خُصّص لي 20 دقيقة سأتحدث بها عن لماذا يجب على الشركات الناشئة (startups) الاهتمام بتطوير تجربة المستخدم (user experience)، مع وجود وقت مخصّص للاسئلة (من ضمن العشرين دقيقة). ما زلت أعمل على العرض التقديمي الخاص بي ولم انته منه بعد، لذلك لا استطيع تحديد تفاصيله الآن، ولكن سأحرص كل الحرص على:

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

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

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

• مؤتمر “أسبوع قابلية الإستخدام”
• تقرير: مؤتمر “أسبوع قابلية الاستخدام 2009″
• فيديو: محاضرة “مباديء تصميم واجهات المستخدم”

سأبتعد قليلاً في هذا الموضوع عن مواقع الانترنت لأتحدّث عن الأجهزة، وتحديداً أزرار الأجهزه!

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

كما ترى تحتوي هذه الشاشة على 5 أزرار:

• زر تشغيل الشاشة
• زر موجب (+)
• زر سالب (-)
• زر القائمة
• زر الرجوع الى الخلف

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

كما ترى هناك مشكلتين في هذا النوع من واجهات التحكّم:

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

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

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

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

وهذه اعدادات اختيار نمط للشاشة:

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

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

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

الجهاز الذي قمت بتصويره في هذا المثال هو نوكيا E72، وهو مليء بالأزرار كما ترى:

أتعرف ماهي الشركة التي تكره الأزرار؟ انها شركة أبل (Apple)، فهي تخلّصت عنوة من جميع الأزرار التي تجدها عادة في اجهزة الجوّال لسببين:

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

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

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

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

أما ريموت “أبل” فهو يحوي 7 أزرار فقط (مقابل 37 في الريموت الموجود في الصورة السابقه!):

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

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

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

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

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

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

اذا كانت لديك اضافة او سؤال او تعليق، فارجو ان تشاركني به في التعليقات.

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

لا يوجد مواضيع مشابهه هذا الموضوع.

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

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

كيف يشجّعك الموقع على التسجيل؟

ببساطة يطرح عليك سؤالاً عشوائياً في واجهة الموقع بمجرّد زيارته:

صورة من موقع فورم سبرينغ

تجيب على السؤال المطروح، وبمجرد ضغطك زر Save your answer (احفظ اجابتك) سيطلب منك التسجيل للقيام بذلك:

صورة من موقع فورمسبرينغ

وبمجرد قيامك بالتسجيل ستحصل على حسابك مع السؤال الذي اجبت عليه، وسيكسب الموقع عضواً جديداً.

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

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

ما الذي يجعل تأجيل عملية التسجيل أكثر فعالية من طلب التسجيل أولاً؟

عدة أمور:

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

ان كنت تملك موقعاً يتطلّب التسجيل، فاقترح اعادة النظر في عملية التسجيل ومحاولة طلبها من الزائر عند وجود حاجة فقط.

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

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

• أين المشكلة؟ #4
• عشر نصائح لكتابة محتوى أفضل لموقعك
• طرق تغيير التصميم القديم لموقعك

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

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

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

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

Tweet

__________

اذا اعجبك هذا الموضوع، فقد تعجبك المواضيع التالية:

• مقارنة بين طريقة استخدام الأطفال والبالغين لمواقع الانترنت
• طرق تغيير التصميم القديم لموقعك
• طريقة أفضل لعرض المعلومات في صفحات موقعك