كيف ثورة الشاشة التي تعمل باللمس هو تأثير UX
شهدت مقدمة Windows 8 إصلاحًا هائلًا لواجهة مستخدم Windows بما يتماشى مع واجهة Windows Phone لكي تكون أكثر سهولة للأشخاص الذين يستخدمون الشاشات التي تعمل باللمس ، وقد قامت Apple بتكييف OSX بمرور الوقت مع تبسيط الميزات التي أصبحت مشتركة بشكل متزايد عبر أنظمة تشغيل الأجهزة المحمولة وسطح المكتب. على الرغم من أننا لم نتمكن بعد من رؤية جهاز Mac الذي يعمل باللمس ، إلا أنه من الواضح أن ثورة الشاشة التي تعمل باللمس تلوح في الأفق أمام المستخدمين الذين يقضون وقتًا أطول على أجهزة الجوال لديهم أكثر من أجهزة الكمبيوتر المنزلية.
ومع وضع ذلك في الاعتبار ونسبة متزايدة من التصفح الذي يحدث على الهواتف الذكية والأجهزة اللوحية ، يجب على مواقع الويب أن تقرر كيف ستتكيف مع الأشخاص الذين يدخلون إلى المحتوى الخاص بهم بدون الماوس ولوحة المفاتيح. في حين أن الاستجابة الافتراضية لهذا الأمر كانت غالبًا "مجرد إنشاء واجهة جوال منفصلة!" ، وهو حل نجح بشكل جيد في الماضي على الأجهزة المحمولة الصغيرة مثل الهواتف ، فهناك نطاق صغير جدًا للمجموعة المتوسطة التي يشغلها الهاتف الأكبر و يعرض اللوحي.
ستلقي هذه المقالة نظرة على عدد من المواقع التي انخفضت كل من تصاميم الموقع غير التقليدية والمعيارية لتصبح أكثر ملاءمة لللمس.
مواقع الويب المركزة مقابل مواقع الويب المتجاوبة
قامت العديد من مواقع الويب بإنشاء مواقع أو تطبيقات فرعية خاصة لمستخدمي الشاشة التي تعمل باللمس ، للسماح لهم بالتركيز على نوع واحد من المستخدمين في كل مرة. وتتمثل إحدى المشكلات في أنه نظرًا لأن مواقع الويب منفصلة ، فإنها تعتمد على إعادة توجيه عناوين URL والتي غالبًا ما تؤدي إلى مشكلات مثل إرسال المستخدم إلى موقع خاطئ من الروابط ، أو إعادة توجيه ضعيفة نتيجة الحاجة إلى إعادة التوجيه إلى الصفحات المنسقة لمستخدمي الجوّال.
لكن المشكلة الأكبر في مواقع الويب المنفصلة لمستخدمي الهواتف المحمولة هي أن إصدار الجوال غالباً ما يفتقر إلى الميزات أو المعلومات التي يتلقاها مستخدم سطح المكتب ؛ الميزات والواجهات في كثير من الأحيان مبسطة ، وأزرار تتضخم وخيارات خفضت. يمكن حل هذا من خلال استخدام تصميم "متجاوب". تم تصميم موقع ويب سريع الاستجابة بحيث يمكن مشاهدته بسهولة على كلا النظامين الأساسيين بدون فقد الجودة في أي منهما. هذا أيضا له فائدة أن موقع واحد فقط يحتاج إلى تصميم ، بدلا من اثنين ، ولكن هذا غالبا ما يؤدي إلى تنازلات لكلا المنصتين.
اختلافات التصميم الأساسية
هناك اختلافات واضحة بين شاشة اللمس وسطح المكتب التي تحتاج إلى التفكير بها عند إنشاء موقع الويب الخاص بك. على الشاشة التي تعمل باللمس يمكنك تمرير الصفحة لأعلى للتمرير لأسفل ، ولكن على سطح المكتب ، يمكنك تحريك عجلة التمرير لأسفل. حاولت Apple تصحيح هذا من خلال دمج تقنيات واجهة اللمس في لوحات التعقب على كل من أجهزة الكمبيوتر المحمول وأجهزة كمبيوتر سطح المكتب التي تعمل بنظام التشغيل Mac ، ومع ذلك فإن مستخدمي الكمبيوتر الشخصي أو حتى مستخدمي Mac الذين يستخدمون عجلات التمرير أو أشرطة التمرير التقليدية للتمرير عبر صفحات الويب يكونون في وضع غير موات.
يجب أن تكون الأزرار أكبر بكثير على الأجهزة المحمولة ، نظرًا لأن التنصت لا يقترب من الدقة مثل النقر بالماوس ، فلا يوجد شيء أكثر إثارة للغضب من محاولة النقر على رابط للصفحة التالية وإرساله مرة أخرى عن طريق الخطأ إلى صفحة أو على إعلان بدلاً من ذلك. يعني عدم وجود مؤشر أيضًا أنه لا يمكن أن يكون لديك حالات تحويم لشرح موضع الارتباط ، أو معنى الكلمة ، أو حتى ما يمكن النقر عليه.
هناك أيضًا فرق بين الدقة على مدخلات الهاتف المحمول نظرًا لأن شاشات اللمس يمكن أن تحتوي على مدخلات مقاومة أو سعوية ذات حساسيات متفاوتة ومن ثم يمكن فقد الدقة على شاشات اللمس المقاومة. علاوة على ذلك ، يجب أن تتضمن التصاميم قرارين مختلفين بشكل كبير للأجهزة المحمولة التي لها اتجاهين.
اتجاه الشاشة ونسبة العرض إلى الارتفاع
بفضل الدقة المتعددة التي لا تتعدى أحجام الشاشات العادية ، لا يمكنك التفكير في ما يتعلق بدقات الشاشة القياسية والحركة الرأسية. أنتجت التغيرات السريعة في سوق التكنولوجيا أحجام شاشات تختلف عن الموديل والشركة المصنعة ومع كل الشائعات حول ما يسمى بالساعات الذكية ، قد نبدأ في رؤية شاشات لم تعد مقيدة بأربعة حدود. تضيف الشاشات المتنقلة مزيدًا من التعقيد بسبب إمكانية مشاهدتها في كل من الوضع الرأسي والأفقي من خلال التدوير.
الإجابة هي التخطيطات السائلة التي ضبط النفس لأي قرار ويمكن أن تتكيف مع كل من العرض الرأسي والأفقي. تستخدم بعض مواقع الويب تخطيطًا سائلاً يغيّر شكل الموقع بشكل جذري من أجل تحسين سهولة التحكم واستخدام الإمكانية الكاملة للشاشة استنادًا إلى اتجاهه.
في حين تم تصميم الفئران خصيصًا بعجلات قابلة للتمرير لسهولة التمرير العمودي ، فإن العديد من المستخدمين يهاجرون إلى لوحات اللمس والشاشات التي تعمل باللمس ، وبما أن أبل احتضنت الشكل الأكثر ابتكارًا للتمرير باللمس الذي يشبه سحب صفحة بدلاً من التمرير ، فإن الفكرة الأكثر إبداعًا قد لا يكون التمرير الأفقي غير وارد. تستخدم معظم التطبيقات التمرير الأفقي كأداة ، وأعظم نجاح في التمرير الأفقي هو ، لذلك لماذا لا يتم تنفيذه في واجهة المستخدم على الويب؟ تحتوي العديد من مواقع الصفحات الفردية على محور أفقي فقط ، ولكن غالباً ما تضطر إلى استخدام الأزرار من أجل التحريض على التمرير حيث أن المستخدمين قد لا يفهمون التنسيق غير القياسي.
قد يكون التمرير الأفقي مماثلاً للتمرير الرأسي في شروط التصميم ، ولكن استخدام كلاهما قد يفتح إمكانية التمرير المزدوج المحور ، والذي قد لا يعمل في المتصفح. يحب العديد من المستخدمين أن يكونوا متصلين بمحور ، من الواضح أن هذا هو عادةً المحور السيني ، وهو ثابت ، لذا إذا ضاع المستخدمون على الصفحة ، يمكنهم فقط التمرير لأعلى ، والعودة إلى الملاحة الرئيسية. على المواقع ذات المحور المزدوج ، قد لا يكون الأمر بهذه البساطة ، لذا قد تحتاج الملاحة إلى أن تكون لزجة ، باستخدام شريط نمط HUD.
إذن ما هي واجهة المستخدم التي يجب أن يستخدمها موقع الويب الخاص بك؟
من الواضح أن كل واجهة مستخدم لا تناسب كل نوع من أنواع مواقع الويب ، لذا اسأل نفسك بعض الأسئلة الأساسية: من هو جمهورك المستهدف؟ ما الذي تحاول أن تبيعه؟ ما هو الانطباع الذي ترغب في تقديمه؟ من المرجح أن يستخدم الأشخاص الأصغر سنًا الشاشات التي تعمل باللمس أكثر من الديموغرافيات الأقدم الذين سيستخدمون سطح المكتب على الأرجح ، ولكنهم قد يحتاجون إلى أزرار أكبر وواجهة مستخدم أكثر وضوحًا. ليس هناك جدوى من إنشاء واجهة المستخدم الأكثر ابتكارًا التي يمكن تخيلها إذا لم يتمكن أحد من فهم كيفية استخدامها ، لذلك تذكر دائمًا إنشاء واجهة مستخدم يمكن للمستخدم الاطلاع عليها والتعرف على كيفية استخدامها على الفور.
القائمة نصف القطرية
القائمة الشعاعية ، والمعروفة أيضًا بقائمة الدائرية ، هي قائمة سياق دائري تستخدم سياقًا متعدد الاتجاهات بدلاً من الارتفاع أو العرض كأداة تحديد.
هذا هو شكل رائع من التصميم البديهي الذي يمنع المستخدمين من الضياع في عشرات القوائم الفرعية. ميزة أخرى هي أن مستخدم الشاشة التي تعمل باللمس لديه تحكم أفضل في القوائم المنسدلة العادية نظرًا لأن التحكم في التوجيه أكثر دقة من النقر. إن استخدام القوائم الشعاعية في النماذج والمواقع الإلكترونية يمكن أن يعزز بشكل كبير تجربة مستخدمي شاشة اللمس على الموقع ، ويمتد إلى الإبهام مثل تلك المستخدمة في وحدات التحكم في الألعاب ، وغالبًا ما تستخدم القوائم الشعاعية حيث أنها تسمح بنقل الألعاب بسهولة إلى الكمبيوتر الشخصي. بما أن مستخدمي أجهزة سطح المكتب لا يخسرون ذلك ، فستبقى القوائم القطعية قادرة على تبسيط القوائم الطويلة في فئات بسيطة تزيد من سهولة الاستخدام أو الإنتاجية على موقع الويب.
القوائم الشعاعية هي طريقة رائعة لعرض معلومات حساسة للسياق ، أحد الأمثلة على ذلك هو النقر على صورة لطبق على موقع طعام وإعطائه خيار إعادة الربط أو رابط الوصفة أو قائمة المكونات أو حفظ الصورة. ومع ذلك ، يجب أن تكون حريصًا على أن تظل القائمة سهلة الوصول وبسيطة ، وإلا يمكنك بسهولة إرباك المستخدم خاصة عند دمج الرموز والكلمات في نفس القائمة الشعاعية. من السهل جدًا استخدام القوائم الشعاعية عندما تكون ثابتة بدلاً من ديناميكية لأن هذا يمكن أن يؤدي إلى صعوبة في اختيار الكائن كما هو الحال في مواقع مثل فونج ، في هذه الحالة خاصةً عند استخدام الماوس كتتبع المؤشر يجعلها غير بديهية بشكل خاص.
Skeuomorphism
يحاكي تصميم Skeuomorphic مظهر ووظيفة كائن يومي من أجل إنشاء واجهة مستخدم بديهية ، وهو أمر تم إخراجه من رواج ، خاصة منذ استقالة سكوت فورستال من شركة أبل والسير جوني إيف التصميم المستحوذ على نظام iOS ومن المحتمل OS X في مستقبل. كان Skeuomorphism جزءًا كبيرًا من دفع Apple نحو تصميم أكثر سهولة ، مؤخرًا مع جهات الاتصال على Mac التي تم تصميمها كدفتر عناوين فعلي ، أو Newsstand و iBooks على iOS عبارة عن أرفف كتب فعلية. هذا التصميم هو الذي يستفيد بشكل أكبر من مستخدمي الواجهة اللمسية ، حيث أننا لا نتفاعل مع العالم من حولنا بمؤشر.
تضيف الألفة إلى الاستخدام البديهي عند استخدام أي واجهة مستخدم ، وهذا هو الهدف من ممارسة رياضة التخيل ، لتحقيق بُعد إضافي من الإلمام من خلال توحيد القوى مع الأشياء الحقيقية بحيث يعرف المستخدم على الفور كيفية التفاعل معها. ويعني تصميم skeuomorphic الناجح أنه بمجرد إلقاء نظرة سريعة على صفحة الويب ، ستعرف ما هو الموضوع / الصفحة المستخدمة ، مما يجعل أدوات التلميح بالماوس وميزات الارتباط قديمة.
الاتصال بواجهة المستخدم
هذا هو مزيج من كل ما سبق حيث تشكل واجهة المستخدم بأكملها قرصًا بسيطًا ؛ يشبه التصميم قائمة نصف قطرية ، ولكن بدلاً من أن يتم تحديدها في المنتصف ، باختيار من هناك ، يدور القرص إلى نقطة اختيار واحدة. هذا فعال للغاية في حالات مثل الموسيقى حيث يتم استخدام المخططات غالبًا لخلط الصوت وحجم التحكم. في حالة التسمية صافي SHSK'H يستخدمون نوعًا معدلاً من UI للاتصال لتحديد المسار الذي تريد تشغيله.
الحركة الحد الأدنى
Minimalism هو المكان الذي يتم فيه تجريد الموقع الإلكتروني إلى عناصره الأساسية العارية. يعد هذا أمرًا رائعًا لمستخدمي الجوّال نظرًا لأنه يقلل من أوقات التحميل واستخدام البيانات بالإضافة إلى السماح للمستخدم بالوصول إلى جميع المعلومات الضرورية في واجهة واضحة يسهل استخدامها بالنسبة إلى درجات الدقة الأصغر. لقد ذهب البسيط الحالي إلى أبعد من تجريد المواقع إلى الأساسيات المجردة ، وشكل نمطًا جديدًا يُعرف بالتصميم المسطح. يتوقف هذا على الاعتقاد بأن الحدس لم يعد ضروريًا في التصميم نظرًا لأن الواجهات أصبحت استخدامًا هامًا في هذا التصميم ، وأصبح هذا التصميم جزءًا مهمًا من الحياة ، بحيث يمكن للتصميم أن يتخطى إبلاغ المستخدمين بما يجب عليهم فعله ، ويمكن أن تكون واجهة المستخدم في النهاية أداة ، بدلاً من مضاعفة مرشد. منذ فترة طويلة يتميز التصميم المسطح باستخدام ألوان كتلة جريئة ، ولكن مع إدخال iOS7 ، اتخذت التدرجات مكانها في عالم التصميم المسطح بلا حدود ، واستخراج الأناقة من المتعجرف.
أخيرًا ، سأقوم بإنهاء هذه المقالة بموقع يعمل الأشياء بشكل مختلف قليلاً. تيبو هو مطور إبداعي قام بتصميم مصمم مواقع ويب خاص بمحفظة الأوراق المالية يعرف باسم Pikibox. يتميز موقع الويب بأنه يتسم بلمسة ودية للغاية ولكن دون إعاقة الوصول إلى مستخدمي سطح المكتب ، على أجهزة شاشة تعمل باللمس أصغر ولكن يتم إرسال المستخدم إلى إعادة توجيه مركزة مع واجهة المحمول.
يعمل التصميم البسيط بشكل رائع في عرض مجموعته بالكامل بطريقة احترافية مع الاحتفاظ بمتعة ، مظهر جديد بديهي للغاية. بالطبع ، جزء كبير من التصميم هو في يد المستخدم ، والقدرة على تغيير موقع الملاحة وضبط كيفية استخدامه مكانيا ، والتي يقول البعض لا تشكل بالضبط اختيار التصميم. تأتي نسخة سطح المكتب بأربعة أنماط ، وأدعوك إلى اللعب معهم ، واستخلاص استنتاجاتك الخاصة حول ما إذا كان هذا ببساطة غير حاسم أو مبدعًا بشكل كبير.
ما التنازلات التي قدمتها كنتيجة لشاشات تعمل باللمس؟ انها دولة تحوم عن شيء من الماضي؟ اسمحوا لنا أن نعرف في التعليقات.
صورة مميزة / صورة مصغرة ، الصورة التي تعمل باللمس عبر Shutterstock.