إذا كنتَ تساءلت لماذا لا تبدو أعمالك جميلة؟ أو لماذا لا تساعدك في كسب مشاريع جديد؟ لماذا لا تحدث أي صخب ولا يتحدث عنها أحد؟ ببساطة لأن أعمالك مليئة بالأخطاء الجوهرية التي تفسدها وتجعلها تبدو قبيحة وغير مثير للاهتمام.
أعلم بأن هذا مؤلم، لكنه الواقع للأسف، وقبل أن تغلق الصفحة وتطفئ المتصفح لترحل، دعني أعرفك في هذا المقال على 4 أخطاء شائعة ومنتشرة بكثير، تجدها أينما نظرت.
أضمن لك في حال تجنبتها في عملك القادم سترى فرقًا كبيرًا وملحوظًا على مستوى أعمالك.
في هذا المقال سنشبه تصميم واجهة المستخدم بغرفة من غرف المنزل، سيكون جزء من الكلام عبارة عن تخيل لشكل غرفة، وسأربط كل عيب من عيوب التصميم بشيء داخل هذه الغرفة، الهدف من هذه الطريقة توضيح إلى أي مدى يمكن أن تؤثر العيوب على التجربة ككل.
وفي نهاية المقال سنصمم تصميمين، واحد يحتوى على الأخطاء المذكورة والآخر بدونها، ثم نقارن بين النتيجتين.
المسافات
تخيل لو كان لديك غرفة جميلة وألوانها متناسقة، مرتبه بشكل جيد ولكنها ضيق، بالكاد يمكنك التحرك داخلها بدون أن تصطدم بشيء ما، ضيقة لدرجة لا يمكنك الجلوس على الكرسي ومد رجليك للاستلقاء. أو أنها وسيعه بشكل مبالغ فيه، لدرجة تضطر للمشي عدت أمتار من أجل تشغيل الإنارة.
كيف سيكون شعورك تجاه الغرفة؟ بالتأكيد لن تعجبك وستكره الوقت الذي تمضيه بداخلها بعض النظر عن النواحي الإيجابية الأخرى.
هذا ما تفعله المسافات في التصميم، فهي سلاح ذو حدين، إن صغرتها ظهر التصميم مكتظ ومزدحم، وإن كبرتها ظهر متفرق ومتباعد. عليك استخدام المسافات بحكمة، ويجب أن تجرب التصميم بنفسك لتتأكد هل المسافات فيه مناسبة أم لا.
إذا كان التصميم لموقع وب أفتح الصورة بالمتصفح، وعاملها كما لو أنها موقع حقيقي. كذلك الأمر بالنسبة لتطبيقات الهواتف الذكية، جرب فتح الصورة بالهاتف، وشاهد إن كانت المسافات صغيره على شاشة الهاتف أم كبيرة. عندما تضع التصميم تحت التجربة الفعلية ستكتشف هل المسافات فيه مناسبة أم لا.
في المثال السابق لاحظ كيف أن التصميم المتقارب أكثر من اللازم سيء، وكذلك الأمر مع التصميم المتباعد، بينما يظهر التصميم المتوسط بشكل رائع وجميل. (هذه ليست قاعدة ثابتة، في بعض الأوقات لا مشكلة من مخالفتها).
وزن الأيقونات
يمكن تشبيه وزن الأيقونات بأدوات الغرفة، مثل مقبض الباب، أزرار الإنارة، وحدة تحكم التكييف… إلى آخره من الأدوات المهمة. تخيل لو كانت الأدوات بأوزان مختلفة، فتجد مقبض الباب رقيق جدًا، وأزرار الإنارة سميكة ومختلفة الحجم فيما بينها، وزر تشغيل التكييف عملاق.
لاحظ كيف أن لكل أداوه حجم ووزن مختلفة، وكأن هناك أكثر من شخص قام ببناء الغرفة، مما يجعلها تبدو غير متناسقة إطلاقًا.
أعتقد أن هذا من أكثر الأخطاء التي شاهدته انتشارًا، يبدو أن المصمم لا يتعب نفسه باختيار أيقونات مناسبة ومتناسقة، المهم أيقونة يضعها في المكان الفلاني وخلاص، تهانينا لدينا تصميم جاهز.
الأمور لا تسير بهذه الطريقة يا عزيزي، إذا أردت عمل رائع وجميل، يجعل من ينظر له يقول “هذا مذهل” عليك الأهمام بك شيء، وليس فقط وزن الأيقونات.
دقق في الأيقونات السابقة وعلى ماذا تدل، وكيف أن بعضها يبدو متناسق، بينما البعض الآخر وبكل حق قبيح ويفسد تناسق التصميم.
حجم المحتوى
أما حجم المحتوى فهو مثل مكونات الغرفة، من أثاث وكراسي وأسره… تخيل لو كانت صغيرة جدًا مناسبة للأطفال ولا يمكن للبالغين استعمالها. أو كبير لدرجة لا تستطيع الصعود على الكرسي لتجلس عليه. تخيل كيف سيكون شعروك وأنت تجلس على كرسي صغير بالكاد يتسع لك، ضيق وغير مريح بتاتًا. متأكد بأنه سيكون شعور رائع 🙂
هذا ما يحدث عندما لا يكون حجم المحتوى مناسب، وكما قلنا في “المسافات” حجم المحتوى سلاح ذو حدين أيضًا، لا يمكن أن يكون المحتوى صغيرة متعبة للعين، ولا كبيرة يطغى على التصميم، يجب أن يكون حجم المحتوى مناسب لوظيفة التصميم، وللفئة المستهدفة.
لو كان التصميم موجه لكبار السن مثلًا يجب أن تكون الأحجام فيه أكبر، بينما لو كان موجه لفئة الشباب فعليها أن تكون متوسطه ليستطيع الجميع معرفه العنصر وما فائدته بدون أن يرهق عينيه.
بالطبع ليس المقصود بالمحتوى المحتوى النصي فقط، بل كل شيء في التصميم، الخطوط، الأيقونات، الأزرار والعناصر…
شاهد معي كيف أن المبالغة في حجم العناصر جعلت التصميم بدائي، بينما الأحجام الموزونة أظهرته بشكل متناسق.
توازن العناصر
بالنسبة لتوازن العناصر فيمكن تشبيهه بطريقة ترتيب محتويات الغرفة، اللوحات على الجدار، مكان التلفاز، وضعية السجاد. تخيل لو كانت اللوحات مائلة، أو أن التلفاز موجه لناحية معينة ومن يجلس في الجهة الأخرى لن يشاهده بوضوح. أو أن السجاد منزاح نحو جهة معينة ليترك الأخرى شبه فارغة. ألن تكون التجربة سيئة جدًا بسبب هذا الترتيب غير المتوازن؟
التصميم ليس لوحة فنية لا مشكلة في كون جزء لا يوازن باقي الأجزاء، ففي الأخير الهدف من اللوحة مختلف تمامًا عن الهدف من تصميم واجهة المستخدم UI.
تمامًا كما يفترض أن يحدث مع محتويات الغرفة، توازن العناصر في التصميم يجعلها أكثر تناسقًا وتناغمًا، فتبدو مرتبة ومنظمة ويمكن للمستخدم الربط بين الأجزاء وفهمها بسهولة.
في التصميم السابق لاحظ كيف أن العناصر غير متوازنة، وبعضها خارج عن خطوط الإرشاد التي تحدد بداية ونهاية العناصر في التصميم، مع أن المفترض بها أن تكون متوازنة.
خلاصة
في نهاية المقال دعونا نجمع كل الأخطاء في تصميم واحد، ثم نعيد التصميم بتجنب هذه الأخطاء، وبعدها نقارن بين النتيجتين لنرى الفرق الشاسع في المستوى.
لاحظ كيف أن التصميم الأيمن لا يسير على خطى واضحة ومحددة:
- لكل أيقونة حجم مختلف ووزن مختلفة أيضًا عن باقي الأيقونات.
- الخطوط ليست بأفضل فهي إما كبيرة جدًا أو صغير جدًا.
- المسافات هي الأخرى مختلفة ففي بعض الأماكن متلاصقة وفي أماكن أخرى متباعدة.
- العناصر بشكل عام لا تملك خطوط واضحة من أين تبدأ وإلى أين تنتهي، بعضها منزاح نحو اليمين والآخر نحو اليسار.
- التصميم ككل فوضوي وسيئ جدًا.
على الجانب الآخر لاحظ كيف أن التصميم الثاني مختلفة تمامًا:
- الأيقونات متناسقة، بنفس الحجم والوزن.
- حجم الخطوط متدرج، العنوان كبير وسميك، النص الفرعي أصغر وأقل سماكه، الخطوط مناسبة من حيث الحجم، ليست بكبير ولا بصغير.
- المسافات في الوسط، ليست بالمتباعدة ولا بالمتلاصقة.
- التصميم مرتب من حيث توازن العناصر، العناصر تبدأ في نقاط محددة وتنتهي كذلك في نقاط محددة.
ختامًا، كما قلت سابقًا، تصميم واجهة المستخدم ليس لوحة فنية. كل جزء فيه يفترض به أن يخدم ويؤدي وظيفة معينة، ليكن حرصك على أن يخرج التصميم بأفضل شكل ممكن، وبأقل الأخطاء.
بالتأكيد التصميم الجيد يأخذ وقت وجهد أكثر، وهذا طبيعي، للجودة ثمنها. وأنهي حديثي بقول رسول الله عليه أفضل الصلاة والتسليم:
إن الله يحب إذا عمل أحدكم عملًا أن يُتقنه.
لاحظ بأنه قال “يُتقنه” وليس يُنجزه، ليكن عملك متقنًا ترضي به الله قبل الناس.
