كل تطبيق أو موقع نراه أمامنا هو أكثر من مجرد كود يعمل في الخلفية، فهو تجربة متكاملة يعيشها المستخدم. يتكون أي نظام رقمي من واجهتين رئيسيتين هماالواجهة الأمامية Frontend التي يتفاعل المستخدمون مباشرةً، والواجهة الخلفية Backend، التي تدير البيانات وتعالج العمليات في الخلفية.

اقتباس

" إن التصميم ليس مجرد شكل جمالي، بل هو كيف يعمل الشيء." – ستيف جوبز

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

فوائد تعلم أساسيات تصميم واجهات المستخدم للمبرمجين

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

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

كيف يؤثر فهم أساسيات تصميم واجهات الاستخدام على كودك البرمجي؟

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

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

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

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

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

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

كل هذه العوامل تؤدي إلى النتيجة الكبرى المُستهدفة: تجربة سلسلة، وكود متين، ومستخدم أكثر رضا.

متى يحتاج المبرمج إلى الإلمام بأساسيات تصميم واجهات الاستخدام؟

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

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

على سبيل المثال، إذا كنا مبرمجين متخصصين في تطوير الواجهات الأمامية Frontend Development، فإن تعلم أساسيات تصميم واجهات المستخدم يُعَد جزءًا أساسيًا من مهاراتنا اللازمة؛ أما إذا كنا سنعمل كمطوري برمجيات كاملة Full Stack Developer، فإن فهم تصميم واجهات الاستخدام يصبح ذا أهمية مضاعفة. وذلك لأنه يتعامل مع النظام ككل، بما في ذلك الجوانب المتعلقة بتصميم الواجهة، مما يتطلب معرفة كيفية تنسيق واجهات المستخدم مع الكود الخلفي بسلاسة وفاعلية.

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

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

مبادئ تصميم واجهات الاستخدام التي يجب أن يعرفها المبرمج

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

لكن، كيف يمكننا كمبرمجين أن نكتسب فهمًا عميقًا لمبادئ تصميم واجهات الاستخدام دون أن نغرق في التفاصيل الجمالية المعقدة؟ هنا تنبثق المبادئ الأساسية التي ينبغي أن يبني عليها كل مبرمج رؤيته، فهي تمثل البوصلة التي توجهنا في تصميم واجهات تكون سهلة الاستخدام، بدل أن تكون مجرد واجهة مغلقة بعد لحظات من فتحها.

التسلسل الهرمي البصري

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

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

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

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

البساطة والتقليلية

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

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

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

الاتساق

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

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

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

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

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

قابلية التوسع Scalability

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

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

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

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

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

التفاعل والتغذية الراجعة

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

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

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

سرعة التحميل والأداء

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

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

إمكانية الوصول Accessibility

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

يمكن للتعامل مع الأمر إضافة دعم لقارئات الشاشة، واستخدام ألوان ذات تباين عالٍ لمن يعانون من ضعف البصر، وتوفير اختصارات لوحة المفاتيح، كما يمكن الاستعانة ببعض الأدوات لقياس مدى إمكانية الوصول في مواقعنا أو تطبيقاتنا، ومن ضمنهم إضافة Accessibility Insights for Web للمتصفحات، التي تخبرنا بكافة التفاصيل التي تحتاج إلى تطوير.

تجنب التحميل المعرفي Cognitive Load

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

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

يقول البعض:

اقتباس

إذا احتاج المستخدم لقراءة دليل إرشادي لمعرفة كيفية استخدام تطبيقك، فقد أخطأت في التصميم!

منع الأخطاء البشرية والتعامل معها

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

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

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

الاهتمام بالتفاصيل الصغيرة Micro interactions

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

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

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

باهتمامنا بهذه المبادئ، فنحن لا نبني مجرد تطبيقات ومواقع، بل نصنع تجربة حقيقية!

أدوات التصميم المناسبة لاستخدام المبرمجين

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

أداة فيجما Figma

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

يستطيع المبرمجون من خلال فيجما الحصول على:

• تصميم دقيق بلا تخمينات: إمكانية فحص مقاسات العناصر وتباعدها ونوع الخطوط والألوان
• استخراج الأكواد مباشرةً: توليد أكواد CSS وSwift وXML للمطورين
• التعاون الفوري: إمكانية العمل على نفس الملف مع المصمم في نفس الوقت الفعلي، والتفاعل المباشر مع التعديلات
• اختبار التطبيق قبل البرمجة: إنشاء نماذج تفاعلية لفهم تدفق الصفحات قبل البدء في البرمجة
• التناسق البصري: استخدام أنظمة التصميم لضمان تناسق العناصر في التطبيق

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

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

أداة بالساميك Balsamiq

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

تتمتع أداة بالساميك بعدة مزايا، أهمها ما يلي:

• سهولة الاستخدام وبساطة الواجهة: لا تتطلب وقتًا للتعلم كباقي الأدوات المتقدمة مثل Figma وAdobe XD`شستنه، وواجهته تبدو كورقة بيضاء، بحيث يمكن رسم الأفكار عليها دون تعقيد
• تواجد مكتبة مكونات جاهزة: هل نحتاج إلى زر، قائمة، نموذج تسجيل دخول، أو حتى هاتف محمول كإطار لتطبيقنا؟ كل هذه العناصر نجدها داخل مكتبة المكونات، وهذا يجعل بناء المخطط أسرع وأسهل
• عرض الأفكار بطريقة أكثر إبداعًا: بدلًا من شرح فكرتنا بالكلمات، يمكننا رسمها وعرضها في دقائق
• دعم متعدد للمنصات: يعمل على أنظمة تشغيل مختلفة وعلى الويب مباشرةً أيضًا، مما يمنح حرية العمل من أي مكان

الأخطاء الشائعة في التعامل مع تصميم واجهة الاستخدام

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

التركيز على التفاصيل قبل الأساسيات

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

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

التطبيق غير الدقيق للتصميم

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

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

ضعف التباعد والتباين

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

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

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

عدم اختبار الواجهة كفاية

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

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

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

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

خاتمة

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

المصادر

• Visual Hierarchy in Web Design: How to, Examples & Techniques for 2025
• Consistency in UI design
• Feedback UI: How to Humanize the SaaS User Interface? (+Examples)

اقرأ أيضًا

• تطوير الواجهة الأمامية لمواقع الويب Frontend Web Development
• لماذا يجب على المبرمجين أن يتعلموا التصميم
• أنماط التصميم البرمجي Design patterns

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

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

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

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

تُعَد لوحة ألوان واجهة المستخدم ضروريةً للتناغم البصري وتحديد هوية العلامة التجارية والتأثير على سلوك المستخدم، كما أن استخدامها الصحيح يحسّن تجربة المستخدم من خلال توجيه المستخدم بسلاسة ضمن الواجهة.

الفرق بين النظام اللوني ولوحة الألوان

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

للتوضيح أكثر، يمكن تعريف النظام اللوني على أنه مجموعة واسعة من الألوان المنظمة وفق نموذج معين، وهي بمثابة صندوق ألوان كبير يمكن مزج بضعة ألوان منه لإنشاء أسس لونية hues أو تدرجات داكنة؛ وبذلك يمكنك إنشاء نمط لوني اعتمادًا على النظام اللوني المختار لتصميم المواد. من الأمثلة على الأنظمة اللونية نظام RGB ونظام CMYK ونظام Lab، يُستخدَم نظام RGB في تطبيق الألوان على واجهة المستخدم، وهو يتضمن ثلاثة ألوان أساسية هي الأحمر والأخضر والأزرق.

أساسيات نظرية الألوان في تصميم واجهة المستخدم UI

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

وفي عام 1839 ابتكر الكيميائي الفرنسي ميشيل أوجين شيفرول مبادئ تناغم الألوان، التي ساعدت على تطوير فهمنا الحالي للألوان وكيفية استخدامها. ابتكر شيفرول قاعدةً فعالةً رغم بساطتها، لشرح التأثير البصري للتباين المتزامن في جميع الحالات، وهي تنص على أنه: عند رؤية لونين بجانب بعضهما أو واحدًا تلو الآخر، يحدث تباينٌ بصري فيما بينهما، مما يجعل كل لون يبدو وكأنه قد أخذ من مواصفات اللون المعاكس للون الآخر في عجلة الألوان، وبالتالي يؤثر ذلك في درجة الأساس اللوني ودرجة سطوعه المحسوسة. كان لنظرية شيفرول تأثير كبير في الحركة الانطباعية الفرنسية ـوهي تيار فني ظهر في أواخر القرن التاسع عشرـ.

والآن لنحلل العناصر الأساسية للون وهي: الأساس اللوني والتشبُّع والإضاءة، والتي يرمز لها بـ HSL اختصارًا.

الأساس اللوني Hue

الأساس اللوني Hue هو اللون الذي نختاره من عجلة الألوان، ويرمز له بحرف H. على سبيل المثال، الأساس اللوني رقم 0 أو 360 هو اللون الأحمر.

أما الأساس اللوني رقم 120، فهو اللون الأخضر.

بينما الأساس اللوني رقم 240 هو اللون الأزرق.

التشبُّع Saturation

يعبر التشبع Saturation عن مدى قوة اللون، ويرمز له بحرف S؛ فتشبع 100% يعني أن اللون نقي ومشرق

في حين أن تشبع 50% يعني أن اللون ممزوج بالرمادي.

بينما تشبع 0% يعني أن اللون رمادي فقط، ولا أثر للأساس اللوني.

الإضاءة Lightness

تعبر الإضاءة Lightness عن مقدار الضوء في اللون، ويرمز لها بحرف L؛ حيث تعني الإضاءة 0% أن اللون غامق جدًا.

في حين تعني الإضاءة 50% أن اللون معتدل، لا غامق ولا فاتح.

بينما الإضاءة 100% تعني أن اللون مضيء أو ساطع جدًا.

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

كيف تطبق نظرية الألوان عمليا في تصميم واجهات المستخدم؟

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

هناك العديد من المخططات اللونية الأساسية التي يمكن استخدامها:

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

2. متناظر: يتضمن هذا المخطط استخدام ثلاثة ألوان متجاورة على عجلة الألوان، مثل الأخضر المصفر/ الأصفر/ الأصفر البرتقالي

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

4. تكميلي منشطر: في هذا المخطط يُستخدم اللونان الواقعان على جانبي اللون المقابل لتخفيف حدة التباين

5. ثلاثي: في هذا المخطط تُستخدم ثلاثة ألوان متساوية البُعد عن بعضها على عجلة الألوان، مما يحافظ على التناغم ويوفّر تباينًا عاليًا

6. رباعي: ويتضمن استخدام أربعة ألوان تشكّل مجموعتين من الأزواج المتكاملة، مع سيطرة أحد الألوان

7. مربع: وهو أحد أشكال المخطط اللوني الرباعي، ويتضمن استخدام أربعة ألوان متساوية البُعد عن بعضها في عجلة الألوان

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

لماذا تُعَد نظرية الألوان أمرا بالغ الأهمية في تصميم واجهة المستخدم؟

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

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

علم نفس الألوان في تصميم واجهة المستخدم

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

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

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

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

أمثلة على دلالات الألوان

سنعرض فيما يلي أمثلة عن دلالات الألوان.

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

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

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

كيف نختار لوحة ألوان واجهة المستخدم؟

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

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

1. التأكد من الاختيار الجيد للألوان الأساسية والثانوية وألوان التمييز التكميلية

إن اختيار الألوان الأساسية والثانوية وألوان تمييز العناصر بطريقة صحيحة شرطٌ أساسي لفعالية لوحة ألوان واجهة المستخدم.

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

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

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

تقدم إرشادات سهولة وصول محتوى الويب WCAG معاييرًا لضمان أن تكون نسبة التباين بين الخلفية والعناصر الأمامية مرتفعةً بما يكفي لتسهيل القراءة على معظم المستخدمين، وتوصي بأن لا تقل نسبة التباين عن 4.5 إلى 1 للنص العادي و3 إلى 1 للنص كبير الحجم؛ مع العلم أنه لا يُشترَط (حتى الآن) أن يحقق التباين اللوني معايير المستوى AAA (سهولة الوصول الممتازة) من إرشادات سهولة وصول محتوى الويب WCAG.

في ما يلي كيفية استخدام هذه الألوان بطريقة صحيحة:

• الألوان الأساسية: لا بد من اختيار اللون الأساسي أولًا، والذي من المفترَض أن يكون أحد الألوان الرئيسية المرتبطة بالعلامة التجارية. سيكون هذا اللون الأساسي هو اللون الأبرز في الشاشة، مما يوجه المستخدمين نحو العناصر الرئيسية في واجهة المستخدم؛ أما بالنسبة لعدد الألوان الأساسية، فيجب أن يكون 1 إلى 3 على الأكثر للحفاظ على الاتساق وضمان التمييز
• تجنُّب الأبيض المطلق أو الأسود المطلق: عند العمل على الخلفيات أو المساحات الكبيرة، من المهم الابتعاد عن استخدام الأبيض الصافي والأسود الصافي، فهذه الألوان تسبب إجهادًا للعينين بسبب شدة التباين. لذا يُنصح بدلًا من ذلك باختيار ألوان رمادية تتراوح بين درجات الأسود والأبيض المعتدلة، والتي تجعل تجربة الرؤية أكثر راحة
• المحافظة على الاتساق: استخدام نفس الألوان للعناصر التفاعلية المتشابهة في مخطط الألوان. على سبيل المثال، يجب أن تكون جميع الروابط والأزرار بنفس اللون، الأمر الذي يساعد المستخدمين في التعرف على العناصر التفاعلية بكل سهولة
• استخدم الألوان الدلالية: الألوان الدلالية قادرة بذاتها على إيصال المعاني للمستخدمين، لذا يمكن الاستفادة منها في تسليط الضوء على المعلومات المهمة أو التغيرات في حالة الواجهة. على سبيل المثال، يمكن استخدام الأحمر للتنبيه أو الخطر، والأخضر للإشارة إلى الأمور الإيجابية، دون نسيان ضرورة مراعاة السياق الثقافي لدلالات الألوان طبعًا قبل استخدامها. تُعَد هذه الطريقة ممتازةً لجذب الانتباه إلى العناصر المهمة أو إعطاء ملاحظات بصرية سريعة

2. استخدام قاعدة 60-30-10

قاعدة 60-30-10 هي إرشادات مجرَّبة لضمان التوازن والراحة البصرية في التصميم. وفقًا لهذه القاعدة:

• يجب تعبئة 60% من المساحة باللون الأساسي
• و30% باللون الثانوي أو الداعم
• و10% بلون من ألوان التمييز

هذه هي المساحات البصرية التي يجب أن يشغلها كل من الألوان؛ فإذا فرضنا أن مساحة التصميم الكاملة تمثل 100%، سواءً كانت صفحة ويب أو غرفةً أو ملصقًا، فإن قاعدة 60-30-10 تعطي نسبةً لكل من الألوان في هذه المساحة.

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

تساعد هذه النسبة على توجيه نظر المستخدم بسلاسة ضمن الواجهة، وتمنع من ظهور التصميم بمظهر عشوائي أو مربك.

في ما يلي خطوات تطبيق قاعدة 60-30-10:

• تحديد المساحة: عيِّن المساحة الكلية التي ستعمل عليها
• اختيار الألوان: اختر الألوان الأساسية والثانوية وألوان التمييز
• التخطيط: حدّد مكان كل لون
• التطبيق: ابدأ بتعبئة التصميم بالألوان وفق المخطط
• المراجعة: انظر نظرة شاملة وتأكد من تحقيق التوازن في قاعدة 60-30-10

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

3. فهم الجمهور

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

4. استلهام الألوان من المناظر والصور

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

5. الاستفادة من التباين

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

6. استخدام مسميات واضحة للألوان

رغم إهمال ذلك في كثيرٍ من الأحيان إلا أنّ تسمية الألوان بدقة في نظام التصميم خطوةٌ أساسية، لذا يُنصح بالابتعاد عن الأسماء غير الدقيقة واختيار أوصاف موحدة وواضحة للألوان. يمكن الاستعانة بأنظمة الألوان المعيارية مثل الألوان المعيارية للويب W3C أو أنظمة لونية مثل نظام بانتون من أجل تسمية الألوان.

يُعَد اختيار لوحة ألوان لواجهة تطبيقات الويب أو الهاتف المحمول عمليةً فنيةً تتطلب فهمًا كافيًا لنظرية الألوان واتجاهات التصميم الحالية وعلم نفس المستخدمين. ومن خلال اتباع الخطوات المذكورة يمكن اختيار ألوان تتناغم مع الجمهور وتحسين تجربتهم في استخدام المنتج.

الممارسات المثلى لسهولة الوصول في اختيار لوحة ألوان واجهة المستخدم

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

لكن ما أهمية ذلك؟

حوالي 16% من سكان العالم مصابون بنوع من أنواع الإعاقة، والإعاقات البصرية هي الأكثر شيوعًا؛ لذلك فلن يحظى التصميم بالنجاح ما لم يستوعب هذه الشريحة الواسعة من المستخدمين.

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

كيفية اختيار لوحة ألوان سهلة الوصول

سنذكر في الآتي بعض الممارسات المثلى المساعِدة على اختيار لوحة ألوان سهلة الوصول.

• المحافظة على تباين لوني كافٍ: يجب أن تكون نسبة التباين بين لون النص والخلفية مرتفعة بما يكفي لتمكين الجميع من القراءة؛ مع العلم أن هناك أدوات تساعد على التحقق من التباين بين الألوان مثل منصة WebAIM.
• تجنب الاعتماد على الألوان لوحدها لإعطاء المعلومات: إذا كنا نستخدم الألوان لإعطاء المعلومات ضمن التصميم فلا بد من الحرص على إضافة وسيلة تمييز أخرى من أجل الأشخاص الذين لا يميّزون الألوان. يمكن مثلًا استخدام الأنماط أو الزخارف أو وضع أيقونات بجانب الألوان
• الاختبار على مقياس التدرج الرمادي: من المهم فحص تصميمنا في وضع التدرج الرمادي. وفي حال كان لا يزال مفهومًا وجيد المظهر، فمن المرجح أن يصل لذوي العيوب البصرية اللونية
• استخدام العلامات والمؤشرات: من المهم تقليل الاعتماد على اللون لوحده للإشارة إلى التفاعل أو تغير الحالة في عناصر واجهة المستخدم، إذ من المهم أيضًا استخدام التوضيحات النصية أو الأحجام المتباينة أو غيرها من المؤشرات البصرية المساعِدة.
• استخدام أدوات فحص سهولة الوصول: هناك العديد من الأدوات التي تساعد على اختيار لوحة ألوان موافقة لمعايير سهولة الوصول لواجهة المستخدم، مثل Color Safe وContrast Grid.
• الابتعاد عن استخدام ألوان قد تسبب نوبات: من المهم تجنب استخدام الألوان التي قد تثير تفاعلات حساسية ضوئية لدى بعض الأشخاص، مثل بعض تدرجات الأحمر أو الوميض السريع للأضواء

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

أمثلة على واجهات مستخدم بلوحات ألوان مناسبة

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

1. سبوتيفاي Spotify للبث الموسيقي

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

الدرس المستفاد: الألوان المتباينة تحسّن الرؤية وتجذب انتباه المستخدم.

2. إير بي إن بي Airbnb للسفر والضيافة

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

الدرس المستفاد: الألوان التي تتماشى مع قيم العلامة التجارية تعزز هوية العلامة التجارية وتؤثر عاطفيًا على المستخدمين.

3. إنستاجرام Instagram للتواصل الاجتماعي

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

الدرس المستفاد: يساعد تبسيط ألوان الواجهة على تركيز انتباه المستخدم نحو المحتوى الرئيسي.

4. سلاك Slack للعمل الجماعي

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

الدرس المستفاد: يساعد اختيار لون فريد على تمييز منتجك في السوق التنافسي.

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

أدوات إنشاء لوحة ألوان واجهة المستخدم

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

1. برنامج Adobe Color

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

2. برنامج Coolors

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

3. برنامج Color Hunt

برنامج Color Hunt هو منصة مجانية تقدّم لوحات ألوان أنشأها مصممون حول العالم، وهو مكان رائع لاستلهام الأفكار والعثور على مشاركات لونية تم استخدامُها بنجاح من قِبل مصممين آخرين.

4. برنامج Paletton

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

5. برنامج Colormind

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

6. برنامج Contrast Checker

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

خاتمة

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

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

ترجمة -وبتصرّف- للمقال UI Color Palette 2024: Best Practices, Tips, and Tricks for Designers لصاحبه Mads Soegaard.

اقرأ أيضًا

• قواعد تصميم الهوية البصرية
• علم نفس الألوان في تصميم العلامات التجارية
• اختيار الألوان المناسبة لواجهة المستخدم
• النسخة العربية الكاملة لكتاب: مدخل إلى تصميم واجهات المستخدم UI

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

أنواع واجهات المستخدم

واجهات المستخدم هي نقاط الوصول التي يتفاعل المستخدمون من خلالها مع التصميم، ولها 3 أنواع:

1. واجهات المستخدم الرسومية GUIs: يتفاعل المستخدمون فيها مع تمثيلات بصرية على لوحات التحكم الرقمية، ويُعَد سطح المكتب على الحاسوب مثالًا عن واجهات المستخدم الرسومية.
2. واجهات التحكم بالصوت VUIs: يتفاعل المستخدمون مع هذه الواجهات عبر أصواتهم، ومعظم برامج المساعد الذكي مثل سيري Siri وأليكسا Alexa وهي عبارة عن واجهات تحكم بالصوت.
3. الواجهات القائمة على الإيماءات: يتفاعل المستخدمون مع مساحات تصميم ثلاثية الأبعاد عبر حركات جسدية، كما هو الحال في ألعاب الواقع الافتراضي VR.

لتصميم أفضل واجهات المستخدم، يجب الانتباه إلى الأمور التالية:

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

مخطط الواجهة الترحيبية البسيط لموقع Airbnb يلبي مباشرةً حاجة المستخدمين للسفر بسهولة وبطريقة ممتعة.

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

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

اقتباس

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

كيف تنشئ واجهات مستخدم رائعة

لنتعرف على المبادئ الأساسية لتصميم واجهة المستخدم:

لتصميم واجهات مستخدم رسومية رائعة، تذكر أن المستخدمين بشر لديهم احتياجات مثل الراحة، وأنَّ مداركهم لها حدود، لذا يُنصح باتباع الإرشادات التالية:

1. اجعل الأزرار والعناصر الشائعة الأخرى تعمل بالطريقة المتوقَّعة (بما في ذلك الاستجابات مثل تقريب الإصبعين للتصغير) لكي يتمكن المستخدمون من استخدامها دون الحاجة للتركيز: يجب أن يكون الشكل متوافقًا مع الوظيفة.
2. عزز قابلية الاكتشاف: ضع مسميات واضحة للأيقونات مع مؤشرات وظيفية واضحة، مثل إضافة ظلال للأزرار.
3. حافظ على بساطة الواجهات (بإدراج العناصر التي تخدم أهداف المستخدم فقط) مع انطباع غير مُلاحَظ.
4. أنشئ مخططًا layout يراعي مرأى المستخدم وانتباهه: ركز على التسلسل الهرمي وقابلية القراءة من خلال:
   • استخدام محاذاة صحيحة: اختر محاذاة الحافة بدلًا من محاذاة المركز.
   • تسليط الضوء على الميزات الأساسية باستخدام ما يلي:
     • الألوان والسطوع والتباين، لكن تجنب الإفراط في استخدام الألوان والأزرار.
     • بالنسبة للنص: عبر حجم الخط وسماكته وميلانه والتباعد بين الحروف وحالة الحروف الكبيرة إن وجدت كما في اللغة الإنجليزية. يجب أن يكون المستخدم قادرًا على التقاط المعاني بمجرد المسح السريع للصفحة.
5. اختصر عدد الإجراءات اللازمة لإنجاز المهمات، لكن أفرِد صفحةً خاصةً لكل وظيفة رئيسية من هذه الإجراءات، وأرشد المستخدمين من خلال إضافة تلميحات للإجراءات المطلوبة، واستخدِم تقنية الإفصاح التدريجي لتبسيط المهام المعقدة.
6. ضع خيارات تحكم بالقرب من العناصر التي يحتاج المستخدمون إلى التحكم بها: على سبيل المثال، يجب أن يوضَع زر إرسال النموذج قريبًا من النموذج.
7. أبقِ المستخدمين على اطلاع باستجابات النظام وإجراءاته من خلال إرسال ملاحظات.
8. استخدم أنماط تصميم واجهة مستخدم مناسِبةً للمساعدة على توجيه المستخدمين وتقليل الأعباء (مثل الملء المسبق للنماذج)، لكن احذر من استخدام الأنماط المظلمة، مثل مربعات الاختيار المحدَّدة مسبقًا التي تصعب رؤيتُها، أو العناصر المتسللة إلى سلة شراء المستخدم.
9. حافظ على اتساق العلامة التجارية.
10. وضِّح دائمًا الخطوة التالية ليتمكن للمستخدمون من استنتاجها تلقائيًا مهما كانت الحالة.

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

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

ترجمة -وبتصرّف- للمقال User Interface (UI) Design.

اقرأ أيضًا

• تصميم واجهة المستخدم وتجربة المستخدم UI / UX
• مبادئ تصميم واجهة المستخدم UI الجيدة
• أفضل النصائح لتصميم واجهة المستخدم
• مستقبل تصميم واجهة المستخدم UI: الجيل القادم من أدوات تصميم واجهة المستخدم
• النسخة الكاملة لكتاب مدخل إلى تصميم واجهات المستخدم UI

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

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

تصميم المواقع الإلكترونية

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

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

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

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

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

تطوير المواقع الإلكترونية

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

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

يتمثل تطوير المواقع الإلكترونية في معالجة الشيفرات البرمجية، وهو يُقسَم إلى نوعين من الفئات، أما النوع الأول فهو برمجة الواجهة الأمامية front-end، والنوع الآخر هو برمجة الخلفية back-end، إذ تتحكم برمجة الواجهة الأمامية front-end في العرض الفعلي لتصميم الموقع الإلكتروني، بينما تشمل برمجة الخلفية back-end معالجة بيانات المستخدم على خادم الويب web server وعرضها مرةً أخرى على المستخدم.

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

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

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

1. التصميم الجرافيكي معروف للجميع في الغالب، فهو عملية التصميم المرئي لمنتج رقمي.
2. يتضمن تصميم التفاعل كل ما يتعلق بتصميم تدفق المعلومات، ويُنفّذ غالبًا بواسطة مصممو التفاعل.
3. يُجرى اختبار المستخدم للتحقق من التطبيق العملي لتصميم التفاعل وجماليات الرسومات.

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

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

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

يرتبط تصميم واجهة المستخدم UI بتصميم تجربة المستخدم UX ارتباطًا وثيقًا، وبالتالي، يختلط الأمر على العديد من الأشخاص بين أدوار ومهام كل من مصممي واجهة المستخدم UI ومصممي تجربة المستخدم UX.

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

الخلاصة

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

تصميم المواقع الإلكترونية:

• استجابة الموقع الإلكتروني.
• تحديث شكل وأسلوب عمل الموقع الإلكتروني.
• تحسين جودة الرسومات.
• توجيه حركة الزوار على صفحات الموقع.
• معالجة مشكلات وقت تحميل الصفحة.

تطوير المواقع الإلكترونية:

• وظائف الموقع.
• أمان الموقع.
• الصفحة غير موجودة (خطأ 404).
• فشل عمليات بحث DNS.
• تعطل الموقع.
• فشل تحميل المحتوى.

تصميم واجهة المستخدم UI:

• تحسين التنقل عبر الموقع.
• تخصيصات الموقع.
• المشاركة الاجتماعية على الموقع.
• الشكاوى والمشكلات المحتملة وكيفية التعامل معها.

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

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

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

ترجمة -وبتصرّف- للمقال ?What’s the Difference Between Web Design & Web Development.

اقرأ أيضًا

• دليلك لتصميم مواقع الإنترنت المتجاوبة
• المدخل الشامل لتعلم تطوير الويب وبرمجة المواقع
• برمجة مواقع الويب: دليلك المختصر

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

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

سنقدم فيما يلي عشر نصائح مهمة ومفيدة جدًا في تصميم واجهة المستخدم:

1- اترك مساحة بيضاء

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

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

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

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

2- لا تحشد واجهة المستخدم بعناصر التصميم

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

التصميم الواضح

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

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

فيما يلي بعض الأفكار للتخلص من "المهملات":

1. ركز على المحتوى: القاعدة الأولى في تصميم واجهة مستخدم جيدة هي الحرص على توضيح ما يقدمه الموقع أو التطبيق فعليًا، وليس الناحية الشكلية؛ إذ يجب أن يكون المستخدمون قادرين على رؤية كيفية تنفيذ المهمة، أي لا بد من أن يظهر لهم ما يتعلق بالإجراء الذي يريدون اتخاذه فقط دون تشتيتهم بالصور البراقة أو ضوضاء الخلفية.
2. تذكر أيضًا أن البشر يتعملون بصريًا: إذا كانت المعلومات المطلوبة موجودةً ضمن نص، فأشر إلى ذلك؛ وإذا كان بالإمكان استعراض المعلومات بالصور، فاستخدم الصور المعبرة، فهي تساعد على تثبيت المعلومات وتسهيل فهمها؛ أما إذا كان عليك إظهار العديد من المعلومات في آن واحد، فاستخدم الأيقونات أو الأشكال لتجميعها.
3. اجعل الأزرار كبيرة: يساعد هذا على تسهيل قراءة المعلومات على الشاشة ويقلل من احتمال عدم ملاحظتها. إذا اضطررت لجعل الأزرار أصغر، فاحرص على إبرازها جيدًا وتمييزها عن الخلفية وإضفاء بعض المؤثرات البصرية التي تجعلها تشير إلى المهمة المرتبطة بها.
4. وضح للمستخدم موقعه من سير العمل: إذا كان الإجراء يتطلب سلسلةً من الخطوات، فأرفق الزر بإرشاد توضيحي، واستغل اللون والحجم والمكان في توضيح الصفحة للمستخدم، مع تجنب المبالغة في المساحات البيضاء؛ وهنا من الجيد تأطير الصفحة بإطار مناسب لجعلها أسهل تمييزًا. وبالإضافة لذلك، احرص على توفير مساحة كافية في الصفحة ليتمكن المستخدم من قراءة التعليمات وفهمها.

التصميم الفعال

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

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

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

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

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

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

3. احرص على سهولة الاستخدام

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

فيما يلي خمس خطوات يمكنك اتباعها لتحقيق تصميم سهل الاستخدام لموقعك:

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

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

2. استخدم دعوة واضحة لاتخاذ إجراء: الدعوة لاتخاذ إجراء هي الكلمات أو الصور التي تحدّد للمستخدم الإجراء الذي تريد منه أن يفعله، مثل "انقر هنا" أو "اضغط على الزر". تساعد الدعوة الواضحة لاتخاذ إجراء على تنقل المستخدمين في موقعك بسرعة، لذا عليك أن تطلب من المصمم إضافة هذا الخيار في حال لم يكن موجودًا في موقعك.
3. حافظ على نمط متناسق: إذا كان لديك موقع جديد، فإن أسهل طريقة لتحسين تجربة المستخدم هي الحرص على استخدام نمط موحد في التصميم وتوحيد المظهر والانطباع العام؛ إذ يساعد التناسق على تآلف المستخدمين مع موقعك ويزيد من فرصة بقائهم عليه.
4. أرسل الملاحظات: تصنع التعليقات والملاحظات فرقًا كبيرًا في تجربة المستخدم لموقعك. على سبيل المثال، عندما يخطئ المستخدم في أمرٍ ما، يمكن إرسال رسالة له تخبره بحدوث خطأ، أو مثلًا إذا كان على المستخدم إدخال عنوانه في الحقل، عندها يمكن إرسال رسالة تفيد بأنه أدخل العنوان بصورة صحيحة، مما يدفعه لإتمام النموذج بنجاح.
5. اختبر التصميم: اختبار المستخدم للتصميم طريقة ممتازة للتحقق من سهولة التنقل في الموقع وبديهيته ووجود دعوة صحيحة لاتخاذ إجراء. يساعدك اختبار الموقع على معرفة ما إذا كان المستخدم يضيع أو يتشتت عند تصفحه، لتتمكن من إجراء التغييرات اللازمة.

4- التزم بتنسيق موحد بين المنصات المختلفة

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

• المشكلة: يملك المطورون غالبًا فكرةً واضحةً حول الهدف النهائي والطريقة المطلوبة لتفاعل المستخدمين مع التطبيق، لكنهم قد لا يدركون الأدوات الأنسب لتحقيق ذلك.
• الحل: من الأفضل غالبًا اختيار أداة يستخدمها الكثير من الناس، ومن ثمة محاولة تكييفها مع تطبيقك، ذلك أن الأدوات التي يستخدمها عدد كبير من الناس تكون عادةً مجرَّبة وخاضعة للاختبار.

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

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

5- حافظ على البساطة

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

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

6- لا تكلف المستخدم عناء التفكير

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

إذًا كيف نحقق واجهة مستخدم بديهية؟ يكمُن الجواب في فهم نفسية المستخدم والحرص على أن يعكس التصميم النموذج الذهني للمستخدم.

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

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

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

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

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

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

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

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

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

7- قلل عدد النقرات اللازمة

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

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

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

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

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

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

8- رتب المعلومات بتسلسل هرمي واضح

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

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

يجب أن يعتمد التسلسل الهرمي الملائم على أساس متين، وتتضمن العناصر الأساسية للتسلسل الهرمي الملائم:

• تعريف واضح للغرض من كل عنصر.
• علاقة العناصر بالتسلسل الهرمي.
• ترتيب ظهور العناصر.
• وضوح النص الذي يصف كل عنصر.

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

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

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

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

9- صمم الموقع ليكون سهل التنقل

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

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

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

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

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

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

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

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

10- احرص على الاستخدام الهادف للون والبنية

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

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

• كيف يؤثر اللون والبنية على تجربة المستخدم؟ اعتدنا على رؤية ألوان قوس المطر، لكن هل ندرك تأثير الألوان علينا؟ للألوان دور مهم في إدراكنا وشعورنا تجاه المؤثرات البصرية؛ فتمامًا مثلما يمكن لآذاننا أن تسمع ترددات مختلفة من الصوت، ترى عيوننا الألوان المختلفة ويستجيب الدماغ وفقًا لها. ورغم اعتيادنا على بعض الألوان لدرجة أننا لم نَعٌد نلاحظها في كثير من الأحيان، إلا أنها مع ذلك تؤثر بنا.

تؤثر الألوان على المشاعر وطول مدة الانتباه، كما تؤثر على الرأي والذاكرة، وقد بيّن الباحثون أن الألوان يمكنها التأثير على ما يلي:

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

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

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

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

الخلاصة

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

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

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

ترجمة -وبتصرّف- للمقال Top 10 Tips for User Interface Design.

اقرأ أيضًا

• قواعد تصميم واجهة المستخدم
• مجموعة نصائح لتصميم أفضل النماذج المحاكية لمواقع الويب
• الوصايا العشر لتصميم واجهات مستخدم احترافية
• مقارنة بين أدوات تصميم واجهة المستخدم UI

تُعَد أنظمة التصميم مساعدًا جيدًا على تحقيق التعاون وضمان الاتساق، إذ تساهم في تسريع دورة التصميم والتطوير، والتي تمكن بالنهاية من الحصول على منتجات أفضل تصميميًا. تعتمد الكثير من عمالقة التكنولوجيا مثل جوجل Google وآي بي إم IBM وسيلز فورس Salesforce على أنظمة التصميم في جمع وتدوين جهود التصميم وتعميمها على نطاق المؤسسة، لكن استخدام هذه الأنظمة ليس حكرًا على الشركات الكبيرة، فقد صرحت 65% من الشركات التي شملها استطلاع أجرته منصة فوريستر Forrester عام 2020 أنها تستخدم نظامًا للتصميم.

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

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

أما عن فوائد أنظمة التصميم، فهي ذات شقّين:

• القسم الأول: أنها تسرّع كل مرحلة من مراحل تطوير المنتج، من المفهوم الأولي والتصميم إلى الإنتاج والاختبار، وقد توصلت تجربة أجرتها منصة فيغما Figma عام 2019 إلى أن المصممين الذين يعملون بوجود نظام تصميم قد أتمّوا مهامهم بسرعة أكبر بنسبة 34% قياسًا بأولئك الذين لا يعتمدون النظام.
• القسم الثاني: هو أن أنظمة التصميم تحسّن تجربة العميل من خلال ضمان الاتساق والألفة وإمكانية الوصول في كل نقطة اتصال.

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

أنظمة التصميم تسرع دورة التصميم والتطوير

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

تسلسل مبسط لسير العمل من التصميم إلى الإنتاج

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

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

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

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

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

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

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

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

تكرار أقل

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

تقول (آلّا خولماتوفا) مؤلفة كتاب أنظمة التصميم:

اقتباس

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

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

تصنَّف مكتبة أنماط نظام التصميم حسب الوظائف، ويجب أن ترتبط كل وظيفة بنمط وحيد جاهز للإنتاج، وحيثما تظهر هذه الوظيفة في المنتج، يمكن تطبيق هذا النمط الموحَّد. يساعد توحيد هذه المعايير على تقليل حاجة المصممين والمطورين إلى تكرار إنشاء حلول متشابهة، مما يوفر لهم الوقت للتركيز على المشكلات الجديدة التي لم تعيَّن لها حلول معيارية بعد. على سبيل المثال، أُنشِئت مكتبة أنماط موقع منتجات الأطفال المذكور آنفًا اعتمادًا على طريقة التصميم الذري atomic design، وهي طريقة معروفة لإنشاء أنظمة تصميم.

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

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

لغة ومصطلحات موحدة من الترميز إلى العميل

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

وتُعَد اصطلاحات التسمية الواردة في مكتبة أنماط تطبيق منتجات الأطفال جزءًا من لغة التصميم المشتركة.

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

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

أنظمة التصميم تعزز جودة المنتجات وتحسن تجربة المستخدم

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

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

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

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

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

بطبيعة الحال، يفرِض كل ذلك عبئًا معرفيًا على المستخدمين لتعلم الأنماط الجديدة، مما يؤدي بالنتيجة إلى تجربة مستخدم غير مُرضية.

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

أعاد فريق العمل تصميم مكتبة الأنماط اعتمادًا على معايير واجهة المستخدم الأصلية من جوجل Material Design ومن آي بي إم Carbon Design System؛ وقد اختيرت هاتان المجموعتان من المعايير لأنهما تعكسان هدف الشركة المتمثل بتقديم واجهة بسيطة وسلسة للمستخدمين لإتمام مهامهم.

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

للحصول على واجهة مستخدم بديهية، يجب عدم تقديم تصاميم جديدة لأنماط موجودة سابقًا. ورغم أن وجود معايير وأنماط يجب الالتزام بها قد يبدو مقيِّدًا في البداية، إلا أن توحيد مظهر العناصر يُعَد ميزةً تنافسيةً مهمة.

يتميز الموقع الجديد لمنتجات الأطفال بوجود نمط معياري وحيد لفرز الفئات.

منتجات أفضل جودة

قبل تطوير نظام للتصميم، كان موقع منتجات الأطفال يتضمن 184 لونًا منفصلًا و299 خلفيةً لونيةً مختلفة، وكان ذلك يسبب إرسال رسائل بصرية مشوِّشة، مع ضياع الشعور بالعلامة التجارية، وبالتالي التقليل من تقدير جودة المنتجات. وكما ذكرت مجموعة نيلسن نورمان:

اقتباس

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

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

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

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

المخطط اللوني لموقع منتجات الأطفال قبل (يسارًا) وبعد (يمينًا) إنشاء نظام للتصميم.

تساعد اللغة البصرية محدَّدة المعالم أيضًا على تحسين القيمة الفعلية للمنتجات على مقاييس السرعة والأداء، ويتضح هذا جليًا في تجربة موقع منتجات الأطفال؛ فقد كان على متصفح الإنترنت تحميل مئات الألوان المنفصلة من أجل كل رمز صغير في الموقع القديم، كما أن كلًا من هذه الألوان كان يحمل خطر حدوث خطأ أو ثغرة، وقد أثر زمن التحميل والأخطاء على سرعة الموقع وأدائه؛ أما بعد تطبيق نظام التصميم الجديد فقد تناقص زمن تحميل صفحة الدفع من 4-6 ثوانٍ إلى 2.8 ثانية. وبالنتيجة، عند توحيد التصميم مع الترميز الموافق له، يصبح الموقع أقل حجمًا وأسرع أداءً، فضلًا عن تقليل أخطاء الترميز وثغراتها.

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

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

لمحة عن المتغيرات أو الحالات التفاعلية المختلفة للعنصر نفسه.

إعطاء الأولوية لإمكانية الوصول من البداية

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

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

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

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

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

الفوائد المستدامة لأنظمة التصميم

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

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

مفاهيم أساسية

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

ترجمة -وبتصرّف- للمقال The Benefits of a Design System: Making Better Products, Faster لصاحبه Molham Bakir.

اقرأ أيضًا

• لماذا يجب أن تهتم بتصميم المنتج
• أساسيات التصميم المرئي
• ما هو النّظام اللوني Color model
• مقدمة عن أنماط تصميم واجهة المستخدم وقوالب تصميمها مع أمثلة عملية
• مقدمة إلى العناصر الستَّة للتصميم

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

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

ما هي المبادئ الاثنا عشر الأشهر لتحريك الرسوم؟

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

"الإيحاء بالحياة: رسوم ديزني المتحركة" هو كتاب من تأليف أولي جونستون وفرانك توماس.

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

لنتعرف على هذه المبادئ بشيء من التفصيل للارتقاء بسويّة مهارات التصميم الحركي:

1. التقلص والتمدد

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

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

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

2. التوقع

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

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

3. التقديم

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

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

4. الحركة المتواصلة المباشرة أو من وضعية إلى أخرى

يشير هذا المبدأ إلى طريقتين مختلفتين لإنشاء رسوم متحركة:

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

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

5. المتابعة والحركة المتراكبة

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

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

6. الإبطاء للدخول والإبطاء للخروج

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

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

7. القوس

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

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

8. الحركة الثانوية

تستخدَم الحركات الثانوية لدعم الحركة الرئيسية التي تجري في المشهد وتأكيدها، وهي تضفي بُعدًا آخر للرسوم المتحركة.

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

9. التوقيت

يعكس مدى سرعة أو بطء تحرك الجسم الكثير من المعلومات، فمثلًا إذا رأينا حلزونًا يتحرك بسرعة، فسنشعر بالغرابة وقد نعتقد أننا اكتشفنا كائنًا جديدًا!

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

10. المبالغة

يضفي هذا المبدأ طابعًا مسليًا على الرسوم المتحركة، ويساعد المشاهد على التركيز في المكان المهم.

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

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

11. الرسم المحكم

يساعد فهم أساسيات الرسم (وفي حالة واجهة المستخدم، فهم أساسيات التصميم المرئي) على تصميم رسوم متحركة أكثر نجاحًا.

تخيل أنك تصمم زرًا له ظل، لكن الظل لا يتّبع منظورًا مناسبًا، سيعتقد المستخدم مباشرةً أن هناك خطأ في التطبيق.

تتجلى هذه الظاهرة بوضوح في تصاميم محاكاة العالم الحقيقي Skeuomorphism حيث تقلد العناصر نظيراتها على أرض الواقع.

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

12. الجاذبية

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

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

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

الخلاصة

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

على النقيض من ذلك، يؤدي إنشاء رسوم متحركة رديئة والتعامل معها على أنها غاية وليست وسيلة إلى الحصول على واجهة مستخدم سيئة.

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

ترجمة -وبتصرّف- للمقال UI Animation—How to Apply Disney’s 12 Principles of Animation to UI Design لصاحبته Laia Tremosa.

اقرأ أيضًا

• مقدمة إلى العناصر الستَّة للتصميم
• مبادئ التصميم المرئي في تصميم واجهة المستخدم
• إنشاء رسوم متحركة باستخدام CSS
• نصائح لإنشاء صور GIF دائمة الحركة

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

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

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

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

حدد جمهورك المستهدف

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

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

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

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

اعرف أهدافك

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

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

التأكد من جودة المنتج

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

إنشاء منتج يسهل فهمه

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

ابتكار منتج يتمتع بالسرعة والسلاسة

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

الاهتمام بالتسلسل المرئي Visual Hierarchy

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

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

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

وإليك فيما يلي بعض الخطوات التي تساعد على توضيح وتأكيد التسلسل المرئي.

استخدم التباين

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

موازنة التسلسل المرئي

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

لا تكرر نفس اللون

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

حافظ على بساطة الأشياء

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

إنشاء رسالة مقنعة

يمكن تعريف الرسائل المقنعة على أنها رسائل تقنع المستخدمين بالتفاعل مع منتج ما أو موقع إلكتروني، فهي تحث المستخدمين على استخدام المنتجات ومشاركة المعلومات المختلفة حولها، ويجب أن تستوفي الرسائل المقنعة المعايير التالية:

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

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

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

وإليك بعض الأفكار لتصميم رسالة مقنعة:

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

الرسائل المقنعة هي أداة ممتازة للمصممين، لأنه من المهم إنشاء رسائل جذابة وسهلة الفهم، فالرسائل المقنعة جزء لا يتجزأ من عملية التصميم.

استخدام أسلوب طباعة مناسب

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

استخدام خط أساسي موحد

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

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

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

استخدام أشكال مختلفة

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

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

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

تضمين علامات توضيحية

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

استخدم أحجام الخطوط المناسبة

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

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

استخدام التباين

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

نسبة التباين

نسبة التباين هي الفرق بين الألوان الفاتحة والألوان الغامقة لنفس عائلة الألوان، وتُعَد نسبة التباين 1:1 النسبة المثالية لأنها لا تُظهر أي فرق مرئي بين الألوان، وفي معظم الحالات، يوصى بالحفاظ على النسبة 2:1 على الأقل.

تقدم العديد من المواقع الإلكترونية حاسبات نسبة التباين، إذ يحسبون نسبة التباين بناءً على لوحة ألوان موقعك الإلكتروني.

لماذا التباين مهم؟

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

اختيار اللون

فيما يلي بعض النصائح التي يجب مراعاتها عند اختيار الألوان في تصميم واجهة المستخدم:

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

نوع الخط وحجمه

فيما يلي بعض النصائح التي يجب مراعاتها عند اختيار الخط في تصميم واجهة المستخدم:

• استخدام خطوط يسهل قراءتها: يستحسن استخدام خطوط كبيرة للنصوص الصغيرة، مثل الروابط وعناصر قائمة التنقل، كما يمكن استخدام خطوط أصغر للنصوص الكبيرة، مثل الفقرات.
• استخدام خطوط متباينة: يمكنك استخدام خط داكن للعناوين وخط فاتح للنصوص الكبيرة.
• استخدام خطوط مختلفة للمحتوى المهم: يمكنك استخدام خط مختلف للنصوص التي قد يتخطاها المستخدمون عن طريق الخطأ.
• تأكد من استخدام خط سيريف serif للنصوص: تُعَد خطوط سيريف Serif أكثر قابليةً للقراءة من خطوط سانس سيريف sans-serif.

لون الخلفية والتعتيم

• استخدم لون خلفية ذو عتامة عالية.
• تأكد من أن لون الخلفية مرئي بسهولة على الخلفية.
• تجنب استخدام الخلفيات الساطعة جدًا أو المظلمة جدًا.

استخدام الحركة

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

استخدام الحركة بطريقة طبيعية

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

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

إنشاء واجهة مستخدم ممتعة

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

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

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

ساعد المستخدمين على الشعور بالراحة

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

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

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

إذا أردت تحسين تجربة المستخدم في موقعك الإلكتروني، فيجب أن تجيب على هذه الأسئلة:

• ماذا يحدث عندما يتفاعل المستخدمون مع موقعي الإلكتروني؟
• هل يمكن للمستخدمين التنقل بسهولة ضمن الموقع؟
• هل يسهل العثور على المحتوى؟
• هل يقدم هذا المحتوى أي قيمة؟

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

في الختام

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

ترجمة -وبتصرّف- للمقال What Makes a Good User Interface? 10 Principles of UI Design.

اقرأ أيضًا

• قواعد تصميم الواجهات
• مبادئ التجانس والمعايير في تصميم واجهة المستخدم
• .مبادئ التصميم المرئي في تصميم واجهة المستخدم
• مبادئ تصميم واجهة المستخدم الداكنة
• مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم

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

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

وُضِع قانون فيتس في الأصل عام 1954 من قِبل عالم النفس بول فيتس Paul Fitts، الذي ابتكر نماذج رياضية للسلوك البشري وعمل على تحديد قدرات الجهاز العصبي البشري.

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

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

صيغة قانون فيتس

المعادلة الرياضية التي كتبها فيتس هي:

t = a + b log2 (2 d/w)

حيث أن:

• t: تشير إلى الوقت.
• الحرفان a وb: يشيران إلى معادلات الانحدار المشتقة من مراقبة الاختبارات.
• d: هي المسافة بين نقطة البداية والهدف.
• w: هو عرض الهدف.
• log2: يشير إلى أن الصيغة لوغاريتمية، وأن (log2 (2 d/w ينتج عنه مؤشر الصعوبة (ID)، وهو قياس يحدد مدى صعوبة الحصول على الهدف.

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

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

قانون فيتس وتصميم واجهة المتجر الإلكتروني: ملاءمة مثالية

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

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

تصميم لاكتشاف المنتجات بسهولة

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

تحسين قوائم التجارة الإلكترونية

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

زيادة المساحة السطحية لأزرار الحث على اتخاذ إجراء CTA

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

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

اجعل بعض الإجراءات أصعب من غيرها

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

قانون فيتس للهواتف المحمولة

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

الأصابع هي المؤشرات

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

في الغالب يعتمد مستخدمو الهواتف المحمولة على يد واحدة

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

في الختام

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

ترجمة -وبتصرّف- للمقال Leveraging Fitts’ Law: User Interface Design Principles for E-commerce لصاحبه Alexandre Brito.

اقرأ أيضًا

• تصميم واجهة المستخدم مبادئ يجب تعلمها من أخطاء مؤلمة
• مقدمة عن أنماط تصميم واجهة المستخدم وقوالب تصميمها مع أمثلة عملية
• قواعد تصميم الواجهات
• دليل المصمم لتصميم واجهات تطبيقات ويب مذهلة

سوف تدمج الموجة القادمة من أدوات تصميم واجهة المستخدم بالكامل بين التصميم والتشفير لتسهل تجربة كل من المصممين والمطورين.

لقد تحسنت أدوات تصميم واجهة المستخدم UI Design منذ الجيل الأول لأدوبي فوتوشوب Adobe Photoshop المتخصص بتحرير الصور دون إنشاء واجهات مستخدم حيوية، فقد أصبح عملنا أسهل وأسرع من السابق بفضل جيل الأدوات الحالي مثل أدوبي XD وفيجما Figma وسكيتش Sketch. في المقابل، تزايدت نقاط الضعف في سير عملنا اليومي أيضًا، فكثيرًا ما نهدر وقتًا وموارد ثمينةً يمكن استثمارها في تصميم منتجات مرغوبة.

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

دمج التصميم مع التشفير

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

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

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

سوف يحل الإنشاء الموازي محل عمليات تسليم المصممين والمطورين

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

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

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

سوف تدمج أدوات تصميم واجهة المستخدم مع برامج المطور

تعتمد الأدوات الحالية على نماذج برمجة مخصصة لتوليد مكونات التصميم. وبطبيعة الحال، لا تصل هذه النماذج إلى قوة CSS عامةً، كما لا تسمح للمصممين برؤية الشيفرة المكتوبة تلقائيًا بناءً على ملفاتهم التصميمية، (الشيفرات التي يجب تصديرها نهاية إلى HTML وCSS وJavaScript). وهنا كان بالإمكان تسهيل المهمة لو استخدمت أدواتنا صيغتي HTML وCSS منذ البداية.

على سبيل المثال، تستخدم لغة CSS النموذج الصندوقي Box Model، الذي يتطلب رسم مستطيلات حول عناصر HTML في كل صفحة، ويصف كيف يحدد الطول والعرض والإطار border والحاشية Padding لرسم هذا المستطيل. تقترب فيجما Figma من توفير الإمكانية السابقة من خلال ميزتها للتنسيق التلقائي Auto-Layout، لذا فإن استخدمت فيجما النموذج الصندوقي المهيمن على معظم واجهات المستخدم على الإنترنت فعليًا، فستقل حاجة المطورين إلى الترجمة والتصدير.

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

نحتاج أدواتنا لإخراج الشكل على الإنترنت لا لإخراج اللوحات الفنية أو النماذج الثابتة، لذا نحتاج إلى غتي البرمجة HTML وCSS لا محاكياتهما Stimulators.

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

سوف تندثر النماذج اﻷولية Mock-ups

بدلًا من استخدام النماذج المؤقتة، دعنا نتخلص من النماذج نهائيًا.

تترك النماذج Mock-Ups أسئلةً كثيرةً دون إجاباتها. لا يُعَد تصميم نموذج لكل بيئة رقمية عمليًا. ينشئ المصممون التنسيق لعرض الشاشة 320 بكسل و834 بكسل و1440 بكسل، لكن ماذا لو فُتح التنسيق في منفذ عرض 1220 بكسل؟ ولماذا لا يؤخذ العرض 375 بكسل بالحسبان وهو حجم شائع في الهواتف المحمولة الكبيرة؟

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

تُعَد النماذج إهدارًا للموارد والوقت وقد قل استخدامها في تصميم المنتجات الرقمية، فقد استغنت منصة Webflow لتصميم مواقع الإنترنت عن النماذج Mock-ups ولجأت إلى النماذج الأولية المُتجاوبة والتفاعلية Interactive Prototypes؛ لكن لسوء الحظ، تقتصر منصة Webflow على الحلول عبر الإنترنت وتلبي احتياجات المواقع البسيطة فقط. ورغم أن وجود المخرجات المؤقتة منطقي في مرحلة التفكير، إلا أنه مستهلك للوقت في مرحلة إيجاد الحلول.

سوف تؤخذ كل أنماط حالة النظام System States بالحسبان

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

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

سوف تحل البيانات الحقيقية مكان المحتوى البديل Placeholder Content

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

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

يدعم Material Design الكتابة بالاتجاهين افتراضيًا.

سوف يسهل التحقق من حالة الحافة Edge-case Testing

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

هل يعمل مكون واجهة المستخدم جيدًا بتغير اللغة؟ يمكنك التأكد باختباره مع بيانات مختلفة.

سوف تطلق الكثير من أدوات المطورين وإضافات المتصفحات المساعدة Third-party Browser Extensinos

بعد أن إنجاز العمل بلغتي HTML وCSS، سوف تتاح إضافات كثيرة Extensions خلال مرحلة التصميم، مثل أداة Lighthouse التي لا يمكن الاستغناء عنها في الأداء وتحسين محركات البحث SEO وتدقيقات إمكانية الوصول Accessibility Audits، أو أدوات المطور العديدة التي تحاكي نقاط توقف الجهاز واتصالات الإنترنت البطيئة. وتفيد مجموعة أدوات المتصفح في إنشاء واختبار واجهات المستخدم الجاهزة للتصدير أكثر من أي إضافة في فيجما Figma أو Sketch أو Adobe XD.

سوف يعمل المصممون والمطورون في آن واحد

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

تطور بعض الشركات مثل Hadron وModulz وRelate أدوات تصميم معتمدة على التشفير Code-based لا تزال في مرحلة تجريبية.

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

ترجمة -وبتصرّف- للمقال The Future of User Interface Design: Next-generation UI Tools لصاحبه Damir Kotorić.

اقرأ أيضًا

• مقدمة في تصميم واجهة المستخدم UI ومتحكماتها
• متحكمات واجهة المستخدم وكيفية عرضها: متحكمات الدخل
• الدليل إلى تهيئة واجهة المستخدم UI
• موازنة بين أفضل أدوات تصميم واجهة المستخدم UI

لقد أُثبتت أهمية المساحة البيضاء علميًا في تسهيل القراءة وتعزيز الفهم. ويقصد بالمساحة البيضاء هنا، الفراغات الموجودة بين محتويات الصفحة.

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

سنتعرف تاليًا على العناصر الأساسية للمساحة البيضاء White Space المعروفة أيضًا باسم المساحة السلبية Negative space، بالإضافة لكيفية استخدامها لإضافة الجمال والكفاءة على التصميمات الإلكترونية.

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

1. اجعل إضافة المساحة البيضاء عادة

لا شك أن الغالبية لا تهتم بتصميم المواقع، أو لا تهتم بتفاصيلها على الأقل. ولا نتحدث هنا عن الذين يتعمّدون إهمال تصميم مواقعهم، بل عن الذين يصممونها بعشوائية دون تدريب، أو بعد تلقيهم تدريبًا غير كافٍ، حيث يمكن أن يؤثر تصميم الموقع على معدل التحويل Conversion rates، وبالتالي على الأرباح الصافية.

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

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

يعتقد البعض أن اختيار لون الخلفية غير مهم، لكنه في الواقع يلعب دورًا أساسيًا في تميز الموقع.

2. انظر إلى الميزات

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

تبدو معظم الصفحات أجمل عند إضافة المساحة البيضاء، لذا من الجيد استخدام المساحة لتعزيز الهدوء والجمالية.

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

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

3. استخدم المساحة البيضاء بأسلوب صحيح

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

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

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

4. لا تبالغ في استخدام المساحة البيضاء

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

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

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

يُعَد العنوان أحد أفضل الأماكن لإدراج المساحة البيضاء، لذا من الضروري التأكد من أن العنوان مميز وسهل التذكر، إذ يحسّن إدراج المساحة البيضاء حول العنوان معدل التحويل (معدل تحويل زوار الموقع إلى عملاء)؛ أما إذا بالغت في إضافة المساحة البيضاء، فقد تخسر بعض القراء غير المهتمين بالعنوان، وبالمقابل قد لا يتمكن القرّاء من قراءة العنوان إذا لم تستخدم مساحةً بيضاء كافية.

5. جرب استخدام المساحة البيضاء

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

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

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

• صورة
• عنوان
• عنوان فرعي
• نص
• مخطط

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

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

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

6. استخدم المساحة البيضاء كعادة تسويقية

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

قد تكون إضافة بضع فقرات إلى مقالات مدونتك فكرةً رائعة. وللفقرات ثلاث أنواع:

• الفقرة القصيرة: تستخدم عند نشر بعض التفاصيل عن موضوع مقالات المدونة.
• الفقرة الطويلة: توسّع معرفة القارئ عن الموضوع وتعزز فهمه.
• الفقرة الموسعة: تكون وسطًا بين الفقرات القصيرة والطويلة، وتُعَد جيدةً عند الكتابة عن موضوع لا يكفيه الوصف المختصر.

7. أبدع في استخدام المساحة البيضاء

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

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

8. استفد من المساحة البيضاء على الإنترنت

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

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

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

9. استخدم المساحة البيضاء ضمن مواقع التواصل الاجتماعي

كثيرًا ما يتجاهل الفنانون ومصممو الجرافيك المساحة البيضاء، وذلك دون إدراك لأهميتها كعنصر أساسي في الفن الحديث. وتُعَد المساحة البيضاء عنصرًا أساسيًا في نجاح بعض المواقع مثل Pinterest وTumblr وInstagram وFacebook.

ركزت التوجهات في العقد الماضي على مبدأ "الأقل هو الأكثر" Less is more ، وأدركت الشبكات الاجتماعية أن المساحة البيضاء تُعَد حلًّا رائعًا لإحياء تصميم رتيب، كما أنها تسهّل تصفح الإنترنت والموجزات الاجتماعية Social Feeds.

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

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

10. طبق المساحة البيضاء

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

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

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

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

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

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

يجب أن يتجنب المصممون والمسوقون العناصر التصميمية التي لا تطابق علاماتهم التجارية في إعلاناتهم، وذلك لأن المستهلكين يتجاهلونها. كذلك، يجب أن يُنشئ المصممون والمسوقون عناصرهم التصميمية مع مراعاة العلامة التجارية، ويجب أن يوظّفوا مصممي رسوميات Graphic Designers لإنجاز هذه المهمة.

11. أطلق العنان لإبداعك

يُعَد التباعد Spacing والهوامش Margins والمحاذاة Alignment وغيرها، أخطاءً شائعةً قد تحمل عواقب كارثية؛ وقد تصادف أن مفهوم قاعدة الأثلاث Rule Of Thirds موجود على مواقع التواصل الاجتماعي مثل انستغرام وفيسبوك. تنطبق هذه القاعدة على موقعك الإلكتروني أيضًا، لذا احذر وتجنب أي أخطاء تصميمية قد تؤذي علامتك التجارية، حيث يمكن أن يسبب أبسط خطأ في المحاذاة ضمن صفحة إلكترونية مشكلة حقيقية.

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

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

خاتمة

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

تُعَد المساحة البيضاء سلاحًا سريًّا لتطوير شركتك أو حياتك المهنية، لذا لا تتجاهلها رجاءً.

ترجمة -وبتصرّف- للمقال White Space: Why It’s Important & How To Use It.

اقرأ أيضًا

• لماذا تعتبر المساحات البيضاء مهمة في عالم التصميم
• كيف تستفيد من المساحات البيضاء في تعزيز نسبة التحول في صفحتك
• أهمية الفراغات البيضاء في تصميم الويب
• أساسيات التصميم المرئي

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

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

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

لنتعرف معًا على أهمية تصميم المساحة البيضاء.

ماذا يقصد بالمساحة البيضاء؟

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

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

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

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

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

المساحة البيضاء الدقيقة والواسعة

تقسم المساحة البيضاء وفقًا لسماكتها إلى مساحة بيضاء دقيقة Micro White Space ومساحة بيضاء واسعة Macro White Space، نتحدث هنا عن النسب والتناسب.

المساحة البيضاء الدقيقة Micro White Space

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

تؤثر المساحة البيضاء الدقيقة Micro White Space مباشرة على وضوح المحتوى. تؤثر المساحة البيضاء المحيطة بالفقرات على سرعة قراءة المستخدم للنص وفهمه. يبطئ الأشخاص أثناء قراءة النص إذا ظهر على الهامش خارج الفقرات المنتظمة ويجدونه أصعب للفهم من النص الذي لا يحوي هوامش مماثلة.

المساحة البيضاء الواسعة Macro White Space

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

تحتوي المساحة البيضاء الواسعة Macro White Space التصميم الكلي عكس المساحة البيضاء الدقيقة Micro White Space وتعد مساحة بيضاء واضحة تسهل ملاحظتها. لعل أفضل مثال على تطبيق المساحة البيضاء الواسعة Macro White بوضوح وكفاءة هو الصفحة الرئيسية لجوجل google.com. يجمع مظهر جوجل المميز بين الجمال والبساطة، كما توحي بساطته بالهدوء. يقل الجهد المطلوب من عينك ودماغك أثناء النظر إلى الصفحة لعدم وجود المشتتات، وبالتالي تركز على السبب الأساسي لدخولك الصفحة وهو البحث عن شيء ما.

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

كيف نحدد نوع المساحة البيضاء الذي يجب أن نستخدمه؟

يعتمد استخدام كل من المساحة البيضاء الدقيقة والواسعة على العوامل التالية:

المحتوى

عند وجود معلومات كثيرة ضمن التنسيق، لا يبقى إلا مجال ضيق لاستخدام المساحة البيضاء الواسعة Macro White Space وبالعكس يزداد مجال استخدام المساحة البيضاء الدقيقة Micro White Space. يعد التوفيق السابق بين النوعين أمرًا حيويًا، وإلا تحولت الصفحات إلى كتل من البيانات الجامدة صعبة القراءة. على سبيل المثال، وصف بولتون Boulton عام 2007 ميل المواقع الإخبارية إلى الاعتماد على المساحة البيضاء الدقيقة Micro White Space لتوفير تجربة مستخدم فعالة وسهلة القراءة لأن راحة المستخدمين أثناء القراءة أمر أساسي.

التصميم

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

المستخدم

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

رسالة العلامة التجارية

قد يشير استخدام المساحة البيضاء إلى ميزانية الشركة وبالتالي لجودة المنتج. تذكر العلامات التجارية لشركات مثل Apple وMercedes Benz وIKEA ولاحظ كيف تدعم علاماتهم هذه الفكرة.

تعرض الصورة التالية المساحة البيضاء الدقيقة والواسعة في صفحة قديمة من موقع BBC الإخباري. تقتصد المواقع الإخبارية في استخدام المساحة البيضاء مثل الصحف الورقية. وتعكس كمية المحتوى الكبيرة على الصفحة مصداقيتهم، حيث إنها تعكس سير عالمنا!

المساحة البيضاء المباشرة والسلبية: أسلوب آخر للاستفادة من المساحة البيضاء

يمكن التمييز بين المساحة البيضاء على أنها دقيقة وواسعة كما يمكن التمييز بينها على أنها مباشرة Active أو سلبية Passive:

• المساحة البيضاء المباشرة Active White Space: تستخدم لتحسين بنية الصفحة وتوجّه المستخدم ضمن المحتوى.
• المساحة البيضاء السلبية Passive White Space: تستخدم لإضافة لمسة جمالية على تنسيق الصفحة دون توجيه المستخدم في قراءة محددة أو تدفق أو ترتيب المحتوى.

تعد المساحة البيضاء بين كلمات وأسطر الفقرة مثالًا آخر عن المسافات السلبية وفق بولتون Boulton عام 2007.

توضح الصورة السابقة الفرق بين النص مع وبدون تطبيق المساحة البيضاء السلبية ومع تطبيق نوعي المساحة البيضاء المباشرة والسلبية معًا.

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

العناصر التي يجب أخذها بالحسبان أثناء تصميم المساحات الفارغة

سنسرد تاليًا جميع العناصر التي يجب أخذها بالحسبان بصورة رئيسية أثناء تصميم المساحات الفارغة:

الوضوح Legibility

تعد المساحة البيضاء الدقيقة Micro White Space أساسية لإيضاح محتوى الواجهة. ويجب عليك كمصمم أن تأخذ بالحسبان المساحة البيضاء أثناء اختيار خصائص الكتابة للتصميم مثل الخط والحجم واللون والأسلوب وانسيابية السطور وتنسيق الحروف Kerning وتناسق طول الأسطر Tracking. يؤثر تغيير تنسيق المساحة البيضاء على أداء القراءة وتجربة المستخدم عامَةً، ويرجّح أن يبقى القراء السعداء ضمن صفحتك.

الهيئة العامة للتصميم والعلامة التجارية

تسهم المساحة البيضاء في بناء هيئة التصميم العامة. حيث يعكس استخدام الموقع للمساحة البيضاء الواسعة Macro White Space بساطة الموقع ورفاهيته. بينما يعكس اختزال المساحة البيضاء الواسعة Macro White Space أن الموقع إعلامي مثل المواقع الإخبارية وفقًا لـ Kyrnin عام 2015.

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

التركيز والانتباه

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

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

الخلاصة

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

يمكنك كمصمم إضافة المساحة البيضاء وفق أربعة عوامل رئيسية:

• المحتوى Content
• التصميم Design
• المستخدم User
• العلامة التجارية Brand

استخدم المساحة البيضاء الواسعة Macro White Space لتنظم المحتوى ضمن التنسيق ولتوجه المستخدم ضمن أجزاء المحتوى الظاهرة. استخدم المساحة البيضاء الدقيقة Micro White Space ضمن عناصر التصميم كما في النصوص والصور وأجزاء المحتوى.

يمكننا تقسيم المساحة البيضاء أيضًا إلى مساحة بيضاء مباشرة Active وسلبية Passive. لا تملك المساحة البيضاء السلبية دورًا أساسيًا في التصميم فهي مسؤولة عن تسهيل تجربة المستخدم وتتعلق بتسهيل القراءة. بينما توجه المساحة البيضاء المباشرة انتباه المستخدمين وتركيزهم فهي تتعلق بإبراز العناصر والمعلومات.

ترجمة -وبتصرّف- للمقال The power of white space لصاحبه Mads Soegaard.

اقرأ أيضًا

• مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم
• مبادئ التصميم المرئي في تصميم واجهة المستخدم
• أهمية الفراغات البيضاء في تصميم الويب

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

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

مبادئ التسلسل

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

يتأثر إدراكنا للمعلومات بعدة عوامل تسهم في كيفية ترتيب تسلسل المحتوى ضمن التنسيق Layout. لخص جونز Jones عام 2011 العوامل المؤثرة على التسلسل بالتالي:

الحجم

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

اللون

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

التباين

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

المحاذاة

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

التكرار

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

التقارب

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

المساحة البيضاء

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

البنية والأسلوب

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

اقتباس

تحتاج التصاميم الجذابة لعلم النفس.

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

أنماط التسلسل المرئي

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

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

النمط Z

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

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

النمط F

يستخدم المصممون النمط F عادة في المواقع التي تحوي نصوص كثيرة أو مقاطع فيديو.

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

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

يمكن استخدام النمطين Z وF في صفحات موقع إلكتروني واحد. قد تصمم صفحة رئيسية واضحة موافقة للنمط Z، ثم يمكنك عرض المزيد من البيانات وفق النمط F عندما يتعمق المستخدم ضمن الموقع.

الخلاصة

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

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

تُقرأ التصاميم في العالم الغربي وفق نمطين للتسلسل المرئي:

• النمط Z: يميل المستخدمون لمسح التصاميم التي لا تحوي الكثير من التفاصيل من أعلى اليسار إلى أعلى اليمين، ثم ينتقلون وفق خط مائل إلى أسفل اليسار ثم أفقيًا إلى أسفل اليمين.
• النمط F: نمسح التصاميم الحاوية على نصوص كثيرة بدءًا بالأعلى من اليسار إلى اليمين، ثم من اليسار إلى الأسفل بحثًا عن المعلومات التي نرغب بمعرفتها. ثم عند مصادفتها نكمل المسح من اليسار إلى اليمين.

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

ترجمة -وبتصرّف- للمقال Visual Hierarchy: Organizing content to follow natural eye movement patterns لصاحبه Mads Soegaard.

اقرأ أيضًا

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

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

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

التكرار Repetition

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

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

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

الأنماط Pattern

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

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

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

الانسجام Rhythm

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

الانسجام العشوائي Random Rhythm

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

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

الانسجام المنتظم Regular Rhythm

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

الانسجام المتناوب Alternating Rhythm

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

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

الانسجام الانسيابي Flowing Rhythm

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

الانسجام المتدرج Progressive Rhythm

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

استخدام التكرار والأنماط والانسجام في التصميم

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

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

الخلاصة

يستخدم المصممون 3 أساليب من التكرار:

• التكرار Repetition
• الأنماط Patterns
• الانسجام Rhythm

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

يعد التكرار أسهل العناصر استخدامًا، أما الأنماط فهي مزيج من العناصر المكررة، بينما يستخدم الانسجام المسافات بين العناصر للتعبير عن الانسجام والحركة. يمكننا استخدام 5 أنماط من الانسجام:

• الانسجام العشوائي Random Rhythm
• الانسجام المُنتظم Regular Rhythm
• الانسجام المُتناوب Alternating Rhythm
• الانسجام الانسيابي Flowing Rhythm
• الانسجام المُتدرج Progressive Rhythm

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

ترجمة -وبتصرّف- للمقال Repetition, Pattern, and Rhythm لصاحبه Mads Soegaard.

اقرأ أيضًا

• أساسيات الوزن البصري في التّصميم الجرافيكي - الجزء الأوّل
• التناسق وأهميته في المشاريع التصميمية
• تعرف على أنماط التصميم في مجال تجربة المستخدم

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

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

ما المقصود بتصميم مواقع الإنترنت المتجاوبة Responsive Web Design؟

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

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

وضع إيثان ماركوت Ethan Marcotte مصطلح التصميم المُتجاوب Responsive Design عام 2010 وقد استوحاه من الهندسة المعمارية التي تتجاوب لوجود الأشخاص وتفاعلهم. يعمل التصميم المُتجاوب على ثلاثة محاور أساسية:

• الشبكات المرنة Fluid Grids: تُعد الشبكات عنصرًا أساسيًا في التصميم المُتجاوب، ويصبح الموقع مُتجاوبًا بإدخال المرونة إلى هذه الشبكات. تُعرض عناصر الشبكة في تصميم المواقع المُتجاوبة كنسبة من المساحة الحاوية لها، وبالتالي يُعاد ضبط الشبكة في كل مرة يتغير فيها حجم مساحة المحتوى ليُعرض بالاعتماد على صفوف الشبكة وأعمدتها.
• الوحدات النسبية Relative Units: تعد الوحدات النسبية أساسية لتحقيق التجاوب. يتغير حجم جميع عناصر صفحة الإنترنت إلى أقصى حد ممكن في الوحدات النسبية كنسب مئوية، ليسمح بتغيير أبعاد العناصر بسرعة.
• استعلامات الوسائط Media Queries: تغير استعلامات الوسائط تصميم الصفحة العام عند استخدام لغة البرمجة CSS بالاعتماد على حجم منفذ العرض Viewport. تُعد دقة الشاشة وحجم نافذة المُتصفح مُدخلات، وبالتالي يتغير تصميم الصفحة وفقها لعرض موقع مُتجاوب.

الحاجة لتصميم مواقع الإنترنت المتجاوبة

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

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

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

المصطلحات الأساسية للتصميم المتجاوب

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

• منفذ العرض Viewport: هو الجزء المرئي من جهاز المُستخدم، وأهميته كبيرة حيث يجب ضبط المحتوى ليوافقه بأفضل أسلوب ممكن.
• المحتوى الفائض Overflow: يتجاوز حجم العناصر أحيانًا المساحة المخصصة لها وتظهر فقط في جزء صغير من منفذ العرض. تدعى العناصر في هذه الحالة بالمحتوى الفائض Overflow.
• الحجم الثابت Fixed Sizing: عندما تُمنح عناصر الإنترنت أحجامًا مُطلقة مثل صورة بحجم 500 بكسل أو هوامش داخلية بحجم 20 بكسل، يُعد حجمها ثابتًا ولا يتعلق بأحجام ومواقع العناصر الأخرى.
• الحجم النسبي Relative Sizing: هو المحور الأساسي لتصميم مواقع الإنترنت المُتجاوبة. تُعطى عناصر الموقع أحجامًا بالنسبة لباقي العناصر كنسبة مئوية أو كنسبة لارتفاع أو عرض منفذ العرض Viewport.
• الصور المرنة Flexible Images: يعد استخدام الصور المرنة توجّهًا رائجًا في استخدام الصور على الإنترنت وهي الصور التي يختلف أسلوب عرضها وفقًا لحجم المُتصفح. وتضمن بالتالي عدم قص الصورة أو أخذها حجمًا فائضًا وعدم انخفاض دقتها لتظهر البكسلات.
• نقاط التوقف Breakpoints: تختلف أحجام منافذ العرض باختلاف الأجهزة، وهذا الاختلاف متعلق بتنسيق CSS المعتمد على نقاط التوقف لضبط التنسيق وتدفق المحتوى.
• الهاتف المحمول أولًا Mobile first: انطلاقًا من أهمية تصميم المواقع لتوافق الهواتف المحمولة، اعتمد المطورون هذا الأسلوب في تصميم مواقع الإنترنت لتوافق الهواتف المحمولة أولًا ثم تعديل أبعادها لتوافق الحاسوب، إي إن الألوية للهواتف المحمولة.
• قائمة الهمبرغر Hamburger Menu: تصميم قائمة بشكل ثلاث خطوط متوازية يشبه الهامبرغر، يضيف هذا الخيار للتصميم قائمة تنقّل منسدلة وبالتالي يوفر مساحة كبيرة.

الآن بعد أن تناولنا أساسيات تصميم مواقع الإنترنت المُتجاوبة يمكننا استكمال اكتشاف كيفية إنشاء موقع مُتجاوب بكفاءة عالية.

ابدأ بالمخططات الهيكلية Wireframes

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

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

استخدام الشبكة المرنة Fluid Grid

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

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

تأكد من تعيين نقاط التوقف Breakpoints

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

• الهاتف المحمول: 360 x 640
• الهاتف المحمول: 360 x 720
• هاتف آيفون إكس iPhone X: 375 x 812
• هاتف Pixel 2 المحمول: 411 x 731
• جهاز لوحي: 768 x 1024
• حاسوب محمول: 1366 x 768
• حاسب ثابت أو محمول عالي الدقة: 1920 x 1080

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

كيفية تحسين الصور

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

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

الاهتمام بالخطوط

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

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

ابدأ بالشاشات الصغيرة

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

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

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

ترجمة -وبتصرّف- للمقال Designers Comprehensive Guide to Responsive Website Design لكاتبه HR.

اقرأ أيضًا

• مدخل إلى التصميم المتجاوب والتصميم المتكيف
• أساسيات تصميم الويب المتجاوب
• فلسفة تصميم الويب المتجاوب
• نماذج تصميم الويب المتجاوب
• ما هو الفرق بين التصميم المتجاوب (Responsive Web Design) والتصميم المتلائم (Adaptive Web Design)

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

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

الألوان والعلامة التجارية

يساعد المخطط اللوني لموقع الويب على أخذ فكرة عامة عن المنتجات أو الخدمات التي يقدمها. ووفقًا لدراسة أجراها معهد الأبحاث اللونية CCICOLOR، فإن الناس يحكمون على المنتجات على الإنترنت خلال أول 90 ثانية من رؤيتهم لها، ويعتمد حكمهم عليها بنسبة 62% إلى 90% على المخطط اللوني، وقد توصلت الدراسة إلى أن اللون يمكن أن يعكس شخصية العلامة التجارية:

• يعكس اللون الأحمر القوة والعاطفة والطاقة، ويمكن استخدامه ضمن التصميم أو العلامة التجارية لتنبيه المستخدم أو جذب انتباهه، وهو مستخدَم في مواقع مثل CNN وماكدونالدز وKFC ويوتيوب وأدوبي.
• يشير اللون البرتقالي إلى معانٍ مثل الصداقة والاتحاد والشباب، وهو مستخدَم في علامات تجارية مثل فانتا Fanta، إذ أن اللون البرتقالي منسجم تمامًا مع صميم هذه العلامة التجارية للمشروبات الغازية (فقد كانت فانتا تنتج حصرًا مشروبات بطعم البرتقال في بداياتها، لكنها توسعت في السنوات الأخيرة وأصبحت تقدم أنواعًا كثيرة مختلفة).
• اللون الأصفر يعكس السعادة والحماس، ولا عجب في ذلك، فهو مرتبط في أذهاننا مباشرةً بلون الشمس ولون إنارة المصابيح، ومن الأمثلة على استخدامه شركة الشحن الدولية DHL.
• يعكس اللون الأخضر النمو والجوانب البيئية، وهو مستخدَم في موقع إنهابيتيت Inhabitate للتنمية المستدامة، بما ينسجم مع الدلالات البيئية للون.
• اللون الأزرق يعكس الهدوء والأمان والموثوقية، وهو خيار صائب في كثير من الأحيان، إذ يُشعِر المستخدمين بالاطمئنان والراحة. يستخدَم اللون الأزرق في قطاعات واسعة، ومن الأمثلة على المواقع والعلامات التجارية التي تستخدمه: AOL وفيسبوك و HP وباي بال وألعاب إلكترونيك آرتس EA Games وديل DELL، وغيرها الكثير.

الألوان وتجربة المستخدم

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

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

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

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

كيف تكمل الألوان بعضها البعض

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

الصبغات والظلال والدرجات

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

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

التباين

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

الحيوية

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

الألوان الجمعية والألوان الطرحية

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

CMYK هو نظام لوني طرحي، وبغياب الألوان الأربعة المكونة له، تكون النتيجة لونًا أبيض. تحسَب الألوان في هذا النظام (بما فيها الأسود) كنسبة مئوية من كلٍّ من الألوان الأربعة، ويستخدم هذا النظام اللوني عادةً في الطباعة.

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

من الجدير بالملاحظة أن العين البشرية لا تجد فرقًا كبيرًا بين لوحتي الألوان لهذين النظامين. ربما يمكن لأعيننا تمييز الـ 10 ملايين لونًا التي يقدمها نظام CMYK، لكن الفروقات اللونية في الـ 16 مليون لون لنظام RGB ضئيلة جدًا ومن الصعب أن تميزها العين البشرية. لا يمكن القول بأن إحدى هاتين اللوحتين أفضل من الأخرى من منظور بصري؛ أما من منظور تصميمي؛ فالفرق بين هذين النظامين مهم لأنهما يستخدمان لإنتاج مخرجات مختلفة، الطباعة والشاشة. قد يكون التحويل بين هذين النظامين غير دقيق ويعطي نتائج مختلِفة عند العرض.

تطبيقات المخططات اللونية على الإنترنت

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

• Adobe Colors.
• Paletton.
• Color Hunter.
• Check my Color.
• Color Sphere (امتداد جوجل كروم).
• تطبيق The Color (تطبيق آيباد).

لا تنسَ أن تطلب آراء مستخدميك حول المخططات اللونية قبل المضي قدمًا بها.

الخلاصة

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

يمكن أن يحسّن المصمم تجربة المستخدم من خلال اختيار الألوان المناسبة، وهذا يساعد على ضمان:

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

تتطلب الاستفادة من الألوان أن تعرف مكوناتها، ومن خلال النظر إلى عجلة الألوان (التي يمكن اشتقاق أي لون منها) نلاحظ وجود:

• الصبغات: التي تنتج عن إضافة الأبيض إلى الصباغ اللوني.
• الظلال: التي تنتج عن إضافة الأسود إلى الصباغ اللوني.
• الدرجات: التي تنتج عن إضافة الرمادي إلى الصباغ اللوني.

من أبسط الطرق لتحقيق التوازن في اختيار الصبغات والظلال والدرجات، استخدام المخطط أحادي اللون.

كما تجب مراعاة النقاط التالية عند اختيار مخطط لوني:

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

اختر المخطط اللوني وفقًا لغرض التصميم الذي تعمل عليه، للشاشة أم للطباعة. نظام CMYK (السماوي والأرجواني والأصفر والأسود اللون المفتاحي) هو نظام لوني طرحي يُستخدَم للطباعة، قابل لإعطاء 10 ملايين مزيج لوني؛ أما نظام RGB، فهو نظام لوني جمعي يستخدم للشاشات، ويسمح بأكثر من 16 مليون مزيج لوني.

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

ترجمة -وبتصرّف- للمقال Dressing Up Your UI with Colors That Fit لصاحبه Mads Soegaard.

اقرأ أيضًا

• النظم اللونية للمواقع الإلكترونية التي تحفز الحواس البشرية
• التأثير النفسي للألوان في تصميم الويب
• أدوات ضرورية لتصميم مواقع الويب
• مدخل إلى تجربة المستخدم (User Experience - UX)

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

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

الهدفان الرئيسيان للتجانس والمعايير في تصميم واجهة المستخدم

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

1. تقليل التعلم

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

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

هذه صفحة TV في موقع Xfinity. ما يجعلها مشوِّشة للمستخدم هو اختلاف الألوان والتخطيط ونمط الخط عن الصفحة الرئيسية.

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

2. إزالة الالتباس

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

خمس طرائق لتحقيق التجانس في العمل

هناك الكثير من النواحي التي يمكن العمل عليها للوصول إلى التجانس في واجهة المستخدم، إليك خمسة أمور منها يمكنك تحسين تجانس تصميمك من خلال مراعاتها:

1. اختيارك للصيغة

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

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

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

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

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

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

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

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

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

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

يضع قسم التعليقات في موقع بي بي سي سهمًا إلى الأسفل من أجل التعليق الأعلى تقييمًا، وسهمًا إلى الأعلى من أجل الأقل تقييمًا. يُعَد هذا التمثيل متناقضًا ومشوِّشًا للمستخدم، لأن مبدأ الأعلى يتوافق مع سهم متجه للأعلى، ومبدأ الأسفل يتوافق مع سهم متجه للأسفل.

3. اتباع الأنماط الشائعة والمفهومة عند تخطيط موقعك

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

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

4. التصميم بما يتوافق مع تطلعات المستخدم

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

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

5. إنشاء عناصر مرئية متجانسة في الموقع

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

نموذج عن دليل الأساليب المعتمدة وكتيب العلامة التجارية، مصمَّم لشركة غودنيت Goodnyt. يساعد وجود هذا الدليل على التأكد من تجانس العناصر المرئية في كل أنحاء الموقع.

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

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

الخلاصة

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

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

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

ترجمة -وبتصرّف- للمقال Principle of Consistency and Standards in User Interface Design لصاحبته Euphemia Wong.

اقرأ أيضًا

• تصميم واجهة المستخدم مبادئ يجب تعلمها من أخطاء مؤلمة
• اختيار الألوان المناسبة لواجهة المستخدم
• الوصايا العشر لتصميم واجهات مستخدم احترافية
• مدخل إلى تجربة المستخدم (User Experience - UX)

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

مشكلة التصميم

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

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

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

حل مشكلة التصميم

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

بوضع المعلومات الأهم أو اللوحات الأكثر استخدامًا في مركز الاهتمام؛ ستجذب انتباه المستخدم نحوها، وتسمح له بالتركيز عليها في أثناء تنفيذ مهامه. يُعَد مركز الاهتمام Center Stage نموذجًا رائجًا لتصميم واجهة المستخدم، ويُستخدَم في معظم التطبيقات، مثل المواقع وجداول البيانات وحِزَم البرامج كـ MS Paint و Gimp.

يستخدم تطبيق MS Paint نموذج مركز الاهتمام Center Stage؛ لجذب الانتباه إلى مهمة المستخدم الأساسية، ألا وهي: معالجة العناصر الموجودة في رقعة الرسم. وهنا لا عذر حقيقي لعدم تمكُّن المستخدم من تحديد الخطوة التالية.

لماذا عليك اختيار نموذج تصميم مركز الاهتمام Center Stage؟

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

اقتباس

كما تُحدِّد الجملة الافتتاحية موضوع المقالة الإخبارية وهدفها، يُحدِّد العنصر الموجود في مركز الاهتمام Center Stage هدف واجهة المُستخدِم.

• Jenifer Tidwell مُؤلِّفة ومستشارة مواقع إلكترونية.

كيفية تطبيق مبدأ مركز الاهتمام Center Stage

1. عليك أولًا تحديد الجزء الأهم من واجهة المُستخدِم سواءً كانت لوحةً أو نافذةً أو مجموعة أدوات. وسيكون واضحًا منذ البداية؛ لأنها لوحة العمل المركزية للمُستخدِم عادةً، مثل اللوحة الحاوية على المستند النَّصي، أو جدول البيانات، أو رقعة الرسم.
2. امنح هذه اللوحة الجزء الأكبر من واجهة المُستخدِم مع التأكد أن باقي العناصر أصغر منها. ينصح بعض خبراء تصميم واجهات المستخدم بجعل لوحة مركز الاهتمام Center Stage على الأقل بضِعف حجم العنصر الأصغر منها مباشرةً في واجهة المستخدم مثل شريط الأدوات.
3. استخدِم الألوان لتمييز محتويات اللوحة عن اللوحة بحد ذاتها؛ إذ يكون الجزء المركزي من اللوحة الكبرى أبيض عادةً والأجزاء المحيطة رمادية.
4. استخدِم العناوين لتمييز اللوحات عن بعضها ولمساعدة المُستخدِم في تحديد مجموعة أدوات مُحدَّدة أو المجموعات أو الإجراءات أو اللوحات الأخرى الرديفة.
5. رتِّب العناصر المختلفة وفقًا لتوقعات المُستخدِمين. من المهم وضع اللوح الأساسي في مركز الاهتمام Center Stage، كما يهم أيضًا ترتيب اللوحات الأخرى لمساعدة المُستخدِمين على تنفيذ الإجراءات المطلوبة بسرعة ودقة؛ لذلك على الرغم من أن دور اللوحات ومجموعات الأدوات الأخرى داعم فقط؛ فإنها يجب أن تبقى مرئية، لكن دون أن تحجب اللوحة الرئيسة عن المُستخدِم.

يوضح هذا المثال من تطبيق Balsamiq كيف يمكنك تطبيق مبدأ مركز الاهتمام Center Stage، حيث اللوحة الأهم هي الأكبر. تُستخدَم الألوان والعناوين لتمييز اللوحة الرئيسة عن اللوحات الأخرى، وقد أُدرِجت اللوحات حول المساحة الرئيسة وفقًا لمهام المُستخدِم. ويمكنك استنتاج مكان الأدوات اللازمة وعمل اللوحات والأزرار المختلفة بوقت قصير.

مشكلات محتملة لمبدأ مركز الاهتمام Center Stage

كيف تعرف الترتيب الأفضل للوحات حول مركز الاهتمام Center Stage؟ الجواب ببساطة أنه لا يُوجَد ما يُسمَّى بالترتيب الأفضل؛ لأن المُستخدِمين مختلفون، وبالتالي ستتنوع أهدافهم وأساليبهم في إنجاز المهام. عند استخدام مجموعة برامج الرسم مثلًا، قد يُركِّز المُستخدِم على جزء مُحدَّد من الصورة يعمل عليه آنيًّا، وبالتالي لا يجب وضع اللوحات الثانوية في هذا الجزء لتجنُّب تحديد رؤيته.

وتُوجَد نقطة أخرى، وهي أخذ الأوامر الأهم بالحسبان؛ ليتمكن المُستخدِم من إيجادها بسهولة بالنسبة للمزيد من الأوامر الخاصة أو المتقدمة، والتي قد يرغب الخبراء فقط بالوصول إليها عادةً. مهما اعتقدت أنك تعرف عن ميول مجموعة المُستخدِمين المعنيين، فلن تتمكن كونك مصممًا وحيدًا في مكتبك من القيام بأكثر من تخمين ثانوي لتعامُل كل فرد مع تصميمك المبدئي. والطريقة الوحيدة لمعرفة مدى نجاح تخمينك، هي الحصول على تقييمات المُستخدِمين؛ لذا لا تخشَ من اختبار المُنتَج، وكُن مستعدًّا للتعلم والإعادة! قبل أن تصل لهذه المرحلة، سيساعدك تذكُّر القاعدة الذهبية الآتية:

اقتباس

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

الطريقة الوحيدة للتأكد مما إذا كان ترتيب اللوحات صحيحًا حول مركز الاهتمام Center Stage، هي اختبار المُستخدِمين للمُنتَج. فإذا اختبرت التصميم باكرًا خلال العمل على النماذج الأولية؛ فستتمكن من تعديله بسرعة وتوفر على نفسك الارتباك لاحقًا.

الخلاصة

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

ترجمة -وبتصرُّف- للمقال Center Stage – Help the User Focus on What’s Important.

اقرأ أيضًا

• أساسيات تصميم تجربة المستخدم
• أساسيات التصميم المرئي
• تعزيز حرية مستخدميك عبر حقول الإدخال القابلة للتعديل

إن حاولت بناء منزل دون إنشاء المُخطَّطات الأولية فإنه سينهار ببساطة، والسبب هو أنه لا يُمكِنك بناء منزل دون مُخطَّط. فلماذا قد تُنشِئ إذًا صفحة هبوط دون مُخطَّطات مُشابِهة رغم أنك في النهاية بحاجة لأساس متين لكسب تحويلات مُنتظِمة؟ فكِّرْ بالمُخطَّط الهيكلي على أنه التخطيط لصفحة الهبوط.

سنتحدث فيما يلي عن أداة التخطيط الرائعة هذه وكيف يُمكِن إنشاء أداة مُشابِهة.

ما المخطط الهيكلي لصفحة الهبوط؟ وما أهميته؟

يُحدِّد الإطار الهيكلي Wireframe العناصر الأهم ضمن صفحة الهبوط Landing Page دون أي تنسيق نمطي. إليك مثالًا من مُدوَّنة Unbounce عن عناصر صفحة الهبوط.

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

يُمكِنك إعادة استخدام المُخطَّطات الهيكلية لصفحة الهبوط في عدة حملات؛ حيث يكفي تعديل موضوع القسم وفق الحاجة. ستُنشِئ اليوم مُخطَّطًا هيكليًّا يحوي تفاصيل أكثر من المثال السابق. ستُنشِئ أولًا مُخطَّطًا لأقسام صفحة الهبوط، ثم تضيف أهم عناصر نسختك وصورك.

إنشاء مخطط هيكلي لصفحة الهبوط Landing Page Wireframe

سنتعرف تاليًا أهم عناصر ومبادئ إنشاء مخطط هيكلي لصفحة الهبوط.

التنسيق Layout

يُوجِّه تنسيق المُخطَّط الهيكلي رحلة الزائرين بدءًا من النقر إلى التحويل. يجب أن تقودهم فطريًّا ضمن المحتوى باستخدام أول مبدأين من مبادئ التصميم المُرتكِز على تحويل المستخدمين Conversion-Centered Design، وهما: مُساعَدة المستخدمين على التركيز، وإنشاء هيكل متين.

اتبع النصائح التالية لإنشاء تنسيق يعرض محتوى صفحة الهبوط بسلاسة للمستخدمين:

• رتِّب المعلومات وفق تسلسُل منطقي: أنشِئ قائمةً بأقسام صفحة الهبوط، ورتِّبها وفق أهميتها للعملاء، ثم رتِّب أقسام المُخطَّط الهيكلي بالمثل.
• جهِّز تسلسلًا مرئيًّا: يقرأ المستخدمون صفحة الهبوط بتسلسل مرئي فطريًّا، رتِّب الأقسام وفق النمط Z أو النمط F، وهما اتجاهان فطريان لقراءة البشر للمحتوى.
• أبقِ عرض القيمة Value Proposition في الجزء المرئي من الصفحة: ضع عرض القيمة إن وُجِد في القسم الأول أو الثاني من صفحة الهبوط؛ إذ يجب أن يراه المستخدمون دون التمرير للأسفل.

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

المحتوى Content

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

العنوان Headline

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

كيف تتأكد أن العنوان يعطي انطباعًا أوليًّا جيدًا ويُمهِّد الطريق لنجاح المحتوى؟ درس CoSchedule أكثر من 200,000 عنوان ووجد أن للعناوين التي حصدت أعلى تفاعُل العديد من السمات المشتركة. وقد تضمنت بعض هذه العناوين كلمات إجرائيةً، وأشارت لميزات واضحة.

لاحِظ كيف تزيد الممارسات التالية جاذبية العنوان في صفحة هبوط Mixmax:

يُلخِّص هذا العنوان تطبيق Mixmax في ثلاثة إجراءات كالآتي:

• تنظيم بريدك الإلكتروني.
• تحديد أولويات تركيزك.
• العمل التلقائي ليومك.

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

النسخة Copy

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

إن لم تكُن متأكدًا من أين تبدأ، جرِّب استخدام برامج الكتابة الإعلانية بمساعدة الذكاء الاصطناعي AI Copywriting؛ لمُساعَدتك على توليد أفكار عن رسائلك الأساسية. تُعَد الكتابة الإعلانية بمساعدة الذكاء الاصطناعي جيدةً لتوليد أفكار يُمكِن تحسينها لاحقًا وفق مبادئ الكتابة الإعلانية وأسلوب علامتك التجارية. يتألف محتوى مُخطَّطك الهيكلي الآن من أفكار عامة.

يُمكِنك أيضًا وضع أفكارك بكتابة العناوين الرئيسة والفرعية لكل قسم. لاحِظ العناوين الفرعية Sub-Head في صفحة الهبوط التالية لـ Evernote:

إن كنتَ تُنسِّق محتوى قسم الميزات السابق، فاكتُب ببساطة اسم كل ميزة، وعندما تتعمق في النسخة لاحقًا، ستحتاج فقط إلى تلخيص كل ميزة في جملة.

الصور Images

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

لاحِظ دور الصور في بنية صفحة الهبوط في المثال التالي:

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

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

حمل العبء الأكبر لباني صفحة الهبوط Landing Page Builder

قد يبدو أن إنشاء صفحة هبوط من الصفر أمرًا مُرهِقًا، لكن الاختيار الصحيح لباني صفحات الهبوط سيوفِّر الكثير من الجهد. ويُمكِنك الاستفادة من المعلومات التي اكتسبتها اليوم عن المُخطَّطات الهيكلية لتعديل قوالب صفحات الهبوط لتُلائِم رؤيتك.

ترجمة -وبتصرُّف- للمقال How to Build a Landing Page Wireframe لكاتبه Francois Marchand.

اقرأ أيضًا

• تصميم صفحة هبوط (Landing Page)
• 9 مبادئ لتصميم صفحة هبوط احترافية
• العناصر الأساسية لتحصيل صفحات هبوط ناجحة
• مجموعة نصائح لتحسين صفحات الهبوط SaaS

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

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

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

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

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

أداة فيجما Figma

كل ما تحتاجه في أداة واحدة.

• نوع المنتج: تطبيق عبر المتصفح.

• حدود النسخة المجانية: 3 مشاريع ومحررَين اثنين.

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

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

أداة ميرو Miro

السبورة التعاونية.

• نوع المنتج: تطبيق عبر المتصفح.
• حدود النسخة المجانية: 3 سبورات.

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

أداة أدوبي اكس دي Adobe XD

كل ما تحتاجه في أداة واحدة.

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

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

أداة InVision Studio

كل ما تحتاجه في أداة واحدة.

• نوع المنتج: تطبيقات سطح المكتب لنظامي التشغيل ويندوز وماك.
• حدود المستوى المجاني: 3 مستندات، 10 مستخدمين.

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

تتيح لك نسخته المجانية إمكانية إنشاء 3 مستندات وتضمين 10 مستخدمين نشطين؛ أما حساب المحترفين، فيتيح لك إمكانية إنشاء عدد غير محدود من المستندات، لكنه رغم ذلك يَحُد من المستخدمين النشطين إلى 15 مستخدمًا فقط.

أداة Wireframe.CC

أداة تصميم إطارات هيكلية.

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

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

أداة كاكو Cacoo

أداة الرسم التخطيطي.

• نوع المنتج: تطبيق عبر المتصفح.
• حدود النسخة المجانية: 6 صفحات.

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

أداة Jumpchart

أداة تخطيط المواقع وإدارة المشاريع.

• نوع المنتج: تطبيق عبر المتصفح.
• حدود النسخة المجانية: مشروع واحد، مع 10 صفحات، ومستخدمين اثنين، وتخزين 10 ميجابايت.

إذا كنت تخطط لإنشاء موقع الكتروني، فسوف يساعدك هذا التطبيق في إنشاء خرائط موقع وإدارة المحتوى وإدارة المشروع. من الميزات الرائعة التي يقدمها، نجد إمكانية تصدير مشروعك إلى ووردبريس، أو دروبل، أو HTML. وبالنسبة لنسخته المجانية، فهي محدودة نوعًا ما، إذ تسمح بمشروع واحد فقط (حتى 10 صفحات) ومستخدمين اثنين، وسعة تخزين 10 ميجا بايت؛ أما نسخته المدفوعة فهي اقتصادية جدًا، إذ يمكنك من خلالها الحصول على 5 مشاريع (تصل كل منها إلى 25 صفحة لكل مشروع)، مع 5 مستخدمين لكل مشروع وتخزين يصل حتى 1 غيغا بايت.

أداة MockFlow

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

• نوع المنتج: تطبيق عبر المتصفح (تطبيقات سطح المكتب لنظامي التشغيل ماك وويندوز متوفرة فقط مع النسخ المدفوعة).
• حدود النسخة المجانية: مشروع واحد، و3 صفحات.

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

تطبيق Wirefy

• تطبيق إنشاء أطر هيكلية وظيفية.
• نوع المنتج: تطبيق عبر المتصفح.
• الترقية: مجاني.

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

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

المزيد من الخيارات

رغم أنه من المؤكد أن أحد هذه الأدوات المذكورة أعلاه ستلائم متطلباتك، إلا أننا سنذكر بعض الأدوات الأخرى التي يمكنك استكشافها:

• Draw.io: وهو تطبيق عبر المتصفح مفتوح المصدر ومخصص لرسم المخططات. يحتوي على مكتبة كبيرة من الأشكال ويدعم الطبقات، كما يتيح لك إمكانية حفظ ملفاتك بتنسيق XML على جوجل درايف، أو دروب بوكس، أو GitHub.
• Mydraft.cc: وهي أداة إطار هيكلي مفتوحة المصدر تعمل عبر المتصفح ولا تتطلب منك إنشاء حساب، بحيث تبقى ملفاتك على موقع الأداة، لتعود اليها لاحقًا عبر حفظ رابط مشروعك.
• Whimsical: تطبيق تعاوني للعصف ذهني، يعمل في بيئة المتصفح.

ربما لاحظت أن بعض التطبيقات الرئيسية في هذا المجال لم تذكر في هذه القائمة مثل (بالساميك Balsamiq، وأكسورAxure، وجليفي Gliffy، ويو اكس بين UXPin، وموكابس Moqups)، إلا أن هذا المقال قد خُصِّص لكي يشمل فقط الأدوات المجانية، لكن في حال لم تكن الميزانية مشكلة، فيمكنك بالتأكيد تجربة أحد التطبيقات المدفوعة، والتي تأتي جميعها بنسخة تجريبية محدودة المدة حتى تتمكن من تقييمها قبل الشراء.

ترجمة -وبتصرّف- للمقال 9 Free-to-Use Wireframing Tools لصاحبته Kasturika.

اقرأ أيضًا

• أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم
• النسخة الكاملة لكتاب أساسيات تصميم الرسوميات