seoCon seoCon seoCon seoCon
  • SuchmaschinenoptimierungSEO
    • SuchmaschinenoptimierungSuchmaschinenoptimierung
    • OnPage OptimierungOnPage Optimierung
    • OffPage OptimierungOffPage Optimierung
    • LinkmarketingLinkmarketing
    • Keyword AnalyseKeyword Analyse
    • Social SEOSocial SEO
    • YouTube SEOYouTube SEO
    • Local SEOLocal SEO
    • Mobile SEOMobile SEO
    • App Store SEOApp Store Optimization
    • SEO CheckSEO Check
  • SuchmaschinenmarketingSEM
    • SuchmaschinenmarketingSuchmaschinenmarketing
    • SuchmaschinenwerbungSuchmaschinenwerbung
    • Google AdWords BeratungGoogle AdWords
    • Keyword RechercheKeyword Recherche
    • Kampagnen PlanungKampagnenplanung
    • Kampagnen SetupKampagnensetup
    • Kampagnen ManagementKampagnenmanagement
  • WebdesignWebdesign
    • WebdesignWebdesign
    • WordPress AgenturWordPress Webdesign
    • Drupal AgenturDrupal Webdesign
    • Magento AgenturMagento Webdesign
    • WebdesignTYPO3 Webdesign
    • WebentwicklungWebentwicklung
    • Kampagnen SetupWebhosting
  • Online MarketingOnline Marketing
    • Online MarketingOnline Marketing
      • Inbound MarketingInbound Marketing
      • Content MarketingContent Marketing
      • Social Media MarketingSocial Media Marketing
      • Social SEOFacebook Marketing
      • Social Media MarketingInstagram Marketing
      • E-Mail MarketingE-Mail Marketing
      • Mobile MarketingMobile Marketing
      • Affiliate MarketingAffiliate Marketing
      • Growth HackingGrowth Hacking
      • Online MarketingWhite-Label Online-Marketing
      • YouTube SEOYouTube Marketing
      • Growth HackingPerformance Marketing
    • E-Commerce BeratungE-Commerce Agentur
      • Webshop AgenturWebshop Agentur
      • Google ShoppingGoogle Shopping
      • Amazon SEOAmazon SEO
      • Webshop AgenturShopware Agentur
      • Webshop AgenturShopify Agentur
      • Webshop AgenturWooCommerce Agentur
    • WebanalyseWebanalyse
      • Conversion Rate OptimierungConversion Rate Optimierung
      • WebanalyseGoogle Data Studio Agentur
      • Online Reputation OptimierungOnline Reputation Management
      • Tag ManagementTag Management
    • Workshops seoConWorkshops und Seminare
      • SEO WorkshopSEO Workshop
      • Online Marketing WorkshopOnline Marketing Workshop
      • Social Media WorkshopSocial Media Workshop
      • Social Media WorkshopFacebook Workshop
      • Social Media WorkshopInstagram Workshop
      • Workshops seoConGoogle AdWords Workshop
      • Workshops seoConGoogle Tag Manager Workshop
      • Workshops seoConGoogle Analytics Workshop
      • Workshops seoConWordPress Workshop
  • Unternehmen
    • Über Uns
    • Team
    • Leistungen
    • Referenzen
    • News
    • Jobs
  • Kontakt
seoCon seoCon
  • SuchmaschinenoptimierungSEO
    • SuchmaschinenoptimierungSuchmaschinenoptimierung
    • OnPage OptimierungOnPage Optimierung
    • OffPage OptimierungOffPage Optimierung
    • LinkmarketingLinkmarketing
    • Keyword AnalyseKeyword Analyse
    • Social SEOSocial SEO
    • YouTube SEOYouTube SEO
    • Local SEOLocal SEO
    • Mobile SEOMobile SEO
    • App Store SEOApp Store Optimization
    • SEO CheckSEO Check
  • SuchmaschinenmarketingSEM
    • SuchmaschinenmarketingSuchmaschinenmarketing
    • SuchmaschinenwerbungSuchmaschinenwerbung
    • Google AdWords BeratungGoogle AdWords
    • Keyword RechercheKeyword Recherche
    • Kampagnen PlanungKampagnenplanung
    • Kampagnen SetupKampagnensetup
    • Kampagnen ManagementKampagnenmanagement
  • WebdesignWebdesign
    • WebdesignWebdesign
    • WordPress AgenturWordPress Webdesign
    • Drupal AgenturDrupal Webdesign
    • Magento AgenturMagento Webdesign
    • WebdesignTYPO3 Webdesign
    • WebentwicklungWebentwicklung
    • Kampagnen SetupWebhosting
  • Online MarketingOnline Marketing
    • Online MarketingOnline Marketing
      • Inbound MarketingInbound Marketing
      • Content MarketingContent Marketing
      • Social Media MarketingSocial Media Marketing
      • Social SEOFacebook Marketing
      • Social Media MarketingInstagram Marketing
      • E-Mail MarketingE-Mail Marketing
      • Mobile MarketingMobile Marketing
      • Affiliate MarketingAffiliate Marketing
      • Growth HackingGrowth Hacking
      • Online MarketingWhite-Label Online-Marketing
      • YouTube SEOYouTube Marketing
      • Growth HackingPerformance Marketing
    • E-Commerce BeratungE-Commerce Agentur
      • Webshop AgenturWebshop Agentur
      • Google ShoppingGoogle Shopping
      • Amazon SEOAmazon SEO
      • Webshop AgenturShopware Agentur
      • Webshop AgenturShopify Agentur
      • Webshop AgenturWooCommerce Agentur
    • WebanalyseWebanalyse
      • Conversion Rate OptimierungConversion Rate Optimierung
      • WebanalyseGoogle Data Studio Agentur
      • Online Reputation OptimierungOnline Reputation Management
      • Tag ManagementTag Management
    • Workshops seoConWorkshops und Seminare
      • SEO WorkshopSEO Workshop
      • Online Marketing WorkshopOnline Marketing Workshop
      • Social Media WorkshopSocial Media Workshop
      • Social Media WorkshopFacebook Workshop
      • Social Media WorkshopInstagram Workshop
      • Workshops seoConGoogle AdWords Workshop
      • Workshops seoConGoogle Tag Manager Workshop
      • Workshops seoConGoogle Analytics Workshop
      • Workshops seoConWordPress 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

    • Mastodon und Microblogging
    • Die aktuellen Ranking-Systeme von Google im Überblick!
    • PageSpeed Optimierung
    • Trend App BeReal
    • Neue Facebook Seitenversion

    Ü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

    • Mastodon und Microblogging
    • Die aktuellen Ranking-Systeme von Google im Überblick!
    • PageSpeed Optimierung
    • Trend App BeReal
    • Neue Facebook Seitenversion

    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

    ©2021 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