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
Anne-Kathrin Merz über die Leiden der Web-Schaffenden
Was erwartet den neuen Website Betreiber eigentlich?
Diese Frage stellt Anne-Kathrin Merz auf ihrem Blog mediamind in ihrem Beitrag Pflichtveranstaltung für alle diejenigen an den Anfang aller Überlegungen im Bezug auf die Nutzung des Webs, indem sie sagt:
Diese Frage, so denke ich mir, muss lückenlos geklärt sein, bevor irgendein erster Schritt getan und ein Gedanke an einen Internetauftritt verschwendet wird.
Ein lesenswerter Artikel, und zwar nicht nur für die Menschen, die im Endeffekt eine Website gestalten bzw. umsetzen. Sondern auch für alle, die mit dem Gedanken spielen, einen Dienstleister eben mit einer solchen Aufgabe betreuen wollen. Anne-Kathrin hat für die potentiellen Website-Betreiber auch ein Liste mit aufklärenden Punkten zusammengestellt:
- Wer eine Website möchte, braucht eine Strategie
- Die Konkurrenz im Web ist noch größer als auf der Straße
- Der Besucher klickt weg, wenn es ihm nicht gefällt und es wird ihn niemand aufhalten können
- Pro Suchanfrage gibt es nur einen Platz 1 bei Google
- Suchmaschinenoptimierung und Marketing geht etwas an
- Ein CMS macht es einfacher, – mehr aber auch nicht
- Inhalte schreiben sich nicht von alleine
- ein erfolgreicher Internetauftritt bedarf einer gewissen Pflege
- ein lebendiger Internetauftritt bedeutet Verantwortung
- Usability ist eine Notwendigkeit, positive User Experience ist ein Mehrwert, fehlt beides, ist es ein Killer
Interessant finde ich auch den zugehörigen Kommentar von Wolfgang:
Hört sich doch auch überall so an, als ob es (fast) nichts kostet. Der Web-Editor,die Bildbearbeitung, das CMS …OK, das Hosting kostet ein paar Euro im Monat. Klingt doch toll,oder? Jeder fast umsonst im Internet.
Du hast schon recht, kaufmännisch sauber gerechnet kostet auch eine kleine Web-Site sauber aufgebaut (egal ob nur mit kundigen Angestelten oder mit externer Hilfe) eine hohe 4-stellige Summe. Punkt.
Anne-Katrin und Wolfgang – wie recht ihr doch habt.
Via patrics@twitter
von Matthias Zellmer
Artikeltipp: Basiskoffer für Web-Projekte
Einen wirklich guten Artikel darüber, was man grundlegenden bei den Meilensteine eines Web-Projekts zu beachten hat, hat neulich Achim Schaffrinna in seinem aktuell für den Grimme Online Award nominierten Design Tagebuch veröffentlicht.
Er verdeutlicht seine Aussagen anhand des Koffer-Packens für eine Reise. Dabei steht das Schuhwerk für den Aufbau der Website, die Sonnenbrille für das Corporate Design, die fein säuberlich eingepackte Oberbekleidung für Hierarchien, Klassen und Abstände, das Taschenmesser für die Usability und das Navigationskonzept wird abschließend von mobilen Navigationsgerät repräsentiert.
Doch wie Achim diese dinglichen Aufhänger in einen gut herausgearbeiteten Kontext mit diesen Bausteinen eines Web-Projekts in Einklang bringt, lest ihr am Besten bei ihm selbst … im Artikel Basiskoffer für die Reise durchs Netz.
von Matthias Zellmer
Was kann CSS3?
Ich weiß noch, welch intensives Aha-Erlebnis es war, als mir einst klar wurde, dass so genanntes Tabellen-Layout nicht (mehr) nötig ist, um einer Website eine annehmbare Struktur und Optik zu verpassen. Damals hatte mich gerade erstmals so richtig mit der Formatierungssprache CSS beschäftigt.
Inzwischen sind wir und vor allem moderne Browser weitestgehend bei CSS2.1 angekommen und CSS3 ist in der Entwicklung. Was einmal mit CSS3 möglich sein wird, kann man sich auf noupe.com ansehen: CSS3 Exciting Functions and Features: 30+ Useful Tutorials.
Was heute schon möglich ist, kann man sich recht übersichtlich in der Browserkompatibilitätstabelle von css4you.de ansehen. Am Ende der Seite kann man weitere Browserversionen zur Vergleichstabelle hinzufügen bzw. ausblenden.
von Matthias Zellmer
Grimme Online Award 2009 – Nominierung für “Von Zeit zu Zeit”
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 :-)
von Matthias Zellmer
sevenload überarbeitet Videoplayer
Die Kölner Web2Null-Medien-Plattform sevenload hat gestern nun auch offiziell in ihrem Blog verkündet, dass sie seit dem Wochenende einen neuen Player einsetzen. Neben der leicht veränderten Optik, sind vor allem folgende Änderungen bzw. Erweiterungen vorgenommen worden:
- In HD-Qualität vorliegende Videos können nun auch in dieser Qualität abgespielt werden
- Videos können nun auch in Szenen unterteilt und somit auch selektiv angesehen werden
- Mittels der Funktion Autoplay kann der Nutzer entscheiden, ob die Videos nach dem Aufrufen direkt loslaufen sollen oder erst aktiv mit dem Play-Button gestartet werden. Schick ist dabei, dass man das nicht tief versteckt in den Einstellungen machen muss.
- Für ungestörten Video-Genuss sorgt die Ausblenden-Funktion. Nach wenigen Sekunden verschwinden die Steuerelemente und erscheinen wieder, wenn man aktiv die Maus über die Videofläche bewegt.
Neben einer Reihe weiterer Punkte, finde ich auch die Unterteilung in Watchlist und Playlist interessant. Playlisten können angemeldete Nutzer dauerhaft anlegen. In Watchlisten kann jeder Videos sammeln, die er in der Folge ansehen will. Eine sinnvolle Unterteilung wie ich finde. Denn das speichern in einer Playlist bringt irgendwie immer auch einen gefühlten Verwaltungsaufwand mit sich. So eine Watchlist ist da schon etwas “unbürokratischer”.
Alles in allem gefallen mir die eher unaufgeregt wirkenden Änderungen auf den ersten Blick ganz gut. Könnte sein, dass ich jetzt doch mal öfters bei sevenload vorbeischaue …
von Matthias Zellmer
Metaphern-Design
Gerne wird das Web als ein Spiegel der Realität bezeichnet. Wenn man dieser Metapher folgen will, dann haben wir es aber mit einem ganz fiesen Spiegel zu tun. Da wo sich eine echter Spiegel darauf beschränkt, die Realität einfach nur spiegelverkehrt darzustellen, da reflektiert das Web wohl eher ihre Quintessenz. Um da etwas Halt und Orientierung zu liefern, setzen viel Website-Designer gerne Metaphern ein.
Ein Beispiel
Gerade im frühen Web gab es viele Versuche einen Web-Shop als ein Ladengeschäft in einer 3D-Welt darzustellen. Gerne wurde das als toll empfunden. Aber leider scheiterten diese 3D-Shops in aller Regel an Problemen mit der Bedienung. Somit wurden diese Metaphern zwar gut verstanden, durch sie ist jedoch meist auch ein massives Usability-Problem entstanden.
Ähnliche Probleme haben viele Metaphern im Web. Andere haben sich wiederum etabliert. Aber eher in den Details. So ist zum Beispiel der Warenkorb in Web-Shops ja kein echter Korb, sondern nur eine Metapher für einen solchen.
Auch haben sich Karteikartenreiter zu einem gerne genutzten Navigationselement entwickelt. Oder man findet hier und da auch mal die Optik einer Haftnotiz, um zum Beispiel an einen Termin zu erinnern. Das Abspielen von Musik wird gerne mit der Optik eines CD-Spielers veranschaulicht und so weiter und so fort.
Metaphern-Typen
Im Kern unterscheidet man drei Typen von Metaphern:
- Visuelle Metaphern: Sieht aus wie …
- Funktionale Metaphern: Macht das gleiche wie …
- Strukturelle Metaphern: Ist aufgebaut wie …
Die oben beschriebene Haftnotiz ist somit in erster Linie eine visuelle Metapher. Jedoch sollte darauf geachtet werden, dass sie auch ihrer gelernte Funktion gemäß eingesetzt wird, um nicht missverstanden zu werden. Dann kann sie, wie jede andere Metapher auch, zu einem Problem werden. Denn die Nutzer einer Website handeln vorzugsweise intuitiv und folgen gelernten Mustern. So werden wohl Nutzer davon ausgehen, dass ein Dreieck bei dem eine Spitze nach rechts zeigt und das in einem Audio-Video-Kontext steht, etwas startet, das abgespielt wird. Öffnet sich nach einem Klick auf ein solches Symbol zum Beispiel das Einstellungen-Menü, so wird der Nutzer im besten Fall irritiert sein. Somit ist auch klar, dass der Kontext in dem eine Metapher eingesetzt wird, in sich stimmig sein muss.
Daraus folgt
Metaphern sind meiner Meinung nach ein mächtiges Web-Design-Instrument. Jedoch nur, wenn sie erwartungskonform im richtigen Kontext und ihrer Funktion in der realen Welt entsprechend eingesetzt werden. Darum rate ich gerade beim Einsatz von Metaphern zu besonderen Vorsicht: Eine falsch oder missverständlich eingesetzte Metapher kann schnell zu Problemen mit der Usability führen und die Nutzer abschrecken.
von Matthias Zellmer
Relaunch bahn.de
Lange erwartet, ist sie endlich da: Die überarbeitete Website der Bahn. Am Wochenende, also im Gleichklang mit dem jährlichen Fahrplan-Wechsel und der obligatorischen Preiserhöhung, hat die Bahn ihre Website relauncht.
Auch wenn Achim Schaffrinna vom Design Tagebuch nach seinem ersten Besuch einen guten Eindruck hat, finde ich, dass wir da mal wieder einen typischen Relaunch wie aus dem letzen Jahrhundert vorgesetzt bekommen haben.
Gut, man setzt jetzt AJAX ein und etwas besser zu bedienen ist die Website immerhin doch. Aber im Großen und Ganzen muss ich eher Christian Menschel recht geben. Wirklich gestaltet wirkt die Website nicht. Sie wirkt zusammengestückelt. Wie ein typischer Kompromiss bei dem die Marketing-Abteilung zu viel Mitspracherecht hatte.
Warum muss ich mich eigentlich bei einer Site wie der der Bahn, bei der wohl die große Mehrheit der Nutzer vor allem eins will, Verbindungen suchen und ggf. daraufhin ein Ticket kaufen, so übergebührlich von netten Damen angrinsen lassen? Auf der Startseite von bahn.de sollte meiner Meinung nach mitten drauf ein großzügiges Abfrage-Formular sein. Dann sollte drumherum noch genug Platz für weiterführende Teaser sein.
Ein kleiner Trost hingegen ist, dass man auf den Unterseiten immer an der gleichen Stelle die Symbole für die vier zentralen Abfrage findet und somit immer schnell eine Suchanfrage stellen kann. Auch wenn bis auf die Hauptnavigationspunkte die Formularfelder, wie die meisten Elemente der Website, zu klein dimensioniert sind. Ebenso zu klein wie die Formularfelder ist allgemeine Text-Schrift. Und wenn man den Text über die im Kopfbereich angebotene Funktion vergrößert, dann geht die Bahn wohl davon aus, dass meine Augen sich nach dem nächsten Klick auf wundersame Weise verbessert haben. Denn dann hat man wieder die Original-Schriftgröße vor Augen.
Mein Fazit nach den ersten Minuten auf bahn.de: Die Website wurde verbessert, aber sie wirkt gerade im Bezug auf die User Experience alles andere als bewusst gestaltet. Für ein Unternehmen, welches am liebsten seinen gesamten Ticket-Verkauf vom Schalter an den Bahnhöfen weg haben möchte, hätte ich mir mehr Know-How in Sachen User-Interface-Gestaltung erwartet.
von Matthias Zellmer
Was zum Teufel ist User Experience?
Mein Telefon braucht nicht schön zu sein oder so. Man muss damit Telefonieren können … Punkt aus! –– Okay, dann können wir ihr jetziges Gerät ja gegen ein baugleiches mit einem rosa Plüsch-Bezug austauschen. –– Sind sie verrückt! Sowas kommt mir nicht ins Haus!
Dieses fiktive Gespräch habe ich so ähnlich mal auf einer Veranstaltung zum Thema Usability in einem Vortrag über User Experience (UX) gehört. Es ist etwas überspitzt formuliert, da es als Anekdote eine Art “Hallo-Wach!”-Effekt bei den Zuhörern haben sollte. Aber es zeigt schon mal, dass UX nicht mit einem hübschen Design gleichzusetzen ist.
Hinter UX steht ein breiter interdisziplinärer Ansatz. Wenn eine Website als Beispiel optisch gefällt, dann ist das der UX erst einmal nicht abträglich. Aber das Bemühen um eine optisch ansprechende Website kann wiederum der Usability abträglich sein. Wenn etwa durch ein in der CI festgeschriebenes Gestaltungsraster inhaltlich zusammenhängenden Elementen nicht zusammen dargestellt werden können, dann kann dies die Gebrauchstauglichkeit, aber auch die Gebrauchsfreude einschränken, weil man dadurch einfach nicht zu Potte kommt. Und wenn auf der anderen Seite eine gut bedienbare Website die Augen quält, dann macht deren Nutzung auch kein Spaß.
UX steht also sowohl mit der Usability wie auch mit der Gestaltung in einem direkten Zusammenhang. Aber auch solche Aspekte, wie die Reaktionszeit beim Seitenaufbau, der angemessene Einsatz von multimedialen Elementen und natürlich auch von Werbeelementen stehen in einem Kontext mit der UX.
Im Kern geht es bei der UX im Web-Bereich um eine gute … ein besseres bzw. wertfreieres Wort fällt mir dazu nicht ein … also um eine gute Gestaltung von User Interfaces. Denn nichts anderes sind moderne Webseiten in der Regel. Aber “gut” ist hier auch im Sinne von zielführend und dem Nutzer einen Mehrwert bietend gemeint. Denn der oft im der UX in Verbindung gebrachte “Joy of Use” sollte nicht unbedingt als Spaß an der Nutzung missverstanden werden. Es kann auch sehr befriedigend sein, wenn man einfach nur schnell an eine gesuchte Information kommt.
Wie schlecht sich die UX in ein Bewertungsraster pressen lässt, zeigt auch ein schöner Spruch, der im Bezug darauf die Runde macht:
Listen to your users, but ignore what they say.
Heißt: Deine Nutzer werden dir nicht sagen können, was sie im Bezug auf deine Website von dir erwarten, aber wenn du aufmerksam bist, wirst du es schnell herausfinden können.
von Matthias Zellmer
Neuer Kopf bei Youtube
Youtube hat sich einen neuen Kopfbereich gegönnt. Dabei haben sie sich von der Reiter-Navigation getrennt und dadurch die Höhe des Kopfs um gut ein Drittel reduziert. Damit setzen sich die Renovierungsmaßnahmen [1] [2] bei Youtube kontinuierlich fort.
Der Weg, den Youtube hier geht, ist ein anderer, als den viele gewohnt sind. So nach und nach wird eine funktionierende Site an neue oder erweiterte Bedürfnisse oder Vorstellungen angepasst. Der Normalfall dürfte immer noch der große Relaunch-Vorschlaghammer sein. Auch das ist wohl Web2.0, oder?
von Matthias Zellmer
