Abaco.hu Kft.
Hogyan lehet könnyen használható adminisztrációs felülete az Ön weboldalának?
Bevezetés Emlékszik még a 90es évekre? Kezdetben a weboldalak szövegén éveken, néha évtizedeken keresztül nem változtattak . Az internetes jelenlét kimerült abban, hogy a cégek egy üdvözlő vagy bemutatkozó szövegben megosztották a nevüket, szolgáltatásaikat/termékeiket és az elérhetőségeiket az olvasókkal. Az ezredforduló után gombamód kezdtek szaporodni a céges weboldalak, és egyre nehezebbé vált kiigazodni közöttük. A tulajdonosok és a marketingesek felismerték, hogy a weboldal akkor lesz sikeres reklámeszköz, ha naprakész és érdekes, új információkat mutat . Ehhez pedig nélkülözhetetlenné vált a rendszeres frissítés lehetősége. Az új szövegek feltöltése eleinte programozói feladat volt. Később egyre gyakrabban felmerült fel az igény arra, hogy a webszövegek a weboldaltulajdonosok számára is szerkeszthetők legyenek közvetítő bevonása nélkül . Az innovációra nyitott programozók ezért új fejlesztésekkel lehetővé tették ezt az úgynevezett adminisztrációs felület elkészítésével. Manapság egyenesen elvárás ez a funkció az új weboldalak készítésekor!
Könnyen kezelhető adminisztrációs felület az Abaco.hutól Az Abaco.hu Kft. csapata a vállalkozás indulása óta nagy hangsúlyt fektet arra, hogy ügyfeleinek közvetlenül és egyszerűen használható lehetőséget biztosítson a weboldaluk szerkesztésére . Az adminisztrációs felületet kezdetben a megrendelő által megfogalmazott igényeknek megfelelően alakítottuk ki. Későbbi tapasztalataink azt mutatták, sokkal hatékonyabb egy általános adminisztrációs struktúra szerint kialakítani a felületet, mintsem minden alkalommal a megrendelő által meghatározott fontossági sorrendben elkészíteni az adminisztrációt lehetővé tevő funkciókat. Az általános struktúra betartása lehetővé teszi, hogy a weboldalon található összes tartalom kivétel nélkül szerkeszthető legyen. A logikus felépítés eredménye pedig egy könnyen kezelhető rendszer. Azt a célt tűztük ki magunk elé, hogy az adminisztrációs felületet a végletekig leegyszerűsítve olyan megoldást kínáljunk, ami informatikai előképzettség nélkül is könnyen kiismerhető, és betanítás nélkül is eredményesen használható. Az eddigi munkáink alapján felhalmozott tudáson kívül fontosnak tartottuk más nézőpontokból is megvizsgálni, hogy mire van szükség az adminfelület tökéletesítéséhez. Többszintű kutatások és vizsgálódások eredményeképpen összegyűjtöttük az adminfelületek kialakításának legfontosabb szempontjait , amelyeket minden új fejlesztés esetében figyelembe veszünk.
Mi alapján határozható meg a használható adminfelület? A vizsgálandó nézőpontokat a webfejlesztésben résztvevő elemek határozzák meg. Ezért fontos a fejlesztést megrendelő nézőpontja, a fejlesztést végzők nézőpontja és végül, de nem utolsósorban az elkészült fejlesztést használók nézőpontja is. Ezek alapján a következő kutatásokat végeztük el a témában: Mélyinterjú a weboldal megrendelőivel Minden megrendelés esetében teljes körű specifikációt készítünk a feladatról, az adott weboldal fejlesztéséről. A specifikációt a megrendelőkkel folytatott tárgyalás, többszöri egyeztetés előzi meg. Ezen alkalmakkor a szükséges funkciók mellett arra is fény derül, hogy a megrendelő számára mik a prioritások . A tárgyalásokon olyan mélységben tárgyaljuk a webfejlesztést és a hozzá tartozó adminisztrációs felület kialakítását, hogy az megfelelően dokumentálva mélyinterjúként tudja szolgálni a szóban forgó kutatást. · Közvéleménykutatás weboldal felhasználói körében Az adminisztrációs felülettel ellátott weboldalak átadását követően vevői véleményeket gyűjtünk . A kapcsolatfelvétel célja, hogy a megrendelő elégedettsége mellett a weboldalt és a hozzá tartozó adminfelületet gyakorlatban használó személyek véleményét is megismerjük és feldolgozzuk. Ezek az információk szolgálják a kényelmi funkciókra irányuló fejlesztési ötleteket. · Mélyinterjú weboldalkészítést vezető szakemberekkel A senior fejlesztőkkel, vezető fejlesztőkkel, tapasztalt projektvezetőkkel folytatott beszélgetéseink célja az volt, hogy eddigi tapasztalataik szerint határozzák meg az adminisztrációs felület legfontosabb részeit és módszereit. A saját tapasztalataikon kívül számos népszerű tartalomkezelő rendszer (Joomla, Wordpress stb.) adminisztrációs felületét is átvizsgálták és véleményezték, ami alapján új lehetőségek és módszerek is megfontolásra kerültek. · Közvéleménykutatás webfejlesztői körökben A mélyinterjúkból levont következtetéseket további fejlesztők és programozók bevonásával tettük fontossági sorrendbe. A közvéleménykutatásban közel 50 szakmabeli vett részt. Tapasztalt senior és kezdő programozók álláspontja is feldolgozásra került.
Milyen legyen a használható adminisztrációs felület? Kutatásunk eredményét az alábbiakban foglaltuk össze webfejlesztők és felhasználók számára egyaránt hasznos tippek, elvárások formájában, amelyek a mi cégünk, az Abaco.hu munkájának alapját is képezik. Tanácsaink az egyszerűség kedvéért webfejlesztőnek szóló utasításokként vannak megfogalmazva, de az adminisztrációs felületet megrendelő ügyfél számára is hasznos információval szolgálnak a jelenleg érvényes elvárásokról. Milyen legyen tehát az eszményi adminisztrációs felület az ügyfél weboldalán?
Azonosítható: Az adminisztrációs felület is azonnal azonosítható legyen a céggel vagy a termékkel . Ezt például egy l ogó megjelenítésével, szlogen feltüntetésével érhetjük el.
Felhasználóbarát: Talán a legfontosabb és leginkább irányadó szempont minden egyes kritérium közül az ügyfélbarát kialakítás . Próbálj a vásárló fejével gondolkodni , amikor az adminisztrációs felületet kialakítod! Valószínűleg sokféle ember fogja használni rendszeredet, ami mindenki számára érthető és kezelhető legyen. Gondolj arra is, hogy manapság nemcsak számítógépről vagy laptopról interneteznek az emberek, hanem sokan tabletet vagy mobiltelefont használnak. Ezért hasznos, ha az adminisztrációs felületet reszponzívan – tehát a megjelenítő felülethez rugalmasan alkalmazkodóan – alakítod ki, hogy minden eszközön, bármelyik böngészőben is ugyanúgy használható legyen. A felhasználóbarát felépítés hosszú távon a későbbiekben a Te munkádat is megkönnyíti majd, hiszen az ügyfeleidtől kevesebb kérdés fog beérkezni azzal kapcsolatban, hogy mit hol találnak, mit hol szerkeszthetnek.
Egységes, érthető: Az előző szempontot alapul véve és kiegészítve természetesen fontos az is, hogy rendszered egységes és érthető legyen . Így nem csak a 'mit hol találok' típusú kérdéseket, de a 'mit hogyan szerkeszthetek' típusú kérdések számát is minimalizálhatod. Az adminisztrációs felület átlátható szerkezete, érthető menürendszere tehát hosszú távon szintén megkönnyíti a Te munkádat is.
A funkciók, menüpontok elnevezése értelemszerű legyen . Az egyes funkciók használata közben világos, egyértelmű rendszert kövess, alakíts ki logikai egységeket (menüpontokat, almenüket). Az összetartozó logikai egységeket például azonos, míg a különböző témákat eltérő színekkel is jelölheted.
Tartalmak csoportosítása: Célszerű az oldal tetején egy kiemelt helyen m egnevezni a bejelentkezett felhasználót . A személyes beállítások, illetve a kilépés lehetősége is kiemelt helyen szerepeljen. Az adminfelületen való navigálást több módon is lehetővé kell tenni, hogy kézre álljon mindenkinek. Hasznos lehet a fő/legtöbbet használt funkciók, menüpontok kiemelése egy gyorsmenübe , ami mindig jól látható. Ugyanezeket a bejelentkezést követően mutatott kezdőlapon is megjeleníthetjük, itt ikonokkal és rövid magyarázattal. A menüben egyértelműen legyenek csoportosítva az egyes oldalak és aloldalak. Fontos, hogy a menüpontok elnevezése teljesen egyértelmű legyen . Ne használjuk ugyanazt a szót két különböző funkciónál, mert megzavarhatja a felhasználót. Az aktuális oldalt mindenhol jelezni kell, hogy a felhasználó tudja és lássa, hol is van éppen. Erre a legjobb megoldás az úgynevezett Breadcrumb ( „kenyérmorzsa /zsemlemorzsa”: a felhasználói felületeken használt navigációs eszköz, amely a kiindulóponttól a felhasználó jelenlegi tartózkodási helyéig vezető utat mutatja ). Ennek segítségével az érkezési útvonalat is visszakövetheti, tehát láthatja, hogy mely menüpontok almenüire kattintva jutott el az aktuális nézethez.
Hasznos funkciók: Iktass be azonnali üzenetküldési lehetőséget az adminfelületeden, hogy rendszered használói gyorsan kapcsolatba léphessenek Veled, vagy ha ilyet nem tudsz kialakítani, ügyfélszolgálatod elérhetősége legyen könnyen elérhető, szembetűnő helyen. Alkalmazhatsz még például súgómenüket, információs szövegeket, tudástárat. Készíthetsz felhasználói kézikönyvet, oktatófilmeket, hogy ha felhasználóid elakadnának valahol, akkor legyen azonnali segítségük. Fontos, hogy legyen lehetőség több adminisztrátor általi kezelésre is. Ha lehetőséget adsz az adminisztrátorok jogosultságok szerinti kategorizálására, az még jobb lehet (például: tulajdonos, szerkesztő, tartalmi elem kezelője, felhasználó). Visszajelzések a weboldal működéséről pl. Google Analitycs integrálásával. Lehetőleg minden megtekinthető legyen ezen a felületen.
A funkciók hibamentesen működjenek: Lehetőleg iktass ki minden hibalehetőséget! Ne adj a felhasználóknak olyan beállításokhoz hozzáférést, amivel komoly hibákat okozhatnak. Amihez hozzáférést adsz, az legyen kompatibilis az átlagember tudásával . A felhasználók megoszlanak a Chrome, Firefox, Internet Explorer, Opera, Safari és a többi kisebb böngészőtípus között. Ezek mindegyikében – de legalább a legfrissebb verziókban – működjenek helyesen az adminfunkciók!
Tesztelj, teszteltess mással: A hibák kiszűrése érdekében lehetőleg minél több és minél különbözőbb embert kérj meg arra, hogy tesztelje, értékelje adminisztrációs felületed. Ha neked Windows számítógéped van, kérj meg a tesztelésre olyanokat is, akik Macintosht, tabletet vagy mobilt használnak. Minden egyes vélemény (még ha negatív is) előrébb visz, segít terméked, szolgáltatásod tökéletesítésében. A pozitív visszajelzések pedig akár az eladás folyamatában, ügyfélszerzésben is jól jöhetnek. Szlogenedet, marketingaktivitásodat ezen visszajelzések alapján is kialakíthatod.
Újszerűség, egyediség, folyamatos fejlesztés: Mai világunkban napról napra változik és újul meg minden , ezért adminisztrációs felületedet is folyamatosan ellenőrizd, alakíts ki új funkciókat! Akár egy friss design is csodákra lehet képes.
Design: Egy szép külső megjelenésű adminisztrációs felületen az emberek szívesebben időznek – add meg rendszered használóinak ezt az örömöt ! Alkalmazhatsz kis képeket, ikonokat a funkciók nevei mellé illesztve. Ezekkel könnyebben tájékozódnak a látogatók, mert már nem is kell a funkció nevét elolvasniuk, csupán a kis jelekre pillantva is gyorsan használni tudják adminisztrációs felületedet.
Funkcióorientált design: Az adminisztrációs felületek elsősorban funkcióorientáltak, azaz nem az a legfontosabb, hogy a felület nagyon szépen nézzen ki, hanem hogy maradéktalanul ellássa a funkcióit : jelenítsen meg minden információt, amire a felhasználóknak szükségük van, és minél egyszerűbben lehessen benne adatokat, beállításokat módosítani.
Az adminfelület kinézetének kialakításakor is ezt a szempontot kell alapul venni. A felületeknek letisztultaknak és könnyen átláthatóaknak kell lenniük. A hasonló funkcióknál ugyanazokat az elemeket kell használni, például a táblázatokban jelöljük mindig ugyanúgy az adott sorok szerkesztését/törlését/stb. Fontos, hogy a táblázatok mindenhol szűrhetőek és rendezhetőek legyenek az oszlopaik szerint, ezeket könnyen kombinálhassák, azaz ha szűrés után rendezünk egy táblázatot, akkor a szűrőfeltételek ne tűnjenek el, hanem csak a már leszűrt táblázat találatait rendezzük. A táblázatokhoz tartozzon lapozó is, amivel a sok találatot tudjuk kisebb adagokban áttekinteni . Itt arra is figyelni kell, hogy amikor rendezzük a táblázatot, akkor nemcsak az adott oldal sorait kell rendezni, hanem először a teljes táblázatot (azaz az összes keresési feltételnek megfelelő sort), és utána megjeleníteni az aktuális oldalt. Ez technológiai szempontból azt jelenti, hogy a rendezéseket/szűréseket mindig a szerveroldalon kell elvégezni és nem pedig a kliensoldalon javascripttel. Hasonlóan a lapozásnál is a szerver mindig csak az aktuális oldal találatait adja vissza, ne pedig a teljes listát, amit a kliensoldal bont szét lapokra. Fontos, hogy az oldalunk minden böngészőméretben kihasználja a rendelkezésre álló teret, hogy minél több információt meg tudjon jeleníteni. Ez a táblázatoknál különösen fontos, főleg, hogyha az sok oszlopot tartalmaz. Ha ugyanis nagyon sok oszlopot tartalmaz, akkor az adatok összenyomódnak vagy kicsúsznak a képernyőről, és így teljesen áttekinthetetlenné válnak. Ennek érdekében érdemes reszponzív designt készíteni, ami képes alkalmazkodni a kijelzők aktuális méretéhez. Ezáltal az adminisztrációs felületünk képes lesz mobil eszközökön is futni (okostelefon, táblagép). Ezzel a weboldalunk beállításai és a szükséges információk bárhol elérhetővé válnak számunkra.
Ha minden készen van: A kész adminisztrációs felületről készüljön általános szöveges dokumentáció , ami részletesen kitér a felület összes funkciójának használatára. Ha a fentiek szerint készült az adminfelület, és jó a dokumentáció, akkor sok felhasználónak elég lesz csak ezt odaadnod, és máris kiigazodnak majd a rendszerben. Akiknek mégsem lenne elég, azoknak még mindig tarthatsz személyes betanítást is.
Alkalmazás felépítése, automatikus tesztelés Programozási szempontból ezeket az újrafelhasználható és felparaméterezhető elemeket úgynevezett partialokkal és/vagy widgetekkel tudjuk megoldani. Ezek a programkód több helyén felhasználhatók, és így egyszerűbbé válhatnak az átalakítások, mivel nem rengeteg helyen kell különkülön megcsinálni a módosításokat, hanem csak egy helyen. Ezzel igen sok időt és ezáltal a fejlesztésre elköltött pénzt is meg tudunk takarítani . Ezt az elvet kell alkalmazni az alkalmazásunk többi részének programozása közben is. Azaz itt is lazán egymáshoz kötött vagy különálló komponensek felhasználásával érdemes felépíteni a programunkat. Ez az alkalmazás többi részén is lehetővé teszi, hogy egyszerűen és gyorsan hajtsunk végre módosításokat . Ez a felépítés továbbá lehetővé teszi, hogy könnyen írjunk automatizált teszteket az alkalmazásunkhoz, amiket minden módosítás után le tudunk futtatni, és így ellenőrizhetjük, hogy nem rontottunke el egy funkciót. Ezeket a döntéseket érdemes a fejlesztés legelején, vagy még a korai szakaszaiban meghozni. Habár kezdetben úgy tűnhet, hogy nagy pluszköltséggel járnak, és meg is nyújtják a fejlesztési időt, ez csak részben igaz. Az tény, hogy ezzel a módszerrel kezdetben lassabban indul el a fejlesztés, és az is igaz, hogy az automatizált tesztek igencsak megnövelik az egyes funkciók fejlesztési idejét, de ezek a kezdeti befektetések később sokszorosan megtérülnek . Részben azért, mert a későbbi módosítások ideje jelentősen csökken , részben pedig a folyamatos és átfogó tesztelésnek köszönhetően az alkalmazásunkban is sokkal kevesebb hiba lesz . Ezáltal a hibajavításra is sokkal kevesebb idő fog elmenni.
Az adminfelület mint kommunikációs csatorna Egy adminisztrációs felület az elsődleges funkcióján felül kiváló kommunikációs csatorna is lehet a fejlesztő és az ügyfél között. Egy jól megtervezett kezdőlapon az általános információkon felül tájékoztathatjuk a partnert a rendszert érintő legújabb fejlesztéseinkről , esetleges hibajavításainkról. Havidíjas rendszerek esetében ez kiváltképp fontos, hiszen az ügyfél folyamatosan szembesül a háttérben folyó munkálatokkal, így pontosan tudja, mire költi a pénzét. A supporton keresztül érkező visszajelzések alapján tippeket és tanácsokat is megoszthatunk a felhasználóinkkal, vagy közérdekű információkat posztolhatunk. A rendszer fejlesztését érintő változtatásokon kívül lehetőségünk van az ügyfeleknek ajánlatokat is adni. Kiegészítő modulok, funkciók, esetleg szolgáltatások finom reklámozására is van lehetőségünk, hiszen ideális környezetben a célközönségünkkel kommunikálhatunk .
16 konkrét tipp, amivel nagymértékben fokozható a felhasználói élmény: 1. Űrlapok esetében az adatok bekérése során minden lényeges információt kapjon meg a felhasználó. Mely adatok kitöltése kötelező, milyen az elfogadott formátum például dátum beírásakor, stb.
2. Űrlap ellenőrzése. Űrlapok helyes kitöltésének ellenőrzése a böngészők által nyújtott lehetőségek kihasználásával még az adatok elküldése előtt.
3. Kereső. Nagy mennyiségű adat könnyű használata érdekében legyen keresési lehetőség.
4.
Sorrendezhetőség.
A lista jellegűen megjelenített adatok sorrendje legyen
módosítható (pl. név szerint ábécé sorrendbe, időrendbe).
5.
Léptethetőség.
A felhasználó az egyes listák szűrése során a böngésző
navigációval (előrevissza gombok) is léphessen a szűrt nézetek között.
6. Állapotkijelzés. Amennyiben az adatoknak van státusza (aktív, törölt, inaktív), akkor az egyértelműen derüljön ki már a listanézetben is. A státuszokat lehet ikonnal vagy színezett sorokkal jelölni.
7. „Ment”, illetve „Ment és folytat” gomb minden oldalra. 8. V isszaigazolás. Az egyes műveletek elvégzését követően a rendszer adjon látható és egyértelmű visszajelzéseket azok eredményéről. Például: sikeres vagy sikertelen volt a művelet? Ha sikertelen, akkor mi okozta a problémát?
9. Naplózás. Visszakövethető és egyértelmű rendszernapló az adminfelületen végzett tevékenységekről. Ez főként a több felhasználós rendszereknél lehet szükséges.
10.
Más weboldalra mutató hivatkozások megnyitása új ablakban. Még véletlenül
se hagyja el az adminisztrációs felületet kilépés nélkül.
11.
Fájlok kezelése. Az adminfelületen feltöltött fájlok és képek tartalma legyen
megtekinthető, de ez ne befolyásolja az egyébként megjelenített adatokat. Fájlok és képek megtekintése az adminfelület fölé nyíló ablakban történjen.
12.
Információs ábrák. Ikonok használata az egyes gombokon (letöltés, új ablak,
törlés, szerkesztés stb.), hogy már a művelet előtt lássa, „mire számíthat”.
13.
Biztonságos törlés. Az adatok végleges törlése előtt a rendszer jelezze a
művelet kimenetelét, és legyen lehetőség a törlés visszavonásra.
14.
Egyedileg beállítható kezdőlap. Az adminfelületre való bejelentkezést követően
a felhasználó által beállított kezdőlap jelenjen meg.
15.
Információ a háttérfolyamatokról. Egyértelműen jelezze a rendszer, hogy egy
adott művelet elvégzésén dolgozik. Például hírlevelek kiküldése esetén jelenítse meg a még kiküldendő levelek számát; vagy: a magára hagyott adminfelületen az automatikus kiléptetés idejének megjelenítése visszaszámlálóval.
16.
Előnézet. Szöveges oldalak szerkesztése esetén legyen lehetőség a publikálást
megelőzően. Előnézeti módban ellenőrizni a tartalom megjelenését. Az előnézet a publikus weboldal keretei között mutassa a tartalmat.
