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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

عدة أمور:

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

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

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