The Role of the UI Developer

E47e6ed7d8d33fee920bdd45973d0570?s=47 Chris Basham
November 11, 2014

The Role of the UI Developer

Presented at Kuali Days 2014 with Tara Bazler.
http://www.kuali.org/kd/2014

The challenges of developing the front-end of web applications has increased dramatically. Working within this space requires a dedicated front-end user interface (UI) developer with skills specific to this domain. In addition to building the "look and feel" of an application, UI developers must solve problems in uncontrollable browser environments and user contexts; implement the interactive, aesthetic, and experiential vision of UX designers while considering performance implications; and bridge the communication between back-end services and the UI.

To better handle the intricacies of developing modern web services, Kuali Student has integrated UI developers into all product streams. We will highlight the importance of this role and the skillsets they contribute to the team. We will also discuss the increasing complexity of modern and future front-end interfaces and user expectations. Finally, we will outline an ideal modern UI dev workflow and the plethora of tools available.

E47e6ed7d8d33fee920bdd45973d0570?s=128

Chris Basham

November 11, 2014
Tweet

Transcript

  1. Building  be+er  apps:   The  role  of  the   UI

     developer   Tara  Bazler  ·∙  Chris  Basham
  2. CHALLENGES   OF  WEB  DEVELOPMENT

  3. Desktop   Laptop   Phone   Tablet
 TV   Game

     console   E-­‐reader   D E V I C E S   W I T H   B ROW S E R S
  4. Keyboard   Mouse   Screen  readers
 Touch   Gesture  

    Voice T Y P E S   O F   B ROW S E R   I N T E R AC T I O N
  5. LocaRon   OrientaRon   NoRficaRons D E V I C

    E   C A PA B I L I T I E S
  6. ConnecRvity   Contacts   Ba+ery  status
 Ambient  light   Proximity

      Camera U P CO M I N G   D E V I C E   C A PA B I L I T I E S
  7. NaRve  apps  have  known   device  &  soWware  features.

  8. Web  apps  have  unknown   device  &  soWware  features.

  9. “The  fact  is  that  we  can’t   absolutely  rely  on

     the   availability  of  any  specific   technology  when  it  comes  to   delivering  a  Web  experience.” —Aaron  Gustafson,  A  Fundamental  Disconnect
  10. A  TRADITIONAL   TEAM  STRUCTURE

  11. Dev Dev Dev Manager Dev Dev SME BA UX BA

    Dev Dev Dev
  12. A R B I T R A RY   WA

    L L S   O F   R E S P O N S I B I L I T Y UX   Designers Backend   Developers
  13. USER  EXPERIENCE   DESIGNERS

  14. UX  designers  research  the   needs  &  expectaRons  of  users.

     
  15. UX  designers  research  the   needs  &  expectaRons  of  users.

      Create  interface  designs.  
  16. UX  designers  research  the   needs  &  expectaRons  of  users.

      Create  interface  designs.   Evaluate  &  opRmize  task  flow.
  17. Interface  design   InteracRon  design   User  research K E

    Y   S K I L L S
  18. “…empower  your  designer  with  the   maximum  amount  of  agency

     to  do   their  job  well.  No  one  tells  the   accountant  how  to  do  their  job,  but   I’ve  been  in  a  hundred  workplaces   where  people  told  the  designer  how   to  do  theirs.” —Mike  Monteiro,  Before  You  Hire  Designers
  19. USER  INTERFACE   DEVELOPERS

  20. UI  developers  are  responsible   for  everything  that  is  sent

     to   the  browser.  
  21. UI  developers  are  responsible   for  everything  that  is  sent

     to   the  browser.   Aligns  with  experienRal  vision   as  imagined  by  designers.
  22. HTML,  CSS,  JavaScript   Build  systems   Pre-­‐  &  Post-­‐processors

    K E Y   S K I L L S
  23. Client-­‐side  frameworks   Performance   IntegraRng  with  back-­‐end  APIs K

    E Y   S K I L L S
  24. Responsive  design   Progressive  enhancement   Accessibility K E Y

      S K I L L S
  25. A  BETTER   TEAM  STRUCTURE

  26. Stakeholders Stakeholders Users Users UX Product  Owner Stakeholders Users BA

    Dev Dev Scrum  Master UI  Dev SME
  27. I N T E R AC T I O N

     A M O N G   RO L E S UX   Designers UI   Developers Backend   Developers
  28. “In  order  to  effecRvely  design   for  today  and  tomorrow’s

     Web,   we  must  replace  outdated  design   arRfacts  with  real  collaboraRon   and  communicaRon.  For  a  lot  of   people,  this  is  scary…” —Brad  Frost,  Development  is  Design
  29. TECHNOLOGICAL   LANDSCAPE

  30. Context  aware.   MiRgate  factors  hindering   user  goals.

  31. Device  agnosRc.   Use  won’t  always  occur  on  the  

    primary  or  preferred  device.
  32. “It  is  your  mission  to  get  your  content  out,  

    on  whichever  pladorm,  in  whichever   format  your  audience  wants  to  consume  it.   Your  users  get  to  decide  how,  when,  and   where  they  want  to  read  your  content.  It  is   your  challenge  and  your  responsibility  to   deliver  a  good  experience  to  them.” —Karen  McGrane,  Your  Content,  Now  Mobile
  33. MulRscreen  pa+erns.

  34. A digital product or service looks and works coherently across

    devices. Features are optimized for specific device characteristics and usage scenarios. Coherence PaDerns  for  MulEscreen  Strategies CO H E R E N C E   PAT T E R N
  35. CO H E R E N C E   PAT

    T E R N Evernote
  36. • • • Devices are always in sync. Syncronization PaDerns

     for  MulEscreen  Strategies SY N C   PAT T E R N
  37. SY N C   PAT T E R N Audible

     Whispersync  for  Voice
  38. Devices are complementing each other. Complementarity PaDerns  for  MulEscreen  Strategies

    CO M P L E M E N TA RY   PAT T E R N
  39. CO M P L E M E N TA RY

      PAT T E R N Scrabble  for  iPad
  40. OUTCOMES

  41. Focused  roles   O U TCO M E S

  42. Focused  roles
 CollaboraRon   O U TCO M E S

  43. Focused  roles   CollaboraRon
 UI  equally  prioriRzed
 O U TCO

    M E S
  44. Focused  roles   CollaboraRon
 UI  equally  prioriRzed
 Be+er  user  experience

      O U TCO M E S
  45. Focused  roles   CollaboraRon
 UI  equally  prioriRzed
 Be+er  user  experience

      PosiRoned  for  future  changes O U TCO M E S
  46. Tara  Bazler         @taranoba   Chris  Basham

        @chrisbasham   I N D I A N A   U N I V E R S I T Y   ·∙   K UA L I   S T U D E N T 
 
 K UA L I   DAYS 
 N OV E M B E R   2 0 1 4