Digital design udføres aldrig: Udvikler Windows 10 Mail og kalender

Hvordan vores team gjorde fan-elskede funktionaliteter mere flydende

Før og efter animation af den redesignede app

For to år siden introducerede vi fuldstændigt omskrevet og redesignet Mail- og kalender-apps i Windows 10. (Ikke de skærme, der er afbildet ovenfor.) Mens apps var funktionelle og moderne udseende, manglede de stadig et mere raffineret og dejligt udseende. I æraen "software som en service" er vi i stand til at forbedre vores funktioner og design med en kadence, som kunderne er kommet til at forvente. Allerede før frigivelsen af ​​2015 begyndte vi at tænke over de næste app-iterationer.

Vores tidlige redesign sætter målene til visuelt at tilpasse sig til Windows, reducere krom, give appen et frisk, mere raffineret og smukt look, mens vi løfter bjælken "håndværk" (det interne navn for vores indsats). Teamet etablerede designretningslinjer, der er baseret på en målrettet brug af typografi, farve og bevægelse, for at formidle en dejlig og yderst funktionel app.

Timing spiller en rolle i hver historie

Først i begyndelsen af ​​2017 blev ingeniørressourcer tilgængelige til at arbejde med vores redesign. Omtrent på samme tid lancerede det flydende team (kode kaldet NEON) og kørte aktivt vedtagelsen af ​​det nye flydende designsystem til Microsoft-apps. Det betød, at vi havde en forfrisket designudfordring; (Tak Satya) gentænk, hvad vi holdt, hvad vi efterlod os, og hvordan vi blev mere flydende fremad.

Mens den flydende lancering var spændende, forblev vores team opmærksomme på, at vi redesignede apps, der havde millioner af brugere og fans. Ændring af ting, de var vant til - som titelbjælke, bånd og nøglefunktioner - skulle nøje overvejes. Naturligvis ønskede vi ikke at fremmedgøre vores brugere, og vi var ikke interesseret i nogen bagudgående trin i brugervenligheden.

En indsigt, vi fik tidligt i brugertestning, var, at ”anderledes” ikke nødvendigvis betød ”problem”.

Integrering af friske signaler fra tidligt Fluent Design-mailarbejde med de førnævnte redesign-ideer viste sig at være ret ligetil - da nogle af de overordnede principper allerede var på linje. Selv nogle af de flydende designelementer, nemlig "akryl" med dens gennemskinnelige overfladebehandling, var allerede til stede i en eller anden form i vores eksisterende app (semi-gennemsigtig navigationsrude).

Tidlig opdatering af Tidlig opdatering af

Flydende designelementer implementeret med mail & kalender

Designudforskningerne fra det for nylig lancerede Fluent-team opfyldte ikke alle de krav, vi havde til vores apps med hensyn til arbejdsgang, personalisering, lokalisering, tilgængelighed osv. Vores team undersøgte hvert af disse krav og anvendte aspekter af det flydende design System i vores egne udforskninger.

De første flydende designelementer, vi så ud til at implementere, var "akryl", som er den gennemskinnelige, glasagtige overfladebehandling af paneler og "afslør", lyseffekten, der vises på hover for at afsløre handlingsbare elementer. Hver af dem præsenterede deres eget sæt udfordringer, og vi forblev i tæt kommunikation med Fluent og de andre Office-teams, hvor vi lærte, hvad der virkede og hvad ikke.

Tidlig udforskning af Fluent Mail i let temaTidlig flydende udforskning af kalenderenEksperimentere med en blå øverste bjælke og justere mere efter Outlook-mærket

Akryl - baggrund eller ingen baggrund, det er spørgsmålet

Acryl er en Fluent Design System-komponent, der tillader inkorporering af lys, dybde, bevægelse, materiale og skala i UI. Det tilføjer en delvis gennemsigtig struktur (materiale) til visse brugergrænsefladeelementer som ruder. Med sin introduktion var et naturligt spørgsmål, der opstod: ”Hvis jeg kan se det, hvad ser jeg så? Hvad er der i baggrunden? ”Da vi allerede har oprettet et baggrundsbillede som standard i vores app, spurgte vi os selv:” Kæmper vores baggrund med skrivebordsbaggrunden? Skal vi slippe af med vores baggrundsbillede til fordel for brugerens desktopbillede? Hvad med andre appvinduer i baggrunden, der måske ikke ser smuk ud? Hvordan fungerer det med (mærke) farver? ”Dette fører til en række udforskninger.

Tidlige Senere Senere

I sidste ende besluttede vi os for baggrundsfoto i appen, fordi vi vidste, at det glædede vores brugere. Det reducerede også den visuelle baggrundsrofil i tom tilstand, når der ikke vælges nogen e-mail. (Imidlertid har vores brugere mulighederne for at ændre billedet eller slukke det i personaliseringsindstillinger.)

Åbenbaring på hvidt med

At afsløre - eller ikke afsløre?

Reveal er en lyseffekt, der bringer dybde og fokus til interaktive elementer. Ved at vise grænser for kontroller og knapper på musen afslører det handlingsbare elementer og hjælper med at forstå brugergrænsefladen. Mens begrebet afsløre er stort, er djævelen altid i detaljerne. I den første iteration afslører ikke kun eksponerede interaktive elementer, men også eksponerede grænserne for kontroller i de nærliggende paneler og gjorde opmærksom på tidligere usynlige forskellige justeringer af kontroller. For eksempel var elementer i venstre navigationsrude ikke nødvendigvis på linje med elementer i meddelelseslisten, fordi de ruller forskelligt. Det skabte på sin side en slags murværkseffekt synlig med afslører, der tilføjede mere visuel støj til appen, noget vi faktisk ønskede at slippe af med. Så for at undgå alt det, vi besluttede at slå afsløringen fra i meddelelseslisten - kun anvende den på navigationsruden og også deaktivere afsløringen på lodrette linjer i mappelisten. Med alt det sagt, ved vi, at det flydende designteam er hårdt i arbejde med at forbedre afsløret baseret på vores feedback, og vi vil revurdere dets anvendelse andre steder i vores app i fremtiden.

"Hvordan flytter jeg mit vindue?"

En vigtig del af redesignet var at give brugeren et klart informationshierarki og reducere det visuelle rod ved at fjerne appvinduets titelbjælke. Selvom det ikke kun er æstetisk tiltalende, reducerede det opfordringerne til handling, der findes på skærmen, og lader brugeren fokusere på deres indhold.

En åbenlyst bekymring var, at denne ændring kunne forårsage forvirring ved at fjerne brugernes visuelle råd til, hvordan man flytter appvinduet. Vores design gjorde det stadig muligt for brugere at flytte appen ved at klikke og trække de øverste 32 pixels, men vi var bange for, at brugerne måske kan forveksles, hvis den visuelle pris ikke var til stede. Vi drøftede om at køre en brugerundersøgelse for at bestemme konsekvenserne af denne ændring, men indså, at da andre apps i Windows 10 tidligere havde foretaget lignende ændringer, kunne vi nå ud til dem og se, om deres brugere havde oplevet vanskeligheder, når deres apps titellinje blev fjernet.

Hvad vi opdagede var meget opmuntrende. Edge-teamet delte den oplevelse, de havde, ved hjælp af deres apps titellinje udelukkende til at organisere webside-faner. De fortalte os, at den første brugerfeedback var blandet, og mens nogle brugere oprindeligt havde forbehold, var feedback hurtigt forsvundet, og den samlede opfattelse af designvalget var positiv.

Da Mail og Kalender indførte ændringen så vi næsten ingen feedback om fjernelse af titellinjen. Tværtimod refererede feedback til appen som 'moderne' og 'frisk'. Det viste sig, at det at trække toppen af ​​et appvindue var et så almindeligt mønster, at vores app forblev fuldstændig brugbar uden dette ældre UI-element.

Undersøgelse med folder folderout

Øjeblikke af sandhed i kode

Efter at vi har designet alt og afleveret specifikationer og comps til vores partner i ingeniørarbejde kom der de kritiske ”sandhedsmomenter i kode.” Der er ofte deltas når det kommer til skrifttyper, farver, gennemsigtighedsværdier osv. Mellem design i et designprogram og bygning i kode. Anvendelse og finjustering i den rigtige ting bliver en væsentlig del af processen, der arbejder direkte med ingeniørerne for at stryge alle de små kinks.

Gennem testfasen (kaldet dogfood hos Microsoft) gennemgik vi flere iterationer, enten for at adressere ting, vi åbenbart havde gået glip af, eller ting, der var tilgængelighedsrelaterede baseret på feedback. Disse problemer omfattede fontfarvekontrast på akryl, udvælgelsesfarve med faktisk akryl i kode samt test med forskellige baggrundsbilleder.

(Baggrundsfarverne for valgte emner i navigationsruden var vigtige som en tilbagevendende løsning i scenarier, hvor Fluent ikke understøttes på grund af hardware- eller softwarebegrænsninger, eller hvis det er slukket af brugeren.)

Påmindelse: Designere er ikke kunderne

Et konstant diskussionspunkt havde været den valgte tilstand for konti og mappe i venstre navigationsrude. Fluent Design-kontroller bruger en lille lodret markeringsindikator til venstre for det valgte emne, der ikke vises i modsætning til den påviste ulæste mailbjælke i meddelelseslisten. På trods af de første bekymringer om, at de lignende optrædener, men forskellige betydninger kan forvirre brugerne, og efter flere design-iterationer for den ulæste markør og den valgte tilstand, gik vi videre og implementerede og testede det i hundefoder. Interessant nok var der meget lidt feedback om dette. Brugere havde ikke problemer med at skelne mellem dem.

Brugertest er altid en god påmindelse om, at de ting, vi designere opfatter som uoverensstemmelser, måske ikke opfattes som sådan af brugerne. I en af ​​diskussionerne med en bruger hørte jeg ”Det er en ting, der er markeret, fordi det er vigtigt.” Vi lærte, at når det ses i brugssammenhæng, bliver det, vi opfatter som uoverensstemmelser, mindre vigtigt, og brugerne tilpasser sig hurtigt.

Detaljer: Linjer i meddelelsesliste

Et godt eksempel, hvor vi forsøgte at overholde principperne for Fluent Design ved at fejre bare indholdet og fjerne så meget krom som muligt fra brugergrænsefladen er de vandrette linjer i meddelelseslisten. Brugere havde svært ved at skelne mellem individuelle meddelelser, og på baggrund af feedback måtte vi gradvist bringe linjer tilbage for at øge anvendeligheden. Det viste sig, at bare brug af afstanden til at adskille meddelelser fra hinanden ikke var klar nok, især da vi havde introduceret en ny funktion med små forhåndsvisninger af vedhæftede filer (fotos) i meddelelseslisten, og meddelelser med forskellige højder begyndte at blø i hver Andet. Tilsvarende genindførte vi linjen mellem meddelelsesliste og læserude. Undertiden har øjet brug for de subtile visuelle signaler for ikke at snuble.

At designe en app er en udviklende historie

Udformningen af ​​apps i dag er et øjebliksbillede i tide. Designet vil konstant forbedre og udvikle sig. Vi arbejder allerede med finjustering med indstillinger for informationstæthed, flydende tilsluttede animationer og et let tema. Forvent at se mere udvikling fra Fluent Design og Windows Mail og Kalender-apps i månederne og årene fremover!

Disse apps er kun to kapitler i en meget større historie - hvor det flydende design giver intelligens og konsistens på tværs af apps og enheder fra 0D til 4D. Den seje ting at overveje som designer er dette: uanset om du chatter med Cortana på Invoke, bruger launcher på din Android-telefon, farver med Edge på din overflade eller skaber med Paint 3D i dit Cliff House med et hovedmonteret display, Fluent Design sikrer, at du (og dine brugere) får konsekvent dejlige oplevelser.

Flydende er en samarbejdsindsats

Find ud af mere om Fluent Design, og vær med i det forskellige skabersamfund!

Tjek #FluentFridays på twitter @MicrosoftDesign

Følg Microsoft Design på Dribbble, twitter og Medium

Følg mig på Twitter

Tak til teamet

Denne historie afspejler indsatsen og engagementet i et stort antal hold og holdkammerater. Jeg overtog vedtagelse af Mail og den samlede kommunikation med de flydende og kontorhold for rammerne og delte komponenter, mens Hiroshi Tsukahara kiggede på det fra kalenderperspektivet. Chris Bimm, som også bidrog til denne artikel, kørte indsatsen fra PM-siden. Andrew Falk hjalp med bevægelsesdesignet, og Barry Li var en stor dev samarbejdspartner med mere tålmodighed, end du kan forestille dig! Tak også til alle på PM, ingeniør- og designteam, der ikke er nævnt her, men uden deres bidrag ville dette ikke have været muligt. Sidst, men ikke mindst, en særlig råb til March Rogers og Jason Blackheart, tidligere kolleger, der lagde meget af grundlaget for dette.

For at forblive viden om Microsoft Design skal du følge os på Dribbble, Twitter og Facebook eller tilmelde dig vores Windows Insider-program. Og hvis du er interesseret i at blive medlem af vores team, skal du gå til aka.ms/DesignCareers.