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
Seiten-Preview-Leiste bei Tchibo
Gerade bin ich über ux·zentrisch auf eine interessante Art aufmerksam geworden, wie man die Navigation von großen, also langen Seiten, für den User übersichtlicher machen und ihn dadurch unterstützen kann: mit einer Seiten-Preview-Leiste.
Tchibo setzt eine solche Leiste in ihrem Online-Shop ein. Scrollt man dort aus dem sichtbaren Bereich heraus, so erscheint auf der rechten Seite eine Leiste mit einem Positionsrahmen, ähnlich wie man ihn von den Drei-Monatskalendern kennt, wie er in vielen Büros seit Jahrzehnten zu finden ist. Dies Positionsrahmen kann man auch zum scrollen verwenden und auf der Leiste kann man grob erahnen, wo ein gesuchtes Produkt sein könnte. Dies ist auch interessant, da Tchibo ihre Seite jede Woche, entsprechend der ebenfalls in diesem Rhythmus wechselnden Themenwelt, neu gestaltet und sich der User in jeder Woche dort neu orientieren muss.
Auf ux·zentrisch hat Martin Gude in diesem Artikel auch darauf hingewiesen, dass Googles What do you love? auf der linken Seite eine vergleichbare Funktion nutzt … jedoch ohne Vorschau.
von Matthias Zellmer
Usability Test Video auf UI-Check
Usability ist mittlerweile ein durchaus gut eingeführter Begriff im Web. Auch ist es bei vielen Auftraggebern angekommen, dass eine gute Usability den entscheidenden Unterschied im Vergleich mit den Wettbewerbern ausmachen kann. Darum gehört es zu einem halbwegs ernstzunehmenden Projekt einfach dazu, dass man die Usability bzw. die gesamte Nutzeroberfläche (UI – User Interface) testet. Wie so ein Test aussehen kann, wird auf der Website UI-Check.com recht anschaulich gezeigt:
via netzwertig.com
von Matthias Zellmer
Lesetipps: Drei Artikel um den User zu erfreuen
Um Ostern herum sind bei mir im RSS-Reader mal wieder einige Artikel aufgelaufen. Darum habe ich mir heute morgen mal wieder etwas Zeit genommen, um auf den aktuellen Stand zu kommen. Dabei sind mir u.a. drei interessante Artikel aufgefallen, die ich mal großzügig in die inhaltliche Schublade “User friendly” stecken würde.
Auf ux·zentrisch habe ich den Beitrag 7 Best Practices-Regeln für die Renaissance der OnePage-Websites von Tobias Jordans mit großem Interesse gelesen. Er beschäftigt mit dem Phänomen der Einseiten-Websites und worauf bei deren Erschaffung zu achten ist.
Anne-Kathrin Merz hat sich auf ihrem Blog medamind mit dem Themenkomplex beschäftigt, dass der User trotz vermeintlich bester Instruktionstexte die Website einfach nicht verstehen will bzw. sie schlichtweg falsch benutzt. In solchen Fällen spricht der Experte gerne mal vom DAU … dem Dümmsten Anzunehmenden User. Doch Anne-Kathrin Merz kontert: Es hat mit Intelligenz nichts zu tun.
Ein eher exotisch anmutendes Thema beschreibt Ulf Schubert im User Experience Blog, indem er wiedergibt, welche Erfahrungen mit Usability Testing Katrin Proschek (Georg-Simon-Ohm Hochschule Nürnberg) in Äthiopien gemacht hat. Sie hat diese in einem Vortrag auf dem UX Stammtisch Franken vorgestellt.
von Matthias Zellmer
SEO: Performance neues Ranking-Kriterium bei Google
Da ist mir gerade eine tolle Nachricht via uxzentrisch.de bzw. RSS-Reader rein geflattert: Für Google ist die Performance einer Website jetzt auch ein Ranking-Kriterium. Nachzulesen im Offiziellen Google-Blog.
Ich freue mich darüber, weil das im Umkehrschluss bedeutet, dass gut gecodete Websites, und hiermit dann vor allem auch sauber implementierte Systeme, eine Grundvoraussetzung fürs gut bei Google gefunden werden sind. Und ich habe in den vergangenen Jahren immer wieder erlebt, dass Website-Betreiber immer gerne bereit sind, in die Suchmaschinenoptimierung (SEO) Geld und Zeit zu investieren. Wenn sich das also herum spricht, kann das nur zu einem Qualitätsschub fürs Web bedeuten.
Auch bei der CMS-Auswahl für die eigenen Web-Projekt mit SEO-Anspruch, sollten man nun unbedingt auch auf die Code-Qualität des Systems achten. Denn gut implementierte Systeme, sind auch schneller und damit performanter.
von Matthias Zellmer
Usability? User Experience? Das Flaschenbeispiel
Es ist nicht einfach solche Sachverhalte wie Usability oder User Experience zu erläutern. Darum bin ich immer ganz froh, wenn ich im Bedarfsfall ein griffiges Beispiel zu Hand habe, um meinem Gegenüber zumindest eine grobe, wenn auch oft vereinfachte Vorstellung von einem neuen bzw. komplexen Sachverhalt geben zu können.
Bei für uns Web-Leuten wichtigen Themen wie Usability und User Experience ist dies das Flaschenbeispiel. Eigentlich müsste es ja Flaschen-Verschluss-Beispiel heißen, aber da sollen sich andere drüber streiten, ich erläutere es lieber:
Ein Schraubverschluss ist ein schönes Beispiel für eine gute Usability beim Öffnen einer Flasche. Das Öffnen einer Flasche mit Schraubverschluss geht schnell und einfach, und die Flasche lässt sich sogar ziemlich gut wieder verschließen. Das Gegenteil ist beim Korken der Fall. Man braucht extra einen Flaschenöffner, die haushaltsüblichen Modelle bringen regelmäßig Menschen zur Verzweiflung, und das Wiederverschließen ist auch so eine Sache für sich. Nichtsdestotrotz punktet der Korken gerade bei Wein und seinen Liebhabern, und wenn man so will, somit auch in Sachen User Experience. Eine gute Kombination aus guter Usability und User Experience beim Flaschenverschluss findet sich bei der Bügelflasche. Sie ist schnell und mit eine besonderes “ploppigen” Erlebnis zu öffnen und trotzdem gut wieder verschließbar.
Wenn man jetzt noch will, kann man das Beispiel auch herbeiziehen, um die finanziellen und weitere Aspekte des Thema zu beleuchten, wie etwa die Haltbarkeit, Frische und Aroma des Flascheninhalts. Womit man schnell beim Thema (zielgruppenspezifischem) Mehrwert ist. Ein zentrales Kriterium, gerade auch wenn es um die Gestaltung und Entwicklung von Websites geht.
von Matthias Zellmer
Usability: Gestaltgesetze der Wahrnehmung
Bei der Gestaltung von Informationsangeboten im Web entscheiden oft Nuancen darüber, ob der gewünschte Informationsfluss zum Nutzer funktioniert und damit das Ziel einer Webseite erreicht wurde. Gerade der fast schon klassische Spalten-Aufbau von Websites bietet hierbei einige Fallstricke. Da beziehen sich oftmals Inhaltselemente aufeinander, die so ungeschickt platziert sind, dass der Nutzer diesen Bezug gar nicht wahrnimmt. Auch zerreißen Werbeelemente, die ja unbedingt im sichtbaren Bereich einer Webseite zu platzieren sind, den Informationsfluss oder das grundlegende Gestaltungsmuster einer Website funktioniert auf einigen ihrer Seiten und auf anderen nicht.
Einen guten Orientierungspunkt für Web-Gestalter, die solche Fallstricke vermeiden wollen, soweit ihnen das die Projektumstände das möglich machen, sind die Gestaltgesetze der Wahrnehmung. Auf Webmasterpro.de gibt es dazu eine interessante Artikelsammlung, in der unter anderem solche Gesetze wie das Gesetz der Nähe, Gesetz der Ähnlichkeit oder Gesetz der Geschlossenheit.
Schon die Berücksichtigung dieser drei Gestaltungsrichtlinien kann im Alltag schon sehr helfen, Informationsangebote so zu strukturieren, dass zusammengehörende Elemente auch als zusammengehörig wahrgenommen werden. Oft hilft es auch, sich in seinem Bürostuhl einfach mal zurückzulehnen und das “Bild”, dass die gestaltete Webseite abgibt zu betrachten und dabei möglichst nicht auf die konkreten Inhalte zu achten. Gibt es störende Elemente zwischen den zusammengehörigen Elementen? Nimmt man so zu große oder zu kleine Weißräume zwischen den Elementen wahr? Wie wirkt sich das Dummy-Element des Werbebanners auf die Wahrnehmung der restlichen Inhalte aus?
Achtet man nun noch auf etwas auf eine gute Typologie, bringt genug Mut zu Weißräumen auf und wählt das passende Bildmaterial aus, so sind viele der grundlegenden Fallstricke bei der Gestaltung von Informationsangeboten im Web schon weitestgehend umschifft. Wenn man jetzt noch mit etwas gesundem Menschenverstand an das jeweilige Screendesign herangeht, sollte die Gestaltung einer brauchbaren Website kein Hexenwerk mehr sein.
von Matthias Zellmer
Web-Interface-Regel: Lass sie es vor Ort tun
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.
von Matthias Zellmer
Morgendlicher Web-Spaziergang
Was ich heute Morgen gemacht habe, prägte in ähnlicher Form irgendwann einmal den Begriff “durchs Web surfen”. Mit meinem RSS-Reader als Ausgangspunkt, habe ich mich durchs Web treiben lassen. Hier die Wegpunkte meines Web-Spaziergangs:
Mein RSS-Reader führte mich zuerst zum Dr. Web Autorenwettbewerb, genauer gesagt zum heutigen Beitrag Das Kaufhausbummeldesign – Wie der Alltag Ihnen bei Design-Ideen hilft. Besonders gut hat mir darin die Metapher “Das Supermarktregal – auf Augenhöhe sein” gefallen. Damit wollte der Autor Björn Dammann noch mal klar machen, dass das jeweils Wichtigste auf jeder Seite auch wirklich “auf Augenhöhe” platziert werden soll. Im Web ist das: Sichtbarer Bereich, Mitte. Eine Anforderung, die das nur all zu oft uniformierte Design vieler Websites nur bedingt bedienen kann. Wir setzen darum immer häufiger auf das Inhaltselement der Bühne.
In dem Artikel wird auf savethechildren.de hingewiesen, mein nächster Anlaufpunkt. Dies ist eine Kinderrechtsorganisation, die sich Themen verschrieben hat, wie weltweit das Überleben und die Gesundheit zu sichern oder auch die Ausbildung von Kindern zu fördern. Gutes und wichtiges Thema.
Mein nächster Anlaufpunkt ist netzwertig.com, wo sich Marcel Weiss mit Twitters für 2010 angekündigter Echtzeit-API Firehose beschäftigt. Marcel geht stark davon aus, dass das Implementieren auf Basis dieser Firehose-API kostenpflichtig und damit zum ersten richtigen Geschäftsmodell von Twitter wird.
Im Webzeugkoffer Blog beschäftigt sich dann Björn Seibert mit minimalistischem Webdesign und verweist auf einen gelungenen Beitrag When Minimalism Backfires: When Too Little Is Not Enough im Webdesigner Depot. Auf dieser Website gefällt mir, dass beim Überfahren des Logos mit der Maus, eine kleine, aber auffällige Info dargestellt wird. Diese macht deutlich, dass wenn man dem Link folgt, man zur Startseite zurück kommt. Eine angenehme Lösung des Problems, dass auch heute noch viele Leute nicht wissen, dass man in aller Regel nach einem Klick aufs Logo wieder zur Startseite der Website zurückkommt.
Ein weiterer Artikel auf Webdesigner Depot informiert mich darüber, dass es eine Wikipedia Usability Initiative gibt und dass man auf Wikipedia über den Try this-Link zu einer Beta-Version der optimierten Wikipedia-Ansicht gelangen kann. Neugierig geworden, schaue ich nach, ob es das auch auf der deutschsprachigen Wikipedia gibt und werde fündig. Der Link Beta ausprobieren am oberen Rand jeder Seite war mir bisher völlig entgangen. Ich beginne mit dem “Betatesten” und habe schon wieder eine Idee für einen weiteren Blogeintrag im Hinterkopf …
von Matthias Zellmer
Webzeugkoffer
Was ist jetzt eigentlich besser, produktiver, effizienter, effektiver, schöner, erfolgreicher, usability-optimierter oder auch einfach nur webzwonulliger? Blogs, Mircoblogs, Mini-Blogs, Social Networks, Social Media, Social Web, Instant Messenger, Googles Wellen, iPhone, E-Mail oder, oder, oder …
Tagtäglich lese ich in meinem RSS-Reader über Meinungen, Diskussionen und Erkenntnisse, die uns von der neuen, direkt vor unserer Tür stehenden Vormachtstellung von diesem und jenen Tool, Gadget oder Dienst berichten. Doch nur allzu oft kommen mir das so vor wie ein, mir zum Glück noch nicht untergekommener Vergleich in Richtung “ist ein Kühlschrank nützlicher als ein Auto?”.
Doch mit was wir es bei den auf dem Internet aufbauenden Technologien zu tun haben, sind schlichtweg Werkzeuge. Viele stehen in Konkurrenz, zum Teil auch ungewollt und auch oft nur teilweise. Einige ergänzen sich und andere nicht. Und was noch hinzukommt, bei jedem Nutzer ist die eingesetzte Kombination der Werkzeuge unterschiedlich. Viele stehen auch in Konkurrenz zu nicht internet-basierten Werkzeugen oder Medien. So kann ein Instant Messanger mit Videofunktion in Konkurrenz mit einem Auto stehen, wenn dadurch Autofahrten vermieden werden. Und so kann Twitter in Konkurrenz mit dem Mobiltelefon stehen, wenn eine Direct Message statt einer SMS schickt.
Jedoch fahren viele Menschen weiterhin Auto und schreiben SMS. Diese Konkurrenz ist im Prinzip eine Erweiterung des Spektrums. Allerdings bedeutet auch jede Spektrumserweiterung, dass es auf den jeweiligen Märkten enger wird. Aber das ist dann wiederum ein anderes Thema.
Es bleibt also nur, für sich persönlich zu schauen, welche Tools man aus dem “Webzeugkoffer” man in welchen Situationen auspacken und nutzen will. Und eins noch: In Ermangelung eines Hammers, habe ich auch schon mal einen Nagel mit eine Zange eingeschlagen … ging auch.
von Matthias Zellmer
