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

تعريف واجهة المستخدم User Interface

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

أهمية واجهة المستخدم

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

الفرق بين واجهة المستخدم UI وتجربة المستخدم UX

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

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

سبب التداخل بين المصطلحين

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

أخطاء شائعة في عروض التوظيف

سواء أكان الحديث عن تصميم تجربة المستخدم UX Design أو تصميم واجهة المستخدم UI Design فإن كلا التخصصين حديثين نسبيًا وهو ما يتسبب في الخلط بينهما في مواقع التوظيف، وكثيرًا ما يجهل مسؤولو التوظيف هذا الفرق فيضعون عروضًا خاطئة للتوظيف كأن يكون الطلب موجهًا لمصممي تجربة المستخدم UX Designer في حين تكون المهارات المطلوبة في الوظيفة خاصة بمصممي واجهة المستخدم UI Designer.

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

هناك عدد كبير من المهارات المتعلقة بتصميم واجهة المستخدم وسبب كثرة تلك المهارات هي الطبيعة التوسعية لمجال تصميم الواجهات وكذلك ارتباط تصميم الواجهات بتصميم تجربة المستخدم المجال الحديث والمتنامي، ومن تلك المهارات ما يلي:

1- الإلمام بمكونات الواجهات المختلفة

ويدخل في ذلك مكونات واجهات الويب، أو الهواتف الذكية أو أي وسائط أخرى يتم العمل عليها، فعلى سبيل المثال من المهم أن يكون مصمم واجهات المستخدم ملمًا بمكونات الويب مثل:

- عناصر الإدخال Input Components، ومنها على سبيل المثال:

• الأزرار Buttons
• مربعات الاختيار Checkboxes
• أزرار الراديو Radio Buttons
• حقول النصوص Text Fields
• القوائم المنسدلة Dropdown Lists

- عناصر التنقّل أو الملاحة Navigational Components، ومنها على سبيل المثال:

• ترقيم الصفحات Pagination
• التنقّل التفصيلي أو فتات الخبز Breadcrumb
• حقل البحث Search field

- العناصر الإعلامية Informational Components، ومنها على سبيل المثال:

• التنبيهات Notifications
• النوافذ المنبثقة Modal Windows
• التلميحات Tooltips

بالنسبة للهواتف الذكية يمكن الإطلاع على دليل Human Interface Guidelines من أبل لمعرفة مكونات الواجهات لنظام iOS وكذلك الاطلاع على Material Design لمعرفة مكونات الواجهات لنظام الأندرويد.

2- إجادة التعامل مع أدلة الهوية البصرية

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

3- تصميم المخططات الأولية Wireframes

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

4- إعداد النماذج Prototypes

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

5- تصميم الأيقونات

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

6- تسليم التصميم للمطورين Design Handoff

تتم عملية تسليم التصميم للمطورين بأشكال متعددة، فمن المطورين من يفضل تصدير الأيقونات والشاشات إلى مجلدات مقسمة بحسب النظام iOS أو Android أو ويب، ومن المطورين من يفضل العمل على تطبيقات مخصصة لعمليات التسليم مثل Zeplin أو Invision Inspect، بحيث يمكن الحصول على الشاشات والأيقونات والألوان وبعض أكواد التصميم بلغات برمجية محددة مثل الـ css أو الـ swift وغير ذلك، وعلى مصمم واجهات المستخدم أن يكون لديه الاطلاع على طرق التسليم المختلفة وتكون لديه القدرة على التعامل مع تلك الطرق المختلفة أيضًا.

7- الأنميشن Animation

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

8- مهارات متعلقة بتجربة المستخدم

كما تمت الإشارة سابقًا فإن تصميم واجهة المستخدم هو أحد المجالات المندرجة تحت مظلة تصميم تجربة المستخدم، وكثيرًا ما يحتاج مصمم الواجهات إلى مهارات أخرى متعلقة بتصميم تجربة المستخدم مثل اختبارات قابلية الاستخدام Usability Test، هندسة المعلومات Information Architecture، كتابة تجربة المستخدم UX Writing وغير ذلك.

9- مهارات متعلقة بتطوير الواجهات

ربما تكون فكرة تعلّم تطوير الواجهات وبعض لغات البرمجة الخاصة بها كـ Html، Css، JS، مرفوضة لدى كثير من مصممي واجهات المستخدم، إلا إن تعلم ذلك يساعد مصمم الواجهات على تصوّر الممكن وغير الممكن أثناء تصميم واجهات الويب، كذلك يساعد تعلّم هذه المهارات في تكوين لغة مشتركة بين مصمم الواجهات ومطور الواجهات تؤثر كثيرًا في ارتقاء العمل وتحقيق جودة أعلى.

أفضل أدوات تصميم واجهات المستخدم

في الماضي كان برنامجا الفوتوشوب Photoshop والالستريتور Illustrator من شركة أدوبي Adobe هما الأداتان الأشهر لتصميم الواجهات، إلا أن ظهور برامج جديدة أكثر تخصصًا في مجال الواجهات جعل الكثير من المصممين يعزفون عن استخدامها، وبعيدًا عن جانب التخصص في الأدوات الحديثة يمكن للمصمم أن يستخدم الأداة التي يفضلها، فهو صاحب الكلمة النهائية في جودة العمل وما الأداة إلا وسيلة لتنفيذ إبداعه.
ورغم ما سبق فإن تميّز بعض الأدوات المتخصصة وتبسيطها لعملية تصميم الواجهات، ومواكبتها لأحدث اتجاهات التصميم، يدفعنا لاستعراض عدد منها:

1- سكيتش Sketch

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

2- أدوبي إكس دي Adobe XD

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

3- فيجما Figma

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

4- فريمر Framer

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

نصائح لواجهات مستخدم جيدة

1- الاتساق Consistency

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

2- الرؤية والوضوح Visibility & Clarity

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

• وضوح الأزرار القوائم الرئيسية
• وضوح التنبيهات والرسائل الهامة
• وضوح النصوص الرئيسية في الواجهة

3- القدرة على التنبؤ Predictability

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

4- الاعتياد Familiarity

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

5- البساطة Simplicity

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

6- التغذية الراجعة Feedback

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

ختامًا..

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