Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Role of the UI Developer

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.

Chris Basham

November 11, 2014
Tweet

More Decks by Chris Basham

Other Decks in Design

Transcript

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

    View full-size slide

  2. CHALLENGES  
    OF  WEB  DEVELOPMENT

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

  7. NaRve  apps  have  known  
    device  &  soWware  features.

    View full-size slide

  8. Web  apps  have  unknown  
    device  &  soWware  features.

    View full-size 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 full-size slide

  10. A  TRADITIONAL  
    TEAM  STRUCTURE

    View full-size slide

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

    View full-size 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 full-size slide

  13. USER  EXPERIENCE  
    DESIGNERS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  19. USER  INTERFACE  
    DEVELOPERS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. A  BETTER  
    TEAM  STRUCTURE

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

  29. TECHNOLOGICAL  
    LANDSCAPE

    View full-size slide

  30. Context  aware.  
    MiRgate  factors  hindering  
    user  goals.

    View full-size slide

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

    View full-size 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 full-size slide

  33. MulRscreen  pa+erns.

    View full-size 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 full-size slide

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

    View full-size slide




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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  40. Focused  roles  
    O U TCO M E S

    View full-size slide

  41. Focused  roles

    CollaboraRon  
    O U TCO M E S

    View full-size slide

  42. Focused  roles  
    CollaboraRon

    UI  equally  prioriRzed

    O U TCO M E S

    View full-size slide

  43. Focused  roles  
    CollaboraRon

    UI  equally  prioriRzed

    Be+er  user  experience  
    O U TCO M E S

    View full-size slide

  44. Focused  roles  
    CollaboraRon

    UI  equally  prioriRzed

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

    View full-size slide

  45. 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 full-size slide