عندما تبدأ في صناعة برمجيات معينة ( برنامج، موقع، تطبيق ... ) فأنت تضع في الحسبان في الأخير ان برمجيتك تلك سيستخدمها مستخدم او مجموعة من المستخدمين الأخيرين (Final Users)، لذلك فأنت تبسط لهم برمجيتك تلك قدر الإمكان، فأنت قادر على التعامل فقط بمجموعة من الأوامر من أجل إستخدام البرمجية، لكنك و رغم ذلك تقوم في الأخير بصناعة واجهة جرافيكية GUI و ذلك لأن المستخدم الأخير لا يستطيع التعامل مع الأوامر مثلك أنت ... ما أحاول ان اخبرك إياه، ان المستخدم الأخير هو من يحكم على برمجيتك تلك .
من هذا المنطلق، ظهر ما يسمى بالـ UI و الـ UX، سنترك لك رابطا خلال مقالنا هذا لتفهم كل من الـ UI و UX، لكن في الوقت الراهن سنفسره لك بصفة جد مختصرة، ببساطة يعنيان User Interface و User Experience، الـ UI يعني الواجهة الجرافيكية للبرمجية، مثل استخدام الألوان و تناسقها و مكانها و ما الى ذلك، اما الـ User Experience فهو ما يتوجب عليك فعله او إضافته لكونه ضروري في البرمجة لكن بطريقة تناسب المستخدم، فمثلا اعتدنا ان يكون الـ Login و الـ Sign up في منطقة واحدة، و هي خاصية UX ، لكن ان وضعت زر الدخول في مكان ما ، ثم زر التسجيل مكان اخر، فبذلك خالفت الـ UX و مستخدمو برمجيتك لن يمكنهم فهم طريقة عمل برمجيتك بشكل أفضل .
حتى نوفر للمبرمجين و كذا المصممين من خلال هذا المقال مفهوما كاملا لأهم قواعد الـ UX، فسنستعرض عليكم أهم القوانين التي يجب عليك حتما إتباعها أثناء صناعتك لواجهات برمجياتك الخاصة، و هذه مجموعة من الكورسات لتعلم الـ UI/UX في حالة اردت تعلم هذه القواعد و تطبيقها.
عند صناعتك لبرمجيات معينة، و تريد من المستخدم الأخير ان يستخدم خدمة في برمجيتك أكثر من خدمة أخرى، او ينقر على زر أكثر من زر آخر، فعليك بالحجم، يُتبث الحجم فعاليته في الإستهداف الأكبر، في قواعد الـ UX بإختصار، كلما كبر الشيئ كلما توسع المستخدم في رؤيته بشكل أوضح، و إستخدامه بشكل سلس، على عكس الحجم الصغير الذي يوفر للمستخدم عائقا باطني لعدم النقر عليه الا نادرا او ان بحث كثيرا في الصفحة .
كمثال حي على ذلك، دعنا نقول ان لديك برنامجا على الحاسوب يقوم بتحميل الفيديوهات من اليوتيوب عبر لصق الرابط في خانة معينة ثم النقر على زر Download، لكن بجانب الزر يوجد زر " Like Us " تريد من المستخدم النقر عليه ليُعجب بصفحتك على الفيسبوك، حتى تقوم بتشجيع المستخدم على فعل ذلك، إجعل زر "Like Us " اكبر من زر " Download " و بذلك سيثير الزر إنتباه الزائرو قد ينقر عليه أيضا، بينما التحميل سيستغرق بعض الوقت للبحث عنه ثم النقر عليه ( بالوقت لا نعني دقائق او ثواني بل فقط هنيهات بسيطة ) .
هل اتخذت قرارا في احد الأيام لفعل شيئ ما ثم بدأت تحبك القصة في عقلك و تقول : " إن فعلت هذا ، فسأجد مشكلة أخرى و هي هذه، ثم ساعاني من كذا، و تبا الاخر سيقوم بكذا ايضا " فتتخلى عن ذلك الخيار و تتخذ الخيار السهل و البسيط أليس كذلك ؟
قانون Hicks في الـ UX يقول نفس الشيئ، ان اردت من المستخدم مثلا ان يتسجل في موقعك، فلا تقم بتعقيد الأمر و تضع له عشرات المعلومات من أجل التسجيل، وفر له أسهل طريقة لفعل ذلك، خلصه من كل الإحتمالات الصعبة حتى يكون خيار التسجيل بسيطا للغاية، فكلما ازدادة سهولة و سلاسة فعل الشيئ، إزداد المهتمين بها و سهل فعلها من طرف المستخدمين، و كلما ازدادت صعوبتها، فقدت عددا كبيرا من المستخدمين .
يقول قانون Jackob في الـ UX، ان العديد من الأشخاص الآن يقضون أوقاتهم في معظم المواقع الأخرى المشهورة مثل فيسبوك و تويتر و جوجل و يوتيوب و غيرها، و إن اردت إقناع زوارك بإستخدام موقعك أنت أيضا، فعليك ان تجاريهم، ان تتبع قواعد تلك المواقع، حتى يشعر المستخدم بالأريحة في موقعك و لا يجد أي صعوبة في تصفحه .
على سبيل المثال، لنأخذ مثال موقع إجتماعي خاص بك، فنحن في المواقع الإجتماعية معظمها او كلها، بعد التسجيل يظهر لنا في الأعلى Navbar تتضمن معلوماتنا و بعض الروابط مثل : الرئيسية، الحساب، الخروج ...، و تتضمن صورتنا و ما الى ذلك، اذا ما قمت في موقعك الإجتماعي الخاص بمخالفة هذا الأمر و وضعتها مثلا في الأسفل بدل الأعلى، قد يجد مستخدموك عائقا كبيرا في استخدام موقعك لانه غريب قليلا عنهم، فيفضل الخروج منه و الرجوع الى الفيسبوك .
يقول هذا القانون ان للناس قابلية أفضل على التدقيق في الصور البسيطة و السهلة، لانها تجعلهم اكثر رائحة و بساطة و تُجنبهم خيار التحديق في الصورة من أجل التفكير في مغزاها، لذلك إستخدام الصور بتصميم متناسق، خفيفة و غير معقدة تتضمن اشكال هندسية واضحة لها نتائج افضل على برمجياتك من صور بألوان كثيرة و كتابات فوقها و مشوشة او كثيرة الخربشات .
قانون بسيط يحثك عزيزي على إستخدام البساطة دائما حتى في صورك و تصاميمك .
ما يحاول هذا القانون تفسيره انه اي شيئ مرتبط بشيئ اخر يجب ان يكونا متقاربين لان المستخدم يرى اي شيئ متقارب متعلق ببعضه البعض، فإن وضعت صورة و أسفلها مباشرة نصا، فهذا يعني ان النص يشرح الصورة، و ان وضعت الصورة و تركت فراغا ثم كتبت نصا، فالمستخدم لن يربط بين الصورة و النص إطلاقا .
القانون نفسه يتم تطبيقه في الـ UX، من المفترض ان يلج المستخدم للموقع فتظهر له الصفحة في ثواني و يتصفح ما يريد و يستفيد و بعدها يخرج، خصوصا ان كان المستخدم يحتاج الى تلك الصفحة في عجالة، فماذا سيحدث له لو ولج لموقعك و قضى 3 دقائق ينتظر تحميل الصفحة؟ سيخرج بالتأكيد و لن يعود مجددا .
ان اردت من المستخدم ان يستخدم شيئا في موقعك، و لنقل الإعلانات مثلا او خاصية " التسجيل عبر البريد "، فأفضل مكان لهذه الأشياء هي اول الصفحة او اخر الصفحة ، و بالنسبة ترجيحية ضعها في أول الصفحة، لان معظم القراء لا يصلون لنهاية الصفحة Bounce Rate .
نجد هذا القانون كثيرا في مواقع شراء الخطط في الموقع او الحسابات، تجده يعرض عليك 4 أصناف من الحسابات، العادي و هو مجاني، المميز و هو بسعر 12 دولار سنويا، الـ VIP و هو بسعر 20 دولار سنويا و أخيرا الـ Super User بسعر 50 دولار سنويا، يقوم أصحاب الموقع لتجربة إستخدام أفضل بإختيار الوان مغايرة لصنف الحسابات الثالث وهو VIP كمثال لكون الأرخص و الأفضل بين الجميع، اي ارخص من الSuperUser و أفضل من العادي و المميز .
حتى نوفر للمبرمجين و كذا المصممين من خلال هذا المقال مفهوما كاملا لأهم قواعد الـ UX، فسنستعرض عليكم أهم القوانين التي يجب عليك حتما إتباعها أثناء صناعتك لواجهات برمجياتك الخاصة، و هذه مجموعة من الكورسات لتعلم الـ UI/UX في حالة اردت تعلم هذه القواعد و تطبيقها.
- قانون Fitts : كبر الحجم = إستهداف قوي :
عند صناعتك لبرمجيات معينة، و تريد من المستخدم الأخير ان يستخدم خدمة في برمجيتك أكثر من خدمة أخرى، او ينقر على زر أكثر من زر آخر، فعليك بالحجم، يُتبث الحجم فعاليته في الإستهداف الأكبر، في قواعد الـ UX بإختصار، كلما كبر الشيئ كلما توسع المستخدم في رؤيته بشكل أوضح، و إستخدامه بشكل سلس، على عكس الحجم الصغير الذي يوفر للمستخدم عائقا باطني لعدم النقر عليه الا نادرا او ان بحث كثيرا في الصفحة .
كمثال حي على ذلك، دعنا نقول ان لديك برنامجا على الحاسوب يقوم بتحميل الفيديوهات من اليوتيوب عبر لصق الرابط في خانة معينة ثم النقر على زر Download، لكن بجانب الزر يوجد زر " Like Us " تريد من المستخدم النقر عليه ليُعجب بصفحتك على الفيسبوك، حتى تقوم بتشجيع المستخدم على فعل ذلك، إجعل زر "Like Us " اكبر من زر " Download " و بذلك سيثير الزر إنتباه الزائرو قد ينقر عليه أيضا، بينما التحميل سيستغرق بعض الوقت للبحث عنه ثم النقر عليه ( بالوقت لا نعني دقائق او ثواني بل فقط هنيهات بسيطة ) .
- قانون Hicks : تزداد نسبة إتخاذ القرار بإزدياد صعوبة المهمة :
هل اتخذت قرارا في احد الأيام لفعل شيئ ما ثم بدأت تحبك القصة في عقلك و تقول : " إن فعلت هذا ، فسأجد مشكلة أخرى و هي هذه، ثم ساعاني من كذا، و تبا الاخر سيقوم بكذا ايضا " فتتخلى عن ذلك الخيار و تتخذ الخيار السهل و البسيط أليس كذلك ؟
قانون Hicks في الـ UX يقول نفس الشيئ، ان اردت من المستخدم مثلا ان يتسجل في موقعك، فلا تقم بتعقيد الأمر و تضع له عشرات المعلومات من أجل التسجيل، وفر له أسهل طريقة لفعل ذلك، خلصه من كل الإحتمالات الصعبة حتى يكون خيار التسجيل بسيطا للغاية، فكلما ازدادة سهولة و سلاسة فعل الشيئ، إزداد المهتمين بها و سهل فعلها من طرف المستخدمين، و كلما ازدادت صعوبتها، فقدت عددا كبيرا من المستخدمين .
إقرأ أيضا : مجموعة شعارات و Logos إبداعية بأفكار خفية ستنمي حس الإبداع لديك !
- قانون Jackob : على موقعك ان يكون مثل المواقع الأخرى من حيث التصفح :
يقول قانون Jackob في الـ UX، ان العديد من الأشخاص الآن يقضون أوقاتهم في معظم المواقع الأخرى المشهورة مثل فيسبوك و تويتر و جوجل و يوتيوب و غيرها، و إن اردت إقناع زوارك بإستخدام موقعك أنت أيضا، فعليك ان تجاريهم، ان تتبع قواعد تلك المواقع، حتى يشعر المستخدم بالأريحة في موقعك و لا يجد أي صعوبة في تصفحه .
على سبيل المثال، لنأخذ مثال موقع إجتماعي خاص بك، فنحن في المواقع الإجتماعية معظمها او كلها، بعد التسجيل يظهر لنا في الأعلى Navbar تتضمن معلوماتنا و بعض الروابط مثل : الرئيسية، الحساب، الخروج ...، و تتضمن صورتنا و ما الى ذلك، اذا ما قمت في موقعك الإجتماعي الخاص بمخالفة هذا الأمر و وضعتها مثلا في الأسفل بدل الأعلى، قد يجد مستخدموك عائقا كبيرا في استخدام موقعك لانه غريب قليلا عنهم، فيفضل الخروج منه و الرجوع الى الفيسبوك .
- قانون Pragnanz : صور بسيطة و واضحة أفضل من الصور المعقدة :
يقول هذا القانون ان للناس قابلية أفضل على التدقيق في الصور البسيطة و السهلة، لانها تجعلهم اكثر رائحة و بساطة و تُجنبهم خيار التحديق في الصورة من أجل التفكير في مغزاها، لذلك إستخدام الصور بتصميم متناسق، خفيفة و غير معقدة تتضمن اشكال هندسية واضحة لها نتائج افضل على برمجياتك من صور بألوان كثيرة و كتابات فوقها و مشوشة او كثيرة الخربشات .
قانون بسيط يحثك عزيزي على إستخدام البساطة دائما حتى في صورك و تصاميمك .
إقرأ أيضا : إقرأ أيضا : ما هو الUI و الUX ؟ و ما الفرق بينهما ؟
- قانون الـ Proximity : تقارب يعني تجميع :
قانون اخر من قوانين الـ UX يقدم لنا نظرة منطقية على البرمجيات بشكل بسيط، يقول هذا القانون ان كل شيئ متقارب هو في الأصل يندرج تحت إطار مجموعة ما، فإن قمت مثلا بتقريب 3 من الـ inputs بشكل عمودي، ثم وضعت فاصلا و بعدها ادرجت 4 inputs اخرى بنفس الشكل، سيعتقد المستخدم ان الأولى مدخلات تجميعية متعلقة بشيئ ما ( مثلا الاسم و النسب و العنوان ) و ان التجميعة الثانية متعلقة بشيئ اخر تماما .ما يحاول هذا القانون تفسيره انه اي شيئ مرتبط بشيئ اخر يجب ان يكونا متقاربين لان المستخدم يرى اي شيئ متقارب متعلق ببعضه البعض، فإن وضعت صورة و أسفلها مباشرة نصا، فهذا يعني ان النص يشرح الصورة، و ان وضعت الصورة و تركت فراغا ثم كتبت نصا، فالمستخدم لن يربط بين الصورة و النص إطلاقا .
- قانون Parkinson : الوقت عامل مهم :
حتى اقربك اكثر من قانون Parkinson، فتخيل معي انك ستجتاز مقابلة عمل في ظرف 30 دقيقة على الساعة التاسعة، اي انه يجب عليك ان تجتاز المقابلة على الساعة 9:00 و تنتهي مع 9:30، لكن لا يحدث هذا حقا، ففي الغالب ستبدأ المقابلة على الساعة 10:15 و ستنتهي على الساعة 10:25 دقيقة، كيف سيشعر الشخص الذي سيجتاز المقابلة في نظرك؟ سيحقد عليهم اليس كذلك ؟ شركة لعينة لا تحترم المواعيد .القانون نفسه يتم تطبيقه في الـ UX، من المفترض ان يلج المستخدم للموقع فتظهر له الصفحة في ثواني و يتصفح ما يريد و يستفيد و بعدها يخرج، خصوصا ان كان المستخدم يحتاج الى تلك الصفحة في عجالة، فماذا سيحدث له لو ولج لموقعك و قضى 3 دقائق ينتظر تحميل الصفحة؟ سيخرج بالتأكيد و لن يعود مجددا .
إقرأ أيضا : 5 أسباب جعلتني اسقط في حب Adobe XD ... اشاركها معك لتتعرف أكثر على هذاالبرنامج !
- قانون Serial Position : الأول و الأخير :
يقول هذا القانون ان المستخدم في الغالب يتذكر العنصر الأول و الأخير في أي سلسلة تفاعلية للألعاب او الكلمات او حتى القصص و العبارات و اي شيئ في هذا العالم، فمثلا، إن احضرت طفلا و أخبرته : هل تريد حلوى ام شوكولاطة ام مارشميلو ام عرق سوس ؟ سيكون اختياره متعلقا في العنصر الأول و الأخير بنسبة كبيرة جدا، و سيختار الحلوى او عرق السوس .ان اردت من المستخدم ان يستخدم شيئا في موقعك، و لنقل الإعلانات مثلا او خاصية " التسجيل عبر البريد "، فأفضل مكان لهذه الأشياء هي اول الصفحة او اخر الصفحة ، و بالنسبة ترجيحية ضعها في أول الصفحة، لان معظم القراء لا يصلون لنهاية الصفحة Bounce Rate .
- تأثير Von Restorff : المتميز هو الأكثر تأثيرا :
يقول هذا القانون، انه في سلسلة اشياء متشابهة و متراصة، العنصر المميز في السلسلة هو الأكثر جذبا و إنتباها، فإن وضعت مجموعة كرات بلياردو صفراء في صف واحد و و ضعت الكرة السوداء في الوسط، فسيعرف الشخص ان تلك الكرة مميزة، ينطبق عليها قانون اخر غير قوانين الكرة الحمراء .نجد هذا القانون كثيرا في مواقع شراء الخطط في الموقع او الحسابات، تجده يعرض عليك 4 أصناف من الحسابات، العادي و هو مجاني، المميز و هو بسعر 12 دولار سنويا، الـ VIP و هو بسعر 20 دولار سنويا و أخيرا الـ Super User بسعر 50 دولار سنويا، يقوم أصحاب الموقع لتجربة إستخدام أفضل بإختيار الوان مغايرة لصنف الحسابات الثالث وهو VIP كمثال لكون الأرخص و الأفضل بين الجميع، اي ارخص من الSuperUser و أفضل من العادي و المميز .