Mikrointerakcje, czyli detale podnoszące satysfakcję użytkowników

„The dif­fe­ren­ce betwe­en a pro­duct you love and one you
tole­ra­te are often micro­in­te­rac­tions you have with it.” Dan Saf­fer

źró­dło: https://blogs.adobe.com/creativecloud/files/2016/04/microinteractions-part1-1800x1013.png
 
Więk­szość arty­ku­łów o tema­ty­ce User Expe­rien­ce pod­kre­śla, że design to nie atrak­cyj­ny wygląd pro­duk­tu, ale przede wszyst­kim jego funk­cjo­nal­ność i uży­tecz­ność. Docze­ka­li­śmy się jed­nak dobrych cza­sów, w któ­rych nie­mal każ­dy już wie, że ofe­ru­jąc swój pro­dukt klien­to­wi musi zadbać o to, aby korzy­sta­ło mu się z nie­go w spo­sób łatwy i wygod­ny. Jak w takim razie odróż­nić się od kon­ku­ren­cji, gdy w sie­ci poja­wia się coraz wię­cej dobrze zro­bio­nych stron? Sku­pia­nie się na intu­icyj­no­ści pro­duk­tów w ode­rwa­niu nie­ja­ko od uważ­ne­go dba­nia o ich este­ty­kę naj­pew­niej już nie wystar­czy. Odpo­wie­dzią być może jest poświę­ce­nie więk­szej uwa­gi mikro­in­te­rak­cjom, ponie­waż dzia­ła­ją one zarów­no na korzyść uży­tecz­no­ści pro­duk­tu, ale i pod­no­szą znacz­nie jego atrak­cyj­ność w oczach użyt­kow­ni­ków.

Mikrointerakcje – co to takiego?

Mikro­in­te­rak­cje to drob­ne deta­le, któ­re czy­nią kon­takt czło­wie­ka z urzą­dze­niem elek­tro­nicz­nym bar­dziej natu­ral­nym. Doty­czą zazwy­czaj jed­nej akcji, któ­ra wystę­pu­je samo­dziel­nie lub w obrę­bie więk­szej funk­cjo­nal­no­ści. Przy­kła­dem pod­sta­wo­wej mikro­in­te­rak­cji jest klik­nię­cie w przy­cisk „like” na popu­lar­nym por­ta­lu spo­łecz­no­ścio­wym oraz odpo­wiedź zwrot­na od urzą­dze­nia w posta­ci zmia­ny kolo­ru przy­ci­sku, powięk­sze­nia się licz­by laj­ków pod postem, nasze­go imie­nia na liście lubią­cych to, i tak dalej.

Było­by spo­rym nie­do­pa­trze­niem nie wspo­mnieć w tym miej­scu o Danie Saf­fe­rze, któ­ry poświę­cił całą książ­kę tema­to­wi mikro­in­te­rak­cji. Dan udo­wad­nia w niej, że sku­pie­nie uwa­gi pod­czas pro­jek­to­wa­nia pro­duk­tu wła­śnie na tych nie­wiel­kich deta­lach może przy­nieść wie­le dobre­go – to sku­tecz­ne mikro­in­te­rak­cje bowiem w głów­nej mie­rze odpo­wia­da­ją za postrze­ga­nie inter­fej­su jako przy­stęp­ne­go i atrak­cyj­ne­go, nawet gdy za naszym ser­wi­sem stoi nie­zbyt intu­icyj­na logi­ka.
 

Mikrointerakcje pełnią w relacji człowiek-komputer kilka podstawowych funkcji, przede wszystkim:

1. Komunikują użytkownikowi feedback albo rezultat wykonanej akcji

Pierw­sza z heu­ry­styk uży­tecz­no­ści spi­sa­nych przez Jako­ba Nie­lse­na brzmi: „na bie­żą­co infor­muj użyt­kow­ni­ka poprzez odpo­wied­nią infor­ma­cję zwrot­ną co aktu­al­nie dzie­je się w sys­te­mie”. To bar­dzo waż­ne, ponie­waż feed­back docie­ra­ją­cy do użyt­kow­ni­ka w odpo­wied­nim cza­sie daje mu poczu­cie kon­tro­li i pew­ność, że jego dzia­ła­nia skut­ku­ją pożą­da­ny­mi rezul­ta­ta­mi. Mikro­in­te­rak­cja w tym przy­pad­ku jest też potwier­dze­niem doko­na­nia zmian w związ­ku z czym chro­ni użyt­kow­ni­ka przed pod­ję­ciem nie­chcia­nej akcji i popeł­nie­niem błę­du.

źró­dło: https://dribbble.com/shots/2889334-Download-ll
 
Użyt­kow­nik przy­zwy­cza­jo­ny jest, by odpo­wiedź zwrot­na sys­te­mu poja­wia­ła się natych­miast po wyko­na­niu przez nie­go spe­cy­ficz­ne­go dzia­ła­nia. War­to wziąć pod uwa­gę to, że część akcji na stro­nie może potrze­bo­wać tro­chę wię­cej cza­su, by zostać ukoń­czo­na. Waż­ne, by wów­czas inter­fejs poin­for­mo­wał o tym użyt­kow­ni­ka, zapew­nił, że nic złe­go się nie dzie­je i poka­zał mu ile cza­su jesz­cze potrze­bu­je, by osią­gnąć suk­ces.

źró­dło: https://dribbble.com/shots/1853526-Download

2. Dostarczają wizualną gratyfikację

Mikro­in­te­rak­cje spra­wia­ją, że pod­sta­wo­we czyn­no­ści na stro­nie, takie jak wysła­nie for­mu­la­rza lub załą­cze­nie pli­ku prze­sta­ją być stan­dar­do­wy­mi ele­men­ta­mi, któ­re w róż­nych ser­wi­sach wyglą­da­ją tak samo. Wpro­wa­dze­nie odro­bi­ny zaba­wy do inter­fej­su może otwo­rzyć drzwi do lep­szej uży­tecz­no­ści – potra­fi przy­spie­szyć bowiem inte­rak­cję i uczy­nić ją bar­dziej natu­ral­ną. Poza wszyst­kim, miły i wizu­al­nie atrak­cyj­ny design to coś, co zawsze jest w cenie.

źró­dło: https://dribbble.com/shots/2190376-sending
 

źró­dło: https://dribbble.com/shots/1989304-Attaching-File
 

3. Zachęcają do interakcji

Jeśli na stro­nie użyt­kow­ni­cy mają moż­li­wość bez­po­śred­niej inte­rak­cji z ser­wi­sem lub inny­mi użyt­kow­ni­ka­mi (polu­bie­nia, komen­to­wa­nie, udo­stęp­nia­nie), włą­cze­nie zabaw­nych i pomy­sło­wych mikro­in­te­rak­cji może być czymś, co zachę­ci ich do korzy­sta­nia z tych opcji nawet czę­ściej. Atrak­cyj­nie wizu­al­nie odpo­wie­dzi zwrot­ne pły­ną­ce ze stro­ny potra­fią wywo­łać uśmiech na twa­rzach użyt­kow­ni­ków, wpra­wić ich w dobry nastrój i spra­wić, że będą odwie­dzać Two­ją stro­nę jesz­cze czę­ściej. To z kolei jest już o krok od wykształ­ce­nia się u nich real­nych nawy­ków. Bodziec – reak­cja. Pro­ste.

źró­dło: https://dribbble.com/shots/1456699-Liking-Interaction-GIF

4. Pomagają oszczędzić przestrzeń

To zale­ta przede wszyst­kim w kon­tek­ście pro­jek­to­wa­nia na urzą­dze­nia mobil­ne. Oszczęd­ność miej­sca i mini­ma­lizm, przy zacho­wa­niu wszyst­kich funk­cjo­nal­no­ści to czę­sto dla pro­jek­tan­tów rzecz bar­dzo trud­na do osią­gnię­cia. Mikro­in­te­rak­cje zasto­so­wa­ne w tym miej­scu, będą­ce de fac­to inte­rak­tyw­ny­mi ani­ma­cja­mi, pozwa­la­ją nie tyl­ko na roz­wi­ja­nie się list oraz scho­wa­nie dodat­ko­wych tre­ści pod ham­bur­ge­rem, ale rów­nież na ukry­cie kil­ku funk­cjo­nal­no­ści na raz w jed­nym miej­scu, np. pod poje­dyn­czym but­to­nem. Dodat­ko­wo, jest to nie­zła oka­zja do uwol­nie­nia kre­atyw­no­ści pro­jek­tan­tów – im cie­kaw­sza mikro­in­te­rak­cja, tym lepiej. Pro­jek­to­wa­nie na urzą­dze­nia mobil­ne nigdy nie było tak satys­fak­cjo­nu­ją­ce.

źró­dło: https://dribbble.com/shots/1999539-Circle-menu
 

Pull to refresh to jed­na z naj­mą­drzej­szych mikro­in­te­rak­cji, jaka kie­dy­kol­wiek powsta­ła. Dla­cze­go zmu­szać użyt­kow­ni­ka do prze­rwa­nia scrol­lo­wa­nia, pod­nie­sie­nia pal­ca i tap­nię­cia w guzik z ety­kie­tą „odśwież”, sko­ro moż­na kon­ty­nu­ować jego natu­ral­ny gest prze­su­wa­nia pal­cem po ekra­nie, tyl­ko odwró­cić kie­ru­nek? To rów­nież dobre pole do dzia­ła­nia z logo­ty­pem lub cha­rak­te­ry­stycz­ny­mi war­to­ścia­mi fir­my, któ­re moż­na ukryć w powsta­łym przez prze­cią­gnię­cie pal­cem dodat­ko­wym miej­scu. Poprzez czę­stość odświe­ża­nia stro­ny przez użyt­kow­ni­ków może­my w łatwy spo­sób wpły­nąć na utrwa­le­nie się zna­ku fir­my w pamię­ci odbior­ców.

źró­dło: https://dribbble.com/shots/2101933-GIF-for-Pull-Down-Space-Ship

5. Pomagają w zrozumieniu niestandardowych interfejsów

Inter­fejs powi­nien być intu­icyj­ny dla użyt­kow­ni­ka lub przy­naj­mniej w łatwy i szyb­ki spo­sób nauczal­ny. W przy­pad­ku tych dru­gich, mikro­in­te­rak­cje wyda­ją się być dużą pomo­cą, ponie­waż satys­fak­cjo­nu­ją­ca ani­ma­cja towa­rzy­szą­ca odkry­wa­niu nowych prze­strze­ni w apli­ka­cji nie­ja­ko pro­wa­dzi użyt­kow­ni­ka przez ser­wis, poka­zu­jąc mu, że jego dzia­ła­nia wywo­łu­ją pew­ne okre­ślo­ne rezul­ta­ty. W tym wypad­ku mikro­in­te­rak­cje spa­ja­ją cały design apli­ka­cji lub stro­ny, pozwa­la­jąc użyt­kow­ni­ko­wi bez pro­ble­mu i z przy­jem­no­ścią poru­szać się po zapro­jek­to­wa­nym inter­fej­sie.

źró­dło: https://dribbble.com/shots/1265487-First-shot-in-Chapps-Animation

6. Umilają to, co nieprzyjemne i konieczne

Mowa tu o naj­mniej przy­jem­nej czyn­no­ści na stro­nie, czy­li… o wypeł­nia­niu for­mu­la­rzy. Jak­kol­wiek nie posta­ra­my się jako pro­jek­tan­ci o jego zwię­złą obję­tość, odpo­wied­nie umiesz­cze­nie ety­kiet, czy też okro­je­nie pól wyma­ga­nych do wypeł­nie­nia, for­mu­larz nadal pozo­sta­nie for­mu­la­rzem. Mikro­in­te­rak­cje i w tym wypad­ku mogą przyjść z pomo­cą. Feed­back ze stro­ny apli­ka­cji, któ­ra spra­wia wra­że­nie, jak gdy­by wcho­dzi­ła z użyt­kow­ni­kiem w przy­ja­ciel­ski dia­log, doda­je do przy­kre­go obo­wiąz­ku wypeł­nia­nia pól odro­bi­nę humo­ru. Pro­sta rzecz, a cie­szy.
 

źró­dło: https://econsultancy.com/blog/66008–15-deeply-pleasing-examples-of-mobile-micro-ux/
 
W powyż­szym przy­kła­dzie też dosko­na­le widać coś, co powin­no przy­świe­cać pro­jek­tan­tom abso­lut­nie na każ­dym kro­ku: „be human!” Inte­rak­cja z kom­pu­te­rem lub smart­pho­nem sta­no­wi lwią część naszych dni, zadbaj­my o to, by była ona jak naj­bar­dziej natu­ral­na. Szczę­śli­wie, mamy już chy­ba za sobą cza­sy czę­sto­wa­nia użyt­kow­ni­ka komu­ni­ka­ta­mi sys­te­mo­wy­mi, pod tytu­łem: „błęd­na komu­ni­ka­cja” lub „error 515”, jed­nak war­to iść nawet o krok dalej – bądź­my przy­ja­ciół­mi dla nasze­go odbior­cy, poma­gaj­my mu, roz­śmie­szaj­my go i chwal­my. Na pew­no to doce­ni.
 

Tylko jak to robić?

Na koniec kil­ka wska­zó­wek, któ­re poka­żą Ci o czym nale­ży pamię­tać, wpro­wa­dza­jąc mikro­in­te­rak­cje do swo­ich pro­jek­tów:

• Szyb­ka reak­cja – feed­back pły­ną­cy z ekra­nu powi­nien poja­wić się zaraz po okre­ślo­nym dzia­ła­niu użyt­kow­ni­ka. Mikro­in­te­rak­cje mają sens tyl­ko wte­dy, gdy czy­nią inter­fejs lek­kim i gład­ko reagu­ją­cym. Pożą­da­ne przez użyt­kow­ni­ka poczu­cie kon­tro­li poja­wia się, gdy czas dzie­lą­cy dzia­ła­nie i reak­cję ze stro­ny sys­te­mu nie prze­kra­cza 0.1 sekun­dy.
• Spój­ność – zawsze wła­ści­wa. Uży­wa­jąc w obrę­bie stro­ny wie­lu mikro­in­te­rak­cji posta­raj się o wzór, któ­ry będzie je spa­jał – wie­le ani­ma­cji o róż­nej logi­ce może wpro­wa­dzić cha­os w inter­fej­sie i dzia­łać na nie­ko­rzyść pro­sto­ty jego dzia­ła­nia.
• Po pierw­sze użyt­kow­nik – pod­sta­wo­wa zasa­da pro­jek­to­wa­nia. Opie­raj się na wie­dzy o swo­ich użyt­kow­ni­kach, miej pew­ność, że ani­ma­cje zosta­ną przez nich zro­zu­mia­ne oraz że odpo­wia­da­ją one prze­zna­cze­niu ser­wi­su.
• Nie dokła­daj – jeśli to moż­li­we, do two­rze­nia mikro­in­te­rak­cji uży­waj ele­men­tów obec­nych już na stro­nie. Mają one prze­cież uprasz­czać poru­sza­nie się użyt­kow­ni­ka po stro­nie, nie je kom­pli­ko­wać.
• Do wie­lo­krot­ne­go użyt­ku – nie prze­kom­bi­nuj, war­to cza­sa­mi się zatrzy­mać i zadać sobie pyta­nie – czy ta ani­ma­cja nie będzie dla użyt­kow­ni­ka dener­wu­ją­ca przy 30 uży­ciu?
• Mikro, nie makro – inte­rak­cje nie powin­ny być dys­trak­to­rem dla naj­waż­niej­szych funk­cji ser­wi­su.

Pro­ste mikro­in­te­rak­cje wystę­pu­ją na wie­lu stro­nach. Zdą­ży­li­śmy się do nich na tyle przy­zwy­cza­ić, że stro­na kom­plet­nie ogo­ło­co­na z inte­rak­cji spra­wia wra­że­nie bez­barw­nej i nija­kiej, cza­sem nawet nie­dzia­ła­ją­cej. Coraz wię­cej stron zda­je się sta­wiać na ory­gi­nal­ne mikro­in­te­rak­cje. Te prze­my­śla­ne i opar­te na powyż­szych zasa­dach mogą sta­no­wić dla użyt­kow­ni­ków wizu­al­ną satys­fak­cję, któ­ra będzie wspie­rać ich przy­wią­za­nie do ser­wi­su oraz jego lojal­ność. War­to pamię­tać jed­nak, aby nie prze­sa­dzić – to nie mikro­in­te­rak­cje są klu­czo­wą dla użyt­kow­ni­ka funk­cjo­nal­no­ścią na stro­nie, dla­te­go nie powin­ny one go roz­pra­szać. Jako pro­jek­tan­ci sta­wiaj­my sobie za cel pro­sto­tę roz­wią­zań i uni­ka­nie wszel­kich zawi­ło­ści. Keep it sim­ple.

Źró­dła:

https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf#.p1xkkuxqy
https://www.uxpin.com/studio/blog/ux-design-best-practices-refined-microinteractions/
https://tubikstudio.com/ui-animation-microinteraction-for-macroresult/