Gunnar Bittersmann: Zwei Grafiken klickbar machen

Beitrag lesen

@@Gunnar Bittersmann

Button oder Links, gute Frage. Ich bin für ein Link, denn ich möchte nur eine Ansicht wechseln, hierbei wird ein Update in der Datenbank durchgeführt.

Warum soll bei „nur eine Ansicht wechseln“ irgendwas in der Datanbank geändert werden?

Der Wechsel der Ansicht kann doch rein clientseitig erfolgen, ohne dass dazu der Server und ein Roundtrip involviert sein muss. Die angewählte Darstellungsart kann man auch in localStorage oder Cookie ablegen, damit der Nutzer beim nächsten Seitenaufruf wieder dieselbe Darstellungsart präsentiert bekommt.

Daher ist es egal ob ein Button oder Link ist?

Nein, das ist nie egal.

Links führen zu anderen Stellen im Web: zu anderen Seiten oder zu anderen Abschnitten auf derselben Seite.

Buttons lösen Aktionen aus: Abschicken eines Formulars, irgendeine JavaScript-Funktion aufrufen, …

Ein Wechsel der Ansicht dürfte eher in die zweite Kategorie gehören.

Man könnte auch argumentieren, dass Kachelansicht und Listenansicht verschiedene Seiten sind und ein Wechsel in der Browserhistory festgehalten werden sollte. Aber: nein …

Es sind zwei Darstellungsformen derselben Daten, d.h. derselben Seite. Und wenn die Daten schon beim Client sind, muss für eine andere Darstellung nichts vom Server neu geladen werden.

Den Wechsel der Darstellungsformen geschieht rein cleientseitig mit CSS. Dazu muss lediglich eine Klasse des Containerelements geändert werden. Dazu braucht man nur einen Button.

CodePen 1

Das Stylen des Buttons überlasse ich mal dir. Denkbar ist auch eine unterschiedliche Darstellung des Button je nach aktueller Darstellungsform, d.h. je nach Klasse des Containerelements.

Anstatt eines Buttons zum Wechsel der Darstellungsformen können auch Radiobuttons verwendet werden, die visuell versteckt werden und über deren Labels geschaltet werden.

CodePen 2

LLAP 🖖

--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory