Desktop prototyping

Hvordan indstilling spiller en vigtig rolle i design af desktops

Hos Dropbox designer vi mange grænseflader, som brugerne oplever på deres stationære computere. Det, der er specielt ved skrivebordsdesign, er, at vi ikke kan forudsige, hvordan brugerens skærm vil se ud - rodede desktops, støjende tapeter, hundreder af Chrome-faner, listen fortsætter.

På trods af at vide, at de fleste desktops er rodet og fulde af distraktioner, er jeg så ofte skyldig i at præsentere mit arbejde som om det var på skærm på MoMA.

Blød-pastel baggrunde, kromløse browsere og ingen desktop støj tilføjer alle til en smuk, men urealistisk indstilling.

Designe for den virkelige verden

Selvom det er dejligt at præsentere arbejde i et desinficeret format, er det også vigtigt at huske, at disse scenarier faktisk ikke findes. Faktisk er en brugers miljø normalt et travlt, distraherende rum.

Det er måske ikke smukt, men det er tættere på, hvad vores brugere rent faktisk vil opleve.

Nye e-mails kommer ind i det øjeblik, kalenderalarmer, der fortæller dig, at du skal køre til dit næste møde, og snesevis af Chrome-faner narrer dig om opgaver, du ikke skulle glemme. Det er et underligt, at nogen får arbejde.

Simulering af et skrivebord

Hos Dropbox fandt vi, at simpelthen at præsentere vores arbejde med et realistisk skrivebordsmiljø bag designet dukkede op på nye ideer og udfordrede den måde, vi tænkte på desktop-grænseflader på.

Så for at gøre det lettere for designere at placere deres arbejde på en desktopoverflade, skabte vi en Sketch-skabelon med et par grundlæggende macOS- og Windows-skrivebordsmiljøer.

En skitskabelon, der gør det nemt at simulere desktopmiljøer.

Denne skisseskabelon gjorde det dødt for designere at droppe deres design i et troværdigt macOS- eller Windows-skrivebordsmiljø, før de udskrives til designkritikker. Mens den tilføjede kontekst hjalp, fandt vi, at det manglede et afgørende aspekt - tid!

Tilføjelse af tidsdimensionen

Hvad der sker før, under eller efter at en bruger interagerer med en grænseflade er næsten lige så vigtig som den faktiske grænseflade. Arbejder med Dropbox-installationsflowet, her er et par spørgsmål, vi skal stille:

Før: Hvorfor installerer de Dropbox? Har en utålmodig klient bare sendt dem et link til en Dropbox-mappe, og installerede de Dropbox for at få adgang til mappen?

⏸ Under: Hvilke applikationer har de brug for at få adgang til, når de installerer Dropbox? Skal de skifte mellem Safari og Finder for at afslutte onboardingen?

⏭ Efter: Hvilke distraktioner trækker dem væk fra installation af Dropbox? Var de midtvejs gennem ombordstrømmen, da en kalenderalarm mindede dem om at ringe til et klientopkald på 5 minutter?

Spørgsmål om, hvad en bruger oplever før, under og efter at de møder dine designs kan hjælpe dig med at prioritere. For eksempel, hvis en bruger installerer Dropbox lige efter, at han blev inviteret til en mappe, skal onboarding måske påpege den nye mappe.

Prototype er tidskrævende, og det er umuligt at fange ethvert scenarie. Lad det dog ikke skræmme dig. Selv præsentation af arbejde i et enkelt, plausibelt scenario kan fokusere på den type feedback, du får fra holdkammerater, og kan hjælpe dig med at afdække nye måder at forbedre dit endelige design.

Et sæt til prototype

Efter at have oplevet fordelene ved at præsentere mit arbejde i en realistisk desktop-prototype, ønskede jeg at opmuntre andre designere på Dropbox til at prøve det samme.

Min første idé var blot at udvide vores Sketch-skabeloner og bruge InVision til prototypedelen. Dette ramte ikke helt mærket. De endelige prototyper føltes ikke realistiske og basale handlinger på systemniveau som træk og slip var ikke mulige.

Da Framer var mit yndlingsværktøj til at oprette desktop-prototyper, og Dropbox-teamet allerede aktivt brugte det, besluttede jeg at gøre det til vores go-to-værktøj til desktop-prototyper. Ved hjælp af vores Design Systems-team bygger vi et sæt genanvendelige Framer-desktopkomponenter. Det inkluderede alle de byggesten, som vores team muligvis har brug for til at prototype realistiske macOS- og Windows-miljøer.

Vi udgav kittet internt for et par måneder siden, og vores designteam har fundet det være et godt udgangspunkt for hurtigt at skabe realistiske skrivebordsprototyper. Vores håb er, at vi fortsætter med at presse hinanden til at stille udfordrende spørgsmål om, hvad der sker før, under og efter, at vores brugere interagerer med vores design.

Download vores Framer Desktop-sæt

Vi vil se, at designsamfundet drager fordel af de uges arbejde, der gik ind i dette prototype-sæt, så i dag offentliggør vi Desktop Kit på Framer-webstedet! Gå over til framer.com/resources for at downloade det.

Her er nogle tip til, hvordan du kommer i gang med Desktop Kit:

Fanen Design

Den første ting, man bemærker, når man åbner kittet, er, at macOS- og Windows 10-applikationer tegnes lige på fanen Design. Dette fremskynder drastisk læringskurven og giver folk, der er mere fortrolige med Sketch, et let sted at starte.

Browsere, e-mail-klienter, fil-browsere, chat-apps og systemadvarsler!

Faktisk er hvert stykke desktop-UI håndtegnet i Framer, helt ned til det mindste af ikoner. Dette gør tilpasning af kittet til en leg og er et enormt vidnesbyrd om Framer's fleksibilitet.

Fanen Kode

For hver applikation finder du et sæt af tilsvarende funktioner på fanen Kode. Disse kodestykker giver dig mulighed for at gøre ting som at indstille operativsystemet, åbne og lukke applikationer og smide systemadvarsler i.

Brug af Desktop Kit's browserfunktioner under fanen Kode

Hvad mere er, er at du kan skifte mellem operativsystemer på få sekunder. Hver applikation og systemadvarsel i Desktop Kit har både en macOS og Windows 10 version. Det har aldrig været lettere at se, hvordan dit design ser ud i et Windows-miljø.

Skift mellem macOS og Windows 10 miljøer

Et par eksempler på, hvordan du kommer i gang

I Desktop Kit finder du alt hvad du har brug for for at oprette følgende eksempler. Under fanen Kode skal du blot dobbeltklikke på et eksempel og fjerne koden inde i for at aktivere den.

Annoncering af en ny funktion
Forestil dig, at du designer en destinationsside til et nyt produkt, som Dropbox Showcase. Det kan hjælpe med at forstå, hvordan en bruger først kommer til dit design. Hvad nu for eksempel, hvis en advarsel fik dem til at åbne en salgsfremmende e-mail, som derefter blev knyttet til din destinationsside.

Eksempel 1 i Desktop Kit

Onboarding med distraktioner
Vi antager ofte, at brugere har hele dagen til at afslutte vores smukke onboarding-strømme, men det virkelige liv har en tendens til at komme i vejen. Dette eksempel simulerer et travlt skrivebordsmiljø med en alarm, der minder brugeren om et møde på 5 minutter. At se en ombordstrømning under dette lys kan hjælpe dig med at holde din ombordforening enkel og til det rette.

Eksempel 2 i Desktop Kit

️ Interaktioner med flere vinduer
I dette eksempel tilføjer en bruger deres første fil i Dropbox-mappen, som beder dem om at få vist den synkroniserede fil på dropbox.com. Når du designer brugerrejser, der spænder over flere overfladearealer, kan det være meget nyttigt at se hele oplevelsen et sted.

Download og nyd!

Download Desktop Kit, og lad os vide, hvad du synes! Når dit næste projekt rammer prototypefasen, er du godt forberedt på at tage det til næste niveau.

En stor tak til Gabrielle Matte for at skabe det perfekte billede til dette blogindlæg, Adam Noffsinger for at hjælpe med at oprette Desktop Kit, og John Saito og Angela Gorden for at hjælpe med at skrive dette indlæg.

Vil du have mere fra Dropbox Design-teamet? Følg vores publikation, Twitter og Dribbble. Vil du lave magi sammen? Vi ansætter!