UX frontend szemmel


Hogyan integrálható a frontend fejlesztés a UX folyamatokba, mit tehet egy frontend fejlesztő a jobb 

felhasználói élményért.


UXbudapest / 2014. május 28.


Schmíz Péter, head of frontend (peter.schmiz@carnationgroup.com, @pety7439)

Frontend, kiaz, miaz


  • "sitebuilder"
  • "aki a böngészőt programozza"

  • "Photoshopból kimenti az oldalt"

  • "azt csinálja, amit a weben látsz"

Frontend, kiaz, miaz


  • Nem feltétlenül van design ismerete / érzéke
  • Van backend közeli frontend fejlesztő és a designer közeli
  • Hibrid, a szükséges kapocs,  nehéz
    pontosan meghatározni a helyét

Az frontend fejlesztő nem a DEV-et szolgálja ki, hanem a felhasználót és a UX / design csapatot!

Frontend és UX - FE miben segíthet

  • Többszöri iteráció

  • Megvalósíthatóság vizsgálat
  • Wireframek véleményezése / együttes kialakítása

  • Gyorsabb iterálás (jobb egy kis kód, mint egy .ppt)
  • Kihívásként kezelni a UX kéréseit

Frontend és UX - prototípus készítés


Prototípus készítése - akár UX eszközök
használatával - jó, mert...

Frontend és UX - előnyök


  • lehet javítani a wireframe / prototípus pontosságán
  • időt spórol a frontendesnek, ha nem neki kell prototípust készíteni

  • a frontendes érti mit akar a UX-es és fordítva

  • mindenki tanul belőle

Frontend és UX - FE szerepe
NE legyen a frontend
(vagy DEV) a blokker
A frontend fejlesztő feladata, hogy megoldást találjon, alternatívát kínáljon

Nincs jó UX jó FE nélkül


A UX-nek nem feladata, hogy naprakész
legyen minden techie dologból

Frontend lehet a kapocs a DEV és a UX között is!


Mit lát / tud az FE, ami rejtve marad(hat) a UX előtt?


  • Device / browser / OS képességek, hibák
  • Teljesítményt befolyásoló design / UX igények
  • Accessibility vs. design
  • SEO vs. design
  • Optimalizálások, amiket nem lehet wireframezni
  • Új lehetőségek felismerése,
    UX csapattal ezek megismertetése
  • Fejlesztési idő vs. design (timebudget kezelés)

Problémás frontend/UX részek


  • Form kezelés
  • Hibakezelés
  • Custom inputok vs. natív inputok
  • Állapotok átgondolása
  • Tabindex, WAI-ARIA, WCAG
  • Interakciók cross-device / cross-browser
  • Animációk / mozgások
  • Multimédia

FE és azon túli UX lehetőségek - harc az idővel és bájtokkal


  • DEV / hosting optimalizálás
  • Cache és verziózás
  • Letöltési szálak
  • CDN vagy lokális kiszolgálás
  • Kliens oldal használata
  • Tömörítés
  • User-agent alapú kiszolgálás

Frontend helye, mikor, kivel?


Már a kezdésnél (wireframe, koncepció)

Prototípusok, iterálás UX / design csapattal

DEV oldal segítése

Frontend általi design approve


∑


  • nincs csoda UX/FE/designer szakember
    (UX Unicorn)
  • szoros együttműködés kell
  • nem lehet 100%-osan meghatározni az
    frontend helyét a UX folyamatokban
  • konstruktív, felkészült frontend ⇒ jobb UX

FEnd :)

Made with Slides.com