provide better user experience to your project
DESCRIPTION
Presentation about user experience - why it is important, what HTML5, CSS3, JavaScript brings to us.TRANSCRIPT
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