Interaktivnost pomaže da korisnička sučelja budu izražajna i laka za korištenje. Unatoč velikom potencijalu, interaktivnost je možda najmanje shvaćena od svih dizajnerskih disciplina. To može biti zbog činjenice da je interaktivnost jedan od novijih članova obitelji korisničkog sučelja. Vizualni dizajn i dizajn interakcije potječu iz ranih grafičkih sučelja, ali je dizajn interakcije morao čekati na moderniji hardver za glatko prikazivanje animacija. Naslojavanje interaktivnosti korisničkog sučelja povrh tradicionalne animacije stvara vlastiti nesporazum. Cijeli bi se život mogao potrošiti na svladavanje Disneyjevih 12 temeljnih načela, znači li to da je interaktivnost korisničkog sučelja također teška? Ljudi mi često govore da je interaktivnost teško dizajnirati ili da je odabir pravih vrijednosti težak. Tvrdim da u područjima koja su najvažnija za korisničko iskustvo dizajn interakcije može i treba biti jednostavan.
Gdje početi?
Glavni cilj dizajna interakcije je pomoći korisnicima u kretanju aplikacijom ilustriranjem odnosa između elemenata korisničkog sučelja. Interactive Design također ima mogućnost dodavanja lika aplikaciji s animiranim ikonama, logotipima i ilustracijama; međutim, upotrebljivost bi trebala imati prednost nad elementima izražaja. Prije nego što pokažete svoje vještine animiranja likova, počnimo stvaranjem neke osnovne interaktivnosti, fokusirajući se na navigacijske prijelaze.Prijelazni obrasci
Pri dizajniranju navigacijskog prijelaza ključni su jednostavnost i dosljednost. Da bismo to učinili, odabrat ćemo dvije vrste pokreta:- Prijelazi temeljeni na spremniku
- Prijelazi bez spremnika.
Prijelazi temeljeni na spremniku
Elementi kao što su tekst, ikone i slike grupirani su unutar spremnika
Ako kompozicija uključuje spremnik, kao što je gumb, kartica ili popis, tada se dizajn prijelaza temelji na animaciji spremnika. Spremnike je obično lako uočiti na temelju njihovih vidljivih obruba, ali imajte na umu da mogu biti i nevidljivi dok prijelaz ne započne, poput nerazgraničene stavke popisa. Ovaj je predložak podijeljen u tri koraka:
* Animacija je usporena kako bi se ilustrirali elementi koji se pojavljuju i nestaju
Primjenom ovog uzorka na sve prijelaze spremnika uspostavlja se dosljedan stil. Također čini vezu između početne i završne kompozicije jasnom, jer su povezane animiranim spremnikom. Kako bismo pokazali fleksibilnost ovog obrasca, ovdje je prikazano pet različitih sastava:
* Animacija je usporena kako bi ilustrirala kako su početna i završna kompozicija povezane spremnikom
Neki se spremnici jednostavno pojavljuju iza zaslona koristeći standardno omekšavanje. Smjer njegovog kretanja određen je mjestom komponente na koju je spojen. Na primjer, klikom na ikonu navigacijskog izbornika u gornjem lijevom kutu premjestit ćete spremnik ulijevo.
Ako je spremnik izvan zaslona, pojavljuje se glatko i povećava se. Umjesto animacije od 0%, animacija počinje od 95% kako bi se izbjeglo previše fokusiranja na prijelaz. Animacija velikih razmjera koristi lagano usporavanje, što znači da počinje maksimalnom brzinom i lagano usporava. Da bi se smanjio, spremnik se jednostavno smanjio bez skaliranja. Kraj animacije trebao bi biti manje naglašen od početka kako bi se pozornost korisnika usmjerila na novi sadržaj.
* Animacija je usporena da ilustrira kako se spremnici mogu pojaviti zbog postupne promjene elementa (skaliranje, pojavljivanje i nestajanje)
Prijelazi bez spremnika
Neke kompozicije nemaju spremnik na kojem bi se temeljio prijelaz, kao što je klik na ikonu u donjoj navigaciji koja vodi korisnika na novo odredište. U tim se slučajevima koristi obrazac u dva koraka:- Kompozicija počinje glatkim zatamnjenjem i završava glatkim zatamnjenjem.
- Kako konačna kompozicija blijedi, ona se također suptilno povećava korištenjem omekšavanja elemenata. Opet, skaliranje se primjenjuje samo ako se čini da kompozicija naglašava novi sadržaj u odnosu na stari sadržaj.
* Animacija je usporena da ilustrira kako se prijelazi odvijaju bez spremnika korištenjem zumiranja, elementi koji se pojavljuju i nestaju
Ako početak i kraj skladbe imaju jasnu prostornu ili faznu povezanost, tada se zajedničkim pokretom može pojačati. Na primjer, kada se krećete kroz komponentu koraka, početak i kraj kompozicije pomiču se okomito kako blede prema unutra ili prema van. To poboljšava njihov vertikalni raspored. Kada pritisnete sljedeći gumb za pregled daljnjeg materijala, kompozicija se pomiče vodoravno. Pomicanje slijeva nadesno poboljšava razumijevanje naknadnog događaja. Co-motion koristi elemente standardnog omekšavanja.
*Animacija je usporena kako bi ilustrirala kako dolazi do vertikalnog i horizontalnog kretanja
Najbolje prakse
Što jednostavnije to bolje
S obzirom na njihovu visoku učestalost i blisku povezanost s upotrebljivošću, navigacijski prijelazi općenito bi trebali podržavati funkcionalnost u stilu. To ne znači da ih nikada ne treba stilizirati, samo se pobrinite da odabir stila ima smisla za marku. Pokreti očiju obično se najbolje zadržavaju na elementima kao što su male ikone, logotipi, učitavači ili slobodno stanje. Jednostavan primjer u nastavku možda neće privući toliko pažnje na Dribbbleu, ali će učiniti aplikaciju lakšom za korištenje.
*Animacija je usporena kako bi ilustrirala različite stilove kretanja
Odaberite pravo trajanje i omekšavanje
Navigacijski prijelazi trebaju koristiti trajanja koja daju prednost funkcionalnosti, biti brzi, ali ne toliko brzi da postanu dezorijentirajući. Trajanje se odabire ovisno o postotku ekrana koji animacija zauzima. Budući da navigacijski prijelazi obično zauzimaju veliki dio zaslona, 300 ms je dokazana metoda. Nasuprot tome, male komponente kao što su prekidači koriste kratko trajanje od 100 ms. Ako je prijelaz prebrz ili prespor, prilagodite njegovo trajanje u koracima od 25 ms dok ne postigne pravu ravnotežu.Ublažavanje opisuje brzinu kojom se animacija ubrzava i usporava. Većina navigacijskih prijelaza koristi standardno omekšavanje elemenata, što je vrsta asimetričnog omekšavanja. To znači da se elementi brzo ubrzavaju, a zatim lagano usporavaju kako bi pozornost usmjerili na kraj prijelaza. Ova vrsta omekšavanja daje animaciji prirodnu kvalitetu jer se objekti u stvarnom svijetu ne pokreću i ne prestaju odjednom kretati. Ako se prijelaz čini oštrim ili robotskim, vjerojatno je simetrično ili linearno omekšavanje pogrešno odabrano.
*Animacija je usporena kako bi ilustrirala različite vrste omekšavanja
Obrasci i najbolji postupci navedeni u ovom članku namijenjeni su stvaranju stila kretanja koji je praktičan i nenametljiv. Ovo je prikladno za većinu primjena, no neke marke mogu zahtijevati intenzivnije stilske izraze. Da biste saznali više o stilizaciji pokreta, pogledajte naše upute za prilagodbu.
Nakon što su navigacijski prijelazi implementirani, započinje zadatak dodavanja znaka vašoj aplikaciji. Ovdje jednostavni obrasci ne funkcioniraju, a ovdje možete u potpunosti ostvariti svoje vještine animacije...
Osobna animacija može dodati ležernost ozbiljnoj pogrešci
Ako vas zanima više o sposobnosti kretanja, svakako pročitajte naš
Koja je korist vaše web stranice ili aplikacije? Je li lako prikupiti podatke uz njegovu pomoć? Ili kupite jednim klikom i dobit ćete robu već sutra? Ili je glavna stvar brzo pronaći odgovore na potrebna pitanja?
Razmislite o ljudima koji su razvili ovo mjesto ili aplikaciju. Što im je bio cilj?
Pokušali su napraviti web resurs koji bi imao sve ono zbog čega bi ga ljudi voljeli. Web mjesto jednostavno za korištenje koje će vam brzo pružiti informacije koje tražite i pomoći vam da donesete informirane odluke.
UX, ili korisničko iskustvo, pokriva percepciju i emocije koje softverski proizvod ili usluga izaziva. UX karakteriziraju jednostavnost korištenja, pristupačnost i praktičnost. O UX-u se često govori u kontekstu elektroničkih uređaja, pametnih telefona, računala, softvera ili web stranica. Ali takav koncept nije nov; to je nešto što se brzo mijenja zbog tehnološkog napretka, novih vrsta interakcija i potrošačkih trendova.
Korisnici traže munjevito brze načine rješavanja problema, stoga je UX izuzetno važan. Provjerite je li stranica jasna i laka za razumijevanje korisnika.
Ako korisnici ne smatraju resurs korisnim i lakim za korištenje, brzo će otkazati pretplatu. Većina korisnika u roku od jedne minute odluči hoće li zatvoriti stranicu.
U ovom članku saznajemo više o UX industriji u nastajanju, koje dizajnere tvrtke zapošljavaju i zašto pametan dizajn koristi svakom poslu.
Što je UX dizajn?
UX dizajn ili dizajn iskustva interakcije ono je što određuje koliko će korisnik biti zadovoljan softverskim proizvodom ili uslugom; ovaj proces uključuje poboljšanje funkcionalnosti, upotrebljivosti i praktičnosti. UX dizajn je stvaranje softverskih proizvoda s promišljenim i relevantnim korisničkim iskustvom. Područje UX dizajna pokriva tonu potpodručja koja vrijedi razmotriti.
1. Interaktivni dizajn
Dizajn interakcije ili IxD je pododjeljak UX dizajna koji definira interakciju između korisnika i proizvoda; cilj ovih interakcija je dobro korisničko iskustvo.
2. Vizualni dizajn
Vizualni dizajn koristi ilustracije, fotografije, tipografiju i sheme boja kako bi poboljšao iskustvo krajnjeg korisnika. U vizualnom dizajnu važno je slijediti principe umjetničkog usmjerenja. To su ravnoteža, prostor, kontrast... Boja, oblik, veličina i drugi elementi također utječu na dizajn.
3. Istraživanje korisnika
Ovo je posljednji sastavni dio UX dizajna koji tvrtke koriste kako bi razjasnile očekivanja svojih kupaca. Uspješan web projekt služi određenoj svrsi i rješava specifične probleme, stoga je važan korak saznati što potrošač treba. Bez toga, dizajn se temelji na nagađanjima i pretpostavkama.
4. Informacijska arhitektura
Dizajneri koriste informacijsku arhitekturu za strukturiranje i označavanje sadržaja na specifične načine kako bi korisnicima olakšali pronalaženje informacija koje su im potrebne. Informacijska arhitektura koristi se u web razvoju, razvoju pametnih telefona, razvoju aplikacija, a također se vidi u mnogim fizičkim objektima. Lakoća korištenja i pristupačnost dva su glavna aspekta informacijske arhitekture.
Za ilustraciju, razmotrite kartu njujorške podzemne željeznice. Usput, ovo je dobar primjer informacijske arhitekture koja pomaže ljudima da dođu od točke "A" do točke "B". I, kao što Institut za informacijsku arhitekturu kaže: "Ako radite stvari za druge, radite informacijsku arhitekturu."
Komponentni procesi UX dizajna
Postoje tri faze UX dizajna:
1. traženje ciljane publike
2. razumijevanje ciljeva tvrtke - kako ti ciljevi utječu na korisnika
3. razmišljanje izvan okvira
Tipično, UX dizajn koristi pristup usmjeren na korisnika za stvaranje željenog krajnjeg proizvoda u tri koraka.
Jednostavnije je - trebali biste uzeti u obzir potrebe onih za koje se dizajn razvija. Za otklanjanje svih vrsta poteškoća i neravnina koristi se mnoštvo rješenja; prototipovi se izrađuju i testiraju na korisnicima.
Na temelju rezultata rada odabire se najbolja od razvijenih opcija. Ako gledate stvari sa stajališta korisnika i dizajnirate na temelju njihovih preferencija, rezultat će zadovoljiti sve.
Načela UX dizajna
Industrija UX dizajna se brzo mijenja, ali temeljni principi su i dalje isti. Dizajneri moraju razumjeti što im je potrebno u smislu vizualne ravnoteže. Sažetost i jasnoća važne su nijanse; Ovdje vrijedi princip: što manje, to bolje. Nastojte osigurati da dizajn bude intuitivan i, što je još važnije, uzeti u obzir interese i potrebe korisnika.
Opseg UX-a obično se vrti oko novih tehnologija, ali u središtu svega su principi stari koliko i vrijeme koji pomažu dizajnerima riješiti sve vrste problema kroz dosljednu i fokusiranu metodologiju.
Razmotrite kontekst: Korisnik mora znati gdje se trenutno nalazi. Ne smije postojati osjećaj pretrpanosti informacijama ili izgubljenosti. Vaš zadatak je potaknuti i uputiti u pravom smjeru.
Budite humani: Nitko ne voli osjećaj interakcije sa strojem. Veća je vjerojatnost da ćete izgraditi povjerenje ako pokažete ljudsku stranu svoje tvrtke.
Dostupnost: Nitko ne želi gubiti vrijeme. Uspješan UX dizajn poboljšava navigaciju.
Olakšati: Dosljednost i jednostavnost dizajna uvijek su dobri. Gradite odnose s korisnicima kroz user-friendly UX.
Jednostavnost: Bez pogrešnih proračuna ili nepotrebnih opisa. Prijeđite odmah na stvar.
UX rezultat
Kada je UX projekt dovršen, dizajner i tim pokazuju klijentu i njihovom timu popis onoga što je učinjeno. Potrebno je prikazati proces rada, popis realiziranih ideja.
Ovo je važan dio ukupnog procesa. To olakšava UX dizajnerima da pronađu ono što traže, pokažu svoju viziju i objasne određene preporuke za poboljšanje.
1. Istraživanje korisnika
Potrebe korisnika, trendovi i motivacije identificirani su kroz različite korisničke studije. To mogu biti kvantitativni i kvalitativni podaci dobiveni tijekom testiranja, na primjer, uz sudjelovanje fokus grupa; detaljan opis postupka registracije, ukrcaja i zahtjeva upućenih korisničkoj službi. Cilj je dobiti detaljnu analizu onoga što stranica ima i što bi se moglo poboljšati - sve ideje se testiraju na stvarnim korisnicima.
Istraživači stvaraju profile potrošača na temelju stvarnih podataka o ljudima, što pomaže u određivanju tko će točno stupiti u interakciju s web-stranicom ili aplikacijom.
Istraživanjem korisnika dizajneri pronalaze i definiraju svog korisnika.
2. Ocjenjivanje natjecatelja
Procjena snaga i slabosti vaših konkurenata način je da proširite vlastitu UX strategiju. Najbolji način da nastavite je kroz analitička izvješća koja ističu konkurentske razvoje. U biti, ovo je detaljna analiza interaktivnog dizajna konkurenata, popis slabosti, pogrešnih proračuna i propusta, općenito, što može postati konkurentska prednost.
3. Interaktivni dizajn
Opis korisničkih interakcija može biti u obliku prototipa - to olakšava razumijevanje načina na koji će korisnici obavljati ključne zadatke, pronaći informacije i, općenito, koristiti proizvod. Opisuje se proces traženja informacija i koliko je razvoj zgodan. Prototip bi trebao biti što je moguće pojednostavljeniji i bliži konačnoj verziji.
4. Informacijska arhitektura
IA je proces uzimanja informacija i njihovog pretvaranja u probavljiv oblik, što je posebno važno za velike stranice. Važno je razumjeti u kojem kontekstu će ljudi koristiti dizajn. Krajnji rezultat može biti karta web-mjesta s opisima alata ili uzorak protoka korisnika koji pokazuje kako se posjetitelji kreću web-mjestom.
Što je dizajn korisničkog sučelja?
Kada je Apple predstavio navigacijsku komponentu Click Wheel za iPod, stvar je bila intuitivna i vrlo funkcionalna—da ne spominjemo vizualno zapanjujuću. Ovo je dobar primjer uspješnog korisničkog sučelja ili UI. UI je način interakcije s računalima, strojevima, web stranicama, aplikacijama, nosivim uređajima itd. Dizajn korisničkog sučelja je ono što čini sve te stvari što je moguće jednostavnijim i učinkovitijim.
UI vs. UX
UX, korisničko iskustvo, odnosi se na kretanje korisnika kroz web stranicu ili aplikaciju. UX dizajneri rade na obliku i funkcionalnosti proizvoda ili tehnologije. UI, ili korisničko sučelje, fokusira se na to kako vanjska ljuska proizvoda izgleda i funkcionira. Djelokrug rada UI dizajnera su opipljive i vidljive komponente ovog procesa.
Uobičajeni elementi korisničkog sučelja
UX i UI imaju mnogo toga zajedničkog, no važno je uočiti ključne razlike između ova dva predmeta. Opet, UI je fokusiran na izgled proizvoda, dok je UX više zabrinut za način na koji ljudi stupaju u interakciju sa web mjestom ili aplikacijom. Evo najčešćih elemenata korisničkog sučelja koje trebate znati kako biste bolje razumjeli razlike:
Informacijske komponente: UI dizajneri koriste informacijske komponente za proširenje tzv. iskustvo čitatelja – prenijeti više informacija. Primjeri informacijskih komponenti uključuju indikatore statusa, obavijesti i okvire s porukama. Sve se to koristi kao potvrda: korisnik je izvršio određeni zadatak. Ili da obavijesti da je potrebna određena radnja s njegove strane.
Navigacija putem puta
Ovo je alat za dizajn koji vizualno poboljšava upotrebljivost web stranice.
Ovo je način na koji ljudi vide svoju lokaciju na web stranici, u njezinoj hijerarhijskoj strukturi. Nikakvi otmjeni elementi dizajna nisu potrebni; trebate samo pokazati u kojem se dijelu web stranice korisnik nalazi. Obično se takve veze postavljaju na vrh web stranice internetskih trgovina ili na drugim resursima.
Kontrole unosa: Korisnici imaju više opcija za odgovor na pitanje koje im se postavi. To mogu biti potvrdni okviri, padajući popisi i prekidači. Informacije trebaju biti kratke i sažete kako bi se lakše saznale potrebe.
Istraživanje iskustva
Bez istraživanja ne možete učiti o potrebama i preferencijama ljudi. UX istraživanje je o pronalaženju onoga što korisnici trebaju; Dobiveni podaci čine temelj UX dizajna. Tvrtke i dizajneri koriste istraživanja kako bi izvukli zaključke o tome što funkcionira, a što treba promijeniti. Postoji nekoliko opcija za UX istraživanje.
Testiranje upotrebljivosti
Svrha takvog istraživanja je saznati koliko je proizvod uspješan; Korisnici sudjeluju u testiranju. To tvrtkama daje prave informacije o tome kako ljudi koriste proizvod ili sustav ili kako taj proizvod ili sustav funkcionira. Postoje dva glavna načina testiranja.
Testiranje upotrebljivosti na slučajnim korisnicima je brz i jeftin način za tvrtke i istraživače da dobiju informacije od ljudi koji možda ne znaju za njihov proizvod. Nasumični ljudi koriste proizvod i dijele svoja mišljenja.
Daljinsko testiranje upotrebljivosti omogućuje tvrtkama da provode istraživanja dok su korisnici u svom prirodnom okruženju (na primjer, svom domu ili uredu).
Alati za testiranje upotrebljivosti
Takvi alati omogućuju vam da saznate mišljenja korisnika, analizirate povratne informacije i napravite određene promjene na temelju podataka. Ako tražite alat koji će vam pomoći da shvatite koliko je jednostavno koristiti vašu web-lokaciju ili aplikaciju, imate dvije mogućnosti:
Adobe Fireworks CS6 omogućuje web dizajnerima stvaranje grafike za web stranice bez potrebe za ulaženjem u zamršenost koda ili dizajna. Adobe Fireworks ima brojne prednosti. Alat ima impresivnu točnost piksela i ima mogućnosti kompresije slike (JPEG, GIF, itd.) koje korisnicima omogućuju izradu funkcionalnih web stranica i vektorsku konstrukciju.
Koristeći Adobe XD, možete izraditi dizajne web stranica i mobilnih aplikacija, kao i prototipove, žičane okvire i vektorsku grafiku. Interaktivni prototipovi mogu se dijeliti na više platformi, uključujući Windows, Mac, iOS i Android - idealno za timsku suradnju.
Axure RP Pro je još jedan dobar alat za UX dizajn i besplatan je. Axure nudi nekoliko opcija, uključujući: izrada prototipa i dokumentacija. Možete čak izraditi obrasce korisničkog putovanja i karte web mjesta. Axure je idealan za izradu web i desktop aplikacija, dajući korisnicima mogućnost brzog izvoza u PDF ili HTML.
Ovo je složen softver s mnogo specifičnih funkcija, uklj. nedestruktivno uređivanje (to znači da Sketch neće promijeniti gustoću piksela slike s kojom radite). Izvoz koda, preciznost piksela, izrada prototipa, vektorsko uređivanje - to su glavne prednosti Sketch-a.
6. Softver za izradu scenarija
Možda se pitate zašto je Storyboard potreban u UX dizajnu. Ali to je dobar način da vizualno predvidite kako će korisnik komunicirati s vašim proizvodom u širem kontekstu. Dostupno je nekoliko alata za izradu scenarija, s različitim značajkama i razinama težine.
Storyboarder je besplatan razvoj s osnovnom funkcionalnošću koji je prikladan za sve dizajnere, bez obzira na razinu njihove vještine. Ovaj softver brzo stvara skice ili figure za opisivanje plana ili ideje. Drugi alat je Toon Boom Storyboard Pro. Kombinira crtanje, animaciju, kontrolu kamere i brojne druge mogućnosti uz godišnju ili mjesečnu naknadu. Široka funkcionalnost za sofisticirano pripovijedanje i detaljan pripremni rad. Sve je to prikladno za dizajnere koji traže priliku da vizualno ispričaju svoju priču pomoću sučelja.
Kako postati UX dizajner?
Ako volite dizajn, istraživanje i rad s ljudima - slušajući druge kako govore o svojim iskustvima, onda je možda vrijedno razmišljanja o karijeri u UX dizajnu. U ovom slučaju, morat ćete se usredotočiti na konceptualne aspekte dizajna; stvoriti visokokvalitetno iskustvo interakcije za druge korisnike.
Postoji nekoliko važnih koraka da postanete UX dizajner. Mnoga sveučilišta diljem svijeta nude svoje kolegije, no za upis na njih obično je preduvjet 4 godine obrazovanja u području dizajna. Postoje fleksibilniji programi kao npr Diplomski studij dizajna korisničkog iskustva Sveučilišta Quinnipiac. Postoje i programi certifikacije za profesionalce. Mnogo ovisi o trajanju treninga i stupnju pripremljenosti.
Ako ste spremni ostvariti svoj san da postanete UX dizajner, trebat će vam životopis i snažan portfelj. Dobro će vam doći resursi poput Dribbblea ili Behancea. Možete demonstrirati svoj rad na vlastitoj web stranici, kreiranoj pomoću programa za izgradnju kao što je SquareSpace.
Imajte na umu sljedeće detalje:
Vizualna privlačnost
Prezentacija je sve. Rad treba govoriti sam za sebe...pokazati, ne reći! Izbor boja, tipografija su važni.
Dodajte stranicu "o".
Zašto bi vas netko trebao zaposliti? Što novo možete unijeti u bilo koju organizaciju? Pokažite regrutima svoju jedinstvenu viziju ili ono što vas inspirira.
Zaposlenik vaše tvrtke iz snova ne bi trebao imati poteškoća u navigaciji web-stranicom portfelja. Dodajte odjeljke kao što su kontakti, životopis, portfelj, o meni itd. u izbornik. za lakšu navigaciju.
Objasnite kako stvarate svoj UX
Vaš budući poslodavac želi razumjeti vaš način razmišljanja. Dodajte informacije koje regrutu govore o vašem istraživanju korisničkog doživljaja, razmišljanju, procesu dizajna ili izradi prototipova.
Napravite dodatni portfelj
Koristite druge alate kako bi vaš rad bio vidljiv na webu gdje dizajneri i oni koji ih žele angažirati provode svoje vrijeme,
Poanta
Možete biti grafički dizajner, bloger, programer ili bilo što drugo, ali UX dizajn je nešto što može pomoći vama i vašoj tvrtki u rastu. Zadovoljan korisnik ključ je uspjeha, ali bez promišljenog UX dizajna to je nemoguće postići.
Tehnologija sve više prodire u svakodnevni život, a uspješan UX dizajn uklanja sve barijere između korisnika i njegovog uređaja (ili aplikacija). UX dizajn sada je važniji nego ikada - pridružite se ovom pokretu i doprinesite svom poslovanju.
U pravilu, za poticanje osobe koja koristi proizvod, uslugu, sustav, potrebna je mogućnost davanja odgovora. Ovaj odgovor treba cijeniti, jasno komunicirati i, u većini slučajeva, dati jasan i polupredvidljiv odgovor. I onda radi.
Ovo je osnovna definicija Interakcijskog dizajna (IxD), koja objedinjuje opće trendove definicija koje je dao renomirani dizajner Dan Saffer 1 ) i Robert Reimann 2 ), kao i Udruga za dizajn interakcije 3 ).
Također je vrlo važno napomenuti da je dizajn interakcije potpuno drugačiji koncept od ostalih vrsta dizajna. Ovo nije informacijska arhitektura ili industrijski dizajn. To također nije vrsta korisničkog sučelja. Dizajn interakcije nije nikakav oblik ili struktura, već nešto više efemerno - radi se više o zašto i kada, a ne o tome što i kako.
Za bilo koju vrstu dizajna, prvi prioritet je formulirati ono što se zove osnove odnosno osnovnih elemenata. Stvaranje takvih semantičkih koncepata osigurava:
- bolju komunikaciju među sudionicima
- stvaranje zajedničkih estetskih koncepata
- najbolji alati za učenje
- područje za istraživanje
Ovi, kao i drugi za sada nevažni razlozi, razlog su da govorimo o osnovama.
Što su temelji?
Moje prvo upoznavanje s "temeljima" bilo je tijekom programa industrijskog dizajna na Pratt institutu u Brooklynu, New York. Program je kreirala Roweena Reed Kostellow na temelju njezine obrazovne temeljne filozofije (za više informacija pogledajte "Elementi dizajna" Gail Greet Hannah - Elementi dizajna Gail Pozdravi Hannah 4 ).
Prema Costellowu, šest je elemenata koji čine temelje industrijskog dizajna: linija, osvjetljenje i boja, prostor, volumen (dimenzije), negativni prostor (pozadina) i tekstura (površina, tekstura). Miješanje i eksperimentiranje s ovim elementima srce je dizajna 3D oblika. Studenti Instituta Pratt svladali su te osnove tijekom jednogodišnjeg tečaja. Morali su definirati granice i ovisnosti raspravljajući o apstrakcijama i stvarnim projektima.
Budući da nisam jedina osoba koja je razmišljala o ovim stvarima, slobodno je pretpostaviti da svi o tome razmišljamo drugačije. Na primjer, Dan Saffer u svojoj knjizi Designing Interactivity posvećuje veliko poglavlje u kojem opisuje elemente dizajna interakcije: vrijeme, pokret, prostor, izgled, teksturu i zvuk. Elementi Den-a raspoređeni su prema tome kako ih mogu pozvati na obrazac za stvaranje interaktivnosti, a ne prema tome koji će mi oblik interaktivnosti biti dostupan ili ne, osim možda s vremenom.
Ako su to doista temelji dizajna interakcije, moraju biti potpuno apstrahirani od forme i nemaju fizičkih atributa.
Temelji dizajna interakcije
Vrijeme
"Vrijeme" razlikuje interaktivni dizajn od ostalih vrsta. Ovo je ljuska naših koncepata interaktivnosti.
Ali vrijeme nije jedina osnova za dizajn interakcije. Postoje mnogi međusobno povezani aspekti manipulacije vremenom. A kao što svi znamo, vrijeme je relativno, postoji duž više osi u istom trenutku. Dakle, postoje tri vremenski ovisna temelja dizajna interakcije:
Tempo
Dizajn interakcije je stvaranje naracije, postupnih promjena u iskustvu pojedinca, a da pritom ostanete unutar granica. Na primjer, ako koristim email klijent, apsolutno ne bih želio uključiti štednjak u trenutku kada pišem pismo.
Narativ ima tempo. To jasno razumijemo kada gledamo filmove. Ako je film dobar, nikad ne gledamo na sat. Tempo je također dio dizajna interakcije, jer ponekad možda gledate na sat ne iz dosade, već zato što želite vidjeti možete li na vrijeme dovršiti proces "interaktivnosti".
Po mom mišljenju, tempo u dizajnu interakcije često je u korelaciji s onim što možemo učiniti u bilo kojem trenutku. U isto vrijeme, nije dovoljno da nešto mogu učiniti, potrebno je i da to mogu učiniti prije nego što prijeđem na sljedeći korak. Na primjer, kada nešto kupujem, mogu ispuniti jedan jako veliki obrazac, gdje su svi podaci o meni i provjeriti sve podatke odjednom, ili mogu provjeriti podatke u dijelovima, dijeleći proces provjere na nekoliko.
Budući da je ukupna duljina polja ista, vrijeme za popunjavanje također bi trebalo biti približno isto u svakom slučaju, ali će smisao tempa biti drugačiji u svakom dizajnu. Općenito, jedan veliki oblik je učinkovitiji, a podijeljen na dijelove lakše je rukovati.
Reakcija
Najjednostavniji način definiranja vremena u dizajnu interakcije je "vrijeme reakcije". Koliko je vremena potrebno da sustav odgovori na događaj? To se događa kada vidimo da se kursor pretvara u pješčani sat ili u traku napretka koja sada govori i čekamo da nam sustav odgovori, ali druga vremena reakcije također su važna.
Radnja koja se odvija u stvarnom vremenu (sinkrono) povezana je s trenutnim trenutkom, dok asinkrona radnja gubi tu vezu. Budući da su neki sustavi vremenski osjetljivi, morate znati kako uzeti u obzir razlike između ovih vrsta odgovora.
Kontekst
Svaki osnovni element, poput vremena, mora imati podelement – “kontekst”. U našem slučaju, interaktivnost tečaja za ljude, to znači da ne možemo uzeti u obzir dizajn sam po sebi. Na primjer, kada kažemo "vrijeme", ne možemo dizajnirati aplikaciju bez razumijevanja koliko dugo osoba može provesti izravno kontaktirajući sustav.
Alan Cooper i Robert Reimann u knjizi O licu 2.0 6 govore o vremenskom kontekstu kao principu “pozicije”. Evo četiri pozicije:
Metafora
Metafora je književno sredstvo u kojem se jedna dobro shvaćena pojava ili pojam koristi za objašnjenje drugog pojma koji je teže razumjeti ili ga je teško objasniti na drugi način. Virtualna priroda računala zahtijeva pronalaženje "materijalnih" metafora kako bi se ljudima objasnile sve te nejasne stvari. Kvaliteta i emocionalna percepcija vašeg proizvoda izravno ovisi o vrsti i broju metafora koje koristite.
Najočitiji primjer metafore je kanta za smeće ili kanta za smeće (u operativnom sustavu na vašem računalu). Ideja je da se vaše datoteke nalaze u virtualnoj "kanti" ili "kanti za smeće", pa ako pogriješite, možete kopati (ups!) i vratiti ih u izvorni oblik. I naravno, uvijek možete "isprazniti kantu" tako da sadržaj učinite nepovratnim. Metafora dobro funkcionira za sve tipove ljudi jer se precizno i fleksibilno povezuje sa stvarnošću.
Sve se metafore ne mogu obrnuti. Na primjer, pokušali smo upotrijebiti izraz "ukloni" da brzo objasnimo kako nešto dodati u kantu ili kantu za smeće. Ali ne možemo nešto staviti u pravu kantu za smeće ili kantu za smeće, zar ne?
Ali ponekad je metafora predaleka. Tada nam omogućuje da proširimo granice svojih maštovitih sposobnosti. Ako imam bilježnicu, ormarić za dokumente, poštanski sandučić, kalendar i slično za praktičan rad na svom ekranu, mogu pozivati svoje kartice predmeta, koristiti bilježnicu, ostavljati svoje poruke u poštanskom sandučiću i označavati sastanke na kalendaru, zar ne?
Ali u isto vrijeme, metafore bolje postižu svoj cilj ako su malo netočne, a korisnik mora popuniti prazninu prema vlastitom razumijevanju teme. Tako smo, na primjer, prilagodili metafore radne površine našim modernim računalima.
Dizajner interakcije mora postići ovu ravnotežu pažljivo koristeći metafore svojih prethodnika i nadograđujući ih, sve dok izvorna metafora (možda općeprihvaćena) može odoljeti novim trendovima.
Apstrakcija
Djelujući u tandemu s metaforom, apstrakcija se više odnosi na fizičku i mentalnu aktivnost koja je neophodna za odvijanje interaktivnosti. Prvi put sam počeo razmišljati o apstrakciji kada sam pročitao članak Jonasa Lowgrena 7 , o onome što je označio pojmom “plastičnost”. Nakon što sam pročitao ovaj članak i nekoliko puta upotrijebio ovaj izraz u razgovorima i raspravama, odjednom sam shvatio da je Jonas zapravo govorio o tome kako je apstrakcija u sučelju prikaz proizvoda.
Uglavnom, sve što vidimo u računalu u početku je apstrakcija, budući da imamo dva primarna sučelja za točku unosa - miš i tipkovnicu. Neki zapravo postavljaju monitor unutar posebne vrste pokazivačkog uređaja i snižavaju razinu apstrakcije za neku vrstu interaktivnosti, uglavnom za crtanje. Međutim, većina nas koristi tipke, pokazivanje, klikanje i pomicanje miša po zaslonu.
Usredotočimo se na uzgoj miševa. Gledamo u monitor na kojem se kursor (u obliku ikone) pomiče u skladu s pokretima miša. Ne gledajući u miš (obično), pomičemo ga, au skladu sa zadanim smjerom pomiče se i ikona na ekranu (obično strelica). Super, idemo poredati. Desno i lijevo funkcionira kako se čini, ali pomicanje miša "oddalje" pomiče kursor prema gore, a "povlačenje" pomiče kursor prema dolje po zaslonu. Sjajna prilika za metaforu za koncept perspektive.
Kada ikonu dovedemo do cilja, kliknemo na tipku miša. Ovo je najviša razina apstrakcije. Miš, monitor i procesor rade usklađeno i stvaraju niz efekata kojima smo povezani na ova tri uređaja. Ali ta je veza vrlo, vrlo apstraktna i mora se proučavati.
Ponašanje miša uključuje različite razine apstrakcije. Moji favoriti za usporedbu su Google Maps i MapQuest. U Google kartama, klikom na tipku miša i pomicanjem ruke mogu pomaknuti središte područja karte. Vrijeme reakcije je vrlo brzo, ali vrsta pokreta - pomicanje ruke kao da pomičem komad papira u snopu svjetla - manje je apstraktna nego u MapQuestu, gdje jednostavno kliknem na okvir ili kartu (postavljajući odgovarajuće način rada). Mogli biste reći da je klikanje brže (manje vještina), ali je apstraktnije, vjerojatno manje zabavno i definitivno manje precizno. Sve to čini rad s Google kartama (i njihovim imitatorima) ugodnijim i interaktivnijim.
Sustavi postaju sve složeniji i sve više integrirani u naše živote. Mnogi sustavi su postali potpuno apstraktni i to nije uvijek dobro kada složenost povećava apstraktnost informacija. Svatko od nas se prije ili kasnije susreo sa ekranima osjetljivim na pritisak. Ovo je naglo smanjenje razine apstrakcije pri interakciji s računalnim uređajima.
Neke nove i popularne tehnologije postavljaju izazove za novi val dizajnera interakcije... Širenje svijeta prostornog pokazivanja, RFID-a i drugih sličnih uređaja pruža skok u apstrakciji, jer jednostavno ne postoji sučelje za izravnu interakciju s takvim uređajima. Za njih je jednostavno nemoguće pronaći jednostavne, učinkovite metafore koje bi korisnicima dale razumijevanje kako takvi uređaji rade, poput metafora koje smo pronašli za miša.
Negativni prostor
Sve “prave” dizajnerske discipline imaju koncept forme negativnog prostora. U arhitekturi i industrijskom dizajnu to su šupljine ili prostori između masa. U grafičkom dizajnu, to je "bijeli prostor" bez boja, linija ili oblika - poput bijelih prostora na ispisanom komadu papira. Dizajn zvuka koristi tišinu, dizajn svjetla koristi tamu.
Dakle, što je poricanje interaktivnosti?
Mnogo je mjesta gdje “nešto” može nedostajati, točnije, ima mnogo slojeva. Možemo li govoriti samo o djelovanju proizvoda? O našim postupcima? O razmaku između akcijskih dijelova?
Pauza– Vrlo jasan koncept vremena kada se ne izvode nikakve radnje vezane uz interaktivnost. Dizajn interakcije često pokušava popuniti te praznine, ali možda su te praznine korisne.
Stani i razmisli– Što učiniti ako nema odgovora sustava? Razmislite o tome što je jedan student na Švedskom institutu za interaktivnost napravio i osmislio "misaonu loptu". Ako ne razmišljaš dovoljno, lopta se kotrlja sve dalje i dalje.
Neaktivnost– Ne poduzimati ništa, proizvod ne reagira na akciju, možda zbog svoje neispravnosti. To nije isto što i stanka, budući da je u ovom slučaju neaktivnost reakcija na radnju, a ne zaustavljanje akcije.
Miješanje u interaktivnosti
Za razliku od drugih disciplina formativnog dizajna, dizajn interakcije je vrlo neuredan jer zahtijeva druge discipline za izgradnju interakcija. Iz tog je razloga dizajn interakcije sličniji koreografiji. 8 ili snimanje filma nego s glazbom ili krojenjem kostima. Gore navedeni ključni elementi prikladni su samo za dizajn interakcije ili su redefinirani isključivo za njega.
Na primjer, korištenje boje kao estetskog alata poboljšava ili umanjuje razinu interaktivnosti. Općenito, u većini slučajeva potrebna je informacijska arhitektura za pripremu informacija prije nego što se može stvoriti interaktivnost.
Na kraju krajeva, dizajn interakcije je koreografija ili orkestralni aranžman drugih formativnih tipova dizajna za stvaranje međusobno povezanog dijaloga između ljudi i proizvoda i sustava oko nas.
4 Kao što je prikazano u ovoj nedavnoj knjizi: Hannah, Gail Greet, Elementi dizajna: Rowena Reed Kostellow i struktura vizualnih odnosa , New York: Princeton Architectural Press, 2002.
8 Heller, David (NKA Malouf, David), “Estetika i dizajn interakcije: neke preliminarne misli.” (Potrebno članstvo u ACM-u) , Interakcije 12:5 (rujan-listopad 2005.): 48-50.
U pravilu, za poticanje osobe koja koristi proizvod, uslugu, sustav, potrebna je mogućnost davanja odgovora. Ovaj odgovor treba cijeniti, jasno komunicirati i, u većini slučajeva, dati jasan i polupredvidljiv odgovor. I onda radi.
Ovo je osnovna definicija Interakcijskog dizajna (IxD), koja objedinjuje opće trendove definicija koje je dao renomirani dizajner Dan Saffer 1 ) i Robert Reimann 2 ), kao i Udruga za dizajn interakcije 3 ).
Također je vrlo važno napomenuti da je dizajn interakcije potpuno drugačiji koncept od ostalih vrsta dizajna. Ovo nije informacijska arhitektura ili industrijski dizajn. To također nije vrsta korisničkog sučelja. Dizajn interakcije nije nikakav oblik ili struktura, već nešto više efemerno - radi se više o zašto i kada, a ne o tome što i kako.
Za bilo koju vrstu dizajna, prvi prioritet je formulirati ono što se zove osnove odnosno osnovnih elemenata. Stvaranje takvih semantičkih koncepata osigurava:
- bolju komunikaciju među sudionicima
- stvaranje zajedničkih estetskih koncepata
- najbolji alati za učenje
- područje za istraživanje
Što su temelji?
Moje prvo upoznavanje s "temeljima" bilo je tijekom programa industrijskog dizajna na Pratt institutu u Brooklynu, New York. Program je kreirala Roweena Reed Kostellow na temelju njezine obrazovne temeljne filozofije (za više informacija pogledajte "Elementi dizajna" Gail Greet Hannah - Elementi dizajna Gail Pozdravi Hannah 4 ).
Prema Costellowu, šest je elemenata koji čine temelje industrijskog dizajna: linija, osvjetljenje i boja, prostor, volumen (dimenzije), negativni prostor (pozadina) i tekstura (površina, tekstura). Miješanje i eksperimentiranje s ovim elementima srce je dizajna 3D oblika. Studenti Instituta Pratt svladali su te osnove tijekom jednogodišnjeg tečaja. Morali su definirati granice i ovisnosti raspravljajući o apstrakcijama i stvarnim projektima.
Budući da nisam jedina osoba koja je razmišljala o ovim stvarima, slobodno je pretpostaviti da svi o tome razmišljamo drugačije. Na primjer, Dan Saffer u svojoj knjizi Designing Interactivity posvećuje veliko poglavlje u kojem opisuje elemente dizajna interakcije: vrijeme, pokret, prostor, izgled, teksturu i zvuk. Elementi Den-a raspoređeni su prema tome kako ih mogu pozvati na obrazac za stvaranje interaktivnosti, a ne prema tome koji će mi oblik interaktivnosti biti dostupan ili ne, osim možda s vremenom.
Ako su to doista temelji dizajna interakcije, moraju biti potpuno apstrahirani od forme i nemaju fizičkih atributa.
Temelji dizajna interakcije
Vrijeme
"Vrijeme" razlikuje interaktivni dizajn od ostalih vrsta. Ovo je ljuska naših koncepata interaktivnosti.
Ali vrijeme nije jedina osnova za dizajn interakcije. Postoje mnogi međusobno povezani aspekti manipulacije vremenom. A kao što svi znamo, vrijeme je relativno, postoji duž više osi u istom trenutku. Dakle, postoje tri vremenski ovisna temelja dizajna interakcije:
Tempo
Dizajn interakcije je stvaranje naracije, postupnih promjena u iskustvu pojedinca, a da pritom ostanete unutar granica. Na primjer, ako koristim email klijent, apsolutno ne bih želio uključiti štednjak u trenutku kada pišem pismo.
Narativ ima tempo. To jasno razumijemo kada gledamo filmove. Ako je film dobar, nikad ne gledamo na sat. Tempo je također dio dizajna interakcije, jer ponekad možda gledate na sat ne iz dosade, već zato što želite vidjeti možete li na vrijeme dovršiti proces "interaktivnosti".
Po mom mišljenju, tempo u dizajnu interakcije često je u korelaciji s onim što možemo učiniti u bilo kojem trenutku. U isto vrijeme, nije dovoljno da nešto mogu učiniti, potrebno je i da to mogu učiniti prije nego što prijeđem na sljedeći korak. Na primjer, kada nešto kupujem, mogu ispuniti jedan jako veliki obrazac, gdje su svi podaci o meni i provjeriti sve podatke odjednom, ili mogu provjeriti podatke u dijelovima, dijeleći proces provjere na nekoliko.
Budući da je ukupna duljina polja ista, vrijeme za popunjavanje također bi trebalo biti približno isto u svakom slučaju, ali će smisao tempa biti drugačiji u svakom dizajnu. Općenito, jedan veliki oblik je učinkovitiji, a podijeljen na dijelove lakše je rukovati.
Reakcija
Najjednostavniji način definiranja vremena u dizajnu interakcije je "vrijeme reakcije". Koliko je vremena potrebno da sustav odgovori na događaj? To se događa kada vidimo da se kursor pretvara u pješčani sat ili u traku napretka koja sada govori i čekamo da nam sustav odgovori, ali druga vremena reakcije također su važna.
Radnja koja se odvija u stvarnom vremenu (sinkrono) povezana je s trenutnim trenutkom, dok asinkrona radnja gubi tu vezu. Budući da su neki sustavi vremenski osjetljivi, morate znati kako uzeti u obzir razlike između ovih vrsta odgovora.
Kontekst
Svaki osnovni element, poput vremena, mora imati podelement – “kontekst”. U našem slučaju, interaktivnost tečaja za ljude, to znači da ne možemo uzeti u obzir dizajn sam po sebi. Na primjer, kada kažemo "vrijeme", ne možemo dizajnirati aplikaciju bez razumijevanja koliko dugo osoba može provesti izravno kontaktirajući sustav.
Metafora
Metafora je književno sredstvo u kojem se jedna dobro shvaćena pojava ili pojam koristi za objašnjenje drugog pojma koji je teže razumjeti ili ga je teško objasniti na drugi način. Virtualna priroda računala zahtijeva pronalaženje "materijalnih" metafora kako bi se ljudima objasnile sve te nejasne stvari. Kvaliteta i emocionalna percepcija vašeg proizvoda izravno ovisi o vrsti i broju metafora koje koristite.
Najočitiji primjer metafore je kanta za smeće ili kanta za smeće (u operativnom sustavu na vašem računalu). Ideja je da se vaše datoteke nalaze u virtualnoj "kanti" ili "kanti za smeće", pa ako pogriješite, možete kopati (ups!) i vratiti ih u izvorni oblik. I naravno, uvijek možete "isprazniti kantu" tako da sadržaj učinite nepovratnim. Metafora dobro funkcionira za sve tipove ljudi jer se precizno i fleksibilno povezuje sa stvarnošću.
Sve se metafore ne mogu obrnuti. Na primjer, pokušali smo upotrijebiti izraz "ukloni" da brzo objasnimo kako nešto dodati u kantu ili kantu za smeće. Ali ne možemo nešto staviti u pravu kantu za smeće ili kantu za smeće, zar ne?
Ali ponekad je metafora predaleka. Tada nam omogućuje da proširimo granice svojih maštovitih sposobnosti. Ako imam bilježnicu, ormarić za dokumente, poštanski sandučić, kalendar i slično za praktičan rad na svom ekranu, mogu pozivati svoje kartice predmeta, koristiti bilježnicu, ostavljati svoje poruke u poštanskom sandučiću i označavati sastanke na kalendaru, zar ne?
Ali u isto vrijeme, metafore bolje postižu svoj cilj ako su malo netočne, a korisnik mora popuniti prazninu prema vlastitom razumijevanju teme. Tako smo, na primjer, prilagodili metafore radne površine našim modernim računalima.
Dizajner interakcije mora postići ovu ravnotežu pažljivo koristeći metafore svojih prethodnika i nadograđujući ih, sve dok izvorna metafora (možda općeprihvaćena) može odoljeti novim trendovima.
Apstrakcija
Djelujući u tandemu s metaforom, apstrakcija se više odnosi na fizičku i mentalnu aktivnost koja je neophodna za odvijanje interaktivnosti. Prvi put sam počeo razmišljati o apstrakciji kada sam pročitao članak Jonasa Lowgrena 7 , o onome što je označio pojmom “plastičnost”. Nakon što sam pročitao ovaj članak i nekoliko puta upotrijebio ovaj izraz u razgovorima i raspravama, odjednom sam shvatio da je Jonas zapravo govorio o tome kako je apstrakcija u sučelju prikaz proizvoda.
Uglavnom, sve što vidimo u računalu u početku je apstrakcija, budući da imamo dva primarna sučelja za točku unosa - miš i tipkovnicu. Neki zapravo postavljaju monitor unutar posebne vrste pokazivačkog uređaja i snižavaju razinu apstrakcije za neku vrstu interaktivnosti, uglavnom za crtanje. Međutim, većina nas koristi tipke, pokazivanje, klikanje i pomicanje miša po zaslonu.
Usredotočimo se na uzgoj miševa. Gledamo u monitor na kojem se kursor (u obliku ikone) pomiče u skladu s pokretima miša. Ne gledajući u miš (obično), pomičemo ga, au skladu sa zadanim smjerom pomiče se i ikona na ekranu (obično strelica). Super, idemo poredati. Desno i lijevo funkcionira kako se čini, ali pomicanje miša "oddalje" pomiče kursor prema gore, a "povlačenje" pomiče kursor prema dolje po zaslonu. Sjajna prilika za metaforu za koncept perspektive.
Kada ikonu dovedemo do cilja, kliknemo na tipku miša. Ovo je najviša razina apstrakcije. Miš, monitor i procesor rade usklađeno i stvaraju niz efekata kojima smo povezani na ova tri uređaja. Ali ta je veza vrlo, vrlo apstraktna i mora se proučavati.
Ponašanje miša uključuje različite razine apstrakcije. Moji favoriti za usporedbu su Google Maps i MapQuest. U Google kartama, klikom na tipku miša i pomicanjem ruke mogu pomaknuti središte područja karte. Vrijeme reakcije je vrlo brzo, ali vrsta pokreta - pomicanje ruke kao da pomičem komad papira u snopu svjetla - manje je apstraktna nego u MapQuestu, gdje jednostavno kliknem na okvir ili kartu (postavljajući odgovarajuće način rada). Mogli biste reći da je klikanje brže (manje vještina), ali je apstraktnije, vjerojatno manje zabavno i definitivno manje precizno. Sve to čini rad s Google kartama (i njihovim imitatorima) ugodnijim i interaktivnijim.
Sustavi postaju sve složeniji i sve više integrirani u naše živote. Mnogi sustavi su postali potpuno apstraktni i to nije uvijek dobro kada složenost povećava apstraktnost informacija. Svatko od nas se prije ili kasnije susreo sa ekranima osjetljivim na pritisak. Ovo je naglo smanjenje razine apstrakcije pri interakciji s računalnim uređajima.
Neke nove i popularne tehnologije postavljaju izazove za novi val dizajnera interakcije... Širenje svijeta prostornog pokazivanja, RFID-a i drugih sličnih uređaja pruža skok u apstrakciji, jer jednostavno ne postoji sučelje za izravnu interakciju s takvim uređajima. Za njih je jednostavno nemoguće pronaći jednostavne, učinkovite metafore koje bi korisnicima dale razumijevanje kako takvi uređaji rade, poput metafora koje smo pronašli za miša.
Negativni prostor
Sve “prave” dizajnerske discipline imaju koncept forme negativnog prostora. U arhitekturi i industrijskom dizajnu to su šupljine ili prostori između masa. U grafičkom dizajnu, to je "bijeli prostor" bez boja, linija ili oblika - poput bijelih prostora na ispisanom komadu papira. Dizajn zvuka koristi tišinu, dizajn svjetla koristi tamu.
Dakle, što je poricanje interaktivnosti?
Mnogo je mjesta gdje “nešto” može nedostajati, točnije, ima mnogo slojeva. Možemo li govoriti samo o djelovanju proizvoda? O našim postupcima? O razmaku između akcijskih dijelova?
Pauza– Vrlo jasan koncept vremena kada se ne izvode nikakve radnje vezane uz interaktivnost. Dizajn interakcije često pokušava popuniti te praznine, ali možda su te praznine korisne.
Stani i razmisli– Što učiniti ako nema odgovora sustava? Razmislite o tome što je jedan student na Švedskom institutu za interaktivnost napravio i osmislio "misaonu loptu". Ako ne razmišljaš dovoljno, lopta se kotrlja sve dalje i dalje.
Neaktivnost– Ne poduzimati ništa, proizvod ne reagira na akciju, možda zbog svoje neispravnosti. To nije isto što i stanka, budući da je u ovom slučaju neaktivnost reakcija na radnju, a ne zaustavljanje akcije.
Miješanje u interaktivnosti
Za razliku od drugih disciplina formativnog dizajna, dizajn interakcije je vrlo neuredan jer zahtijeva druge discipline za izgradnju interakcija. Iz tog je razloga dizajn interakcije sličniji koreografiji. 8 ili snimanje filma nego s glazbom ili krojenjem kostima. Gore navedeni ključni elementi prikladni su samo za dizajn interakcije ili su redefinirani isključivo za njega.
Na primjer, korištenje boje kao estetskog alata poboljšava ili umanjuje razinu interaktivnosti. Općenito, u većini slučajeva potrebna je informacijska arhitektura za pripremu informacija prije nego što se može stvoriti interaktivnost.
Na kraju krajeva, dizajn interakcije je koreografija ili orkestralni aranžman drugih formativnih tipova dizajna za stvaranje međusobno povezanog dijaloga između ljudi i proizvoda i sustava oko nas.
4 Kao što je prikazano u ovoj nedavnoj knjizi: Hannah, Gail Greet, Elementi dizajna: Rowena Reed Kostellow i struktura vizualnih odnosa , New York: Princeton Architectural Press, 2002.
8 Heller, David (NKA Malouf, David), “Estetika i dizajn interakcije: neke preliminarne misli.” (Potrebno članstvo u ACM-u) , Interakcije 12:5 (rujan-listopad 2005.): 48-50.
Od autora: Prošla godina donijela je val novih tehnika, stilova i trendova, od kojih se većina pojavila kako bi zadovoljila potrebe rastućeg tržišta mobilnih uređaja. Tehnološki napredak promijenio je očekivanja korisnika u pogledu estetike i funkcionalnosti web stranica i aplikacija. U ovom ćemo članku raspravljati o interaktivnom dizajnu web stranice, točnije o 5 najboljih trendova 2015.
Razdvojimo nekoliko uobičajenih taktika opisanih u knjizi Najbolje prakse dizajna interakcije.
Kadriranje– Način na koji prezentirate određene informacije. Umjesto da pokazujete da će plaćanje karticom koštati više, možete ga uključiti u ukupni trošak i prikazati druge načine plaćanja kao popust.
Sidrenje– Ideja je skuplji proizvod izložiti više, a samim time i njegovu cijenu iznad standarda. U ovom će slučaju jeftiniji proizvodi izgledati puno privlačnije. Metoda je posebno učinkovita u kombinaciji s popustima, kada korisnik jasno vidi koliko može uštedjeti.
Strah od gubitka– Prema rezultatima istraživanja, pokazalo se da je instinkt kupca da izbjegne bol mnogo jači od instinkta zadovoljstva kupnje. Postavljanje pitanja “Ako se ne registrirate, izgubit ćete 10 USD” mnogo je učinkovitije od “Ako se registrirate, uštedjet ćete 10 USD.”
Nedostatak– Što je proizvod manji, to je veća potražnja za njim. Ako pomno pogledate Groupon i Amazon, primijetit ćete kako ističu nedostatak proizvoda za poticanje konverzija.
Nevidljivo sučelje
Dobar dizajn ne privlači pažnju na sebe. Ovaj dizajn radi u pozadini, dajući korisnicima osjećaj da je sve što su postigli rezultat samo njihovog truda. U nastavku sam predstavio nekoliko korisnih načina za poboljšanje korisnikove sposobnosti interakcije sa web mjestom:
Smanjite i pojednostavite korake – Što manje koraka korisnik poduzima da postigne cilj, to je vaše sučelje uspješnije. Koraci su možda mali, ali čak i ako korisnika poštedite jednog dodatnog klika, on će to cijeniti. Samo pogledajte kako je Uber (snimka zaslona dolje) pretvorio proces od više koraka dodavanja podataka o kreditnoj kartici u jedan jednostavan korak.
Jasna vizualna komunikacija – Držite se dosljedne vizualne teme i dosljednih, jasnih ikona kako biste izbjegli zabunu korisnika (tj. znači li ikona pošte popis poruka ili inbox).
Sučelje koje oprašta – Predvidite uobičajene pogreške korisnika i postavite odgovarajuće sigurnosne mjere. Ove mjere uključuju otkazivanje, automatsko spremanje, unos podataka u više formata i povratne informacije s objašnjenjem.
Pratite kretanje korisnika – Najbolji način za prepoznavanje redundancije sučelja i nepotrebnih koraka je vizualizacija kretanja korisnika po stranici. Koristeći svoju "mapu pipaka" kao primjer, Jessica Downey stvara vizualnu kartu koja će vam pomoći da pravilno organizirate korake. Ryan Singer iz Basecampa smislio je sličnu, ali bržu metodu.
Značenje razmaka
Knjiga "User Interface Best Practices in Web Design" kaže da bijeli prostor nije uvijek dosadan. Razmak treba koristiti kao aktivni dio dizajna. U smislu interaktivnog web dizajna, bijeli prostor je stanka između riječi i rečenica. Prepoznavanje i obrada elemenata na ekranu brzo postaje besmislena bez kratke pauze.
U nastavku sam sakupio nekoliko savjeta o razmacima koje treba imati na umu:
Bijeli prostor stvara hijerarhiju – Što je više praznog prostora oko objekta, to on privlači više pažnje. Sam ovaj trik može pomoći dizajnerima da utječu na vizualnu hijerarhiju onoga što prvo žele pogledati.
Suvremeni trendovi i pristupi u web razvoju
Naučite algoritam za brzi rast od nule u izradi web stranice
Minimalizam dodaje sofisticiranost – smanjenjem broja elemenata i povećanjem bijelog prostora, svojoj web stranici dajete atmosferu elegancije i luksuza. Ovakav pristup se često može naći na web stranicama modnih marki.
Razmak utječe na čitljivost – razmak nije samo za pozadinu; ako ga smanjite i pogledate dizajn na atomskoj razini, razmak može poboljšati ili pokvariti čitljivost teksta. U našem slučaju jasnoća znači lakoću čitanja složenih slova u riječi. Slijedite ove savjete za razmak između redaka/slova kako biste bili sigurni da je vaš tekst čitljiv.
Tekst sučelja također je dio dizajna
Razvijajući analogiju korisničke interakcije kao dijaloga, možemo reći da sučelje mora pažljivo birati riječi. Sve na zaslonu aplikacije ili web stranice smatra se sučeljem, a tekst nije iznimka. Ako se značenje napisanih riječi ne poklapa sa svrhom stranice, ni najbolji font neće pomoći.
Neće pomoći ni to što vaš glavni tekst može poprimiti različite oblike i veličine. Obično se sav tekst može podijeliti i promijeniti u kategorije. Pozdravne riječi mogu biti ležerne ili prijateljske, ali tekst poziva na akciju na istoj stranici trebao bi biti hrabriji i sažetiji. Bez obzira na svrhu vašeg teksta, sljedeći savjeti mogu pomoći prenijeti pravu poruku korisniku:
Upoznajte svoju publiku – Ovaj savjet je star koliko i vrijeme. Upoznajte svoje korisnike i ono što žele da im kažete. Na primjer, na stranicama za djecu riječi ili fraze mogu se ponavljati kako bi se privukla pozornost, dok se na pravnim stranicama ovaj pristup obeshrabruje.
Odredite kontekst korištenja vaše web stranice – pišete li za web stranicu ili aplikaciju? Početna ili stranica s opisom? Baš kao što ste promijenili glavni tekst za publiku, promijenite mjesto za okruženje. Ako je vaša aplikacija dizajnirana za korištenje u prometnim ili ometajućim situacijama (Waze tijekom vožnje), skraćivanje teksta će ubrzati obradu informacija.
Pokažite svoju osobnost – Vaš stil pisanja pridonosi općem raspoloženju i atmosferi stranice jednako kao i jake slike ili glatka animacija. Potrebno je razumjeti kakve emocije izazivaju određene boje. Tekst ne smije biti u sukobu s vizualnom interakcijom.
Sjajan dizajn
Posljednje, ali ne manje važno, dobar dizajn interakcije uvijek predstavlja zadovoljstvo. Emocionalna povezanost s korisnicima najpouzdaniji je način stjecanja povjerenja. Kad je u pitanju dizajn, srce je jednako važno kao i um.
Koristeći MailChimp kao primjer, prozor za potvrdu je najvažniji dio privlačenja korisnika putem biltena e-pošte. Smiješna slika i smiješni tekst samo povećavaju užitak korištenja stranice (da ne spominjemo činjenicu da ovaj pristup smanjuje iritaciju masovnog slanja pošte). U nastavku sam sakupio nekoliko brzih savjeta:
Nemojte žrtvovati upotrebljivost – Zamislite odličan dizajn kao šlag na torti: višnja dodaje okus kolaču, ali ne dodaje ništa sama po sebi. Nikada ne žrtvujte dizajn na račun jasnoće.
Odvojite se – kao što je rekao Ben Rowe, vaš prvi prioritet je stvoriti "smisleno zadovoljstvo". Kako vaša web stranica ili aplikacija može dovesti ljude u stanje u kojem nema ograničenja za ono što mogu učiniti?
Istraživanje – korisnici vole iznenađenja. Ispravne mikrointerakcije (kao što je animacija koja nestaje kada korisnik dovrši zadatak) mogu prilično uobičajene zadatke učiniti emocionalno korisnijima. Slika u nastavku pokazuje kako čak i jednostavna animacija izbornika koja se postepeno pojavljuje dodaje zabavu radnjama koje se ponavljaju.
