Tweet
Tweet

Slide 1

Slide 1 text

Erste Hilfe Web Design Zehn tödliche Krankheiten und wie man sie heilt

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

86/60 Oliver Schöndorfer glyphe

Slide 6

Slide 6 text

glyphe Schlechtes Design hat
 immer gute Gründe

Slide 7

Slide 7 text

glyphe ?

Slide 8

Slide 8 text

Kann ich mich zurechtfinden? glyphe Worum geht es? Ist die Atmosphäre ansprechend? II. I. III.

Slide 9

Slide 9 text

II. I. III. glyphe II. Struktur & Navigation I. Inhalte III. Design Kann ich mich zurechtfinden? Worum geht es? Ist die Atmosphäre ansprechend?

Slide 10

Slide 10 text

glyphe 10

Slide 11

Slide 11 text

Inhalte

Slide 12

Slide 12 text

glyphe – Sie sind der wichtigste Teil – Nicht nur Text, auch Bilder, Videos, Audio-Files, etc. – Gute Qualität, gut strukturiert und gut geschrieben – Sollten SEO bedenken Die Inhalte sind das Herz einer Website

Slide 13

Slide 13 text

Ziellosigkeit 1

Slide 14

Slide 14 text

glyphe gartenbaukino.at Ticket-Kauf immer möglich an vielen Stellen

Slide 15

Slide 15 text

glyphe gartenbaukino.at Ticket-Kauf immer möglich an vielen Stellen

Slide 16

Slide 16 text

glyphe gartenbaukino.at Ticket-Kauf immer möglich an vielen Stellen

Slide 17

Slide 17 text

glyphe steman.at

Slide 18

Slide 18 text

glyphe steman.at Wiederkehrende User im Fokus

Slide 19

Slide 19 text

glyphe sensomotorische-koerpertherapie.at Besucher anleiten 
 ein Formular auszufüllen, um einen Termin zu vereinbaren

Slide 20

Slide 20 text

glyphe – Was soll mit der Website erreicht werden? – Wie soll man sich mit den Kunden oder der Zielgruppe verbinden? – Wie könnte die Website im Tagesgeschä unterstützen? Lege Ziele für die Website fest

Slide 21

Slide 21 text

User-Bedürfnisse ignorieren 2

Slide 22

Slide 22 text

glyphe polizei.gv.at

Slide 23

Slide 23 text

glyphe polizei.gv.at Wo ist die nächste Polizeiwache?

Slide 24

Slide 24 text

glyphe streamtimeapp.tv

Slide 25

Slide 25 text

glyphe streamtimeapp.tv Mögliche Fragen dort beantworten, wo sie entstehen

Slide 26

Slide 26 text

glyphe – Worum geht es? – Wozu brauche ich das? Wobei hil es mir? – Was macht es besonders? (USP?) – Welche Optionen gibt es? Was soll ich machen? Beantworte Fragen der User

Slide 27

Slide 27 text

Fehlende Story Line 3

Slide 28

Slide 28 text

glyphe miyo.garden

Slide 29

Slide 29 text

glyphe miyo.garden

Slide 30

Slide 30 text

glyphe miyo.garden

Slide 31

Slide 31 text

glyphe miyo.garden

Slide 32

Slide 32 text

glyphe miyo.garden

Slide 33

Slide 33 text

glyphe miyo.garden

Slide 34

Slide 34 text

glyphe miyo.garden Vage Headlines, zu viel Text Bilder bezugslos zum Inhalt vorwiegend Dekoration Undeutliche Darstellung
 der Funktionsweise Undeutliche Zuordnung
 der Inhalte Keine Kaufaufforderung
 bis zum Ende der Seite Gute Feature-Aufbereitung

Slide 35

Slide 35 text

glyphe betterspot.com

Slide 36

Slide 36 text

glyphe betterspot.com

Slide 37

Slide 37 text

glyphe betterspot.com

Slide 38

Slide 38 text

glyphe betterspot.com

Slide 39

Slide 39 text

glyphe betterspot.com

Slide 40

Slide 40 text

glyphe betterspot.com Attention Was ist es? Wobei hilft es? Interest In die Themen Datenschutz und Sicherheit Desire Features, App und einfache Anwendung zeigen Action Jetzt kaufen

Slide 41

Slide 41 text

glyphe AIDA

Slide 42

Slide 42 text

glyphe – Denk darüber nach was du erzählen möchtest – Nutze das AIDA-Modell – Ende mit einer Aufforderung, einem Call to Action Entwickle eine klare Story Line

Slide 43

Slide 43 text

Struktur & Navigation

Slide 44

Slide 44 text

glyphe – Navigation scha Orientierung (wo bin ich, wohin kann ich gehen?) – Klare Struktur ordnet das Chaos – Setze Prioritäten, das fokussiert darauf was für Website und Nutzer am wichtigsten ist Mach es Menschen einfach

Slide 45

Slide 45 text

Verwirrende Navigation 4

Slide 46

Slide 46 text

glyphe kokua.de Überladene Navigation

Slide 47

Slide 47 text

glyphe issmich.at Überladene Navigation

Slide 48

Slide 48 text

glyphe hubblecontacts.com Simple Navigation die man leicht überblicken kann

Slide 49

Slide 49 text

glyphe avia-law.at Sichtbare Navigation ist am Handy leichter zugängliche

Slide 50

Slide 50 text

glyphe – Fünf bis sieben Links maximal – Verwende kurze Wörter – Denke an Mobile – Sollte immer zugänglich und an der selben Stelle sein Schaffe eine einfache Navigation

Slide 51

Slide 51 text

Unklare Struktur 5

Slide 52

Slide 52 text

glyphe 4connect-e.com

Slide 53

Slide 53 text

glyphe 4connect-e.com

Slide 54

Slide 54 text

glyphe 4connect-e.com Unklare Trennung der Seitenbereiche

Slide 55

Slide 55 text

glyphe forit.iondigi.com

Slide 56

Slide 56 text

glyphe forit.iondigi.com

Slide 57

Slide 57 text

glyphe forit.iondigi.com Klarer Anfang eines neuen Bereichs

Slide 58

Slide 58 text

glyphe giromatch.com Viele verschiedene Elemente und fehlende Struktur

Slide 59

Slide 59 text

glyphe microsoft.com Saubere Struktur durch Gliederung mittels Überschriften

Slide 60

Slide 60 text

glyphe Mehr

Slide 61

Slide 61 text

glyphe Wie wir helfen können

Slide 62

Slide 62 text

glyphe – Unterteile die Website in deutliche Sektionen – Nutze Überschriften und Textauszeichnungen – Verwende sprechende Links Baue eine klare Seitenstruktur

Slide 63

Slide 63 text

Schlechte Usability 6

Slide 64

Slide 64 text

glyphe more-ohr-less.com Was ist ein Link? Überschrift Überschrift Link

Slide 65

Slide 65 text

glyphe forward-festival.com Unvertraute Usability Patterns an mehreren Stellen

Slide 66

Slide 66 text

glyphe autistenhilfe.at Problematisches Drop-Down-Menü

Slide 67

Slide 67 text

glyphe fotografen.at

Slide 68

Slide 68 text

glyphe fotografen.at

Slide 69

Slide 69 text

glyphe fotografen.at Unerwarteter Layoutwechsel beim Klick auf einzelne Links

Slide 70

Slide 70 text

glyphe schlosshof.at

Slide 71

Slide 71 text

glyphe schlosshof.at Unklare Inkonografie ohne ALT-Text oder Erklärung

Slide 72

Slide 72 text

glyphe – Nutze bekannte, vertraute Usability Pa erns – Gewisse Elemente sollten sich wie erwartet verhalten – Denke an Accessibility Biete die beste Usability

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

Design

Slide 75

Slide 75 text

glyphe – Du kannst nichts nicht gestalten – Es legt die Stimmung fest und zeugt von Professionalität – Manchmal ist es offensichtlich, machmal subtil – Design alleine kann nichts retten Alles ist Design

Slide 76

Slide 76 text

Überladene Seiten 7

Slide 77

Slide 77 text

glyphe amstoan.com Ohne Kommentar

Slide 78

Slide 78 text

glyphe leo-hillinger.com Überladene Seite auf der es schwer ist sich zu orientieren

Slide 79

Slide 79 text

glyphe leo-hillinger.com Überladene Seite auf der es schwer ist sich zu orientieren

Slide 80

Slide 80 text

glyphe leo-hillinger.com Unnötige Instruktionen auf jeder Seite Sehr dichtes Layout selbst auf Seiten mit wenig Inhalt

Slide 81

Slide 81 text

glyphe hubblecontacts.com Einfach erfassbarer Prozess

Slide 82

Slide 82 text

glyphe – Eine Kernaussage pro Seitenbereich – Strukturiere die Inhalte – Schaffe Hierarchie durch Abstände und Größenverhältnisse Räum dein Design auf

Slide 83

Slide 83 text

Schlechte Typografie 8

Slide 84

Slide 84 text

glyphe oolipo.com Sehr heller Text ist schwer zu lesen

Slide 85

Slide 85 text

glyphe gosepp.com Sehr heller Text ist schwer zu lesen

Slide 86

Slide 86 text

glyphe steigenberger.com Zu kleiner Text für Desktop (11 px)

Slide 87

Slide 87 text

glyphe tickets.oebb.at Sehr schlechte Lesbarkeit wegen zu kleiner Schrift und wenig Kontrast

Slide 88

Slide 88 text

glyphe wien.gv.at Unpassende Schriftart auf iOS, die den Text schwerer zu lesen macht, als auf Android  iOS Android

Slide 89

Slide 89 text

glyphe phpconference.com Dichte, unruhige Typografie die einen nicht einlädt den Text zu lesen

Slide 90

Slide 90 text

glyphe comstocksmag.com Einladender Text sauber strukturiert, leicht zu lesen

Slide 91

Slide 91 text

glyphe edenspiekermann.com Gute Typografie durch deutliche Hierarchie, große Schrift und gutem Kontrast

Slide 92

Slide 92 text

glyphe – Nutze robuste Schri arten – Schaffe deutliche Hierarchien – Achte auf guten Kontrast – Setze den Text in ausreichender Größe (mind. 16 px) – Verwende niemals Blocksatz im Web – Niemals Hab ein Herz für Typografie

Slide 93

Slide 93 text

Keine Optimierung für Mobile 9

Slide 94

Slide 94 text

glyphe giromatch.com

Slide 95

Slide 95 text

glyphe giromatch.com Nicht direkt vergleichbar auf einem Smartphone

Slide 96

Slide 96 text

glyphe gourban.at

Slide 97

Slide 97 text

glyphe gourban.at Kaum lesbare Navigation am Handy

Slide 98

Slide 98 text

glyphe gourban.at

Slide 99

Slide 99 text

glyphe gourban.at Problematische Hierarchie und zu großer Text fürs Handy

Slide 100

Slide 100 text

glyphe – Inhalte müssen auch am Handy passen und funktionieren – Gleiche Inhalte für Mobile und Desktop – Seiten sollten schnell laden, auch im Mobilfunknetz Denke Mobile first

Slide 101

Slide 101 text

Zur Untersuchung

Slide 102

Slide 102 text

Aufs Testen vergessen 10

Slide 103

Slide 103 text

glyphe tickets.oebb.at Falsche Fehlermeldungen

Slide 104

Slide 104 text

glyphe ragusa.swiss  iPhone SE  iPhone 6 Inhalt passt nicht
 auf kleinere Bildschirme

Slide 105

Slide 105 text

glyphe – Beobachte User, wie sie die Website verwenden – Auf verschiedenen Geräten und Auflösungen testen – In verschiedenen Situationen (schelle und langsame Verbindung) – Mit bestimmten Zielen (z.B. neue Kunden gewinnen) Teste deine Website

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

glyphe II. I. III. Kann ich mich zurechtfinden? Worum geht es? Ist die Atmosphäre ansprechend?

Slide 108

Slide 108 text

glyphe 1 Lege Ziele fest 2 Achte auf User-Bedürfnisse 3 Schaffe eine Story-Line 4 Baue eine einfache Navigation 5 Bau eine klare Seitenstruktur 6 Biete die beste Usability 7 Räum dein Design auf 8 Achte auf gute Typografie 9 Denke Mobile First 10 Testen, testen, testen Die Erste Hilfe Maßnahmen

Slide 109

Slide 109 text

Icons by hunotika from the Noun Project Gemeinsam heilen wir das Web! Oliver Schöndorfer glyphe www.8660.at