New UI Design

[naltatis]

Hier kommt ein großes Redesign der UI am dem wir über die letzten Monate gearbeitet haben.

Ziele des Redesigns

• 🔌🚙 Klarere Trennung zwischen Fahrzeug und Ladepunkt
  • 🔄 Grundlage für manuellen Fahrzeugwechsel
  • 🚕🚗 Grundlage für Übersicht aller Fahrzeuge (aka Parkplatz)
  • ⚙️ Grundlage für Ladepunkt- und Fahrzeugkonfiguration
• 🌓 Dunkleres, kontrastreicheres Design (Darkmode wurde oft gewünscht)
• ⚜️ Eigener visueller Charakter (neue Typographie, Icons)

Technische Umbauten

• Migration von Vue 2 auf Vue 3
• Migration von vue-cli auf vite (schnellere Builds, weniger Dependencies, kleinere Bundles)
• Icon-Umstellung von Fontawsome auf Shopicons (💚 danke @markusrem)

Ausprobieren 📱💻🖥

Demo-Installation: http://demo-next.evcc.io
Docker-Image: naltatis/evcc:new_design (nur übergangsweise)

Neuerungen / Änderungen

Hinweis: Der Code im PR und die Screenshots enthalten teilweise Elemente und Funktionen die noch nicht komplett konzeptioniert oder implementiert sind. Sie sind hier aber bereits enthalten um die Richtung und nächsten Schritte des Design besser verstehen zu können. Über das temporäre 🧪-Symbol im Footer kann zwischen diese "kommenden Funktionen" eingeblendet werden. Konkret geht es um folgende Elemente:

• Vereinfachter Lademodus (Schnell, Günstig) - An/Aus und Min+PV werden über eine Einstellung (⠇) erreichbar sein.
• Parkplatz
• Manueller Fahrzeugwechsel (⠇, evtl. Drag&Drop)
• Manuelle Fahrzeugaktualisierung (↺) und Aktualitätsanzeige (vor 5 Stunden)

Übersicht

Phone

Tablet

Desktop

Header & Footer

Die schwarze Navigationsleiste mit dem Logo wurde entfernt. Das Logo wird im Footer neben der Versionsnummer angezeigt.

Bei Nightly Versionen oder verfügbaren Updates wird das Logo durch das entsprechende Icon ersetzt.

Nightly

Update

Verlinkungen zur Webseite, Doku, ... sind nun auf allen Breakpoints über den ㈢ Button erreichbar.

Ausstehnde Fahrzeug-Authentifizierungen (aktuell Mercedes) werden über ein rotes Badge am Button signalisiert. (cc @xantalor)

Energiefluss

Wie in der aktuellen UI erhält man beim Klick auf das Energieflussdiagramm detailliertere Informationen.

In der Legende werden nun die Energiequellen (IN, obere Icons) und die Verbraucher (OUT, untere Icons) getrennt dargestellt. Die vorherigen Icon-Pfeil-Kombinationen (bsp. 🔋«) konnten dadurch entfernt werden. In der Legende werden alle inaktiven Erzeuger/Verbraucher (Leistung == 0 kW) ausgegraut dargestellt. Dadurch ist es einfacher einen Überblick zu bekommen.

Tradeoff: Die neue Darstellung der Legende nimmt mehr Platz ein als die bisherige. Dafür zeigt sie jedoch auch alle relevanten Messwerte an und ist, gerade für neue Nutzer, einfacher verständlich. Die Legende ist nun auch auf großen Screens standardmäßig zugeklappt.

Icon minimiert zu Punkt
Hat ein Icon in der Legende keinen Platz mehr wurde es bisher ausgeblendet. Nun verwandelt es sich in einen kleinen Punkt.

Ladepunkt & Fahrzeug

Ladepunkt und Fahrzeug sind nun optisch besser voneinander getrennt. Die Ladegeschwindigkeit, Energiemenge und Dauer sind dem Ladepunkt zugeordnet und unabhängig vom Fahrzeug immer verfügbar.
SoC, Reichweite, Ladeziel und Zielzeit sind direkt dem Fahrzeug zugeordnet.
Jeder Ladepunkt wird als eigene Kachel angezeigt. Auf kleineren Screens (Phone, small Tablet) stehen die Kacheln nebeneinander und lassen sich horizontal wischen.

Auf etwas größeren Screens ist die nächste Kachel jeweils angeschnitten sichtbar.

Auf Desktopgröße wird das horizontale Karussell zu einem zweispaltigen Grid.

Statustext
Der Status der Ladung wurde bislang über Farbgebung im Ladebalken und kleinen Animationen (Phaseabschaltung) realisiert. Für geübte Nutzer war das klar genug. Nun haben wir den Status aber als eigenständigen Text mit in die Kachel aufgenommen. Damit ist einfacher zu erkennen warum gerade bspw. kein Ladevorgang stattfindet oder ob er demnächst gestoppt/gestartet wird.

Hier die Statusmeldungen aus dem Code:

      minCharge: "Mindestladung bis {soc}%.",
      waitForVehicle: "Ladebereit. Warte auf Fahrzeug.",
      charging: "Ladevorgang aktiv.",
      targetChargePlanned: "Zielladen geplant. Ladung startet bald.",
      targetChargeWaitForVehicle: "Zielladen bereit. Warte auf Fahrzeug.",
      targetChargeActive: "Zielladen aktiv.",
      connected: "Verbunden.",
      pvDisable: "Zu wenig Überschuss. Pausiere in {remaining}.",
      pvEnable: "Überschuss verfügbar. Starte in {remaining}.",
      scale1p: "Reduziere auf einphasig in {remaining}.",
      scale3p: "Erhöhe auf dreiphasig in {remaining}.",

Zielzeil
Die Zielzeit wird nun nicht mehr als Icon/Text angezeigt sondern reiht sich in das Ladeziel und den Ladestand ein.

Keine Zielzeit gewählt

Zielzeit gewählt

Ausbaustufen
Dieser Screen zeigt ein paar Neuerungen die in einem späteren Release kommen können.

Parkplatz

Im unteren Bereich des Layouts können später alle "nicht verbundenen" Fahrzeuge dargestellt werden. In den aktuellen Entwürfen wird hier kein horizontaler Slider verwendet. Stattdessen werden die Kacheln untereinander dargestellt. Feedback hierzu ist aber sehr willkommen.

Euer Feedback

Wir haben, zusammen mit den Kolleg:innen von H2D2 (Danke @markusrem 💚) viel Gedanken und Arbeit in diesen nächsten Designschritt gesteckt und haben bewusst entschieden keine "halbgaren" Zwischenstände hier zur Diskussion zu stellen, sondern das Ganze komplett durchzudenken. Bitte schaut es euch in Ruhe an und gebt Feedback wie ihr diesen Schritt findet, was ihr ändern würdet, aber auch gerne was euch besonders gut gefällt.

• Michael

[andig]

Die überarbeitete Phasenanzeige finde ich ehrlich gesagt nicht so gelungen. Da brauche ich eine Lupe.

Ich wäre fein die Ströme komplett entfallen zu lassen. Unser Ziel war nie, mehr Werte anzuzeigen. Deshalb kann ich auch mit Lupe leben.

[RTTTC]

I like that it shows phases, and even relative power per phase.

[andig]

Phases for sure! That is a huge improvement over the old design.

[RTTTC]

I would probably remove words “in” “out” from GUI
It would be more symmetrical.

It’s very intuitive without them - energy flows in from the top, flows out at the bottom.

[naltatis]

I would probably remove words “in” “out” from GUI

It would be more symmetrical.

It’s very intuitive without them - energy flows in from the top, flows out at the bottom.

Yes from a symmetry standpoint leaving them out would be better. But having the sides labeled makes it more explicit since it correlates with the labels.

I'd like to start with this, but it's definitely something we could discuss/change later when we are certain that it's really selfexplanatory even for non techies.

[Alestrix]

Judging from the demo this looks awesome! Will probably switch today (I'm too impatient to wait for release 😁).

[RTTTC]

I have a feeling / hope that it will be released this weekend ! (?) :)

[naltatis]

Ich hab mal den Vorschlag von @TheSpirit #3149 (reply in thread) probehalber umgesetzt. Damit sind die Werte in der Fahrzeugbox nun immer dreispaltig (Stand, Ziel, Zeit). Dafür wird die geschätzte Reichweite (sofern unterstützt) auf kleinen Screens immer in einer zweiten Reihe angezeigt.

Vorteile: Symmetrie zu (Leistung, Geladen, Restzeit). Geringere Höhe der Box > mehr sichtbar. Gleiche Kachelstruktur über alle Breakpoints hinweg.

Nachteile: Die Werte von Ladestand sind linksbündig, die von Ladeziel zentriert. Das ist konsequent damit den Daten oben (Leistung, ...) - wirkt aber noch etwas unrund auf mich. Habe dafür aber auch keine Lösung. Zentrieren der Ladestand Werte macht nicht besser. Vielleicht ist es Gewöhnung.

Small Screens (two lines)

Medium Screens (inline)

Larger Screens (inline)

Demo und Dockerimage sind aktualisiert.

[RTTTC]

I like the centering, it seems logical to me.

Could we remove / that is located in front of km ?
I think it's not needed, more clean without it, less possible confusion or problems for people with poor eye sight.

Or simply use same style for all screen sizes - The estimated range (if supported) is always displayed in a second row on all screens. This way is more consistent.

[Alestrix]

Nachteile: Die Werte von Ladestand sind linksbündig, die von Ladeziel zentriert. Das ist konsequent damit den Daten oben (Leistung, ...) - wirkt aber noch etwas unrund auf mich.

Ich glaube, Du hast einfach schon zu viel auf die neue GUI geschaut 😄, für mich wirkt es nicht störend. Trotzdem ein Vorschlag: Vielleicht sieht es für Dich runder aus, wenn der SoC zentriert zur (linksbündigen) Kilometerangabe stünde?

[andig]

Nachteile: Die Werte von Ladestand sind linksbündig, die von Ladeziel zentriert. Das ist konsequent damit den Daten oben (Leistung, ...) - wirkt aber noch etwas unrund auf mich.

Ich glaube, Du hast einfach schon zu viel auf die neue GUI geschaut 😄, für mich wirkt es nicht störend. Trotzdem ein Vorschlag: Vielleicht sieht es für Dich runder aus, wenn der SoC zentriert zur (linksbündigen) Kilometerangabe stünde?

Ich könnte auch sehr gut auf die Kilometer hinter dem Ladeziel verzichten. Ich finde die verwirrend, da wir keine Reichweite als Ziel angeben.

[RTTTC]

Ich könnte auch sehr gut auf die Kilometer hinter dem Ladeziel verzichten. Ich finde die verwirrend, da wir keine Reichweite als Ziel angeben.

This "promised range" could also lead to unrealistic expectations / disappointment and blaming of EVCC

[Alestrix]

Ich könnte auch sehr gut auf die Kilometer hinter dem Ladeziel verzichten. Ich finde die verwirrend, da wir keine Reichweite als Ziel angeben.

This "promised range" could also lead to unrealistic expectations / disappointment and blaming of EVCC

AFAIK that was once a feature request. I personally wouldn't particularly need it, but would find it practical nonetheless.

[TheSpirit]

Stimmt. Die Kilometer könnte man einfach weglassen.

[andig]

Ich könnte auch sehr gut auf die Kilometer hinter dem Ladeziel verzichten. Ich finde die verwirrend, da wir keine Reichweite als Ziel angeben.

This "promised range" could also lead to unrealistic expectations / disappointment and blaming of EVCC

AFAIK that was once a feature request. I personally wouldn't particularly need it, but would find it practical nonetheless.

I can't recall that. We did however have a request though to set a limit in kWh. In that case we should switch % for kWh. Again, km seems confusing in this context especially since we don't enforce meeting such a "limit" (it is only a projection).

[RTTTC]

Or / could be replaced with approximation sign ~

[Alestrix]

AFAIK that was once a feature request. I personally wouldn't particularly need it, but would find it practical nonetheless.

I can't recall that.

Found it: #2632

[andig]

AFAIK that was once a feature request. I personally wouldn't particularly need it, but would find it practical nonetheless.

I can't recall that.

Found it: #2632

Gute Idee. Range/Energiemenge wäre zwei sinnvolle alternative Zielvorgaben.

[naltatis]

Energiemenge wäre zwei sinnvolle alternative Zielvorgaben.

Ja, da hätt ich inzwischen auch ne gute Idee wie wir das in der neuen UI abbilden können. Aber das ist was für einen späteren PR.

Or / could be replaced with approximation sign ~

This "promised range" could also lead to unrealistic expectations / disappointment and blaming of EVCC

Ich hab das / nun rausgenommen. Technisch ist das ~ natürlich korrekt weils ne Schätzung ist. Aber ich glaube dass allen Autobesitzern (e oder nicht-e) klar ist, dass Reichweitenangaben in km immer abhängig von vielen Faktoren sind. Daher würde ich das hier einfach weglassen. Im Auto-Dashboard wird ja auch nicht überall "ungefähr" vorgeschrieben. Zudem ist es bei der reduzierten Schriftgröße und -Farbe auch schnell mit einem Minuszeichen verwechselbar.

Stimmt. Die Kilometer könnte man einfach weglassen.

Die aktuelle Reichweite haben wir in der jetzigen UI auch bereits drin (auf Nutzerwunsch). Die hochgerechnete Reichweite war auch ein Wunsch um den Dreisatz im Kopf nicht machen zu müssen: #2632 (comment)
Das der Kilometerwert nicht die Zielvorgabe ist sondern eine Zusatzinformation zu dem großen Prozentwert über ihm macht das Design schon ziemlich klar. Glaube nicht, dass wir da in Gefahr laufen, dass große Missverständnisse auftreten.

Vielleicht sieht es für Dich runder aus, wenn der SoC zentriert zur (linksbündigen) Kilometerangabe stünde?

Hab das Zentrierte gerade noch mal ausprobiert, dadurch rücken mir die Werte zu nah zusammen und wir verlieren die Flucht auf der linken bzw. rechten Seite. Nur die Werte aber nicht die Überschrift zentrieren funktioniert auch nicht wirklich. Je nach Sprache können die Überschriften auch deutlich kürzer sein als die Werte. 👇❌

Fazit: Ich lass das jetzt so*. Wir sind schon in der Rillenoptimierung angekommen. Glaube die kritischen Punkte haben wir sauber hinbekommen 😁

* Bis auf das /, das ich rausgenommen habe.

[RTTTC]

You are right ~ is not needed either.

I like the the alignment where values ​​of charge level are left-aligned, those of charge target are at the center and target time is right-aligned. That seems most natural.

New UI Design is MERGED!!! So cool !!!

[Alestrix]

Mir gefällt das Design immer noch hervorragend - selbst nach einer Woche! 😁
In meinem Fall (bin da vielleicht auch eine Ausnahme) zieht die WB im Standby auch etwas Strom und das erscheint dann in der UI als kleiner Punkt. Ich verstehe die Idee des Punktes, aber evtl. macht es Sinn, unterhalb bestimmter Leistungen den jeweiligen Verbraucher in der Grafik vielleicht ganz zu unterschlagen?

[naltatis]

Interessant. Bin mir ziemlich sicher, dass wir bereits Thresholds für min. Batterie und PV-Leistung implementiert haben. Möglicherweise machen wir das bei der Was noch nicht. Schau ich mir an.

[x4v4]

Wäre es möglich die Messwerte in kW wenigstens mit zwei Nachkommastellen oder gleich in Watt anzuzeigen?
Evtl. auch einzeln pro Phase?