wireframing & ui design - andrej mlinarevic
TRANSCRIPT
User eXperience
Svi aspekti interakcije krajnjeg korisnika sa tvrtkom, njenim uslugama i proizvodima.JA KOB N IEL SEN & D ON NOR M A N
User Experience Design
Proces unaprijeđivanja zadovoljstva i lojalnosti korisnika poboljšavajući iskoristivost, lakoću korištenja i zadovoljstvo u interakciji s proizvodom. W IK IPED I A ( U X D )
Korisnički ciljevi Poslovni ciljevi
Gledanje videaČitanje člankaPostanje statusaSlanje pošteChat
ProdajaBrand awarenessGradnja zajednicePrikupljanjepodataka
A B
01PsihologijaŠto motivira korisnika?Što očekuju slijedeće?Koje potrebe ispunjuju?Nagrađujemo li vjernost?Kako se osjećaju?…
02UpotrebljivostKako skratiti put do cilja?Može li svatko pristupiti sučelju bez obzira na predznanje?Je li iskustvo dostupno i osobamas invaliditetom?…
DizajnŠto korisnici misle o dizajnu?Ulijeva li povjerenje na prvi pogled?Unosi li dizajn povjerenje?Vodi li dizajn korisnike pravim putem?Komunicira li dizajn svoju svrhu?Ima li previše “dizajna”? …
03
CopywritingUlijeva li copy povjerenje?Jesu li informacije točne?Smanjuju li neizvjesnost?Prodaju li ili pomažu?
04
AnalizaKoristite li provjerene podatke i dokazane istine kako bi potvrdili nešto?Koristite li podatke da bi naučiliistinu ili dokazali da ste u pravu?Analizirate li ponašanje korisnika?Koristite li realne podatke pri procjenama?…
05
Korisnička istraživanja
— najbolje prije zbog lakoće izmjena prototipa— upotreba znanstvene metode istraživanja— subjektivni i objektivni podaci
Što želimo znati o našim korisnicima?
Informacijska arhitektura
Organiziranje, kategoriziranje i nazivanje podataka radi boljeg snalaženja i iskoristivosti.
Komponente IA
Organizacijske sheme i struktureSustavi imenovanja / kategoriziranjaNavigacijski sustaviSustavi pretrage
Organizacijske sheme
ObjektivneAlfabetske shemeKronološke shemeGeografske sheme
SubjektivneTemeZadaciPublikaMetafore
Navigacijski sustavi
Kolekcije komponenata korisničkih sučelja s ciljem pronalaska informacija i funkcionalnosti.
Prototip
Prorotip je rani uzorak, model ili inačica proizvoda izrađena kako bi se testirao koncept, proces ili alat za učenje.W IK IPED I A ( PR OTOT Y PE )
Cost o
f prod
uct c
hang
es
Final stagesInitial stages
Mon
ey /
Hou
rsEkonomika prototipa
Planiranjem i prototipiranjemsustava smanjuju se troškovii eliminiraju viškovi.
Koristi od prototipa
Feature analizaAgilni pristup — brze iteracijeAlat za testiranje prije razvojaAlat za istraživanje tržiptaShvaćanje projekta i učenjeDokazivanje potreba
Wireframe vs Prototype
WireframeOsnovne informacijske grupeLayoutOsnovna vizualizacija
PrototipSrednja/visoka razlučivostSimulacija interakcijeUser flow testing alat
MockFlowBalsamiQInVisionSketchIllustratorInDesign
PhotoshopGimpInkscapeproto.ioMarvelJustInMind...
Alati
Vizualna hijerarhija — kontrast
Lorem ipsum dolor omet.Lorem ipsum dolor omet.Lorem ipsum dolor omet.Lorem ipsum dolor omet.Lorem ipsum dolor omet.
Lorem ipsum dolor omet.Lorem ipsum dolor omet.Lorem ipsum dolor omet.Lorem ipsum dolor omet.Lorem ipsum dolor omet.
Odabir tipografijeTon tipografijeTypesettingTipografska hijerarhijaReadability & LegibilityTipografski ritam…
Tipografija
Odabir tipografijeTon tipografijeTypesettingTipografska hijerarhijaReadability & LegibilityTipografski ritam…
Čitljivost
Gojazni đačić s biciklom drži hmelj i finu vatu u džepu nošnje.
Gojazni đačić s biciklom drži hmelj i finu vatu u džepu nošnje.
Gojazni đačić s biciklom drži hmelj i finu vatu u džepu nošnje. Gojazni đačić s biciklom drži hmelj i finu vatu u džepu nošnje. Gojazni đačić s biciklom drži hmelj i finu vatu u džepu nošnje.
Gojazni đačić s biciklom drži hmelj i finu vatu u džepu nošnje. Gojazni đačić s biciklom drži hmelj i finu vatu u džepu nošnje. Gojazni đačić s biciklom drži hmelj i finu vatu u džepu nošnje.
Content first
— sadržaj je cilj— dizajn sadržaja— vrijednost za korisnika— prvo sadržaj, onda sučelje
Context first
Sadržaj se kreira ovisnoo korisnikovu kontekstu (lokacija, vrijeme, podacisa uređaja i sl.).
Mobile first
Sučelje se kreira od najjednostavnijeg s osnovnim funkcijama prema kompliciranijim s naprednim funkcijama.
Compatibility
Progressive enhancementGracefull degradationProgressive enhancement vsgracefull degradation