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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

86/60 Oliver Schöndorfer glyphe

Slide 3

Slide 3 text

glyphe There is always a good reason for bad web design

Slide 4

Slide 4 text

glyphe ?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

glyphe 10

Slide 8

Slide 8 text

Content

Slide 9

Slide 9 text

glyphe – It’s the most important part of your website – Not just text, also images, videos, audio ﬁles, etc. – Good quality, well structured and well wri en – Should consider SEO (Search Engine Optimization) Content is the heart of you website

Slide 10

Slide 10 text

No goals set 1

Slide 11

Slide 11 text

glyphe steman.at

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

glyphe sensomotorische-koerpertherapie.at Guiding users   to the form to set an appointment

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Not answering user questions 2

Slide 16

Slide 16 text

glyphe polizei.gv.at

Slide 17

Slide 17 text

glyphe polizei.gv.at Where can I ﬁnd the next police station?

Slide 18

Slide 18 text

glyphe streamtimeapp.tv

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Missing story line 3

Slide 22

Slide 22 text

glyphe betterspot.com

Slide 23

Slide 23 text

glyphe betterspot.com

Slide 24

Slide 24 text

glyphe betterspot.com

Slide 25

Slide 25 text

glyphe betterspot.com

Slide 26

Slide 26 text

glyphe betterspot.com

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

glyphe AIDA

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Structure & Navigation

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Confusing navigation 4

Slide 33

Slide 33 text

glyphe kokua.de Cluttered navigation

Slide 34

Slide 34 text

glyphe hubblecontacts.com Simple navigation that is easy to process

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Poor structure 5

Slide 38

Slide 38 text

glyphe 4connect-e.com

Slide 39

Slide 39 text

glyphe 4connect-e.com

Slide 40

Slide 40 text

glyphe forit.iondigi.com

Slide 41

Slide 41 text

glyphe forit.iondigi.com

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

glyphe giromatch.com Too many different elements and missing structure

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

glyphe More

Slide 46

Slide 46 text

glyphe View our services

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Bad usability 6

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

glyphe forward-festival.com Problematic drop down navigation

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Design

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Cluttered pages 7

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

glyphe hubblecontacts.com Easy to catch process

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Bad Typography 8

Slide 63

Slide 63 text

glyphe oolipo.com Very light text is hard to read

Slide 64

Slide 64 text

glyphe gosepp.com Very light text is hard to read

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

No optimization for mobile 9

Slide 73

Slide 73 text

glyphe giromatch.com

Slide 74

Slide 74 text

glyphe giromatch.com Not obviously comparable options on mobile

Slide 75

Slide 75 text

glyphe gourban.at

Slide 76

Slide 76 text

glyphe gourban.at Navigation on mobile is hard to read

Slide 77

Slide 77 text

glyphe gourban.at

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

glyphe – Content should ﬁt and work on mobile – Same content for mobile as for desktop – Page should load fast even on mobile connections Think mobile ﬁrst

Slide 80

Slide 80 text

Final Approval

Slide 81

Slide 81 text

Forgetting to test 10

Slide 82

Slide 82 text

glyphe tickets.oebb.at Wrong error messages

Slide 83

Slide 83 text

glyphe ragusa.swiss  iPhone SE  iPhone 6 Content does not ﬁt  on smaller screens

Slide 84

Slide 84 text

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 speciﬁc goals in mind (e.g. new visitor, returning visitor) Test your website

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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 ﬁrst 10 Test, test, test Web design checklist

Slide 87

Slide 87 text

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