Hier geht es also nicht um Inhalte oder Politik und wer die bessere macht, sondern um den natürlichen Anspruch der Websites, die Bundeskanlzlerkandidaten zu repräsentieren und die Frage wie gut sie die Zielgruppe »Deutsche Wahlberechtigte«  addressieren. Immerhin 62,2 Millionen Menschen oder zumindest der Anteil, der im Internet surft.

Domains (1 Punkt)

Beide Kanzlerkandidaten haben eine eigene Website unter ihrem Namen: www.angelamerkel.de und www.frankwaltersteinmeier.de. Bedauerlich, dass man die beiden schon recht genau kennen muss – zumindest ihre Namen, denn Tippfehler-Domains waren wohl beiden zu teuer. Bindestriche darf man immerhin einstreuen oder das www. weglassen.

Frank-Walter: 0 – Angela 0

SEO (1 Punkt)

Zumindest die Startseiten der beiden sind hoch gelistet, nur Wikipedia ist wieder einmal besser. Die Suchmaschinen verzeihen auch falsche Schreibweisen, und schlagen entweder die Richtige vor, oder finden die Webseiten trotzdem. Die SEO-Hausaufgaben wurden also gemacht.

Frank-Walter 1 – Angela 1

Social Web / Social Media (1 Punkt)

Beide sind bei den Klassikern vertreten und verlinken diese auch: Facebook und Studi VZ (FW) respektive Mein VZ (Angela). Die Youtube-Accounts von CDU und SPD sind auch verlinkt – Angela versteckt Youtube aber hinter dem Begriff CDU.tv. Flickr-Bilder gibt es nur vom SPD-Wahlkampf-Team. Frank-Walter verlinkt Youtube nicht nur, sondern nutzt es fleissig, um Videos einzubetten. Angela nutzt lieber einen eigenen Streaming-Server und verlinkt das Videoportal nur. Knapper Punktsieg für FW.

Frank-Walter 1 – Angela 0

Barrierefreiheit (1 Punkt)

Beide Seiten sind generell ohne Javascript navigierbar und alle Inhalte, abgesehen von Videos und Flash-Containern werden angezeigt – was bei Frank-Walter, leider dann doch ein ganzer Bereich der Website ist. Alternativen Content zu Videos und Flash-Inhalten sparen sich beide, was bei Frank-Walter schwerer wiegt.

Die HTML-Struktur ist grundsätzlich gut, wenn auch der Umgang mit Headline-Tags eher unter Designaspekten, denn Strukturaspekten geschehen ist. Beide versehen Bilder und Grafiken mit Alt-Attribut, fassen sich dabei aber recht kurz. Bei Umgang mit Links scheiden sich die beiden. FW erklärt, wohin der Link führt, Angela spart sich das. Beide bieten keine Funktionen zum Anpassen der Ansicht an, dabei ist bei beiden der Lese-Kontrast und Textgröße nicht optimal. Texte vorlesen lassen kann man sich ebenso nicht. Beide bieten insgesamt nichts besonderes, aber bei Angela bekommt man immerhin bis auf Videos und ein Flash-Gadget alle Inhalte barrierefrei zu sehen.

Frank-Walter 0  – Angela 1

Visueller Eindruck (2 Punkte)

Frank-Walter überrascht mit großem Portrait und trendiger, aufgeräumter Optik. Eine solche Webseite hätte man von so einem gestandenen Politiker sicher nicht erwartet. Gut, dass sein Konterfei abgebildet ist, sonst hätte man auf die Idee kommen können, man sei falsch. Aber immerhin werden hier auf den ersten Blick keine visuellen Politikklischees breitgetreten – es geht um die Person, nicht um die Partei – sogar das SPD-Logo fehlt.

Angela zeigt sich erwartungskonform. Solider Aufbau, CDU-Farben – nichts was den potentiellen Wähler verunsichern könnte. Konservativ, klassisch, Klischee. Holt man so das gesamte Wahlvolk ab? Zudem stellt sich trotz großem Namen im Key-Visual die Frage, ob man hier nicht versehentlich auf die CDU-Partei-Seite umgeleitet wurde. Eine Personenseite ist das auf den ersten Blick nicht unbedingt.

Frank-Walter 2 – Angela 1

Erste Orientierung (2 Punkte)

Bei Angela hat man sich schnell orientiert. Klar positionierte Hauptnavigation, aufgeräumter Content-Bereich ohne Schnörkel. Aber wohin zuerst? Die Entscheidung obliegt ganz dem Betrachter. Nichts ist wirklich hervorgehoben, alles scheint gleich wichtig zu sein. Am ehesten also doch auf Facebook gehen? Zumindest werden die externen Links visuell deutlich betont.

Bei Frank-Walter gibt es viel zu sehen, wenn man sich einmal vom Portrait losgerissen hat. Die Icons an den Boxen helfen bei der Orientierung und die Priorität der einzelnen Inhalte wirkt klar umrissen. Je wichtiger, je weiter oben. Kurz bevor man klickt, entdeckt man dann vielleicht auch noch die Haupt?-Navigation oben links. Warum die Navigation so versteckt sein muss, erschliesst sich nicht. Schade auch, dass es soviele externe Links gibt, die nicht wirklich gekennzeichnet sind. Man ist schnell orientiert, aber auch schneller woanders, als einem lieb ist und dann ist es mit der Orientierung auch schon wieder vorbei.

Frank-Walter 1 – Angela 1

Informationsarchitektur / Navigationskonzept (2 Punkte)

Angela bietet nichts besonderes, sondern solide Kost. Die Menge der Inhalte ist übersichtlich geordnet und man hat jederzeit das Gefühl zu wissen, wo man ist und was man vor sich hat. Langweilig, aber sauber.

Frank-Walter wird seine Featuritis zum Verhängnis. Falls man es geschafft hat, nicht versehentlich die Site zu verlassen, klickt man sich durch immer wieder unterschiedliche Navigationskonzepte in den einzelnen Bereichen. Schnell weiss man eigentlich nicht mehr wo man ist oder wie man weiterkommt – der hoffnungslose Aufruf der Startseite ist da die einzige Lösung. So kann man die Page Impressions auch hochtreiben – nutzerfreundlich ist aber etwas anderes.

Frank-Walter 0 – Angela 1

Inhalte (2 Punkte)

Während Angela auf ihrer Site trotz großem Key-Visual visuell nicht im Vordergrund steht, so sehr sind die Inhalte um Sie gruppiert. Man erfährt einiges über die Ansichten und Einsichten unserer Bundeskanzlerin und ihren Wahlbezirk. Schön sortiert in 5 verschiedenen Bereichen. Dabei zeigt sich die Site in sich geschlossen und man verläuft sich nicht. Dezent wird auch auf ihre zweite Seite, die sich um ihre Funktion als Bundekanzlerin kümmert, verwiesen. Insgesamt ein rundes Angebot, aber viele Details darf man nicht erwarten – es  sollte wohl noch etwas für die Biografie in Buchform übrig bleiben. Insgesamt bekommt man aber doch ein Gefühl für die Person Angela Merkel.

Bei Frank-Walter gibt es mehr Content, wenn er auch nicht unbedingt zur Person gehört. Nach den aktuellen Wahlkampfnachrichten, gibt es erstmal seinen Weblog und seine Unterstützer/-innen. Schade, dass diese Bereiche nicht in die Site integriert sind, sondern wegführen und man sich plötzlich mitten im SPD-Wahlkampf wiederfindet. Schade, dass diese Teaser so prominent platziert sind. Vielleicht ist Frank-Walter als Person dann doch nicht so interessant? Mit etwas Ausdauer findet man dann, aber dann doch Frank-Walters Weg – eingepackt in eine trendige Flash-Klick-Orgie mit schlechter Navigation – auch hier das Gefühl, dass niemand wollte, dass man sich wirklich informiert. Ohne viel Ausdauer und Gedult erfährt man also wenig über Frank-Walter.

Frank-Walter 1 – Angela 1

Interaktionsdesign (2 Punkte)

Auch hier bietet Angela nichts neues. Links verhalten sich wie Links, ob nun Text oder Bild. Keine Ansätze die Site und deren Look & Feel dynamischer zu gestalten. Sehr bodenständig und verständlich. Keine Mätzchen, die vielleicht irritieren oder unverstanden bleiben könnten. Ein wenig mehr hätte es schon sein dürfen, für jemanden der ein ganzes Land lenken, leiten und aktiv nach vorne bringen will. Ist Angela wirklich so innovations- und einfallslos?

Frank-Walter dreht den Spieß dann um, aber leider nicht recht durchdacht. Angefangen bei der Hauptnavigation. Ein- und Ausklappen mag ja noch aktzeptabel sein, aber warum erst nach einem Klick und warum klappt sie dann plötzlich von alleine ein, wenn man die Maus versehentlich wegbewegt?

Auch die hübsch aufgearbeitete Biografie unter »Mein Weg« ist letztlich nicht durdacht. Zappelig und reine Augenwischerei, die schnell nervt und nicht hilft. Schnick-Schnack, der nicht hilft. Moderner Web-Kitsch, ohne durchdachtes Konzept. Reflektiert das wirklich die Werte, die Frank-Walter vertritt?  Der Versuch modern und aktuell zu sein ist niedlich, wirkt so aber eher verzweifelt. Einen Trostpunkt für den Versuch bekommt er trotzdem.

Frank-Walter 1 – Angela 1

Schlußrechnung

An dieser Stelle wollen wir die Betrachtung schließen und zusammenzählen:

Frank-Walter  7 von 14 Punkten
Angela 7 von 14 Punkten

Fazit

Da wir uns nicht auf ein Fazit beschränken wollten, gibt es nun gleich zwei, der Rest der uxzentrisch-Redaktion hat leider gerade keine Zeit und holt das vielleicht in den Kommentaren nach, zu denen wir wie immer jeden herzlich einladen.

Von Lutz

Letztlich enttäuschen beide Sites. Angela kommt nicht aus dem Mittelmaß hinaus. Mittelmaß ist jedoch nicht die goldene Mitte. Immerhin wird so ziemlich jeder der schon mal im Internet gesurft hat, mit ihrer Site zurecht kommen – und das ist vielleicht garnicht so unwichtig. Doch Medienkompetenz und Innovation kann Angela so nicht vermitteln. Insgesamt wirkt das ganze eher wie ein notwendiges Übel. Nach Obama muss man einfach im Web vertreten sein. Die Frage, wen man damit erreichen will, scheint sich niemand so recht gestellt zu haben.

Bei Frank-Walter war ich erst verwundert – das soll die Website des SPD-Kandidaten sein? Die Ausrichtung der Website ist dann aber schnell klar, es geht um Wahlkampf, und darum dass Frank-Walter besser ist. Nur Frank-Walter bleibt trotz Großbild irgendwie unnahbar. Die trendige Optik und das mutige Interaktionsdesign wird auch sicherlich nicht die breite Masse ansprechen, sogar eher abschrecken. Gut gemeint ist eben nicht gut gemacht. Noch deutlicher als bei Angela merkt man, dass Obama als Vorlage diente. Die angewandten Methoden sind frischer und aktueller als die der Kanzlerin, aber die Ausführung ist, wenn auch auf anderer Ebene, genauso wenig gelungen.

Die Chance die Seiten als zentralen Info-Hub für die Aktivitäten im Web zu nutzen wurde vertan, auch wenn zaghafte Versuche unternommen wurden. Eine Auswirkung auf die Wähler, durch die Websites ist wohl kaum zu erwarten – die Politik scheint noch immer einen langen Weg im Netz gehen zu müssen, um wirklich anzukommen.

Von Konstantin

Frank-Walters Website versucht, einen jungen und hippen Eindruck zu vermitteln. Leider kann ich diese Branding-Ausrichtung nicht in der Person FW Steinmeier wiedererkennen. Er ist weder hip, noch ist er web-affin. Sicherlich wollte man ein jüngeres Publikum ansprechen, aber es auf Kosten der Markenkonsistenz zu tun halte ich für nicht förderlich.

Angelas Website erfüllt die Erwartungen der Person und reiht sich also gut in den Markenauftritt Angela Merkel ein. Allerdings beflügelt die Site nicht, sich mit den Inhalten auseinanderzusetzen. Abgesehen von den Fotos im Header ist die Aufmachung und Aufbereitung der Texte wenig anders als die zur neuen Rechtsverordnung eines Bundesamtes.

Insgesam wäre bei beiden Kandidaten noch wesentlich mehr herauszuholen. Ob es heute verkraftbar ist, ist fraglich. In vier Jahren wird man sich diese Inkonsistenzen und Mittelmaß nicht leisten können.

Diese Artikel geben der vermutlich eher kleinen Fangemeinde des kreisrunden Office-Button die Gelegenheit, die Trauerfeier vorzubereiten: denn in Office 2010 siegt die Gewohnheit und Erwartungskonformität im Interfacedesign. Dem orangfarbenen Office-Strandball wird die Luft abgelassen und er verwandelt sich zurück in einen Datei-Button.

Die Evolution in Bild und Wort:

Vergrößern

• Office 2003: Das klassische Datei-Menü
• Office 2007 Beta: Das Dateimenü wird zu Dropdown um in die ersten, rohen Ribbon-Designs hineinzupassen.
• Office 2007 Beta 2 + Office 2007 final: Willkommen am Strand. Die »Office  Schaltfläche«, wie sie bei uns genannt wird, tritt ihren Dienst. Sie ist bunt, neu und passt gut zu Windows Vista und macht jemdem am Telefon das Leben schwer »klick auf den blauen Kreis links oben…«. (Quelle, Quelle, Quelle)
• Office 2010 technical preview: Strategischer Rückzug. Erstmal mit neuer Position aber altem Layout. (Quelle)
• Office 2010 Beta: Der Kreis schließt sich: Das Dateimenü ist zurück – jedoch neu geboren als Reiter im Ribbon, das die so genannte Backstage-View öffnen.

Marina, Program Manager im Office User Experience-Team beschreibt in dem oben verlinkten Artikel, wie es zu dem Design in Office 2007 kam und wo sie das Problem sehen:

»When we created the Office Menu in Office 2007, we optimized for Fitt’s Law – making it super easy to put your mouse in the upper left corner and get to these commands. For those folks who discovered the Office Button right away, this was a great little feature that made Office easier to use. Unfortunately, because this design was unconventional and different from the rest of the Ribbon UI we added, it was hard for some customers to find the Office Button the first time. Many who saw the Office Button believed it to be a branding decoration, rather than a functional button.«

Die Verbesserungen in Office 2010 wurden dann in Usability Tests überprüft:

»In the Technical Preview build, we took steps towards addressing this feedback. First off, we put the Office Button within the same row as the other Ribbon tabs. The location of the Office Button contributed most to people confusing it with a decorative logo. Another thing that we changed was the shape – instead of a fancy round button, we turned it into a button that looked much more like a tab. Lastly, we added an arrow to the button to try to encourage people to click on it. With these changes, we started seeing some significant improvements in the usability tests in terms of people finding this button quickly the first time.

But we still thought the initial discoverability needed to be better – we want to be sure people have no trouble finding the functionality under this button. Over and over in the usability lab, customers told us the word ›File‹ was something they were looking for in the UI – all the years of using the File menu to use commands like “Save As” and “Print” is a hard habit to break. So we’ve listened to our customers and in our Beta release you’ll see we’ve added the ›File‹ label to the tab. This has been a tremendous success in the usability labs and we’ve seen an incredible surge in initial discoverability of the Backstage view.«

Ich persönlich kann diesen Prozess sehr gut nachvollziehen und finde ihn gut.

Was denkt ihr darüber? Ist es schade um den »alten« Office-Button?

Mit dem iPhone hat sich ein bisher wenig genutztes Button-Konzept rasant verbreitet: Das Switch Control.

In diesem Beitrag vergleiche ich die Verwendung des Switch Controls beim iPhone mit der bei Picasa 3.

Ein Fazit sei vorweg genommen: Picasa 3 hätte besser auf die gute alte Checkbox zurückgegriffen….

Was ist eigentlich ein Switch Control?

Man hätte dieses Interface-Element auch gut »Checkbox-Button« nennen können, denn eigentlich geht es um Checkboxen… aber weil die auf dem iPhone mit dem Finger so schwer zu klicken sind, hat man sich entschieden, einen Button daraus zu machen. Damit haben sie große Ähnlichkeit mit Toggle-Buttons … – aber das ist eine andere Geschichte :-).
Das Switch Control soll also, wie eine Checkbox, den Zustand eines Element zwischen aktiv und inaktiv wechseln. Im Gegensatz zur Checkbox aber ist dieser Wechsel direkt »gespeichert«. Es ist also Speicher-Button und Checkbox in einem (auch wenn sich heutzutage viele Checkboxen ähnlich verhalten).

Nach dem iPhone hat jetzt auch das kürzlich veröffentlichte Picasa3 (mehr bei RW/W) einen Button, der wie eine Checkbox funktioniert.

»Sync to Web« ist die Beschreibung (das Wort Label wäre an dieser Stelle falsch verwendet, da der Text nicht wie ein ordentliches Label klickbar ist).

Schon an dieser Stelle lohnt sich ein Vergleich:

Warum verwendet man ein Switch Control?

Das iPhone hat sich bewusst für den neuen Button-Typ entschieden, um ein Usability-Problem aus dem Weg zu räumen, das durch sein neues Interaktionskonzept entstanden ist. Der Vergleich zu Touchscreen-Prototypen, die das neue Google-Betriebssystem Android verwenden, zeigt genau dieses Problem. Hier werden weiterhin standard Checkboxen verwendet (Nicht-Quelle) die schlecht klickbar sind.

Bei Picasa3 dagegen drängt sich mir der Eindruck auf, man sei auf den Zug der coolen neuen Button aufgesprungen. Hier gib keinen wirklichen Grund für den neuen Button-Stil.

Hinzu kommt, das bei Picasa3 das Button-Konzept auchnoch richtig schlecht umgesetzt wurde.

Es kommt auf die Umsetzungsqualität an…

Vergleicht einmal diese beiden Videos (am besten im Fullscreen-Modus gucken). Beide zeigen Switch-Controls.

Zuerst das iPhone. Achtet auf die Details während der Finger den Button drückt und zieht… (bei Viddler gucken)

Und jetzt Picasa3. Achtet auch hier auf die Details…
Tipp: Das was man nicht sieht, ist das wichtige :-) (bei Viddler gucken).

Jetzt kommt der zweite Vergleich:

Warum gewinnt das iPhone diesen Interaktionsvergleich?

Die Metapher, die den Checkbox-Button zugrunde liegt, ist die eines Schiebe-Buttons mit an/aus-Zustand. So kennt man ihn von der Tastensperre des iPods und vieler älterer Alltagsgeräte schon lange.

Das Enscheidende dabei ist das »Schieben«… und genau das hat Google weggelassen. Bei Picasa3 hat man einfach einen normalen Button genommen und ihm einen Clicked-Zustand verpasst.

Man hat also all die Nachteile eines neuen Gestaltungselements – allen voran die fehlende Erfahrung in der Interaktion (was mach ich damit?/wie funktioniert das?) – und kaum einen Vorteil. Eine normale Checkbox mit schönem Aktiv-Zustand oder ein Toggle-Button den man eindrücken kann, hätte hier besser gepasst.

Das iPhone lößt diese Probleme durch seine guten Animationen. So kann der Nutzer sich die Funktionsweise des Buttons spielerisch erarbeiten und verstehen/nachvollziehen, was passiert.

Was können wir also davon mitnehmen?

• Apples User Experience ist an dieser Stelle mal wieder bis ins kleinste Detail durchdacht.
• Die vielen kleinen Feinheiten und Details machen den Unterschied aus.
• Trendy sein ist auch im Interfacedesign nicht hilfreich.
• Schlechte Kopien neuer Dinge sind trotzdem schlecht.
• Gerade bei neuen Elementen ist gute Learnability besonders wichtig.

Übrigens, für Interessierte: Man findet leider bei Apple nur sehr wenig Dokumentation zu diesem Interface-Element. Auf Seite 76 der iPhone Human Interface Guidelines wird das »Switch Control« jedoch beschrieben. Apple weist darauf hin, dass man es nur verwenden soll, um zwischen Optionen zu wechseln, die der User beide schon kennt (klassisches An/Aus).