Inhalt – anwendbar.ch

Alternativen zum Homepage-Slider

Renato — Fri, 19 Jan 2018 16:01:54 +0000

Im Beitrag “Slider – Bühne frei oder Abgang?” wurde auf die Vor- und Nachteile von Slidern/Karussellen/Bühnen (folgend Slider) eingegangen. Unbeantwortet blieb, welche Alternativen es zu diesen Interaktionselementen eigentlich gibt. Dieser Artikel geht genau dieser Fragestellung nach.

Um sich dem Thema anzunähern wurden in einem ersten Schritt bekannte und (vermutlich) stark frequentierte Schweizer Websites auf deren Lösungsansatz hinsichtlich des Slider-Einsatzes (oder eben nicht) analysiert. Hinweis: Alle Screenshots wurden im Oktober 2017 gemacht.

Screenshot	Beschreibung
Screenshot www.zurich.ch - Homepage Sliderbereich	Zürich Versicherungs-Gesellschaft AG Verzichten auf einen animierten Slider. Anstelle dessen wird ein grosses Headerbild, mit dazugehörender Headline und zwei integrierten Handlungsaufforderungen eingesetzt. Interessant sind zudem die drei darunterfolgenden, vom Bild abgesetzten Links, welche die Benutzenden direkt bei ihren Bedürfnissen abholen sollen.
Screenshot www.20min.ch - Homepage Sliderbereich	20 Minuten Kein Slider im Einsatz - stattdessen werden einzelne durch Bildgrösse gewichtete Thementeaser eingesetzt. Dabei werden unterhalb der Teaser immer Links zu ähnlich gelagerten Artikel geführt.
Screenshot www.zalando.ch - Homepage Sliderbereich	Zalando Schweiz Ebenfalls: Slider gleich Fehlanzeige. An seiner Stelle wurde ein grosses Bild zu den Herbstaktionen eingefügt. Mit Klick auf das Bild gelangt man direkt zu eben diesen Aktionsangeboten. Direkt unterhalb des Bildes folgt eine Handlungsaufforderung "Jetzt shoppen".
Screenshot www.roche.ch - Homepage Sliderbereich	Hoffmann-La Roche Ltd Auch Roche verzichtet auf einen animierten Slider. Auf der Startseite ist eine grossflächige Aufnahme von Basel und dem Rhein zu sehen, welche die Zugehörigkeit zu Schweiz unterstützt. Als erster Contentblock direkt unterhalb des Bildes, wird festgehalten, was die Kerngeschäfte des des Unternehmens sind. Weiter rechts werden diese Einträge ergänzt durch Links zu den jeweiligen Angeboten aus Diagnostik und Pharma.
Screenshot www.swisscom.ch - Homepage Sliderbereich	Swisscom (Privatkunden) Auch Swisscom setzt keinen Slider mehr ein. Stattdessen ist ein aktuelles Handyangebot geführt, welches direkt über Klick auf die Fläche oder eine Handlungsaufforderung die innerhalb des Bilder angebracht ist, angeklickt werden kann. Direkt unter dem Element wird man in der Swisscom-Welt willkommen geheissen und entsprechende Verlinkungen zu weiterführenden Informationen angeboten.
Screenshot www.srf.ch - Homepage Sliderbereich	Schweizer Fernsehen Die Website des Schweizer Fernsehen kommt ebenfalls ohne Slider aus. Die Startseite ist hauptsächlich mit Teaserboxen (Überschrift, Bild, Anriss) besetzt. Interessantes Detail: Bei teil Artikeln ist ein Icon überlagernd im Bildbereich eingesetzt. Das Icon signalisiert, dass die Benutzenden an Media-Assets (bsp. Video, Galerie etc. auf der Artikelseite erwarten.
Screenshot www.sonova.ch - Homepage Sliderbereich	Sonova Endlich wieder einmal ein Slider. Sonova setzt das Element direkt unter der Hauptnavigation ein. Der Slider zeigt immer einzelne Themen mit Überschrift, Kurztext und Bild. Als Navigationselemente stehen die "obligaten" Punkte, sowie Pfeile am linken und rechten Brwoserrand zur Verfügung. Die Pfeile erscheinen jedoch nur dann, wenn die Benutzenden mit dem Mauscursor in Sliderbereich "fahren".
Screenshot www.che.sika.com - Homepage Sliderbereich	SIKA Ein klassischer Slider. Die Sujets ändern sich periodisch oder können mit den Navigationselementen unten links angesteuert werden. Fahren die Benutzenden mit dem Mauscursor über das Element, so erscheinen unterhalb des Teasertextes oben links zusätzlicher Inhalt. Das Objekt kann, wenn es auch eine explizite Handlungsaufforderung aufweist, an einem beliebigen Ort geklickt werden, um auf die Detailseite zu gelangen.
Screenshot www.nzz.ch - Homepage Sliderbereich	NZZ Auf der NZZ-Startseite wird kein Karussell eingesetzt. Die Online-Version der Tageszeitung zeigt ein grosses Bild mit Überschrift und einleitendem Kurztext.
Screenshot www.nestle.ch/de - Homepage Sliderbereich	Nestlé Auf der Startseite von Nestlé wird ein Slider eingesetzt der mit verschiedenen Themen bespielt ist. Auch hier wechseln sich die Sujets automatisch nach einem vorgegeben Zeitintervall ab, oder die Benutzenden interagieren über die Pfeile ganzen in den Bildecken rechts und links oder der Punktnavigation.
	Nespresso Auf der Startseite wird ein Slider eingesetzt, welcher "nett" in das Gesamtdesign eingebunden ist. Die einzelnen Slides wechseln automatisch und beinhalten immer eine Handlungsaufforderung. Interessant ist die Thumbnail-Ansicht (mit Texthinweis), wenn die Benutzenden mit dem Cursor über die Punktnavigation fahren.
Screenshot www.leshop.ch - Homepage Sliderbereich	LeShop.ch Auf der Startseite wird kein Slider angezeigt. Die Migros-Shoplösung präsentiert direkt Produkte die eingekauft werden können.
Screenshot www.digitec.ch - Homepage Sliderbereich	digitec.ch digitec hat sich ebenfalls vom Slider verabschiedet. Stattdessen wird ein grösser Bildbereich angezeigt, in welchem ein Produkt angezeigt wird.
Screenshot www.credit-suisse.com/ch/de.html - Homepage Sliderbereich	Credit Suisse Die Grossbank setzt auf der Startseite auf das Slider-Objekt. Das Karussell unterscheidet sich aber insofern von anderen Lösungen, als dass es zwar mehrer Slides aufnimmt, diese jedoch nicht automatisch wechseln. Ein Slidewechsel ist ausschliesslich über eine Benutzendeninteraktion möglich. Die Links auf die Inhaltsseite ist auf dem Titel und dem "Zum Artikel >" hinterlegt - was die Navigation nicht vereinfacht.
Screenshot http://new.abb.com/ch - Homepage Sliderbereich	Credit Suisse Auf der ABB-Website wird (ebenfalls) kein Slider eingesetzt. Das Unternehmen arbeitet lediglich mit einem grossen Bild bzw. einem dazugehörenden aktuellen Thema.

Fazit der Analyse

Es ist offensichtlich: Das Sliderobjekt wird nur noch zurückhaltend eingesetzt. Es hat nicht mehr die Verbreitung wie vor drei bis vier Jahren, als quasi keine Website vom Stapel ging ohne Slider. Im Rahmen der Überprüfung konnte nicht festgestellt werden, ob es gewisse Branchen/Bereich gibt, welche noch auf das Objekt setzen oder eben nicht. Vielmehr scheint es so, als dass sich die Website-Betreiber zunehmend den Nachteilen des Elemente (siehe dazu “Slider – Bühne frei oder Abgang?“, Absatz Nachteile von Slidern) bewusst werden bzw. der “fancy Bildwechseleffekt” langsam aber sicher ausgedient hat.

Alternativen zum (Homepage-)Slider

Welche Darstellungsoptionen gibt es aber eigentlich zum Slider? Im Folgenden werden einige Anwendungsbeispiele gezeigt, die Orientierung bieten und gleichsam Aussagekräftig sind.

Option 1: Nur Text (typografische Lösung)

Beispiel: www.team23.de (Stand 01.02.2018)

Es muss nicht immer ein Bilder oder ein Video sein. Manchmal reicht nur ein aussagekräftiger Text um eine Nachricht zu kommunizieren. Sicherlich unterstützt im oben aufgeführten Beispiel das grosszügige Hintergrundbild den Text.

Option 2: Bild mit Headline und Teasertext

Beispiel: http://www.faz.net/aktuell/ (Stand 01.02.2018)

Ein grosses Bild, ergänzend mit einführenden Textinformationen – ohne Bildwechsel. Dieser Lösungsansatz ist häufig auf Seiten von Medienhäuser zu sehen.

Option 3: Bild mit Handlungsaufforderung

Beispiel: www.wwf.ch (Stand: 01.02.2018)

Ein grosses, “starkes” Bild ergänzt mit einer Headline, einem Teaser und eine Handlungsaufforderung.

Option 4: Bild/Video mit Eingabeaufforderung

Beispiel: www.ryte.com (Stand: 01.02.2018)

Den Benutzenden direkt die Möglichkeiten geben eine Interaktion zu tätigen. Auf der Website ryte.com erfolgt das mit einem Formularfeld, in welchem man sicher für einen Testaccount für das SEO-Tool einschrieben kann.

Eine weitere Anwendung könnte zudem sein, die Benutzenden über eine Frage, oder eine Art Konfigurator bei ihren Bedürfnissen abzuholen. Ein im Ansatz gut umgesetztes Beispiel ist auf der Startseite der FFHS zu sehen:

Beispiel: www.ffhs.ch (Stand: 01.02.2018)

Mit der Abfrage nach dem passenden Studium werden die Besuchenden, welche sich nach einem Studiengang umsehen, direkt abgeholt und gelangen rasch zu den gewünschten Informationen.

Option 5: Auswahlmöglichkeit über Bildraster

Beispiel: https://www.georgiacenter.uga.edu/ (Stand: 01.02.2018)

Anstelle von einem grossen Bild können mehre Bilder eingesetzt werden. Im obigen Beispiel werden die Bildelemente nebeneinander angeordnet und bieten Schnelleinstieg zu (vermutlich) wichtigen Inhalten.

Natürlich geht es auch heftiger. Bei folgenden Beispiel wird ein ganzer Bildteppich als Einstieg eingesetzt.

Beispiel: www.viktoriaklein.de (Stand: 01.02.2018)

Option 6: Bewegtbild (Video)

Manchmal kann ein Bild eine Botschaft nicht alleine transportieren. In diesem Fall ist die Integration eines Videos oder einer Animation ein gute Möglichkeit, um die Aufmerksamkeit der Benutzenden zu gewinnen. Nur der “coolness” wegen sollten aber keine Videos eingesetzt werden. Die Bewegtbilder sollten etwas vermitteln, was über ein Einzelbild oder eine Diashow nicht möglich ist. Weiter sollte darauf geachtet werden, dass die Benutzenden auf über Alternativen (zum Beispiel Videotranskriptionen) an die Inhalte kommen.

Beispiel: https://www.american.edu/ (Stand: 01.02.2018)

Bitte auch daran denken: Gute gemachte Videos sind in der Regel aufwändig zu produzieren, beanspruchen Ladezeit und wenn sie von den Benutzenden einmal gesehen worden sind …

Welche Alternativlösung ist die Beste?

Wer hätte es gedacht: Ich kann/möchte an dieser Stelle keine Empfehlung abgeben. Keinesfalls würde ich auch kommunizieren, dass Sliderlösungen im allgemeinen zu verbannen sind. Im Zentrum der Überlegungen sollte immer die Anwendung bzw. die damit verbundenen Ziele /Absichten der Website stehen – natürlich ohne die Benutzenden-Perspektive zu vergessen.

Wichtig erscheint es mir, dass der Inhalt im Objekt “lebt”. Was nützt das “coolste” Video auf der Startseite, wenn es mehrere Monate auf der Website ist. Dieser Faktor muss zwingend in die Überlegungen mit einbezogen werden. Geht man beispielsweise davon aus, dass man das Element nicht häufig verändern kann/will, so sollte der entsprechende Bereich auch nicht allzu gross gewählt werden bzw. ehe auf “statische Lösungen” zurückgegriffen werden.

The post Alternativen zum Homepage-Slider appeared first on anwendbar.ch.

Texte für Websites verfassen – eine Herausforderung

Renato — Tue, 14 Apr 2015 07:46:13 +0000

Sie gehören zu Websites wie das Salz in der Suppe: Textinhalte. Schliesslich bilden eben diese Inhalte (in den meisten Fällen) den eigentlichen Kern eines jeden Internetauftrittes. Überspitzt formuliert bilden Gestaltung, Bildwelten, Navigation und Co. lediglich den Rahmen für die Texte. Passende Texte sind nachweislich auch dafür verantwortlich, ob sich ein Benutzender intensiver mit einer Website auseinandersetzt, oder ob er direkt zum nächsten Angebot weiter zieht.

Dabei ist das erstellen von mediumgerechten Texten nicht einfach. Eine Herausforderung besteht darin, Themen fachgerecht zu identifizieren bzw. aufzugreifen und für den Lesenden in verständlicher Form zu formulieren. Andererseits gilt es einige Rahmenbedingungen zu berücksichtigen, die mit “Webtexten” einher gehen. Auf diese Aspekte wir im Folgenden eingegangen:

Wie werden Texte im Web gelesen?

Verweilen Sie sich Sonntags auch mit der umfassenden Sonntagspresse? Die Sonntagszeitungen sind jeweils so umfangreich, dass man problemlos den ganzen Tag mit dem gründlichen Lesen verbringen könnte. So habe ich mir angewöhnt, zuerst die Teile zu lesen, die mich thematisch interessieren. Für diese nehme ich mir Zeit, wogegen ich die anderen Bunde nur überfliege und nach Überschriften und Leads Aussicht halte, die mich ansprechen. Im Internet wird aber noch viel selektiver gelesen. Es kann davon ausgegangen werden, dass rund 80 bis 90% der Benutzenden Texte nicht mehr sequentiell, sondern selektiv lesen. D.h. die Seiten werden “gescannt” und die relevanten Informationen (cherry-picking) werden gezielt gelesen.

Folglich handelt es sich um ein selektives Leseverhalten in Extremform. Die Gründe hierfür wurden bereits nachweislich eruiert:

Lesen am Bildschirm ist anstregender als das Lesen auf Papier und dauert deshalb rund 20 bis 25% länger. Die Benutzenden versuchen die darum die Zahl der lesenden Worte zu reduzieren.
Als interaktives Medium bietet das Internet den Benutzenden die Möglichkeit Hyperlinks zu klicken, durch Seiten zu scrollen, E-Mails zu schreiben, Dateien herunterzuladen etc. Dadurch ist der Benutzende ständig aktiviert, was das Lesen eines langen Textes nicht einfach macht.
Ein weiteres Problem ist der Überfluss an Informationen und die Unsicherheit, was deren Qualität betrifft. Rufen sie sich den letzten Kauf eines Produktes wie beispielsweise eine Digitalkamera vor Augen. Zuerst versucht man sie eine Übersicht zu verschaffen, in dem man möglichst viele Informationen, aus verschiedenen Quallen zusammenträgt. Erst wenn ein Überblick besteht ist der Benutzende bereit auch wirklich detailliert zu lesen und somit auch einer Website zu verweilen.

Drei regeln für gute Webtexte

Seit 1997 ist bereits einige Zeit vergangen, aber die damals aufgestellten goldenen Regeln von Jakob Nielsen und John Morkes haben heute noch Gültigkeit.

Mache Deinen Text “scanbar”
Schreibe kurz und präzis
Schreib objektiv und sachlich

Damit dies gelingt können die folgenden Tipps berücksichtigt werden:

Kundensicht einnehmen
Die Texte werden nicht für sich selber oder die Mitarbeitenden eines Unternehmens verfasst (ausgenommen Intranet/Extranet-Lösungen). Die Texte müssen den Kunden ansprechen und ihm wenn immer möglich einen Mehrwert bieten. Ein Perspektivenwechsel mit der Persona-Methode ist zu empfehlen.
Leserführung
Im Vorfeld sollte man sich Gedanken machen zu welchen Handlungen man die Besuchenden bewegen möchte. Dazu müssen die Absichten und Ziele der Benutzenden identifiziert sein. Es ist unbedingt darauf die achten, dass der Benutzende seine Ziele auch wirklich erreichen kann.
Textaufbau
Ein sicherlich zentraler Punkt um Seiten “scanbar” zu machen. Bewährt hat sich in diesem Zusammenhang Titel, Lead, Text. Dabei sollte ein Trichterprinzip angewendet werden: Der überliegende Text soll eine Zusammenfassung des des Folgetextes sein.
Titel
Der Headline kommt eine sehr wichtige Rolle zu, durch dass er Textstellen anführt und in den meisten Fällen auch visuell auffallender ausgezeichnet (z.B. Schriftgrösse) ist. Eine Kunst ist es, den Titel so zu formulieren, als dass er die wichtigsten Informationen beinhaltet und gleichzeitig auch aus SEO-Sicht sinnvoll ist.
Lead
Der Lead kann als Zusammenfassung des eigentlichen Textes betrachtet werden. Die Herausforderung besteht darin kurze und präzise Zusammenfassungen zu schreiben, welche die zentralen Botschaften beinhalten. Gleichzeitig spielt hier die SEO-Thematik wiederum mit: Die wichtigsten Suchbegriffe sind einzuarbeiten.
Gliederung
Der eigentliche Lauftext ist in kurze und überschaubare Paragraphen zu gliedern – angeführt von einem semantisch korrekt gesetzten Titel. Idealerweise werden einzelen Gedanken nicht gemeinsam in einem Abschnitt “abgefeuert”, sondern jede einzelne Botschaft in einem einzelnen Abschnitt abgehandelt. Zudem sollte darauf verzichtet werden Textblöcke die sich inhaltlich einem Thema widmen auch verschiedene Seiten zu verteilen – dies verunmöglicht es dem Benutzenden einen Artikel als Ganzes zu scannen.
Hervorhebungen
Werden diese gezielt und damit verbunden dezent eingesetzt stellen helfen sie dem Benutzenden ebenfalls beim “abscannen” der Texte. Fett-markierte Textstellen signalisieren zudem den Suchmaschinen, dass es sich um zentrale Textbausteine handelt. Zu vermeiden sind animiertes Textstellen, Unterstreichungen, unterschiedliche Textgrössen. Schriftstile und -farben.
Textlänge
Gegenüber den Printmedien sollten Onlinetexte nur halb so lange sein. Kurz und präzise Texte werden im Internet nachweislich besser aufgenommen.
Textstil
Wie einleitend erwähnt, muss davon ausgegangen werden, dass die Lesenden aufgrund der Möglichkeit mit geringerer Aufmerksamkeit sich durch die Seiten lesen. Entsprechend wichtig ist es einen Schreibstil einzusetzen, der einfach zu lesen ist und eine klare Sprache wiedergibt.
Glaubwürdigkeit
Gerade wenn eben Brand oder der Meinungsmacher fehlt handelt es sich hierbei um zentrales Thema. Grundsätzlich misstrauen Benutzende Inhalten die subjektiv wirken und künstlich überrissen wirken. In diesem Zusammenhang hilft die bewusste Wahl einer sachlichen Sprache, welche die Informationen sachlich wiedergibt. Zusätzlich können Verweise zu weiterführenden Informationen bzw. Quellenangaben angebracht werden. Keinesfalls aber sollen Webtexte wie wissenschaftliche Arbeiten anmuten.
Seitentitel, Seitenbeschreibung, Schlüsselwörter
Man könnte meinen, dass diese Themen reine SEO-Aspekte beinhalten. Tun sie aber nicht ausschliesslich, da sie den Benutzenden anderweitig dienlich sind. Der Seitentitel erscheint oft in den Suchmaschinen, in den Bookmarks und dient als Navigationshilfe. Die Seitenbeschreibung wird von vielen Suchmaschinen direkt im Anschluss an den Seitentitel angezeigt. Die Bedeutung der Keywords (Schlüsselwörter) sollten hinlänglich bekannt sein in Zusammenhang mit der Auffindbarkeit von Webangeboten über Suchmaschinen.
Für Menschen nicht Maschinen
In Anlehnung an Punkt 11 scheint es mir aber wichtig, darauf hinzuweisen, dass Webangebote schlussendlich für Menschen geschrieben werden. Zur Zeit herrscht ein richtiger “Keyword-Wahn”, da diese angeblich für Erfolg bzw. Misserfolg einer Website verantwortlich ist. Klar: Eine Website kann noch so gut sein – wenn sie nicht gefunden wird sind alle Bemühungen umsonst (oder aber es muss eine kostenintensive Bewerbungskampagen angestossen werden). Was aber bringt eine Onlinepräsenz, wenn die darin enthaltenen Inhalte nicht auf die Zielgruppen ausgerichtet sind. Die Kunst besteht darin einen passenden Mittelweg zu finden, der es ermöglicht primär die Erwartungen der Benutzenden tz erfüllen bzw. diese zu Handlungen zu bewegen, andererseits über ein gute “verarbeitetes “Keywording” die Seiten optimal für die Suchbots aufzubereiten.
Externe Texterstellung
Sofern Sie merken oder sich bereits bewusste sind, dass die Texterstellung nicht zu ihren Kernkompetenzen gehört, sollten Sie mit einem externen “Texter” zusammenarbeiten. Die Betonung liegt auf “zusammenarbeiten”, denn schlussendlich sind Sie es, der die Firma, die Dienstleistung, das Produkt kennt. Ein entsprechendes Briefing und regelmässige Feedbackrunden sind dementsprechend wichtig. Angesichts dessen, welche wichtige Funktion der Text im Rahmen eines Webprojektes einnimmt, sind die dafür anfallenden Kosten sicherlich vertretbar.

The post Texte für Websites verfassen – eine Herausforderung appeared first on anwendbar.ch.

Formulargestaltung – Teil 1

Pascal — Sat, 14 Mar 2015 11:14:35 +0000

Der lange Weg zum guten Formular …

Das Ausfüllen von (Web-)Formularen bereitet kaum jemandem Freude. Für die Benutzenden ist die Dateneingabe häufig mühsam und mit verschiedensten Hürden versehen. Dabei ist eigentlich nie das Ausfüllen des Formulars das Ziel, sondern was daraus folgt.

Leider wird der Gestaltung von Formularen oft zu wenig Beachtung geschenkt. Für meinen Arbeitgeber habe ich deshalb einen Leitfaden erstellt, welche ich in leicht angepasster Version hier in zwei Teilen veröffentliche.

Vor der Gestaltung

Nachdem Ziel und Zweck des Formulars bestimmt sind, sollte jedes Feld hinterfragt werden. Braucht es dieses Feld wirklich um an die benötigten Informationen zu gelangen? Verlangt das Feld zwingend eine Eingabe? Werden die “Bezeichner” zu den jeweiligen Formularfeldern durch die Nutzenden verstanden? Brauchen wir spezifische Eingabeformate für die Weiterverwendung – beispielsweise Datum, Uhrzeit, Postleitzahlen? Müssen dazu “Regeln” für die Dateneingabe aufgestellt werden

Den richtigen Feldtyp wählen

Die Effizienz und die Fehlerquote beim Ausfüllen eines Formulars hängen auch von der richtigen Wahl der Feldtypen ab. Bei jedem Feld muss überlegt werden, was die möglichen sinnvollen Eingaben sind und danach der entsprechende Feldtyp gewählt werden.

Den richtigen Feldtyp wählen

Die Effizienz und auch die Fehlerquote beim Ausfüllen eines Formulars hängen auch von der richtigen Wahl der Feldtypen ab. Bei jedem Feld muss überlegt werden, was die möglichen sinnvollen Eingaben sind und danach der entsprechende Feldtyp gewählt werden.

Bei den meisten Eingaben ist die Frage nach dem richtigen Feldtyp schnell beantwortet, aber eben nicht immer. Im folgenden werden einige Stolpersteine beschrieben.

Radiobutton vs. Dropdown-Liste

Beide Feldtypen erlauben eine Einfachauswahl aus einer Liste. Für lange Listen sind Dropdown-Listen besser geeignet als Radiobuttons, da sie deutlich weniger Platz in Anspruch nehmen und übersichtlicher sind. Bei der Auswahl zwischen nur zwei Möglichkeiten können Radiobuttons aber effizienter sein (z.B. Auswahl der Anrede/des Geschlechts) da die gesamte Auswahl auf einen Blick ersichtlich ist.

Es ist zu beachten, dass die Reihenfolge der Einträge einer Dropdown-Liste einer logischen Sortierung folgt. Bei einer langen Liste z.B. von Ländern kann es aber durchaus sinnvoll sein die zwei bis drei häufigsten Einträge an den Anfang der Liste zu setzen.

Sehr lang sollte die Liste der Einträge aber nicht werden, da sie sonst nicht mehr angenehm zu bedienen ist. Abhilfe kann hier z.B. das jQuery Plug-In Chosen schaffen, in dem es der Dropdown-Liste ein Suchfeld hinzufügt.

Dropdown-Liste mit Chosen (Quelle: http://harvesthq.github.io/chosen/)

Listen mit Mehrfachauswahl

Dieser Typ erlaubt sowohl eine Einfachauswahl wie auch eine Mehrfachauswahl und kann daher sowohl Radiobuttons wie auch Checkboxen ersetzen. Die Darstellung erscheint in einer scrollbaren Listenform und kann deshalb platzsparender sein als eben genannte Typen.

Da das Funktionsprinzip dieses Typs aber für viele Personen unklar ist, wird es nur selten eingesetzt. Zudem ist er in der Ausführung «Mehrfachauswahl» kompliziert zu bedienen. Nach Möglichkeit sollte auf den Einsatz dieses Typs verzichtet werden.

Felder gruppieren und sortieren

Die Eingabefelder sollen sortiert und gruppiert werden. Bei längeren Formularen werden die Gruppen optisch zusammengefasst werden. Dieses Zusammenfassen kann z.B. durch Zwischentitel geschehen oder auch durch das farbige Hinterlegen einer Gruppe. Dies führt zu einem noch stärkeren Gruppierungseffekt als mit Zwischentitel. Ein nicht zu unterschätzendes Problem bei dem Lösungsansatz mit den Zwischentiteln ist zudem die Suche nach einer passenden Bezeichnung.

Beispiel von Gruppenbildung durch farbiges Hinterlegen (Quelle: ricardo.ch)

Wie weiter

Im nächsten Teil zum Thema Formulargestaltung geht es um Feldbezeichner und Eingabehilfen.

Weiterführende Links

Blogbeitrag zur Formulargestaltung auf soultank.ch

Web Form Design von Luke Wroblewski

The post Formulargestaltung – Teil 1 appeared first on anwendbar.ch.