Infografik: Die Anatomie einer perfekten Website
Drüben im Hubze-Blog hat Scott Ayres die Infografik The anatomy of a perfect website von R.O.I.Media geposted. Ein gelungene Ansammlung und Gegenüberstellung von ganz verschiedenen Aspekten der Website-Produktion.
Wer übrigens solche Infografiken ähnlich gerne mag, wie ich, kann ja auch mal das Pinterest-Board Marketing & Social Media von Priit Kallas abonnieren … darüber bin ich nämlich auf diese Grafik gekommen.
von Matthias Zellmer
Reduziertes Nutzungskonzept beim Künstler Teo Skaffa
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.
von Matthias Zellmer
Mockingbird – Online-Wireframe-Tool
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!
von Matthias Zellmer
iA nennt es: 100% Easy-2-Read
Die international tätige Web-Agentur iA gehört sicher zu den innovativsten Läden was unsere Branche zu bieten hat. Kürzlich haben die Information Architects den Auftritt der ZEIT neu gestaltet und wenn sie die neuste Version ihrer Web Trends Map präsentieren, geht dies auch regelmäßig durch die Blogs der Welt.
Und schon 2006 haben sie in einem Artikel 100% Easy-2-Read veröffentlicht … abgekürzt: 100e2r. Von seiner Aktualität hat dieser Beitrag aber nichts verloren.
Bei 100e2r handelt es sich um einige Dos and Don’ts im Bezug auf die Darstellung von Inhalten auf einer Website. Die iA kritisieren, dass nur all zu oft auf einer Webseite zu viele Inhalte auf zu engen Raum gepackt werden.
Stichpunktartig ihre Kritikpunkte:
- Don’t tell us to adjust the font size
- Don’t tell us busy pages look better
- Don’t tell us scrolling is bad
- Don’t tell us text is not important
- Don’t tell us to get glasses
Als Folge darauf … Fünf einfache Richtlinien:
- Standard font size for long texts
- Active white space
- Reader friendly line height
- Clear color contrast
- No text in images
Die oben aufgeführten Punkte werden auf der Beitragsseite näher erläutert. Eine kurzweilige und lehrreiche Lektüre für alle, die in irgendeiner Form mit der Gestaltung einer Website zu tun haben … ob visuell oder non-visuell.
von Matthias Zellmer
Balsamiq Mockups in der Praxis
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:
von Matthias Zellmer
Mensch-Maschine
Dieser Wochenende findet in Berlin ja das UXcamp statt und Zellmi ist bereits auf dem Weg in den wilden Westen und sicher schon ganz aufgeregt. In diesem Zusammenhang ist mir vorhin ein schönes Video in die Finger geraten. Den ganzen Beitrag lesen »
von Artur Richter
UXcamp – Klassentreffen der Informationsarchitekten
Morgen geht es für mich mal wieder nach Berlin, wo am Samstag und Sonntag das UXcamp stattfindet. UX steht dabei für User Experience. Dieses von mir etwas lax als “Klassentreffen der Informationsarchitekten” betitelte Themen-Barcamp wird sich außer mit den Fragen der Informationsarchitektur (IA) auch mit den anderen Feldern der User Experience beschäftige und … genau so wichtig … eine sicher hervorragende Networking-Plattform für in diesem Feld tätige Menschen bieten. Denn immerhin haben sich für die beiden Tag jeweils 300 Leute angemeldet.
Ich freu mich auf jeden Fall schon sehr und bin extrem gespannt. Denn ich erwarte, dass ich mit einen Kopf randvoll mit neuen Erkenntnissen, Gesichtern und Ideen zurückkommen werde. In jedem Fall werde ich berichten …
von Matthias Zellmer
Pencil Project – Entwurf-Tool als Firefox-Add-On
Pencil Project ist ein Open-Source-Tool mit dem sich Entwürfe von Benutzeroberflächen prototypisch skizzieren lassen. Solche Tools gibt es viele, wie zum Beispiel die lizenzkostenpflichtigen Microsoft Visio, OmniGraffle, ConceptDraw (welches ich benutze) oder Dia, welches ebenfalls Open-Source ist.
Pencil ist als Tool vom Funktionsumfang und von der Bedienung her maximal Durchschnitt und damit für jemanden, der nur gelegentlich mal was skizzieren muss als Alternative zu den oben genannten leistungsfähigeren Tools durchaus annehmbar. Doch was mich an Pencil wirklich beeindruckt hat, ist, dass es, obwohl nur Firefox-Add-On und daher als Instanz des Browsers läuft, wie eine eigenständiges Desktop-Tool daher kommt.
Ein interessantes Konzept wie ich finde. Und es spricht immer mehr dafür, dass der Browser das Betriebssystem der Zukunft sein wird. Zumindest was die Wahrnehmung des Nutzers betrifft. Auch die Lauffähigkeit von solchen Add-On-Tools auf leistungsschwächeren Rechnern wie Netbooks sollte damit gewährleistet sein … inklusive einer weitestgehenden Plattformunabhängigkeit. Zumindest fällt mir so spontan kein relevantes Betriebssystem ein, auf dem der Firefox nicht läuft.
Wem das mit dem Firefox-Add-On aus irgendeinem Grund aber suspekt sein sollte, es gibt Pencil auch als Stand-Alone-Anwendung ohne Firefox für Windows und Linux …
von Matthias Zellmer
Conversational Design Pattern
Design Pattern sind mustergültige Standard-Lösungen für wiederkehrende Entwurfsaufgaben bei der Gestaltung von Benutzeroberflächen wie zum Beispiel Webseiten. Ein einfaches Beispiel ist das Login zu einem zugangsbeschränkten Bereich … hier dem WordPress-Backend:
In diesem Beispiel für ein Design Pattern sind alles nötigen Elemente für einen solches Login vorhanden: Eine Nutzer-Kennung (oft Benutzername oder Mail-Adresse), das Passwort, die Option dich an seinem Rechner nicht immer wieder anmelden zu müssen, das Auslösen der Login-Aktion und zudem noch eine Möglichkeit, an das vergessene Passwort ranzukommen. So ist es beispielhaft und bildet die Grundstruktur für unzählige Login-Bereiche auf zahlreichen Websites, und damit ein Design Pattern. Wenn man sich … bewusst oder unbewusst … an solche etablierten Strukturen hält, dann erspart man sich oftmals einiges an konzeptioneller Arbeit und reduziert die Wahrscheinlichkeit etwas vergessen zu haben.
Wie es nun mal gelernte Praxis ist, haben diverse Experten einzelne Design Pattern immer wieder zu Design Pattern Kategorien eingeordnet. Eine recht neue Design Pattern Kategorie sind dabei die Conversational Design Pattern (CDP). In dieser Kategorie finden sich die Pattern der aktuellen Interaktions- und Kommunikationstools … quasi die Pattern2.0.
Zu diesen Conversational Design Pattern zählt der Grafik-Designer und Creative Director Markus Angermeier u.a. Schnell-Registrationen, Nutzer-Profile und -Galerien, sowie Listen seiner Kontakte und auch Gruppen auf Social Network Sites. Zudem gibt es auch die CDP Social Bookmarking oder den oben in der Artikel-Header-Grafik angedeutete “neuer Star” unter den CDPs Tweet this, der inzwischen nicht nur auf zahlreichen Weblogs … wie auch bei uns … zu finden ist sondern auch bei Xing oder Youtube. Das Tweet-it-CDP ist sehr simple und ein Paradebeispiel für die aktuellen Vorgänge im Web.
Conversational Design Pattern sollten also genauso zum arbeitsalltäglichen Repertoire eines jeden website-konzeptionell tätigen und -gestaltetet Menschen gehören. Leider ist das wohl noch nicht der Fall, denn es gibt noch nicht einmal einen Wikipedia-Artikel dazu. Leider …
von Matthias Zellmer
