Binko waste sorting app design: search, product page, home, impact and badges screens

بينكو: تصميم تطبيق فرز النفايات، من مسحة واحدة إلى الحاوية الصحيحة

الموقع: فرنساالسنة: 2020

تصميم تطبيق فرز النفايات بينكو: مسحة واحدة، وجواب من التعلّم الآلي، والحاوية الصحيحة لكل جزء من العبوة.

المشروع بالأرقام

51شاشة في Adobe XD
6حجرات في الحاوية الذكية
3عائلات شارات
55%نسبة من يفرزون في فرنسا
واجهات iOS وAndroidمسارات المستخدمالشرح التعريفيالشاراتنصوص بالفرنسية

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

كل شاشات تطبيق بينكو، مباشرة من ملف XD.

مسحة واحدة، والحاوية الصحيحة

تطلب الشاشة الرئيسية من المستخدم خطوة واحدة. وتحت التحية وحقل البحث بطاقة داكنة كُتب عليها «Fini les erreurs de tri !» أي «وداعاً لأخطاء الفرز»، وتحتها زر واحد: امسح نفاية. وتُفتح الكاميرا على إطار أبيض، فيوجّهها المستخدم نحو الباركود، أو يصوّر القطعة داخل الإطار إن لم يكن لها باركود. وبينما يعمل النموذج يعرض التطبيق عبارة «جارٍ التعرّف» مع رسم توضيحي في مكان دائرة التحميل، فيبدو الانتظار أقصر.

تصميم تطبيق فرز النفايات: مسار المسح في بينكو: الرئيسية والكاميرا والتعرّف وصفحة المنتج بالحاوية الصحيحة

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

تعليم الكاميرا، وتعليم المستخدم

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

تعريف بينكو: مسح تجريبي ونصائح التصوير وأمثلة ونهاية الشرح

البحث حين لا يوجد ما يُمسح

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

الأخطاء والمكافآت

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

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

التحفيز في بينكو: اعتذار الذكاء الاصطناعي وشارة جديدة وشارات نجم التدوير ولوحة الأثر

الحاويات وأيام الجمع وأقرب نقطة

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

الحساب والإعدادات ونبرة الكلام

يتيح تصميم تطبيق فرز النفايات للمستخدم أن يجرّب بينكو قبل التسجيل. تشرح شاشة الترحيب ما يضيفه الحساب، ويُنشأ الحساب بالبريد الإلكتروني أو بأحد حسابات التواصل الاجتماعي. وتجمع الإعدادات البيانات الشخصية وجدول الجمع والإشعارات والإبلاغ عن الأخطاء والسجل والأثر والشارات في قائمة واحدة. أما النصوص الصغيرة، أي العبارات القصيرة على الأزرار والنوافذ ورسائل الخطأ، فتتكلّم بالفرنسية كما يتكلّم صديق، مع دعابات مثل «Houston, on a un problème !» في شاشة الخطأ. وتحافظ الشخصيات ثلاثية الأبعاد التي تظهر في أنحاء التطبيق على النبرة الخفيفة.

الحاوية خلف التطبيق

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

شاشات العرض في بينكو: المهمة والخطوة التالية وحاوية المستقبل وتدوير الغد

ما الذي يجعل تصميم تطبيق فرز النفايات صعباً

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

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

ثم إن المستخدم يفتح تطبيق التدوير ويداه مشغولتان بالنفايات، وهو واقف أمام الحاوية. كل خطوة زائدة أو نصّ طويل يزيد احتمال أن يغلق التطبيق ويكتفي بالتخمين، لذلك وُزنت كل شاشة بسؤال واحد: هل تقرّب المستخدم من الحاوية الصحيحة أم تؤخّره عنها؟

شاشة الكاميرا وصفحة المنتج

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

الحساب في بينكو: الترحيب وإنشاء الحساب وتسجيل الدخول والإعدادات

وفي صفحة المنتج يُختبر تصميم تطبيق فرز النفايات كله. فالجواب المؤلّف من كلمة واحدة مثل «بلاستيك» يترك للمستخدم نصف المهمة، ولهذا تعرض الصفحة العبوة مفكّكة: لكل جزء صورته واسمه ولون حاويته وتعليمة قصيرة واحدة. ويستطيع المستخدم الواقف أمام الحاويات أن يقرأها بنظرة واحدة، دون فقرة يقرؤها أو صفحة ثانية يفتحها.

شارات تكافئ الجهد بلا لوم

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

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

وتكمل شاشة «أثري» هذه الفكرة بالأرقام: نسبة عبوات المستخدم التي يُعاد تدويرها فعلاً، ومخطّط شهري لما رماه من عبوات، وعدد القطع التي فرزها مع بينكو، والشارات التي جمعها. فيتابع المستخدم عاداته هو شهراً بعد شهر، ويرى أثر الفرز في أرقام تخصّ بيته.

البحث والسجل والخريطة: طرق أخرى إلى الحاوية

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

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

الحاويات في بينكو: حاويات المنزل وتذكير يوم الجمع وخريطة أقرب حاوية

نبرة الكلام في تصميم تطبيق فرز النفايات

كُتبت نصوص بينكو بالفرنسية بلغة يومية قريبة من كلام الأصدقاء. فالبطاقة الرئيسية تعد بنهاية أخطاء الفرز، والتصحيح يُستقبل بعبارة «Merci la star !»، وشاشة الخطأ تمزح بعبارة «Houston, on a un problème !». هذه العبارات القصيرة تخفّف لحظات قد تزعج المستخدم، كخطأ في التعرّف على القطعة، وتجعل الاعتذار جزءاً من شخصية التطبيق. وتظهر الشخصيات ثلاثية الأبعاد في أنحاء التطبيق وفي شاشات التقديم أيضاً، فيبقى للتطبيق وجه واحد مألوف من أول شاشة إلى آخرها.

من النموذج التفاعلي إلى التطوير

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

تطبيق يمهّد لحاوية ذكية

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

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

البحث في بينكو: الأكثر بحثاً والفئات والفئات الفرعية والسجل

ما ننقله من بينكو إلى تطبيقات الذكاء الاصطناعي الأخرى

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

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

نطاق العمل

  • مسارات تجربة المستخدم: أول تشغيل، والمسح، والبحث، والنتائج، والحاويات، والخريطة، والشارات، والحساب
  • تصميم تطبيق فرز النفايات في 51 شاشة ببرنامج Adobe XD
  • صفحة منتج تفكّك العبوة إلى أجزاء وحاويات
  • شرح تعريفي ونصائح تصوير للكاميرا
  • التحفيز: الشارات والمستويات ولوحة الأثر
  • تذكير بأيام الجمع وخريطة لنقاط الجمع
  • نبرة الكلام والنصوص الصغيرة بالفرنسية
  • شاشات تقديم لمهمة الحاوية الذكية

مشاريع وخدمات ذات صلة

تصمّم تطبيقاً يقوم على الكاميرا أو نموذج ذكاء اصطناعي أو عادة يومية؟ أرسل وصفاً قصيراً للمشروع ونردّ عليك بخطة عمل.

أسئلة عن تصميم تطبيق فرز النفايات

كيف يعرف بينكو الحاوية الصحيحة؟

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

ماذا لو أخطأ الذكاء الاصطناعي؟

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

لماذا يضمّ تطبيق تدوير شارات؟

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

ما الأدوات المستعملة؟

نُفّذ تصميم تطبيق فرز النفايات في Adobe XD نموذجاً تفاعلياً من 51 شاشة جاهزاً للمطوّرين.

هل تصمّمون تطبيقات أخرى تعتمد على الذكاء الاصطناعي أو الكاميرا؟

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

هل تصمّمون تطبيقات بالعربية والإنكليزية؟

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