Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

CHALLENGES   OF  WEB  DEVELOPMENT

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

NaRve  apps  have  known   device  &  soWware  features.

Slide 8

Slide 8 text

Web  apps  have  unknown   device  &  soWware  features.

Slide 9

Slide 9 text

“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

Slide 10

Slide 10 text

A  TRADITIONAL   TEAM  STRUCTURE

Slide 11

Slide 11 text

Dev Dev Dev Manager Dev Dev SME BA UX BA Dev Dev Dev

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

USER  EXPERIENCE   DESIGNERS

Slide 14

Slide 14 text

UX  designers  research  the   needs  &  expectaRons  of  users.  

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

USER  INTERFACE   DEVELOPERS

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

A  BETTER   TEAM  STRUCTURE

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

“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

Slide 29

Slide 29 text

TECHNOLOGICAL   LANDSCAPE

Slide 30

Slide 30 text

Context  aware.   MiRgate  factors  hindering   user  goals.

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

“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

Slide 33

Slide 33 text

MulRscreen  pa+erns.

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

OUTCOMES

Slide 41

Slide 41 text

Focused  roles   O U TCO M E S

Slide 42

Slide 42 text

Focused  roles
 CollaboraRon   O U TCO M E S

Slide 43

Slide 43 text

Focused  roles   CollaboraRon
 UI  equally  prioriRzed
 O U TCO M E S

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Focused  roles   CollaboraRon
 UI  equally  prioriRzed
 Be+er  user  experience   PosiRoned  for  future  changes O U TCO M E S

Slide 46

Slide 46 text

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