I’m Teo Skaffa and I like to draw cats. I also like my beard. So yeah …

Das ist, was man über Teo Skaffa auf seiner Website erfährt. Weiter gibt es darauf aber noch einiges zu entdecken. Neben den Katzenbildern, der extrem pixeligen Textdarstellung, vor allem ein interessantes Website-Nutzungskonzept.

Ich empfinde es als so interessant, da es so reduziert ist. Im Kern sind es folgende Elemente, die auf der Website genutzt werden:

Leider ist die Website komplett in Flash umgesetzt. Aber nachdem was ich am Montag hier gepostet habe, ist es wohl nur noch eine Frage der Zeit, bis solche Website auf Basis von HTML/CSS/JavaScript auftauchen … bzw. entdeckt werden.

Aus der Historie des World Wide Webs ist es gar nicht so selbstverständlich, dass man User etwas genau dort erledigen lässt, wo es vom Kontext her sinnvoll ist. Doch mit dem Selbstverständnis, das mit dem Web2.0 Einzug hielt, ist dies jedoch immer üblicher geworden. Aber machen wir es mal an einem konkreten Beispiel fest.

Will man bei Twitter seine Mail-Adresse ändern, möchte Twitter, dass man dies mit der Eingabe seiner Mail-Adresse bestätigt. Dazu muss man in den Settings-Bereich bei seinem Twitter-Account gehen. Ausschnittsweise sieht das dann so aus:

Um nun die Mail-Adresse zu ändern, klickt man in das entsprechende Feld. Daraufhin öffnet sich direkt darunter das Feld, das die bestätigende Eingabe des Passworts einfordert:

Nach der Änderung der Mail-Adresse und der Eingabe des Passworts, können dann die geänderten Einstellungen gespeichert werden.

Diese Vorgehensweise hat Vorteile gegenüber anderen Lösungen. So weiß der Nutzer immer, was gerade Sache ist. Denn will er zum Beispiel seine Zeitzone oder seine eingetragene Website ändern, verlangt Twitter dazu nicht die Eingabe des Passworts. Auch könnte Twitter sich die Mail-Adressen-Änderung in einem weiteren Schritt bestätigen lassen. Hat der Nutzer aber gerade sein Passwort nicht zur Hand, so muss er den Vorgang abbrechen. Kein großes Drama, aber die sind nur all zu oft nicht nötig, um einen Nutzer zu vergraulen. Und wenn man nicht Twitter ist, und keine so exponierte Stellung unter seinen Wettbewerbern hat, sind es oft gerade diese Kleinigkeiten, die die Nutzerzufriedenheit und somit seine Treue festigen.

Pranav Mistry ist es wichtig, dass Computertechnologien dem Menschen dienen. Er möchte, dass sie uns im alltäglichen Leben immer und überall zur Verfügung stehen. Jedoch sollen wir uns dabei nicht an den Input- und Output-Möglichkeiten der Computer bzw. der Geräte orientieren, sondern sie sich an uns. In seinem TED-Vortrag zeigt er auf wirklich beeindruckende Weise, welche Erfolge er durch seine Forschungsarbeiten am MIT schon erziehen konnte.

Mich hat der Vortag von Pranav Mistry wirklich sehr beeindruckt. Vor allem hat mich beeindruckt, dass als ihn der Moderator am Ende fragt, mit welchen Konzerne er wegen seiner Arbeiten schon in Verbindung steht, er recht schnell über den Kern der Frage hinweg gegangen ist und gleich aufzeigt, dass seine Arbeiten auch für Menschen mit Behinderungen von Bedeutung sind. Schlussendlich machte Mistry deutlich, dass er will, dass seine Arbeiten möglichst zum Nutzen für alle Menschen eingesetzt werden und dass er sie auch als Open Source verbreiten will!

Mehr zu Pranav Mistry und zu seiner Sixth Sense Technologie gibt auf pranavmistry.com und dort auf der zugehörigen Projektseite.

—

Gefunden bei den blogpiloten.de

Im Juli 2008 schrieb Michael Arrington von TechCrunch einen Beitrag, in dem er sich einen Tablet-Computer wünscht, der sich per TouchScreen bedienen lässt und der vornehmlich zum Surfen im Web dienen soll. Seit diesem Beitrag haben wir mehr oder weniger vollständig die Entwicklung des CrunchPads verfolgt.
Im gleichen Beitrag rief Arrington die Entwicklergemeinde und Firmen auf, sich bei ihm zu melden, wenn Interesse daran bestünde, an der Umsetzung eines solchen Geräts mitzuarbeiten. Wichtig waren Arrington von Anfang an ein günstiger Anschaffungspreis (anfangs 200$, später 300$) und dass das Gerät so weit wie irgend möglich Open-Source ist.

In den letzen eineinhalb Jahren wurde aus der ersten Idee ein Gerät, dessen Hardware und User-Interface sich laut Arrington wirklich sehen lassen konnten und das ersten Test-Nutzer wirklich Freude zu bereiten schien. Für den 20.November war die Einführung des CrunchPads geplant, die Massenproduktion sollte 2010 beginnen.
Eine Vielzahl von Kooperationspartner wie zum Beispiel Intel unterstützen das Projekt, um einen günstigen Anschaffungspreis zu ermöglichen und dem TechCrunch-Team den Vertrieb des CrunchPads so einfach wie möglich zu machen.

Am 17.November wurde dann das vorläufige Ende des CrunchPads besiegelt: Die Partner-Firma Fusion Garage, die schließlich die Hardware-Entwicklung übernommen hatte, benachrichtigte TechCrunch, dass die Anteilseigner der Firma beschlossen hätten, das Gerät ohne weitere Beteiligung von TechCrunch vertreiben zu wollen.
Aber sowohl das geistige Eigentum am CrunchPad, wie auch die Marke CrunchPad gehören TechCrunch. Doch dies reicht scheinbar rechtlich nicht aus, um das Gerät seitens TechCrunch mit einem anderen Partner weiter produzieren zu dürfen. Ebenso wenig gestattet es die rechtliche Lage wohl (zum Glück) Fusion Garage, das CrunchPad ohne Einwilligung von TechCrunch weiter zu produzieren.

In seinem Beitrag zum Scheitern des CrunchPads bringt Arrington immer wieder seine Enttäuschung und Trauer darüber zum Ausdruck, dass ein Projekt, für das sich so viele unterschiedliche Partner ohne Profitgedanken eingebracht und begeistert haben, an den (ich nehme doch einmal stark an monetären) Bestrebungen der Anteilseigner von Fusion Garage scheitert.
Und das sehe ich ganz genauso wie er!

Vor zwei Tagen wurde das kostenfreie Online-Wireframe-Tool Mockingbird gelauncht. Ich hab es heute Morgen ein wenig getestet und muss sagen, dass ich echt schwer beeindruckt bin.

Mockingbird selbst spricht von “Wireframes on the fly”, und genau das macht dieses Tool. Und das sehr überzeugend. Manchmal wundert man sich schon, was so eine Web-Applikation inzwischen alles kann. Drag’n'Drop, Tastaturkürzel wie Strg+C und Strg+V, Elemente aneinander ausrichten und vieles mehr, verleiht dem Nutzer hier ein echte Desktop-Feeling.

Auf die Schnelle habe ich mal den oberen Teil dieses Blog nachgebaut, die man natürlich per URL verbreiten oder per iframe anbinden kann:

Mockingbird stellt die zentralen UI-Elemente einer Website zur Verfügung und lässt den Nutzer mehrere Seiten pro Projekt anlegen. Diese können dann auch untereinander verlinkt werden. Dazu zieht man die Page aus der Box oben links auf den Link. Fertig. Das Ergebnis kann man sich dann im Preview-Modus (siehe oben) ansehen. Weiterhin lassen sich einzelne Elemente gruppieren und in der Größe anpassen. Leider kann man bei Text-Elementen nur die Schriftgröße anpassen und keine Auszeichnungen wie fett oder kursiv vornehmen. Auch wäre es nett, wenn man in einem Text auch mal einen Link setzen könnte. Kann ja noch kommen.

Kleines Detail noch am Rande. Vor ein paar Tagen habe ich auf dem Blog uxzentrisch an einer Diskussion über Anmelde- und Registrierungselemente teilgenommen. Interessanterweise ermöglicht Mockingbird das Anmelden bzw. Registrierungen genau in der dort von mir vorgeschlagenen Art und Weise. Dort bekommt man erst einmal nur ein Formular und wenn die eingegebene Mail-Adresse unbekannt ist, wird das Anmeldemodul um ein Feld zu Passwortbestätigung erweitert und somit zur Registrierung. Sehr innovativ, wie ich finde.

Allgemein macht Mockingbird auf mich schon einen sehr ausgereiften Eindruck und verblüfft durch sein ausgereifte Interface. Respekt!

So angetan wie von Balsamiq Mockups war ich ewig nicht mehr von einem Stück Software. Wie schon in einem früheren Beitrag beschrieben, kann man damit Wireframes skizzieren, die ein bisschen das Look & Feel von auf Papier geskribbelten Wireframes haben. Die hat den Vorteil, dass sie bei der Präsentation nicht aus Versehen oder Unkenntnis für Layout-Entwürfe gehalten werden.

Diese Tatsache finde ich gut und praktisch, aber wirklich begeistert bin ich aus anderen Gründen. Zum einen ist Balsamiq Mockups ein wirklich sehr gut durchdachtes Programm, das das was es tun soll, wirklich sehr gut tut. Hört sich selbstverständlich an, ist es aber leider nicht. Die Bedienung ist so einfach und gut zu handhaben, dass es eine wahre Freude ist, damit seine Wireframes zu entwickeln. Aber das zeig ich jetzt am besten mal an einem kleinen Anwendungsbeispiel:

Horizontales Navigationsmenü

Ein horizontales Navigationsmenü zu skizzieren, ist ein typischer Anwendungsfall in einem Wireframe. Dazu zieht man in Balsamiq Mockups per Drag-and-Drop das Element “Button Bar / Tab Bar” auf die Arbeitsfläche. Diese sieht dann folgendermaßen aus:

Die Eigenschaften-Box, die hier unter der Menü-Leiste dargestellt ist, zeigt immer die Bearbeitungs- und Einstellungsmöglichkeiten des aktiven Elements an. Wenn man, wie in diesem Beispiel getan, mit der Maus drüber fährt, wird diese Box aktiv dargestellt und man die dort zur Verfügung stehenden Möglichkeiten nutzen. Hier sieht man etwa, dass das Menü-Feld “One” hervorgehoben bzw. aktiv ist.

Um jetzt die Default-Werte in der Menü-Bar zu ändern, macht doppelklickt man auf das Element und schon kann man die Werte komma-separiert ändern.

Das sieht dann so aus:

Natürlich kann man nun auch das aktive Menü-Feld wechselt:

Was dann, wenn man nun z.B. “Zwei” auswählt, das Folgende zum Ergebnis hat:

Wie man an diesem einfachen Anwendungsbeispiel vielleicht schon sehen kann, ist Balsamiq Mockups ein sehr durchdachtes und gut zu handhabenden Tool. Doch wie geschrieben, dies ist nur ein ganz, ganz einfaches Beispiel zur Nutzung des Tools. Natürlich ist der Zweck des Tools z.B. eine Webseite zu skizzieren … wie etwa diese:

Auf breathingearth.net wird eine optisch schicke und inhaltlich interessante Simulation dargestellt, die quasi in Echtzeit zeigt, wie viel CO2 gerade emittiert und wie viele Menschen gerade geboren werden bzw. sterben. Das Ganze bezogen auf die einzelnen Länder der Erde wie auch global.

Ich finde die Simulation echt gelungen umgesetzt und auch im Bezug auf das Informationsdesign ein echtes Schmankerl. Neunzehn weitere inspirierende Daten-Visualisierungen findet man auf singlefunction.com.

Via abotis@twitter

Ach! Wie schön! Von Zeit zu Zeit, die Geschichtswerkstatt der Stuttgarter Zeitung ist für den Grimme Online Award 2009 in der Kategorie “Wissen und Bildung” nominiert. Das freut uns nicht nur für die Stuttgarter Zeitung … die die tolle Idee hatte, Stuttgarter Stadt-Geschichte anhand von Fotos, Dokumenten, Erzählungen und Videoaufnahmen im Web zusammenzutragen, dort auch darzustellen und mit Hilfe des Stadtarchivs Stuttgart auch nachhaltig zu bewahren … sondern auch für uns. Wir haben nämlich konzeptionell helfen dürfen, die Idee webfähig zu machen und dann auch grafisch zu gestalten.

Auf der Nominierungsseite heißt es:

“Von Zeit zu Zeit” wurde als Geschichtsportal zum Mitmachen von der Stuttgarter Zeitung initiiert. Kooperationspartner sind das Stadtarchiv und die Volkshochschule Stuttgart. Neben Beiträgen, die von der Redaktion zur Verfügung gestellt werden, sind alle interessierten Nutzer – ob Privatpersonen, Vereine oder Schulklassen – eingeladen, die “Geschichtswerkstatt Stuttgart” mit eigenen Fotos, Filmen und Texten zu bereichern. Nach Themen, Orten oder Zeiten strukturiert soll sich so ein umfassendes und lebendiges lokalhistorisches Portrait entwickeln – vom Beginn des 20. Jahrhunderts bis heute.

Das ist mal wirklich eine schöne Anerkennung für die eigene Arbeit. Ich freu mich :-)

Wenn das mal kein charmanter Wetterdienst ist, weiß ichs auch nicht. Kurt Riedi und Steffi Gloor haben sich daran gemacht, bekannt langweilige Wettersymbole mit ungewohntem Bildkonzept fotografisch neu zu interpretieren. Auf der Startseite kann man aus einer Anzahl von Städten wählen (Stuttgart ist leider nicht dabei, grmpf) oder von hier aus direkt alle Wetterlagen nacheinander anschauen. “thunder storms” mag ich am liebsten.

via swiss-miss

Gestern war ich auf der Suche nach einem brauchbaren UND kostenlosen Grafikeditor für OSX. Leider ist das Ergebnis ausgesprochen nüchtern ausgefallen. Mit Ausnahme von GIMP, das mir eigentlich schon zu überladen ist, konnte mich kein Tool wirklich überzeugen.

Da liegt es natürlich nahe, sich mal bei der Webdiensten umzuschauen. Online-Bildbearbeitung gibt es mittlerweile ja haufenweise: Picnik, FotoFlexer, Phixr und wie sie nicht alle heißen waren mir bisher aber immer zu glossy und verspielt, was sicherlich daran liegt, dass Grafikdesigner und deren Arbeitsweise nicht gerade im Fokus dieser Dienste stehen.  Photoshop.com dagegen ist meiner Meinung nach lahm und irgendwie zu “ganzheitlich”. Warum muss Bildbearbeitung immer in Kombination mit einer aufgeblähten Bildverwaltung daherkommen?

Einen anderen Weg beschreitet da pixlr. Der Editor, für dessen Nutzung keine Anmeldung erforderlich ist, besticht durch ein übersichtliches und sauber aufgebautes Interface, das mit seinen schwebenden Paletten an das Bedienkonzept professioneller Grafikprogramme anknüpft. Pixlr unterstützt Ebenentransparenz, einige Ebeneneffekte und -modi, bietet Effekt- und Einstellungsfilter und eine rudimentäre Textfunktion für die ich mir dringend ein besseres Antialiasing wünschen würde. Das alles ist für sich genommen sicher nichts Spektakuläres, funktioniert aber derart flüssig und smooth dass es eine wahre Freude ist -  sogar einige der gewohnten Tastaturkürzel wurden implementiert.

Ein absolutes Killerfeature für alle Nutzer des Flash10-Plugins ist jedoch die Möglichkeit Bilddateien zu bearbeiten, ohne diese vorher Uploaden zu müssen. Ein immerhin 5 MB großes Digitalfoto ließ sich ohne erkennbare Verzögerung öffnen und direkt bearbeiten. Sauber. Damit gehört das bisher größte Manko sämtlicher Online-Editoren endlich der Vergangenheit an.

Sicherlich gibt es noch einige Dinge zu verbessern, die Unterstützung der OS-Zwischenablage ist hier besonders wichtig und ein brauchbarer Weichzeichner wäre sicherlich auch nicht verkehrt.

Der erste Eindruck von pixlr ist dennoch durchweg positiv. Gut gemacht und weiter so.