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
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