تعلم كل ما تحتاجه عن تصميم تجربة المستخدم و واجهة المستخدم !

مرجع مصطلحات تصميم “تجربة المستخدم /واجهة المستخدم”

  • تجربة المستخدم
  • واجهة المستخدم

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

تصميم تجربة المستخدم ( User Experience )

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

متى بدأ استخدام مصطلح تجربة المستخدم UX؟

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

التصميم المتمحور حول الإنسان (Human Centered Design )

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

مصحطلح UX و UI ماذا يعني ؟

كثيرًا ما نرى هذين الاختصارين مجتمعين أو متفرقين، وكثيرًا ما يُظن أن لهما نفس المعنى، فماذا يعنيان؟

ماهو مصطلح UX ?

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

ماهو مصطلح UI ?

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

ماهو سبب التداخل بين المصطلحين UIو UX ?

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

التسلسل الهرمي( Hierarchy )

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

التسلسل الهرمي البصري ( Visual Hierarchy )

يعني تطبيق مفهوم التسلسل الهرمي ولكن على التصميمات والصور الالكترونية، فهي الطريقة التي يتم بها ترتيب مجموعة من العناصر داخل التصميم الرسومي وفق معايير (الحجم، اللون والتباين… الخ)، هذه المعايير هي التي يستخدمها الدماغ ليرسم الطريق الذي تتحرك فيه العين لرؤية الصور والتصميمات الرسومية

المسح البصري( Visual Scan )

هي الطريقة التي نتصفح بها الويب، تقنية من أبجدياتها أنها لا تُقرأ. كافة مستخدمي الانترنت يمسحون Scanning المواقع ويتوقفون عند أول عنصر يشد انتباههم، وبالتالي فهم لا يقرؤون كل شئ في الموقع، بل يقرؤون فقط ما يستحق القراءة من وجهة نظرهم

قابلية الاستخدام( Usability )

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

قابل للنقر ( Clickable )

وهو مصطلح يشير للمساحة الخاصة بالزر Button، هل مساحة الزر كبيرة وتسهل الإشارة إليها بالماوس؟ أم أن المساحة المخصصة صغيرة يصعب على المستخدم الإشارة عليها بالماوس Click ؟

التصميم التفاعلي( Interactive Design )

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

التصميم الوقائي او الدفاعي ( Defensive Design)

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

مقروئية النصوص( Readability)

مصطلح يُعنى بتقديم النص المقروء في صورة سهلة ومناسبة للقراءة، أي أن يكون النص صالحاً للقراءة من قبل كل أطياف المستخدمين على اختلاف إمكانياتهم (المصابون بضعف البصر، أو عمى الألوان… الخ)، كما يقدم هذا المفهوم عدداً من التقنيات التي تساعد على تقديم نص قابل للقراءة، مثل التسلسل الهرمي للنص، والتباين اللوني بين النص والخلفية، والمسافة بين السطور… وغيرها

الأيقونات(Icons)

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

تتبع العين( Eye Tracking)

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

( A/B Testing ) اختبار A/B

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

المساحات البيضاء/الفارغة (WhiteSpace )

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

المستخدم(User)

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

الدقة(Fidelity)

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

رسالة الخطأ ( Error Message )

هي رسالة تظهر العميل/المستخدم عند حدوث خطأ ما. أفضل رسائل الخطأ هي التي توضّح للمستخدم بإيجاز طبيعة الخطأ الذي حدث وتساعده في العودة لى المسار الصحيح وإصلاح الخطأ.

منع الخطأ ( Error prevention )

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

الإطارات السلكية( WireFrame)

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

تدفق المستخدم ( User flow )

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

هندسة المعلومات( Information Architecture)

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

تجربة مستخدم جيده ( Good user experience)

لتنفيذ تجربة مستخدم جيدة لابد من توضيح الجوانب المهمة في تجربة المستخدم خاصة للعملاء الذين يجهلون قيمة تجربة المستخدم ودورها في نجاح منتجاتهم. ويتناول هذا المخطط الجوانب التالية:
-
1- مفيد Useful
فائدة المنتج أو الخدمة مرتبطة بتطبيقات تجربة المستخدم، فسهولة استخدام المنتج لا تكفي لنجاحه إن لم تكن للمنتج فائدة يلمسها المستخدم.
-
2- قابل للاستخدام Usable
سهولة استخدام المنتج قنطرة إلى الاستفادة منه ومن مزاياه، وتعد سهولة الاستخدام واحدة من أهم الجوانب التي تدور حولها تطبقات تجربة المستخدم.
-
3- مرغوب Desirable
يؤثر شكل المنتج أو الخدمة وما يدخل في ذلك الإطار من الهوية والعلامة التجارية والسمات الجمالية في مقدار رغبة المستخدم في استخدام هذا المنتج.
-
4- قابل للعثور عليه Findable
في أي منتج أو خدمة، يجب أن يكون المستخدم قادرًا على العثور على احتياجه من المنتج دون عناء، ولهذا فإن جزءًا كبيرًا من تطبيقات تجربة المستخدم تدور حول نجاح المستخدم في العثور على مراده.
-
5- إمكانية الوصول Accessible
لا يمكن تجاهل ذوي الاحتياجات الخاصة عند بناء المنتجات أو الخدمات، فهم شريحة مهمة في أي مجتمع، ولهذا ترتبط تطبيقات تجربة المستخدم بتقديم تجربة جيدة لهذه الشريحة.
-
6- موثوق Credible
يجب أن يكون المنتج موثوقًا للمستخدم، وتلعب تجربة المستخدم الجيدة دورًا في بناء هذه الثقة من خلال طبيعة الفائدة المقدمة والوعود المقطوعة لمستخدم المنتج.
-
7- ذو قيمة Valuable
يجب أن تساهم تجربة المستخدم في تحقيق القيمة المطلوبة من المنتج أو الخدمة، فإذا كان المنتج ربحيًا ساهمت التجربة الجيدة في الرفع من عائداته وإذا كان المنتج غير ربحي ساهمت التجربة الجيدة في تحقيق أهدافه غير الربحية.

تنبية جزء من المحتوي الموجود من :

م / أحمد سكماني

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