Web Design Check-up – Top 10 mistakes and how to fix them

When you’re just starting out with your business, you often don’t have the budget to hire a professional designer to structure your content, craft a message and create your website. So you do it on your own, feeling a bit uncertain about the quality of the result and wondering what you could do better to gain more impact and stand out from the competition.

If you feel this way, this talk is just right for you. It will guide you through the top ten mistakes in web design and teach you how to avoid them, giving you the skills to improve your next project.

Top 10 web design mistakes:
1. No goals set
2. Not answering user questions
3. Missing story line
4. Confusing navigation
5. Poor structure
6. Bad usability
7. Cluttered pages
8. Bad Typography
9. No optimization for mobile
10. Forgetting to test

Transcript

1. Web Design Check-up Top 10 web design mistakes and how to cure them
2. 86/60 Oliver Schöndorfer glyphe
3. glyphe There is always a good reason for bad web design
4. glyphe ?
5. Can I orientate myself? glyphe What is it about? Is the atmosphere appealing? II. I. III.
6. II. I. III. Can I orientate myself? glyphe What is it about? Is the atmosphere appealing? II. Structure & Navigation I. Content III. Design
7. glyphe 10
8. Content
9. glyphe – It’s the most important part of your website – Not just text, also images, videos, audio files, etc. – Good quality, well structured and well wri en – Should consider SEO (Search Engine Optimization) Content is the heart of you website
10. No goals set 1
11. glyphe steman.at
12. glyphe steman.at Focus on returning visitors and the needs they might have
13. glyphe sensomotorische-koerpertherapie.at Guiding users 
 to the form to set an appointment
14. glyphe – What do you want to achieve with your website? – How do you want to connect with your customers or audience? – How could your website help you with your daily business? Set goals for your website
15. Not answering user questions 2
16. glyphe polizei.gv.at
17. glyphe polizei.gv.at Where can I find the next police station?
18. glyphe streamtimeapp.tv
19. glyphe streamtimeapp.tv Answering user questions where they could come up
20. glyphe – What is it about? – Why do I need it? What does it help me with? – What makes it special? (USP?) – What options do I have? What am I supposed to do? Answer user questions
21. Missing story line 3
22. glyphe betterspot.com
23. glyphe betterspot.com
24. glyphe betterspot.com
25. glyphe betterspot.com
26. glyphe betterspot.com
27. glyphe betterspot.com Attention What is it? What solves is? Interest In the topic privacy & security Desire Show features, app and ease of use Action Buy now
28. glyphe AIDA
29. glyphe – Think about what you want to tell your users – User the AIDA model – End with a call to action Craft a sound story line
30. Structure & Navigation
31. glyphe – Navigation gives orientation (where am I, where can I go?) – Structure brings order to chaos – Setting priorities helps to focus on what’s most important to you and your users Make it easy
32. Confusing navigation 4
33. glyphe kokua.de Cluttered navigation
34. glyphe hubblecontacts.com Simple navigation that is easy to process
35. glyphe avia-law.at Visible navigation on mobile makes it easy to access
36. glyphe – Five to seven items at most – Use short words – Think about mobile – Should always be accessible and at the same place Implement an easy to use navigation
37. Poor structure 5
38. glyphe 4connect-e.com
39. glyphe 4connect-e.com
40. glyphe forit.iondigi.com
41. glyphe forit.iondigi.com
42. glyphe forit.iondigi.com Obvious start of new page sections
43. glyphe giromatch.com Too many different elements and missing structure
44. glyphe microsoft.com Well structured footer due to the use of headings
45. glyphe More
46. glyphe View our services
47. glyphe – Clearly structure pages in sections – User headings and text emphasis – Provide speaking links Build a solid page structure
48. Bad usability 6
49. glyphe more-ohr-less.com What is a link? Heading Heading Link
50. glyphe forward-festival.com Unfamiliar usability patterns in various places
51. glyphe forward-festival.com Problematic drop down navigation
52. glyphe – Use conventional, familiar usability pa erns – Elements should behave in an expected way – Keep accessibility in mind Provide great usability
54. Design
55. glyphe – You can not not design something – It sets the mood and shows professionalism – Sometimes very obvious, sometimes subtle – Design alone can not save you Design is everywhere
56. Cluttered pages 7
57. glyphe leo-hillinger.com Crammed page that makes it hard to orientate oneself
58. glyphe leo-hillinger.com Crammed page that makes it hard to orientate oneself
59. glyphe leo-hillinger.com Unnecessary instructions on every page Very dense layout even on pages with little content
60. glyphe hubblecontacts.com Easy to catch process
61. glyphe – One key message per area – Structure your content – Add hierarchy and structure by utilizing space and size Tidy up your web design
62. Bad Typography 8
63. glyphe oolipo.com Very light text is hard to read
64. glyphe gosepp.com Very light text is hard to read
65. glyphe steigenberger.com Too small text on desktop (11 px)
66. glyphe tickets.oebb.at Bad readability due to small font size and low contrast
67. glyphe wien.gv.at Inappropriate typeface on iOS that appears smaller and makes is harder to read compared to Android  iOS Android
68. glyphe phpconference.com Dense and unequal typography doesn’t invite users to read the text
69. glyphe comstocksmag.com Inviting text well structured, easy to read
70. glyphe edenspiekermann.com Good typography through clear hierarchy, sufficient font size and contrast
71. glyphe – Use a robust text typeface – Provide clear hierarchy – Pay a ention to good contrast – Set text in sufficient size (16 px at least) Care about typography
72. No optimization for mobile 9
73. glyphe giromatch.com
74. glyphe giromatch.com Not obviously comparable options on mobile
75. glyphe gourban.at
76. glyphe gourban.at Navigation on mobile is hard to read
77. glyphe gourban.at
78. glyphe gourban.at Problematic hierarchy and too big text for mobile
79. glyphe – Content should fit and work on mobile – Same content for mobile as for desktop – Page should load fast even on mobile connections Think mobile first
80. Final Approval
81. Forgetting to test 10
82. glyphe tickets.oebb.at Wrong error messages
83. glyphe ragusa.swiss  iPhone SE  iPhone 6 Content does not fit
 on smaller screens
84. glyphe – Let people try it out and watch them while doing it – On various devices and screen sizes – In different situations (fast and slow connections) – With specific goals in mind (e.g. new visitor, returning visitor) Test your website
85. Can I orientate myself? glyphe What is it about? Is the atmosphere appealing? II. I. III.
86. glyphe 1 Set your goals 2 Answer user questions 3 Use a story line 4 Provide a simple navigation 5 Clearly structure your page 6 Provide good usability 7 Tidy up your design 8 Care about typography 9 Think mobile first 10 Test, test, test Web design checklist
87. Icons by hunotika from the Noun Project Let’s cure the web together! Oliver Schöndorfer glyphe www.8660.at