تطوير الواجهة. تصميم واجهة المستخدم الرسومية

جدول المحتويات:

تطوير الواجهة. تصميم واجهة المستخدم الرسومية
تطوير الواجهة. تصميم واجهة المستخدم الرسومية
Anonim

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

حيث يبدأ التصميم

تصميم واجهة مستخدم يبدأ بمسألة الغرض منها ومن سيقوم بإدارتها. المصمم الجيد دائمًا ما يلقي نظرة نقدية على الواقع من حوله ويفعل شيئًا ليس فقط للعملية ، ولكن بشكل مدروس ، لسبب ما. التصميم المناسب للواجهة هو عملية إيجاد حلول لمشاكل المستخدم. تؤثر تجربتهم في التفاعل (UX) على قرار الشراء أو تنفيذ إجراء تحويل آخر ويمكن أن تجعلهم يتخلون حتى عن منتج عالي الجودة. تعمل الواجهة أيضًا على حل مشكلات العمل ، نظرًا لمدى ملاءمتها لهمتمتع بالعملاء حسب ربح الشركة

إدارة تطوير الواجهة
إدارة تطوير الواجهة

هرم احتياجات المنتج

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

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

واجهة المستخدم الرسومية
واجهة المستخدم الرسومية

قصص و سيناريوهات المستخدم

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

تطوير واجهة البرمجة
تطوير واجهة البرمجة

تطوير واجهة مُدارة

القدرة على تغيير الواجهة بشكل مستقل لاحتياجات المستخدم موجودة في منتجات شركة "1C". على سبيل المثال ، في نظام 1C: Enterprise 8.2 ، باستخدام أدوات التطوير المدمجة ، يمكن للمسؤول برمجة النماذج وتحسين التفاعل بين أجزاء العميل والخادم وتحسين النظام الأساسي. تتوفر حلول التطبيقات ليس فقط في الشبكة المحلية ، ولكن أيضًا عبر الإنترنت ، في حالة استخدام قنوات اتصال منخفضة السرعة.

يتم تطوير الواجهة في 1C باستخدام لغة مدمجة ، وبفضلها يمكن للمستخدم إعادة بناء أجزائه ديناميكيًا وإنشاء خوارزميات خاصة به لمعالجة البيانات. يتم تحديد الهيكل من خلال مجموعة من الأوامر مرتبة في تسلسل معين. النظام ليس لديه قيود على عدد مستويات التداخل. في عملية تطوير واجهة في 1C 8.3 ، توجد آلية لتكوين البرنامج اعتمادًا على حقوق وصول المستخدم والانتماءات الفريق. يمكن للمسؤول تكوين حقوق المستخدم وإمكانية رؤية عناصر معينة لمجموعات مختلفة ، ويمكن للمستخدم نفسه الوصول إلى إعدادات إضافية بإذن من المسؤول.

علم النفس الفسيولوجي لتصور الواجهات

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

تطوير واجهة المستخدم
تطوير واجهة المستخدم

الأرقام السحرية 7 ± 2 و 4 ± 1

في عشرينيات القرن الماضي ، أجرى عالم النفس جورج ميلر تجربة في Bell Labs حيث قامت مجموعات من الناس بحل مشاكل معينة باستخدام عدد مختلف من الأشياء. نتيجة لذلك ، اتضح أنه كلما تم استخدام عدد أقل من الكائنات ، زادت فعالية حل المهمة. بعد مراجعة نتائج الدراسة ، ميلراستنتج القاعدة القائلة بأن 7 ± 2 كائنات هي أقصى عدد يمكن أن تستوعبه ذاكرة الشخص قصيرة المدى. يبدأ الدماغ في تجنب الأعداد الكبيرة لتوفير الموارد. منذ وقت ليس ببعيد ، ظهرت دراسة جديدة تقول أنه لا يجب أن يكون هناك 7 ± 2 ، ولكن 4 ± 1 كائنات.

الفرق في كيفية معالجة الدماغ للأشياء

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

تطوير واجهة 1s
تطوير واجهة 1s

أهمية تطبيق قاعدة 4 ± 1

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

يحتاج المطورقم بتعيين المهام له ، والتي يكفي حلها للعمل مع عدد صغير من الكائنات ، وبعد ذلك يمكنك المضي قدمًا. عندما ينظر المستخدم إلى الصفحة ، يختار ما يقرب من 5 كائنات يتفاعل معها لاحقًا. من بين هؤلاء ، يختار الشخص الذي سيقوده بسرعة إلى الهدف. بالعمل مع الكائن ، يحل المشكلة ويمضي قدمًا. نتيجة لذلك ، سيتم توفير طاقته ، وحل المشكلة وسيكون المستخدم راضياً ، بعد أن تلقى تجربة ممتعة من التفاعل مع المنتج. لذلك ، تطبيق قاعدة 4 ± 1 يجعل الواجهة أفضل.

تطوير واجهة المستخدم الرسومية
تطوير واجهة المستخدم الرسومية

استخدام تصور اللون والحجم

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

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

صورة ونص

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

واجهات تطوير التطبيقات
واجهات تطوير التطبيقات

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

قراءة النص

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

بعد تطوير المفهوم والتصميم والنماذج الأولية ، المرحلة الأخيرة من تصميم الواجهة هي الاختبار. بعد اجتياز الاختبارات بنجاح ، يتم إطلاق المشروع.

موصى به: