تجارب و مقالات

[UX] – تجربة المستخدم : اسرع طرق المراجعات – ج١

   -   1174

السلام عليكم , إن شاء الله تكونوا بخير  🙏

اوقات كتير بتحتاج تتأكد , هل تجربة المستخدم اللى قدمتها فعاله او لا. طبعا دا مش هيبان الا من خلال اختبارات مع مستخدمين حقيقيين, لكن المقصود من البوست هنا , مش مرحله Usabilty Testing لكن مرحلة التصميم نفسه – خلصت تصميم صفحه ما , او سكتش لتصميم ما , و محتاج تعرف مدى فعاليته – و ايه المشاكل المتوقعه , و تحاول تحسنه قبل مرحله ال Usabilty Testing.

هنا هتلاقى قايمه بأهم المشاكل او الافكار اللى ممكن تسبب مشاكل فى اى تصميم , اعمل بيهم check list و راجع اى تجربه إستخدام بيها , مش هتديك نتيجة ١٠٠٪ ولا حتى ٨٠٪ لكن على الاقل هتضمن انك مش هتقع فى جزء كبير من الاخطاء اللى من السهل تجنبها.

١- ٣ ضغطات فقط

بإختصار , المستخدم مش هيعمل اكتر من ٣ ضغطات , خلالهم إما يعرف كل شئ انت محتاج تقوله ليه – او انه يقفل التطبيق او الموقع و يمشى و مش هيرجع تانى.

٢- مبدأ باريتو

تقدر تعرف عنه اكتر من ويكىبيديا. المبدأ بيطبق فى مليون حاجه , بإختصار تطبيقه فى تجربة المستخدم هى ان ٨٠٪ من الاكشنز اللى بيقوم بيها المستخدم , بتكون من خلال ٢٠٪ من المميزات – او ان ٨٠٪ من وقت المستخدم هيكون منقضى على ٢٠٪ من المحتوى , او ان ٨٠٪ من تركيز المستخدم هيكون منصب على ٢٠٪ من المعلومات . اقدر اكمل كده للصبح – دا المبدأ و الامثله اللى عليه كتير جدا, فكر فيه لانه واحد من اهم المبادئ اللى ممكن تشتغل عليها.

٣- سبعة ناقص او زائد ٢

هى كده – عقل الانسان بيقدر يتعامل مع ٥ ل ٧ خيارات او افكار , مش اكتر من كده – علشان كده مثلا القائمه المفروض تكون بتحتوى على من ٥ ل ٧ خيارات ك حد اقصى – المهم , اى مكان فيه اليوزر , حاول متزيدش عن ٧ حجات يقدر يعملهم فى كل سكرين قدامه , و شخصيا , بفضل انك متزيدش عن ٥ حجات يقدر يعملهم , او ٥ افكار ب حد اقصى – و تبقى بتهرج لما تعملهم ٥ افكار اصلا – و خليك متفتح على باقى المجالات , فى كلمه بسمعها كتير فى التسويق , هى الزبون إذا خيرته , ضيعته ! جمله تستحق تقف قدامها.  تقدر تقرأ اكتر من هنا

٤- Banner-Blindness

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

٥- الهرم المقلوب – Inverted Pyramid!

شئ معروف للكتاب بشكل عام , لما بيحاولوا يدو فكره عامه عن الموضوع من خلال نص مختصر , يكون قادر يخلى المستخدم يهتم بيه و يكمل قرايه فيه , بنشوفه كتير فى مزارع المحتوى “لكن بشكل عبيط” المطلوب منك هنا إنك تدى فكره مختصر بكلمات بسيطه قويه عن المحتوى – و لو ملكش فى الموضوع دا او معندكش المهارة دى – تقدر على الاقل تعمل حساب الجزء دا فى التصميم مش اكتر و تتابع اخراجه فى العمل و تتأكد انه بالشكل الصحيح.

٦- 600 المراوغه:

من المعلومات الرائعه اللى ممكن تشتغل عليها.و تستغلها و تعتبرها شئ مهم جدا انك تستغله و تقيم بيه شغلك. تقدر تعرف اكتر عنها و عن السعة الذهنيه بشكل عام من هنا : إدارة السعة الذهنية و تجربة المستخدم [UX]

٧- رضا المستخدم:

رضا المستخدم شئ , و رضاك انت الشخصى شئ تانى. المستخدم ميهموش احسن حل فى الكوكب , قد ما بيدور على حل كويس وخلاص! النقطه دى تخليك تفكر فى اكتر من شئ , اولا , انك متعملش طريقتين للوصول لنفس المعلومه  او معلومه بدائية و المزيد! اليوزر هيكتفى بالبدائية , لما تفكر فى المستخدم هيفكر ازاى , حاول تفهم انه هيختار اقصر طريق بيحقق منفعه – من غير ما يبص لمدى صلاحيه المنفعه دى وهل فى شئ احسن او لا.

٨- الكوابيس او Usability nightmares

مجموعه حجات بدائيه جدا , و مجرد التفكير فيها ممكن تشوفه ملوش لزمه! لكن فى الحقيقه هو ممكن يعمل تغيير جذرى فى النتائج, مثلا لو قولتلك ان النصوص اللى هتضاف مش متراجعه – هل دا منطقى بالنسبه ليك ؟ لكن فى الحقيقه ممكن يحصل , و ممكن يسبب كوارث UX مفيش ليها اى داعى , امثله على الحجات البدائيه اللى لازم تفكر فيها بالنسبه لكوابيس قابلية الاستخدام :

  • مفيش pop-up
  • متطلبش تغيير حجم الشاشه – انت متعرفش تنسق جهاز المستخدم احسن منه!
  • مفيش خطوط صغيره فشخ , محدش بيفتح لاب توب و هو معاه عدسه مكبرة
  • اللينكات واضحه – موجوده – مفيش اى اكشن علشان اظهرها
  • رابط واحد ميت – هيكون سبب ان اليوزر يقفل الموقع و يمشى للابد
  • متعملش انيميشن كتير , ممكن تعمل سكرول انيميشن – تعمل انيميشن واحده بس مستمرة – انيميشن مع الهوفر – لكن اكتر من كده مش فرح بنت العمده هو!
  • التواصل معاك يكون سهل – متعملش فورم طويل عريض و تطلب منى اقضى ٥ دقايق من عمرى بتواصل معاك – هقولك فى داهية فعليا و هقفل الموقع !
  • انا داخل موقع – مش داخل موقع يفتحلى ٥٠٠ تاب ولا ويندو – ف متفتحش الا المواقع الخارجيه بس فى تابات جديده.
  • المنيو تكون واضحه – شارحه نفسها – متعود عليها او على الاقل متاخد المسميات من اكتر المواقع او التطبيقات اللى بيستخدمها اليوزر.
  • البحث, اليوزر لما يتوه هيدور على البحث ! دى فرصتك الاخيرة علشان تبقى عليه.
  • هيكل ظاهر واضح للصفحه و المحتويات – و اذا كان جديد – يكون سهل التعلم على الاقل

٩ – تقييم المستخدم بناء على ؟؟

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

١٠- إمكانية الضغط clickabilty

اغبى شئ ممكن تعمله انك تعمل ايقونه مثلا مسؤله عن الانتقال لصفحه ما او عن اكشن ما و تكون صغيره , او تكون قريبه جدا من مكان تانى برده ممكن يضغط عليه , او انك متحسسش اليوزر انه يقدر يضغط هنا اصلا! دى حجات لازم تاخد بالك منها كويس.

١١- User Never Read – They Scan

فكره خليها فى راسك دايما, والله المستخدم ما بيقرأ الكلام الجميل اللى انت حاطه دا كله , ولا هيفضى ولا هيعملها فى يوم من الايام. بص اللى بيحصل فعليا ان المستخدم داخل يشوف شئ معين , بيدور عليه , او بيعمل scan للصفحه بعينه, لقى شئ يلفت انتباهة قريب للى بيدور عليها , بيقرأ حوالى سطر مقاسه ك عرض ميعيديش ٤٠٠ بيكسل , و بيقرر بعدهم يكمل قرايه ولا يكمل سكرول, اعمل بقى حسابك على كده , و شوف انت عاوز المستخدم يتشد انتباهه لإيه , و لاحظ ان تحضيرك للتصميم الصح , عمره ما هيغنيك عن المحتوى الصح , بمعنى انك لازم تركز برده ويكون ليك دور فى محتوى الموقع و طريقه تقديمه.

١٢-  البحث

لازم , شئ فعلا لازم انك تعمل بحث فى اى موقع , و لازم يكون بحث ذكى , يعنى مثلا لو موقع بيقدم خدمات لما تعمل فيه بحث حاول مثلا لو كتب تصميم , يظهر ليه الخدمات المتعلقه بالتصميم , مش بس كده , شوف الناس ممكن تكتب ايه بدلا من تصميم , و تظهر نفس النتائج , لازم تكون فاهم الثقافه بتاعه المستخدمين كويس جدا.

بالنسبه للبلوج هنا انا مش عامل فيها بحث لسبب تجارى بحت.

١٣- FORMS FORMS FORMS

الموضوع هنا بجد مش سهل و نقطه باعتبرها شخصيا من اصعب النقط اللى ممكن تشتغل عليها , هى Forms او اى شئ بيشتغل بفكره قريبه ليها او اى وقت انت عاوز اليوزر بنفسه يقولك معلومات معينه.

بص فى فكرتين اساسيتين ممكن يحلولك الموضوع دا , الفكره الاولى , هو الاختصار – اختصر على قد ما تقدر و حوش اى معلومه انت تقدر تستغنى عنها – حتى لو مؤقتا , تقدر تلم كل المعلومات اللى انت محتاجها فى بطريقه Progressive اكتر من كونها متطلبه لليوزر.

الفكره التانيه , هو إن كان لا مفر من الاغتصاب – ف إستمتع, بعد ما تحاول تحوش كل شئ ملوش لزمه , من حق اليوزر انه يستمتع بالمهمه الصعبه اللى بيقوم بيها , فحاول تخليه ميحسش بالملل , استخدم interactive كتير بس متزودهاش فشخ عمال على بطال يعنى!

١٤- مدخلنيش فى تفاصيل يا مدحت !

Don not Make me think – قرر للمستخدم هو هيعمل ايه بنسبه ٨٠٪ و خلى ال ٢٠ ٪ التانيه دى إذا و إن قرر يفكر , يعنى ايه ؟

مثلا دلوقتى انت داخل موقع لطلب منتجات اونلاين – مثلا يعنى – فى بلوك المنتج نفسه , إنت هتضيف بوتون الشراء اخضر لان الناس بتعمل كده – انت صح بس لازم تفهم كويس ليه اخضر و ليه بيكون ظاهر مش مخفى و ايه اقل حجم ليه و ايه الايقونه الصح الى تضاف فيه – المهم , هنفترض ان المنتج دا فى خصائص فيه اليوزر بيحددها و هو بيشترى , الصح انك تعمل الفورم اللى هيظهر دا او المودال او ايا ما كان فيه خيارات ديفولت – و اكتر شئ واضح و ال emphasis بتاعته عاليه هو أضف الان لسله الشراء او اشترى الان.

لو اليوزر فى الحاله اللى فوق دى قرر يفكر , فقدامه كل شئ , و لو مقررش يفكر , ف إنت سوقته فعليا للقرار اللى انت محتاجه.

حدد انت عاوز المستخدمين يعملوا ايه بالظبط , و حدد نسب مؤية , او حط خيارات بترتيب , الخيار الاول انى عاوزهم يعملوا كذا , لو معملوش دا يعملوا الخيار التانى , ف التالت , ف الرابع هكذا , و إبدء خلى اليوزر يعمل الخيار الاول , ارسمله الفيجوالز بحيث انه اسهل شئ يعمل الخيار الاول , لكن لو معملوش متخسرش اليوزر , ادي لنفسك فرصه تانيه فى فرض شئ عليه , و هكذا .. اذا حابب تدى لليوزر كل الحريه فى عمل اى شئ هو عاوزه  هتخرج بتجربة استخدام مريبه جدا ليهم.

١٦- تصميم واجهة الاستخدام

هنتكلم بسرعه جدا هنا , لان الموضوع هنا يطول كتير , بس اهم نقط ممكن تراعيها هى :

إتأكد انك بتستخدم modular grid system بشكل صحيح.

الالوان – استخدم اقل عدد الوان ممكنه – و استخدم كل لون لشئ محدد فى كل الموقع , خلى فى unity كامله فى كل شئ.

وحد بشكل كامل ال whitespace فى كل الموقع – و خلى القيم فيه ثابته , يعنى المساحه بين و بين الكومبوننتس بمقاس معين ثابت – المساحه جوه الكومبوننتس بين الهيدلاين و الكونتنت بشكل ثابت و هكذا من اكبر مساحات لاصغر مساحات و متعملش اكتر من ٤ مقاسات لل whitespace.

١٧- قوة علم النفس

اقتناع داخلى عندى – ان ال UXr مش مهتمه بس تصميم شئ سهل الاستخدام – مهمته كمان إنجاح الشئ دا و تحقيق الهدف منه اصلا- و دا بيخلى من ضمن مهامك ك UXr مهام تسويقية بشكل او بأخر.

علشان تنجح فى الموضوع دا لازم تعتمد على حجات من علم النفس بشكل كبير , مش هقولك تبقى عالم ! لكن على الاقل تحاول تشوف النظريات او القوانين السهلة اللى ممكن تعمل فارق , ودى ليست ك مثال على الافكار و القوانين دى :

  1. Cliffhanger-Effect (Zeigarnik-Effect)
  2. Gestalt principles of form perception
  3. The Self-Reference Effect
  4. Baby-Duck-Syndrome
  5. Read about Mental Capacity
  6. Read about Emotional Links

١٨- إستفيد من النتائج السابقة

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

١٩- Readability

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

٢٠- راجع اول ما تصحى من النوم , و قبل ما تنام و انت مرهق

ممكن تشوفه شئ عادى – ملوش لزمه – لكن الوقتين دول اكتر وقتين انت ممكن تعرف مشاكل شغلك بنفسك فيهم, جرب مش هتخسر حاجه.

لحد هنا كفايه على الجزء دا , و الجزء التانى نكمل فيه بإذن الله,  و يارب تكونوا استفدوا و لو شئ بسيط 🙏

دمتم سالمين 😍


Also published on Medium.

المناقشة و النشر