ما المهارات التي تحتاجها لتصميم واجهة المستخدم/التفاعل/الوظيفي المناسب في تطبيقات الويب؟

StackOverflow https://stackoverflow.com/questions/21869

سؤال

عندما تقوم بتطوير تطبيقات الويب من الصفر، ما هي المهارات اللازمة لإنتاج منتجات قابلة للاستخدام وغنية بالتفاعل؟

  • هل تقوم بإنشاء نموذج واجهة المستخدم أولاً؟
  • هل تستخدم قصص المستخدم؟
  • بعض المنهجيات الرشيقة أو أفضل الممارسات التي توصي بها أو تؤيدها بنشاط؟

باختصار: ما هي المهارات التي تجعلك تتجاوز مرحلة تجميع المتطلبات إلى AmazingWebApp™؟

أخيراً:هل هناك كتب تنصح بها؟

هل كانت مفيدة؟

المحلول

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

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

أود أيضًا أن أقول لك إلقاء نظرة على التطبيقات الأخرى التي تنال إعجابك بمستوى قد لا تدركه حتى ولكنك تعمل لسبب ما وتحاول تكرار ذلك.

نصائح أخرى

أعتقد أن أفضل شيء يمكنك القيام به هو استخدام البرنامج ببساطة.

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

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

يقول مديري إنني "شرجي" بشأن سهولة الاستخدام.أحب ذلك :)

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

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

تعتمد أفضل الممارسات على مواهب أعضاء الفريق.

أولاً، قم دائمًا بكتابة قصص المستخدمين (اجعلها حدثًا جماعيًا، إن أمكن)، وقم بتحميلها على LighthouseApp.com أو نظام التذاكر المفضل لديك - كل ما تحتاجه للبدء هو أول 10 إلى 20 قصة فقط.

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

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

الرجال هنا يقدمون نصائح ممتازة.

هناك فرق بين "الجميلة بصريًا" و"الوظيفية" (أو سهولة الاستخدام).يمكنك في الواقع الحصول على واحد دون الآخر.هذا المنتدى هو مثال جيد، فهو يتمتع بسهولة استخدام عالية جدًا ولكنه بصراحة قبيح - آسف، ما زلت أحبك رغم ذلك :)

الحقيقة هي أنك تحتاج مهارة لعمل واجهات جيدة.وهذا يأتي مع سنوات من الممارسة.لقد تم التعاقد معي عادةً للحضور وتصميم واجهة المستخدم بأكملها لتطبيق جديد.نادرًا ما أرى مبرمجين أو مصممي جرافيك يتمتعون بهذا النوع من المهارات (إنه سوق ضيق).لقد وجدت في الجامعة أن لدي فطنة طبيعية في التعامل مع واجهة برمجة التطبيقات (HCI) وتصميم واجهة المستخدم وتحليل سهولة الاستخدام.لقد طورت هذه المهارات بشكل أكبر من خلال القيام بالكثير من القراءة واكتساب الخبرة القيام بالكثير من تصميم واجهة المستخدم. لذا، كل ما أقوله هو الاستعداد لبعض العمل الشاق إذا كنت جادًا في أن تصبح جيدًا في تصميم واجهة المستخدم.يمكنك فعل أي شيء تضعه في ذهنك، ولكن إذا كنت تقضي وقتًا في دراسة تصميم واجهة المستخدم، فهذا يعني أنك لا تقضي وقتًا في التعلم بطريقة رشيقة باستخدام Ruby on Rails، أو أيًا كانت التكنولوجيا الأكثر حداثة.

بعض النصائح العامة:

  • إذا كنت تقوم بإنشاء تطبيقات برامج الويب (على عكس مواقع الويب الخاصة بالشركات الصغيرة)، فإن النماذج الأولية لـ lo-fi تعتبر ممتازة.اجمع مجموعة من الأشخاص معًا، ومجموعة من أوراق الجزار وأقلام التحديد الملونة، وستندهش من عدد الشاشات التي يمكنك رسمها في بضعة أيام.

  • يجب أن يكون برنامجك واضحًا بذاته.لا ينبغي أن يحتاج برنامجك إلى دليل مستخدم.لا يحتوي نظام إدارة المحتوى (CMS) الذي قمت بتطويره على دليل مستخدم، ولدي بضع عشرات من العملاء الذين يستخدمونه ولم يطلب مني أي منهم دليلًا على الإطلاق.

  • شاهد ماذا يفعل "الأولاد الكبار".إذا كان موقع ebay يحتوي على مربع البحث الخاص به مثل هذا:"[......] (بحث)" ثم افعل ذلك أيضًا (بدلاً من غير القياسي ولكن حسنًا:'يبحث:[......] (يذهب)'.).يُعرف هذا باسم القدرة على تحمل التكاليف.أنت تستخدم معرفة الناس بالأنظمة الأخرى لمنحهم بداية حول كيفية عمل نظامك الخاص.

أوصي هذا الكتاب:

لدي أيضًا بعض مقالات المدونة التي من المفترض أن تساعد:

بعض الأشياء التي نقوم بها:

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

@Brian Warshaw - أعتقد أن ذلك كان من حديث أجرته عزة راسكين، هذا الفيديو على ما أعتقد

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

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

وإليك أيضًا بعض المبادئ عالية المستوى التي أتبعها للتأكد من أنني أقوم ببناء المنتج المناسب مع تجربة ممتعة:

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

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

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

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

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top