seoCon seoCon seoCon seoCon
  • SEO
    • Suchmaschinenoptimierung
    • OnPage Optimierung
    • OffPage Optimierung
    • Linkmarketing
    • Keyword Analyse
    • Social SEO
    • YouTube SEO
    • Local SEO
    • Mobile SEO
    • App Store Optimization
    • SEO Check
  • SEM
    • Suchmaschinenmarketing
    • Suchmaschinenwerbung
    • Google AdWords
    • Keyword Recherche
    • Kampagnenplanung
    • Kampagnensetup
    • Kampagnenmanagement
  • Webdesign
    • Webdesign
    • WordPress Webdesign
    • Drupal Webdesign
    • Magento Webdesign
    • TYPO3 Webdesign
    • Webentwicklung
    • Webhosting
  • Online Marketing
    • Online Marketing
      • Inbound Marketing
      • Content Marketing
      • Social Media Marketing
      • Facebook Marketing
      • Instagram Marketing
      • E-Mail Marketing
      • Mobile Marketing
      • Affiliate Marketing
      • Growth Hacking
      • White-Label Online-Marketing
      • YouTube Marketing
    • E-Commerce Agentur
      • Webshop Agentur
      • Google Shopping
      • Amazon SEO
      • Shopware Agentur
      • Shopify Agentur
    • Webanalyse
      • Conversion Rate Optimierung
      • Google Data Studio Agentur
      • Online Reputation Management
      • Tag Management
    • Workshops und Seminare
      • SEO Workshop
      • Online Marketing Workshop
      • Social Media Workshop
      • Facebook Workshop
      • Instagram Workshop
      • Google AdWords Workshop
      • Google Tag Manager Workshop
      • Google Analytics Workshop
      • WordPress Workshop
  • Unternehmen
    • Über Uns
    • Team
    • Leistungen
    • Referenzen
    • News
    • Jobs
  • Kontakt
seoCon seoCon
  • SEO
    • Suchmaschinenoptimierung
    • OnPage Optimierung
    • OffPage Optimierung
    • Linkmarketing
    • Keyword Analyse
    • Social SEO
    • YouTube SEO
    • Local SEO
    • Mobile SEO
    • App Store Optimization
    • SEO Check
  • SEM
    • Suchmaschinenmarketing
    • Suchmaschinenwerbung
    • Google AdWords
    • Keyword Recherche
    • Kampagnenplanung
    • Kampagnensetup
    • Kampagnenmanagement
  • Webdesign
    • Webdesign
    • WordPress Webdesign
    • Drupal Webdesign
    • Magento Webdesign
    • TYPO3 Webdesign
    • Webentwicklung
    • Webhosting
  • Online Marketing
    • Online Marketing
      • Inbound Marketing
      • Content Marketing
      • Social Media Marketing
      • Facebook Marketing
      • Instagram Marketing
      • E-Mail Marketing
      • Mobile Marketing
      • Affiliate Marketing
      • Growth Hacking
      • White-Label Online-Marketing
      • YouTube Marketing
    • E-Commerce Agentur
      • Webshop Agentur
      • Google Shopping
      • Amazon SEO
      • Shopware Agentur
      • Shopify Agentur
    • Webanalyse
      • Conversion Rate Optimierung
      • Google Data Studio Agentur
      • Online Reputation Management
      • Tag Management
    • Workshops und Seminare
      • SEO Workshop
      • Online Marketing Workshop
      • Social Media Workshop
      • Facebook Workshop
      • Instagram Workshop
      • Google AdWords Workshop
      • Google Tag Manager Workshop
      • Google Analytics Workshop
      • WordPress Workshop
  • Unternehmen
    • Über Uns
    • Team
    • Leistungen
    • Referenzen
    • News
    • Jobs
  • Kontakt
Feb 14

Microinteractions

Microinteractions mit HTML & CSS

Gute User-Experience wird im modernen Webdesign immer wichtiger und ist dank der aktuellen Technik auch leicht umzusetzen. Ist der User nach einem Besuch auf der Website erst recht verwirrt oder findet er alle Informationen die er braucht? 

Was sind Micro-Interactions?

Angenommen Sie wollen im Internet ein wichtiges Dokument herunterladen und müssen dafür Ihre E-Mail-Adresse angeben. Sie füllen das erforderliche Feld aus und drücken auf „download“ – aber nichts passiert! Sie drücken vielleicht noch mal darauf, laden die Seite neu oder im schlimmsten Fall geben Sie irgendwann frustriert auf. 

Interaction-Design ist ein wesentlicher Teil der User-Experience und versucht genau für solche Probleme eine Lösung zu finden. Haben Sie vielleicht eine ungültige E-Mail-Adresse angegeben? Oder haben Sie das Dokument mittlerweile eh schon drei mal in ihrem Downloads-Ordner? Gute WebdesignerInnen wissen, dass eine Website auch antworten muss, damit der User weiß, was gerade passiert.

Micro-Interactions beschreiben sehr kurze Veränderungen, die nach einer Aktion ausgeführt werden. Ein Ladebalken oder der Hinweis „Download in Arbeit … “ würde schon genügen, um den User zu beruhigen. Don Norman, Professor für Informatik und Kognitionswissenschaften hat bereits sieben Regeln für erfolgreiches Interaction-Design festgelegt – und „zeitnahes Feedback“ ist nur eines davon.

HTML und CSS

HTML und CSS sind die technischen Grundlagen für Webentwicklung. Mit HTML kann man das Grundgerüst einer Seite angeben z.B: hier befindet sich eine Überschrift, danach kommt ein Bild, danach ein Button. Mit CSS können sie die Postion, die Farben und Größen dieser Elemente verändern. Beide Sprachen werden regelmäßig aktualisiert und WebdesignerInnen sollten diese neuen Features auch ausnutzen.

Mit neuesten Version von CSS kann man zum Beispiel:

  • 2D und 3D Grafiken nutzen
  • Eindrucksvolle Effekte erstellen
  • Eigene Schriftarten einbinden
  • Logos und Vektor-Grafiken einbinden
  • die Website auch am Handy und Tablet passend darstellen

Sie können sich darunter nicht viel vorstellen? Hier sehen Sie, welche zahlreichen Möglichkeiten es gibt, um eine Überschrift zu animieren: https://daneden.github.io/animate.css/

Ein anderes gut gelungenes Beispiel für aufwändigere Micro-Interactions ist z.B: die App Asana, welche wir bei seoCon für unsere To-Do-Listen nutzen. Jedesmal, wenn wir einen Task abhaken, fliegt als Belohnung ein kleines Einhorn über den Bildschirm.

Aber auch schon ganz kleine Veränderungen reichen aus, um zu zeigen, ob eine Handlung erfolgreich ausgeführt wurde. Die Farbe oder die Größe eines Objekts zu ändern, ist schon mit wenigen Zeilen Code möglich. Hier sehen Sie, wie man die Farbe eines Buttons von Rot auf Gelb ändert: 

    

    button {
      animation-name: change-color;
      animation-duration: 4s;
    }

    @keyframes change-color {
      from {background-color: red;}
      to {background-color: yellow;}
    }

    

Zuerst weist man dem Button eine Animation mit dem Namen „change-color“ zu und legt fest, wie lange diese dauern soll, hier z.B. vier Sekunden. Mit dem Schlüsselwort „keyframe“ beschreibt man die besagte Animation genauer, nämlich dass sich die Farbe von Rot auf Gelb ändern soll. 

Man merkt sofort, ob eine Website liebevoll und mit einem Auge fürs Detail gestaltet worden ist, daher beschäftigen wir uns mit dem aktuellen Stand der neuesten Technik um solche Animationen auf den Websites unserer Kunden einzusetzen. 

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail

Comments are closed.

Kontakt

Landstraße 82, A-4020 Linz
Kärntner Ring 5-7, A-1010 Wien
Telefon: +43 732 270243
Email: office@seocon.at
Web: www.seocon.at

Follow Us

Über Uns

Als Consulting- und Internetagentur im Online Marketing Bereich berät seoCon Unternehmen aller Branchen hinsichtlich deren Webauftritten.

Newsletter

Der Newsletter informiert über aktuelle Angebote und unsere Firma. Nähere Informationen zu den Inhalten sowie der Abbestellmöglichkeiten erhalten Sie in unserer Datenschutzerklärung.

Neueste Beiträge

  • LinkedIn Marketing Leitfaden 2021
  • Die Psychologie hinter Storytelling
  • Kostenlose Ranking Checker ohne Anmeldung
  • Die wichtigsten Plugins für WordPress
  • Conversion Optimierung: 5 Tipps für mehr Verkäufe im Online-Shop

Über uns

Als Consulting- und Internetagentur im Online Marketing Bereich berät seoCon Unternehmen aller Branchen hinsichtlich deren Webauftritten und entwickelt State of the Art Webseiten. Unsere Berater und Entwickler in Linz, Wien, Salzburg sowie dem Waldviertel beraten Sie gerne!

News

  • LinkedIn Marketing Leitfaden 2021
  • Die Psychologie hinter Storytelling
  • Kostenlose Ranking Checker ohne Anmeldung
  • Die wichtigsten Plugins für WordPress
  • Conversion Optimierung: 5 Tipps für mehr Verkäufe im Online-Shop

Auszug Leistungen

SEOWebdesignOnline MarketingE-Commerce WorkshopsSEMWebanalyseWebentwicklung

seoCon

Landstraße 82, A-4020 Linz
Kärntner Ring 5-7, A-1010 Wien
Telefon: +43 732 270243
Email: office@seocon.at
Web: www.seocon.at

©2020 by seoCon | Online Marketing | Suchmaschinenoptimierung | Suchmaschinenmarketing | AdWords Agentur | Impressum | Datenschutz
  • Home
  • SEO / Suchmaschinenoptimierung
  • SEM / Suchmaschinenmarketing
  • Webdesign
  • Webanalyse
  • Workshops und Seminare
  • Leistungen
  • Über Uns
  • Kontaktieren Sie uns
  • Kostenlose Erstanalyse
  • Unverbindliches Angebot
  • Kontakt