Teknikercentrerede workflows på en 480 × 320 begrænset grænseflade

Fastlæggelse af nye GUI-standarder for indlejret testudstyr

  • Elektronik

  • Produktdesign

  • GUI-design

Nærbillede af GUI-design på visning af elektronisk enhed
Logo for elektronikproducenten
KLIENT
MSolutions
PLACERING
Israel
TEAM
UX-designer, UI-designer, interaktionsdesigner, projektleder, produktejer, softwarearkitekt
HJEMMESIDE
m4sol.com

MSolutions udvikler professionelle instrumenteringsgrænseflader til audio visual-ingeniører, der idriftsætter og fejlsøger komplekse installationer. Deres håndholdte måleenhed verificerer HDMI-signalets integritet, EDID-data, HDCP-status, opløsning, opdateringsfrekvens og andre parametre i multi monitor-miljøer. På papiret tilbød måleenhedens GUI omfattende diagnostik. I praksis undgik teknikerne mange funktioner, fordi det eksisterende embedded GUI-design var svært at følge under tidskritisk arbejde. Tidligere redesignforsøg havde ikke løst de grundlæggende usability-problemer.

Dette projekt er en del af vores fortsatte arbejde med embedded systems og professionel instrumentering, hvor evidensbaseret UX, design af grænseflader til begrænset hardware og tekniker-workflows former diagnostisk udstyr til feltbrug.

Virksomheden bad vores embedded systems UX-team om at omdanne denne begrænsede hardwaregrænseflade til en præcis teknisk device-UX, der gør det muligt for teknikere at nå pålidelige konklusioner hurtigere uden at øge den kognitive belastning i felten.

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

Usability-audit

Kortlægning af teknikernes arbejdsgange

Design af konceptuel model

Interaktionsdesign

Validering af prototype

Cross-platform-arkitektur

Design System

Overdragelse til udviklere

Nærbillede af tekniker, der manipulerer lyd-video kontrolpanel

HVORFOR TIDLIGERE EMBEDDED SYSTEMS UX-FORSØG MISLYKKEDES

Vi begyndte med en fokuseret usability-audit af embedded-enheder. Gennemgangen kombinerede heuristisk inspektion af grænsefladen med walkthroughs af reelle AV-diagnostikopgaver beskrevet af erfarne teknikere og ingeniører. Resultaterne viste, at tidligere designs havde organiseret skærmbilleder efter backend-moduler snarere end tekniker-workflows. Funktioner lå der, hvor de fandtes i koden, ikke der, hvor de var nødvendige i arbejdsgangen.

Et senere redesign fokuserede på farver og ikoner, men beholdt den samme underliggende struktur. Som følge heraf skulle teknikerne stadig huske, hvilken tilstand der indeholdt hvilke diagnosticeringsfunktioner, og de kunne miste overblikket, når de skiftede mellem signalchecks. Problemet var ikke det visuelle udtryk, men manglen på en sammenhængende UX-model for engineering-værktøjer, der var afstemt med praksis i felten.

Nærbillede af lyd-video-testenhed på mørk baggrund.Elektronisk testudstyr på mørk baggrund

TEKNIKERCENTREREDE WORKFLOWS PÅ ET 480 × 320 DISPLAY

Enheden kører på et lille embedded-display på 480 × 320 pixel med begrænset single touch og beskedne processeringsressourcer. Touch-targets skulle være store nok til brug med handsker. Tekst skulle forblive læsbar i armslængde. Derfor kunne måleenhedens GUI ikke baseres på gestus-drevne mønstre eller tætte informationslayouts.

Disse begrænsninger formede konkrete beslutninger. Vi reducerede menudybden og antallet af elementer pr. skærm, så hver visning kunne vise et komplet sæt valgmuligheder uden at sænke skriftstørrelsen under et komfortabelt niveau. Vi undgik animationer og tunge grafiske effekter for at holde interaktionen hurtig og præcis på den begrænsede hardware. Hver skærm blev designet som en lille, selvstændig tilstand, som teknikere kunne aflæse på brøkdele af et sekund, mens de samtidig holdt øje med kabler, displays og switchere.

Tabel med designkrav til brugeroplevelse tildelt projektfaser.

KRAV OG AFSTEMNING OMKRING TEKNIKER-WORKFLOWS

Vi indsamlede krav sammen med MSolutions’ product owner, den ledende firmware-ingeniør og en gruppe erfarne AV-teknikere, som bruger professionel målesoftware i det daglige arbejde. Hver gruppe havde forskellige prioriteter. Ingeniørerne ønskede fuld adgang til low level-parametre. Teknikerne ønskede færre trin og tydeligere bekræftelse af resultater. Produktledelsen havde brug for en struktur, der kunne understøtte fremtidige funktioner uden endnu et redesign.

Vi omsatte disse input til én samlet strategi gennem tension-driven reasoning. For hver skærm i det professionelle instrumenteringsinterface definerede vi et tydeligt resultat: hvilken beslutning teknikeren skulle kunne træffe i det øjeblik. Eksisterende funktioner blev derefter knyttet til disse resultater, og modstridende prioriteter blev løst på strategisk niveau i stedet for gennem ad hoc-beslutninger på de enkelte skærme. Det skabte et stabilt grundlag for release-planlægning og for senere udvidelse af embedded device UX-designet.

Design af udviklere
Fem GUI-design til elektronisk testudstyr.Fem GUI-design til elektronisk testudstyr.
Design af tidligere designer
Forbedret GUI-design med fejlagtig brugeroplevelse.Forbedret GUI-design med fejlagtig brugeroplevelse.
Uddrag fra Design Audit
Detalje fra usability-revisionsrapport for elektronisk enhed, der viser 8 fundDetalje fra usability-revisionsrapport for elektronisk enhed, der viser 8 fund

NY KONCEPTUEL MODEL FOR AV-DIAGNOSTIK-WORKFLOWS

Det konceptuelle gennembrud kom ved at betragte enheden som en guide gennem en standard AV-diagnostisk fortælling frem for som en samling værktøjer. Den nye model strukturerer målesekvensen, som teknikere faktisk oplever den i praksis. Et typisk workflow starter for eksempel med kontrol af linkintegritet, fortsætter med EDID- og HDCP-verifikation, går videre til validering af opløsning og farverum på hver skærm og afsluttes med en samlet bekræftelse på, at installationen opfylder den definerede profil.

I den nye embedded GUI peger hver tilstand på den næste logiske handling. Parametre vises kun, når de er nødvendige for det aktuelle diagnostiske trin. Den visuelle hierarki fremhæver én teknisk intention pr. skærm og placerer sekundær information på forudsigelige positioner. For teknikere opfører enheden sig nu som en erfaren kollega, der præsenterer de rette tjek i den rette rækkefølge, frem for som en skuffe fyldt med separate instrumenter.

Fem wireframes til elektronisk testudstyr GUIFem wireframes til elektronisk testudstyr GUI
Eksempler på wireframes

PROTOTYPEVALIDERING MED AV-TEKNIKERE I FELTEN

Vi omsatte den nye model til interaktive prototyper og testede dem med AV-teknikere, som regelmæssigt arbejder med multi monitor-konferencerum og videovægge. Sessionerne kombinerede opgavebaseret observation med korte interviews. Teknikerne blev bedt om at gennemføre realistiske scenarier, for eksempel at identificere årsagen til en forkert opløsning på én skærm i en signalkæde, som ellers ser korrekt ud.

Feedbacken fokuserede på terminologi, gruppering af signalparametre og rækkefølgen, hvori resultater bør vises, når en fejl opdages. Selve kerne-workflowet krævede ingen ændringer, men mange detaljer blev justeret. Nogle labels blev revideret, så de matchede det sprog, teknikerne bruger på stedet. Visse mellemliggende bekræftelsestrin blev forenklet for at undgå tøven. Efter disse justeringer bemærkede en deltager, at den embedded grænseflade endelig matchede den måde, de allerede tænker på, når de står foran et rack. Hele test- og iterationsforløbet tog to intensive dage inden for projektets seks ugers tidsramme.

Mand interagerer med ny brugeroplevelse i brugertestsession

CROSS-PLATFORM-GRÆNSEFLADE TIL ENHED, LAPTOP OG MOBIL

Da den embedded interaktionsmodel var stabil, udvidede vi den tekniske device-UX til laptop- og mobilmiljøer. Den responsive arkitektur bevarer den samme rækkefølge af tekniker-workflows, men udnytter de større flader til tydeligere at vise sammenhænge mellem målinger, historiske værdier og referenceprofiler.

Teknikere kan nu forbinde til måleenheden fra en laptop under idriftsættelsessessioner eller bruge en mobil grænseflade til hurtige tjek. Cross-platform interface-designet muliggør fjernstyring i trange rum og bedre samarbejde mellem kolleger på stedet og kolleger på et centralt operationscenter. Da det konceptuelle model er identisk, er der ikke behov for at lære separate adfærdsmønstre for hver platform.

GUI-design til 9 skærme, der viser brugergrænsefladedetaljer for professionelt elektronikudstyrGUI-design til 9 skærme, der viser brugergrænsefladedetaljer for professionelt elektronikudstyr
Responsivt GUI-design i laptop mockup på mørk baggrundResponsivt GUI-design i laptop mockup på mørk baggrund
Designelementer

UDVIKLERKLART DESIGN SYSTEM OG MÅLBARE RESULTATER

Arbejdet blev afsluttet med et developer-ready design system tilpasset begrænset hardware og responsive grænseflader. Det definerer komponenter, deres tilstande, layoutregler for det 480 × 320 embedded touchscreen-interface samt interaktionsmønstre for fejlhåndtering og edge cases. Denne grad af præcision reducerer implementeringsusikkerhed og hjælper med at holde kodebasen overskuelig, når nye diagnostiske funktioner tilføjes.

Hele redesign-processen, fra usability-audit til endelig overlevering, blev gennemført på seks uger. Interne task-walkthroughs med kunden viste, at teknikere kunne nå de samme konklusioner med cirka halvt så mange interaktioner i centrale workflows. Nye brugere kunne betjene måleenhedens GUI efter en kort guidet introduktion i stedet for at have brug for gentagen oplæring. Store integratorkunder rapporterede om mere gnidningsfri udrulninger, fordi færre personer havde problemer med grænsefladen.

Organisationen opnåede immaterielle ressourcer: dømmekraft om, hvad der betyder mest i professionel AV-diagnostik, en fælles produktintuition om, hvordan målegrænseflader bør guide teknikeres beslutninger, samt en ræsonneringsevne, der gør det muligt for teams at udvide diagnostiske funktioner uden at fragmentere interaktionsmodellen. Systemet bevarer sin competitive position ved at understøtte hurtig og præcis diagnosticering under krævende feltforhold, mens konkurrenter, der prioriterer feature-eksponering frem for klarhed i workflows, har svært ved at betjene teknikere, der arbejder under tidspres i komplekse installationer.

Resultatet er en embedded systems UX, der gør kvaliteten af MSolutions’ engineering synlig, og en professionel instrumenteringsgrænseflade, der er klar til fremtidige releases.

RESULTATER

Design fra start til slut leveret på 6 uger

Fuld dokumentation til udviklere

Designet er fuldt responsivt

GUI er blevet en reference i branchen

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