Websites: Konzeption - Umsetzung – Usability · • Web 2.0 −Mehrwert durch Feedback, Einbeziehung der Kunden • Print und Design −Eine Webseite ist nicht mit einer Printseite

Websites: Konzeption - Umsetzung – Usability

Folien: https://www.jade-hs.de/team/angela-moldenhauer/

• Welcher Webauftritt ist der richtige für Sie?• Konzeption

− Inhalte− Zielgruppe - Personas− Interaktionskonzept

• Mobile Webseiten− Responsive Websites

• Werkzeugkasten• Konventionen• Usability – UX• Suchmaschinen - SEO

AGENDA

05.05.2017Dipl.-Wirtsch- Ing. Angela Moldenhauer - MIT Websites: Konzeption - Umsetzung - Usability

2

„Eine perfekte Website ist eine Website, die die richtigen Inhalte absolut überzeugend präsentiert!“

Mutschler-Eichfeld, S.99

1. Informationsarchitektur2. Navigation3. Funktionen4. Texte5. Bildsprache

DIE PERFEKTE WEBSITE


3

• Geben Sie ein Beispiel für eine gute Website− Was finden Sie gut an dieser Seite?

INSPIRATION


6

Inspiration- Sammeln Sie Ideen!

• Gebe Sie ein Beispiel für eine schlechte Website− Was missfällt Ihnen an dieser Seite?

• Welcher Webauftritt ist der richtige für Sie?


7

Digitale Visitenkarte

Unternehmens-Website

Onlineshop

Vgl. Mutschler/Eichfeld S. 22ff

• Einfacher Webauftritt• Ähnlich der klassischen Visitenkarte

− Kontaktinformationen−Öffnungszeiten

• Informationen zu Produkten / Leistungen• Besondere Serviceleistungen• Informationen zum Unternehmen• Vorstellung der Unternehmensführung / des Teams

• Beispiel Optik Boehler (www.boehler-optik.de)

DIGITALE VISITENKARTE


8


http://www.boehler-optik.de/

• Produkte und Leistungen im Detail• Unternehmen ausführlich vorstellen• Unternehmensphilosophie präsentieren• Geschichte des Unternehmens erzählen• Erfolgreiche Projekte präsentieren• Einblick in Unternehmen geben• Downloads bereitstellen• Aktuelles – Veranstaltungen etc.• Stellengesuche

UNTERNEHMENSWEBSITE


9

Vgl. Mutschler/Eichfeld S. 27

• Ziel: Geschäfte zum Abschluss bringen

• Zu verkaufende Produkte / Leistungen attraktiv präsentieren

• Detailinfos• Strukturierung der Produktwelten• Abwicklung des Bestell- und Kaufvorgangs

−Warenkorb− Technische Abbildung des Bestell- und Kaufvorgangs− Verfügbarkeit / Logistik− Reporting zur Lieferung

ONLINESHOP


10


• shopware (www.shopware.de)• plentymarkets (www.plentymarkets.eu)• magento (www.magento.com)• OXID esales (www.oxid-esales.com)

Quelle: Mutschler/Eichfeld S. 29

BEKANNTE SHOPSYSTEME


11

http://www.shopware.de/

http://www.plentymarkets.eu/

http://www.magento.com/

http://www.oxid-esales.com/

• Beleuchtung 2.0

• Vertrauen fördern• Achtung: Austauschbarkeit!>>Der nächste Shop ist nur einen Klick entfernt<<

UNSERE BEISPIELFIRMA


13

DREI PHASEN ZUM ERFOLG


14

Vgl. Mutschler/Eichfeld S. 37

1. Arbeiten Sie den Mehrwert Ihrer Produkte und Leistungen clever heraus

2. Orientieren Sie sich an Erwartungen und Bedürfnissen Ihrer Zielgruppe(n)


DER RICHTIGE INHALT


15

Zielgruppe = Besucher, die ein begründetes Interesse an Ihren Produkten und Leistungen haben verstehen

• identifizieren• präzise beschreiben

• Zielgruppen verstehen (Erwartungen, Bedürfnisse)

• Personas erstellenMutschler-Eichfeld, S.69ff

ZIELGRUPPE


16

Besteht aus:1. Merkmalen (Alter, Geschlecht, Einkommen,

Grad der Internetaffinität)2. Verhaltensweisen, die mit folgenden Fragen

herausgearbeitet werden können:−Was sind typische Aufgaben, Interessen, Hobbies?−Wo, wie und wozu informiert sich die Persona?−Wo / Wie sucht die Persona nach Produkten/Leistungen?−Wie trifft die Persona Kaufentscheidungen?−Wer / Was beeinflusst die Persona?

− Achtung: Personas aus Nutzerperspektive betrachten!

PERSONA


17

Aufgabe:

Paul• 43 Jahre, Eigentumswohnung,

Frau, 2 Kinder

• Wirtschaftsinformatiker

• wenig Zeit

• internetaffin

• an neuer Technik interessiert

• Preis spielt eine untergeordnete Rolle

PERSONAS


18

Erna• 21 Jahre, WG

• Studiert BWL

• viel Freizeit

• Umweltbewusst, legt Wert auf Nachhaltigkeit

• kauft meist lokal

• gibt ihr weniges Geld überlegt aus

• Fragen Sie nach:„Der Download von Produktdaten als pdf ist mir wichtig.“„Die Verfügbarkeit eines Bonusprogramms ist mir wichtig.“„Aktuelle Verfügbarkeit / Lieferzeiten sind mir wichtig.“„Ein Facebook-Share-Button ist mir wichtig.“

ZIELE ERWARTUNGEN BEDÜRFNISSE


19

stimme stark zu stimme zu unentschieden lehne ab lehne stark ab

• der Zielgruppe herausarbeiten.beispielsweise:„Texte und Bilder müssen die herausragende

Produktqualität vermitteln.“„Datenblätter müssen abrufbar sein.“„Der Webauftritt muss es Kunden ermöglichen, die Ware online zu bestellen.“

Design: Entwurf, Gestaltung Formgebung

Webdesign umfasst:− Erarbeitung und Umsetzung der Informationsstruktur−Grafisches Design− Praktische Umsetzung einer funktionsfähigen

ansprechenden Website− Verschiedene Bereich der Website werden in Einklang

gebracht und zugänglich gemachtHoffmann S. 22

WEBDESIGN


20

• Am Anfang steht der Inhalt!… und nicht das Farbschema oder die Idee zweispaltig mit Foto zu arbeiten.

FORM FOLGT FUNKTION


21

• Web 2.0− Mehrwert durch Feedback, Einbeziehung

der Kunden• Print und Design

− Eine Webseite ist nicht mit einer Printseite zu vergleichen. − Sie sieht in jedem Kontext anders aus

• Moderne Webseiten− Können viel Funktionalität bieten

• Mobile Webseiten− Können die Möglichkeiten der Sensoren nutzen− Werden in der Bahn oder auf dem Sofa genutzt

Hoffmann S. 32

MODERNE WEBSEITEN


22

• Mobile Webansicht ist Ausgangspunkt• Responsives Layout• Ansicht und Inhalte werden Schritt für Schritt für

größere Monitore angepasst.

MOBILE FIRST


23

• Soll sich dem Display des Ausgabegeräts optimal anpassen

1. Wie lässt sich das Layout für kleine Bildschirme optimal aufteilen?

2. Definition von Vorgaben, wie sich das Layout wann verhält

• Einsatz von MediaQueries• Gängige Breakpoints 1024Px und 480 Px• Elemente werden elastisch definiert, passen sich bei

Zwischengrößen an

RESPONSIVES LAYOUT


24

• Grafiken in mindestens zwei Größen bereitstellen− Schärfe− Dateigröße− Ladezeit

• Auch Firmenlogo!

RESPONSIVES LAYOUT - GRAFIKEN


25

• Minimieren und optimieren Sie Navigationsmöglichkeiten• Inhalte müssen simplifiziert und geordnet sein• Webstandards verwenden• Deutliche Hervorhebung des aktiven Elements• Orientierung geben (z.B. Breadcrumbs)• Auswahl so einfach wie möglich Finden nicht suchen!!!!

NAVIGATION


26

HTML5, CSS und JavaScriptHoffmann S. 26

TECHNIKEN DES WWW


27

<!DOCTYPE HTML><html lang="de-DE"><head>

<meta charset="utf-8" /><title>Standardvorlage</title>

</head><body>

<h1">Überschrift</h1>...

</body></html>

Inhalt und Struktur FunktionalitätDesign

• Ideenfindung• Bildbearbeitung • Wireframes• Editoren • Browser • CMS• Frameworks• Medien

Hoffmann S. 14

WERKZEUGKISTE


28

• Visualisierung• Mindmaps

• Sketchnotes

• Paper Prototyping

WERKZEUGKASTEN - IDEENFINDUNG


29

• Ideenfindung • Brainstorming

• Kopfstandtechnik

• Recherche und Inspiration• Sammeln und Ordnen

• Wiki

• Evernote, OneNote

• Notizbuch

Exkurs Grafikformate:• Vektorformate (skalierbar)

− svg

• Pixelformate− jpg, png, gif

WERKZEUGKASTEN - BILDBEARBEITUNG


30

• IrfanView• GIMP• ADOBE

• Photoshop

• Illustrator

• mypaint

• Clickable Prototypen− Axure

• Frei für Studierende

−Mockingbot• Free Trial

WERKZEUGKASTEN - WIREFRAMES


31

• Sketchnoting• Schablonen (Stencils)

• Papiervorlagen (http://sneakpeekit.com/)

• PaperPrototyping• Standardprogramme

• Visio

• PowerPoint

http://sneakpeekit.com/

WERKZEUGKASTEN - EDITOREN


32

• WYSIWYG− Einfach zu bedienen

− Hauptaugenmerk liegt auf Optik

− Semantik, Struktur etc. wird vernachlässigt

• Adobe Dreamweaver− Bietet auch WYSIWIG

• Notepad++• Phase5

• Browsererweiterungen− Firefox−WebDeveloperExtension

• Zeigt u.a. welche CSS-Eigenschaften an welcher Stelle definiert werden

WERKZEUGKASTEN - BROWSER


33

Testen Sie frühzeitig in verschiedenen Browsern!!!• Firefox

• Opera

• Chrome

• Safari

• Internet Explorer

• Mobile Browser

• Verwendung des Designs (Theme) für alle Seiten

• Problemlose Einbindung von Medien

WERKZEUGKASTEN - CMS


34

• (Web-)Content-Management-System• Bekannte Systeme:

−WordPress− Typo3 (Jade HS)− Joomla− Drupal

• Wenig HTML-Kenntnisse• Online-Editor• Autoren-Konzept

WERKZEUGKASTEN - FRAMEWORKS


35

• Bootstrap• Für responsive Webseiten• Gestaltungsraster (12 Spalten)

• UI-Elemente • Buttons • Textfelder

• Tabs• Navigationsleisten• Ladebalken• Ausklappmenüs• Tooltips• Carousels

• http://getbootstrap.com

http://getbootstrap.com/

• Medien unter Creative-Commons-Licence

• Grafiken• www.flickr.com

• www.istockphoto.com

• Sound• www.soundcloud.com

• www.freesound.org

• www.musicalley.com

• Blindtext (lore ipsum)• http://www.blindtextgenerator.de

• DIY− Skribble− Sketchnotes− Fotos - SelfieStyle

WERKZEUGKASTEN - MEDIEN


36

http://www.flickr.com/

http://www.istockphoto.com/

http://www.soundcloud.com/

http://www.freesound.org/

http://www.musicalley.com/

http://www.blindtextgenerator.de/

• Barrierearmut – (Barrierefreiheit)− Saubere Struktur kann auch der

Screanreader lesen− Alternative Beschreibungen für Grafiken− Farben und Kontraste− Leichte Sprache

Hoffmann S. 14

PRINZIPIEN MODERNEN DESIGNS


37

• Standards verwenden− World Wide Web Consortium (W3C)

• Usability • Wartbarkeit• Modularität• Zugänglichkeit

• Aufgabe: Entwickeln Sie manuell (PaperPrototyping oder Sketchnoting) die Startseite und Navigationsstruktur für die Firma „Beleuchtung2.0“

PAPER PROTOTYPING - SKETCHING


38

Don‘t make me think!

• Funktionalität• Trends berücksichtigen• Konventionen folgen

‚… wie erwartet‘

• Abweichen von Konventionen auf Mehrwert prüfen!

USABILITY


39

Benutzer erwarten:• einen Link zur Homepage im oberen Bereich

jeder Webseite

• Informationen zum Anbieter am Seitenende

• Hervorhebung von Links (Farbe, Unterstreichung)

• Kennzeichnung besuchter Links

• jede Unterstreichung ist ein Link

• aktive Felder in Formularen sind optisch hervorgehoben

Hoffmann, S. 57

USABILITY – MUST-HAVES


40

= UX• Nutzererfahrung Nutzererlebnis• alle Aspekte der Erfahrungen eines Nutzers bei der

Interaktion mit einem Produkt

USER EXPERIENCE


41

USER EXPERIENCE


42

Quelle: https://www.sitewright.co.uk/Understanding-the-true-meaning-behind-UX-or-User-Experience

USABILITY : UX


43

https://mockingbot.com/posts/266

• Nutzer-Tests− Formulierung von Fragen / Aufgaben− 5-8 Personen aus Zielgruppe− Thinking Aloud− schriftliche Dokumentation− Audio- / Videodokumentation− Reflexion− Ableitung von Optimierungen

• A/B-Tests− Zwei Alternativen zur Auswahl stellen

• Farbkonzepte• Platzierung• Funktionalität• Fotos• Design alt/neu

USABILITY TESTS


44

Mutschler/Eichfeld S.130

• Impressum− Laut Telemediengesetz muss jeder ‚geschäftsmässige Teledienst“

bestimmte Angaben zum Betreiber machen –‚Anbieterkennzeichnung‘

Vgl. Jacobsen S.281ff

− Ein Impressum beinhaltet eine ladungsfähige Anschrift des Inhabers einer Website, damit rechtliche Ansprüche gegen diesen gerichtlich durchgesetzt werden können. Die Pflicht zur so genannten "Anbieterkennzeichnung" (Impressumspflicht) ergibt sich aus § 5 TMG sowie § 55 RStV.

(Quelle: https://www.e-recht24.de/artikel/datenschutz/209.html)

• Medien− auf Lizenzen achten− Stockfotos− selber erstellen

RECHTLICHES


45

„Eine perfekte Website ist eine Website, die die richtigen Inhalte absolut überzeugend präsentiert!“


DIE PERFEKTE WEBSITE


46

Website Konzeption- Jens Jacobsen, dpunkt 2014, GETA 191,7

Modernes Webdesign, Manuela Hoffmann, GalileoPress 2013, GETA086

Der erfolgreiche Webauftritt, Bela Mutschler u. Frank Eichfeld, Rheinwerk 2016, RDF 251

Alles nur geklaut, Austin Kleon, mosaik 2013

Mobile Webseiten – Maurice 2012

Responsive Webdesign, Christoph Zillgens, Hanser, 2013

About Face – Interface und Interactions Design, Cooper, Reimann, Cronin, mitp-Verlag 2010

LITERATUR


47

Documents

Websites: Konzeption - Umsetzung – Usability · • Web 2.0 −Mehrwert durch Feedback, Einbeziehung der Kunden • Print und Design −Eine Webseite ist nicht mit einer Printseite