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

„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

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

INSPIRATION

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?

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

• 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

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

• 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

• Beleuchtung 2.0

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

UNSERE BEISPIELFIRMA

DREI PHASEN ZUM ERFOLG

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

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

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

Aufgabe:

Paul• 43 Jahre, Eigentumswohnung,

Frau, 2 Kinder

• Wirtschaftsinformatiker

• wenig Zeit

• internetaffin

• an neuer Technik interessiert

• Preis spielt eine untergeordnete Rolle

PERSONAS

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

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

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

FORM FOLGT FUNKTION

• 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

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

größere Monitore angepasst.

MOBILE FIRST

• 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

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

• Auch Firmenlogo!

RESPONSIVES LAYOUT - GRAFIKEN

• 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

HTML5, CSS und JavaScriptHoffmann S. 26

TECHNIKEN DES WWW

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

</head><body>

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

</body></html>

Inhalt und Struktur FunktionalitätDesign

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

Hoffmann S. 14

WERKZEUGKISTE

• Visualisierung• Mindmaps

• Sketchnotes

• Paper Prototyping

WERKZEUGKASTEN - IDEENFINDUNG

• Ideenfindung • Brainstorming

• Kopfstandtechnik

• Recherche und Inspiration• Sammeln und Ordnen

• Wiki

• Evernote, OneNote

• Notizbuch

Exkurs Grafikformate:• Vektorformate (skalierbar)

− svg

• Pixelformate− jpg, png, gif

WERKZEUGKASTEN - BILDBEARBEITUNG

• IrfanView• GIMP• ADOBE

• Photoshop

• Illustrator

• mypaint

• Clickable Prototypen− Axure

• Frei für Studierende

−Mockingbot• Free Trial

WERKZEUGKASTEN - WIREFRAMES

• Sketchnoting• Schablonen (Stencils)

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

• PaperPrototyping• Standardprogramme

• Visio

• PowerPoint

WERKZEUGKASTEN - EDITOREN

• 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

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

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

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

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

WERKZEUGKASTEN - FRAMEWORKS

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

• UI-Elemente • Buttons • Textfelder

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

• 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

• 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

• 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

Don‘t make me think!

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

‚… wie erwartet‘

• Abweichen von Konventionen auf Mehrwert prüfen!

USABILITY

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

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

Interaktion mit einem Produkt

USER EXPERIENCE

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

USABILITY : UX

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

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

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

DIE PERFEKTE WEBSITE

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

Websites: Konzeption - Umsetzung – Usability · • Web 2.0 −Mehrwert durch Feedback,...

Documents

Häufigst aufgerufene Websites

Handliche Designkonzepte, Konzeption, Usability und Umsetzung mobiler Websites

Lucie Prinz, Bonn - 2002,2003 Usability für Websites Einführung in das Seminar Medienpraxis EDV II Sommersemester 2003

Usability Engineering

Nutzerorientierung im Auswahlprozess - Die Plattform für ...€¦ · Vorgehensmodelle für KMU, mit deren Hilfe die Einbeziehung von Usability-Kriterien während des gesamten Entwicklungs-

Usability & User Experience - bitkom.org · Usability & User Experience 4 Danksagung Der vorliegende Leitfaden wurde im Bitkom-Arbeitskreis »Usability & User Experience (UUX)« erarbeitet

Usability Engineering

Usability vs. User experience?ubicomp/... · Agenda •Motivation •Usability •User experience •Umsetzung •Ausblick •Fazit 14.01.2010 Usability vs. User experience? | Torsten

Erfolgreiche Websites : SEO, SEM, Online-Marketing, Usability ; [SEO… · 2015-11-17 · Keßler, Rabsch,Mandic ErfolgreicheWebsites SEO,SEM,Online-Marketing, Usability 9Rheinwerk

[Mobile Usability Testing] Zahlen, Daten, Fakten Mobil - World Usability Day 2013

Mobile Websites

Deutsch-französsiche Erbschaften - unter Einbeziehung … · 591336_1.ppt Deutsch-französsiche Erbschaften - unter Einbeziehung des DBA Deutschland/Frankreich 6. Internationaler

World Usability Day 2011: Usability quadratisch, pragmatisch, schnell

Erfolgreiche Websites - Cleverprinting · 2012-10-05 · Erfolgreiche Websites SEO, SEM, Online-Marketing, Usability. ... 12.2.2 Die Besonderheiten im Ranking-Algorithmus von Google

»Ästhetische Erziehung unter Einbeziehung außerschulischer

Wie kann man eine GUI unter dem Gesichtspunkt Usability ... · 2 Motivation Warum Usability messen? – Usability Probleme frühzeitig erkennen – Unterschiedliche Bedienelemente

Nutzerorientierung im Auswahlprozess€¦ · Vorgehensmodelle für KMU, mit deren Hilfe die Einbeziehung von Usability-Kriterien während des gesamten Entwicklungs- und Auswahlprozesses

Leitfaden Usability

Konzeptionelle Überlegungen zur Einbeziehung …koepf/Diplome/Lehmann.pdfKonzeptionelle Überlegungen zur Einbeziehung informatischer Inhalte und Methoden beim Computereinsatz im

Websites, die fliegen