Du willst deine Leistungsfähigkeit um bis zu 34% steigern und deine Aufnahmefähigkeit um bis zu 54%? Und alles nur durch ein kleines Nickerchen?

Der Boston Globe hat eine sehr anschauliche Übersicht zum Thema Power-Napping erstellt. Ich empfehle jedem, den ab und an das Bedürfnis überkommt, sich einfach mal hinzulegen, einen Blick darauf.

Studien mit Nasa-Piloten haben ergeben, dass die Leistungsfähigkeit und Aufnahmefähigkeit nach einem 26-minütigen Kurzschlaf bzw. Tagesschlaf tatsächlich rapide zunimmt.

Worauf man beim Power-Napping achten sollte:

• Man sollte zur richtigen Tageszeit schlafen: Der Körper folgt einem bestimmten Tagesrhytmus, der je nach Schlafphase unterschiedlich sein kann. Steht man um 6 Uhr morgens auf und legt sich zwischen 21 und 22 Uhr schlafen, so ist die optimale Zeit für ein Mittagsschläfchen gegen 13:30. Beginnt der Tag gegen 8 oder 9 Uhr und endet gegen Mitternacht, um 1, so ist 14:30, 15 Uhr die richtige Zeit.
• Nicht zu lange schlafen: Die optimale Zeit für einen erholsamen Schlaf liegt zwischen 15 und 30 Minuten. 45 Minuaten sollten auf keinen Fall überschritten werden, da sonst der Körper in Kurz-Wellen-Schlaf verfällt. Dieser erzeugt beim Aufwachen ein Gefühl der Erschöpfung und Desorientierung.
• Man sollte sich hinlegen: Der Körper benötigt 50% länger, um im Sitzen einzuschlafen. Ein bequemes, ruhiges Plätzchen eignet sich optimal für das Power-Napping.
• Ganz wichtig: Wecker Stellen: Da der Körper gerne auch länger schlafen würde, sollte man sich unbedingt einen Wecker stellen. Meine optimale Zeit liegt bei 18 Minuten. Nach ein paar Versuchen wacht man zumeist schon von alleine auf - kurz bevor der Wecker klingelt.
• Einplanen: Man sollte das Nickerchen in den Tagesablauf einplanen. Nichts fällt schneller unter den Tisch, wenn zuviel zu tun ist.

Weitere Vorteile des Nickerchens:

• Verbessert Lernvermögen und Gedächtnis
• Verringert Stress
• geringeres Risiko für Herzattacken, Hirnschlag, Diabetes und Übergewicht (naja, ob das alles so stimmt... ;)
• geringer Blutdruck

Wer mehr zum Thema lesen will, findet einiges zum Thema Superschlaf bei Wikipedia. Oder eine Anleitung zum Power-Napping bei lifehacker.com.

Es ist eine erbittert geführte Debatte über die Berechtigung von Flash als Interaktions-Oberfläche im Internet.

Flash ist im wesentlichen der Teil im Internet (sei es Banner oder komplette Seiten), die animiert wirken und zumeist an Filme oder Sequenzen erinnern.  

Zum Wesentlichen: Gute Beispiele

Um zu beurteilen, ob etwas gut oder schlecht ist sollte man es sich doch zumindest angeschaut haben... :)

Hier ein paar wirklich beeindruckende Beispiele, was man mit Flash alles machen kann.

Get the Glass - Flash Spiel

Ein wirklich mit viel Liebe zum Detail gemachtes Spiel ist "Get the Glass". Man hilft einer Familie durch lösen verschiedenen Rätsel und Präsentation seiner Fahrkünste ans Ziel ihrer Begierde zu kommen: Einem Glas Milch.

Die Famile erinnert stark an die "Incredibles" und ist wirklich sehr amüsant. Ich habe es noch nicht geschafft, das Spiel durchzuspielen ;)

Ikea - Wohnen am Bildschirm erleben

Ein anderes erstaunliches Beispiel für intelligent und kreative eingesetztes Flash ist Ikea:

Auf dieser Ikea-Flash-Seite kann man sich durch seine Traumküche bewegen und sie gefüllt mit Menschen und Gegenständen erleben.

Unterlegt mit schöner und stets passender Musik sind diese Seiten ein wahres Erlebnis.

Weitere Bespiele findest du hier:

• Ikea-Traumküchen
• Ikea-Traumgarderoben

Punkte wider Flash:

• Verbreitung ist nicht 100% (hinzu kommen verschiedene Versionen und Upgrade-Zwang)
• keine Indizierung der Inhalte durch Suchmaschinen
• Probleme der Zugänglichkeit (Accessibility und Interaktions-Möglichkeiten)
• Und: Wir erinnern uns alle noch an die schrecklichen Zeiten der völlig überflüssigen Flash-Intros auf nahezu allen Web Seiten

Punkte für Flash:

• interaktives, multimedial reiche Umsetzungen möglich
• neue Interaktionsmuster, mehr Spielraum (im Vergleich zu Html/Css und Javascript)

Fazit: Für jeden Kontext das richtige Flash

Wie man sieht, gibt es durchaus sinnvolle Repräsentanten für Flash im Internet. Klar ist jedoch, dass hier um eher medial reiche Bereiche handelt. Mit viel Interaktion und Einbindung der Kunden ins Produkt.

Für klassische Informations-Seiten wie Shops oder Produkt-Seiten wird Html und Css immer noch die erste Wahl bleiben.

[Mehr zum Thema Flash gibt's in Veerle's Blog]

Ein Streit ist ausgebrochen zwischen den berühmt-berüchtigten Basecamp-Machern 37signals und dem Designer der bekannten Web-Agentur blueflavor.

Streitpunkt: Entwicklung von Ideen mit oder ohne Photoshop

Die Macher einer der erfolgreichsten Web Applikations-Suite mit Basecamp, Campfire, etc. sehen folgende Gründe für das Verwenden von Html und Css im Entwicklungsprozess:

• Keine Interaktionsmöglichkeiten bei einem Photoshop-Mockup (kein Klicken, Navigieren, etc.)
• zu hoher Fokus auf Details
• Text in Photoshop ist nicht der Text, den man im Browser sieht
• Dopplung von Arbeit: Zuerst in Photoshop und dann erneute Umsetzung in html und css
• Photoshop erschwert die Zusammenarbeit, da nicht alle diese Software verwenden und es meist einen Experten gibt

Die Antwort von blueflavor:

• für das visuelle Design ist Photoshop unumgänglich (37signals hat bereits einen etablierten Stil)
• für einfache Web Applikationen ist nicht viel visuelles nötig, für bestimmte (z.B. Corporate Web-Seiten) schon
• Kunden wollen etwas sehen für Geld. Im wahrsten Sinne des Wortes. D.h. visuelle Kommunikation (auch im Detail) spielt eine grosse Rolle

Die richtigen Tools für die richtige Anforderung

Ich denke, dass beide Herangehensweisen etwas wichtiges und richtiges beinhalten. Ein wesentlicher Vorteil der Html und Css-Mockups ist natürlich die Möglichkeit, sie in der Produktion weiterzuverwenden.

Es gibt Bereiche im Design-Prozess, wo der Prototyp mit Html und Css umgesetzt werden sollte. Hierbei geht es vor allen Dingen um strukturelle und funktionale Fragen:

• wo ist der Fokus der Seite?
• wie strukturieren wir unseren Inhalt?
• wo kommt Feature x hin?
• wie funktioniert die Navigation?
• wie ist die globale Seiten-Struktur?

Widerum andere Fragen lassen sich primär in Photoshop lösen. Vor allen Dingen visuelle und Detail-Fragen:

• Welche Farben verwenden wir?
• Hintergründe, Verläufe, Logo
• genaue Positionierung von Elementen zu einander
• Icons, Detail-Elemente
• visueller Gesamteindruck (vor allen Dingen auch für den Kunden=

Weitere Fragen, die man sich beim Herstellen von Prototypen stellen muss:

• Wer ist die Zielgruppe? (Entwickler im Team, Kunde, Pitch)
• Wieviel Zeit hat man? (reicht ein Papier-Mockup oder sollte man eine komplette Seiten-Struktur in html und css erstellen)
• Ermöglicht man anderen konstruktives Feedback? (Lieber in Powerpoint als in Photoshop?)
• Welche Detail-Stufe ist erfordlich? (Komplettes visuelles Layout vs. strukturelle Übersicht)

Am Rande: Video zu Prototyping-Tools

Ein sehr interessantes Video zur Auswahl des richtigen "Arbeitsgerät" zum Erstellen von Mockups und Prototypen gibt es von Jonathan Arnowitz (Google).

Er distanziert sich zum Teil von den Konzepten von Bill Buxton, über den ich vor einer Weile geschrieben habe. Im Wesentlichen vertritt Arnowitz die Meinung, dass Prototyping mit jedem Tool (von Papier und Bleistift über Excel bis hin zu Visio) gemacht werden kann. Die Frage ist jedoch stets nach Effizienz und Anforderung.

Im Zuge der steigenden Popularität von Javascript Frameworks, wie z.B. jQuery, hat sich Google entschieden die wichtigsten Repräsentaten auf ihren Servern zu hosten.

Was sind Javascript/Ajax Frameworks?

Vereinfachend kann man sagen, dass Javascript Frameworks dem Designer mehr Interaktions-Potential in die Hand gibt.

Vom dynamischen Nachladen von Content bis hin zu Foto-Slide-Shows, sind die Möglichkeiten solcher Frameworks sehr umfassend.

Ajax ist die Kurzform von "asynchronous javascript and xml" und steht für einen weiteren Baustein der Interaktivität, durch die Aktualisierung von Daten ohne die gesamte Seite neu laden zu müssen.

Die Liste der gehosteten Frameworks:

• jQuery
• prototype
• script.aculo.us
• MooTools
• dojo

Vorteile und Nachteile

Der erste wesentliche Vorteil ist ein Geschwindigkeitszuwachs. So müssen die zum Teil beträchtlich grossen Javascript-Dateien nicht mehr vom eigenen Server geladen werden sondern von einem meist schnelleren und besser vernetzten Google-Server.

Der zweite Vorteil betrifft die regelmäßige Aktualisierung der gehosteten Versionen. D.h. man muss als Entwickler nicht jedes Update in sein Projekt integrieren und erneut hochladen, sondern dies passiert nun automatisch.

Die Nachteile betreffen primär die Möglichkeit des Ausfalls und der übliche Vorwurf an Google, Daten von Nutzern zu speichern.

[Eine genauere Auseinandersetzung mit dem Thema findet in dem Artikel über Implikationen für Web Entwickler.]

In einem sehr umfangreichen Artikel auf SmashingMagazine.com gibt es lange Liste an Tipps und Tricks für Css Entwickler.

Ich kann jedem Web Designer einen Blick darauf empfehlen, vor allen Dingen auf die Hinweise zur Strukturierung und Erstellung von Css-Dateien.

Zwar teile ich nicht alle Ideen, jedoch denke ich, dass es zum Arbeitsprozess eines jeden Html/Css-Web Designers gehören sollte, sich grundlegende Fragen zur Strukturierung der eigenen Css-Dateien zu machen.

Sei es, um die Arbeit damit für Kollegen zu erleichtern; sei es, um noch in 2 Monaten zu wissen, wofür bestimmte Definitionen stehen; sei es, um schneller und effizienter zu arbeiten.

Ich habe einen ausführlichen Beitrag zu meinen Überlegungen zu diesem Thema in der Schublade; er sollte bald fertig sein :)

[So lange könnt ihr euch bei smashingmagazine.com inspirieren lassen]

Die Webkrauts haben in Anlehnung an die Ende letzten Jahres von A List Apart durchgeführte Umfrage, deutsche Web-Arbeiter befragt und die Ergebnisse nun veröffentlicht.

Die Fragen an die gut 2800 Teilnehmer rangieren von Finanziellem über Ausbildung bis zur aktuellen Tätigkeit und sind auf der Seite von Michael Jendryschik recht anschaulich präsentiert.

Ich werde nicht weiter ins Detail gehen, sondern jedem, der sich dafür interessiert, was die "Kollegen" so umtreibt, emfpehlen, einen Blick auf die Ergebnisse zu werfen.

Persönlich denke ich, dass all die Statistiken und durchschnittlichen Angaben nicht wirklich interessant sind, oder gar eine Anregung darstellen. So kann ich für mich keine hilfreiche Aussage ableiten aus der Ergebnis, wie sich meine "Kollegen" fortbilden. Ich setze da mehr auf individuelle Geschichten und persönliche Tipps. Lese daher auch gerne Interviews mit Web Workern, da sie meist viel mehr aussagen, als alle möglichen Statistiken.

Bill Buxton, der Chef von Microsoft Research, spricht in diesem Video-Vortrag über grundlegende Fragen des Design-Prozesses.

Unterwegs (gut 50 Minuten) gibt er auch eine Anekdote über den wahren Grund des Erfolgs des iPods zum Besten.

Was ist Design?

• Design ist nicht Innovation
• Design ist nicht Inspiration
• Design ist nicht Kreativität
• Design ist Kompromiss

Zusatz von mir: Ich denke, dass sich Design gerade dadurch auszeichnet, dass es Anforderungen genügen muss, ein Problem lösen muss und nicht zweck- und funktionsfrei betrachtet werden kann. Darin unterscheidet Design sich auch im Wesentlichen von Kunst.

Ein guter Design-Prozess?!

Butxon weist darauf hin, dass ein Design-Prozess der zu einem erfolgreichen Produkt führen soll vor allen Dingen dadurch ausgezeichnet ist, dass der Fokus nicht auf dem materiellen Gegenstand oder dem Interface liegen darf sondern auf der tatsächlichen Verwendung und dem Umfeld.

Ein gutes Beispiel von Buxton ist ein Fahrrad, dass er selbst entwickelt hat. Drei verschiedene Darstellungen illustrieren diese Herangehensweise:

1. Das Fahrrad ist in der Seitenansicht vor weissem Hintergrund dargestellt.
2. Das Fahrrad wird von hinten rechts mit Schatten abgebildet.
3. Das Fahrrad in vollem Einsatz gefahren durch einen Bach, in einem Wald, Wasser spritzt durchs Bild. Das Fahhrad ist kaum zu sehen.

Ein guter Designer?

Was einen Designer nach Buxton auszeichnet, ist die Fähigkeit, eine Menge von Lösungen für ein Problem zu finden, und von diesen Lösungen die beste zu extrahieren und weiterzuentwickeln. Der Designer ist also im Wesentlichen ein Entscheider.

Um eine möglichst breite Palette an vielfältigen Lösungen in möglichst kurzer Zeit hervorbringen zu können, empfiehlt Buxton die Technik des Skizzierens. Er unterscheidet bei Entwürfen auch nicht zwischen Low oder High Fidelity sondern zwischen Right und Wrong Fidelity. Für jedes Problem gibt es also auch eine notwendige Detail-Genauigkeit des Enwurfs.

Alles in allem sehr interessant von einem alten Hasen ein paar kluge Gedanken aufschnappen zu können, wenn auch die Audio- und Slide-Qualität im Video mäßig ist.

In einer sehr lesenswerten Einführung in das Thema der Mikroformate für das Markup beschreibt Brian Suda wie diese funktionieren und das Html bedeutungsvoller und somit funktionaler machen.

Was sind Microformats?

Wenn man von der formalen Definition absieht wird man schnell herausfinden, dass Mikroformate eine Art semantische Erweiterung des bestehenden Htmls (und damit der Inhalte) sind, die der Funktion dienen soll, dem jeweiligen Html-Block eine spezielle Bedeutung zu geben.

Im wesentlichen werden Html-Elemente mit bestimmten Klassen-Namen versehen und erhalten somit eine Art Tag, dass den Inhalt des Elements weiter spezifiziert.

Der Clou an der ganzen Geschichte ist, dass nicht irgendwelche Klassen-Namen und somit Microformats verwendet werden, sondern es werden bereits vorhandene, standartisierte Formate verwendet, wie z.B. hCalendar, ein Kalenderformat.

Wofür das Ganze?

Die Idee hinter dem Projekt ist, dass die mit Microformats versehenen Inhalte leichter gefunden werden können. Eine normale Html-Seite ist derzeit noch (in eventuell späteren Html-Versionen soll sich das ja ändern) völlig bedeutungslos. Ein p-Tag ist ein p-Tag ist ein p-Tag. Sollte aber z.B. ein Kalender-Eintrag mit Microformats versehen sein, so weiß man sogleich, um welche Art Inhalt es sich hier handelt, und kann diesen dann z.B. automatisiert anzeigen oder weiterverwenden. So kann aus einem p-Tag z.B. ein Datum werden.

Yahoo, Flickr, Microsoft...

Wenn man sich über die Frage, wie sinnvoll das Projekt ist, hinaus wundert, ob es sich denn um ein zukunftsweisendes und vielversprechendes Projekt handelt, dass eventuell sogar als Standard implementiert werden könnte; so lassen die oben erwähnten Namen eine positive Antwort erahnen. So werden bei Flickr und Upcoming.com Microformats verwendet.

Darüber hinaus melden auch Browser-Hersteller Interesse für Microformats-Funktionalität angemeldet. So könnte man dann automatisch Adressen in das Adress-Buch importieren oder Termine im Google Calendar speichern.

Es gibt sogar schon ein Plug-In bzw. Add-On für den Firefox mit dem Namen Operator, der genau dies ermöglicht.

Weiterführendes:

• Zum oben erwähnten, einführenden Artikel zum Thema Mikroformate (mit Beispielen)
• Zur Homepage des Projekts
• Zum Microformats Cheat Sheet von Brian Suda (Referenz)

In einem lesenswerten Artikel auf A List Apart schreibt Luke Wroblewski über die fatalen Folgen, die entstehen, sollte man den Nutzer zu früh mit einem Anmelde- bzw. Registrierungs-Formular präsentieren.

Langsam Vertrauen  Aufbauen 

Oft mangelt es der Applikation oder dem Portal an Vertrauen auf Seiten des Nutzers, so dass ein verfrühtes Anmelde-Formular schnell dazu führen kann, dass der Nutzer abgeschreckt ist, weil er seine Daten nicht preisgeben möchte. Dies führt dann meist schnell zum Verlassen der Seite und zu einem potentiellen Kunden/Anwender weniger.

Durch das Ermöglichen eines test-mäßigen Ausprobierens der Anwendung oder des Portals wird es dem Nutzer ermöglicht, herauszufinden, ob diese Applikation überhaupt die Richtige für ihn; wieviel Mehrwert sie birgt.

Darüber hinaus wird durch das bereits investierte Engagement bereits eine Bindung zum Produkt aufgebaut. Der Nutzer neigt eher dazu, sich für das Produkt anzumelden, da er schon Zeit in die Anwendung gesteckt hat.

Anhand einiger gut gewählter Beispiele beschreibt der Autor die Möglichkeiten, den Kunden nicht abzuschrecken sondern für das Produkt zu begeistern und als langfristigen Nutzer zu gewinnen.

Da ich mich im Moment intensiv mit dem Entwerfen von User Interfaces (Nutzer-Schnittstellen) auseinandersetze werde ich eine kleine Serie von Artikeln zum Thema verfassen.

In diesem ersten Beitrag geht es um die einfachste Variante: Dem Entwickeln eines Prototyps auf Papier.

Die Idee hinter einem Protypen

Der Fokus bei einem Prototypen sollte primär auf Fragen des Interface, der Struktur, den Prioritäten, der Informations-Architektur und dem Nutzer-Flow liegen. Keineswegs sollten ästhetische oder grafische Elemente eine Rolle spielen.

Die Benutzerbarkeit der Seite sollte überprüft werden, wesentliche Elemente passend gruppiert und die Benutzerführung durchgespielt werden.

Einfach, Schnell und Aufschlussreich

Der Vorteil des Arbeitens beim Prototyping mit Papier gegenüber anderen Formen wie Grafikprogrammen, Powerpoint oder gar Visio ist die Flexibilität, die Schnelligkeit im Umsetzen von Ideen und der Möglichkeit unkompliziert neue Konzepte auszuprobieren.

Inspiration Comic: Papier, Bleistift und Fineliner

Ein sehr inspirierender und interessanter Ansatz ist der von T. Scott Stromberg. Zunächst wird mit Bleistift eine grobe Skizze erstellt, die jederzeit noch modifziert werden kann. Wenn man sich für eine Variante entschieden hat, zieht man die wesentlichen Partien und Strukturen mit einem Fineliner nach.

Meine Favoriten sind hier matt kariertes Papier, eine Druckbleistift und ein Pilot Pigment Marker, den ich bei Malstoff.de erstehe. Letzter hat den Vorteil nicht zu verschmieren, nicht zu verlaufen und nicht durch das Papier zu schreiben. Das karierte Papier vereinfacht das Zeichnen von Boxen und Blöcken.

[Mehr zum Thema findet man bei konigi.com. Oder bei www.paperprototyping.com/ und es gibt auch einen A List Apart Artikel über Prototypen auf Papier.]