Embed Size (px)
DESCRIPTION
I bez da govorimo o Windowsima 8, koji su u svojoj suštini donijeli fundamentalnu podršku za interakciju s korisnikom putem ekrana osjetljivih na dodir, svakog se mjeseca predstavi nekoliko novih uređaja s takvim ekranima. Vjerojatno ste i sami svjesni izazova koji stoje pred vama, ukoliko razvijate aplikacije kojima je primarni način interakcije putem ekrana osjetljivih na dodir. Ovdje neće biti riječi o programiranju, ovdje će biti riječi o onome što mnogi smatraju ključnom pretpostavkom uspjeha kod sve zahtjevnijih kupaca i korisnika - o dizajnu i korisničkom sučelju. Velike su razlike između dobre i loše dizajnirane aplikacije, ali malene su razlike između dobre i vrhunske aplikacije, a upravo su to stvari o kojima ću pričati na ovom predavanju, iz iskustva nekoga tko je dizajnirao touch screen aplikacije i prije nego što je prvi iPad bio u planu.
Citation preview
Dizajn za touch screen
Emanuel Blagonić Blagonić Brothers
Isključite zvuk telefona
Na koji način vršimo interakciju?
VSDizajner Developer
Dizajner Developer
Jesu li developeri u većini na ovom predavanju?
Mi stvaramo proizvod
U trenutku kada se mijenja način rada u aplikacijama
Koliko ljudi u publici ima pametni telefon?
VI STE DIZAJNERI!
Ne mijenjajte navikeAko ste do sada radili dobre aplikacije,
raditi ćete ih i dalje
Pripazite na: boje, tipografiju, raspored elemenata i ikone
VSNativna Web aplikacija
Različit pristup dizajnu
Radite li nativnu aplikaciju, koristite propisane elemente.
Radite li web aplikaciju, nemojte pretjerati sa ...
“Sastojci” dobre touch screen aplikacije
1. Rješava li problem?
2007.
Definirajte prvo problem, a onda rješenja. Krenite s wireframeovima.
2. Olakšava li korištenje?
2012.
Zapišite stvari koje možete/želite popraviti/poboljšati.
3. Je li jasna za korištenje?
Hoće li aplikaciju moći jednostavno koristiti – vaša ciljana publika?
Konobaru je dovoljno 10 minuta obuke za rad da bi mogao početi koristiti POS Sector.– Haris Čusto, POS Sector
Dizajn za touch screen
A wonderful interface to the wrong features will fail.– Jakob Nielsen
Prije početka – postavite prava pitanja...
1. Koja je namjena aplikacije?
2. Gdje će se koristiti i na kojim uređajima?
3. Tko će koristiti aplikaciju?
I kada ste ovo odgovorili...
Krenite s wireframeovima*
People ignore design that ignores people.– Frank Chimero
2012.
Prije početka rada na Smart Housekeepingu, dobili smo detaljnu
dokumentaciju i inicijalne wireframeove.
Sve smo zanemarili!
Krenuli smo razraditi sučelje i interakcije – na papiru.
Nakon čega smo izradili low-fidelity interaktivni mockup.
Bez interaktivnih wireframeova izgubili bismo dragocjeno vrijeme i ne bismo
mogli testirati sučelje u tako ranoj fazi.
Iskoristite whiteboard kako biste skicirali osnovne predloške i interakcije.
Testirajte na pravim uređajima kako biste provjerili npr. površinu klika i tipografiju.
Boje, gradijenti i sjene
Boje su svugdje oko nas
http://www.colorschemer.com/https://kuler.adobe.com/
Boje odaberite ovisno o ciljanoj publici i tematici aplikacije.
Ne pretjerujte s kontrastom.
JAKI KONTRAST
#000
#ccc
#fff
#444
S gradijentima pažljivo
Ne zaboravite: svijetlo uvijek dolazi “od gore”.
Submit
Submit
Iskoristite sjene (i drukčije tonove) za prikazivanje dubine
Ovo se nalazi iznad ekrana.
Tipografija
Tipogra!jaTipografija
Tipografija
TipografijaTipografija
TipografijaTipografijaTipografija
Tipografija
TipografijaTipografija
Tipografija
Tipografija
Radite li nativnu aplikaciju – poštujte standarde.
Radite li web aplikaciju – odaberite prikladnu tipografiju.
Kako odabrati pravi font?
1Illustration
1Illustration
1Illustration
1Illustration
aegh! iIl1
aegh! iIl1
aegh! iIl1
aegh! iIl1
Veličinu slova definirajte prema uređaju za koji dizajnirate.
16, 18, 21, 24 pikselaza mobilne uređaje
18, 21, 24, 36 pikselaza tablete
21, 24, 36, 48 pikselaza desktop računala
Verdana i Tahomaza sitan tekst
Vodite računa o jeziku
return
retour
zurückkommen
povratak
Odaberite uži font ako ćete imati duge riječi.
http://ilovetypography.com/http://www.typetester.org/
Poravnanje / grid
Radeći po gridu, povećavate preglednost te olakšavate korištenje vaše aplikacije.
Grupirajte elemente sličnih funkcionalnosti kako biste ubrzali rad u aplikaciji.
Ikone
A picture is worth a thousand words. An interface is worth a thousand pictures.– Ben Schneiderman
Podižu uporabljivost aplikacijeI nema potrebe da imate dodatni tekst...
Prije početka odlučite kakve ikone trebate – jednobojne ili u boji.
Radite li web aplikaciju, svakako koristite icon font.
http://subway.pixle.pl/http://www.iconswindows.com/ http://icons8.com/http://icomoon.io/
Budite originalni!
Every child is an artist. The challenge is to remain an artist after you grow up.– Pablo Piccasso
Pitanja i odgovori
Želite li nastaviti ovaj razgovor na kavi? Javite se!( ja pijem kavu sa šlagom:)
