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.

Transcript

1. Building  be+er  apps:  
   The  role  of  the  
   UI  developer  
   Tara  Bazler  ·∙  Chris  Basham
   

   View Slide

2. CHALLENGES  
   OF  WEB  DEVELOPMENT
   

   View Slide

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
   

   View Slide

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
   

   View Slide

5. LocaRon  
   OrientaRon  
   NoRficaRons
   D E V I C E   C A PA B I L I T I E S
   

   View Slide

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
   

   View Slide

7. NaRve  apps  have  known  
   device  &  soWware  features.
   

   View Slide

8. Web  apps  have  unknown  
   device  &  soWware  features.
   

   View Slide

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
   

   View Slide

10. A  TRADITIONAL  
    TEAM  STRUCTURE
    

    View Slide

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

    View Slide

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
    

    View Slide

13. USER  EXPERIENCE  
    DESIGNERS
    

    View Slide

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

    View Slide

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

    View Slide

16. UX  designers  research  the  
    needs  &  expectaRons  of  users.  
    Create  interface  designs.  
    Evaluate  &  opRmize  task  flow.
    

    View Slide

17. Interface  design  
    InteracRon  design  
    User  research
    K E Y   S K I L L S
    

    View Slide

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
    

    View Slide

19. USER  INTERFACE  
    DEVELOPERS
    

    View Slide

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

    View Slide

21. UI  developers  are  responsible  
    for  everything  that  is  sent  to  
    the  browser.  
    Aligns  with  experienRal  vision  
    as  imagined  by  designers.
    

    View Slide

22. HTML,  CSS,  JavaScript  
    Build  systems  
    Pre-­‐  &  Post-­‐processors
    K E Y   S K I L L S
    

    View Slide

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

    View Slide

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

    View Slide

25. A  BETTER  
    TEAM  STRUCTURE
    

    View Slide

26. Stakeholders
    Stakeholders
    Users
    Users
    UX Product  Owner Stakeholders
    Users
    BA
    Dev
    Dev
    Scrum  Master
    UI  Dev
    SME
    

    View Slide

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
    

    View Slide

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
    

    View Slide

29. TECHNOLOGICAL  
    LANDSCAPE
    

    View Slide

30. Context  aware.  
    MiRgate  factors  hindering  
    user  goals.
    

    View Slide

31. Device  agnosRc.  
    Use  won’t  always  occur  on  the  
    primary  or  preferred  device.
    

    View Slide

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
    

    View Slide

33. MulRscreen  pa+erns.
    

    View Slide

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
    

    View Slide

35. CO H E R E N C E   PAT T E R N
    Evernote
    

    View Slide

36. •
    •
    •
    Devices are always in sync.
    Syncronization
    PaDerns  for  MulEscreen  Strategies
    SY N C   PAT T E R N
    

    View Slide

37. SY N C   PAT T E R N
    Audible  Whispersync  for  Voice
    

    View Slide

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
    

    View Slide

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

    View Slide

40. OUTCOMES
    

    View Slide

41. Focused  roles  
    O U TCO M E S
    

    View Slide

42. Focused  roles

    CollaboraRon  
    O U TCO M E S
    

    View Slide

43. Focused  roles  
    CollaboraRon

    UI  equally  prioriRzed

    O U TCO M E S
    

    View Slide

44. Focused  roles  
    CollaboraRon

    UI  equally  prioriRzed

    Be+er  user  experience  
    O U TCO M E S
    

    View Slide

45. Focused  roles  
    CollaboraRon

    UI  equally  prioriRzed

    Be+er  user  experience  
    PosiRoned  for  future  changes
    O U TCO M E S
    

    View Slide

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
    

    View Slide