عزز تجربة المستخدم الخاصة بك مع مبادئ تصميم التفاعل الناجح هذه

نشرت: 2022-03-11

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

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

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

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

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

يساهم اتباع مبادئ تصميم التفاعل بشكل كبير في تصميم تفاعل كبير ، والذي بدوره سيساهم في التجربة.

تصميم تفاعل تطبيقات الهاتف المحمول وتجربة المستخدم
تصميم تفاعل تطبيقات الهاتف المحمول (بواسطة آدم كالين)

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

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

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

مبادئ تصميم التفاعل وأفضل الممارسات

يندرج تصميم التفاعل ضمن تخصص التفاعل بين الإنسان والحاسوب (HCI) ، "مجال دراسة متعدد التخصصات يركز على تصميم تكنولوجيا الكمبيوتر ، وعلى وجه الخصوص ، التفاعل بين البشر (المستخدمين) وأجهزة الكمبيوتر." - على النحو المحدد في التفاعل مؤسسة التصميم.

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

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

دعنا نتعمق في بعض أهم المبادئ (ليست قائمة شاملة بأي وسيلة):

الاكتشاف

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

وصفت Linkedin و Facebook UI أفضل ممارسات تصميم تفاعل الأيقونات
للقضاء على التخمين ، يقوم LinkedIn و NPR و Facebook بتسمية أيقوناتهم.

الدلالات

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

تحدد المصاريف ما هي الإجراءات الممكنة. تحدد الدلالات كيف يكتشف الناس هذه الاحتمالات: الدلائل هي علامات ، وإشارات محسوسة لما يمكن فعله. تعتبر الدلائل ذات أهمية أكبر بكثير للمصممين من التكاليف. —دون نورمان (نورمان ، 2013)

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

ردود الفعل

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

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

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

النماذج المفاهيمية والنماذج العقلية

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

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

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

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

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

أراد مصممو UX بدوام كامل في الولايات المتحدة

التعيينات

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

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

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

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

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

أمثلة مبدأ تصميم تفاعل رسم الخرائط الطبيعية مع التشبيهات الفيزيائية
رسم الخرائط للقياسات المادية المألوفة: المقابض وعناصر التحكم في المنزلق (بواسطة Anton Kudin)

القيود

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

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

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

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

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

الاتساق والمعايير والاستدلال

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

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

قائمة مشاركة تطبيق Apple News iPad هي تصميم تفاعلي رائع
تعد قائمة "المشاركة" في جميع تطبيقات iPad نموذجًا للاتساق. انها تعمل دائما بنفس الطريقة.

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

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

يمكن أن يكون المعيار عبارة عن مسار تنقل (جهاز توجيه وتنقل يمكن التعرف عليه على الفور) ، أو قائمة تنقل عامة عبر الجزء العلوي من الصفحة كما هو الحال في موقع BCC.

الأنماط وقابلية التعلم

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

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

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

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

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

التسلسل الهرمي والتأكيد المرئي

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

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

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

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

قانون فيتس

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

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

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

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

مخطط جوتنبرج ، تخطيطات نمط Z و F

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

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

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

مثال على قراءة نمط Z لتصميم التفاعل
يقوم موقع iZettle بتحسين المسح البصري باستخدام تصميم Z-pattern

F يشير إلى كيفية قراءة المستخدمين للمحتوى. تم تعميم نمط F من خلال دراسة NNGroup لتتبع العين والتي سجلت أكثر من 200 مستخدم يقرؤون محتوى على الويب. وجدت أن أنماط مسح الأشخاص كانت متسقة إلى حد كبير عبر العديد من أنواع المواقع المختلفة.

تدرس Eyetracking مسح نمط F وقراءة المحتوى على مواقع الويب أحد مبادئ تصميم التفاعل العديدة
تُظهر دراسات Eyetracking خريطة حرارية بنمط F عند مسح الصفحات ضوئيًا (من NNGroup)

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

الاعتراف بدلا من التذكر

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

يمكن التعرف على الرموز الموجودة في واجهة المستخدم على الفور - تصميم تفاعلي رائع
يمكن التعرف على الرموز القياسية على الفور

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

التصميم الجمالي والبسيط

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

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

التصميم الجمالي والبسيط لموقع Apple ، مبدأ تصميم UX والتفاعل
لطالما كانت شركة Apple مدافعة عن الجماليات الرائعة والتصميم البسيط والبسيط.

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

قال مايكل أنجلو عن عمله: "رأيت الملاك على الرخام ونحتًا حتى أطلق سراحه".

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

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

منع الخطأ

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

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

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

خطأ مضحك

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

مستقبل تصميم التفاعل

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

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

Google Project Soli واجهة تفاعلية للتحكم في تصميم واجهة تفاعلية
التحكم في الواجهة الإيمائية Project Soli من Google باستخدام الأصابع (يوضح شريط التمرير التأثير)

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

• • •

مزيد من القراءة على مدونة Toptal Design:

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