Koncepciótól a piacravezetésig Egy online termékfejlesztés életútja az OANDER Media digitális ügynökségben.
|2
Terepszemle Digitális stratégia és koncepcióalkotás
Funkcionális és ergonómiai tervezés
User interface design
Technológiai kivitelezés
Portálmenedzsment és üzemeltetés
|6
| 8-12
| 14-16
| 18-20
| 22-23
|3
Dióhéjban az Oanderről
Terepszemle
Az OANDER Media egy budapesti digitális műhely, amelynek 12 fős csapata tapasztalt ergonómiai tervezőkből, grafikusokból és fejlesztőkből áll. Nem klasszikus online ügynökség vagyunk, jól tudjuk: a design tervezés és fejlesztés a munkafolyamat vége, és nem az eleje. Több mint 70 portálfejlesztési és piacravezetési projekttel a hátunk mögött abban hiszünk, hogy egy hatékony, felhasználóbarát és üzletileg sikeres digitális termék „lelke” a fejlesztést megelőző gondos elemzés és tervezés.
Ügynökségünk kellően nagy és tapasztalt ahhoz, hogy komplex digitális fejlesztési projekteken stabil szakmai erőforrásokkal szolgáljon ki, ám kellően kicsi ahhoz, hogy rugalmasak, kreatívak maradjunk, ügyfeleink projektjeit pedig kedvező óradíjak mellett szolgáljuk ki.
|4
Tervezés-fókuszú szemlélet „Több mint 70 portálfejlesztési és piacravezetési projekttel a hátunk mögött abban hiszünk, hogy egy hatékony, felhasználóbarát és üzletileg sikeres digitális termék „lelke” a fejlesztést megelőző gondos elemzés és tervezés.”
Az igazán komplex, nagyfokú kutatást és precizitást igénylő, sokszereplős projektektől pezseg a vérünk. Bátran ki merjük jelenteni, hogy kevés olyan digitális ügynökség van, amely akkora hangsúlyt fektet a gondos tervezésre, mint az OANDER Media. Valamennyi projektünk során…
»» A konkurencia alapos megfigyelésével és best practice kutatással állítjuk össze a készülő digitális termék építőelemeit.
»» Napokat, heteket és néha hónapokat töltünk ergonómiai tervek, drótvázak kialakításával, mielőtt a felhasználói felület grafikai tervezésébe fognánk.
»» Ügyfeleinkkel tartalmas termékműhely-találkozókon vitatjuk meg az ergonómiai
és funkcionális terveket. Nem gondoljuk, hogy mindentudók vagyunk: ügyfeleinket bevonjuk a tervezésbe, építünk a meglátásaikra és iparági tapasztalataikra.
Terepszemle
|5
Digitális stratégia és koncepcióalkotás Terepszemle
Funkcionális és ergonómiai tervezés
User interface design
Technológiai kivitelezés
Portálmenedzsment és üzemeltetés
| 3-4
| 8-12
| 14-16
| 18-20
| 22-23
|6
Mit is csinálunk, amikor digitális stratégiát alkotunk? A stratégiai tervezés a fejlesztési projekt üzleti és kreatív oldalát kapcsolja össze. Meglepő, hogy milyen sok online termék lép piacra komolyabb előkészítés nélkül és milyen fontos döntések születnek alulinformált módon. A digitális stratégia célja, hogy ügyfeleink üzeneteit és értékajánlatát minél több eszközön célzottan és interaktív módon elérhetővé tegye. Rengetegszer tapasztaljuk, hogy amikor megrendelőink felkeresnek bennünket egy tervezési vagy fejlesztési feladattal, a projekt koncepcióját alapjaiban meghatározó kérdések nincsenek megválaszolva. Ilyenkor kell visszalépnünk egyet, és nem elméleti, hanem nagyon is gyakorlati elemzéseket végeznünk. Forgalmi adatokat veszünk górcső alá, felhasználói viselkedést tanulmányozunk, összehasonlítjuk a konkurensek működését, forgalomterelési csatornákat elemzünk és technológiai platformokat mérlegelünk. Ezek szintézise a fejlesztés adatokkal alátámasztott koncepciója, ahonnan már van értelme oldaltípusokról, szolgáltatásokról és működésről beszélnünk.
Digitális stratégia és koncepcióalkotás
|7
Funkcionális és ergonómiai tervezés Terepszemle | 3-4
Digitális stratégia és koncepcióalkotás |6
User interface design
Technológiai kivitelezés
Portálmenedzsment és üzemeltetés
| 14-16
| 18-20
| 22-23
|8
„Usability comes first” A webes tervezés egy olyan szakterület, ami nagyban hasonlít egy építész vagy egy mérnökiroda tevékenységéhez. Megfelelő előkészítés és tervezés nélkül egy komplex portált fejleszteni éppen olyan, mintha házépítésbe fognánk tervrajzok nélkül.
Funkcionális és ergonómiai tervezés
A webes termékfejlesztések egyik magától értődő, ezért gyakran elhanyagolt szempontja, hogy a projekt eredményeként létrejövő alkalmazásnak nemcsak esztétikusnak, szépnek és jól működőnek kell lennie, de használhatónak is.
A funkcionális és ergonómiai tervezés során állítjuk elő azokat a fejlesztési kellékeket, amelyekből a grafikusaink és a programozóink felépítik majd a készülő termékéket. A körültekintő tervezés eredményeként a webes fejlesztési projektek költségvetésen és határidőn belül, az elvárt terjedelemben valósulnak meg.
|9
Kickoff, avagy a koncepció „kicsomagolása” Egy webes termékfejlesztési projekt idejének meglepően kis hányadát teszi ki maga programozás. Valójában még a drótvázak megtervezése és a funkcionális specifikáció elkészítése előtt is rengeteg munka zajlik egy weboldal kialakításán. A tervezési munka kezdetén a termék logikai felépítését, azaz a magas szintű koncepcióját alakítjuk ki. Erre pedig a legjobb eszköz a papír, rajztábla és toll. Ilyenkor definiáljuk a tervezőasztalunkra került alkalmazás
»» legfontosabb üzeneteit »» funkciólistáját »» információs architektúráját »» navigációs térképét
és a felhasználók „terelésének” útvonalait
»» oldaltípus-listáját »» meghatározó ergonómiai jellemzőit
Funkcionális és ergonómiai tervezés
| 10
Üzleti brief
Best Practice kutatás
Best Practice kutatás
Egy webes terméket jellemzően nem egyetlen alapötlet tesz kiválóvá. Egy funkciógazdag portál vagy alkalmazás felépítését, megjelenését, működését és szolgáltatásait szó szerint több száz kisebb-nagyobb ötlet, elképzelés, apró, ámde egyedi megoldás alkotja. A Best Practice vizsgálat során ezeket az építőelemeket gyűjtjük össze a site tervezéséhez, hogy aztán a termékműhelyek alkalmával a megrendelővel közösen megvitassuk őket. Gyakorlatilag egy gazdag étlapot készítünk elő, amiből aztán “csak” válogatni kell.
Tervezési vezérfonal Tervezési termékműhely Ergonómiai tervezés
A BP kutatás fontos további feladata, hogy tisztán lássuk: a konkurensek milyen megoldásokat alkalmaznak, ezekből mit érdemes adaptálnunk, és mivel válhatunk egyedivé?
Funkcionális specifikáció
User Interface design tervezés
Funkcionális és ergonómiai tervezés
| 11
Ergonómiai tervezés Az ergonómiai tervezés valójában döntések sorozata. Mit mutassunk meg egy képernyőn és mit rejtsünk el? Hogyan lehet még egyszerűbbé tenni egy funkciót? Miként fókuszáljuk a felhasználó figyelmét egy adott irányba?
Funkcionális és ergonómiai tervezés
A projekt ezen szakaszában még mindig nem design tervezésről van szó, hanem az ergonómia kialakításán dolgozunk. Ehhez wireframe terveket alkotunk, szedünk ízekre majd rakunk újra össze különböző variációkban.
A wireframe-ek (drótvázak) az előállítandó webes alkalmazások felületeinek design nélküli tervrajzai. Gyakorlatilag „szabásminták”, amelyeket a projekt későbbi szakaszában a grafikusaink és fejlesztőink fognak valós, működő funkciókkal felöltöztetni.
| 12
Termékműhely megbeszélések Nem a digitális ügynökség az egyetlen ötletforrás. Feladata, hogy elképzelései bemutatásával inspiráló kérdéseket tegyen fel. Erre szolgál a termékműhely. Az OANDER Media tervezőcsapata nem ért egyet azzal az általános metódussal, hogy kreatív tervező cégek ügyfeleiknek csak a kész, befejezett munkáikat mutatják meg. A termékműhelyek alkalmával szándékosan bevonjuk a megrendelőt a munkafolyamatba a készülőben lévő wireframe tervek megvitatásával. Az aktuális tervek bemutatását általában élénk vita követi, aminek egyetlen célja, hogy a termék egyre jobb legyen. Egy komplex fejlesztés során nem ritka a 3-4 termékműhely sem, amik általában fél- vagy egész napos megbeszéléseket takarnak. Hosszú, ámde produktív workshopokra kell számítani.
Funkcionális specifikáció Az elkészült terveket ezt követően részletesen dokumentáljuk egy funkcionális specifikáció formájában. A specifikáció egy olyan dokumentum, ami részletesen leírja termékkel kapcsolatos fejlesztési követelményeket. Oldaltípusok és szolgáltatások működését ismerteti, felhasználó-oldali műveleteket határoz meg és tartalmazza az elkészült wireframe terveket. A specifikáció fontos funkciója, hogy a tervezés során ne maradjanak nyitott kérdések, bizonytalanságok, hiszen a jó dokumentáció megírása kikényszeríti a döntéseket még a legelhanyagolhatóbbnak tűnő kérdésekben is. Emellett nagyon fontos minőségbiztosítási kellék. Kihagyni a specifikáció írását a létező legnagyobb szükségtelen kockázatvállalás, amit egy nagy volumenű fejlesztési projektben elkövethetünk.
Funkcionális és ergonómiai tervezés
| 13
User interface design Terepszemle
Digitális stratégia és koncepcióalkotás
| 3-4
|6
Funkcionális és ergonómiai tervezés | 8-12
Technológiai kivitelezés
Portálmenedzsment és üzemeltetés
| 18-20
| 22-23
| 14
Művészet és technológia Ahol az ergonómiai tervező team leteszi a lantot, ott veszi fel a fonalat a hazai és nemzetközi ügyfeleken edződött grafikai csapatunk. Miután elkészültek a drótvázak, kezdődhet a művészeti megvalósítás. Az OANDER Media designerei nemcsak tehetséges grafikusok, de egytől egyig frontend fejlesztési szakértők is. Így aztán a tervezőasztalukat a webes technológiai követelményeknek maximálisan megfelelő, a fejlesztés számára precízen kidolgozott látványtervek hagyják el. Ez nagyon fontos, ugyanis a grafikai művészet egyetlen szakágát sem korlátozzák olyan szigorú technológiai sztenderdek, mint a webdesignt
User interface design
| 15
A jó felhasználói élmény alapja a felhasználó megismerése A portálok arculatának és felhasználói felületének grafikai tervezése nem egy rutinszerűen végzett feladat, hanem felfedezőút. Sosem tudjuk, milyen lesz a végeredmény, amíg oda nem érünk. Mivel a webdesign egy rendkívül szubjektív terület, csak a saját vagy az ügyfelünk benyomásaira hagyatkozva könnyű öngólt lőni. Hogy ezt elkerüljük, beszélgetünk a felhasználókkal. Ha kell fókuszcsoportos vizsgálatokat végzünk, ha kell, design trendeket elemzünk. Ezek tapasztalataiból áll össze az a részletes design brief, amely orientálja a felhasználói felület művészeti tervezését.
User interface design
| 16
Drótvázból > design terv Egy fejlesztés során mindig több grafikai koncepció készül, majd a legjobbnak tűnő variációt addig finomítjuk, amíg az eredmény jobb lesz, mint amit az ügyfelünk elképzelt. Csak azt követően látunk neki az aloldalak grafikai tervezésének, ha már egy
User interface design
főképrenyős design terv formájában véglegesítettük a felhasználói felület arculati jellemzőit. A grafikai tervezés során mindig szigorúan követjük az ergonómiai tervekben definiált felépítést, így a látványvilág szolgálja ki a használhatóságot, és nem fordítva.
| 17
Technológiai kivitelezés Terepszemle
Digitális stratégia és koncepcióalkotás
Funkcionális és ergonómiai tervezés
User interface design
Portálmenedzsment és üzemeltetés
| 3-4
|6
| 8-12
| 14-16
| 22-23
| 18
Nyílt forráskódú szemlélet Amennyiben a projekt mozgástere engedi, igyekszünk fejlesztéseinket nyílt forráskódú technológiákon megvalósítani. Így az általunk előállított termékek későbbi továbbvitele nincsen hozzánk kötve, az ügyfél valóban tulajdonosa az elkészülő fejlesztésnek. Ezzel ellentétben azok a cégek, amelyek saját maguk által fejlesztett alaprendszerrel dolgoznak, jellemzően nem adnak hozzáférést a forráskódhoz, rendszerük egy jogilag korlátozott, féltve őrzött szellemi termék, amihez más nem nyúlhat. A nyílt forráskódú technológiák használatának másik előnye a költséghatékonyság. Ügyfeleink projektköltségvetése elsősorban a felhasználói élmény megtervezésére és az azt szolgáló frontend fejlesztésekre költjük ahelyett, hogy már kész tartalomkezelő vagy e-commerce technológiákat építenénk fel a semmiből.
Technológiai kivitelezés
| 19
Alkalmazott fejlesztési környezetek
Technológiai kivitelezés
A Wordpress egy nyílt forráskódú tartalomkezelő rendszer, amelyen ügynökségünk komplex vállalati oldalakat és médiaportálokat fejleszt. A Wordpress szabad felhasználhatósága ugyanakkor páratlan rugalmassággal, stabilitással, testreszabhatósággal és megbízhatósággal párosul. Mindez egy globális méretű fejlesztői közösség önzetlen munkájának köszönhető, amely évek óta fejleszti a keretrendszert, hogy egyre hatékonyabb publikálás platformmá váljon.
2011-től kezdve az OANDER Media alkalmazástervezési és fejlesztési területének kiemelt jelentőségű üzletágát képezi a webáruházfejlesztés. A Magento keretrendszer, amelyen projektjeinket megvalósítjuk egy nyílt-forráskódú e-commerce fejlesztési megoldás, amelyet jelenleg több ezer fejlesztő használ és gondoz világszerte. Csapatunk segítségével az Ön vállalkozása is olyan webáruházzal rendelkezhet, amely ezen keretrendszert használva a világ technológiai élvonalába tartozik.
| 20
Technikai alapvetések Az OANDER Media által gyártott frontend fejlesztések mindig a HTML szabványokhoz szigorúan illeszkedő, tiszta, szemantikus kódolással készülnek. Projektjeink során kínosan ügyelünk arra, hogy valamennyi böngészőn azonos megjelenést biztosító, böngésző-optimalizált megjelenést készítsünk, a frontend kód áttekinthető és fejlesztői kommentekkel ellátott legyen. Termékeink felületeit XHTML / HTML5 / CSS3 alapokon készítjük el. Javascript frameworknek jellemzően a jQuery keretrendszert használjuk, amelyből nyilvános illetve saját fejlesztésű plugin-okat is implementálunk. Igény esetén munkatársaink gond nélkül tudnak reszponzív frontend fejlesztést végezni, amely lehetővé teszi, hogy egyazon oldaltípus több eszközön (pl. böngésző, táblagépek, okostelefonok) a rendelkezésre álló oldalszélességhez igazodva jelenjen meg.
XHTML
Technológiai kivitelezés
HTML5
CSS3
| 21
Portálmenedzsment és üzemeltetés Terepszemle
Digitális stratégia és koncepcióalkotás
Funkcionális és ergonómiai tervezés
User interface design
Technológiai kivitelezés
| 3-4
|6
| 8-12
| 14-16
| 18-20
| 22
Forgalomelemzés és optimalizálás Az interneten nincs többé találgatás. Valamennyien otthagyjuk a digitális újlenyomatunkat minden oldalletöltés, kattintás vagy vásárlás alkalmával, ezek pedig részletes adatok formájában elemezhetők. Így a portálok teljesítménye mérhető és bármilyen más médiatípusnál jobban optimalizálható. A digitális termékek jellemzője – legyenek azok vállalati oldalak, médiaportálok vagy social media alkalmazások – hogy elindításuk nem jelenti a befejezésüket: hétről hétre értékelni kell a tartalmuk és ergonómiai felépítésük teljesítményét. Egy webes alkalmazás természetes életciklusának része a folyamatos optimalizálás. Az OANDER Media forgalomelemző szakértői segítenek eligazodni a rendelkezésre álló adatok tengerében és azonosítani ügyfeleink felhasználóinak viselkedését.
Portálmenedzsment és üzemeltetés
Tartalomprodukció Az elmúlt években az OANDER Media csapata az ilyen jellegű, napi frekvenciájú feladatok ellátásában komoly tapasz»» A tartalomkiszerelést támogató eseti kisebb-nagyobb fejlesztések talatra és rutinra tett szert. Ennek egyik legfontosabb ismer»» Szöveges anyagok (cikkek, isremtető leírások, stb.) gyártása tetőjegye, hogy ügynökségünk nemcsak ügyfeleknek nyújt online »» Tartalmak terjesztése különböző social media csatornákon produkciós szolgáltatásokat, hanem saját kiadásában álló média- és »» Tartalmakhoz kapcsolódó képszerkesztési feladatok e-kereskedelmi portálokat is működtet. »» Folyamatos grafikai support minden online felületen »» Tartalmi és technikai keresőoptimalizálás Egy portál tartalmi menedzselése jellemzően az alábbi feladatokból áll:
Portálmenedzsment és üzemeltetés
| 23
Kapcsolat
Bobor Petra
Radó Mátyás
Ocskay László
Projektvezető
Ügyvezető
Ügyvezető
+36-30-399-0832
+36-30-834-6519
+36-30-834-6636
[email protected]
[email protected]
[email protected]
OANDER Media KFT. 1055 Budapest Bajcsy-Zsilinszky út 16.
[email protected]
Think online.
