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. Ovo može biti zato što je interaktivnost jedan od novijih članova porodice korisničkog interfejsa. Vizuelni dizajn i dizajn interakcije sežu do ranih grafičkih interfejsa, ali interaktivni dizajn je morao da sačeka moderniji hardver da glatko renderuje animacije. Postavljanje interaktivnosti korisničkog interfejsa na tradicionalnu animaciju doprinosi nesporazumu. Cijeli život se može provesti savladavajući 12 osnovnih principa Disneyja, znači li to da je interaktivnost korisničkog sučelja također teška? Ljudi mi često govore da je dizajn interaktivnosti težak ili da je odabir pravih vrijednosti dvosmislen. Tvrdim da u oblastima najvažnijim za korisnički interfejs, interaktivni dizajn može i treba da bude jednostavan.
Gdje početi?
Glavna svrha interaktivnog dizajna je da pomogne korisnicima da se kreću kroz aplikaciju ilustrirajući odnos između elemenata korisničkog interfejsa. Interaktivni dizajn također ima mogućnost dodavanja lika u aplikaciju s animiranim ikonama, logotipima i ilustracijama; međutim, upotrebljivost bi trebala imati prednost nad ekspresivnošću. Prije demonstriranja vještina animacije likova, počnimo kreiranjem osnovne interaktivnosti, fokusirajući se na navigacijske prijelaze.Obrasci tranzicije
Prilikom dizajniranja navigacijske tranzicije, jednostavnost i konzistentnost su ključni. Za to ćemo izabrati dvije vrste pokreta:- Prijelazi bazirani na kontejnerima
- Prijelazi bez kontejnera.
Prijelazi bazirani na kontejnerima
Elementi kao što su tekst, ikone i slike grupirani su unutar kontejnera
Ako kompozicija uključuje kontejner, kao što je dugme, kartica ili lista, tada se dizajn prelaza zasniva na animaciji kontejnera. Kontejneri se obično lako mogu otkriti na osnovu njihovih vidljivih granica, ali zapamtite da mogu biti i nevidljivi prije početka navigacije, poput stavke liste bez razdvajanja. Ovaj predložak se rastavlja u tri koraka:
* Animacija je usporena da bi se ilustrovalo pojavljivanje i nestanak elemenata
Primjena ovog uzorka na sve prijelaze kontejnera uspostavlja dosljedan stil. Takođe čini vezu između početne i krajnje kompozicije jasnom jer su povezane animiranim kontejnerom. Kako bismo demonstrirali fleksibilnost ovog uzorka, ovdje je prikazano pet različitih kompozicija:
* Animacija je usporena da bi se ilustrovalo kako su početna i krajnja kompozicija povezane od strane kontejnera
Neki kontejneri se jednostavno pojavljuju iza ekrana koristeći standardno omekšavanje. Njegov smjer kretanja određen je lokacijom komponente s kojom je povezana. Na primjer, klikom na ikonu navigacijskog menija u gornjem lijevom kutu pomaknut će se kontejner ulijevo.
Ako je kontejner izvan ekrana, blijedi i zumira. Umjesto animacije na 0%, počinje animirati na 95% kako bi se izbjeglo pretjerano fokusiranje na prijelaz. Skalirana animacija koristi ublažavanje, odnosno počinje maksimalnom brzinom i lagano usporava. Da bi izblijedio, kontejner jednostavno nestaje bez ljuštenja. Završetak animacije trebao bi biti manje izražen od početka kako bi se pažnja korisnika usmjerila na novi sadržaj.
* Animacija je usporena da bi se ilustrovalo kako se kontejneri mogu pojaviti blijeđenjem elementa (skaliranje, izblijedivanje i nestajanje)
Prijelazi bez kontejnera
Neke kompozicije nemaju kontejner na kojem bi se bazirao prijelaz, kao što je klik na ikonu u donjoj navigaciji koja korisnika vodi na novo odredište. U ovim slučajevima koristi se obrazac u dva koraka:- Kompozicija počinje fade in, završava se fade in.
- Kako konačna kompozicija blijedi, ona se također suptilno smanjuje korištenjem elemenata za omekšavanje. Opet, skaliranje se primjenjuje samo kada se čini da kompozicija naglašava novi sadržaj u odnosu na stari.
* Animacija je usporena kako bi se ilustrovalo kako se prijelazi dešavaju bez kontejnera koristeći skaliranje, bledeći u i van elemenata
Ako početak i kraj kompozicije imaju jasnu prostornu ili faznu vezu, tada se kretanje zglobova može koristiti za njegovo poboljšanje. Na primjer, kada se krećete kroz komponentu koraka, početak i kraj kompozicije se pomiču okomito dok se blede ili nestaju. Ovo pojačava njihov vertikalni raspored. Kada pritisnete sljedeće dugme za pregled daljnjeg materijala, kompozicija se pomiče horizontalno. Kretanje s lijeva na desno povećava razumijevanje naknadnog događaja. Kolaborativni pokret koristi elemente standardnog omekšavanja.
* Animacija je usporena da bi se ilustrovalo kako se događa vertikalno i horizontalno kretanje
Najbolje prakse
Što jednostavnije to bolje
S obzirom na njihovu visoku učestalost i bliske veze s upotrebljivošću, prijelazi za navigaciju bi općenito trebali podržavati funkcionalnost u smislu stila. To ne znači da ih nikada ne treba stilizirati, samo se pobrinite da izbor stila opravda brend. Pokret očiju se obično najbolje odlaže 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 upotrebljivijom.
* Animacija je usporena da bi se ilustrovali različiti stilovi pokreta
Odaberite pravo trajanje i omekšavanje
Prijelazi za navigaciju bi trebali koristiti trajanja kojima se daje prioritet funkcionalnosti, budući da su brzi, ali ne dovoljno brzi da postanu dezorijentirajući faktor. Trajanje se bira u zavisnosti od toga koji procenat ekrana zauzima animacija. Budući da navigacijski prijelazi obično zauzimaju većinu ekrana, 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 spor, podesite njegovo trajanje u koracima od 25 ms dok ne dostigne ispravan balans.Olakšavanje opisuje brzinu kojom se animacija ubrzava i usporava. Većina navigacijskih prijelaza koristi standardno omekšavanje elemenata, što je asimetrični tip omekšavanja. To znači da se elementi brzo ubrzavaju, a zatim pažljivo usporavaju kako bi se fokusirali na kraj tranzicije. Ova vrsta omekšavanja daje animacijama prirodan kvalitet jer objekti u stvarnom svijetu ne mogu iznenada početi i prestati da se kreću. Ako se čini da je prijelaz oštar ili robotski, najvjerovatnije je da je simetrično ili linearno omekšavanje odabrano pogrešno.
* Animacija je usporena za ilustraciju, razne vrste omekšavanja
Obrasci i najbolji postupci navedeni u ovom članku dizajnirani su za stvaranje praktičnog i nenametljivog stila kretanja. Ovo je pogodno za većinu aplikacija, međutim neki brendovi mogu zahtijevati intenzivnije oblikovanje. Da biste saznali više o styling motionu, pogledajte naše upute za postavljanje.
Nakon implementacije navigacijskih prijelaza, započinje zadatak dodavanja znaka vašoj aplikaciji. Ovdje jednostavni obrasci ne funkcioniraju, a ovdje možete u potpunosti ostvariti svoje vještine animacije...
Lična animacija može olakšati ozbiljnu grešku
Ako ste zainteresirani da saznate više o mogućnostima kretanja, svakako pročitajte naš
Čemu služi vaša stranica ili aplikacija? Da li je to samo za prikupljanje informacija? Ili kupite jednim klikom i primite isporuku sutra? Ili je glavna stvar brzo pronaći odgovore na potrebna pitanja?
Razmislite o ljudima koji su razvili ovu stranicu ili aplikaciju. Koja je bila njihova svrha?
Pokušali su napraviti web resurs koji bi imao sve zbog čega bi ga ljudi voljeli. Stranica laka za korištenje koja će brzo pružiti informacije koje tražite i pomoći vam da donesete informirane odluke.
UX, ili iskustvo interakcije, obuhvata percepciju i emociju koju softverski proizvod ili usluga izaziva. UX karakteriše jednostavnost upotrebe, pristupačnost i upotrebljivost. O UX-u se često govori u kontekstu elektronskih uređaja, pametnih telefona, računara, softvera ili web stranica. Ali takav koncept nije nov; to je nešto što se ubrzano mijenja pod utjecajem tehnološkog napretka, novih tipova interakcija i potrošačkih trendova.
Korisnici traže munjevito brze načine rješavanja problema, zbog čega je UX izuzetno važan. Uvjerite se da je stranica jasna i laka za razumijevanje za korisnike.
Ako korisnici ne smatraju da je resurs koristan i jednostavan za korištenje, brzo će se odjaviti. Većina korisnika u roku od jedne minute odlučuje da li će zatvoriti stranicu.
U ovom članku ćemo istražiti više o UX industriji koja se razvija, kakve dizajnere unajmljuju komercijalne organizacije i zašto pametan dizajn koristi svakom poslu.
Šta je UX dizajn?
UX dizajn, ili dizajn korisničkog iskustva, je ono što određuje koliko će korisnik biti zadovoljan softverskim proizvodom ili uslugom; ovaj proces uključuje poboljšanja funkcionalnosti, upotrebljivosti i upotrebljivosti. UX dizajn je kreiranje softverskih proizvoda sa promišljenim i relevantnim korisničkim iskustvom. Polje UX dizajna ima gomilu podtema koje treba razmotriti.
1. Interaktivni dizajn
Interaktivni dizajn, ili IxD, je pododjeljak UX dizajna koji definira interakciju između korisnika i proizvoda; cilj ovih interakcija je dobro korisničko iskustvo.
2. Vizuelni dizajn
Vizualni dizajn koristi ilustracije, fotografiju, tipografiju i sheme boja kako bi poboljšao iskustvo krajnjeg korisnika. U vizualnom dizajnu važno je pridržavati se principa dekoracije. To uključuje balans, prostor, kontrast... Boja, oblik, veličina i drugi elementi također utiču na dizajn.
3. Istraživanje korisnika
To je posljednji od građevnih blokova UX dizajna koji kompanije koriste da bi shvatile očekivanja svojih kupaca. Uspješan web projekat služi određenoj svrsi i rješava specifične probleme, pa je važan korak saznati šta je potrošaču potrebno. Bez toga, dizajn se zasniva na nagađanjima i pretpostavkama.
4. Arhitektura informacija
Dizajneri koriste informacijsku arhitekturu za strukturiranje i označavanje sadržaja na specifičan način tako da korisnici mogu lakše pronaći informacije koje žele. Informaciona arhitektura se koristi u web razvoju, razvoju pametnih telefona, aplikacijama i vidi se u mnogim fizičkim objektima. Lakoća upotrebe i pristupačnost su dva glavna aspekta informacione arhitekture.
Za ilustraciju, razmotrite kartu njujorške podzemne željeznice. Inače, ovo je dobar primjer informacijske arhitekture koja pomaže ljudima da od uvjetne tačke "A" dođu do tačke "B". I, kako zvuči postulat Instituta za informacionu arhitekturu, „ako radiš nešto za druge, koristiš informacionu arhitekturu“.
Kompozitni procesi UX dizajna
Postoje tri faze UX dizajna:
1.pretraga ciljne publike
2.razumijevanje ciljeva kompanije - kako takvi ciljevi utiču na korisnika
3.nekonvencionalno razmišljanje
Obično UX dizajn ima pristup usmjeren na korisnika - kreiranje željenog krajnjeg proizvoda u tri koraka.
Lakše - trebali biste uzeti u obzir potrebe onih za koje se dizajn razvija. Mnogo se rješenja koristi za otklanjanje svih vrsta komplikacija i hrapavosti; prototipovi se kreiraju i testiraju na korisnicima.
Na osnovu rezultata rada bira se najbolja od razrađenih opcija. Ako na stvari gledate iz ugla korisnika i dizajnirate na osnovu njegovih preferencija, svima će se svidjeti rezultat.
Principi UX dizajna
Industrija UX dizajna se brzo mijenja, ali osnovni principi su isti. Dizajneri moraju razumjeti šta im je potrebno u smislu vizuelne ravnoteže. Kratkoća i jasnoća su važne nijanse; ovdje primjenjujemo princip - što manje to bolje. Težite intuitivnom dizajnu i, što je još važnije, uzmite u obzir interese i potrebe korisnika.
UX se uglavnom bavi novim tehnologijama, ali u središtu svega su svjetski stari principi koji pomažu dizajnerima da riješe sve vrste problema kroz konzistentnu metodologiju koja se bavi predmetom.
Uzmite u obzir kontekst: Korisnik mora znati gdje se trenutno nalazi. Ne bi trebalo da postoji osećaj preopterećenosti informacijama ili da je izgubljen. Vaš zadatak je da podstaknete i ukažete na pravi smjer.
Budite ljudi: Niko ne voli osjećaj interakcije sa mašinom. Veća je vjerovatnoća da ćete izgraditi povjerenje kada svoju kompaniju pokažete sa ljudske strane.
Dostupnost: Niko ne želi gubiti vrijeme. Uspješan UX dizajn poboljšava navigaciju.
Lakoća: Konzistentnost i jednostavan dizajn su uvijek dobri. Vi gradite odnose s korisnicima kroz user-friendly UX.
Jednostavnost: Nema pogrešnih proračuna ili nepotrebnih opisa. Idi pravo na glavnu stvar.
UX rezultat
Kada je UX projekat završen, dizajner i tim pokazuju klijentu i njihovom timu listu onoga što je urađeno. Potrebno je prikazati proces rada, listu realizovanih ideja.
Ovo je važan dio cjelokupnog procesa. Tako je UX dizajnerima lakše pronaći ono što traže, demonstrirati svoju viziju, objasniti određene preporuke za poboljšanje.
1. Istraživanje korisnika
Potrebe, trendovi i motivacije korisnika otkrivaju se kroz razna istraživanja korisnika. To mogu biti kvantitativni i kvalitativni podaci dobijeni tokom testova, na primjer, uz učešće fokus grupa; detaljan opis procesa registracije, uključivanja i zahtjeva klijentskoj službi. Cilj je da se dobije detaljna analiza šta se nalazi na sajtu, a šta se još može poboljšati - sve ideje se testiraju na stvarnim korisnicima.
Istraživači kreiraju portrete potrošača na osnovu stvarnih podataka o ljudima, što pomaže da se točno odredi tko će komunicirati s web-stranicom ili aplikacijom.
Kroz istraživanje korisnika, dizajneri pronalaze i definiraju svog korisnika.
2. Procjena takmičara
Procjena snaga i slabosti konkurenata je način da proširite vlastitu UX strategiju. Najbolje je djelovati s analitičkim izvještajima koji naglašavaju konkurentska kretanja. Zapravo, ovo je detaljna analiza interaktivnog dizajna konkurenata, lista slabosti, pogrešnih proračuna i propusta, općenito, ono što može postati konkurentska prednost.
3. Interaktivni dizajn
Opis interakcija korisnika može biti u obliku prototipa - to olakšava razumijevanje kako će korisnici obavljati ključne zadatke, pronaći informacije i općenito koristiti proizvod. Opisan je proces traženja informacija i koliko je zgodan razvoj. Prototip bi trebao biti što je moguće pojednostavljen i bliži konačnoj verziji.
4. Arhitektura informacija
IA je proces dobivanja informacija i pretvaranja u probavljivu formu, što je posebno važno za velike stranice. Važno je razumjeti kontekst u kojem će ljudi koristiti dizajn. Krajnji rezultat može biti mapa web-lokacije s opisom alata ili uzorak korisničkog toka koji pokazuje kako se posjetitelji kreću po stranici.
Šta je dizajn korisničkog interfejsa?
Kada je Apple predstavio navigacijsku komponentu Click Wheel za iPod, bila je intuitivna i vrlo funkcionalna — da ne spominjemo vizualno. Ovo je dobar primjer uspješnog korisničkog sučelja ili korisničkog sučelja. UI je način interakcije sa računarima, mašinama, web stranicama, aplikacijama, nosivim uređajima, itd. Dizajn korisničkog sučelja je ono što sve ove stvari čini što jednostavnijim i efikasnijim.
UI vs. UX
UX, korisničko iskustvo, odnosi se na kretanje korisnika na web stranici ili u aplikaciji. UX dizajneri rade na obliku i funkcionalnosti proizvoda ili tehnologije. UI, ili korisničko sučelje, fokusirano je na to kako izgleda i funkcionira vanjska ljuska proizvoda. Područje UI dizajnera su opipljive i vidljive komponente ovog procesa.
Uobičajeni elementi korisničkog sučelja
UX i UI imaju mnogo toga zajedničkog, ali važno je napomenuti ključne razlike između njih. Opet, UI je fokusiran na vanjštinu proizvoda, dok je UX više o tome kako ljudi stupaju u interakciju s web lokacijom ili aplikacijom. Evo najčešćih elemenata korisničkog sučelja o kojima trebate znati kako biste bolje razumjeli razlike:
Informacijske komponente: UI dizajneri koriste informacijske komponente za proširenje tzv. iskustvo čitanja - za prenošenje više informacija. Primeri komponenti informacija uključuju indikatore statusa, obaveštenja i okvire za poruke. Sve ovo služi kao potvrda: korisnik je izvršio određeni zadatak. Ili da obavijesti da je potrebna određena radnja s njegove strane.
Breadcrumbs navigacija
To je dizajnerski alat koji vizualno poboljšava upotrebljivost web stranice.
Ovako ljudi vide svoju lokaciju na web stranici, u njenoj hijerarhijskoj strukturi. Nisu potrebni nikakvi domišljati elementi dizajna, potrebno je samo pokazati u kojem dijelu stranice se korisnik nalazi. Obično se takve veze nalaze na vrhu web stranice internetskih trgovina ili na drugim resursima.
Kontrole unosa: Korisnicima se nudi nekoliko opcija da odgovore na postavljeno pitanje. To mogu biti potvrdni okviri, padajući menii i radio dugmad. Informacije treba da budu koncizne i sažete kako bi se lakše identifikovale potrebe.
Istraživanje iskustva interakcije
Bez istraživanja neće biti moguće saznati o potrebama i preferencijama ljudi. UX istraživanje je pronalaženje onoga što korisnici žele; dobijeni podaci čine osnovu UX dizajna. Kompanije i dizajneri koriste istraživanja kako bi izvukli zaključke o tome šta funkcionira, a što je bolje promijeniti. Postoji nekoliko opcija za UX istraživanje.
Testiranje upotrebljivosti
Cilj ovakvog istraživanja je otkriti koliko je proizvod uspješan; korisnici učestvuju u testiranju. Ovo kompanijama daje stvarne informacije o tome kako ljudi koriste proizvod ili sistem, ili kako taj proizvod ili sistem funkcionišu. Postoje dva glavna načina testiranja.
Testiranje upotrebljivosti na povremenim korisnicima Brz je i jeftin način da kompanije i istraživači dobiju informacije od ljudi koji možda ne znaju za njihov proizvod. Povremeni ljudi koriste proizvod i dijele svoja mišljenja.
Testiranje upotrebljivosti na daljinu omogućava kompanijama da provode istraživanje u okruženju u kojem su korisnici u svom prirodnom okruženju (na primjer, kod kuće ili u kancelariji).
Alati za testiranje upotrebljivosti
Takvi alati vam omogućavaju da saznate mišljenja korisnika, analizirate povratne informacije i napravite određene promjene na osnovu podataka. Ako tražite alat koji će vam pomoći da shvatite koliko je lako koristiti vašu web-lokaciju ili aplikaciju, imate dvije mogućnosti:
Adobe Fireworks CS6 omogućava web dizajnerima da kreiraju grafiku za web stranice bez potrebe da se upuštaju u zamršenosti koda ili dizajna. Adobe Fireworks ima niz prednosti. Ovaj alat ima impresivnu tačnost piksela, opcije kompresije slike (JPEG, GIF, itd.), što omogućava korisnicima da kreiraju funkcionalne web stranice i grade vektore.
Uz Adobe XD, možete kreirati dizajn web stranica i mobilnih aplikacija, kao i prototipove, žičane okvire i vektorsku grafiku. Dijelite interaktivne prototipove na više platformi uključujući Windows, Mac, iOS i Android - savršeno za timski rad.
Axure RP Pro je još jedan dobar alat za UX dizajn, a također je besplatan. U Axureu je implementirano nekoliko opcija, uklj. izradu prototipa i dokumentacije. Možete čak kreirati korisničku navigaciju i mape web stranica. Axure je idealan za kreiranje web i desktop aplikacija, korisnicima je omogućena mogućnost brzog izvoza u PDF ili HTML.
Ovo je složen softver sa mnogo specifičnih funkcija, uklj. nedestruktivno uređivanje (što znači da Sketch neće promijeniti gustinu piksela slike s kojom radite). Izvoz koda, preciznost piksela, izrada prototipa, vektorsko uređivanje su glavne prednosti Sketch-a.
6. Softver za storyboarding
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. Postoji nekoliko alata za pisanje priča, s različitim funkcijama i razinama težine.
Storyboarder je besplatan razvoj softvera sa osnovnom funkcionalnošću koji je pogodan za sve dizajnere, bez obzira na njihov nivo vještina. Ovaj softver brzo kreira skice ili figure da opiše plan ili ideju. Drugi alat je Toon Boom Storyboard Pro. Kombinira crtanje, animaciju, kontrolu kamere i mnoge druge opcije - uz godišnju ili mjesečnu naknadu. Široka funkcionalnost za sofisticirano pripovijedanje i detaljne pripremne radove. Sve ovo je pogodno za dizajnere koji traže priliku da vizuelno ispričaju svoju priču kroz interfejs.
Kako postati UX dizajner?
Ako volite dizajn, istraživanje i rad s ljudima – slušate kako vam drugi govore o vašim iskustvima, tada bi možda vrijedilo razmisliti o karijeri u UX dizajnu. U ovom slučaju, morat ćete se fokusirati na konceptualne aspekte dizajna; stvoriti kvalitetno korisničko iskustvo za druge korisnike.
Postoji nekoliko važnih koraka ka karijeri UX dizajnera. Mnogi univerziteti u svijetu nude svoje tečajeve, ali da biste ih upisali obično je preduvjet 4 godine obrazovanja iz dizajna. Postoje fleksibilniji programi kao npr Diplomski program Univerziteta Quinnipiac u dizajnu korisničkog iskustva... Postoje i profesionalni programi sertifikacije. Mnogo zavisi od dužine studija i nivoa obuke.
Ako ste spremni ostvariti svoj san da postanete UX dizajner, potreban vam je životopis i živopisan portfolio. Resursi kao što su Dribbble ili Behance će dobro doći. Možete prikazati svoj rad na vlastitoj web stranici, napravljenoj uz pomoć graditelja kao što je SquareSpace.
Ne gubite iz vida sljedeće nijanse:
Vizuelna privlačnost
Prezentacija je sve. Rad treba da govori sam za sebe...pokaži, ne govori! Odabir boja, tipografija su važni.
Dodajte stranicu o sebi
Zašto bi vas neko zaposlio? Koje nove stvari možete donijeti bilo kojoj organizaciji? Pokažite regruterima svoju jedinstvenu viziju ili ono što vas inspiriše.
Zaposlenik kompanije iz vaših snova ne bi trebalo da ima poteškoća u navigaciji kroz vaš portfolio sajt. U meniju dodajte odjeljke kao što su kontakti, životopis, portfolio, o meni itd. da pojednostavite navigaciju.
Objasnite kako dizajnirate svoj UX
Vaš potencijalni poslodavac želi razumjeti vaš način razmišljanja. Dodajte informacije kako biste regruteru rekli o vašem UX istraživanju, razmišljanju, procesu dizajna ili izradi prototipa.
Kreirajte dodatni portfolio
Koristite druge alate da svoj rad učinite dostupnim na web resursima gdje dizajneri provode svoje vrijeme i oni koji ih žele angažirati,
Ishod
Možete biti grafički dizajner, bloger, programer ili bilo šta drugo, ali u svakom slučaju, UX dizajn je nešto što može pomoći vama i vašoj kompaniji da rastete. Sretan korisnik je ključ uspjeha, ali bez promišljenog UX dizajna to će biti nemoguće postići.
Tehnologija je sve prisutnija u svakodnevnom životu, a uspješan UX dizajn uklanja sve barijere između korisnika i njegovog uređaja (ili aplikacija). UX dizajn je važniji nego ikad - pridružite se ovom pokretu i iskoristite svoje poslovanje.
Po pravilu, da biste stimulisali osobu koja koristi proizvod, uslugu, sistem, potrebna vam je sposobnost da date odgovor. Ovaj odgovor treba ocijeniti dobro napisanom komunikacijom i, u većini slučajeva, izazvati jasan i polupredvidljiv odgovor. I onda radi.
Gore navedeno je osnovna definicija Interakcionog dizajna (IxD), koja povezuje opšte trendove definicija koje su dali renomirani dizajneri Dan Saffer 1 ) i Robert Reimann 2 ), kao i Interaction Design Association 3 ).
Također je vrlo važno napomenuti da je interaktivni dizajn potpuno drugačiji koncept od ostalih vrsta dizajna. Ovo nije informacijska arhitektura ili industrijski dizajn. To također nije vrsta korisničkog interfejsa. Interaktivni dizajn nije bilo koja forma ili struktura, već nešto efemernije - to je više koncept "zašto" i "kada", a ne "šta" i "kako".
Za bilo koju vrstu dizajna, primarni zadatak je formulirati ono što se zove osnove ili osnovne elemente. Stvaranje takvih semantičkih koncepata omogućava:
- bolja komunikacija između učesnika
- stvaranje opštih estetskih koncepata
- najbolji alati za učenje
- oblast istraživanja
Ovi, kao i drugi razlozi koji su trenutno beznačajni - ovo je povod da pričamo o osnovama.
Šta su temelji?
Moje prvo upoznavanje sa „temeljima“ došlo je kada sam pripremao program za profesionalce industrijskog dizajna na Pratt institutu u Bruklinu, Njujork. Program je kreirala Roweena Reed Kostellow na osnovu njene filozofije osnivanja (pogledajte Design Elements by Gail Grit Hanna za više detalja) Elementi dizajna, Gail Pozdravi Hannah 4 ).
Prema Costellowu, postoji šest elemenata koji čine temelje industrijskog dizajna: linija, osvjetljenje i boja, prostor, volumen (dimenzije), negativni prostor (pozadina, pozadina) i tekstura (površina, tekstura). Miješanje i eksperimentiranje sa ovim elementima srce je dizajna 3D oblika. Pratt studenti su savladali ove osnove tokom jednogodišnjeg kursa. Morali su definirati granice i ovisnosti, raspravljajući o apstrakcijama i projektima iz stvarnog života.
Pošto nisam jedina osoba koja je razmišljala o ovim stvarima, može se pretpostaviti da svi o tome razmišljamo drugačije. Na primjer, Dan Saffer je u svojoj knjizi "Dizajniranje interaktivnosti" posvetio veliko poglavlje gdje opisuje elemente interaktivnog dizajna: vrijeme, pokret, prostor, izgled, teksturu i zvuk. Denovi elementi su raspoređeni prema tome kako ih mogu nazvati na formi da se interaktivnost pojavi, a ne prema tome koji oblik interaktivnosti će mi biti dostupan ili ne, osim, možda, vremena.
Ako su to zaista temelji interaktivnog dizajna, trebali bi biti potpuno apstrahovani od forme i nemaju fizičke atribute.
Osnove interaktivnog dizajna
Vrijeme
"Vrijeme" razlikuje interaktivni dizajn od drugih tipova. Ovo je ljuska našeg koncepta interaktivnosti.
Ali vrijeme nije jedina osnova za interaktivni dizajn. Postoje mnogi međusobno povezani aspekti manipulacije vremenom. A kao što svi znamo, vrijeme je relativno, ono postoji duž više osa u istom trenutku. Dakle, postoje tri vremenski ovisne osnove za interaktivni dizajn:
Pace
Interaktivni dizajn je sve u stvaranju pripovijedanja, postepenih promjena u individualnim iskustvima dok ostajete unutar granica. Na primjer, ako koristim e-mail klijent, apsolutno ne bih želio da upalim šporet u trenutku kada pišem pismo.
Priča ima tempo. To jasno razumijemo kada gledamo filmove. Ako je film dobar, nikada ne gledamo na sat. Tempo je također dio interaktivnog dizajna, jer ponekad možda ne gledate na sat iz dosade, već zato što želite da znate možete li na vrijeme završiti proces „interaktivnosti“.
Po mom mišljenju, tempo u interaktivnom dizajnu često korelira sa onim što možemo da uradimo u svakom trenutku. Istovremeno, nije dovoljno da nešto mogu da uradim, već moram i da budem u stanju da to uradim pre nego što pređem na sledeći korak. Na primjer, kada nešto kupim, mogu ispuniti jedan vrlo veliki formular u kojem se nalaze svi podaci o meni i provjeriti sve podatke odjednom, ili mogu provjeriti podatke u dijelovima, podijelivši proces naplate na nekoliko.
Budući da je ukupna dužina margina ista, vrijeme za popunjavanje bi također trebalo biti približno isto u svakom slučaju, ali će osjećaj tempa biti drugačiji za svaki dizajn. Uopšteno govoreći, jedan veliki oblik je efikasniji, a usitnjavanje je lakše upravljati.
Reakcija
Najjednostavniji način za definiranje vremena u interaktivnom dizajnu je vrijeme reakcije. Koliko vremena je potrebno sistemu da odgovori na događaj? To se dešava kada vidimo kako se kursor pretvara u pješčani sat ili traku napretka o kojoj se priča u gradu, i čekamo da nam sistem odgovori, ali su važna i druga vremena reakcije.
Radnja koja se odvija u realnom vremenu (sinhrono) povezana je sa trenutnim trenutkom, dok asinhrona akcija gubi ovu vezu. Budući da su neki sistemi osjetljivi na vrijeme, morate znati kako uzeti u obzir razlike u ovim vrstama odgovora.
Kontekst
Svaki osnovni element, kao što je vrijeme, mora imati podelement - "kontekst". U našem slučaju, interaktivnost kursa za osobu, to znači da ne možete razmatrati dizajn sam po sebi. Na primjer, kada kažemo "vrijeme", ne možemo dizajnirati aplikaciju bez razumijevanja koliko dugo osoba može provesti na direktnom kontaktu sa sistemom.
Alan Cooper i Robert Reimann u About Face 2.0 6 govore o vremenskom kontekstu kao principu "pozicije". Postoje četiri pozicije:
Metafora
Metafora je književno sredstvo u kojem se jedna dobro shvaćena pojava ili koncept koristi za objašnjenje drugog pojma koji je teže razumjeti, ili kada ga je teško objasniti na drugi način. Virtuelna priroda kompjutera zahteva pronalaženje "materijalnih" metafora kako bi se sve te nejasne stvari objasnile ljudima. Vrsta i broj metafora koje koristite određuju kvalitetu i emocionalnu percepciju vašeg proizvoda.
Najjasniji primjer metafore je kanta za smeće ili kanta za smeće (u operativnom sistemu na vašem računaru). Ideja je da su vaši fajlovi u virtuelnoj kanti ili kanti za smeće, pa ako niste u pravu, možete kopati tamo (Ups!) i vratiti ih u originalni oblik. I naravno, uvijek možete "isprazniti kantu" tako što ćete sadržaj učiniti nepovratnim. Metafora dobro funkcionira za svaku osobu jer se precizno i fleksibilno odnosi na stvarnost.
Sve metafore nemaju nazadak. Na primjer, pokušali smo upotrijebiti izraz "ukloniti" kako bismo brzo objasnili kako dodati nešto u kantu ili kantu za smeće. Ali, ne možemo ukloniti nešto u pravoj kanti za smeće ili kanti za smeće, zar ne?
Ali ponekad je metafora previše udaljena. Tada nam omogućava da proširimo granice naših mogućnosti mašte. Ako imam bilježnicu, ormarić za dosije, poštansko sanduče, kalendar i slično da udobno radim na ekranu, mogu zvati kartice svojih predmeta, koristiti notes, ostavljati poruke u poštanskom sandučetu i označavati termine u kalendaru, zar ne?
Ali u isto vrijeme, metafore bolje postižu cilj ako su malo netačne, a sam korisnik mora popuniti prazninu u skladu sa svojim razumijevanjem subjekta. Na primjer, prilagodili smo desktop metafore za naše moderne računare.
Dizajner interaktivnosti mora postići ovu ravnotežu tako što pažljivo koristi metafore svojih prethodnika i gradi nešto na njima, sve dok je originalna metafora (možda prihvaćena od svih) u stanju odoljeti novim trendovima.
Apstrakcija
Radeći u tandemu s metaforom, apstrakcija se više odnosi na fizičku i mentalnu aktivnost, koja je neophodna za ostvarivanje interaktivnosti. Prvi put sam počeo razmišljati o apstrakciji kada sam pročitao članak Jonasa Lowgrena 7 , da je označio pojam "plastičnost". Nakon što sam pročitao ovaj članak i koristio termin nekoliko puta u razgovorima i diskusijama, odjednom sam shvatio da je ono o čemu je Jonas zapravo govorio kako je apstrakcija u interfejsu prikaz proizvoda.
Uglavnom, sve što vidimo na računaru je u početku apstrakcija, pošto imamo dva primarna interfejsa za ulaznu tačku - miš i tastaturu. Neki ljudi stavljaju monitor u posebnu vrstu pokazivača i ispuštaju apstrakciju za neku vrstu interaktivnosti, uglavnom crtanja. Međutim, većina nas koristi pritiskanje tipki, pokazivanje, klikanje i pomicanje miša po ekranu.
Fokusirajmo se na uzgoj miševa. Gledamo u monitor, na kojem se kursor (u obliku ikone) kreće u skladu s pokretima miša. Bez gledanja u miša (obično) pomeramo ga, a u skladu sa zadatim smerom pomera se i ikona na ekranu (obično strelica). Odlično, riješili smo to. Desno i lijevo rade onako kako se vidi, ali pomicanje miša "udaljeno od vas" pomjera kursor gore, a "prema sebi" - dolje po ekranu. Odlična metafora za koncept perspektive.
Kada dovedemo ikonu do cilja, kliknemo na dugme miša. Ovo je najviši nivo apstrakcije. Miš, monitor i procesor rade unisono kako bi stvorili niz efekata koje smo spojili na ova tri uređaja. Ali veza je vrlo, vrlo apstraktna i mora se proučavati.
Postoje različiti nivoi apstrakcije u ponašanju miša. Moji favoriti za poređenje su Google Maps i MapQuest. U Google mapama, klikom na dugme miša i pomeranjem ruke, mogu pomeriti centar oblasti mape. Ima veoma brzo vreme reakcije, ali tip pokreta - pomeranje ruke kao da pomeram komad papira u zraku svetlosti - je manje apstraktan nego u MapQuest-u, gde samo kliknem na okvir ili na kartu (podešavanje odgovarajućeg režima). Moglo bi se reći da je klikanje brže (manje vještine), ali je apstraktnije, vjerovatno manje zabavno i definitivno manje precizno. Sve ovo čini rad sa Google mapama (i njihovim imitatorom) ugodnijom i efikasnijom interaktivnošću.
Sistemi postaju sve složeniji i integrisaniji u naše živote. Mnogi sistemi su postali potpuno apstraktni i to nije uvijek dobro kada kompleksnost povećava apstraktnost informacija. Svako od nas je prije ili kasnije naišao na ekrane osjetljive na pritisak. Ovo je drastično smanjenje nivoa apstrakcije pri interakciji sa računarskim uređajima.
Neke nove i popularne tehnologije stvaraju poteškoće novom valu dizajnera interaktivnosti... Sve veći svijet prostornih indikatora, RFID-a i drugih sličnih uređaja daje skok apstrakcije, jer jednostavno ne postoji direktan interfejs za interakciju sa takvim uređajima. Za njih je jednostavno nemoguće pronaći jednostavne, efikasne metafore koje bi korisnicima pružile razumijevanje rada takvih uređaja, poput metafora koje smo odabrali za miša.
Negativni prostor
Sve "prave" dizajnerske discipline imaju koncept negativnog oblika prostora. U arhitekturi i industrijskom dizajnu, to su šupljine ili prostori između nizova. U grafičkom dizajnu, ovo je "bijeli prostor" bez boje, linija ili oblika - poput bijelih mjesta na odštampanom listu papira. Dizajn zvuka koristi tišinu, dizajn svjetla koristi tamu.
Dakle, šta je uskraćivanje interaktivnosti?
Mnogo je mjesta na kojima „nešto“ možda nedostaje, tačnije, ima mnogo slojeva. Možemo li govoriti samo o djelovanju proizvoda? O našim akcijama? O razmaku između dijelova radnje?
Pauza- Vrlo jasan koncept vremena kada nema radnji vezanih za interaktivnost. Često puta interaktivni dizajn pokušava popuniti takve praznine, ali možda su te praznine korisne.
Stani i razmisli- Šta ako nema reakcije sistema? Razmislite o tome kako je jedan student na Švedskom institutu za interaktivnost uradio i smislio "kuglu misli". Ako ne razmišljate puno, lopta se kotrlja sve dalje i dalje.
Neaktivnost- Ne radite ništa, proizvod ne reaguje na akciju, možda zbog svoje neispravnosti. Ovo nije kao pauza, jer je u ovom slučaju neaktivnost reakcija na akciju, a ne zaustavljanje u akciji.
Miješanje u interaktivnosti
Za razliku od drugih disciplina formativnog dizajna, interaktivni dizajn je vrlo zbunjujući jer zahtijeva različite discipline za izgradnju interakcija. Iz tog razloga, interaktivni dizajn više liči na koreografiju. 8 ili snimanje filma nego uz muziku ili krojenje. Glavni elementi navedeni iznad su prikladni samo za interaktivni dizajn ili su redefinirani isključivo za njega.
Na primjer, korištenje boje kao estetskog alata poboljšava ili degradira nivo interaktivnosti. Općenito, u većini slučajeva potrebna je informaciona arhitektura za pripremu informacija prije kreiranja interaktivnosti.
Na kraju krajeva, interaktivni dizajn je koreografija ili orkestarski aranžman drugih formativnih dizajna za stvaranje međusobnog dijaloga između ljudi i proizvoda i sistema oko nas.
4 Kao što je prikazano u ovoj nedavnoj knjizi: Hannah, Gail Greet, Elementi dizajna: Rowena Reed Kostellow i struktura vizuelnih odnosa , New York: Princeton Architectural Press, 2002.
8 Heller, David (NKA Malouf, David), "Estetika i dizajn interakcije: neka preliminarna razmišljanja." (Obavezno članstvo u ACM-u) , Interakcije 12: 5 (septembar-oktobar 2005): 48-50.
Po pravilu, da biste stimulisali osobu koja koristi proizvod, uslugu, sistem, potrebna vam je sposobnost da date odgovor. Ovaj odgovor treba ocijeniti dobro napisanom komunikacijom i, u većini slučajeva, izazvati jasan i polupredvidljiv odgovor. I onda radi.
Gore navedeno je osnovna definicija Interakcionog dizajna (IxD), koja povezuje opšte trendove definicija koje su dali renomirani dizajneri Dan Saffer 1 ) i Robert Reimann 2 ), kao i Interaction Design Association 3 ).
Također je vrlo važno napomenuti da je interaktivni dizajn potpuno drugačiji koncept od ostalih vrsta dizajna. Ovo nije informacijska arhitektura ili industrijski dizajn. To također nije vrsta korisničkog interfejsa. Interaktivni dizajn nije bilo koja forma ili struktura, već nešto efemernije - to je više koncept "zašto" i "kada", a ne "šta" i "kako".
Za bilo koju vrstu dizajna, primarni zadatak je formulirati ono što se zove osnove ili osnovne elemente. Stvaranje takvih semantičkih koncepata omogućava:
- bolja komunikacija između učesnika
- stvaranje opštih estetskih koncepata
- najbolji alati za učenje
- oblast istraživanja
Šta su temelji?
Moje prvo upoznavanje sa „temeljima“ došlo je kada sam pripremao program za profesionalce industrijskog dizajna na Pratt institutu u Bruklinu, Njujork. Program je kreirala Roweena Reed Kostellow na osnovu njene filozofije osnivanja (pogledajte Design Elements by Gail Grit Hanna za više detalja) Elementi dizajna, Gail Pozdravi Hannah 4 ).
Prema Costellowu, postoji šest elemenata koji čine temelje industrijskog dizajna: linija, osvjetljenje i boja, prostor, volumen (dimenzije), negativni prostor (pozadina, pozadina) i tekstura (površina, tekstura). Miješanje i eksperimentiranje sa ovim elementima srce je dizajna 3D oblika. Pratt studenti su savladali ove osnove tokom jednogodišnjeg kursa. Morali su definirati granice i ovisnosti, raspravljajući o apstrakcijama i projektima iz stvarnog života.
Pošto nisam jedina osoba koja je razmišljala o ovim stvarima, može se pretpostaviti da svi o tome razmišljamo drugačije. Na primjer, Dan Saffer je u svojoj knjizi "Dizajniranje interaktivnosti" posvetio veliko poglavlje gdje opisuje elemente interaktivnog dizajna: vrijeme, pokret, prostor, izgled, teksturu i zvuk. Denovi elementi su raspoređeni prema tome kako ih mogu nazvati na formi da se interaktivnost pojavi, a ne prema tome koji oblik interaktivnosti će mi biti dostupan ili ne, osim, možda, vremena.
Ako su to zaista temelji interaktivnog dizajna, trebali bi biti potpuno apstrahovani od forme i nemaju fizičke atribute.
Osnove interaktivnog dizajna
Vrijeme
"Vrijeme" razlikuje interaktivni dizajn od drugih tipova. Ovo je ljuska našeg koncepta interaktivnosti.
Ali vrijeme nije jedina osnova za interaktivni dizajn. Postoje mnogi međusobno povezani aspekti manipulacije vremenom. A kao što svi znamo, vrijeme je relativno, ono postoji duž više osa u istom trenutku. Dakle, postoje tri vremenski ovisne osnove za interaktivni dizajn:
Pace
Interaktivni dizajn je sve u stvaranju pripovijedanja, postepenih promjena u individualnim iskustvima dok ostajete unutar granica. Na primjer, ako koristim e-mail klijent, apsolutno ne bih želio da upalim šporet u trenutku kada pišem pismo.
Priča ima tempo. To jasno razumijemo kada gledamo filmove. Ako je film dobar, nikada ne gledamo na sat. Tempo je također dio interaktivnog dizajna, jer ponekad možda ne gledate na sat iz dosade, već zato što želite da znate možete li na vrijeme završiti proces „interaktivnosti“.
Po mom mišljenju, tempo u interaktivnom dizajnu često korelira sa onim što možemo da uradimo u svakom trenutku. Istovremeno, nije dovoljno da nešto mogu da uradim, već moram i da budem u stanju da to uradim pre nego što pređem na sledeći korak. Na primjer, kada nešto kupim, mogu ispuniti jedan vrlo veliki formular u kojem se nalaze svi podaci o meni i provjeriti sve podatke odjednom, ili mogu provjeriti podatke u dijelovima, podijelivši proces naplate na nekoliko.
Budući da je ukupna dužina margina ista, vrijeme za popunjavanje bi također trebalo biti približno isto u svakom slučaju, ali će osjećaj tempa biti drugačiji za svaki dizajn. Uopšteno govoreći, jedan veliki oblik je efikasniji, a usitnjavanje je lakše upravljati.
Reakcija
Najjednostavniji način za definiranje vremena u interaktivnom dizajnu je vrijeme reakcije. Koliko vremena je potrebno sistemu da odgovori na događaj? To se dešava kada vidimo kako se kursor pretvara u pješčani sat ili traku napretka o kojoj se priča u gradu, i čekamo da nam sistem odgovori, ali su važna i druga vremena reakcije.
Radnja koja se odvija u realnom vremenu (sinhrono) povezana je sa trenutnim trenutkom, dok asinhrona akcija gubi ovu vezu. Budući da su neki sistemi osjetljivi na vrijeme, morate znati kako uzeti u obzir razlike u ovim vrstama odgovora.
Kontekst
Svaki osnovni element, kao što je vrijeme, mora imati podelement - "kontekst". U našem slučaju, interaktivnost kursa za osobu, to znači da ne možete razmatrati dizajn sam po sebi. Na primjer, kada kažemo "vrijeme", ne možemo dizajnirati aplikaciju bez razumijevanja koliko dugo osoba može provesti na direktnom kontaktu sa sistemom.
Metafora
Metafora je književno sredstvo u kojem se jedna dobro shvaćena pojava ili koncept koristi za objašnjenje drugog pojma koji je teže razumjeti, ili kada ga je teško objasniti na drugi način. Virtuelna priroda kompjutera zahteva pronalaženje "materijalnih" metafora kako bi se sve te nejasne stvari objasnile ljudima. Vrsta i broj metafora koje koristite određuju kvalitetu i emocionalnu percepciju vašeg proizvoda.
Najjasniji primjer metafore je kanta za smeće ili kanta za smeće (u operativnom sistemu na vašem računaru). Ideja je da su vaši fajlovi u virtuelnoj kanti ili kanti za smeće, pa ako niste u pravu, možete kopati tamo (Ups!) i vratiti ih u originalni oblik. I naravno, uvijek možete "isprazniti kantu" tako što ćete sadržaj učiniti nepovratnim. Metafora dobro funkcionira za svaku osobu jer se precizno i fleksibilno odnosi na stvarnost.
Sve metafore nemaju nazadak. Na primjer, pokušali smo upotrijebiti izraz "ukloniti" kako bismo brzo objasnili kako dodati nešto u kantu ili kantu za smeće. Ali, ne možemo ukloniti nešto u pravoj kanti za smeće ili kanti za smeće, zar ne?
Ali ponekad je metafora previše udaljena. Tada nam omogućava da proširimo granice naših mogućnosti mašte. Ako imam bilježnicu, ormarić za dosije, poštansko sanduče, kalendar i slično da udobno radim na ekranu, mogu zvati kartice svojih predmeta, koristiti notes, ostavljati poruke u poštanskom sandučetu i označavati termine u kalendaru, zar ne?
Ali u isto vrijeme, metafore bolje postižu cilj ako su malo netačne, a sam korisnik mora popuniti prazninu u skladu sa svojim razumijevanjem subjekta. Na primjer, prilagodili smo desktop metafore za naše moderne računare.
Dizajner interaktivnosti mora postići ovu ravnotežu tako što pažljivo koristi metafore svojih prethodnika i gradi nešto na njima, sve dok je originalna metafora (možda prihvaćena od svih) u stanju odoljeti novim trendovima.
Apstrakcija
Radeći u tandemu s metaforom, apstrakcija se više odnosi na fizičku i mentalnu aktivnost, koja je neophodna za ostvarivanje interaktivnosti. Prvi put sam počeo razmišljati o apstrakciji kada sam pročitao članak Jonasa Lowgrena 7 , da je označio pojam "plastičnost". Nakon što sam pročitao ovaj članak i koristio termin nekoliko puta u razgovorima i diskusijama, odjednom sam shvatio da je ono o čemu je Jonas zapravo govorio kako je apstrakcija u interfejsu prikaz proizvoda.
Uglavnom, sve što vidimo na računaru je u početku apstrakcija, pošto imamo dva primarna interfejsa za ulaznu tačku - miš i tastaturu. Neki ljudi stavljaju monitor u posebnu vrstu pokazivača i ispuštaju apstrakciju za neku vrstu interaktivnosti, uglavnom crtanja. Međutim, većina nas koristi pritiskanje tipki, pokazivanje, klikanje i pomicanje miša po ekranu.
Fokusirajmo se na uzgoj miševa. Gledamo u monitor, na kojem se kursor (u obliku ikone) kreće u skladu s pokretima miša. Bez gledanja u miša (obično) pomeramo ga, a u skladu sa zadatim smerom pomera se i ikona na ekranu (obično strelica). Odlično, riješili smo to. Desno i lijevo rade onako kako se vidi, ali pomicanje miša "udaljeno od vas" pomjera kursor gore, a "prema sebi" - dolje po ekranu. Odlična metafora za koncept perspektive.
Kada dovedemo ikonu do cilja, kliknemo na dugme miša. Ovo je najviši nivo apstrakcije. Miš, monitor i procesor rade unisono kako bi stvorili niz efekata koje smo spojili na ova tri uređaja. Ali veza je vrlo, vrlo apstraktna i mora se proučavati.
Postoje različiti nivoi apstrakcije u ponašanju miša. Moji favoriti za poređenje su Google Maps i MapQuest. U Google mapama, klikom na dugme miša i pomeranjem ruke, mogu pomeriti centar oblasti mape. Ima veoma brzo vreme reakcije, ali tip pokreta - pomeranje ruke kao da pomeram komad papira u zraku svetlosti - je manje apstraktan nego u MapQuest-u, gde samo kliknem na okvir ili na kartu (podešavanje odgovarajućeg režima). Moglo bi se reći da je klikanje brže (manje vještine), ali je apstraktnije, vjerovatno manje zabavno i definitivno manje precizno. Sve ovo čini rad sa Google mapama (i njihovim imitatorom) ugodnijom i efikasnijom interaktivnošću.
Sistemi postaju sve složeniji i integrisaniji u naše živote. Mnogi sistemi su postali potpuno apstraktni i to nije uvijek dobro kada kompleksnost povećava apstraktnost informacija. Svako od nas je prije ili kasnije naišao na ekrane osjetljive na pritisak. Ovo je drastično smanjenje nivoa apstrakcije pri interakciji sa računarskim uređajima.
Neke nove i popularne tehnologije stvaraju poteškoće novom valu dizajnera interaktivnosti... Sve veći svijet prostornih indikatora, RFID-a i drugih sličnih uređaja daje skok apstrakcije, jer jednostavno ne postoji direktan interfejs za interakciju sa takvim uređajima. Za njih je jednostavno nemoguće pronaći jednostavne, efikasne metafore koje bi korisnicima pružile razumijevanje rada takvih uređaja, poput metafora koje smo odabrali za miša.
Negativni prostor
Sve "prave" dizajnerske discipline imaju koncept negativnog oblika prostora. U arhitekturi i industrijskom dizajnu, to su šupljine ili prostori između nizova. U grafičkom dizajnu, ovo je "bijeli prostor" bez boje, linija ili oblika - poput bijelih mjesta na odštampanom listu papira. Dizajn zvuka koristi tišinu, dizajn svjetla koristi tamu.
Dakle, šta je uskraćivanje interaktivnosti?
Mnogo je mjesta na kojima „nešto“ možda nedostaje, tačnije, ima mnogo slojeva. Možemo li govoriti samo o djelovanju proizvoda? O našim akcijama? O razmaku između dijelova radnje?
Pauza- Vrlo jasan koncept vremena kada nema radnji vezanih za interaktivnost. Često puta interaktivni dizajn pokušava popuniti takve praznine, ali možda su te praznine korisne.
Stani i razmisli- Šta ako nema reakcije sistema? Razmislite o tome kako je jedan student na Švedskom institutu za interaktivnost uradio i smislio "kuglu misli". Ako ne razmišljate puno, lopta se kotrlja sve dalje i dalje.
Neaktivnost- Ne radite ništa, proizvod ne reaguje na akciju, možda zbog svoje neispravnosti. Ovo nije kao pauza, jer je u ovom slučaju neaktivnost reakcija na akciju, a ne zaustavljanje u akciji.
Miješanje u interaktivnosti
Za razliku od drugih disciplina formativnog dizajna, interaktivni dizajn je vrlo zbunjujući jer zahtijeva različite discipline za izgradnju interakcija. Iz tog razloga, interaktivni dizajn više liči na koreografiju. 8 ili snimanje filma nego uz muziku ili krojenje. Glavni elementi navedeni iznad su prikladni samo za interaktivni dizajn ili su redefinirani isključivo za njega.
Na primjer, korištenje boje kao estetskog alata poboljšava ili degradira nivo interaktivnosti. Općenito, u većini slučajeva potrebna je informaciona arhitektura za pripremu informacija prije kreiranja interaktivnosti.
Na kraju krajeva, interaktivni dizajn je koreografija ili orkestarski aranžman drugih formativnih dizajna za stvaranje međusobnog dijaloga između ljudi i proizvoda i sistema oko nas.
4 Kao što je prikazano u ovoj nedavnoj knjizi: Hannah, Gail Greet, Elementi dizajna: Rowena Reed Kostellow i struktura vizuelnih odnosa , New York: Princeton Architectural Press, 2002.
8 Heller, David (NKA Malouf, David), "Estetika i dizajn interakcije: neka preliminarna razmišljanja." (Obavezno članstvo u ACM-u) , Interakcije 12: 5 (septembar-oktobar 2005): 48-50.
Od autora: Protekla godina donijela je val novih tehnika, stilova i trendova, od kojih se većina pojavila da zadovolje potrebe rastućeg tržišta mobilnih uređaja. Tehnološki napredak promijenio je očekivanja korisnika u pogledu estetike i funkcionalnosti stranica i aplikacija. U ovom članku ćemo raspravljati o interaktivnom dizajnu web stranica, odnosno o 5 najboljih trendova 2015.
Pogledajmo nekoliko uobičajenih taktika iznesenih u knjizi Interactive Design Best Practices.
Uokvirivanje- Način na koji iznosite određene informacije. Umjesto da se pokaže da bi bilo skuplje platiti karticom, moglo bi se to uključiti u ukupnu cijenu i prikazati druge načine plaćanja kao snižene.
Sidrenje- Suština je da se skuplji proizvod prikaže više, čime se njegova cijena postavlja kao standard. U ovom slučaju jeftiniji proizvodi će izgledati mnogo privlačnije. Metoda je posebno efikasna kada je uparena sa popustima, kada korisnik jasno vidi koliko može da uštedi.
Strah od gubitka- Prema rezultatima studije, utvrđeno je da je instinkt kupca da izbjegne bol mnogo jači od instinkta kupovine zadovoljstva. Postavljanje pitanja "Ako se ne prijavite, izgubit ćete 10$" je mnogo efikasnije od "Ako se prijavite, uštedjet ćete 10$".
Deficit- Što je manje proizvoda, veća je potražnja za njim. Ako pažljivo pogledate web lokacije Groupon i Amazon, primijetit ćete kako ističu nedostatak proizvoda za upravljanje konverzijama.
Nevidljivi interfejs
Dobar dizajn ne privlači pažnju. Ovaj dizajn radi u pozadini, dajući korisnicima osjećaj da je sve što su postigli samo zahvaljujući njihovom trudu. U nastavku sam predstavio nekoliko korisnih načina za osnaživanje korisnika u interakciji s web lokacijom:
Smanjite i pojednostavite korake - Što manje koraka korisnik preduzme da postigne cilj, to je vaš interfejs uspješniji. Koraci mogu biti mali, ali čak i ako korisniku uštedite jedan dodatni klik, on će to cijeniti. Samo pogledajte kako je Uber (snimka ekrana ispod) pretvorio proces u više koraka dodavanja podataka o kreditnoj kartici u jedan jednostavan korak.
Jasna vizuelna komunikacija – Održavajte dosljednu vizualnu temu i univerzalne i lako razumljive ikone kako biste izbjegli zabunu (tj. ikona pošte znači listu poruka ili prijemno sanduče).
Oprosti interfejs - Predvidite uobičajene greške korisnika i uspostavite odgovarajuće sigurnosne mjere. Ove mjere uključuju poništavanje, automatsko spremanje, unos podataka u više formata i povratne informacije s objašnjenjima.
Praćenje kretanja korisnika – Najbolji način da se identifikuju suvišnost i nepotrebni koraci je da se vizualizuje kretanje korisnika po sajtu. Jessica Downey koristi svoju mapu pipaka kao primjer za kreiranje vizualne karte koja će vam pomoći da pravilno organizirate korake. Ryan Singer iz Basecampa smislio je sličan, ali brži način.
Značenje prostora
Najbolji primjeri iz prakse za korisnička sučelja u web dizajnu govore da prazan prostor nije uvijek dosadan. Razmak treba koristiti kao aktivni dio dizajna. U smislu interaktivnog web dizajna, razmaci su pauze između riječi i rečenica. Prepoznavanje i obrada elemenata sa ekrana brzo postaje besmisleno bez trenutka predaha.
Evo nekoliko savjeta za bijeli prostor koje treba zapamtiti:
Razmak Kreirajte hijerarhiju - Što je više bijelog prostora oko objekta, to se više pažnje privlači na njega. Samo ovaj trik već može pomoći dizajnerima da utiču na vizuelnu hijerarhiju onoga što prvo žele da izgledaju.
Savremeni trendovi i pristupi u web razvoju
Naučite algoritam brzog rasta od nule u izgradnji sajta
Minimalizam dodaje sofisticiranost - Minimiziranjem elemenata i povećanjem bijelog prostora dajete vašoj web stranici dašak elegancije i luksuza. Ovaj pristup se često može naći na web stranicama modnih brendova.
Razmak utiče na čitljivost – razmak se ne koristi samo za pozadinu: ako sve ispustite i pogledate dizajn sa atomskog nivoa, razmak može poboljšati i smanjiti čitljivost teksta. U našem slučaju jasnoća znači lakoću čitanja složenih slova u riječi. Slijedite ove savjete o razmacima između redova/slova kako biste bili sigurni da je vaš tekst čitljiv.
Tekst interfejsa je takođe deo dizajna
Razvijajući analogiju korisničke interakcije kao dijaloga, možemo reći da interfejs mora pažljivo birati reči. Sve na ekranu aplikacije ili sajta smatra se interfejsom, a tekst nije izuzetak. Ako se značenje napisanih riječi ne poklapa sa zadatkom stranice, čak ni najbolji font neće pomoći.
Neće vas spasiti to što vaš osnovni tekst može poprimiti različite oblike i veličine. Obično se sav tekst može podijeliti i promijeniti u kategorije. Riječi dobrodošlice mogu biti neobavezne 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 u prenošenju prave poruke korisniku:
Upoznajte svoju publiku - Ovaj savjet je star koliko i svijet. Upoznajte svoje korisnike i šta žele da im kažete. Na primjer, na web stranici za djecu, riječi ili fraze se mogu ponavljati kako bi privukle pažnju, dok se na legalnoj stranici ovaj pristup ne preporučuje.
Odredite kontekst aplikacije vaše web stranice - Da li pišete za web stranicu ili aplikaciju? Početna stranica ili stranica s opisom? Baš kao što ste promijenili osnovnu kopiju za publiku, promijenite web lokaciju za okruženje korištenja. Ako je vaša aplikacija dizajnirana da se koristi u užurbanim situacijama ili situacijama koje ometaju (Waze tijekom vožnje), smanjivanje teksta će ubrzati obradu informacija.
Pokažite svoju ličnost - Vaš stil pisanja doprinosi cjelokupnom raspoloženju i atmosferi web-mjesta jednako kao i snažna vizualna ili tekuća animacija. Potrebno je razumjeti koje emocije izazivaju određene boje. Tekst ne bi trebao biti u sukobu s vizualnom interakcijom.
Odličan dizajn
Na kraju, ali ne i najmanje važno, dobar interaktivni dizajn je uvijek ugodan. Emocionalno povezivanje s korisnicima najsigurniji je način za izgradnju povjerenja. Kada je u pitanju dizajn, srce je važno koliko i um.
Koristeći MailChimp kao primjer, prozor za potvrdu je najvažniji dio privlačenja korisnika putem email newslettera. Smiješna slika i smiješan tekst samo povećavaju užitak u korištenju stranice (da ne spominjemo da ovaj pristup smanjuje neugodnost masovnog slanja pošte). Evo nekoliko brzih savjeta:
Ne žrtvujte upotrebljivost - Zamislite sjajan dizajn kao trešnju na vrhu torte: trešnja razblažuje ukus torte, ali sama po sebi ne čini ništa. Nikada ne žrtvujte dizajn po cijenu jasnoće.
Odvojite se od poznatog - Kao što je rekao Ben Rowe, vaš prvi prioritet je stvoriti "smisleno zadovoljstvo". Kako vaša web stranica ili aplikacija mogu dovesti ljude u stanje neograničenog djelovanja?
Istraživanje - Korisnici vole iznenađenja. Odgovarajuće mikrointerakcije (kao što je blijeda animacija ako korisnik završi zadatak) mogu učiniti prilično općenite zadatke emocionalno nagrađivanijim. Slika u nastavku pokazuje kako čak i jednostavna animacija za meni dodaje zabavu u radnje koje se ponavljaju.
