It has been a while that I read Top-Rankings bei Google und Co. but it is still my n#1 choice for Search Engine Optimization. So yes, you should buy this book if you're serious about offering a solid SEO to your customers and boost their traffic!

Every time I read a book I write a summary. Here is a presentation made out of my summary (german only + keep in mind that it is extremly brief and will never be able to replace the 407 Pages of the book)

Gerne könnt ihr mir eine E-Mail schreiben bei Interesse an der ganzen Zusammenfassung.

The book 100 things every designer needs to know about people is extremly informative. Every Designer and Developer should get a copy. Here is my review (in german):

Vielle Fakten waren mir tatsächlich neu und haben meine Sicht auf Design in manschen Punkten ein wenig verändert - zum Beispiel fande ich es sehr interessant konkrete Beispiele zu finden wie optische Signale uns zeigen wie wir ein Objekt verwenden. Zum Beispiel ist es jedem sicher schon einmal passiert eine Tür zu drücken statt sie zu ziehen - das passiert wenn lediglich die Aufschrift den Hinweiß zum drücken gibt, die Gestaltung des Griffes aber eigentlich zum Ziehen ermutigt. Das Buch ist nicht nur für Designer interessant. Jeder im Dienstleistungssektor wird hier auf seine Kosten kommen. Z.B. Welches Belohnungssysthem mehr Dopamin ausschüttet. Naja so viel dazu - das Buch habe ich natürlich wie immer zuammen gefasst, hier ein paar Punkte meiner Zusammenfassung als "teaser" (bitte beachtet, dass es sich hier um eine stark gekürzte Zusammenfassung handelt. Im Buch selber wird natürlich alles viel umfangreicher erklärt und mit Quellen belegt):

4. Ein bestimmter Teil des Gehirns ist speziell für die Wahrnehmung von Gesichtern da: Wir erkennen Gesichter schneller als irgendetwas anderes und reagieren auch am schnellsten auf diese. Gesichter, die uns direkt anblicken, haben auf einer Webseite die stärkste emotionale Wirkung, wahrscheinlich weil die Augen der wichtigste Teil des Gesichts sind. Wenn ein Gesicht auf einer Webseite an eine andere Stelle oder auf eine Produktabbildung sieht, neigen wir dazu, ebenfalls dieses Produkt anzublicken. Das bedeutet nicht notwendigerweise, dass wir ihm Aufmerksamkeit schenken, sondern nur, dass wir es ansehen.

7. Optische Signale zeigen uns, wie wir ein Objekt verwenden können: Denken Sie bei der Gestaltung über Hinweisreize nach. Erhält der Anwender einen Hinweis darauf, was er mit einem bestimmten Objekt tun kann, wird er es mit größerer Wahrscheinlichkeit entsprechend benutzen. Deuten Sie mit Schattierungen an, ob ein Objekt ausgewählt oder aktiv ist. Vermeiden Sie falsche Hinweisreize. Denken Sie über Hinweisreize beim Hovern nach, wenn Sie für ein Ausgabegerät gestalten, bei dem der Benutzer Berührungen mit dem Finger statt ein Eingabegerät verwenden.

24. Jedes Mal, wenn wir eine Erinnerung abrufen, rekonstruieren wir sie. Ebenso wenn wir etwas erzählt bekommen, rekonstruiren wir was wir erzählt bekommen. Jede Erinnerung ist sehr leicht zu beeinflussen und jeder erinnert sich anders. Bei jeder Rekonstruktion geht ein warheitsgehalt verloren.

50. Unsere Motivation steigt wenn wir uns einem Ziel nähern: Je kürzer der Weg zum Ziel, desto stärker unsere Motivation es zu erreichen. Am meisten motiviert es uns, wenn das Ende bereits in Sicht ist. Diese Zusatzmotivation lässt sich sogar durch eine Illusion des Vorankommens erreichen, so wie im Beispiel mit dem Bonusheft. Dabei gibt es keinen Objektiven Fortschritt, aber es scheint bereits ein gewisser Fortschritt vorhanden zu sein und das hat denselben Effekt (: eine neue Bonuskarte mit 0/10 Punkten abgestempelt ist weniger Reizvoll als eine neue Bonuskarte mit 2/12 Punkten). Wir nehmen gerne an Bonusprogrammen teil. Kivetz fand heraus dass Kunden mit Bonusheft im Vergleich zu Kunden ohne Heft mehr lächelten, sich länger mit den Angestellten unterhielten, häufiger „Danke“ sagten und häufiger Trinkgeld gaben. Die Motivation und die Verkaufszahlen gehen direkt nach Erreichen des Ziels in den Keller. Das wird als „Postreward-Resetting“-Phänomen bezeichnet. Wenn Sie noch eine zweite Bonusebene vorgesehen haben, dann werden die Zielpersonen zu Beginn nicht allzu motiviert sein, diese zu erreichen. Direkt nach der Belohnung des Kunden laufen Sie Gefahr, ihn zu verlieren.

53. Unberechenbarkeit spornt uns zur suche an: Wenn Sie Hinweisreize wie Klänge mit eingehenden Informationen paaren, motivieren Sie die Nutzer, nach weiteren Informationen zu streben (E-Mail Notifikationen, Steam Achievements,..). Wenn Sie kleine Informationshäppchen anbieten und es den Anwendern dann ermöglichen, weitere Informationen zu finden, werden sie den Wunsch nach mehr Informationen verspüren. Je weniger sich die Informationen vorhersehen lassen, desto erstrebenswerter scheinen sie uns.

64. Wir sind auf Nachahmung und Einfühlung programmiert: Unterschätzen Sie nicht die Wirkung, die die Beobachtung eines anderen Menschen hat. Wenn Sie das Verhalten der Nutzer beeinflussen möchten, dann zeigen Sie ihnen eine Person, die die entsprechende Aufgabe ausführt. Durch Geschichten werden Bilder im Gehirn erzeugt, die ebenso Spiegelneuronen auslösen können. Arbeiten Sie mit Geschichten wenn Sie möchten, dass die Menschen selbst tätig werden. Videos auf Websites sind besonders verlockend. Möchten Sie, dass Ihre Kunden Gemüse essen? Dann Zeigen Sie ein Video in welchem Menschen (am besten ihrer Zielgruppe so ähnlich wie möglich) Gemüse Essen. Spiegelneuronen erledigen den Rest.

66. Wir erwarten, dass Onlineinteraktionen sozialen Regeln folgen: Wenn Sie ein Produkt gestalten, denken Sie darüber nach, auf welche Weise die nutzer damit interagieren werden. Folgen die Interaktionen den Regeln einer Interaktion von Mensch zu Mensch? Viele Usability-Richtlinien sind im Grunde genommen Richtlinien, die den sozialen Erwartungen an Interaktion entsprechen.

67. Wir lügen in unterschiedlichem Maß, je nach Medium: Wir lügen am häufigsten am Telefon und am wenigsten mit Stift und Papier. Wir sind gegenüber anderen Menschen per E-Mail negativer als mit Stift und Papier. Achten Sie darauf, dass Nutzer bei E-Mail Umfragen negativer antworten werden. Rückmeldungen sind genauer wenn sie von Angesicht zu Angesicht durchgeführt werden. (1. Schrift & Papier 2. E-Mail 3. Telefon)

83. Wir fühlen uns vor und nach einem Ereignis besser als Währenddessen: Wenn Sie eine Benutzeroberfläche gestalten, auf der Menschen ein zukünftiges Ereignis planen, werden ihre Gefühle immer positiver, je länger Sie die Planungsphase herauszögern können. Bei der Beurteilung von Zufriedenheit oder anderer Gefühle sollten Sie darauf achten, dass Sie bei einer Befragung ein paar Tage nach der Interaktion bessere Bewertungen bekommen als während der Interaktion.

92. Wir wollen mehr Auswahlmöglichkeiten und Informationen, als wir verarbeiten können: Widerstehen Sie dem Drang, Ihren Kunden unzählige Auswahlmöglichkeiten anzubieten. Wenn Sie Menschen befragen, wie viel Auswahl sie wünschen, dann erhalten Sie immer „alles was geht“ als Antwort. Begrenzen Sie die Auswahl aber auf 3-4 Möglichkeiten. Wenn Sie mehr Möglichkeiten anbieten müssen, bieten Sie diese in einer Unterkategorie an.

94. Zeit ist uns oft wichtiger als Geld: Am besten ist es wenn Sie Ihre Zielgruppe kennen. Ist sie von Prestige und Besitztümern geleitet, dann erwähnen Sie auf jeden Fall Geld. Seien Sie sich aber im klaren, dass für die Meisten Menschen eine persönliche Verbindung eher über Zeit und Erfahrung aufgebaut wird. Wenn Sie Zeit wählen, dann zögern Sie die Erwähnung von Geld so weit wie möglich hinaus. z.B. „nehmen Sie sich etwas Zeit um unsere Limonade zu kosten“.

Gerne könnt ihr mir eine E-Mail schreiben bei Interesse an der ganzen Zusammenfassung.

It's my first Processing Application. Processing is so much fun because it's very easy to code & you get quick results! Try out my Tube Drawing Tool. First you choose the canvas size with the "+" and "-" buttons then you click into the canvas and can start/stop drawing tubes with the "d" key for draw. If you've got a decent result, save it with the "s" key for save. You'll get a portable network graphic to use and reuse and rerereuse. Even sell and resell, you've all rights! Have fun drawing!

It was my first "game". I coded it one years ago (2013) in JavaScript. Pretty basic.

It was a project I did just for fun and I'm giving away for 100% free!

Screenshots:

Okay so with CSS we have awesome cool new features now! I'll start with the CSS Filters. As a designer (or maybe just a hipster kid) I bet you love your Photoshop Filters right? Well some are ready for CSS now! Check out the examples below:

Awesome right?

Here's how to:

HTML part for the IMGs:

							
	<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg">

	<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg" class="saturate">

	<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg" class="grayscale">

	<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg" class="contrast">

	<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg" class="brightness">

	<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg" class="blur">

	<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg" class="invert">

	<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg" class="sepia">

	<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg" class="huerotate">

	<img alt="Mona Lisa" src="Mona_Lisa_by_Leonardo_da_Vinci.jpg" class="rss opacity">
							
						

CSS part to manipulate the IMGs:

							
	.saturate {

		-webkit-filter: saturate(3);

		-moz-filter: saturate(3);

		-o-filter: saturate(3);

		filter: saturate(3);

	}

	.grayscale {

		-webkit-filter: grayscale(100%);

		-moz-filter: grayscale(100%);

		-o-filter: grayscale(100%);

		filter: grayscale(100%);

	}

	.contrast {

		-webkit-filter: contrast(160%);

		-moz-filter: contrast(160%);

		-o-filter: contrast(160%);

		filter: contrast(160%);

	}

	.brightness {

		-webkit-filter: brightness(0.25);

		-moz-filter: brightness(0.25);

		-o-filter: brightness(0.25);

		filter: brightness(0.25);

	}

	.blur {

		-webkit-filter: blur(3px);

		-moz-filter: blur(3px);

		-o-filter: blur(3px);

		filter: blur(3px);

	}

	.invert {

		-webkit-filter: invert(100%);

		-moz-filter: invert(100%);

		-o-filter: invert(100%);

		filter: invert(100%);

	}

	.sepia {

		-webkit-filter: sepia(100%);

		-moz-filter: sepia(100%);

		-o-filter: sepia(100%);

		filter: sepia(100%);

	}

	.huerotate {

		-webkit-filter: hue-rotate(180deg);

		-moz-filter: hue-rotate(180deg);

		-o-filter: hue-rotate(180deg);

		filter: hue-rotate(180deg);

	}

	.rss.opacity {

		-webkit-filter: opacity(50%);

		-moz-filter: opacity(50%);

		-o-filter: opacity(50%);

		filter: opacity(50%);

	}
							
						

Note that you'll need vendor prefixes to get good browser support where -moz is firefox I guess, -o should be opera and so on...

See Browser compatibility @MDN

I see many great ways to use it. One could be to use it with CSS Animations like so:

Even more Awesome right?

Well, here is how to:

HTML part for the IMGs:

							
							<div id="background-color">

							Animating Background jpg IMG

							</div>
							
						

CSS part to manipulate the IMGs:

							
	#background-color{

		background-image: url(asteroids-pattern.jpg);

		color: white;

		height: 200px;

		-webkit-animation: changeColor 5s infinite;

		-moz-animation:    changeColor 5s infinite;

		-o-animation:      changeColor 5s infinite;

		animation:         changeColor 5s infinite;

	}

	

	@-webkit-keyframes changeColor {

		0%   { -webkit-filter: hue-rotate(0deg); }

		100% { -webkit-filter: hue-rotate(360deg); }

	}

	@-moz-keyframes changeColor {

		0%   { -moz-filter: hue-rotate(0deg); }

		100% { -moz-filter: hue-rotate(360deg); }

	}

	@-o-keyframes changeColor {

		0%   { -o-filter: hue-rotate(0deg); }

		100% { -o-filter: hue-rotate(360deg); }

	}

	@keyframes changeColor {

		0%   { filter: hue-rotate(0deg); }

		100% { filter: hue-rotate(360deg); }

	}
							
						

So basically you start by setting the "animation: changeColor 5s infinite;" on an element while "changeColor" will be the name of the keyframe - you can replace it with whatever you like. "5s" is the animation speed. By "infinite" you set the repeat to infinite (write an integer instead to change it).
Then You create the animation with "@keyframes" + the name of your animation. Here it was "changeColor" as set above. Lastly you set keyframes with %. So 0% is the very beginning of the "5s" animation time while 100% is the end => 5 seconds.

CSS Animations are awesome and I use them a lot to create smooth transitions!

Here's an example with the @keyframe function used with "opacity":

Opacity animations are great to smooth things.

Note that here as well you'll need vendor prefixes for greater compatibility..

See Using CSS animations @MDN for more Information about CSS animations.

I hope this article was of any help! See 'ya soon. Thibault Jan Beyer

Just us, having fun during a movie shoot:

Is this a self-portrait? Different guys with different languages talking a different story isn't a self-portrait anymore is it?