تجربــة المــستخدم 🎯 | User Experience

Light Spot
Jul 20, 2020
8 min read

بسم الله الرحمــن الرحيم

أهــلاً أهــلاً .. كيفكم ؟ نتمنى تكونون بألف خير 💕

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

تجربــة المستخدم و المتعارف عليها بـ User Experience و كاختصار لها UX ممكن تكون رقميـة واللي تركز على المواقع و التطبيقات 📱 و ممكن الغير رقميــة يعني أي منتج أو خدمة خارج النطاق الرقمي، و تركيزنا اليوم راح يكون على الجانب الرقمي. طبعاً، تجربـة المستخدم الرقميــة أو أي مصطلح يندرج تحته، يعتبرون المحرك الأساسي ⚙️ لأي مصمم أو أي شخص حاب يبدأ في مشروع من خلال تصميم تطبيق أو موقع، و اللي يميز هالمجال 💡 انه مفتوح، واســع، و متجدد و الشخص يقدر يطور فيه من نفسه بدون الحاجة للدراسة الجامعية. و حسب دراسة اجرتها LinkedIn، تبين ان أحد أهم و أشــهر الوظائف المطلوبة في السعوديـة لهالسنة 2020 هو مصمم تجربة المستخدم.

كبدايــة، و قبل ما نعــرّف تجربــة المستخدم كمصطلح، ودنا نعرف أهميته ؟ ليش لهالدرجة المصممين يركزون عليه و يعتبرونه عامل رئيسي و مهم؟ و في هالنقطة تحــديداً، اعتمادنا كان كلي على النسـب المئويـة و الاحصــائيات المدروسـة 📊 و اللي كـانت كـالآتـي :

68% من مستخدمين المواقع، يغادرون الموقع بسبب سوء تجربة المستخدم.
44% من مستخدمين المواقع و التطبيقات سيخبرون اصدقائهم في حال حدوث تجربة مستخدم سيئة لهم.
62% من المستخدمين يحددون مشترياتهم المستقبلية من المواقع بناءاً على تجاربهم السابقـة.
86% من مستخدمين التطبيقات يحذفون التطبيق بسبب سوء تجربة المستخدم.
90% من مستخدمين التطبيقات يتوقفون عن استخدام التطبيق بسبب سوء تجربة المستخدم.
88% من المستخدمين أقل احتمالاً للعودة إلى الموقع إذا كانت تجربتهم سيئة.

و من خلال كل النسب المذكورة، الكبيرة و المهولة 🤯، نقدر نستنتج، و اللي يوضح لنا فيه، قد ايش تجربــة المستخدم جداً مهــمة و عامل رئيســي في نجــاح و فشـل أي مُنشــأة 📈📉.

أولاً : ما المقصود بتجربــة المستخدم ؟

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

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

ثانيــاً : ما فرق تجربة المستخدم عن كل من تصميم تجربة المستخدم و واجهة المستخدم ؟

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

1. الفرق بين تجربــة المستخدم و تصميم تجربـة المستخدم

تجربــة المستخدم - UX :

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

تصميم تجربة المستخدم - UED / UXD :

نركز فـي تصـميم تجــربة الـمسـتخدم على مصـطلح ( العمــلية/Process ) و اللي نقصد فيه، عملية تعزيز رضا المستخدم من خلال تحسين سهولة الاستخدام و درجة استمتاع المستخدم في التجربة المقدمة من خلال تفاعله مع المنتج أو الخدمــة. إضافــة، تصميم تجربة المستخدم يشمل مجالات كثيرة و كلها في مكان واحد تحت هالمصطلح، و من ضمن هالمجالات : أبحاث السوق/Market Researches، التحليل التنافسي، النماذج/Prototyping، اختبار قابلية الاستخدام/Usability Testing، التصميم و إدارة المشاريع. بشكل مختصر، تصميم تجربة المستخدم يعبر عن الخطة أو الاستراتيجية اللي بنتبعها بحيث نسهل العملية و طريقة الاستخدام على العميل ؟ ايش الأساليب المتبعة اللي بجذب فيها المستخدم و بحببه في الموقع او التطبيق بحيث يرجع و يعيد الزيارة أكثر من مرة ؟ ايش الطرق اللي بكسب من خلالها العميل و رضاه ؟

لقراءة المصـدر .. هنــا

لقراءة المصـدر .. هنــا

2. الفرق بين تجربــة المستخدم و واجهــة المستخدم

تجربــة المستخدم - UX :

كما ذُكــر سابقاً.

واجهة المستخدم | User Interface - UI :

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

لقراءة المصدر .. هنــا

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

فــ بالنهاية، نستنتج أن كل من المصطلحين يكملون بعض، مافي واحد منهم يقدر يغطي على الثاني، و تكاملهم مع بعض يكــوّن نتيجة جبَّـــارة 🤩.

ثالثــاً : بيتــر مورفيل و نموذج Honeycomb الخاص بتجربة المستخدم

مين بيتر مورفيل؟ باختصار، رئيس شركة Semantic Studios ، وهي شركة استشارية في هندسة المعلومات، و هو اللي أطلق مصطلح قرص العسل لتجربة المستخدم 🍯 أو الـ Honeycomb و اللي هو عبارة عن أداة توضح الجوانب المختلفة لتصميم تجربة المستخدم و ايش هي الأساسيات و العوامل اللي تبنى عليها قيمــة المنتج او الخدمة بين المستخدمين، طبعاً سمي Honeycomb لأن الشكل العام يشبه خلية النحل، و العوامل الرئيسية اللي تعتمد عليها القيمة عبارة عن ستة، مفيد، مرغوب، متاح، موثوق، متوفر، و قابل للاستخدام.

1. مفيــــد

المقصد منه، ان يكون المحتوى مفيد و يلبي الحاجة للفئة المستهدفـة. و بالتالي، رضا المستخدم بيكون عالي و الفايدة اللي بيطلع منها تكون كبيرة.

2. مرغــوب

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

3. متــاح

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

4. موثــوق

من خلال اكتساب ثقة المستخدمين و هالشي يعتبر نقطة قوة.

5. متوفــر

بحيث يكون المنتج أو الخدمـة متوفرة للاستخدام للفئة المستهدفة من داخل و خارج الموقع أو التطبيق.

6. قابل للاستخدام

بحيث يكون سهل على الفئة المستهدفة استخدام الموقع/التطبيق ولا يكون في أي مشكله تواجههم اثناء التصفح.

لقراءة المصدر .. هنــا

“ Creativity is allowing yourself to make mistakes. Design is knowing which ones to keep. ” — Scott Adams

رابعــــاً : مصطلحات تصميم تجربــة المستخدم

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

1. تصميم الجرافيك البصري ( تصميم واجهـة المستخدم ) | UI

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

2. بحث المستخدم | User Research

المقصود من بحث المستخدم، ايش هي المعلومات المهمة اللي لازم ابحث عنها و اللي تخص الفئة المستهدفة و اللي مصمم عشانها الموقع / التطبيق، و من ضمن هالمعلومات مثل : جنس المستخدم، العمر، الاهتمامات، طبيعة العمل، كيفية الاستخدام و غيرها من المعلومات اللي تهمني كـ مصمم أو صاحب منشأة.

3. تفاعل الإنسان مع الحاسوب | Human Computer Interaction - HCI

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

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

4. التصميم التفاعلي | Interactive design

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

لقراءة المصدر .. هنــا

5. بيئــة العمل | Work environment

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

6. استراتيجيــة المحتــوى | Content Strategy

في هالمصطلح راح نركز بشكل كبير على محتوى الموقع / التطبيق، الخطة المتبعة لكيفية إدارة المحتوى، ايش اللغة أو اللغات اللي راح تُدرج في المحتوى، وش هي الاستراتيجية اللي اعتماداً عليها راح ابني محتوى الموقع، الجهاز، الخدمة و غيره. طبعاً في سؤال مهم جداً لازم نسأل فيه انفسنا، هل المحتوى المصمم مناسب للفئة المستهدفة ؟ يعني لو على افتراض، قلنا راح نصمم موقع لتعليم الأطفال، ضروري نحط بعين الاعتبار ان التصميم و المحتوى يكونون مناسبين لأعمارهم و قدراتهم العقليــة و خصوصاً انهم أطفال.

7. هيكــلة / هندســة البيانات | Information Architecture

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

لقراءة المصدر .. هنــا

8. تصميم المعلومــات | Information design

كيفية الربط بين الأشكال، الألوان، عناصر التصميم بـ وظيفتها الفعليــة و بخصائص المنتج، الخدمة، أو النظام. كيف شكل الزر، لونه، علاقته بالوظيفة المصمم لها ؟ و أكبر مثال، عندنا اللون الأحمر مرتبط بكلمات مثل إلغاء و حذف، أو مثلاً زر يحوي كلمة " تنفيــذ " اللون المتوقع له و اللي غالبيتنا يطري عليه هو الأخضر.

9. اختبــار قابلية الاستخدام | Usability Testing

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

لقراءة مصدر إضافي .. هنــا

10. تجربــة الزبــون | Customer Experience - CX

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

لقراءة مصدر إضافي عن تجربـة الزبون CX .. هنــا

لمعرفــة مصطلحات أكثر .. هنــا

خامســاً : معاييــر قابلية الاستخدام

معاييــر قابلية الإستخدام مو من نطاق تدوينتنا اليوم. لكن، نشوفها موضوع جداً مهم قرايته، المعايير للأمانة كثيرة لا تعد ولا تحصى و لها أشكال، لكننا اخترنا لكم Jakob Nielsen's 10 general principles for interaction design و اللي هو أشهرها و أكثرها اتباعاً في المجال و الأغلب يعتمد عليها اثناء التصميم غير انها تدرّس في مقررات كثير من ضمنها مقــرر الـ HCI. لقراءة المعايير الـ 10 في التصميم للمستشار نيلسن اضغط هــنا

سادســاً : أدوات و بــرامج التصــميم للـ UX | UI

البرامج اللي تستخدم في تصميم تجربة و واجهـة المستخدم كثيرة و متنوعة، لكننا راح نعرض لكم أفضل ستــة، و اللي بعضها كان لنا تجربة ممتــازة فيها.

* بالضغط على اسم البرنامج سيتم نقلكــم للموقع *

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

لبرامــج متنوعــة أكثر .. هنــا

“ Good design is the most important way to differentiate ourselves from our competitors. ” — Yun Jong Yong

مصادر إضافيــة مفيــدة

* بالضغط على اسم الموضوع راح يتم نقلكم للصفحـة *

The 5 Elements of User Experience

تاريــخ تصميم تجـربة المستخدم

عشــرة امثلة لتصاميم تجربة مستخدم مــمتازة

Peter Morville’s User Experience Honeycomb

تجربــة المستخدم

ختامـاً،

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