Opbygning
EnergyConnect er bygget efter en række designprincipper og konventioner, som skal sikre en ensartet og genkendelig brugeroplevelse på tværs af løsningen.
Det betyder, at brugeren vil møde de samme grundlæggende mønstre på tværs af sider og funktioner. Navigation, sideopbygning, handlinger og tabeller fungerer derfor efter samme principper, uanset hvilket område brugeren arbejder i.
Formålet er at gøre løsningen lettere at lære, hurtigere at arbejde i og mere forudsigelig i den daglige brug.

Figur 1: Eksempel på målepunktssøgning
Overordnet layout
Løsningen er overordnet opdelt i to hovedområder:
- Navigation i venstre side
- Sideindhold i højre side
Denne opdeling går igen på tværs af løsningen og gør det muligt for brugeren hurtigt at orientere sig og skifte mellem områder.
Navigation
I venstre side findes navigationen, som giver adgang til løsningens forskellige områder.
Navigationen viser de menupunkter, brugeren har adgang til, og gør det muligt hurtigt at skifte mellem eksempelvis dashboard, søgesider, målepunkter, tilslutningspunkter og øvrige hovedområder.
Sideindhold
Højre side af løsningen er dedikeret til den aktuelle side og dens indhold. Det er her brugeren søger, ser detaljer, arbejder med tabeller, udfylder formularer og udfører handlinger.
Eksemplet nedenfor viser sideindholdet for en målepunktsvisning.

Sideindholdet varierer afhængigt af, hvilken visning brugeren befinder sig på, men opbygningen følger de samme grundlæggende principper. Det gør det lettere at genkende funktioner og arbejdsgange på tværs af løsningen.
Header
De fleste sider har en header øverst. Headeren hjælper brugeren med at se, hvilken side eller enhed de befinder sig på, og giver adgang til relevante handlinger og navigationselementer.

Headeren kan eksempelvis indeholde:
- sidens titel
- relevant undertitel eller identifikation
- faner til undersider
- tilbage-navigation
- handlingsmenu
Indholdet i headeren tilpasses den konkrete side. En detaljevisning vil eksempelvis ofte vise information om den valgte enhed, mens en søgeside i højere grad vil fokusere på søgning, resultater og handlinger på valgte rækker.
Handlinger
Handlinger er samlet i handlingsmenuen øverst til højre på siden. Menuen indeholder de handlinger, der er relevante for den side, brugeren befinder sig på.

Handlingsmenuen er kontekstafhængig. Det betyder, at indholdet kan ændre sig alt efter:
- hvilken side brugeren befinder sig på
- om der er valgt én eller flere rækker i en tabel
- hvilken data handlingen vedrører
- hvilke rettigheder brugeren har
Hvis en handling kræver, at brugeren først vælger et eller flere elementer, kan handlingen være utilgængelig, indtil kriterierne er opfyldt. På den måde viser menuen både, hvilke handlinger der findes, og hvornår de kan bruges.
På sider med tabeller kan handlinger også tilgås direkte fra tabellen. Hvis handlingerne knytter sig til en bestemt række, kan brugeren højreklikke på den ønskede række for at åbne de handlinger, der er relevante for netop dette element.
Det gør det muligt at arbejde hurtigere med tabeldata, fordi brugeren kan tilgå handlingerne dér, hvor data vises, uden først at skulle navigere til handlingsmenuen i headeren.
