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

اوقات كتير بتحتاج تتأكد , هل تجربة المستخدم اللى قدمتها فعاله او لا. طبعا دا مش هيبان الا من خلال اختبارات مع مستخدمين حقيقيين, لكن المقصود من البوست هنا , مش مرحله 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

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

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

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

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

دمتم سالمين 😍

More Readings,

Elements that move in the same direction are perceived to be more related than elements that move in different directions or are stationary. Perceptual organization of movement. In perception: Gestalt principles. One Gestalt principle, that of commo...

Gauging first-impression emotional responses to product and service designs This explores the affective response that different designs elicit from people based on first impressions. Using index cards with positive, neutral, and negative ad...

The placement of elements such that edges line up along common rows or columns, or their bodies along a common center. Alignment The whole point of the alignment principle is that nothing in your slide design should look as if it were pla...

A persona in user-centered design and marketing is a fictional character created to represent a user type that might use a site, brand, or product in a similar way. Marketers may use personas together with market segmentation, where the qualitative p...

Contextual inquiry is a semi-structured interview method to obtain information about the context of use, where users are first asked a set of standard questions and then observed and questioned while they work in their own environments. Four pri...

Cultural probes (or design probes) is a technique used to inspire ideas in a design process. It serves as a means of gathering inspirational data about people's lives, values, and thoughts. Use materials such as postcards, journals, cameras, tex...