Jak zaprojektować prosty interfejs użytkownika, gdy masz złożone rozwiązanie

Ten artykuł został uprzejmie poparty przez naszych drogich przyjaciół z Flatfile, którzy tworzą piękne, zorientowane na człowieka doświadczenia, aby usunąć bariery między ludźmi a danymi. Dziękuję Ci!

Co oni mówią? Złożone problemy wymagają złożonych rozwiązań? Z pewnością dotyczy to tworzenia aplikacji i oprogramowania.

Ale jak zapewnić, że złożony backend nie przedostanie się do frontendu?

Ogólnie rzecz biorąc, złożony interfejs użytkownika jest więcej niż wystarczającym powodem, dla którego wiele osób porzuca witrynę internetową lub aplikację mobilną. Jeśli chodzi o płacących lub subskrybujących użytkowników, nie oczekuj, że żaden z nich zadowoli się skomplikowanym interfejsem Twojego oprogramowania.

Nie ma znaczenia, jak niesamowity jest Twój produkt. Jeśli jego zewnętrzny wygląd doprowadza użytkowników do szaleństwa, możesz spodziewać się w zamian dużej ilości kosztownego odpływu użytkowników.

Zespół Flatfile bardzo dobrze zna ten problem, ponieważ zbudował udany importer danych, czyli technologię, z którą wielu projektantów zmagało się samodzielnie. Poniżej przyjrzymy się niektórym wskazówkom, które pomogły im przezwyciężyć to wyzwanie związane z projektowaniem interfejsu użytkownika i mogą również pomóc Tobie.

Jak zaprojektować prosty interfejs użytkownika dla złożonego rozwiązania

Twoim celem podczas projektowania frontendu swojego rozwiązania jest przedstawienie użytkownikowi (a czasami także użytkownikom końcowym) bardzo prostego i intuicyjnego interfejsu.

Jak więc Flatfile był w stanie to osiągnąć? Sam proces wprowadzania danych może być skomplikowany — trzeba pobrać dane z różnych źródeł, typów plików i użytkowników, a następnie przetłumaczyć je na użyteczne dane w aplikacji. Nakłonienie użytkowników do przygotowania, sprawdzenia i oczyszczenia danych w interfejsie użytkownika również nie jest łatwym zadaniem.

Oprócz standardowego procesu projektowania oprogramowania, Flatfile podjął dodatkowe kroki, aby użytkownicy nigdy nie zorientowali się, jak złożony jest ich produkt. Oto, czego się nauczyli:

1. Określ cele swoich użytkowników, aby móc zaprojektować interfejs użytkownika na pierwszym miejscu

Aby zbudować produkt, który użytkownicy uznają za przydatny, musisz projektować z myślą o ich celach i z ich perspektywy. Jeśli stracisz to z oczu, możesz skończyć z interfejsem użytkownika, który ustala priorytety dla twoich celów i priorytetów, co pozwala przebić się przez zawiłości zza kulis.

Zobaczmy, jak ten błąd może mieć poważne konsekwencje dla Twojej aplikacji lub oprogramowania.

Instagram niedawno zaktualizował nagłówek i stopkę swojego starego interfejsu. Oto jak wyglądał nagłówek przed i po listopadzie 2020 r.:

Wcześniejszy projekt zawierał dwa symbole/działania:

• Ikona aparatu do robienia lub przesyłania zdjęć.
• Ikona Messenger do czatowania z kontaktami.

Najnowszy projekt przesunął wszystkie ikony na prawo. Obecnie są ich trzy:

• Symbol plusa do tworzenia postów, historii, bębnów i koncertów na Instagramie.
• Symbol serca do wyświetlania aktywności (tj. zaangażowanie postów, nowi obserwujący itp.).
• Ikona Messenger zachowuje ten sam wygląd i rozmieszczenie.

Patrząc na nagłówek, możesz nie sądzić, że jest tu dużo nie tak. Jednak Instagram prawdopodobnie nie przeprojektował swojej nawigacji, aby poprawić estetykę lub użyteczność. Nowa stopka jest tego dowodem:

Spójrz na środkowe i przedostatnie ikony. Po listopadzie ikony plusa i serca zostały przeniesione do prawego górnego rogu aplikacji i zastąpione następującymi:

• Link do rolek na Instagramie, funkcja, która działa podobnie do TikTok (i prawdopodobnie zwiększa uzależnienie platformy).
• Link do zakupów na Instagramie, funkcja umożliwiająca użytkownikom robienie zakupów w popularnych sklepach (nie w tych, które aktywnie śledzą).

Interfejs użytkownika nie zachęca już (przede wszystkim) użytkowników do wybierania treści z ich ulubionych kont lub nawiązywania organicznych połączeń z innymi użytkownikami. Zamiast tego interfejs użytkownika nadaje priorytet nowym aspektom platformy typu pay-to-play, faworyzując marki i wpływowe osoby, które wydają na nią pieniądze.

W związku z tym użyteczność aplikacji została naruszona, ponieważ przyciski powiadomień i tworzenia zostały przeniesione ze strefy kciuka do rogu aplikacji. Nie tylko sprawia to, że aplikacja jest trudniejsza w użyciu, ale dodatkowo zwraca uwagę na to, co dzieje się za kulisami. Jeśli użytkownicy Instagrama nie myśleli o złożonych algorytmach i decyzjach biznesowych w pracy, interfejs użytkownika zwraca na nie uwagę.

Zanim zrobisz cokolwiek innego, dowiedz się, co Twoi użytkownicy chcą osiągnąć, a także jak oczekują tego. Następnie podsumuj cele użytkowników podobne do tego, jak robi to Randy Wiafe, Head of Product for Flatfile:

„Celem użytkowników Flatfile jest płynne importowanie danych swoich klientów. Użytkownicy Flatfile muszą przenosić dane z jednego oprogramowania do drugiego, a proces ten musi być jak najłatwiejszy, ponieważ jest to jedno z pierwszych doświadczeń związanych z produktem, jakie będzie miał nowy klient — importowanie swoich danych”.

Nie możesz stracić tego z oczu. Ponieważ jeśli nie projektujesz interfejsu użytkownika, który jest zgodny z celami użytkowników i ich preferowaną ścieżką, prawdopodobnie ujawnisz część złożoności, która ma miejsce za kulisami.

2. Oceń produkty konkursów, aby stworzyć swój MVP

Minimalny opłacalny produkt jest absolutnie niezbędny za każdym razem, gdy tworzysz aplikację. Nie tylko oszczędzasz czas i pieniądze, opracowując tylko najprostszą wersję produktu, aby rozpocząć, ale działająca wersja beta daje ci coś, z czego możesz zebrać prawdziwe opinie użytkowników podczas iteracji.

To właśnie zrobił Flatfile. Wiafe wyjaśnia wartość MVP:

„Beta naprawdę otworzyła nam oczy pod względem interakcji klientów i ich użytkowników końcowych z produktem. Możliwość zrozumienia, dlaczego i w jaki sposób użytkownicy byli blokowani, pomogła nam znacznie poprawić wrażenia”.

To powiedziawszy, skąd wiesz, jak minimalny jest interfejs użytkownika Twojego MVP? Ponieważ jest ogromna różnica między minimalnym a bezużytecznym.

Zamiast rozpoczynać proces projektowania od zera, polecam spędzanie czasu w oprogramowaniu konkurencji.

Oczywiście nie opowiadam się za kradzieżą cudzych projektów. Sugeruję jednak, żebyś miał z nimi jakieś doświadczenie z pierwszej ręki.

Na początek pozwoli Ci to zidentyfikować trendy w interfejsach użytkownika — trendy projektowe, z którymi Twoi potencjalni klienci już czują się swobodnie i pewnie angażują się w nie. Po drugie, możesz użyć tych wersji demonstracyjnych, aby zmniejszyć swój MPV do absolutnego minimum.

Załóżmy, że tworzysz oprogramowanie do obsługi płatności. Możesz zacząć od Stripe:

I 2Zamówienie:

Usunąłem wszystkie dane z tych pulpitów nawigacyjnych i pozostawiłem tylko główne komponenty, nawigację i etykiety. Jakie są wspólne wątki, które widzimy między dwoma interfejsami użytkownika?

• pasek wyszukiwania w pobliżu środka nagłówka,
• Link do ustawień użytkownika lub informacji o koncie w prawym górnym rogu,
• Panel sterowania wyrównany do lewej, zajmujący od ⅙ do ⅕ strony,
• Dane prezentowane w ramach samodzielnych bloków,
• Czcionki neutralne bezszeryfowe używane do etykietowania,
• Kontrast kolorów jest minimalny i istnieje na pulpicie tylko w celu wskazania wybranych kart lub rozróżnienia zestawów danych.

To tylko podstawowa analiza, ale rozumiesz. Pozbywając się szczegółów i skutecznie przekształcając produkty konkurencji w modele szkieletowe, możesz zidentyfikować szczegóły projektu, które użytkownicy czuliby się komfortowo i pewnie, widząc w oprogramowaniu.

Możesz także wykorzystać ten czas spędzony na ich produktach, aby dowiedzieć się, gdzie przejawia się ich złożoność. Czy hierarchia prezentowanych danych jest nielogiczna? Czy w zestawie znajdują się elementy, które nadmiernie komplikują rzeczy, ponieważ pojawiają się na niewłaściwych ekranach? Czy prosisz użytkowników o wykonanie jednego kroku za dużo w celu osiągnięcia ich głównego celu?

Jedną z rzeczy, które sugeruje Wiafe, jest nie traktowanie MVP ściśle jak szkieletu:

„Kolejnym obszarem, na którym się skupiliśmy, było sprawienie, aby to doświadczenie było przyjemne dla naszych użytkowników. Nie chcieliśmy, aby beta była zimna i nieciekawa. Chcieliśmy zrobić dobre pierwsze wrażenie, a to oznaczało, że musieliśmy poświęcić czas na nadanie programowi charakteru, zanim go wydamy”.

Tak więc, użyjesz oprogramowania konkurencji, aby dopracować specyfikacje projektowe, które utrzymają prosty interfejs użytkownika. Jednak Twój MVP nadal musi być opłacalnym produktem, z którego użytkownicy chcą korzystać, co oznacza zaprojektowanie go tak, aby był angażujący.

3. Stopniowo wprowadzaj złożoność i potwierdzaj za pomocą testów użytkownika

Czy kiedykolwiek zamawiałeś jedzenie z restauracji za pośrednictwem aplikacji z dostawą i zastanawiałeś się, dlaczego trwa to tak długo?

Składasz zamówienie o 20:00. Aplikacja mówi, że restauracja potwierdziła zamówienie kilka sekund później, a jedzenie otrzymasz około 20:45. O 8:40 otwierasz aplikację, aby zobaczyć, gdzie na mapie jest kierowca dostawy i zastanawiasz się, dlaczego się nie rusza. Albo, co gorsza, dlaczego zmierzają w złym kierunku. Twój żołądek zaczyna burczeć i żałujesz, że sam nie odebrałeś zamówienia.

Jeśli nie znasz tego, masz szczęście. Ale jeśli Google „sterownik dostawy poszedł w złym kierunku w aplikacji”, zobaczysz, co mam na myśli:

To nowy problem dla osób jedzących na mieście. W przeszłości otrzymywali tylko wiadomość z potwierdzeniem zamówienia, a potem otrzymywali telefon, SMS-y lub pukali do drzwi, gdy dostawali jedzenie.

Jednak aplikacje dostawcze zmieniły się w ciągu ostatniego roku, zapewniając pełny wgląd nie tylko w postępy restauracji w gotowaniu jedzenia, ale także pokazując dokładne miejsce pobytu kierowcy dostawy.

Czy była to funkcja, która była absolutnie kluczowa dla sukcesu aplikacji dostarczających? Jeśli to irytuje użytkowników do tego stopnia, że ​​doświadczają dużej liczby skarg dotyczących obsługi klienta, zwrotów kosztów zamówień lub rezygnacji użytkowników, to nie, to nieprawda.

Z tego powodu złożoność powinna być stopniowo wprowadzana do MVP i w pełni zintegrowana dopiero wtedy, gdy testy użytkowników potwierdzą, że jest to opłacalny dodatek.

Jak wyjaśnia Wiafe:

„W zależności od użytkownika produktu wprowadzanie złożoności do produktu jest różne. Dzięki naszemu produktowi Portal częściej współpracujemy z programistami, więc nie było problemu ze zwiększeniem złożoności importera. Jednak Concierge został zbudowany z myślą o sukcesach klientów i zespołach wdrożeniowych, które są mniej technicznie nastawione. Dlatego bardzo ostrożnie podchodziliśmy do dodawania złożonych funkcji lub komponentów do oprogramowania, dopóki ich nie przetestowaliśmy”.

Zrozumienie celów i oczekiwań użytkowników jest cenne na początku. Ale nie zakładaj, że rozumiesz wszystko, co dzieje się w głowach użytkowników, gdy masz działającą aplikację lub oprogramowanie, które tam jest.

Jeśli nie jesteś na miejscu swoich użytkowników, doświadczając ich dokładnie takimi, jakimi są, naprawdę nie masz pojęcia, jak nowe warstwy złożoności wpłyną na użyteczność tak , jak ją postrzegają.

Dlatego niezwykle ważne jest sformułowanie hipotez roboczych związanych z tym, co się stanie, gdy wprowadzisz większą złożoność interfejsu użytkownika lub usuniesz coś, co uważasz za zbyt złożone. Gdy masz pomysł oparty na danych, możesz zacząć zabiegać o opinie użytkowników i udoskonalać swój produkt.

Zawijanie

Aby zbudować aplikację, z której będą korzystać Twoi klienci, musisz dać im coś do pracy, a nie coś, co wymaga od nich cotygodniowego kontaktowania się z obsługą klienta. Albo to sprawia, że ​​zastanawiają się, dlaczego używają czegoś, co powoduje u nich więcej stresu i frustracji niż wcześniej.

Uważaj więc, jak bardzo złożoność backendu pozwolisz zainfekować frontend. Jeśli interfejs użytkownika jest zbyt skomplikowany w nawigacji lub zbyt zawiły, aby go zrozumieć, użytkownicy będą się buntować i masowo uciekać.