ما هي أنماط تصميم واجهات المستخدم؟

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

جدول المحتويات:

ما هي أنماط تصميم واجهات المستخدم؟

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

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

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

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

ما أهمية أنماط التصميم؟

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

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

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

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

أولًا: أنماط الدخل والخرج

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

1. مقياس قوة كلمة السر Password Strength Meter

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

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

2. رموز التحقّق

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

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

3. اختصارات لوحة المفاتيح

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

عند تطبيق هذا النمط، خُذ بعين الاعتبار عدم تداخل الاختصارات التي تقدّمها للمستخدم مع اختصارات نظام التشغيل، مثلًا اختصار Alt + Tab أو Ctrl + V، حاول أيضًا تضمين بعض الاختصارات التي يمكن تذكّرها بسهولة ولا تحتاج لوقت طويل لحفظها، إذ إنّ معظمنا يعلم أنّ Ctrl + S اختصار لحفظ الملف، لأن الـ S تدلّ على أول حرف من كلمة حفظ Save.

4. السحب والإفلات

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

ثانيًا: أنماط هيكلة المحتوى

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

1. قائمة المفضلة

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

2. الصور المصغرة

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

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

3. الإشعارات

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

استثنِ من المعلومات ما هو مرئي للمستخدم على شاشته مثل محادثة جارية، أو معلومات تقنية لا تهم المستخدم حقًّا ولن يستفيد بمعرفتها شيئًا مثل: مزامنة البيانات أو تحديث الملفات المؤقتة وغيرها.

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

4. تعديل العرض

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

ثالثًا: أنماط التواصل الاجتماعي

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

1. الإنجازات

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

2. لوحة النتائج

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

3. المتابعة

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

4. الدردشة الآنيّة (IM)

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

رابعًا: أنماط استعراض المحتوى والتنقل

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

1. توزيع الصفحات

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

2. التصفح المتواصل

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

3. السحب للأعلى للتحديث Pull to Refresh

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

4. سحابة الوسوم

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

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

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

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

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

تم النشر في: أبريل 2022
تحت تصنيف: تصميم UI/UX | تصميم واجهة المستخدم