مبادئ تصميم واجهة الهاتف

أين تختلف واجهة الهاتف عن واجهة سطح المكتب؟

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

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

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

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

إلى أين يصل الإبهام، وكم ينبغي أن يكون حجم الهدف؟

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

أما حجم الهدف فليس موضع تخمين، لأن له أرقاماً والأرقام منشورة. يقول معيار WCAG 2.2 في البند 2.5.8 إن هدف مدخلات المؤشر لا يقل عن 24 في 24 بكسل CSS، مع استثناءات يعددها بنفسه: هدف أصغر تحيطه مسافة كافية، أو وظيفة متاحة بطريقة أخرى في الصفحة نفسها، أو هدف يقع داخل جملة. ودليل إتاحة أندرويد نفسه يعطي رقماً أكبر: 48 في 48 بكسل مستقلاً عن الكثافة على الأقل، مع 8 وحدات فصل بين هدفين على الأقل، ويوضح أن 48 وحدة تساوي نحو تسعة مليمترات فيزيائية على أي شاشة.

وفي صفحة غوغل نفسها نقطة أنفع من الرقم ذاته: منطقة اللمس تمتد خارج الحدود المرئية للعنصر. فأيقونة تبدو بعرض 24 وحدة تصير هدفاً بـ48 وحدة بفضل الحشو حولها. أي لا يلزمك أن تجعل الزر كبيراً وقبيحاً؛ يلزمك أن تجعل المنطقة التي تسمع اللمسة كبيرة.

وتحذير بشأن الرقم الذي ينقله الجميع. جملة «أبل تقول 44 في 44 نقطة» تتكرر في كل مقال عن تصميم الهاتف بالعربية وبالإنجليزية. بحثنا اليوم في صفحات دليل الواجهة البشرية لدى أبل: صفحة التخطيط وصفحة الإتاحة وصفحة الأزرار وصفحة الإيماءات. والرقم غير مكتوب في أي منها بوصفه حداً أدنى لهدف اللمس. والموضع الوحيد الذي وجدنا فيه 44 نقطة كان جدول أحجام الأزرار في visionOS، وهو شيء آخر. فليس الأمر أن الرقم خاطئ؛ بل لم نجد له مصدراً حياً، ونفضّل أن نقول لا نعرف على أن ننسب إلى أبل كلاماً. والرقمان اللذان يمكن الاستناد إليهما هما اللذان في الأعلى.

أألتزم عرف المنصة أم أضع تصميمي الخاص؟

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

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

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

وموقف نادراً ما تراه في صفحة بيع: إن كانت ميزانيتك ضيقة فنفّذ الأعراف بشكل صحيح أولاً ثم اسعَ إلى التميّز البصري. فالتطبيق الذي واجهته عادية لكنها صحيحة يُستعمل أكثر من تطبيق مميز لكنه محيّر.

أين تنكسر الواجهة الفارسية على الهاتف؟

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

أولاً الأرقام. تقول أبل إن ترتيب الأرقام داخل عدد بعينه لا يُعكس أبداً: رقم الهاتف ورقم البطاقة والعدد 541 تحتفظ بالترتيب نفسه في أي اتجاه. لكن ترتيب الأرقام التي تظهر تقدماً أو عدّاً يجب أن يُعكس، لأن الأداة نفسها معكوسة. والقاعدتان تتشابهان وهما عملياً متعاكستان.

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

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

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

الحالات التي لا يرسمها أحد في التصميم الأول

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

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

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

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