تويت
واجهة المستخدم هي نقطة التفاعل بين البشر وأجهزة الكمبيوتر. تصميم واجهة المستخدم هو عملية تصميم كيف تبدو هذه الواجهات وكيف تتصرف. تخيل أنك تستخدم تطبيقًا على هاتفك الذكي لحجز الرحلات الجوية. تعد الشاشات التي تتصفحها والأزرار التي تنقر عليها والنماذج التي تملأها كلها جزءًا من تصميم واجهة تطبيقات الهاتف المحمول.
\
عناصر واجهة المستخدم
تتكون تصميم واجهة تطبيقات الهاتف المحمول من العناصر التالية:
- عناصر التحكم في الإدخال: هي عناصر تفاعلية تمكن المستخدم من إدخال المعلومات. تتضمن عناصر التحكم في الإدخال أشياء مثل مربعات الاختيار والأزرار والحقول النصية والقوائم المنسدلة.
- عناصر التنقل: تساعد هذه العناصر المستخدم على التنقل في واجهة لإكمال المهمة المطلوبة. تتضمن مكونات التنقل أشياء مثل حقول البحث وشرائح التمرير وقوائم الهامبرغر.
- المكونات المعلوماتية: تنقل المعلومات المفيدة إلى المستخدم، على سبيل المثال من خلال مربعات الرسائل والإشعارات وأشرطة التقدم.
- الحاويات: تستخدم الحاويات لتجميع المحتوى في أقسام ذات معنى. تحتوي الحاوية على عناصر مختلفة، مما يجعلها في أقصى عرض معقول بناءً على حجم شاشة المستخدم. مثال على حاوية في تصميم واجهة المستخدم هي قائمة الأكورديون — قائمة مكدسة رأسياً من الرؤوس التي يمكن النقر عليها لإخفاء المحتوى أو إظهاره.
يأخذ تصميم واجهة المستخدم في الاعتبار كل هذه العناصر وكيفية عملها معًا لإنشاء واجهات سهلة التنقل وممتعة بصريًا. على هذا النحو، يغطي تصميم واجهة المستخدم:
- التفاعل – كيفية تصرف ووظيفة واجهة المستخدم وعناصرها المختلفة. على سبيل المثال، ماذا يحدث عندما ينقر المستخدم على زر معين.
- التصميم المرئي – كيف تبدو الواجهة، مع مراعاة أشياء مثل اللون والطباعة والصور والرسومات والشعارات وتصميم الرموز والتباعد. توجد مجموعة متنوعة من الموارد للمساعدة في هذه العملية. على سبيل المثال، يقدم موقع Flaticon الإلكتروني مكتبة واسعة من الرموز المجانية الاستخدام والرسومات الأخرى التي يمكن تنفيذها في تصميماتك.
- هندسة المعلومات – كيف يتم تنظيم المحتوى داخل واجهة المستخدم وتسميته.
تعد واجهة المستخدم جيدة التصميم ضرورية لضمان تجربة مستخدم جيدة.
الآن لدينا تعريف أساسي لتصميم واجهة المستخدم، في القسم التالي، سنقوم بتصميم واجهة مستخدم لتطبيقات الهاتف المحمول معًا بطريقة عملية حتى تتمكن من التعرف بشكل كامل على عملية عمل مصمم واجهة المستخدم. في هذا الجزء من هذا الدليل التدريبي الشامل لتصميم واجهة المستخدم، سنتعرف على المفاهيم الأساسية لهذا العمل خلال مراحل تصميم واجهة مستخدم ممتازة لتطبيقات الأجهزة المحمولة. بهذه الطريقة، سنتعرف على طريقة فهم متطلبات التصميم ووضعها وطريقة تنفيذ هذه التصاميم. أخيرًا، سيكون لدينا اختبار تصميم مهم جدًا للتأكد من صحة الخطوات.
يميل معظم المصممين المبتدئين إلى بدء التصميم في بداية المشروع. لكن قبل التصميم العملي، يجب أن نأخذ في الاعتبار بعض الاعتبارات النظرية. لأن مفاهيم التصميم مهمة للغاية. تُعرف مبادئ التصميم غالبًا باسم “الاختصارات الذهنية” (الاستدلال، Heuristics)، وهي عبارة عن إرشادات عامة يمكن للمصمم اتباعها لتحسين جودة تصميم واجهة المستخدم وفي النهاية تسريع وقت التسويق.
مبادئ التصميم عند استخدامها معًا تجعل مهمة مصمم واجهة المستخدم أسهل. تزيل هذه المبادئ الكثير من التخمين وتجعل الواجهات قابلة للتنبؤ، مما يجعل استخدام الواجهة أسهل.
يقدم كريس ميرز هذه النصيحة حول التصميم للجوال: “أحد الاستخدامات الرئيسية للهاتف المحمول هو إضاعة الوقت. لكن هذا لا يعني أنه يمكنك إضاعة وقت المستخدمين. تحتاج إلى التأكد من فهمك للمهام الأساسية التي سيتم تنفيذها على التطبيق من خلال البحث وجعلها محور تركيز واجهتك “.
قبل المتابعة، نشرح المبادئ الستة المشتركة لتصميم واجهة المستخدم، والتي تشمل مبدأ الهيكل، ومبدأ البساطة، ومبدأ الظواهر، ومبدأ التغذية الراجعة، ومبدأ التسامح، وأخيراً مبدأ إعادة الاستخدام.
مبدأ الهيكل
يجب أن ينظم تصميمنا واجهة المستخدم بطريقة هادفة ومفيدة بناءً على نماذج واضحة ومتماسكة، ويجب أن تكون هذه الطرق قابلة للتعرف عليها من قبل المستخدم وتجميع العناصر ذات الصلة معًا، وفصل العناصر غير ذات الصلة، والعناصر غير المتشابهة. يرتبط مبدأ الهيكل بالعمارة العامة لواجهة المستخدم.
مبدأ البساطة
يجب أن يكون التصميم بسيطًا، ويجب تنفيذ المهام الشائعة بسهولة، ويجب شرح العناصر المختلفة بوضوح بلغة المستخدم الخاصة. يجب أن يوفر هذا التصميم اختصارات جيدة لها صلة مفيدة بالإجراءات الطويلة.
مبدأ هائل
يجب أن يوفر التصميم جميع الخيارات والعناصر اللازمة لمهمة معينة دون تشتيت انتباه المستخدم بمعلومات غير ضرورية ومتكررة. لا ترهق التصميمات الجيدة المستخدمين بالبدائل أو تخلط بينهم وبين المعلومات غير الضرورية.
مبدأ التغذية الراجعة
يجب أن يعلم التصميم المستخدمين بالإجراءات أو التفسيرات، وتغييرات الحالة أو الشروط، والأخطاء أو الاستثناءات المتعلقة بعمله. يجب أن يتم هذا العمل من خلال لغة واضحة ومتماسكة لا لبس فيها ومألوفة للمستخدمين.
مبدأ التسامح
يجب أن يكون التصميم مرنًا وقويًا، ويقلل من تكلفة الأخطاء وسوء الاستخدام من خلال السماح بالتراجع وإعادة التشغيل، ويمنع الأخطاء قدر الإمكان من خلال التحقق من صحة المدخلات وتفسير جميع الإجراءات المعقولة.
مبدأ إعادة الاستخدام
يجب أن يعيد التصميم استخدام المكونات والسلوكيات داخليًا وخارجيًا والحفاظ على الاتساق حتى لا يضطر المستخدمون إلى التفكير مرة أخرى والتذكر. يقول مثل تركي: “قسوا ألف مرة، قصوا مرة”. نفس الشيء ينطبق على تطوير التطبيق. عندما نصمم تطبيقًا، يمكننا التأكد من أننا نسير في الاتجاه الصحيح باختبار المستخدم والنماذج الأولية. يمكن صقل أشياء مختلفة في مرحلة التصميم وقبل كتابة الكود، وبالتالي توفر وقتك وكذلك وقت وجهد الفريق لتغيير أشياء مختلفة في مرحلة التطوير وقبل دخول هذا التطبيق إلى المتجر. ما يفكر فيه المستخدمون.
الغرض من تصميم واجهة المستخدم
ما هو الغرض من تصميم واجهة المستخدم وما الذي نحاول بناءه؟ لنفترض أننا نريد إنشاء تطبيق لتعلم اللغة. يعرض هذا التطبيق كلمة أو أكثر من كلمات اللغة الهدف للمستخدم كل يوم حتى يتذكرها. نسمي هذا التطبيق “كل يوم، كلمة فرنسية”. تكمن الفكرة في إصدار سلسلة من هذه التطبيقات للغات مختلفة، لكننا سنبدأ بالفرنسية.
قبل البدء، يجب أن نعرف ما نريد تصميمه. بالطبع، لست بحاجة لأخذ القلم والورقة من الآن فصاعدًا. في البداية سيكون لدينا فقط عصف ذهني حول الوظائف العامة للتطبيق. بعد هذا العصف الذهني، يتم تحديد الوظائف الرئيسية على النحو التالي:
- Notifications – يجب إرسال كلمات جديدة إلى المستخدم من خلال الإشعارات كل يوم، لذلك يجب أن يكون لدينا صفحة مقصودة تطلب من المستخدم تمكين دفع الإشعارات.
- الصفحة الرئيسية – يجب على المستخدم شراء عدة دروس مختلفة، لذا في الصفحة الرئيسية، يجب أن تكون قادرًا على عرض هذه الدروس وتنشيط المفضلة.
- تتبع التقدم – يجب أن يكون المستخدم قادرًا على رؤية تقدم كل درس قام بتنشيطه.
- عرض درس – يجب أن يكون المستخدم قادرًا على رؤية قائمة بالكلمات التي تم تعلمها حتى الآن في درس معين.
- عرض كلمة – يجب أن يكون المستخدم قادرًا على رؤية الكلمات التي تعلموها حتى الآن. تتضمن هذه الكلمات تعريفًا وصورة مرجعية وقواعدًا ونطقًا صوتيًا ورابطًا لجزء من الفعل.
بالطبع، يمكن توسيع هذه القائمة كثيرًا، لكن هذا يكفي لغرض هذا الدليل. ينصح كريس ميسينا، مدير تجربة مطوري Uber، بشأن تصميم الهاتف المحمول: “فهم سلوك المستخدم والسياق مهم جدًا هذه الأيام، الناس لديهم الكثير من الصراع، فهم دائمًا في حالة تنقل وعقولهم مشغولة بقضايا مختلفة. جرب وضع نماذج أولية لخدمتك أو منتجك باستخدام المراسلة فقط كقناة توصيل لترى كيف يمكنك مقابلة الأشخاص أينما كانوا، وقسم خدمتك إلى مهام صغيرة يمكن إجراؤها بمرور الوقت بدلاً من الكل مرة واحدة. قف معًا. “
يقول “Jerji Batumelli” أيضًا عن أهمية السياق عند اختبار تطبيقات الهاتف المحمول: “عندما تستهدف الهاتف المحمول، من المهم جدًا أن يكون المستخدم في بيئته الطبيعية. عادة، يتجاهل المصممون هذه المشكلة ويختبرون المستخدمين في المواقف التي يكونون فيها خلف مكتب أو في بيئتهم غير الطبيعية. فكر في الأماكن التي يتواجد فيها الأشخاص عادةً عند استخدام تطبيقك، مثل مقعد الحافلة أو الأريكة أثناء مشاهدة التلفزيون، أو التجول في المنزل، وما إلى ذلك. ستساعدك هذه الأشياء في الحصول على تعليقات أفضل مما تحاول إنشاءه “.
كلمة أخيرة
باتباع بعض المبادئ الأساسية لتصميم واجهة المستخدم بالإضافة إلى عملية التصميم الأساسية، يمكننا تحويل أفكارنا بسرعة إلى تصميمات واجهة مستخدم مناسبة وقابلة للاستخدام. في هذه المقالة، جمعنا كل ما تحتاج لمعرفته حول تصميم واجهة تطبيقات الهاتف المحمول. يمكن أن يكون وجود واجهة مستخدم جيدة التصميم هو العامل الحاسم في اختيار مستخدم على العديد من المنافسين، وبالتالي فإن قيمة قوة واجهة المستخدم المصممة جيدًا لا تقدر بثمن.