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

كنتيجة طبيعية لإمكانيات المنصات، كانت أول المواقع المخصصة للهواتف تُعد حلًّا وسطيًّا أكثر من كونها حلولًا احترافية. أما اليوم، فالأجهزة كاملة المواصفات تعطينا الفرصة لإنشاء تصاميم بصرية أكثر جاذبية؛ تلك التصاميم ليست جاذبة فحسب، لكنها تزيد من سهولة الاستخدام أيضًا. ومع هذه الفرص الرائعة تأتي تحديات جديدة. في الجزء الأول من السلسلة: هندسة المعلومات، أوضحنا الأسباب التي تجعل الهواتف المحمولة تختلف عن أجهزة سطح المكتب في البنية والمواصفات، كيف ومتى وأين نستخدم الهواتف؟ وكيف نشعر ونتصرف أثناء استخدامنا لها. ثم في الجزء الثاني: تصميم الإجراءات التفاعلية، شاهدنا تأثير هذه الاختلافات عند تطوير الهيكل والأداء الوظيفي؛ فهذان الجزءان يوضحان أساسيات التصميم الجيد للأجهزة المحمولة واللوحية. والآن سوف نختتم دراسة تصميم الهواتف المكونة من ثلاثة أجزاء، عبر استكشاف حلول التصميم المرئي، وأفضل الممارسات اللازمة لإنتاج تطبيقات جميلة قابلة للاستخدام. أولًا: سوف نتناول القيود المادية في عملية التصميم، وأفضل الممارسات العملية التوجيهية في ذلك؛ ثم سنتناول الجانب التواصلي في عملية التصميم، واستخدام التصميم البصري لدعم محتوى التطبيقات والمواقع الخاصة بالهاتف المحمول. الجانب المادي في عملية التصميم إن الشكل المادي والشاشة اللمسية للأجهزة المحمولة واللوحية تعطينا بعض الاعتبارات التي من السهل العمل عليها؛ فبينما يمكن لمستخدم جهاز سطح المكتب فحص مساحة واسعة من المحتويات، أو الحوم حول عنصر ما للاطلاع على مزيد من المعلومات، نجد أن مستخدمي الهواتف محددين بمنطقة أصغر، وعليهم استخلاص طرق مختلفة من التفاعل؛ وبالأخذ في الحسبان التفاصيل التي تحدد شكل الهاتف وتفاعلاته الخاصة، يمكننا بسهولة إنشاء تجربة رائعة. التصاميم الصالحة للاستعمال إن المساحة المحدودة التي توفرها شاشة الهاتف تقدم قيودًا مثيرة للاهتمام في كيفية عرض المحتوى والتفاعلات بشكل أفضل؛ وبشكل أدق، فإن على التصميم أن يكون بسيطًا ومركزًا. هيكل التصميم: لكي نقوم بتوفير أساس قوي للتصميم، فنحن بحاجة إلى استخلاص أفضل الطرق لاستخدام مساحة الشاشة المتاحة؛ ونطام الشبكة (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

الكثير من التخصصات لقد عملت سابقا في العديد من الشركات المختلفة كمصمم منفرد مع العديد من الفئات المختلفة من المصممين. وقبل 5 سنوات، كان الاتجاه السائد هو التخصص في التصميم؛ المصممون البصريون، مصممو تجربة المستخدم، مصممو واجهة الاستخدام، مهندسو المعلومات، ومصممو المنتجات. وأنا متأكد أنّ بعضكم يعرف من الألقاب المبهمة أكثر مما ذكرته. لم أفهم تماما لماذا كل هذا الكم من تخصّصات التصميم. ربما يكون هذا الأمر منطقيا لو كنا نتحدث عن المهندسين بحكم وجود الهياكل والمنصات، فمهندسو iOS يختلفون عن مهندسي Rails رغم أن المبرمج الحذق يُمكنك أن يعبر من لغة برمجية إلى أخرى بكل سهولة ويُسر. مصدر الصورة: Christian Manzella إنّ تصنيف الناس حسب التخصصات لا ينفع في شيء ولا يحل أي مشكلة. وعندما تعزل أحدهم فقط لأنّه متخصص في تصميم تجربة المستخدم لا يعني أنّه لا يعرف شيئا عن مهارات التصميم البصري أو تصميم المنتجات. وعلى الأرجح يملك كل مصمم بعض المعلومات عن التخصصات الأخرى، فمصمم واجهة المستخدم يمكن أن يملك خلفية ومهارات مصمم تجربة المستخدم. ويمكنني أن أقول أنّ معظمنا يملك نقاط قوة واهتمامات في مجالات معيّنة، ولا يمكن أن ننمي مهاراتنا كمصممين إذا كنّا نركّز على الأجزاء التي نبرع فيها فقط. كيف تم تحديد التخصصات عندما نتحدث من الناحية التنظيمية، من المنطقي تحديد الأدوار في الشركات. ففي العادة تضمن الممارسة القائمة على توظيف العديد من التخصصات في الشركات الكبيرة خلق مزيج جيّد من المصممين والأفكار. والفكرة هي امتلاك تعاون متكامل بين مختلف التخصصات مما يتيح للجميع تبادل الأفكار وتنفيذ المشاريع على نحو أسرع من ذي قبل. لماذا لا يصلح تصنيف المصممين إلى تخصصات على الرغم من أنني أؤيد وجهة النظر النّظرية القائلة إنّ العديد من عقول التصميم المختلفة يمكن أن تجتمع معا لخلق شيء عظيم، إلا أنني لم أشهد قط حالة لا ينهار فيها هذا التنظيم عمليًا. والمشكلة هي في الحواجز التي تخلقها. من هو المسؤول وعن ماذا؟ لماذا تكون الكلمة الأخيرة للمصممين البصريين حول الأمور المتعلّقة بالجماليات أكثر من غيرهم؟ من الواضح أنّ هذا الأمر يمكن معالجته بالفريق المتكامل والقيادة المناسبة، لكنني نادرا ما أرى ذلك يحدث في الواقع. يبدو المصممون البصريون وكأنّهم حماة "العلامة التجارية" الأسطورية، بينما مصممو تجربة المستخدم هم حماة التجربة ولا يرغبون في تشويشها بالعناصر البصرية الرديئة. ولذلك أعتقد أنّ التصنيف إلى تخصصات خلق المزيد من المشاكل أكثر مما عالج. المشكلة الأخرى هي أنّ تعليمات المشروع تصبح هلامية وغير واضحة المعالم. من هو المسؤول عن ماذا؟ كيف نجدول المشروع بحيث يتدفق العمل بصورة مثالية من الإطارات الشبكية wireframes إلى التصميم البصري في حين يلتزم العديد من الناس بإنهاء ما بأيديهم من أعمال؟ حسب تجربتي، الأمر يصبح أكثر صعوبة بإشراك العديد من الناس. ولادة مصطلح "مصمم المنتجات" لقد نشأ مصطلح "مصمم المنتجات" في عالم الشركات الناشئة في وادي السيليكون. والفكرة وراء هذا اللقب كانت أن يصبح دورا شاملا وملما بجميع التخصصات. يُفترض بمصمم المنتج أن يكون خبيرًا بجميع تخصصات التصميم، وفي نفس الوقت يكون خبيرًا بالمنتج أيضًا. في هذه الحالة، أصبح بإمكان مصمم واحد أو أكثر من مصممي المنتجات السيطرة على كامل التجربة الرقمية من البداية وحتى النهاية، دون الحاجة إلى تسليم أعمالهم إلى مصممين آخرين. إنّ إشراك العديد من مصممي المنتجات للعمل على نفس المُنتج لا يضمن طرح العديد من الأفكار فحسب، وإنّما يُوفّر عدّة مهارات لأشخاص من مستويات مُتقاربة وُمتكاملة تسمح بخلق تجربة رائعة. كما سيتعزز الشعور بالثقة عند إزالة الحواجز والمشاكل المُتعلقة بالملكية (من المسؤول عن ماذا)، ولن يقلق أحدهم بعد ذلك من التقليل من شأن عمله، لكن سيكون التركيز أكثر على أفضل الأفكار المطروحة. مع ذلك، ليس من المثالي استخدام "المنتج" كوصف للمصمم (أي نقول "مصمم منتجات")، فهذا يوحي بأنّه يُعنى بكيفية عمل الشيء وأدائه أكثر من مظهره، بينما يجب أن يشمل التصميم كل ما يتعلّق بالتجربة التي تخلقها: كيف يعمل المنتج، كيف يبدو، لماذا قمت ببنائه، وما هي المشاكل التي يحلها أو الأهداف التي يحققها. مصدر الصورة: Boston Interactive لماذا يجب ألا تتخصص لقد طُرح علي هذا السّؤال العديد من المرات من قبل طلاب الجامعات حول التخصصات، وعلى وجه التحديد كيف أختار ما أريد العمل عليه. ودائما ما أخبرهم أنّه كلما كانت مهاراتهم عامة أكثر، سيصبحون في وضع أفضل وستتاح لهم فرص أكثر. وهذا يعني امتلاك المعرفة بجميع الفنون التصميمية التي تجعلك مصمما عظيما، وليس التميّز في تخصص واحد، وامتلاك خبرة متوسطة في التخصصات الأخرى. وبذلك ستصبح مطلوبا أكثر من قبل أصحاب العمل، وكذلك من طرف الزملاء. ماذا بعد الآن؟ لا تهتم أفضل الشركات التي عملت لديها بمفهوم الملكية آنف الذّكر. ربما يشعر أحدهم بالغضب والانزعاج إذا قام زميل برتبة أقل بالتعديل على تصميمه، لكن في الواقع، ليست هذه هي الكيفية التي تعمل بها الفرق العظيمة. وفي نهاية المطاف، هذا هو ما يعرّف التصميم. التصميم يعني معرفة أفضل طريقة يمكن أن ينفّذ فيها أحدهم شيئا على موقعك، سواء كان تطبيقا أو صفحة تسويقية. وهذا لا يمكن حلّه بواسطة مصمم يعمل على جانب واحد فقط من المشروع، كما يجب ألّا يُحل بواسطة العديد من الأطراف مما يغيّر العمل الأصلي. وبذلك عندما نقوم بتقسيم التصميم إلى تخصصات مختلفة، فإننا بذلك نلحق الضرر بصناعتنا من خلال خلق تجارب مفككة في أغلب الأحيان. لنعد إلى لقبنا العام، "مصممون"، ولنعمل على ما نحن شغوفون به ونبني تجربة رائعة. ترجمة -وبتصرّف- للمقال The Versatile Designer لصاحبه: Ryan Scherf.