البحث في الموقع

أتاح لي هاتفي الأول (الذي اشتريته عام 1998!) القليل من المميزات؛ كان يمكنني إجراء المكالمات، وإرسال الرسائل، ولعب الثعبان. هذا النوع من التفاعلات كان محكومًا كليًا من قِبل المُصنِّع؛ لكن مع قدوم الهواتف الذكية، الشاشات اللمسية، ومتاجر التطبيقات، صارت الفرص أمام المصممين لا حصر لها؛ وتعيّن علينا أن نُكيّف أنفسنا مع الاختراعات التي لا تزال حديثة نسبيًّا. مرحبًا بكم في الجزء الثاني من سلسلة تصميم الهواتف: تصميم الإجراءات التفاعلية. إليك الجزء الأول في حال كنت انضممت إلينا في منتصف السلسلة التصميم للهواتف: هندسة المعلومات، يوضح الجزء الأول التحديات التي يواجهها من يقوم بالتصميم للهواتف، يعالج بصفة أساسية موضوع سياق الهواتف المحمولة: من ظروف العرض إلى السلوك والانفعالات. ولأن هذه الاختلافات تؤثر في المستخدم، فمن المهم لنا كمصممين أن نأخذها بعين الاعتبار في عملية التصميم، بداية من دراسة المنتج وحتى الاستراتيجية النهائية لصنع المنتج. خَلُص الجزء الأول إلى شرح هندسة المعلومات في تصميم الهواتف، وهذا يعطينا أساسًا جيدًا لعملية التصميم المتبقية؛ وقبل الانتقال إلى الجماليات، من المهم أن ندرك كيف أن الأجهزة المحمولة واللوحية تختلف في تفاعلنا معها عن أجهزة سطح المكتب. تصميم الإجراءات التفاعلية تعمل أغلب الهواتف الحديثة بالشاشات اللمسية؛ مما يمنحها فرصًا وقيودًا خاصة بها، ونحن لا نستخدمها لعرض المحتوى فقط، بل للتفاعل معه أيضًا؛ وهذا يُجبر المصممين على أن يُراعوا: بيئة العمل، حركة اليد، التحولات، وأخيرًا أنماط التفاعل الخاصة بالهاتف. بيئة العمل إن التصميم لبيئة العمل يتطلب منا أن نولي اهتمامًا لأبعاد الجهاز، والطبيعة العملية للشاشة اللمسية؛ فالطريقة التي يحمل بها المستخدمُ جهازًا ويتفاعل مع شاشته اللمسية، تؤثر في مدى سهولة وصوله إلى أجزاء الشاشة؛ لذا ينبغي أن توفر مناطقُ اللمس (Hit areas) مساحة كافية للمستخدم؛ كي يتمكن من الضغط على الشاشة بدقة وثقة. إن متوسط عرض طرف الإصبع ما بين 1سم إلى 2سم، والذي بالكاد يُمكنه أن يأخذ مساحة تقع بين 44px إلى 57px على شاشة قياسية، وبين 88px إلى 114px على شاشة (retina) عالية الكثافة. توصي كل من شركات Nokia، Apple، وMicrosoft بالأخذ في الاعتبار أحجامًا مختلفة قليلًا لطبيعة الشاشة اللمسية. لا توجد بعد قواعد صارمة وسريعة فيما يتعلق بمناطق اللمس، وبدلًا من النظر إلى معايير مختلفة من أجل الحصول على إجابة، انظر إلى ما يريد المستخدم إنجازه على الشاشة، ومدى أهميته له، ومدى السرعة التي يحتاجها لإنجاز الأمر، ثم ابْنِ تصميمك بِناءً على ذلك. حركات اليد (Gestures) إن كل جزء من أجزاء الشاشة اللمسية مخصص لوظيفة معينة، ويمنع عرض أي محتوى آخر على هذه المساحة من الشاشة، مما يجعل من حركات اليد عنصرًا حاسمًا في التصميم التفاعلي للهاتف؛ وكل أنظمة التشغيل اللمسية الرئيسية توظفها، بما في ذلك: Google’s Android، Apple’s iOS، وMicrosoft’s Windows 8. يقدم الجدول أدناه ملخصًا موجزًا: الإجراء iOS Android Windows 8 ضغطة تحديد مهمة أساسية. تحديد مهمة أساسية. تحديد مهمة أساسية. ضغطة طويلة في النص القابل للتعديل، عرض العدسة المكبرة لتحديد موقع المؤشر دخول وضع تحديد البيانات. عرض تلميح بسيط دون تحديد العنصر. ضغطة مزدوجة تكبير أو تصغير. تكبير أو تصغير، وتُستخدم أيضًا في تحديد النص. لا يوجد إجراء معياريّ. سحبة صغيرة كشف زر الحذف في جدول العرض عن طريق السحب أفقيًا. لا يوجد إجراء معياريّ. تحديد الكائنات في قائمة أو شبكة، عبر السحب عموديًّا باتجاه ثابت. سحبة طويلة التمرير عبر المحتوى. التمرير عبر المحتوى، أو التنقل بين الملفات في نفس التسلسل الهرمي. التمرير عبر المحتوى، كما تُستخدم في التحرك والرسم والكتابة. التضييق والتمديد تكبير أو تصغير. تكبير أو تصغير. تكبير أو تصغير. بالإضافة إلى ذلك، ظهرت معايير وأنماط لتطوير حركات اليد على الأجهزة التي تعمل باللمس. ويستطيع المصممون- وغالبًا ما ينبغي عليهم- أن يطوروا من القدرات المحدودة لحركات اليد لتناسب تطبيقاتهم. التحولات تُعد التحولات نوعًا من التفاعلات التي تعمل على تقليل الفوارق بين التطبيقات المختلفة، تساعد في توصيل معلومة أو استعارة حركة من حركات اليد. وأكثر من ذلك، فهي تساعد في تسهيل استدعاء المحتوى وتمنع حدوث حالة من التوهان للمستخدم. وتشمل التحولات الأساسية: حركة اليد نوع التحول الوصف الاستخدام العام الضغط تغيير سريع تغيّر العرض مباشرة دون حركة ملحوظة عند التغيير بين نوعين مختلفين من المحتوى أو الأدوات الضغط تمديد تمدد عنصر معين في الشاشة دافعًا بذلك باقي المحتويات للأعلى أو للأسفل عند استعراض قائمة من المحتويات في الشاشة الضغط قلب أو تحويل ينقلب العرض كما لو كان يدور من الخلف إلى الأمام عند عرض محتوى يتعلق بالمحتوى السابق؛ مثل الإعدادات أو معلومات إضافية الضغط فتح وضع الشاشة الكاملة تمدد عنصر على الشاشة حتى يملأها بالكامل عند فتح أو عرض عنصر ما، ويمكن استخدام هذا التحول أيضًا في غلق العناصر السحب انزلاق أفقي ينزلق العرض يمينًا أو يسارًا، دافعًا العرض السابق خارج الشاشة عند التحرك إلى عرض محتوى جديد أو ذي صلة، أو الرجوع إلى شاشة سابقة السحب انزلاق أفقي معاكس ينزلق العرض يمينًا أو يسارًا، على العرض السابق. عند عرض محتوى إضافي. هذا فقط بعض منها، وهناك مجموعة كاملة من التحولات يمكننا الاختيار منها؛ وأفضل اختيار هو الذي يُضيف ترابطًا وإتقانًا للتفاعل الذي تعمل على تسهيله. أنماط شائعة كما أشير إلى ذلك في الجزء الأول، تمنح الهواتف المحمولة للمصممين مساحة أقل لإضافة قوائم ومفاتيح تنقلية، مما عليه الأمر في الحاسوب. وإذا أخذنا العوامل البيئية في الاعتبار- مثل ظروف العرض الرديئة، والمشتتات- فإنه غالبا ما يصعب علينا تزويد المستخدمين بفهم جيد لهيكل المحتوى الخاص بنا. ومع ذلك، فهناك بعض أنماط الإجراءات التفاعلية الشائعة وصلت لمستوى التحدي، ويُستخدم بعض أكثرها قيمة في تحسين عملية التنقل، تحديد المحتوى، تسجيل الدخول والخروج، وفي نماذج التفاوض. قائمة التنقل الرئيسية تُعد قائمة التنقل الرئيسية مظهرًا بصريًا لهندسة المعلومات الخاصة بموقع أو تطبيق ما، وإليك بعض الخيارات لأخذها بعين الاعتبار. القائمة الامتدادية لموقع (starbucks) المتجاوب القائمة الامتدادية (Expanding Menu) تستخدم العديد من المواقع المخصصة للهواتف، والمواقع المتجاوبة قائمة امتدادية للوصول إلى قائمة التنقل الرئيسية؛ ورمز القائمة (المكون غالبًا من مجموعة من الخطوط الرأسية) يقع في أعلى الموقع، وبالضغط على الرمز تظهر لك عناصر القائمة الرئيسية. الإيجابيات: مناسب للمواقع المتجاوبة. السلبيات: وجود العديد من خيارات القائمة الرئيسية، وخيارات القوائم الفرعية يدفع بالمحتوى للأسفل الشاشة مما بجعلها صعبة للاستخدام. تطبيق فيسبوك بقائمة جانبية القائمة الجانبية (Side menu) تستخدم بعض التطبيقات والمواقع قوائم جانبية مثل تطبيق الفيسبوك؛ وكما هو الأمر في القائمة الامتدادية، فإن عليك أن تضغط على الرمز المكون من خطوط والموجود في أعلى الشاشة لتظهر لك قائمة عمودية ممتدة على جانب الشاشة، يمكنك أيضًا أن تجد بعض الفئات بينما تمرر لأسفل الصفحة. الإيجابيات: مناسب للتطبيقات التي تحتوي على عدد كبير من خيارات القائمة؛ فهذا يسمح بوجود مساحة منفصلة للتنقل؛ بدلًا من شغل مساحة كبيرة حيث يريد المستخدم أن يتفاعل فيها مع المحتوى أو المميزات الأخرى. السلبيات: عليك التأكد من أنها لن تتعارض مع نظام تنقل أو نمط تفاعل آخر؛ لأن ذلك سيجعل المستخدم تائهًا. فعلى سبيل المثال، يمكن للمستخدم أن يتوه وهو يبحث عن عنصر معين إذا تم استخدام قائمة امتدادية أو تبويبية مع هذا النمط. قائمة تبويبية في تطبيق Amazon القائمة التبويبية (Tabbed menu) هذا النمط متوافق مع المقالة السابقة من هذه السلسلة، حيث يستمر وجود شريط الأدوات أعلى أو أسفل التطبيق، متيحًا للمستخدم أن ينتقل سريعًا بين الأقسام. الإيجابيات: مناسب للتطبيقات التي تحتوي على عدد محدود من خيارات القائمة؛ ويرجع ذلك إلى مقدار المساحة الأفقية المتاحة على شاشة الهاتف؛ وهذا غالبًا ما يستخدم كنظام تنقل في iOS، حيث يُنصح فيه بخمسة خيارات للقائمة. السلبيات: ربما تتعارض التبويبات السفلية مع التفاعلات الأساسية لـ Android و Windows 8. قائمة لوحة التحكم لتطبيق LinkedIn قائمة لوحة التحكم/ المحور والعجلة (Hub & Spoke menu) هذا النمط متوافق مع المقالة السابقة من هذه السلسلة، حيث تسمح الشاشة الرئيسية المركزية للمستخدم باختيار خيار من القائمة، وهذا سوف ينقل المستخدم إلى قسم داخلي من المحتمل أن يحتوي على نمط تنقل داخلي خاص به؛ ثم يعود المستخدم إلى الشاشة الرئيسية بالضغط على رز العودة. الإيجابيات: عرض ميزات التطبيق سريعًا. السلبيات: يقيد بعض الوظائف، حيث يُجبر المستخدم على العودة إلى الشاشة الرئيسية قبل الانتقال إلى قسم آخر. تحديد المحتوى إن الضغط على الروابط لتفعيل الوصول للمحتوى يُسهل من عملية العرض، مما يجعل من القيام بتحديد المحتوى يتم بسهولة وبيد واحدة؛ وإذا تم الأمر كذلك، فإن هذا التحول يُسهل أيضًا من عملية تفاعل المستخدم. التنقل التقادمي (forward navigation) في تطبيقBBC news اضغط للمضي قُدُمًا سوف يقوم المستخدم غالبًا بالمضي قدما في المحتوى، عبر تحديد الفئات الرئيسية، الفئات الفرعية، ثم إلى المحتوى المطلوب؛ ثم غالبًا إلى محتوى جديد ذات صلة. الإيجابيات: استمرار المستخدم في التفاعل مع محتوى موضوع ما. السلبيات: ربما يشعر المستخدم بالتوهان؛ إذا لم يكن متأكدًا من موقعه في هيكل التنقل. معاينات تتابعية في تطبيقApp store المعاينة التتابعية (Cover flow) يستطيع المستخدم التمرير من خلال معاينة المحتوى ثم الانتقال إليه. نمط التنقل الأفقي هذا ملازم لتطبيقات Windows 8 التي على نسق تطبيق (metro). الإيجابيات: يوفر المزيد من المحتوى المرئي للمستخدم قبل تحديده والانتقال إليه. السلبيات: يطول من عملية التمرير على المستخدم الذي يريد الوصول إلى محتوى معين. نمط التحول والعودة في تطبيقiOS maps لمعلومات أكثر. التحول والعودة (Flip over/ Peel back) يسمح لك نمط التحول والعودة بالوصول لمزيد من التفاصيل في الوقت الذي تستكشف فيه محتوى ما، أو بعض الخصائص المتعلقة بهذا المحتوى. الإيجابيات: تعطيك المزيد من المعلومات عن طريق المزج بين نوعين من المحتويات أو أكثر. السلبيات: تجعل التفاعلات معقدة، وتشوش على المستخدم في معرفة موقعه من هيكل التنقل. تسجيل الدخول إن إدخال اسم المستخدم، البريد الإلكتروني، وكلمة السر يُعد إجراء ضروريًّا في بعض التطبيقات؛ ونحن كمصممين نعمل على التأكد من سهولة وإمكانية هذه الإجراء. تطبيق انستجرام تسجيل دخول تلقائي إن تفاصيل تسجيل دخول المستخدم مخزنة في التطبيق، وعند التهيئة تتم عملية الدخول، وإظهار بيانات المستخدم. هكذا تعمل أغلب تطبيقات التواصل الاجتماعي، مثل فيسبوك، انستجرام، وتويتر. الإيجابيات: مناسب للتطبيقات التي تتطلب تسجيل دخول للوصول إلى معلومات شخصية؛ ولا تتطلب درجة عالية من الحماية. السلبيات: على المصمم التأكد من أن مستوى الحماية المطلوب قد تم تطبيقه. تطبيق Gmail تذكُّر بيانات التسجيل كما هو الحال في المواقع المخصصة لسطح المكتب، يتم تخزين بيانات التسجيل في قالب وملئها تلقائيا لتسريع عملية التسجيل. الإيجابيات: مناسب للمواقع المخصصة للهواتف واللوحيات التي تتطلب تسجيل الدخول. السلبيات: أحيانًا يُطلب تسجيل الدخول في وقت لا يحتاجه المستخدم. تطبيق Paypal رمزPin إن إنشاء طريقة سريعة للولوج ولا تُلزم المستخدم بإدخال المعلومات الأساسية كل مرة، يُعد أمرًا مميزا؛ ويتيح لك تطبيق PayPal إدخال رمز Pin لتسجيل الدخول بطريقة سريعة. الإيجابيات: مناسب للتطبيقات التي تتطلب نوعًا من الحماية، ويمكن ربطها بجهازك المحمول. السلبيات: على المصمم التأكد من أن مستوى الحماية المطلوب قد تم تطبيقه. استخدام النماذج إن ملء النماذج على الهاتف المحمول يُعد أمرًا صعبًا ومحبطًا، خصوصا إذا استخدمت لذلك موقعًا مخصصًا لأجهزة سطح المكتب ولا يدعم الهاتف. لذا يتم تسهيل العملية بالالتفات إلى اعتبارات تصميم الهواتف المعتادة، واتباع هذه الحلول يُسهل فعلًا من ملء النماذج على الهاتف. يسمح لك تطبيق Amazon بالولوج إلى البيانات الشخصية وسجل الطلبات. حفظ بيانات المستخدم إن استخدام إجراء تسجيل الدخول لحفظ واستدعاء بيانات المستخدم هو أمر موفر للوقت والتكاليف، ويجعل استخدامك للموقع أو التطبيق أمرًا سهلًا. الإيجابيات: مناسب للمواقع وللتطبيقات التي يحتمل أن يُضيف المستخدم إليها بيانات شخصية، مثل الموجودة في عملية الشراء. السلبيات: على المصمم التأكد من أن مستوى الحماية المناسب قد تم تطبيقه. يوفر تطبيق Just Eat لوحة مفاتيح مكبرة. توفير لوحة المفاتيح المناسبة إن إحدى طرق تسهيل عملية ملء النماذج هو التأكد من وجود لوحة المفاتيح المناسبة إذا أراد المستخدم أن يملأ حقلًا ما؛ فمثلًا، إذا كان الحقل المطلوب ملؤه حقلًا رقميًّا فلوحة المفاتيح المناسبة هي لوحة الأرقام… وهكذا. الإيجابيات: مناسبة لكل النماذج. السلبيات: لا شيء. عملية الشراء في تطبيقTopshop شريط التقدم تُعد أشرطة التقدم وسيلة ممتازة لإعلام المستخدم بمدى طول عملية متعددة الخطوات على سطح المكتب؛ لكن أبعاد الهواتف المحمولة واللوحيات قد تجعل هذا الأمر صعبًا بعض الشيء، لذا يحتاج الأمر إلى بعض الذكاء للاستفادة من المساحة المتاحة في الصفحة أو التطبيق. الإيجابيات: مناسب للإجراءات الطويلة، مثل عملية الشراء. السلبيات: احذر من استهلاك مساحة كبيرة؛ لأن ذلك قد يُصبح عائقًا أمام الوصول السريع للمحتوى. الخطوات القادمة إن المعايير والقواعد الإرشادية توفر مساحةً للإبداع، فحين كنت ألعب الثعبان على جهازي Nokia 5510 لم يخطر ببالي أبدًا أنه ستتاح لي الفرصة يومًا ما لتصميم وتشكيل أدوات للهاتف المحمول؛ فحلول اليوم تصبح المعايير والقواعد الإرشادية للغد. إن الحصول على الإجراءات التفاعلية الصحيحة على هاتف ما يعد أمرًا أساسيًا؛ ولكي تنشأ تجربة حقيقية رائعة، فإن المظهر الحقيقي لموقع شبكيّ أو تطبيق ما يحتاج إلى إلهام وسحر وتفاعل. في الجزء الثالث، سوف أكشف كيف أن التخطيط والتصميم البصري، يدعم هندسة المعلومات والإجراءات التفاعلية، لخلق تجربة حقيقية جذابة. ترجمة- وبتصرف- للمقال Designing for Mobile, Part 2: Interaction Design لصاحبته Elaine McVicar. حقوق الصورة البارزة محفوظة لـ Freepik