Kelių platformų dizaino įvyniota 3 dalis: UI poliravimas ir sąveikos dizainas

Žmogaus kūnas egzistavo daug anksčiau, nei buvo įmanoma tai, ką matome aplinkui šiandien, ir sukūrė sudėtingas sistemas, kurios lemia mūsų sąveiką su pasauliu, o dabar yra visų IT tyrimų, nesvarbu, ar tai būtų biotechnologijos, ar dizainas, tikslas. Šios sistemos nukreipia mūsų patirtį gyvenime. Mūsų pojūčiai yra mūsų kompasas, skiriantis malonų nuo liguisto, guodžiantį nuo slegiančio.

Kadangi gaunamų signalų srautas tampa vis gausesnis ir daugiau mūsų gyvenimo sukasi apie skaitmeninius įrenginius, vartotojo sąsajos ir UX dizainerių vaidmuo tapo svarbesnis nei bet kada anksčiau. Šiais laikais mūsų pojūčiai dirba visą darbo dieną be pertraukų, o dizaineriai turi kurti patirtį, kuri suteikia pridėtinės vertės, o ne ją mažina.

Patirtis, kurios siekiame, sukuria tobulą smulkiausių detalių derinimą: intuityvią, žavią ir supaprastintą.

Tačiau norint užtikrinti, kad kiekvienas jūsų žingsnis būtų žengtas tinkama linkme, jums reikia giliau suprasti ne tik tikslą, kurio siekiate, bet ir įrankius bei koncepcijas, kurios gali jus pasiekti.

Šioje dalyje išnagrinėsiu „UI Polish and Interaction Design“ – vizualinių ir interaktyvių vartotojo sąsajos aspektų tobulinimo ir tobulinimo procesą, siekiant sukurti visapusišką malonią patirtį. Pažvelkime į dalykus, kurie padės jums sukurti patirtį, kuri giliau rezonuotų jūsų naudotojus.

Kaip suvokiamos programos

Puikus UI ir UX dalykas yra tai, kad kiekvienas dizaineris taip pat yra naudotojas, o jausmas, kad mėgaujatės sąsajos srautu, yra puikus, nepaisant jūsų profesijos. Nėra jokios klaidos! Vienintelis skirtumas yra tas, kad vartotojams tai nustoja džiaugtis, o mums darbas tęsiasi.

Pradėkime konkretizuoti. Džiaugsmas vartotojo sąsajos kontekste reiškia teigiamas emocijas, kurias vartotojas patiria sąveikaudamas su produktu, sąsaja ar paslauga – tai ne tik funkcinio poreikio patenkinimas. Tai yra pagrindinis naudotojo patirties aspektas, nes jis daro patirtį įsimintiną, skatina vartotojų pasitenkinimą ir lojalumą. Tai daro jūsų programą tikrai ypatinga.

Tai yra kitas lygis sukūrus produkto architektūrą, skeletą, ir šis žingsnis yra susijęs su raumenų, odos pridėjimu ir gaminio atgaiva.

Kad tai pasiektų, dizaineriai turi giliai suprasti, kaip žmonės suvokia ir patiria produktą. Pereikime prie Don Normano emocinio dizaino teorijos . Jis paaiškina, kad vartotojai sąveikauja su produktais trimis lygiais : visceraliniu, kuris yra tiesioginė emocinė reakcija į tai, kaip produktas atrodo ir jaučiasi, elgsenos, nurodančios, kaip gerai produktas veikia ir kaip malonu jį naudoti, ir atspindinčiu, kuris yra ilgalaikio ryšio vartotojai vystosi, kai laikui bėgant apmąsto savo patirtį.

Normano teorija paaiškina, kad šie lygmenys – visceralinis (pirmasis įspūdis) , elgsenos (kaip tai veikia) ir reflektyvus (ilgalaikis emocinis poveikis) – nėra linijiniai; jie nuolat bendrauja. Produkto vizualinis patrauklumas (visceralinis) ir toliau veikia vartotojus, kai jie su juo elgiasi funkciškai (elgsenos), ir kiekvienas veiksmas priklauso nuo to, kaip vartotojai jausis laikui bėgant (atspindi).

Pavyzdžiui, aptaki telefono sąsaja su sklandžia navigacija greičiausiai sukels tiesioginį susijaudinimą, tačiau tai yra paprasto naudojimo ir ilgalaikio pasitenkinimo derinys, kuris sukuria ilgalaikį lojalumą. Kuriant dizainą, sutelkiant dėmesį į tai, kaip šie lygiai sutampa, labai svarbu sukurti vartotojo patirtį, kurią prisiminsite.

Štai kodėl malonumas yra šių lygių sankirtoje sistemoje. Tai nėra susieta tik su vienu patirties aspektu. Tai sinergija tarp to, kaip produktas atrodo, kaip jis veikia ir kaip jis priverčia vartotojus jaustis laikui bėgant, sukuria patirtį, kurią verta prisiminti.

Kas daro Apps žavias

Šie dizaino aspektai yra glaudžiai susiję su suvokimo lygiais, o šlifuojant vartotojo sąsają šis ryšys tampa daug akivaizdesnis. Naudojamumas atlieka tiesioginį vaidmenį kuriant elgesio malonumą – tą jausmą, kurį vartotojai patiria, kai viskas veikia sklandžiai.

Paimkite, pavyzdžiui, nuotraukos išsaugojimo „Pinterest“ atradimų kanale patirtį.

Kai vartotojas pasirenka nuotrauką, ji sklandžiai padidinama, kad būtų galima peržiūrėti išsamų vaizdą neišeinant iš sklaidos kanalo, o tai akimirksniu padidina vizualinį įtraukimą. Tada ilgai paspaudus nuotrauką rodomi greiti veiksmai, pvz., vaizdo įrašymas kolekcijoje arba bendrinimas su kitais.

Visi esminiai veiksmai yra po ranka ir suteikia funkcionalumui žaismingumo. Šis dizainas ne tik supaprastina asmeninių kolekcijų kuravimo procesą, bet ir praturtina bendrą vartotojų pasitenkinimą.

Be to, atsiranda estetinis patrauklumas ir emocijos . Jie prideda visceralinį sluoksnį , tiesioginį emocinį atsaką į produkto išvaizdą ir pojūtį. Švari, gerai suprojektuota sąsaja su subtiliomis animacijomis ar apgalvotais spalvų pasirinkimais kviečia vartotojus prisijungti, todėl nuo pat pradžių jie jaučiasi patogiai. Tai „wow“ veiksnys, kuris patraukia dėmesį, tačiau jis daro daugiau nei tik gerai atrodo – jis pritraukia vartotojus į patirtį, pagerina naudojimą ir daro bendravimą malonų.

Pinterest pavyzdyje, be pagrindinio naudojimo patogumo, programa prideda poliravimo sluoksnių, dėl kurių patirtis tampa daug „visesnė“. Pavyzdžiui, ilgai paspaudę nuotrauką ir pasirinkę tokius veiksmus, kaip „Patinka“, „Išsaugoti“ arba „Bendrinti“, naudotojai gali pastebėti subtilų lietimą.

Be to, „Pinterest“ siūlo tam tikrus gestus, kuriuos dabar naudoja daugelis programų, pvz., grįžimas į atradimų sklaidos kanalą braukiant žemyn arba elementų naršymas braukiant kairėn ir dešinėn. Šios detalės gali atrodyti nereikšmingos, tačiau jos labai prisideda prie bendro malonumo ir pasitenkinimo patirtimi.

Tačiau tikroji magija įvyksta per vidurį – kai patogumas ir estetika veikia kartu, sukuriant vieningą patirtį, kuri rezonuoja keliais lygmenimis. Tada vartotojai pereina iš „Tai veikia“ į „Man patinka tai!“ Tai ne tik produkto pristatymas.

Kiekvienas elementas, kiekvienas įdiegtas modelis prisideda prie to, kaip bus suvokiama jūsų programa. Viena sąveika, pavyzdžiui, paslaugos užsakymas, gali paliesti tik elgesio patirtį arba tiek elgesio, tiek emocinę. Palyginkite senamadišką taksi užsakymo telefonu būdą, kuris dažnai apimdavo laukimą, ne visada malonius pokalbius su nepažįstamais žmonėmis ir neaiškius laukimo laikus, su moderniu, supaprastintu procesu Uber programėlėje.

Tai ne tik supaprastina užsakymo procesą, bet ir pagerina vartotojo patirtį, nes realiuoju laiku atnaujina vairuotojo buvimo vietą, aiškiai rodo bilietų tarifus ir sklandų perėjimą tarp skirtingų važiavimo etapų. Kokia pamaina, a?

Tačiau estetikos ir funkcijos padalijimas vartotojo sąsajoje iš tikrųjų yra daugiau formalumas. Bet kuri sąsaja gali būti žavinga, o bet koks „estetinis“ elementas gali tapti „funkcionalus“. Paimkite „Apple“ „Dynamic Island“ – liūdnai pagarsėjusią juodą įpjovą ankstesniuose „iPhone“. Vėlesniuose modeliuose ji tapo funkcionalia ir stilinga. Iš pradžių įpjova buvo kompromisas, siekiant įdėti priekinę kamerą ir jutiklius, maksimaliai padidinant ekrano erdvę.

Vėliau, laikui bėgant, „Apple“ ją pavertė itin svarbia „Face ID“ technologijos dalimi, siūlydama greitą ir saugų autentifikavimo metodą, kurį vartotojai greitai perėmė.

Štai keli pavyzdžiai, kaip grynus „utilitarinius“ elementus galima pakelti maloniai:

Tikrieji dizainerio įgūdžiai kuriant nuostabias programas yra suprasti , kada, kaip ir kodėl reikia įlieti emocinių elementų. Tai priklauso nuo naudojimo atvejo, konteksto ir požiūrio – trijų pagrindinių ramsčių, kuriais vadovaujamasi priimant kiekvieną dizaino sprendimą. Svarbu suprasti, kada teikti pirmenybę naudojimui, kada įvesti emocinius sluoksnius, o kada sklandžiai integruoti abu, kad būtų sukurta glaudžiai su vartotojais susijusi patirtis.

Pripažinkime, net pati nuostabiausia animacija gali tapti nusivylimo šaltiniu, jei su nerimu žiūrite ją, kol nepavyksta apdoroti 1 000 USD mokėjimo.

1 pavyzdys. „iMessage“ raktinių žodžių animacija

Kai „iMessage“ siunčiate tam tikrus raktinius žodžius, pvz., „Sveikiname“ arba „Su gimtadieniu“, tekstas suaktyvina viso ekrano animaciją, pvz., balionus ar konfeti, pranešimui pridedant smagią ir patrauklią vaizdinę šventę.

2 pavyzdys. Prekės ženklo profilio nuotraukos „Google“ dokumentuose / skaičiuoklėse

„Google“ dokumentuose ir skaičiuoklėse rodomos spalvingos firminės profilio nuotraukos, kuriose parodoma, kas redaguoja dokumentą realiuoju laiku. Tai ne tik daro bendradarbiavimą asmeniškesnį, bet ir padeda vartotojams greitai nustatyti savo bendradarbius.

3 pavyzdys. iOS atmintinė po slaptažodžio įvesties lauku

Įvedus slaptažodį iOS įrenginyje, slaptažodžio lauke atgyja Memoji simbolis, atspindintis jūsų veido išraiškas. Jei įvesite neteisingai, jis gali susiraukti arba gūžčioti pečiais. Jei vėluojama įvesti tekstą, Memoji gali net žiovauti, suteikdama įnoringą atspalvį šiai labai kasdieninei užduočiai. Tai įneša šiek tiek asmenybės ir humoro į jūsų kasdienybę.

4 pavyzdys. Google Dinosaur Kai internetas išjungtas

„Google Chrome“ yra paslėptas dinozaurų žaidimas, kuris pasirodo, kai nėra interneto ryšio. Tai paprastas, priklausomybę sukeliantis žaidimas, bet svarbiausia – puikus būdas akimirksnį nusivylimą paversti linksmybe.

5 pavyzdys. Telegrama Pranešimo ištrynimas

Telegramoje, kai ištrinate pranešimą, jis dingsta su gražia animacija, kuri vizualiai susmulkina pranešimą kaip popierių prieš jam išnykstant, todėl vartotojai gali valdyti savo nematerialius skaitmeninius pokalbius.

Neverskite manęs galvoti: dizaino modeliai ir komponentai

Šlifuotos vartotojo sąsajos esmė yra modeliai ir komponentai. Dizaino modeliai yra nustatyti bendrų sąsajos iššūkių sprendimai. Jie suteikia naudotojams pažįstamą struktūrą, su kuria gali bendrauti. Jie savo ruožtu susideda iš komponentų – sąsajos elementų, tokių kaip mygtukai, įvesties laukai ir modalai.

Kartu modeliai ir komponentai sukuria vientisą vartotojo patirtį, kai naudotojai intuityviai supranta, kaip naršyti programoje.

Norėdami pakelti funkcinius elementus (pvz., meniu, formas ar mygtukus), galime juos patobulinti estetinėmis ir emocinėmis technikomis. Galite pridėti subtilių animacijų, įtraukti mikro sąveiką ir apgalvotai naudoti spalvas bei tipografiją, neapsiribojant vien tik funkcija. Visa tai tampa jūsų dizaino sistema – daugkartinio naudojimo komponentų ir modelių rinkiniu, vadovaujantis aiškiomis taisyklėmis, užtikrinančiu nuoseklumą visoje programoje.

Iš anksto nustatytos animacijos, spalvų schemos ir sąveikos modeliai sukelia specifines emocijas, todėl dizaino sistema tampa galingu įrankiu kuriant darnias ir patrauklias sąsajas. Šis metodas leidžia dizaineriams nuosekliai taikyti šiuos patobulinimus nepradėdamas nuo nulio, sustiprindamas prekės ženklo tapatybę ir didindamas vartotojų pasitikėjimą.

1 pavyzdys. Duolingo žaismingas valdiklis

Kai „Duolingo“ į klausimą atsakote neteisingai, programa ne tik rodo paprastą klaidos pranešimą. Vietoj to, jis atsako draugiška animacija ir padrąsinančiais žodžiais iš savo talismano Duo the Owl. Toks požiūris potencialų nusivylimo momentą paverčia teigiama mokymosi patirtimi, palaiko vartotojų motyvaciją ir sumažina neigiamas emocijas, susijusias su klaidų darymu. Realaus pasaulio taktika, bet animuota.

2 pavyzdys. „Netflix“ kortelės animacija

„Netflix“ laidų kortelių animacija yra vientiso vartotojo sąsajos dizaino pavyzdys, didinant vartotojų įsitraukimą visuose įrenginiuose. Kai naudotojas pasirenka serialą, kortelė išplečiama į viso ekrano anonsą , kuriame pateikiama kinematografinė peržiūra, patraukianti dėmesį. Šis sklandus perėjimas, suteikiantis šiek tiek malonumo, yra nuoseklus, įskaitant jų TV programą, kur ta pati animacija veda į automatiškai paleidžiamą anonsą.

Šis vieningas požiūris visose platformose užtikrina darnią vartotojo patirtį, sumažina pažinimo apkrovą ir supaprastina naršymą.

3 pavyzdys. Slacko greitosios komandos

Džiaugsmas ir emocinis įsitraukimas taip pat gali kilti dėl produkto savybių, o ne tik dėl vartotojo sąsajos dizaino. „Slack“ greitosios komandos tai rodo, padidindamos produktyvumą ir supaprastindamos sąveiką programoje. Sukurtas daugiausia dėmesio skiriant produktyvumui, greitosios komandos leidžia vartotojams sutaupyti daug laiko tiesiog įvedus reikiamą komandą. Pavyzdžiui, vartotojai gali atnaujinti savo būseną naudodami /status arba nutildyti pranešimus naudodami /mute tiesiai pranešimo įvesties laukelyje.

Tai ne tik pagreitina darbo eigą, bet ir sumažina pertraukimus, todėl vartotojai gali susikoncentruoti ties savo užduotimis. Intuityvus ir daug laiko taupantis greitųjų komandų pobūdis yra būtent tai, kodėl vartotojai jas taip mėgsta. Mano asmeninis mėgstamiausias yra /gūžčioti pečiais, kuris prie jūsų pranešimo pabaigos prideda ¯\(ツ)/¯, ir tai labai smagu!

Sąveikos dizaino vaidmuo

Nors dizaino modeliai ir komponentai yra nušlifuotos vartotojo sąsajos elementai, sąveikos dizainas atgaivina viską. Sąveikos dizainas yra apie tai, kaip vartotojai sąveikauja su tais komponentais – kaip jie spustelėja, bakstelėja, braukia ir naršo programoje.

Pavyzdžiui, meniu yra įprastas naršymo vartotojo sąsajos elementas, tačiau nuo sąveikos dizaino priklauso, kaip jis jaučiasi. Ar meniu slysta sklandžiai? Ar jis akimirksniu reaguoja į braukimo gestą? Haptinis prisilietimas užbaigus? Ar jame yra subtilių animacijų, dėl kurių perėjimas būtų malonus?

Puikus efektyvaus sąveikos dizaino pavyzdys yra „MacOS“ efektas „Genie“ , naudojamas „Finder“ langams sumažinti. Ši animacija sklandžiai perkelia langą į doką, primenantį džino lempos judesį. Tai vizualiai patraukli ir funkcionaliai informatyvi, naudotojams tiksliai parodo, kur eina langas, o tai padeda išlaikyti erdvinę orientaciją.

Sąveikos dizainas ir projektavimo sistema veikia darniai. Kuriant sąveiką, nuoseklus visų komponentų elgesys, pvz., kaip mygtukai reaguoja spustelėjus arba kaip formos patvirtina įvestį, užtikrina, kad programa kiekviename ekrane veiktų nuspėjamai. Šis nuoseklumas didina naudotojų pasitikėjimą – tai reiškia, kad vartotojai jaučiasi patogiai žinodami, kaip programa reaguos, o tai sumažina trintį ir pagerina bendrą patirtį.

Kai sąveikos dizainas atliktas tinkamai, jis veikia kartu su modeliais ir komponentais , kad sukurtų darnią patirtį, kai kiekvienas bakstelėjimas, paspaudimas ir perbraukimas yra intuityvus. Tai kažkas, kas tikrai atgaivina sąsajas.

Kituose savo straipsniuose pabrėžiau, kaip svarbu sukurti komandą su kūrėjais. Dizaineriai turi bendradarbiauti su kūrėjais, nes jų dėka šios animacijos ir sąveikos iš tikrųjų gali būti ir yra įgyvendinamos efektyviai. Labai svarbu komandai pateikti išsamias, aiškias animacijos specifikacijas, įskaitant laiką, palengvinimą ir elgesį. Tokiu būdu planuojama dizaino vizija tiksliai paverčiama galutiniu produktu, todėl jis yra nušlifuotas, profesionalus ir emociškai skambantis vartotojui.

Eiti aukščiau įprasto

Džiaugsmas gyvenimu neapsiriboja techninių veiksmų, kurie gali jus ten nuvesti, atlikimas. Tai mažiausių smulkmenų, kurios sukuria vientisą, pilnavertį potyrį, suma. Dizainas tas pats. Funkcinė sąsaja yra tvirtas pagrindas, bet jis blankus. Suprasdami, kaip naudotojai mato ir naudoja jūsų programą, galite sukurti lengvai naudojamą ir prasmingą patirtį. Manau, kad Dono Normano emocinio dizaino teorija yra puikus vadovas apie sudėtingus ryšius tarp visų aspektų, kurie daro gerą dizainą – puikų.

Emocinis ryšys, dizaino modeliai, nuoseklumas ir sąveikos dizainas yra tai, kas jį atgyja. Be to, tai yra galingas priminimas, kad gaminio dizaine kelionė yra tokia pat svarbi, kaip ir tikslas. Naudodami subtilias animacijas, patrauklias mikro sąveikas ir apgalvotas vaizdines detales, įprastą sąveiką galite paversti maloniomis akimirkomis milijonams vartotojų. Tai yra dizaino magija.