Pomaganie sztucznej inteligencji w lepszym widzeniu: studium przypadku projektowania pulpitu nawigacyjnego

Sztuczna inteligencja (AI) ciężko pracuje obecnie w wielu branżach. Pomaga sprzedawcom w zarządzaniu zapasami i przewidywaniu popytu, ułatwia lekarzom identyfikację raka na podstawie skanów płuc i umożliwia samodzielną jazdę samochodami.

Jednak automatyzacja oparta na sztucznej inteligencji wciąż ewoluuje i nadal wymaga interwencji człowieka. W tym studium przypadku dotyczącym projektowania pulpitu nawigacyjnego szczegółowo opisuję, jak opracowałem interfejsy użytkownika, które pomagają operatorom usprawnić procesy rozpoznawania sztucznej inteligencji.

Klient

Klientem był amerykański startup, który pomaga swoim klientom rozwiązywać błędy rozpoznawania obrazów AI dla wielu branż w czasie rzeczywistym. Dostarczane przez nią rozwiązania usprawniają zautomatyzowane systemy, które umożliwiają mapowanie terenu, klasyfikację roślin, identyfikację produktów detalicznych, skanowanie kodów kreskowych i nie tylko.

Systemy rozpoznawania obrazów AI są przeszkolone w zakresie rozpoznawania i interpretacji danych wizualnych oraz podejmowania decyzji na podstawie tego, co „widzą”. Ale czasami te systemy napotykają wyjątki — obrazy, których nie są w stanie przetworzyć, ponieważ obiekt ma nieoczekiwany wygląd. Wyjątek może spowodować, że system AI nie zidentyfikuje kluczowych informacji lub błędnie zidentyfikuje to, co widzi. Na przykład skaner produktów spożywczych może nie rozpoznać kartonu soku pomarańczowego, ponieważ pojemnik się zmienił lub samojezdny robot rolny może zostać zdezorientowany przez przeszkodę. Takie problemy mogą powodować opóźnienia lub zakłócenia w działalności firmy.

Aby rozwiązać te problemy, oprogramowanie klienta integruje się z systemami AI klientów, umożliwiając operatorom przeglądanie i rozwiązywanie problemów z rozpoznawaniem w czasie rzeczywistym. Ale operatorzy robią coś więcej niż tylko rozwiązywanie wyjątków: uczą również systemy AI, co robić, gdy następnym razem napotkają coś podobnego. Powoduje to, że systemy sztucznej inteligencji są lepiej przystosowane do identyfikowania szerszego zakresu obrazów.

Krótkie

W ciągu dwóch miesięcy pracowałem z klientem, aby dostarczyć projekty pulpitu operatora i pulpitu klienta. Przygotowałem również bibliotekę komponentów i przewodnik po stylu, który towarzyszył tym wynikom.

Moje podejście jest zgodne z procesem myślenia projektowego, który obejmuje badania, burzę mózgów, prototypowanie o niskiej wierności, prototypowanie o wysokiej wierności i testowanie użytkowników. Zawsze dostosowuję ten proces w oparciu o dostępność czasu, kapitału i ludzi.

Podczas projektu ściśle współpracowałem z zespołem założycielskim klienta i front-end developerem, dzieląc się codziennymi aktualizacjami, które pomogły wszystkim być na bieżąco z moimi postępami. Współpracowałem również z dwoma operatorami, którzy zapewnili nieoceniony wgląd w ich codzienną pracę.

Ulepszanie pulpitu operatora

Sercem produktu klienta jest pulpit operatora — interfejs, którego specjaliści AI używają do rozwiązywania problemów z rozpoznawaniem obrazu. Gdy system AI ma problem z identyfikacją obrazu, obraz ten jest przesyłany do pulpitu operatora. Operator ręcznie oznacza obraz, zaznaczając każdy obiekt i klasyfikując go na podstawie wcześniej określonych etykiet, takich jak „człowiek”, „drzewo” lub „duża przeszkoda”.

Kiedy rozmawiałem z operatorami klienta, pokazali mi aktualny stan oprogramowania, z którego korzystali i pozwolili mi obserwować, jak wykonują swoją pracę. Z tych wstępnych badań zebrałem spostrzeżenia, problemy i możliwości ulepszeń, które miały wpływ na moje projekty.

Odkryłem, że brakuje ważnej funkcjonalności, a niektóre zadania są niepotrzebnie skomplikowane, co utrudnia korzystanie z interfejsu. Na przykład, aby oznaczyć obraz etykietą, operator musiał za każdym razem przechodzić między paskiem narzędzi a obrazem, aby wybrać, oznaczyć, przejrzeć i przesłać. Podobnie brakowało również możliwości cofania lub ponawiania czynności, co oznaczało, że operatorzy musieli powtarzać zadania lub podejmować dodatkowe kroki, gdy popełnili błąd.

Innym problemem było to, że interfejs nie miał ujednoliconego wyglądu i obsługi, ponieważ opierał się głównie na mieszance gotowych komponentów. Te niespójności sprawiły, że niektóre elementy i funkcje były trudne do znalezienia lub użycia.

Mając na uwadze te możliwości ulepszeń, przeprowadziłem burzę mózgów i stworzyłem makiety, którymi podzieliłem się z dwoma operatorami. Codziennie przez cały tydzień prezentowałem operatorom makiety i omawiałem ich wstępne wrażenia podczas wirtualnych sesji feedbackowych. Sesje były bardzo oparte na współpracy i pomogły mi zebrać pomysły na dopracowanie deski rozdzielczej.

Interesującym punktem, który pojawił się podczas sesji informacji zwrotnej, była ilość informacji wyświetlanych na prawym pasku narzędzi, gdzie operatorzy wybierali swoje działania. Mój oryginalny projekt sugerował bardzo minimalistyczne rozwiązanie – pasek narzędzi, który można było zwinąć w wąski panel wyświetlający tylko ikony. Wierzyłem, że to pozwoli skupić się na centralnym obrazie.

Pomysł jednak nie spodobał się operatorom, ponieważ na pierwszy rzut oka trudno było zrozumieć, co oznaczają ikony i jakie były główne działania. Dzięki temu ważnemu spostrzeżeniu zdałem sobie sprawę, że prostsze nie zawsze znaczy lepsze. W tym przypadku pozostawienie większej ilości widocznych informacji pomogło operatorom pracować wydajniej.

Po ulepszeniu i dopracowaniu początkowych makiet, stworzyłem interaktywny prototyp o niskiej wierności w Figma i wysłałem go do operatorów i interesariuszy, aby mogli go przetestować. Gdy otrzymałem ich opinię, iterowałem projekt, aż wszyscy byli usatysfakcjonowani.

Jak wspomniałem, oryginalny pulpit nawigacyjny został stworzony przy użyciu mieszanki gotowych komponentów interfejsu użytkownika, a wrażenia w produkcie nie były spójne.

Jednak ze względu na czas i budżet interesariusze chcieli zachować gotowe komponenty tam, gdzie to możliwe. Tak więc, współpracując z programistą front-end, dostosowałem istniejące komponenty, które obejmowały przyciski, formularze i pola oraz inne elementy interfejsu użytkownika, aby pasowały do ​​wyglądu i stylu nowych pulpitów nawigacyjnych. Zmiany te wpłynęły na kolory, kroje pisma, odstępy i inne szczegóły. W przypadkach, w których nie można było zaktualizować istniejących komponentów, takich jak animacje postępu w trybie podglądu na żywo, stworzyliśmy nowe. Większość deski rozdzielczej operatora została zbudowana w ten sposób od podstaw.

Następnie stworzyłem łatwy w nawigacji prototyp o wysokiej wierności, który zawierał kolory i typy zdjęć, które zwykle widzieliby operatorzy w oprogramowaniu. Dołączyłem również narzędzia do zaznaczania, takie jak prostokąty, ołówki i wielokąty, oraz dodałem panel u dołu ekranu, w którym operatorzy mogli dokonywać ulepszeń obrazu. W końcu wysłałem prototyp wraz ze specyfikacjami mikrointerakcji animowanych w After Effects do front-end developera, aby mogli zbudować dashboard.

Projektowanie deski rozdzielczej klienta od podstaw

Drugim etapem projektu był panel klienta, który pozwala właścicielom systemów AI obserwować postęp rozwiązywania ich problemów. Klient chciał poprawić to doświadczenie przed udostępnieniem produktu większej liczbie klientów.

Początkowo klienci klienta musieli prosić o raporty z postępów za pośrednictwem poczty elektronicznej. Każdy raport był plikiem PDF lub CSV, który wskazywał, które wyjątki zostały rozwiązane lub które nadal trwają. Klient potrzebował sposobu, w jaki klienci mogliby szybko sprawdzić status każdego wyjątku.

Dzięki zaprojektowanemu przeze mnie dashboardowi klienci mogą się logować i monitorować postęp każdego wyjątku w czasie rzeczywistym. Widzą obrazy, które nadeszły, te, które są przeglądane, oraz wyjątki, które zostały już rozwiązane. Mogą również wyświetlić szczegóły każdego rozwiązania, aby lepiej zrozumieć, w jaki sposób problem został rozwiązany.

Pulpit nawigacyjny zawiera wykresy i wizualizacje, które pomagają klientom lepiej zrozumieć dane podsumowujące, takie jak całkowite zaangażowanie i całkowite rozdzielczości. Klienci mogą również łatwo uzyskać dostęp i zarządzać aspektami biznesowymi swoich kont, w tym metodami płatności i danymi logowania.

W przypadku prototypu pulpitu klienta stworzyłem animacje w After Effects, aby zademonstrować, jak zachowywałyby się niektóre elementy interfejsu użytkownika. Na przykład stworzyłem animację postępu, aby pokazać wyjątek w przeglądzie, który staje się znacznikiem wyboru, gdy wyjątek zostanie rozwiązany. Zaprojektowałem również pulsującą kropkę, aby pokazać, kiedy projekt jest na żywo.

Budowanie biblioteki komponentów w Figma

Jednym z ważnych aspektów projektowania produktów, które są skalowalne i łatwe w utrzymaniu, jest stworzenie biblioteki komponentów i przewodnika po stylu. Posiadanie znormalizowanych i wielokrotnego użytku komponentów projektowych zapewnia zarówno spójność, jak i szybkość skalowania i dodawania funkcji do produktu cyfrowego.

Zdecydowałem się umieścić bibliotekę klienta w Figma, ponieważ ułatwia to modyfikowanie komponentów i aktualizowanie ich wszędzie tam, gdzie pojawiają się w projekcie. Wszystkie komponenty i style zostały udokumentowane za pomocą ośmiopunktowej siatki. Biblioteka zawierała podstawowe komponenty, takie jak menu, paski boczne, karty, ikony wprowadzania i przyciski, podczas gdy przewodnik stylu obejmował elementy, takie jak typografia, kolory, ikony, odstępy i siatki.

W przyszłości biblioteka komponentów może przekształcić się w pełnoprawny system projektowania. Ale na razie służy jako podstawa do rozwoju produktu i jako punkt odniesienia dla przyszłych projektantów, niezależnie od tego, czy będą to pracownicy firmy, freelancerzy, czy profesjonaliści z agencji.

Kwestie badań użytkowników

Ten projekt był satysfakcjonujący, ponieważ dał mi możliwość udoskonalenia produktu cyfrowego, który ulepsza zautomatyzowane systemy w wielu branżach i kształtuje sposób, w jaki sztuczna inteligencja interpretuje świat. Wzmocnił również znaczenie badań użytkowników i bezpośredniej obserwacji. Możliwość obserwowania, jak operatorzy wykonują swoją pracę i zadawania pytań, była niezbędna do dostarczania pulpitów nawigacyjnych, które umożliwiły im wydajniejszą i wydajniejszą pracę. Projektant nie może ulepszyć sposobu, w jaki ktoś pracuje, dopóki nie zrozumie jego doświadczenia.

Dalsza lektura na blogu Toptal:

• Projekt pulpitu nawigacyjnego — rozważania i najlepsze praktyki
• Spójność jest kluczem – jak zbudować system projektowania Figma
• Techniki badawcze UX i ich zastosowania
• Wartość badań użytkowników
• Prawdziwy zwrot z inwestycji w UX: przekonujący pakiet dla kadry kierowniczej