مساعدة الذكاء الاصطناعي في الرؤية بوضوح: دراسة حالة لتصميم لوحة أجهزة القياس

نشرت: 2022-03-11

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

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

الزبون

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

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

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

الموجز

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

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

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

تحسين لوحة تحكم المشغل

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بناء مكتبة مكونة في فيجما

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

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

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

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

مسائل بحث المستخدم

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

مزيد من القراءة على مدونة Toptal:

  • تصميم لوحة القيادة - الاعتبارات وأفضل الممارسات
  • الاتساق هو المفتاح - كيفية بناء نظام تصميم فيجما
  • تقنيات البحث UX وتطبيقاتها
  • قيمة أبحاث المستخدم
  • العائد الحقيقي على الاستثمار لتجربة المستخدم: إقناع الجناح التنفيذي