USERS
FIRST
Emanuel Blagonić
Tweet me back at @eblagonic
Slide 2
Slide 2 text
A designer
Slide 3
Slide 3 text
A community junkie
Photo by Mauricio Gelves
Slide 4
Slide 4 text
A community junkie
Photo by Mauricio Gelves
Slide 5
Slide 5 text
A father
Slide 6
Slide 6 text
A confession…
AND AT THE END I’LL POINT OUT WHY IT
WAS IMPORTANT
Slide 7
Slide 7 text
August 6, 1991
Slide 8
Slide 8 text
http://info.cern.ch/hypertext/WWW/TheProject.html
Slide 9
Slide 9 text
http://www.istarski-rjecnik.com
Slide 10
Slide 10 text
https://www.wikipedia.org
Slide 11
Slide 11 text
https://watsi.org
Slide 12
Slide 12 text
https://www.ted.com
Slide 13
Slide 13 text
https://www.couchsurfing.com
Slide 14
Slide 14 text
https://wordpress.org
Slide 15
Slide 15 text
https://heropress.com/
Slide 16
Slide 16 text
“
The original idea of the web was that it
should be a collaborative space where
you can communicate through sharing
information.
TIM BERNERS-LEE
Slide 17
Slide 17 text
Communicate
THROUGH SHARING INFORMATION
Slide 18
Slide 18 text
University of Advancing Technology
Slide 19
Slide 19 text
Budi dio koji nedostaje
Slide 20
Slide 20 text
The problem(s)
Slide 21
Slide 21 text
Menu icons
AND POOR NAVIGATION CHOICES
01
Slide 22
Slide 22 text
Parallax effect
THAT HAS NO REAL PURPOSE
02
Slide 23
Slide 23 text
Scroll hijacking
FOR NO REASON WHATSOEVER
03
Slide 24
Slide 24 text
Sliders
WITH NO APPARENT BENEFIT
04
Slide 25
Slide 25 text
Non-responsive websites
IN 2017
05
Slide 26
Slide 26 text
Accessibility
OR BETTER – A LACK OF IT
06
Slide 27
Slide 27 text
Slow loading websites
BECAUSE OF TONS OF UNNECESSARY ASSETS
07
Slide 28
Slide 28 text
And much more…
Slide 29
Slide 29 text
A story of Atari
USER EXPERIENCE (OR LACK OF IT)
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Atari: Game Over
http://www.imdb.com/title/tt3715406/
Slide 33
Slide 33 text
So, why are we doing
things this way?
Slide 34
Slide 34 text
¯\_(ツ)_/¯
Slide 35
Slide 35 text
— It’s easier
Slide 36
Slide 36 text
“
I guess that computers tends to make
us a little lazy about doing things the
hard way to understand how those
things work.
BUZZ ALDRIN
Slide 37
Slide 37 text
Can we make
things right?
Slide 38
Slide 38 text
Good website is…
Slide 39
Slide 39 text
Useful
Slide 40
Slide 40 text
USEFUL
— Information oriented
— With professionally written content
— With good microcopy
— With just enough information (remember, less is more)
Slide 41
Slide 41 text
Understandable
Slide 42
Slide 42 text
“
An intellectual says a simple thing in a
hard way. An artist says a hard thing in
a simple way.
CHARLES BUKOWSKI
Slide 43
Slide 43 text
UNDERSTANDABLE
— Written with clear and simple language
— By using enough headings
— And with meaningful titles, captions, lists, tables, …
Slide 44
Slide 44 text
Usable
Slide 45
Slide 45 text
USABLE
— With good navigation solutions
— With clear call to actions
— With no more than 75 characters per line
— With prioritised content when needed
Slide 46
Slide 46 text
Accessible
Slide 47
Slide 47 text
ACCESSIBLE
— With enough contrast – 4,5:1 or even 7:1
— With a high contrast mode (when possible)
— Is keyboard accessible
— Uses appropriate font sizes
— Don’t forgets titles, captions, alt tags
Slide 48
Slide 48 text
Detailed, yet simple
Slide 49
Slide 49 text
KEEP IT SIMPLE
— Don’t use large photos just for a sake of it
— Don’t use sliders to fill space
— Have enough whitespace
— Have clear call to actions
Slide 50
Slide 50 text
Free of clutter
Slide 51
Slide 51 text
Photo from the movie The Little Prince/Le Petit Prince
Slide 52
Slide 52 text
Celebrating the 25th Anniversary of the World Wide Web
Slide 53
Slide 53 text
We can change things.
Slide 54
Slide 54 text
Show empathy
THINK OF YOUR USERS BEFORE YOUR CLIENTS
Photo by Rémi Walle on Unsplash
Slide 55
Slide 55 text
Know your users
AND WHAT THEY NEED TO DO ON YOUR WEBSITE
Photo by Janko Ferlič on Unsplash
Slide 56
Slide 56 text
Respect your users
— DON’T WASTE THEIR TIME
Photo by Joshua Earle on Unsplash
Slide 57
Slide 57 text
Innovate
AS WE ARE THOSE WHO NEED TO
PUSH FOR INNOVATION
Photo by Alex Knight on Unsplash
Slide 58
Slide 58 text
Be bold
DON’T BE AFRAID OF YOUR MISTAKES
BUT LEARN ON THEM
Photo by Emma Frances Logan on Unsplash
Slide 59
Slide 59 text
Be emotional
AS BEING EMOTIONAL HELPS YOU
SEE THE BIGGER PICTURE
Photo by NASA on Unsplash
Slide 60
Slide 60 text
Be honest
TO YOUR USERS, TO YOUR CLIENTS
AND TO YOURSELF
Photo by Nicholas Sampson on Unsplash
Slide 61
Slide 61 text
Think and rethink
Photo by Prottoy Hassan on Unsplash
Slide 62
Slide 62 text
Doubt everything
Photo by Benjamin Davies on Unsplash
Slide 63
Slide 63 text
Do the right thing
Photo by Ludovic Fremondiere on Unsplash