Sokan tal\u00e1n eml\u00e9keznek m\u00e9g arra, hogy annak idej\u00e9n – amikor az Apple a cs\u0151d sz\u00e9l\u00e9n \u00e1llt \u00e9s az emberek n\u00e9vjegyk\u00e1rty\u00e1jukon felt\u00fcntett\u00e9k a faxsz\u00e1mot – a weboldalak m\u00e9g kicsit nehezen haszn\u00e1lhat\u00f3k voltak. Ehhez illeszkedett a gombok m\u0171k\u00f6d\u00e9se is, mely \u00edgy n\u00e9zett ki:<\/p>\n

\n
1. A felhaszn\u00e1l\u00f3 kattintott egy gombra.<\/li>\n
2. A gomb \u00e1tv\u00e1ltott egy inakt\u00edv, m\u00e1sik \u00e1llapotba.<\/li>\n
3. Egy k\u00e9r\u00e9s indult a szerver sz\u00e1m\u00e1ra.<\/li>\n
4. Vissza\u00e9rkezett a v\u00e1lasz a szervert\u0151l.<\/li>\n
5. Az oldal friss\u00fclt a v\u00e1lasznak megfelel\u0151en.<\/li>\n<\/ol>\n

   Ezt a megold\u00e1st m\u00e9g mindig nagyon sokan haszn\u00e1lj\u00e1k weboldalakon, applik\u00e1ci\u00f3kban, illetve sok term\u00e9k eset\u00e9ben r\u00e9sze az interakci\u00f3s folyamatnak. El\u0151nye, hogy t\u00f6bb\u00e9-kev\u00e9sb\u00e9 hibamentes a m\u0171k\u00f6d\u00e9se: a felhaszn\u00e1l\u00f3 tudja, hogy lek\u00e9r\u00e9s t\u00f6rt\u00e9nik a szerverr\u0151l, hiszen jelzi azt sz\u00e1m\u00e1ra a gomb, majd egyszer csak a szerver v\u00e1laszol \u00e9s a friss\u00edtett oldalb\u00f3l kider\u00fcl, hogy sikeresen v\u00e9get \u00e9rt az interakci\u00f3s folyamat. Vannak azonban probl\u00e9m\u00e1k a dologgal:<\/p>\n

   \n
   • A felhaszn\u00e1l\u00f3nak v\u00e1rnia kell. K\u00fcl\u00f6n\u00f6sen akkor gond ez, ha a szerver v\u00e1laszideje nagy.<\/li>\n
   • Ak\u00e1rh\u00e1nyszor v\u00e1laszt kap a felhaszn\u00e1l\u00f3, egy \u00faj oldal t\u00f6lt\u0151dik be, mely kiragadja a felhaszn\u00e1l\u00f3t a feladat kontextus\u00e1b\u00f3l, ami nem felt\u00e9tlen\u00fcl szerencs\u00e9s megold\u00e1s.<\/li>\n<\/ul>\n

     A web 2.0 meg\u00e9rkez\u00e9s\u00e9vel v\u00e1ltoztak az interakci\u00f3k a weboldalakon az XMLHttpRequest \u00e9s az AJAX r\u00e9v\u00e9n. Ez azonban csak annyit jelentett, hogy megjelentek v\u00e1ltoz\u00e1s-jelz\u0151k, melyek mutatt\u00e1k a felhaszn\u00e1l\u00f3nak, hogy a rendszer dolgozik. Emellett nem volt m\u00e1r sz\u00fcks\u00e9g a teljes weboldal \u00fajrat\u00f6lt\u00e9s\u00e9re, el\u00e9g volt a bet\u00f6lt\u00f6tt oldal egy r\u00e9sz\u00e9nek friss\u00edt\u00e9se. Ez javul\u00f3 felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt jelentett, ahol a folyamat \u00edgy n\u00e9zett ki:<\/p>\n

     \n
     1. A felhaszn\u00e1l\u00f3 kattintott.<\/li>\n
     2. A gomb v\u00e1ltott, \u00e9s megjelent a folyamatjelz\u0151.<\/li>\n
     3. A k\u00e9r\u00e9s elk\u00fcld\u00e9sre ker\u00fclt a szerverhez.<\/li>\n
     4. V\u00e1lasz \u00e9rkezett a szerverre.<\/li>\n
     5. A v\u00e1lasznak megfelel\u0151en friss\u00fclt az oldal \u00e9s a gomb.<\/li>\n<\/ol>\n

        Itt teh\u00e1t m\u00e1r a felhaszn\u00e1l\u00f3t nem ragadta ki az oldal friss\u00edt\u00e9se a feladat kontextus\u00e1b\u00f3l. Ugyanakkor az embereknek tov\u00e1bbra is v\u00e1rniuk kellett a szerver v\u00e1lasz\u00e1ra. Az emberek pedig tov\u00e1bbra sem szerettek v\u00e1rni, annak ellen\u00e9re, hogy a szerverek egyre gyorsabban v\u00e1laszoltak. A folyamatjelz\u0151k nem sokat seg\u00edtettek, mert a felhaszn\u00e1l\u00f3k a v\u00e1rakoz\u00e1ssal, a rendszer lass\u00fas\u00e1g\u00e1val azonos\u00edtott\u00e1k \u0151ket. Hiszen mik\u00f6zben n\u00e9zik \u0151ket nem tudnak mit tenni, csak passz\u00edvan v\u00e1rakozni, esetleg becsukni az oldalt vagy alkalmaz\u00e1st.<\/p>\n

        Mit tud az optimista felhaszn\u00e1l\u00f3i fel\u00fclet?<\/h2>\n

        Az optimista felhaszn\u00e1l\u00f3i fel\u00fclet nem m\u00e1s, mint egyfajta m\u00f3dja az ember \u00e9s a sz\u00e1m\u00edt\u00f3g\u00e9p k\u00f6z\u00f6tti interakci\u00f3 kezel\u00e9s\u00e9nek. Arr\u00f3l sz\u00f3l, amit az \u201coptimizmus\u201d sz\u00f3 is jelent: bizakod\u00f3 a j\u00f6v\u0151t tekintve.<\/p>\n

        H\u00e1nyszor fordul el\u0151, hogy a szerver v\u00e1lasza egy hiba\u00fczenet? \u00c1ltal\u00e1ban nem t\u00fal s\u0171r\u0171n, hiszen jellemz\u0151en a gomb vagy a link m\u0171k\u00f6dni szokott. Az esetek mintegy 1-3 sz\u00e1zal\u00e9k\u00e1ban jelez hib\u00e1t a szerver, vagyis 97-99 sz\u00e1zal\u00e9kban, amikor a felhaszn\u00e1l\u00f3 r\u00e1kattint egy gombra, akkor eredm\u00e9nyes lesz a cselekv\u00e9s. Ez pedig azt jelenti, hogy az interakci\u00f3nak \u00edgy kell kin\u00e9znie:<\/p>\n

        \n
        1. A felhaszn\u00e1l\u00f3 kattint a gombra.<\/li>\n
        2. A gomb pedig azonnal jelzi sz\u00e1m\u00e1ra, hogy sikeres volt az akci\u00f3.<\/li>\n<\/ol>\n

           Ennyi. Ez elegend\u0151 is, hiszen a felhaszn\u00e1l\u00f3 megtette, amit akart, m\u00e1s dolga nincs. Nem kell v\u00e1rnia, \u00e9s k\u00f6zben n\u00e9znie egy folyamatjelz\u0151t. Term\u00e9szetesen a fejleszt\u0151 szempontj\u00e1b\u00f3l a folyamat egy kicsit m\u00e1sk\u00e9nt n\u00e9z ki:<\/p>\n

           \n
           1. A felhaszn\u00e1l\u00f3 kattint a gombra.<\/li>\n
           2. A gomb visszajelzi a sikert.<\/li>\n
           3. A k\u00e9r\u00e9s elindul a szerver fel\u00e9.<\/li>\n
           4. Meg\u00e9rkezik a v\u00e1lasz.<\/li>\n
           5. Az esetek 97-99 sz\u00e1zal\u00e9k\u00e1ban tudjuk, hogy nem lesz gond, \u00edgy m\u00e1r nem zavarjuk a felhaszn\u00e1l\u00f3t.<\/li>\n
           6. Ha hiba van, a rendszer jelez a felhaszn\u00e1l\u00f3nak.<\/li>\n<\/ol>\n

              \u00cdgy m\u0171k\u00f6dik a Facebook l\u00e1jk-gombja is, amit mindenki ismer. A Facebook nem v\u00e1r a szerver v\u00e1lasz\u00e1ra a visszajelz\u00e9ssel, hanem azt mutatja a felhaszn\u00e1l\u00f3nak, hogy sikerrel j\u00e1rt a kattint\u00e1s, a l\u00e1jksz\u00e1ml\u00e1l\u00f3t pedig l\u00e9pteti eggyel. A Facebook \u00e9s m\u00e1s k\u00f6z\u00f6ss\u00e9gi oldalak gombjainak ezen m\u0171k\u00f6d\u00e9s\u00e9re nem nagyon van panasz, teh\u00e1t az optimista felhaszn\u00e1l\u00f3i fel\u00fclet a gyakorlatban is m\u0171k\u00f6dik, mert az emberek nem szeretnek v\u00e1rni. Na, de m\u00e9gis mi van akkor, ha valami hiba k\u00f6vetkezik be?<\/p>\n

              Hogyan jelzi az optimista IU, ha hiba van?<\/h2>\n

              Az optimista felhaszn\u00e1l\u00f3i fel\u00fclet teh\u00e1t bizonyos n\u00e9z\u0151pontb\u00f3l hazugs\u00e1got, m\u00e1s n\u00e9z\u0151pontb\u00f3l viszont el\u0151rejelz\u00e9st jelent. Hogy melyikr\u0151l van sz\u00f3, azt az d\u00f6nti el, hogy a hib\u00e1kat mik\u00e9nt kezelj\u00fck. A probl\u00e9m\u00e1t ugyanis kommunik\u00e1lni kell, m\u00e9gpedig lehet\u0151leg 2 m\u00e1sodpercen bel\u00fcl, am\u00edg a felhaszn\u00e1l\u00f3 m\u00e9g benne van a folyamatban. A Twitter p\u00e9ld\u00e1ul azt teszi, hogy egyszer\u0171en vissza\u00e1ll\u00edtja a gombot az eredeti \u00e1llapot\u00e1ba, ha a v\u00e1lasz hiba.<\/p>\n

              Nyilv\u00e1n akad olyan, aki szerint ez nem el\u00e9g, hiszen a felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra kifejezetten jelezni kellene, hogy hiba t\u00f6rt\u00e9nt. Ez\u00e1ltal v\u00e1lna a rendszer teljesen \u00e1tl\u00e1that\u00f3v\u00e1. Ugyanakkor ez m\u00e9gsem olyan j\u00f3 \u00f6tlet:<\/p>\n

              \n
              • B\u00e1rmilyen \u00fczenet, ami megjelenik a kijelz\u0151n, megzavarja a felhaszn\u00e1l\u00f3t, aki azzal kezd foglalkozni, hogy elemezze a hiba m\u00f6g\u00f6tt megb\u00faj\u00f3 okot. Ez az ok v\u00e9lhet\u0151en a hiba\u00fczenetben szerepelne.<\/li>\n
              • Ennek a hiba\u00fczenetnek vezetnie kellene a felhaszn\u00e1l\u00f3t, v\u00e9grehajthat\u00f3 inform\u00e1ci\u00f3kat adva sz\u00e1m\u00e1ra.<\/li>\n
              • A v\u00e9grehajthat\u00f3 inform\u00e1ci\u00f3k azonban m\u00e1r egy \u00faj kontextusba helyezik a felhaszn\u00e1l\u00f3t, teh\u00e1t kiker\u00fcl az eredeti feladat kontextus\u00e1b\u00f3l.<\/li>\n<\/ul>\n

                A hiba kommunik\u00e1ci\u00f3j\u00e1nak igazodnia kell a helyzethez. Egy visszav\u00e1ltoz\u00f3 gomb erre \u00e9ppen megfelel\u0151. Felmer\u00fcl azonban egy \u00fajabb k\u00e9rd\u00e9s: mi van, ha a felhaszn\u00e1l\u00f3 m\u00e9g azt megel\u0151z\u0151en bez\u00e1rja a b\u00f6ng\u00e9sz\u0151j\u00e9t, hogy a rendszer vissza tudn\u00e1 jelezni sz\u00e1m\u00e1ra a hib\u00e1t. A legrosszabb esetben m\u00e9g azel\u0151tt bez\u00e1rhatja, hogy a k\u00e9r\u00e9s egy\u00e1ltal\u00e1n elk\u00fcld\u00e9sre ker\u00fclhetne a szerver fel\u00e9. Ez azonban aligha val\u00f3sz\u00edn\u0171. M\u00e9g az sem nagyon, hogy azt megel\u0151z\u0151en bez\u00e1rn\u00e1, hogy a rendszer vissza tudn\u00e1 jelezni a hib\u00e1t. Ugyanakkor, ha ez valami\u00e9rt a Te esetedben val\u00f3di gondot jelent, akkor az optimista interakci\u00f3kat csak a kev\u00e9sb\u00e9 fontos elemekn\u00e9l vedd haszn\u00e1latba!<\/p>\n

                A l\u00e9nyeg<\/h2>\n

                Ha belev\u00e1gn\u00e1l Te is az optimista felhaszn\u00e1l\u00f3i fel\u00fclet kialak\u00edt\u00e1s\u00e1ba, akkor az al\u00e1bbiakat vedd figyelembe:<\/p>\n

                \n
                • Alapfelt\u00e9tel, hogy az API megb\u00edzhat\u00f3an m\u0171k\u00f6dj\u00f6n.<\/li>\n
                • A fel\u00fcletnek azt megel\u0151z\u0151en l\u00e1tnia kell a hib\u00e1kat, miel\u0151tt egy k\u00e9r\u00e9s elk\u00fcld\u00e9sre ker\u00fcl a szerver fel\u00e9. A legjobb, ha minden el van t\u00e1vol\u00edtva, ami hib\u00e1t okozhat az API-ban. Min\u00e9l egyszer\u0171bb egy UI-elem, ann\u00e1l k\u00f6nnyebb optimist\u00e1v\u00e1 tenni.<\/li>\n
                • Az optimista megold\u00e1st csak olyan elemekn\u00e9l alkalmazd, melyekt\u0151l nem v\u00e1rhat\u00f3 t\u00f6bb, mint siker vagy hiba visszajelz\u00e9se. Teh\u00e1t, ha egy kattint\u00e1s eredm\u00e9nyek\u00e9nt a szerver v\u00e1lasza lehet igen, nem vagy lehet (melyek mindegyike sikeres visszajelz\u00e9s), akkor jobb lenne, ha nem az optimista minta alapj\u00e1n m\u0171k\u00f6dne.<\/li>\n
                • Legy\u00e9l tiszt\u00e1ban az API v\u00e1laszidej\u00e9vel! Az optimista felhaszn\u00e1l\u00f3i fel\u00fclet akkor m\u0171k\u00f6dik igaz\u00e1n j\u00f3l, ha a szerver v\u00e1laszideje 2 m\u00e1sodperc alatt marad. Ha enn\u00e9l t\u00f6bb, akkor az v\u00e1ratlan eredm\u00e9nyekhez \u00e9s csal\u00f3dott felhaszn\u00e1l\u00f3khoz vezet.<\/li>\n
                • Egy optimista UI nem csak gombokra val\u00f3 kattint\u00e1sokn\u00e1l m\u0171k\u00f6dhet. Alkalmazhat\u00f3 m\u00e1s interakci\u00f3k eset\u00e9n is, bele\u00e9rtve a weboldal bet\u00f6lt\u0151d\u00e9s\u00e9t. Az \u00fan. skeleton screen is hasonl\u00f3 megold\u00e1s: megj\u00f3solod, hogy a szerver v\u00e1laszolni fog, \u00edgy amint k\u00e9pes r\u00e1, kit\u00f6lti az \u00fcres helyeket a felhaszn\u00e1l\u00f3i sz\u00e1m\u00e1ra.<\/li>\n<\/ul>\n

                  Mint l\u00e1that\u00f3, az optimista felhaszn\u00e1l\u00f3i fel\u00fclet nem egy \u00fajdons\u00e1g a weben, sem pedig egy k\u00fcl\u00f6n\u00f6sen bonyolult megold\u00e1s. Ez csak egy megk\u00f6zel\u00edt\u00e9s, egy gondolati modell, mely seg\u00edt az \u00e9szlelt teljes\u00edtm\u00e9ny jav\u00edt\u00e1s\u00e1ban. Ha okosan haszn\u00e1lod, akkor jobb felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt alak\u00edthatsz ki \u00e1ltala kis befektet\u00e9ssel.
                  \n