Users first

What are the most frequent mistakes both clients and designers make in their quest to design visually appealing websites? And, where is the barrier between visual and functional? How to focus on users instead of building a good–looking website/or/application that users will hate to use? And how to say no to clients "overthinking" the user interface?

The design shouldn't be just a "nice looking interface" – it is so much more. The design has to solve problems and not create new ones. Let's explore together what are the best practices and how to escape from the usual client wishes.

Transcript

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