Vissza a portfólióhoz

ESETTANULMÁNY / SARJ

A felület együtt nő az üveggel

A Sarj csíráztatási napló azoknak, akik egyszerre több üveggel dolgoznak. A felület színe és a növényrajz ahhoz az üveghez igazodik, amelyik a legközelebb jár a szürethez, így már ránézésre látszik, mennyi van hátra.

Szerep
Termékdesign és fejlesztés
Év
2026
Platform
Webalkalmazás (PWA), magyar nyelvű felület
Állapot
Élesben fut, folyamatos saját termék
Sarj megnyitása(új lapon nyílik meg)
A Sarj kezdőképernyője az áztatás napján: hűvös, harmatos zöld háttér, áztatott mag vízgyűrűkkel, 0 / 6 nap.
0. nap · áztatás
Ugyanez a képernyő az 5 napos ciklus 3. napján: élénkebb zöld tónusok, első leveleit hozó csíra.
3. nap · növekedés
A kezdőképernyő a szüret napján: a háttér szüreti aranyra melegedett, a mungóbab kártyáján „Szüretelhető”, arany Késznek jelölöm gombbal.
Szüret napja

01 / A PROBLÉMA

Melyik üveg, melyik nap

A csíráztatás egyszerű, amíg egy üveggel megy. Négy üveggel, négyféle áztatási és öblítési ütemezéssel viszont a kezdő dátumok összefolynak, és az, hogy melyik van már kész, apró napi fejtörővé válik ahelyett, hogy egy pillantás alatt eldőlne.

A Sarj minden üveghez külön köti az időzítést, és ezt egyetlen képernyőn foglalja össze: ma kész, holnap kész, még növekszik. A számontartás így nem a fejünkben, hanem az alkalmazásban történik.

02 / A FELÜLET

Egy app, amely együtt nő a csírával

Minden üveg kezdő és várható szüreti dátuma egyetlen, 0 és 1 közötti érettségi értékké alakul. Az alkalmazás mindig azt az üveget nézi, amelyikkel foglalkozni kell: a mait, vagy ha egy sincs ma kész, a legközelebbit, és ez az érték vezeti az egész felületet.

A szín öt hangulaton úszik át, nem ugrál közöttük (Ébredés, Frissesség, Növekedés, Kiteljesedés, Szüreti fény): a hűvös, harmatos zöldtől a meleg, aranyló szüreti tónusig, a levelek pedig mindvégig zöldek maradnak. A négy küszöbérték közül kettő a ciklus utolsó 30 százalékába esik, így a változás pont akkor gyorsul fel láthatóan, amikor közeleg a szüret.

  • 01

    Folyamatos, nem lépcsőzetes

    A szín fokozatosan úszik át egyik hangulatból a másikba, így két nap között sosincs hirtelen váltás.

  • 02

    Egy pillantás, dashboard nélkül

    A szín önmagában elmondja, milyen közel a következő szüret, mielőtt bármit elolvasnánk. Az állapot a perifériás látásban van, nem egy grafikonon.

  • 03

    Gyorsul a cél felé

    A négy küszöbérték közül kettő az utolsó 30 százalékba esik, így a vizuális változás pont a szüret közeledtével pörög fel.

  • 04

    Kikapcsolható

    A Beállítások → Megjelenés menüben a dinamikus, növekvő megjelenés kikapcsolható, választható világos, sötét vagy rendszer téma, illetve magas kontrasztú mód, ami elhagyja a hátteret.

Hat eredeti SVG-illusztráció a csíra növekedési fázisairól, az áztatott magtól, gyűrűző vízhullámokkal, a szüretkor aranyfényben izzó, kifejlett hajtásig.
A csíra hat növekedési fázisban: Áztatás, Ébredő hajtás, Első levelek, Kiteljesedés, Közel a szüret, Szüreti fény.
Telefonos képernyőkép a Megjelenés beállításokról bekapcsolt „Dinamikus, növekvő megjelenés” kapcsolóval, mellette a világos, sötét és rendszer téma választási lehetőséggel.
Beállítások · Megjelenés

A növekedési fázisok az ütemtervhez igazodó illusztrációk, nem az üvegben lévő csírák tényleges, biológiai mérése.

03 / A TELEFON

Konyhapultra tervezve

A Sarjt jellemzően egy-egy gyors pillantásra nyitja meg az ember, sokszor vizes kézzel, a konyhapultnál, ezért az egész elrendezés egy kézzel, alulról felfelé működik. A négy fül (Kezdőlap, Kalauz, Előzmények, Profil) fixen a képernyő alján ül, az új üveg felvétele egy alulról felcsúszó lapon történik külön oldal helyett, a Késznek jelölöm és a +1 nap művelet pedig egyetlen érintés, visszavonási lehetőséggel.

  • 01

    Hüvelykujjnyi távolság

    A négy alsó fül a képernyő azon részén ül, amit egy kézben tartott telefonon a hüvelykujj a legkönnyebben elér.

  • 02

    44 pixeles érintőfelület

    Minden gomb legalább 44×44 pixeles: ennyit ajánl az Apple, és bőven több a WCAG 2.2 24 pixeles minimumánál.

  • 03

    Egyérintéses műveletek

    A Késznek jelölöm (visszavonással) és a +1 nap a két leggyakoribb műveletet intézi el anélkül, hogy meg kellene nyitni az üveg részletes nézetét.

  • 04

    Bármilyen szélességen működik

    320, 390, 1280 és 1440 pixeles szélességen is teszteltük, vízszintes túlcsordulás nélkül, és önálló PWA-ként telepíthető, platformspecifikus telepítési útmutatóval Chrome-hoz, Edge-hez és iOS Safarihoz.

04 / EMLÉKEZTETŐK

Emlékeztetők, amik nem ígérnek többet

A szüreti emlékeztető a kész nap előtti napon és magán a napon érkezik, budapesti idő szerint sosem 9:00 előtt, és ha több üveg is aznap lesz kész, egyetlen közös értesítésben jön, nem háromban. A cél az, hogy heteken át támogassa a rutint: a szokáskutatás szerint az automatikus végrehajtás kialakulása 18 és több mint 250 nap között szór, a konkrét szokástól függően (Lally és mtsai, 2010), úgyhogy egy megbízhatóan érkező emlékeztető többet ér egy ötletesnél.

Az öblítési emlékeztető alapból ki van kapcsolva, csak külön kérésre él: reggeli és esti idősáv, mindkettő öt óráig aktív, utána csendben lejár, és csak akkor jelez, ha éppen tényleg van növekvő üveg. A rendszeres öblítés higiéniai szempontból fontos (a kereskedelmi csíranövény-termesztésre vonatkozó irányelvek is alapvető kontrollpontként kezelik), ez áll az emlékeztető mögött, nem pedig az, hogy egy kihagyott alkalom veszélyes lenne.

A Sarj emlékeztető-beállításai: öblítési emlékeztető kapcsoló 08:00-s és 20:00-s idősávval, megjegyzés, hogy a szüreti értesítést nem kell külön beállítani, és belépési link a zárt app melletti kézbesítéshez.
Beállítások · Emlékeztetők
  • 01

    Időzített, nem véletlenszerű

    A szüreti értesítés a nap előtt és a napon érkezik, sosem 9:00 előtt, és több egyidejűleg kész üveg esetén egy közös értesítésbe vonódik össze.

  • 02

    Öblítés, csak ha kéred

    A reggeli és esti öblítési idősáv alapból kikapcsolt, és mindkettő öt óra után magától lejár, hogy ne maradjon zavaró jelenlét.

  • 03

    Kontextusban kérve

    A Sarj csak az első üveg létrehozása után kér engedélyt az értesítésekhez, amikor már van mire emlékeztetni, nem az első indításkor.

  • 04

    Egy üveg, egy útvonal

    Egy üveg emlékeztetőit vagy a készülék, vagy a szerver küldi, sosem mindkettő, így semmi nem érkezik kétszer.

Fiók nélkül az emlékeztető azon múlik, hogy az alkalmazás nyitva, fókuszban van, vagy a böngésző időnként felébreszti, így a kikapcsolt állapotban való kézbesítés nem garantált; fiókkal a szerver 10 percenként valódi push-értesítést küld, iOS-en viszont ehhez előbb a Kezdőképernyőre kell kitenni a Sarjt (iOS 16.4-től).

05 / MIÉRT ÍGY ÉPÜL

Kölcsönzött logika

Ezek a döntések nem díszítésből születtek. Mindegyik egy konkrét, névvel ellátott elképzelésre vezethető vissza arról, hogyan nézünk valójában szoftvereket.

  1. Rendszerállapot láthatósága

    Az állapot folyamatosan látszik, nem csak lekérésre; a szín maga az állapot, mindig a képernyőn, sosem egy lépéssel lemaradva.

    Jakob Nielsen, Nielsen Norman Group, 1994(új lapon nyílik meg)
  2. Nyugodt technológia (calm technology)

    A felület perifériás olvasásra épül: egy pillantás a színre megmondja, mennyire közel a szüret, dashboard vagy szám elolvasása nélkül.

    Weiser & Brown, 1995; Amber Case, 2015(új lapon nyílik meg)
  3. Cél-gradiens hatás

    Az emberek annál energikusabban cselekszenek, minél közelebb kerülnek a célhoz, ezért a Sarj négy küszöbértékéből kettő a ciklus utolsó 30 százalékába esik, felgyorsítva a vizuális változást a szüret közelében.

    Kivetz, Urminsky és Zheng, 2006(új lapon nyílik meg)
  4. Hüvelykujjas mobilhasználat

    A telefonhasználat közel fele egy kézzel történik, ezért a navigáció és az üveggel kapcsolatos műveletek a képernyő alján ülnek, nem a tetején.

    Steven Hoober, UXmatters, 2013(új lapon nyílik meg)
  5. Minimális érintőfelület-méret

    Minden gomb és fül legalább 44×44 pixeles: megfelel az Apple ajánlásának, és jóval túllépi a WCAG 2.2 24 pixeles minimumát.

    WCAG 2.2 SC 2.5.8; Apple Human Interface Guidelines(új lapon nyílik meg)
  6. Kontextusban kért engedély

    A Sarj csak az első üveg létrejötte után kér értesítési engedélyt, amikor már konkrét oka van igent mondani rá, nem az első betöltéskor.

    web.dev, Permission UX(új lapon nyílik meg)

06 / LOCAL-FIRST

Az üvegek a telefonodon maradnak

A Sarj lényegi működése fiók nélkül is megvan: az üvegek, ütemezések és előzmények IndexedDB-vel az eszközön tárolódnak, offline is. Az adatok JSON-ba exportálhatók és visszatölthetők, az importálás pedig csak hozzáad, nem felülír, így két eszköz összefésülése nem jár azzal, hogy az egyiket fel kell áldozni. Aki szeretné, e-mailes bejelentkezéssel és felhős szinkronnal is használhatja több eszközön, önkiszolgáló fióktörléssel együtt, de ez opcionális, ugyanabból a local-first logikából kiindulva, amely az eszközt, nem a szervert tekinti az adatok elsődleges példányának (Kleppmann és mtsai, 2019).

07 / SZÁMOKBAN

Ami elkészült

A Sarj 28 magfajtát tartalmazó katalógussal indul, a Legeldle növesztési útmutatója alapján, ékezetfüggetlen kereséssel és 2–12 napos növesztési idővel; magkeverék csak akkor javasolt, ha az időzítés és a fényigény is összeillik. Az előzmények között minden korábban növesztett tétel egy gombnyomással megismételhető vagy visszaállítható, a 11 receptötlethez pedig nyers/teljesen főzött szűrő és élelmiszerbiztonsági megjegyzés is tartozik.

mag a katalógusban
28
illusztrált növekedési fázis
6
jelvény 4 szinten
17
automatizált teszt
218

A Sarjban nincs használati statisztika, tudatos döntésként: helyben tárol, nem küld haza adatokat, ezért ez az esettanulmány azt mutatja be, mi épült fel, nem azt, hogyan használják.

Nézd meg élesben

A Sarj élesben fut, és folyamatosan épül tovább, üvegenként haladva.