Kategorien
E-Business Freelance Workflow

Content Marketing: 20+ kostenlose E-Books in Perfect English

Diejenigen unter euch, die mit dem Bloggen starten möchten und es wirklich ernst meinen, freuen sich über den einen oder anderen Tipp von Experten aus erster Hand. Da wir das natürlich wissen, haben wir das Netz nach den interessantesten E-Books durchsucht, welche sich mit den Themen Blogging und Content-Marketing beschäftigen. Wir haben einige gute Exemplare gefunden, die das Ergebnis von Jahren der Erfahrung und vielen Fehlern sind. Mit Tipps und Wissen aus erster Hand kannst du die Fehler vermeiden, die andere bereits für dich gemacht haben.

Kategorien
Design UI/UX Webdesign

User Experience Design: Was es ist und wie man es richtig einsetzt

Dass der Kunde immer Recht hat, wissen wir ja schon länger. Nur wird dieser Spruch oftmals als Fabel abgetan und recht selten beherzigt. Doch genau diese Einstellung kostet eine Menge Geld, Geld, welches keine Chance hat, verdient zu werden.

Egal zu welcher Branche dein Unternehmen zählt, an der Spitze einer jeden Marketing-Strategie steht stets der Kunde. Erst dann, wenn der Kunde zufrieden ist, kann es auch das Unternehmen sein. Nur dann optimiert ein Geschäft seine Umsätze. Gerade in der digitalen Welt ist die Zufriedenheit des Kunden sehr fragil; der Wettbewerb ist nur einen Klick entfernt.

Und so muss der Fokus nicht nur, aber besonders hier auf Kunden-Zufriedenheit und Service gelegt werden. Das betrifft ebenfalls nicht nur Online-Shops, sondern jedwede Art von Internet-Präsenz. Neben Produkten, Prozessen und so weiter, muss auch das User Experience Design optimal sein. Ich stelle kurz vor, was das ist und wie das geht…

Das ist User Experience Design

Das Konzept des User Experience Design konzentriert sich auf die Interaktion zwischen Website und Kunde. Dabei soll sichergestellt werden, dass diese sowohl schnell wie ansprechend funktioniert. Der Zusammenhang zwischen gutem User Experience (UX) Design und erfolgreichen Websites ist stark, was nicht wirklich verwundert. Denn nur, wenn dein Kunde eine gute Erfahrung bei der Nutzung deiner Website hat, dann wird er auch Vertrauen entwickeln, die nächsten Schritte zu gehen.

Die User Experience DIN EN ISO 9241-210

Da wir Deutschen dazu neigen, alles zu bürokratisieren, existiert seit Januar 2011 die User Experience als definierter Begriff in der DIN EN ISO 9241-210.

user-experience-design-definition
© Copyright Karsten Nolte – http://www.karsten-nolte.de

Die DIN ISO 9241-210 beschreibt die User-Experience wie folgt:

„Wahrnehmungen und Reaktionen einer Person, die aus der tatsächlichen und/oder der erwarteten Benutzung eines Produkts, eines Systems oder einer Dienstleistung resultieren.“

Anmerkung 1: „User Experience umfasst sämtliche Emotionen, Vorstellungen, Vorlieben, Wahrnehmungen, physiologischen und psychologischen Reaktionen, Verhaltensweisen und Leistungen, die sich vor, während und nach der Nutzung ergeben.“

Anmerkung 2: „User Experience ist eine Folge des Markenbilds, der Darstellung, Funktionalität, Systemleistung, des interaktiven Verhaltens und der Unterstützungsmöglichkeiten des interaktiven Systems, des psychischen und physischen Zustands des Benutzers aufgrund seiner Erfahrungen, Einstellungen, Fähigkeiten und seiner Persönlichkeit sowie des Nutzungskontextes.“

Anmerkung 3: „Die Gebrauchstauglichkeit kann, sofern sie unter dem Blickwinkel der persönlichen Ziele des Benutzers interpretiert wird, die Art der typischerweise mit der User Experience verbundenen Wahrnehmungen und emotionalen Aspekte umfassen. Kriterien der Gebrauchstauglichkeit können angewendet werden, um Aspekte der User Experience zu beurteilen.“

User Experience auf den Punkt gebracht

User Experience Design stellt dem Besucher einer Website ein einfaches, klares, intuitives und wohldurchdachtes Design zur Verfügung. Alle wichtigen Elemente sollen sich genau dort befinden, wo der Besucher sie erwartet. Kurzum: Die Benutzerfreundlichkeit soll so groß wie nur möglich sein. Optimierung kann durch Umfragen, Tests und ständiges Erforschen der Zielgruppe erreicht werden. Auch die Konkurrenz sollte regelmäßig überprüft und analysiert werden.

Service und Support

Vernachlässigen solltest du auf keinen Fall den Service, denn gerade Service und Support sind hervorragende Mittel zur Kundenbindung. In diesem Bereich könntest du dir durchaus ein Alleinstellungsmerkmal schaffen.

Ein Beispiel für gutes User Experience Design


Foundation Framework

Die Website des Foundation-Frameworks ist ein gutes Beispiel für gelungenes UX-Design. Sie kommt in einem einfach und klar gehaltenen Flat-Design daher und lenkt die Aufmerksamkeit durch gute Kontraste auf zwei Bereiche:

Den Call-to-Action-Button zum Herunterladen und die Menüleiste oben. Auf dieser Website findet man sich sofort zurecht. Zudem lädt die Website angenehm schnell, sodass der User nicht geneigt ist, schnell wieder das Weite zu suchen. Bilder werden nur zur Unterstützung des eigentlichen Inhalts verwendet und lenken nicht von diesem ab.

Gerade Bilder sollten eher sparsam und nur unterstützend eingesetzt werden, stets bedacht darauf, den Nutzer dorthin zu geleiten, wo du ihn hinhaben willst.

Entwickele deine Design-Strategie

design-strategie

Der Ausgangspunkt: die Farbe

Wenn du eine Design-Strategie für ein optimales User Experience Design entwickelst, startest du vielleicht als erstes mit der Farbauswahl. Ein minimalistisches Theme wirkt zum Beispiel sehr gut mit einem monochromatischen Layout, ohne erschlagende Kontraste.

Die zurzeit beliebteste Kombination ist trichromatisch. Es wird ein neutraler Hintergrund in Weiß oder sehr hellem Grau gewählt, dazu eine Highlight-Farbe für Registerkarten, Buttons und Elemente, die hervorstechen sollen. So könnte eine moderne Website in einer Schwarzweiß-Kombination gestaltet werden, mit einem farbigen Kopfbereich oder einem nicht ablenkenden Hero-Grafik-Bereich.

Der Blick des Users sollte sich direkt auf die wichtigen Bereiche der Website lenken lassen. Um dies zu erreichen, könntest du ausgiebige Tests mit Usern oder sogenannten Heatmaps durchführen. Für ein optimales UX-Design ist es wichtig, seine User verstehen zu lernen, um ihnen das bieten zu können, was sie gerne hätten oder erwarten.

Auf einer weißen Hintergrundseite wird bereits ein kleiner Farbklecks die Aufmerksamkeit des Besuchers auf sich ziehen. Unter diesen Vorgaben lassen sich zum Beispiel optimale Formulare gestalten. Auch Produktbilder funktionieren am Besten auf weißen Hintergründen. In Kombination mit sich farblich deutlich abhebenden Call-to-Action-Buttons wird ein ruhiger und klarer Gesamteindruck geschaffen.

Effekte und Menüs

Wenn die Farbwahl nun getroffen wurde, nimmst du dir als nächstes vielleicht die Effekte vor, die deine Website aufweisen soll. Auch hier ist weniger mehr. Sehr gut lassen sich Effekte für die Validation von Formulardaten einsetzen, weil sich so ein wirkliches Plus an Benutzerfreundlichkeit umsetzen lässt. Richtig angewendet können auch Icons die Benutzerfreundlichkeit um einiges erhöhen.

Ein Menü sollte sich stets ausreichend vom Inhalt abheben und sofort wahrgenommen werden können. Lass dir sich mit der Beschriftung der einzelnen Menüpunkte ruhig Zeit und teste verschiedene Varianten. Auch hier können Heatmaps und Test-User helfen. Wirklich wichtige Punkte des Menüs dürfen ruhig deutlich farblich abgesetzt als Call-to-Action-Button gestaltet sein. So erkennt ein Besucher sofort, was von ihm erwartet wird.

Minimalistische Designs verbreiten sich immer mehr im Web. Sie funktionieren auf einem Desktop-Rechner ebenso gut wie mobil auf einem Smartphone oder Tablet. Einige der größten Marken überhaupt sind zu einem minimalistischen Flat-Design gewechselt. Was für diese großen Marken funktioniert, kann auch für dein Unternehmen funktionieren.

Stets im Hinterkopf behalten:

Bedenke stets, dass der Computer-Monitor nur einen Teil der Gesamterfahrung abbilden kann. Du willst dem Besucher deiner Website den besten Service innerhalb der kürzesten Zeit zur Verfügung stellen. Service fängt aber mit einer optimierten Website nur an. Sobald der Besucher schnell und intuitiv von der Startseite zum ausgefüllten und abgeschickten Kassenformular findet, ist die Website optimal aufgebaut.

Nach dem Verkauf geht die User-Experience noch weiter, Service und Support bieten ein bisher kaum ausgelotetes Potenzial zur Kundenbindung. In diesem Bereich können wir mit Sicherheit noch sehr viel von den Amerikanern lernen, die als Meister der Freundlichkeit und des Services gelten.

Fazit

Ein wirklich gutes User Experience Design ist nicht mal eben umzusetzen. Eingehende Tests, Forschungen und ständiges Verbessern des Status quo sind erforderlich, um optimale Ergebnisse zu erreichen. Die harte Arbeit wird dann hoffentlich mit mehr Verkäufen belohnt werden. Denn: Je besser sich ein Kunde zu recht findet, desto eher wird er auch kaufen wollen.

Links zum Beitrag

(Artikelbild: Depositphotos)

Kategorien
Inspiration Webdesign

Emotionales Webdesign: So einfach sind die Grundlagen!

Emotionales Webdesign ist nicht etwa eine Gestaltung, bei der potenzielle Besucher in Tränen ausbrechen. Ebensowenig ist damit gemeint, dass die Gestaltung durch einen labilen Designer mit Trennungsschmerz erstellt wurde. Schauen wir also, was emotionales Webdesign wirklich ist.

Kategorien
Inspiration Showcases

Inspirationsquellen: 33 neue, preisgekrönte Websites

Auch der kreativste Webdesigner benötigt Inspiration, damit er ein weiteres Website-Wunderwerk erschaffen kann. Zur Unterstützung haben wir für Sie das Internet nach den schönsten Webseiten durchsucht und dabei eine Auswahl an preisgekrönten Websites zur Inspiration zusammen gestellt. Jede einzelne dieser Websites wurde von professionellen Designern und Agenturen rund um den Globus erstellt. Alle sind responsiv und zeichnen ein diversifiziertes Bild unterschiedlicher Branchen. Möge das Web (noch) schöner werden.

33 neue Websites zur Inspiration

1. Totem

Totem

2. Catalogue-Interactif Bonobo

Catalogue-Interactif Bonobo

3. Nothing But Thieves

Nothing-But-Thieves

4. One Dollar Lesson

One-Dollar-Lesson

5. Five Minutes

FIVE-MINUTES

6. Doriart Webdesign

Doriart

7. Vangarde Music

We-are-Vangarde

8. Sons of Anarchy Tattoo Stories

Sons-of-Anarchy-Tattoo-Stories

9. RGB Media Webdesign-Agency

RGB-MEDIA

10. De Haus

De-Haus

11. Gogoro

Gogoro

12. adaptable

adaptable

13. Trippeo

Trippeo

14. Let´s make History

Lets make History

15. Urban Influence

Urban-Influence

16. MoodBoard Film

MOODBOARD

17. Reebok – Be more Human

Reebok - Be more Human

18. Easy Rocket Studio

Easy-Rocket-Studio

19. Chedi Andermatt Residences

Chedi Andermatt Residences

20. Celebrating Chinese New Year 2015

Celebrating-Chinese-New-Year-2015

21. We are Zaion

We-Are-Zaion

22. Melanie Daveid

Melanie-Daveid

23. Österreich erleben

Österreich erleben

24. Sassi Holford

Sassi-Holford

25. Bolig Reisen

Boligreisen

26. DogStudio

Dogstudio

27. FiberSensing

HBM-FiberSensing

28. NUA Bikes

Nua-Bikes

29. Emiliano Barri

Emiliano-Barri

30. RiotGames: Thunderdome

Welcome-to-Thunderdome

31. In Pieces

In-Pieces

32. Printemps du Polar

Le-Printemps-du-Polar

33. While We’re Young

While-We-where-Young

Fazit

Viele der verlinkten Seiten geben Ihr Geheimnis erst bei der Benutzung preis. Manchmal warten gar kleine Überraschungen auf den Besucher. Bei vielen Exemplaren wurde mit Hintergrundvideos oder Musik gearbeitet. Die musikalische Untermalung einer Website ist sicherlich nicht jedermanns Geschmack, doch meist ist der Button zum Stummschalten schnell gefunden. Haben Sie einen oder mehrere Favoriten entdeckt? Lassen Sie es mich wissen.

 (dpe)

Kategorien
E-Business SEO & Online-Marketing

Kurz erklärt: Das ist Inbound-Marketing

Inbound-Marketing ist eine effektive Marketingmethode für Internet-Geschäfte und konzentriert sich auf die Erschaffung hochwertiger Inhalte. Es ist völlig anders als das Outbound-Marketing, bei dem mit klassischen Anzeigen, Postkarten, Broschüren, und anderen Methoden versucht wird, Käufe zu generieren. Durch die Schaffung von hochwertigen Inhalten ziehen Sie die Aufmerksamkeit der Kunden auf Ihr Unternehmen und bieten dem Kunden genau die Produkte an, die er wirklich sucht. Dank Ihrer auf die Interessen Ihrer potentiellen Kundschaft abgestimmten Inhalte, schaffen Sie wiederum auch Inbound-Traffic. Ganz nebenbei generieren Sie aus Interessenten im Laufe der Zeit Kunden. Ein großer Unterschied zwischen Inbound- und Outbound-Marketing ist der Kostenfaktor. Inbound-Marketing ist bedeutend günstiger für den Unternehmer und bedeutet nebenbei auch, dass der Kunde zu Ihm kommt.

inbound-teaser

Hochwertige Inhalte

Inhalt ist der Grundstein jeder Inbound-Marketing-Strategie. Inhalte werden gezielt so gestaltet, dass Ihre potentiellen Kunden angesprochen und auf Ihr Unternehmen aufmerksam werden. Schlussendlich sollen die Inhalte dafür sorgen, dass die potentiellen Kunden wiederkommen und zu Käufern werden.

Folgendes möchten Sie sicherlich mit Ihren Inhalten gewinnen:

  • Menschen, die sich in einem Kaufzyklus befinden oder in Zukunft darin befinden werden
  • Menschen, die in Ihre Zielgruppe, in Ihr Unternehmensprofil passen.
  • Menschen, die zu treuen Kunden werden und gut über Ihr Unternehmen mit Freunden, Familie und Mitarbeitern reden.

Das ist rekursives Marketing, und es ist kein Wunder, wenn man über die vielen Möglichkeiten eingehender nachdenkt. Inbound-Marketing beinhaltet vier lebenswichtige Maßnahmen: Gewinnung Umwandlung,  Schluss und Freude. Und so funktioniert der Prozess:

Die Gewinnung von Kunden

Inbound-Marketing

Die Kunden sollen zu Ihnen kommen, darum sind einige Dinge besonders zu beachten. Es gilt wirklich guten Content zu erstellen für den firmeneigenen Blog; vielleicht empfiehlt es sich, einen professionellen Content Creator zu beschäftigen. Die SEO sollte nicht auf die leichte Schulter genommen werden, denn dieses ist ein wichtiger Teilaspekt. Wenn diese zwei Punkte ineinander greifen, dann sollten nach einer Zeit ausreichend Besucher auf die Website kommen.

Ein hochqualitativer Firmenblog. Das ist immer noch ein effektiver Weg, um neue Kunden auf eine Website zu bekommen. Für diese Art der Inhaltsgestaltung gibt es unzählige Verfahren. Bedenken Sie stets, dass Sie die Probleme Ihrer Kunden lösen wollen, indem Sie ihnen die richtigen Produkte oder Dienstleistungen verkaufen.

Die Suchmaschinenoptimierung. Wählen Sie stets die richtigen Schlüsselwörter, nach denen die Kunden suchen. Eine Auswertung der Suchfunktion der eigenen Webseite kann manchmal sehr aufschlussreich sein. Optimieren Sie Ihre Seiten und Beiträge auf die richtigen Keywords und beschäftigen Sie sich auch mit Link-Building und anderem.

Dynamisch und gut geschriebene Artikel: Ihre Website ist das Schaufenster in Ihr Geschäft. Daher ist es empfehlenswert, nicht an der Darstellung Ihrer Produkte oder Dienstleistungen zu sparen, sondern genau zu zeigen, was man hat. Denn darauf können Sie im besten Falle stolz sein.

Die Umwandlung von Besuchern zu Kunden

Das große Ziel Ihrer Webseite sollte die Umwandlung von Besuchern in potentielle Kunden sein. Hierzu sollten die Kontaktdaten des Besuchers eingeholt werden; sie benötigen zumindest die E-Mail-Adresse. Die E-Mail-Adresse ist bares Geld wert und das weiß mittlerweile auch der Kunde. Daher muss man ihm etwas im Austausch bieten. Das könnte ein kostenloses E-Book sein, Whitepapers oder einfach nur Tipps. Die Informationen müssen natürlich für die Besucher relevant sein. Ein Weg, um an die E-Mail-Adresse des Besuchers zu kommen, kann folgendermaßen aussehen:

Auf der Webseite wird deutlich und wirklich hervorstechend ein Call-To-Action (zur Handlung auffordernd) Bereich platziert. Nachdem der Besucher auf den Call-To-Action-Button geklickt hat, kommt er auf eine Landing-Page, auf welcher ebenfalls sehr auffällig die Möglichkeit zur Hinterlassung der E-Mail-Adresse besteht.

Natürlich können auch Formulare genutzt werden, die sich überall auf der Webseite befinden können. Diese Formulare sollten so einfach wie nur möglich und sehr auffallend gehalten werden. Empfehlenswert ist auch die Erfassung der potentiellen Kunden in eine Datenbank, damit Sie jede Aktion auswerten können, die in Zukunft mit Ihren Kunden stattfindet. Nach und nach finden Sie dann wichtige Erkenntnisse heraus und können viel effektiver das Kaufinteresse Ihrer Zielpersonen wecken.

Der Schluss

Nun haben Sie das Interesse Ihrer Besucher geweckt und auch eine Menge E-Mail-Adressen gewonnen. Jetzt müssen die potentiellen Kunden in kaufende Kunden umgewandelt werden, und das mit möglichst effektiven Mitteln. Für dieses Stadium bieten sich einige Marketing-Tools an, die Ihnen helfen werden, aus den generierten E-Mail-Adressen kaufende Kunden zu konvertieren.

E-Mail-Kampagnen. Wenn ein Besucher, nachdem er Ihre eBooks oder Whitepaper heruntergeladen und seine E-Mail-Adresse hinterlassen hat, immer noch nicht kaufen will, dann helfen nur noch sehr kreative E-Mail-Kampagnen. Senden Sie Ihm vielleicht eine Reihe von Mails mit nützlichen und für Ihn maßgeblichen Inhalten zu. Das hilft Ihrem potentiellen Kunden, Vertrauen in Ihr Unternehmen aufzubauen und seine Kaufbereitschaft zu stärken. Vielleicht wird er auch nur die Entscheidung treffen, nicht bei Ihnen kaufen zu wollen.

Marketing-Automatisierung. Das Umstellen des E-Mail-Marketings auf die speziellen Bedürfnisse des Kontakts in der jeweiligen Interessenphase. Das ist nicht ganz leicht, aber durchaus durchführbar. Wenn Ihnen zum Beispiel ein Kontakt auf Twitter oder einem anderen Social Network folgt, dann wäre es Ihnen vielleicht möglich, eine E-Mail-Kampagne diesen speziellen Interessen anzupassen. Denn innerhalb eines Sozialen Netzwerks lernt man seine Kunden oder Follower recht gut in Bezug auf Ihre Interessen kennen.

Kundenbeziehungen stärken. Um die Beziehungen zu Ihren potentiellen und kaufenden Kunden zu verstärken, braucht es ein internes Berichtswesen. Sie sollten alles, was mit Ihren Kunden zusammenhängt genau erfassen und ein Customer Relationship Management (CRM) betreiben. Das verschafft Ihnen den Vorteil, alle Zusammenhänge mit Ihren Kunden analysieren zu können. Nur so wäre es für Sie ersichtlich, wie gut zum Beispiel Marketing und Vertrieb zusammenarbeiten. Und es ist ebenfalls leicht ersichtlich, wie effektiv ein potentieller Kunde in einen kaufenden Kunden umgewandelt wird.

Die Freude

Erfreuen Sie gegenwärtige und zukünftige Kunden mit ansprechenden Inhalten. Bedenken Sie stets, dass es sehr wichtig ist, sich gerade auch um bereits bestehende Kunden zu kümmern und diese bei Laune zu halten. Denn dann werden Sie gerne kostenlose Mund-zu-Mund Propaganda für Ihr Geschäft und seine Produkte machen. Bestehende Kunden kann man je nach Branche zum Beispiel mit regelmäßigen Umfragen erfreuen, wenn als Belohnung ein kleines, kostenloses Produkt oder eine kleine Zusammenstellung von Proben wartet. Durch die Nutzung von mehreren Sozialen Medien könnten Sie Ihren Kunden auch Echtzeit-Kundendienst anbieten.

Echtzeit-Kundendienst über Twitter

Einem Kunden eine Freude zu bereiten, muss nicht teuer sein und auch nicht viel Zeit in Anspruch nehmen. Es soll nur eine kleine Geste sein, ein „Hallo! Wir haben Dich nicht vergessen und Du bist wichtig für uns.“. Zufriedene Kunden werden es Ihnen danken.

Fazit

Selbstverständlich stellt dieser Artikel nur einen kleinen Einblick in das umfassende Thema dar. Doch es ist ein guter Überblick über das Thema geworden und klärt die Frage, was Inbound-Marketing eigentlich ist. Sich mit diesem Thema näher zu befassen ist empfehlenswert für jeden Online-Unternehmer und jeden Menschen, der sich auf eine Zukunft mit einem Onlineshop vorbereitet.

Links zum Beitrag

(dpe)

Kategorien
Design HTML/CSS Inspiration Showcases Webdesign

Webdesign: Transparenz als Gestaltungselement (mit Best Practices)

Transparenz ist mittlerweile ein großer Trend im Webdesign, nachdem der überwiegende Teil der Browser diese auch darstellen kann. Transparente Teile einer Website werden entweder eingesetzt, um Akzente zu setzen oder den Fokus auf einen bestimmten Bereich zu lenken. Dieses können etwa Bilder, aber auch Textpassagen sein. Leider kann man bei der Entwicklung von Webseiten mit transparenten Effekten einiges falsch machen. Daher zeigen wir Ihnen heute, worauf Sie achten sollten, damit Ihnen eine stimmige Website mit Transparenz gelingt.

transparenz-webdesign-teaser

Transparenz im Webdesign

Transparenz kann auf zwei Wegen erreicht werden, durch den Einsatz von transparenten .PNG-Dateien oder durch reines CSS. Letztere Vorgehensweise verbreitet sich immer mehr, da alle modernen Browser Transparenzen per CSS anzeigen können. Der Einsatz dieser Effekte dient dazu, bestimmte Bereiche kontrastreicher und deutlicher darzustellen und den Besucher einer Website auf vorgegebene Inhaltsblöcke zu lenken. Vielleicht ist der Einsatz von alphatransparenten PNGs einfacher, doch die besseren Ergebnisse werden zumeist mit der CSS-Lösung erzielt. Immer jedoch bleibt es Ihnen überlassen, wie Sie es realisieren möchten. Das CSS3 bietet gerade in der Entwicklungsphase eine schnellere und bessere Möglichkeit der Anpassung, da nur eine Zeile Code angefasst werden muss, um eine schnelle Änderung herbeizuführen. Eine schnelle Änderung der Transparenz geht so wesentlich einfacher vonstatten.

Vielleicht ist der Einsatz von alphatransparenten PNGs einfacher, doch die besseren Ergebnisse werden zumeist mit der CSS-Lösung erzielt. Immer jedoch bleibt es Ihnen überlassen, wie Sie es realisieren möchten. CSS3 bietet gerade in der Entwicklungsphase eine bessere Möglichkeit der Anpassung, da nur eine Zeile Code angefasst werden muss, um eine schnelle Änderung herbeizuführen.

Transparenz mittels CSS3 einsetzen

Transparenzen werden durch die Unterstützung von CSS3 mit seiner RGBA-Farbdefinition mehr und mehr üblich. Das A in RGBA steht hierbei für den transparenten Kanal. Wenn er auf 0,5 eingestellt ist, heisst dass, dass die Hintergrundfarbe zu 50% transparent ist. Hierbei muss jedoch immer auf ältere Browser geachtet werden, falls man sie noch unterstützen muss. Die Deckkraft in CSS3 kann im Übrigen auf Bilder, Texte, Hintergründe und Div-Elemente und so weiter angewendet werden. Jedoch ist der häufigste Weg zur Anwendung von Transparenzen immer noch das gute, alte alphatransparente PNG. Reine CSS-Lösungen laden aber schneller, allein deswegen sollte man sie in Betracht ziehen.

Vorsicht bei mehrfarbigen Hintergründen

Bei der Verwendung von mehrfarbigen Hintergründen kann es für Webdesign-Anfänger und manchmal sogar für Profis in diesem Bereich schwierig werden, denn es können durchaus Ergebnisse auftreten, die „suboptimal“ sind. Generell eher vorsichtig sollte man mit der Transparenz von Fotos sein, dass kann mitunter schnell in die Hose gehen. Hier eine Liste mit beispielhaften Websites, die Transparenzen mal mehr, mal weniger gut einsetzen.

Transparente Elemente

Suavia

Eine Website, die es richtig macht, jedoch trotzdem noch verbesserungswürdig erscheint. Auf der Startseite haben die Designer (fast) alles richtig gemacht. Es nerven beim Herunterscrollen nur der riesige Whitespace und das nicht optimal funktionierende JavaScript, was das Scrollen verhindern sollte. Denn unterhalb des Viewports befinden sich keinerlei Inhalte mehr.

Doch kommen wir zur wunderschön gestalteten Startseite:

Suavia

Nur auf den zweiten Blick fällt hier auf, dass der transparente Bereich einen Tick zu transparent gewählt wurde. Auf einer Unterseite jedoch ist der bereits oben angesprochene „suboptimale“ Effekt zu sehen, denn es wird ein mehrfarbiger Hintergrund gewählt, ohne die Transparenzen anzupassen.

Suavia

Die Lesbarkeit der Inhalts-Box leidet doch schon etwas. Hier hätte man mit etwas weniger Tranzparenz mehr erreicht.

Interior CMS-Template

interior motocms

Dieses Template setzt nicht viele transparente Effekte ein, die wenigen jedoch sehr gut. Die Wirkung von Bild und Aussage wird unterstrichen und verdeutlicht. So soll es sein.

Blurb Creative

Blurb-Creative

Blurb ist eine Webdesign-Agenur aus dem englischen Yorkshire. Hier wurde alles richtig gemacht, die Transparenzen wurden nur als unterstützender Effekt eingesetzt, jedoch der Fokus auf die Lesbarkeit des Inhalts niemals aus den Augen gelassen.

Reichhaltige Transparenzen

Die perfekte Transparenz gibt es nicht. Jedes neue Design ist etwas  besonderes und erfordert daher eigene Einstellungen und Transparenzen. Testen Sie die Möglichkeiten durch, die Ihnen CSS3 bietet. Denn damit können Sie einmal getätigte transparente Einstellungen in Sekunden ändern und andere ausprobieren. Sie werden mit Sicherheit „Ihre“ Transparenz finden. Wenn Sie mehrere Bereiche der Webseite transparent gestalten müssen, probieren Sie ruhig mehrere Stufen der Durchsichtigkeit aus, denn manche Projekte erfordern unterschiedliche Einstellungen auch bereits auf ein und derselben Seite.

Generell lässt sich sagen, dass Sie den Fokus auf Lesbarkeit und Benutzerfreundlichkeit legen sollten. Ansonsten sind die Besucher schnell brüskiert und entsagen dem Besuch auf Ihrer Website für die Zukunft. Bei einem Inhaltsbereich, welcher sich auf den Hauptinhalt legt, sollte zumeist recht wenig Transparenz gewählt werden, um den Inhalt hervorragend lesbar zu gestalten. Einige Beispiele hierfür:

Pizza-za

Resto-Hull

Hier wird alles richtig gemacht. Viele transparente Bereiche wechseln sich mit Animationen ab – witziges Konzept und gut umgesetzt.

West City Hotel

West-City-Hotel

Hier unterstützt die vorsichtig gewählte Transparenz des Hauptinhaltsbereichs die Lesbarkeit des Inhalts. Das sieht nicht nur ansprechend aus, sondern ist auch benutzerfreundlich.

Sorgfältig gewählte Transparenzen

Hier werden transparente Bereiche mit Vorsicht und sehr sorgfältig gewählt eingesetzt. Manches Mal, um etwas hervorzuheben, ein anderes Mal, um einen bestimmten Effekt zu erreichen, wie im Beispiel von GO4 Events.

GO4 Events

GO4-Events

GO4 Events hat nur eine einzige transparente Stelle in ihrer Website, den Header-Bereich um das Logo herum. Dieser Bereich fügt sich jedoch nahtlos in die „normalen“ Elemente der Seite ein und unterstützt sie mit diesem kleinen Schmankerl.

Brad Colbow

Brad-Colbow

Auch der Illustrator Brad Colbow setzt transparente Elemente vorsichtig ein, er nutzt diese Bereiche nur zur Hervorhebung seiner Überschriften und er tut gut daran. Denn die Überschriftselemente betonen diesen Bereich und setzen Akzente, ohne aufdringlich zu wirken.

Body Shop ATL

Bodyshopatl

Der Body Shop ATL setzt eine Transparenz an drei Stellen ein, dem Logo und der Leiste unterhalb des Hero-Bereichs (die großen Fotos). Hinzu kommt noch der kleine Bereich in der rechten Bildhälfte mit der Telefonnummer des Unternehmens. Transparenz wird hier zum Unterstreichen und zum Betonen genutzt und nicht als Selbstzweck.

Fazit

Transparenzen im Webdesign zu nutzen, bietet sich bei den heutigen Möglichkeiten direkt an. Dabei sollten sie kein Selbstzweck sein, sondern nur unterstützend verwendet werden. Erst dann kommen die Effekte richtig zur Geltung und man erreicht das, was man erreichen möchte: eine interessante Website. Dieser Beitrag soll Ihnen einige Beispiele an die Hand gegeben, wie man es richtig macht. An einem Beispiel habe ich aufgezeigt, wie man es besser machen könnte. Ich bin mir sicher, dass Sie Ihren Mittelweg finden.

Links zum Beitrag

(dpe)

Kategorien
E-Business Social Media

Social Media: So klappts garantiert mit Facebook, Twitter und Co.

Ein neues Jahr beginnt in der Regel schwungvoll mit neuen Zielen und Vorsätzen. Doch irgendwann, spätestens  Anfang März nimmt das Engagement der meisten Menschen hinsichtlich eben dieser Ziele und Vorsätze dramatisch ab. Wenn jedoch eines Ihrer Ziele die effektive Nutzung der Sozialen Medien in 2015 ist, vielleicht um einen neuen Job zu bekommen oder Ihr Unternehmen zu pushen, dann sollten Sie dieses Ziel nicht aus den Augen verlieren. Im Gegenteil. Erstellen Sie einen leicht zu verfolgenden Social-Media-Plan und setzen Sie diesen konsequent um. Ein Strategie-Plan für die Nutzung der Sozialen Medien muss kein Roman sein. Eine einzelne Seite, an prominenter Stelle platziert, also dort wo Sie sie täglich sehen, kann Sie schon auf dem richtigen Kurs halten. Alles, was Sie unbedingt tun müssen, ist allerdings, sich kurz hinzusetzen und diesen Plan zu entwerfen. Und genau dabei wollen wir Ihnen heute unter die Arme greifen.

social-media-strategie-teaser

Entwerfen Sie eine Social-Media-Strategie in wenigen Schritten

1. Identifizieren Sie Ihre Ziele

Was wollen Sie durch die Nutzung der Sozialen Medien erreichen? Wollen Sie den Traffic auf Ihrer Webseite um 30% erhöhen? Vielleicht möchten Sie sich auch mit einem neuen Isog. Influencer pro Woche vernetzen. Was auch immer Ihre Ziele sein mögen, halten Sie sie schriftlich fest, um sicherzustellen, dass sie messbar sind.

Identifizieren Sie Ihre Ziele

2. Identifizieren Sie Ihren Zielmarkt

Mit wem genau möchten Sie sich mittels der Sozialen Medien vernetzen? Spezifizieren Sie Ihre Zielgruppe so genau wie möglich, lassen Sie auch – wenn möglich – demografische, geografische und psychologische Charakteristika einfliessen. Achten Sie auf korrekte Berufsbezeichnungen, falls zutreffend. Kurzum, seien Sie so spezifisch wie es Ihnen möglich ist.

3. Wählen Sie die richtige Plattform

Welche Plattform der Sozialen Medien ist die beste Lösung, damit Sie Ihre Ziele und Ihre Zielgruppe erreichen? Wenn Ihre Zielgruppe hauptsächlich mittleren Alters, männlich und im unteren Management tätig, dann ist Instagram wohl nicht die richtige Plattform für Sie. Wenn Ihr Unternehmen jedoch Hochzeitskleider verkauft, dann wäre zweifelsfrei Pinterest die richtige Plattform für Sie. Andere Plattformen machen in diesem Fall bedeutend weniger Sinn. Betrachten Sie Ihre Marke, Ihr Unternehmen, sich selbst unter diesem Aspekt.

Hochzeitskleider auf Pinterest

4. Genau beobachten

Vor dem Erstellen von Profilen oder den ersten Postings sollten Sie Ihre Mitbewerber, die Meinungsmacher und Ihre potentiellen Kunden sehr genau beobachten. Was posten diese Menschen? Welche Art von Beiträgen haben die meiste Resonanz? Welche Hashtags funktionieren am besten auf Twitter oder Instagram? In welchen Gruppen auf LinkedIn sind Mitbewerber, Meinungsmacher und potentielle Kunden vertreten? Erst wenn Sie darüber ein klares Bild erhalten haben, sollten Sie sich um ein Profil und um erste Beiträge kümmern.

5. Schaffen Sie Persönlichkeit

Schaffen Sie etwas Persönlichkeit. Wenn Sie diesen Plan für Ihr Unternehmen erstellen, nehmen Sie sich etwas Zeit, um in einigen wenigen Sätzen die Marke und Persönlichkeit Ihres Unternehmens zu beschreiben. Wenn Ihr Unternehmen eine Person wäre, was würden Sie schreiben? Hätte diese Person Humor? Wäre diese Person ein Fan von irgendetwas? Wenn Sie eine Persönlichkeit für sich selbst erschaffen möchten, überlegen Sie, welchen Teil Ihrer Person Sie mit der Welt in Ihren Beiträgen teilen möchten und welchen Teil nicht. Viele Menschen entscheiden sich zum Beispiel dafür, nichts über ihre Familie zu posten. Ein guter Rat an Sie: Schauen Sie auf „Konkurrenz-Profilen“ nach, wie diese Menschen oder Unternehmen sich beschreiben und präsentieren, welche Persönlichkeit sie sich geben. Oder anders gesagt: Welche Art von Marke sie erschaffen haben. Denn genau darum geht es in diesem Bereich. Um die Erschaffung einer Marke; und das geht nur mit Persönlichkeit.

Erschaffen Sie eine Persönlichkeit; eine Marke

6. Erstellen Sie Ihr Profil

Wenn Sie ein Unternehmen repräsentieren, dann ist jetzt ist die richtige Zeit gekommen, um einen Grafik-Designer einen Twitter-Hintergrund oder ein Facebook-Headerbild erstellen zu lassen.

7. Entwickeln Sie eine Posting-Strategie

Wie oft soll ein Beitrag auf jedem Sozialen Netzwerk und/oder Ihrem Blog veröffentlicht werden? Wenn Sie ein Unternehmen repräsentieren, stellen Sie sich die Frage, wer in Ihrem Unternehmen die Rechte zum Veröffentlichen von Beiträgen bekommen soll. Welche Art von Produkt soll in welchem Sozialen Netzwerk gepostet werden? Und vor allem: Wer soll sich mit wieviel Zeit im Hintergrund um die eingehenden Reaktionen auf die Beiträge kümmern? Bedenken Sie, dass es sehr wichtig ist, zeitnah auf Kundenreaktionen in den Sozialen Netzwerken zu reagieren. Auch dieser Aspekt sollte in eine gute Strategie einfliessen.

8. Die Analyse

Nachdem Sie Ihre Posting-Strategie entwickelt und die ersten Beiträge abgesetzt haben, ist es sehr wichtig, die Ergebnisse zu analysieren. Entweder, indem Sie die Analyse-Lösung Ihrer Homepage aufrufen, wenn Sie die Ergebnisse Ihrer Blog-Beiträge kontrollieren möchten, oder indem Sie die Analyse-Werkzeuge der Sozialen Netzwerke nutzen. Beantworten Sie sich die richtigen Fragen, zum Beispiel nach gesteigerten Verkäufen, ob und wieviele Personalvermittler mit Ihnen Kontakt aufgenommen haben, welche Ergebnisse eventuell ausgegebene Promotion-Codes erzielt haben und so weiter… Vergleichen Sie die Ergebnisse mit Ihren vorher abgesteckten Zielen. Optimieren Sie im Anschluss entweder die Beitrags-Strategie oder Ihre Ziele.

Analysieren Sie die Ergebnisse Ihrer Social Media-Postings

9. Automatisieren Sie Ihre Beiträge

Sobald Sie sich im Umgang mit den Beiträgen für die Sozialen Medien sicherer fühlen, ist die richtige Zeit gekommen, die Postings zu automatisieren. Planen Sie Beiträge im Voraus für etliche Tage, für bestimmte Zeiten, die bei Ihnen am Besten funktionieren. Sie können dann immer noch sofort einen Beitrag veröffentlichen, allerdings gewähren geplante Beiträge eine Beständigkeit. Und Beständigkeit ist für den Erfolg in den Sozialen Medien unerlässlich.

Tools zum Automatisieren von Social Media-Beiträgen

Da es sich als äußerst praktisch erwiesen hat, nicht nur Blog-Beiträge, sondern auch Postings in den Sozialen Medien zu planen und zu automatisieren, stellen wir Ihnen zwei gute Dienste hierfür vor. Beide Dienste verfügen über kostenfreie Accounts, mit denen sich bereits sehr viel anfangen lässt.

Hootsuite

Hootsuite Tool

Hootsuite ist ein umfangreicher Dienst mit Analyse-Funktion für alle verbundenen Sozialen Netzwerke. Eine Anmeldung per OAuth ist Standard, allerdings kann das Benutzerkonto auch ganz konservativ mittels Name, E-Mail und Passwort angelegt werden. In der kostenlosen Version kann man nur 3 Accounts hinzufügen, möchte man mehr, dann muss auf einen kostenpflichtigen Plan ausgewichen werden. Der Business-Plan startet ab 9,99 Dollar im Monat. Nicht so schön: Hootsuite besteht auf seinen eigenen Link-Verkürzer ow.ly und lässt sich nicht mit einem anderen, hier wäre vor allem Bit.ly ein Werkzeug mit vielen Fans, verbinden. Wenn also die Strategie auf mehreren Füßen ruht, aber übergreifend analysiert werden soll, ist Hootsuite wohlmöglich nicht die erste Wahl.

Hier ein Überblick über die Funktionen und Kosten.

Hootsuite - die Kostenpläne

Das Video zur Google Chrome Erweiterung „Hootlet“

Angebotene Apps: iPhone | Android | Google Chrome Erweiterung

Buffer

Buffer

 

Buffer ist sehr einfach und intuitiv zu bedienen. Man kann sich mit Facebook, Twitter, LinkedIn, App.net and Google+ (nur Seiten, keine Profile) vernetzen, jedoch ist die Anzahl der Postings limitiert. Man darf pro verbundenem Social Media-Account nur 10 Postings in Planung haben. Das sollte jedoch für die meisten Zwecke ausreichen. Der nächstbessere Plan wäre der sogenannte „Awesome Plan“, der das Limit der geplanten Postings auf 100 anhebt. Dafür werden 10 Dollar im Monat fällig. OAuth wird angeboten, doch auch hier ist eine „normale“ Anmeldung mit E-Mail und Passwort möglich.

Anders als Hootsuite arbeitet Buffer mit ihrem eventuell vorhandenen Bit.ly-Account problemlos zusammen. Achtung: der Bit.ly-Account muss mit jedem bei Buffer hinterlegten Profil einzeln verbunden werden.

Ein Einsteiger-Video zu Buffer

Angebotene Apps: iPhone App | Android App | Google Chrome Erweiterung

Fazit

Eine Strategie für die Nutzung der Sozialen Netzwerke ist unerlässlich. Denn erst wenn man weiß, wohin man möchte, wird man dort auch ankommen können. Erstellen Sie also diese Strategie, haben Sie Geduld, beweisen Sie Durchhaltevermögen und sie werden viel erreichen, etwa die Reichweite und den Bekanntheitsgrad Ihrer Produkte deutlich steigern können. Mehr als in anderen Bereichen ist Social Media eine Fleißarbeit, die eines langen Atems bedarf.

Links zum Beitrag

(dpe)

Kategorien
Apps UI/UX

Immer obenauf: Bessere Android-Apps mit der Tooleap SDK entwickeln

Alle Android-Entwickler dürfen sich freuen, denn es gibt nun eine weitere interessante Erweiterung für die Entwicklung von Android-Apps. Tooleap ist eine Always-on-Top / Floating UI für Android. Es handelt sich um eine SDK, die Ihre Apps um einen immer im Vordergrund schwimmenden Button ergänzt, damit der Nutzer Ihrer App von jedem Bildschirm aus jederzeit Zugriff auf die von Ihnen entwickelte App hat. Das sorgt dafür, dass Ihre App aus der Masse der im Google Play Store erhältlichen App hervorsticht und ein neues Level der Benutzerfreundlichkeit erreicht, (sofern nicht jeder auf diese Idee kommt).

Die Tooleap SDK Erweiterung für Android-Entwickler

Die Vorteile – das bietet Ihnen die Tooleap SDK

Nach der Integration der Tooleap SDK Jar in Ihr Projekt kann Tooleap Ihre App um einige interessante und nützliche Funktionen ergänzen. Die Out-of-the-Box Features sind folgende:

Die Bubble

Die SDK bietet Ihrer App eine Erweiterung um eine „schwimmende Blase“ – einen stets im Vordergrund obenauf liegenden Button, der individuell anpass- und designbar ist. Somit ist Ihre App jederzeit von jedem Screen aus zugänglich. Natürlich kann der Button auch individuell angepasst werden, Sie können Ihr eigenes Icon verwenden oder auch Benachrichtigungsblasen anzeigen. Die sogenannten Notifications – also Benachrichtigungen oder Vorschauen – sind möglich. Siehe Screenshot:

Die Tooleap Notifications

Durch das Antippen der „Blase“ fährt ein Bildschirm vom linken Rand in den Blickbereich. Auf diesem zweiten Home-Bildschirm kann jede Funktion Ihrer Wahl gestartet werden, denn auch dieser Bildschirm lässt sich von Ihnen individuell programmieren.

Der Seitenbildschirm (Side Screen)

Der Seitenbildschirm zeigt den Inhalt Ihrer App oben auf dem Bildschirm. Durch Nutzung der Tooleap Aktivitätsklassen können Sie auf diesem zweiten Home-Bildschirm anzeigen, was Sie wollen, genau wie bei jeder anderen, herkömmlichen Android-App. Dafür benötigt es keinerlei speziellen Code für die Umsetzung. Auch kann jede bereits existente Funktion Ihrer App auf diesen Bildschirm verlagert werden. Der Tooleap-Bildschirm bietet gleichzeitig auch eine Suchfunktion an, über die das Internet abgefragt werden kann.

Der Anwender kann ebenfalls zwischen verschiedenen Mini-Anwendungen und dem Suchbildschirm navigieren, mit der unteren Navigationsleiste.

Tooleap´s Seitenbildschirm

Was sie mit Tooleap tun können

Der von Ihrer App im Seitenbildschirm angezeigte Inhalt ist eine sogenannte Mini-App. Diese Mini-Apps können Ihre Applikation in vielerlei Hinsicht ergänzen:

Benachrichtigungen – Rich Notifications

Die Mini-App für Benachrichtigungen kann für Benachrichtigungen verwendet werden, die es dem Benutzer erlauben, mit Ihrer App zu interagieren – direkt vom Seitenbildschirm. Zum Beispiel kann eine Messenger-App eine Benachrichtigung ausgeben, in der Vorschau kann der Nutzer dann sehen, worum es sich handelt und im Anschluss direkt vom Seitenbildschirm aus auf die Text-Nachricht antworten. Die App an sich muss nicht mehr aufgerufen werden, was einen echten Vorteil in Bezug auf Benutzerfreundlichkeit darstellt.

Erweitertes Multitasking

Die PopOut Mini-Apps können dem Benutzer die Möglichkeit geben, einen Pop-Out-Bildschirm Ihrer App zu öffnen, während andere Apps genutzt werden. Das könnte zum Beispiel bei einem Musik-Player das Ausfahren der Wiedergabesteuerung sein, während eine andere App genutzt wird. Die von Ihnen entwickelte App ist also auch bei Nutzung einer anderen App immer nur einen Fingertipp entfernt.

Die Home-Widgets

Besonders interessant erscheinen die Home-Widgets. Diese Home-Widgets bringen die vollen Informationen von „normalen“ Android Startbildschirm-Widgets mit sich, ohne jedoch den Homescreen mit Widgets zu überladen. Entwickeln Sie mit den Home-Widgets eine Mini-App, die auf dem Startbildschirm abgelegt wird. Ein Anklicken öffnet dann den Seitenbildschirm mit den benötigten Information. Das bietet sich zum Beispiel für eine Wetter-App an. Ein normales Wetter-Widget nimmt auf dem Home-Bildschirm viel Platz ein – Platz, der besser genutzt werden könnte. Daher liegt auf dem Home-Bildschirm des Benutzers nur das Icon der Wetter-App und ein Klick auf das Icon öffnet dann den Seitenbildschirm, wo alle Informationen über das Wetter auf einen Blick aufgerufen werden können.

Superschnell zugängliche Apps

Die „Super Available Apps“ kreieren „Sticky“ Mini-Apps, also Anwendungen, die stets oberhalb jeder anderen App bleiben. Diese Mini-Anwendungen können entweder auf jeder App stets obenauf liegen oder nur auf ganz bestimmten Apps. Verwenden Sie zum Beispiel eine sogenannte „Persistant“-Mini-App, um dem Android-Nutzer Zugriff auf Ihre App von jedem beliebigen Bildschirm zu gewähren. Eine Nachrichten-App könnte dem Benutzer von jedem Bildschirm aus Zugriff auf die neuesten Schlagzeilen gewähren.

Programmieren Sie die Mini-Anwendungen ganz nach Ihren Bedürfnissen und verwenden Sie (theoretisch) so viele, wie auf den Seitenbildschirm passen.

Die Voraussetzungen für den Einsatz von Tooleap

Es wird die Android SDK 2.2 (Version 8) und neuer benötigt.

Tooleap im Video – Eine Einführung in die Tooleap SDK

Fazit

Tooleap erscheint mir als interessante Möglichkeit, die eigene App aus der Masse der im Google Play Store vertretenden Apps hervorzuheben. Die Möglichkeiten sind auch ohne in Begeisterung auszubrechen mehr als nützlich. Ich bin gespannt, ob viele Android-Entwickler diese neue SDK nutzen werden. Ich weiß nicht, wie es Ihnen geht, aber ich würde mich freuen auf Apps, die Tooleap verwenden. Da tun sich ganz neue Möglichkeiten auf.

Links zum Beitrag

(dpe)

Kategorien
Design

So vermeiden Sie die 5 häufigsten Fehler im Design-Prozess

Facebooks Design-Chefin Julie Zhuo äußert sich zu den fünf schlimmsten Fehlern im Design-Prozess und gibt Tipps, wie man sie vermeidet. Sie meint: Es gibt kein Lernen, ohne auch mal Fehler zu machen. Doch gerade die folgenden Fehler werden zu oft gemacht, um sie nicht anzusprechen. Es ist immer besser, aus den Fehlern anderer zu lernen, als sie auf die “harte Tour” selber machen zu müssen. Lassen Sie uns also heute die fünf häufigsten Fehler ganz klar auf den Tisch bringen und besprechen, damit sie in Zukunft vermieden werden können und sich das Internet ein Stückchen weiter in Richtung “gutes Design” bewegt. Denn gutes Design bewegt und spricht uns an, verleitet uns zu Käufen und zum längeren Verweilen auf Webseiten. Kommerzler? Hier, lesen Sie: Gutes Design steigert die Konversionsrate.

Die 5 häufigsten Fehler im Designprozess und wie man sie vermeidet

Fehler 1: Wir schränken uns zu sehr ein im Design-Prozess

Gerade im Prozess der Entwicklung eines Designs sollte man sich weder gedanklich, noch gesamtkonzeptionell zu sehr einschränken, denn nicht immer ist der erste Entwurf auch der Beste. Manchmal lohnt es sich durchaus, gerade in diesen Prozess etwas mehr Zeit zu investieren. Allerdings gibt es vornehmlich zwei Gründe, warum wir uns verleiten lassen, den Prozess des Designs vorzeitig abzubrechen.

barrier-283847_640

Zeit: Kaum etwas ist für ein Produktteam verlockender als das Herbeiführen einer schnellen, positiven Veränderung. Denn Zeit ist bekanntlich Geld. Es ist schon ansprechend, eine kleine positive Veränderung innerhalb kürzester Zeit herbeizuführen, als für eine große positive Veränderung eventuell mehrere Monate (ausgehend von einem großen Projekt) zu benötigen. Natürlich braucht es die Geduld von Altmeister Yoda, um die beste Lösung herbeizuführen. Stellen wir uns mal eine wirklich große Website vor – zum Beispiel Spiegel Online. Was kann ein Design-Team in nur 2 Monaten bewirken, und was in einem Dreivierteljahr? Sicher, kleine Änderungen gehen schnell, aber ein angestrebtes Optimum wird viel mehr Zeit in Anspruch nehmen, wenn es wirklich optimal werden soll. Gutes Design und innovative Lösungen schüttelt niemand aus dem Ärmel. Das braucht Zeit und ist ein langfristiger Prozess.

Risiko: Wenn etwas gut eingeführt und funktionell ist, hat man schon so seine Probleme, es einfach zu ändern. Sie wissen: never change a running system. Schliesslich könnte es ja durchaus sein, dass die tollen neuen Funktionen, oder das schicke neue Design bei den Besuchern so gar nicht ankommt. Das, was Sie schön und gut finden, könnten Ihre User hassen. Und genau auf die kommt es letztlich an. Denn der Relaunch einer Webseite ist immer ein Relaunch für die Besucher der Internet-Präsenz. Eine solche Überlegung verhindert oftmals die Entdeckung neuer Designrichtungen. Darum prüfen Sie ganz genau, ob Ihre Ängste in dieser Hinsicht wirklich berechtigt sind, oder ob Sie durch sie durch davon abgehalten werden, in neue Designrichtungen zu experimentieren. Wagen Sie ruhig “den nächsten Schritt”, es kann durchaus sehr lohnenswert sein.

Fehler 2: Sich zu früh an Details “festbeissen”

Ein klassischer Designfehler: Sie ergründen eine große Design-Aufgabe und haben bereits ein tolles Konzept im Kopf. Sie beginnen mit dem Mock-Up, wollen aber bereits jetzt alles festlegen. Im Hinterkopf entspinnen sich Detailgedanken. Soll dieses Element schwarz sein, jenes vielleicht grau? Oder nehmen wir besser doch knalligere Farben? Sollen die Buttons rund oder eckig sein? Je genauer Sie bereits in diesem frühen Prozess der Designfindung über solche Probleme nachdenken, desto schwerer wird es, dass Gesamtkonzept im Hinterkopf zu behalten. Ehe Sie sich versehen, sind bereits mindestens 70% der Entwicklungszeit ins Land gegangen und Sie haben sich nur auf Details konzentriert, statt das Gesamtkonzept zu entwickeln.

baby-84686_1280

Vielleicht ist tatsächlich Ihr erster Gedanke auch der Beste. Doch das können Sie erst einschätzen, wenn Sie sich die Zeit genommen haben, alle Ideen gedanklich und konzeptionell durchzuspielen. Nur bei König Midas wurde alles, was er berührte zu Gold. Und selbst das hatte nicht nur Vorteile. Der Normalfall wird so sein, dass Sie erst dann, wenn Sie Zeit mit allen Ideen verbracht haben, ein stimmiges Gesamtkonzept finden. Und dann kommen die Details von ganz alleine.

Fehler 3: Gutes Design für ein gutes Produkt zu halten

Ein Szenario: Ein talentierter Designer kommt mit einem glattpolierten Prototyp Ihrer neuen Webseite zu Ihnen, gefüllt mit interessantem Inhalt und professionellen Fotos mit attraktiven, lächelnden Menschen. Zudem gibt es eine total aufregende, extrem professionelle Präsentation. Ihr gesamtes Umfeld nebst Ihnen ist total begeistert von dieser wirklich tollen Präsentation, dass kaum Fragen gestellt werden und das Ergebnis automatisch akzeptiert wird. Denn wenn etwas gut aussieht, sind wir auch bereit, es als “gut” zu akzeptieren.

spoon-81927_640

Doch gutes Design ist nicht alles und schon gar kein Selbstzweck. Ein auf optimales Design poliertes Produkt mit professionellen Fotos und Inhalt kann durchaus für Kunden nachteilhaft sein. Beispielsweise kann es über mangelnde Benutzerfreundlichkeit hinwegtäuschen. Zudem wird die Webseite mit dem Inhalt des Kunden komplett anders wirken. Vielleicht ist der Inhalt nicht so hochinteressant, sind die Fotos nicht so professionell und die darauf dargestellten Personen nicht so attraktiv. Nochmal: Mit dem Inhalt des Kunden wird die Webseite komplett anders wirken. Im schlimmsten Falle verkehrt sich der tolle Prototyp in eine plumpe Darstellung mit suboptimalem Inhalt. Daher bestehen Sie stets darauf, zur Präsentation auch den Inhalt zu erhalten, der später auf der Webseite zu sehen sein wird. Dann wird schon in der Präsentation deutlich, wenn es noch irgendwo hakt und ob das Produkt überall so läuft, wie es laufen sollte.

Fehler 4: Überbewertung von Stil und Klarheit auf Kosten der Nutzerfreundlichkeit

Designer haben eine große Neigung zur Ästhetik, die sich auch in Ihrem Lebensstil zeigt. Es ist naheliegend, dass Designer nicht nur funktionelle Dinge entwerfen, sie sollen natürlich zudem gut aussehen und sich (wo möglich) gut anfassen. Manchmal sogar nur, damit andere Menschen ein Gefühl von Ehrfurcht entwickeln, wenn diese das Design erfassen und erfühlen. Bisweilen allerdings wird dieser Wunsch nach Ästhetik und Klarheit zu weit getrieben, und das geht dann auf Kosten der Benutzerfreundlichkeit. Wie wir natürlich alle theoretisch wissen, sollte eine App oder eine Webseite in erster Linie benutzerfreundlich sein.

maze-2264_640

Die Zielgruppe zu kennen ist hier wichtig, weil diese den Rahmen für den Erfolg des Designers setzt. Erstellen Sie zum Beispiel eine App für andere Designer, dann rücken andere Prioritäten in das Rampenlicht. Bei einer App für Senioren sind es wieder komplett andere Vorgaben, die erfüllt werden müssen. Erstellen Sie eine App gestenbasierend. Lassen Sie Ihre Mutter die App testen. Wenn diese damit zurecht kommt, ist sie ausreichend benutzerfreundlich. Bedenken Sie stets: Die von Ihnen entworfene App oder Webseite soll eventuell Millionen Besucher/Nutzer zufriedenstellen. Achten Sie daher stets zuerst auf Benutzerfreundlichkeit und dann im Anschluss auf gutes Design, welches die Benutzerfreundlichkeit weiter unterstützen kann. Machen Sie bitte auch niemals den Fehler, anzunehmen, dass etwas, was Ihnen gefällt, auch automatisch der angepeilten Zielgruppe zusagt. Diese Zielgruppe kann andere Prioritäten und Vorstellungen haben. Entwerfen Sie daher stets für die Zielgruppe. Der Köder muss dem Fisch schmecken und nicht dem Angler, sagt der weise Großvater aus dem Off…

Fehler 5: Unterschätzen Sie niemals die Kompetenzen außerhalb Ihres Bereiches

Jeder Designer, den ich kenne, nimmt seinen Bereich, für den er verantwortlich ist, sehr ernst. Egal ob es sich dabei um eine Webseite, eine App oder ein Produkt handelt. Diese bei Designern vorhandene Liebe zum Detail erstreckt sich meistens auch auf den ersten Blick nicht sichtbare Dinge, wie zum Beispiel die Fehlerseite bei einer Website. Allerdings werden dafür die offensichtlichen Dinge gerne vernachlässigt, vielleicht als zu profan angesehen. Doch wen interessiert schon eine Fehlerseite, wenn die grundsätzliche Menüführung nicht stimmt?

team-437504_640

Einer der mächtigsten Hebel, um Menschen den Wert einer mobilen App nahezubringen, sind Interaktionen mit der UI, etwa Meldungen. Und doch gibt es sehr wenig Entwickler und Designer, die die Chance ergreifen, um die UI-(Rück-)Meldungen so zu gestalten, dass sie nützlich und nicht nervend sind. Wie viele Meldungen können wie erscheinen, ohne das sie als lästig empfunden werden? Kaum jemand kümmert sich um diesen sehr wichtigen Prozess. Hier wäre ein Ansatzpunkt für eine nahtlose Zusammenarbeit zwischen Design und Entwicklung. Ein weiteres Beispiel ist die Bestimmung des besten Einstiegspunkts für ein neues Feature. Dies ist ein umstrittenes und anspruchsvolles Unterfangen, jedoch entscheidender für den Erfolg als dutzende anderer Dinge, die man ändern könnte. Hier sollten Entwickler und Designer Hand in Hand arbeiten, damit ein neues Feature gut aussieht und dabei trotzdem auch benutzerfreundlich wird.

Außerdem sollte man sich die Frage stellen, was den Nutzer der App oder Webseite veranlassen könnte, zu Ihrem Kunden zu wechseln, die Webseite oder App Ihres Kunden zu nutzen und Käufer zu werden. Vergessen wir bitte auch nicht das Marketing: Wie sollen die Menschen vom neuen Feature erfahren, wie sollen sie darüber reden oder denken? Heute reicht es nicht, einfach eine App oder Webseite zu haben, die Besucher oder Nutzer kommen nicht mehr von allein. Es zählt nicht nur die Erfahrung innerhalb Ihres Bereichs, Sie müssen weiterdenken, Ihre Komfortzone verlassen und mit anderen Abteilungen, die in den Prozess eingespannt sind, zusammenarbeiten. Nur dann wird das entwickelte Produkt auch ein voller Erfolg werden.

Welchen Fehler machen Sie besonders häufig oder sogar gerne? Sagen Sie es uns in den Kommentaren…

(dpe)

Kategorien
CMS Programmierung

Und sie bewegt sich doch: Homepage-Baukasten Wix.com kann jetzt beliebige Seitenelemente animieren

Sie, als treues Mitglied der Dr. Web-Leserschaft, kennen Wix.com natürlich schon seit langem. Ich würde zudem behaupten, dass kein Bewohner des deutschen Sprachraums diesen Namen je wieder vergisst, wenn er ihn einmal gehört hat. Aber, das ist ein anderes Thema. Heute soll es in aller Kürze um das jüngste Feature gehen, dass Wix.com für seine Kunden verfügbar gemacht hat, das Animieren von Seitenelementen.

wix-animation-landing

Wix.com: Codekenntnisse werden immer überflüssiger

Dr. Web ist kein Magazin, das sich nur auf Frontend-Entwickler konzentriert, sondern den Fokus breiter ausrichtet. Wir wollen mit unseren Beiträgen für all jene hilfreich sein, die sich im weitesten Sinne als Seitenbetreiber verstehen. So ist unser Motto seit 1997. Und ein Seitenbetreiber ist nicht notwendigerweise ein Webdesign-Profi. Und da er das nicht ist, wird er sich sicher für Lösungen interessieren, die es ihm, mindestens bis zu einem gewissen Grad, erlauben, seine Seiten selber zu erstellen und zu pflegen. Die modernen Homepage-Baukästen verschieben die Grenzen des Machbaren kontinuierlich weiter nach hinten. Der Seitenbetreiber wird schrittweise in die Lage versetzt, immer mehr selbst zu machen.

Mit Wix.com können Sie als Nicht-Coder oder Hobby-Designer, aber auch Sie, als gelernter Printdesigner ohne Codekenntnisse, jetzt sogar Animationen auf Ihre Seiten bringen. Das Feature ist nicht so funktionsreich, wie der von Webydo angekündigte "Code-Free Parallax Scrolling Animator", aber das ist auch nicht erforderlich, da Wix.com eine andere Zielgruppe bedienen will.

wix-add-animation-final

Das Animations-Feature von Wix.com setzt ausdrücklich nicht darauf, an möglichst vielen Stellen des eigenen Auftritts eingesetzt zu werden. Vielmehr weist Wix.com im Blog-Beitrag zur Vorstellung der Funktion ausdrücklich darauf hin, dass der Nutzer sich über das alte Prinzip "weniger ist mehr" im Klaren sein sollte. So kann der gezielt Einsatz einer Animation auf einem sonst statischen "Kauf mich"-Button Konversionswunder wirken. Wenn sich aber alles bewegt, dann wird der Effekt eher nicht eintreten.

Das folgende Video zeigt die Funktion im Einsatz:

Die Verwendung des Features ist sehr einfach. Sie wurde nämlich schlicht dem Kontextmenü zugefügt. Markieren Sie ein Element und klicken Sie im entsprechenden Popup-Fenster auf "Add Animation". Ein paar Parameter und Effekte später wirkt Ihre Site gleich lebendiger.

Was halten Sie von Wix.coms Animations-Feature? Lange erwartet oder überflüssiger Schnick-Schnack?

Links zum Beitrag:

  • New Wix Feature: Animations! | WixBlog
  • Wix.com: Hat der Homepage-Baukasten aus Israel das Potenzial, das Webdesign zu revolutionieren? | Dr. Web Magazin
  • Pixelgenaues, parallaxes Scrolling mit dem neuen Animator: Webydo lädt Dr. Web-Leser zur geschlossenen Beta ein | Dr. Web Magazin
Kategorien
Fotografie Inspiration

Titania Foto: Kostenlose Bildersammlung aus Deutschland

Wir berichten regelmäßig und natürlich auch gerne über freie, kostenlos nutzbare Bilddatenbanken. Dabei stammen diese Angebote zumeist aus dem Ausland, wenn man einmal von der wirklich großartigen Ressource Pixabay absieht. Unsere heutige Neuvorstellung, Titania Foto, hingegen, ist einer dieser raren Vertreter aus deutschen Landen, wenn auch der Name der Betreiberin, Tania Timpone, italienischen Ursprung vermuten lässt.

titania-foto-landing

Titania Foto: Derzeit rund 400 Fotos zur freien Nutzung

Tania Timpone aus dem malerischen Kirchlengern in Nordrhein-Westfalen, unweit der Legende Bielefeld gelegen, fotografiert gern und viel. Die meisten Bilder entstehen auf ihren Reisen innerhalb von Deutschland und ins europäische Ausland. Besonders Italien hat es Tania angetan. So sind mehr als die Hälfte der knapp 400 Fotos auf Titania Foto Landschafts- und andere Naturaufnahmen.

Auf der Basis eines WordPress-Themes von Sell Media legt Tania Timpone eine leicht bedienbare Bilddatenbank vor, die zwar nicht den Eindruck eines State of the Art Fotografenportfolios macht, aber jedenfalls tut, was man von ihr erwartet.

titania-foto-kategorien

Mittels einer Freitextsuchfunktion, die sich auf bestimmte Kategorien, Auflösungen oder Ausrichtungen begrenzen lässt, sind die gut verschlagworteten Fotos schnell und zielsicher zu finden. Wer nicht genau weiß, wonach er sucht, klickt sich durch die sechs Kategorien oder stöbert via Tagcloud im Angebot. Auch die chronologische Anzeige aller Bilder-Previews ist vorgesehen.

Gefällt Ihnen eine Foto-Preview, so klicken Sie auf das entsprechende Bild. Hierdurch gelangen Sie zur Detailansicht des jeweiligen Fotos. An dieser Stelle erhalten Sie sämtliche Informationen zur verwendeten Kamera und ihrer Parameter. Von hier aus laden Sie das Foto herunter oder fügen es einer Lightbox hinzu, die Sie am Ende des Surfgangs Stück für Stück herunterladen können. Wollen Sie nicht auf die Detailseite wechseln, so können Sie den Download auf den meisten Übersichtsseiten auch via Hover über das Bild erreichen. Der entsprechende Button wird dann rechts oben am Foto sichtbar.

Titania Foto: Backlink gern genommen, aber nicht erforderlich

Beachten Sie, dass der Button "Download" missverständlich beschriftet ist. Anstelle des sofortigen Herunterladens wird nach Ihrer E-Mail-Adresse gefragt, an die dann der Download-Link versendet wird. Frau Timpone verspricht, kein Schindluder mit den Adressen zu treiben.

Die Bilder dürfen völlig frei zu jedem legalen Zweck verwendet. Über Backlinks und die Nennung der Urheberschaft freut sich Tania natürlich, macht das aber nicht zur Voraussetzung für die Nutzung. Sie können die Fotos also auch ungenannt verwenden. Was Sie nicht dürfen, ist, die Bilder als solche zu verkaufen oder sie in andere Bilddatenbanken einstellen.

Die Fotos sind in der Regel nicht, zumindest nur unwesentlich, nachbearbeitet. Von daher gibt es die großen Whoa-Momente nicht, dafür aber natürliche Schnappschüsse dessen, was die Welt tatsächlich zur Abbildung freiwillig zur Verfügung stellt. Wie schon in den anderen, von uns vorgestellten Bildersammlungen gibt es auch bei Titania Foto nicht den Anspruch, möglichst eine breite Motivabdeckung zu erreichen, um den Stockfotoanbietern Konkurrenz zu machen. Vielmehr finden sich eben die Bilder, die Tania Timpone machen wollte. Hier ein paar Beispiele:

titania-foto-expl-paris

titania-foto-expl-sizilien

titania-foto-expl-blueten

titania-foto-expl-aepfel

Fazit: Stöbern lohnt sich, bookmarken auch…

Links zum Beitrag