Gestaltungstipps

Gestaltungstipps
für optimale Usability

 

Moderne Responsive Webseiten

Die Webportale unseres UniBw-Webauftritts werden demnächst in das neue responsive Design überführt, d.h. die Webseiten werden dann flexibel auf unterschiedliche Bildschirmgrößen angepasst.
Beachten Sie bitte beim Einrichten Ihrer Webseiten den "responsive" Grundgedanken - die Flexibilität der Seitengröße horizontal und vertikal.

So werden z.B. linke und rechte Spalten für kleine Bildschirme wie Tablets und Smartphones nach "unten" geschoben.

Weitere Tipps werden im folgenden aufgeführt.

 

Webseiten-Inhalte und ihr Nutzen für den Besucher

  • WAS?
    Welche Informationen soll ein Besucher (Besuchergruppen) bekommen?
  • WO?
    Der Besucher der Seite kennt keine Interna, weiss nicht, wo er relevante Informationen finden kann. Die Webseiten müssen also aus BESUCHERSICHT strukturiert und aufgebaut werden.

Layout / Formatierung  / Formulierung

Vermeiden Sie laaange Fließtexte, denn eine Webseite ist kein Buch oder Zeitungsartikel und sollte ihrem speziellen Medien-Charakter auch entsprechend eingesetzt werden.

Beim "Anschauen" einer Webseite "springen" die Augen über den Bildschirm. Nutzen Sie vermehrt die Darstellungsmöglichkeiten, die mit mobilen Layouts einhergehen:

  • stichpunktartige, übersichtliche Aufzählungen
  • Infoblöcke
  • Übersichten und Navigationselemente
  • kurze Sätze
  • nicht zu viele verschiedene Schriftarten, Schriftgrößen oder Farben



Bedenken Sie, dass Webseiten heute FLEXIBEL sein müssen, weil sie auf verschiedensten Monitorgrößen dargestellt werden:

  • flexibel horizontal (breite und verschmälerte Seiten auf Smartphones)
  • flexibel vertikal (das Scrollen ist durch Smartphones wieder aktuell)

Tabellen

Im Hinblick auf responsive Seiten sollten Tabellen-Größen unbedingt in % angegeben werden.

Momentan hat unser Editor noch eine Default-Einstellung für px. Diese Tabellen werden dann bei kleineren Monitoren nicht mehr vollständig angezeigt.

Sie können im Editor die Tabellen-Größe (bitte auch die Spaltengröße einbeziehen) unter "Tabellen-Eigenschaften" von px auf % umstellen:
-> verwenden Sie dabei bitte den Wert 98%, damit füllt die Tabelle annhähernd die Content-Breite aus!
 

Mobile First

In der Internet-Community werden Webseiten heute nach der Regel MOBILE FIRST designed.
D.h. man orientiert sich bei der Gestaltung des Aussehens von Internetseiten an den kleineren Bildschirmgrößen mobiler Endgeräte.
Sind die Webseiten für kleine Bildschirmgrößen gut darstellbar, können sie auch für die großen Desktop-Bildschirme übernommen werden.

Platzierung von Links

Auch bei Links sollten Sie die heutige Vielfalt an unterschiedlichen Bildschirmgrößen und neuen Techniken der Touch-Bildschirme berücksichtigen.

Vermeiden Sie Links innerhalb von Texten!

Wurden früher Links gerne innerhalb eines Textes platziert und waren dort auch über einen normalen Desktop-Bildschirm per Maus gut erreichbar, werden Links heute viel über Finger "angeklickt", z.T. dabei auf den kleinen Smartphone-Bildschirmen.

Links sollten deshalb heute deutlich abgesetzt AUSSERHALB des Texflusses gut erreichbar positioniert werden.

► Beispiel
 

Lange Ladezeiten

Vermeiden Sie große (hochaufgelöste) Bilder, die lange Ladezeiten nach sich ziehen.

Barrierefreiheit

Der Webauftritt der Universität der Bundeswehr München unterliegt der Barrierefreiheit. Informationen unserer Webseiten müssen auch für behinderte Menschen (u.a. sehbehinderte Menschen) zugänglich sein.
Achten Sie in diesem Zusammenhang vor allen Dingen darauf, dass Informationen NICHT AUSSCHLIESSLICH als Bild/Grafik oder als Video zur Verfügung stellen!

Zur Einhaltung der Barrierefreiheit sollten Sie z.B.

  • jedes Bild bzw. jede Grafik mit einmn "Alternativen Text" auszeichen (Feld in Einfügemaske)
  • Grafiken, die Abläufe enthalten, oder auch Organigramme zusätzlich erläutern
    (TIPP: Einfügen eines Links auf separate Seite im Webportal)
  • Informationen aus Videos ebenfalls erläutern

► Beispiele dazu

► weitere Infos zur Barrierefreiheit

 

 

--
Dipl.Inform. Ruth Blachnik
Rechenzentrum - Netzdienste
Universität der Bundeswehr München