Emotionen im Webdesign

Präsentation anlässlich des Contao Nordtag 2013. Thema: Wie mache ich meine Website oder meinen Online-Shop für Besucher attraktiver?

Transcript

1. Websites emotional gestalten
   Wie mache ich meine Website oder meinen Online-Shop
   für Besucher attraktiver?
   Vortrag zum Contao Nordtag 2013
   ★ Was können Emotionen leisten?
   ★ Wie erzeugt man positive Emotionen?
   ★ Gefahren von Emotionen im Webdesign
   

   View Slide

2. Dennis Erdmann
   Geschäftsführer der Internetagentur SOLADES,
   zuständig für Konzeption & Gestaltung
   ★ Kieler
   ★ 29 Jahre alt
   ★ Hundeliebhaber
   ★ Gelegenheitsläufer
   web:
   twitter:
   denniserdmann.de & solades.de
   @denniserdmann
   Über mich
   

   View Slide

3. Welche Erwartungen haben Nutzer
   im Jahr 2013 an eine Website?
   

   View Slide

4. Gra k: Aaron Walter
   funktional
   zuverlässig
   benutzerfreundlich
   attraktiv
   Erwartungen an eine Website
   }heutzutage bei
   nahezu allen
   Websites standard
   

   View Slide

5. Gra k: Aaron Walter
   funktional
   zuverlässig
   benutzerfreundlich
   attraktiv
   {
   fehlt bei
   vielen Websites
   Erwartungen an eine Website
   

   View Slide

6. Was Emotionen leisten
   Was können Emotionen leisten?
   

   View Slide

7. Was Emotionen leisten
   Was können Emotionen leisten?
   ★ Freude in der Benutzung scha en
   

   View Slide

8. Was Emotionen leisten
   Was können Emotionen leisten?
   ★ Freude in der Benutzung scha en
   ★ Interesse und Neugierde wecken
   

   View Slide

9. Was Emotionen leisten
   Was können Emotionen leisten?
   ★ Freude in der Benutzung scha en
   ★ Interesse und Neugierde wecken
   ★ Vertrauen aufbauen
   

   View Slide

10. Was Emotionen leisten
    Was können Emotionen leisten?
    ★ Freude in der Benutzung scha en
    ★ Interesse und Neugierde wecken
    ★ Vertrauen aufbauen
    ★ Sympathie des Kunden gewinnen
    

    View Slide

11. Was Emotionen leisten
    Was können Emotionen leisten?
    ★ Freude in der Benutzung scha en
    ★ Interesse und Neugierde wecken
    ★ Vertrauen aufbauen
    ★ Sympathie des Kunden gewinnen
    ★ Toleranz scha en
    

    View Slide

12. Möglichkeiten zur Erzeugung von Emotionen
    ★ Farben
    ★ Bilder & Bildsprache
    ★ Texte
    ★ Überraschungen & Gimmicks
    ★ Aufmerksamkeiten & Belohnungen
    Wie kann man Emotionen beim
    Seitenbesucher erzeugen?
    

    View Slide

13. Emotionen erzeugen durch Farben
    Emotionen durch Farben
    

    View Slide

14. Emotionen durch Farben
    

    View Slide

15. Emotionen durch Farben
    hm.com/de/
    

    View Slide

16. Emotionen durch Farben
    mediamarkt.de
    

    View Slide

17. Emotionen durch Farben
    o ce.mircosoft.com
    

    View Slide

18. Emotionen durch Farben
    wwf.de 2006 bis 01.2012
    

    View Slide

19. Emotionen durch Farben
    wwf.de 2013
    

    View Slide

20. Emotionen erzeugen durch
    Bilder und Bildsprache
    Emotionen durch Bilder
    

    View Slide

21. allianz.de 2006
    Emotionen durch Bilder
    

    View Slide

22. allianz.de 2013
    Emotionen durch Bilder
    

    View Slide

23. its.de
    Emotionen durch Bilder
    

    View Slide

24. Emotionen erzeugen durch den
    Einsatz von Personen
    Emotionen durch Bilder
    

    View Slide

25. Ich bin eine wichtige Headline
    Ich bin ein kurzer Beschreibungstext Lorem
    ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor
    invidunt ut labore et dolore magna.
    Emotionen durch Bilder
    

    View Slide

26. Bild: Flickr, patriziasoliani
    Ich bin eine wichtige Headline
    Ich bin ein kurzer Beschreibungstext Lorem
    ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor
    invidunt ut labore et dolore magna.
    Emotionen durch Bilder
    

    View Slide

27. Bild: giro-sucht-hero.de
    Emotionen durch Bilder
    

    View Slide

28. Bild: mailchimp.com
    Emotionen durch Bilder
    

    View Slide

29. Faktor Persönlichkeit
    Bild: Flickr, Russ Robinson
    

    View Slide

30. markenservice.net, ohne Personen
    Emotionen durch Bilder
    

    View Slide

31. markenservice.net, mit Person
    Emotionen durch Bilder
    

    View Slide

32. markenservice.net, mit Person
    Emotionen durch Bilder
    + 39%
    

    View Slide

33. Emotionen durch Bilder
    

    View Slide

34. Emotionen durch Bilder
    +15%
    

    View Slide

35. Emotionen durch Bilder
    derzeitige Landinpage auf markenservice.net
    

    View Slide

36. Eine Studie: „Exploring Human
    Images in Website Design“
    Emotionen durch Bilder
    

    View Slide

37. Bilder: SONY Website
    Emotionen durch Bilder
    ohne Menschen Menschen im Anschnitt
    Menschen gut erkennbar
    

    View Slide

38. Emotionen durch Bilder
    Ergebnisse der Studie:
    ★ Personen erhöhen die Attraktivität einer Website und das länder- und
    kulturübergreifend.
    ★ Websites, auf den Personen dargestellt werden, werden generell als
    wärmer und emotional ansprechender empfunden
    ★ Je attraktiver die Bilder, desto größer das Vertrauen in die Website
    

    View Slide

39. Emotionen durch Bilder
    Pinterest als weiterer Absatzkanal
    

    View Slide

40. Emotionen erzeugen durch
    Texte und Sprache
    Emotionen durch Text
    

    View Slide

41. manufactum.de
    Emotionen durch Text
    

    View Slide

42. „Wenn sich ein traditionsreicher Schuhmacher – Le
    Chameau in der Normandie fertigt seit 1927 Stiefel
    und Schuhe höchster Qualität – und ein nicht
    weniger renommierter Reifenhersteller – Michelin
    fabriziert bereits seit 1889 „Pneumatiques“ –
    zusammentun, um ihre Erfahrungen und Techniken
    zu addieren, dann entsteht ein Stiefel, der in Form,
    Funktion und Qualität seinesgleichen sucht.“
    manufactum.de
    Emotionen durch Text
    

    View Slide

43. x-bionic.de
    Emotionen durch Text
    

    View Slide

44. x-bionic.de
    „Was X-BIONIC Produkte leisten, ist Legende.
    Wie sie entstehen Top Secret.“
    Emotionen durch Text
    

    View Slide

45. x-bionic.de
    „Unsere Vorbilder haben den härtesten Feind
    besiegt: Die Natur“
    Emotionen durch Text
    

    View Slide

46. x-bionic.de
    Emotionen durch Text
    

    View Slide

47. Emotionen erzeugen durch
    Überraschungen und Gimmicks
    Emotionen durch Überraschung
    

    View Slide

48. WM Finale bei Google
    Emotionen durch Überraschung
    

    View Slide

49. Valentinstag bei Google
    Emotionen durch Überraschung
    

    View Slide

50. Olympischen Spiele bei Google
    Emotionen durch Überraschung
    

    View Slide

51. Login bei Mailchimp am 04. Mai
    Emotionen durch Überraschung
    

    View Slide

52. Login bei Mailchimp zum Winteranfang
    Emotionen durch Überraschung
    

    View Slide

53. henrikhedegaard.com
    Emotionen durch Überraschung
    

    View Slide

54. heinz.com
    Emotionen durch Überraschung
    

    View Slide

55. ickr mit Serverproblemen
    Emotionen durch Überraschung
    

    View Slide

56. Bild: Developpeur
    Emotionen durch Überraschung
    

    View Slide

57. Bild: Canna W
    Emotionen durch Überraschung
    

    View Slide

58. Emotionen erzeugen durch
    Aufmerksamkeiten und Belohnung
    Emotionen durch Belohnung
    

    View Slide

59. Mail von Dropbox an Premium-Kunden, Nachricht: Sebastian Schack
    Emotionen durch Belohnung
    

    View Slide

60. Das ZALANDO der USA: toms.com
    24h
    Emotionen durch Belohnung
    

    View Slide

61. Twitter-Alternative app.net
    Emotionen durch Belohnung
    

    View Slide

62. Gefahren von Emotionen
    im Webdesign
    Emotionen durch Belohnung
    ★ Emotionen tre en nicht jeden Geschmack
    ★ sie können falsch aufgefasst werden
    ★ Sie können dem Unternehmensimage schaden
    

    View Slide

63. SOLADES®
    Holstenstraße 22
    24103 Kiel
    0431.560 10 60 | www.solades.de
    Noch Fragen?
    

    View Slide