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