Homepage » UI / UX » Koncentrált interfészek tervezése a jobb felhasználói elkötelezettség érdekében

    Koncentrált interfészek tervezése a jobb felhasználói elkötelezettség érdekében

    Felhasználó elkötelezettsége egy trükkös metrika, amely különböző módon érhető el a különböző projektek esetében. A legtöbb tervező azt gondolja felület amikor interaktivitásról beszélnek, de oldal tartalmát a felhasználók interakcióját is ösztönözhetik. A jobb felhasználói elkötelezettség érdekében fontos írjon érdekes tartalmat, és mutassa be ezt a tartalmat egy fülbemászó designban.

    Sokkal könnyebb mondani, mint a megtörtént, de ha megtanulsz néhány alapot, akkor nem lesz gondod az a fókuszált felhasználói felület nagy tartalommal projektjeihez.

    Ebben a bejegyzésben megmutatom, hogyan kell növelni a felhasználói interakció és a tartalom elkötelezettsége webes felületen. Ezek a két leggyakoribb módja a látogató bevonásának, és ha lehet a tapasztalat optimalizálása nem lesz problémája annak, hogy növelje a jövedelmező időt az oldal metrikájában.

    Capture Novelty

    A fogalom újdonság olyan eseményt vagy dolgot határoz meg, amely általában új, gyakran nagyon új és egyedi kontextus alapján. Új események elkapjuk a figyelmünket, mert ők kiáll. Ez igaz az újdonságot reprezentáló interfész-kialakításra is, amelyek úgy tűnik ugorj le az oldalról.

    Nemrég találtam egy nagy utat, amely megvitatta az újdonság fontosságát, amikor az elkötelezettséget illeti. A felhasználók úgy tűnik új tapasztalatokra, interfészekre és UI elemekre irányul mert különbözőek. Az egyetlen tény, hogy másképp tervezték, gyakran felhívja a figyelmet.

    Az egyik gyakori példa a legtöbb céloldalon található híváshívó gomb. Újdonságot is építhetsz háttérképek, illusztrációk vagy alkalmazásképek, például az Uber for Business céloldalán.

    Ennek az oldalnak van egy cselekvési gombja, de azonnal figyelem megy a képernyőképekhez. Élítenek, amikor először betöltik, így egyesül a design újdonsága mozgással felhívja a figyelmet.

    Egy másik lehetőség a GiftRocket használata illusztrált ikonok linkekként továbbhalad a helyszínre.

    Mindkét példa használja az újdonságot. Nem mindig vonhatsz embereket tovább a webhelyre, de jobb eredményeket fogsz látni, ha figyelmet kapsz visceralis szinten első.

    A design az első dolog a látogatók látják, és el kell ragadniuk a figyelmüket másodperceken belül a további elkötelezettség ösztönzése.

    Skimmable tipográfia

    A tanulmányok kimutatták, hogy a legtöbb felhasználó lapolvasás ahelyett, hogy szó szerint olvasnám. Valószínűleg szeretné felhívni az embereket a tartalom olvasására, de csak annyit tehet.

    A legjobb alternatíva a létrehozás skimmable tartalom címsorokkal, félkövér szöveggel és képekkel, amelyek azt mutatják, hogy mit akarsz mondani. Legalább gondolok három erős írási technika a tartalomhoz felhasználhatja növeli az olvashatóságot:

    1. Tartalom megosztása tiszta feliratokkal
    2. Törölje a bekezdéseket hogy kisebb legyen
    3. Használja a felsorolt ​​listákat gyorsabb megosztása

    A cél az olvasók megtartása az oldal lefelé mozgatása bármilyen szükséges eszközzel. A tartalom kicsi megtartásával harapás méretű darabokban sokkal könnyebb lesz a figyelem felkeltése és az emberek további vezetése az oldalon.

    Erre az írási stílusra példa a Quick Sprout blog. A tartalmat Neil Patel írta, és gyakran nagyon hosszú formátumú tartalmat ír, de ő lebontja a bekezdéseket 1-3 mondatra.

    Ha van megfelelő címsorok, és használat képek / golyópontok a tartalom egészénél az embereket tovább süllyedik és olvassák tovább. Győződjön meg róla, hogy növelje a szóköz mennyiségét pontok között. Margók és paddings mindketten nagy szerepet játszanak az elrendezésben és az olvashatóságban.

    Szöveg tervezése, hogy ez valójában legyen szórakoztató olvasni. Az unalmas másolat nem csábítja, de nem lesz túl kicsi, vagy ellentétes.

    Eye-Catching képek

    A Backlinko egy újabb esettanulmánya azt sugallja, hogy az oldalak legalább egy képpel általában magasabb rangú mint a képek nélküli oldalak. Ez SEO szempontból nagyszerű.

    De mi van a felhasználói elkötelezettséggel? Ha megtarthatja ezt az egy képet hajtás felett vagy közel a tetejéhez azt is megragadja a látogatók figyelmét, mielőtt ugrálnak. Ne feledje, hogy az új oldalelemek vonzódnak.

    Ha van egy képed (vagy sok képed) az egész oldalon, akkor szakítsa meg a monotonitást unalmas szövegblokkok. A felhasználók is szünetet olvasni a kép megértése vagy a kép és az írásos tartalom közötti kapcsolat létrehozása. De mint a legtöbb tervezési technika esetében, a minőség értékesebb, mint a mennyiség.

    A Moz-es esettanulmány megállapította, hogy a jó minőségű képek hajlamosak tartsa a látogatókat sokkal hosszabb ideig az oldalon. Másrészt rossz minőségű képek nem is működik és bizonyos esetekben a látogatókat gyorsabban ugrál mint kép nélkül. Próbáljon legalább egy képet belefoglalni releváns a tartalom szempontjából és az értéket ad az olvasónak.

    A TechCrunch ezt a cikkben szereplő képekkel látja el, ahol gyakran talál egy kiemelt fotó a hajtás felett.

    A WordPress teszi a kiemelt képek hozzáadását a postai bélyegkép funkcióval. Minden egyes bejegyzéshez külön fotót állíthat be, és ezeket az oldal tetején megjelenítheti. Ez egy tökéletes módja annak, hogy a látogatókat megnézhessék mi a tartalom, és növelni kell CTR kapcsolódó postafiókokhoz, amelyek tartalmazzák a postai bélyegképet is.

    Kontrasztos oldalelemek

    Ha egy adott területen egy adott területre kell felhívnia a figyelmet aszimmetria a legjobb barátod. Kontraszt egy kemény éket hajt végre a tervek bizonyos területei vagy bizonyos tartalomblokkok között.

    A látogató természetesen a kontraszt felé fordul mert más. A szín, a méret vagy a szóköz nagy, egymás melletti egymás mellé helyezi a szemet, mert ez megtöri a többi formáját az elrendezésben.

    A kontrasztos oldalelemek kedvenc példája talán a Sketch kezdőlapja. Sok kontraszt található a két műveletgomb között, az egyik a Sketch tárgyalás letöltéséhez, a másik pedig a másolat megvásárlásához.

    A vásárlási gomb teljes háttérszínt használ sokkal világosabb mint a fejléc többi színe. A gomb szövege is világosabb az ingyenes próbaverzióhoz képest. Ez vezet a látogatók felé a Vásárlás most gombra kizárólag vizuális ingerekből.

    Észrevesz egy hasonló technika az Optin Monster honlapján. Ennek a fejlécnek csak egy gombja van, amelynek neve: OptinMonster Now. Világos zöld gomb kék alapon, amelyen nincs más zöld elem.

    A színe, mérete és alakja mindannyian felhívja a figyelmet, mert ez minden másval ellentétes a fejlécben. Közvetlenül a gomb mellett egy kis szöveges hivatkozás egy videó előnézethez. Valószínűleg ez egy nagyszerű videó, és figyelmet érdemel, de nem annyira, mint a CTA gomb.

    Egy blog számára a felhasználók elkötelezettsége eltérő lehet. Az egyik közös választás a hírlevél feliratkozási űrlap mint például az Aeolidia példája.

    Ha lefelé görgeted a tartalom aljára, észreveszed a fancy-shmancy regisztrációs doboz Csak a hírlevélhez készült. Az oldal többi részével kiemelkedik egyedi háttérszín, szórakoztató tipográfia és aranyos King Triton ikon.

    A kontrasztos tervezés legjobb módja a példák tanulmányozása és csak kísérletezés. Nézze meg, mi működik és mi nem nyomon követési mutatók A / B teszteléssel. Ha több példát keres, nézze meg ezt a Codrops-írást, amely tele van élő aszimmetrikus weboldalak tippjeivel és képernyőivel.

    A felhasználók interakciójának ösztönzése

    Olyan sok lehetőség van arra, hogy a látogatók érdeklődjenek egy webhely iránt, de a leggyakoribb az szerezzen nekik dolgokat. Ez igaz a statikus blogokra és a dinamikus társadalmi oldalakra is. Ehhez nincs egy-egyfajta trükk. Bármilyen munkát végezhet a felhasználók számára érzi magát az oldalhoz.

    Az a statikus hely, lehet, hogy sok-sok kapcsolódó linkek többet olvashat, vagy tartalmazhat kép diavetítések. Te is űrlapok hozzáadása felhasználói megjegyzések vagy e-mail hírlevelek.

    Amikor arra kerül sor dinamikus interfészek, a webhely célja általában a felhasználók bevonásának ösztönzése. A legnagyobb akadály az oktatási felhasználók számára hogyan működik a webhely, és hogyan kell megfelelően kapcsolódni a felülethez.

    Nézze meg ezt a hozzászólást a KissMetrics által a felhasználói elkötelezettség technikáiról. Az egyik legjobb stratégia, amit találtam tervezett idegenvezetést ami a látogatókat vezeti minden egyes elsődleges funkciót.

    Gondoljunk arra, hogy a Twitter bonyolultabb legyen egy teljesen új felhasználó számára. Ha nem követnek senkit, és nincsenek követői, miért csipognak?

    A “Kövesse a javaslatokat” A regisztráció során a doboz segít az új felhasználóknak ismerkedjen meg a Twitter működésével. Ez a funkció új felhasználókat prímel kezdj el elkezdeni a platformhoz, és kísérletezzen a funkciókkal például a következő, tweetek és privát üzenetek.

    Eltekintve egy idegenvezetőnktől is egyszerűsítse az interfészt. Elsődleges funkcióknak kell lenniük 1-2 kattintással a felhasználó műszerfaláról vagy a főoldalról. Intuitív interfészek magyarázatra van szükség, és egyszerűség rögzíti a figyelmet sokkal gyorsabb.

    Mindezen technikák megértésével könnyebb lesz az idő építése a felhasználók problémáinak megoldása, és ösztönözze az új felhasználók csatlakozását. Ha többet keres UX tervezési elkötelezettség tippek nézze meg ezeket a kapcsolódó bejegyzéseket:

    • Egy felhasználó, aki a taktikát alkalmazza az elkötelezettség növelésére (Thinkapps.com)
    • A fokozatos elkötelezettség leckéje (Uxbooth.com)
    • Ne feltételezzük, hogy az új felhasználók megtanulják, hogyan kell használni a terméket (Uxdesign.cc)