آسف لعينيك النزيف ، ولكن هذه مهمة.

منهجية

50 أشياء أنت [ربما] نسيت التصميم

كل مساء: "أنا لست مجنونا ، أنا فقط بخيبة أمل ..."

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

انظروا ، كلنا ننسى تصميم شيء ما في بعض الأحيان. هذا رائع تمامًا!

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

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

  • تسجيل الدخول والاشتراك الاشياء
  • التجربة الاولى
  • كل الأشياء الصغيرة
  • إطلاق المواد
  • الملف الشخصي السخافات
  • تدفقات جنون

لذلك اقرأ هذه ، وتعكس ، و ... مثل ... لا تزعج رئيسك.

الدخول التسجيل فى الموقع

1. شاشة البداية

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

إليكم فكرة رائعة لجيمس جاكسون

2. نسيت كلمة المرور التدفق

هل كان "abcd1234" أو "1234abcd"؟ هذا مهم. لا تنسى ذلك.

لا يترك Majo Puterka مستخدميه محبوسين خارج المنزل تحت المطر.

3. صفحة "شكرًا على التسجيل"

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

ماذا بعد؟ اسأل هايلي كاتلين.

4. مرحبا بك البريد الإلكتروني

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

أنا حقا أحب هذا. بريان جولاتكا.

5. شروط الخدمة وصفحات الخصوصية (لاف)

فقط تفعل ذلك بالنسبة للناس أكثر في القانونية. إنهم يحاولون فقط تجنب رفع دعوى.

إنني أقدر حقًا كيف حاول Marko Prljic جعل الشروط والأحكام أكثر قابلية للدخول.

التجربة الاولى

6. المستخدم على متن الطائرة

هناك الكثير من الطرق المختلفة التي يمكنك استخدامها. هنا خمسة من favs بلدي:

مفيدة مبهج ، من قبل مونا.

7. الدولة (الدول) الفارغة

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

أشعر أن فيلي يوهان فيرومان يحب الأبطال الخارقين.

8. مستندات المساعدة

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

مايا قاو مفيد جدا. كن أشبه مايا.

9. صورة ملف تعريف المستخدم الافتراضي / الصورة الرمزية

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

هيرميس غريب يجعل الأشياء لطيف. هذه هي AF لطيف.

10. زر الخروج

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

أعتقد أن كريستوفر قد سرق أموال هنريك في الغداء. دعه يخرج ويهرب من مكان الحادث.

كل الأشياء الصغيرة

11. التطبيق تذييل

معظم الوقت أفترض أن الصفحات تستمر إلى الأبد ، كما لو كان الناس يعتقدون أن العالم كان مسطحًا ونوعًا من الاستمرار. ملاحظة: الأرض ليست مسطحة.

قد تضيع الرماد شفايتزر في الغابة في مكان ما. شخص يساعدها.

12. متصفح فافيكون

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

قام Michael Flarup بعمل قالب فافيكون رائع يمكنك تنزيله.

13. صفحة 404

رضوان عالق في تلك الحفرة. اذهب ساعدها.

14. الافتراضي / تحوم / التركيز / الضغط / المعوقين / الخ. الدول المدخلة

لاف ، الكثير من الدول. قد يكون "Focus + Hover" هو المفضل / الأكثر غموضًا. تأتي لقطة الشاشة أدناه من نظام تصميم أدوات الطاقة UX.

ملاحظة جانبية لمشروعي الجانبي ، يجب عليك بالتأكيد التحقق من ذلك:

15. ترتيب الجدولة

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

Ahhh ، أيام كتابة 80 صفحة المواصفات وتطوير الشلال.

16. سلوك التمرير

ليس فقط أين وكيف يتم التمرير ، ولكن ما في الواقع التمرير. هل الرأس ثابت؟ تذييل الصفحة؟

يا رجل ، بيتر بليزج ، هذا شعور سلس. لطيف!

17. زر الاتصال الداخلي

أعني أقل ما يمكنك فعله هو جعله يطابق ألوان التطبيق. هيا الناس. انها ليست جراحة الصواريخ.

هذا أسهل من صنع وعاء من الحبوب.

18. أزرار ترقيم الصفحات

على افتراض أنك لم تختار التمرير اللانهائي ، فستحتاج المستخدمين إلى وسيلة للوصول إلى الصفحة 27. دعهم!

قام بوروندا بعمل رائع. أحب هذا الأصفر ، بوروندا!

19. المؤشرات

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

جيف بروديريك يحب النقر على الأشياء. كما قدم الهدية الترويجية.

20. الجدول الفرز / تصفية / آلية (آليات) البحث

يجب أن تكون هناك طريقة أسرع للوصول إلى ZZ Top في جدول البيانات "Bands with Beards" ...

يوجين Esanu لديه العين استثنائية لآليات التصفية ، والمجموعات الأرجواني / الأصفر. لطيف.

21. "لا توجد نتائج" الدول الفارغة

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

غطت رينر ويندلاند كل شيء إلى حد كبير لزينديسك.

22. الدول الخطأ

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

لقد جعلني مايك ستيزيكي حقًا أفكر في إرسال البريد الإلكتروني. ثم كان كل شيء:

23. إخطارات النظام

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

هذا من Google Inbox.

24. إفراغ الإكمال التلقائي فارغة

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

يبدو أن يوريان فان درونين لم يكن لديه

25. دولة التحميل

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

ليس أفضل شكل عموم الوجه ، XPLAI. استمر بالتمرين. ولكن هذا لا يزال رائعتين مؤلم.

إطلاق المواد

26. أيقونة تطبيق Friggin

نعم ، من الأفضل ألا تنسوا هذا.

أنا على استعداد للمراهنة على تغيير إيدي لوبانوفسكي لجميع أيقوناته لتناول طعام الإفطار. لذيذ.

27. صور المتجر

لم ينس دانييل بير صور متجر التطبيقات لتطبيقه. ارتفاع خمسة ، المتأنق.

28. الرسم البياني المفتوح / الصور الاجتماعية

هذه هي الصورة التي تظهر عند قيامك بتغريد رابط على Twitter أو إنشاء منشور على Facebook أو نشر رابط على "متوسط" ، إلخ ...

كريستي تي مهمل رسميًا. سوف SF القيام بذلك ليا.

إليك كيف تبدو في "متوسطة":

29. موقع تسويق الصور

لا تنسَ أيضًا ، ربما يريدون جعل موقع الويب يبدو وكأنه شريط ، لذا فقط انسخ هذا بالضبط:

وإذا كنت مصممًا في Redkix ، فسيتعين عليك التأكد من أن الصورة تعمل على قرمزي.

30. صور سطح السفينة المبيعات

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

من المحتمل أن تغطي المبيعات والمبيعات جميع نماذجك بالأشياء الأخرى ، لذلك استعد لذلك.

31. صور سطح الملعب

مثل صورة سطح السفينة ولكن أكثر قليلا البصيرة. أقصد ... أنت تحاول جمع الأموال. ستكتشف كيفية جعل ذلك ممكنًا في وقت لاحق.

إليك سرًا تجاريًا ، ضع دائمًا لوحات المعلومات في سطح الملعب.  هذه ليست مزحة.

32. صور المنتج هانت

مرحبًا ، لقد قاموا بتحديث صفحات الملف الشخصي أيضًا!

ما زلت أفتقد الإصدار 2.0 ، لكن كل ما

33. Facebook / Twitter الصور الإعلانية

"لكننا لا نعرض إعلانات فيسبوك!" ها ، حتى أنت. ثم لا أحد يخبرك. فقط اجعلها بالفعل وستكون آمنًا.

استغرق الأمر بعض الحفر للعثور على إعلان لم يكن لفراش Casper. سوف تقتل اللعبة ، كاسبر.

34. صور وسائل الاعلام الاجتماعية

نعم ، عليك أن تجعل واحدة لجميع الشبكات الاجتماعية 938. والحمد لله أننا صنعنا أداة Sketch لتسريع ذلك من أجلك. أهلا وسهلا بك ، كيدوس.

35. شعار إطلاق البريد الإلكتروني

النقاط الثلاثية إذا قمت بتوضيحها. تيار.

^ بالمناسبة ، هذه نشرة وكالتي وكتابي في العمل يكتبون بعض المحتوى الرائع حقًا. نحن نحب ذلك إذا اشتركت!

وهنا بعض favs الأخيرة:

الملف الشخصي السخافات

36. تفضيلات الإخطار

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

سلاك لم تصبح شركة بقيمة 8 مليارات دولار عن طريق تجنب إعدادات الإشعارات !! دققت المسمار فيه.

37. صفحة الفواتير

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

لا أعرف ماذا يعني هذا ، لكن كان من السهل الوصول إلى هنا!

38. خيار "حذف حسابي"

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

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

سيدي الرئيس ، يمكنك إلغاء تنشيط حسابك هنا.

39. أداة اقتصاص صورة الملف الشخصي

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

لم يستطع حتى تجاوز هذه الشاشة لإظهار كيفية اقتصاص صورة. 2 من أصل 10 نجوم. لن تضع حلقة على ذلك.

40. خيار / ترقية "ترقية حسابي"

يحير في ذهني مدى صعوبة ذلك بالنسبة إلى العديد من منتجات SaaS. اصمت وخذ مالي. ألا يكون هذا سهلاً ؟! مثل ... الأسهل؟!

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

تدفقات جنون

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

ثم في منتصف الطريق على المصلح الخاص بك ، وهو يحتسي kombucha من camelbak الخاص بك ، تتذكر أن التطوير لم يبدأ فعلاً بعد! # $٪ @

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

41. تدفق "تغيير عنواني"

أنت تعرف متى تحصل على شقة جديدة وسط المدينة وعليك تغيير عنوانك في كل بطاقة ائتمان كنت تملكها على الإطلاق؟

يريد Dhaval S. Gandhi التأكد من شحن Aloe Vera إلى المكان الصحيح.

42. تدفق "إضافة بطاقة ائتمان"

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

هذا يبدو بطريقة حقيقية للغاية ، كارلوس ميدينا. لا علاقة لها ، لقد اشتريت للتو حذاءًا جديدًا ولم تكلفه سنتًا!

43. تدفق "الجزء الأكبر"

يمكنك إضافة كائن في النظام بسرعة ، لكن الأمر مختلف تمامًا عن إضافة مجموعة من الكائنات إلى النظام بسرعة.

من فضلك سيدي ، هل أستطيع الحصول على المزيد؟

44. تدفق "إنشاء فلتر مخصص"

إذا سمحت بالترشيح المتطور ، فقد يكون من الجيد إضافة القدرة على حفظ هذا المرشح المعقد في وقت لاحق. بهذه الطريقة لن تضطر إلى النقر فوق مليون مرة من جديد.

يمكن أن يأخذ Oykun Yilmaz هذه الخطوة إلى الأمام من خلال السماح للمستخدم بحفظ هذا الفلتر. افعلها يا Oykun!

45. تدفق "أضف إلى سلة التسوق"

من المضحك الاعتقاد أن الناس ينسون هذا التدفق ، لكنك تعلم ... أنا واحد من هؤلاء الأشخاص. اخرس.

يبدو أن ألبرتو كونتي يحتاج إلى 4 كراسي و 4 طاولات جانبية. يجب أن يكون منزل كبير ...

46. ​​تدفق "مشاركة هذا"

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

تعرف Tomek Kwiatkowski حقًا كيف تصبح اجتماعيًا.

47. التدفق "إنشاء من القائمة"

هذا هو نوع من مثل "Duplicate + Edit" كلها في إجراء واحد. في الأساس ، يمكن للمستخدم البدء من كائن موجود وتحديثه حسب الحاجة.

كايل جونستون يكتب الكثير من النصوص. ربما سرا كريستوفر نولان؟

48. تدفق "دعوة شخص ما"

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

أعتقد أن باولا بينتاريك وكريستين تسيران في رحلة. أو أنهم يعملون في مشروع ومشاهدة أشخاص آخرين يطيرون. هذا هو أسوأ.

49. تدفق "تغيير أذونات المستخدم"

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

مات شويري ، من ناحية أخرى ... أقل من رأس مفصل من جريج.

50. تدفق "الحذف والاسترداد"

هل تعلم عندما تحذف شيئا فائق الأهمية وتحتاج إلى استعادته على الفور؟ لا؟ حسنا.

اريك تساي يفهم أننا جميعا نرتكب أخطاء.

علاوة # 51. الرسوم المتحركة

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

أنالست.

ملخص

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

عندما لا أحاول أن أتذكر كل شيء صغير (إنها سحرية) ، فأنا أعمل على أدوات تصميم Sketch في UX Power Tools لتجعلك مصممًا أفضل وأكثر كفاءة. يمكنك معرفة المزيد هنا:

اتبع UX أدوات السلطة على التغريد
تابعني على تويتر