Projektowanie interfejsów użytkownika opartych na AI

Z perspektywy użytkownika systemy AI są z natury niepewne. Mogą one dawać niespójne wyniki i popełniać regularne błędy. Interfejs użytkownika daje wiele możliwości, aby przyswajać i filtrować informacje oraz zmniejszać frustrację spowodowaną ograniczeniami AI. Jako deweloper odgrywasz kluczową rolę w kształtowaniu wrażeń użytkowników AI, ponieważ masz większą wiedzę o tym, jak i gdzie system AI może zawieść.

Jednym z najważniejszych aspektów projektowania jest to, w jakim stopniu użytkownicy mają kontrolę nad AI. Niektóre możliwości są niewidoczne dla użytkowników, a inne wymagają wyraźnej interakcji. Większa ekspozycja oznacza większą elastyczność, ale też większe ryzyko i złożoność, którymi trzeba zarządzać.

W tym module poznasz sprawdzone metody projektowania wzorców wygody użytkownika (UX) w przypadku 3 rodzajów ekspozycji: w tle, ograniczonej i otwartej. W przypadku każdego typu podkreślamy, jak wybory techniczne i architektoniczne wpływają na komfort użytkowania systemu AI.

AI w tle

AI może subtelnie ulepszać istniejące funkcje bez wprowadzania nowych. Pozwala to zminimalizować ryzyko przerw w działaniu i awarii. W takim przypadku odpowiedzialność za przydatność, niezawodność i płynne przechodzenie w tryb awaryjny spoczywa w całości na produkcie. Użytkownicy nie muszą wiedzieć, jak działa AI, ani nawet zdawać sobie sprawy z jej obecności, aby z niej korzystać.

Tło utworzone przez AI jest najbardziej odpowiednie, gdy:

  • Zadanie jest mało ryzykowne.
  • Kontrola użytkownika nie poprawiłaby znacząco wyników.
  • Produkt może nadal zapewniać swoją podstawową wartość, nawet jeśli funkcja AI nie działa lub jest niedostępna.

W internecie jest wiele przykładów działania AI w tle, od filtrów spamu po rekomendacje dotyczące rozrywki, a nawet złożone przykłady, takie jak komentarze w formie strumienia pocisków na BILIBILI. Niektóre z tych funkcji mogą nie kojarzyć Ci się z „AI”.

Przykład: podsumowania i najważniejsze informacje z opinii wygenerowane przez AI

Pamiętasz sklep Example Shoppe? Udostępniliśmy do tej pory 2 plany systemów dla różnych funkcji AI, w tym funkcji obsługi klientaulepszonego wyszukiwania produktów. Teraz wprowadzamy trzecią funkcję: podsumowania opinii. Zapoznaj się z planem systemu AI.

Strony produktów często zawierają setki opinii. Użytkownikom może być trudno ocenić cechy, które są dla nich ważne.

Możesz używać AI, aby oferować powtarzające się tematy w wyszukiwaniach, co pozwala dostarczać spersonalizowane najważniejsze informacje i podsumowania opinii. W naszym przykładowym interfejsie użytkownik szuka słuchawek, więc wyróżniliśmy tematy dotyczące jakości dźwięku i czasu pracy na baterii. Zmniejsza to obciążenie poznawcze i może przyspieszyć podejmowanie decyzji o zakupie.

Przykładowe opinie o sklepie Shoppe.
Rysunek 1. Użytkownik wyszukał w Example Shoppe słuchawki bezprzewodowe. Na stronie produktu znajdziesz też ostatnie wyszukiwania, wykryte przez AI zainteresowania i opinie klientów. Podsumowanie opinii jest spersonalizowane pod kątem tych zainteresowań, a także innych, które mogą być istotne. Podsumowanie znajduje się nad zweryfikowanymi opiniami klientów i wygląda inaczej, aby nie można było go pomylić z pojedynczą opinią.

Podsumowania są unikalne dla każdej osoby, dlatego przy wyborze platformy należy priorytetowo traktować prywatność i szybkość. Możesz wybrać wbudowaną AI i interfejs Summarizer API, aby obliczenia były wykonywane bezpośrednio na urządzeniu użytkownika.

Sprawdzone metody

Aby funkcja AI płynnie wkomponowała się w dotychczasowe wrażenia użytkownika, postępuj zgodnie z tymi wskazówkami:

  • Zapewnij przejrzystość w prosty sposób: gdy AI przekształca lub agreguje treści generowane przez użytkowników, subtelne wskazówki pozwalają im określić, czego mogą się spodziewać. Możesz używać neutralnych etykiet, takich jak „Podsumowanie” lub „Kluczowe wnioski”, i dodawać stopniowe ujawnianie informacji za pomocą etykietek lub innych elementów interfejsu.
  • Zezwalaj na rezygnację: ludzie mają różne podejście do AI. Niektórzy mogą reagować na AI jako na coś natrętnego, przytłaczającego lub irytującego. Zapewnij jasną ścieżkę wyłączania tych funkcji.
  • Zwracaj uwagę na sformułowania: język jest ważną częścią każdego interfejsu, w tym tekstu wygenerowanego przez AI. W naszym przykładzie podsumowania powinny odzwierciedlać trendy, a nie twierdzenia. Dodaj reguły do promptu systemowego, aby ograniczyć lub wyeliminować zbyt pewny język w podsumowaniu.
  • Zaprojektuj eleganckie rozwiązanie zastępcze: jeśli to możliwe, zapewnij wartość bez użycia AI. Jeśli podsumowanie jest niedostępne z przyczyn technicznych, np. z powodu niedostępności modelu, system powinien nadal oferować niepodsumowane opinie. Po pobraniu modelu aplikacja może automatycznie wyświetlać nowe podsumowanie.
  • Zminimalizuj zakłócenia podczas konfiguracji: początkowe pobieranie modelu po stronie klienta może powodować problemy. Najpierw pokaż wartość funkcji. Możesz dodać ograniczone, działające po stronie serwera rozwiązanie awaryjne lub przenieść pobieranie na koniec ścieżki użytkownika, aby zminimalizować zakłócenia. Odpowiednie wyczucie czasu i budowanie kontekstu pomagają dopasować produkt do priorytetów użytkownika.

Ograniczona AI

AI w tle działa automatycznie, a funkcje ograniczonej AI są wyraźnie wywoływane przez użytkownika, często za pomocą linku lub przycisku. W prompcie systemowym określasz zadanie, intencję, ograniczenia i format danych wyjściowych. W przeciwieństwie do kursora w przypadku promptu otwartego użytkownicy mają ograniczone możliwości poza rozpoczęciem zadania i otrzymaniem wyniku. System zachowuje przewidywalność, ściśle ograniczając zakres działań, na które zezwala AI.

Podobnie jak w przypadku AI w tle, funkcje ograniczonej AI dobrze współpracują z modelami po stronie klienta dostosowanymi do konkretnego zadania.

Przykład: generowanie tytułu

Generowanie nagłówków może być szczególnie trudnym zadaniem. BlogBuddy wykorzystuje AI, aby pomagać autorom w tworzeniu przemyślanych, dopasowanych do kontekstu nagłówków przy minimalnym wysiłku. Zapoznaj się z planem systemu AI dla tej funkcji.

Użytkownik może kliknąć Pokaż tytuły, aby wygenerować kilka wersji roboczych do oceny i dalszego dopracowania.

Edytor BlogBuddy z osobistym esejem.
Rysunek 2. BlogBuddy ma edytor treści z kilkoma funkcjami opartymi na AI.
BlogBuddy ma 3 przykładowe tytuły do wyboru.
Rysunek 3. Po wybraniu przycisku Pokaż tytuły wyświetlą się odpowiednie tytuły na podstawie treści bloga.

W sekcji Tworzenie promptów wyjaśniliśmy, jak można to zaimplementować za pomocą interfejsu Prompt API. Utwórz prompt systemowy, który koduje zadanie, ograniczenia stylistyczne i strukturę danych wyjściowych. Z interfejsu dynamicznie przekazywana jest tylko treść posta na blogu. W przypadku implementacji po stronie klienta funkcja jest zoptymalizowana pod kątem iteracji bez kosztów konfiguracji.

Sprawdzone metody

Twoim celem jest zachęcenie użytkowników do korzystania z nowych funkcji. Aby to zrobić, pokaż wartość i daj im kontrolę nad wynikiem:

  • Przekazuj informacje w sposób jasny i wzbudzający zaufanie: jasne etykiety działań są zawsze lepsze niż ogólne sformułowania, np. „Zapytaj AI”. Użytkownik powinien być w stanie intuicyjnie zrozumieć, co się dzieje, a nie tylko jak to się dzieje. Jeśli opóźnienie funkcji jest małe, dodaj etykiety informujące, że wynik jest już dostępny. Na przykład Pokaż tytuły zamiast Wygeneruj tytuły.
  • Informuj użytkownika: dodaj niewielkie utrudnienia poznawcze, aby utrzymać uwagę użytkowników. Oferując wiele opcji, możesz zapobiec poczuciu użytkowników, że utknęli z wynikiem, który im się nie podoba. Przed zapisaniem wyników użytkownicy powinni mieć możliwość ich wyraźnego zaakceptowania lub edytowania.
  • W miarę możliwości przygotuj wynik z wyprzedzeniem: zwłaszcza w przypadku zadań po stronie klienta rozważ wstępne obliczenie wyniku, aby był dostępny od razu.
  • Szybkie iteracje: ponowne generowanie powinno być łatwe, odwracalne i tanie. Użytkownicy powinni mieć możliwość cofnięcia swoich działań. Zbieraj te sygnały opinii, aby dostosowywać funkcję do przyszłych uruchomień.
  • W razie potrzeby zapewnij bardziej precyzyjne sterowanie: dodatkowe elementy strukturalne, takie jak tagi tonu, selektory długości lub gotowe style, mogą służyć do ulepszania wyników. W wielu przypadkach potrzeba dodatkowej kontroli pojawia się z czasem, w miarę jak rośnie zaufanie użytkowników i zmieniają się ich wymagania. Skonfiguruj pętle opinii, które pozwolą Ci śledzić te zmiany.
Dokładniejsze generowanie tytułów przez BlogBuddy.
Rysunek 4. Możesz dodawać menu, aby zmieniać ton, długość i styl nagłówków generowanych przez BlogBuddy.

Jak wybrać między AI w tle a AI z ograniczeniami

Rysunek 5. BlogBuddy może wyświetlać tytuły wygenerowane przez AI, gdy użytkownik kliknie pole wprowadzania tytułu.

Niektóre funkcje można wdrożyć jako AI działającą w tle lub ograniczoną, w zależności od tego, jak i kiedy je udostępniasz. Na to rozróżnienie wpływają widoczność, obciążenie poznawcze i czas, a nie dostępne funkcje. Na przykład zamiast wymagać kliknięcia przycisku, tytuły można przygotowywać z wyprzedzeniem w tle, gdy użytkownik pisze. Gdy użytkownik skupi się na polu tytułu, możesz wyświetlić sugestie.

To podejście sprawdza się najlepiej, gdy:

  • Dane wejściowe wymagane przez funkcję są domyślnie dostępne.
  • Niewielka liczba funkcji opartych na AI
  • Koszt wstępnego obliczenia jest niski.
  • Sugestie można zintegrować bez odrywania użytkownika od wykonywanego zadania.

Z kolei ograniczona AI jest preferowana w przypadku usług z wieloma funkcjami lub działaniami opartymi na AI. Jawne aktywatory pomagają uniknąć niepotrzebnych obliczeń i dają użytkownikom większe poczucie intencji i sprawczości.

Otwarte AI

Otwarte AI daje użytkownikom bezpośrednią kontrolę nad zachowaniem systemu AI dzięki wprowadzaniu danych w dowolnej formie. Zamiast wywoływać z góry określoną czynność, użytkownicy mogą podać kontekst w języku naturalnym. Po przesłaniu zapytania system AI interpretuje intencje, dodaje brakujący kontekst i próbuje odgadnąć, co należy zrobić dalej.

Dane wejściowe są bardzo indywidualne i często nieprzewidywalne, dlatego system AI musi być w stanie poradzić sobie z tą zmiennością. Ten typ zapewnia największą elastyczność, ale też największe ryzyko pogorszenia wygody użytkowników:

  • Niejednoznaczne lub niepełne dane wejściowe użytkownika
  • Nieprzewidywalne wyniki
  • większe prawdopodobieństwo otrzymania nieprawidłowych lub wprowadzających w błąd odpowiedzi;
  • Zwiększone ryzyko nadmiernego zaufania
  • próby naruszenia bezpieczeństwa systemu, np. poprzez zmuszanie go do generowania nieodpowiednich treści;

Przykład: agent obsługi klienta oparty na AI

W przypadku Example Shoppe obsługa klienta obejmuje szeroki zakres problemów: śledzenie zamówień, zwroty, pytania dotyczące produktów, problemy z dostawą i przypadki graniczne, które nie pasują do standardowych procesów. Przypomnij sobie schemat systemu AI z modułu Platforma.

Po dodaniu ograniczonych funkcji AI do najczęstszych działań interfejs może być przeładowany. Zamiast tego elastyczność może zapewnić agent pomocy AI o otwartym charakterze.

  • Szybko rozwiązuj typowe problemy.
  • skrócenie czasu oczekiwania i obniżenie kosztów obsługi klienta;
  • zapewniać natychmiastową pomoc w wielu tematach bez skomplikowanych procesów obsługi.

Wartość pracownika obsługi klienta polega na radzeniu sobie ze zmiennością na dużą skalę. Ostatecznie musisz stworzyć system, który będzie w odpowiedzialny sposób przetwarzać te dane wejściowe. Chociaż masz nadzieję i oczekujesz, że użytkownicy będą kierować się własnym osądem i dostosowywać poziom zaufania, możesz ponosić odpowiedzialność za nieprawidłowe odpowiedzi udzielane przez model.

Użytkownicy otwierają czat z pracownikiem obsługi klienta i zadają pytania typu „Gdzie jest moje zamówienie?” lub „Pobrano ode mnie opłatę 2 razy – czy możesz mi pomóc?”. Agent interpretuje intencje, zadaje pytania doprecyzowujące, wyszukuje odpowiednie informacje i proponuje kolejne kroki lub działania.

Rysunek 6. Agent obsługi klienta o otwartym charakterze akceptuje dane wejściowe od dowolnego użytkownika. Może prowadzić użytkowników przez wstępnie zdefiniowane sugestie promptów. Wyświetl ten obraz w pełnym rozmiarze.
Rysunek 7. Nawet w przypadku otwartego UX elementy strukturalne, takie jak identyfikatory zamówień, w które można kliknąć, mogą zmniejszyć liczbę błędów. Wyświetl ten obraz w pełnym rozmiarze.

Większość otwartych systemów AI opiera się na modelach po stronie serwera. Można je łączyć z innymi komponentami, takimi jak bazy danych, narzędzia zewnętrzne i logika biznesowa, aby tworzyć złożone systemy AI. Powinieneś udostępnić ścieżki eskalacji do agentów obsługi klienta.

Sprawdzone metody

Skup się na przejrzystości, kalibracji zaufania i mechanizmach kontroli:

  • Pomagaj użytkownikom w jasnym wyrażaniu intencji: podawaj sugestie dotyczące promptów („Chcę zwrócić zamówienie”) i sugerowane dalsze działania, aby zmniejszyć niejednoznaczność.
  • Uwidocznij stan systemu i założenia: agent powinien jasno komunikować, co rozumie („Wygląda na to, że pytasz o zamówienie 12345”) i jakich informacji używa.
  • Pytanie przed podjęciem działania: przed wykonaniem działań wymagających zachowania ostrożności, takich jak zwroty, zwroty środków czy zmiany adresu, agent powinien podsumować działanie i poprosić użytkownika o potwierdzenie.
  • Projektowanie z myślą o weryfikacji i korekcie: użytkownicy powinni mieć możliwość korygowania nieporozumień, przeformułowywania próśb lub cofania rozmowy bez konieczności rozpoczynania jej od nowa.
  • Połącz z ograniczonymi funkcjami AI: zbyt długa wymiana wiadomości może zniechęcić użytkowników. Dodaj elementy strukturalne jako skróty. Na przykład wywnioskowany numer zamówienia może być wyświetlany jako element, który można kliknąć, aby wyszukać, wybrać lub zastąpić, zamiast wymagać od użytkownika przeformułowania żądania w tekście.
  • Wyrażanie niepewności i ograniczeń: agent powinien przyznawać się do niepewności, sygnalizować brakujące informacje i w przypadku niskiego poziomu ufności przekazywać rozmowę do konsultanta.

Ten rodzaj AI wymaga od użytkowników krytycznej oceny odpowiedzi i wiedzy o tym, kiedy należy przekazać sprawę dalej.

Najważniejsze punkty

W tym module omówiliśmy różne rodzaje interfejsów użytkownika opartych na AI:

  • AI w tle pozwala dodać dodatkową wartość lub uatrakcyjnić dotychczasową ścieżkę użytkownika.
  • Ograniczone funkcje AI można wykorzystywać w konkretnych, dobrze zdefiniowanych zastosowaniach, w których AI sprawdza się najlepiej.
  • W przypadku domen o dużej zmienności potrzebna jest otwarta AI. Używaj tylko pytań otwartych, jeśli masz pewność co do technicznej wydajności systemu.

W tabeli poniżej znajdziesz podsumowanie zalecanych wzorców UX dla poszczególnych typów AI:

Motyw UX Wzorzec UX Informacje ogólne Ograniczony Pytanie otwarte
Przejrzystość treści wygenerowane przez AI są wyraźnie oznaczone;
Proste wyjaśnienie działania AI
Widoczny stan systemu i założenia
Wskazówki Propozycje promptów
Uporządkowane dane wejściowe (tagi, gotowe ustawienia)
Sterowanie Jawne wywoływanie AI
Wyświetlanie podglądu przed zastosowaniem danych wyjściowych
Wiele alternatyw
Wygeneruj ponownie
Cofnij
Kalibracja zaufania Zachowawcze sformułowania
Wskaźniki ufności
Zarządzanie ryzykiem i awariami Celowe utrudnienia i prośby o ocenę
Przekazanie rozmowy pracownikowi obsługi klienta / eskalacja
Płynne przejście na wersję bez AI
Wymagane wzorce:
Opcjonalne wzorce:
Niewymagane: .

Dodatkowe materiały

Aby dowiedzieć się więcej o wzorcach UX, zapoznaj się z tymi materiałami:

Sprawdź swoją wiedzę

Jakim wzorcem UX jest rozmycie tła rozmowy wideo?

AI w tle
Świetnie, zgadza się! Rozmycie tła jest często implementowane bez konieczności interakcji ze strony użytkownika.
Ograniczona AI
Prawie dobrze. Możesz udostępnić przełącznik rozmycia tła, aby była to funkcja ograniczona, ale nie jest to konieczne.
Otwarte AI
To nie jest poprawna odpowiedź.

Kiedy warto używać otwartej AI jako wzorca UX?

Dane wejściowe użytkowników są często nieprzewidywalne i spersonalizowane.
Świetnie, zgadza się!
Użytkownicy mają w tej funkcji ograniczoną liczbę opcji do wyboru.
To nie jest poprawna odpowiedź. Prawdopodobnie potrzebujesz ograniczonej AI.
Chcesz, aby AI działała po stronie klienta.
To nie jest poprawna odpowiedź. Aby poradzić sobie ze zmiennością, prawdopodobnie potrzebujesz AI po stronie serwera.