UX- og UI-design til real time maritime fremdrifts- og energisystemer

Innovativt GUI-design til integreret elektrisk fartøjskontrol

  • Indlejret GUI

  • UX-design

  • UI-design

Logoer for Torqeedo og Yamaha, kunderne hos UX-designbureauetLogoer for Torqeedo og Yamaha, kunderne hos UX-designbureauet
KLIENT
Torqeedo
PLACERING
Tyskland
TEAM
UX-designer, UI-designer, interaktionsdesigner, projektleder, produktejer, researcher
HJEMMESIDE
torqeedo.com

Dette indlejrede GUI-design giver operatører direkte kontrol over skibets fremdrift i alle situationer – fra hurtig sejlads på åbent vand til præcise justeringer under havnemanøvrer. Det tydeliggør også skibets energistyringssystem ved at samle fremdrift, generatorer, batterier og hjælpebelastninger i én samlet indlejret brugergrænseflade, der føles pålidelig under pres.

Dette projekt er en del af vores fortsatte arbejde med embedded HMI og maritime systemer, hvor evidensbaseret UX, realtidskrav og interaktionsarkitektur former kontrolgrænseflader til krævende driftsforhold.

Bygget på syv års erfaring med embedded systems design og udviklet af vores UX-designbureau til maritime forhold opfører brugergrænsefladen sig forudsigeligt, selv når fartøjet accelererer, eller sigtbarheden falder. Kaptajner ser et sammenhængende billede af fremdrift og energi i stedet for fragmenter spredt over flere skærme. Det styrkede Torqeedos markedsposition og bidrog til virksomhedens opkøb af Yamaha.

Vi anvendte Critical Systems Design, en metode der udvikler løsninger gennem indlejrede eksperimenter, løser spændinger mellem lokal optimering og systemsammenhæng, og støtter implementering indtil organisationer opnår selvstændighed.

VORES BIDRAG

Maritim feltresearch

Domæneindsigt

Kortlægning af løsningsrummet

Interaktionsarkitektur

Validering under sejlforsøg

UI-design – dag/tusmørke/nat

Design System

Implementeringspartnerskab

The management team of the client outside the manufacturing facility
BRYDER
YAMAHA KØBER TORQEEDO
Yamaha Motor Co. har med succes gennemført opkøbet af Torqeedo GmbH, der er førende inden for elektrisk skibsmobilitet.
LÆS ARTIKEL →
Forstørret UI-design af dashboardet med to påhængsmotorer
UI-design til skærmen med notifikationer og opdateringer til motorsystemet
Detalje fra UI-designet til indstillinger for opladningDetalje fra UI-designet til indstillinger for opladningUI-designdetalje af energiflowet gennem det elektriske system
Abstrakt illustration, der udtrykker UI-design til maritime anvendelser
Jeg er vild med, hvordan du problemfrit integrerer alle aspekter af energistyring, som om du har en personlig assistent om bord!
Portrætfoto af kaptajnen, der deltog i brugerresearchen
James Hawthorne, MSc
Skibsfører og navigationsspecialist
Diagram lagt over et UI-design, der viser layoutets gridstrukturUI-design af skærmen, hvor brugerne får detaljeret energiforbrug
UI-designdetalje, der giver brugerne mulighed for at skifte tilstand for det elektriske system
UI-komponent med hastighed, lagt over det grid, der viser, hvordan brugergrænsefladen er opbyggetUI-komponent med hastighed, lagt over det grid, der viser, hvordan brugergrænsefladen er opbygget

FORSTÅELSE AF BEGRÆNSNINGERNE I DET NEDARVEDE LEGACY

Den tidligere indlejrede brugergrænseflade rummede mange års praktisk indsigt, men matchede ikke længere kompleksiteten i moderne hybridfartøjer. Fremdriftsstatus blev vist på én skærm, batteritilstand på en anden og generatorinformation på en tredje, hvilket tvang kaptajner til at skifte mellem flere visninger for at forstå energitilgængeligheden under manøvrer. I stærkt dagslys gjorde lavkontrastikoner vigtige detaljer svære at aflæse på det indlejrede display.

I vores research blev dette legacy-system en værdifuld kilde til evidens. Dets struktur viste, hvordan kaptajner havde lært at kompensere for spredt information, og hvor denne kompensation skabte stress og tøven. Ved at analysere disse mønstre gennem constraint respecting kunne vi afgøre, hvad der burde bevares, og hvad der krævede omstrukturering. Den nye kontrolgrænseflade respekterer derfor den erfaring, der er indlejret i det gamle design, samtidig med at den løser de strukturelle begrænsninger, som holdt fartøjet tilbage.

Visuelle designdetaljer, der viser knaptilstande for brugergrænsefladenVisuelle designdetaljer, der viser knaptilstande for brugergrænsefladen

STRUKTUR DER SAMLER HELE SYSTEMET

Fartøjet er afhængigt af mange sammenkoblede rutiner, og den indlejrede brugergrænseflade samler dem nu i én strukturel logik, der forbliver stabil på tværs af 27 skærme, grupperet i fire primære driftsformer. Hybridbalancering, fremdriftsbehov og hjælpefunktioners adfærd opdateres i forskellige intervaller, men interaktionsdesignet holder dem afstemt, så kaptajner kan forstå systemets adfærd med et enkelt blik i stedet for flere.

Denne strukturelle klarhed er vigtig på fartøjer fra mindre både på omkring seks meter til kommercielle skibe på over 55 meter, hvor maritime grænseflader skal understøtte hurtig genkendelse frem for langsom fortolkning. Det samme organiserende princip går igen i alle sammenhænge, hvilket betyder, at når besætninger har lært mønsteret på ét fartøj, kan de overføre den viden til andre konfigurationer. Et disciplineret Design System gør dette muligt, samtidig med at det tillader variation i fartøjets hardware og layout.

Strukturen skulle valideres af flere stakeholder-grupper for at sikre, at den var i tråd med kravene fra engineering, produkt og drift.

User experience-koncept, der viser ladetilstanden for det elektriske systemUser experience-koncept, der viser ladetilstanden for det elektriske system
Sæt af ikoner, der bruges i brugergrænsefladenSæt af ikoner, der bruges i brugergrænsefladen

PRÆCIS VISUEL RESPONS UNDER ALLE FORHOLD

På dette niveau skal den indlejrede brugergrænseflade udtrykke hver systemtilstand med fuldstændig klarhed. Fremdriftsindikatoren bevæger sig gennem tre meningsfulde tilstande: tomgang, marchfart og fuld effekt, mens hybridfremdriften viser sine lade- og afladecyklusser med en overgangstiming, der føles responsiv uden at blive urolig. Batteribidrag, generatoroutput og hjælpebelastningernes adfærd opdateres i deres egne tempi, og displayet fungerer inden for strenge grænser for opløsning og opdateringshastighed.

Disse begrænsninger styrer linjetykkelse, afstande og tempoet i tilstandsændringer. Målet er, at kaptajner registrerer en ændring ved første blik uden at skulle overvåge skærmen i flere sekunder. Under søprøver betød denne præcision, at manøvrer, som tidligere krævede gentagne tjek, kunne udføres med færre blikke – selv når fartøjet var udsat for vibrationer, pludselige bevægelser eller lav sigtbarhed.

UI-design tilpasset små skærme med to målereUI-design tilpasset lille skærm med én målerForenklet UI-design tilpasset en lille skærmAlternativt UI-design til lille skærmUI-komponent tilpasset lille skærmBrugerinteraktion tilpasset lille skærmstørrelse
Abstrakt illustration, der viser processen for user experience-design til en indlejret GUIAbstrakt illustration, der viser processen for user experience-design til en indlejret GUI

ET KLART VISUELT SPROG FOR OPERATØRER

Ikonerne og interface-elementerne danner et visuelt sprog, der afspejler, hvordan kaptajner faktisk arbejder i den daglige drift. Fremdriftssymboler viser tilstanden for hver motor, batteriindikatorer viser energistrømmens rytme, og tilstandsmarkeringer skifter tydeligt, når besætningen bevæger sig mellem navigation, manøvrering og fortøjning. De samme grafiske konventioner bruges i alle driftsformer, hvilket reducerer den mentale indsats, der kræves for at fortolke dem.

Hvert element skal forblive læseligt på et ti tommer indlejret display med begrænset pixeltæthed under forhold som blænding, regn og betjening med handsker. Derfor følger brugergrænsefladen strenge regler for kontrast, minimale touch-target-dimensioner og typografi, der er egnet til læsbarhed i sollys. Disse justeringer er baseret på test frem for æstetiske præferencer. Rutinetjek bliver øjeblikke af klarhed i stedet for belastning, også når operatører scanner touchskærmen om natten eller i groft vand.

Få en fornemmelse af det
Gå på opdagelse om dagen og om natten
Dag
Nat
Screenshot of the user interface design of a naval GUIScreenshot of the user interface design of a naval GUIScreenshot of the user interface design of a naval GUIScreenshot of the user interface design of a naval GUI
Propel, der udtrykker anvendelsesområdet for maritimt design

DET ORGANISERENDE PRINCIP BAG INTERFACEN

Bag skærmene ligger en strukturel model, der forklarer hele hybridfartøjets adfærd. Den forbinder fremdriftsbehov, generatoroutput, batterireserver på cirka 40 til 200 kilowatt­timer, konverteringsenheder og hjælpebelastninger i ét læsbart mønster. Modellen afstemmer de forskellige rytmer i skibet, så hurtige fremdriftsopdateringer giver mening sammen med langsommere energicyklusser.

Professionelle kaptajner bruger ét samlet mentalt kort, når de vurderer et fartøjs tilstand. HMI-designet giver dette kort i visuel form. Det holder relaterede værdier i stabile positioner, justerer skalaer på tværs af skærme og sikrer, at ændringer i ét delsystem afspejles med passende signaler i andre. Denne strukturelle klarhed gør det muligt for det indlejrede GUI at skalere fra enklere fartøjer til komplekse konfigurationer med flere generatorer uden at ændre den underliggende logik.

Brugerresearcher stående foran en havn og et søkort på mørk baggrundBrugerresearcher stående foran en havn og et søkort på mørk baggrund

EVIDENCE BASED UX/UI DESIGN ER FORANKRET I VIRKELIGHEDEN

En stor del af designarbejdet byggede på evidens indsamlet direkte på vandet gennem user research og samarbejdssessioner med kaptajner. Gennem Sandbox Experiments, fordelt over tolv søprøver på seks måneder med femten professionelle kaptajner, observerede vi, hvordan vibration påvirker læsbarhed, hvordan hybrid energibalance ændrer sig under acceleration, og hvordan genskin fra koldt vand reducerer kontrasten på indlejrede displays.

Test ved temperaturer fra minus fem til 35 grader og under natoperationer mellem sen aften og tidlig morgen afslørede scanningsmønstre, som kun opstår i ægte maritimt arbejde. Disse indsigter guidede konkrete beslutninger om kontrastregler, interaktionstiming, alarmsynlighed og skærmhierarki. De viste også den følelsesmæssige dimension af kontrolsystemers grænseflader, især den lettelse besætninger føler, når information forbliver stabil, selv når fartøjet opfører sig uforudsigeligt.

Touchskærm i båd, der viser den gamle brugergrænseflade
Den gamle brugergrænseflade med to målereDetalje fra den gamle brugergrænseflade, hvor brugerne styrer indstillinger

DESIGN TIL SKALAEN AF STORE HYBRIDFARTØJER

At understøtte Torqeedos ekspansion til større hybridfartøjer krævede mere end blot at forfine den eksisterende UI. Det betød at skabe en maritim grænseflade, der kan formidle adfærden i skibe med langt større teknisk dybde. Disse fartøjer kan være over 55 meter lange og omfatte flere dieselgeneratorer, dobbelte batteribanker i området 40 til 200 kilowatt­timer, konverteringsenheder, der håndterer betydelig effekt, samt komplekse køle- og distributionskredsløb.

Professionelle kaptajner har brug for en indlejret brugergrænseflade, der afspejler disse sammenhænge frem for at isolere målinger på separate skærme. Skibets blueprint – med fremdriftsmotorer, centralt kontrolcenter, energibalanceringssystem og hjælpebelastninger – blev derfor reference­strukturen for HMI’et. Ved at forankre interaktionsdesignet i denne arkitektur sikrede vi, at det kaptajner ser på skærmen, svarer direkte til, hvordan fartøjet opfører sig i praksis.

Arbejdet med flere interne og eksterne stakeholders krævede, at fartøjets logik, de tekniske begrænsninger og grænsefladens adfærd blev afstemt på tværs af teams.

Forsidebillede til SaaS-designcasestudiet med en arbejder, der ser på en maskineForsidebillede til SaaS-designcasestudiet med en arbejder, der ser på en maskine
UI-designkomponent til opladningUI-designkomponent til opladningUI-designkomponent til tavlen med energiflowdiagramUI-designkomponent til tavlen med energiflowdiagram
Diagram, der viser anvendelsesområdet for UX-designkonceptetDiagram, der viser anvendelsesområdet for UX-designkonceptet

KORTLÆGNING AF HELE SPEKTRET AF UX-MULIGHEDER

Før vi konvergerede mod en endelig interaktionsarkitektur, åbnede vi en divergent explorationsfase gennem lateral exploration for at kortlægge hele spektret af UX-muligheder. Teamet identificerede centrale udfordringer, der former den daglige brug, såsom hvordan fremdriftstilstand præsenteres, hvordan hybrid energiflow vises, og hvordan navigation og fortøjning kan understøttes som en sammenhængende oplevelse frem for separate tilstande.

For hver udfordring skabte og testede vi flere interface-koncepter gennem option space mapping. Nogle lagde primært vægt på fremdriftstilstand, andre fremhævede energiflow, og nogle forsøgte at samle begge perspektiver i én visning. Brug af virkelige datarytmer under testene viste, hvor lovende idéer brød sammen under vibration eller skabte tøven i kritiske øjeblikke. Koncepter, der krævede for mange overgange eller gjorde natmanøvrer langsommere, blev kasseret. Det, der blev tilbage, var et sammenhængende Design System med 27 skærme fordelt på fire driftsmodi.

Wireframe showing one of the user experience conceptsWireframe showing one of the user experience concepts
User experience design idea captured in wireframeUser experience design idea captured in wireframe
Version for user experience design of the dashboardVersion for user experience design of the dashboard
Wireframe showing one of the user experience conceptsWireframe showing one of the user experience concepts
User experience design idea captured in wireframeUser experience design idea captured in wireframe
Version for user experience design of the dashboardVersion for user experience design of the dashboard
Wireframe showing one of the user experience conceptsWireframe showing one of the user experience concepts
User experience design idea captured in wireframeUser experience design idea captured in wireframe
Wireframe showing one of the user experience conceptsWireframe showing one of the user experience concepts
Version for user experience design of the dashboardVersion for user experience design of the dashboard
01 /10
Abstrakt grafik, der udtrykker idéen om energibalance i elektriske fremdriftssystemerAbstrakt grafik, der udtrykker idéen om energibalance i elektriske fremdriftssystemer

VI FORENKLEDE ABSTRAKTE BEGREBER FOR ALLE

Konstruktionslogikken bag denne indlejrede brugergrænseflade er baseret på et grid, der synkroniserer de mange rytmer i et hybridfartøj. Fremdriftssensorer opdateres hurtigt, batterier følger langsommere cyklusser, og generatorer reagerer på skiftende belastning. Griddet samler disse signaler i en fælles kadence på det indlejrede display, så kaptajner opfatter systemet som én samlet organisme frem for en samling af adskilte dele.

Alt dette fungerer inden for de tekniske rammer, der allerede er fastlagt for opløsning, opdateringscyklus, kontrast, touch targets og typografi. Disse parametre styrer afstande, justering og den visuelle hierarki for information og alarmer. Resultatet er et indlejret GUI, der gør det muligt for kaptajner næsten øjeblikkeligt at vurdere energibalance og fremdriftsparathed – også under vibration, pludselige bevægelser eller skiftende lys. Abstrakte begreber som hybrid energiflow bliver konkrete uden at skjule den underliggende kompleksitet.

Diagrammer, der viser alternative designs til UI-komponenter, som viser energibalanceDiagrammer, der viser alternative designs til UI-komponenter, som viser energibalance

ET KLARERE GRUNDLAG FOR MARITIME BESLUTNINGER

Den redesignede indlejrede brugergrænseflade har en målbar effekt på, hvordan kaptajner håndterer hybridfartøjer under reel drift. Med 27 skærme organiseret i fire tilstande gør Design System det muligt for besætninger at bevæge sig mellem navigation, manøvrering og fortøjning, samtidig med at de bevarer en sammenhængende fornemmelse af energitilgængelighed og fremdriftsrespons.

I sammenlignende tests identificerede kaptajner centrale energitilstande markant hurtigere end med den gamle UI, og opgaver, der tidligere krævede flere overgange, kan nu bekræftes med et enkelt blik. Denne forbedring udsprang af maritim feltforskning, kollaborativt design og fokuseret testning, der adresserede både kognitiv belastning og følelsesmæssigt pres. Grænsefladen bliver dermed ikke kun en kontrolflade, men også en stabil tilstedeværelse, der understøtter sikre beslutninger under usikre forhold.

To brugerresearchere i en båd på havet
Designelementer

UX/UI DESIGN SKABER ET FØRENDE PRODUKT

Det endelige system samler adfærden i avancerede hybridfartøjer i et samlet indlejret GUI, der skalerer fra mindre både til kommercielle skibe. Fremdriftsbehov, generatoroutput, batterireserver og hjælpebelastninger udtrykkes gennem et sammenhængende Design System formet af reel maritim praksis og realtidsbegrænsninger i grænsefladen.

Brugergrænsefladen forbliver pålidelig, når fartøjet accelererer, skifter energikilder eller bevæger sig gennem forhold med lav sigtbarhed. Den giver Torqeedo et stabilt fundament for fremtidige hardwaremoduler og nye hybridarkitekturer, samtidig med at besætninger får et system, der føles roligt og tillidsvækkende i daglig brug.

Organisationen opnåede immaterielle ressourcer: dømmekraft for, hvad der er vigtigt i styringen af hybridfartøjer, en fælles produktintuition for, hvordan maritime systemer bør opføre sig under pres, samt en ræsonneringskapacitet, der gør det muligt for teams at udvide grænsefladen til nye fartøjskonfigurationer. Systemet fastholder sin competitive position ved at levere pålidelig og forudsigelig kontrol under krævende maritime forhold, mens konkurrenter, der prioriterer feature-tæthed frem for operationel klarhed, har svært ved at betjene professionelle kaptajner, der arbejder i reelle søforhold med sikkerhedskritisk ansvar.

På denne måde ligger UX- og UI-design ikke oven på teknologien, men bliver en integreret del af, hvordan produktet fortjener sin plads som en førende løsning i sit felt.

KONTACT OS
Stilfuld pige med solbriller

Din guide til digital ekspertise

Creative Navy

Creative Navy er et af de bedste UX/UI-designbureauer i Danmark. Vi designer mobiloplevelser, grafiske bruger- og webgrænseflader til indlejrede enheder.

© Creative Navy Ltd 2026

Excellence UI design illustration