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

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

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

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

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

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

ما الذي يجعل الإيماءة جيدة

إذن ، ما هي الإيماءات؟

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

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

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

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

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

فوائد تقنية الإيماءات

يرجع الاستخدام الواسع للواجهات الإيمائية إلى الفوائد العديدة التي تأتي معها. ثلاث من أهم فوائد الإيماءات هي واجهات أكثر نظافة وسهولة في الاستخدام وإكمال المهام المحسّن.

1. واجهات أنظف

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

2. سهولة الاستخدام

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

3. تحسين إنجاز المهمة

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

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

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

1. إيماءات التنقل (للتنقل)
2. إيماءات العمل (لاتخاذ إجراء)
3. إيماءات التحويل (لمعالجة المحتوى)

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

صنبور

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

انقر نقرًا مزدوجًا

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

انتقد

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

انتقاد متعدد الأصابع

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

يجر

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

قذف

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

ضغطة طويلة

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

قرصة

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

قرصة مفتوحة أو سبريد

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

دوران

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

تصميم الإيماءات 101

استخدم ما يعرفه الناس

كانت الإيماءات موجودة منذ فترة ، لذلك توجد إرشادات عامة لمعظم الإيماءات.

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

فيما يلي بعض الإرشادات المفيدة حول الإيماءات والحركة لواجهات المنتج الشائعة.

• إرشادات Google Gesture
• إرشادات Microsoft Gesture
• إرشادات إيماءات Apple
• إرشادات إيماءات Android

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

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

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

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

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

فكر خارج الشاشة

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

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

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

الإيماءات وإمكانية الوصول

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

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

لا تنسى تجربة المستخدم

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

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

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

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

صقل إعداد المستخدم

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

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

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

احتضان مستقبل واجهات الإيماءات

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

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

هل لديك أسئلة أو ترغب في ترقية UX و UI لمنتجاتك؟ يسعدنا التحدث. ببساطة تواصل.