Smashing Conference Freiburg 2015 Tag 1 – Meine Notizen

Smashing Conference 2015 Freiburg Tag1

Die Talks am ersten Tag der Smashing Conference 2015 in Freiburg waren wieder sehr interessant und lehrreich. Ich habe für euch, so wie auch letztes Jahr, die wichtigsten Links, Zitate, Notizen, Slides und Buch-Tipps zusammengestellt.

Die Notizen beinhalten unter anderem folgende Themen: Modulares Design, Touch und Pointer Events, Laden von Fonts, die WebAudio API, e-Commerce Usability Tipps und Papierprototyping.

The Designer’s Guide to Being Essential

Simon Collison
@colly
http://www.colly.com

Über die Arbeit am Computer

I almost went full TRON

-Simon Collison

Ist Webdesign tot?

I move things around until they look right

-Milton Glaser

Machines will never be as good as humans in moving things around until they look right.

-Simon Collison

Sonstiges

Modular design at work

Alla Kholmatova
@craftui
http://www.craftui.com

We are not designing pages, we are designing systems of components

-Stephen Hay

Die drei Komponenten des modularen Designs: Language, Process und Experience.

Language

Wenn man eine Komponente hat, die aus einem Hintergrundbild, Text und einem Button besteht, könnte man diese .image_container nennen. Wenn aber eine weitere Komponente dazu kommt, die mit der ersten Komponente ident ist, aber kein Bild hat, macht die Klasse .image_container schon keinen Sinn mehr. Entweder man erstellt eine zweite Klasse und wiederholt sich damit oder man überlegt sich einen anderen Namen.

  • Sinnvolle Namen überlegen und Bezeichnungen allgemein halten
  • Komponenten basierend auf ihrer Funktion auf hoher Ebene benennen. Man sollte sich überlegen, was die Aufgabe dieser Komponente ist und nicht aus welchen Elementen sie besteht. In dem Beispiel oben haben sie das Element schließlich .billboard genannt.
  • Namen nicht auf Bereich einschränken, bspw. .header_billboard

Wenn sich Elemente entwickeln, ist es OK, Namen später anzupassen.

Process

Pattern Library erstellen als Weg, modulare, wiederverwendbare Komponenten zu schaffen.

Photoshop zum probieren und testen verwenden, aber nicht für Details. Details sind dann in der Pattern Library. Eine Designänderung ist erst fix, wenn sie in der Pattern Library zu sehen ist.

Mit dem großen Ganzen beginnen, dann Kernelemente ausarbeiten.

In der Pattern Library werden User Interface Elemente erstellt und nicht nur dokumentiert.

Experience

Nicht nur an Module an sich denken, sondern auch an Verbindungen. Rollen für Komponenten definieren. Intro, Outro, Standard- und Verbindungskomponenten. Einfache Regeln für Komponenten basierend auf ihren Rollen definieren. Verbindungskomponenten können beispielsweise nie am Anfang stehen, Introkomponenten eher nicht in der Mitte.
Den Grad der Modularität legt man basierend auf den jeweiligen Voraussetzungen fest.

Modularität ist nicht das Ziel, sondern eine Technik zu finden, die User Experience zu verbessern.

Sonstiges

Getting touchy: An Introduction To Touch and Pointer Events

Patrick Lauke
@patrick_h_lauke
http://www.splintered.co.uk

Slides (SmashingConf): http://de.slideshare.net/redux/getting-touchy-an-introduction-to-touch-and-pointer-events-smashing-conference-freiburg-14-september-2015
Slides (alle): https://patrickhlauke.github.io/getting-touchy-presentation/
Tests und Demos: http://patrickhlauke.github.io/touch/

Was muss ich machen damit meine Website auf Touch Devices funktioniert?

Normalerweise nichts, weil Touchevents Mouseevents emulieren.
Das funktioniert zwar, ist aber aus zwei Gründen problematisch.

1. Verzögerte Events

Auf Mobile wird das Click-Event 300ms später ausgeführt.
Der Grund dafür ist meistens die Tatsache, dass auf Mobile Devices mit Double Tap gezoomt wird. Der Browser wartet also knapp 300ms auf den zweiten Tap bevor Click ausgeführt wird.

2. Mousemove-Event greift nicht

Mousemove funktioniert nicht bzw. greift es nur bei Tap.

Touch Events

Von Apple entwickelt, mittlerweile Standard.

touchstart (Touch beginnt)
touchmove (Bewegung während Touch)
touchend (Touch endet)
touchcancel (Wenn Touch unterbrochen wurde, beispielsweise wenn während dem Touch Event ein Alert ausgeführt wird)

Lösung für verzögerte Events: touchstart oder touchend.

Support von Touch Events checken

if('ontouchstart' in window) {

}

Auf keinen Fall ontouchstart Support überprüfen und Touch Events nur für „Touch Geräte“ anwenden und Click nur für „Click Geräte“, weil es viele Hybride gibt (PC mit Maus, aber auch Touchscreen; Androidtablet mit Maus, etc.)

Wenn man einen touchend und einen click-Listener erstellt, werden beide ausgeführt. Eine mögliche Lösung dafür:

/* doubled-up event listeners */

foo.addEventListener('touchend', someFunction, false);
foo.addEventListener('click', someFunction, false);

/* prevent mouse events + click as part of the common handler */

function someFunction(e) {
    ...
    if (e.type == 'touchend') { e.preventDefault(); }
    ...
}

Libraries: https://github.com/ftlabs/fastclick

Nicht einfach Touch-Versionen von Komponenten entwickeln, sondern Events kombinieren und gemeinsam entwickeln, sodass Elemente unabhängig vom Gerät bspw. per Click, aber auch per Swipe gesteuert werden können.

Multitouch Demo 1 und Multitouch Demo 2 (Am besten auf einem Tablet testen)

pointer events

Vereinheitlicht Events, sodass man sich nicht mehr separat um Touch- und Click-Events kümmern muss. Genau genommen erweitern pointer events die Maus Events. Hat nichts mit den CSS pointer-events zu tun.

Bis IE9 gibt es nur Mouse Events, seit IE10 gibt es auch Pointer Events. Von IE entwickelt, geht bald überall, außer in Safari. http://caniuse.com/#search=pointer%20events

CSS touch-action Eigenschaft

Mit touch-action kann man kontrollieren, ob Touch Scrolling, Pinch Zoom oder Double-Tab Zoom aktiviert sind oder nicht.

touch-action Browsersupport
touch-action auf MDN

Sonstiges

Web Fonts Performance

Bram Stein
@bram_stein
http://www.bramstein.com

Slides: https://speakerdeck.com/bramstein/web-fonts-performance

Es werden 2,8 Fonts bzw. 300kb Fonts im Schnitt pro Seite geladen.

Webfonts (@font-face) werden erst geladen, wenn es für die CSS Regel auch ein passendes DOM Element gibt.

Lazyloading is bad for webfonts
-Bram Stein

FOUT vs. FOIT

Flash of unstyled Text - Fallback Fonts werden gezeigt während die Webfonts geladen werden (IE)

Flash of invisible Text - Nichts wird gezeigt, bis der Font fertig geladen hat (Chrome, Safari, Firefox, Opera). Überall außer Safari wird auch der Fallbackfont gezeigt, wenn der Webfont nicht innerhalb von 3 Sekunden geladen hat.

FOUT is progressive enhancement
-Bram Stein

font-display

https://tabatkins.github.io/specs/css-font-display/#font-display-desc

Eine Eigenschaft mit der man steuern können wird, wie Webfonts dargestellt werden sollen, je nachdem ob sie bereits geladen sind oder nicht. Wird noch von keinem Browser unterstützt.

Webfontloader

https://github.com/typekit/webfontloader
Laden von Fonts kontrollieren.

CSS Font Loading API

http://www.w3.org/TR/css-font-loading/
Standard, der Webfontloader irgendwann ersetzen wird

Dos

Für beste Performance CDNs verwenden, Font lange, bspw. für ein Jahr, cachen und Fonts (nur) in WOFF2 und WOFF einbinden.

WOFF Support: http://caniuse.com/#feat=woff
WOFF2 Support: http://caniuse.com/#feat=woff2

Don'ts

  • Fonts inlinen (base64)
  • Fonts in localstorage speichern
  • Auf das (oben beschriebene) Standardverhalten vertrauen

Making Dog Food Part Of A Balanced Diet

Toby Sterrett
@takeo
http://www.simple.com

Case Study zu https://www.simple.com/

Slides: https://speakerdeck.com/takeo/making-dog-food-part-of-a-balanced-diet

Man sollte Produkte so gestalten, wie man sie sich selber vorstellt.

Sonstiges:

Hands-On Web Audio

Soledad Penadés
@supersole
http://www.soledadpenades.com

Web Audio API Support

Demos: http://webaudioapi.com/samples/

Conversion Rate Optimization Techniques in eCommerce

Christian Holsts
@KiehnHolst
http://www.baymard.com

7 Punkte, die man in Online Shops optimieren kann

1. Guest-Checkout

100% der Leute übersehen den Guest-Checkout, weil die Loginfelder davon ablenken.

=> Lösung Desktop: Linke Spalte Guest-Checkout, Rechte Spalte Login
=> Lösung Mobile: Zuerst die Optionen zeigen und dann erst bei Tap das Login Formular oder den Guest-Checkout Button.

Außerdem sollte man die Registrierung beim Guest-Checkout erst am Ende des Checkout Prozesses anbieten, weil es so eher zu einem Kauf kommt, als wenn die Registrierung schon am Anfang passiert.

2. Fehlermeldungen

Fehlermeldungen sollen zeigen was genau nicht funktioniert hat. Statt „E-Mail ist nicht valide“ ist es bspw. besser zu schreiben „Die E-mail muss ein @ Zeichen aufweisen“.

3. Filter

Filter können zu stark einschränken. Besser ist es die Sortierung auszubauen und Optionen als „Soft-Filter“ zu nutzen.

http://baymard.com/blog/category-specific-sorting

4. Weiterführende Produkte

Menschen suchen am Ende einer Produktdetailseite entweder nach Zubehör zu diesem Produkt oder nach ähnlichen Produkten. Am besten ist es, man bietet beides in separaten Bereichen an.

56% der Websites machen das nicht.

5. Contextual Search Snippets

Man sollte, basierend auf den einzelnen Wörtern und wie viele auf das Ergebnis zutreffen, optisch unterstreichen warum das Produkt relevant ist für den Kunden. Beispielsweise indem man passende Wörter hervorhebt.

96% der Websites machen das nicht.

http://baymard.com/blog/search-snippets

6. Preis pro Einheit

Damit KundInnen Preis-/Leistungsverhältnisse besser vergleichen können, sollten Preise nicht nur pro Produkt, sondern zusätzlich auch pro Einheit angegeben werden. Bei einer Festplatte beispielsweise 50 € bzw. 0,50 Cent pro GB.

Nur 4% der Websites machen das.

7. Zwei „Jetzt bestellen“ Buttons

Viele BenutzerInnen glauben, dass die Bestellzusammenfassung schon die Bestellbestätigung ist. 1. weil sich die Seiten zu ähnlich sehen und 2. weil der „Jetzt bestellen“ Button meistens nicht above the fold ist.

=> Lösung: 2 „Jetzt bestellen“ Buttons. Einer am Anfang der Seite und einer am Ende.

20% der Shops auf Desktop machen das nicht und 40% auf Mobile.

Paper Prototyping Applications

Heydon Pickering
@heydonworks
http://www.heydonworks.com

Dinge, die man für Paper Prototyping benötigt:

  • Viele kleine Zettel und ein paar große Zettel (A2)
  • Tixo, (doppelseitige) Klebebänder
  • Durchsichtige Folie (für Inputfelder bspw.)
  • Stifte in Schwarz (für die Elemente), Rot (für Fehler und Warnungen), Blau (für Links) und Grün (für „gute Dinge“).

Dinge, die man für das Testen von Paper Prototypen benötigt:

  • 2 TesterInnen
  • 2 ModeratorInnen - Eine/r sieht zu und macht Notizen. Der/die andere baut die Templates neu zusammen, je nachdem was die TesterInnen machen.

Paperprototyping

Für den Test muss man vorher die Aufgaben und die Ausgangssituation für die TesterInnen definieren. Wichtig ist, dass den TestInnen klar ist, dass nicht sie überprüft werden, sondern die App.

We are testing the app, not you

Vorteile von Paper Prototyping

  • Interaktiv
  • Macht Spass
  • Technologieunabhängig
  • Demokratisch

Sonstiges

Manuel Matuzovic

Frontend Developer aus Wien.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *