Kako sam redizajnirao Ableton Live i kakve su bile reakcije zajednice?

Kao sa bilo kojim instrumentom, svako ima svoj način na koji svira/koristi DAW. Stoga sam pitao korisnike Live-a o njihovim navikama, problemima i omiljenim karakteristikama softvera.

Redizajniran Ableton Live

Ovo je moj svojevoljni redizajn Ableton Live-a. Cilj ovog projekta je bio da demonstriram svoje dizajnerske sposobnosti ljudima iz Abletona s kojima bih voleo da radim.

Da se predstavim: Moje ime je Nenad i bavim se dizajnom interakcije i interfejsa. Povrh toga, imam više od 20 godina iskustva sa pravljenjem elektronske muzike.

Ideja ovog poduhvata bila je da prikupim informacije o tome šta korisnici Live-a misle da može da se poboljša. Nakon toga postavljam hipotezu, dodatno proučavam, odradim redizajn koristeći svoju intuiciju i veštine, testiram da bih proverio da li sve ide u dobrom smeru, i konačno — prikažem rezultate.

Da me ne biste pogrešno razumeli, voleo bih da u kratkim crtama opišem šta ovo nije:

  • Ovo nije neka zamena trenutnog dizajna, i ne tvrdim da je boljeg kvaliteta. Volim trenutni UI, ali istovremeno verujem da se sve da poboljšati.
  • Ne pokušavam samo da prodam ideje za funkcionalnosti — odabrao sam da implementiram nove funkcionalnosti jer mislim da je to dobar način da demonstriram kako razmišljam o dizajnu — niti sam hteo da izazovem featuritis.
  • Iako je bilo veoma korisno, nisam slepo slušao sve što su korisnici Live-a rekli u anketama koje sam sproveo. Postoje dva razloga:
    • Ono što ljudi misle da žele se često ispostavi da nije ono što zaista žele.
    • Nisam sproveo prave testove korišćenja kako bih proverio šta zapravo ne valja, i kako se korisnici ponašaju (jer bi to bio projekat za sebe).
  • Verovali ili ne, moram posebno da istaknem i da ovo nije skin/theme. Ne možete da ga kupite/skinete.

Prva anketa za korisnike Live-a — navike, ključni problemi, omiljene karakteristike

Kao sa bilo kojim instrumentom, svako ima svoj način na koji svira/koristi DAW. Stoga sam pitao korisnike Live-a o njihovim navikama, problemima i omiljenim karakteristikama softvera.

Prva anketa se bavila time šta korisnici misle da treba popraviti i šta radi kako treba (rezultati ankete 350+ korisnika). Izvukao sam najčešće pomenute od oko 4.000 funkcionalnosti i napravio listu koju sam pratio skoro kao naredbe.

Druga anketa — povratne informacije nakon mog redizajna

Drugu anketu je popunilo 150 korisnika. Bavila se prikupljanjem povratnih informacija o promenama koje sam napravio i na osnovu kojih sam poboljšao redizajn. Možete videti rezultate ankete ovde, ali ću svakako prikazivati vizualizaciju unutar ovog teksta što više mogu. Sve u svemu, korisnici su bili zadovoljni rezultatom.

Koristio sam razna sredstva da bih stupio u kontakt sa korisnicima (hvala još jednom, ljudi, mnogo ste mi pomogli!). Ako vas interesuje kako su tekli razgovori, možete da vidite ovde:

Kako sam počeo redizajniranje kroz skiciranje

Ableton Live skice

Ushićen i bez nekog konkretnog smera u glavi, počeo sam da istražujem ideje kroz skiciranje na papiru. Oduvek sam koristio skiciranje kao alat za slikovito i kreativno razmišljanje. Kasnije ćete videti još skica Extended Browsera kroz iteracije, kao i analizu konkurencije.

Browser, Session View i Device Rack

Želeo sam da zadržim originalni raspored prozora i duh trenutne Live aplikacije.

Pored očiglednih razloga (navikavanja korisnika na novi raspored prozora), nisam hteo da se muzičari osećaju kao da im je neko zamenio gitaru trombonom, takoreći. Uzevši to u obzir, svakako sam dodao mogućnost premeštanja prozora kako god korisniku odgovara.

Header, Project Tabovi i Status Bar

Header sa svim mogućim elementima UI-a

App header

Regrupisao sam, promenio, uklonio i dodao neke dugmiće na headeru. Grupisanje je vrlo efikasan alat koji može da pomogne korisnicima da brzo ukače složene interfejse.

Neke od originalnih grupa mi nisu prijale. Na primer, grupa ‘Envelope’ sadrži dugmiće koji se nalaze na tri različita mesta u trenutnom UI-u. Grupisao sam ih jer su sva četiri u vezi sa envelope-ima na neki način. To bi trebalo da pomogne kako novim, tako i iskusnim korisnicima, ali naravno, treba prvo testirati.

Iako prikazujem sve header grupe i elemente, korisnici mogu da uklone one koje ne koriste, i da ih premeste kako god im odgovara. Evo feedbacka koji sam dobio za header redizajn:

Project Tabovi i View Options

Tabovi treba da omoguće korisniku da otvori više projekata istovremeno i da može da prenosi elemente između njih. Vidljivost project tabova može da se podešava, tako da korisnik može da ih sakrije ako ih ne koristi. Evo reakcije korisnika:

Status Bar sa Workspace, Display Zoom i Detail Levelom

Workspace je skup konfiguracija interfejsa. Na primer:

  • promene boja,
  • jačina svetla,
  • raspored prozora,
  • vidljivost različitih sekcija,
  • nivo detalja UI-a,
  • nivo zuma,
  • veličina prozora,
  • prečice,
  • itd.

Korisnici mogu da imaju više različitih Workspace-ova u zavisnosti od upotrebe.

Kao što zvuk instrumenta može da se obradi da bi se uklopio u različite žanrove, verujem da i DAW-ovi treba da imaju istu fleksibilnost. Workspace-ovi sigurno mogu da pomognu na tom frontu.

Detail Level slider za kontrolu nivoa detalja na interfejsu

Detail Level slider kontroliše koliko elemenata UI-a korisnik ima na ekranu. Kada je slider na levom kraju, prikazani su samo osnovni alati, a kada je na suprotnom kraju, UI postaje veoma detaljan. Oba su odlična u zavisnosti od prilike i potrebe.

Neki korisnici žele više granularnu kontrolu, dok drugi uživaju u minimalizmu, svako iz svog razloga. Na primer — u slučaju javnog nastupa, muzičar ne želi da pritisne pogrešno dugme. S druge strane, ako zalazi u sitne detalje produkcije, trebaće mu svi alati koje mu DAW pruža. Što se stila tiče, upotrebiću analogiju sa bubnjevima — neki bubnjari vole da imaju gomilu činela, tomova, perkusivnih elemenata, itd., dok drugi vole jednostavan i sveden set.

Browser i Detachable Windows

Browser

CPU Usage History prikazuje koliko procesorske snage Live i trenutni plug-inovi koriste. Prikazuje prosečnu potrošnju od momenta instalacije. Ove informacije mogu da pomognu u odlučivanju koji će plug-in korisnik izabrati u zavisnosti od konteksta i potrebe. Na primer, ako je potrošnja velika, a korisniku treba neki jako suptilan efekat, uz konsultaciju sa ovim menijem može valjano odabrati uređaj sa malom potrošnjom CPU snage.

Neki korisnici su komentarisali da ovaj alat može da utiče na kreativni proces. Stoga postoji jednostavan način za prikrivanje/prikazivanje ovog prozora — desni klik na header (kao i u sadašnjoj verziji Live-a).

Detachable Windows

Neki korisnici preferiraju da koriste default raspored prozora. Za ostale ova opcija može značajno da poboljša proces rada. Korisnici koji žele da izbegnu prevlačenje prozora na sve strane ne moraju da brinu — premeštanje se neće desiti slučajno jer su svi prozori podrazumevano zaključani. Opcija za otključavanje je dostupna na svakom prozoru, za one koji vole da imaju kontrolu nad svojim radnim okruženjem. Različite konfiguracije prozora mogu da budu sačuvane kao Workspaces, za lako menjanje po potrebi.

Session View

Mixer i Clips sa svim mogućim elementima UI-a

Postoji Detail Slidera putem kog korisnik bira koliko interfejs elemenata želi. Tu je takođe i opcija za skrivanje/prikazivanje različitih prozora. Prikazano je i kako bi grupe unutar grupa funkcionisale. Plave tačke i linije predstavljaju automaciju ili modulaciju.

Evo mišljenja korisnika o ovakvom celovitom Session View-u, sa svim elementima zbijenim na jednom mestu.

Clip tipovi i stanja

Ova slika objašnjava sve tipove i stanja Clipova. Clipovi sa nekoliko karakteristika imaju ikonu sa tri tačke koja se pod kursorom ponaša kao što je prikazano na slici. Evo rezultata ankete:

Simplified Session View bez velikog dela UI elemenata Clipa

Oko 40 odsto korisnika je reklo da im Session View koji sam sastavio izgleda malo pretrpano, te sam se ponovo bacio na posao i napravio ovu ogoljenu verziju sa obojenim Clipovima zbog lakše identifikacije (slika ispod).

Svestan sam da je Ableton uvek bio orijentisan oko minimalizma i efikasnih praktičnih rešenja i poštujem to. Uzevši to u obzir, istražujem ideje za neke nove funkcionalnosti i pokušavam da se ne ograničavam previše dok istovremeno imam na umu širu sliku.

Device Rack

Ovde sam želeo da približim presets i devices, da prikažem skrivene funkcionalnosti i učinim da browsing bude više kontesktualan. Ova konzistentna verzija dozvoljava lako menanje:

  • oversampling levela,
  • kvaliteta saturacije,
  • kvaliteta reverberacije,
  • delay mode-a,
  • skrivanja/prikazivanja viewova,
  • menjanja lokacije displeja,
  • itd.

Mislim da je mnogo čitkije i efikasnije da Device View Selector ima tekstualne labele umesto malih, neprepoznatljivih ikonica.

Još jedan mali ali značajan detalj — za lakšu kontrolu gaina napravljeni su veći gain merači među uređajima.

Browser, History, i Expanded Mixer

Expanded Mixer je još jedan View. Korisnik može da se prebacuje između Session Viewa, Arrangement Viewa i Expanded Mixer Viewa koristeći Tab dugme. Druga varijanta je kliktanje Show/Hide Expanded Mixer Section dugmeta, koje je pored Show/Hide Mixer Section dugmeta. Više o ovome u View Options sekciji.

Svestan sam da ovo nije najbolje rešenje jer sam malo izmešao Views i Sections — ali sam ubeđen da postoji elegantno rešenje koje se može naći uz više vremena i resursa.

Expanded Mixer i History

Expanded Mixer sa Device Slotovima i sekcijom za I/O

Umesto Clipova, Extended Mixer View ima Device Slotove vertikalno raspoređene u svakom kanalu odozgo na dole. Svaki Device Slot sadrži parametre nekog device-a. Ti parametri mogu da se dodaju ili uklanjaju desnim klikom na određeni device parametar i biranjem Assign to ili Remove from the Device Slot.

Pošto Expanded Mixer zauzima visinu celog ekrana, dodao sam i boje na dnu svakog kanala za lakšu navigaciju. Stereo kontrole su nabudžene opcijama za Panning, Balancing, i Stereo With (sve između Mono i Out of Phase). Povrh toga, moguće je birati između Panninga i Balancinga na kanalima ponaosob.

I/O sekcija je uprošćena na tri elementa umesto četiri padajuća menija i tri dugmeta. Minimizacija je izvedena tako što je prikazan prvi nivo, a podnivoi su dostupni na jedan klik.

Sačuvani prethodni koraci za ‘undo’ uz pomoć Snapshotova

Vizuelni prikaz ‘undo’ koraka uz mogućnost da se sačuvaju snapshotovi, kasniji pristup njima i pokretanje nove grane projekta od trenutka snapshota. Mnogi od anketiranih korisnika su bili oduševljeni ovim, ali su bili zabrinuti koliko je zapravo izvodljivo. Na svu sreću, vrlo sličan alat po imenu History Panel postoji u Adobe Photoshopu još od 1998. godine.

Expanded Browser and Expanded Mixer

Expanded Browser i Expanded Mixer

Expanded Browser

Skice pretraživanja browserom i analiza konkurencije

Skice Pro Tools, Bitwig, Cubase, i Logic Pro browsera

Skice Studio One i Fruity Loops browser-a, i skice mog Ableton Live expanded browser redizajna

Skicirao sam druge DAW browsere, media bayeve, biblioteke, itd. da bih video šta valja, a šta ne. Kroz kombinaciju svojih ideja, već postojećih rešenja i ideja anketiranih korisnika – sastavio sam ovaj Expanded Browser.

Rezultati pretrage Sample-ova i Plug-inova unutar Expanded Browsera

Sample search rezultati

Plug-ins search rezultati

Expanded Browser bi omogućio lakšu i efikasniju organizaciju sample-ova, preseta, device-ova i  plug-inova. Favorites sekcija s leve strane je za najčešće korišćene stavke. Recent sekcija je za najskorije korišćene stavke.

Sample/Plug-in Type kolona pomaže u razdvajanju i sortiranju po tipu pretrage. Tempo, Key i Scale su veoma korisni u potrazi za sample-ovima ili loopovima. Za koristan rejting sistem predlažem da korisnik (a ne aplikacija, npr. po učestanosti korišćenja) daje ocene. Pored rating i favorites, postoje i tagging i color-coding alati za organizaciju (recimo CPU history).

Sample Preview ima dugme za uključivanje/isključivanje, jačinu zvuka, ponavljanje i opcije za wrap i transpoziciju sample previewa koji bi se uklapali sa tempom i tonalitetom projekta. Tonalitet projekta se može menjati kroz Signature header meni grupu.

Zaključak

Nakon svega, prezadovoljan sam rezultatom, posebno uzevši u obzir malu količinu resursa kojom sam baratao. Nisam ni sanjao da ću dobiti ovoliko podrške i saveta od Ableton Live zajednice. Evo šta im se najviše svidelo:

Bilo je vrlo očigledno nakon mog prvog istraživanja da je moderan izgled veoma važan korisnicima Live-a (zauzima peto mesto na listi želja). Stoga sam u drugom istraživanju pitao šta misle o mom dizajnu kao „modernom” unapređenju:

To je sve. Vidim ovo kao ideju, početak i veliku inspiraciju. Ne cilj, već smer u kom bi Live mogao da krene u budućnosti. Nadam se da ste uživali u ovom putu.

Epilog 1

Nažalost, nakon svega, nisam dobio ni posao ni intervju na kom bih mogao da komentarišem ili objasnim svoje odluke o dizajnu. Međutim, nakon što sam dobio email u kom su mi javili da ne žele da me zaposle, dobio sam priliku da razmišljam sa njihovim vođom dizajna, Ed Macovazom. Ed i ja smo diskutovali o mom samoinicijativnom redizajnu i on i njegov tim su mi dali povratnu informaciju, kao i neke korisne savete o tome kako da postanem bolji dizajner.

Evo zaključka: Nekad pobediš, a nekad naučiš.

Epilog 2

Od sada možete besplatno skinuti sve project fajlove (PSD, PSB i Sketches) na kojima sam radio poslednjih nekoliko meseci sa mog GitHub Repozitorijuma ili direktno sa mog sajta. Živela zajednica!

Predstavljamo poslodavca
Zuehlke-mini-1.jpg

Zuhlke

Join our house of engineering

We inspire our customers and turn their visions and ideas into real-life results, applying cross-industry experience and our extensive expertise in business and technology. We combine our knowledge of engineering and IT, opening up new paths for our clients and implementing our projects quickly and reliably. We take responsibility for the products, services, and business models of the digital future.

Nenad Milošević

  • Wednesday, 7. February 2018.

    Odličan tekst, objavljujte više ovakvih članaka

  • Wednesday, 7. February 2018.

    Odličan tekst zaista, pri čemu mislim da mu nedostaje jedna (za čitaoce Startit-a smatram važna) stvar. Autor je na početku napisao da je svrha celog ovog istraživanja njegov showcase sa ciljem da uđe u Ableton, i to je sasvim OK. Istraživanje je opisano lepo i detaljno. Ono što, međutim, nedostaje, je naučena lekcija. Ceo ovaj showcase je od koristi autoru, i napravljen i opisan radi autorove koristi (zaposlenja u Abletonu), ali čitaoci bi imali mnogo više koristi od članka da je autor podelio sa njima razloge zbog kojih ga Ableton nije pozvao i povratne informacije koje je dobio od njihovog dizajnera – onda bi slagalica bila kompletna.

  • Wednesday, 7. February 2018.

    Hvala

  • Friday, 9. February 2018.

    @Martin Hvala. Pre svega, planiram vec neko vreme da napisem novi artikal na temu sta sam naucio sa ovim projektom. Tu bi bili odgovori na sva tvoja pitanja i jos dosta toga. Do tad evo odgovora na ostalo:

    Jeste, cilj je bio da pokazem Ableton-u svoje umece. Medjutim stiglo mi je par mejlova i tvitova kako sam uspeo da poguram konkretnu industriju napred. Tako da korist imamo svi sad od toga. Neko ce da bude inspirisan ovime i napravice nesto novo. Ili ce jednostavno da pozajmi. Par ljudi je reklo da su ovi iz Abletona uzeli neke ideje i implementirali ih u verziji 10. Ja licno ne znam jer nemam desetku, ali meni je to ok skroz. Drago mi je ako je tako. To mi je onako super validacija da to sto radim jeste dobro. Ako firma koja ima toliko resursa (novca, iskustva, timove strucnjaka, itd) kopira mene koji je ovo napravio za 3 meseca sam i bez ikakvih resursa… Kontas sta hocu da kazem.

    Sto se tice njihovog odgovora, kao sto sam napisao, oni me nisu ni intervjuisali da objasnim to sto sam napravio. Poslali su mejl da ne zele da me zaposle i da njihov head of design hoce da poprica samnom. Culi smo se i on mi je samo rekao da oni misle da ovo sto sam ja uradio nije dobro bez nekog konkretnog objasnjenja (recimo isto kao kad odes na razgovor za posao u bilo kojoj vecoj firmi – feedback ce biti jako tanak). Ono sto je mene zbunilo je zasto uopste gledati na rezultat ovog kao nesto sto treba nekome da se svidi? Napisao sam da ja mislim da je njihovo resenje bolje (logicno). Plasim se da su mozda mislili da ja predlazem da zamene svoj UI sa mojim. Sve je delovalo kao da je nesto drugo po sredi. Mozda to sto je sve bilo javno, mada opet ne kapiram… Rekao mi je da moram da sklonim Ableton logo. Prokomentarisao je kako je iznenadjen sto sam tako kul prihvatio to sto ne zele da me zaposle. Ja sam pokusavao da izvucem konkretnije malo sta je po sredi ali mi to i nije uspelo. Nagadjao sam na osnovu feedback-a koji sam dobio od user-a i neke stvari su se poklopije. Mada opet, nije mi jasno kako neki profesionalci to nisu skapirali drugacije. Primera radi, user-i su bili u fazonu prenatrpan je UI. Ok, to su user-i, oni ne znaju da ja recimo preferiram da na jedan screen natrpam sve moguce state-ove, edge case-eve i da ako i nakon svega UI i dalje deluje upotrebljivo – to je kul. Mislio sam da ce njihovi dizajneri to da znaju, da ce skapirati. Mozda nisam dovoljno dobro objasnio?

    Na kraju, mozda je moj pristup totalno pogresan, mozda je sve toliko lose da nije stvarno vredno ni dati mi sansu i pozvati na intervju. Ali i to je ok, svi mi imamo jos dosta toga da naucimo.

    Ako te interesuju neki detalji slobodno pitaj. Nadam se samo da sad ne da nisam resio slagalicu vec da sam dodao jos delova koje treba uklopiti. :)

  • Šta ti je na umu?
    Dodaj komentar · Pravila diskusije

  • Unesite termine za pretragu