مصطلحات تصميم تجربة المستخدم وواجهاته الإنجليزية: معانيها واستخدامها بالعربية
تُدار أعمال تجربة المستخدم وواجهاته بلغات وأدوات ومراجع تعتمد كثيراً على الإنجليزية، من أنظمة التصميم إلى تقارير البحث ومراجعات المنتجات. يساعد هذا المسرد المصممين على فهم المصطلحات وشرح القرارات والتواصل بوضوح مع المطورين والفرق وأصحاب المصلحة.
- 100 مصطلحًا
- 11 موضوعًا
- 52 مصطلحًا أساسيًا
- 200 مثالًا
أساسيات UX/UI وعملية التصميم
مدى سهولة بلوغ الناس أهدافهم وشعورهم أثناء استخدام منتج أو خدمة أو موقع، من الزيارة الأولى حتى الحصول على الدعم لاحقاً.
الشاشات والأزرار والقوائم والنصوص وسائر العناصر المرئية التي يراها الناس ويستخدمونها للتفاعل مع المنتج.
نهج يجعل احتياجات المستخدمين وأهدافهم وحدودهم محور كل مرحلة تصميم، ويسترشد بالبحث والاختبار مع أشخاص حقيقيين.
أي شخص داخل الفريق أو خارجه يتأثر بالمشروع أو يشارك في قراراته، مثل مدير المنتج أو المسؤول التنفيذي أو المهندس أو فريق الشؤون القانونية أو العميل.
يحسن التصميم عبر جولات متتابعة: ينشئ نسخة، ثم يختبرها أو يراجعها، ويتعلم من النتائج، ويعدلها ويكرر العملية.
المرحلة التي يسلم فيها المصممون التصاميم والمواصفات والملفات النهائية إلى المطورين كي ينفذوها، ويفضل أن يكون ذلك مع شرح وملاحظات واضحة.
اجتماع يعرض فيه المصممون أعمالًا قيد التطوير ويقدم الزملاء ملاحظات صريحة ومنظمة حول مدى تحقيق التصميم لأهدافه.
وضع غير مألوف أو نادر الحدوث يجب أن يظل المنتج قادراً على التعامل معه، مثل اسم طويل جداً أو انقطاع الإنترنت أو امتلاك المستخدم 500 عنصر محفوظ.
نهج لحل المشكلات يبدأ بفهم احتياجات الناس، ثم تعريف المشكلة وتوليد الأفكار وإنشاء النماذج الأولية واختبارها.
عمل محدد اتفق المصمم أو الفريق على إنتاجه وتسليمه، مثل تقرير بحثي أو مخططات هيكلية أو نموذج أولي أو شاشات نهائية.
المسار المثالي الذي تسير فيه الخطوات كما هو متوقع: يدخل المستخدم بيانات صحيحة ولا يحدث عطل وتكتمل المهمة بسلاسة.
نموذج لسير التصميم يتكون من أربع مراحل: الاكتشاف والتعريف والتطوير والتسليم، ويمثل بماستين لتوضيح اتساع التفكير ثم تضييقه.
بحث المستخدمين
دراسة الأشخاص الذين يستخدمون المنتج أو قد يستخدمونه عبر المقابلات والملاحظة والاستبيانات والاختبارات لفهم احتياجاتهم وسلوكهم ومشكلاتهم.
محادثة فردية مع مستخدم حالي أو محتمل، تستغرق عادةً من 30 إلى 60 دقيقة، لفهم أهدافه وعاداته ومشكلاته وآرائه.
مجموعة أسئلة مكتوبة تُرسل إلى عدد كبير من الأشخاص لجمع الإجابات أو الآراء أو التقييمات بطريقة تسمح بالعد والمقارنة.
فهم جديد ومفيد لسلوك المستخدمين يُستخلص من بيانات البحث، ويشرح هذا السلوك ويشير إلى فرصة لتحسين التصميم.
بحث يجمع أقوالًا وملاحظات وقصصًا من عدد قليل من الأشخاص لفهم أسباب أفكارهم وسلوكهم.
بحث يجمع أرقامًا من مستخدمين كثيرين، مثل تقييمات الاستبيان ومعدلات النقر وأزمنة تنفيذ المهام، لقياس السلوك ورصد الأنماط.
مراجعة منتجات المنافسين لفهم كيفية حلهم المشكلة نفسها، وما ينجح أو يفشل لديهم، وأين توجد فرصة للتحسين.
يبحث عن أشخاص مناسبين ويختارهم للمشاركة في بحث، مثل المقابلات أو اختبارات قابلية الاستخدام، وفق معايير كالعمر والعادات والخبرة.
أسلوب لفهم نتائج البحث عبر كتابة الملاحظات على أوراق لاصقة وتجميع المتشابه منها حتى تظهر موضوعات وأنماط.
الشخصيات ورحلات المستخدم
ملف خيالي لكنه واقعي لمستخدم نموذجي، يبنى من البحث ويضم اسماً وأهدافاً واحتياجات وإحباطات ليساعد الفريق على التصميم لأشخاص حقيقيين.
مجمل الخطوات والتجارب التي يمر بها الشخص للوصول إلى هدف باستخدام منتج، وقد تبدأ قبل فتح التطبيق وتنتهي بعد إتمام المهمة.
مشكلة أو إحباط أو عائق محدد يواجهه المستخدم، مثل خطوة مربكة أو انتظار طويل أو ميزة مفقودة.
خط زمني بصري لرحلة المستخدم يوضح مراحلها وما يفعله الشخص ويفكر فيه ويشعر به، وأين تظهر نقاط الألم وفرص التحسين.
مخطط بسيط يقسم عادةً إلى أربعة أقسام لتسجيل ما يقوله المستخدم ويفكر فيه ويفعله ويشعر به، بهدف فهمه بصورة أفضل.
أي لحظة أو قناة يتفاعل فيها شخص مع شركة أو منتج، مثل إعلان أو موقع أو بريد إلكتروني أو تطبيق أو اتصال بالدعم.
بنية المعلومات والتنقل
طريقة تنظيم محتوى الموقع أو التطبيق وميزاته وتجميعها وتسميتها، كي يجد الناس ما يحتاجونه ويفهموا موضعهم.
مخطط أو تسلسل يبين الشاشات والخطوات والقرارات التي يمر بها المستخدم لإنجاز مهمة، مثل إعادة تعيين كلمة المرور.
القوائم والروابط وعلامات التبويب وغيرها من العناصر التي تساعد الناس على الانتقال في موقع أو تطبيق وفهم موضعهم فيه.
مخطط يبيّن الصفحات أو الشاشات الرئيسية في موقع أو تطبيق وكيفية تجميعها واتصالها، وغالباً ما يُرسم على هيئة شجرة.
أسلوب بحث يطلب فيه من المشاركين تجميع موضوعات مكتوبة على بطاقات ضمن فئات تبدو منطقية لهم، ليكشفوا كيف يتوقعون تنظيم المحتوى.
صف من الروابط، غالبًا قرب أعلى الصفحة، يوضح موضع الصفحة الحالية في بنية الموقع، مثل الرئيسية ثم الأحذية ثم أحذية الجري.
طريقة بحث تختبر قدرة الناس على العثور على عناصر في بنية الموقع بعرض شجرة قوائم نصية فقط، من دون تصميم بصري.
المخططات الهيكلية والنماذج الأولية
رسم بسيط، غالباً أبيض وأسود، يوضح أماكن المحتوى والأزرار والتنقل على الشاشة من دون ألوان أو صور أو تنسيق نهائي.
نسخة مبكرة وتفاعلية من منتج أو شاشة يمكن النقر عليها أو لمسها، لاختبار الأفكار قبل بناء المنتج فعلياً.
صورة ثابتة وواقعية لشاشة أو منتج تعرض الألوان والخطوط والصور والمسافات النهائية، لكنها غير قابلة للنقر.
وصف لتصميم أو مخطط أولي أو نموذج تقريبي وبسيط، بلا ألوان أو صور أو محتوى مفصل، كي يسهل إنشاؤه وتعديله.
وصف لتصميم أو نموذج أولي يشبه المنتج النهائي في مظهره وسلوكه، بمحتوى وألوان وصور وتفاعلات حقيقية.
نموذج أولي تربط فيه الشاشات بعضها ببعض، فينقل النقر أو اللمس على الأزرار والروابط المستخدم إلى الشاشة التالية كما في المنتج الحقيقي.
اختبارات قابلية الاستخدام
مدى سهولة استخدام المنتج وسرعته ونجاحه في تمكين الناس من إتمام مهمة، ومدى رضاهم أثناء ذلك.
أسلوب بحث يجرب فيه مستخدمون حقيقيون إتمام مهام بمنتج أو نموذج أولي بينما يراقبهم باحث لمعرفة مواضع تعثرهم.
طريقة تعرض نسختين من صفحة أو ميزة على مجموعتين مختلفتين من المستخدمين في الوقت نفسه، ثم تقيس أيهما تحقق أداءً أفضل.
مراجعة يفحص فيها خبراء سهولة الاستخدام واجهةً وفق قائمة مبادئ تصميم مقبولة، تسمى إرشادات أو قواعد استدلالية، لاكتشاف المشكلات دون اختبارها مع مستخدمين.
أسلوب اختبار يعبّر فيه المشاركون بصوت مسموع عما يفكرون فيه وما يبحثون عنه وما يشعرون به أثناء استخدام منتج، كي يتابع الباحث استدلالهم.
شخص يشارك في جلسة بحثية مثل مقابلة أو اختبار قابلية استخدام، ويطابق عادةً مواصفات مستخدمي المنتج المستهدفين.
نسبة المشاركين الذين ينجزون مهمة محددة على الوجه الصحيح في اختبار قابلية الاستخدام؛ وهو من أبسط المقاييس وأكثرها شيوعًا.
اختبار قابلية استخدام يقود فيه باحث كل جلسة مباشرة، حضورًا أو عبر اتصال مرئي، فيعطي المهام ويسأل ويراقب المشارك.
تقرير بصري يستخدم ألواناً من الأزرق البارد إلى الأحمر الساخن لإظهار المواضع التي ينقر أو يحرك أو ينظر إليها المستخدمون أو يمررون عندها أكثر.
تصميم التفاعل
جزء من التصميم يحدد سلوك المنتج أثناء الاستخدام: ما يحدث عند النقر أو الكتابة أو السحب أو الانتظار، وكيف يستجيب النظام.
الإشارة التي يقدمها النظام ردًا على فعل المستخدم، مثل تغير لون زر أو ظهور مؤشر تحميل أو رسالة نجاح، كي يعرف المستخدم ما حدث.
خاصية في شيء أو عنصر واجهة توحي بكيفية استخدامه، مثل زر بارز يبدو قابلًا للضغط أو مقبض يدعو إلى السحب.
الخطوات الأولى التي ترحب بالمستخدمين الجدد وتساعدهم على فهم المنتج وإعداده والوصول إلى أول نجاح فيه.
الفكرة التي يكونها الشخص عن طريقة عمل شيء ما، استنادًا إلى تجاربه السابقة، والتي تشكل توقعاته من المنتج.
مقدار الجهد الذهني الذي يحتاج إليه الشخص لفهم شيء واستخدامه؛ فإذا زاد أبطأ الناس أو ارتبكوا أو تركوا المهمة.
أي عنصر في التجربة يبطئ المستخدم أو يصعّب المهمة، مثل خطوات إضافية أو نموذج طويل أو تسمية غامضة أو تحميل بطيء.
لحظة تفاعل صغيرة تؤدي غرضًا واحدًا وتقدم استجابة، مثل الإعجاب بمنشور أو تبديل مفتاح أو اهتزاز حقل بعد كلمة مرور خاطئة.
مظهر العنصر حين يكون مؤشر الفأرة فوقه، مثل تغميق الزر لإظهار إمكان النقر عليه.
حركة للأصابع على شاشة لمسية، مثل النقر أو التمرير أو التكبير بالقرص أو الضغط المطول، تعطي الجهاز أمرًا.
المقاطع النصية القصيرة في الواجهة، مثل تسميات الأزرار والتلميحات ورسائل الخطأ والتأكيد، التي ترشد المستخدم أثناء المهمة.
تصميم يخدع المستخدم أو يضغط عليه ليفعل ما لم يقصده، مثل إخفاء زر الإلغاء أو عرض عدّاد تنازلي زائف.
مبدأ يقرر أن زمن الوصول إلى هدف يعتمد على بعده وحجمه؛ فالأهداف الأكبر والأقرب أسرع وأسهل إصابة.
عناصر الواجهة وأنماطها
عنصر يمكن النقر عليه أو لمسه لتنفيذ إجراء، مثل إرسال نموذج أو حفظ تغييرات أو فتح قائمة.
زر أو رابط أو رسالة قصيرة تطلب من المستخدم اتخاذ الخطوة التالية، مثل التسجيل أو إضافة سلعة إلى السلة أو بدء فترة تجريبية مجانية.
قائمة تبقى مغلقة ولا تعرض خياراتها إلا عندما ينقر المستخدم عليها أو يلمسها، فتتيح الاختيار دون استهلاك مساحة دائمة.
نافذة تظهر فوق الشاشة الحالية وتحجب بقية الصفحة حتى يستجيب المستخدم أو يغلقها.
صورة أو رمز صغير يمثل إجراءً أو غرضًا أو فكرة، مثل عدسة مكبرة للبحث أو سلة للحذف.
نص يخبر المستخدم بأن مشكلة وقعت، ويفضل أن يوضح ما حدث وكيفية إصلاحه، مثل رسالة بجانب حقل نموذج.
مربع في نموذج أو واجهة يكتب فيه المستخدم معلومات مثل الاسم أو البريد الإلكتروني أو عبارة البحث.
ما تعرضه الشاشة حين لا يوجد محتوى بعد، مثل صندوق وارد فارغ أو بحث بلا نتائج أو حساب جديد بلا مشاريع.
مربع نص صغير يظهر عند تمرير المؤشر فوق عنصر أو تركيز لوحة المفاتيح عليه أو النقر عليه، ليشرح شيئًا أو يسمي أيقونة.
مربع صغير ينقره المستخدم أو يلمسه لتحديد خيار أو إلغاء تحديده؛ ويمكن تحديد عدة مربعات من المجموعة نفسها.
مفتاح يحول إعدادًا إلى التشغيل أو الإيقاف بلمسة واحدة، ويسري أثره عادة فورًا، مثل تفعيل الوضع الداكن أو الإشعارات.
أيقونة من ثلاثة خطوط أفقية تفتح قائمة تنقل مخفية، وتستخدم كثيرًا على شاشات الهاتف لتوفير المساحة.
حاوية مستطيلة تجمع محتوى مترابطًا عن عنصر واحد، مثل صورة منتج وعنوانه وسعره، وغالبًا تقود إلى تفاصيل إضافية.
التصميم المرئي والتخطيط
استخدام الحجم واللون والتباين والمسافات والموضع لتوجيه الانتباه إلى العناصر الأهم أولاً ثم ترتيب قراءة البقية بوضوح.
ترتيب النصوص والصور والأزرار وغيرها من العناصر على صفحة أو شاشة، بما يشمل أحجامها ومواضعها والمسافات بينها.
اختيار الخطوط وأحجامها وسماكاتها وارتفاع الأسطر وتباعد الحروف وترتيبها لجعل النص مقروءاً وتحديد نبرة التصميم.
نهج يتكيف فيه التخطيط تلقائياً مع أحجام الشاشات المختلفة، من الهاتف إلى الشاشة الكبيرة، ليعمل المنتج جيداً عليها جميعاً.
المساحة الخالية بين عناصر الصفحة وحولها، تمنح المحتوى مجالًا للتنفس وتجمع العناصر المترابطة وتجعل القراءة أسهل.
مجموعة من الأعمدة والصفوف والفواصل غير المرئية يستخدمها المصممون لتوزيع العناصر ومحاذاتها على نحو متسق في صفحة أو شاشة.
مجموعة ثابتة من الألوان المختارة لمنتج أو علامة، عادةً بألوان أساسية وثانوية ومحايدة، إضافة إلى ألوان الحالات مثل الأحمر للأخطاء والأخضر للنجاح.
اصطفاف العناصر على حافة أو خط مركزي مشترك، بما يجعل التخطيط منظماً وأسهل في التصفح البصري.
مقدار الفراغ بين العناصر وداخلها، مثل المسافة بين البطاقات أو الحشو داخل الزر، لتنظيم الإيقاع وتجميع المحتوى.
عرض للشاشة يتغير عنده التخطيط المتجاوب، مثل تحول ثلاثة أعمدة إلى عمود واحد أو تحول شريط التنقل إلى أيقونة قائمة.
مطابقة التصميم بدقة حتى كل بكسل من الحجم والمسافة واللون، خصوصًا عند مقارنة المنتج المنفذ بملف التصميم الأصلي.
أنظمة التصميم
مجموعة مشتركة من المكونات القابلة لإعادة الاستخدام وقواعد التصميم والرموز والتوثيق، تحفظ اتساق منتجات الشركة وتسرّع بناءها.
لبنة واجهة قابلة لإعادة الاستخدام، مثل زر أو بطاقة أو حقل إدخال، تُصمم مرة وتستخدم في مواضع متعددة بمظهر وسلوك متسقين.
وثيقة تحدد قواعد المظهر والكتابة للعلامة أو المنتج، مثل الألوان والخطوط واستخدام الشعار والأيقونات ونبرة الخطاب.
قيمة مسماة تحفظ قرارًا تصميميًا، مثل لون أو حجم خط أو مقدار تباعد، كي يستخدم المصممون والمطورون القيمة نفسها في كل موضع.
مجموعة جاهزة من عناصر الواجهة، مثل الأزرار والنماذج والأيقونات وأشرطة التنقل، يسحبها المصمم إلى ملفه لبناء الشاشات بسرعة.
حل مجرّب وقابل لإعادة الاستخدام لمشكلة شائعة في الواجهة، مثل شريط بحث باقتراحات أو تمرير لا نهائي أو دفع متعدد الخطوات.
إمكانية الوصول
ممارسة تصميم منتجات يستطيع الأشخاص ذوو الإعاقة، مثل ضعف البصر أو العمى أو الصمم أو محدودية الحركة، إدراكها وفهمها واستخدامها.
الفرق في السطوع بين النص أو الأيقونة والخلفية، وهو ما يحدد سهولة رؤيتهما، ولا سيما لدى ضعاف البصر.
برنامج يقرأ محتوى الشاشة بصوت عالٍ أو يرسله إلى شاشة برايل؛ يستخدمه أساساً المكفوفون وضعاف البصر للتعامل مع الحواسيب والهواتف.
اختصار إرشادات إتاحة محتوى الويب: معيار دولي نشره W3C يشرح كيفية جعل مواقع الويب والتطبيقات مهيّأة للوصول والاستخدام.
وصف كتابي موجز للصورة يضاف إلى الشيفرة، ويقرؤه قارئ الشاشة أو يعرضه المتصفح إذا تعذر تحميل الصورة.
النمط المرئي، وغالبًا إطار أو حلقة، الذي يبين العنصر المحدد حاليًا عند التنقل في الصفحة بلوحة المفاتيح.
الانتقال في الواجهة واستخدامها بلوحة المفاتيح وحدها، أساساً بمفاتيح Tab وShift+Tab وEnter والمسافة والأسهم، دون فأرة.
نهج يصمم لمراعاة التنوع البشري، بما فيه القدرة والعمر واللغة والثقافة والظروف، كي يتمكن عدد أكبر من الناس من استخدام المنتج.
اختبار سريع: هل تعرف هذه المصطلحات؟
عشرة أسئلة من هذا المعجم. اختر المعنى الصحيح لكل مصطلح واكتشف نتيجتك.
كيف تتعلم مفردات تصميم تجربة المستخدم وواجهة المستخدم
- اقرأ دراسات الحالة ووثائق أنظمة التصميم وتقارير قابلية الاستخدام باللغة الإنجليزية.
- سمِّ الصفحات والمكونات والعناصر في ملفات التصميم بأسماء واضحة وثابتة.
- تعلم التعبيرات مع أفعالها المعتادة، مثل إجراء اختبار قابلية استخدام وتسليم التصميم.
- اعرض قرار التصميم بذكر مشكلة المستخدم والاختيار الذي اتخذته والدليل الذي استندت إليه.
- ميّز بين المفاهيم المتقاربة مثل المخطط الهيكلي والنموذج المرئي، وبين رحلة المستخدم وتدفقه.
الأسئلة الشائعة
ما الفرق بين UX وUI؟
تتناول UX تجربة استخدام المنتج كاملةً، بينما تشير UI إلى عناصر الواجهة المرئية والتفاعلية مثل الشاشات والأزرار والألوان.
ما الفرق بين المخطط الهيكلي والنموذج المرئي والنموذج الأولي؟
يبين المخطط الهيكلي البنية، ويعرض النموذج المرئي شكلاً ثابتاً أقرب إلى المنتج، أما النموذج الأولي فيتيح تجربة التفاعل والتنقل.
كيف أتعلم مفردات UX/UI الإنجليزية؟
اقرأ دراسات الحالة والوثائق، وتعلم المصطلحات ضمن عبارات عملية، ثم استخدمها في ملفات التصميم والعروض.
ما الفرق بين قابلية الاستخدام وإمكانية الوصول؟
تركز قابلية الاستخدام على سهولة إنجاز المهام، بينما تضمن إمكانية الوصول أن يتمكن أشخاص بقدرات مختلفة من إدراك المنتج وفهمه واستخدامه.
هل أستخدم المصطلحات العربية أم الإنجليزية في العمل؟
يعتمد ذلك على الفريق والجمهور؛ فهم المقابلين يساعدك على قراءة الأدوات والمراجع الإنجليزية والتواصل بدقة بالعربية.
مجالات ذات صلة
تدرّب على القراءة المتدرجة
تساعدك القراءة بالمستوى المناسب على تثبيت المفردات الجديدة. اختر كتبًا إنجليزية مجانية:
