ما هو تصميم واجهة المستخدم الرسومية؟
منذ بداية ظهور أجهزة الكمبيوتر ، حلم المطورون والمصممين بإنشاء تفاعل ودي بين الإنسان والحاسوب ( HCI ). تُعد HCIs لعمليات الكمبيوتر التي تكون بديهية وسهلة التعلم دون ممارسة مسبقة أو معرفة بلغات كمبيوتر معينة.
دليل إنشاء واجهة مستخدم Gui
يعد إنشاء واجهة مستخدم رسومية (GUI) ، والتي تتيح للمستخدمين التفاعل مباشرة مع أجهزتهم وإكمال مهام معينة من خلال معالجة عناصر مثل الرموز وأشرطة التمرير ، إحدى الطرق التي يجعل المصممون أجهزتهم الرقمية أكثر كفاءة وقابلة للاستخدام.
في هذه المقالة ، سنراجع مفهوم واجهة المستخدم الرسومية ، وكيف تعمل ، وعملية تصميم واجهة المستخدم الرسومية ، والمبادئ التي يجب اتباعها عند إنشاء واجهات المستخدم الرسومية.
ما هي واجهة المستخدم الرسومية؟
ببساطة ، تساعد واجهات المستخدم الرسومية المستخدمين لديك على القيام بأشياء داخل جهازك أو النظام الأساسي أو البرنامج أو التطبيق دون الحاجة إلى كتابة الأوامر أو معرفة الترميز وراء الإجراء.
بعض الأمثلة المحددة على واجهة المستخدم الرسومية:
- نقل مستند إلى مجلد "المهملات" على سطح المكتب
- النقر فوق رمز لبدء تشغيل التطبيق
- نقل الملفات من مجلد إلى آخر
لفهم الفكرة الأساسية لهذا النوع من الواجهة بشكل أفضل ، نحتاج إلى الغوص في سجل واجهة المستخدم الرسومية.
بينما لا يوجد مبتكر واحد لواجهة المستخدم الرسومية ، فإن الأفكار لها جذور في عمل فانيفار بوش في معهد ماساتشوستس للتكنولوجيا خلال الحرب العالمية الثانية.
وصف بوش مفهوم جهاز يسمى memex ، حيث يمكن للناس تخزين أنواع مختلفة من المعلومات. ووصف ميميكس بأنها " مكمل حميمي موسع لذاكرة المرء ." أثرت أفكار بوش على عالم الكمبيوتر إيفان ساذرلاند ، الذي أنشأ نظامًا يسمى Sketchpad. كان Sketchpad سابقًا لـ GUI.
اعتمد هذا المفهوم على استعارة سطح المكتب - حاول المصممون محاكاة بيئة سطح المكتب. يتم استخدام استعارة ملف ومجلد لتنظيم المحتوى بطريقة منظمة. في وقت لاحق ، تبنت Apple و Microsoft هذا المفهوم في أنظمة التشغيل الخاصة بهما.
كيف تعمل واجهة المستخدم الرسومية؟
تتكون واجهات المستخدم الرسومية من عناصر رسومية يتفاعل معها المستخدمون. النموذج الأكثر شيوعًا لواجهات المستخدم الرسومية هو النوافذ والأيقونات والقوائم والمؤشر ( WIMP ).
يشير نموذج WIMP إلى أجهزة الإدخال الافتراضية التي يتم التحكم فيها بواسطة جهاز تأشير فعلي (ماوس) ، وحاويات المحتوى (windows) ، والكائنات الرسومية المستخدمة لبدء بعض الإجراءات (الرموز والقوائم).
تشير معظم واجهات المستخدم الرسومية إلى نمط وحدة التحكم في عرض النموذج (MVC). يفصل هذا النمط التمثيلات الداخلية للمعلومات (النموذج) عن الطريقة التي يستقبلها المستخدمون بها (عرض). تعمل وحدة التحكم كوسيط بين طرفين.
يسمح MVC بهياكل مرنة ، بحيث يمكنك إعادة تصميم العناصر دون أي تغييرات على النموذج. يصبح العرض بعد ذلك تقريبًا مثل المظهر المرئي الذي يمكن للمصممين تطبيقه على نفس منطق الأعمال للتطبيق.
يمكن تغيير التصميم المرئي لمربع حوار النظام في MacOS في الإصدار التالي من نظام التشغيل دون إدخال أي تغييرات على منطق الأعمال (وظيفيًا).
يمكن تغيير التصميم المرئي لمربع حوار النظام في MacOS في الإصدار التالي من نظام التشغيل دون إدخال أي تغييرات على منطق الأعمال (وظيفيًا). صورة الائتمان أبل .
مزايا وعيوب واجهات المستخدم الرسومية
بالمقارنة مع واجهة مستخدم سطر الأوامر ، تتمتع واجهات المستخدم الرسومية بالعديد من المزايا:
من مزايا واجهات المستخدم الرسومية منحنى التعلم المنخفض.
باستخدام واجهة المستخدم الرسومية ، لا يحتاج المستخدمون إلى تعلم أوامر محددة أو امتلاك مهارات كمبيوتر متخصصة.
من مزايا واجهات المستخدم الرسومية تكلفة تفاعل أقل .
لا يتعين على المستخدم كتابة الأوامر باستخدام لوحة المفاتيح ؛ يمكنهم الانتقال إلى الكائن الرسومي والنقر عليه أو النقر فوقه لتنفيذ الإجراء.
من مزايا واجهات المستخدم الرسومية ردود فعل فورية.
يتعامل المستخدمون مع الكائنات في الوقت الفعلي ويمكنهم رؤية نتائج أفعالهم.
من عيوب واجهات المستخدم الرسومية
ولكن هناك أيضًا بعض العيوب في هذا النموذج:
من عيوب واجهات المستخدم الرسومية أسهل لارتكاب الأخطاء.
لارتكاب خطأ في واجهة سطر الأوامر ، تحتاج إلى كتابة أمر وتنفيذه. لارتكاب خطأ في واجهة المستخدم الرسومية ، كل ما عليك فعله هو النقر فوق الزر الخطأ.
من عيوب واجهات المستخدم الرسومية قيود مدمجة.
على عكس واجهات المستخدم الرسومية ، توفر واجهة سطر الأوامر مزيدًا من الحرية والمرونة للمستخدمين ذوي الخبرة ، مما يسمح لهم بتنفيذ بعض العمليات المعقدة أو تعديل تأكيد النظام.
عملية تصميم واجهة المستخدم الرسومية.
من المستحيل التفكير في تصميم واجهة المستخدم الرسومية بمعزل عن المنتج الذي سيستخدمه. وبالتالي ، فإن عملية التصميم أدناه هي مجرد مقتطف من خمس مراحل عامة من عملية التفكير التصميمي (التعاطف ، والتعريف ، والتفكير ، والنموذج الأولي ، والاختبار) التي تستخدمها فرق تصميم المنتج.
يتعلق التصميم الجيد لواجهة المستخدم بفهم احتياجات المستخدم.
يحتاج المصممون إلى التفكير في المهام التي سيكملها المستخدم باستخدام منتج (احتياجات المستخدم) ، وكذلك متى (بيئة المستخدم) وكيف ( بيئة عمل التصميم ) ، وتحويل هذه المعلومات إلى متطلبات وظيفية.
في نهاية هذه الخطوة ، يجب أن يكون مصممو المنتجات قادرين على الإجابة على الأسئلة التالية:
- ماذا يريد المستخدم أن يفعله النظام؟
- ما الميزات التي يجب أن يدعمها المنتج؟
- كيف سيتناسب المنتج مع الأنشطة اليومية للمستخدم؟
- أين سيتفاعل المستخدم مع النظام؟
هندسة معلومات التصميم
يلعب علم نفس UX دورًا مهمًا في تصميم واجهة المستخدم الرسومية. يجب أن تبدو التفاعلات مع واجهة المستخدم الرسومية طبيعية للمستخدمين ، وهذا يحدث فقط عندما تتوافق الميزات والمحتوى مع النماذج العقلية للمستخدم.
لهذا السبب بعد التعرف على متطلبات النظام ، من المهم هيكلة المحتوى والوظائف بطريقة تكون منطقية للمستخدم.
تتمثل إحدى طرق القيام بذلك في إنشاء تسلسل هرمي للصفحات لمساعدة المستخدمين في العثور على المعلومات دون بذل الكثير من الجهد. على سبيل المثال ، عندما يقوم المستخدمون بتشغيل تطبيق لتحرير المستندات .
فإنهم يتوقعون العثور على جميع خيارات التحرير في قائمة المستوى الأعلى.
سيؤدي إخفاء أو تغيير موضع عناصر التحكم الرئيسية إلى جعل التفاعل مع المنتج أكثر صعوبة للمستخدمين.
في هذه الخطوة ، نحاول إنشاء تمثيل مرئي لواجهة المستخدم الرسومية. تصميم المنتج هو عملية تكرارية واعتمادًا على مرحلة تصميم المنتج ، يمكن أن تكون النماذج الأولية أي شيء من إطارات سلكية منخفضة الدقة قابلة للنقر إلى نموذج أولي عالي الدقة يشبه المنتج النهائي ويعمل تقريبًا.
اختبارات لفهم مدى نجاح تجربة المستخدم.
يعد تصميم المنتج عملية تكرارية ويكاد يكون من المستحيل إنشاء حل مثالي منذ المحاولة الأولى.
سيساعدك الاختبار مع الأشخاص الذين يمثلون جمهورك المستهدف على فهم مدى نجاح منتجك مع المستخدمين وما هي مجالات التحسين لديك. تتبع فرق التصميم الرائعة دورة البناء والقياس والتعلم حتى يتم إنشاء حل مناسب لمستخدميهم.
مبادئ يجب مراعاتها عند تصميم واجهات المستخدم الرسومية.
كما أوضحنا سابقًا ، فإن الهدف من تصميم واجهة المستخدم الرسومية هو تحسين الاتصال بين الإنسان والآلة. سنتعمق في بعض المبادئ المقبولة عمومًا لتصميم واجهة المستخدم الرسومية أدناه.
البساطة هي افضل قياس لمى نجاح تجربة المستخدم.
" أفضل واجهة هي عدم وجود واجهة. "
كريشنا الذهبي افضل الواجهات غير مرئية للمستخدم.
يشير هذا الاقتباس من Golden Krishna إلى فكرة أن أفضل الواجهات تكاد تكون غير مرئية للمستخدم. يتعارض أي اهتمام مخصص لتصميم واجهة المستخدم الرسومية نفسه مع المهمة الأساسية للمستخدم ، وهي تحقيق هدفه في أقصر وقت ممكن.
لهذا السبب من الضروري إزالة جميع العناصر غير الضرورية وصقل العناصر الموجودة لتحقيق أقصى قدر من الوضوح.
فيما يلي بعض التوصيات لإنشاء واجهة بسيطة قدر الإمكان:
- اجعل الشاشات أقل ازدحامًا عن طريق إزالة جميع التفاصيل غير الضرورية. اترك فقط العناصر الأكثر أهمية لمهام المستخدم.
- اجعل من السهل على المستخدمين اكتشاف العناصر أو الإجراءات المهمة. تتميز بوظائف مهمة بشكل بارز ، وتخفي الوظائف الأقل استخدامًا.
تأثير الاستخدام الجمالي
يحكم الناس على الكتاب من غلافه.
ينطبق هذا على أشياء كثيرة في عالمنا ، بما في ذلك واجهات المستخدم الرسومية.
نرى ذلك من خلال تأثير قابلية الاستخدام الجمالي ، والذي ينص على أن المستخدمين أكثر تسامحًا مع مشكلات الاستخدام البسيطة عندما يجدون واجهة جذابة بصريًا.
يمكن أن تحسن الجماليات الجيدة من تصور المستخدم لواجهة المستخدم الرسومية ، لذلك من المهم إنشاء تصميم يجعل المستخدمين سعداء.
التناسق اجمل تصميمات واجهة المستخدم الرسمية.
ينص مبدأ التناسق على أن النظام يجب أن يبدو ويعمل بنفس الشكل طوال الوقت. يمكن أن يؤدي عدم الاتساق إلى جعل حتى أجمل تصميمات واجهة المستخدم الرسومية غير قابلة للاستخدام تمامًا.
وبالتالي ، من الأهمية بمكان التصميم المرئي (يجب أن يكون للمكونات المتشابهة مظهرًا مشابهًا) والوظيفية (يجب أن يكون للمكونات المتشابهة استخدامات متشابهة). يمكن لنظام التصميم - بما في ذلك مكتبات المكونات وأدلة الأنماط - المساعدة في ذلك.
التصميم الجيد لواجهة المستخدم يساعد على تحقيق أهدافهم.
يجب أن يركز التصميم الجيد لواجهة المستخدم أيضًا على مساعدة المستخدمين على تحقيق أهدافهم. عندما يتعلق الأمر بتصميم واجهة المستخدم الرسومية ، فإن إنشاء تجربة مألوفة هو أولوية قصوى.
إليك ما يعنيه هذا:
استخدم الإمكانيات للعناصر الفردية لمساعدة المستخدمين على فك تشفير معناها. تعتبر العروض خواصًا مرئية للعناصر التي تُظهر للمستخدمين الإجراءات التي يمكنهم اتخاذها.
تساعد الموارد المألوفة ، مثل الظلال على الأزرار ، المستخدمين على فهم ما يفعله العنصر بمجرد النظر إليه.
اتبع قواعد المنصة. عندما يكسر المصممون الاصطلاحات ، فإنهم يجعلون من الصعب على المستخدمين التفاعل مع المنتج.
اجعل واجهة النظام سهلة الاستخدام.
عند تصميم واجهات المستخدم الرسومية ، من المهم جعل واجهة المستخدم سهلة الهضم. حاول ألا تفرط في تحميله بمعلومات أكثر من اللازم ، وتأكد من تحسين المحتوى والعناصر الوظيفية لإجراء مسح ضوئي سريع.
إليك بعض النصائح العملية:
- تأكد من أن كل النص مقروء ومقروء.يجب أن تكون المعلومات سهلة المسح وسهلة القراءة.
- إنشاء تسلسل هرمي مرئي مناسب للعناصر.يجب أن يوجه ترتيب العناصر ومواءمتها في الصفحة المستخدمين إلى ما يحتاجون إليه أولاً ، وثانيًا ، وما إلى ذلك.
قم بتحسين المحتوى والعناصر الوظيفية لإجراء مسح ضوئي سريع. أكثر أنماط المسح شيوعًا هي شكل F و شكل Z شكل.
سيساعد توقع رغبات واحتياجات المستخدم باستخدام واجهة المستخدم الرسومية الخاصة بك على تحقيق أهدافهم بشكل أسرع وبجهد أقل. إليك ما يبدو عليه هذا:
تمرن على التصميم الاستباقي.
توقع التقدم الطبيعي للمهمة وقدم المعلومات والإجراءات ذات الصلة بالضبط عندما يحتاجها المستخدمون.
قلل حركات العين عن طريق محاذاة عناصر الشاشة في مجموعات.
تقليل تكلفة التفاعل (حركات اليد أو الأصابع) . ينص قانون فيتس على أن الوقت المطلوب للمستخدم لتحريك المؤشر (مؤشر الماوس أو الإصبع) إلى الهدف هو دالة للمسافة إلى الهدف مقسومة على حجم الهدف. ضع عناصر التحكم بالقرب من الكائن الذي يريد المستخدمون التحكم فيه.
الاستجابة والتحكم
الاستجابة والتحكم مبدأان يساعدان في الحفاظ على وتيرة جيدة في الحوار بين الإنسان والحاسوب. يجب أن ينقل النظام دائمًا ما يحدث لأنه يساعد المستخدمين في الحفاظ على الشعور بالسيطرة.
وهنا بعض الأشياء أن نأخذ في الاعتبار:
تقديم أداء جيد. يرغب المستخدمون في تنفيذ الإجراءات بسرعة ، دون تأخير.
السيطرة على التفاعل. السماح للمستخدمين بمقاطعة الإجراءات أو إنهاؤها ، والسماح بدعم عمليات "التراجع".
قدم ملاحظات مناسبة.يجب أن يستجيب النظام الذي تصممه بسرعة لطلبات المستخدم مع الملاحظات ذات الصلة (المرئية أو الصوتية أو أي نوع آخر). تساعد التعليقات المستخدمين على فهم أن النظام قد تلقى أوامرهم. بدون ملاحظات ، يخاطر المستخدم بإجراء نفس العملية عدة مرات (أي النقر فوق الزر نفسه مرتين).
إمكانية الوصول
من الضروري أيضًا جعل واجهة المستخدم الرسومية في متناول جميع أنواع المستخدمين ، بما في ذلك ذوي الإعاقة. ستحتاج إلى مراعاة مشكلات الرؤية والسمع والتنقل من أجل تصميم HCI الذي يمكن الوصول إليه.
فيما يلي موردان أساسيان لمصممي واجهة المستخدم الرسومية الذين يوفرون مجموعة من المتطلبات لإمكانية الوصول:
إرشادات الوصول إلى محتوى الويب (WCAG) 2.0 . سيؤدي اتباع هذه الإرشادات إلى جعل التصميم الخاص بك في متناول مجموعة واسعة من الأشخاص ذوي الإعاقة.
مواصفات تطبيقات الإنترنت الغنية التي يمكن الوصول إليها (ARIA) .
تغطي هذه المواصفات التقنيات المساعدة التي تساعد في نقل المعلومات إلى الأشخاص ذوي الإعاقة.
واجهة المستخدم الرسومية
تعد واجهة المستخدم الرسومية من أهم الابتكارات في تاريخ الحوسبة الشخصية. اليوم ، توفر واجهات المستخدم الرسومية منصة أساسية للتفاعل بين الإنسان والحاسوب ، ويكاد يكون من المستحيل تخيل كيف يمكن للناس العيش بدونها. ستساعدك مبادئ تصميم واجهة المستخدم الرسومية المدرجة في هذه المقالة على تصميم تفاعلات بسيطة وفعالة بين البشر والآلات.