provide better user experience to your project
DESCRIPTION
Presentation about user experience - why it is important, what HTML5, CSS3, JavaScript brings to us.TRANSCRIPT
![Page 1: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/1.jpg)
PROVIDE BETTER USER EXPERIENCETO YOUR PROJECT
![Page 2: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/2.jpg)
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
![Page 3: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/3.jpg)
"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?
![Page 4: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/4.jpg)
"...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
![Page 5: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/5.jpg)
UI of computer application/website
GRAPHICAL Textual auditory
KEYBOARD MOUSE TOUCHSCREEN
abc
USER
INTE
RFAC
E
![Page 6: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/6.jpg)
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
![Page 7: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/7.jpg)
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
![Page 8: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/8.jpg)
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
![Page 9: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/9.jpg)
usability - luke wroblewski
Site Seeing: A Visual Approach To Web Usability
Web Form Design
mobile first
![Page 10: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/10.jpg)
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
![Page 11: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/11.jpg)
USABILITY AND ACCESSIBILITY ARE REALLY IMPORTANT
be helpful give access
![Page 12: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/12.jpg)
practical case - simple form
![Page 13: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/13.jpg)
positive feedback
![Page 14: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/14.jpg)
negative feedback
![Page 15: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/15.jpg)
negative feedback - option a
![Page 16: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/16.jpg)
negative feedback - option B
![Page 17: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/17.jpg)
twitter help
![Page 18: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/18.jpg)
new technologies come to help you
html 5 css 3 javascript
![Page 19: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/19.jpg)
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” />
![Page 20: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/20.jpg)
VIDEO player & audioplayer<video src=”our-video.ogv” autoplay=”autoplay” controls=”controls” poster=”123.jpg”> </video>
camera, micROPHONE access
html 5 native power
![Page 21: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/21.jpg)
web socketsONLINE GAMES, CHATS, REAL TIME INFO
web storageSESSION STORAGE - ON E WINDOWLOCAL STORAGE - BASED ON DOMAIN
CANVAS2D DRAWING
html 5 advanced
![Page 22: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/22.jpg)
CSS 3 user experience
border-radiustext-shadow box-shadow opacity
rgbagradient multiple bg
ABCABC
![Page 23: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/23.jpg)
CSS 3 buttons
border-radius text-shadowbox-shadow gradient
![Page 24: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/24.jpg)
CSS 3 animations
TRANSLATE
SKEW
SCALE
ROTATE
![Page 25: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/25.jpg)
JS - jquery user interface
interactions widgetsdraggable accordion menu
progressbar
slider
spinner
tabs
autocomplete
button
datepicker
dialog
droppable
selectable
sortable
resizable
![Page 26: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/26.jpg)
JS - turn.js
![Page 27: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/27.jpg)
JS - BE RESPONSIVE MASONRY PLUGIN
![Page 28: Provide better user experience to your project](https://reader033.vdocuments.us/reader033/viewer/2022051411/5465e64aaf79597e288b587c/html5/thumbnails/28.jpg)
Thank you