نبذة عن الكاتب مشهور الدبيان

بدأت مشواري في عالم قابلية الاستخدام في عام 2006 عندما رغبت في دافعي تعلّم بعض الشيء عن هذا المجال حتى استعين به في تطوير مواقعي الخاصة, ثم احببت فكرته خاصة ان هدفه هو تسهيل استخدام مواقع الانترنت للجميع. و منذ ذلك الحين و انا اقوم بتطوير معلوماتي و شحذ مهارتي بإستمرار عن طريق القراءة المستمرة و مساعدة اصحاب المواقع في تطوير واجهات مواقعهم. و صلت الآن و لله الحمد الى مرحلة متقدمة, و اقوم حاليا في العمل على عدة مشاريع كمختص في قابلية الاستخدام (usability) و تجربة المستخدم (user experience).

موقع الكاتب: http://aldubayan.com/

مواضيع الكاتب

افضل طريقة لشرح فكرة موقعك للزوار الجدد

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

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

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

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

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

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

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

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

بتلي

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

أكمل قراءة بقية الموضوع »

فيديو: هل جهاز الكيندل فاير عملي؟ (Kindle Fire)

فيديو: مقارنة بين واجهتي جالاكسي اس٢ وجالاكسي نيكسس

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

اكتشف الخطأ: موقع للتجارة الالكترونية

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

صورة الموضوع

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

أظهر الحل »

الحل:

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

 

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

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

صورة الموضوع

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

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

أظهر الحل »

الحل:

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

 

اكتشف الخطأ: رسالة في موقع بنك الراجحي

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

صورة الموضوع

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

أظهر الحل »

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

لمزيد من التفاصيل يمكنك قراءة موضوع استخدامات الالوان الأحمر والأخضر والأصفر

 

بخصوص مستقبل المدوّنة

صورة الموضوع

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

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

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

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

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

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

تغيير اسم وهوية الموقع

شعار الموقع الجديد

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

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

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

ما معنى ْUX Fix؟

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

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

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

تعقيب: لماذا لا يمكن استبدال دوائر قوقل بلس بمربعات

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

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

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

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

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

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

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

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

ماذا لو تحوّلت دوائر قوقل بلس الى مربعات؟

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

صورة

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

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

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

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

أكمل قراءة بقية الموضوع »