البساطة ليست سهلة: التصميم المسطّح وأثره في تصميم واجهات المستخدم

حين صارت البساطة هي القاعدة

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

وللتوقيت دلالته. ففي عام 2020 أسهم فيروس كورونا في زيادة المنافسة بين المنتجات والخدمات الرقمية زيادةً كبيرة. وفي سوق كهذه يتوقف نجاح المنتج الرقمي أولًا على تصميم يلفت الانتباه، ويسهل استخدامه، ويساعد الناس على فهم ما تقدمه الخدمة. دفع هذا الضغط الصناعة نحو اتجاهات تصميمية منسجمة مع المستخدم وقائمة على البساطة، وأشهرها التصميم المسطّح (Flat Design). وقد جعلته مايكروسوفت مألوفًا حين أدخلته في نظام Windows 8، وصار في عام 2019 أكثر الاتجاهات التصميمية استخدامًا (Cousins, 2019).

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

سؤال البحث

تسأل الورقة: كيف يؤثر التصميم المسطّح المبسَّط في تصميم واجهات المستخدم (UI)؟ وتجيب عن ذلك بمراجعة أدبيات التصميم ثم بالنظر في عدد من الواجهات الحقيقية.

كيف أُجريت الدراسة

هذه ورقة مراجعة. تجمع ما كُتب عن التصميم المسطّح، والتصميم المحاكي للواقع (Skeuomorphism)، والتقليلية، و«التصميم المادي» (Material Design)، وتصميم الواجهات، والوظيفية في التصميم. ثم تطبّق هذه الأفكار على ثلاثة مواقع تركية رائجة اختيرت من قائمة أكثر المواقع زيارةً في تركيا: موقع الأخبار حرّيت (Hürriyet)، وموقع الإعلانات والتجارة الإلكترونية صاحبندن (Sahibinden)، وموقع التجارة الإلكترونية هبسي بورادا (Hepsiburada).

ما التصميم المسطّح، ومن أين جاء؟

أسلوب ثنائي الأبعاد

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

أقدم مما يبدو

تردّ الورقة التصميم المسطّح إلى ثلاث حركات فنية: الأسلوب السويسري، والباوهاوس، والحداثة. وأقواها أثرًا الأسلوب السويسري الذي قاده يوزف مولر-بروكمان وأرمين هوفمان من مدرسة بازل للتصميم. قامت قيمه الأساسية على البساطة والوضوح والموضوعية، وأدخل الخطوط غير المذيّلة (Sans-Serif) والشبكات والتخطيطات غير المتناظرة. وفي الخاتمة يؤكد الكاتب أن هذه الأفكار مستخدمة منذ عشرينيات القرن الماضي باسم «الأسلوب السويسري»، فالتصميم المسطّح ليس صيحة جديدة ولا صيحة خالدة.

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

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

ليس هو التقليلية

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

التصميم المسطّح 2.0

لم يبقَ التصميم المسطّح على حاله، بل تطور إلى أسلوب «شبه مسطّح» يُعرف أيضًا بـ Flat 2.0، يعيد بعض اللمسات الواقعية مثل الظلال الخفيفة. واستنادًا إلى تحليل مجموعة نيلسن نورمان (Moran, 2015) تذكر الورقة أن هذه النسخة المحدَّثة أفضل لتجربة المستخدم، إذ تحافظ على البساطة البصرية دون التضحية بالمعنى. كما يتيح الأسلوب شبه المسطّح للمصمم إضافة اهتمام بصري وتدرجات لونية ولمسات دقيقة أخرى. وقد بنت آبل ومايكروسوفت وغوغل أنظمة تصميم نشأت من التصميم المسطّح؛ ومنها «التصميم المادي» الذي أطلقته غوغل لنظام أندرويد، ويضيف إيماءات وحركة طبيعية تحاكي الأشياء الحقيقية بهدف تخفيف العبء الذهني وجعل الواجهات أكثر قابلية للتوقع.

لمن يناسب؟

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

لماذا انتشر التصميم المسطّح؟

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

وللأدوات دورها أيضًا؛ فبدل إضافة الصور وصناعة الحركات يدويًا صار بالإمكان بناء جزء كبير من الموقع بالبرمجة. ومن هنا تصل الورقة إلى فكرة أوسع من الوظيفية في التصميم، تمتد جذورها إلى المعماري الروماني فيتروفيوس ومبدأ «المنفعة» (Utilitas): يُحكم على التصميم بالحاجة والوظيفة اللتين يخدمهما. ومن المعايير المفيدة هنا «هرم احتياجات التصميم» (Braunstein, 2017) الذي يبدأ بالوظيفة والموثوقية وقابلية الاستخدام قبل أن يصل إلى الإتقان والإبداع.

ما الذي يتطلبه تصميم الواجهات الجيد؟

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

ثلاثة مواقع تركية بعين التصميم المسطّح

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

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

ماذا يعني هذا للمصممين وفرق المنتجات؟

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

حدود الدراسة

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

خلاصة

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

عن الدراسة الأصلية

Qadah, W. (2021). Flat Tasarım Yaklaşımını Kullanıcı Ara Yüzü Tasarımında Üzerinden İncelenmesi [دراسة نهج التصميم المسطّح من خلال تصميم واجهات المستخدم]. جامعة إسطنبول آريل، معهد الدراسات العليا، برنامج الكفاءة في الفن. متاحة على ResearchGate.