Drótvázak 101: Kezdő útmutató

Meghna Hazarani, a Red Blue Blur Ideas (RBBi) UX elemzője

Ismerje meg a huzalkeretezés alapjait és folyamatát, és tudjon meg többet arról, hogy a jó drótváz elengedhetetlen a zökkenőmentes felhasználói élményhez.

Mielőtt elkezdenék a témában zajlani, sokan talán nem is tudják - tegyen egy lépést hátra, és mondja meg nekem: hány webhelyet látogatott meg, mielőtt e cikkbe landolt? Csak ellenőrizte a frissítéseket a Facebookon? Nézte vicces macskás videókat a YouTube-on, miközben állítólag dolgozik? Tegyük fel például, hogy a Facebooknak nincs otthoni hírcsatornája, és frissítéseinek megtekintéséhez manuálisan kellett kattintania az összes barátja nevére. Vagy mondjuk, a megtekintett YouTube-videó nem jelenít meg hasonló videókra vonatkozó javaslatokat, ezért a keresési eredmények összes oldalán át kell böngésznie, remélve, hogy az egyik miniatűrhöz hasonló macskavideó tartozik. Unalmasnak hangzik? Hát ne aggódj, a digitális szuperhősök itt vannak, hogy megmentse Önt a sorstól. UX (felhasználói élmény) szakemberekre gondolok: olyan emberekre, akik egy meghatározott folyamatot követnek, hogy felhasználóbarát webhelyeket hozzanak létre. Ha laikusként magyarázom, ezek az UX-szakemberek követik az UX-tervezési folyamatot annak biztosítása érdekében, hogy a weboldal optimálisan működjön, felhasználóbarát, intuitív és hasznos, valamint javítsa a konverziókat vagy növelje az ügyfelek megtartását. Röviden: „könnyen használhatónak” kell lennie. Az UX tervezési folyamata több fázisból áll, de a cikkhez ezen fázisok egyikére fogok koncentrálni, nevezetesen a huzalkészítésre.

Szóval, mi az a drótváz?

A drótváz meghatározható úgy, mint „egy kép vagy képkészlet, amely megjeleníti egy weboldal vagy oldal funkcionális elemeit, általában a webhely szerkezetének és funkcionalitásának megtervezéséhez” - Oxford Dictionary

Egyszerűen fogalmazva: a drótváz hasonlóan működik, mint a terv, és megmutatja, hogyan kell diktálni a weboldal szerkezetét: milyen tartalmat helyeznek el, hol helyeznek el, és hogyan működik a felhasználó az oldallal. A közel ötven szürke árnyalatban létrehozott webhely drótvázokat a kutatás és felfedezés szakaszában nyert összes információ felhasználásával tervezték. A drótváz lehet akár gyors durva vázlat, akár nagy pontosságú drótváz, de bizonyos iránymutatásoknak meg kell felelniük annak biztosítása érdekében, hogy felhasználóbarátak legyenek, például a Nielson által készített Tíz használhatósági heurisztika a felhasználói felület kialakításához. A tényleges adatokkal támasztva és kifejezetten a felhasználót szem előtt tartva készítve, ezek a szürke és fehér képek készíthetik vagy megtörhetik a kész terméket. Itt áll a gondolatmenet ezeknek a vázas képeknek a létrehozása mögött, amelyeket drótvázaknak nevezünk.

1. Döntsön a tartalommodulokról és a hierarchiáról

Először elkészítjük a tartalommodulokat, amelyek információs listát tartalmaznak, és azokat a funkciókat tartalmazzák, amelyeket a drótváznak tartalmaznia kell. A tartalom modulon belüli információ attól függ, hogy miről szól az oldal, mi a fő célja, valamint magában foglalja a kutatási szakaszban szerzett kritikus információkat is. Ezzel párhuzamosan a tartalmi hierarchiát vizsgáljuk: annak meghatározása, hogy mi az elsődleges és a másodlagos információ. Ez lényegében annak biztosítását jelenti, hogy a legfontosabb tartalom előzetesen jelenjen meg a felhasználó számára. De mielőtt belemerülünk az UX szakértelem által támogatott tartalommodulokba - ez mindig segít levenni az UX kalapot, és egyszerűen csak felhasználónak lenni. Bár egy megjegyzés néhány szakértővel nem ért egyet - szeretek beépíteni néhány személyes tapasztalatot a folyamatba. Tegyük fel például, hogy egy légitársaság weboldalának kezdőképernyőjét készítjük, gondolkodnék a saját személyes tapasztalataimmal - például „jegyfoglalással”. Mint a legtöbb, már korábban is meglátogattam a légitársaságok weboldalait - milyen funkciók megkönnyítették a feladatomat? Milyen tartalom megragadta a figyelmemet? Mi késztette arra, hogy úgy döntjek, hogy ezen a webhelyen foglalok, vagy sem, ha erről van szó? Ne feledje, hogy „mindent” - minden információ jó információ. Figyelembe véve ezeket a személyes észrevételeket, itt az ideje, hogy tegye vissza az UX kalapot, és vonja be az összes információt, amelyet a felfedezés szakaszában megtanult.

2. Helyezze el a tartalommodulok kutatását

Tegyük fel, hogy megállapítottuk, hogy a honlap fő célja a foglalás átalakítása - tehát feltétlenül szükséges egy kiemelkedő foglalási widget. A fókuszcsoportos kutatásunk során kiderült, hogy a felhasználók előre látni akarják a repülési ajánlatokat (Ne feledje, hogy rendkívül fontos, hogy a felhasználót már a kezdetektől bevonjuk, akár fókuszcsoportokon keresztül, akár egy-egy interjún keresztül). A kutatásunk alapján létrehozott személyiségek és felhasználói utazások szintén segítettek megérteni a felhasználói igényeket és fejleszteni az áramlást az interakció pontjától a befejezésig. Kutatásunk rámutatott a felhasználói viselkedésre és elvárásokra is a tartalom szempontjából, amelyet a célközönség keresne, és hogyan fedezik fel. Például egy üzleti osztályú felhasználó előre látni akarja az üzleti osztályú viteldíjakat, míg a családtagok előzetesen láthatják az úticélokat. További érvényesítésként a benchmark elemzés azt is megfogalmazta, hogy sok légitársaság webhelye általában a foglalás widgetjével helyezi el az oldal hajtását, tehát az összes betekintés kombinálásával létrehozza az oldal nyertes képlettartalmi modulját.

3. Kutatási trendek, címkék és interakciók.

Itt az ideje, hogy megnézze, hogy ezeket az információkat hogyan lehet lefordítani egy vizuális struktúrába? Ez az, ahol a benchmarking elemzés szintén segít - hogyan mutatták ki a benchmarking webhelyek az információkat a honlapon? A legtöbb weboldal ugyanazt a struktúrát alkalmazta? Például egy ragacsos navigációs fejléc - oka van annak, hogy miért váltak az emberek ragadós menükre, és mások követik a példákat - ez működik. Hasonlóképpen, kereshet trend-inspirációkat: hogyan ábrázolták más webhelyek a tartalmukat - és Ön nem korlátozódik az azonos iparágú webhelyekre - az inspiráció több forrásból származhat. Az azonosított tendenciákat is össze lehet vonni, például ha az egyik weboldal a repülési ajánlatokat miniatűrök formájában jeleníti meg alapinformációkkal, míg egy másik webhely az ajánlatokat átfogóbb információkkal jeleníti meg; van mód arra, hogy ezeket összevonjuk egy nyerő kombinációért?

A trendekhez hasonlóan - a címkék és az interakciók kutathatók. Milyen címkéket használtak a szakaszok szétválasztására. Milyen nyelvet használnak? Beszélgető, vagy egyenesen a lényegre? Például, míg az egyik webhely azt állítja, hogy „Legfrissebb repülőjegy-ajánlatok”, a másiknak „Ajánlatok az Ön számára” címkéje lenne. Mi értelmesebb a régiót és a potenciális felhasználókat szem előtt tartva? Ezen felül, milyen interakciókat használnak - lebegés, csúszó kártyák, legördülő listák? A tartalom felfedezéséhez vezető interakciók bevezetése, valamint a feladatok érvényesítése és teljesítése elősegítheti a felhasználó elkötelezettségét, és végső soron átalakulást eredményezhet.

4. Vázlat, vázlat és vázlat a „Sketch” használata előtt

Ideje megragadni egy ceruzát, és elengedni belső művészét. Tudom, hogy egy csábító érzés egyenesen a digitális műsorra megy, de továbbra is erős vagyok, mivel valószínűleg különféleképpen pazarolja az időt. Nagyszerű érzés, ha valami szörnyű kétperces vázlatot a digitális művészetbe fordítja. De az ellenállás és a kitartás a kulcs. A vázlatának nem kell tökéletesnek lennie, hanem az alapkoncepció helyes megszerzéséről és a lábujjakon való gondolkodásról: az út gyors szerkesztéséről és hozzáigazításáról, valamint az együttműködési adatok megszerzéséről, hogy megbizonyosodjon arról, hogy a felület helyes-e. Finomítás és tökéletesítés akkor történhet meg, amikor a drótvázot digitális programban véglegesíti. Sőt, az együttműködő iterációk készítése vázlat módban elősegíti a változások csökkentését, amikor nagy hűségű drótkeretré konvertálják, és az azt követő tervezési szakaszba.

5. Tesztelje ki a drótvázokat

Tesztelje ki valódi felhasználókkal, akár a vázlatkészítés során, akár a papír prototípusain keresztül, vagy miközben átalakítja nagy hűségű átkattintható drótvázakká. Alapvető fontosságú, hogy a felhasználót bevonjuk a drótváz elindítása előtt fókuszcsoportokon vagy egy-egy interjúkon keresztül - ugyanolyan fontos ezt megtenni a drótváz véglegesítése előtt. Ennek nem kell, hogy megfelelő felhasználói tesztelési munkamenet legyen - ragadja meg családját vagy barátait - tesztelje velük. Természetesen győződjön meg arról, hogy ideális felhasználó-e - ne csak megragadja ötéves unokaöccsejét, és kérje meg, hogy foglaljon repülést. Ideális esetben minden drótvázat alaposan meg kell vizsgálni, hogy megtudja, milyen javításokra van szükség.

6. Tartsa következetesen

Az összes drótvázának konzisztensnek kell lennie a használt modulok, a cselekvésre ösztönzés (CTA) kialakítása és a címkék szempontjából - a konzisztencia kulcsfontosságú annak biztosítása szempontjából, hogy a felhasználó ne sokat gondolkodjon a feladat elvégzésekor. Tegyük fel például, hogy az olyan CTA, mint a Book Now, az egyik oldalon gombként jelenik meg, míg a másik oldalán szöveges linkként jelenik meg. Zavaró a felhasználó számára. A felhasználó szemében a Book Now-t egy bizonyos vizuális ábrázolással társították. A cél annak biztosítása, hogy a felhasználó ne habozzon, amikor meglátja a CTA-t. Az ezen elemek közötti konzisztencia a részletekre, a minőségre is figyelmet fordít, és segíti a bizalom megteremtését, ha az valódi dologra fordul.

7. Végezzen mini-ellenőrzést

Ha elkészült a drótváz, végezze el egy kis józanság-ellenőrzést. Menj vissza a Tíz heurisztikához - és próbáld ki a drótvázodat. Végezzen mini-ellenőrzést, ezt nem kell részletezni; alapvetően kijavít minden apró dolgot, amelyet figyelmen kívül hagytak. Még jobb, ha a drótvázokat egy csapattársnak adják. UX szakértőként bizonyos dolgokra van szükségünk annak biztosítása érdekében, hogy a véglegesített drótvázunk tartalmazzon-e munkát - mind művészekvé válunk - nehéz munkát találni hibánkban, ha fáradhatatlanul dolgozunk valami mellett. Ha másoknak mutatják be munkájukat, akkor elfogulatlan kritikát tudnak nyújtani Önnek, és további visszajelzéseket kaphatnak, amelyeket beépíthetnek a végső átadás előtt.

A huzalkeretezés valóban szerves része az UX folyamatnak. A felhasználói cipőbe helyezéstől az UX ismereteire támaszkodásig - az biztos, hogy mindkét világ egyesülése olyasmire forduljon, amely nem csak működni fog, hanem emlékezetbe is kerül. A folyamat lehetővé teszi, hogy nemcsak megbizonyosodjon arról, hogy az ügyfelek és a csapat ugyanazon az oldalon vannak -, hanem lehetővé teszi, hogy kipróbálhassa a célközönség előtt, mielőtt mélyen belemerülne a vizuális designba. A funkcionalitás, az interakció és a tartalmi hierarchia mind olyan fontos keret elem, amelyet a kezdetektől meg kell határozni. A drótvázolás lehetővé teszi az időt a vizuális esztétika és a zsargon figyelmen kívül hagyására, és arra összpontosít, hogy egy weboldal-tervezetet hozzon létre, amelynek lényege a használhatóság. Tehát menj, és kezdd el a huzalozást!