Einleitung

Der Stud.IP Styleguide ist stets “work in progress”.

Für aktuelle Designfragen bieten wir vom Styleguide-Team (André, Cornelis, Marcus, Marco) bis auf Weiteres jeden Donnerstag um 14.00 eine Design-Sprechstunde per Videokonferenz an. Die Konferenz findet in Skype statt.

Stud.IP begleitet die Studierenden durch viele Jahre ihres Studiums und ist für die Lehrenden ein ständiger Begleiter bei ihrer täglichen Arbeit. Dieser Umstand verlangt Stud.IP eine gewisse beständige Motivationsfähigkeit ab, dass neue Funktionen sich konsistent und harmonisch in das Gesamtbild einfügen und dass sich ständig wiederholende Arbeitsabläufe möglichst einfach und zeitsparend erledigt werden können. Diese und weitere Anforderungen spiegeln sich in der Stud.IP-Design Philosophie wieder, die diesen Style-Guide leiten soll:

Einfache Bedienbarkeit statt großem Funktionsumfang: Weniger ist mehr und daher soll Stud.IP nur jene Funktionen bereitstellen, die dem größten Teil der Nutzer hilft. Es gilt, die Bedürfnisse von 80% der Nutzern zu unterstützen, statt mit den besonderen Anforderungen der restlichen 20% die größere Gruppe zu überfordern. Ein gleicher Funktionsumfang für alle Veranstaltungen statt individuelle Anpassung an spezielle Bedürfnisse: Nutzer erhalten so eine verlässliche Umgebung unabhängig vom Einsatz in ganz unterschiedlichen Lehr- und Lernsituationen. Verlässlichkeit in der Bedienung: Gleichartige Funktionen sollen stets konsistent umgesetzt werden. Bewährte Muster kommen systemweit zum Einsatz. Neue Ansätze sollen konsequent genutzt werden, so dass die gesamte Software von einer Weiterentwicklung profitiert, auch wenn dieses einen größeren Aufwand bei der Umsetzung bedeutet. Behutsame Integration neuer Technologien: Die Nutzung neuer Internet-, Browser- oder Medientechnologien sollte nicht sollte nur verwendet werden, wenn ein Verbesserung für einen großen Teil der Nutzer technisch verfügbar ist. Gleichzeitig muss sichergestellt sein, dass ältere Konfigurationen in angemessenem Maße soweit unterstützt werden, dass eine Bedienbarkeit gewährleistet wird. Stud.IP ist ebenso auf mobilen Geräten wie auf Dektop-Rechnern vollständig benutzbar. Dabei gilt jedoch kein reines “mobile first” Prinzip: Mobile Seiten können an bestimmen Bereichen (insbesondere für Administratoren und Administratorinnen) eingeschränkte Funktionalitäten bieten.

Vier allgemeine Gestaltungsprinzipien für Stud.IP

“…the basic principles of design that appear in every well-designed piece of work.”

Robin Williams, The Non-Designer’s Design Book

Visuelle Gestaltung

Bezüglich der visuellen Gestaltung von Elementen innerhalb einer Seite gibt es viel zu beachten. Eine einfache Möglichkeit die Nutzbarkeit der jeweiligen Seite schnell zu erhöhen, ist die Beachtung der vier C.R.A.P.-Prinzipien:

• Kontrast (Contrast)
• Wiederholung (Repetition)
• Ausrichtung (Alignment)
• Nähe (Proximity)

Die im Folgenden vorgestellten Regeln gibt es auch als Poster Attach:studip-design-poster-final.pdf.

Kontrast (Contrast)

• Kontrast dient als gestalterisches Mittel, um verschiedene Seitenelemente klar unterscheidbar voneinander abzuheben.
• Kontrast kann dazu verwendet werden, um auf wichtige Inhalte zu fokussieren.
• Nicht gleiche Elemente sollten sich deutlich voneinander unterscheiden.
• Kontrast kann über verschiedene gestalterische Elemente realisiert werden z.B. Schriftart, Farbe, Größen, Formen, Nähe, etc.

Negativbeispiele

• Dateien hochladen in Veranstaltungen - 9 gleichaussehende Button in einer Reihe

Repetition (Wiederholungen):

• Wiederholungen schaffen Konsistenzen im System
• Ein konsistentes Design verbessert die Nutzbarkeit des Systems
• Konsistenzen können durch den wiederholten Einsatz verschiedenster gestalterischer Elemente erzeugt werden: ** Abstrakt: Menüstrukturen, Funktionsabläufe ** Konkret: Icons, Schriften, Bezeichnungen

Beispiele

• Hauptnavigationsleiste bleibt gleich
• Footer bleibt gleich
• Infobox/Sidebar

Negativbeispiele

• verschiedene Suchformularvarianten bei der Personensuche

Ausrichtung (Alignment):

• Inhaltselemente sollten nicht willkürlich auf einer Seite platziert, sondern an anderen Elementen horizontal und vertikal ausgerichtet sein. Tipps
• Text sollte links- oder rechtsbündig ausgerichtet sein, aber nicht beides gleichzeitig auf einer Seite.
• Abstände sollten gleichmäßig sein.
• Kein rechts ausgerichteter Text in einer rechten Seitenspalte. Dies erzeugt zu viel Whitespace.
• Hilfslinien zeichnen, Abweichungen festzustellen

Negativbeispiel

• Assistent zum Anlegen von Veranstaltungen

Nähe (Proximity)

• Inhaltselemente, die nah beieinander stehen, erwecken den Eindruck, dass sie zusammen gehören:
• Verwandte Inhaltselemente sollten daher räumlich nah zueinander gruppiert werden.
• Zwischen unterschiedliche Inhaltselementen sollte genug Abstand vorhanden sein, weil sonst ein Eindruck von Zusammengehörigkeit erweckt wird.
• Die Gruppierung der Elemente erhöht die Übersichtlichkeit und Inhalte werden besser strukturiert.

Negativbeispiel

• Gruppenverwaltung - TeilnehmerInnen einer Veranstaltung oder Kalender/Adressbuch - Button zum Hinzufügen zu einer Gruppe ist zu weit weg

Weiterführende Informationen

• http://www.userfocus.co.uk/articles/A_CRAP_way_to_improve_usability.html
• http://www.dailyblogtips.com/crapthe-four-principles-of-sound-design/
• http://lab.christianmontoya.com/designing-with-crap/designing-with-crap-cc.pdf
• http://www.colorado.edu/AmStudies/lewis/Design/graprin.htm#summary
• http://blog.teamtreehouse.com/how-crap-is-your-site-design