SR
Nazad na sajt

Studija slučaja · Sistemi velikih razmera · Klijent poverljiv

Kada jedan izvor postane temelj mnogih proizvoda.

Portal je imao previše stranica da bi se dizajnirale jedna po jedna, a sistem iza njega morao je da izdrži urednike koji se na njega oslanjaju ceo dan. Zato nisam počela od ekrana. Napravila sam jednu biblioteku tokena i pustila da oba proizvoda izrastu iz nje.

Prvi deoProces

Pre prvog ekrana mapirala sam ceo projekat.

Nisam prvo otvorila Figmu. Čitala sam zahteve dok nisam mogla da ih objasnim nekom drugom, vodila radionice sa institucijama čiji podaci završavaju na portalu i utvrdila ko šta treba. Odluke ispod su nastale iz toga i oblikovale su sve što sledi.

  1. 01Istraživanje

    Građani, opštine, istraživači i urednici žele različite stvari od iste stranice. Zapisala sam ko šta treba.

  2. 02Radionice

    Vodila sam radionice sa institucijama iza podataka. Lepljivi papirići su pokazali šta je svakoj od njih zaista potrebno i gde se svi slažu.

  3. 03Analiza

    Prošla sam kroz zahteve red po red i uporedila slične portale, da vidim šta već funkcioniše, a šta još niko nije rešio.

  4. 04Mapiranje

    Zatim sam mapirala svaku oblast, svaku stranicu i sistem koji sve to objavljuje.

  5. 05Odluke

    Iz toga su proizašle četiri odluke. Zapisala sam ih rano i održale su se do kraja.

    Jedna ljuska za svaku stranicu
    Urednici menjaju sadržaj, sistem čuva raspored
    Tokeni pre ekrana
    Jedna biblioteka za portal i centralni sistem

  6. 06Sistem

    Sve ostalo na ovoj stranici izraslo je iz te četiri odluke.

    Komplet za portalDrugi deo
    Centralni sistemTreći deo
    BibliotekaČetvrti deo

Drugi deoKomplet za portal

Portal je sastavljen od delova koji se ponavljaju na svakoj stranici.

Niko ne otvara portal da bi se divio komponentama. Ljudi dolaze po broj, dokument ili rok. Ovo su delovi koji ih tamo dovode, ovde ponovo napravljeni iz prototipa, sa izmenjenim nazivima i podacima.

01Prikaz podataka

Svaki broj pokazuje svoj pravac i svoj izvor.

Broj bez izvora je samo glasina. Svaka vrednost na portalu kaže odakle dolazi, kada je poslednji put ažurirana i da li je porasla ili pala, strelicom i znakom, a ne samo bojom.

02Grafikoni

Jedna kartica podataka služi za svako merenje.

Čestice, gasovi, temperatura i polen važni su različitim ljudima, ali na portalu dele jednu karticu: naslov, period, tabove, grafikon i kratku tabelu. Kad znate da pročitate jednu, znate da pročitate sve.

03Navigacija

Ljuska ostaje ista bilo da je otvorena ili sklopljena.

Bočna traka zadržava iste stavke, ikone i brojače bilo da je otvorena ili sklopljena, a gornja traka drži pretragu, asistenta, jezik i podešavanja istim redom na svakoj stranici. Ljudi ne bi trebalo da traže navigaciju.

04Notifications

Poruke prate jedan miran obrazac.

Mala obojena pločica kaže kakva je poruka, tačka kaže da je nova, a jedan link briše sve. Isti red radi i u panelu obaveštenja i u sandučetu, pa sam ga dizajnirala samo jednom.

05Forme i kontrole

Svako polje se ponaša onako kako ljudi očekuju.

Polja, padajući meniji, polja za potvrdu, prekidači i brojači dele jednu visinu, jedno zaobljenje i jedan fokus prsten. Upozorenje o kvalitetu vazduha i stranica podešavanja pristupačnosti napravljeni su od potpuno istih delova.

06Kartice i liste

Kartice i liste se sklapaju od istih nekoliko delova.

Pločica sa ikonom i naslovom, prazno stanje sa jednom jasnom akcijom, lista linkova. Ovih nekoliko delova ponavlja se svuda po portalu, pa je nov odeljak uglavnom stvar izbora pravih.

Treći deoCentralni sistem

Centralni sistem radi iza celog portala.

Sve što ljudi vide na portalu ovde se piše, proverava i objavljuje, a rade to urednici koji u njemu provode svaki dan. Koristi iste tokene kao portal, ali je napravljen za brzinu i kontrolu, a ne za prvi utisak.

01Pristup

Bezbednost je vidljiva, a ne skrivena u podešavanjima.

Urednici se prijavljuju drugim faktorom, vide kada im lozinka ističe i znaju kada će se sesija zatvoriti. Zvuči strogo, ali ovo je zvaničan sadržaj, a ljudi se opuste kada vide pravila umesto da ih nagađaju.

02Tok rada

Svaki sadržaj pokazuje gde je u toku rada.

Nacrt, uređivačka provera, pravna provera, zakazano, objavljeno. Isti statusi, boje i brojevi pojavljuju se u listi, u editoru i u obaveštenjima, pa niko ne mora da pita u četu gde je neki članak.

03Uloge i dozvole

Dozvole se čitaju kao tabela, a ne lavirint.

Ko može da kreira, menja, odobri ili objavi šta, staje na jedan ekran. Uloga administratora ne može slučajno da se obriše, a privilegovana uloga traži drugu potvrdu. Oba pravila postoje zato što je negde, nekada, neko zaključao sve ostale.

04Stablo sajta

Stablo sajta određuje gde živi svaka stranica.

Urednici pomeraju stranice u stablu, biraju šablon i odlučuju gde se stranica pojavljuje u navigaciji. Meniji i putanje se prilagode sami, pa jedna izmena ne postaje pet.

05Trag izmena

Svaka izmena ostavlja trag koji ljudi mogu da pročitaju.

Ko je šta i kada promenio zapisano je jasnim jezikom. Kod zvaničnog sadržaja to nije lep dodatak, nego prvo što svi pitaju kada nešto pođe naopako.

Četvrti deoBiblioteka

Sve iznad se sliva u jednu biblioteku za ovaj domen.

Moja dizajn biblioteka postojala je i pre ovog projekta. Ovaj projekat je dodao biblioteku postavljenu za ovaj domen: shadcn/ui sa sopstvenim tokenima, temama i obrascima, zapisanim jednom i korišćenim u oba proizvoda.

01Registar tokena

Svaki token ima ime koje kaže čemu služi.

Komponente nikada ne traže narandžastu ili sivu. Traže --primary ili --muted-foreground, a registar kaže čemu služi svako ime. Ta jedna navika je ono što omogućava sledeća dva odeljka.

02Tokeni boja

Tri teme, jedan skup imena.

Svetla, tamna i visokokontrastna tema menjaju samo vrednosti iza imena. Komponente to i ne primećuju, i u tome je cela poenta, i razlog zašto pristupačnost ovde nije poseban projekat.

03Elevacija

Dubina prati nekoliko jasnih koraka.

Mali skup senki, svaka sa jednim zadatkom, od kartica do dijaloga. Kada neko traži novu, to obično znači da raspored ima neki drugi problem.

04Komponente

Dugmad, čipovi i kartice dele jednu anatomiju.

Sve što može da se pritisne ima istu visinu, zaobljenje i fokus prsten, a svaka kartica ima iste tri zone. Namerno je dosadno, jer dosadno je ono što ljudima omogućava da rade brzo.

05CRUD raspored

Jedan raspored služi svakoj listi u oba proizvoda.

Zaglavlje sa akcijama, filteri, tabela, paginacija i panel za uređivanje sa strane. Koriste ga sadržaj, korisnici, mediji i skupovi podataka, i na portalu i u centralnom sistemu.

06Pismo

Jedno pismo, četiri veličine koje rade posao.

Google Sans u četiri veličine sa fiksnom visinom reda. Niko ne bira veličinu odoka, pa hijerarhija drži na svakoj stranici, čak i na onima koje nisam lično dizajnirala.

LEARN
Biblioteka živi i samostalno, kao mesto za učenje.Pored proizvoda, biblioteka radi kao posebna instanca sa tokenima, komponentama, primerima i pravilima. Neko nov može da je otvori prvog dana i počne da radi bez čekanja da mu ja objasnim.
PDF
A na vrhu svega, whitepaper.Jedan dokument objašnjava razmišljanje iza svega: zašto postoji jedan izvor, kako se tokeni imenuju, kako biblioteka raste i kako nov proizvod počinje od nje.

OutcomeGde je sada

Projekat je specificiran i odobren od strane klijenta.

Svaki njegov deo je napisan u celosti. Razvoj je procenjen na jedanaest meseci, a dizajn je trajao oko tri. Portal obuhvata veliki broj stranica i još više komponenti, a čitavi odeljci postoje kao gotovi blokovi, pa neko nov može da sklopi stranicu bez kretanja od praznog ekrana.

Šta slediSkaliranje

Ovi temelji mogu da porastu u šta god da dođe sledeće.

Pošto sve počinje od jednog izvora, sledeći korak ne počinje od nule, bilo da je to centralni sistem, mobilna aplikacija, više timova koji koriste biblioteku ili nešto što još niko nije tražio.

Jedan izvor istine

  1. 2026 · Sada

    Veb aplikacijaJavni portal, sastavljen od kompleta i tokena.

  2. Sada

    Centralni sistemSistem iza portala, na istim komponentama.

  3. Sledeće

    Mobilno skaliranjeIsti tokeni, prilagođeni načinu na koji telefoni rade.

  4. Izvor istine

    Zajednička bibliotekaIzvor iz koga crpi svaki proizvod.

  5. Kasnije

    Novo rešenjeŠta god da dođe sledeće, polazi od istog izvora.

Sistem je napravljen da nadživi ovaj projekat.

To je od početka bio pravi cilj. Proizvodi se menjaju, timovi se menjaju, a portal će za pet godina izgledati drugačije. Odluke ispod toga bi i dalje trebalo da imaju smisla.