Viitorul designului web mobil: design de jocuri video și povestire

Pe măsură ce tehnologiile se schimbă și tehnicile de proiectare evoluează, este inevitabil să avem o creștere masivă în ceea ce privește calitatea designului. Există paralele similare pe care le putem vedea și în designul jocurilor video. De exemplu:

Acesta a fost CERN, primul site web din 1991. Doar niște HTML de bază și spațiu alb amplu:

Acest exemplu de la Smashing Magazine este modul în care proiectăm site-uri web și împărtășim informații online în 2018:

Acum, dacă te uiți la istoria designului jocurilor video, vei observa o piesă similară; unul în care jocurile timpurii precum Pong erau incredibil de simpliste și lipsite de orice poveste reală:

Dar acum există jocuri precum Grand Theft Auto care pun jucătorii pe scaunul șoferului, permițându-le să controleze ritmul, direcția și rezultatele experienței lor:

Pe măsură ce tehnologiile se îmbunătățesc și tehnicile de proiectare evoluează, îmbunătățirile în designul digital sunt inevitabile. Ceea ce este cu adevărat impresionant, însă, este modul în care putem folosi acum designul pentru a spune o poveste. Cu alte cuvinte, nu mai trebuie să folosim derulări lungi pentru a configura parcele sau pentru a descrie ceea ce face o companie. Acest lucru este deosebit de grozav atunci când proiectați pentru experiența mobilă, care stabilește deja limite destul de stricte asupra cât de mult putem „spune” versus „arăta”.

În acest articol, vreau să analizez trei moduri în care designerii de jocuri video înțeleg corect aspectul de povestire al designului și modul în care designerii web pot folosi aceste tehnici pentru a oferi utilizatorilor o experiență captivantă și pentru a-i conduce mai rapid și mai eficient către conversie.

Trei tehnici de povestire a jocurilor video de care avem nevoie mai mult în web design

Jocurile video au parcurs un drum lung de când au fost introduse la sfârșitul anilor '70 în ceea ce privește grafica, controalele utilizatorului și, bineînțeles, dezvoltarea poveștii. Cu designul jocurilor video care evoluează în același timp cu designul web, există caracteristici și tendințe similare care pot fi găsite între cele două. Singurul lucru este că nu știu dacă mulți designeri web se gândesc să caute jocuri video pentru sfaturi de design.

Desigur, folosirea copleșitoare a culorilor șocante și a dialogului brânz nu va funcționa atât de bine atunci când dezvoltați un site web profesional. Cu toate acestea, trebuie să acordăm atenție modului în care designerii de jocuri video spun o poveste cu elemente de design - și îndrumă efectiv jucătorii până la final, folosind acele elemente.

Pe măsură ce atenția vizitatorilor tăi se scurtează și cererea crește pentru experiențe mai captivante, designerii web pot beneficia foarte mult de pe urma utilizării acestor tehnici de povestire pe web și, mai important, pe mobil.

1. Transformă-ți vizitatorul în erou

Încă de la începuturile jocurilor video, scopul a fost acela de a pune jucătorul pe scaunul din față și de a-l lăsa să fie eroul poveștii.

Luați PAC-MAN, de exemplu:

Jucătorul a fost întotdeauna eroul (adică, PAC-MAN), iar misiunea lui a fost să rezolve situația (adică să lupte cu fantomele) și să ajungă până la capăt.

Același lucru este valabil și pentru jocurile moderne, deși multe jocuri merg pe calea de a oferi jucătorilor impresia că au control asupra călătoriei lor eroice. Un bun exemplu în acest sens sunt jocurile Telltale.

Practic, fiecare dintre jocurile lor este creat în jurul unei povești binecunoscute. În exemplul de mai sus, jocul se bazează pe evenimentele care se desfășoară în emisiunea TV Game of Thrones . Pe parcursul jocului, jucătorii sunt chemați să pășească în lume și să facă alegeri active cu privire la ceea ce se întâmplă în continuare. Uneori acest lucru se întâmplă prin dialog (la 6:00), iar uneori se întâmplă prin acțiune (la 11:55).

În cele din urmă, fiecare jucător al jocului ajunge în același loc, indiferent de direcția în care se întoarce sau de ce linie rostește. Acest lucru nu face ca experiența să fie mai puțin captivantă pentru jucător, deoarece este implicat activ pe tot parcursul, și există o recompensă în cele din urmă - chiar dacă este una pe care o împărtășesc cu orice altă persoană care a jucat acest joc.

Exact asta ar trebui să facă site-urile web pentru vizitatorii lor, nu? Ele permit vizitatorilor să preia controlul deplin asupra experienței, astfel încât să vrea să ajungă la final. Pentru web, acest lucru se traduce prin conversie. Și cel mai bun mod de a face acest lucru, așa cum o demonstrează jocurile video, este de a oferi vizitatorilor posibilitatea de a alege și de a alege modul în care parcurg povestea.

Iată câteva moduri în care puteți face acest lucru cu design web:

Creați User Personas

Dezvoltați personajele utilizatorilor înainte de a face orice altceva atunci când elaborați strategii și planificați un site web. Persoanele dvs. ar trebui să aibă o „problemă” cheie cu care se confruntă. Este treaba ta să stabilești călătoria utilizatorului într-un mod care să-l ajute să descopere soluții la acea problemă.

Activați Configurarea avatarului

Pentru cei dintre voi cu site-uri web care permit utilizatorilor să creeze profiluri, aceasta este o oportunitate excelentă de a le permite să-și definească propria identitate unică. Permiteți-le să încarce o fotografie cu ei înșiși și să-și personalizeze profilul. De asemenea, le puteți oferi diferite setări de acces care direcționează ce tipuri de conținut văd, ce tipuri de oferte primesc și așa mai departe.

Site-urile de abonare WordPress precum WPMU DEV sunt un bun exemplu de site-uri web care fac acest lucru. Utilizatorii își pot crea propriile profiluri și pot câștiga puncte și statusuri speciale în funcție de cât de multă muncă depun în comunitate.

Utilizați conținut care poate fi asociat

În designul jocurilor video, există ceva cunoscut sub numele de „disonanță ludică”. Practic, „este situația neplăcută în care le cerem jucătorilor să facă ceva ce nu vor să facă... sau să-i împiedicăm să facă ceea ce vor”.

Probabil că ați întâmpinat acest tip de rezistență, deoarece ați proiectat site-uri web în trecut.

Examinați analizele și descoperiți rate mari de respingere pe anumite pagini sau chiar chiar din pagina de pornire. Descoperiți că există un element vizual sau o linie de copie care pur și simplu nu se potrivește cu publicul dvs. Asta pentru că este o întrerupere a ceea ce ar trebui să fie o experiență altfel captivantă. Folosind conținut care rezonează cu vizitatorul, care îl face să simtă că le-ai spune povestea, nu se vor simți deconectați și nu vor dori să se îndepărteze de la obiectiv.

Învârte o fantezie

Iată un fapt interesant: oamenii au de 22 de ori mai multe șanse să-și amintească datele atunci când sunt prezentate într-o formă narativă.

Hai sa recunoastem; dacă construiți un site web în numele unei afaceri sau al unei alte entități profesionale, nu aveți o poveste dramatică pe care să o învârți, așa cum o face un joc video. Și asta e bine.

Consumatorii nu vizitează site-uri web pentru a fi prinși în ore de povestiri epice. Acestea fiind spuse, ei încă se așteaptă să fie implicați în ceea ce le împărtășiți.

Deci, de ce să nu descrii un scenariu fantastic prin povestiri vizuale? Creierul digeră conținutul vizual cu 60% mai repede decât conținutul scris, astfel încât design-urile dvs. web și alte elemente vizuale (cum ar fi videoclipuri, animații și așa mai departe) sunt cheia pentru a face acest lucru.

Blogul Airbnb face întotdeauna o treabă grozavă cu acest tip de povestire vizuală.

Deși fiecare poveste este probabil spusă prin 800 până la 1.000 de cuvinte, ea este, de asemenea, însoțită de elemente vizuale extrem de atractive care vă spun ceva despre ceea ce ați experimenta la această destinație specifică.

2. Minimizați distracția prin utilizarea simbolurilor

Să vorbim pentru o secundă despre site-urile web vizualizate de pe dispozitive mobile, nu? În august 2017, 52,64% din toate vizitele pe site-uri web au fost efectuate prin intermediul unui smartphone. Și, începând din 2017, cea mai populară dimensiune pentru un smartphone a fost între cinci și șase inci și va continua să crească în popularitate odată cu trecerea anilor.

Nu este mult spațiu de umplut cu conținut pentru majoritatea vizitatorilor site-ului, nu-i așa? Deci, cum poți spune în mod eficient o poveste dacă ai imobiliare limitată? Dacă vrem să scoatem o pagină din manualul de proiectare a jocurilor video, atunci ar trebui să ne întoarcem la simboluri.

Kontra face un punct bun despre asta:

„[Un]ul, adesea trecut cu vederea, punctul forte al jocului UX este preferința față de simbolism. Capacitatea de a transforma semnificația în simboluri a fost un pas uriaș către dezordinea vizuală.”

Minimalismul funcțional este deja ceva ce faci în propriile tale eforturi de design web, dar te-ai gândit cum se poate lega și cu aspectul de povestire? Când vine vorba de jocuri video, simbolurile ajută la clarificarea drumului, astfel încât jucătorii să se poată concentra pe povestea dinaintea lor. Veți vedea asta cel mai des în jocurile bidimensionale, cu defilare laterală:

Street Fighter și alte jocuri de luptă plasează bara de sănătate în partea de sus:

Sonic the Hedgehog plasează contorul de viață în partea de jos:

Există chiar și unele precum Virtua Racing și alte jocuri dependente de zone geografice, care își lasă navigarea la o parte pentru ca jucătorii să le poată referi:

După cum puteți vedea, utilizarea simbolurilor menține spațiul de joc clar și ușor de urmărit împreună.

Indiferent dacă proiectați în principal pentru utilizatori de desktop sau de dispozitive mobile, scopul dvs. este să proiectați un spațiu care să încurajeze utilizatorii să urmeze și să nu se lase prins în distragerea atenției. Așadar, deși s-ar putea să credeți că navigarea prin suprapunere pe ecran complet este o alegere creativă pentru site-ul dvs. sau că veșnicul pop-up de chat live va obține mai multe angajamente, este posibil să vă faceți un mare deserviciu.

Folosind simboluri ușor de recunoscut pe site-ul dvs., puteți păstra designul curat și clar și fără distracție. Povestea pe care o împletești este cel mai important lucru și nu vrei să stai în calea vizitatorilor să poată ajunge la ea.

MSR este un exemplu frumos al acestui lucru bine făcut:

Site-ul este pentru firma lor de proiectare arhitecturală. În loc să scrie volume de text despre ceea ce au făcut și cum o fac, ei permit imaginilor să vorbească de la sine. Apoi au folosit o serie de simboluri pentru a ajuta vizitatorii să continue spre alte puncte de interes în călătoria lor.

Iată câteva moduri în care ați putea folosi simboluri pentru a vă dezordine site-ul:

• Pictograma Hamburger (pentru navigare)
• Pictograma fotografie de profil (pentru detaliile contului)
• Pictograma creion (pentru o interfață de editare)
• Pictograma roată (pentru setări)
• Pictograma coș de cumpărături (pentru finalizarea comenzii)
• Lupă (pentru a extinde bara de căutare)
• Pictograma conector (pentru a deschide opțiunile de partajare socială și feed RSS)
• Semn de întrebare (pentru a extinde opțiunile de chat live, căutare sau ajutor)
• Și așa mai departe.

Un lucru de remarcat aici este că nu doriți să exagerați cu pictogramele. După cum puteți vedea din exemplele de jocuri video de mai sus, întreaga interfață nu este presărată cu pictograme. Ele sunt pur și simplu acolo pentru a ține locul elementelor cu care jucătorii sunt deja familiarizați și la care se vor referi des. Acesta este modul în care ar trebui să gestionați pictogramele pentru propriul site. Gândiți-vă cât de ușor vor fi icoanele dvs. de descifrat, precum și care sunt absolut necesare. Dezordinea nu înseamnă ascunderea fiecărui element sub o pictogramă; pur și simplu vrei să faci un pic de ordine.

Dacă sunteți îngrijorat de potențialul de confuzie cu privire la ceea ce înseamnă pictogramele dvs. pentru utilizatori, atunci utilizați etichete, text alternativ sau sfaturi pentru a oferi mai multe detalii celor care au nevoie de ele.

3. Fii inteligent cu privire la modul în care folosești spațiul

Unul dintre lucrurile frumoase despre jocurile video este modul în care folosesc pereții și blocajele reale pentru a împiedica jucătorii să navigheze în teritorii unde nu ar trebui să fie. Unul dintre jocurile mele preferate care face asta chiar acum se numește LittleBigPlanet. Deși este similar cu aventurile cu defilare laterală precum Super Mario, designul său se extinde dincolo de cele două dimensiuni de bază experimentate de obicei în aceste tipuri de jocuri.

După cum puteți vedea, jucătorul întâlnește o serie de suprafețe dure care apoi îl determină să se deplaseze înainte și înapoi între straturi, să urce pe diverse elemente și să găsească un traseu mai ideal spre sfârșitul jocului.

Jocurile cu împușcături la persoana întâi, cum ar fi Halo, folosesc, de asemenea, elemente fizice pentru a menține jucătorii limitați la spațiul de joc principal și pe cale de a finaliza misiunea și povestea.

În calitate de designer web, nu aveți luxul de a crea ziduri în jurul călătoriei utilizatorului pe site-ul dvs. Acestea fiind spuse, nu trebuie să proiectați un site web și să lăsați totul la voia întâmplării. Există modalități de a conduce vizitatorii printr-o cale directă către conversie.

Kill Screen a scris un articol interesant despre arta povestirii spațiale în jocurile video. În ea, scriitorul Sharang Biswas a explicat ideea că „Spațiile pot fi proiectate. Ele pot fi făcute să promoveze anumite căi, să încurajeze comportamente specifice, chiar să provoace reacții emoționale.”

Există mai multe moduri în care puteți face acest lucru cu design:

Utilizați un reflector

În jocurile video, puteți folosi lumina și întunericul pentru a atrage atenția asupra căilor importante. Pe site-uri web, nu este întotdeauna ușor să folosiți luminozitatea sau întunericul, deoarece un design prea întunecat sau prea deschis al textului ar putea duce la o experiență proastă pentru utilizator. Ceea ce doriți să faceți este să creați un fel de „reflector”. Puteți face acest lucru prin infuzarea unei zone cheie a designului dvs. cu o culoare dramatică sau un font stilizat îndrăzneț.

Într-un site care de altfel este destul de ușor în utilizarea culorilor, Kappow face o treabă bună folosindu-l pentru a evidenția două zone cheie ale site-ului pe care este clar că vizitatorii ar trebui să le viziteze: studiile de caz.

Adăugați indicii

Dacă ați mai jucat vreodată un joc video de groază, știți cât de critic poate fi elementul sunet pentru el. Iată un exemplu despre cum Until Dawn folosește sunetul (precum și amprentele vizuale) pentru a încerca să orienteze jucătorul în direcția corectă:

Sincer, nu sunt un mare fan al muzicii de pe site-uri web, chiar dacă acestea provin din videoclipuri cu redare automată pentru care am vizitat site-ul în primul rând. Sunt sigur că nu sunt singurul care simte acest lucru, deoarece nu mai există multe site-uri web care folosesc muzica de fundal sau redarea automată a sunetului.

Acestea fiind spuse, deși este posibil să nu reușiți să direcționați vizitatorii în jos pe pagină cu sunetul a ceva care se redă mai jos, puteți folosi alte elemente pentru a-i conduce. În primul rând, puteți folosi elemente interactive, cum ar fi animația, pentru a le atrage atenția asupra locului în care trebuie să meargă. Să luăm un joc ca Angry Birds, de exemplu.

Vedeți cum păsărele roșii țopăie în sus și în jos în timp ce își așteaptă rândul? Este un gest subtil, dar care cu siguranță va atrage atenția jucătorilor începători asupra zonei ecranului în care ar trebui să interacționeze direct dacă vor să treacă la nivelul următor. Animația de pe un site web ar funcționa la fel de eficient dacă încercați să atrageți privirea vizitatorilor la un element cheie, cum ar fi un formular de contact sau un buton pe care se poate face clic.

Dar nu trebuie să fie doar animație. Alți designeri de jocuri video plantează pur și simplu indicii în jurul peisajului pentru a ghida jucătorii prin călătorie. Nu sugerez ca site-ul dvs. să înceapă să ascundă ouă de Paște peste tot. În schimb, poate doriți să vă gândiți să utilizați săgeți sau linii subtile care definesc spațiul în care vizitatorii ar trebui să se „joace” și apoi să se deplaseze în jos.

Angajați o mascota

Pentru unele mărci, ar putea avea sens să folosească o mascota reală pentru a ghida vizitatorii prin poveste. Dacă este o mascota deja consacrată și nu va interveni prea mult în experiență, atunci de ce să nu o aduceți în călătorie pentru a vă asigura că vizitatorii se înregistrează în toate locurile potrivite?

Sau puteți face ca BarkBox și utilizați o serie de mascote similare pentru a ghida vizitatorii prin diferite părți ale site-ului (în special procesul de înscriere și abonare).

rezumat

Pe măsură ce atenția se scurtează și vizitatorii doresc doar să ajungă la lucrurile bune de pe un site web, designerii trebuie să fie mai creativi în modul în care comunică „povestea” site-ului lor. În mod ideal, designul dvs. web va prezenta mai mult acea poveste în loc să spună, ceea ce este modul în care designul de jocuri video tinde să reușească în această chestiune.

Amintiți-vă: Storytelling nu este doar relegat la mărcile mari care pot țese povești strălucitoare despre modul în care viețile consumatorilor au fost schimbate cu produsele lor. Nici nu este doar pentru designerii de jocuri video care au ore de joc de dezvoltat pentru publicul lor. O poveste trebuie pur și simplu să transmită utilizatorului final modul în care problema acestuia poate fi rezolvată prin soluția site-ului dvs. Prin strategii de design subtile inspirate de tehnicile de povestire a jocurilor video, vă puteți împărtăși și modela în mod eficient propria poveste.