De ce sunt importante microinteracțiunile în designul temelor WordPress?

Publicat: 2016-04-06

Știți ce sunt micro-interacțiunile? Bineînțeles, da! S-ar putea să nu asociezi exact termenul și fenomenul, dar întâlnești mai multe micro-interacțiuni zilnic. Micro-interacțiunile sunt momente sau evenimente legate de produs care îndeplinesc câte o sarcină mică la un moment dat. Practic, de fiecare dată când accesăm telefonul mobil pentru a trimite un mesaj sau pentru a actualiza starea unei rețele sociale, devenim parte dintr-o micro-interacțiune.

Este corect să spunem că micro-interacțiunile vor deveni mai mari în 2016, fiind deja implementate în aplicațiile mobile și web design. Din ce în ce mai mulți oameni doresc să intre online și să creeze un blog sau un site web din motive personale sau de afaceri.

Un exemplu minunat de concept de formular de autentificare/înregistrare

Sursa: http://www.materialup.com/posts/compact-login

Deci, ce funcții îndeplinesc micro-interacțiunile?

Deoarece micro-interacțiunile sunt orice acțiuni efectuate în cadrul unei interfețe cu utilizatorul sau interacțiuni cu interfața, haideți să aflăm mai multe despre scopul lor. În general, funcțiile micro-experiențelor pot fi definite după cum urmează:

Furnizarea de feedback sau demonstrarea rezultatului unui eveniment sau al unei acțiuni.
Îndeplinirea unei anumite sarcini izolate (pornirea unui telefon mobil în sau oprirea modului silențios, aprecierea unei postări pe Facebook etc.).
Modificarea mediului de interfață.
Evitarea erorii utilizatorului.

Cum funcționează micro-interacțiunile?

Dan Saffer, un adept în toată regula micro-interacțiunilor oferă informații despre cum funcționează efectiv micro-interacțiunile în cartea sa. Întregul proces este o secvență în buclă de 4 pași:

Sursa: http://microinteractions.com/what-is-a-microinteraction/

Un declanșator este un impuls vizual care declanșează o acțiune. De exemplu, atunci când o anumită imagine se aprinde la hover în timp ce s-ar putea să răsfoiți o galerie în oricare dintre temele WordPress de fotografie, aceasta este considerată o invitație subtilă de a continua micro-interacțiunea. Răspunsul utilizatorului este declanșatorul.
Regulile stabilesc condițiile pentru ca o micro-interacțiune să aibă loc. Dacă luăm ca exemplu orice temă de bootstrap WordPress, ori de câte ori un utilizator dorește să modifice orice secțiune a site-ului web, va trebui să folosească un editor integrat de tip drag-and-drop (Editor MotoPress sau orice altul) pentru a obține rezultatul.
Feedback -ul demonstrează rezultatul unei micro-interacțiuni. Adică, ori de câte ori se efectuează o modificare, modificarea prinde imediat viață cu șabloanele de blog WordPress și utilizatorul poate observa rezultatul acțiunilor sale.
Buclele și modurile guvernează secvența repetată de acțiuni pentru o micro-interacțiune. Temele WordPress premium au întotdeauna acest mecanism de raționament despre cum și de ce utilizatorul va implementa o anumită secvență de acțiuni încorporate în interior.

Iată câteva exemple strălucitoare din viața reală de micro-interacțiuni de care te poți minuna literalmente:

SpaceNeedle - Derulând în sus în pagină, animația te duce în partea de sus a celui mai proeminent reper din Seattle. Mici informații în ferestrele pop-up apar treptat în timpul derulării. — **SpaceNeedle** – Derulând în sus în pagină, animația te duce în partea de sus a celui mai proeminent reper din Seattle. Mici informații din ferestrele pop-up apar treptat în timpul derulării.

Sursa: http://www.spaceneedle.com/home/

Site-ul web al filmului biografic al Amy Winehouse - la apăsarea pictogramei meniului hamburger apare o bară de navigare, fiecare element de meniu reacţionează la trecerea cu mouse-ul demonstrând o nouă imagine. — Site- **ul web al filmului biografic al Amy Winehouse** – la apăsarea pictogramei meniului hamburger, apare o bară de navigare, fiecare element de meniu reacționează la trecerea cu mouse-ul demonstrând o nouă imagine.

Sursa: http://www.amy-movie.com/

Toi Digital Agency - cristalele din fundal se mișcă în funcție de mișcarea mouse-ului, la fel și săgeata de derulare în jos. — **Toi Digital Agency** – cristalele din fundal se mișcă în funcție de mișcarea mouse-ului, la fel și săgeata de derulare în jos.

Sursa: http://toi.io/

De ce funcționează micro-interacțiunile?

Saffer oferă mai multe motive pentru care micro-interacțiunea funcționează de fapt:

Microinteracțiunile oferă control prin feedback instantaneu - odată ce a avut loc o micro-interacțiune, utilizatorii pot vedea imediat rezultatul acțiunilor lor, câștigând astfel mai multă siguranță în deplasarea mai departe.
Microinteracțiunile oferă îndrumare subtilă - poate trece complet neobservată, dar o micro-interacțiune are de obicei acel element intuitiv, care sugerează cum să funcționeze în cadrul interfeței.
Microinteracțiunile folosesc mijloace vizuale ca recompensă — efectele vizuale reprezintă un fel de recompensă, îmbunătățind simultan experiența utilizatorului, precum și creând noi modele de comportament și bucle de obiceiuri.
Microinteracțiunile îndeplinesc așteptările utilizatorilor — fiind o tendință reală de design web, microinteracțiunile sunt așteptate în mod implicit. Este imposibil să-ți imaginezi un site web fără ele.

De ce micro-interacțiunile devin o tendință în designul temelor WordPress?

Odată cu creșterea popularității WordPress CMS ca platformă online gratuită și la îndemână, designerii web urmăresc să facă WordPress mai ușor de utilizat prin dezvoltarea de teme de site-uri multifuncționale. Aceste teme răspund atât nevoilor designerilor profesioniști de site-uri web, cât și începătorilor absoluti, oferind micro-interacțiuni ca parte a designului și îmbunătățind experiența utilizatorului.

Utilizarea temelor WordPress este convenabilă și necesită mai puțin timp, deoarece puteți obține un site web finalizat în câteva ore. În plus, există numeroase oferte de layout-uri de site-uri web gata făcute, cum ar fi teme WordPress pentru afaceri dezvoltate de TemplateMonster sau de orice alt furnizor de șabloane din care să alegeți. Microinteracțiunile sunt bine integrate în temele WordPress receptive și sunt redate perfect pe o multitudine de gadgeturi electronice și rezoluții de ecran. Acestea sunt bazate pe oameni, ceea ce le face complet ușor de înțeles și intuitive, fără a fi necesară nicio îndrumare suplimentară.

Nu numai micro-experiențele îi ajută pe utilizatori să interacționeze cu un anumit site web bazat pe WordPress, ci îi mențin și legați de resursă pentru o perioadă mai lungă de timp, îndemnându-i să deruleze și să partajeze conținutul. Fiecare detaliu din design trebuie luat în considerare, deoarece chiar și un formular de înscriere prost proiectat poate opri spectatorii. Cele mai eficiente micro-interacțiuni sunt furnizate numai atunci când dezvoltatorii înțeleg nevoile publicului.

Tema Deltex Business WordPress de la TemplateMonster are butoanele fantomă care își schimbă culoarea la trecerea mouse-ului. — **Tema Deltex Business WordPress** de la TemplateMonster are butoanele fantomă care își schimbă culoarea la trecerea mouse-ului.

Sursa: http://www.templatemonster.com/wordpress-themes/deltex-wordpress-theme-58517.html

DW Agro WordPress Theme by Design Wall are un meniu stick-to-top care reacționează prin schimbarea culorii pictogramelor de la alb la roșu la trecerea mouse-ului. — **DW Agro WordPress Theme** by Design Wall are un meniu stick-to-top care reacționează prin schimbarea culorii pictogramelor de la alb la roșu la trecerea mouse-ului.

Sursa: https://www.designwall.com/wordpress/themes/dw-argo/

Sfaturi pentru proiectarea micro-interacțiunilor în temele WordPress

Microinteracțiunile răspund ideii unui design centrat pe om, ceea ce face ca acțiunile și feedback-urile să fie înțelese și intuitive pentru o persoană care navighează pe un site web. Feedback-ul oferă o dovadă că interacțiunea a fost inițiată. Acest lucru trebuie reținut atunci când inserați micro-interacțiuni în design web.

Site-urile web bazate pe WordPress, furnizate cu teme gata făcute, preiau treptat internetul. Este firesc să fie luate în considerare unele dintre sfaturile pentru o implementare atentă a micro-experiențelor în dezvoltarea web a resurselor online bazate pe WordPress. Aruncă o privire la cele mai importante:

Utilizați regulile WordPress pentru a vă asigura că înțelegeți cine este utilizatorul final și care sunt cerințele sale de afaceri sau personale, pentru a face experiența utilizatorului mai orientată spre om.
Țineți cont de posibilele erori, asigurându-vă că procesul unei micro-interacțiuni nu rupe interacțiunea în sine.
Încercați să utilizați la maximum funcționalitatea WordPress, evitați să adăugați funcții sau elemente suplimentare dacă acest lucru nu este necesar. Una dintre cele mai bune practici este crearea unor astfel de elemente încorporate precum cursoare, butoane, bare de defilare pentru a participa la micro-interacțiuni și pentru a oferi feedback.
Folosiți un limbaj orientat spre om, înțeles de majoritatea oamenilor, cu excepția cazului în care este nevoie de ceva mai specific.
Asigurați-vă că micro-interacțiunile sunt încă la punct și actuale în timp, evitați să le faceți enervante sau exagerate.
Nu supraîncărcați micro-interacțiunile cu animația, utilizați-o cu slăbiciune pentru a nu înghiți celelalte elemente de web design sau a împiedica funcționalitatea.
Fiți consecvenți cu schemele de culori din designul general și designul de micro-interacțiune, în special, asigurându-vă că culorile funcționează bine împreună.
Descoperiți modalitățile în care se va dezvolta micro-interacțiunea de-a lungul timpului – dacă va trebui să se schimbe în funcție de actualizările WordPress sau mai degrabă să fie lăsate intacte.

Tema Sky High Business WordPress de la TemplateMonster are un meniu de sus cu lățime completă care reacționează cu meniuri derulante la trecerea mouse-ului. — **Tema Sky High Business WordPress** de la TemplateMonster are un meniu de sus cu lățime completă care reacționează cu meniuri derulante la trecerea mouse-ului.

Sursa: http://www.templatemonster.com/wordpress-themes/55048.html

Tema DW Trendy Business WordPress de DesignWall are un glisor de imagine în antetul site-ului web care schimbă culoarea butoanelor săgeți anterioare/următoare de pe mouse-ul pentru a comuta slide-ul. — **Tema DW Trendy Business WordPress** de DesignWall are un glisor de imagine în antetul site-ului web care schimbă culoarea butoanelor săgeți anterioare/următoare de pe mouse-ul pentru a comuta slide-ul.

Sursa: https://www.designwall.com/wordpress/themes/dw-gamez/

Temele WordPress devin din ce în ce mai populare atât în rândul gurulor designului web, cât și al adevăraților începători pentru ușurința în utilizare și posibilitățile bogate de design combinate cu funcționalitatea abundentă. În ultimii câțiva ani, tendințele de design web au gravitând spre a face lucrurile mai orientate spre om, introducând micro-experiențe ca mijloc de interacțiune între utilizatori și mediul site-ului web. Microinteracțiunile sunt o parte integrantă a designului bine gândit al site-ului web, oferind divertisment, educație sau dovezi că acțiunile pe care le-am efectuat sunt corecte. Datorită acestor micro-experiențe, modul în care ne conectăm cu lumea digitală se îmbunătățește zi de zi.