Mobilo lietotņu dizaina mikrointerakciju izpratne

Izmantojamība ir viens no galvenajiem komponentiem mobilā lietotāja interfeisa dizains. Liela lietojamība bieži vien ir saistīta ar mikrointerakcijas kuri ir mazas atbildes un uzvedība no saskarnes diktē, kā jāizmanto UI. Šīs mikrointerakcijas nosaka uzvedību, veicina iesaistīšanos un palīdz lietotājiem vizualizēt saskarnes darbību.

Digitālās saskarnes ir starpnieki starp lietotājiem un to vēlamajiem mērķiem. Interfeisa dizaineri rada pieredzi, kas palīdz lietotājiem veikt konkrētus uzdevumus. Piemēram, lietojumprogrammu sarakstam ir saskarne, kas palīdz lietotājiem organizēt savus uzdevumus. Tāpat kā Facebook app sniedz lietotājiem interfeisu, lai mijiedarbotos ar savu Facebook kontu.

Šajā rokasgrāmatā es ienāks tālāk mobilajām lietotnēm paredzētas mikrointeraktivitātes. Nelielas mijiedarbības var šķist nebūtiskas, bet tām var būt milzīga ietekme par lietotāja pieredzes kvalitāti. Pareizi izpildot, mikrointerakcijas jūtas kā visaptverošas mobilo lietotāju pieredzes īsta daļa.

Microinteraction spēks

Vairumā gadījumu mikrointerakcijas mērķis ir sniegt atgriezenisko saiti pamatojoties uz lietotāja rīcību. Tas var palīdzēt lietotājiem vizualizēt, kā saskarne kustas vai uzvedas, lai gan tas ir tikai digitāls plakanā ekrānā.

Mikrointerakcijām ir vara, jo tās radīt ilūziju. Ieslēgšanas / izslēgšanas slīdņi īsti nepārvietojas kā fiziski slēdži, bet tie var šķist šādā veidā caur animācijām.

Šajā postenī es atklāju neticamu cenu, kurā apsprieda milzīgo vērtību, kāda ir mobilajām lietotnēm paredzētām mikrointeraktīvām darbībām:

“Labākie produkti ir labi: funkcijas un detaļas. Funkcijas ir tas, kas piesaista cilvēkus jūsu produktam. Sīkāka informācija ir tā, kas tos tur tur. Un informācija ir tas, kas patiesībā padara mūsu lietotni izceļo no mūsu konkurences.”

The sīkas detaļas no attīstības viedokļa var šķist nenozīmīgs, bet no lietotāja pieredzes viedokļa tie patiešām ir atšķirība starp OK lietotnes lietotāja interfeisu un ārkārtas lietotņu lietotāja interfeisu.

Lielas mikrointerakcijas padara lietotāju jūtas atalgoti rīcību. Šīs darbības var būt atkārto un lietotāja uzvedībā. Viņi var iemācīties izmantot lietojumprogrammu, pamatojoties uz šīm mazajām mikrointeraktīvām darbībām. Kad lietotājs veic uzvedību, šie mazie mijiedarbības signāli "jā, jūs varat sazināties ar mani!"

Apskatiet piemērus, kas atrodami Google materiālu dizaina specifikācijās. Dokumentācijā faktiski ir visa sadaļa, kas veltīta materiālai kustībai. Telpiskās attiecības ir liela daļa no šī vienādojuma, bet kustība var diktēt vairāk nekā tikai telpiskās attiecības.

Šeit ir animācijas un kustības visbiežāk izmantotie veidi mobilajā UI / UX dizainā:

• Lietotāju vadīšana starp dažādām lapām
• Lietotāju vadīšana, izmantojot saskarni, lai mācītu noteiktus uzvedības veidus
• Ieteikt darbības / uzvedību, ko var veikt jebkurā konkrētā lapā

Mobilajām lietotnēm ir daudz mazāk ekrāna vietas nekā tīmekļa vietnes. Tas var novest pie dažām grūtībām, mācot lietotājiem lietot lietotni. Bet tas var būt pārsteidzoši vienkāršs, ja jūs zināt, kā pareizi īstenot mikrointeraktivitāti.

Kā darbojas Microinteractions

Viena mikrointeraktīva darbība, kad lietotājs iesaistās vienā saskarnes daļā. Lielākā daļa mikrointerakciju ir animētas atbildes uz lietotāja žestu. Tātad kustīga kustība reaģēs atšķirīgi nekā krāns vai kinoizrāde.

Blink UX veica lielisku ziņu, kurā apsprieda sīkas detaļas par mikrointerakcijām. Šīs mazās animācijas jāievēro a paredzams process ka lietotājs var mācīties katrai lietojumprogrammas mijiedarbībai.

Microinteractions palīdz lietotājiem, izmantojot interfeisu piedāvājot atbildes uz uzvedību. Kad lietotājs zina, ka ieslēgšanas / izslēgšanas slīdnis var pārvietoties, viņi zina, ka tas ir interaktīvs. Pamatojoties uz atbildi, viņi arī zinās, vai iestatījums ir ieslēgts vai izslēgts. Kad poga izskatās, to var noklikšķināt uz lietotāja instinktīvi zina viņi var ar to sadarboties.

Saskaņā ar UXPin, katra pamata mikrointerakcija var iedalīt četrās pakāpēs, bet es to apkopoju trīs soļi.

1. Rīcība - the lietotājs kaut ko dara kā kinoizrāde, zvēliens, pieskarieties un turiet, vai kāda cita mijiedarbība.
2. Reakcija - the saskarne pamatojoties uz to, kas ir jānotiek. Ekrānā pārvietojot pārlūkprogrammu, var pārvietoties atpakaļ, vai pieskaroties ON / OFF slīdnim var izslēgt iestatījumu.
3. Atsauksmes - tas ir tas, ko lietotājs faktiski redz mijiedarbības rezultātā. Kad lietotājs pārvietojas atpakaļ mobilajā pārlūkprogrammā, tas var peldēt iepriekšējo lappusi uz augšu, lai parādītos uz ekrāna. Ieslēgšanas / izslēgšanas slīdnis var slīdēt gludi vai palielināties, kad ekrānā tiek izmantots spiediens.

Šīs ļoti mazās darbības var paveikt bez animācijas, bet lieliskas mikrointeraktivitātes piedāvā a reāla sajūta uz plakano digitālo saskarni, kas pārsvarā ir reāli animācijas efekti. Tie ieelpo interfeisu un veicina lielāku lietotāju mijiedarbību.

Meklējiet detaļas

Aplūkojot mazākos dizaina gabalus, jūs sapratīsiet, kā lietotnei jāreaģē uz konkrētu rīcību.

Pavelciet, lai atsvaidzinātu ir labs piemērs tagad populārai mikrointerakcijai. Tā nebija iOS neatņemama sastāvdaļa, kad tā pirmo reizi tika uzsākta, taču daudzas lietotnes šo ideju izmantoja un sāka kustēties. Tagad, lai atsvaidzinātu, ir labi zināms uzvedība, ko lielākā daļa lietotāju vienkārši izmanto, lai pārlūkotu plūsmas lietotāja interfeisu. To pašu var teikt par mobilajām hamburgeru izvēlnēm, kuras popularitāte ir augusi.

Veiciet katru mikrointerakciju reāli un vienkārši. Nelietojiet pārspīlēt animācijas, jo tās var kļūst garlaicīgs ja viņi ir pārāk detalizēti un bieži izmanto. Lietotājs nevēlas, lai sparkles parādītos katru reizi, kad tās pieskaras izvēlnes ikonai. Atrodiet līdzsvaru ar patiesu vērtību, kas sazinās kā saskarnei jādarbojas bez pārbrauktuves.

Aplūkojot dažus piemērus

Es domāju, ka labākais veids, kā iemācīties kaut ko, ir darīt, un otrs labākais veids ir mācīties citu darbu. Esmu savācis nelielu sauju UI / UX microinteraction animācijas no talantīgiem Dribbble lietotājiem, lai parādītu, kā tie izskatās reālā maketā.

Katrs pieteikums būs atšķirīgs, un tam būs dažādas vajadzības, pamatojoties uz to, ko lieto. Galu galā lielākā daļa lietotāju vēlas to pašu: lietotni intuitīvs un nodrošina kvalitatīvu lietotāju pieredzi ar mikrointeraktīvām darbībām saistībā ar lietotāja uzvedību.

1. Animācijas notikumu lietotņu lietotāja interfeiss

Pirmais piemērs ir Ivan Martynenko radītais jaudīgs kartes animācijas elements. Jūs pamanīsiet nedaudz mikrointerakciju šajā dizainā, jo īpaši kartes swiping un pārvietojas pa detaļām.

Pieskaroties kartei, tas aug. Un, pieskaroties pogai Abonēt lietotāja profila fotoattēlu slaidus abonentu sarakstā. Viss jūtas ļoti intuitīvs un diezgan dabisks interfeisam.

2. Interaktīvā vingrinājuma ekrāns

Šī radošā mobilā vingrošanas animācija nāk no dizainera Vitālija Rubtsova. Tas demonstrē lietotāju, kurš saglabā savu treniņu vienu squats komplektu.

Paziņojums katrai animācijai ir vienāds elastīgs trieciena efekts kad izvēlnes ir atvērtas un aizvērtas. Tā tas ir arī tad, ja darbība ir pārbaudīta kā "Pabeigts". Konsekvence ir ļoti svarīga ar mikrointerakcijām, jo ​​tām visiem jūtas savienots ar to pašu interfeisu.

3. Meklēt lietojumprogrammu mikrointeraktīvās darbības

Īss, salds un līdz galam. Es domāju, ka tas vislabāk apraksta šos meklēšanas lietotņu mikrointeraktīvus, ko izstrādājusi Lukas Horak. Katra animācija ir ātri, bet joprojām pamanāms.

Tādā veidā jums ir jāveido mikrointerakcijas izvairīties no pārāk sarežģītas. Ja interfeiss ielādētu ātrāk bez animācijas, tad kāpēc tā apgrūtina? Ātra animācija saglabājiet lietotāju, nepārkāpjot pieredzi.

4. Fitnesa mērķis Microinteraction

Es domāju, ka Džakubs Antalas   Â-k-tas patiešām skāra šo parku ar savu fitnesa mērķa mikrointerakciju. Visiem ekrāniem ir šī jiggly jell-o sajūta, jo formas pārvietojas tik plūstoši.

Tomēr saskarne arī jūtas cieta un izmantojama. Tas liecina par to, ka mikroekonomika, kas izstrādāta ar mērķi, joprojām var būt jautri un izklaidējoša, bet arī funkcionāla un pragmatiska.

5. Pavelciet, lai atsvaidzinātu animāciju

Lūk, viens no maniem absolūtajiem mīļākie pull-to-atsvaidzināt animācijas radīja komanda Ramotion. Tas ne tikai atdarina šķidrumu ar vilkšanas darbību, bet atbildes animāciju vienmērīgi savieno no šķidruma šļakatām uz iekraušanas loku.

Tas lielu uzmanību detaļām ir tas, kas izceļ patieso skaistumu mobilo lietotņu mikrointerakcijās.

6. Cilne Microinteraction

Koplietotie logrīki ir diezgan izplatīti mobilajām lietotnēm mazo ekrānu dēļ. Man patiešām patīk šī mikrointerakcija, ko radīja Džons Noussis, lai gan es domāju, ka tas būtu efektīvāks ātrāk, bet pati animācija ir krāšņs un labi pārdomāts.

Cilnes enkura bultiņa slīd pāri pa labi, tāpat kā jaunais saturs atlec no labās puses. Tas dod ilūziju viss ekrāns fiziski pārvietojas pa labi. Animācija ir izsmalcināta, bet, tā kā tas ir tik lēni, es domāju, ka lielākā daļa lietotāju pēc dažām dienām kļūs kaitīgi.

7. Animācijas ielādēšana

Es par to neesmu daudz teicis iekraušanas stieņi šajā ziņojumā, bet tie ir tikpat vērtīgi, lai iegūtu vispārējo pieredzi. Lielākā daļa lietotāju nevēlas gaidīt datu ielādi, bet viņi noteikti nevēlas skatīties tukšā ekrānā, kamēr tas ielādējas.

Bret Kurtz veica šo apbrīnojamo ielādes ekrānu, kas ir gan jautri, gan informatīvs. Lietotājs faktiski var būt izklaidēja skatoties šo mazo animācijas atkārtojumu. Tie var būt arī pārliecināts ka pieteikums ir joprojām ielādē savus datus un nav crashed.

Iesaiņošana

Visi šie piemēri spilgti parāda mikrointerakciju vērtību. Mobilās lietotnes iegūst daudz lielāku vērtību no mikrointerakcijām, jo ​​lietotāji fiziski pieskarieties ekrāniem ar pirkstiem. Lietotāji nepieskaras saviem darbvirsmas monitoriem vai klēpjdatoru ekrāniem, bet visi pieskaras saviem viedtālruņiem, jo ​​tie ir interaktivitātes noklusējuma stāvoklis.

Tas ir daudz personiskāku pieredzi, tāpēc mobilās lietotnes dizains var būt šāds: a niansēts process. Ja tas tiek darīts pareizi, lielisku mobilo mikrointeraktīvu pievienošana var veidot a spēcīga iluzora lietotāja pieredze no pikseļiem un kustībām.