Gestaltungs-Hinweise für WIM-Anwendungen
<2014-06-28>
Im Prinzip bietet eine mit dem WIM-System sehr große Freiheiten beider Gestaltung. Um jedoch eine bessere Nutzbarkeit zu erreichen, sollten einige Grundregeln beachten werden.
Warum gibt es diese Gestaltungs-Hinweise?

Die Gestaltung von Nutzerschnittstellen bei Computerprogrammen, Internetpräsenzen und Apps unterliegt einem gewissen Wandel (und durchaus auch "Mode-Trends"). Zum einen werden mehr wissenschaftliche Erkenntnisse zu den Fähigkeiten und Möglichkeiten der Nutzer bekannt und berücksichtigt. Zum anderen hat sich die Art der "Computer"-Nutzung erheblich geändert - nicht zuletzt wegen des massiv zugenommenen Einsatzes von relativ kleinen, meist "hochkant" betrachteten Displays der Smartphones und der "Touch"-Bedienung. Mit den aufkommenden "Smart-Watches" und dem verstärkten Einsatz von Sprach-Ein- und Ausgabe sowie dem Vordringen "der Computer" in immer mehr Lebensbereiche und den noch leistungsfähigeren Grafik-Prozessoren werden sich die Anforderungen nochmals verändern.

In den Weiten des Internets gibt es bereits zahlreichye "Style Guides" etc. zu finden. So beispielsweise für Firefox OS, Windows Phone, Google Android-Apps oder Apple iOS. Allen gemeinsam ist wohl, dass auch die umfangreichsten noch "unvollständig" sind und oft Partikularinteressen folgen bzw. historischen Ballast mit sich führen.

Die Gestaltungs-Hinweise für WIM-Anwendungen sind ebenfalls "unvollständig". Es werden vorzugsweise solche Hinweise gegeben, die im Kontext des WIM-Systems als besonders relevant erscheinen, anderen Style Guides widersprechen oder die besonderen Fähigkeiten des W(M-Systems berücksichtigen.

Worauf sollte man beim Design besonders achten?

Es ist gute Praxis geworden, dass die Schriftgröße bei den Internetbrowsern leicht benutzerspezifisch eingestellt werden kann. Das Design einer App oder Internetpräsenz sollte daher möglichst keine Schriftgrößen in absoluten Angaben (mm, pt, pc, inch) vorsehen. Pixel-Angaben sollten sowieso vermieden werden, weil zum einen die Display-Auflösungen heutzutage zwischen den verschiedenen Geräten sehr unterschiedlich sind und zum anderen bei den Internetbrowsern "1px" nicht mehr gleich "1 Pixel" (also ein Darstellungspunkt auf dem Display), sondern auf 1/96 Zoll festgeschrieben ist, weil leider versäumt wurde, rechtzeitig die verschiedenen Bildschirm-Auflösungen zu berücksichtigen und "alte" Internetpräsenzen auch auf hochauflösenden Displays noch gut erkennbar sein müssen.
=> Die Schriftgrößen sollten immer in "em" bzw. "rem" oder als Prozentwert notiert werden. (Für Android-Apps wird die Angabe von "sp" empfohlen; siehe dazu auch "Längen-Einheiten bei CSS")

In speziellen Fällen kann es sinnvoll sein, auch die Größe von Grafiken abhängig von der Schriftgröße zu machen. So , wenn eine Grafik ähnlich einem Buchstaben im Textfluss eingebaut ist.

Für alle anderen Abmessungen sollten in der Regel "absolut" festgelegte Werte (mm usw.) verwendet werden, damit die Darstellungen - insbesondere bei Touch-Eingabe - passend zur Fingergröße bleiben. Die bei Android-Apps oft verwendete Einheit "dp" kann einfach in mm übersetzt werden: 1dp = 0.16mm . Das verstehen dann alle Browser. Angaben in "px" sind derzeit die Basis für die browser-internen Berechnungen. Darum kann man "px" derzeit noch nicht zu Grabe tragen.

Bei der Breite von Text-Blöcken sollte man anstreben, dass ca. 40 bis 60 Zeichen in eine Zeile passen. Nur wenn die Zahl der Spalten automatisch angepasst wird, sollte das Maximum bei 70 Zeichen pro Spalte liegen - daraus ergibt sich ein Minimum von ca. 35 Zeichen pro Spalte.

W... ?

...

Welche Aspekte sollten noch in die oben stehenden Abschnitte eingearbeitet werden?
  • ...
Themen hierzuAssciated topics:

CSS3 Darstellungen beim Client Für Modul-/Layout-Entwickler HTML

Das könnte Sie auch interessierenFurther readings:
Responsive Design
<2015-01-03>
Unter der Bezeichnung "responsive design" oder "adaptive layout" etc. werden Verfahren zusammengefasst, mit deren Hilfe die Darstellung von Inhalten automatisiert an verschiedene Randbedingungen (Display-Größe, Geräte-Art, ...) angepasst werden kann.   Mehr »
Wie können CSS-Regeln im Polymer-Kontext eingesetzt werden?
Von: @VB <2016-10-02>
Die Style-Regeln gelten bei Web-Komponenten standardmäßig nur "lokal" im Bereich der Komponente und haben fixe Werte. "Globalere" Geltungsbereiche (cross-scope styling) und Änderungen können jedoch auch realisiert werden.   Mehr »
Anordnung von WIM-App-Modulen
<2013-03-28>
Innerhalb eines (BOX-)Moduls können Module in verschiedener Art und Weise angeordnet werden. Dieser Beitrag geht näher darauf ein.   Mehr »
Welche Aspekte sind bei mehrsprachlichen Informationsangeboten besonders relevant?
Von: @VB <2016-10-03>
Bei der Nutzung und dem Betrieb mehrsprachlicher Informationssysteme und Internetpräsenzen sind einige Anforderungen zu beachten. In diesem Dokument werden sie aus der Anwender- und Betreiber-Perspektive diskutiert.   Mehr »
Steuerung der Darstellung von Objekten
<2019-02-03>
Das openWIM-System bietet die Möglichkeit, die Darstellung von Themen, Dokumenten, usw. in weiten Teilen zu gestalten, ohne dass dazu Änderungen im Programmcode oder an (HTML-)Vorlagen nötig sind.   Mehr »
Aufbau einer Internetpräsenz mit dem WIM-System
<2013-08-04>
Mit dem WIM-System können kleine, überschaubare Internetpräsenzen leicht aufgebaut werden, aber auch sehr umfangreiche. Diese Info soll einen Überblick über den Aufbau des WIM-Systems und das Zusammenspiel seiner wichtigsten Komponenten geben.   Mehr »
Was ist die Rolle der "Dialoge" (einschließlich "Meldungen") im openWIM-System?
<2015-04-05>
Bei Darstellungen von Dokumenten, Themen usw. sowie zur Gesamtdarstellung können bei bestimmten Anlässen "Dialoge" (im einfachsten Fall "Meldungen") überlagernd dargestellt werden.   Mehr »
Wie werden Infos oder Themen sichtbar gemacht?
<2014-05-24>
Bei verschiedensten Anlässen wird es notwendig, bestimmte Moduldarstellungen für die Nutzer sichtbar zu machen. Dieses kann beispielsweise durch Scrollen oder intransparent machen geschehen,
Hier werden die dabei verwendeten Verfahren beschrieben.
   Mehr »
Wie geschieht das Fokus-Handling im WIM-System?
<2014-05-21>
Die Interaktionen der Nutzer mit der WIM-App erfolgen in aller Regel mit einer ganz bestimmten Darstellungs-Komponente wie beispielsweise einem Texteingabefeld eines Moduls (bzw. seiner Darstellung).
Hier wird beschrieben, wie Änderungen des Interaktionsfokus gehandhabt werden.
   Mehr »
Wie geschieht die Koordination zwischen den Modulen im Client?
Von: @VB <2015-04-18>
Die Module zur Darstellung der Informationen sind zwar in einer hierarchischen Struktur miteinander verknüpft, doch die Aufgabenteilung ist sehr kooperativ geregelt. Jedes Modul agiert möglichst autonom in seinen eigenen Aufgabenbereich, stimmt jedoch alle Aktionen, die andere Module betreffen, mit denen ab.   Mehr »
Überwachung der Sitzungen beim openWIM-System
<2017-08-15>
Die Kommunikation der Apps im Browser mit dem Server wird über "Sitzungen" (sessions) geregelt. Mit Hilfe dieses Dokumentes kann eine Übersicht über die beim Server notierten Sitzungen erstellt werden - falls die dafür notwendige Berechtigung aktiv ist.   Mehr »
Wie kann der ordnungsgemäße Betrieb von openWIM-Systemen überwacht werden?
Von: @VB <2015-03-16>
Für eine zuverlässige Nutzung von openWIM-Systemen ist es unerlässlich, dass der laufende Betrieb "in Realzeit" überwacht werden kann. Der openWIM-Monitor wird dazu verwendet und hier beschrieben.   Mehr »
Internet-Links für openWIM-Entwickler
<2020-03-10>
In den Weiten des Internets gibt es etliche hilfreiche Internetpräsenzen und Dokumente, die für die Entwickler des openWIM-Systems hilfreich sein können. Hier sind einige aufgelistet:   Mehr »
WIM-Features und offene Wünsche aus Nutzersicht
Was bietet das WIM-System und was ist noch für mehr Zufriedenheit der Nutzer mit dem System zu tun ?
<2014-03-11>
Das WIM-System bietet für seine Nutzer verschiedenste Fähigkeiten. Aber es ist noch nicht "fertig" - und wird es wohl auch nie werden. In dieser Info sind vorhandene, unvollständige /unbefriedigende und geplante weitere Fähigkeiten sowie Meilensteine für die Realisierungsarbeiten aufgeführt.   Mehr »
Handlungsbedarfe für und Wünsche von Software-Entwicklern
Welche Punkte stehen als nächstes zur Bearbeitung an?
<2014-09-04>
Einige Probleme sind zu lösen, verschiedene Beteiligte /Nutzer der WIM-Systeme haben ihre "Wunschlisten". Hier werden die aus den Wunschlisten abgeleiteten "technischen" Aktionen /Implementationen aufgeführt - aber auch die "eigenen" Wünsche der Entwickler.   Mehr »
Neues und Geändertes beim openWIM-System
<2019-02-03>
In diesem Artikel werden Neuigkeiten Änderungen zu Funktion und Aussehen des openWIM-Systems aufgelistet.   Mehr »
Die Bildrechte werden in der Online-Version angegeben.For copyright notice look at the online version.

Bildrechte zu den in diese Datei eingebundenen Bild-Dateien:

Hinweise:
1. Die Bilder sind in der Reihenfolge ihres ersten Auftretens (im Quelltext dieser Seite) angeordnet.
2. Beim Anklicken eines der nachfolgenden Bezeichnungen, wird das zugehörige Bild angezeigt.
3, Die Bildrechte-Liste wird normalerweise nicht mitgedruckt,
4. Bildname und Rechteinhaber sind jeweils im Dateinamen des Bildes enthalten.