Design-Refresh-Projekt – Release 2...Titelhierarchien und Verlinkungen vereinheitlicht Karussell erneuert Tabellen-Design optimiert Generell mehr Weissraum Autoren-Testing hat im

|| 10.03.2020Hochschulkommunikation / Informatikdienste

Design-Refresh-Projekt – Release 2

Vorinformation für Autoren

1


Agenda

Überblick Projektziele und -fortschritt

Corporate Design-Auffrischung

Der zweite Release

Autoren-Test und Vorbereitungen

Wie es weiter geht…

2


Projektziele «Design-Refresh»

Moderneres, zeitgemässes Erscheinungsbild der Webseiten der ETH Zürich Bessere User Experience für die Webseitenbesucher Verstärkter Fokus auf den Inhalt Etablierung eines kontinuierlichen Weiterentwicklungsprozesses für das

Web-Design Grössere Freiheiten bei der Gestaltung der Inhalte für unsere internen Autoren Umsetzung des weiterentwickelten Corporate Design

Der Aufwand für die internen Autoren soll möglichst gering ausfallen

3


Die Vision 2022 – Designprinzipien

4

Besucher willkommen heissen

Einfachheit statt Komplexität

Innovation spürbar machen

Touchpoints der Zukunft

Learn and adapt

Flexibilität


Vision 2022

5

WORK IN PROGRESS


Die Vision - Beispielseiten

6

WORK IN PROGRESS


Der erste Release

7

Go-Live am 9. Januar 2020


Der erste Release

8

ETH-Schrift (Din Next) eingeführt Grauer Hintergrund entfernt Titelhierarchien und Verlinkungen vereinheitlicht Karussell erneuert Tabellen-Design optimiert Generell mehr Weissraum

Autoren-Testing hat im Dezember 2019 stattgefunden - Feedbacks in Release 1 eingeflossen


Weiterentwicklung Corporate Design

9


Weiterentwicklung Corporate Design

10

Stärkere Verwandtschaft zwischen Print und online

Corporate Design soll grosszügiger und heller werden

Logo und Typografie sind schwarz auf weissem Hintergrund

Farbflächen punktuell im Inhalt


Absenderverhalten

11

Absender bezeichnet immer die Hochschule (oberste Ebene) und den konkreten Absender des jeweiligen Kommunikationsmittels (unterste Ebene)


Farbkonzept

12

Die bestehende Farbpalette bleibt bestehen. Auf Hellgrün (ETH 10) wird allerdings zukünftig verzichtet. Die Verwendung der Farbe Corporate Blau wird nicht mehr eingeschränkt.


Der zweite Release

13

Überarbeitung Header (Einführung neues Corporate Design)

Anpassung Label-Farbe Karussell

Neuer Footer

Neues Konzept für die Subnavigation (Entschlackung von regulären Inhaltsseiten; Fokus auf Inhalt)

Erste Überarbeitung Such-Input

Umstellung des Grids (Zusammen-legung von Release 2 und 3)


Die Veränderungen: Header

14

Logo ist neu überall schwarz aufweissem Hintergrund Farbe wandert in den Content

(in einem ersten Schritt in Karussell Slide) Organisations-Breadcrumb (bis-

her auf hellgrünem Hintergrund auf Ebene des Karussells) wandert in die Metanavigation Nur noch direkte Absender im

Seitentitel Header hat nur noch

Orientierungsfunktion Quick-Links werden neu im

Footer dargestellt


Die Veränderungen: Header

15

Mobiler Header ebenfalls schwarz auf weissem Hintergrund Service-Navigation unterhalb

der Hauptnavigation mit Login-Button, Kontakt-Link und Links auf Alumni, Studierendenportal und Services & Ressourcen


Die Veränderungen: Navigation

16

Die neue Fly-Out-Navigation erlaubt einen besseren Überblick über die ersten drei Ebenen der Website Neue Unterpunkte werden sichtbar ->

Potential, um Informationsarchitektur zu hinterfragen und evtl. neu zu strukturieren bzw. zu verschlanken


Die Veränderungen: Footer

17

Der Footer wurde stark erweitert Bisher im Header platzierte

Links sind neu im Footerplatziert Überblick über Social-Media-

Präsenzen Neue Möglichkeit,

Kontaktinformationen direkt im Footer einzupflegen Direktzugriff auf alle

Departemente


Footer: Konfiguration Kontaktinformationen

18

Kontaktinformationen können direkt im Footer (einmalig auf der Homepage) konfiguriert werden Wenn Kontakt-Box im Footer

nicht konfiguriert ist, wird der Link auf die bestehende Kontakt-Seite dargestellt Zusätzliche Textkomponente in

der rechten Spalte für weitere Informationen (z.B. Öffnungszeiten)


Footer: Konfiguration Social Media / RSS

19

Social Media Icons und RSS Feed können in den Seiteneigenschaften der Homepage konfiguriert werden


Subnavigation / Breadcrumb

20

Subnavigation neu eingeklappt auf der linken Seite der Seite Diese zeigt nur Seiten auf der

gleichen Ebene und Unterseiten an Breadcrumb oberhalb des

Seitentitels zeigt Positionierung auf der Webseite an

Fokus soll verstärkt auf den Inhalt gerichtet werden; erster Schritt zur Umsetzung der Vision


Autoren-Testing

21

Alle Webseiten werden ab dem 12. März wieder über responsive.ethz.ch erreichbar sein Feedback-Button zum Melden von

Unstimmigkeiten, Bugs Aktuelle Inhalte können und sollen im

neuen Design getestet werden Geplanter Go-Live am 22. April 2020

Tipps für Go-Live: (Haupt-)Navigation testen Wichtige Links in den Content auf der

Startseite Bilder prüfen bzw. ergänzen


Wie geht es weiter… Programm Online-Kommunikation 2022

22

1. Quick Wins

2. Backlog & Kundenwünsche

3. Content

4. Langfristige Vision

5. Design

6. Monitoring / Performance Mgmt

7. News

8. Suchen & Finden


Wie geht es weiter… Programm Online-Kommunikation 2022

23

1. Quick Wins

2. Backlog & Kundenwünsche

3. Content

4. Langfristige Vision

5. Design

6. Monitoring / Performance Mgmt

7. News

8. Suchen & Finden

|| 24.02.2020

Timing: Programm «Online-Kommunikation 2022»

2019 2020 2021 2022

Paket 2: Backlog & KundenwünscheAbbau & Kommunikation Langfristige Sicherstellung der Kapazitäten für Weiterentwicklung / Backlog-Management

Paket 3: Content

Integration SoMe (in CS integriert)

Paket 4: Langfristige Vision

4a Analyse Studierende

4b Content Repository

Paket 5: Design

Konzept Umsetzung: Etappe 1

Paket 6: Monitoring / Performance ManagementPflichtenheft Tool Implementierung Tool & Nutzung Analytics-Ressourcen

Paket 7: ETH NewsAnforderungen ETH News Umsetzung ETH News Newsletter / News-Alert

= Lead ID

Prüfung Google Analytics

Umsetzung: Etappe 2 Umsetzung: Etappe 3

Bet

rieb

Wei

tere

ntw

ickl

ung

Aufbau Analytics-Stelle

= Lead ID & HK= Lead HK

Paket 8: Suchen & Finden dank AI

Initialisierung tbd tbd

Content-Strategie


Vielen Dank für eure Unterstützung!

25

Documents

Design-Refresh-Projekt – Release 2...Titelhierarchien und Verlinkungen vereinheitlicht Karussell erneuert Tabellen-Design optimiert Generell mehr Weissraum Autoren-Testing hat im