twitter: @amlinarevmedium: @amlinarevandrej@mono.hr

Prototyping

UX & UXD

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 &poslovni ciljevi

Korisnički ciljevi Poslovni ciljevi

Gledanje videaČitanje člankaPostanje statusaSlanje pošteChat

ProdajaBrand awarenessGradnja zajednicePrikupljanjepodataka

A B

Usklađivanje ciljeva

Korisnikov dolazak do cilja rezultira poslovnim ciljem.BA

Cilj?

Cilj?

Elementikorisničkogiskustva

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

Razumijevanjekorisničkih potreba

You are not your users.

— UNK NOW N

Marketinška istraživanja

Istraživanje tržišta, potreba potrošača i tržišnih potencijala.

Marketinška istraživanja

Korisnička istraživanja

!=

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?

If the user can’t use it, it doesn’t work.

— SU SA N DR AY

IA

Informacijska arhitektura

Organiziranje, kategoriziranje i nazivanje podataka radi boljeg snalaženja i iskoristivosti.

IA odgovara na pitanja

Gdje sam?Što sam pronašao? Što je u okolini? Što mogu očekivati?

Komponente IA

Organizacijske sheme i struktureSustavi imenovanja / kategoriziranjaNavigacijski sustaviSustavi pretrage

Organizacijske sheme

ObjektivneAlfabetske shemeKronološke shemeGeografske sheme

SubjektivneTemeZadaciPublikaMetafore

HijerarhijskeSekvencijalne

Organizacijske strukture

Navigacijski sustavi

Kolekcije komponenata korisničkih sučelja s ciljem pronalaska informacija i funkcionalnosti.

Primarna navigacija

Sekundarna navigacija

Kontekstualna navigacija

Sustavi pretrage

Prototyping

Tri put’ mjeri, jednom reži.— STA R A N A R ODN A

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

Proof-of-Principle PrototypeForm Study Prototype

Vrste prototipa

Proces prototipiranja

Skica

Prototip

Testiranje

Wireframe vs Prototype

WireframeOsnovne informacijske grupeLayoutOsnovna vizualizacija

PrototipSrednja/visoka razlučivostSimulacija interakcijeUser flow testing alat

MockFlowBalsamiQInVisionSketchIllustratorInDesign

PhotoshopGimpInkscapeproto.ioMarvelJustInMind...

Alati

Low fidelityprototype

High fidelityprototype

Vizualni dizajn

F uzorak

Vizualna hijerarhija — veličina

Drugo?Prvo ili

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 firstContext firstMobile first

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

Compatibility

Progressive enhancementGracefull degradation

Hvala!Pitanja?

www.mono-software.comtwitter.com/monosoftwaredenis@mono-software.com

Looking for work?We are hiring!

Workshop:Prototyping with Balsamiq