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

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:

• Ableton Forum Part 1 (link) i Part 2 (link),
• Gearslutz (link),
• Ableton Live Facebook Group (link),
• Ableton Addicts Facebook Group,
• Ableton Subreddit Part 1 (link) i Part 2 (link).

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!