Users first

Ab1837782bc07b80199a2290c6372643?s=47 Emanuel Blagonic
November 18, 2017

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.

Ab1837782bc07b80199a2290c6372643?s=128

Emanuel Blagonic

November 18, 2017
Tweet

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)

  30. None
  31. None
  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