PROVIDE BETTER USER EXPERIENCETO YOUR PROJECT

What we will talk about?

1. UI - What is it?

2. UX - And that?

3. UI and UX in web world

4. Practical case - simple form

5. What web can offer you?

a) HTML5

b) CSS3

c) JavaScript

"The user interface, in the in-

dustrial design field of

human–machine interaction,

is the space where interac-

tion between humans and

machines occurs."

UI - what is it?

"...the goal of human-machine interaction engineering is to produce a user interface which makes it

easy, efficient, and enjoyable

to operate a machine in the way which produces the desired result."

UI - Good UI desing

UI of computer application/website

GRAPHICAL Textual auditory

KEYBOARD MOUSE TOUCHSCREEN

abc

USER

INTE

RFAC

E

USER EXPERIENCE is...

GRAPHICAL Textual auditory

KEYBOARD MOUSE TOUCHSCREEN

abc

USER

INTTE

RFAC

E

USER

EXPE

RIEN

CE

... the way a person feels about using a product, system or service.

User experience is subjective, because it is all about individual feeling.

REMEMBER

w

ord

of

m

outh

br

and

m

anag

emen

t

se

arch

eng

ine

st

rate

gy

resp

onse

tim

e

bro

wser

compa

tibility

stan

dard

complian

ce

WCAG-2 / section 508

compliance

colorscheme and contrast media use

graphic elements

placement

of elements

naming and

categorization

tone of voice

typography navigation

intuitiveness

structure

appropriate for

purpose

expected

information

no unexpected errors

conformity consistency

verifyability

satis

faction d

ifferen

tiatio

n

un

iquen

ess

content / presentation

separation

na

min

g

m

arke

ting

expected functionality

launch

implem

entation

graphic design

interaction design information architecture

conte

nt and fu

nctio

nalit

y

u

ser r

equ

irem

ents

str

ategic foundation

phhaasephhhaasephas

ephas

e

productiondevelopm

entconceptu

alst

rate

gic

cust

omer

provider

experi

ence

user

VALUE

findability accessability desirability usability

cr

edib

ility

u

sefu

lnes

s

findability accessability desirability usability

cr

edib

ility

u

sefu

lnes

s

don't underestimate the power of user experience

strategic phase

conceptual phase

development phase

production phase

user experience - usabilitycem

ents

plac

emen

t

of el

ement

s

naming and categorization

tone of voice

typ

ogra

phy

navigation

intuitiveness

structure

conformity

consistencyfyabilit

finda

bilit

y

a

ccessab

ility desirability usability

credibility usefulness

usability

usability - luke wroblewski

Site Seeing: A Visual Approach To Web Usability

Web Form Design

mobile first

rand

m

anag

eme

sear

ch en

gine

stra

tegy

response

time

browser

compatibility

standard compliance

WCAG-2 / section 508 compliance content / presentation

separation

mar

ketin

g

findability accessability desirability u

sability

c

redi

bilit

y

usef

ulnessty

accessability deuser experience - accessibility

USABILITY AND ACCESSIBILITY ARE REALLY IMPORTANT

be helpful give access

practical case - simple form

positive feedback

negative feedback

negative feedback - option a

negative feedback - option B

twitter help

new technologies come to help you

html 5 css 3 javascript

html 5 new form features

New elements - native validation<input type=”email” /> <input type=“number” /><input type=”url” /> <input type=“range” /><input type=”date” /> <input type=“tel” /><input type=”time” /> <input type=“color” /><input type=”datetime” /> <input type=”week” /><input type=”month” />

new attributes<input type=”text” placeholder=”Write e-mail” /><input type=”text” required=”required” /><input type=”file” multiple=”multiple” /><input type=”text” pattern=”[0-9]{2}-[0-9]{3}” /><input type=”number” min=”0” max=”100” step=”5” />

VIDEO player & audioplayer<video src=”our-video.ogv” autoplay=”autoplay” controls=”controls” poster=”123.jpg”> </video>

camera, micROPHONE access

html 5 native power

web socketsONLINE GAMES, CHATS, REAL TIME INFO

web storageSESSION STORAGE - ON E WINDOWLOCAL STORAGE - BASED ON DOMAIN

CANVAS2D DRAWING

html 5 advanced

CSS 3 user experience

border-radiustext-shadow box-shadow opacity

rgbagradient multiple bg

ABCABC

CSS 3 buttons

border-radius text-shadowbox-shadow gradient

CSS 3 animations

TRANSLATE

SKEW

SCALE

ROTATE

JS - jquery user interface

interactions widgetsdraggable accordion menu

progressbar

slider

spinner

tabs

autocomplete

button

datepicker

dialog

droppable

selectable

sortable

resizable

JS - turn.js

JS - BE RESPONSIVE MASONRY PLUGIN

Thank you