Brugeroplevelsesdesign til AV-teknikere

Sætter nye GUI-standarder for professionel elektronik

Elektronik

Produktdesign

GUI Design

Nærbillede af GUI-design på visning af elektronisk enhed
KLIENTMSolutions
PLACERINGIsrael
TEAMUX designer, UI designer, interaction designer, project manager, product owner, software architect
HJEMMESIDE

MSolutions har skabt en innovativ enhed, der bruges af audiovisuelle ingeniører til at teste ydeevnen af komplekse installationer. På trods af den brede vifte af funktioner, som enheden tilbyder, forblev det meste af det ubrugt på grund af en dårlig brugeroplevelse. Virksomheden havde forsøgt at forbedre brugervenligheden et par gange, endda i samarbejde med andre designere, men det var mislykkedes.

Virksomheden engagerede vores UX-designbureau til at hjælpe dem med at omdefinere enhedens brugervenlighed og omforme GUI'en til et design, der demonstrerer ingeniørens ydeevne.

VORES BIDRAG

UX Design

UX Flow

Prototyping

Konceptdesign

Produktdesign

Interaction Design

UI Design - Design System

Kvalitetssikring

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

ET TOUCH-DISPLAY, DER HÆMMER BRUGERVENLIGHEDEN

Teknikere diagnosticerer problemer og optimerer det audiovisuelle udstyrs funktion. Enheden kan måle komplekse installationer med flere monitorer, skærme og signalkilder.

Men enheden kommer også med hardwarebegrænsninger i form af en skærm med begrænset touch-interaktivitet og en lille skærmstørrelse på kun 480x320 pixels.

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

EN OMHYGGELIG OG FORUDSIGELIG PROCES

For at indfri løftet om en brugeroplevelse, der ville ændre alt, gik vi systematisk til værks med produktdesign. Vi startede med at indsamle krav og organiserede indsigter fra alle interessenter.

Vi vurderede eksisterende data om brugerne, og derefter skabte vi et sæt prioriteter, hvor vi grupperede målene i releases. Denne detaljerede og omhyggelige gameplan var forudsætningen for en fokuseret designfase for brugeroplevelsen.

Tabel med designkrav til brugeroplevelse tildelt projektfaser.

HVORFOR DERES TIDLIGERE DESIGNFORSØG MISLYKKEDES

Skærmen har sine tekniske begrænsninger, men virksomhedens tidligere forsøg på at realisere et intuitivt GUI-design mislykkedes af andre årsager. Vi udførte en detaljeret brugervenlighedsrevision og kortlagde et sæt ønskede resultater for hver skærm.

Grunden til, at de tidligere havde fejlet, var, at det oprindelige GUI-design var skabt af ingeniører, der havde beskrevet funktionaliteten, som den er i backend, og ikke som brugerne kunne forvente, at den fungerede. I deres andet forsøg på at forbedre enhedens brugervenlighed forsøgte designeren simpelthen at forbedre brugergrænsefladen. Det var dømt til at mislykkes, fordi et brugergrænsefladedesign aldrig kan være æstetisk, når den underliggende UX-tankegang er mangelfuld.

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

KONCEPTET FOR DEN NYE BRUGEROPLEVELSE

Designtænkningen blev styret af brugernes behov, og hvad der repræsenterer et logisk flow for teknikere i deres daglige praksis. Resultatet er, at brugerne ikke behøver at tænke så meget, fordi fokus i hvert trin er på den næste logiske ting, som en tekniker måske vil gøre.

På skærmniveau er vejledningen omsat til et klart visuelt hierarki, så flowets overordnede logik videreføres på mikroniveau. Det nye design af brugeroplevelsen er en afspejling af brugernes prioriteter, ikke backend.

Fem wireframes til elektronisk testudstyr GUI
Eksempler på wireframes

TEST OG ITERATIONER FORBEDRER UX

Den nye brugeroplevelse var meget forskellig fra det tidligere usability-paradigme. På trods af at den kom ud af en omhyggelig proces med dokumentation af brugernes behov, var det afgørende at få i det mindste et grundlæggende niveau af validering fra brugerne. I alt tog brugertest og designjusteringer kun to dage.

Vi skabte prototyper og organiserede et par brugertestsessioner. Brugerne var i stand til at give en overflod af feedback. Det førte ikke til en ændring i den grundlæggende logik i brugeroplevelsen, men det ansporede til små ændringer, der i sidste ende ville bringe brugergrænsefladen op på et højere kvalitetsniveau.

Mand interagerer med ny brugeroplevelse i brugertestsession

DEN VISUELLE GUI DEMONSTRERER YDEEVNE

Det visuelle GUI-design var en mulighed for at vise, hvor smart både ingeniørerne og UX-designerne har tænkt. Det er minimalistisk med et nøgternt touch, men kombineret med den fysiske enheds overlegne finish ligner det et højtydende værktøj til professionelle.

Ud over branding-aspektet og målet om at skabe tillid, er GUI-designet også kompatibelt med hensyn til tilgængelighed, og det indeholder alle de nødvendige oplysninger for at gøre udviklingen nem.

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

KOMPLET RESPONSIVT GUI-DESIGN PÅ 6 UGER

Det tog i alt 6 uger at gennemføre projektet fra starten af den indledende brugervenlighedsrevision til leveringen af GUI-designet til ingeniørteamet. Slutresultatet er en brugergrænseflade, hvor teknikerne kun skal gøre halvdelen af arbejdet for at få de resultater, de har brug for.

Den strømlinede interaktionsproces skabte muligheder for at forenkle kodestakken. GUI-designet er responsivt, så teknikere kan styre enheden fra en bærbar computer eller mobiltelefon, enten på stedet eller på afstand. Det åbner op for en verden af muligheder.

Slutresultatet for virksomheden er et produkt, hvor den tekniske kvalitet fremgår tydeligt af enhedens udseende og fornemmelse. Desuden kræver teknikerne mindre oplæring, så store kunder lettere kan rulle løsningen ud.

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