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

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

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

محاكاة العالم الحقيقي Skeuomorphism

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

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

تحاكي الواجهة المرئية لتطبيقات وبرامج Apple القديمة كائنات واقعية ليكون استخدامها أوضح وأسهل للمستخدمين لأول مرة

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

تتطلب عناصر التصميم في النهج Skeuomorphism أيضًا قدرًا كبيرًا من القدرة التقنية نظرًا لأنها مُفصَّلة جدًا.

البساطة Minimalism

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

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

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

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

اقتباس

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

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

التصميم المسطح Flat Design

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

اكتسَب التصميم المسطح قوة جذب في عام 2012 مع الإصدار 8 من نظام ويندوز والإصدار iOS 7 من Apple وظهور لغة التصميم Material Design من جوجل، لكن هذا النوع من التصميم يفتقر إلى العروض المرئية، كما يمكن ألّا يعرف المستخدمون العناصر التفاعلية فيه، لذا أُنشِئ الإصدار 2.0 من التصميم المسطح لحل هذه المشكلة ولتحسين قابلية الاستخدام. يَستخدم هذا التطور في التصميم المسطح ظلالًا دقيقةً أو اختلافات لونية لإبراز العناصر التفاعلية، مما يشير إلى كيفية التفاعل مع التصميم للمستخدمين. تساعد هذه التغييرات الطفيفة على زيادة العمق والأبعاد، وبالتالي تحسين قابلية الاستخدام، ويضفي التصميم المسطح مظهرًا مرتبًا على الواجهات الرقمية.

يستخدم مركز التحكم في نظام iOS 7 تصميمًا مسطحًا

أسلوب باوهاوس Bauhaus

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

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

اقتباس

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

الوضع الداكن

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

نشأت واجهات المستخدم ذات المظهر الداكن مثل ردٍ على أنظمة الألوان الداكنة على الخلفية المُضاءة التي تحاكي مظهر الحبر على الورق الأبيض، وقد ظهر هذا الاتجاه في عام 2016 عندما جرب تويتر نظام ألوانًا فاتحةً على خلفية داكنة، ولكن استَخدمت العديد من أنظمة التشغيل القديمة نصًا فاتحًا على خلفيات داكنة سابقًا، إذ لا بد أنك تتذكر الشاشة ذات الأرقام الخضراء على خلفية داكنة من أفلام The Matrix؛ لكن عمومًا، يبدو أن هذا الاتجاه قد بدأ عندما أصدرت آبل Apple خيار الوضع الداكن في تحديث الإصدار iOS 13، وأصبحت الأوضاع الداكنة منذ ذلك الحين بديلًا شائعًا في العديد من الواجهات، إذ يمكن للمستخدمين الاختيار بين الواجهة المضيئة والمظلمة.

الوضع الداكن مقابل الوضع الفاتح

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

الخطوط الطباعية العريضة

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

يستخدم الموقع الإلكتروني للوكالة الرقمية Huge الخطوط الطباعية العريضة

الحداثة Neumorphism

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

انتشر هذا التصميم للتطبيق المصرفي الذي أنشأه Alexander Plyuto على دريبل Dribble، ويُقال أنه أول تصميم حديث. وقد كانت نيّته هي معرفة كيف يمكن أن يتطور نهج محاكاة العالم الحقيقي Skeuomorphism في واجهات الهاتف المحمول، ورحّب مجتمع التصميم به بوصفه اتجاهًا جديدًا.

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

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

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

صاغ Michał Malewicz المدير الإبداعي والرئيس التنفيذي لشركة Hype4 مصطلح "الحداثة Neumorphism" في عام 2019 لأول مرة بعد رؤية نظرة جديدة على مبدأ محاكاة العالم الحقيقي Skeuomorphism في التصاميم الموجودة على Dribbble وبيهانس Behance. ويأتي المصطلح Neumorphism من التعبير "New skeuomorphism"، ويُطلَق على هذا الاتجاه أيضًا اسم "واجهة المستخدم الناعمة Soft UI" نظرًا لتباينه المنخفض المميز.

الشفافية Glassmorphism

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

يستخدم نظام التشغيل macOS Big Sur من Apple تأثير الزجاج الشفاف

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

صاغ Michał Malewicz مصطلح "الشفافية Glassmorphism" الذي أصبح شائعًا بعد تحديث شركة Apple لنظام macOS Big Sur في عام 2020. يقدم مبدأ الشفافية Glassmorphism جاذبيةً بصريةً لافتة للنظر وجميلة وبسيطة.

الحركة

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

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

يُعَد موقع الويب الخاص بمعرض أعمال Alex Dram في مجال UX/UI مثالًا على استخدام الحركة بطريقة طبيعية ومبتكرة لجذب انتباه المستخدم.

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

الرسومات

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

يستخدم موقع برنامج Dropbox الإلكتروني الرسوم للمساعدة في تصوّر رسالتهم وإنشاء المشاعر

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

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

ترجمة وبتصرف للمقال Top 10 UI Trends Every Designer Should Know لصاحبته Laia Tremosa.

اقرأ أيضًا

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

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

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

المشكلة

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

الحل

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

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

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

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

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

لماذا يجب أن تختار نمط تصميم ترقيم الصفحات؟

اقتباس

يقول الأمريكي جيف راسكين Jef Raskin خبير واجهة المستخدم: "تكمن جودة الواجهة في مدى قدرتها على تلبية احتياجات المستخدم ومراعاة نقاط الضعف لديه".

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

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

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

ماهي أفضل طريقة لتنفيذ نمط ترقيم الصفحات؟

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

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

أضف عناصر تحكم تتيح للمستخدم إمكانية الانتقال إلى الصفحة التالية أو العودة إلى الصفحة السابقة، مثل الأسهم اليمنى والأسهم اليسرى، كما يجب أن تتيح للمستخدم إمكانية الانتقال إلى الصفحة الأخيرة مباشرةً أو العودة إلى الصفحة الأولى، ولكن من خلال أسهم تختلف شكلًا عن الأسهم التي تنقله صفحةً واحدةً نحو الأمام أو صفحةً واحدةً نحو الخلف، وعادةً ما تكون الأسهم التي تنقل المستخدم صفحةً واحدةً مفردة الشكل مثل ">"، بينما تكون الأسهم التي تنقله إلى الصفحة الأخيرة أو تعيده إلى الصفحة الأولى أسهمًا مضاعفة الشكل مثل "»"، ومع ذلك يجب أن تتيح للمستخدم حقلًا يمكنه من خلاله إدخال رقم الصفحة التي يريدها للانتقال إليها مباشرةً، وعندما ينتقل المستخدم عبر الصفحات المختلفة، يجب أن تتغير الأرقام في نمط ترقيم الصفحات وفقًا لذلك، فعلى سبيل المثال، إذا كان المستخدم في الصفحة التي رقمها 50، فيجب أن تكون أرقام الصفحات التالية (51، 52، 53…) وهَلُمَّ جرًا على نحو ذلك.

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

المشكلات المحتملة مع نمط ترقيم الصفحات

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

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

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

ماهية المحتوى في كل صفحة

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

التنقل بين الصفحات

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

ماهية الصفحات التي زارها المستخدمون

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

اقتباس

يقول سفين لينارتز Sven Lennartz الشريك المؤسس والرئيس التنفيذي السابق لشركة Smashing Magazine: "نظرًا لأن الغرض الأساسي من نمط ترقيم الصفحات هو توفير تنقل جيد للزوار، فمن المفترض أن توضح لهم مكان تواجدهم وأين كانوا سابقًا وأين يمكنهم الانتقال بعد ذلك، إذ تمنحهم هذه الحقائق الثلاث فهمًا كاملًا لكيفية التنقل في موقعك الإلكتروني".

في الختام

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

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

ترجمة -وبتصرّف- للمقال Split the Contents of a Website with the Pagination Design Pattern.

اقرأ أيضًا

• دليلك لتصميم موقع لمتجر إلكتروني
• ترقيم آلي للعناصر والصور باستخدام CSS Counters
• هيكلة وتوزيع محتوى صفحات الويب

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

مشكلة التصميم

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

حل التصميم

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

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

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

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

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

لماذا تختار نمط تصميم قائمة منسدلة؟

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

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

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

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

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

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

كيفية تنفيذ القوائم المنسدلة بالطريقة الصحيحة

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

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

والآن، لتتمكن من تنفيذ القوائم المنسدلة بالطريقة الصحيحة، اتبع الخطوات التالية:

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

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

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

7. والآن، بعدما انتهيت من تصميم جميع الجوانب المرئية في القائمة المنسدلة، يجب عليك اختيار العناصر التفاعلية للتصميم، ويجب عليك مراعاة ما يلي:

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

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

المشكلات المحتملة مع القوائم المنسدلة

يقول بيل جيتس Bill Gates مؤسس شركة مايكروسوفت Microsoft: "عادةً ما أختار شخصًا كسولًا لأداء مهمة شاقة، لأن الشخص الكسول سيفتش عن طريقة سهلة لأداء المهمة".

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

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

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

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

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

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

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

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

في الختام

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

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

ترجمة -وبتصرّف- للمقال Display Contents the Classic Way with Dropdown Menus.

اقرأ أيضًا

• مقدمة في تصميم واجهة المستخدم UI ومتحكماتها
• قواعد تصميم الواجهات
• إنشاء قائمة منسدلة (dropdown menu) باستخدام CSS فقط

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

أصول تصميم Neumorphic

عندما أصدرت شركة أبل جهاز ماكنتوش Macintosh في عام 1984، كان أول حاسوب شخصي بواجهة مستخدم رسومية في ذلك الوقت، حيث اعتقد ستيف جوبز وهو الشريك المؤسس لشركة أبل، أن الأيقونات والرموز المألوفة، مثل سلة المهملات أو المجلد ستساعد مستخدمي الحاسوب لأول مرة على فهم كيفية التنقل في واجهة ماكنتوش Macintosh بطريقة أفضل، وترك جوبز شركة أبل في عام 1985، لكن بعودته في عام 1997، قاد الشركة لتغيير واجهة المستخدم إلى تصميم skeuomorphism، وهو أسلوب تعكس فيه مكونات الواجهة نظائرها الواقعية في العالم الحقيقي وصولًا إلى آخر التفاصيل. وبحلول الوقت الذي أُطلِق فيه نظام التشغيل ماك أو إس Mac OS X في عام 2001، طوّرت شركة أبل نظام skeuomorphism بالكامل يسمى أكوا Aqua، وهي لغة تصميم ذات طابع مائي مع أيقونات وأزرار وقوائم منسدلة لامعة.

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

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

كانت تصاميم skeuomorphism لعنةً للمصممين لعدة سنوات، ولكن برزت من رمادها صيحة جديدة لتأخذ الصدارة، في أواخر عام 2019 ظهر تصميم neumorphism (اختصار لـ "skeuomorphism الجديد") ويبدو أنه يتقدم أفضل من أسلافه لتحقيق التوازن بين الواقعية المفرطة والبساطة، حيث يستخدم neumorphism الألوان والقوام والظلال بطريقة تبدو واقعيةً دون الإفراط في التفاصيل.

تصميم Neumorphism 101

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

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

يُستمَد تصميم Neumorphic من تصميم skeuomorphic والتصميم المسطح Flat design كلاهما، من خلال إقران لوحة الألوان أحادية اللون مع الظلال الدقيقة التي تجعل أزرار الآلة الحاسبة تبدو مجسَّمةً، ويمنح التباين المنخفض -بين المقدمة والخلفية- الآلة الحاسبة تشطيبًا ناعمًا، والتأثير الكلي هو الواقعية المبسطة.

أمثلة على تصاميم Neumorphic

الآن، وبعد أن أصبحتَ على دراية بسماته الفريدة، ستلاحظ وجود تصميم Neumorphic في كل مكان، وبالطبع بدأ مصممو واجهة المستخدم -في الصناعات والمجالات المتنوعة، مثل السيارات والترفيه والرعاية الصحية والتمويل- بإعادة تخيل مكونات الواجهة بتصميم neumorphism الجديد:

إيجابيات وسلبيات تصميم Neumorphic

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

الإيجابيات

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

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

السلبيات

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

تصميم Neumorphic يصلح لكل زمان

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

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

ترجمة -وبتصرّف- للمقال The New Trend in UI Design: An Overview of Neumorphism Experience لصاحبه Kayode Osinusi.

اقرأ أيضًا

• الدليل إلى تهيئة واجهة المستخدم UI
• دليل المبتدئين خطوة بخطوة لتصميم شعار

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

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

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

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

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

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

واجهات المستخدم الداكنة موازنة بواجهات المستخدم الفاتحة

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

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

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

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

وبخلاف ما سبق، هناك العديد من الأسباب الوجيهة لاستخدام واجهات المستخدم الداكنة، ومنها:

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

وهناك بعض السيناريوهات حيث لا ينصح بالتصميم الداكن، ومنها:

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

تطبيق سطح المكتب للحواسب الشخصية بنُسُق داكن، موقع Ramotion.

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

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

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

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

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

يجب إيلاء اهتمام خاص لتباين النص في واجهات المستخدم الداكنة

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

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

لا يوجد تباين كافٍ بين النص والخلفية على يسار تصميم واجهة المستخدم.

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

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

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

يقيد تطبيق Jabra Sound+ لوحة ألوان واجهة المستخدم الداكنة إلى تدرجين لونيين فقط.

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

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

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

اقتباس

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

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

الكمية الأقل هي الأفضل الاستفادة من المساحة الفارغة

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

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

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

تصميم بسيط لواجهة مستخدم موقع إلكتروني، الصورة من موقع Denys Tyrynski.

تصميم الكلمات تنسيق النصوص Typography

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

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

يوصي موقع W3C في معياره AAA أن يكون للنص ذي الحجم العادي (أقل من 18 نقطةً إن لم يكن عريضًا) نسبة تباين لا تقل عن7:1، وينطبق هذا على عناصر واجهة المستخدم الأخرى، مثل الأيقونات وصور النص والتسميات النصية (مسميات الأزرار)، ويتعين على المصممين التأكد من أن جميع الناس قادرون على فهم المنتجات الرقمية، ليس فقط لتحسين قابلية الاستخدام، بل لتحسين تجربة المستخدم كذلك، وهو القانون المتبع في معظم البلدان.

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

تستخدم صفحة AirPods Pro على موقع Apple الإلكتروني خطًا كبيرًا وتباينًا قويًا لتحقيق أقصى تأثير.

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

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

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

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

يمكن تصوير العمق المجسم في واجهات المستخدم الداكنة من خلال جعل الأسطح أفتح كلما اقتربت من مصدر الضوء الافتراضي. (موقع Material design)

يتطلب ابتكار لون سطح كل مستوى العمل بعناية، ومن الأفضل عدم وجود أكثر من أربعة أو خمسة مستويات، ويجب على المصممين أن يأخذوا في حسبانهم تباين النص عندما تصبح الأسطح أكثر بروزًا في المجموعة وعندما تصبح أفتح لونًا، وإذا لم يكن لون الخلفية داكنًا بدرجة كافية ليحقق مستوى تباين لا يقل عن 15.8:1 بين النص الأبيض والسطح، فلن يتجاوز ارتفاع النص في السطح المجسم الأبرز أو الأعلى (والأفتح لونًا) معيار نسبة التباين 4.5:1، وقد يكون من الأفضل في بعض الأمثلة تحديد لون نص العنصر بالأسود الداكن ذي الرمز #000000 في نظام التصميم لتحقيق تباين جيد في خلفية رمادية فاتحة.

مصدر الإلهام في تصميم واجهات المستخدم الداكنة

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

الموقع الإلكتروني Atom Finance.

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

موقع Daniel Klopper التجاري الإلكتروني ذو النُسُق الداكن.

موقع Darion Mitchell التجاري الإلكتروني ذو النُسُق الداكن.

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

لوحة معلومات صممها Ruben Fernandez لصالح المؤسسة الدولية للحاسبات الآلية IBM.

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

تطبيقات الهواتف المحمولة التي تستخدم تصميم واجهة مستخدم داكنة: Wego وSpotify وApple، بأنظمة أندرويد وآيفون.

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

الملخص

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

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

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

ترجمة -وبتصرّف- للمقال In the Spotlight: the Principles of Dark UI Design لصاحبه Miklos Philips.

اقرأ أيضًا

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

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

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

1. اجعل الاستخدام سهلًا.
2. لا تدع مشاكلك تكون مشاكل للمستخدم.
3. ابذل جهدًا أكبر في التفاصيل.
4. الوضوح أَوْلى من الذكاء.
5. كن إنسانًا.
6. يمنع التصميم من أجل شخص ما أي أحد.
7. احترم تقاليد تصميم واجهة المستخدم.
8. لا تتسبب بتعطّل الموقع الإلكتروني.
9. افشل ولكن بعد كسب شرف المحاولة.
10. اجعل حاجات المستخدم هي الأولوية.

لذا دعونا نبدأ.

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

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

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

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

اعمل جاهدًا على جعل التجربة سهلةً للمستخدمين ما أمكن.

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

2. لا تدع مشاكلك تكون مشاكلا للمستخدم

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

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

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

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

3. ابذل جهدا أكبر في تفاصيل تصميمك لواجهة المستخدم

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

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

يقول بول بوغ Paul Boag:

اقتباس

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

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

4. الوضوح أولى من الذكاء

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

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

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

5. كن إنسانا

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

هذا مثال يوجد على صفحة إحدى الجامعات:

اقتباس

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

لن يقول أحد هذا الكلام، باستثناء القاتل المتسلسل من فيلم Silence of the Lambs "يدلّك المرهم على جلده"، ويمكن قول ذلك بلطف أكثر:

اقتباس

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

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

تصاميم واجهة المستخدم أصبحت أكثر تلاعبًا.

6. لا ينفر التصميم من أجل شخص ما أي أحد

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

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

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

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

7. احترم تقاليد تصميم واجهة المستخدم

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

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

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

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

8. لا تتسبب بتعطل الموقع الإلكتروني

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

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

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

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

يجب الحذر من أن ينتج عن عملية تصميم واجهة رائعة تعطل متصفح الإنترنت.

9. افشل ولكن بعد كسب شرف المحاولة

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

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

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

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

10. اجعل حاجات المستخدم هي الأولوية

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

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

إذا ساعد الموقع المستخدم على إنجاز مهامه، فسوف يكون المستخدم منفتحًا على إكمال دعوة الموقع له لإنجاز عملٍ ما.

غيض من فيض

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

ترجمة -وبتصرّف- للمقال User Interface Design: 10 Principles Learned from Painful Mistakes لصاحبه Paul Boag.

اقرأ أيضًا

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

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

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

إذ سيبدو منتجك الجديد مشابهًا لقمرة القيادة في المكوك الفضائي Endeavor بالنسبة للمستخدمين عندما لا تهيئ واجهة المستخدم لهم.

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

تهيئة المستخدم

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

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

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

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

أهمية التهيئة

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

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

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

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

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

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

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

أنواع التهيئة

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

جولة حول التطبيق The Nickel Tour

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

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

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

علامات التدريب وتلميحات الأدوات والإرشادات

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

يستخدم "توين" أنماط تلميحات الأدوات وعلامات التدريب لتوفير جولة سريعة في لوحة معلومات المستخدم، بدون إثقال المستخدمين بالتعليمات.

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

عندما صممت واجهة موقع Metrie -وهو موقع للتهيئة الثلاثية الأبعاد للغرف-، وضعتُ طبقةً من تلميحات التدريب القابلة للتبديل ودمجتُها مع نافذة التحميل.

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

التوجيه بإتمام المهام

اقتباس

"إذا أردنا تعلم فعل أمر، فأفضل طريقة هي ممارسة فعله"

أرسطو.

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

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

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

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

متى يجب تهيئة المستخدمين

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

تهيئة من لم يألف التطبيق أبدا

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

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

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

التهيئة التدريجية

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

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

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

التهيئة لمهمة جديدة

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

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

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

يجب عليك فهم المستخدم

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

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

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

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

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

اربط بين التهيئة والقيمة التي يحتاجها المستخدم

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

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

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

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

اجعل التهيئة سريعة وسهلة

اقتباس

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

• من مقال "لا تدفعني إلى التفكير" لصاحبه Steve Krug.

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

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

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

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

اجعل التهيئة قابلة للتكرار

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

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

يُعطَى المستخدم القدرة على تشغيل أو إيقاف تلميحات المدرب عند حاجته لذلك عبر تطبيق Metrie's Room Styler لتصميم المظهر الثلاثي الأبعاد للغرف، ويمكِّن هذا المستخدم من تلقي التوجيه في أي وقت يريد.

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

لا تجعل الأمر شخصيا جدا

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

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

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

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

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

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

لا تعتمد على الدروس التعليمية للتغطية على تجربة المستخدم السيئة

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

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

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

خدمات التهيئة

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

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

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

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

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

فهم الأساسيات

تهيئة التجربة

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

مسار التهيئة

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

تهيئة المستخدم

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

ترجمة -وبتصرّف- للمقال First Impressions – A Guide to Onboarding UX لصاحبته BREE CHAPIN.

اقرأ أيضًا

• كيفية تحسين إعدادات تطبيق بناء على تجربة المستخدم
• تصميم تجربة تهيئة المستخدم User Onboarding
• الكتابة لتجربة المستخدم UX Writing أساس التهيئة الفعالة للواجهات

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

تطوّر Adobe X‎D منذ طرحه رسميًا في أواخر عام 2017 بخطوات كبيرة، بحيث أصبح أداة تخطيط شبكي وإنشاء نماذج أولية عالية التنافسية لمصممي تجربة المستخدم UX، إذ يوسّع نظام المكونات الجديد في Adobe X‎D نوع التفاعلات التي يمكن للمصممين تجربتها، ولكن هذه المكونات لا تخلو من العيوب. يفيد اعتماد مجموعة من ممارسات سير العمل لتجنب الهدر واستخدام إمكانات النظام الكاملة عند العمل مع مكونات X‎D.

مكونات Adobe X‎D

مكونات X‎D هي مجموعات من العناصر التي يمكن إعادة استخدامها مثل النصوص أو الأشكال أو الخطوط. يحتوي كل مكون على مكون رئيسي Main Component يعمل كأب، وآخر نسخ instances أو أولاد تُوضَع على لوحة الرسم، حيث تنتشر التغييرات في جميع النسخ عند تغيير المكون الرئيسي.

بديل نظام الرموز symbol السابق في X‎D والذي يؤدّي غرضًا مشابهًا هو أن تقدّم المكونات أداة تمييز رئيسية key differentiator، حيث يمكن أن يكون لهذه المكونات حالات states متعددة تستجيب لمدخلات مختلفة محددة في وضع نموذج X‎D الأولي. يمكن أن يكون للزر مثلًا حالة افتراضية ولكنه يغيّر مظهره في حالة المرور فوق hover أو النقر clicked فوقه، أو يمكنه تشغيل صوت عند النقر عليه أو تغيير مظهره وفقًا للمدخلات من خلال تمييز الكلام speech recognition.

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

توسّع إضافة المكونات إمكانات إنشاء نماذج Adobe X‎D الأولية

نصائح للإلمام ببرنامج Adobe X‎D

سيستفيد المصممون الذين يتمتعون بدرجة معقولة من الإلمام ببرنامج Adobe X‎D بأكبر قدر ممكن من النصائح والاقتراحات أدناه. نزّل أولًا أدوات تصميم Adobe XD Design Kit من الصفحة الرئيسية لمواد التصميم Material Design الخاصة بجوجل Google، حيث ستوفر هذه الأدوات مجموعة مكونات Adobe X‎D لتجربتها وتحليلها بالتفكيك deconstruct.

نصيحة رقم 1: ضع في حساباتك جميع الحالات قبل إنشاء مكون

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

• الحالة الافتراضية default state: القائمة مطوية.
• حالة المرور فوقها hover state: قد يتغير لون حدود القائمة عندما يكون المؤشر فوقها.
• حالة توسعة القائمة والنقر عليها expanded, clicked state: تظهر خيارات القائمة المنسدلة.

إنشاء وتسمية واختيار حالات المكونات في الشريط الجانبي

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

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

اقتباس

ملاحظة في أدوبي Adobe: أعطِ حالات المكون ميزة القفل lock feature ليتمكّن المصممون من الحفاظ على الحالات غير الافتراضية كما هي، ومنع نشر التغييرات التي تطرأ على حالة المكون الرئيسي الافتراضية.

يمكن فحص المكونات بالتفصيل في لوحة Assets

نصيحة رقم 2: سم المكونات عند إنشائها

يؤدّي إنشاء مكون -من خلال النقر بزر الفأرة الأيمن فوق عنصر، ثم تحديد الخيار Make Component من القائمة، أو الضغط على Cmd-K على جهاز Mac أو Ctrl-K على نظام ويندوز- إلى إضافة المكون إلى لوحة Assets في الشريط الجانبي الأيسر. سيعطي X‎D للمكون اسمًا افتراضيًا هو Component XX، حيث أن XX يُعَد عددًا، إذ لا يصِف هذا الاسم المكونَ جيدًا، لذلك يُفضَّل إعطاؤه اسمًا فريدًا وقابلًا للبحث، حيث سيصبح هذا الأمر غير عملي إذا بدأت جميع المكونات بالاسم الافتراضي نفسه مع عددٍ لا معنى له عند امتلاء قائمة المكونات. قد يساعد خيار العرض tile view في ذلك، ولكنه لا يحتوي على تسميات نصية، مما يجعل التحديد المرئي بطيئًا وصعبًا. كما أن عرض القائمة list view مع الصور المصغَّرة الصغيرة يصعّب تحديد الاختلافات بين المكونات ذات الأسماء غير القابلة للفهم. يمكن أن تضيع المكونات، وبالتالي فإنّ جعلها قابلةً للبحث عن طريق تسميتها سيوفّر الوقت لاحقًا.

اقتباس

ملاحظة في أدوبي Adobe: حدّد المكون تلقائيًا عند إنشائه واضبط المستخدم من لوحة Assets ثم Components لإعادة تسميته أو إظهار قائمة منبثقة للتسمية. كما يُفضَّل إتاحة إمكانية تبديل هذه الميزة في التفضيلات Preferences.

يمكن تنظيم مكونات X‎D وإعادة تسميتها من لوحة Assets

نصيحة رقم 3: نظم المكونات الرئيسية

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

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

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

اقتباس

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

تُعَد تسمية الطبقات بعناية أمرًا أساسيًا، لأن استخدام انتقالات الحركة التلقائية تعتمد عليها كثيرًا

نصيحة رقم 4 ابق منظما مع لوحة الطبقات

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

يوفّر عرض الطبقة Layer شفافيةً بنسبة 100% من ناحية التسلسل الهرمي وتسمية العناصر، كما أن تنظيمه المحكم أمر أساسي. يتطلب استخدام انتقال الحركة التلقائية Auto-Animate القوية في X‎D بين الحالات أن يكون للعناصر الاسم والموضع نفسه في تسلسل طبقة المكون الهرمي، وإلا فسيجري الانتقال افتراضيًا إلى التلاشي بدلًا من الانتقال من خلال الحركات التلقائية الجذابة.

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

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

لوحة الطبقات Layers في Adobe X‎D

نصيحة رقم 5: استخدم تلاشي ألفا Alpha Fading لاستكمال الألوان

تُعَد الحركة التلقائية Auto-Animate إضافةً ممتازة إلى X‎D، ولكنها تأتي مع بعض القيود والخصوصيات التي تتوضّح عند تغيير لون عنصر بين حالتي مكون أو بين لوحتي رسم باستخدام الحركة التلقائية، حيث يتغير اللون فجأةً عند الاختبار بدلًا من الاستكمال السلس بين اللونين.

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

كيفية تلاشي الألوان الصحيح باستخدام الحركة التلقائية في X‎D

نصيحة رقم 6: استفد من المكونات في شبكة التكرار Repeat Grid

تُعَد شبكة التكرار Repeat Grid ميزةً أخرى ممتازةً لتوفير الوقت في X‎D التي تسهّل تنظيم مصفوفات العناصر المتشابهة وتحافظ عليها. تمتلك شبكات التكرار مثل المكونات علاقةً هرمية، حيث يكون العنصر الأول في الزاوية اليسرى العلوية في الشبكة هو العنصر الأب الذي يحدد خصائص العناصر الأبناء، وهناك استثناءات بالتأكيد مثل الصور النقطية bitmaps والسلاسل النصية التي تكون فريدة للعنصر الابن، ولكن ليست خصائص النص كذلك.

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

تُقفَل خاصية اللون المحلي داخل مكون نسخة ابن في شبكة التكرار Repeat Grid، ولكن لا يُقفَل الحجم

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

تُقفَل خاصية اللون المحلي داخل مكون نسخة ابن في شبكة التكرار Repeat Grid، ولكن لا يُقفَل الحجم

إن تمكّن المصممون من التغلب على خصائص المكونات وشبكات التكرار، فيمكن أن يكون الجمع بينها قويًا.

النصيحة رقم 7: افترض أن انتقالات حالة المكون المستندة إلى الوقت غير موجودة حاليا

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

اقتباس

ملاحظة في أدوبي Adobe: أضف خيار انتقال مستنِد إلى الوقت إلى المكونات، بحيث يمكن تحريك حالاتها بصورةٍ مستقلة عن مدخلات المستخدم.

توجد الانتقالات المستندة إلى الوقت بين لوحات الرسم فقط، ولا توجد بين حالات المكون

نصيحة رقم 8: كن دقيقا عند استنساخ تسلسلات المكونات الرئيسية الهرمية

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

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

اقتباس

ملاحظة في أدوبي Adobe: وفِّر خيار القائمة تكرار duplicate عند النقر بزر الفأرة الأيمن على المكون الرئيسي في لوحة Assets.

قد يكون خيار التكرار duplicate مفيدًا عند النقر بزر الفأرة الأيمن على أحد المكونات

مقومات النجاح للنماذج الأولية باستخدام مكونات Adobe X‎D

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

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

• افهم كيفية انتشار التغييرات بين المكونات الرئيسية والنسخ الأبناء.
• كن على دراية بكيفية تفاعل المكونات مع ميزات Adobe X‎D الأخرى، مثل الحركة التلقائية Auto-Animate وشبكة التكرار Repeat Grid.
• احرص على تبني ممارسات سير عمل مناسبة لتوفير الوقت، مثل تسمية المكونات والحفاظ على منطقة لوحة لصق pasteboard مكون رئيسي منفصلةً في ملف X‎D.

ستزيد مراعاة خصوصيات العمل مع مكونات Adobe X‎D، مع الحفاظ على سير عمل منظَّم من إنتاجية التصميم، وسيؤدي ذلك إلى تجنّب التنظيف والصيانة غير الضروريين كما سيمنح مصممي X‎D ميزةً فعّالةً عند إنشاء النماذج الأولية للمنتجات الرقمية.

ترجمة -وبتصرّف- للمقال Productive XD Prototyping – An Adobe XD Components Tutorial لصاحبه Edward Moore.

اقرأ أيضًا

• طريقة اعتماد نهج تكراري لتصميم واجهة المستخدم UI
• موازنة بين أفضل أدوات تصميم واجهة المستخدم UI
• دليل استخدام Adobe Xd للمبتدئين في عالم التصميم
• 10 إضافات مجانية للفوتوشوب متعلقة بتصميم المواقع

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

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

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

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

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

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

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

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

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

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

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

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

مرحلة الاكتشاف

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

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

صورة 3: تعمل خرائط التعاطف على تحويل تركيز الجمهور نحو تلبية احتياجاته بعيدًا عن إقناعه بشكل مباشر

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

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

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

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

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

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

صورة 4: هناك العديد من التمارين التي تساعد في إنشاء هوية العلامة التجارية بما في ذلك لوحة المزاج.

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

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

بناء نموذج أولي مستمر بدلا من المواصفات الوظيفية

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

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

صورة 6: ينظم المستخدمون المعلومات في مجموعات تكون منطقيةً بالنسبة لهم خلال تمرين فرز البطاقات

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

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

صورة 7 : ستكون النماذج الأولية لواجهة المستخدم أساسيةً للغاية مع التركيز على هندسة المعلومات وأسئلة المستخدم

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

صورة 8: بمرور الوقت يمكن أن يتطور النموذج الأولي ليشمل التسلسل الهرمي المرئي ومحتوى أكثر اكتمالًا

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

صورة 9: يمكن أن يستمر التصميم في التطور بناءً على ملاحظات المستخدم ومع تقديم المزيد من الدقة

من النموذج الأولي إلى الإصدار التجريبي إلى بدء العمل

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

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

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

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

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

المراقبة المستمرة والتدقيق والتطور

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

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

مزايا النهج التكراري لتصميم واجهة المستخدم

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

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

صورة 12: يؤدي اختبار نموذج أولي مع مستخدمين حقيقيين إلى حل الخلافات حول الاتجاه في جزء صغير من الوقت

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

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

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

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

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

ترجمة -وبتصرّف- للمقال How to adopt an iterative approach to UI design لصاحبه Paul Boag.

اقرأ أيضًا

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

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

أهمية اختبار التصميم

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

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

اختبار التصميم أبعد من التفضيلات الشخصية

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

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

يغني اختبار التصميم عن المواجهات المتعلقة بالتصميم نفسه

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

يساعد اختبار التصميم على متابعة العمل بدقة

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

يقلل اختبار التصميم من فرص الرفض من اللجنة الرئيسية

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

كيف تختبر جماليات التصميم؟

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

سؤال المستخدمين غير كافٍ

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

ركز على قيمة العلامة التجارية وهويتها

تعد النماذج الأصلية في العلامة التجارية أداةً مفيدةً لتحديد طابع علامتك التجارية.

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

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

تقنيات اختبار التصميم

اختبار A / B

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

Helio هي أداة تجعل اختبار A/B تصميمًا مباشرًا

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

الدراسات الاستقصائية الدلالية

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

يعد المسح التفاضلي الدلالي طريقةً ممتازةً لمعرفة أداء موقعك مقابل الكلمات الرئيسية التي اخترتها

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

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

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

اختبار التصميم عن طريق المنافسة

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

يمنحك تصنيف تصميم موقع مقابل المنافسة فكرةً عما إذا كنت قد نجحت في تمييز علامتك

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

الاختبارات المفاجئة

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

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

العناصر الجمالية لا تقل أهمية عن قابلية الاستخدام

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

ترجمة -وبتصرّف- للمقال Testing design: How do you test a design comp? لصاحبه Paul Boag.

اقرأ أيضًا

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

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

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

ما الذي يميز أدوات تصميم واجهة المستخدم الحديثة؟

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

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

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

سكتش Sketch

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

ومن أهم المميزات التي يوفرها sketch ما يلي:

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

يقدّم تطبيق سكتش Sketch إصدارًا تجريبيًا مجانيًا لمدة 30 يومًا، في حين يجب الدفع والاشتراك للحصول على ترخيص تجاري، كما تتوفر التحديثات السنوية بسعر منخفض؛ أما أهم التحذيرات الكبيرة هنا، هو أن سكيتش Sketch متاح فقط لنظام التشغيل macOS، فإذا كنت تستخدم ويندوز Windows أو لينكس Linux، فلن تتمكن من استخدام سكتش

فيجما Figma

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

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

أما أبرز الخصائص والمميزات التي تجدها في فيجما Figma، فهي:

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

أما بالنسبة لحزم الاشتراك والأسعار، فيقدم فيجما Figma خطةً مجانيةً تسمح بمحررَيْن اثنين وثلاثة مشاريع، وسجل إصدار لمدة 30 يومًا، وبعد ذلك تبدأ الخطط التجارية كاملة الميزات، بحيث تُدفع عادةً عبر اشتراكٍ سنوي.

أدوبي إكس دي AdobeXD 

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

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

أما أبرز الميزات التي يقدمها أدوبي إكس دي، فهي:

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

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

كيف تختار التطبيق الأنسب لإنجاز تصاميمك؟

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

الختام

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

ترجمة -وبتصرّف- للمقال Adobe XD vs. Sketch vs. Figma – Comparing Top UI Design Tools of 2019 لصاحبه ERIC KARKOVACK.

اقرأ أيضًا

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

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

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

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

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

يتفق مع ذلك أحد لاعبي الشطرنج، واسمه Josh Waitzkin، وهو محترف في الشطرنج، كما أنه بطل العالم في رياضة Tai Chi Push Hands الشعبية، ورياضة Jiu Jitsu البرازيلية. حيث كان أول من يحمل لقب البطولة للحزام الأسود بعد حصول Marcelo Garcia عليه لخمس مرات على التوالي. ويعمل حاليًّا على تدريب الخبراء الماليين ليرتقوا في مهنهم من كونهم ضمن أفضل 1% إلى النخبة التي تشكل 0.1% بنفس المجال. أي أنه يملك مهارة احتراف الأشياء. والغريب في الأمر أنه حين يدرّس Josh الشطرنج فإن الرقعة تبدو بهذا الشكل:

ملك ضد ملك وبيدق

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

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

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

• الضغط على الخصم بقطعتين معًا.
• معرفة أي المربعات على الرقعة تمنحه الهيمنة.
• الفرق بين توجيه اللعبة إلى فوز أو تعادل.

أبسط سيناريو ممكن

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

وهذا مثال لزر أساسي افتراضي استُخدم فيه خط Helvetica (وهو خط افتراضي) بحجم 16 بكسل (افتراضي جدًّا)، ووضع الخط عادي plain. على مستطيل مرسوم باللون الأزرق الافتراضي؛ بطول 40 بكسل، مع 20 بكسل مساحة إضافية بلا كتابة في كلا الطرفين.

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

• الخط ونمط الكتابة.
• اللون.
• درجة انحناء الزوايا.
• الحواف.
• الظلال.

هناك المزيد من الخصائص لكن لنبدأ بتلك.

الكتابة

تغيير الخط أمر سهل كبداية

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

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

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

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

كيف يبدو خط DIN مع الزوايا المدورة للمستطيل؟ للحكم على ذلك نوازنها مع الزوايا المربعة.

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

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

تعلمنا حتى الآن أمرين يمكن تعميمهما من تصميم الأزرار إلى كل عناصر واجهة المستخدم الأخرى وهما:

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

اللون

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

كيف نضيف إليه بعض المرح؟ ككل مشاكل تعديل اللون، يساعدنا التفكير في نظام HSB للألوان الذي يرمز إلى الصبغة Hue، والإشباع Saturation، والتألق Brightness.

وفق HSB، يتحول اللون إلى ثلاث أرقام وكأننا صنعنا له مقابض بتحريكها نتحكم به.

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

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

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

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

لا يؤمن النص الأبيض على زر الأزرق سماوي تباينًا كافيًا، مما يخالف شرطي AAA وAA من WCAG، ووفقًا لـ Stark وهو أداة لاختبار جودة التباين فإنّ الزر لا يوافق أي من التوصيات. (يمكنك الاطلاع علىLea Verou's Contrast Ratio لأداة شبيهة تعمل من المتصفح)

كيف نجعل النص الأبيض في الزر الأزرق السماوي أوضح للنظر؟ نفكر مجددًا في قيم HSB للون الزر.

• التألق Brightness: نخفضه ليصبح أوضح.

• الإشباع Saturation: نزيده والسبب أننا نحاول تحقيق التباين مع اللون الأبيض ذو الإشباع الصفري، لذا فقيم إشباع أعلى للأزرق ستحقق تباينًا أعلى.

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

هنا لا بأس من فقدان معيار AAA؛ حيث أن WCAG طورت المعايير مثل وصف نسبي لمقدار التباين وليست معايير مطلقة.

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

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

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

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

بمزيد من العصف الذهني، قد يفي الأحمر الصارخ بالغرض.

أو حتى إحدى درجات البناء من البرتقالي.

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

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

الظلال

لنواصل العمل وليكن مع الظلال هذه المرة.

هناك عدة توجهات للتعامل مع الظلال، لكن التصنيفين الأساسيين للظلال هما:

• الظلال الواقعية.
• الظلال ذات طابع الرسوم المتحركة.

وهنا مثال لكل منهما:

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

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

للزر الأزرق المخضر ظل أسود بعتامة 30%، ممتد للأسفل بمقدار 1 بيكسل وفق المحور الطولي؛ ثم 2 بيكسل من التمويه أي (o 1px 2 px)؛ وللزر الأسود ظل أسود بعتامة 50%، ممتد للأسفل بمقدار 2 بيكسل وفق المحور الطولي؛ ثم 4 بيكسل من التمويه أي (o 2px 4px). يبدو الظل الأغمق سيئًا مع الزر الأزرق المخضر.

لماذا؟ كإجابة العديد من الأسئلة عن الألوان فإن ذلك يعتمد على اللمعان.

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

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

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

الحواف

فلنضف حافةً للزر الأزرق المخضر 1.

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

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

لتظهر الحافة على اللون الأزرق بنفس وضوحها على الأزرق المخضر يمكن زيادة عتامة لونها الأسود إلى نحو 50%.

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

لكل من هذه الأزرار نفس الظل (o 2px 3px) لكن الاختلاف بدرجات العتامة. لظل الزرين العلويين درجة عتامة 20%، ولظل الزرين السفليين درجة عتامة 40%. فبينما يبدو الزر العلوي الأيسر جيدًا، يكاد نفس الظل ألا يكون ملحوظًا على خلفية أغمق مثل الزر العلوي الأيمن، وظل الزر السفلي الأيسر الذي يبدو داكنًا جدًا على الخلفية البيضاء، فإنه جيد مع الخلفية الغامقة كما في الزر السفلي الأيمن.

الأيقونات

فلنواصل العمل هذه المرة بالحديث عن الأيقونات.

هذه أيقونة التحميل لموقع Font Awesome.

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

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

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

ويبدو كالآتي بتطبيقها:

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

الخلاصة

تلك البداية فقط، فهناك أنماط مختلفة للأزرار.

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

• الإضاءة والظلال.
• اللون.
• أسلوب الطباعة (الكتابة).
• التناسق.
• العلامة التجارية.

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

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

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

ترجمة وبتصرّف للمقال The King vs. Pawn Game of UI Design لصاحبه Erik Kennedy.

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

كيف يعمل مصمم واجهة المستخدم؟

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

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

ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة

اشترك الآن

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

يمر مشروع تصميم الواجهة بعدة مراحل وهي:

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

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

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

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

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

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

التناسق

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

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

البساطة

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

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

تناسق الخطوط

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

مراعاة التصميم المتجاوب

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

التباين

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

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

الهرمية

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

المحاذاة

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

التقارب

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

الوضوح

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

الصورة بواسطة Antonin Kus من موقع dribbble

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

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

مصدر الصورة

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

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

أدوبي فوتوشوب

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

أدوبي إليستريتور

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

Sketch

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

Adobe X D

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

Figma

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

Balsamiq

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

Zeplin

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

InVision

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

خاتمة

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

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

إليك هذه النصائح التصميمية التي ستساعدك على تصميم النموذج المحاكي المثالي لموقعك.

جمع المعلومات من العميل

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

حدد الشريحة المستهدفة

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

صمم بإبداع

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

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

اختر الخطوط

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

اختر الصور المناسبة

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

تشذيب التصميم

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

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

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

برنامج الفوتوشوب

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

برنامج Moqups

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

برنامج الإليستريتور

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

برنامج InVision

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

تحسين المحتوى البصري

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

إزالة العناصر غير المهمة

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

اختبار النموذج المحاكي

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

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

ترجمة وبتصرف للمقال  10tips to create perfect website mockups للكاتب Harsh Raval.

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

مراحل العملية هي:

1. جمع المتطلّبات
2. تحديد الأفكار
3. إرسال المقترحات إلى المجموعة الأساسيّة
4. دمج المراجعات في الإطارات الشّبكيّة
5. الانتقال إلى المجموعة الأكبر
6. إنشاء نموذج أوّليّ عالي الدّقة /اختياري -غير مستحسن
7. العمل الوثيق مع المطوّرين
8. المساعدة في الاختبار والنّشر والتّسويق
9. مراقبة ردود الفعل تجاه العمل

الخطوة 1: جمع المتطلبات

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

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

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

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

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

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

الخطوة 2: تحديد الأفكار

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

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

وبهذا يكون قد حان الوقت لاستخدام جميع النّصائح والتّقنيات التي تعلّمناها في المقالات السّابقة، والأهم من ذلك ألا نخاف من البدء من جديد، فإذا كنّا نريد رؤية كيف تبدو هذه العمليّة في الحياة الواقعيّة، فيجب التّحقق من قائمة تشغيل مقاطع اليوتيوب youtube الخاصة بـالإطار الشّبكي لبالاساميك، فهدفنا الآن ليس التّوصل إلى "الحلّ المحدّد"، بل وضع بعض واجهات المستخدم لتقديمها إلى الفريق كمقترحات لنعرف كيفيّة تفاعلهم معها. ويجب الحذر من الوقوع في فخ الإصدار 3 من تطبيق بالاساميك، فبما أنّنا نميل عادةً إلى وضع الكثير من التّفاصيل في إطاراتنا الشّبكية بسبب طريقة عمل أدمغتنا، فذلك يلزمنا بمحاولة تقليص إطاراتنا الشّبكية الأوّليّة مرة واحدةً (الإصدار 2) بمجرد الانتهاء منها، ثمّ نقلصّها مجدّدًا لنصل إلى ما يجب إصداره في الإصدار 1، وإذا كنّا نرغب في عرض الرّؤية الكاملة للفريق، فيجب إضافة بعض التّعليقات التّوضيحيّة annotations، التي تعرض رسالة "إصدار2"، أو "يمكن أن يظهر لاحقًا"، ويمكننا استخدام أزرار مُدبّبة صفراء، أو أقواس عموديّة متعرّجة.

الخطوة 3: إرسال المقترحات إلى المجموعة الأساسية

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

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

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

كلمة تحذير

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

الخطوة 4: دمج الردود في الإطارات الشبكية

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

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

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

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

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

الخطوة 5: الانتقال إلى المجموعة الأكبر

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

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

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

الخطوة 6: إنشاء نموذج أولي عالي الدقة

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

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

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

تستخدم بعض الشّركات الكبيرة عادةً، نماذج أوليّة عالية الدقة ليشتريها المديرون التّنفيذيّون، ففي عالم المؤسّسات لا يريد أصحاب القرار رؤية أشياء منخفضة الدّقة وذات مظهر سطحيّ، بل يريدون رؤية الشّيء الحقيقي بكلّ مجده المميّز. وهناك استخدام آخر للنّماذج الأوّلية عالية الدّقة هو خدمة اختبار الاستخدام الذاتية self-service user-testing.

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

الخطوة 7: العمل الوثيق مع المطورين

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

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

الخطوة 8: المساعدة في الاختبار والنشر والتسويق

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

الخطوة 9: مراقبة ردود الفعل تجاه العمل

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

أفكار ختامية للعملية

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

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

ترجمة -وبتصرف- للمقال An Opinionated Guide to Creating Software من موقع Balsamiq.com

اقرأ أيضًا

• المقال السابق: مبادئ التصميم المرئي

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

من مبادئ التّصميم التي سنتحدّث عنها:

1. التّباين (Contras)
2. التّسلسل الهرميّ (Hierarchy)
3. التّقارب (Proximity)
4. المحاذاة (Alignment)

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

التشبيه بالطهي

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

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

لماذا تستخدم مبادئ التصميم

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

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

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

التباين

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

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

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

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

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

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

1. يجب عدم استخدام الألوان التي لا تتباين بما يكفي، فهي قد تجعل القراءة صعبة.
2. يجب مراعاة المعايير الثّقافيّة عند استخدام الألوان.
3. للألوان معانٍ مختلفةٌ في الثّقافات المختلفة.
4. يجب مراعاة المستخدمين الذين يعانون من عمى الألوان، فقد يواجهون أيضًا صعوبةً في التّعرف على ألوانٍ معيّنةٍ.

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

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

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

تساعد بعض عناصر التّحكم على استخدام النّصّ المتباين بسهولةٍ، ففي موقع بالساميك (Balsamiq) مثلًا، يكون عنصر تحكّم العنوان بحجم 40 بكسل (pixel) افتراضيًّا، وتأخذ كتلة النّصّ إعدادات المشروع الافتراضيّة (بين 13 - 16 بكسل)، وهذا مفيدٌ للنّصّ الأساسيّ.

ويُؤدّي تذكّر استخدام عناصر التّحكّم التي تمّ إنشاؤها لمحتوياتٍ محدّدةٍ شبيهة بهذه، إلى استخدام التّباين بفعاليّة.

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

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

متى يستخدم التسلسل الهرمي

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

من الممكن وجود تسلسلٌ هرميٌّ داخل الصّفحات المستقلّة، ويُظهر الشّكل أعلاه في أمثلة النّصّ المتباين، أحد استخدامات التّسلسل الهرميّ، حيث استخدمنا الحجم والمقياس للفت الانتباه إلى المعلومات الأكثر أهميّةً في الصّفحة، ثمّ استخدمنا طريقة الطّباعة على نطاقٍ أصغر للنّصّ الأساسيّ، ويُستخدم التّسلسل الهرميّ أيضًا لمساعدة المستخدمين على فهم العلاقة بين محتويات النّظام، ويشار إلى التّسلسل الهرميّ بطرقٍ مختلفةٍ، فقد نقوم بإنشاء قوائم تحوي قوائم فرعيّةً متداخلةً منبثقةً (nested flyout sub-menus) كما في الشّكل اللّاحق حيث نعرض قائمةً هرميّةً للوظائف في أحد التّطبيقات.

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

سنجد أمثلةً على التّسلسل الهرميّ في عناصر التّحكم في البرامج، كالقوائم المنبثقة (flyout Menus) في نظام التّشغيل ويندوز (Windows)، أو آبل ماكنتوش (Mac)، وفي القوائم القابلة للطّيّ (collapsible lists)، في متصفّح ويندوز، أو متصفّح آبل التي تبدو كالسّلالم عند توسيعها، وفي قوائم مسار التّنقّل (breadcrumb)، التي تعرض العلاقة بين الأصل والفرع. باختصار يمكننا القول أنّ التّسلسل الهرميّ في كلّ مكان.

كيف يستخدم التسلسل الهرمي

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

يمكننا إنشاء قائمة تنقل لموقع الويب، عن طريق تجميع المعلومات في علاقات "أصل/فرع" كما في الشّكل أدناه:

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

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

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

يُعدّ إنشاء نمط نصٍّ شديد التّباين للعناوين -حيث نشير إلى أهمّ الأجزاء في محتوى الشّاشة- مثالًا عن استخدام التّسلسل الهرميّ في الصّفحة

التقارب

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

متى يستخدم التقارب

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

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

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

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

كيف يستخدم التقارب

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

باستخدام خيار مربّع الاختيار (checkbox)، وزرّ الإرسال والمساعدة، سيكون النّموذج محمّلًا بالمعلومات بكثافة أكثر.

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

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

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

المحاذاة

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

متى تستخدم المحاذاة

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

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

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

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

كيف تستخدم المحاذاة

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

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

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

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

ترجمة -وبتصرّف- للمقال Visual Design Principles، من موقع Balsamiq.com

اقرأ أيضًا

• المقال التالي: خطوات تصميم واجهة تطبيق من الصفر وفق المعايير الصحيحة باستعمال تطبيق رسم الإطارات Balsamiq
• المثال السابق: مقدمة عن نماذج تصميم واجهة المستخدم وقوالب تصميمها

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

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

مقدمة عن أنماط تصميم واجهة المستخدم (Intro to UI Design Patterns)

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

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

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

التشبيه بالطهي

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

عناصر نموذج التصميم

تُكتب نماذج التّصميم عادةً بمجموعةٍ مشتركةٍ من الصّفات التي تبدو كالتّالي:

قالب نموذج التصميم

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

قالب نموذج التصميم

لنبدأ بكتابة نموذج تصميم عربة تسوّق (Shopping Cart) لموقع ويب، يبدو هذا وصفًا واضحًا لمكوّن مألوفٍ جدًّا، علينا موازنة عربة التّسوق بتجارب الشّراء الأخرى كالشّراء بنقرةٍ واحدةٍ (one-click)، أو عمليّات الشّراء المماثلة كالحجز، وكيفيّة اختلاف ذلك عند استخدام الهاتف المحمول.

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

1. عرض المنتج وإضافته إلى عربة التّسوّق: وضع زرٍّ بجانب المنتج لإضافته إلى عربة التّسوّق.

2. تعديل ومعاينة العربة:

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

3. عرض عربة التّسوّق:

   1. عرضٌ منفصلٌ لسلّة التّسوّق مع المنتجات المضافة إليها بحيث يمكن للمستخدم تعديلها، أو إكمال طلبه.
   2. تأمين إجراءاتٍ لتعديل الكميّات، وإزالة المنتجات.
   3. تأمين طريقةٍ للدّفع وتسجيل الخروج (checking out)، أو إتمام الشّراء.

• التّوصيات:

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

• أمثلة:

1. نايك (Nike)
2. شوبيفاي (Shopify)
3. كريت أند باريل (Crate and Barrel)

أمثلة

فيما يلي مثالان عن عربة التّسوّق المذكورة سابقًا، وسنتحدّث عن تفصيل حلّ هذه المسألة وانعكاس هذا على النّموذج، سنركّز على شراء المستخدم للمنتج باستخدام عربة التّسوّق عل أساس مكان افتراضيّ في موقعي Nike، وTatt.ly وهو موقعٌ يستخدم الشوبيفاي (Shopify).

عربة تسوق موقع نايك (Nike)

عربة تسوق موقع تاتلي الذي يستخدم شوبيفاي للتجارة الإلكترونية (TattlyTattly cart, which uses Shopify for e-commerce)

الموازنة

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

هناك بعض الاختلافات البسيطة بين المثالين:

1. يؤمّن موقع نايك (Nike) أسلوبًا لطيفًا لمعاينة العربة دون مغادرة صفحة المنتج، وربّما يسهّل هذا على المستخدم العودة إلى التسوّق، في حين يستخدم موقع كريت آند باريل (Crate and Barrel) نفس الفكرة لمعاينة العربة، لكنّه يروّج أيضًا للمنتجات الأخرى التي قد يرغب المستخدم بشرائها بناءً على ما وضعه في سلّة التّسوّق، في حين تروّج شركة نايك (Nike) لمنتجاتٍ أخرى عند عرض سلّة التّسوّق نفسها.
2. يوجّه شوبيفاي (Shopify) المستخدم إلى عربة التّسوّق مباشرةً بعد إضافة منتجٍ إليها.

يوجد في كلٍّ من موقعي نايك (Nike)، وتاتلي (Tatt.ly)، وشوبيفاي (Shopify) نفس السّلوك العامّ ومراحل التجربة، فبدلًا من إعادة إنشاء التّجربة يعتمد كلٌّ منهما غالبًا على مصطلحاتٍ معروفةٍ، والتي تشكّل نموذج عربة التّسوّق الشّائع.

استخدام وإنشاء نماذج خاصة

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

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

كتبت جينيفر تيدويل كتابًا ممتازًا لتصميم الواجهة بعنوان Designing Interfaces وقدّمت فيه نصيحةً بشأن استخدام النّماذج في القسم المسمّى "حول النّماذج" (About Patterns)، وتقول فيها: "النّماذج ليست مكوّناتٍ جاهزةً، إذ يختلف تطبيق كلّ نموذج عن الآخر، كما أنّها ليست قواعد، أو استدلالاتٍ بسيطةً، إذ لن ترشدنا خلال مجموعةٍ كاملةٍ من قرارات التّصميم".

توجد العديد من الحلول المحتملة لمشاكل التّصميم في معارض أنماط التّصميم وواجهة المستخدم، كما توجد واجهاتٌ مسبقة الصّنع للعديد من هذه النّماذج في Wireframes to Go

قوالب تصميم واجهة المستخدم (UI Design Templates)

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

1. القالب الخاصّ بالحلّ: قد تكون القوالب خاصّةً بالمشكلة التي نحلّها، وتوفّر صفحات مجهّزة بمكتبة من عناصر التّحكم للحلول النّموذجيّة، ومن أحد الأمثلة على ذلك، قالب لإنشاء ميزة البحث أو حلّ مسألة عربة التّسوق الإلكترونيّة المذكورة سابقًا.
2. قالب خاصّ بالنّظام / منصّة العمل: قد يوفّر القالب تخطيط صفحة موحّد، ورموزًا لمنصّة تصميم معيّنة. فمثلًا، قد تكون بعض القوالب مخصّصةً لإطار عمل بوتسراب (Bootstrap)، أو نظام تصميم، مثل: ماتيريال ديزاين (Material Design).
3. قالب خاصّ بالشّركة / المنتج: من المفيد إنشاء قوالب خاصّة باستخدامنا كقالب لمنتجنا مع رموز من أجل دليل النّمط (style) الخاصّ بنا.

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

استيراد (Importing) القوالب

القالب في موقع بالساميك (balsamiq) هو ببساطة ملفّ مشروع مبدئيّ نستدعيه إن كنّا نستخدم منصّة بالاساميك السّحابيّة Balsamiq Cloud، نضيف قالبًا من قائمة (E-Commerce Template <- Import Into Project) من موقع ويرفرامز تو غو wireframes to Go، حيث نستعرض القوالب، ونستخدم زرّ استيراد لإضافة القالب إلى مشروعنا الخاصّ.

اختيار الصفحات التي نحتاجها

في مثالنا عن المتجر الالكترونيّ online shop، يمكننا استخدام نموذج التّجارة الإلكترونيّة E-Commerce template لتصميم المزيد من تجارب التّسوق، فمن الواضح أنّنا سنرغب في توضيح عمل عربة التّسوق من خلال تأكيد المناقلة. وفي الأِشكال أدناه مثال عن الصّفحات الموجودة في هذا النّموذج، فقد لا يتطلب حلّنا الخاّص استخدامها جميعًا، ومن المحتمل أن يكون للمستخدم توقّعات أخرى يجب مراعاتها، إلى جانب قواعد عمل يجب تطبيقها، لذلك سنقوم بتعديل التّجربة حسب الضّرورة، مع اختيار ما نحتاجه وتجاهل الباقي، ولنفترض رغبتنا على سبيل المثال في تجسيد تجربة الشّراء المسبق (pre-purchase) على صفحات، مثل صفحات الهبوط (Landing page)، لنستخدم القالب لإنشاء صفحة هبوط لتطبيق هاتف ذكيّ خيالي.

تعديل الصفحات مسبقة الصنع

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

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

تحرير العناصر المؤقّتة لتخصيص الصّفحة

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

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

ملاحظة حول مكتبات الرموز

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

أفكار ختامية

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

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

تشبيه بفن الطهي

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

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

ترجمة -وبتصرف- للمقال Intro to UI Design Patterns، والمقال UI Design Templates من موقع Balsamiq.com

اقرأ أيضًا

• المقال التالي: مبادئ التصميم المرئي
• المقال السابق: متحكمات واجهة المستخدم - متحكمات الخرج -

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

دليل موجز عن التحقق من صحة المدخلات (Validation Guidelines)

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

ويشرح كل من مقال إضافة عناصر تحكم واجهة المستخدم وترتيبها Adding and Arranging UI Controls، ومقال عنصر التحكم في التحرير Editing Controls كيفية إضافة متحكم وآلية تحريره، كما يمكنك الاطلاع على طريقة إنشاء الرّموز في تطبيق Balsamiq لتصميم واجهة المستخدم.

متى نستخدم التحقق من الصحة

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

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

كيف نستخدم التحقق من الصحة

1. لا يجب عرض أنماط أو رسائل التّحقّق من الأخطاء، إلّا بعد تفاعل المستخدم مع حقلٍ معيّن.
2. يجب التّحقّق من الصّحّة "أثناء التّنقّل (on-the-fly)" قبل إرسال النّموذج، وفي حال عدم تمكّننا من ذلك ينبغي إضافة إشعارٍ لتلخيص التّعليقات في الجزء العلويّ من الصّفحة عند إعادة تحميلها.
3. لا يجب مسح بيانات الإدخال الخاطئة إلا عند عدم تمكّن المستخدم من تصحيح الأخطاء بسهولةٍ، إذ يسمح هذا للمستخدمين بتصحيح الأخطاء دون الحاجة للبدء من جديد.
4. يجب تقديم إرشاداتٍ حول كيفيّة إصلاح الأخطاء، وليس إعلام المستخدمين بالخطأ الذي ارتكبوه وحسب.
5. يجب اتّباع إرشادات الصّوت والنّبرة عند توافرها، وفي حال عدم وجودها يؤمّن الرّابط التّالي أمثلة رائعة عن إرشادات الصّوت، والنّبرة، والمحتوى.

الاستخدام الرئيسي

الحالات

هناك ثلاث حالاتٍ عامّةٌ لمكوّنات التّحقّق الموضّحة أعلاه، وهي:

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

التنوع

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

دليل موجز عن أداة التلميح (Tooltip Guidelines)

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

متى نستخدم أداة التلميح

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

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

فيما يلي مثالٌ نموذجيٌّ عن أداة تلميح

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

كيف نستخدم أداة التلميح

1. يجب أن تظهر أدوات التّلميح نتيجةً لتفاعل المستخدم فقط،عوض الظهور بمفردها.
2. يجب إظهار النّصّ العاديّ فقط في أداة التّلميح، ويجب عدم استخدام الصّور أو النّصوص المنسّقة.
3. لا يجب استخدام الخاصية "alt" في لغة "HTML" من أجل أدوات التّلميح، يجب استخدامها فقط كنصٍّ بديلٍ للوصول لغرضٍ ما، ويُفضّل استخدام الخاصية "title" بدلًا منها.
4. يجب التّركيز على العمل الذي يسبّبه عنصر التّحكم، نستخدم فعلًا لنخبر المستخدمين بما سيحدث عند النّقر.
5. يجب أن تكون أدوات التّلميح قصيرةً، وتقترح إرشادات واجهة نظام آبل (Apple) تراوُح الحدّ الأقصى لطول أداة التّلميح بين 60-75 حرفًا.
6. يجب وضع أدوات التّلميح بالقرب من الكائن الذي نتعامل معه، ولكن يجب عدم وضعها بطريقةٍ تتعارض مع ما يفعله المستخدم فيشتّت انتباهه.
7. يجب إضافة أزرارٍ إعلاميّةٍ صغيرةٍ إن كنا نريد استخدام أدوات التّلميح في الهاتف المحمول بواسطة شاشات اللّمس (سنتحدث لاحقًا في المقال عن التّنوع في أدوات التّلميح).

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

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

الاستخدام الرئيسي

الحالات

حالات أدوات التّلميح بسيطةٌ، فهي دائمًا تكون إما ظاهرة أي في وضع التّشغيل (On)، أو مخفية أي في وضع الإيقاف (off)، ويجب حدوث الانتقال بين الحالتين -في حال حدوثه- بسرعةٍ (150 مللي ثانية على الأكثر).

التنوع

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

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

دليل موجز عن التنبيه (Alert Guidelines)

يلفت كلّ متحكِّم المستخدم في أيّ واجهةٍ تُعدّ متحكّم تنبيه، ويجب استخدامه بحكمة واعتدال، وتقاطع التّنبيهات عمل المستخدم، وتتطلب عملًا يجب متابعته من قبله بخلاف الإشعارات (notification)/، أو رسائل التّحقق من الصحة (validation messages).

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

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

تحدّد الإرشادات لائحةً من أسباب استخدام التّنبيهات، مثل:

1. نشر الوعي.
2. منع الخطأ.
3. منع مشكلة وشيكة الحدوث. 4 التّأكيد على العمل المحفوف بالمخاطر.
4. التّأكيد على العواقب غير المقصودة.
5. المزيد من التّوضيحات.

وتوضّح الأشكال التّالية بعض الأمثلة:

يقترح نظام تصميم الويب الأمريكيّ وجوب استخدام [التحقق المضمن (inline validation) بدلًا من أو بالإضافة إلى التّنبيهات عند تصميم النّماذج (forms).

كيف نستخدم التنبيهات

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

1. يجب إنشاء رسائل خطأ محدّدة وقابلة للتّنفيذ وتركّز على المستخدم، ثم يقوم المستخدم بتنفيذ إجراءٍ أو تغيير سلوكه بسبب الرّسالة.
2. يجب استخدام أنماط النّظام أو أنماطٍ محدّدةٍ مسبقًا، فلا يجب الابتعاد عن المألوف عندما يمكن ذلك.
3. يجب استخدام تنبيهات لها زرّان (كما في نافذة الحوار) عمومًا.
4. يجب التّعبير عن كلّ شيء بمصطلحاتٍ يعرفها المستخدم، كما يجب استخدام لغةٍ واضحةٍ وخاليةٍ من المصطلحات.
5. لابد من توافق اسم الزّر الافتراضيّ مع الإجراء الذي يصفه التّنبيه، ومن المستحسن تجنّب استخدام الموافقة (OK) كاسم للزّر الافتراضيّ.
6. يجب أن يكون تجاهل التّنبيه سهلًا عندما يكون ذلك مناسبًا، مثلًا عند الضغط على زرّ الخروج (Escape)، أو زرّ الإغلاق (CLOSE) في مربّع حوار، بالإضافة إلى زرٍّ، أو رابطٍ واضحٍ لرفض التّنبيه.
7. يجب استخدام الأسلوب، والنّمط الذي يتبعه المصمّم (في الرّابط بعض الأفكار التي تخصّ الصّوت والنّمط وإرشادات المحتوى)، على سبيل المثال تشرح إرشادات النّمط والأسلوب الخاصّ بويندوز استخدام "من فضلك"، و "آسف".
8. يجب استخدام "من فضلك" عندما يكون غيابها فظًّا.
9. يجب استخدام "آسف" فقط في رسائل الخطأ التي تؤدّي إلى مشاكل كبيرةٍ للمستخدم.

الاستخدام الرئيسي

الحالات

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

التنوع

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

دليل موجز عن جدول البيانات (Data Table Guidelines)

تستخدم جداول البيانات -التي تسمّى أيضًا عارض الجدول (table views)، والجداول (tables)، وشبكات البيانات (data grids)- الأعمدة والصفوف لعرض المعلومات المرتبطة في شبكة.

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

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

متى نستخدم جدول البيانات

يُستخدم جدول البيانات أفضل مع البيانات الرّقميّة وقوائم الأغراض التي لها نفس النّوع، فيما يلي جدول بياناتٍ رقميٌّ نموذجيٌّ:

تُعدّ الجداول -كالجدول التاّلي الذي يحتوي على إجراءاتٍ، وروابطَ، وأزرارٍ- شائعةً في تطبيقات المؤسّسات وإدارة علاقات العملاء (Customer Relationship Management)، وتطبيقات الأعمال الأخرى.

تقترح إرشادات التّصميم التّابعة لشركة غوغل Google استخدام الجداول المكوّنة من ثلاثة أعمدة على الأقل، إذ يمكن استخدام القوائم المتجاورة (Side-by-side lists)، أو أيّ عنصر تحكّمٍ نصّيٍّ آخر لمقارنة بسيطة بين عمودين.

تقترح شركة آبل Apple استخدام عارض المخطّط التفصيليّ (outline view) (المعروف أيضًا باسم عارض الشّجرة [Tree view]) بدلًا من جدول البيانات الهرميّة (table view for hierarchical data)، سنذكر لاحقًا جدول الشّجرة (tree table) وهو أحد الاختلافات في هذه الحالة.

كيف نستخدم جدول البيانات

للصّفوف الرّئيسيّة (رأس الجدول) للحصول على وصولٍ أسهل، وتصميمٍ أبسط.

1. يجب استخدام صفٍّ رئيسيٍّ يحتوي على عناوين وصفية.
2. يجب السّماح للمستخدمين بالنّقر على عناوين الأعمدة لفرز عارض الجدول إذا كان يحوي قيمًا.
3. يجب أن يؤدي النّقر مرّةً واحدةً على عنوان العمود إلى فرزٍ طبيعيٍّ (مثل الفرز أبجديًا، أصغر رقم أولًا، أقرب تاريخ أولًا، العناصر المحدّدة أولًا)، وأن يظهر "سهمٌ للأسفل"، كما يجب أن يؤدي النّقر مرّة أخرى إلى عكس التّرتيب وعرض "سهمٍ للأعلى".
4. يجب استخدام ألوانٍ متناوبةٍ للصّفوف في الجداول الكبيرة، وهو ما يُسمّى نمط "خطوط الحمار الوحشيّ" (zebra striping).
5. يجب أن نرفق مربّعات الانتقاء (checkboxes) بكلّ صفٍّ إذا كان على المستخدم تحديد البيانات أو معالجتها.
6. يجب تأمين رابطٍ، أو أيقونةٍ في العمود الأخير من الجدول للإجراءات التي لا يمكن تطبيقها إلا على صفٍّ واحدٍ في كل مرة (كالتّحرير، أو عرض التّفاصيل).
7. يجب استخدام الوسم <THEAD> والوسم <TH>، و الخاّصتين بلغة HTML وذلك من أجل تسهيل قراءة المحتوى لقارئات الشاشة (تسهيل الوصول accessibility) وعرض الجدول بتنسيق جيد بتمييز ترويسته (رأسه) عن محتواه
8. يجب أن تكون محاذاة النّص يساريّةً، ومحاذاة الأرقام يمينيّة.
9. يجب الاحتفاظ بمستوىً مناسب للدّقة إذا احتوى الجدول على بياناتٍ رقميّةٍ، فكلّما قلّ عدد الكسور العشريّة، قلّ الزّمن المستغرق لمسح البيانات وفهمها.
10. يجب عرض المعلومات التي يحتاجها المستخدم مع إمكانيّة التّعمّق في التّفاصيل عند الحاجة، كما يجب استخدام البيانات المتجمّعة (Inlays) والبيانات المتراكبة (Overlays)، وأدوات التلميح ToolTips، لعرض التّفاصيل في صفحة الجدول نفسها حفاظًا على مسار عمل المستخدم.
11. يجب استخدام صفوفٍ رئيسيّةٍ ثابتةٍ في الجداول الطّويلة.
12. يجب تأمين إمكانيّة البحث ضمن الجداول الطّويلة.
13. يجب الانتباه لكثافة العرض، إذ تصعب قراءة البيانات المتقاربة أكثر، كما أن استخدام الكثير من المسافات يؤدّي لمزيدٍ من التّمرير (ومزيد من الوقت ليجد القارئ ما يحتاج له)، ويمكن تأمين خيارٍ لتغيير كثافة العرض كما يوضّح مقال تصميم جداول بيانات أفضل Design better data tables، ولكن لا يجب أن يكون هذا عذرًا لعدم وضع خيارٍ افتراضيٍّ جيّدٍ.
14. يُعدّ ترقيم الصّفحات مفيدًا لمجموعات البيانات الكبيرة لكنّه ليس ضروريًّا، فقد أظهرت الدّراسات أنّ المستخدمين لا يمانعون القيام بالتّمرير في كثيرٍ من الحالات، وأنّ عرض جميع المعلومات في صفحة واحدة يتيح لهم إمكانيّة البحث والفرز بسهولة أكبر للعثور على ما يبحثون عنه.
15. يجب عرض عدد الصّفحات -أو عدد النّتائج- الإجماليّ إذا استخدمنا ترقيم الصفحات، كما يجب تحديد عدد الصّفوف التي ستعرض في صفحةٍ واحدةٍ.
16. يجب وضع الإجراءات التي يمكن للمستخدمين تنفيذها على البيانات بجانب حدود الجدول (كما يوضح الشّكل أدناه)، وعادةً يوضع ترقيم الصّفحات في الجزء السّفليّ من الجدول، بينما توضع إجراءات التّصفية، والفرز وإجراءات الصّفوف المتعدّدة في أعلى يسار الجدول (و/أو) أعلى يمينه.
17. في حال وجود طريقة لتصفية البيانات أو تحديدها، يجب الإشارة إلى أنّ مجموعةً جزئيّةً فقط من البيانات هي التي تُعرض حاليًّا.
18. يجب استخدام اللّون والزّخرفة باعتدالٍ، وقد يكون تمييز البيانات غير المتوقّعة مفيدًا (كالقيم المتطرّفة/المعزولة أو الإجراءات الفاشلة) ولكن قد يقلّل ذلك من إمكانيّة القراءة الكليّة.

الاستخدام الرئيسي

الحالات

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

التنوع

إن عارض الجدول (table view)، عارض الشّجرة (tree view) الهجين القابل للتّوسيع هو أحد التّنوّعات الشّائعة لجدول البيانات، ويستخدَم حتّى لا ينتقل المستخدم لصفحةٍ جديدةٍ ويضيع سياق العمل، ويقدم مقال إرشادات جدول البيانات (Data Table Guidelines) مزيدًا من أمثلة تنوّع جدول البيانات.

يجب تخصيص اختلافات (التّفاصيل عند الطّلب details-on-demand) لجداول البيانات المعقّدة، فهو مزعجٌ عندما يقوم المستخدم بالتّصفّح، لذا من الأفضل عرض البيانات التي يحتاجها المستخدم فقط.

دليل موجز عن الأيقونات (Icon Guidelines)

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

متى نستخدم الأيقونات

من النّادر ألا نشجّع على استخدام الأيقونات، لكنّه من الخطأ استخدام الأيقونات الغامضة أو غير الواضحة استخدامًا قد يضلّل المستخدم أو يتعارض مع العنوان المجاور للأيقونة، ممّا يؤدّي إلى تجربةٍ أبطأ (و/أو) محبطةٍ مع المنتَج المصمَّم، فباختصار تُكلّف الأيقونات الخاطئة المصمِّم.

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

تسرّع الأيقونات تفاعل المستخدم مع المنتج عند استخدامها السّليم، وتحسّن قابليّته للاستخدام، وتعزّز هويّة العلامة التّجارية كما يظهر الشّكل التّالي:

كيف نستخدم الأيقونات

ملاحظة: تميّز إرشادات التّصميم الخاصّة بشركة غوغل Google بين أيقونات المنتجات وأيقونات النّظام، حيث تستخدم أيقونات المنتجات للعلامات التجاريّة، وللتّعبير عن الهويّة المرئيّة، مثال على أيقونة المنتج أيقونة التّطبيق في شريط المهام (task bar)، أو الشّاشة الرّئيسيّة (home screen)، تنطبق الإرشادات أدناه على أيقونات النّظام، وهي عبارة عن معرّفات للإجراءات، أو الأوامر.

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

الاستخدام الرئيسي

الحالات

تحتوي الأيقونات غالبًا على متغيرات "تفعيل (on)"، و"تعطيل (Off)" للإشارة للحالة عندما نستخدمها على أساس أزرار ، مثل: التبديل بين "الإعجاب (Like)"، و"عدم الإعجاب (dislike)" على شيءٍ ما، ويمكن أيضًا وضع الشّارات (badged) فوق الأيقونات للإشارة لحالةٍ أكثر تعقيدًا.

التنوع

بغضّ النّظر عن النُّسَخ الأبسط للأيقونات -والتي تسمّى الشّارات (badges)- فالاختلاف بين الأيقونات يكون في شكلها وأسلوبها، فبعضها بسيطٌ أحادي اللّون، والبعض الآخر مشرقٌ معقّد، فقد نستخدم النّمط الممتلئ، أو التّفصيليّ/المجوّف، والمهم هو تصميم الأيقونات باتّساق، بحيث تكون سهلة الفهم.

ملاحظة

الأمثلة المعروضة سابقًا من موقع The Balsamiq متوفّرة للتّنزيل، كما يمكن قراءة التّعليمات عن استخدام Wireframes في تطبيق Balsamiq لتصميم واجهة المستخدم.

ترجمة -وبتصرف- للمقالات:

• Validation Guidelines
• Tooltip Guidelines
• Alert Guidelines
• Data Table Guidelines
• Icon Guidelines

من موقع Balsamiq.com.

اقرأ أيضًا

• المقال التالي: مقدمة عن نماذج تصميم واجهة المستخدم وقوالب تصميمها
• المقال السابق: متحكمات واجهة المستخدم -متحكمات التنقل-

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

دليل موجز عن الروابط (links)

للرّوابط التّشعّبيّة (Hyperlinks) دورٌ أساسيٌّ في التّنقّل في الويب، وعدم الالتزام بأهمّ الإرشادات قد يدمّر موقعك أو تطبيقك.

متى نستخدم الرابط

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

في الشّكل التّالي أمثلة عن استخدام الرّوابط في موقع ويكي حسوب:

قد نستخدم الرّابط كجزءٍ من نصٍّ ليشير إلى محتوىً مرتبطٍ به، كما يمكن أوضع الرّابط وحده ليلفت الانتباه كما في التّنقّل الثّانويّ أو الرّئيسيّ، كشريط القائمة (menu bars)، أو مسار التّصفّح (breadcrumbs)، أو التّنقّل العموديّ (vertical navigation).

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

كيف نستخدم الرابط

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

الاستخدام العادي

الحالات

1. افتراضي (default): رابط عاديٌّ وليس مختارًا.
2. المقروء بالتحويم عليه (hover): عندما تمرّر الفأرة على الرّابط يصبح مقروءًا.
3. نشيط (active): يصبح الرّابط نشيطًا عند الضّغط عليه.
4. مُزار (visited): يصبح الرّابط مُزارًا بعد استخدامه.

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

التنوع

من المفيد الإشارة إلى الرّوابط التي تنتقل إلى مواقع خارجيّةٍ باستخدام رمزٍ صغيرٍ كما في الشّكل:

دليل موجز عن الأقسام الفرعية (Tabs)

طريقةٌ ذكيّةٌ لتقسيم محتوى الصّفحة إلى أقسامٍ (يطلق عليها أحيانًا علامات تبويب ولا أدري -يقول المحرر- سبب هذه التسمية!)، لكنّ استخدامها سيفٌ ذو حدّين، فهي تلفت اهتمام المستخدم إلى جزءٍ من المحتوى لتجعل الصّفحة سهلة الفهم من جهةٍ، وتخفي أجزاء أخرى لتجعل المستخدمين يخمّنون مكانها أو يتساءلون فيما إذا كانت موجودةً من جهةٍ أخرى، وفي مقال تصميم واجهات الويب Designing Web Interfaces مثال عن ذلك.

يقول (آلان كوبر) في كتاب أساسيات التصميم التفاعليّ إن "التنقل مكلف"، وهذا ما يعني أنّه في كلّ مرة يتنقّل فيها المستخدم من صفحة إلى أخرى، فهذا يزيد من التّكلفة المعرفيّة لتجاربه، وأضاف "نادرًا ما يتماشى العمل الذي يقوم به المستخدمون في البرامج، وعلى مواقع الويب مع احتياجاتهم، وأهدافهم، ورغباتهم"، ولهذا حثّ المؤلّف المصمّمين على تقليل مقدار التّنقّل المطلوب، ويشرح كل من مقال إضافة عناصر تحكم واجهة المستخدم وترتيبها Adding and Arranging UI Controls، ومقال عنصر التحكم في التحرير Editing Controls كيفية إضافة متحكم وآلية تحريره.

متى تستخدم علامة التبويب

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

ومع ذلك هناك بعض القواعد الواجب اتّباعها عند استخدام علامات التّبويب، مثل:

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

كيف تستخدم علامات التبويب

1. يجب تجنّب استخدام عدّة مجموعات من علامات التّبويب، لذا علينا -عند حصول ذلك- الحرص على تمييز المجموعة الثّانية عن الأولى.
2. يجب وضع المحتوى الأكثر أهميّة في علامة التّبويب الأولى.
3. يجب أن يكون تأثير المتحكّمات ضمن الجزء (pane) "المساحة التي تحتلّها علامة التّبويب" محدودًا بالجزء نفسه فقط.
4. يجب عدم استخدام علامة تبويبٍ واحدةٍ.
5. يجب عدم شغل علامة التّبويب لأكثر من سطرٍ، ففي حال لم نستطع ذلك يمكننا استخدام علامات تبويب التّمرير (scrolling tabs)، أو العلامات المنسدلة (drop-down tabs).
6. لابدّ من عدم استخدام الأيقونات وحدها في علامات التّبويب، بل يوصى بإضافة نصٍّ في أعلى أو أسفل الأيقونة، حيث "تعتبر التّسميات النّصّيّة ضروريّةً لتوضيح المعنى وتقليل الغموض" كما في الشّكل:

7. يمكن استخدام علامات التّبويب العموديّة عندما يكون عدد علامات التّبويب الأفقيّة كبيرًا (أو يمكن استخدام طريقة تنقّلٍ مختلفةٍ تمامًا).

الاستخدام العادي

الحالات

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

التنوع

يوضّح الشّكل التّالي بعضًا من تنوّعات علامات التّبويب الشّائعة:

توجد عادةً حدودٌ للجزء الذي تشير إليه علامات التّبويب، لكنّ هذه الحدود ليست إجباريّةً.

دليل موجز عن مسار التنقل (Breadcrumb)

طريقةٌ مختصرةٌ لإظهار التّسلسل الهرميّ للتّنقّلات ضمن مستويات متعددة الموقع، وهي غير مزعجةٍ ولا تُشتّت انتباه المستخدمين، ولا تعرض مكان وجودهم فحسب، بل توفّر طريقةً سهلةً للسّماح لهم بالتّنقّل في مستوياتٍ متعدّدةٍ، بحيث لا تتطلّب سوى مساحةٍ صغيرةٍ، كما تُعدّ مألوفةً جدًّا للمستخدمين. كتبت مجموعة "Nielsen Norman Group" (أظهر اختبار المستخدم وجود العديد من الفوائد للتّنقل الثّانوي، مع عدم وجود أيّة مساوئ).

متى يستخدم مسار التنقل

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

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

كيف تستخدم مسارات التنقل

1. يجب أن يكون اسم الصّفحة الحاليّة هو العنصر الأخير في مسار التّنقّل، دون أن يكون هذا الاسم رابطًا، ومن المفيد عدم وضع روابط للصّفحة الحاليّة.
2. على الرّغم من إمكانيّة ذكر عنوان الصّفحة في مسار التّنقّل، إلّا أنّه من المستحسن تكراره في الأسفل، فغالبًا ما يكون مسار التّنقل صغيرًا.
3. يجب استخدام محرفٍ واحدٍ لفصل الرّوابط، وتعتبر (">" و"/") الفواصل الأكثر شيوعًا لمسارات التّنقّل.
4. يمكن استخدام مسارات التّنقّل لعرض التّسلسل الهرميّ (للموقع/للتّطبيق)، أو لعرض المسار الذي سلكه المستخدم (وهذا أقرب إلى اسمه "مسار التّنقّل")، ومع ذلك فمعظم التّوجيهات توصي بالخيار الأول -أي عرض روابط التّسلسل الهرميّ للموقع- بدلًا من مسار المستخدم.
5. يجب وضع مسارات التّنقّل فوق محتوى الصّفحة، ولكن ليس فوق أي تنقّل أساسيٍّ (مثل: القائمة الرئيسيّة "header menu"، أو القائمة الأفقيّة "horizontal menu").
6. يجب تجنّب استخدام عدّة مجموعات من مسارات التّنقّل في صفحةٍ واحدةٍ.

الاستخدام العادي

الحالات

تصمّم مسارات التّنقّل بما يشابه الرّوابط والنّصوص، ولها نفس حالاتها، وكما هو الحال مع الرّوابط القياسيّة (standard links)، فقد تنتمي روابط مسارات التّنقّل لإحدى الحالات (عاديّة، ومقروءة، ونشطة، ومُزارة).

التنوع

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

مسارات التّنقّل المنسدلة (Dropdown Breadcrumbs) هي نمط أقلّ شيوعًا حيث تجمع مسارات التّنقّل مع قائمةٍ عموديّةٍ للسّماح للمستخدمين بالتّنقّل الغير خطّيٍّ، وهي نمطٌ غير قياسيٍّ، ويجب استخدامه باعتدالٍ. يمكن مراجعة أمثلة هذا النموذج وإعداداته

دليل موجز عن التنقل العمودي (Vertical Navigation)

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

يستخدم التّنقّل العموديّ على نطاقٍ واسعٍ في الويب، ثمّ شاع استخدامه في الهاتف المحمول عبر نمط قائمة التّنقّل المنزلقة navigation drawer

متى نستخدم التنقل العمودي

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

خلافًا لعلامات التّبويب يكون التّنقّل العموديّ مناسبًا عندما يكون عدد الفئات كبيرًا، أو قابلًا للتّخصيص من قبل المستخدم (كالمجلّدات أو العلّامات (tags) في البريد الإلكترونيّ). ويعدّ نمط تنقّلٍ آمنًا لأنه مألوفٌ ومرنٌ ولا يشغل مساحةً كبيرةً في الصّفحة، ويستخدم عندما لا يكون هناك خيارٌ واضحٌ آخر.

لا نستخدم التّنقّل العموديّ عندما تكون المساحة الأفقيّة للصّفحة محدودةً، لهذا تحذف العديد من مواقع الويب -بما في ذلك هذه الصّفحة- التّنقّل العموديّ للشّاشات صغيرة الحجم وتستبدلها بمسار التّنقّل (breadcrumbs)، أو بقائمة "الهامبرغر" الشّهيرة (hamburger menu). وتُميّز إرشادات التّصميم أربعة أنواعٍ مختلفةٍ من طرق التّنقّل اعتمادًا على حجم الصّفحة ومحتواها، وهي: القياسيٌّ، والمشروط، والمرئيٌّ الدّائم، والقابلٌ للرّفض.

كيف نستخدم التنقل العمودي

1. يجب تمييز (الصّفحة / العنصر) المحدّد في القائمة، ولا ينبغي تصميمه على نحو مشابهٍ للعنصر القابل للنّقر (وإن كان يتصرّف بالطّريقة نفسها).
2. يجب استخدام العناوين لتجميع العناصر المرتبطة.
3. يجب أن يؤدّي النّقر على أسماء المجموعات إلى توسيع هذه الفئة أو طيّها، عوضًا عن الانتقال لصفحتها الخاصّة.
4. يجب أن تكون أسماء روابط التّنقّل قصيرةً، ويمكن اشتقاقها من عناوين الصّفحات.
5. يجب ترتّيب العناصر وفقًا لما هو أكثر فائدةً لمستخدمي التّطبيق.
6. وجود بياناتٍ هرميةٍ لا يعني وجوب استخدام طريقة عارض الشّجرة (tree view)، في أكثر الحالات تكون طريقة عارض القائمة (list view) أبسط وأكثر فعاليّة.
7. يجب الامتناع عن عرض أكثر من مستويين من التّسلسل الهرميّ في الشّريط الجانبيّ.
8. يمكن أن يكون الشّريط الجانبيّ على الجانب الأيسر أو الأيمن من الصّفحة، ولكن لابدّ من ثباته عبر التّطبيق.
9. يجب أن يتمكّن المستخدمون من الوصول للقائمة بأكملها (كاستخدام التّمرير إلى ما بعد محتويات الصّفحة)، إن كان محتوى الشّريط الجانبيّ أطول من محتوى الصّفحة.
10. يجب استبدال لوحة التّنقّل (navigation panel) باللّوحة المنزلقة (slide-out panel) عند استخدام الشّاشات الصّغيرة، أو استبدالها بمسار التّنقل (breadcrumbs) عند استخدام شاشات سطح المكتب.

الاستخدام الرئيسي

الحالات

يجب أن تكون حالة التّنقّل العموديّ محدّدةً وواضحةً كما هو الحال عند استخدام علامات التّبويب، ويتمّ ذلك بجعل العنصر المحدّد بلونٍ غامقٍ (و-أو) مميّزًا، كما يمكن استخدام حالة المقروء(hover) أيضًا.

التنوع

دليل موجز عن شريط القائمة (Menu Bar Guidelines)

يسمح شريط القائمة للمستخدمين بالتّنقل باستخدام الفئات والفئات الفرعيّة، وهو ثابتٌ لا يتغيّر في التّطبيق، وهو العنصر الموجود في أعلى تطبيقات سطح المكتب -مثل قائمة ملف (File Menu)- ويقع أعلى الصّفحة كذلك في عالم الويب. ويدعم في كلتا الحالتين القوائم المتداخلة (nested menus)، أو العمل كفئات قائمة بذاتها (وتسمّى أيضًا التّجميع في خطّ واحد monoclinegrouping، أو البنية المسطّحة (flat structure)).

متى نستخدم شريط القائمة

يُستخدم شريط القائمة حصريًّا للتّنقّل الأساسيّ (primary navigation)، على عكس التّنقّل العموديّ، أو علامات التّبويب اللّذين يُستخدمان للتّنقّل الثّانويّ أيضًا.

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

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

ملاحظة

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

كيف نستخدم شريط القائمة

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

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

بعض الإرشادات الأخرى المهمّة لشريط القوائم:

1. لا يجب وضع نموذج التّنقّل وفقًا للهيكل التّنظيميّ للوكالة (أو النّموذج البنيويّ للتّطبيق)، بل يجب تنظيمه اعتمادًا على المهامّ، والمعلومات التي يريد المستخدم الوصول المتكرّر إليها.
2. يجب وضع روابط تنقّل للتّخطي للسّماح للمستخدمين الذين يملكون برامج قراءة الشّاشة (screen readers) بتجاوز قوائم التّنقّل الطّويلة.
3. يجب التّفكير في استخدام قائمة ضخمة (mega menu) عند وجود أكثر من ستّة روابط أو عناصر قائمة ضمن قائمة أخرى.
4. يجب استخدام تسع فئات أو أقلّ من فئات المستوى الأعلى.
5. يمكن تحويل أشرطة القوائم إلى قائمة منزلقة (slide-out menu)، أو قائمة هامبرغر (hamburger menu) قابلة للتّوسيع في مواقع وتطبيقات الجوّال.
6. يجب أن تكون عناصر القائمة تفاعليّةً ومرئيّةً بما يكفي لتدعو لفعلٍ ما.
7. يجب أن تكون روابط القائمة كبيرة بما يكفي للنّقر عليها بسهولةٍ، مع تأمين هوامش ومسافة كافية حتى لا ينقر المستخدم على العنصر الخطأ.
8. يجب تفضيل التّناسق على إبهار المستخدم (wow factor)، ويمكن تجاوز المعايير على مسؤوليّة المصمّم الخاصّة.

الاستخدام الرئيسي

الحالات

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

التنوع

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

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

دليل موجز عن الأكورديون (Accordion Guidelines)

الأكورديون عبارة عن حاوياتٍ مكدّسةٍ تحوي عناصر متشعّبةً تتّسع وتنطوي بالنّقرعليها، ويُعدّ عنصر تحكّمٍ لافتًا نظرًا لسماحه بعرض كثيرٍ من الرّوابط في مساحةٍ مضغوطةٍ، لكنه غير مألوفٍ كثيرًا، لذا يجب ألّا نفرط في استخدامه، ويمكن استخدامه للتّنقّل أو للمحتوى -على عكس التّنقل العمودي-، ومن أسمائه الأخرى لوحة التّوسيع (expansion panel)، ومتحكّم "التّوسّع/التّصغير" (expand/collapse control).

متى نستخدم الأكورديون

ورد في كتاب واجهات تصميم الويب Designing Web Interfaces: يُعدّ الأكورديون "جيّد لوحدات المحتوى المتشعبّة، ومع ذلك يجب استخدامه باعتدال، حيث يتمتّع بأسلوبٍ مرئيٍّ قويّ".

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

على الرّغم من أنّ الأكورديون ليس الخيار الأفضل لصفحات سطح المكتب، إلّا أنّه مناسبٌ في الهواتف المحمولة، مثل قائمة التنقّل الخاصّة بالهواتف المحمولة من موقع UX Mastery الموضّحة في الشّكل التالي:

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

يجب استخدام الأكورديون للتّنقّل فقط وفقًا لـأنماط واجهة المستخدم في الحالات التّالية:

1. عندما يكون هناك أكثر من قسمين رئيسيّين في موقع ويب يحتوي كلٌّ منهما على قسمين فرعيين أو أكثر.
2. عندما يكون هناك أقلّ من عشرة أقسامٍ رئيسيّةٍ.
3. عند عرض مستويين فقط في شريط التّنقّل الرّئيسيّ.

أمّا عن استخدام الأكورديون في محتوى الصّفحة، فيقترح نظام تصميم الويب في الأمريكيّ ترْك استخدامه عند عدم وجود محتوىً كثيرٍ، وكذلك عند رغبة المستخدم في رؤية المحتوى كلّه في وقتٍ واحدٍ. ومن الأمثلة الصّحيحة على استخدامه صفحة تعليمات الأسئلة الشّائعة (FAQ help page)، ومع ذلك لا ينبغي استخدامه، إذ كان هناك محتوى كبير فقط، ففكرة عدم محبّة مستخدمي سطح المكتب للصّفحات الطّويلة هي غير صحيحة.

في جميع الحالات يجب تجنّب الأكورديون الأفقيّ (horizontal accordions) -حيث تكون الألواح مكدّسة أفقيًّا- فهو غير مألوف، إذ يكون دائمًا أقلّ قيمةً من أنواع المتحكّمات الأخرى.

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

فيما يلي إرشادات عامّة تنطبق على معظم الحالات:

1. تتوسّع اللوحة (panel) عند النّقر عليها بينما يتمّ تصغير اللّوحات الأخرى، ويجب فتح لوحةٍ واحدةٍ فقط في كلّ مرة.
2. لا تفتح حاويات الأكورديون عند القراءة (hover)، بل يجب استخدام النّقر، أو اللّمس عوضًا عن القراءة.
3. يجب السّماح للمستخدمين بالنّقر فوق أيّ مكانٍ في منطقة الرّأس لتوسيع المحتوى أو تصغيره، ومن الأسهل التّعديل على العنصر الأكبر.
4. يجب البدء بفتح القسم الأوّل ولا يجب إغلاق كل الأقسام افتراضيًّا.
5. يجب تمييز اللّوحة الحاليّة ليتمكّن المستخدم من التّمييز بين رؤوس اللّوحات المفتوحة، ورؤوس اللّوحات المغلقة.
6. عند استخدام اللّوحات المتحركّة، يجب أن تكون الحركة دقيقةً، ولا تدوم أكثر من 250 مللي ثانية.
7. لا يجب المزج بين الأكورديون، وأنواع التّنقّل الأخرى في المستوى نفسه.
8. إذا لم يتسع محتوى القسم عموديًّا في الصّفحة يجب التّمرير داخل اللوحة بدلًا من تمرير عنصر التّحكم بالكامل.

الاستخدام الرئيسي

الحالات

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

التنوع

ينبغي التّقليل من الاختلافات حفاظًا على ثبات المعايير، من الخيارات الشّائعة إضافة الأيقونات، والرّمزان +، و- هما الأشهر، كما يمكن استخدام المثلّثات المدبّبة (Pointed triangles)، أو إشارة الرّتب (chevrons).

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

ملاحظة

الأمثلة المعروضة سابقًا من موقع The Balsamiq متوفّرة للتّنزيل، كما يمكن قراءة التّعليمات عن استخدام Wireframes في تطبيق Balsamiq لتصميم واجهة المستخدم.

ترجمة -وبتصرف- للمقالات:

• Link Guidelines
• Tab Guidelines
• Breadcrumb Guidelines
• Vertical Navigation Guidelines
• Menu Bar Guidelines
• Accordion Guidelines.

من موقع Balsamiq.com.

 اقرأ أيضًا

• المقال التالي: متحكمات واجهة المستخدم وكيفية عرضها: متحكمات الخرج
• المقال السابق: متحكمات واجهة المستخدم وكيفية عرضها: متحكمات الدخل

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

دليل موجز عن الأزرار (Buttons)

يُستخدم الزّر لإجراء عملٍ ما كإرسال بريدٍ إلكترونيٍّ، وقد يكون تصميم الأزرار أمرًا واضحًا لكنّه أعقد ممّا نتخيّل، إذ يجب اتّباع بعض الإرشادات في تصميمها، ويشرح كل من مقال إضافة عناصر تحكم واجهة المستخدم وترتيبها Adding and Arranging UI Controls، ومقال عنصر التحكم في التحرير Editing Controls كيفية إضافة متحكم وآلية تحريره.

متى نستخدم الأزرار

وفقًا لكتاب تصميم الواجهات Designing Interfaces لجينيفر تيدويل (Jenifer Tidwell)، فلابدّ من مقروئيّة ووضوح وسهولة استخدام الأزرار حتّى عندما يتعامل معها أقلّ مستخدمي الحاسوب خبرًة، ويُفضّل استخدامها لإجراء الأعمال المهمّة، فكلما زاد عدد الأزرار التي نضيفها إلى الصّفحة قلّ وضوحها وسهولة استخدامها، لذا يجب اختيارها بحكمةٍ كما يوضّح الشّكل التّالي:

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

كيف تستخدم الأزرار

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

الاستخدام الرئيسي

حالات الزر

التنوع

• أزرار الأيقونات (Icon buttons): هي الأزرار التي تحوي أيقونةً (icon)، أو صورةً (مصاحبةً لــ/بديلةً عن) نصّ الزّر.
• أزرار القائمة المتشعبة (Split Menu buttons): هي الأزرار التي تتفعّل بالضّغط عليها، حيث تعرض قائمةً ثانويّةً من الخيارات ضمن قائمةٍ منسدلةٍ (drop-down menu).

دليل موجز عن مدخل النص (Text Input)

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

متى نستخدم مدخل النص

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

من المهمّ معرفة متى لا نستخدم مدخل النّص، فباتباع إرشادات الاستخدام التي جاء في مقال التّعرف على الذّاكرة والتذكّر في واجهات المستخدم (Memory Recognition and Recall in User Interfaces)، يفضّل استخدامنا للقائمة المنسدلة (dropdown menu) أو متحكّم دخلٍ مقيّدٍ، إذا كنّا نعلم مسبقًا لائحة المدخلات الممكنة الصّحيحة، وذلك لتقليل الأخطاء وتسهيل الإدخال. فمثلًا عند السّؤال عن اسم دولةٍ أو عن الحالة الاجتماعيّة أو طريقة الدّفع، يقترح نظام تصميم الويب الأمريكيّ استخدام مدخل النّصّ عندما "لا يمكنك التنبؤ بإجابة المستخدمين وعند احتمال التنوّع الكبير في إجاباتهم".

كيف نستخدم مدخل النص

1. يجب توفق طول حقل مدخل النّصّ مع طول الدّخل المتوقّع.
2. يجب على حقول النص الإشارة لحالتها سواء كانت مفعّلةً أم غير مفعّلةٍ، فارغةً أو ممتلئةً، صحيحةً أو غير صحيحةٍ، ولها عنوانٌ مساعدٌ واضحٌ.
3. يجب محاذاة عنوان الحقل لسطر الإدخال ومرئيًّا دائمًا.
4. يجب ألا يشغل عنوان الحقل عدّة أسطر.
5. يمكن استخدام نصّ تلميحٍ داخل حقل الإدخال على ألّا يحلّ محلّ عنوان الحقل في النّموذج، ويجب الاختفاء عندما يبدأ المستخدم بالطّباعة كما يشرح مقال عناصر تحكّم النماذج Form controls
6. يجب تجنّب تقسيم الأعداد إلى أجزاء منفصلةٍ (كأرقام الهاتف، أو رقم الضّمان الاجتماعيّ، أو بطاقة الائتمان) في حقول إدخالٍ منفصلةٍ (يمكن استخدام بدائل، مثل: أقنعة الإدخال " Input masks"، أو المدخلات المرنة " flexible inputs").
7. يستخدم مربّع نصّ متعدّد الأسطر (text area) في حال النّصوص الأطول (ويسمى حقل إدخال متعدّد الأسطر) عوضًا عن متحكّمٍ وحيد السّطر.

الاستخدام العادي

الحالات

التنوع

دليل موجز عن القائمة المنسدلة (Dropdown Menu) ومربع التحرير (Combo Box)

هو متحكّم له عدّة أسماءٍ، حيث يعطي لائحةً من العناصر لنختار منها، وهو مألوف ومتعدّد الاستخدامات، حيث يستخدم يوميٍّا سواء كان اسمه قائمةً منسدلةً، أو مربّع تحريرٍ، أو قائمةً منسحبةً (Pull-down menu)، أو أداة اختيارٍ (Picker)، أو قائمة اختيارٍ (Select menu).

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

متى نستخدم القائمة المنسدلة

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

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

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

كيف نستخدم القائمة المنسدلة؟

1. يجب أن يكون ترتيب عناصر القائمة منطقيًّا (كأن يكون تسلسليّا عند ذكر التّواريخ والأرقام، وأبجديًّا عند ذكر البلدان).
2. يجب أن يكون العنصر الافتراضيّ ذا معنىً (قد يؤدّي التّحديد المسبق لعنصرٍ إلى نتائج سيئةٍ، إذ لا يمكننا التّحقق مما إذا كان المستخدم قد اختاره عمدًا أم لا، لذلك يجب جعل الخيار الافتراضيّ هو عدم تحديد أيّ عنصرٍ).
3. يجب أن تكون عناصر القائمة مرتبطةً لأن القوائم الأطول تحتاج وقتًا أطول للمرور عليها، لذا يجب تجنّب إضافة عناصر قد لا يختارها المستخدم.
4. في القائمة المنسدلة يجب تجنّب وضع عناصر تتغيّر بناءً على دخلٍ في قائمةٍ أخرى في الصّفحة، إذ لا يفهم المستخدمون غالبًا كيف يؤثّر اختيار عنصرٍ في تغيير عنصرٍ آخر.
5. يجب السّماح للمستخدمين بالضّغط على أيّ مكانٍ في عنصر التّحكم لفتحه، لا من سهم القائمة فقط.
6. يجب استخدام تجميع العناصر، أو تصنيفها في القائمة عندما يكون ذلك منطقيًّا، ويجب أن تكون عناوين المجموعات غير قابلة للتّحديد.

الاستخدام الرئيسي

حالات القائمة المنسدلة

التنوع

دليل موجز عن زر الانتقاء (Radio Button) ومربع الانتقاء (Checkbox)

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

متى نستخدم زر الانتقاء ومربع الانتقاء

كما هو الحال عند استخدام القائمة المنسدلة، فزرّ الانتقاء ومربع الانتقاء مناسبان عندما يكون هناك مجال من الخيارات المتاحة؛ أمّا الفرق بينهما، فيكمُن في كون زرّ الانتقاء مخصص للحالات التي يتوجّب فيها استخدام خيارٍ واحد فقط (الحالة الاجتماعية، والنوع...)؛ بينما يدعم مربّع الانتقاء عدم الانتقاء، أو الانتقاء المتعدّد (كمثال النّشاطات المفضّلة، أو الاهتمامات).

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

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

كيف نستخدم زر الانتقاء ومربع الانتقاء

دليل موجز لكلاهما

1. يجب استخدام عنوان لوصف كل مجموعة خيارات ما لم يكن المربع لخيار واحد.
2. من الأسهل قراءة وفهم الخيارات العموديّة، لكن يمكن استخدام المحاذاة المستطيلة، أو الأفقيّة عند طباعة الخيارات إن حسّن ذلك تخطيط الصّفحة.
3. لابد من عدم تأدية هذه الخيارات لعملٍ ما، بل يجب استخدام زر عوضًا عنها.
4. يجب أن يتمكّن المستخدمون من الضّغط على (الزّر/ مربع الانتقاء) أو عنوانه لتفعيله.
5. يجب مراعاة اعدادات الانتقاء الافتراضيّ (تجنّب استخدام الأنماط المظلمة).

دليل موجز عن أزرار الانتقاء

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

دليل موجز عن مربعات الانتقاء

يجب تجنّب استخدام لغة سلبيّة في العناوين، فقد تكون غير منطقيّة، مثل: (لا تُسجّل).

الاستخدام الرئيسي

الحالات

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

التنوع

يمكن استخدام مجموعة مربّعات انتقاء قابلة للتّمرير (scrolling checkbox) عندما لا يكون عدد العناصر معروفًا، أو يمكن للمستخدم تخصيص مجموعة مربّعات الانتقاء عندما تكون المساحة محدودة.

قد تبدو أزرار الانتقاء ومربعات الانتقاء مختلفةً على الهاتف المحمول لتحسين اللّمس، عند استخدام نظام iOS على سبيل المثال يمكن استخدام علامات الانتقاء (check marks) للخيارات غير المتقاطعة عوضًا عن أزرار الانتقاء ويمكن استبدال مربع الانتقاء بمفتاح التبديل (toggle switch) عوضًا عنه.

ترجمة -وبتصرّف- للمقالات:

• Text Input Guidelines
• Button Guidelines
• Dropdown Menu (Combo Box) Guidelines Radio Button and Checkbox Guidelines

من موقع Balsamiq.com

اقرأ أيضا

• المقال التالي: متحكمات واجهة المستخدم -متحكمات التنقل-
• المقال السابق: مقدمة في تصميم واجهة المستخدم UI ومتحكماتها