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
   

   View Slide

2. 86/60
   Oliver Schöndorfer glyphe
   

   View Slide

3. glyphe
   There is always a good
   reason for bad web design
   

   View Slide

4. glyphe
   ?
   

   View Slide

5. Can I orientate myself?
   glyphe
   What is it about?
   Is the atmosphere appealing?
   II.
   I.
   III.
   

   View Slide

6. II.
   I.
   III.
   Can I orientate myself?
   glyphe
   What is it about?
   Is the atmosphere appealing?
   II. Structure & Navigation
   I. Content
   III. Design
   

   View Slide

7. glyphe
   10
   

   View Slide

8. Content
   

   View Slide

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
   

   View Slide

10. No goals set
    1
    

    View Slide

11. glyphe
    steman.at
    

    View Slide

12. glyphe
    steman.at
    Focus on returning
    visitors and the
    needs they might
    have
    

    View Slide

13. glyphe
    sensomotorische-koerpertherapie.at
    Guiding users 

    to the form to set
    an appointment
    

    View Slide

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
    

    View Slide

15. Not answering user questions
    2
    

    View Slide

16. glyphe
    polizei.gv.at
    

    View Slide

17. glyphe
    polizei.gv.at
    Where can I find
    the next police
    station?
    

    View Slide

18. glyphe
    streamtimeapp.tv
    

    View Slide

19. glyphe
    streamtimeapp.tv
    Answering user
    questions where
    they could come up
    

    View Slide

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
    

    View Slide

21. Missing story line
    3
    

    View Slide

22. glyphe
    betterspot.com
    

    View Slide

23. glyphe
    betterspot.com
    

    View Slide

24. glyphe
    betterspot.com
    

    View Slide

25. glyphe
    betterspot.com
    

    View Slide

26. glyphe
    betterspot.com
    

    View Slide

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
    

    View Slide

28. glyphe
    AIDA
    

    View Slide

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
    

    View Slide

30. Structure & Navigation
    

    View Slide

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
    

    View Slide

32. Confusing navigation
    4
    

    View Slide

33. glyphe
    kokua.de
    Cluttered
    navigation
    

    View Slide

34. glyphe
    hubblecontacts.com
    Simple navigation
    that is easy to
    process
    

    View Slide

35. glyphe
    avia-law.at
    Visible navigation
    on mobile makes it
    easy to access
    

    View Slide

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
    

    View Slide

37. Poor structure
    5
    

    View Slide

38. glyphe
    4connect-e.com
    

    View Slide

39. glyphe
    4connect-e.com
    

    View Slide

40. glyphe
    forit.iondigi.com
    

    View Slide

41. glyphe
    forit.iondigi.com
    

    View Slide

42. glyphe
    forit.iondigi.com
    Obvious start of
    new page sections
    

    View Slide

43. glyphe
    giromatch.com
    Too many different
    elements and
    missing structure
    

    View Slide

44. glyphe
    microsoft.com
    Well structured
    footer due to the
    use of headings
    

    View Slide

45. glyphe
    More
    

    View Slide

46. glyphe
    View our services
    

    View Slide

47. glyphe
    – Clearly structure pages in sections
    – User headings and text emphasis
    – Provide speaking links
    Build a solid page structure
    

    View Slide

48. Bad usability
    6
    

    View Slide

49. glyphe
    more-ohr-less.com
    What is a link?
    Heading
    Heading
    Link
    

    View Slide

50. glyphe
    forward-festival.com
    Unfamiliar
    usability patterns
    in various places
    

    View Slide

51. glyphe
    forward-festival.com
    Problematic drop
    down navigation
    

    View Slide

52. glyphe
    – Use conventional, familiar usability pa erns
    – Elements should behave in an expected way
    – Keep accessibility in mind
    Provide great usability
    

    View Slide

53. View Slide

54. Design
    

    View Slide

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
    

    View Slide

56. Cluttered pages
    7
    

    View Slide

57. glyphe
    leo-hillinger.com
    Crammed page
    that makes it hard
    to orientate oneself
    

    View Slide

58. glyphe
    leo-hillinger.com
    Crammed page
    that makes it hard
    to orientate oneself
    

    View Slide

59. glyphe
    leo-hillinger.com
    Unnecessary
    instructions
    on every page
    Very dense layout
    even on pages with
    little content
    

    View Slide

60. glyphe
    hubblecontacts.com
    Easy to catch
    process
    

    View Slide

61. glyphe
    – One key message per area
    – Structure your content
    – Add hierarchy and structure by utilizing space and size
    Tidy up your web design
    

    View Slide

62. Bad Typography
    8
    

    View Slide

63. glyphe
    oolipo.com
    Very light text
    is hard to read
    

    View Slide

64. glyphe
    gosepp.com
    Very light text
    is hard to read
    

    View Slide

65. glyphe
    steigenberger.com
    Too small text
    on desktop (11 px)
    

    View Slide

66. glyphe
    tickets.oebb.at
    Bad readability
    due to small font
    size and low
    contrast
    

    View Slide

67. glyphe
    wien.gv.at
    Inappropriate typeface
    on iOS that appears
    smaller and makes is
    harder to read compared
    to Android
     iOS
    Android
    

    View Slide

68. glyphe
    phpconference.com
    Dense and unequal
    typography doesn’t
    invite users to read
    the text
    

    View Slide

69. glyphe
    comstocksmag.com
    Inviting text
    well structured,
    easy to read
    

    View Slide

70. glyphe
    edenspiekermann.com
    Good typography
    through clear
    hierarchy, sufficient
    font size and
    contrast
    

    View Slide

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
    

    View Slide

72. No optimization for mobile
    9
    

    View Slide

73. glyphe
    giromatch.com
    

    View Slide

74. glyphe
    giromatch.com
    Not obviously comparable
    options on mobile
    

    View Slide

75. glyphe
    gourban.at
    

    View Slide

76. glyphe
    gourban.at
    Navigation on mobile
    is hard to read
    

    View Slide

77. glyphe
    gourban.at
    

    View Slide

78. glyphe
    gourban.at
    Problematic hierarchy
    and too big text for mobile
    

    View Slide

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
    

    View Slide

80. Final Approval
    

    View Slide

81. Forgetting to test
    10
    

    View Slide

82. glyphe
    tickets.oebb.at
    Wrong error
    messages
    

    View Slide

83. glyphe
    ragusa.swiss
     iPhone SE
     iPhone 6
    Content does not fit

    on smaller screens
    

    View Slide

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
    

    View Slide

85. Can I orientate myself?
    glyphe
    What is it about?
    Is the atmosphere appealing?
    II.
    I.
    III.
    

    View Slide

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
    

    View Slide

87. Icons by hunotika from the Noun Project
    Let’s cure the web together!
    Oliver Schöndorfer glyphe www.8660.at
    

    View Slide