Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Oliver Schöndorfer

November 08, 2017
Tweet

More Decks by Oliver Schöndorfer

Other Decks in Design

Transcript

  1. Web Design Check-up
    Top 10 web design mistakes and how to cure them

    View full-size slide

  2. 86/60
    Oliver Schöndorfer glyphe

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 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 full-size slide

  7. No goals set
    1

    View full-size slide

  8. glyphe
    steman.at

    View full-size slide

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

    View full-size slide

  10. glyphe
    sensomotorische-koerpertherapie.at
    Guiding users 

    to the form to set
    an appointment

    View full-size slide

  11. 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 full-size slide

  12. Not answering user questions
    2

    View full-size slide

  13. glyphe
    polizei.gv.at

    View full-size slide

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

    View full-size slide

  15. glyphe
    streamtimeapp.tv

    View full-size slide

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

    View full-size slide

  17. 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 full-size slide

  18. Missing story line
    3

    View full-size slide

  19. glyphe
    betterspot.com

    View full-size slide

  20. glyphe
    betterspot.com

    View full-size slide

  21. glyphe
    betterspot.com

    View full-size slide

  22. glyphe
    betterspot.com

    View full-size slide

  23. glyphe
    betterspot.com

    View full-size slide

  24. 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 full-size slide

  25. 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 full-size slide

  26. Structure & Navigation

    View full-size slide

  27. 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 full-size slide

  28. Confusing navigation
    4

    View full-size slide

  29. glyphe
    kokua.de
    Cluttered
    navigation

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. 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 full-size slide

  33. Poor structure
    5

    View full-size slide

  34. glyphe
    4connect-e.com

    View full-size slide

  35. glyphe
    4connect-e.com

    View full-size slide

  36. glyphe
    forit.iondigi.com

    View full-size slide

  37. glyphe
    forit.iondigi.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. glyphe
    View our services

    View full-size slide

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

    View full-size slide

  43. Bad usability
    6

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. 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 full-size slide

  49. Cluttered pages
    7

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. glyphe
    hubblecontacts.com
    Easy to catch
    process

    View full-size slide

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

    View full-size slide

  55. Bad Typography
    8

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  64. 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 full-size slide

  65. No optimization for mobile
    9

    View full-size slide

  66. glyphe
    giromatch.com

    View full-size slide

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

    View full-size slide

  68. glyphe
    gourban.at

    View full-size slide

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

    View full-size slide

  70. glyphe
    gourban.at

    View full-size slide

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

    View full-size slide

  72. 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 full-size slide

  73. Final Approval

    View full-size slide

  74. Forgetting to test
    10

    View full-size slide

  75. glyphe
    tickets.oebb.at
    Wrong error
    messages

    View full-size slide

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

    on smaller screens

    View full-size slide

  77. 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 full-size slide

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

    View full-size slide

  79. 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 full-size slide

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

    View full-size slide