Grundlagen Digitaler Mediengestaltung

Grundlagen der digitalen Mediengestaltung Ralf Stockmann, Nils K. Windisch - SUB Göttingen

Grundlagen der digitalen Mediengestaltung

Ralf Stockmann, Nils K. WindischNiedersächsische Staats- und Universitätsbibliothek Göttingen


Gliederung1. Einleitung

2. Medien

3. Farben

4. Typographie

5. Logodesign

6. Bildelemente

7. Iconsets

8. Animationen, Flash und AJAX

9. Barrierefreiheit

10. Usability

11. Performance

12. Test / Validierung


1. Einleitung


Wir: Nils K. Windisch

• Stellv. Leitung Gruppe WWW, Portale

• Web Project Manager / Senior Web Developer

• M.A. Medien- und Kommunikationswissenschaften, Soziologie & MA. Library and Informations Science

• SUB (seit 2006): Forschungsprojekte, Web Development

• Web (seit ~2002): (X)HTML, PHP, MySQL, JavaScript, jQuery, CSS, XML, JSON, WordPress, TYPO3, Flickr, de.icio.us, Bibsonomy usw.


Wir: Ralf Stockmann

• Dipl. Sozw., Schwerpunkt Medienwissenschaften

• Stellv. Leitung Forschung & Entwicklung der SUB Göttingen


http://flickr.com/stockmann

http://www.flickr.com/stockmann

http://www.flickr.com/stockmann


Meistens läuft es so...

• „Irgendeiner muss sich um das Design kümmern, wer erbarmt sich?“

• „Unsere Sekretärin macht alle Printsachen, die kann das auch erledigen.“

• „Wir haben 500 € im Antrag dafür, wem geben wir die jetzt?“

• „Ich kenne da jemanden, der hat schon die Seite zu seinem Fußballverein gebaut.“ (Schwager-eines-Freundes-Phänomen)


Spannungsfelder

• Sachlich vs. Emotional

• Künstlerisch vs. Formalisiert

• Professionell vs. Selbstgemacht

• Individualität vs. Standardisierung

• Gut gemeint vs. Gut gekonnt


Ist gutes Design basisdemokratisch?


Debian OS (Linux)


Microsoft Windows 7


Apple OS X


Gutes Design kommt nicht aus der Mode

• Dieter Rams(Braun, 1950er)

• Apple, 2000er


10 Prinzipien (Dieter Rams)Gutes Design...

• ist innovativ.

• macht ein Produkt brauchbar.

• ist ästhetisches Design.

• macht ein Produkt verständlich.

• ist ehrlich.

• ist unaufdringlich.

• ist langlebig.

• ist konsequent bis ins letzte Detail.

• ist umweltfreundlich.

• ist so wenig Design wie möglich.


Schlüsselbegriff: Konsistenz• „wie aus einem Guss“

• durchdacht

• stimmig

• konsequent

• Liebe zum Detail

• gewissenhaft

• gründlich

• Ausnahmen sind gewolltund bestätigen die Regel


Ohne Konsistenz ist jedes Design schlecht.


Details beachten!

Konsistenz einfachherzustellen

Konsistenz schwerherzustellen


Design ist (auch) Handwerk• Ausbildungsberufe

• Geschick

• Erfahrung

• Technikverstand

• Daher: gutes Design kostet

• Zeit

• Geld

• Nerven


Man muss es nicht selbst besser machen können, um zu sagen, dass etwas schlecht ist.


Design ist sehr privat• Wir verraten viel über unser Kunstverständnis

• Vergleiche: was hängen wir uns an die Wand

• Familienbilder

• Röhrender Hirsch

• Bildende Kunst

• Zeitgenössische Kunst

• Eigene Fotografien

• „Das soll so, das ist Kunst!“

• Um die Regeln brechen zu können, muss ich sie kennen


Gutes Designist eine Frage der Haltung.

(der Personen und des Projektes)


Was ist unsere Haltung?

• Welche Werte wollen wir vermitteln:

• Innovation, Tradition, Verlässlichkeit, Schnelligkeit, Beharrlichkeit, Wissenschaftlichkeit, Seriosität, Jugend, Erfahrung, Flexibilität, Originalität, ...


Ziel des Workshops

• Wenn möglich: es den Profis überlassen. Dann aber:

• klare Anweisungen geben können

• deren Ergebnisse beurteilen können

• Wenn man es selbst machen (muss):

• die gröbsten Fehler vermeiden

• gut geklaut ist bei Design immer besser als schlecht selbst gemacht


Wo sollte ich „klauen“?

Eher hier:

• Museen

• Autohersteller

• Banken

• (Design) Möbelhersteller

• Fernsehsender

Eher hier:

• Museen

• Autohersteller

• Banken

• (Design) Möbelhersteller

• Fernsehsender

Weniger hier:

• Bibliotheken(sonst wären wir nicht hier)

• (Tages-) Zeitungen

• Versandhandel


pearl.de


Museum Ludwig


Gestaltung: Analogie zu digitalem Büro

• Viele Menschen müssen mittlerweile Sekretariatsaufgaben übernehmen weil es die Technik „so einfach“ macht.

• Früher: Diktiergeräte. Heute: Textverarbeitung.

• Aber: wir schreiben dadurch nicht bessere Briefe, sondern werden von der Arbeit abgelenkt.

• Die Demokratisierung der Möglichkeit, Design zu erstellen, geht nicht einher mit einem Zuwachs an Wissen über die Grundregeln des Designs.


Was uns fehlt: die Rechtschrbkontrolle

für Designfragen


Die Checkliste

• Fasst die wesentlichen Felder zusammen

• Kann bei jedem Projekt durchgegangen werden

• Kann mit Prioritäten versehen / ignoriert / erweitert werden

• EXCEL, PDF

• Download: http://wwwuser.gwdg.de/~rstockm/download/mediengestaltung/

http://wwwuser.gwdg.de/~rstockm/download/mediengestaltung/






Checkliste: GestaltungGrundlagen der digitalen Mediengestaltung / Ralf Stockmann - Nils K. WindischBeschreibung der Punkte: http://wwwuser.gwdg.de/~rstockm/download/mediengestaltung/Stand: 31.3.2010

Projekt:

Ansprechpartner: Datum:

1. Einleitung Ja Nein nicht zutreffend

Sind die Verantwortlichkeiten für die Gestaltungsaufgaben geklärt? O O OIst ein Budget definiert worden? O O OHabe ich definiert, welche Haltung ich kommunizieren möchte? O O OHabe ich eine "Geschichte", die ich erzählen möchte (Storyboard, Dramaturgie)? O O O

2. Medien Ja Nein nicht zutreffend

Sind sämtliche benötigten Medien mitgedacht? O O OIst der Einsatz jeder Form schlüssig begründet? O O ODer Style-Guide berücksicht sämtliche (relevanten) Medienformen und umfassend? O O OIch setze verschiedene Webseiten Formen (Blog, Forum, Wiki) zweck-/sinngemäß ein? O O O

ElementeDer Header ist erkennbar und der Nutzwert klar ersichtlich? O O ODas Menü ist nutzbar und ermöglicht die Erreichbarkeit aller relevanten Inhalte? O O ODer Footer bietet sinnvollen Mehrwert und ermutigt zum Einstieg in nicht offensichtliche Inhalte? O O ODer Content ist sauber strukturiert und einzelne Inhaltselemente klar erkennbar? O O ODie Domain ist aus Nutzersicht schlüssig und die Systematik zugänglich (erratbar)? O O O

RezeptionRelevante Nutzungszenarien sind erörtert und technisch entsprechend berücksichtigt? O O OIch weiß, ob und wie ich mobile Anzeigegeräte unterstützen möchte? O O OIch habe die Nutzungsszenarien "im Büro", "auf dem Sofa" und "an der Bushaltestelle" selbst ausprobiert? O O OHabe ich die Obeflächen auf schlecht eingestellten / alten Präsentationsgeräten (Monitore, Beamer) getestet? O O O

3. Farben Ja Nein nicht zutreffend

Verfügen alle informationstragenden Elemente über ausreichenden Kontrast zum Hintergrund? O O OWurde die Farbpalette mit einem Generator erzeugt / evaluiert? O O OWerden alle Farbverläufe ohne Treppenstufen / Artefakte / Fehlfarben dargestellt? O O O

LinksHeben sich Textlinks klar vom umgebenden Fließtext ab? O O OSind Links überall auf der Seite konsistent formatiert? O O OIst die Linkfarbe abgestimmt auf die Farbpalette? O O OSind Schaltflächen/Buttons mit ausreichenden Trefferzonen (ganzes Objekt) ausgestattet? O O OSind klickbare Elemente mit Hover-Effekten versehen? O O O

4. Typographie Ja Nein nicht zutreffend

Schriften werden universal definiert (Fallback bei fehlender Schrift)? O O OÜberschriften sind als solche erkennbar und hierarchisch voneinander abgehoben? O O OSchriftgrößen und Zeilenabstände werden als harmonisch wahrgenommen? O O OEs werden nicht mehr als drei Schriften bzw. Schriftgrößen verwendet, falls doch, ist dies sinnvoll begründet? O O OIch weiß, warum serif- und sans-serig-Schriften gemischt verwendet werden und welchen Effekt ich damit erziele? O O OE-Mails schreibe ich in Plain-Text (vs. HTML), weil ich möglichst viel Menschen erreichen möchte? O O OText wurde in gut lesbaren Spalten gesetzt und zieht sich nicht über die gesamte Breite der Seite? O O OLange Textpassagen werden durch genügend Absätze gegliedert? O O OIst der Zeilenabstand bei Fließtexten etwas erweitert (1.2 statt 1)? O O O

5. Logodesign Ja Nein nicht zutreffend

Repräsentiert das Logo das Projekt / die Einrichtung? O O OIst das Design an die erwartete Nutzungszeit angepasst (kurzlebiges Projekt, langlebige Einrichtung)? O O OIst es in allen Medien nutzbar (Druck, Visitenkarte, s/w, ...) O O OSetzt es sich gegen andere Logos in einer logo-Farm angemessen durch? O O OWurde geprüft ob eine Logo-Wettbewerb zielführend seien könnte? O O O

6. Bildelemente Ja Nein nicht zutreffend

Sind die ausgesuchten Bildelemente in Form, Stil, Farbe, Einstellung konsistent? O O OIst die technische Qualität ausreichend (Schärfe, Auflösung, Farbtiefe)? O O OEntsprechen die Proportionen sämtlicher Bildelemente der Vorlage? O O OSind die Bildrechte geklärt? O O O

Kombination von Text über BildHeben sich alle Schriftbereiche ausreichend vom Hintergrund ab? O O OHaben nicht verbundene Seitenelemente ausreichend Abstand (ca. 5 Pixel) voneinander (Text zu Tabellenrand etc.) O O O

7. Iconsets Ja Nein nicht zutreffend

Sämtliche Icons stammmen aus dem gleichen Icon-Set? O O OAlle Icons sind selbsterklärend? O O ODie Bedeutung von symbolhaften Icons ist mit bewusst und interkulturell funktional? O O ODas Farbschema der Icons ist stimmig zu den CD-Farben? O O OIch habe die Optionen noch nicht existente Funktionen mit Icons /abzudecken/? O O OIch setze so wenig Icons wie möglich ein? O O O

8. Animationen, Flash und AJAX Ja Nein nicht zutreffend

Der Einsatz von Animationen ist gut begründet (Beiwerk, Schmuckelement etc. zählt nicht)? O O OFlash-Inhalte sind zugänglich gestaltet, via (1) AJAX und (2) nur-HTML? O O OIch weiß, warum ich ein (Flash-)Intro anzeige und das dies evtl. Nutzer abschreckt? O O O

9. Barrierefreiheit Ja Nein nicht zutreffend

BITV ist zu erfüllen da öffentliche Einrichtung? O O OBild-, Ton- und Videodokumente sind alternativ zugänglich? O O ODer Nutzer weiß immer wo er ist, wie er dort hingekommen ist und wo es weitergeht? O O OTechnische Mittel sind dokumentiert? O O OIch habe eine Strategie bisherige Webseiten BITV-konform zu gestalten? O O ODer Nutzer muss nicht unangebracht viel denken? ("Don't make me think!"-Credo) O O O

10. Usability Ja Nein nicht zutreffend

Inhalte wahrnehmbar? O O OInhalte sind nutzbar? O O OInhalte sind verständlich? O O OTechnische Voraussetzungen sind robust? O O OIch biete alternative Navigationsstrukturen? O O OIch habe assistive Technologien mitgedacht? O O OIch weiß, was Nutzer sehen, wenn sie eine nicht existente Seite aufrufen? O O O

11. Performance Ja Nein nicht zutreffend

Dateien sind so klein wie möglich (ohne das Kompressionsartefakte sichtbar werden)? O O ODie Anzahl der Dateien ist so gering wie möglich? O O OIch habe an den Server und die Anbindung gedacht? O O ODie Datenbank(struktur) ist von einem Experten geprüft worden? O O OIch habe eine Ahnung, was meine Nutzer benutzen? O O OIch weiss, welche Browser ist unterstützen möchte? O O OIch habe drei oder mehr Browser ausprobiert? O O O

12. Testing / Validierung Ja Nein nicht zutreffend

Ich habe gestestet? O O OIch habe validiert? O O O


Checkliste:Haltung

1Habe ich geklärt, welche Haltung meine

Homepage vermitteln soll?Ja Nein

nichtzutreffend

2Habe ich eine „Geschichte“, die ich erzählen

möchte? (Storyboard, Dramaturgie)Ja Nein

nichtzutreffend


2. Medien


Formen• Briefpapier

• E-Mail

• Flyer

• Micro-Blogging

• PDF

• Präsentation

• Video

• Visitenkarte

• Webseite


Unterschiedliche Formen

• CI/CD: Corporate Identity/Corporate Design

• Wiedererkennungsmerkmale über alle Formen hinweg

• Farbe, Proportion, Whitespace, etc.

• Finden sie eine! Agentur, die für Sie arbeitet

• Halten Sie einen Style-Guide bereit


"The site flows too much. It needs to be more ‘boxy’ so people know it’s a website and not a paper flyer or poster."

(Clients from Hell)

http://clientsfromhell.tumblr.com/post/442064599/the-site-flows-too-much-it-needs-to-be-more

http://clientsfromhell.tumblr.com/post/442064599/the-site-flows-too-much-it-needs-to-be-more


Style Guide -Bundesregierung I

• Basiselemente (Print)

• Bildwortmarke

• Platzierung mehrerer Bildwortmarken

• Platzierung von Logos

• Schriften

• Farben

• Raster

• Layoutprinzip


Style Guide -Bundesregierung II

• Basiselemente (Online)

• Bildwortmarke

• Schriften

• Farben

• Gestaltungsfläche

• Raster

• Screenaufteilung und Frames

• Bild- und Formensprache


Style Guide -Bundesregierung III

• Geschäftsausstattung (Print, Standard)

• Briefbogen

• Kurzmitteilung

• Faxmitteilung

• Visitenkarte

• Briefumschlag

• Adressetikett

• Papier

• E-Mail-Signatur


Webseite - Formen

• Blog - Sie reden mit ihren Nutzern

• Forum - Sie lassen Nutzer miteinander reden

• Wiki - Nutzer arbeiten zusammen

• Suchmaschine - Nutzer finden etwas

• Shop - Sie verkaufen etwas

• Portfolio - Sie präsentieren sich

• Portal, Galerie, LMS, etc.


Checkliste:Medien

3 Sind sämtliche relevanten Medien mitgedacht? Ja Neinnicht

zutreffend

4Ist der Einsatz jedes Mediums schlüssig

begründet?Ja Nein

nichtzutreffend


Webseite - Elemente

• Header, Menu, Content, Footer, Featured, Ads, News, Sitemap

• Domain

• Optimierung, Tracking, Testing

• Develop, Stage, Live


Elemente: Header• Denken Sie an Briefköpfe auf Speed

• Funktion

• Home Button

• RSS, Twitter, etc.

• (Menu)

• Formen

• Nur Text, Text + Logo, Bild, Animation

• Was immer auch Sie im Header nutzen, diese Elemente finden sich auch auf Visitenkarten, Präsentationsfolien, etc.


Header

http://www.biola.edu/undergrad/

http://www.biola.edu/undergrad/


Header

http://www.amazon.de/b%C3%BCcher-buch-literatur/b/ref=sa_menu_bo0?&node=299956

http://www.amazon.de/b%C3%BCcher-buch-literatur/b/ref=sa_menu_bo0?&node=299956


Elemente: Menu

• Trennung von Menüs

• Hauptmenü (meist links vertikal)

• Tools (meist oben rechts horizontal)

• Kontextsensitiv (bei Amazon: Hauptmenü oben, spezifische Links links plaziert)

• Mehr als 8 Punkte?

• Aufklappen; Ja oder Nein?

• in <5 Sekunden erfassbar


Elemente: Footer

• Abschluss der Seite

• Funktionen anbieten

• Selected Sitemap

• Featured Content

• RSS, Twitter, etc.


Footer

http://www.apple.com/mac/

http://www.apple.com/mac/


Footer

http://www.branded07.com/

http://www.branded07.com/


Elemente: Content

• strukturiert, erkennbar, lesbar

• Verschiedene Inhaltselemente

• Überschriften!

• Text (Absätze)

• Bild

• Tabelle

• etc.


Client: "What is the adress of the website?"Me: "It’s www.*****.com"Client: "You must be mistaken, where is the ‘@’ ?!"

(Clients from Hell)

http://clientsfromhell.tumblr.com/post/479765306/client-what-is-the-adress-of-the-website-me

http://clientsfromhell.tumblr.com/post/479765306/client-what-is-the-adress-of-the-website-me


Elemente: Domain I

• URL: www.example.com

• subdomain.domain.tld

• "com" - TLD (Top Level Domain)

• "example" - Domain (das kaufen Sie)

• "www" - Subdomain (das richten sie ein [optional])


Elemente: Domain II

• URLs sind Funktion

• /contact, /sitemap, /help

• URLs sind für Menschen (Pretty/Clean URLs)

• example.com/archives/2010/03

• example.com/products/

• apple.com/iphone/gallery/ vs. apple.com?id=1234


Elemente: Domain III

• don't: http://en.wikipedia.org/wiki

• don't: http://example.com/page/main.html

• don't: http://example.com/menu/info.html

• example.com? = RFC2606: ".example" is recommended for use in documentation or as examples

http://en.wikipedia.org/wiki

http://en.wikipedia.org/wiki

http://example.com/page/main.html

http://example.com/page/main.html

http://example.com/menu/info.html

http://example.com/menu/info.html


Checkliste: Elemente5

Der Header ist erkennnar und der Nutzwert klar ersichtlich?

Ja Neinnicht

zutreffend

6Das Menü ist nutzbar und ermöglicht die Erreichbarkeit aller relevanten Inhalte?

Ja Neinnicht

zutreffend

7Der Footer bietet sinnvollen Mehrwert und ermutigt zum Einstieg in nicht offensichtliche

Inhalte?Ja Nein

nichtzutreffend

8Der Content ist sauber strukturiert und einzelne

Inhaltselemente klar erkennbar?Ja Nein

nichtzutreffend

9Die Domain aus Nutzersicht schlüssig und die

Systematik zugänglich (erratbar)?Ja Nein

nichtzutreffend


Rezeption


Rezeption - Technik

• Beamer, Browser, E-Mail, haptisch, Mobiltelefon

• Unterschiede:

• Anzeigengröße

• Hardwareleistung

• Dateisystem


Rezeption - Verhalten

• Aufmerksamkeitsspanne variiert stark

• Bedürfnisse stark unterschiedlich

• Beispiel:

1.Zuhause

2.vor Ort

3.unterwegs


1. vor Ort

• Ich habe keine Zeit

• Ich will wissen, ob es da ist

• Ich will wissen, wo ich es bekomme


2. Zuhause

• Ich habe Zeit

• Ich will mir merken, was ich gefunden (und gesucht) habe

• Ich bin bereit Neues zu entdecken


3. unterwegs

• Ich habe (keine) Zeit

• Ich will wissen, ob sich der Weg lohnt

• Jemandem zeigen, was ich gefunden habe


iPhone

• Will ich für mobile Geräte optimieren?

• iPhone = Internet

• Nutzer die Wahl lassen

• Gewohnte Nutzung unterstützen


iPhone


iPhone (Bad vs. Good)


iPhone (Web vs. Mobile)


Checkliste:Rezeption

10Relevante Nutzungsszenarien sind erörtert und

technisch entspr. berücksichtigt?Ja Nein

nichtzutreffend


Dein Feind, der Beamer


SchwarzwertEin Beamer kann nur aufhellen: der dunkelste Punkt auf der Leinwand

entspricht dem maximalen Schwarz


So soll es sein


So wird es sein


Lichtstärke hilft


und eine Leinwand


vor allem aber: Abdunkeln


Dein Feind, der Beamer • Auflösung

• Farbechtheit

• Kontrast

• Browser

• Power Point-Versionen

• Animationen

• Schatten

• Videos

• Eigenes Notebook anschließen


3. Farben


Farbenlehre

• Das Primat der Lesbarkeit:

• alle relevanten Informationen müssen gut lesbar sein


Farbkontraste

• Wie ein Schwarz-Weiß Verlauf haben auch Farben eine Helligkeit

• Diese kann subjektivem Empfinden unterliegen

• Grün wirkt für viele dunkler als rot

L=50

L=0

L=100


Farbkontraste

• Der L (Luminanz) Abstand sollte zwischen Schrift und Hintergrund mindestens 30 betragen

• Zu große Abstände (90, 100) wirken schnell banal, kleinere wertiger


Problembeispielzwei von drei Texten haben zu wenig Kontrast


• 20% Grau

• 40% Grau

• 60% Grau

• 80% Grau

• 90% Grau

• 100% Schwarz

Schriftfarben für Fließtext

unleserlich

kritisch

optimal

banal


Checkliste:Farben

11Verfügen alle verwendeten Schriftfarben über

ausreichend Kontrast zum Hintergrund?Ja Nein

nichtzutreffend


Feine Unterschiede

ICH BIN INTERESSANT

ICH BIN ANSTRENGEND


Farbkombinationenbitte nichts erfinden, es gibt genug Angebote

http://colorschemedesigner.com/

http://colorschemedesigner.com

http://colorschemedesigner.com


Beispiel: heute.de


Checkliste:Farben

12Wurde die Farbpalette mit einem Generator

erzeugt / getestet?Ja Nein

nichtzutreffend


Gängige Probleme beim Umgang mit Farben

• Kontrast

• stellen wir uns Farben als Graustufen vor: haben wir mehr als 50% Kontrastunterschied?

• 100% Kontrastunterschied wirkt gewöhnlich

• Stimmige Farben

• an Paletten orientieren

• von gelungenen Seiten übernehmen

• Rot/Grün-Blindheit

• Internationale Unterschiede kennen - Beispiel Wertigkeit:

• Europa: Blau

• Amerika: Rot

• Modefarben können schnell wieder anstrengend wirken. Beispiel: Cyan (die Web 2.0 Farbe)


Hintergründe

• Farben

• Verläufe

• Bilder

• don‘t: fixierter Bildhintergrund (Performance)


VerläufeAnzahl der Farbstufen, Kompressionsartefakte


Checkliste:Farben

13 Werden Farbverläufe ohne Stufen abgebildet? Ja Neinnicht

zutreffend


Streitthema Linkfarben

• dies ist ein klassischer Linkich bin traditionell, achte auf Standards, ignoriere Modetrends und bin ein wenig stur

• dies ist ein moderner Linkmir ist Anmutung wichtiger als Funktion, Nutzer können sich schon eingewöhnen, ich weiß was gut ist

• und dies ist ein Kompromiss aus beidem


...aber bitte: konsistent!


Checkliste:Links

14Sind die Links klar genug von anderen

Textbereichen abgesetzt?Ja Nein

nichtzutreffend

15 Sind Links konsistent formatiert? Ja Neinnicht

zutreffend


Schaltflächen

• Reiterleisten

• Buttons

• Schalter

• Hover-Effekte

• Konsistenz

• Trefferzonen immer über die ganze Fläche legen


Problem: klickbarer Bereich

Reine Textlinks sind bei dichten Navigationsbereichen schwer zu treffen.

Besser: mit einer Box versehen und Hover-Effekt.


Checkliste:Links

16Sind alle Schaltflächen und Buttons mit ausreichenden Trefferflächen versehen?

Ja Neinnicht

zutreffend


4. Typographie


Typographie

• ..ist Anmutung

• ..beeinflusst die Nutzbarkeit

• ..ist Gestaltungselement


"I hate this new font. Use the first one I showed you. This one makes the site look cheap instead of elegant."

The ‘cheap’ font was Georgia, the ‘elegant’ font was Georgia Italic.

(Clients from Hell)

http://clientsfromhell.tumblr.com/post/404924785/i-hate-this-new-font-use-the-first-one-i-showed

http://clientsfromhell.tumblr.com/post/404924785/i-hate-this-new-font-use-the-first-one-i-showed


Top 100 (Quelle)

1. Helvetica (1957)

2. Garamond (1530)

3. Frutiger (1977)

4. Bodoni (1790)

5. Futura (1927)

6. Times (1931)

7. Akzidenz Grotesk (1966)

8. Officina (1990)

9. Gill Sans (1930)

10.Univers (1954)

11.Optima (1954) (Universität Göttingen und SUB)

http://www.100besteschriften.de/

http://www.100besteschriften.de/


Schriftgröße: klein oder groß

• Überschriften sind immer größer als der Fließtext

• Klein = konzentriertes Lesen, aber auf Dauer anstrengend

• Groß = leicht zu überfliegen

• Letztendlich: es gibt kein "oder" der harmonische Mix ist entscheidend, aber insg. nicht mehr als X unterschiedliche Größen einsetzen.


So wenig unterschiedliche Typen und Schriftgrößen

wie möglich!


Zählen Sie...


http://www.zeit.de/index

http://www.zeit.de/index

http://www.spiegel.de/politik/ausland/0,1518,686301,00.html

http://www.spiegel.de/politik/ausland/0,1518,686301,00.html


Fonts in Web I

• "serif", "sans-serif" und "monospace"... jep, das ist alles!

• { font-family: Times, serif }

• { font-family: Arial, sans-serif }

• { font-family: Courier, monospace }


Fonts in Web II

• Safe: serif, sans-serif, monospace

• Safe-ish: Arial (sans-serif), "Times New Roman" (serif), "Courier New" (monospace),

• Alternativen: z. B. sIFR

• Schlechte Alternative: Font als Image

• Zukunft: @font-face

http://www.mikeindustries.com/blog/sifr

http://www.mikeindustries.com/blog/sifr


serif vs. sans-serif

http://www.alistapart.com/

http://www.alistapart.com/

http://global.nytimes.com/

http://global.nytimes.com/


Typographie und E-Mails

• Stark eingeschränkten Einfluss auf die Darstellung beim Empfänger

• Ja, HTML geht, aber Sie verkaufen etwas und Haben Hochglanzprodukte?

• HTML-E-Mail immer auch mit Nur-Text-Version


AbsätzeDas Web ist eher Zeitung/Magazin als Buch

Setzen Sie viele Absätze (alle 8 bis 20 Zeilen)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


ZeilenlängeNiemand mag Viewport-breite Zeilenlängen

• Praktische Richtwerte:

• Spalten: 550px für Fließtext, 220px für Menüs

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


Zeilenabstandleicht erweiterter Zeilenabstand: schnell umgesetzt, große Wirkung

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Abstand: 1 Abstand: 1,2


Achten Sie auf Waisen!

http://www.zeit.de/2010/13/Wohlstand-Interview-Richard-Wilkinson

http://www.zeit.de/2010/13/Wohlstand-Interview-Richard-Wilkinson


Checkliste:Typographie

17Schriften werden universal definiert (Fallback bei

fehlender Schrift)?Ja Nein

nichtzutreffend

18Überschriften sind als solche erkennbar und

hierarchisch voneinander abgehoben?Ja Nein

nichtzutreffend

19Schriftgrößen und Zeilenabstände werden als

harmonisch zueinander wahrgenommen?Ja Nein

nichtzutreffend

20Es werden nicht mehr als drei Schriften und

Schriftgrößen verwendet?Ja Nein

nichtzutreffend


5. Logodesign


Logodesign

• Die Marke auf wenige Pixel komprimieren

• Wiedererkennbarkeit

• Unverwechselbar / Abgrenzung zu Mitbewerbern

• Schnell zu erfassen

• Multifunktional


Typen von Logos

• Nur Text

• Modifizierter Text

• Text/Bild

• Nur Bild

• Abstrakt / Gegenständlich


TextmarkenFarbe, Schrifttype, Modifikationen


Erweiterte TextmarkenModifikationen, Hintergrundformen, Effekte


Text-Bildmarken


Reine Bildmarken


Internetmarken


Eine Variante: Online-Logowettbewerb

http://99designs.com/

http://99designs.com

http://99designs.com


Checkliste:Logogestaltung

21Repräsentiert das Logo das Projekt / die

Einrichtung? Ja Nein

nichtzutreffend

22Ist das Design an die erwartete Nutzungszeit

angepasst? (zeitlos, modisch)Ja Nein

nichtzutreffend

23 Ist es in allen Medien nutzbar? Ja Neinnicht

zutreffend

24 Setzt es sich gegen andere Logos durch? Ja Neinnicht

zutreffend


6. Bildelemente


Bildelemente• Kategorien

• Fotografien

• Verfremdungen

• Sättigung

• Effekte

• Zeichnungen

• Montagen

• Formen (Verläufe, Muster)


Problemfelder bei Bildelementen

• Konsistenz ist teuer

• Selber anfertigen

• Sets kaufen (Getty etc.)

• Atmosphäre vs. Information

• Großzügige Verwendung oder Verschwendung?


Konsistenz bei Bildelementen

• Tiefenschärfe

• Freistellen

• Perspektive

• Farbgebung

• Motiv

• Menschen, Dinge, Räume, Natur...


Tiefenschärfe

Blende 1,8Blende 5,6


Freistellen


Perspektive / Einstellung


Färbung


unpassende Kombinationen


passende Kombinationen


Qualitätskriterien bei Bildelementen

• Kompressionsartefakte

• Schärfe

• Auflösung (sieht man Pixel?)

• Farbsäume

• Verläufe (sieht man Treppenstufen?)


QualitätsunterschiedeSchriftkanten, RSS Icon


Beispiel: RSS Icon

geringeAuflösung

mittlereAuflösung,

Pixelstruktur

guteAuflösung,keine Pixel


Kompressionsartefakteworst case: um Logo-Schrift


Beispiel: Museum Ludwig


Internet-Bandbreite ist 2010kein relevantes Thema mehr.

Es gibt keine Entschuldigungfür sichtbare Artefakte.


Absolut unverzeihlich:Proportionen ändern

Vorlage

gestaucht

gestreckt


Checkliste:Bildelemente

25Sind Bildelemente in Stil, Farbe, Ausschnitt, Motiv

konsistent?Ja Nein

nichtzutreffend

26Ist die technische Qualität ausreichend

(Auflösung, Kompression, Schärfe)?Ja Nein

nichtzutreffend

27Entsprechen die Proportionen sämtlicher Bilder

der Vorlage?Ja Nein

nichtzutreffend

28 Habe ich die Bildrechte? Ja Neinnicht

zutreffend


Kombination von Text und Bild


Verfahren zum Freistellen

Hier steht Ihr Logo

Hier steht Ihr LogoHier steht Ihr Logo

Hier steht Ihr Logo


Harter Schlagschatten


Hier steht Ihr LogoHier steht Ihr LogoHier steht Ihr LogoHier steht Ihr Logo



Umrandungen


Einbettung


Kombination


Beispielseite: MoMA


Abstände5 Pixel Abstand sind nie ein Fehler!


Feine Unterschiede

DAS IST KUNSTDAS IST SCHLAMPIG


Checkliste:Text-/Bild Kombination

29Heben sich Schriften ausreichend vom

Hintergrund ab?Ja Nein

nichtzutreffend

30Haben nicht verbundene Elemente ausreichende

Abstände (mind. 5 Pixel) zueinander?Ja Nein

nichtzutreffend


Suchfelder und Ergebnislisten

• Suche vs. Browsing

• Wo ist die Suche platziert?

• Erkenne ich sie als Suche?

• Ist sie auf jeder Seite?

• Wird der Suchraum (gesamte Website, nur diese Seite, Katalog, ...) klar kommuniziert?

• Nice to have: Echtzeitsuchen-Vorschläge

• aber nur, wenn man sinnvolle Ergebnisse liefern kann


Trefferlisten• Einzelne Treffer weit genug voneinander absetzen

• Welche Informationen werden in der Trefferliste gegeben? Welche sind notwendig, welche hilfreich?

• Vorschaubilder

• wohin gelange ich, wenn ich auf einen Treffer klicke, wie komme ich zur Liste zurück?

• Ist die Liste persistent und/oder speicherbar?

• Kann ich die Trefferliste weiter einschränken (Drill down, Facettierung)

• Expertensuche vs. Operatoren erklären


7. Iconsets


Icons: Bedeutungen

• Icons haben Symbolscharakter

• Die Bedeutung von Symbolen ist mitzudenken

http://www.symbols.com/encyclopedia/20/2015.html

http://www.symbols.com/encyclopedia/20/2015.html


Icons: Beispiel Swastika

http://www.flickr.com/photos/30691679@N07/3010930372/

http://www.flickr.com/photos/djwudi/13009987/












Icons: Neue Aufgaben

• Aufgabe: Visualisieren Sie die Nutzung eines Touchscreen-Device

• Lösung: dezidierte Ikonographie

• Beispiel: gesturecons.com

http://gesturecons.com/





Icons: zu viel!


Icons: inkonsistent


Icons: Problemfelder

• Gute Icons sind teuer.

• Modulare Software = inkonstistente Ikonographie

• Jedes Iconset, was wir finden enthält immer nur ca. 80% der Icons, die wir brauchen


(Gute) Icons: Unbezahlbar

http://www.meninos.us/products.php?product=Designer-Set

http://www.meninos.us/products.php?product=Designer-Set

http://www.etsy.com/shop/iconpillows?section_id=6634032

http://www.etsy.com/shop/iconpillows?section_id=6634032


Checkliste:Iconsets

31Sämtliche Icons stammen aus dem selben Icon-

Set?Ja Nein

nichtzutreffend

32 Alle Icons sind selbsterkärend? Ja Neinnicht

zutreffend

33Das Farbschema der Icons ist stimmig zur den

CD-Farben?Ja Nein

nichtzutreffend


8. Animationen, Flash und AJAX


"I dont care if it loses 90% of visitors, we can't have a skip on the website intro, we paid a lot of money for that and everybody has to see it."

(Clients from Hell)

http://clientsfromhell.tumblr.com/post/356276259/i-dont-care-if-it-loses-90-of-visitors-we-cant

http://clientsfromhell.tumblr.com/post/356276259/i-dont-care-if-it-loses-90-of-visitors-we-cant


argh!

http://dacia.de/

http://dacia.de/


Warum

• Ermöglichung von Nutzerinteraktion (Stichwort: Interaktion)

• Schlüssigere/Flüssigere Nutzererfahrung

• Hochglanz Selbstdarstellung


Animationen

• Das Web ist nicht mehr nur Text

• Was genau will ich erreichen


Flash

• In Webseiten eingebettete Datei, die mittels einer Browsererweiterung abgespielt werden

• Bild, Datenbank, Grafik, Ton, Video, Interaktion

• Erstellt in einem Editor mit Scriptsprache

• seit 1996; erst Macromedia, nun Adobe


Flash Szenarien

• Begrüßungsanimation (jep, this is oh so last year)

• Browser Spiele (z. B. Moorhuhn anyone?)

• RIA (Rich Internet Application)

• Schrift ersetzen/darstellen (z. B. sIFR)

• Widgets/Badges (z. B. Flickr)

http://www.moorhuhn.com/

http://www.moorhuhn.com/

http://livepage.apple.com/


http://www.flickr.com/badge.gne

http://www.flickr.com/badge.gne


Warum Flash böse ist

• Adblocker stolpern

• überdurchschnittliche CPU/GPU-Nutzung

• SEO unfreundlich

• Der Zwang Alternativen mitzudenken

• Bruch mit Nutzungsstandards (Rechtsklick, Text markieren, etc.)


Warum Flash gut ist

• Cross-Browser-Kompatibel

• volle Kontrolle über die Darstellung beim Nutzer

• Alternative zu AJAX


AJAX

• AJAX = Asyncronous JavaScript and XML

• Verschiedene Techniken gruppiert

• Manipulation von CSS, DOM ([X]HTML)

• XML (extensible Markup Language), JSON (JavaScript Object Notation)

• XMLHttpRequest, REST


AJAX - Nutzen• Nutzerinteraktion ohne erneutes Laden der Seite

• dynamische Informationsanzeige (besser: -aktualisierung)

• Anzeige sehr komplexer Daten/Informationen

• Beispiele:

• Selbstlaufende Bilderschau

• sich selbst aktualisierender Newsticker

• Zeitleiste mit sehr viel Informationen

• Dateiupload im Hintergrund


AJAX - Nachteile

• (basiert auf bzw.) abhängig von JavaScript

• immer Fall-back-Lösung anbieten

• Passiert immer was der Nutzer erwartet? (Links öffnen nicht einfach nur eine Webseite, sondern können selbige manipulieren)

• Komplexität (Was passiert, wenn externe Daten nachgeladen werden sollen, aber nicht verfügbar sind?)

• JavaScript = Clientseitig, erhöhte Hardware-Anforderungen beim Nutzer


Flash vs. AJAX

1.Erst erstelle ich alles in Flash, dann

2.programmiere ich ein AJAX-Fallback, dann

3.eine (X)HTML-Alternative


Checkliste:Animationen

34Der Einsatz von Animationen ist gut begründet?

(Beiwerk, Schmuckelement, etc. zählt nicht)Ja Nein

nichtzutreffend

35Flash-Inhalte sind alternativ zugänglich via (1)

AJAX und (2) nur-HTML?Ja Nein

nichtzutreffend


9. Barrierefreiheit


BITV

• Barrierefreie Informationstechnik Verordnung

• Resultiert aus dem Gleichstellungsgesetz

• Bund seit 2002

• (amerikanischen Gegenstück: Section 508)

• Grundlage: WCAG 1.0 (Web Accessibility Guidelines) der WAI (Web Accessibility Initiative) des W3C (World Wide Web Consortium)


BITV - Bund

Gemäß BITV müssen ab 31.12.2005 alle öffentlich zugänglichen Internetauftritte und -angebote sowie Intranetauftritte und -angebote der Behörden der Bundesverwaltung barrierefrei umgesetzt werden.


BITV in den Ländern

• Berlin: WBIT (23.06.2005) - Verwaltungsvorschrift zur Schaffung Barrierefreier Infpramtionstechnik (Berlin)

• Berlin: Grundlage: §3 Brandenburgische Barrierefreie Informationstechnik Verordnung, 24.05.2005

• Niedersachsen: 27.11.2007 NBGG §9


BITV - NBGG (25.11.2007)§9 Informationstechnik (jep, das sind nur 106 Wörter)

Die öffentlichen Stellen gestalten ihre Internetauftritte und -angebote sowie die von ihnen zur Verfügung gestellten grafischen Programmoberflächen, die mit Mitteln der Informationstechnik dargestellt werden, technisch so, dass sie von Menschen mit Behinderungen grundsätzlich uneingeschränkt genutzt werden können. Vorhandene Internetauftritte und -angebote sowie zur Verfügung gestellte grafische Programmoberflächen sind im Sinne des Satzes 1 schrittweise umzugestalten. Sollte eine solche schrittweise Umgestaltung aus technischen Gründen nicht oder nur mit einem unverhältnismäßigen Aufwand möglich sein, so sind die Internetauftritte und -angebote sowie die zur Verfügung gestellten grafischen Programmoberflächen spätestens bei einer Neugestaltung des bestehenden Auftritts, des Angebots oder der bestehenden grafischen Programmoberfläche im Sinne des Satzes 1 zu gestalten.




WCAG (BITV)

• Wahrnehmbar: Alternative Textversion, Untertitel, Medienersatz, assistive Technologien, Kontraste

• Nutzbar: Keyboardnavigation, dezent/zurückhaltend, Suche

• Verständlich: Lesbarkeit, komplexe Navigation vermeiden, alternative Nutzungsstrategien

• Robust: Kompatibilität, techn. Hilfsmittel unterstützen


BITV - Technikkriterien• Browser-Kompatibilität

• HTML/CSS-Code-Errors

• JavaScript

• Multilingual

• WCAG 1.0-konform

• XHTML

• RSS-Feed

• sauberes HTML

• HTML-Tags (frame, iframe, from, label)

• Layout-Tabellen

• Broken Links


BITV - Hilfe• Linkhervorhebung

• Nicht gefundene Seite

• Tastaturnavigation

• Externe Links

• HTML-Attribute (abbr, title, alt, description)

• Print-View

• 800px-View

• Kontaktangaben

• Farbwahl

• Breadcrumb/Browninghistory


BITV - Inhalte

• Happy Talk

• Zielgruppenspezifischer Einstieg

• Neuste Dokumente

• Featured Content

• Meldungen


Don not read "Understanding WCAG 2.0"

In fact, do not read WCAG 2.0

Web Accessibility is about people, not about guidelines"

(Shawn Henry, W3C WAI)


BITV - zusammenfassend

• Verstehen Sie diese als Anregung, nicht als Pflicht

• Vage Formulierungen in Gesetze/verordnungen stehen konkreten Anforderungen in Basistexten gegenüber

• Sie sind mit dem Standpunkt "Der Aufwand ist unverhältnismäßig" auf der sicheren Seite... aber: Wo wir sind, ist vorn?!

• Die BITV kennt keine Sanktionen


Was noch mal

• Graustufen

• kein JavaScript

• keine Grafiken

• kein CSS

• 600px width


Don't make me think!

http://www.opel.de/shop/cars/corsa/config/configstart.act?.=.

http://www.opel.de/shop/cars/corsa/config/configstart.act?.=.


Checkliste

• Öffentliche Einrichtung? BITV = Pflicht

• Texte lesbar?

• Der Nutzer weiss immer wo er ist?


Checkliste:Barrierefreiheit

36 BITV ist zu erfüllen, da öffentliche Einrichtung? Ja Neinnicht

zutreffend

37Bild-, Video- und Tondokumente sind alternativ

zugänglich?Ja Nein

nichtzutreffend

38Der Nutzer weiss auf jeder Seite wo er ist, wie er

dort hingekommen ist und wo es weitergeht?Ja Nein

nichtzutreffend

39 Techn. Mittel sind dokumentiert? Ja Neinnicht

zutreffend


10. Usability


Usability vs. Accessibility

• Nutzbarkeit vs. Nutzbarkeit

• Ein Mobiltelefon/Toaster ist grundsätzlich usable und accessible.

• Fällt es/er herunter kann er:

• A: noch funktionieren (usable), hat aber evtl. scharfe Kanten (accessible)

• B: nicht mehr funktionieren (usable), aber äußerlich unversehrt sein (accessible)


Rechtschreibung

• Das Web ist Text; Text folgt Regeln.

• Fehler sind Stoppschilder. Fehler lenken ab.

• "Any time I go to a web page with misspellings and bad grammar, I usually leave within 30 seconds." (Quelle)

• Lösung: Redaktionelle Texte immer gegenlesen lassen.

http://iampaddy.com/spell/%23comment-38873189

http://iampaddy.com/spell/%23comment-38873189


Above the Fold I

• Page Fold: Konzept, dass wichtige Inhalte auf der oberen Hälfte der Darstellung zu finden sein müssen.

• Hintergrund: Zeitungen am Kiosk liegen gefaltet aus. Gekauft wird, was auffällt.

• Aber: Im Web wird gescrollt, ja, das machen die Menschen wirklich


Beispiel

FAZ: analog

Pagefold

digital


Above the Fold II

• Artikel von Paddy Donnely: Life, below 600px

• Erkenntnis: Menschen scrollen!

• Konzept: Interesse wecken, Interesse wecken... etwas verkaufen vs. Hier ist er Preis, alles anderes interessiert nicht?

http://iampaddy.com/lifebelow600/





Apple iPad


iPad Application Design

• Was sind die Kernfunktionen? Wie kann ich einige davon entfernen?

• Wie kann ich es auf einem Touchscreen Device nutzbar machen?

• Wie ermögliche ich eine emotionale Verbindung?

• Stichworte:

• Bedienung ausblenden wenn nicht gebraucht

• Bearbeitung an Ort und Stelle

• Psychology of touch

• Artikel: Matt Legend Gemmell: iPad Application Design




Fehlerseiten

• Entstehung

• Der Nutzer vertippt sich

• Ihr Redakteur hat eine Seite gelöscht/verschoben

• Der Link in der E-Mail wurde abgeschnitten

• Ergebnis

• Geh weg!

• Oh, das tut uns leid, wie können wir helfen?


Geh weg!

http://styleguide.bundesregierung.de/Webs/SG/DE/Homepage/

http://styleguide.bundesregierung.de/Webs/SG/DE/Homepage/


Oh, wie können wir helfen?

http://delicious.com/sdfghjkgfd

http://delicious.com/sdfghjkgfd


lustig, aber hilfreich

http://fryewiles.com/templateserrors/404.html

http://fryewiles.com/templateserrors/404.html


...

http://redtag.com/404/

http://redtag.com/404/


Checkliste:Usability

40 Ich habe assistive Technologien mitgedacht? Ja Neinnicht

zutreffend

41Ich weiß, was Nutzer sehen, wenn sie eine nicht

existente Seite aufrufen?Ja Nein

nichtzutreffend

42 Ich biete alternative Navigationsstrukturen? Ja Neinnicht

zutreffend

43 Inhalte wahrnehmbar? Ja Neinnicht

zutreffend


Performance als Qualitätsmerkmal


Warum Performance

• Performance bestimmt Nutzererfahrung

• "Jede Suche, die nicht innerhalb von 2 Sekunden Treffer liefert, ist kaputt"

• Performance unterscheidet sie von Konkurrenten

• "Diese Seite ist viel schneller, als jene dort."


Wo ist Performance?• Client-Seitig

• Bandbreite (Download, paralelle Aufrufe, etc.)

• Browser

• JavaScript, Java

• Plugins (Flash: CPU/GPU)

• Server-seitig

• Scriptsprache

• Datenbank

• Standort


Was ist Performance?

• Technisch: die schnellstmögliche Bereitstellung von Informationen

• Nutzer: der kürzeste Weg zur gesuchten Information

• Weitere Stichworte: zuverlässige Verfüg- und Erreichbarkeit


Little things

• je weniger externe Dateien umso besser

• CSS/JS-Compression hilft

• CSS: @import() ist langsam

• Bilder optimieren (z. B. Adobe Fireworks)

• JavaScript am Ende des HTML-Code einbinden


AJAX loadersignalisiert: „es lohnt sich zu warten, ich arbeite“

Quelle: http://www.deviant-blog.de/ajax-loader-icons/

http://www.deviant-blog.de/ajax-loader-icons/

http://www.deviant-blog.de/ajax-loader-icons/


Tools - Firefox

• Firefox nutze ich nur zum Testen...

• YSlow (Wie lange braucht was zum laden)

• Firebug (Wie ist was aufgebaut)

• Web Developer Tools (Zeige was wie konstruiert ist)


Checkliste:Performance

44Dateien sind so klein wie möglich? Aber: bei

Bildern ohne sichtbare Artefakte!Ja Nein

nichtzutreffend

45Ich habe an den Server und die Anbindung

gedacht?Ja Nein

nichtzutreffend

46Ich habe eine Ahnung, was meine Nutzer

benutzen?Ja Nein

nichtzutreffend

47Ich weiss, welche Browser ist unterstützen

möchte?Ja Nein

nichtzutreffend


12 Testing/Validierung


Was und warum testen

• Verschiedene Anzeigegeräte

• Wie wirkt mein Design auf einem Beamer/iPhone/alten Browser?

• Nutzererfahrung

• Finden Nutzer, was sie suchen?

• Eigene Ziele

• Wird meine Botschaft optimal transportiert?


Classic client answer to any question involving two options:

“Well, let’s try it both ways and see how it looks.”

(Clients from hell)

http://clientsfromhell.tumblr.com/post/447595912/classic-client-answer-to-any-question-involving

http://clientsfromhell.tumblr.com/post/447595912/classic-client-answer-to-any-question-involving


Browser Viewport

• Tatsächlich verfügbare Anzeigefläche

• nicht gleich Größe des Browserfensters

• Toolbars, Rahmen, Scrollbars etc, rauben Viewport


Google Browsersize

http://browsersize.googlelabs.com/

http://browsersize.googlelabs.com/


Browser Viewport

• 800px Breite zwingend, >800px Breite optional

• Netbooks, Internetcafe

• auch geräteabhängig (Smartphones, iPhone, Handy)


mit 800px nach Hause

http://www.lufthansa.com/online/portal/lh/de/homepage

http://www.lufthansa.com/online/portal/lh/de/homepage

http://www.easyjet.com/asp/DE/Flugbuchung/index.asp?lang=DE

http://www.easyjet.com/asp/DE/Flugbuchung/index.asp?lang=DE


Variabler Viewport/Content

• Width

• max. 960px

• min. 800px

• min. 600px (Content)


Browser

• Interpretieren HTML

• Nutzen Plug-Ins (Flash, Java)

• Führen JavaScript aus


MS Internet Explorer 6

• vor 4 Jahren haben wir noch über den IE 5.x und Netscape 4.x geredet

• Browser sind vergänglich


Brower und JS

• Vergleich der standardkonformen Javascript-Implementierung (via Sputnik)

• n = 5000, min: ~80, max ~500

• Mitte = gut, Rand = schlecht

• Entfernung untereinander = Ähnlichkeit

http://sputnik.googlelabs.com/compare





Nutzertests

• Nutzerstudien kosten Geld, viel Geld

• Automatisches Testen ist nicht erschöpfend

• Nehmen sie fünf Menschen und schauen sie ihnen zu!


"Can you call Google and ask them when the website will show up in the search results?"

(Clients from Hell)

http://clientsfromhell.tumblr.com/post/356877397/can-you-call-google-and-ask-them-when-the-website

http://clientsfromhell.tumblr.com/post/356877397/can-you-call-google-and-ask-them-when-the-website


Werde ich gefunden?

• Erfassung meiner Inhalte von Google & Co.

• Google Webmaster Tools


Warum validieren

• Weil die BITV vorgibt, dass Technik standardkonform umgesetzt werden muss

• Weil sich jeder Programmierer über sauberen Code (seines Vorgängers) freut


Wie validieren

• Maschinell - Code/Funktionen

• Code ist standardkonform

• Eine Funktion erfüllt ihre Aufgabe (Anforderung)

• Persönlich - Style Guide/Funktionen

• Elemente folgen dem Style Guide

• Eine Funktion funktioniert wie erwartet


XHTML strict validation is a tool, not a way of life.

1.Designer = strict XHTML

2.CMS = fail

3.Backend developer = fail

4.Editors = fail

(CeQuelle)

http://www.position-absolute.com/articles/xhtml-strict-validation-is-a-tool-not-a-way-of-life/

http://www.position-absolute.com/articles/xhtml-strict-validation-is-a-tool-not-a-way-of-life/


"A nice design.. Can you add some pop-ups to the website? That would make it more dynamic."

(Clients from Hell)

"I hear there’s a lot of new web technology since we last spoke.. Can you put all that technology in our website?"

(Clients from Hell)

http://clientsfromhell.tumblr.com/post/382042313/a-nice-design-can-you-add-some-pop-ups-to-the

http://clientsfromhell.tumblr.com/post/382042313/a-nice-design-can-you-add-some-pop-ups-to-the

http://clientsfromhell.tumblr.com/post/407306040/i-hear-theres-a-lot-of-new-web-technology-since

http://clientsfromhell.tumblr.com/post/407306040/i-hear-theres-a-lot-of-new-web-technology-since


Christmas Tree Approach

• Webseite überarbeiten: komplett oder Christmas Tree Approach

• Ich benötige Funktionalität, also füge ich sie einfach hinzu.

• RSS, Twitter, E-Mail, Print

• Jede Funktion bringt Code mit sich; unterschiedlichen Code

• Im Zweifel neue Bedien- und Nutzungskonzepte


Checkliste:Testverfahren

49 Ich habe gestestet? Ja Neinnicht

zutreffend

50 Ich habe validiert? Ja Neinnicht

zutreffend


13. Abschluss


Nicht erwähnt

• SEO (Search Engine Optimization)

• Werbung/Ads

• Print (CMYK, dpi, etc.)

• (Social Media) Marketing/Kommunikation

• Schnittstellen/Webservices


how to

• Erste Reaktion notieren

• Beobachtungen anbringen, wenn gefragt (und nur wenn gefragt)

• Auf den Punkt formulieren = keine allgemeinen Aussagen

• Kontext und Zielgruppe beachten

• Das wichtigste Kriterium ist, inwieweit Erwartungen erfüllt werden

• Subjektive Aussagen sind OK, solange sie als solche erkennbar sind

• Die Gesamtheit beachten (Design = Design + Content)


Benutzen Sie!

http://design-police.org/





Lesen Sie!

• Hunderte Web/Design/Developer-Blogs

• ...

• Smashing Magazine

• aus Deutschland, in englischer Sprache

• Beispielartikel: 100 WordPress Themes, Incredible Free Icon Sets, Web Design Trends, 8 Layout Solutions, 1o Mistakes in Logo Design, 30 Scripts for Galleries, etc...

http://www.smashingmagazine.com/

http://www.smashingmagazine.com/

Grundlagen Digitaler Mediengestaltung

Education

Transcript of Grundlagen Digitaler Mediengestaltung