Als frisches Teammitglied von Liechtenecker beschäftige ich mich in meinem ersten Blogeintrag mit einem (auf den ersten Blick) trockenen Thema: Dem Design von Formularen.

Täglich sind wir im Internet mit vielen unterschiedlichen Typen von Formularen konfrontiert: Dabei reicht die Spanne von Loginformularen, über die Registrierung bei Websites bis hin zu hochkomplexen und mehrstufigen Formularen, z.B. für das Finanzamt. Wie man den Prozess des Ausfüllens für die User einfacher und vor allem frustfreier gestalten kann, werde ich im Folgenden beschreiben.

Validierung, Validierung, Validierung

Über Jahren dominierte das Thema der Formularvalidierung alle Artikel über Usability bei Formularen auf Webseiten. Im Laufe der Jahre sind immer ausgereiftere Methoden und Frameworks entwickelt worden, um die Validierung für den User so einfach und nachvollziehbar wie möglich zu machen.
Trotz des großen Interesses und der Vielzahl an Artikeln über diesen Aspekt, gehört die Validierung von Usereingaben immer noch zu den schwierigsten, aber gleichzeitig auch wichtigsten Aspekten, bei der Gestaltung eines guten Formulars.
Dazu zählen zunächst die grundlegenden Anforderungen. Der Benutzer sollte seine Daten nur einmal eingeben müssen und Fehlermeldungen sollten aussagekräftig und klar formuliert werden. In diesen Punkten hat sich in den letzten Jahren mit Sicherheit am meisten getan. Zusätzlich zu solch offensichtlichen Punkten sollten aber auch alle Entscheidungen, die der User getroffen hat, berücksichtigt werden. Dazu zählen vor allem die Auswahlmöglichkeiten bezüglich Newslettern, AGB oder sonstigen Daten, die per Checkbox abgefragt werden. Nichts kann den User mehr nerven (und gegebenenfalls den Prozess des Ausfüllens abbrechen lassen), als Wünsche nach einem Fehler, immer und immer wieder eingeben zu müssen.

Eingabe

Selten gibt es im Internet Formulare, die nicht eines oder mehrere optionale Felder haben. Besonders beliebt ist hierbei die Telefonnummer. Beim Design von Formularen sollte man sich aber stets fragen: Benötige ich überhaupt optionale Angaben oder wäre es besser, diese gleich ganz wegzulassen. Dies ist natürlich vor allem von der Branche abhängig – denn was macht z.B. ein Forum mit meiner Telefonnummer?
Die Reduzierung auf die wichtigsten Angaben hat für beide Seiten Vorteile: Der User muss kein unendlich langes Formular ausfüllen und ist motivierter, den Prozess abzuschließen. Auf der anderen Seite können sich die Betreiber der Website durch weniger Kunden, die das Ausfüllen im Prozess abbrechen, über mehr Kunden und Daten freuen.

Neben Eingabefeldern sieht man häufig Anweisungen für den User, wie er die eingegebene Information zu formatieren hat, also z.B. bei Telefonnummern die Aufforderung, die Nummer in bestimmtes Format zu bringen.
Das Ausfüllen des Formulars sollte für den User aber ein Prozess sein, der ohne Hürden (sind sie auch noch so klein) zu bewältigen sind. Gutes Formulardesign ist dadurch erkennbar, dass der User nicht dazu genötigt wird, seine Daten in Formate zu bringen, die dem Designer des Formulars vorschweben. Viel besser wäre es, die Daten nachträglich und ohne Zutun des Users zu formatieren (Leerzeichen und Sonderzeichen entfernen, …) um sie dann einheitlich in der Datenbank abzuspeichern.

Textlabels vertikal, links oder rechts ausgerichtet?
Folgende Grafik bereitet die Möglichkeiten bei der Ausrichtung von Textlabels von Formularfeldern visuell auf.

Als Faustregel gilt: für kurze Formulare mit wenig Feldern kann das Textlabel vertikal angeordnet werden, das erhöht die Geschwindigkeit beim Ausfüllen und sieht übersichtlich aus.
Bei längeren Formularen scheidet diese Variante durch den enorm gesteigerten, vertikalen Platzbedarf jedoch aus. Dann fällt die Entscheidung zwischen rechts- oder linksausgerichteten Textlabels. Linksausgerichtete Labels sind für den User schneller lesbar und wirken geordneter, nach rechts ausgerichtete Labels erhöhen den Zusammenhang zwischen Label und Eingabefeld.

Abschnitte

Wichtig ist, das Formular nicht zu lang werden zu lassen sondern an gegebenen Stellen abzutrennen und ein “Mehr-Schritt-System” daraus zu machen. Gute Beispiele hierfür sind vor allem Webshops mit dem üblichen Ablauf Warenkorb > Daten > Zahlung > Zusammenfassung.
Dabei ist es wichtig, dem Benutzer jederzeit Feedback darüber zu geben, in welchem Schritt des Prozesses er sich befindet und welche Schritte noch vor ihm liegen.
Rechnet der User z.B. seine Bestellung nochmals überprüfen zu können, bevor er diese Abschickt, das Formular aber einerseits keine Information darüber gibt, wo im Prozess er sich befindet und andererseits auch keine Seite mit Zusammenfassung existiert, birgt das enormes Frustpotential.

Sekundäre Buttons

Häufig trifft man neben den essentiellen Primärbuttons am Ende eines Formulars auch auf Sekundärbuttons, die es dem User z.B. ermöglichen sollen, das Formular mit einem Klick zurückzusetzen oder den Prozess abzubrechen.
Da dies zwar durchaus nützliche Funktionen sein können aber vom Benutzer nicht ausgeführt und vor allem nicht unabsichtlich ausgelöst werden sollten muss darauf geachtet werden, auch das Verhältnis zwischen Primärbutton und Sekundärbutton in der grafischen Aufbereitung widerzuspiegeln.

Abschluss

Ein kurze Zusammenfassung ergibt also: Das Ausfüllen eines Formulars sollte für den User so schnell und einfach wie möglich gehen. Dabei sollte der User auf Fehler bei seinen Eingaben hingewiesen werden und vor allem zu nichts gezwungen werden. Große Formulare sollten in kleinere Teile heruntergebrochen werden, der User sollte aber generell immer über seinen Fortschritt beim Ausfüllen informiert werden. Frustrierende Fallen (unabsichtliches Rücksetzen des Formulars) sollten nach Möglichkeit abgeschwächt werden.
Generell gilt lieber mehr Zeit in die Entwicklung eines Formulars zu stecken als im späteren Verlauf Kunden zu verlieren, die durch ein Problem in der Usability abgeschreckt worden sind.

Ich hoffe ich konnte mit diesem Blogbeitrag einige Aspekte des Formulardesigns aufgreifen und behandeln und freue mich schon auf meinen nächsten Beitrag!

Seit 13 Jahren bastle ich nun an Webprojekten. “Damals” war es cool einfach zu behaupten ein Webdesigner zu sein, schon hatte man ein paar Mädls um sich. (Ja, ist jetzt auch übertrieben, aber in meiner Erinnerung ist es so;) Webdesign war damals ein großes graues Mysterium, ehrlich gesagt auch für mich. Ich habe mich ja über WYSIWYG Editoren an das Thema herangenähert. HTML und CSS kam erst später, wie die Webstandards Einzug gehalten haben und ich mich in die Materie vertieft habe. Nach dem Thema Webstandards kam als großer Meilenstein Social Media und vor 2-3  Jahren war die Deviceunterschiedlichkeit ein großer Aspekt. Mobile und Co. von nichts anderem war/ist die Rede. Internet am Tablet, SmartTV und ja, sogar auf einem Autonavigationssystemen. Doch welche Richtung schlagen professionelle Webprojekte nun ein (2013-2014)?

Wir haben ja schon oft von Responsive Webdesign gesprochen. Das ist nicht nur der heißeste Sch***, sondern rückt auch einen interessanten Aspekt in den Vordergrund. Durch die Idee ein Webdesign, mit unterschiedlichen Usabilitykonzepten bei verschiedenen Bildschirmauflösungen umzusetzen, geht es eher darum die Bedürfnisse und Begebenheiten des Users wichtig zu nehmen. Doch das ist erst ein Anfang, denn genau darum geht es in Zukunft: dem User!

Whats next? Ganz einfach: DER USER

Bei User Centered Design (Kurz: UCD) geht es darum die Gebrauchstauglichkeit von Interfaces – und nicht deren Technik -in den Vordergrund zu stellen. User Centered-Design (UCD) ist mehr eine Philosophie und ein Ansatz, als ein System. Die Person (=der USER) wird in den Mittelpunkt gestellt. Die Gestaltung von UCD-Interfaces ist ein Prozess, der sich auf kognitive Faktoren (wie Wahrnehmung, Gedächtnis, Lernen, Problemlösen, etc.) konzentriert.

Hört sich alles gut an, doch was bedeutet das in der Praxis? Wir konzipieren die Webprojekte wie bisher in den gewohnten Schritten, Strategie, Evaluierung, Mockups, Screendesigns und Umsetzung, lassen aber folgende Fragestellungen mehr und mehr einfliessen.

• Wer sind die User des neuen Interfaces (analog zur Zielgruppenanalyse)
• Was wollen die User auf der Webseite , was will ein typischer Besucher für Informationen?
• Welche Informationen sind besonders wichtig, und besonders unwichtig?
• Welche Erfahrungen haben wir mit den bisherigen Informationen?
• Wie benutzt man das Interface vom kognitiven Ansatz?
• Welche Intuitionselemente kann man dem Nutzer bieten? (Natural User Interface)
• …

Okay, das unterscheidet sich beim 1. Blick nicht wirklich von bisherigen UI Konzepten. Allerdings geht es bei den Fragestellungen immer mehr darum den User in den Mittelpunkt zu stellen. Wir denken bei der Konzeption von User Centered Designs noch nicht an die Technik dahinter, oder an die Marketingziele des Auftraggebers, aber auch noch nicht ans Visual Design, sondern an den Webseitenbesucher als Person und Mensch.

Zusammengefasst: Was ist wirklich relevant und was stellt den User zufrieden?

Relevanz und Zufriedenheit

Das schönste Design und auch die beste Usability nutzt dem Webseitenbesucher nichts, wenn die relevantestenWebseitenelemente nicht richtig angeordnet sind. Der Auftraggeber oder Marketingentscheider will natürlich unbedingt Element A oder B platzieren, weil es ihm wichtig ist, aber will das auch der User? Wie oft habe ich mich zum Beispiel geärgert, wenn bei Webdesigns einfach keine f**** Telefonnummer zu finden ist….. Als potentieller Gast eines Restaurants hätte ich zum Beispiel wahnsinnig gerne einen Blick in das Lokaldesign geworfen und vielleicht noch in die Speisekarte. Es interessiert mich aber weniger, welche Philosophie der Küchenchef hinausposaunt. (Ja, kann auch wichtig sein, aber auf dem 2. Blick..)

Hat der User auch genug relevante Information, natürlich unterstrichen mit einem Wohlfühldesign :), wird er auch motiviert sein mehr in das Seitenangebot einzutauchen. Da kommen die Stichworte Storytelling ins Spiel (Restaurantbeispiel: “Hey, hast du gewusst, dass wir auch Bio-Cocktails haben..”). Ebenso ist es wichtig den Benutzer zu involvieren (“Reservier gleich einen Tisch”)

Funktionalität wird bei o.g. Beispiel vorrausgesetzt, egal welches Device der User benutzt, wir haben es am Beispiel Apple gelernt: Die Dinge müssen einfach funktionieren, wie und ob, ist dem Benutzer egal. Es reicht nicht mehr dem Auftraggeber zu kokettieren, dass wir auch ältere Browser oder kleinere Bildschirmauflösungen bei der Umsetzung berücksichtigen, das ist eine Grundvorraussetzung einer professionellen Webseite, denn schließlich wollen wir nicht nur in Social Media Dialog mit dem User, sondern auch auf der Webseite oder in einer Applikation.

Zurück zu den Wurzeln

Es ist eigentlich nicht kompliziert, 1989 wurde das WWW erfunden um den Forschern das Leben zu erleichtern. Einfacher und nutzbarer sollte es werden, konzipiert nach den Bedürfnissen der Forscher, das war der Anreiz. Es ist gut, dass uns dabei die Technik immer überholt und auch die Marketingmöglichkeiten sind super, aber dabei bitte nicht auf den armen User vergessen :) Wir Webagenturen sind da um das Internet besser zu machen, ist es nicht so?

Wir prognostizieren: 2011 werden die Grenzen zwischen Designer und Entwickler noch wesentlich mehr verschwimmen. Es reicht nicht mehr, nur schöne Designs zu produzieren, sie müssen auch gute Funktionen bieten. Informationsdesign ist schon länger unser Motto, aber mit HTML5 und CSS3 kann man dieses noch mehr in den Vordergrund rücken.

Statt von schönen Photoshopkreationen für einen kurzen Moment geblendet zu sein, sollen die User in ein Umfeld bzw. in eine Story hineingezogen werden, in dem sie kein Bedürfnis verspüren, den “Zurück”-Knopf oder “schliessen” zu drücken. Dazu gibt es ein paar ausschlaggebende Faktoren, wie die Verwendung von stimmigen Farbschemata, das Erstellen eines intuitiven und interaktivem! Designs, einfache Informationsaufbereitung und schnelle Reaktionszeiten. Kombatibilität steht an erster Stelle. Kein Browser sollte vernachlässigt werden, kein aktueller Flashplayer soll im Weg sein, aber auch keine Einschränkungen auf welchem Device die Webseite aufgerufen wird.

Wenn man es in einem einzigen Wort sagen müsste: Einfachheit.

Das Design muss auf den unterschiedlichsten Endgeräten schnell, sicher und verständlich funktionieren.

Mehr CSS3 und HTML5

2011 wird das endlich Jahr von CSS3 und HTML5. Flash als einzige Programmiersprache für eine animierte oder interaktive Website hat ausgedient, denn viele der neuen Plattformen (nicht nur iPhones) können damit schwerlich bedient werden.

Der Aufschwung von HTML5 bedeutet aber nicht, dass Flash vollständig verschwinden wird – die beiden ergänzen sich eher, als das sie sich aufheben. Für uns ist klar: Speziell eingesetzt, kann Flash durchaus seine Vorteile haben -speziell im Games Bereich – und HTML5 kann noch nicht gänzlich alle Designelemente von Flash gleichwertig nachbauen. Wobei dies nur eine Frage der Zeit ist, wenn man sich folgende Website zu Gemüte führt: http://www.makeuseof.com/tag/html5games-directory-flashfree-browser-based-games/ Hier gibt es ein Directory von reinen HTML Spielen (flash-free!;)

Um einiges mehr als seine Vorgänger kann CSS3 – es macht kurzen Prozess mit Textschatten, Abrundungen bei Blöcken und Bild-Transparenz und ist deshalb eines der wichtigsten Designfortschritte 2011.

Übrigens hat HTML5 vom W3C ein Logo spendiert bekommen ;)

Mobile

Dieses Thema wird 2011 noch wichtiger werden: Das Design muss auf unterschiedlichen Plattformen verwendbar sein. Als Webdesigner reicht es nicht für die mobile Seite, einfach alle komplizierten interaktiven Details wegzulassen – das kann sie recht schnell leer wirken lassen. Allzu sehr sieht man derzeit fertige Moblie-Plugins im Einsatz. Mit CSS3 kann man hier bereits sehr viel mehr erreichen, prinzipiell sollte man aber eine Seite aber von Anfang an so konzipieren, dass sie auch mit Smartphones oder Tablets jederzeit abrufbar und bedienbar ist. Viel mehr noch sollten die Vorteile von Mobile Devices bei Webseiten genützt werden. Stichwort: Geodaten, Touchscreen, QR Codes

Wir haben hier besonders Sencha als Framework im Fokus, denn dieses setzt auf Webstandards und bedient auch Android. http://www.sencha.com/

QR-Codes

Diese Technologie geistert schon länger in den kreativen Köpfen herum, 2011 scheint sie nun endlich aus dem Schatten zu treten. Grund dafür ist natürlich die vermehrte mobile Nutzung von Websiten: Man kann die Codes zum Beispiel verwenden, damit User schnell auf die mobile Version wechseln können. Oder sie einsetzen, um Besucher mit einem speziellen Referral-Code auf der URL mitzutracken. Oder den Code als Gravatar für einen Kommentar auf Blogs etc. nutzen. Marketingideen geben wir hier nicht preis oder nur gegen Kohle ;)

Design für Touch Screens

Nicht zuletzt durch iPhone und iPad sind wir daran gewöhnt, taktil zu arbeiten. Daran muss auch das Design angepasst werden: Statt Links durch darüberstreichen anzuzeigen oder Drop-Down-Menüs einzubauen, muss man sich neue Navigationselemente für den Touch-Screen überlegen.

In diesem Zusammenhang stellt sich natürlich auch die Frage, wie User sich eine Seite ansehen: Auch wenn es für den Standard-Webgebrauch schwierig ist, horizontales Scrollen kann für Touchscreens durchaus Sinn machen – man denke zum Beispiel an bestimmte Magazine im iPad-Format.

Nicht zu vergessen ist in Folge dessen auch die Flexibilität des Layouts: Wenn User in Sekundenschnelle von horizontal auf vertikale Sicht umschalten können, muss das dazugehörige Design flexibel sein. Über Bildschirmauflösung wird dann schon lange nicht mehr geredet.

Vertikales Scrollen statt Paging

Seit Ewigkeiten besteht die Diskussion ob bei langen Inhalten ein Paging sinnvoll ist oder doch lieber lange Designs zum vertikalem Scrollen. Wir haben vor kurzem eine Umfrage dazu getätigt: http://liechtenecker.at/scrollen-vs-klicken/. Hier hat sich herausgestellt, dass die absolute Mehrheit mehr Usability im Scrollen sieht. Denn neue Ladezeiten verzögern den Surf-Flow und die Inhalte erschließen sich nicht gleich auf den ersten Blick. Zusammengefasst: Weil es einfach von der Hand geht und wesentlich komfortabler ist! Ergänzend gehen trendige Screendesigner ganz groß in diese Richtung.

Thumbnail-Design

Dieser Trend hat einmal nichts mit Apple zu tun, sondern mit Google: Wenn man mit der Suchmaschine unterwegs ist, muss man nicht mehr auf den Link klicken, um die Webseite zu sehen – es reicht ein Click auf die Vorschau. Nachdem bereits nahezu jeder Mensch auf der Welt weiß, wie man googelt, sollte man diesen Fehler nicht machen – der erste Eindruck zählt bekanntlich am meisten.

3D Kino

Der 3D-Trend aus dem Kino macht natürlich auch vor dem Webdesign nicht Halt. Technisch ist der Effekt natürlich nicht möglich, aber dennoch kann man sich die Tiefe durch Design-Tricks auf die Seite holen.

Einfache Farbschemata

Wie schon vorher angesprochen: Simplicity is King. Wer jetzt aber bei der Farbgestaltung nur an weiß, schwarz und Grauschattierungen denkt, liegt falsch. Stattdessen sollte man sich mit sogar stärkeren Farben spielen. Wichtig dabei ist, die Farbpalette auf zwei bis drei Farben zu minimieren, sonst wird es zu bunt.(Das ist auch nix Neues natürlich) Am besten schaut es aus, wenn man die Schattierungen dieser zwei Farben von hell bis dunkel gut ausspielt und bestens in Kontrast setzt.

Fotos als Hintergrund

Die Verwendung von großformatigen Fotos oder Bildern als Hintergrund wird 2011 noch weiter ansteigen. Sie sind ein einfacher Weg, um das Interesse und besonders Emotionen des Webseitenbesuchers zu wecken. Aber Achtung: Die Bilder müssen immer kontextbezogen sein, sonst wird es schnell verwirrend. Bzw. gehören die Bilder besonders trickreich eingesetzt (mit Verläufen und Pattern) Am besten man verwendet sanfte und leicht transparente Bilder, die mit dem Inhalt harmonieren und kombiniert diese mit der gesamten Farbpalette der Site.

Illustrationen

Illustrationen waren schon 2010 ein deutlicher Trend, besonders in Headern. Um die User Experience zu steigern, werden diese vermehrt im Kontext verwendet. Maskottchen spielen auch bei Webanwendungen oder Apps eine sehr wichtige Rolle wie man hier sehen kann. http://d-lists.co.uk/2011/01/25/web-design-mascot-showcase/

Typografie

Vorbei sind die Zeiten wo Tahoma, Arial oder Verdana regieren. Man kann durch verschiedene Technologien andere Schriftarten für Headlines oder zum Beispiel Claims einsetzen. Dadurch ist die Verwendung von Schriften auch fürs Design immer mehr in den Vordergrund gerückt.

360 Grad – Social Media Integration und ganzheitliche Strategien

Unternehmen bewegen online sich schon lange nicht mehr nur auf einer einzigen Webseite. Es gibt dort einen Blog, da eine Facebook Page und vielleicht auch ein Intranet. Damit diese Auftritte nicht einzelne Baustellen sind ist es wichtig ganzheitliche Online Strategien zu entwickeln wo jeder dieser Kanäle eine Rolle spielt. Welche Ziele werden verfolgt, Redaktionspläne, welcher Kanal ist die Basis, sind hier die wichtigen Fragen. Ein (roter) Designfaden sollte sich durch alle Kanäle ziehen um die Identifikation zu haben.

Fazit

Man könnte noch ewig darüber weiterschreiben, aber dies wären die wichtigsten Tendenzen die mir eingefallen sind. Wenn euch noch etwas eingefallen ist oder ihr anderer Meinung seid, bin ich natürlich offen und die Kommentare sind es auch.

Der Webdesigner von Damals

Nochmals kurz zurück zum Start: Damals war der Webdesigner sowieso ein Allrounder. Design und Programmierung sind nahe beieinander gelegen. Die Möglichkeiten der Darstellung waren etwas eingeschränkter. HTML und CSS, maximal noch eine Brise JavaScript. Vielleicht gab es noch einen so genannten Webmaster, welcher sich bei einer Applikation um Servertechnik gekümmert hat. Web-Applikationen waren sehr dünn gesät. Von einem Webauftritt wurde nicht viel abverlangt. Eine Webseite wurde auf das Online-Erscheinen reduziert. Hauptsache "wir sind im Cyberspace". (Auch ein ziemlich altes Wort)

Der Webdesigner von Heute

Durch die positive Weiterentwicklung der Webgestaltungsmöglichkeiten und den Mehrnutzen der Webseiten wurde alles etwas feiner. Der Kundendialog wird gesucht, Kundensegmente analysiert und gemeinsam die Ziele definiert. Danach erfolgt die Konzeption der Webseite und im Idealfall ein Storybook. Im nächsten Schritt spielt das Screendesign eine große Rolle, steht dieses fest kann das Frontend angepackt werden. Für eine erhöhte Usability etwas Ajax im Interface kann auch nie schaden. Bitte nicht auf die Barrierefreiheit vergessen! Da alles Web-Zwei-Nullig sein soll, benötigt es eine Datenbank um Interaktion und ein "Mitmachen" zu ermöglichen. Die Autoren und Texter (manchmal der Kunde) wollen ein Content Management System. Ob in PHP oder Java kommt auf die Server-Architektur der Firma an. Steht die Webapplikation muss die Nutzbarkeit feingeschliffen werden. Bitte nie den Kundendialog währenddessen vernachlässigen. Ist die Webseite dann endlich live wird für die Suchmaschinenoptimierung in die Hände gespuckt… All diese Arbeitsschritte habe ich versucht als One-Man-Show unter einen Hut zu packen aber ich kann es heute nicht mehr bewältigen, dabei rennt man der Weiterentwicklung nur mehr auf dem Zahnfleisch hinterher.

Agenturen haben es leicht

Mittlere- bis großstrukturierte Webagenturen haben es leicht, denn hier gibt es fest definierte Jobbezeichnungen wie ich es versucht habe in der Grafik beispielhaft darzustellen. Die Aufgaben sind klar getrennt, aber schrecklicherweise verdeutlicht es einem Webdesigner was alles erfüllt werden sollte.

Werbeagenturen stellen sich das manchmal anders vor. Erst vorgestern hab ich folgendes Jobangebot gelesen:Webdesign-Allrounder gesucht: XHTML, CSS, Photoshop-Spezialist, PHP, AJAX, CMS, Logodesigner, Projektmanagement.Vielleicht sollte der gesuchte Wunderwuzzi das Angebot noch bereichern in dem er täglich frische Gerichte als Kantinenersatz zaubert? Das führt eigentlich nur dazu, das gewisse Fachgebiete auf der Strecke bleiben, weil keine Einzelperson könnte dies qualitativ bewältigen.

Meine Lösung

Wenn wir bei der Berufsbezeichnung Webdesigner bleiben, habe ich mich als One-Man-Show völlig auf das Frontend und den Kundendialog reduziert. Dazu gehört für mich die Konzeption, das Screendesign, Frontendprogrammierung, Barrierefreiheit, Usability und Suchmaschinenoptimierung. Das sind alleine für sich schon dermaßen große Themen, aber Weiterbildung macht mir natürlich auch Spaß. Für das Backend (PHP oder Java) hole ich mir qualifizierte Programmierer und für kompliziertere Illustrationen einen guten Grafiker.

Webdesign ist ein Handwerk

Ich bin ein Verfechter, daß gutes Webdesign ein Handwerk ist. Es muss auch zu einem gewissen Grad eine Berufung vorhanden sein. Denn alles ist nicht erlernbar. Zu einer ansprechenden Webseite gehört nämlich auch eine Portion guter Geschmack, Fingerspitzengefühl und vor allem Erfahrung.

Technik kann die Partizipationsmöglichkeiten für blinde und sehbehinderte Menschen erhöhen. Trotzdem muss erwähnt werden, dass durch eine Behinderung immer eine Beeinträchtigung erfahren wird. Eine Person beschrieb:

„[…] Klar ist natürlich, dass man die Bilder und ähnliches , was ja auch sehr stark vertreten ist im Internet, natürlich nicht sehen kann.[…] Das fällt natürlich weg, aber das ist glaub ich jetzt kein, vielleicht irr ich mich jetzt aber, das ist kein Problem vom Internet an sich, das ist ja eher ohnehin naturgemäß.“

Grundsätzlich muss zwischen zwei Dimensionen in Bezug auf „Barrieren und Technik“ unterschieden werden.

Die erste Dimension beschreibt jene Barrieren, die durch das Programmieren und Erstellen von Webseiten entstehen können. Hierbei ergeben sich oftmals Hürden wenn nicht auf barrierefreie Programmierung und die Einhaltung der Standards geachet wird. Diese erste Ebene bezieht sich auf einzelne technische Details, die man konkret benennen kann. Grafiken, Flash-Animierungen und Drop-Down Menüs lauten die Stichworte, denn sie sind nur mit den Augen zu erfassen und somit für eine blinde Person nicht anwendbar. Auch die Überladenheit einzelner Websites mit Informationen und die Unübersichtlichkeit machen blinden Personen zu schaffen. Während eine sehende Person alles auf einmal erblickt, erfordert es für eine blinde Person einfach mehr Zeit, nur mit Tast- und Hörsinn die Fülle an Informationen in eine geordnete Struktur zu bringen.

„Manche Webseiten sind, die Uni-Seite zum Beispiel selber, sind so kompliziert, mir muss jemand helfen, weil wenn ich etwas suche […] das dauert für mich 10 mal so lang, das ist mir echt zu anstrengend. Da frag ich […]”

„Das Beste […], dass man alles auf der Seite übersichtlich hat, dass man nicht zuerst 100e Sachen, durchklicken muss, ja dass man halt alles ein bisschen übersichtlich schafft.“

„Ja, irgendein Amt, Finanzamt irgendwas, wo es ne extra Seite gibt, ein Link oder irgendwas barrierefrei und das ist so kompliziert dass man es gar nicht probiert. […]. Ich habs ausgedruckt, damits für mich dann wer machen kann. Weil es war so kompliziert.“

Die zweite Dimension stellen Barrieren von Seiten des Nutzers dar. Es geht um die Frage, ob dieser Zugang zur benötigten Software hat, die zur Ausgabe von Informationen im Internet notwendig ist und ob er das entsprechende Wissen besitzt, die Software anzuwenden? Die Anwendung von Software setzt jedoch wiederum entsprechende Schulung oder Bildung des Betroffenen voraus, um die Angebote auch nutzen zu können.

„[…] Man muss einmal unterscheiden zwischen Barrierefreiheit von Seiten des Anbieters sozusagen und dann gibt’s noch die andere Barrierefreiheit, das ist die des Nutzers. […]Wenn die Gemeinde Wien eine barrierefreie Website hat, dann nutzt mir die nur relativ wenig, wenn ich nicht, das entsprechende Programm habe, die zu lesen […].“

„Man muss es Blinde austesten lassen. Weil es hat nicht jeder dieses tolle Programm das ich hab. Und es kann auch sein, dass ich es nicht mehr hab, ich mein wer weiß, aber mit einem normalen Betriebssystem, mit irgendeiner Braillezeile muss es so sein, dass man ins Internet kann, dass man sich einfach normal orientieren kann.“

Zusammenfassend lässt sich feststellen: Immer wieder wird betont, dass es als wichtig angesehen wird, technische Standards für die Erstellung von Internetseiten auch tatsächlich einzuhalten. Es genügt nicht, die angebotene Website als „barrierefrei“ zu bezeichnen. Wie man es nennt ist im Endeffekt egal, denn wichtig für den Betroffenen ist lediglich, dass die Websites auch tatsächlich für die Nutzer ohne Barrieren zugänglich und nutzbar sind.

Der BVDW hat als Hilfestellung ein kostenloses e-Book “Usabilityleitfaden für E-Commerce” zur Verfügung gestellt.

Käufer sollen sich intuitiv in Online-Shops zurechtfinden, ohne dabei groß nachdenken zu müssen. Diese Regel hat nach wie vor Bestand. Derr Usability-Leitfaden listet die wichtigsten Kriterien für benutzungsfreundliche E-Commerce-Angebote auf und veranschaulicht mit Hilfe von Fallbeispielen auch die positiven Wirkungen von Usability-Maßnahmen auf Umsatz, Neukundengenerierung, Kundenzufriedenheit und -bindung. Am Ende des Dokumentes gibt es eine riesige Linksammlung zum Weiterschmökern,.

Accesskeys sind Tastenkombinationen oder Tastenkürzel, deren Benutzung je nach Browser und Betriebssystem leicht abweicht. Der Webdesigner kann mit folgendem Zusatz festlegen mit welchem Buchstaben ein Link angesprochen wird:

<a accesskey="1" href="http://www.liechtenecker.at" title="Startseite">Startseite</a>

Es reicht lediglich der Zusatz “Accesskey” und das ausgewählte Zeichen. Vorsicht: Es können keine Zahlen des Nummernblocks verwendet werden.

Über die Jahre haben sich folgende Standards für Webseitenelemente herauskristallisiert:

• S – zum Inhalt
• 1 – Startseite
• 2 – Neuigkeiten, News
• 3 – Sitemap
• 4 – Suchfunktion
• 5 – FAQs
• 6 – Hilfe zur Seite
• 7 – Formular für Beschwerden
• 8 – Bestimmungen und Bedingungen
• 9 – Formular für Feedback
• 0 – Accesskey-Übersicht

In wie weit sich diese Standards durchgesetzt haben ist nicht feststellbar, dennoch ist es als Grundlage sehr sinnvoll. Aufpassen sollte man bei Tastenkombinationen aufjedenfall, dass diese nicht in Betriebssystemen schon manifestiert sind, deswegen ist es besser Nummern dafür zu verwenden.

Keine Standard GUI (engl. Graphical User Interface) Elemente verändern

Es wäre nicht gut schon erlernte, bekannte Interface-Elemente zu verändern, wie z.Bsp.: eine Checkbox eines Formulares, diese sollte nicht anders aussehen als üblich.

Unbeständigkeit

Man sollte keine unterschiedlichen Befehle oder Wörter innerhalb der Applikation für die gleiche Funktion verwenden.

Kein wahrgenommes Bedienkonzept

Mit Affordance ist glaub ich gemeint, was der User mit einem speziellen Bedienelement bewirken kann. Wenn das nicht erkannt wird ists: schlecht.

Schlechtes Feedback an den User

Der User sollte während der Benützung der Applikation mit dieser im Dialog stehen, also über das Interface transparente Informationen bieten. Ist das System eine Beta Version z.Bsp. oder welche Schritte in der Entwicklung noch folgen werden.

Schlechte Fehlermeldungen

Fehlermeldungen sollen dem User nur erklären, dass ein Eingage oder Validierungsfehler vorliegt oder darauf zu achten, dass die Ausgaben von Systemfehlern informativ und gut erklärt sind.

Information nur 1mal angeben

Der User sollte die gleichen Informationen innerhalb des Interfaces nicht mehr als einmal eingeben müssen.

Nebenanwendungen

Sollte man innerhalb der gerade befindlichen Anwendung eine Zusatzanwendung verwenden, also z.Bsp. ein Layer-Formular innerhalb eines Formulares, sollten diese gut voneinander zu unterscheiden sein und sich nicht mit dem eigentlichen Formular stören.

Nicht anzeigen welchen Sinn das Eingegebene hat

Man sollte nur Eingaben im Interface anbieten, die dem User beschreiben oder zeigen welchen Sinn die Daten haben oder der Benützer sich zumindest vorstellen kann wofür die Informationen später im System verwendet werden.

Keine Anzeige des internen Systems nach Außen

Die Darstellung und Usability sollte nicht das interne System dahinter widerspiegeln. Aus Erfahrung kommt das häufig vor wenn gute Entwickler keinen Screendesigner im Team hatten ;)

Viele der genannten Punkte sind natürlich logisch, dennoch sind solche Hinweise gut, sich selber wieder in diese Richtung zu ermahnen.

Hier der ganze Artikel (engl.)

Viel Spaß!