Kuidas kujundada liidesest kaugemale?

Kõik kujunduselemendid, mida peate lisama lisaks kasutajaliidestele (UI), kasutajakogemusele (UX) ja interaktsioonidele (IxD).

Kaardistasite kasutaja teekonna, kujundasite ekraanid ja lisasite interaktsiooni animatsioonides prototüübi - töö tehtud ... eks?

Mitte päris. Kui lähete taseme võrra sügavamale, näete, et seal on veel palju kaalumist. Ja ma ei räägi ainult nuppude erinevate kasutajaliideste katmisest!

Kogu see teema oli Algkooli enda jaoks tohutu motivatsioon. Selles artiklis tutvume erinevate kujunduselementidega, mis aitavad:

Kui teate kedagi, kes neid rolle täidab - ja see pole tüüp, kus meediumiartikleid usuliselt / pidevalt lugeda - siis miks te ei jaga seda artiklit nendega?

Sisu

  1. Tutvustage meie viit (täiendavat) kujunduselementi
  2. Kasutage juhtumianalüüsis iga elementi
  3. Siduge see kõik kokku ühes kasutajavoos

1. Viis (täiendavat) kujunduselementi

Kujunduselement? Mõiste kujunduselement ei kuulu tehnoloogia, disaini või tarkvara kujunduskeelesse ega nomenklatuuri. See peaks olema kaasav ja hõlmab: „asju, mis on osa digitaalsete toodete ja teenuste kavandamisest ja analüüsimisest” -

… Ilmselt veereb kujunduselement paremini keele ära.

Kujunduselemendid ja nende rollid

Projektis on palju elemente, mida peate arvestama. Keskendume vaid viiele.

Nagu näete, pole need näited tehnilised! Nad istuvad mugavalt äri ja disaini poolel.

2. Juhtumianalüüs: registreerumisvoog

Kasutagem meie juhtumianalüüsina standardset sissetulevat voolu. Asume läbi kõik kujunduselemendid, tuginedes igale kujunduselemendile, nagu läheme.

Liidesed kontekstis (1/5)

Olgu, oleme ühendanud kaks ekraani ... valmis ja tolmu teinud?

Ei! Tõenäoliselt puudub liides. Kas teie kasutajad saavad registreerumisel e-kirja?

Voog või liideste seeria ei pea olema rangelt järjekorras. Pidage meeles, et proovite edastada rakenduse toimimist, mitte ainult simuleerida ühte või kahte stsenaariumi prototüübiga.

Iga lisanduv samm on nagu iga lisajope, mida proovite kanda lennujaama turvalisuse kaudu; iga täiendav tekitab palju küsimusi. Muidugi võite siit ühe või teisega pääseda, kuid kui teete seda mitu korda, on teil tõsiseid probleeme.

Siin on mõned küsimused, mida lisateave registreerumise e-posti aadressi jaoks võib põhjustada:

  • Kas selleks on mall?
  • Millisest süsteemist see tuleb? (Intercom?)
  • Kuidas sobib see kokku teise kliendisuhtlusesse siseneva kliendiga?
  • Kes vastutab e-kirja loomise eest?

Kasutajatüübid kontekstis (2/5)

Teie kasutajad on UX-i uurimise ja turunduse oluline teema. Arendajate ja kujundajate jaoks on oluline määratleda, kes on teie kasutajad ja mida neil on lubatud teie tootes teha.

Meie näites võib see olla nii lihtne, kui külastaja saab kasutajaks pärast registreerumist. Tõenäoliselt on see keerukam. Meie näites registreerub kasutaja ja seejärel antakse seitsmeks päevaks täisfunktsionaalse Pro-plaani prooviversioon.

See toob kaasa rohkem juhtumeid ja küsimusi, mille väljatöötamiseks tuleb:

  • Mida saab teha Pro kasutaja, mida tasuta kasutaja teha ei saa?
  • Mis juhtub seitse päeva pärast kasutaja registreerumist?
  • Kas see on vaid lühiajaline edutamine? Kas see peaks olema piisavalt paindlik, et laieneda teistele plaanidele?
  • Kas prooviversioonile pääsevad juurde kõik külastajad või on vaja ainult õigete e-posti aadressidega külastajaid?

Need küsimused hõlmavad paljusid erinevaid funktsioone, vooge ja liideseid; kõige parem on määratleda see palju iga kasutaja tüübi all.

Vormid kontekstis (3/5)

Vormide UX-i kohta on lugematu arv artikleid, kuid otsustamise kohta, mis väljad kaasata ja kuidas need töötavad, pole palju kirjutatud.

Meie näites on esimeses etapis vorm.

Katmist on rohkem kui iga välja kasutajaliidese olekuid! Peaksite arvesse võtma järgmist:

Nende detailide kohene hankimine on lihtsaim viis raha ja aja säästmiseks. Selles kujundamisetapis ei maksa asjade muutmine palju kulutada, kuid koodis sisalduva muutmine on suhteliselt kallis.

Andmed kontekstis (4/5)

Meie voos täidab kasutaja vormi, klõpsab esitamisel ja näeb siis ilusat pardale minevat lehte. Mis veel toimub?

Andmeid sisestatakse, salvestatakse, kasutatakse ja muudetakse. Osa sellest kuulub tehnilisse valdkonda, kuid disaini seisukohast on palju kaaluda.

Siin on mõned küsimused, mis võiksid tekkida meie voos sisalduvate andmete kohta:

  • Milliseid kasutajaandmeid me salvestame? Mis on vormis?
  • Kuidas lisada see ettevõtte CRM-i?
  • Kas me saame seda teavet kasutada sisenemiskuva isikupärastamiseks?

Lisame andmekujunduselemendi, mille nimi on „kliendi silt”. See võimaldab meil kasutaja pärast kasutajaks registreerumist märgistada, et saaksime talle saata õigeid sõnumeid. Seda saab kasutada seitsmepäevase prooviversiooni linkimiseks, mida me kasutajaosas eespool mainisime.

Rakendustes on andmetega alati palju tegemist. Oleme huvitatud andmetest, millel on tähendust nii ettevõttele kui ka kasutajatele. Mõni nõutav teave võib teile tunduda ilmne, kuid kujunduse rakendaja jaoks pole see ilmne ilma sama kontekstita.

Näiteks võib juhtuda, et teie ettevõtte CRM peab koguma teie kasutajate postiindeksi. Kui te ei taba seda kujunduses, tellite otsuste tegemise peamiselt allhanke korras kellelegi teisele või endale ümbertöötamiseks.

Reeglid kontekstis (5/5)

Reeglid aitavad teie kujundusi korraldada. Neid kasutatakse teie kavandatava süsteemi piirangute, kavatsuste, alternatiivsete teede, servajuhtumite ja tagasilöökide määratlemiseks.

Millal liigitatakse midagi reegliks? Kõik, mis hõlmab loogika või tingimusliku testi kasutamist, on kõige parem jäädvustada reeglina. Kasutaja tegevused ei tohiks sisaldada tingimusi, kuna see rikub jutustuse ja muudab voolu raskesti mõistetavaks.

Sooduskoodi üksikasjad saate määratleda kassas reeglina, mis määratleb, kuidas allahinduskood töötab mõnes reas. Samuti saate reegli abil määratleda portfelli oodatava tootluse keeruka arvutuse paljudel lehekülgedel koos jooniste ja manustega.

Meie näites kasutasime reeglit järgmiselt:

Lisasime reegli „Kontrollige, kas registreerub prioriteetsed kliendid”. See reegel hõlmab juhtumeid, kus kontrollitakse, kas uuele registreerumisele tuleks anda teistsugune sisestuskogemus, kui nende e-posti aadress pärineb ettevõtte kliendikontolt.

Me määratleme selle siin, kuna see on väljaspool tavapärast registreerumisprotsessi ja see on oluline enne rakendamist arutada ja kujundada.

Mulle isiklikult tundub, et iteratsioonile antud pime usk peidab endas palju tarbetuid ümbertegemisi. Kui rakendate voo ilma selle näite reegliteta ja peate hiljem selle hiljem lisama, kas see oli "hämmastav UX-i avastus" või on see ümberkorraldamine?

3. Sidudes selle kõik kokku

Mis mõte sellel on? Suur küsimus, need täiendavad kujunduselemendid on palju tööd! Kuid iga lisatud element võiks salvestada vähemalt:

  • koosolek,
  • väljasta kaart,
  • e-post,
  • niit,
  • või saatke see märkmesse enne tööle asumist vihaselt oma kohale.

Meie juhtumianalüüsis määratlesime ainult kaheksa elementi ja see päästis vähemalt 28 küsimust. Need küsimused (loe: ümbertegemine) võisid tulla teie meeskonna paljudelt inimestelt: arendajad, tootejuhid, turundajad ja lõpuks ka kliendid.

Muidugi oleksite võinud paljusid neid küsimusi käsitleda ärinõuete ja tehniliste nõuete dokumentides, kuid see on palju vähem lõbus. See on ka vähem efektiivne.

Miks see töötab?

Tundub, et meie ahvide ajud töötavad lugudega hästi ja mäletavad neid. Nii saavad kõik kujunduselemendid selgeks alles siis, kui kasutajate voog läbib.

Ilus! Ja nii aeganõudev on tegemine! Kui soovite kajastada sama sisu ja mitte veeta oma elu Sketchis selle kujundamiseks, siis proovige meie tööriista Esmane.

Nagu ma alguses ütlesin, oli see teema üks peamisi põhjuseid, miks me Algkooli lõime. Me teame, et need elemendid on esmaklassilised kodanikud digitaaltoodete kujundamisel. (Ja kui see pole teie jaoks, siis on see lahe - need kujunduselemendid on siiski väärtuslikud, hoolimata sellest, kas te neid kasutate).

Arvan, et ületasin soovitatud 4-minutilise artiklite lugemisperioodi, nii et kui olete endiselt siin, andke mulle sellest 24–46 plaksutuse ja kommentaari abil teada. Luban vastata kõigile kommentaarides esitatud küsimustele!