Desktop prototipiranje

Kako postavljanje igra važnu ulogu u dizajniranju stolnih računala

U Dropboxu dizajniramo mnoga sučelja koja korisnici doživljavaju na svojim stolnim računalima. Ono što je posebno posebno u dizajnu radne površine je da ne možemo predvidjeti kako će izgledati korisnikov zaslon - neuredni radni stolovi, bučni pozadine, stotine Chrome kartica, na popisu se nastavlja.

Unatoč tome što znam da je većina stolnih računala pretrpana i prepredena, često sam kriva za predstavljanje svog rada kao da je to izloženo na MoMA-i.

Soft-pastelne pozadine, preglednici bez hroma i bez buke na radnim površinama sve su to lijepa, ali nerealna postavka.

Dizajniranje za stvarni svijet

Iako je sjajno predstaviti rad u saniranom formatu, također je važno zapamtiti da ti scenariji zapravo ne postoje. Zapravo je okruženje korisnika obično zauzet, sklon razdvajanju prostora.

Možda nije lijepo, ali bliži je onome što će zapravo doživjeti naši korisnici.

Nove poruke e-pošte stižu za minutom, kalendar upozorava vas da idete na sljedeći sastanak i desetine Chrome kartica na kojima vas gnjave o zadacima koje ne biste trebali zaboraviti. Čudo je da itko ima posla.

Simulacija radne površine

U Dropboxu otkrili smo da je jednostavno predstavljanje našeg rada realističnim radnim okruženjem koje stoji iza dizajna pojavilo nove ideje i dovelo u pitanje način razmišljanja o radnim površinama.

Kako bismo dizajnerima olakšali postavljanje svog rada na površinu radne površine, stvorili smo predložak Sketch s nekoliko osnovnih macOS i Windows desktop okruženja.

Predložak Sketch za jednostavnu simulaciju radnog okruženja.

Ovaj predložak Sketch učinio je mrtvim jednostavnim za dizajnere da svoj dizajn bace u vjerodostojno macOS ili Windows radno okruženje prije nego što su ga ispisali za kritiku dizajna. Iako je dodani kontekst pomogao, otkrili smo da nedostaje presudni aspekt - vrijeme!

Dodavanje dimenzije vremena

Ono što se događa prije, za vrijeme ili nakon što korisnik uđe u interakciju s gotovo suštinom gotovo je jednako važno kao i stvarno sučelje. Radimo na Dropbox tijeku instalacije, evo nekoliko pitanja koja moramo postaviti:

Prije: Zašto instaliraju Dropbox? Je li nestrpljivi klijent samo im e-poštom poslao vezu do mape Dropbox i oni instaliraju Dropbox za pristup mapi?

⏸ Tijekom: Kojim aplikacijama trebaju pristupiti kad instaliraju Dropbox? Moraju li prebaciti između Safarija i Findera da bi dovršili ukrcavanje?

⏭ Nakon: Koji ih distrakti odvlače od instaliranja Dropboxa? Jesu li bili na sredini puta unutar broda, kada ih je kalendarski upozorenje podsjetio da pozive klijenta u roku od 5 minuta?

Pitanja o tome što korisnik doživljava prije, za vrijeme i nakon što naiđe na vaš dizajn, mogu vam pomoći da odredite prioritete. Na primjer, ako korisnik instalira Dropbox odmah nakon što je pozvan u mapu, možda bi onboarding trebao istaknuti tu novu mapu.

Izrada prototipa zahtijeva mnogo vremena i nemoguće je uhvatiti svaki scenarij. Ne dozvolite da vas to plaši. Čak i predstavljanje rada u jednom, uvjerljivom scenariju može usmjeriti vrstu povratnih informacija koje dobivate od suigrača i može vam pomoći otkriti nove načine poboljšanja vašeg konačnog dizajna.

Kit za izradu prototipa

Iskusivši prednosti predstavljanja svog rada u realističnom prototipu za radnu površinu, želio sam potaknuti druge dizajnere na Dropbox-u da pokušaju isto.

Moja prva ideja bila je jednostavno proširiti naše predloške Sketch i upotrijebiti InVision za dio prototipa. To nije baš postiglo dobru ocjenu. Konačni prototipi nisu osjećali realistične i osnovne radnje na razini sustava poput povlačenja i ispadanja nisu bile moguće.

Budući da je Framer bio moj omiljeni alat za izradu prototipa na radnoj površini i Dropbox tim ga je već aktivno koristio, odlučio sam ga učiniti našim alatom za izradu prototipa na stolnom računalu. Uz pomoć našeg dizajnerskog tima, izradili smo komplet Framer-ovih komponenti za višekratnu upotrebu. Obuhvaćao je sve građevne blokove koji će našem timu trebati za izradu realističnih macOS-a i Windows okruženja.

Komplet smo izdali interno prije nekoliko mjeseci, a naš tim dizajnera otkrio je da je to sjajna polazište za brzo stvaranje realističnih prototipa radne površine. Nadamo se da ćemo nastaviti gurati jedni druge da postavljamo zahtjevna pitanja o onome što se događa prije, za vrijeme i nakon što naši korisnici stupaju u interakciju s našim dizajnom.

Preuzmite naš komplet za desktop Framer

Želimo vidjeti kako dizajnerska zajednica koristi od tjedana rada koji su prešli na ovaj komplet za izradu prototipa, tako da danas objavljujemo Desktop Kit na web stranici Framer! Prijeđite na framer.com/resources da biste ga preuzeli.

Evo nekoliko savjeta za početak rada s Desktop Kitom:

Kartica Dizajn

Prvo što ćete primijetiti prilikom otvaranja kompleta je da su aplikacije macOS i Windows 10 crtane upravo na kartici Dizajn. To drastično ubrzava krivulju učenja i pruža ljudima koji su poznatiji od Sketcha jednostavno mjesto za početak.

Preglednici, klijenti e-pošte, preglednici datoteka, aplikacije za chat i upozorenja sustava!

Zapravo je svaki komad korisničkog sučelja ručno crtao u Frameru, sve do najsitnijih ikona. To prilagođavanje kompleta čini lakim i ogroman je dokaz fleksibilnosti Framera.

Kartica Kod

Za svaku aplikaciju na kartici Kôd pronaći ćete skup odgovarajućih funkcija. Ovi isječci koda omogućuju vam radnje poput podešavanja operativnog sustava, otvaranje i zatvaranje aplikacija i dodavanje upozorenja o sustavu.

Korištenje funkcija preglednika Desktop Kit na kartici Kôd

Što je više toga, možete prebacivati ​​između operativnih sustava u sekundi. Svako upozorenje o aplikaciji i sustavu u Desktop Kit-u ima verziju za macOS i Windows 10. Nikada nije bilo lakše vidjeti kako vaš dizajn izgleda u Windows okruženju.

Prelazite između macOS-a i Windows 10 okruženja

Nekoliko primjera za početak

U Desktop Kitu naći ćete sve što je potrebno za stvaranje sljedećih primjera. Na kartici Kôd samo dvaput kliknite primjer i komentirajte kôd iznutra kako biste ga aktivirali.

Najava nove značajke
Zamislite da dizajnirate odredišnu stranicu za novi proizvod, poput Dropbox Showcase-a. To vam može pomoći da shvatite kako korisnik prvo dođe do vašeg dizajna. Na primjer, što ako ih je upozorio da otvaraju promotivnu e-poštu koja se zatim povezala s vašom odredišnom stranicom.

Primjer 1 u Desktop Kitu

Ukrcavanje na brodu s distrakcijama
Često pretpostavljamo da korisnici imaju cijeli dan da završe naše lijepe brodske tokove, ali stvarni život nam smeta. Ovaj primjer simulira zauzeto okruženje radne površine s upozorenjem koje podsjeća korisnika na sastanak u 5 minuta. Gledanje protoka na brodu pod ovim svjetlom može vam pomoći da jednostavno ukrcate brod i točku.

Primjer 2 u Desktop Kitu

️ Interakcije s više prozora
U ovom primjeru, korisnik dodaje svoju prvu datoteku u mapu Dropbox što ih poziva da pogledaju sinkroniziranu datoteku na dropbox.com. Pri dizajniranju korisničkih putovanja koja se protežu na više površinskih područja može vam biti od koristi vidjeti cjelokupno iskustvo na jednom mjestu.

Preuzmite i uživajte!

Preuzmite Desktop Kit i javite nam što mislite! Kad sljedeći projekt dođe do faze prototipiranja, bit ćete dobro pripremljeni za prelazak na sljedeću razinu.

Veliko hvala Gabrielle Matte za stvaranje savršene slike za ovaj post na blogu, Adamu Noffsingeru za pomoć u stvaranju Desktop Kit-a, te Johnu Saitu i Angeli Gorden za pomoć u pisanju ovog posta.

Želite još od tima Dropbox Design? Pratite našu objavu, Twitter i Dribbble. Želite li zajedno napraviti magiju? Zapošljavamo!