/>
  1. UX & App

    Alkalmazas tervezés:
    a 60%, ami nem programozás!

  2. Rendszerszervezés, alkalmazás tervezés, UX és UI munkák

    Az informatika nem technológiai kérdés. Ennek a megállapításnak a valóságtartalmát mi sem mutatja jobban, mint a fejlesztő cégeknél egy-egy projekten dolgozó sokféle képzettségű és gondolkodásmódú ember.

    Ha azt hisszük, hogy a fejlesztés egy jól meghatározott tevékenység, nagyot tévedünk. Az egész némileg egy gyógyszer kifejlesztéséhez hasonlít. Az esetek többségében nem lehet pontosan meghatározni, mennyi munka árán találhatjuk meg például a rák ellenszerét. Minden feladat más, nincs átemelhető megoldás, kalkuláció. Egy egyedi feladatnál hosszú évek tapasztalata is cserben tudja hagyni a projektvezetőt.

    A projekt kutatással indul. Össze kell gyűjteni azokat a problémákat amikben megoldásában a fejlesztendő alkalmazás segítséget tud nyújtani, valamint meg kell határozni ezek módját, kereteit. Az, hogy ez valójában mekkora feladat, csak akkor derül ki, mikor a kutatás eljut arra a pontra, hogy egymásnak logikailag részben vagy akár teljesen ellentmondó tulajdonságok között kell kompromisszumot találni. Egy rossz döntés miatt akár a teljes projekt megborulhat. Amit ebben a szakaszban nem gondolunk át, azt a fejlesztés későbbi stádiumaiban kell megtennünk, úgy, hogy esetleg már addig egy félig elkészített rossz megoldásba fektettünk rengeteg órát és pénzt.

    A feladat megismerése után, elágaznak a tennivalók, attól függően, hogy ki, kik fogják használni a kész terméket. Nem mindegy ugyanis, hogy egy belső ügyviteli fejlesztésről, piacra szánt megoldásról, vagy esetleg egy széles-, nem szakmai körben használt applikációról van szó.

    Ez utóbbinál például nagyon fontos, hogy részletekbe menő piackutatás előzze meg a tervezést. Meg kell vizsgálni, hogy milyen megoldások léteznek már a felvázolt problémára, azok milyen típusú felhasználóknak adnak elegendő segítséget. Fel kell deríteni, mik azok a szempontok, feladatok, amiben többet, jobbat tudna nyújtani a mi megoldásunk.

    Manapság, mikor egy alkalmazást már nem a kevésnek ítélt tudása miatt, hanem csupán azért cserélnek le az emberek, mert nem tetszik a színe, vagy nem elég kényelmes egy funkció, kiemelkedő szerepe van a UX-nek, a felhasználói élmény tervezésének. Mivel ez már-már szinte marketing, ahol senki sincs birtokában a mindent megválaszoló kristálygömbnek, itt is alapvető fontosságú a kutatás, a prototípus készítés és tesztelés.

    Számtalan koncepció és jobbnál jobbnak tűnő ötlet landol a kukában, mire kijelenthetjük, hogy már tudjuk, illetve nagy eséllyel sejtjük, hogy mit és hogyan kell megvalósítani. Ha a feladat kellően komplex ( – már pedig mi nem az? – ), fontos hogy a struktúrális keretek kialakítását a technológiai szakértővel, programtervezővel közösen végezzük. Sokszor jelentősen lerövidíthetjük a fejlesztési ciklust, egyszerűbbé, egyértelműbbé és nem utolsó szempontból átláthatóbbá tehetjük a kódot.

    A mindenki által "ismert" programozás még számtalan kompromisszumos döntést kíván majd meg. Nem egy esetben kell visszanyúlni a tervezéshez, és újra kezdeni némely lépést. Csak az hibázik aki valamit tesz, de ezeket a hibákat a piac valamiért nem díjazza, így elengedhetetlen a folyamatos tesztelés és javítás. A tervezés hibájáért a programozó morog, az ő hibáját meg a tesztmérnökök fogják kideríteni. Ha UX-es ront el valamit, akkor a felhasználó lesz az akin csattan az ostor, ami akár a bevételek kiesésével járhat.

    Egy projekten akár 6-12 fő is dolgozhat, de vettem részt olyan munkán is, ahol csak a tervezési megbeszéléseken is többen voltunk. De nem elrémíteni akrom kedves olvasómat, hanem meggyőzni arról, hogy egy fejlesztés külön szakmák szoros együttműködése, aminek elbagatelizálása az ablakba kirakott pénz.

    A fenti kis bevezetőben csak a felületet karcolgattuk, és nem érintettünk elméleteket és módszertanokat, pedig van belőlük bőven. Sok más tapasztalt szakemberrel együtt én is azt vallom, hogy ha nem létezik olyan csavarhúzó ami minden csavarhoz megfelelő, akkor egy ilyen bonyolult és sokrétű feladathoz sem létezik egy mindenre jó megoldás. Külön munkafolyamatnak tartom, hogy a projekt során meghatározzuk azokat a módszertanokat, dokumentációs és kommunikációs formákat amik a legmegfelelőbben szolgálják az adott konkrét projekt sikerét.

    A további lapokon szeretnék izelítőt adni legújabb munkáimból.

  3. GS1 Hungary logo

    GS1 Magyarország SzabványMenedzser

    Webalkalmazás UX-UI áttervezése

    A feladat egy évek óta futó, meglehetősen komplex webapplikáció teljes felületének újragondolása, valamint új funkciók tervezése, beépítése volt. Természetesen alkalmazkodni kellett az alkalmazás struktúrális alapjaihoz, amiket nem lehetett megváltoztatni.

    A feladat első része a definitatív adatbeviteli képernyők vizuális világának újragondolása. Ezen képernyőket egy logika állította össze amit egy leíró adatállomány vezérelt, ezért komplex szabályrendszerben kellett gondolkodni. A munka másik része, a kezdő képernyő újratervezése, a felhasználókat jobban segítő funkciók bevezetésével. Ennek kapcsán egy varázsló rendszert is terveztünk. Mivel a teljes eljárást rekurzív ciklusokban visszahathat magára, ez sok tervezéssel és meglehetősen bonyolult megvalósítandó folyamattal járt együtt.

    A feladat
    Komlexitás
    Kihívás
    Flow

    A munkát a komplexitása, illetve üzleti alkalmazás mivolta miatt kimondottan élveztem, amit a GS1 Hungary remek, támogató csapata tett teljessé, amit ezúton is köszönök!

    A projekt tudás igénye
    Rendszerszervezés
    Ügyviteli ismeretek
    UX feladatok
    UI tervezés
    Kommunikáció
    Csapatmunka

    Az alábbiakban a projekt néhány képernyőjét mutatom be.

  4. GS1 – SzabványManager

    GS1 Magyarország SzabványMenedzser

    Az alkalmazás évek óta kiszolgálja több ezer cég, kereskedelemben és szállítmányozásban felmerülő nyilvántartási és címkenyomtatási feladatait.

    A projekt során az alkalmazás több részét újra terveztük, varázslókat alakítottunk ki a komplex folyamatokhoz, valamint a felületet is modernizáltuk. A rendkívül komplex alkalmazás több mint félszáz képernyőjéhez terveztem részben új funkciókat és teljesen új vizualitást, aminek feltételrendszerét a GS1 remek csapatával részletekbe menő megbeszéléseken alakítottuk ki.

    GS1 Hungary logo
    GS1 Hungary logo

    GS1 Magyarország SzabványMenedzser

    Az alkalmazás évek óta kiszolgálja több ezer cég, kereskedelemben és szállítmányozásban felmerülő nyilvántartási és címkenyomtatási feladatait.

    A projekt során az alkalmazás több részét újra terveztük, varázslókat alakítottunk ki a komplex folyamatokhoz, valamint a felületet is modernizáltuk. A rendkívül komplex alkalmazás több mint félszáz képernyőjéhez terveztem részben új funkciókat és teljesen új vizualitást, aminek feltételrendszerét a GS1 remek csapatával részletekbe menő megbeszéléseken alakítottuk ki.

    • GS1 Vonalkód SzabványMenedszer képernyő 1
    • Főoldal a megvásárolt kódtartományokkal, gyorsgombokkal és kedvencekkel.
    • GS1 Vonalkód SzabványMenedszer képernyő 2
    • Termékbevitzeli űrlap kezdeti képernyője.
    • GS1 Vonalkód SzabványMenedszer képernyő 3
    • Termékhierarchia szintek ábrázolása.
    • GS1 Vonalkód SzabványMenedszer képernyő 4
    • "Szállítmány" varázsló nyitó oldala.
    • GS1 Vonalkód SzabványMenedszer képernyő 5
    • Termék gyártási sorozatainak táblázata.
    • GS1 Vonalkód SzabványMenedszer képernyő 6
    • Egy varázsló befejező képernyője.
  5. BowlerHat logo

    BowlerHat - Contact Workbench

    A webalkalmazás teljes tervezése

    A webalkalmazás tervezése egy ötlet alapján indult, majd a jelenlegi komplexitásra nőtt, és mint szolgáltatás már elkészült és bár a marketing még hátra van, de néhány ügyfélnél már működik.

    Az applikáció célja a személyes értékesítő munkájának segítése. A szokásos naptáron, tennivalók kezelésen felül geoadatokkal és ügyféltörténettel is fel lett vértezve. A munkafolyamatok áttekintését egy komplex státusz rendszer segíti. Egy könnyen használható form szerkesztő is került a programba, amivel perszonalizált információkat is be lehet gyűjteni, de tájékoztatásra, kapcsolatteremtésre is kitűnő eszköz. Az alkalmazást 3 fős csapatban készítettük el. Jelenleg az Amazon szerverein fut. A szoftverről a bowlerhat.eu weblapon (még fejlesztés alatt) lehet többet megtudni.

    A feladat
    Komlexitás
    Kihívás
    Flow

    Mivel a projekt teljesen saját, ezért bár nem kis munka volt, minden pillanatát élveztük.

    A projekt tudás igénye
    Rendszerszervezés
    Ügyviteli ismeretek
    UX feladatok
    UI tervezés
    Kommunikáció
    Csapatmunka

    Az alábbiakban a projekt néhány képernyőjét mutatom be.

  6. Contact Workbench

    BowlerHat - Contact Workbench

    A program egy Direkt Sales asszisztens, kimondottan az személyes értékesítési területen dolgozók igényeire tervezve.

    Az alkalmazást nagyon kis létszámú (3 fő) csapattal alkottuk meg, így egy rendkívül rugalmas, többrétegű szoftverarchitektúrát sikerült létrehozni. A felhasználói visszajelzések kiemelik a felületet és a gyors használhatóságot, amit elsődleges célként tűztünk ki akár még a magától érthetődőség rovására is. A felhasználókat egy több szintű szöveges és videós help rendszer segíti. A felület jellemzője, hogy a kezelési módszerek azonosak, így egy rövid ismerkedés után már rutinosan használhatóvá válik. A munkát rendkívül élvezetessé és sokrétűvé tette, hogy a szakmai határokat a kis létszám miatt teljesen megszüntettük.

    BowlerHat logo
    BowlerHat logo

    BowlerHat - Contact Workbench

    Webalkalmazás teljes felépítése 3 fős csapatban

    A program egy Direkt Sales asszisztens, kimondottan az személyes értékesítési területen dolgozók igényeire tervezve.

    Az alkalmazást nagyon kis létszámú (3 fő) csapattal alkottuk meg, így egy rendkívül rugalmas, többrétegű szoftverarchitektúrát sikerült létrehozni. A felhasználói visszajelzések kiemelik a felületet és a gyors használhatóságot, amit elsődleges célként tűztünk ki akár még a magától érthetődőség rovására is. A felhasználókat egy több szintű szöveges és videós help rendszer segíti. A felület jellemzője, hogy a kezelési módszerek azonosak, így egy rövid ismerkedés után már rutinosan használhatóvá válik. A munkát rendkívül élvezetessé és sokrétűvé tette, hogy a szakmai határokat a kis létszám miatt teljesen megszüntettük.

    • BowlerHat Contact Workbench képernyő 1
    • Napi teendők oldal.
    • BowlerHat Contact Workbenc képernyő 2
    • Kliens nézeten új kliens felvétele.
    • BowlerHat Contact Workbenc képernyő 3
    • Űrlap szerkesztő.
    • BowlerHat Contact Workbenc képernyő 4
    • Beállítások képernyő: Topikok és státuszaik beállítása.
    • BowlerHat Contact Workbenc képernyő 5
    • Előfizetések és számlák kezelése: számlázási cím felvétele.
    • BowlerHat Contact Workbenc képernyő 6
    • Egy találkozó eredményének megadása a Kliens history számára.
    • BowlerHat Contact Workbenc képernyő 6
    • Kliens adatai: Klienssel kapcsolatos események.
  7. Wannabee logo

    Wannabee webáruház – redesign

    UX Redesign, folyamatoptimalizáció, modell készítése

    A feladat egy elkészült, de nem teljesen átgondolt webáruház átvizsgálása és a szükséges részek UX szempontoknak megfelelő átalakítása.

    A projekt során a megfelelő, működőképes megoldásokat, dizájelemeket megtartottuk. Figyelembe kellett venni a már kialakult felhasználói szokásokat. A végeredmény egy Adobe XD modell lett, amiben több interaktív elemet átterveztünk. A csapatban a feladatom elsősorban az XD modell elkészítése, és a felület vizuális kialakításának technikai oldala volt. A reszponzivitást négy konkrét méretben elkészített képernyők adják, ahol a rugalmasságot a margókkal oldjuk meg. A legkisebb telefonos nézet egyedül fluid stílusú.

    A feladat
    Komlexitás
    Kihívás
    Flow
    A projekt tudás igénye
    Rendszerszervezés
    Ügyviteli ismeretek
    UX feladatok
    UI tervezés
    Kommunikáció
    Csapatmunka

    Az alábbiakban a projekt néhány képernyőjét mutatom be.

    Kisebb képernyőn, használja a nagyítót!

  8. Wannabee webáruház

    Wannabee webáruház – redesign

    A webáruház redesign feladatai: UX szempont érvényesítése, fizetési folyamatok optimalizálása, modell készítése

    A felület komplexivitása és a responziv viselkedési igény miatt 4 fix méretre terveztük (a képeken a notebook méretet a nagymértékű hasonlósága miatt nem mutatom).

    Wannabee logo
    Wannabee logo

    Wannabee webáruház – redesign

    UX Redesign, folyamatoptimalizáció, modell készítése

    A webáruház redesign feladatai: UX szempont érvényesítése, fizetési folyamatok optimalizálása, modell készítése

    A felület komplexivitása és a responziv viselkedési igény miatt 4 fix méretre terveztük (a képeken a notebook méretet a nagymértékű hasonlósága miatt nem mutatom).

    • Wannabee webáruház képernyő 1
    • Címoldal
    • Wannabee webáruház képernyő 2
    • Termékoldal szűrővel
    • Wannabee webáruház képernyő 3
    • Termék részletek
    • Wannabee webáruház képernyő 4
    • Üzletek
  9. manufacStory logo

    manufacStory alkalmazásterv

    Webalkalmazás funkció és felület tervezése

    Az ötlet egy hobi tevékenységből alakult ki, és jelenleg is egyre bővül. A piacon különböző célú szoftverek segítik az írókat, de mégsincs egy átfogó megoldás ami az alkotás folyamatát az adatgyűjtéstől a szerkesztésig, korrektúráig végigkísérné.

    A funkciók tervezése után egy drótváz modell készült Axure-ban, amit többször is változtattam, majd a UI tervet már Figmában készítettem el. Elsősorban az írásművek tervezésére és az alternatívák kezelésére tettem a hangsúlyt, de még ezek funkcionalitását is bővíteni fogom. A kiadói csapatmunka funkciók és az értékesítést segítő megoldások az egyszerűbb, konkrétabban definiált funkciók közé tartoznak, ezért még nem foglalkoztam velük. Bár a projekt még nincs kész, de bőven lehet mazsolázni a képernyők között.

    A feladat
    Komlexitás
    Kihívás
    Flow
    A projekt tudás igénye
    Rendszerszervezés
    Ügyviteli ismeretek
    UX feladatok
    UI tervezés
    Kommunikáció
    Csapatmunka

    Az alábbiakban a projekt néhány képernyőjét mutatom be.

    Kisebb képernyőn, használja a nagyítót!

  10. manufacStory alkalmazásterv

    manufacStory alkalmazásterv

    A manufcStory egy webalkalmazás, ami segít a szépirodalmi művek megszületésében egészen az ötletgyűjtéstől a kiadói munkák végéig.

    Az ötlet, a funkció-, és eljárásterv, a felület saját munka. Bár a feladat nagyon komplex, megpróbáltam olyan felületet kialakítani amiben a fókusz az alkotáson marad. A program támogatja a források gyűjtését, rendezését, a karakterek megalkotását, a sztorivonal kialakítását, az idősíkok tervezését, és alternatívák létrehozását. Segíti a szerkeztő és író együttműködését, béta olvasók számára kérdőív készítését. Bár a funkciók jó része egymásra épül, próbáltam úgy kitalálni a szoftvert, hogy ne eröltesse az adatbevitelt, hanem inkább igény szerint felhasználható eszköztárként viselkedhessen.

    manufacStory logo
    manufacStory logo

    manufacStory alkalmazásterv

    Koncepció kialakítása, funkciótervezés, UI és modell kialakítása

    A manufcStory egy webalkalmazás, ami segít a szépirodalmi művek megszületésében egészen az ötletgyűjtéstől a kiadói munkák végéig.

    Az ötlet, a funkció-, és eljárásterv, a felület saját munka. Bár a feladat nagyon komplex, megpróbáltam olyan felületet kialakítani amiben a fókusz az alkotáson marad. A program támogatja a források gyűjtését, rendezését, a karakterek megalkotását, a sztorivonal kialakítását, az idősíkok tervezését, és alternatívák létrehozását. Segíti a szerkeztő és író együttműködését, béta olvasók számára kérdőív készítését. Bár a funkciók jó része egymásra épül, próbáltam úgy kitalálni a szoftvert, hogy ne eröltesse az adatbevitelt, hanem inkább igény szerint felhasználható eszköztárként viselkedhessen.

    • manufacStory képernyő 1
    • Desktop változat szerkesztési módban az ötletek modullal.
    • manufacStory képernyő 2
    • Néhány képernyő a mobil változatból.
    • manufacStory képernyő 3
    • Desktop változat a sztorivonallal (egy pontja kinyitva)
    • manufacStory képernyő 4
    • A szerkesztési mód néhány mobil képernyője.
    • manufacStory képernyő 5
    • Desktop képernyők
    • manufacStory képernyő 6
    • Néhány mobil képernyő.
    • manufacStory képernyő 7
    • Notebook és mobil képernyő.
    • manufacStory képernyő 8
    • Szereplők és szerkesztés képernyő mobil változata.
  11. Egyéb tervek

    Kisebb UI tervek és egy alkalmazás koncepció

    A következő képernyők különböző módszerek vizuális próbája.

    Az első kép egy értékesítési oldalterv. Egy olyan próba dizájn, ahol a mobil nézetet kivéve az egész oldal a megtervezett formában arányosan növekedve tölti ki a böngészőablakot.

    A második, harmadik és negyedik kép egy olyan webshop, ahol a ritka vásárlói visszatérések miatt inkább a megjegyezhetőségre teszi a hangsúlyt, akár még a könnyű használhatóság rovására is. Úgy gondolom, hogy a UX és UI tervezés, mivel valahol marketing célokat szolgál, szükséges, hogy alárendelje magát az üzleti elképzeléseknek, ahol egyáltalán nem biztos, hogy a legfontosabb érv a kézenfekvő használat.

    Az ötödik képen egy speciális turisztikai alkalmazás néhány képernyője látható. Az alkalmazás különlegessége, hogy a valós turisztikai látványosságokat meglátogatva, egy játékos virtuális túrát kínál fel. Az alkalmazásban több játéktípus és különböző közlekedési eszközök között enged választani. Fő erőssége egy játékgenerátor webapplikáció, ahol bárki, az általa ismert helyszínekre tud játékot vagy versenyt készíteni.

    UI tervezési feladatok
    Komlexitás
    Kihívás
    Flow
    Turisztikai alkalmazás tervezés
    Komlexitás
    Kihívás
    Flow

    Az alábbiakban a projekt néhány képernyőjét mutatom be.

    Kisebb képernyőn, használja a nagyítót!

  12. Egyéb tervek

    Egyéb tervek

    Néhány olyan terv, amin még dolgozom...

    Az első képen egy redesign példa látható. A további oldalak egy webshop képernyői. Fontos megjegyezni, hogy a termékek típusa miatt nem feltétlen a könnyű és átlátható használat az elsődleges cél. Egy átlagos vevő várhatóan néhány évente vásárol csak, így a design kialakításakor a megjegyezhetőséget és a vásárlási élményt, hangulatot tettem fő céllé. Az utolsó kép egy tervezett speciális turisztikai alkalmazás néhány képernyője. Az ikonok és design elemek is saját készítésűek.

    Egyéb tervek

    Néhány olyan terv, amin még dolgozom...

    Néhány olyan terv, amin még dolgozom...

    Az első képen egy redesign példa látható. A további oldalak egy webshop képernyői. Fontos megjegyezni, hogy a termékek típusa miatt nem feltétlen a könnyű és átlátható használat az elsődleges cél. Egy átlagos vevő várhatóan néhány évente vásárol csak, így a design kialakításakor a megjegyezhetőséget és a vásárlási élményt, hangulatot tettem fő céllé. Az utolsó kép egy tervezett speciális turisztikai alkalmazás néhány képernyője. Az ikonok és design elemek is saját készítésűek.

    • egyéb képernyő 1
    • Egy régi oldal újratervezése.
    • egyéb képernyő 2
    • Webshop, megjegyezhetőbb dizájnnal: Termék oldal
    • egyéb képernyő 3
    • Webshop, megjegyezhetőbb dizájnnal: Megrendelés oldal
    • egyéb képernyő 4
    • Webshop, megjegyezhetőbb dizájnnal: Kosár oldal
    • egyéb képernyő 5
    • Egy speciális turisztikai alkalmazás koncepció.
  13. Régebbi munkáim

    Szállodai Front és Back Office rendszer: [Értékesítés, Ittartózkodások kezelése, Csomagárak és szezonok, Komplex számlázás, Csoportok és akciók kezelése, Egyéb bevétel nyilvántartások, Statisztikák, Stb.]

    A szoftvert (és elődjét) 20 évig használták megelégedéssel, az elszámolási környezet jelentős megváltozásával vezettük ki a piacról. A szoftver funkció tervezésében, felületének kialakításában és kisebb mértékig a programozásában vettem részt.

    Webskimo – CMS rendszer szervezeteknek, vállalkozásoknak [Oldalstruktúra szerkesztő, Tartalom menedzser, Stílus sablonok szerkeszthetősége, stb.]

    A webapplikációt még a tartalomkezelő rendszerek piaci előretörését megelőzően készítettük. Közel 10 éven keresztül sok szervezet és kisválalkozás használta. Mára a wordpress és társai a rengeteg választható beépülő modullal kiszorította a piacról.

    Ügyviteli programok – több témában
    – Üzemorvosi nyilvántartó program,
    – Számlázó és bevétel nyilvántartó program,
    – Építőipari dokumentum kezelő és számlázó program,
    – Több telephelyes logisztikai rendszer,
    – Konyhai raktárprogram,
    – Házi pénztár program,
    – Protézis konfigurátor,

    Az applikációkat Delphi, Magic, Clipper keretrendszerekkel magam készítettem, vagy szervezőként, UX-UI szakemberként vettem részt benne.

    Köszönöm az érdeklődését!

    Elérhetőségeim: Takács Zoltán | Email: concept.tz@gmail.com | Telefon: +36 30 300 5802

Bemutatkozom