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

أتاح لي هاتفي الأول (الذي اشتريته عام 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

كنتيجة طبيعية لإمكانيات المنصات، كانت أول المواقع المخصصة للهواتف تُعد حلًّا وسطيًّا أكثر من كونها حلولًا احترافية. أما اليوم، فالأجهزة كاملة المواصفات تعطينا الفرصة لإنشاء تصاميم بصرية أكثر جاذبية؛ تلك التصاميم ليست جاذبة فحسب، لكنها تزيد من سهولة الاستخدام أيضًا. ومع هذه الفرص الرائعة تأتي تحديات جديدة. في الجزء الأول من السلسلة: هندسة المعلومات، أوضحنا الأسباب التي تجعل الهواتف المحمولة تختلف عن أجهزة سطح المكتب في البنية والمواصفات، كيف ومتى وأين نستخدم الهواتف؟ وكيف نشعر ونتصرف أثناء استخدامنا لها. ثم في الجزء الثاني: تصميم الإجراءات التفاعلية، شاهدنا تأثير هذه الاختلافات عند تطوير الهيكل والأداء الوظيفي؛ فهذان الجزءان يوضحان أساسيات التصميم الجيد للأجهزة المحمولة واللوحية. والآن سوف نختتم دراسة تصميم الهواتف المكونة من ثلاثة أجزاء، عبر استكشاف حلول التصميم المرئي، وأفضل الممارسات اللازمة لإنتاج تطبيقات جميلة قابلة للاستخدام. أولًا: سوف نتناول القيود المادية في عملية التصميم، وأفضل الممارسات العملية التوجيهية في ذلك؛ ثم سنتناول الجانب التواصلي في عملية التصميم، واستخدام التصميم البصري لدعم محتوى التطبيقات والمواقع الخاصة بالهاتف المحمول. الجانب المادي في عملية التصميم إن الشكل المادي والشاشة اللمسية للأجهزة المحمولة واللوحية تعطينا بعض الاعتبارات التي من السهل العمل عليها؛ فبينما يمكن لمستخدم جهاز سطح المكتب فحص مساحة واسعة من المحتويات، أو الحوم حول عنصر ما للاطلاع على مزيد من المعلومات، نجد أن مستخدمي الهواتف محددين بمنطقة أصغر، وعليهم استخلاص طرق مختلفة من التفاعل؛ وبالأخذ في الحسبان التفاصيل التي تحدد شكل الهاتف وتفاعلاته الخاصة، يمكننا بسهولة إنشاء تجربة رائعة. التصاميم الصالحة للاستعمال إن المساحة المحدودة التي توفرها شاشة الهاتف تقدم قيودًا مثيرة للاهتمام في كيفية عرض المحتوى والتفاعلات بشكل أفضل؛ وبشكل أدق، فإن على التصميم أن يكون بسيطًا ومركزًا. هيكل التصميم: لكي نقوم بتوفير أساس قوي للتصميم، فنحن بحاجة إلى استخلاص أفضل الطرق لاستخدام مساحة الشاشة المتاحة؛ ونطام الشبكة (grid system) يساعد المصممين في تحقيق ذلك؛ فهيكل الخطوط العمودية متساوية التباعد يُعدّ دليلًا لترتيب المحتوى، مما يسهل على المصممين تحديد المكان الأكثر فعالية للأزرار، العناوين، أو الصور؛ ولأن ترتيب المكونات بهذه الطريقة يرشد المستخدمين في رحلتهم، ويقدم في نفس الوقت صورة نظيفة وجميلة للمحتوى. مساحة التمرير والسحب: من المهم جدًا أن يستطيع المستخدم استكشاف المحتوى دون أن يجد نفسه قد ارتكب إجراء لا يقصده، أو يجد نفسه قد فعّل عنصرًا لا يريده أثناء تمرير الصفحة. بمعنى آخر، يجب أن تكون المساحة بين العناصر متباعدة بدرجة مناسبة؛ حتى يستطيع المستخدم التنقل بينها بحرية. التفاعلات سهلة الاستخدام إن وجود الشاشة اللمسية على واجهة الهواتف المحمولة يعني أن التصميم البصري يعزز من الإجراءات التفاعلية؛ بعبارة أخرى، ينبغي أن تضمن عملية تغيير حجم ومكان العناصر السهولة في الاستخدام، وأن تبين الأهمية والارتباط بين الإجراءات المختلفة. مناطق ضغط الزر: كما ناقشنا في الجزء الثاني من السلسلة: تصميم الإجراءات التفاعلية، فإن وجود حجم كافٍ، وتباعد مناسب بين الأزرار يُسهل من عملية تفعليها. من الناحية المثالية، فإن على الأزرار أن تكون بين 44px و57px على الشاشة القياسية، و88px إلى 114px على شاشة (retina) عالية الكثافة؛ وهذا يُعطي مساحة كافية للإصبع المتوسط أن يُفعّل هذه الأزرار بسهولة. أدوات تحكم واضحة ومن السهل الوصول إليها: إذا كانت العناصر التفاعلية المتصلة ببعضها، قريبة من بعضها وفي المتناول الوصول إليها، فإن هذا سيساعد المستخدم على التنقل السريع بينها؛ وهذا بدوره سيساعد في الحد من التشوش وقلة الوضوح التي يمكن أن تعتري المستخدم حول كيف ترتبط التفاعلات ببعضها، وسيسرع من إنجاز العمليات المعقدة. الجانب التواصلي في عملية التصميم إن القيود المادية تعتبر فقط نصف التحدي الذي نواجهه في تصميم الهواتف المحمولة، والنصف الآخر هو الجانب التواصلي. إن فلسفة الجوال أولًا (mobile first) تذكرنا أن مستخدمي الجوال لا بد أن يحصلوا على نفس القدر من الفائدة من المواقع كما يحصل عليها نظراؤهم من مستخدمي أجهزة سطح المكتب. بوضع ذلك في الاعتبار، فإن الجانب التواصلي في تصميم الهواتف سوف يؤثر على الطريقة التي سيعمل بها كل مصمم لإيصال رسالته التواصلية. ولكي نحسن الجانب التواصلي، فنحن بحاجة إلى تحقيق أفضل استفادة من كيفية فهمنا للمعلومات وفك شفراتها. إن الدماغ البشري يفسر المعلومات البصرية أسرع بكثير من الكلمات؛ وهذا يعني أنه سيكون رائعًا استخدام المرئيات والصور لتحسين التواصل؛ فالتصميم البصري الجيد سوف يضيف قيمةً، ودعمًا لغرض المحتوى أو التفاعلات، ويحسن من تجربة المستخدم ككل (للهاتف وسطح المكتب). الاتزان الرأسي (Vertical rhythm) إن أول مُحسِّنٍ لعملية التواصل علينا اعتباره هو استخدام الاتزان الرأسي؛ ومع أن هندسة المعلومات تُنشأ تدفقًا معقولًا للمحتويات، فإنه يمكن استخدام التصميم البصري لخلق مزيد من الوضوح داخل التسلسل الهرمي البصري للمحتوى، وسيؤدي الاستخدام المناسب للحجم والتباعد بين عناصر المحتوى، إلى إنشاء اتزانٍ عموديٍّ يدعم التواصل بين أجزاء التسلسل الهرمي. إضافةً إلى نظام الشبكة العمودية سالفة الذكر، فإن الشبكة الأساسية (baseline grid) تساعد كذلك في إنشاء اتزان عمودي مناسب، جاعلة قراءة وفهم المحتوى أكثر سهولة؛ خصوصًا وأنها تُنشأ بنيةً من خلال مواصفات ارتفاعات الأسطر، وهذا يعطي قواعد أفقية واضحة توضح المسافة بين قاعدة كل سطر (typography leading) وكذلك حجم الخطوط؛ كما أنها مفيدة في تحديد التباعد بين مجموعات المحتويات. إن اتباع هذه القواعد يجعل قراءة الفقرات واضحة، ويجعل المستخدم قادرًا على التفريق بين الأقسام (sections) ومجموعات المميزات (feature groups)؛ وربما يكون من الصعب تنفيذ نظام الشبكة الرئيسية بدقة في كل من HTML وCSS، إلا أنها توفر إرشادات مفيدة فيما يتعلق بتطوير التحجيم والتباعد في عملية التصميم. استخدام الألوان تعد الألوان وسيلة أخرى رائعة للتواصل، ويمكن استخدامها بطرق متعددة لدعم المحتوى والتفاعلات. درجة اللون وطرازه: إن استخدام الألوان في التصميم يُعد ذوقًا شخصيًّا بالدرجة الأولى، ويعتمد على التجربة الشخصية والثقافة؛ ومع ذلك، فإن استخدام درجات متعددة للون وبعض الظلال يمكن أن يساعد في إيصال انطباع عام عن الهدف المطلوب؛ فمثلًا: الألوان الفاتحة المكتوبة بخط سميك عريض تعبر عن المرح، ودرجات الألوان الداكنة تخلق شعورًا من الأناقة، بينما الأشكال الانسيابية بدرجات من اللون الرمادي تعطي شعورًا عتيقًا يعبر عن الماضي. إن تعلمنا المزيد عن نظرية الألوان (color theory) يمنحنا القدرة على اختيار أفضل الألوان المناسبة لأهداف التصميم. التفرقة بين الأقسام يمكن استخدام الألوان لإعطاء أهمية لعناصر المحتوى، أو لتوضيح كيف أن العناصر مرتبطة ببعضها، أو لدعم بنية المحتوى، أو لتوضيح كيف أن عناصر المحتوى منفصلة عن بعضها. التفرقة بين العناصر الثابتة والوظائف التفاعلية: إن استخدام تباين قوي بين الألوان سوف يساعد المستخدم في فهم الاختلاف بين الأغراض، أو الربط بين أجزاء المحتوى، أو الوظائف؛ واستخدام مزيج من الألوان المحايدة والألوان الفاتحة أو الداكنة، سوف يضمن أن تلك العناصر المحددة قد ظهرت وبرزت للمستخدم؛ واستخدام لون ثابت محدد- على سبيل المثال- لكل من العناصر الثابتة، النشطة وغير النشطة، في جميع أنحاء التصميم، سوف يُظهر أيضًا الفرق بين المحتوى والوظائف بشكل أكثر وضوحًا. التعريف بأحوال مختلفة: يمكن استخدام الألوان بذكاء لتظليل الرسائل، الإشعارات، والأخطاء التقنية بعد تفاعل المستخدم معها؛ فعلى سبيل المثال، تستخدم العديد من المواقع اللون الأخضر للرسائل الناجحة، والأحمر لرسائل الخطأ؛ وهذا يساعد في سهولة فهم التصميم المخصص لنقل معلومات عبر استخدام الألوان المتسقة. استخدام التجسيد أو التشبيه (Using metaphor) أخيرًا، فإن استخدام التجسيد يمكن أن يكون حلًّا قويًّا في التصاميم البصرية؛ ويتيح للمستخدمين أن يفهموا المحتوى والوظائف بصورة أسرع من خلال استحضار عنصر بصري مألوف؛ ويُعتبر استخدام الـ Skeuomorphism (أي: التصميم الذي وُضع ليُحاكي عنصرًا آخر) هو أقصى استخدام للتجسيد البصري في الوسط التقنيّ؛ حيث يتم تصميم عناصر الواجهة لتبدو حقيقة تمامًا مثل نظيراتها في العالم الحقيقيّ؛ ورغم أن الاتجاه قد حصل مؤخرًا على سمعة سيئة في نظام Windows 8، وفي نظام iOS7 الذي بدأ بالتراجع عنه؛ فلا زالت هذه الأنظمة، والمواقع والتطبيقات المخصصة للهواتف تستخدم نموذجًا أبسط من التجسيد في واجهة المستخدم، مثل تجسيد سلة المهملات لوظيفة الحذف، وآلة تصوير لكاميرا الويب، ومظروف للبريد؛ فيمكن إذًا للتجسيد أن يُستخدم بأكثر من طريقة لدعم توصيل رسالة أو فكرة. دعم موضوع أساسيّ: أفضل من حصر التجسيد في عنصر واحد من عناصر التصميم، يمكن استخدامه ليكون الفكرة الأساسية للتصميم أو الوظائف؛ فداخل تطبيق Flipboard، تعتبر تحولات الشرائح جزءا مدمجًا في تفاعلات المستخدم، وهذا الأداء السلس كان عاملًا مهما في نجاح التطبيق؛ فاستخدام التجسيد بهذه الطريقة يُسرّع من عملية إيصال الفكرة للمستخدم، كما يساعد في جعل التطبيق فريدًا من نوعه. الأزرار والتفاعلات: إن استخدام تجسيدٍ بسيط في تصميم الأزرار يُعد طريقة سهلة لمحاكاة تفاعلات العناصر في الحياة الحقيقية وجعل الوظائف أكثر وضوحًا؛ فالأمر لا يساوي شيئا إذا طُلب من الأشكال السطحية غير المجسدة أن تتناسب داخل تصميم واختلفت ألوانها عن ألوان العناصر الثابتة؛ موقع Wunderlist مثلا يستخدم أزرارًا ذات تصاميم واقعية. الرموز المصورَّة (Iconography): يمكن للرموز أن تكون مفيدة في تصميم الهواتف، فمساحة الشاشة الصغيرة تسمح بتواصل سريع مع أكثر من عنصر في نفس الوقت؛ فاستخدام التجسيد البصري للرموز (وخصوصًا تلك الرموز التي صارت مَعَايِيرًا، مثل رمز الحذف، كاميرا الويب، والبريد) يعنى أنها يمكن استخدامها دون تسميتها؛ فمعناها يُفهم بمجرد رؤيتها. إن تصميم رموز بسيطة وواضحة يمكن أن يكون تحديًا؛ لذا من المهم أن تفهم كيف أن الرموز تؤثر على مدى وضوح التصميم الخاص بك. مستقبل الهواتف المحمولة إن الفهم الواضح للمعايير والقيود، كالمذكورة في هذه السلسة، هو أمر مهم وقيّم لكل مصممي الهواتف؛ ورغم ذلك، فبمجرد إتقاننا هذه المعايير، نستطيع امتلاك القدرة على التحليق فوقها، وكسر قواعدها، وتجاوز حدود الإبداع لصنع شيء رائع وفريد من نوعه؛ وبالتزامن مع إدراكنا حاجةَ المستخدم، نستطيع صنع التوازن الأمثل بين الفاعلية والجمال. إن عملية تصميم الهواتف مثيرة حقًّا وتحمل الكثير من الفرص والتحديات؛ وإن تطور التكنولوجيا والتغير المستمر في حاجات المستخدمين يعني أن قيود اليوم قد لا تتواجد غدًا؛ ويساعدنا التفكير الابتكاري والإبداعي على استكشاف طرقٍ جديدة للنظر في هذه التحديات، ويسمح لنا كذلك بمواصلة العثور على حلول جديدة وجميلة وقابلة للاستخدام لمشاكل التصميم التي تواجهنا. ترجمة- وبتصرف- للمقال Designing for Mobile Part 3: Visual design لصاحبته Elaine McVicar حقوق الصورة البارزة محفوظة لـ Freepik

في عام 1993، جلب أبي إلى البيت هاتفًا محمولًا كبيرًا على شكل حجر من الطوب، كنا جميعًا متحمسين جدًا لهذه التكنولوجيا الجديدة، ولم يخطر ببال أحد منا أنه سيكون لها تأثيرٌ ضخم على حياتنا. إنني في الواقع لا زلت أعتبره أداة سحرية، وقد قام بعض أصدقائي بشرائه بعد عدة سنوات. أما اليوم، فهناك ستة مليارات مؤيد للهواتف المحمولة حول العالم؛ مما يعني أنه إذا امتلك كل واحد منهم هاتفًا، فسيمتلك 87% من سكان العالم هواتفًا محمولة، وهذا عدد ضخم جدًا مقارنة بأن هناك أقل من ثلاثة مليارات شخص فقط يمتلكون حواسيبًا مكتبية. من الواضح جدًا أن الهواتف النقالة سوف يستمر بقاؤها لفترة طويلة؛ وتبقى معها أيضًا مجموعة من القيود (والفرص) الجديدة للمصممين؛ لذا دعونا نلقي نظرة عن كيف يمكننا تطوير نهجنا في التعامل. كيف تختلف الهواتف عن غيرها؟ إن أول شيء علينا فهمه حول تصاميم الهواتف هو أنها مختلفة، ليس فقط بشأن الحجم؛ فبِنْية ومواصفات الجهاز المحمول تعطينا تصاميمَ مختلفة القدرات والمتطلبات. ونحن نجد أن الهواتف المحمولة أنسب في الاستخدام لكونها خفيفة وسهلة الحمل والتنقل، ومع استخدامها المنتظم تتكون لدينا معها رابطة عاطفية مميزة. البنية والمواصفات تمتلك معظم الهواتف المحمولة شاشات لمسية، حيث يتفاعل معها المستخدمون معتمدين على الإيماءات، بالإضافة إلى واجهة ذات عناصر بسيطة. ونظرًا لصغر أبعاد هذه الأجهزة، نتوقع أيضًا أن تكون بنية المحتوى بسيطة وصغيرة. أيضًا لمحدودية عرض النطاق الترددي والاتصال (bandwidth and connectivity) لهذا الأجهزة، فإنها تتطلب تصميمًا يجمع بين المثالية في وقت التحميل، والانخفاض في استهلاك بيانات الهاتف. كيف، أين ومتى نميل لاستخدام هواتفنا المحمولة في كثير من الأحيان؛ ولذلك لأن لدينا وصولًا مستمرًا إليها، فهي معنا في وسائل المواصلات، وحين نتمشى في الشارع، أو حين نشاهد التلفاز، بل نحن غالبًا ما نستخدمها بينما نقوم بعمل آخر، وهذا يعنى أن بعضنا ربما يستخدم جهازه تحت ظروف عرض صعبة، أو بين العديد من المشتتات. كيف نتصرف ونشعر لدينا طرقًا وسلوكيات وأولويات مختلفة في استخدامنا للهواتف المحمولة؛ ففي جزء من دراسة Going Mobile 2012، وجدت وكالة User Experience Design agency Foolproof أن الهواتف أعطتنا شعورًا جديدًا من الحرية والتحكم؛ لذا يشعر بعض المستخدمين بمودة حقيقية بينهم وبين هواتفهم! فقد وجدت وكالة Foolproof أن 63% من الناس يفتقدون هواتفهم إذا لم يستطيعوا الوصول إليها بسهولة، ووصفوا هواتفهم بأنها (على قيد الحياة)، وأنها جزء من أجسامهم وشخصياتهم. ولأن الهواتف المحمولة قد غيرت توقعات المستخدم جذريًا، فمن المهم جدًا لنا- نحن المصممين- أن نتبع عملية التصميم التي تركز على المستخدم للوصول إلى حلول، فالمشكلة الوحيدة هي أن أفضل ممارساتنا التقليدية قد لا تفلح دائمًا. كيف تؤثر الهواتف على المصممين إن اختلافات الهواتف المحمولة تؤثر بشكل مباشر على جميع أجزاء عملية التصميم التي تركز على المستخدم، بداية من أبحاث المستخدم وحتى التطوير النهائي واختبار الحلول، وأكبر الأجزاء المؤثرة في العملية هي: طرق التقديم والعرض، وهندسة المعلومات. طرق التقديم والعرض على عكس مواقع الإنترنت التقليدية، هناك أربع طرق شائعة لتقديم محتوى الهواتف المحمولة: بالنسبة للمستخدمين الذين يفضلون عرض المحتوى على المتصفح، فتناسبهم المواقع المخصصة للهواتف (mobile-specific site)؛ أو المواقع المتجاوبة (responsive site) التي تعيد ترتيب واجهتها بحيث تتناسب مع أبعاد الهاتف. أما بالنسبة للذين يفضلون تحميل التطبيقات على هواتفهم المحمولة، فيناسبهم إما تحميل التطبيقات المخصصة (native app)؛ أو التطبيقات الهجينة (hybird app). التطبيقات المخصصة مستقلة بذاتها؛ فكل صفحة من صفحات التطبيق محددة في تصميمها من الألف إلى الياء. أما التطبيقات الهجينة ففيها بعض المرونة؛ إذ أنها تستطيع عرض المحتوى من الإنترنت كالمتصفحات، مع الاحتفاظ بواجهة مستخدم شبيهة بواجهة التطبيقات. إن كل طريقة من طرق تقديم المحتوى لديها إيجابيات وسلبيات. اختر ما تراه مناسبًا لك بِناءً على متطلبات تصميم المشروع. (في الجدول التالي مقارنة بين الطرق الأربعة المذكورة أعلاه، وكلما زادت عدد النجوم كلما كان أفضل). المأخوذ في الاعتبار المواقع المخصصة للهواتف المواقع المتجاوبة التطبيقات المخصصة التطبيقات الهجينة ملاحظات مصممة خصيصًا لأولويات المستخدم ★★★ ★★ ★★★ ★★★ يمكن للمواقع المخصصة أن تزيد من تقييم استجابة التصميم إلى ثلاث نجوم تقديم المحتوى ★★ ★★★ ★★ ★★★ من السهل فهرسة المواقع المتجاوبة (والتطبيقات الهجينة) في محركات البحث الوظائف ★★ ★★ ★★★ ★★★ تُوفر التطبيقات المخصصة إمكانية الدخول إلى مميزات الجهاز (مثل نظام تحديد المواقع، والكاميرا) مما يسمح بتجربة أكثر فاعلية وجاذبية التوافق ★★ ★★★ ★ ★ من السهل عرض التصميم المتجاوب على أي شاشة؛ أما المواقع والتطبيقات المخصصة فهي معتمدة بالأساس على الجهاز الذي صُممت من أجله تكاليف التطوير ★★ ★★★ ★ ★★ بالاعتماد على كونك تطور موقعًا كاملًا من الصفر، فإن التصميم المتجاوب يحتاج بناؤه لمزيد من الوقت، لكن ليس بقدر التصميم التقليدي المخصص تكاليف الصيانة ★★ ★★★ ★ ★★ في التطبيقات المخصصة، تلزمك صيانة كل تطبيق منها على حدة؛ بينما في التصميم المتجاوب فلا يلزمك إلا صيانة الموقع المحتاج لذلك، وستُعمم النتائج هندسة معلومات الهواتف المحمولة تمتلك الهواتف المحمولة مجموعتها الخاصة من أنماط هندسة المعلومات أيضًا؛ وبينما تُبنى المواقع المتجاوبة باتباع أنماط معيارية؛ توظِّف التطبيقات المخصصة- على سبيل المثال- هياكل متنقلة مستندة على علامات التبويب. ليست هناك طريقة (صحيحة) لهندسة مواقع أو تطبيقات الهواتف المحمولة؛ بدلًا من ذلك، دعونا نلقي نظرة على بعض الأنماط الشائعة: نمط التسلسل الهرمي (Hierarchy)، المحور والعجلة (Hun & Spoke)، الدمية المنزلية (Nested doll)، العرض المُبوّب (Tabbed view)، صندوق بينتو (Bento box)، والعرض المُصفّى (Filtered view): التسلسل الهرمي (Hierarchy) يعد نمط التسلسل الهرمي بناءً معياريًا للموقع، مع صفحة فهرس ومجموعة من الصفحات الفرعية. إذا كنت تصمم موقعًا متجاوبًا فربما ستُضطر لاتباع هذه النمط؛ بينما إدخال أنماط أخرى سوف يسمح لك بتفصيل التجربة على الهاتف المحمول. إن مبادرة Luke Wroblewski في كتابه Mobile First تساعدنا في التركيز على الأمور المهمة أولًا: المميزات، ورحلات المستخدم (user journeys)؛ حيث ستساعدنا تلك الأمور على إيجاد نماذج أفضل لتجارب المستخدم. الإيجابيات: يستطيع التسلسل الهرمي ترتيب هيكل مواقع معقدة، مثل تلك التي تحتاج إلى اتباع هياكل مواقع سطح المكتب. السلبيات: يمكن أن تمثل هياكل التنقل متعددة الأوجه (Multi-faceted navigation structures) مشكلة لمن يستخدمون الشاشات الصغيرة. المركز هو المحور (Hub)، والفرعيات هي العجلة (Spoke) المحور والعجلة (Hub & Spoke) يعطيك نمط المحور والعجلة فهرسًا في المركز يمكنك التنقل من خلاله إلى المحتويات، وهذا هو النمط الافتراضي في أجهزة Apple’s iPhone. لا يستطيع المستخدمون التنقل بين العجلات، بل عليهم العودة إلى المحور؛ هذا النمط مستخدم منذ فترة طويلة في سطح المكتب حيث يتم وضع قيود على سير العمل (غالبًا ما تقود قيودًا تِقَنية، مثل الموجودة في نموذج لعملية شراء)؛ ومع ذلك، فبمرور الوقت يصبح هذا النمط أكثر انتشارًا على الهاتف المحمول؛ لأن المستخدم صار يركز على مهمة واحدة، كما أن عامل تكوين الجهاز يجعل التنقل الشامل أصعب في الاستخدام. الإيجابيات: وجود أدوات متعددة الوظائف، لكل منها مهمة وتنقل داخلي مستقل. السلبيات: غير مناسب لمن يفضل القيام بمهام متعددة. الدمية المنزلية (nested doll) إن نمط الدمية المنزلية يقود المستخدم في شكل خَطيّ إلى محتوى فيه المزيد من التفاصيل. هذه طريقة سهلة وسريعة للتنقل حين يكون المستخدم في ظروف صعبة، كما أنها تعطي المستخدم شعورًا قويًا حول مكانهم في هيكل المحتوى؛ بفضل إمكانية التحرك للأمام ثم الرجوع للخلف. الإيجابيات: يمكن لهذا النمط أن يُستخدم كقسم فرعيّ داخل نمط من الأنماط الأساسية، مثل نمط الهرم التسلسلي أو نمط المحور والعجلة؛ وذلك في المواقع أو التطبيقات ذات الموضوعات الأحادية أو وثيقة الصلة ببعضها. السلبيات: لن يستطيع المستخدمون التنقل سريعًا بين الأقسام، لذا من الجيد النظر فيما إذا كان هذا سيكون مناسبًا، أم عائقًا أمام استكشاف المحتوى. العرض المُبوّب (Tabbed view) هذا النمط سيكون مألوفًا لمن يستخدم التطبيقات بانتظام؛ إنه عبارة عن أقسام فرعية مرتبطة ببعضها عبر قائمة شريط الأدوات، وهذا يسمح للمستخدم أن يفصح ويفهم سريعًا وظيفة التطبيق كاملة من أول مرة يفتحه فيها. الإيجابيات: مناسب للتطبيقات المتفقة الموضوع والمعتمدة على الأدوات، ولديه القدرة على القيام بمهام متعددة. السلبيات: التعقيد؛ فهذا النمط مناسب جدًا للمحتويات ذات البنية البسيطة. مربع بينتو (Bento box) إن نمط مربع بينتو أو لوحة القيادة يجلب المزيد من المحتوى التفصيلي مباشرة إلى شاشة الفهرس باستخدام مكونات لعرض أجزاء من الأدوات المترابطة أو المحتوى. هذا النمط يناسب الجهاز اللوحي (Tablet) أكثر من الهاتف المحمول لكونه- أي النمط- أكثر تعقيدًا. أنه مميز حقًّا؛ إذ يتيح للمستخدم أن يفهم المفاتيح الأساسية في لمحة واحدة، لكنه يعتمد بشكل كبير على امتلاك واجهة ذات تصميم جيد مع معلومات مقدمة بشكل واضح. الإيجابيات: مناسب للأدوات متعددة الوظائف، وللمحتوى المعتمد على تطبيقات الشاشات اللوحية والتي لها مواضيع مماثلة. السلبيات: إن شاشة الجهاز اللوحي تعطيك مساحة أكبر لاستخدام هذا النمط جيدًا؛ ومع ذلك، فمن المهم فهم كيف سيتفاعل المستخدم مع وبين كل جزئية من المحتويات؛ وذلك للتأكد من كون هذا التطبيق سهلًا، فعالًا وممتعًا للاستخدام. العرض المُصَفّى (Filtered view) وأخيرًا، يسمح نمط العرض المُصفى للمستخدم بالتنقل ضمن مجموعة من البيانات عبر تحديد خيارات التصفية لإنشاء طريقة عرض بديلة للمحتوى؛ فالتصفية (Filtering) وطرق البحث متعددة الأوجه (faceted search methods)، تعتبر خيارات ممتازة تسمح للمستخدم باستكشاف المحتوى بالطريقة التي تناسبه. الإيجابيات: مناسب للتطبيقات والمواقع ذات الكميات والمحتويات الكبيرة، مثل: المقالات، الصور وأشرطة الفيديو. يمكن أن يكون أساسًا جيدًا لتطبيق لموقع أو مجلة، أو كنمط فرعيّ ضمن نمط تنقليّ آخر. السلبيات: يمكن أن يكون من الصعب عرض نظام التصفية وطرق البحث متعددة الأوجه على شاشة صغيرة نظرًا لكون هذه الأنماط معقدة. الخطوات القادمة لقد مر تقريبًا عقدين من الزمن منذ رأيت هذا الهاتف الحجريّ الكبير أول مرة، وحوالي عشرين سنة منذ اشتريت أول هاتف محمول لي، والآن نمتلك أنا وأبي وتقريبًا كل من أعرف هواتف محمولة؛ حيث نستخدمها أكثر الوقت في التفاعل والتواصل وإدارة حياتنا. في كل عام تقفز التكنولوجيا قفزة جديدة، ومن الواضح أن علينا أن نواكبها جنبًا إلى جنبٍ. إن تطوير هندسة معلومات صديقة للهواتف المحمولة والأجهزة اللوحية، هي الخطوة الأولى في تقديم تجربة رائعة للهواتف. في الجزء الثاني: متطلبات التصميم، سوف أشرح كيف أن الاختلافات في سياق الهاتف المحمول سوف يؤثر على كيفية تطوير حل التصميم النهائي الخاص بك. ترجمة -وبتصرّف- للمقال Designing for Mobile, Part 1: Information Architecture لصاحبته Elaine McVicar حقوق الصورة البارزة محفوظة لـ Freepik