Presentation about user experience - why it is important, what HTML5, CSS3, JavaScript brings to us.

1. PROVIDE BETTER
USER EXPERIENCE
TO YOUR PROJECT

2. Whatwewilltalkabout?
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

3. "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-whatisit?

4. "...the goalof
human-machine interaction engineering
is to produce a user interface which makes it
easy,
efficient,
andenjoyable
to operate a machine in the way which
produces the desired result."
UI-Good UI desing

5. UI of computerapplication/website
GRAPHICAL Textual auditory
KEYBOARD MOUSE TOUCHSCREEN
abc
USERINTERFACE

6. USER EXPERIENCEis...
GRAPHICAL Textual auditory
KEYBOARD MOUSE TOUCHSCREEN
abc
USERINTTERFACE
USEREXPERIENCE
... the way a person feels about using
a product, system or service.
User experience is subjective,
because it is all about
individual feeling.
REMEMBER

7. wordof
mouth
brand
management
searchengine
strategyresponse
time
browser
compatibility
standard
compliance
WCAG-2 / section 508
compliance
colorscheme
and contrast
mediause
graphicelements
placement
ofelements
namingandcategorization
toneof
voice
typography
navigation
intuitiveness
structure
appropriatefor
purpose
expected
information
nounexpected
errors
conform
ity
consistency
verifyability
satisfaction
differentiation
uniqueness
content / presentation
separation
naming
marketing
expected
functionality
launch
im
plementation
graphicdesign
interactiondesign
informationarchitecture
conten
tandfunctionality
userrequirements
strategic foundation
phhaasephhhaa
se
phasephase
pro
ductiondevelop
m
ent
co
nceptualstrateg
ic
customer
provider
experi
ence
user
VALUE
findability
accessabilitydesirability
usability
credibilityusefulness
findability
accessabilitydesirability
usability
credibilityusefulness
don'tunderestimatethepowerofuserexperience
strategic phase
conceptual phase
development phase
production phase

8. userexperience-usability
cements
placement
of elements
naming andcategorization
tone of
voice
typography
navigation
intuitiveness
structure
conform
ity
consistency
fyabilit
findability
accessability desirability
usability
credibilityusefulness
usability

9. usability-lukewroblewski
SiteSeeing:AVisualApproachToWebUsability
WebFormDesign
mobilefirst

10. randmanageme
search engine
strategy
response
time
browser
compatibility
standard
compliance
WCAG-2 / section 508
compliance
content / presentation
separation
m
arketing
findability
accessability
d
esirabilityusability
credibility
usefulness
ty
accessability
d
e
userexperience-accessibility

11. USABILITYANDACCESSIBILITYARE REALLYIMPORTANT
be helpful give access

12. practicalcase-simple form

13. positivefeedback

14. negativefeedback

15. negativefeedback-optiona

16. negativefeedback-optionB

17. twitterhelp

18. newtechnologiescometohelpyou
html5 css3 javascript

19. html5 newform features
Newelements-nativevalidation
<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” />
newattributes
<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” />

20. VIDEOplayer&audioplayer
<video src=”our-video.ogv” autoplay=”autoplay”
controls=”controls” poster=”123.jpg”> </video>
camera,micROPHONEaccess
html5 nativepower

21. websockets
ONLINEGAMES,CHATS,REALTIME INFO
webstorage
SESSION STORAGE-ONE WINDOW
LOCAL STORAGE-BASED ON DOMAIN
CANVAS
2DDRAWING
html5 advanced

22. CSS3 user experience
border-radiustext-shadow box-shadow opacity
rgbagradient multiple bg
ABCABC

23. CSS3 buttons
border-radius text-shadowbox-shadow gradient

24. CSS3 animations
TRANSLATE
SKEW
SCALE
ROTATE

25. JS - jqueryuserinterface
interactions widgets
draggable accordion menu
progressbar
slider
spinner
tabs
autocomplete
button
datepicker
dialog
droppable
selectable
sortable
resizable

26. JS -turn.js

27. JS -BERESPONSIVEMASONRYPLUGIN

28. Thankyou