Egy egyszerű felhasználói felület-hack az Onboarding UX javításához [OCD]

Az UI modellek és vázlatok feltételezik, hogy a felhasználói adatok már vannak jelen. Például az alábbi makett feltételezi, hogy a felhasználónak lesznek névjegyei, akikkel csevegni tud, értesítésekkel és még csevegőszálakkal is.

Ezzel az ingyenes vázlatforrással épített egyszerű messenger

De ez soha nem áll fenn, amikor a felhasználó feliratkozik. A kezdetben nincs adat, tehát egy üres névjegy oszlop és egy üres csevegőablak.

A fényes felhasználói felület kialakítása megkönnyíti az információk felhasználását, és nem az a hangsúly, hogy hogyan hozzák létre ezeket az információkat.

Megtanultam ezt a nehéz utat, amikor a Dribbble-ból annyit áztam be, hogy b2b alkalmazáshoz tervezzem a műszerfalot. Nagyon jól nézett ki a Vázlaton, de ügyfeleink nem tudták megtalálni az utat.

A rossz UX növeli a fedélzeti és támogatási költségeket, közvetlenül befolyásolva a bevételeket. Rosszul érzi magát egy olyan felhasználó figyelése is, amely küzd a pixel tökéletes kialakításáért. Emlékezteti Önt, hogy kudarcot vallott.

Meglévő megoldások

Az egyik megoldás az volt, hogy előzetes fedélzeti fedélzettel rendelkezzenek olyan diákkal, mint interfész. Úgy tűnik, hogy ez a mobilalkalmazások szabványa.

Slack csúszka alapú fedélzeti UX

A diák-megközelítés problémája a kontextus hiánya. Csak annyit közvetíthet a diákon (más kérdés, hogy a felhasználó megtartja-e).

Nagyon jó, ha áttekintést nyújt a termékről, de nem nagyon segíti a termék működésének magyarázatát. Használatom szempontjából nem volt releváns, mivel a termék bonyolultságát nem lehetett néhány diára felforgatni.

Volt egy tooltip alapú megoldás is, amely a felhasználót konkrét lépéseken végigvezeti. Ez a lehetőség népszerűbb a webes alkalmazásokban. Számos jó javascript könyvtár létezik, amelyek segítenek ezen áramlások felépítésében.

Szerszámtipp a fedélzeten lévő introjs.com bemutató demó alapján

Ami az eszköztipp-alapú megoldást illeti, bosszantónak találtam őket, és szinte mindig rákattintottam az „ugró bemutatója” elemre. Bár a nagyvállalatok, mint például a Canva, az eszközleírást használják a beszálláson alapulnak. Az AppCues nevű termék lehetővé teszi ezen eszköztippek kód nélküli, ügyes tervezését.

Létezik még egy jeladó stílusú megközelítés is, ahol a gyakran félreértett funkciókat izzó jeladó jelöli, amelyek szükség esetén releváns információkat szolgáltatnak.

Ez a leginkább zavaró mód. Az eszköztippel ellentétben, amely egy 17 lépéses bemutatót leront a torkán, és eltűnik, amikor ténylegesen szüksége van rá, ez a hotspot alapú megközelítés információkat nyújt, ha készen áll.

Érdemes megemlíteni, hogy a Slack mind a három űrlapot használja. Nem csoda, hogy a felhasználók ragaszkodnak. Ami szintén utal arra a tényre, hogy a megtartás közvetlenül arányos a fedélzeten tartózkodás könnyűségével.

OCD, más néven: Onboarding centrikus kialakítás

Szeretem elnevezni a dolgokat. A nevek segítenek a gondolatok megvalósításában. Hívjuk ezt az Onboarding központú kialakításnak.

Olyan megoldást akartam, amely:

  • Releváns volt a kontextusban
  • Nem volt idegesítő (senki sem szeret 17 lépést megtenni egy funkció működésének megtanulására)
  • Zavaró (mint a jeladó)
  • Könnyen fogyasztható (az eszköztippek nem könnyűek)

Eredmény

Csak az államok tervezését kezdtem meg. A csevegéstervezés, amelyet a cikk elolvasása közben láttál, három állapotból állhat.

1. állapot: Nincs kapcsolat

2. állapot: Jelen vannak kapcsolattartók, de csevegés nélkül

3. állapot: Mind a csevegések, mind a kapcsolattartók jelen vannak

Az egyes állapotok célja, hogy a felhasználót a következő állapotba lépjék. Amikor a felhasználó a 3. állapotba lépett fel, akkor sikeresen bekerül a fedélzetre. A chat-makett figyelembe véve az egyes államok célja a következő:

1. állam célja: A felhasználó elsődleges névjegyének felvétele

Az alábbi makettnek csak egy cselekvésre való felhívása van, a kék plusz gomb, amely lehetővé teszi a felhasználó számára új névjegy felvételét. A grafika és a szöveg egyaránt megkönnyítik a felhasználót, hogy megtegye ezt a műveletet.

1. állapot - a felhasználót töltse fel névjegyek felvételével (illusztráció az undraw.co-tól)

Miután hozzáadtak egy névjegyet, elkezdhetjük a második célt.

2. állam célja: A felhasználó elsődleges csevegésének indítása

Az alábbi makett egy grafikus primerrel rendelkezik a csevegés elindításához. Kifejezetten felvázolja a rendelkezésre álló funkciókat. Megint csak egy dolog, amit most megtehetsz, azaz küldhet üzenetet. Hívást kezdeményezhet ezen a felhasználói felületen is, de mindkét művelet ugyanazt a célt szolgálja. A felhasználói lépéseket a 3. lépésre hajtják végre.

2. állapot - kapcsolatfelvétel hozzáadva, a csevegés megkezdéséhez először

3. célkitűzés: Nincs, a felhasználó fedélzetén van - minden jelzésnek eltűnnie kell

És végül, amikor a felhasználó néhányszor megismételte a folyamatot, felhasználói felülete elkezdi keresni, ahogyan eredetileg terveztük.

3. állapot - A felhasználó sikeresen be van lépve

Ennek a megközelítésnek az előnyei

  • Az 1. lépésben a diák megközelítéséhez képest az Onboarding Centric Design (OCD) a tartalmat darabonként mutatja be. Az információ a döntéshozatalkor elérhető.
  • Ez a megközelítés mind mobil, mind asztali eszközökön használható. Ez a felhasználói felület egyszerű, de összetett felhasználói felület esetén az OCD-t hotspotokkal használhatja a CTA-k emelésére.
  • Ez a megközelítés elsősorban javítja UX-jét, mivel arra készteti Önt, hogy gondolkodjon a felhasználó utazása szempontjából.
  • Ha véletlenül úgy írja el előlapjait, hogy a Reactot használja, ez a megközelítés pontosan illeszkedik az összetevő architektúrájához.

Tehát hüvelykujjszabályként:

Tervezzen maket az államok számára.
Minden államnak van egy célja - haladás a következő állapotba.
Az utolsó állapot az, amikor a felhasználó be van szállítva.

Köszönöm, hogy elolvasta :)

Üdvözlet, ha tetszett ez a cikk, és frissíteni szeretnéd, kövess engem: Közepes, Github vagy Twitter

Egy laza közösséget működtetök (amelynek 2018. október 6-tól 18 tagja van), ahol másoknak segítséget nyújthat, vagy segítséget kaphat az előlap, a háttér és az általános fejlesztés vonatkozásában. Itt csatlakozhat.