Slide 1

Slide 1 text

     SeeSS: Instant Change Impact Visualization for CSS developers 2 padding: 2em 1em; } .title { font-family: ‘Century Gothic’; color: #A9071E; width: } 400px; Presentor: Hsiang-Sheng (Johnson) Liang Advisor: Mike Y. Chen 3 Ƥ JohnsonƤMike ZÂK(ƣ æd¬òƤSeeSS: Instant…. ƞƣbƣ

Slide 2

Slide 2 text

     3 padding: 2em 1em; } .title { font-family: ‘Century Gothic’; color: #A9071E; width: } 100%; SeeSS: Instant Change Impact Visualization for CSS developers Presentor: Hsiang-Sheng (Johnson) Liang Advisor: Mike Y. Chen  uĜ¬Ŭ¥ý: 100 % okƤ ƣ N¢ B87Ó CSS “JÅŋªĦƣ #uÆÚN SeeSSƤ‚ CSS eèƣ

Slide 3

Slide 3 text

     4 html { font-size: 100%; } body { color: #333; ! } ✖ ✖ CSS Ƥ_r Cascading style sheetƤ ƫÆB HTML dŸŏy“Ƥ: |ćƣ _…¤Y |ćƤ  CSS m=ƣ

Slide 4

Slide 4 text

     4 html { font-size: 100%; } body { color: #333; ! } ✖ background: red; ✖ CSS Ƥ_r Cascading style sheetƤ ƫÆB HTML dŸŏy“Ƥ: |ćƣ _…¤Y |ćƤ  CSS m=ƣ

Slide 5

Slide 5 text

     5 html { font-size: 100%; } body { color: #333; background: red; } ✖ ✖ tĘƤ |íIj&+ |ćƣ ƫ Æ#&1ʼn=kâ CSS dŸƤP€|ć ҦČƣ 'Ƥyr|ćğùĈÊÂƤìŞ%

Slide 6

Slide 6 text

     5 html { font-size: 100%; } body { color: #333; background: red; } ✖ ✖ blue; ✖ ✖ tĘƤ |íIj&+ |ćƣ ƫ Æ#&1ʼn=kâ CSS dŸƤP€|ć ҦČƣ 'Ƥyr|ćğùĈÊÂƤìŞ%

Slide 7

Slide 7 text

  6 ú],!ē¾ƣ ! ƫ |ć87ŶütĒěƣ

Slide 8

Slide 8 text

7 ໢ทઃܭࢣͷ ೔ৗ |ćĈÊ Yj6 ™jP>Ũƣ

Slide 9

Slide 9 text

✖ Picasa TM Login Password... E-mail... ✖ Picasa TM Login Password... E-mail... 8 ńĸA87|ć"Ƥƫ 7H ̘ŗƚ®ņƏčƣ ƫ q1# i8ŻňĽƤƗŠÆ®ņƤƫ ŷfûsƣ #&1*DŽ ßĘƣ

Slide 10

Slide 10 text

✖ Login Password... E-mail... ✖ Login Password... E-mail... 8 ńĸA87|ć"Ƥƫ 7H ̘ŗƚ®ņƏčƣ ƫ q1# i8ŻňĽƤƗŠÆ®ņƤƫ ŷfûsƣ #&1*DŽ ßĘƣ

Slide 11

Slide 11 text

✖ Login Password... E-mail... ✖ Login Password... E-mail... .login-button { ! ! } margin-left: 0; margin-top: 0; ⌛ 8 ńĸA87|ć"Ƥƫ 7H ̘ŗƚ®ņƏčƣ ƫ q1# i8ŻňĽƤƗŠÆ®ņƤƫ ŷfûsƣ #&1*DŽ ßĘƣ

Slide 12

Slide 12 text

✖ Login Password... E-mail... .login-button { ! ! } margin-left: 0; margin-top: 0; 8 ńĸA87|ć"Ƥƫ 7H ̘ŗƚ®ņƏčƣ ƫ q1# i8ŻňĽƤƗŠÆ®ņƤƫ ŷfûsƣ #&1*DŽ ßĘƣ

Slide 13

Slide 13 text

9 ✖ Picasa TM Login Password... E-mail... Login Password... E-mail... Login ánƤ kDĶĿƤ ƠƞƤ–u̘ćjŗƚŭƏƪƥơ ƫ`'ıp CSS ĺwƢ=EΪĦƤ #ÕgžĔœ¬ŵ$ƣ !

Slide 14

Slide 14 text

9 ✖ Picasa TM Login Password... E-mail... Login Password... E-mail... Login git bisect git blame Chrome developer tool ánƤ kDĶĿƤ ƠƞƤ–u̘ćjŗƚŭƏƪƥơ ƫ`'ıp CSS ĺwƢ=EΪĦƤ #ÕgžĔœ¬ŵ$ƣ !

Slide 15

Slide 15 text

10 Password... Login Password... E-mail... .login-button { ! } Login Login £ q̘ŗƚī=k CSS ŘĻƤ q1#SnƗŠĚ˜ŗƚ"~Ƥk"ŭƏģ¦ ćj̘ŗƚƣ

Slide 16

Slide 16 text

10 .login-button { margin-left: 0; margin-top: 0; } Login Password... Login Password... E-mail... Login £ q̘ŗƚī=k CSS ŘĻƤ q1#SnƗŠĚ˜ŗƚ"~Ƥk"ŭƏģ¦ ćj̘ŗƚƣ

Slide 17

Slide 17 text

! Unintended Changes 13 #†MƟ ƝšŨū{gqŰƠUnintended changesơ !  #H đ šŨƣ ! ƫ #SnuĜ¬Ŭ¥ý: 100%Ƥq1ø5§Hƕ-ƣ ƫ B uÆðW 400pxƣ

Slide 18

Slide 18 text

! Unintended Changes .title { font-family: Lato; color: #A9071E; width: 100%; } 13 #†MƟ ƝšŨū{gqŰƠUnintended changesơ !  #H đ šŨƣ ! ƫ #SnuĜ¬Ŭ¥ý: 100%Ƥq1ø5§Hƕ-ƣ ƫ B uÆðW 400pxƣ

Slide 19

Slide 19 text

! Unintended Changes 13 #†MƟ ƝšŨū{gqŰƠUnintended changesơ !  #H đ šŨƣ ! ƫ #SnuĜ¬Ŭ¥ý: 100%Ƥq1ø5§Hƕ-ƣ ƫ B uÆðW 400pxƣ

Slide 20

Slide 20 text

14 CSS editing Change O Unintended changes «¼EÌE­42H|íÖ  Rĥďƣ @#ńĸļčćjƢ7HD>²"@Ƥôô"oƣ #— ° ŀA“JF!ƣ

Slide 21

Slide 21 text

14 CSS editing Change Navigate to broken page !!! Many hours O Unintended changes «¼EÌE­42H|íÖ  Rĥďƣ @#ńĸļčćjƢ7HD>²"@Ƥôô"oƣ #— ° ŀA“JF!ƣ

Slide 22

Slide 22 text

15 Navigate to broken page !!! Modify & fix! ✔ JƆƤĬ bug  MmhyƤ@ &ŭļ|ć’?¶.Ƥ B#yƈĬ bug EħőƓƤààE¨ (ƣ

Slide 23

Slide 23 text

15 Navigate to broken page !!! Modify & fix! ✔ !@#$%^&* Debug again! !!! JƆƤĬ bug  MmhyƤ@ &ŭļ|ć’?¶.Ƥ B#yƈĬ bug EħőƓƤààE¨ (ƣ

Slide 24

Slide 24 text

16 Unit / Regression Testing ªğ= Unit test } Regression test źĞĬð@ğùƤૠunintended changes. ! Unit test 5 regression test ÁƫĞ•ĉĮÛóÃÄh ÜĞ•ªĦÉŰƠŠŎơŝ”aƣ

Slide 25

Slide 25 text

16 Unit / Regression Testing Test cases Referenced versions ªğ= Unit test } Regression test źĞĬð@ğùƤૠunintended changes. ! Unit test 5 regression test ÁƫĞ•ĉĮÛóÃÄh ÜĞ•ªĦÉŰƠŠŎơŝ”aƣ

Slide 26

Slide 26 text

Unit Testing CSSunit, Cactus, cssert, Hardy, etc 17 Ho`¡ªĦ N CSS  unit testing ƫ ƃU% hardy  test case ö- ™Pƣ ! CSS unit testing Á6ėƊÀ[щ assertionƣ śŒĄƑŒ¦ČƤĻƛöĭŃêIJ© assertionƣ

Slide 27

Slide 27 text

Unit Testing CSSunit, Cactus, cssert, Hardy, etc 17 Feature: Website layout test As a user I want visual consistency on the http://csste.st/ website ! Scenario: Content layout Given I visit "http://csste.st/" Then "section > p" should have "color" of "rgb(68, 68, 68)" # Hardy test script Ho`¡ªĦ N CSS  unit testing ƫ ƃU% hardy  test case ö- ™Pƣ ! CSS unit testing Á6ėƊÀ[щ assertionƣ śŒĄƑŒ¦ČƤĻƛöĭŃêIJ© assertionƣ

Slide 28

Slide 28 text

Regression Testing ≡ Functional testing ≡ Try replaying GUI manipulation ≡ Fail if cannot replay ≡ Ignore visual differences 18 Roset et al, Regression Testing Ajax Applications: Coping with Dynamism, ICST’10! Soechting et al, Syntactic regression testing for tree-structured output, WSE’09! Mesbah et al, Automated cross-browser compatibility testing, ICSE’11
 Roset et al, Harnessing Web-Based Application Similarities to Aid in Regression Testing, ISSRE’09! Roset, Automated Regression Testing of Ajax Web Applications, Master Thesis ÷n} web ˆ regression testing ŪŠƤźĞƠëŕŠ¼ơƣ ğù“JS@ƤÝĪŌ GUI ũmƤUXE¨ŌĠ ũmƤ WçƠĞ•½œơƣ řė false alarmƤ€×ëĞ•ÝĪƤ*ĨeŴť¦Čķůƣ

Slide 29

Slide 29 text

Regression Testing ≡ Visual regression testing ≡ PhantomCSS, Huxley 19 ·ýƠ¦ČơTîƠëơ regression testingƤƃU% PhantomCSS } Huxleyƣ ! ƫHuxley =- ™Pƣ87ÓNŒ HTML “J@ƤżM Huxley š?ŌSnĝŁMmƣHuxley = selenium i8ńĸĽƤŌ€MmƤL@Ā ( diff §Ɖƣ Huxley ģ¦)ëƤMu diff §Ɖƀ commit message IƤB¤jĈÊÂ&1źÀP“J okƣ

Slide 30

Slide 30 text

Regression Testing ≡ Visual regression testing ≡ PhantomCSS, Huxley 19 http://www.youtube.com/watch?v=DtnQ36jwk30 ·ýƠ¦ČơTîƠëơ regression testingƤƃU% PhantomCSS } Huxleyƣ ! ƫHuxley =- ™Pƣ87ÓNŒ HTML “J@ƤżM Huxley š?ŌSnĝŁMmƣHuxley = selenium i8ńĸĽƤŌ€MmƤL@Ā ( diff §Ɖƣ Huxley ģ¦)ëƤMu diff §Ɖƀ commit message IƤB¤jĈÊÂ&1źÀP“J okƣ

Slide 31

Slide 31 text

Regression Testing 20 Development Continuous Integration Local Repository Shared Repository Huxley ^ĈÊ: continuous integration įƤĊąĕ CI server xƣ ț CI server nƤ“JÙñƤ玓 +pƤ TŃ87ÓçŽ"~Ƥ+&— o`űÞ"87$‘ƦflowƧ+àƣ

Slide 32

Slide 32 text

21 Make edits Then check layout q1tĘƤ87ÓŹLÁĬðğù@Ƥ DìƜ¯4*ńĸĽŎãP“J?ƣ

Slide 33

Slide 33 text

22 padding: 2em 1em; } .title { font-family: Lato; color: #A9071E; width: } .login-button { ! ! } Visualize after Change #B87ÓNŒ“JƤ  RĄ |íq“Jƣ ! U» Ƥś87Ó7HŮƤ ĕĨĵ£ÛJ›õĬðƤTŃk")ŚĔĄ |íq¦Čƣ

Slide 34

Slide 34 text

22 padding: 2em 1em; } .title { font-family: Lato; color: #A9071E; width: } .login-button { ! ! } Recent Changes Login Password... E-mail... Login margin-left: 0; margin-top: 0; Visualize after Change #B87ÓNŒ“JƤ  RĄ |íq“Jƣ ! U» Ƥś87Ó7HŮƤ ĕĨĵ£ÛJ›õĬðƤTŃk")ŚĔĄ |íq¦Čƣ

Slide 35

Slide 35 text

23 padding: 2em 1em; } .title { font-family: Lato; color: #A9071E; width: } .login-button { ! ! } Recent Changes Login Password... E-mail... Login margin-left: 0; margin-top: 0; Visualizing Change Impact of Cascading Style Sheets SeeSS: Seeing What I Broke   SeeSS ę@¨ƣƫ SeeSS jv ĆCƩ ! ƫ cƤÆMōƖĄ |íq¦Č“Jƣ ƫ ’QƤÆÐŲË"À[ feedback G87 ¿ƣ ƫ TŃÆ)ijÃŦğ¥ ÏŔ€“Jƣ

Slide 36

Slide 36 text

23 padding: 2em 1em; } .title { font-family: Lato; color: #A9071E; width: } .login-button { ! ! } Recent Changes Login Password... E-mail... Login Visualizing Change Impact of Cascading Style Sheets SeeSS: Seeing What I Broke   SeeSS ę@¨ƣƫ SeeSS jv ĆCƩ ! ƫ cƤÆMōƖĄ |íq¦Č“Jƣ ƫ ’QƤÆÐŲË"À[ feedback G87 ¿ƣ ƫ TŃÆ)ijÃŦğ¥ ÏŔ€“Jƣ

Slide 37

Slide 37 text

23 padding: 2em 1em; } .title { font-family: Lato; color: #A9071E; width: } .login-button { ! ! } Recent Changes Login Password... E-mail... Login Visualizing Change Impact of Cascading Style Sheets SeeSS: Seeing What I Broke ≡ Tracks the entire website   SeeSS ę@¨ƣƫ SeeSS jv ĆCƩ ! ƫ cƤÆMōƖĄ |íq¦Č“Jƣ ƫ ’QƤÆÐŲË"À[ feedback G87 ¿ƣ ƫ TŃÆ)ijÃŦğ¥ ÏŔ€“Jƣ

Slide 38

Slide 38 text

23 padding: 2em 1em; } .title { font-family: Lato; color: #A9071E; width: } .login-button { ! ! } Recent Changes Login Password... E-mail... Login Visualizing Change Impact of Cascading Style Sheets SeeSS: Seeing What I Broke ≡ Tracks the entire website ≡ Provides visualization feedback   SeeSS ę@¨ƣƫ SeeSS jv ĆCƩ ! ƫ cƤÆMōƖĄ |íq¦Č“Jƣ ƫ ’QƤÆÐŲË"À[ feedback G87 ¿ƣ ƫ TŃÆ)ijÃŦğ¥ ÏŔ€“Jƣ

Slide 39

Slide 39 text

23 padding: 2em 1em; } .title { font-family: Lato; color: #A9071E; width: } .login-button { ! ! } Recent Changes Login Password... E-mail... Login Visualizing Change Impact of Cascading Style Sheets SeeSS: Seeing What I Broke ≡ Tracks the entire website ≡ Provides visualization feedback ≡ Ranks the changes   SeeSS ę@¨ƣƫ SeeSS jv ĆCƩ ! ƫ cƤÆMōƖĄ |íq¦Č“Jƣ ƫ ’QƤÆÐŲË"À[ feedback G87 ¿ƣ ƫ TŃÆ)ijÃŦğ¥ ÏŔ€“Jƣ

Slide 40

Slide 40 text

Research Outline 24 Ideate Build Analyze #µ ŪŠŽ=PğŔ ! ƫ#µ ÷Ėĕ prototypeƤ ƫL@š •=Ƣ.ƅ prototype ;=Ƥ ƫL@l ų6Áð›¶.7 ƫlƒ2‡ƣ

Slide 41

Slide 41 text

25 #N SeeSS prototype PÝĪ;687Ó=ƣ

Slide 42

Slide 42 text

26 Text Editor Æï ƫ Őƍ open-source døŻňĽƤ z ƫ ޸ƍƘ§™ÒÀ[“Jł:ƣ

Slide 43

Slide 43 text

26 Change Impact Visualization Æï ƫ Őƍ open-source døŻňĽƤ z ƫ ޸ƍƘ§™ÒÀ[“Jł:ƣ

Slide 44

Slide 44 text

27 HTML 87ÓƫdøŻňĽi8 HTML dŸ"Ƥ Ɖţƫ^ț site crawlerƤ = headless webkit browser N|íŸƄƣ

Slide 45

Slide 45 text

27 Site Crawler HTML 87ÓƫdøŻňĽi8 HTML dŸ"Ƥ Ɖţƫ^ț site crawlerƤ = headless webkit browser N|íŸƄƣ

Slide 46

Slide 46 text

28 Site Crawler ŸƄº2Š87|íIƤ؀şˆé±|ćƣ k"Ƥƫư € HTML 5 CSS ʼn=Ŗƣ ! ƫ€|ćP/^ render :¹¹9ÃƤĤĉĮƐIxƣ # prototype IƤ€9à Ą |ć screenshotƣ

Slide 47

Slide 47 text

28 Site Crawler ŸƄº2Š87|íIƤ؀şˆé±|ćƣ k"Ƥƫư € HTML 5 CSS ʼn=Ŗƣ ! ƫ€|ćP/^ render :¹¹9ÃƤĤĉĮƐIxƣ # prototype IƤ€9à Ą |ć screenshotƣ

Slide 48

Slide 48 text

28 Site Crawler CSS ŸƄº2Š87|íIƤ؀şˆé±|ćƣ k"Ƥƫư € HTML 5 CSS ʼn=Ŗƣ ! ƫ€|ćP/^ render :¹¹9ÃƤĤĉĮƐIxƣ # prototype IƤ€9à Ą |ć screenshotƣ

Slide 49

Slide 49 text

28 Site Crawler Render crawled pages Stores in Snapshot DB ŸƄº2Š87|íIƤ؀şˆé±|ćƣ k"Ƥƫư € HTML 5 CSS ʼn=Ŗƣ ! ƫ€|ćP/^ render :¹¹9ÃƤĤĉĮƐIxƣ # prototype IƤ€9à Ą |ć screenshotƣ

Slide 50

Slide 50 text

29 Site Crawler Render crawled pages Stores in Snapshot DB CSS S@Ƥ87Óð CSSƢ@ ĤƉ"Ƥ

Slide 51

Slide 51 text

30 Site Crawler Render crawled pages Stores in Snapshot DB Impact Tracker Impact tracker  @ijÃ÷n°ĝʼn=ŖƤ º2ˆ HTMLƣ @€ HTML ^ƒŁ:9ÃƢĤ›ĉĮƐƣ @Impact visualizer *‹İY ćj0VŜ9ÃƤƨÊå’fķůĭNĎƌúƣ ! łƌú'@9ÃIƤŗƚŬ¥“Ŭƣ @LTP“JĴŅģ 4\ŗƚÞ8Æ£h®ņƣ

Slide 52

Slide 52 text

30 Site Crawler Render crawled pages Stores in Snapshot DB Impact Tracker CSS HTML HTML HTML Impact tracker  @ijÃ÷n°ĝʼn=ŖƤ º2ˆ HTMLƣ @€ HTML ^ƒŁ:9ÃƢĤ›ĉĮƐƣ @Impact visualizer *‹İY ćj0VŜ9ÃƤƨÊå’fķůĭNĎƌúƣ ! łƌú'@9ÃIƤŗƚŬ¥“Ŭƣ @LTP“JĴŅģ 4\ŗƚÞ8Æ£h®ņƣ

Slide 53

Slide 53 text

30 Site Crawler Render crawled pages Stores in Snapshot DB Impact Tracker Render dependent HTML Impact tracker  @ijÃ÷n°ĝʼn=ŖƤ º2ˆ HTMLƣ @€ HTML ^ƒŁ:9ÃƢĤ›ĉĮƐƣ @Impact visualizer *‹İY ćj0VŜ9ÃƤƨÊå’fķůĭNĎƌúƣ ! łƌú'@9ÃIƤŗƚŬ¥“Ŭƣ @LTP“JĴŅģ 4\ŗƚÞ8Æ£h®ņƣ

Slide 54

Slide 54 text

30 Site Crawler Render crawled pages Stores in Snapshot DB Impact Tracker Render dependent HTML Impact Visualizer Impact tracker  @ijÃ÷n°ĝʼn=ŖƤ º2ˆ HTMLƣ @€ HTML ^ƒŁ:9ÃƢĤ›ĉĮƐƣ @Impact visualizer *‹İY ćj0VŜ9ÃƤƨÊå’fķůĭNĎƌúƣ ! łƌú'@9ÃIƤŗƚŬ¥“Ŭƣ @LTP“JĴŅģ 4\ŗƚÞ8Æ£h®ņƣ

Slide 55

Slide 55 text

30 Site Crawler Render crawled pages Stores in Snapshot DB Impact Tracker Render dependent HTML Impact Visualizer After Before Impact tracker  @ijÃ÷n°ĝʼn=ŖƤ º2ˆ HTMLƣ @€ HTML ^ƒŁ:9ÃƢĤ›ĉĮƐƣ @Impact visualizer *‹İY ćj0VŜ9ÃƤƨÊå’fķůĭNĎƌúƣ ! łƌú'@9ÃIƤŗƚŬ¥“Ŭƣ @LTP“JĴŅģ 4\ŗƚÞ8Æ£h®ņƣ

Slide 56

Slide 56 text

30 Site Crawler Render crawled pages Stores in Snapshot DB Impact Tracker Render dependent HTML Impact Visualizer After Before Impact tracker  @ijÃ÷n°ĝʼn=ŖƤ º2ˆ HTMLƣ @€ HTML ^ƒŁ:9ÃƢĤ›ĉĮƐƣ @Impact visualizer *‹İY ćj0VŜ9ÃƤƨÊå’fķůĭNĎƌúƣ ! łƌú'@9ÃIƤŗƚŬ¥“Ŭƣ @LTP“JĴŅģ 4\ŗƚÞ8Æ£h®ņƣ

Slide 57

Slide 57 text

Animated Thumbnails 31 # @ uĤƉn5ĤƉ@9ñ´:MƋ§ƣ prototype IƤ#=ġ˜ġ2MċƤ ƎHĤƉn5ĤƉ@“Òƣ

Slide 58

Slide 58 text

32 CSS Visualization 0@Ƥ€Ƌ§ÏŔ@ƤƎHdøŻňĽ޸ƣ Prototype I#= mean square error ÏŔ€Ƌ§ƣ

Slide 59

Slide 59 text

33 (Actual screenshot) SeeSS prototype =- ™Pƣ ! 87ÓN“JS@ƤSeeSS †ƙĞÀ[“J=ġ˜ġ2Ƌ§ƎHŻňĽ޸ƣ ! Í=Ó&1=ƂƇ úĐƠĤƉnơ5ƠĤƉ@ơƋ§ƣ !

Slide 60

Slide 60 text

Limitation of Prototype ≡ Static websites only 34 ïg ƊĂƤ#Ĺľæ CSS 87‘ğUÉðŊƤ N2  prototype ’t+ limitationƤ <=Yćk|žÿă|ćƤþƔH javascript based |ćƣ

Slide 61

Slide 61 text

User Study ☰ 4 web developers 35 ƫ#š  4 ®|ćğùĈÊ N lab studyƣ ƫ?#Y āV |íĺwƤY |í 5 CSS bugƣ ƫtĢ@Ƥ#=ŧĩ©Ž1ĔÔ±ƁùſŇƤ1äÒ\ùƤ³Ĺ36 SeeSS e‚ƣ

Slide 62

Slide 62 text

User Study ☰ 4 web developers ☰ 2 websites × 5 tasks 35 ƫ#š  4 ®|ćğùĈÊ N lab studyƣ ƫ?#Y āV |íĺwƤY |í 5 CSS bugƣ ƫtĢ@Ƥ#=ŧĩ©Ž1ĔÔ±ƁùſŇƤ1äÒ\ùƤ³Ĺ36 SeeSS e‚ƣ

Slide 63

Slide 63 text

User Study ☰ 4 web developers ☰ 2 websites × 5 tasks ☰ 5-point Likert scale + interview 35 ƫ#š  4 ®|ćğùĈÊ N lab studyƣ ƫ?#Y āV |íĺwƤY |í 5 CSS bugƣ ƫtĢ@Ƥ#=ŧĩ©Ž1ĔÔ±ƁùſŇƤ1äÒ\ùƤ³Ĺ36 SeeSS e‚ƣ

Slide 64

Slide 64 text

Results ✓ Helps fix CSS problems (all rated 4 out of 5)  Paused for change visualization 36 ¯řüƭŢ½›\Ï. –Ž˜wǻ A#yq SeeSS ţsíĽ CSS ¬Àǻ #ňǑǼSeeSS Ė¡¯řükǻ ǛZ$Ǽ¯řü SeeSS  change visualization YŔCQ{ǻ Ā› SeeSS ǦºøŐ7A# $Ő lČǼƚ SeeSS ņ;EN ǻ


Slide 65

Slide 65 text

Results ✓ Helps fix CSS problems (all rated 4 out of 5) ☰ Paused for change visualization ☰ Not using “Find in project” anymore 37 , SeeSS Ǭţ"Ǽ [ïřüĒÞǠǝǐƉŹǸfind in projectǹčǻ  project ïƩ‹đM ǡƤǼfind in project %2 ǡƤMLJƫś ĦǤǻ [ïřü? čǼ ƑĄCĖÒ/çƍļ ‹đþMǼНř‹đŧ¯řüCƾ‹đǻ ”ŽA#õ? SeeSS "ǼA#, zõ?Ǹfind in projectǹǻ SeeSS  visualization ǴƩŕŅńƽǼDA#ǣŰ$C¡NƔ7ǻ

Slide 66

Slide 66 text

Results ✓ Helps fix CSS problems (all rated 4 out of 5) ☰ Paused for change visualization ☰ Not using “Find in project” anymore ✓ Willing to use (all rated 4 out of 5) 38  ¯¦üĮqõ? SeeSS {:8¾Šǻ

Slide 67

Slide 67 text

Results ✖ Processing speed is not acceptable
 (avg. 2.75 out of 5) ✦ avg. 5.7 seconds to display thumbnails 39 OYǼSeeSS ĺ¸ŴűÔ qǻ ÓƯ 5.7 Ƌé“ĺ¸Ǽ6ƁŲŹ*s 1 Ƌ render 帖™(PĂǻ

Slide 68

Slide 68 text

Results ✖ Processing speed is not acceptable
 (avg. 2.75 out of 5) ✦ avg. 5.7 seconds to display thumbnails ǽ Diverged opinion towards animation 40 ïřüĄŜ§Ŝ3QŇûìĬǸ¡NǹǘıǼ”޹[ïřüŴĨÆ thumbnail >ǧL¡NBơĻ ǼÙQ E annoyingǻ  \ĉǼA#H»œŜ§Ŝ3QŇ/ǮǸ¡N|ǹ6Ǹ¡NBǹįþ þ ǻ

Slide 69

Slide 69 text

Results ✖ Processing speed is not acceptable
 (avg. 2.75 out of 5) ✦ avg. 5.7 seconds to display thumbnails ǽ Diverged opinion towards animation ✖ Most important thumbnail isn’t 1st in list 41  ¯řüùǼA#Ą1ž thumbnail ŗ›1wǻ L impact ranking b»7¯řü $Ǽ6 random , [Uǻ

Slide 70

Slide 70 text

Results ✖ Processing speed is not acceptable
 (avg. 2.75 out of 5) ✦ avg. 5.7 seconds to display thumbnails ǽ Diverged opinion towards animation ✖ Most important thumbnail isn’t 1st in list ✖ Thumbnails too verbose 42 "Ǽ łwÌƃŦĖBn]Ǻ„łw AÌƃġǜ"ǼSeeSS Dzř½ÃƷ¡NǼļ thumbnail ŗ›. +žǁǻ ޹Ǽ?;åº~ðĆǦºŠ, ǮĄÌ°^êǼ Ìƃ¡N%2Ķ'ǁö thumbnailǼD¡NŬ NjƧǻ

Slide 71

Slide 71 text

Summary 43 ³Å|w<_ǻ Ȅ#ƲƠĚŖǼZîů² unintended changes ±K CSS :8üƗǒǻ @#R ñ"¿W CSS :8üg‹đ¹ň¡Nµ­ǻRelated work õ?@Ż6#@ŻyǼSeeSS ĨÆn«:8üL ¥ŝǻ @#R prototype 6ȄǔƇǼ WUāŤ ţ:8Ǽ”ljO öEĖ«ǻ

Slide 72

Slide 72 text

Summary 43 Unintended Changes ³Å|w<_ǻ Ȅ#ƲƠĚŖǼZîů² unintended changes ±K CSS :8üƗǒǻ @#R ñ"¿W CSS :8üg‹đ¹ň¡Nµ­ǻRelated work õ?@Ż6#@ŻyǼSeeSS ĨÆn«:8üL ¥ŝǻ @#R prototype 6ȄǔƇǼ WUāŤ ţ:8Ǽ”ljO öEĖ«ǻ

Slide 73

Slide 73 text

Summary 43 Unintended Changes Related Work Visualization ³Å|w<_ǻ Ȅ#ƲƠĚŖǼZîů² unintended changes ±K CSS :8üƗǒǻ @#R ñ"¿W CSS :8üg‹đ¹ň¡Nµ­ǻRelated work õ?@Ż6#@ŻyǼSeeSS ĨÆn«:8üL ¥ŝǻ @#R prototype 6ȄǔƇǼ WUāŤ ţ:8Ǽ”ljO öEĖ«ǻ

Slide 74

Slide 74 text

Summary 43 Unintended Changes Related Work Visualization Prototype #1 ³Å|w<_ǻ Ȅ#ƲƠĚŖǼZîů² unintended changes ±K CSS :8üƗǒǻ @#R ñ"¿W CSS :8üg‹đ¹ň¡Nµ­ǻRelated work õ?@Ż6#@ŻyǼSeeSS ĨÆn«:8üL ¥ŝǻ @#R prototype 6ȄǔƇǼ WUāŤ ţ:8Ǽ”ljO öEĖ«ǻ

Slide 75

Slide 75 text

Summary 43 Unintended Changes Related Work Visualization Prototype #1 Visualization helps ³Å|w<_ǻ Ȅ#ƲƠĚŖǼZîů² unintended changes ±K CSS :8üƗǒǻ @#R ñ"¿W CSS :8üg‹đ¹ň¡Nµ­ǻRelated work õ?@Ż6#@ŻyǼSeeSS ĨÆn«:8üL ¥ŝǻ @#R prototype 6ȄǔƇǼ WUāŤ ţ:8Ǽ”ljO öEĖ«ǻ

Slide 76

Slide 76 text

Review of
 Empirical Design Choices From the experience of 5 web developers — 44 #ƲƠ*ſĕ 5 web developer ſ<Ǽ ïƩÇǼ 3 ÓÞ ÐƤR‹đǻ ! #„‡:8hŝǙ§ SeeSS prototypeǼ{3w empirical design choiceǻ ! @ ĘĥǼ#„‹đ¡NǼī< visual thumbnail „¡NǧLK:8üǻ @ #Øš•¡NDŽŗǐƉŹǼY A5bǻ @ #?Ŝ§Ŝ3QŇ Ôİ¡N|BƵűǻ ! ƣO#Íħ SeeSS 1ƜÜ:8üǼ9!# ď)ǖǀǼ#ŽżØšØūX¹Ǽ( #œĐŏLjbÑǼƀ9 bÑNƜÜõ ?üõ?ğƐǻ

Slide 77

Slide 77 text

Review of
 Empirical Design Choices From the experience of 5 web developers — ≡ Visual thumbnails to represent change 44 #ƲƠ*ſĕ 5 web developer ſ<Ǽ ïƩÇǼ 3 ÓÞ ÐƤR‹đǻ ! #„‡:8hŝǙ§ SeeSS prototypeǼ{3w empirical design choiceǻ ! @ ĘĥǼ#„‹đ¡NǼī< visual thumbnail „¡NǧLK:8üǻ @ #Øš•¡NDŽŗǐƉŹǼY A5bǻ @ #?Ŝ§Ŝ3QŇ Ôİ¡N|BƵűǻ ! ƣO#Íħ SeeSS 1ƜÜ:8üǼ9!# ď)ǖǀǼ#ŽżØšØūX¹Ǽ( #œĐŏLjbÑǼƀ9 bÑNƜÜõ ?üõ?ğƐǻ

Slide 78

Slide 78 text

Review of
 Empirical Design Choices From the experience of 5 web developers — ≡ Visual thumbnails to represent change ≡ Change impact inside code editors 44 #ƲƠ*ſĕ 5 web developer ſ<Ǽ ïƩÇǼ 3 ÓÞ ÐƤR‹đǻ ! #„‡:8hŝǙ§ SeeSS prototypeǼ{3w empirical design choiceǻ ! @ ĘĥǼ#„‹đ¡NǼī< visual thumbnail „¡NǧLK:8üǻ @ #Øš•¡NDŽŗǐƉŹǼY A5bǻ @ #?Ŝ§Ŝ3QŇ Ôİ¡N|BƵűǻ ! ƣO#Íħ SeeSS 1ƜÜ:8üǼ9!# ď)ǖǀǼ#ŽżØšØūX¹Ǽ( #œĐŏLjbÑǼƀ9 bÑNƜÜõ ?üõ?ğƐǻ

Slide 79

Slide 79 text

Review of
 Empirical Design Choices From the experience of 5 web developers — ≡ Visual thumbnails to represent change ≡ Change impact inside code editors ≡ Animations highlighting visual differences 44 #ƲƠ*ſĕ 5 web developer ſ<Ǽ ïƩÇǼ 3 ÓÞ ÐƤR‹đǻ ! #„‡:8hŝǙ§ SeeSS prototypeǼ{3w empirical design choiceǻ ! @ ĘĥǼ#„‹đ¡NǼī< visual thumbnail „¡NǧLK:8üǻ @ #Øš•¡NDŽŗǐƉŹǼY A5bǻ @ #?Ŝ§Ŝ3QŇ Ôİ¡N|BƵűǻ ! ƣO#Íħ SeeSS 1ƜÜ:8üǼ9!# ď)ǖǀǼ#ŽżØšØūX¹Ǽ( #œĐŏLjbÑǼƀ9 bÑNƜÜõ ?üõ?ğƐǻ

Slide 80

Slide 80 text

45 2 Brainstorming ŠÛǼ ƲƠo’Ò/Ǽ ! #\ ideate ǥĹǼƌŁ brainstorming sessionǻ

Slide 81

Slide 81 text

νОΫజ $44ᜊһ 46 brainstorming iÀǸZî\ĉ CSS ¡Nǹ

Slide 82

Slide 82 text

Brainstorming Session ≡ 8 developers (4 female) 47 @ #ǚ© 8 ‹łŃðä ĝŒ brainstorming session @ ļ SQ/< 3 ǥĹǼ#©A#„8 idea ĤėÈƸOBƜǕǻ @ #Ęĥ©A#/jG|őŀǼĤ CSS "ō& bugǼOBDžǞ brainstorming ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI˜:8‹đǼþM. …Ǽ‡:8üǼĨÆāŤZî¿WU…ƵǼcD; ĺ«§ơƮǺùƼŕŅńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>Ƃ‡Ǽo 3 ǥĹ8NƪdzǻʼnZ$ttĠ āŤǼ ‚H»/Ǯ ¡N7(…Ǽ9!‡:8üǼĨÆA ZîijWǸ¡NǹǼD;ĺ/Ǯ$CR¡Nį7…ǻ @ F ǥĹ&BǼ#©A#Ø31xƒ ideaǺÿ1ĸ čǻ 5 ĩǻ @ ļ£SQÅƦXBǼ•  48 ideaǼ/« 11 ǘıǻ idea %ïƩ+ǘıǻ

Slide 83

Slide 83 text

Brainstorming Session ≡ 8 developers (4 female) ≡ 3 Phases, ideas on sticky notes 47 @ #ǚ© 8 ‹łŃðä ĝŒ brainstorming session @ ļ SQ/< 3 ǥĹǼ#©A#„8 idea ĤėÈƸOBƜǕǻ @ #Ęĥ©A#/jG|őŀǼĤ CSS "ō& bugǼOBDžǞ brainstorming ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI˜:8‹đǼþM. …Ǽ‡:8üǼĨÆāŤZî¿WU…ƵǼcD; ĺ«§ơƮǺùƼŕŅńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>Ƃ‡Ǽo 3 ǥĹ8NƪdzǻʼnZ$ttĠ āŤǼ ‚H»/Ǯ ¡N7(…Ǽ9!‡:8üǼĨÆA ZîijWǸ¡NǹǼD;ĺ/Ǯ$CR¡Nį7…ǻ @ F ǥĹ&BǼ#©A#Ø31xƒ ideaǺÿ1ĸ čǻ 5 ĩǻ @ ļ£SQÅƦXBǼ•  48 ideaǼ/« 11 ǘıǻ idea %ïƩ+ǘıǻ

Slide 84

Slide 84 text

Brainstorming Session ≡ 8 developers (4 female) ≡ 3 Phases, ideas on sticky notes 1. Share experiences 47 @ #ǚ© 8 ‹łŃðä ĝŒ brainstorming session @ ļ SQ/< 3 ǥĹǼ#©A#„8 idea ĤėÈƸOBƜǕǻ @ #Ęĥ©A#/jG|őŀǼĤ CSS "ō& bugǼOBDžǞ brainstorming ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI˜:8‹đǼþM. …Ǽ‡:8üǼĨÆāŤZî¿WU…ƵǼcD; ĺ«§ơƮǺùƼŕŅńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>Ƃ‡Ǽo 3 ǥĹ8NƪdzǻʼnZ$ttĠ āŤǼ ‚H»/Ǯ ¡N7(…Ǽ9!‡:8üǼĨÆA ZîijWǸ¡NǹǼD;ĺ/Ǯ$CR¡Nį7…ǻ @ F ǥĹ&BǼ#©A#Ø31xƒ ideaǺÿ1ĸ čǻ 5 ĩǻ @ ļ£SQÅƦXBǼ•  48 ideaǼ/« 11 ǘıǻ idea %ïƩ+ǘıǻ

Slide 85

Slide 85 text

Brainstorming Session ≡ 8 developers (4 female) ≡ 3 Phases, ideas on sticky notes 1. Share experiences 2. “How can a system report errors?” 47 @ #ǚ© 8 ‹łŃðä ĝŒ brainstorming session @ ļ SQ/< 3 ǥĹǼ#©A#„8 idea ĤėÈƸOBƜǕǻ @ #Ęĥ©A#/jG|őŀǼĤ CSS "ō& bugǼOBDžǞ brainstorming ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI˜:8‹đǼþM. …Ǽ‡:8üǼĨÆāŤZî¿WU…ƵǼcD; ĺ«§ơƮǺùƼŕŅńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>Ƃ‡Ǽo 3 ǥĹ8NƪdzǻʼnZ$ttĠ āŤǼ ‚H»/Ǯ ¡N7(…Ǽ9!‡:8üǼĨÆA ZîijWǸ¡NǹǼD;ĺ/Ǯ$CR¡Nį7…ǻ @ F ǥĹ&BǼ#©A#Ø31xƒ ideaǺÿ1ĸ čǻ 5 ĩǻ @ ļ£SQÅƦXBǼ•  48 ideaǼ/« 11 ǘıǻ idea %ïƩ+ǘıǻ

Slide 86

Slide 86 text

Brainstorming Session ≡ 8 developers (4 female) ≡ 3 Phases, ideas on sticky notes 1. Share experiences 2. “How can a system report errors?” 3. “How can a system report changes?” 47 @ #ǚ© 8 ‹łŃðä ĝŒ brainstorming session @ ļ SQ/< 3 ǥĹǼ#©A#„8 idea ĤėÈƸOBƜǕǻ @ #Ęĥ©A#/jG|őŀǼĤ CSS "ō& bugǼOBDžǞ brainstorming ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI˜:8‹đǼþM. …Ǽ‡:8üǼĨÆāŤZî¿WU…ƵǼcD; ĺ«§ơƮǺùƼŕŅńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>Ƃ‡Ǽo 3 ǥĹ8NƪdzǻʼnZ$ttĠ āŤǼ ‚H»/Ǯ ¡N7(…Ǽ9!‡:8üǼĨÆA ZîijWǸ¡NǹǼD;ĺ/Ǯ$CR¡Nį7…ǻ @ F ǥĹ&BǼ#©A#Ø31xƒ ideaǺÿ1ĸ čǻ 5 ĩǻ @ ļ£SQÅƦXBǼ•  48 ideaǼ/« 11 ǘıǻ idea %ïƩ+ǘıǻ

Slide 87

Slide 87 text

Brainstorming Session ≡ 8 developers (4 female) ≡ 3 Phases, ideas on sticky notes 1. Share experiences 2. “How can a system report errors?” 3. “How can a system report changes?” ≡ Vote (5 votes/person) 47 @ #ǚ© 8 ‹łŃðä ĝŒ brainstorming session @ ļ SQ/< 3 ǥĹǼ#©A#„8 idea ĤėÈƸOBƜǕǻ @ #Ęĥ©A#/jG|őŀǼĤ CSS "ō& bugǼOBDžǞ brainstorming ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI˜:8‹đǼþM. …Ǽ‡:8üǼĨÆāŤZî¿WU…ƵǼcD; ĺ«§ơƮǺùƼŕŅńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>Ƃ‡Ǽo 3 ǥĹ8NƪdzǻʼnZ$ttĠ āŤǼ ‚H»/Ǯ ¡N7(…Ǽ9!‡:8üǼĨÆA ZîijWǸ¡NǹǼD;ĺ/Ǯ$CR¡Nį7…ǻ @ F ǥĹ&BǼ#©A#Ø31xƒ ideaǺÿ1ĸ čǻ 5 ĩǻ @ ļ£SQÅƦXBǼ•  48 ideaǼ/« 11 ǘıǻ idea %ïƩ+ǘıǻ

Slide 88

Slide 88 text

Brainstorming Session ≡ 8 developers (4 female) ≡ 3 Phases, ideas on sticky notes 1. Share experiences 2. “How can a system report errors?” 3. “How can a system report changes?” ≡ Vote (5 votes/person) ≡ Group ideas into (overlapping) concepts 47 @ #ǚ© 8 ‹łŃðä ĝŒ brainstorming session @ ļ SQ/< 3 ǥĹǼ#©A#„8 idea ĤėÈƸOBƜǕǻ @ #Ęĥ©A#/jG|őŀǼĤ CSS "ō& bugǼOBDžǞ brainstorming ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI˜:8‹đǼþM. …Ǽ‡:8üǼĨÆāŤZî¿WU…ƵǼcD; ĺ«§ơƮǺùƼŕŅńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>Ƃ‡Ǽo 3 ǥĹ8NƪdzǻʼnZ$ttĠ āŤǼ ‚H»/Ǯ ¡N7(…Ǽ9!‡:8üǼĨÆA ZîijWǸ¡NǹǼD;ĺ/Ǯ$CR¡Nį7…ǻ @ F ǥĹ&BǼ#©A#Ø31xƒ ideaǺÿ1ĸ čǻ 5 ĩǻ @ ļ£SQÅƦXBǼ•  48 ideaǼ/« 11 ǘıǻ idea %ïƩ+ǘıǻ

Slide 89

Slide 89 text

48  Brainstorming ‚Ʈǻ DĝŒü%2ċóǸ:8 CSSǹU@Żį8Ǽ ¤žƜ ǐƉʌƁŲŹǢºǼ""ùťA#Ǹ˜Ĥ‹łǹǻĝŒü%2Ǣº™ƙǼ›ĬCĠµ­ǻ
 !

Slide 90

Slide 90 text

Concepts & Ideas (I) 49 Central Change List Ð ũĭ brainstorming Mfù3 idea 6žǘıbÑǻ ! ĄǼ„ ¡Nų›ŗ™Ũ Ǽù3ǘı¨ Facebook QĻĜÁǼpĦǨƒ¡NǺ‰ºǻ  ĄÏá?pĦ ›Ĭ¡NǼǛZ$ǸŖÀġƷQ 10 pxǹǼpĦdXBǼǧL IDE b console wžǻ ! ޹ ù3 idea Ą¡NÏáfˆ¡N3L5bǼǛZ$ƁŲŹM†ÙÐǭ. ¡NÌƃǼÿüŎ<¡NŚĪćįŇįěǼENǻ

Slide 91

Slide 91 text

Concepts & Ideas (I) 49 Changes in Context Central Change List Ð ũĭ brainstorming Mfù3 idea 6žǘıbÑǻ ! ĄǼ„ ¡Nų›ŗ™Ũ Ǽù3ǘı¨ Facebook QĻĜÁǼpĦǨƒ¡NǺ‰ºǻ  ĄÏá?pĦ ›Ĭ¡NǼǛZ$ǸŖÀġƷQ 10 pxǹǼpĦdXBǼǧL IDE b console wžǻ ! ޹ ù3 idea Ą¡NÏáfˆ¡N3L5bǼǛZ$ƁŲŹM†ÙÐǭ. ¡NÌƃǼÿüŎ<¡NŚĪćįŇįěǼENǻ

Slide 92

Slide 92 text

Concepts & Ideas (II) 50 In-Editor In-Browser ĝŒü/jhŝ"Ǽ ĝŒü$A#=Þ¾{ŸŚŰ5 code editor Œ browser XrīŌǻ
  idea ± Ǹ„¡NŬĭƁŲŹǹǘıǼY  idea ǧLǐƉŹM†ǺƜÜŚĪćǻ

Slide 93

Slide 93 text

Concepts & Ideas (III) Code / Rendered Property Ranking 51 ĝŒü8"Ǽù3ŶƄ impact ranking ǘıǻ ǛZ$ǼȄ?æuƬê commit Ǽcommit "rllŚĪć—ą ÷Ɠ¡NǼŠƚ¡Nçƍ A ÿ+Ă2|ŚĪćǼ9:8ü1 NJĴC¡Nǻ ޹Ǽ@ ? ù3»Ǽ?ǸÌƃƔ6 AÌƃ7ǃǹlƁŲŹ render Å_—ą ÷Ɠ¡Nǻ
 !

Slide 94

Slide 94 text

Concepts & Ideas (III) Code / Rendered Property Ranking 51 ĝŒü8"Ǽù3ŶƄ impact ranking ǘıǻ ǛZ$ǼȄ?æuƬê commit Ǽcommit "rllŚĪć—ą ÷Ɠ¡NǼŠƚ¡Nçƍ A ÿ+Ă2|ŚĪćǼ9:8ü1 NJĴC¡Nǻ ޹Ǽ@ ? ù3»Ǽ?ǸÌƃƔ6 AÌƃ7ǃǹlƁŲŹ render Å_—ą ÷Ɠ¡Nǻ
 !

Slide 95

Slide 95 text

Concepts & Ideas (III) Code / Rendered Property Ranking 51 ĝŒü8"Ǽù3ŶƄ impact ranking ǘıǻ ǛZ$ǼȄ?æuƬê commit Ǽcommit "rllŚĪć—ą ÷Ɠ¡NǼŠƚ¡Nçƍ A ÿ+Ă2|ŚĪćǼ9:8ü1 NJĴC¡Nǻ ޹Ǽ@ ? ù3»Ǽ?ǸÌƃƔ6 AÌƃ7ǃǹlƁŲŹ render Å_—ą ÷Ɠ¡Nǻ
 !

Slide 96

Slide 96 text

Most Popular Idea 52  48 idea Ƿwo]ĩ ǻ ! ?ŶƄ safari  Top sites ·wǼƁŲŹMwǼV„ ¡N.ǻ M†`ę?QŇ īŌĖ¡|6Ė¡Bǻ

Slide 97

Slide 97 text

53 Central Change List 9 votes (3 ideas) In-Browser 8 votes (7 ideas) In-Editor 4 votes (9 ideas) Changes in Context 4 votes (7 ideas) Animated Visualization 4 votes (3 ideas) Votes per Concept # Ċĩųþǘıwǻ ! ȄźO™Ũ ù3D¡N/ƞÖé ideaǼ”Ǹų›ŗǹ™Ũ¯ƒŮǻ Ȅbug ǧLƁŲŹ €Ũ]ǻ#Ð ŃðǼÏáľĥŏLj bÑǻ @ before / after QŇ … €Ǽ”+² ǻö ù idea > ǧLǸafterǹǼ  ǻ

Slide 98

Slide 98 text

53 Central Change List 9 votes (3 ideas) In-Browser 8 votes (7 ideas) In-Editor 4 votes (9 ideas) Changes in Context 4 votes (7 ideas) Animated Visualization 4 votes (3 ideas) Votes per Concept # Ċĩųþǘıwǻ ! ȄźO™Ũ ù3D¡N/ƞÖé ideaǼ”Ǹų›ŗǹ™Ũ¯ƒŮǻ Ȅbug ǧLƁŲŹ €Ũ]ǻ#Ð ŃðǼÏáľĥŏLj bÑǻ @ before / after QŇ … €Ǽ”+² ǻö ù idea > ǧLǸafterǹǼ  ǻ

Slide 99

Slide 99 text

53 Central Change List 9 votes (3 ideas) In-Browser 8 votes (7 ideas) In-Editor 4 votes (9 ideas) Changes in Context 4 votes (7 ideas) Animated Visualization 4 votes (3 ideas) Votes per Concept # Ċĩųþǘıwǻ ! ȄźO™Ũ ù3D¡N/ƞÖé ideaǼ”Ǹų›ŗǹ™Ũ¯ƒŮǻ Ȅbug ǧLƁŲŹ €Ũ]ǻ#Ð ŃðǼÏáľĥŏLj bÑǻ @ before / after QŇ … €Ǽ”+² ǻö ù idea > ǧLǸafterǹǼ  ǻ

Slide 100

Slide 100 text

53 Central Change List 9 votes (3 ideas) In-Browser 8 votes (7 ideas) In-Editor 4 votes (9 ideas) Changes in Context 4 votes (7 ideas) Animated Visualization 4 votes (3 ideas) Votes per Concept # Ċĩųþǘıwǻ ! ȄźO™Ũ ù3D¡N/ƞÖé ideaǼ”Ǹų›ŗǹ™Ũ¯ƒŮǻ Ȅbug ǧLƁŲŹ €Ũ]ǻ#Ð ŃðǼÏáľĥŏLj bÑǻ @ before / after QŇ … €Ǽ”+² ǻö ù idea > ǧLǸafterǹǼ  ǻ

Slide 101

Slide 101 text

Animated Visualization 1 1 1 1 Central Change List 1 1 1 Changes in Context 5 2 1 1 In-Browser 1 1 In-Editor 1 2 2 3 Boolean Indicator 1 Rendered Property Ranking Narrative Changes Code Property Ranking Code Property Clustering Rendered Property Clustering Concept A Concept B # of ideas belongs to both A and B Concept Concurrence 54 # ĝŒü` ideaǼ¿Þ„þǘıǙÊ.ǻ כĭ[[ concept 3Ly× idea ö½ǻ ! #ĥ @ǸIn-browserǹǘıǼ¿Þ6J!Uǘı.3Lǻ 5 idea ƁŲŹwǼ„¡NǧL¡N8'5bǻ > 1 idea ƁŲŹwų›ŗ ¡NȂȄ& idea X|ù9 1]ĩ ideaǻ

Slide 102

Slide 102 text

Animated Visualization 1 1 1 1 Central Change List 1 1 1 Changes in Context 5 2 1 1 In-Browser 1 1 In-Editor 1 2 2 3 Boolean Indicator 1 Rendered Property Ranking Narrative Changes Code Property Ranking Code Property Clustering Rendered Property Clustering Concept A Concept B # of ideas belongs to both A and B Concept Concurrence 54 # ĝŒü` ideaǼ¿Þ„þǘıǙÊ.ǻ כĭ[[ concept 3Ly× idea ö½ǻ ! #ĥ @ǸIn-browserǹǘıǼ¿Þ6J!Uǘı.3Lǻ 5 idea ƁŲŹwǼ„¡NǧL¡N8'5bǻ > 1 idea ƁŲŹwų›ŗ ¡NȂȄ& idea X|ù9 1]ĩ ideaǻ

Slide 103

Slide 103 text

Animated Visualization 1 1 1 1 Central Change List 1 1 1 Changes in Context 5 2 1 1 In-Browser 1 1 In-Editor 1 2 2 3 Boolean Indicator 1 Rendered Property Ranking Narrative Changes Code Property Ranking Code Property Clustering Rendered Property Clustering Concept A Concept B # of ideas belongs to both A and B Concept Concurrence 54 # ĝŒü` ideaǼ¿Þ„þǘıǙÊ.ǻ כĭ[[ concept 3Ly× idea ö½ǻ ! #ĥ @ǸIn-browserǹǘıǼ¿Þ6J!Uǘı.3Lǻ 5 idea ƁŲŹwǼ„¡NǧL¡N8'5bǻ > 1 idea ƁŲŹwų›ŗ ¡NȂȄ& idea X|ù9 1]ĩ ideaǻ

Slide 104

Slide 104 text

Animated Visualization 1 1 1 1 Central Change List 1 1 1 Changes in Context 5 2 1 1 In-Browser 1 1 In-Editor 1 2 2 3 Boolean Indicator 1 Rendered Property Ranking Narrative Changes Code Property Ranking Code Property Clustering Rendered Property Clustering Concept A Concept B # of ideas belongs to both A and B Concept Concurrence 55 #ŸėǼƚ SeeSS ljOˆ code editor MwdǼ:8ü‰§J!Uǘıǻ ! ŽāŤ6ǐƉŹļÊ."ǼĝŒüč6ŚĪću‡ Ǽŧƀ„¡NÙÐǧL–ŚĪćdžÕǻ ! SeeSS prototype bÑǼ ĝŒü“āŤǼ -Ĺűƶǻ

Slide 105

Slide 105 text

New Goals ≡ In-browser central change list 56 Ȅĕ brainstorming Å_Ǽ#ĽžƨǗ SeeSSǼDè¡< ƁŲŹÇǺų›ŗ ¡N Google Chrome Extensionǻ @ X| user study ĝŒüûq SeeSS é“ĺ¸ǻ ǥĹǼ#ĨÆ„ SeeSS vŎ< ùƼ Instant feedback ¾Šǻ

Slide 106

Slide 106 text

New Goals ≡ In-browser central change list ≡ Providing Instant feedback 56 Ȅĕ brainstorming Å_Ǽ#ĽžƨǗ SeeSSǼDè¡< ƁŲŹÇǺų›ŗ ¡N Google Chrome Extensionǻ @ X| user study ĝŒüûq SeeSS é“ĺ¸ǻ ǥĹǼ#ĨÆ„ SeeSS vŎ< ùƼ Instant feedback ¾Šǻ

Slide 107

Slide 107 text

57 gÒǫŊžƱXBǼL SeeSSǼD:8ü%2õ?Cnj ǐƉŹǻ ǷǼõ?üØš„Ɩǵ padding ¡ǰǼŧƀ„Ħ¥Ƴ®œýƕm¤ǼĖ<Ǝ¤ǻ Ð-Ǽõ?üīŌƁŲŹǼ àaú¡NǻSeeSS „ÃƆ}ƴ¡úǼ6 A¨Ħ¥Ƴ®¡úǼ?QŇŬĭǻ

Slide 108

Slide 108 text

58  SeeSS ǧL¡Nłwǻ ! E thumbnail %2ˆ ¡NǼĎ®ǭǭǧLÃƆŒ}ƴ¡úǼYĦ¥Ƴ® thumbnail M†ǂ¡ǻ ! ǿĎ®ȁĐ Dõ?ü%2сƳ®ǼĎ®Ƒ‚ E implyǸ…ƵǹȀ

Slide 109

Slide 109 text

59 :ÝǼõ?üĥƖƖǵǼ@ © SeeSS ŘŽõ?ŸŚǻ èÄŘEƖ menuǼÿ modal dialog llQ{ǻ ! Lõ?üĖQ HTMLǼ„ dialog MpĦĖ< 3 ǪĪǼşǡǼ  SeeSS report łw¡NǼE: %2N¼ƹßǪŃð¡< 3 Ǫǻ


Slide 110

Slide 110 text

60 SeeSS %2? html5 RĊç~Ǽ @ÿü Angular JS R todo list  applicationǼ @ǓĔËē 2048 @SeeSS Ě|, ã‹đë framework įò{Ǽ#Ɗ%5ǩ SeeSS ŋ?ƿŭǻ

Slide 111

Slide 111 text

60 SeeSS %2? html5 RĊç~Ǽ @ÿü Angular JS R todo list  applicationǼ @ǓĔËē 2048 @SeeSS Ě|, ã‹đë framework įò{Ǽ#Ɗ%5ǩ SeeSS ŋ?ƿŭǻ

Slide 112

Slide 112 text

60 SeeSS %2? html5 RĊç~Ǽ @ÿü Angular JS R todo list  applicationǼ @ǓĔËē 2048 @SeeSS Ě|, ã‹đë framework įò{Ǽ#Ɗ%5ǩ SeeSS ŋ?ƿŭǻ

Slide 113

Slide 113 text

60 SeeSS %2? html5 RĊç~Ǽ @ÿü Angular JS R todo list  applicationǼ @ǓĔËē 2048 @SeeSS Ě|, ã‹đë framework įò{Ǽ#Ɗ%5ǩ SeeSS ŋ?ƿŭǻ

Slide 114

Slide 114 text

61 Impact Visualizer SeeSS Report File Tracker Renderer Graph Code Editor Site Recorder Website in Browser Thumbnail Data Latest 2 snapshots of each page Developer changes files Triggers update Developer browses site Adds a new page  SeeSS U‚Rǻ ! 1. ȄSite Recorder Dzř:8ü7C‹đư{Ǽ„ư{Œư{Å_łwǼş Renderer Graphǻ 2. ȄRenderer Graph ĕ Renderer ſ<Ǽ? iframe „Žłwļ DOM Ǎş. ǻ 3. ȄLiveReload :8üÞ?¾ŠǼDzřǡƤāŤ¡NǼŧƀ„ƁŲŹžļ“ǻ
 ȄSeeSS  File Tracker  LiveReload clientǼ`Ž LiveReload DzřǡƤ¡NǼijŷ File TrackerǼFile Tracker )N ȄRenderer Graphǻ 4. Renderer graph ƟƢN rendererǼȄImpact visualizer ™7|B[ æułwǼĶ' visual differenceǻ ! ļ SeeSS é“Ǽ‚{ Google Chrome Extension Ƿ†ǻ

Slide 115

Slide 115 text

61 Impact Visualizer SeeSS Report File Tracker Renderer Graph Code Editor Site Recorder Website in Browser Thumbnail Data Latest 2 snapshots of each page Developer changes files Triggers update Developer browses site Adds a new page  SeeSS U‚Rǻ ! 1. ȄSite Recorder Dzř:8ü7C‹đư{Ǽ„ư{Œư{Å_łwǼş Renderer Graphǻ 2. ȄRenderer Graph ĕ Renderer ſ<Ǽ? iframe „Žłwļ DOM Ǎş. ǻ 3. ȄLiveReload :8üÞ?¾ŠǼDzřǡƤāŤ¡NǼŧƀ„ƁŲŹžļ“ǻ
 ȄSeeSS  File Tracker  LiveReload clientǼ`Ž LiveReload DzřǡƤ¡NǼijŷ File TrackerǼFile Tracker )N ȄRenderer Graphǻ 4. Renderer graph ƟƢN rendererǼȄImpact visualizer ™7|B[ æułwǼĶ' visual differenceǻ ! ļ SeeSS é“Ǽ‚{ Google Chrome Extension Ƿ†ǻ

Slide 116

Slide 116 text

61 Impact Visualizer SeeSS Report File Tracker Renderer Graph Code Editor Site Recorder Website in Browser Thumbnail Data Latest 2 snapshots of each page Developer changes files Triggers update Developer browses site Adds a new page  SeeSS U‚Rǻ ! 1. ȄSite Recorder Dzř:8ü7C‹đư{Ǽ„ư{Œư{Å_łwǼş Renderer Graphǻ 2. ȄRenderer Graph ĕ Renderer ſ<Ǽ? iframe „Žłwļ DOM Ǎş. ǻ 3. ȄLiveReload :8üÞ?¾ŠǼDzřǡƤāŤ¡NǼŧƀ„ƁŲŹžļ“ǻ
 ȄSeeSS  File Tracker  LiveReload clientǼ`Ž LiveReload DzřǡƤ¡NǼijŷ File TrackerǼFile Tracker )N ȄRenderer Graphǻ 4. Renderer graph ƟƢN rendererǼȄImpact visualizer ™7|B[ æułwǼĶ' visual differenceǻ ! ļ SeeSS é“Ǽ‚{ Google Chrome Extension Ƿ†ǻ

Slide 117

Slide 117 text

61 Impact Visualizer SeeSS Report File Tracker Renderer Graph Code Editor Site Recorder Website in Browser Thumbnail Data Latest 2 snapshots of each page Developer changes files Triggers update Developer browses site Adds a new page  SeeSS U‚Rǻ ! 1. ȄSite Recorder Dzř:8ü7C‹đư{Ǽ„ư{Œư{Å_łwǼş Renderer Graphǻ 2. ȄRenderer Graph ĕ Renderer ſ<Ǽ? iframe „Žłwļ DOM Ǎş. ǻ 3. ȄLiveReload :8üÞ?¾ŠǼDzřǡƤāŤ¡NǼŧƀ„ƁŲŹžļ“ǻ
 ȄSeeSS  File Tracker  LiveReload clientǼ`Ž LiveReload DzřǡƤ¡NǼijŷ File TrackerǼFile Tracker )N ȄRenderer Graphǻ 4. Renderer graph ƟƢN rendererǼȄImpact visualizer ™7|B[ æułwǼĶ' visual differenceǻ ! ļ SeeSS é“Ǽ‚{ Google Chrome Extension Ƿ†ǻ

Slide 118

Slide 118 text

61 Impact Visualizer SeeSS Report File Tracker Renderer Graph Code Editor Site Recorder Website in Browser Thumbnail Data Latest 2 snapshots of each page Developer changes files Triggers update Developer browses site Adds a new page  SeeSS U‚Rǻ ! 1. ȄSite Recorder Dzř:8ü7C‹đư{Ǽ„ư{Œư{Å_łwǼş Renderer Graphǻ 2. ȄRenderer Graph ĕ Renderer ſ<Ǽ? iframe „Žłwļ DOM Ǎş. ǻ 3. ȄLiveReload :8üÞ?¾ŠǼDzřǡƤāŤ¡NǼŧƀ„ƁŲŹžļ“ǻ
 ȄSeeSS  File Tracker  LiveReload clientǼ`Ž LiveReload DzřǡƤ¡NǼijŷ File TrackerǼFile Tracker )N ȄRenderer Graphǻ 4. Renderer graph ƟƢN rendererǼȄImpact visualizer ™7|B[ æułwǼĶ' visual differenceǻ ! ļ SeeSS é“Ǽ‚{ Google Chrome Extension Ƿ†ǻ

Slide 119

Slide 119 text

61 Impact Visualizer SeeSS Report File Tracker Renderer Graph Code Editor Site Recorder Website in Browser Thumbnail Data Latest 2 snapshots of each page Developer changes files Triggers update Developer browses site Adds a new page  SeeSS U‚Rǻ ! 1. ȄSite Recorder Dzř:8ü7C‹đư{Ǽ„ư{Œư{Å_łwǼş Renderer Graphǻ 2. ȄRenderer Graph ĕ Renderer ſ<Ǽ? iframe „Žłwļ DOM Ǎş. ǻ 3. ȄLiveReload :8üÞ?¾ŠǼDzřǡƤāŤ¡NǼŧƀ„ƁŲŹžļ“ǻ
 ȄSeeSS  File Tracker  LiveReload clientǼ`Ž LiveReload DzřǡƤ¡NǼijŷ File TrackerǼFile Tracker )N ȄRenderer Graphǻ 4. Renderer graph ƟƢN rendererǼȄImpact visualizer ™7|B[ æułwǼĶ' visual differenceǻ ! ļ SeeSS é“Ǽ‚{ Google Chrome Extension Ƿ†ǻ

Slide 120

Slide 120 text

61 Impact Visualizer SeeSS Report File Tracker Renderer Graph Code Editor Site Recorder Website in Browser Thumbnail Data Latest 2 snapshots of each page Developer changes files Triggers update Developer browses site Adds a new page  SeeSS U‚Rǻ ! 1. ȄSite Recorder Dzř:8ü7C‹đư{Ǽ„ư{Œư{Å_łwǼş Renderer Graphǻ 2. ȄRenderer Graph ĕ Renderer ſ<Ǽ? iframe „Žłwļ DOM Ǎş. ǻ 3. ȄLiveReload :8üÞ?¾ŠǼDzřǡƤāŤ¡NǼŧƀ„ƁŲŹžļ“ǻ
 ȄSeeSS  File Tracker  LiveReload clientǼ`Ž LiveReload DzřǡƤ¡NǼijŷ File TrackerǼFile Tracker )N ȄRenderer Graphǻ 4. Renderer graph ƟƢN rendererǼȄImpact visualizer ™7|B[ æułwǼĶ' visual differenceǻ ! ļ SeeSS é“Ǽ‚{ Google Chrome Extension Ƿ†ǻ

Slide 121

Slide 121 text

61 Impact Visualizer SeeSS Report File Tracker Renderer Graph Code Editor Site Recorder Website in Browser Thumbnail Data Latest 2 snapshots of each page Developer changes files Triggers update Developer browses site Adds a new page  SeeSS U‚Rǻ ! 1. ȄSite Recorder Dzř:8ü7C‹đư{Ǽ„ư{Œư{Å_łwǼş Renderer Graphǻ 2. ȄRenderer Graph ĕ Renderer ſ<Ǽ? iframe „Žłwļ DOM Ǎş. ǻ 3. ȄLiveReload :8üÞ?¾ŠǼDzřǡƤāŤ¡NǼŧƀ„ƁŲŹžļ“ǻ
 ȄSeeSS  File Tracker  LiveReload clientǼ`Ž LiveReload DzřǡƤ¡NǼijŷ File TrackerǼFile Tracker )N ȄRenderer Graphǻ 4. Renderer graph ƟƢN rendererǼȄImpact visualizer ™7|B[ æułwǼĶ' visual differenceǻ ! ļ SeeSS é“Ǽ‚{ Google Chrome Extension Ƿ†ǻ

Slide 122

Slide 122 text

Instant Feedback Test 62 New SeeSS SeeSS Prototype 3 #<č{3 ƁŲŹRàa¡NāŤǻ # , Ĭ<Ş ĚŖ — K:8üǼñ" feedbackǻ ! #?ƥ6 SeeSS v:y 6 ĵĻłw‹đǻ7ļ ‹đśTƖǵǼR–yIJ_¡Nǻ$Ǽ[ü1Bƻ3¡NƛĞǼÏá– yǻ ! Ȅ:ÝǾæ SeeSS Ĝ 1 ƋŬĭ ¡NǼ”ƥæ SeeSS ⪠5.3 ƋcŇ3o ¡Nǻæ SeeSS ™ƥæNñ"Ŀǟ¡Nǻ ! 0.8s phantom :‹ł 2.4s render snapshot 1.9s / 4.3s Ķ' thumbnail

Slide 123

Slide 123 text

Instant Feedback Test 62 New SeeSS SeeSS Prototype <1s for all 5.3s for 1st 7.8s for all #<č{3 ƁŲŹRàa¡NāŤǻ # , Ĭ<Ş ĚŖ — K:8üǼñ" feedbackǻ ! #?ƥ6 SeeSS v:y 6 ĵĻłw‹đǻ7ļ ‹đśTƖǵǼR–yIJ_¡Nǻ$Ǽ[ü1Bƻ3¡NƛĞǼÏá– yǻ ! Ȅ:ÝǾæ SeeSS Ĝ 1 ƋŬĭ ¡NǼ”ƥæ SeeSS ⪠5.3 ƋcŇ3o ¡Nǻæ SeeSS ™ƥæNñ"Ŀǟ¡Nǻ ! 0.8s phantom :‹ł 2.4s render snapshot 1.9s / 4.3s Ķ' thumbnail

Slide 124

Slide 124 text

≡ Feedback from real users 63 Future Work Đ Ž SeeSS šļ ǥĹXBǼ#ðƙڋł:8ü ¦?Ǻ\Éąú»Ǽ ǛZ animation ƔÊŋǼ2œĚ|ǦºƔ(âìĬNs¡NǨƒǻ !

Slide 125

Slide 125 text

≡ Feedback from real users ≡ Hidden states 64 Future Work Compact Regular Extended Tools @ƮǼõ?üư{%¡N SeeSS ňřµ­ǼǛZ$ javascript Çś ¡öǼ«YçƍĐ UI ư{ŸŚǻ ! 2 ƖǵǛǼʼnZ$ menu ƖǵǼE)ŬĭUØūǻ ʼnZ$õ?üE:ƖǵǼE CompactǼzE¹wǏ menuǼOBzũ:ǼRenderer Graph Ȅ}Uǻ ! SeeSS Lãĺ¸Ǽ? BFS bĪ traverse  renderer graphǼ%oƏ menu ŬĭJ!ǼÎ6 ś hidden state ǻT"Ǽÿħ ďƝšgƖåõ?üģǯ) replayǼ6 SeeSS é“ĺ¸ ¢ǎǻ

Slide 126

Slide 126 text

≡ Feedback from real users ≡ Hidden states 64 Future Work click outside click click Compact Regular Extended Tools click Compact Compact Regular Extended Tools @ƮǼõ?üư{%¡N SeeSS ňřµ­ǼǛZ$ javascript Çś ¡öǼ«YçƍĐ UI ư{ŸŚǻ ! 2 ƖǵǛǼʼnZ$ menu ƖǵǼE)ŬĭUØūǻ ʼnZ$õ?üE:ƖǵǼE CompactǼzE¹wǏ menuǼOBzũ:ǼRenderer Graph Ȅ}Uǻ ! SeeSS Lãĺ¸Ǽ? BFS bĪ traverse  renderer graphǼ%oƏ menu ŬĭJ!ǼÎ6 ś hidden state ǻT"Ǽÿħ ďƝšgƖåõ?üģǯ) replayǼ6 SeeSS é“ĺ¸ ¢ǎǻ

Slide 127

Slide 127 text

≡ Feedback from real users ≡ Hidden states ≡ Improve thumbnail ranking 65 Future Work 1BǼàa¡N÷Ɠlj :ˆƲƠ¬ÀǼâN‚ƅ CSS bug Ǜ02œƘƈ user studyǻ

Slide 128

Slide 128 text

66 Define Ideate Build Analyze Unintended Changes Related Work Visualization Prototype #1 Visualization helps #³ÅļăĈpÅ_ǻ #o prototypeǼ¯¦üK#˜wŒøǻ ! ŠÛǼ#@z\8ǥĹǼƌŁ brainstormingǼĽo’ǥĹĚŖȁ1. Ŧ˜ SeeSS bÑǼ„舫ƁŲŹǼ2. R´ñ"´ ǻ @:8<ƁŲŹw SeeSS extensionǻ @żģbenchmarkŬĭĺ¸ –Ž«ģǼ”ljâǶų‚ƅõ?üąú»ǻ

Slide 129

Slide 129 text

66 Define Ideate Build Analyze Unintended Changes Related Work Visualization Prototype #1 Visualization helps Brainstorming #³ÅļăĈpÅ_ǻ #o prototypeǼ¯¦üK#˜wŒøǻ ! ŠÛǼ#@z\8ǥĹǼƌŁ brainstormingǼĽo’ǥĹĚŖȁ1. Ŧ˜ SeeSS bÑǼ„舫ƁŲŹǼ2. R´ñ"´ ǻ @:8<ƁŲŹw SeeSS extensionǻ @żģbenchmarkŬĭĺ¸ –Ž«ģǼ”ljâǶų‚ƅõ?üąú»ǻ

Slide 130

Slide 130 text

66 Define Ideate Build Analyze Unintended Changes Related Work Visualization Prototype #1 Visualization helps Brainstorming Prototype #2 #³ÅļăĈpÅ_ǻ #o prototypeǼ¯¦üK#˜wŒøǻ ! ŠÛǼ#@z\8ǥĹǼƌŁ brainstormingǼĽo’ǥĹĚŖȁ1. Ŧ˜ SeeSS bÑǼ„舫ƁŲŹǼ2. R´ñ"´ ǻ @:8<ƁŲŹw SeeSS extensionǻ @żģbenchmarkŬĭĺ¸ –Ž«ģǼ”ljâǶų‚ƅõ?üąú»ǻ

Slide 131

Slide 131 text

66 Define Ideate Build Analyze Unintended Changes Related Work Visualization Prototype #1 Visualization helps Brainstorming Prototype #2 5x Speedup #³ÅļăĈpÅ_ǻ #o prototypeǼ¯¦üK#˜wŒøǻ ! ŠÛǼ#@z\8ǥĹǼƌŁ brainstormingǼĽo’ǥĹĚŖȁ1. Ŧ˜ SeeSS bÑǼ„舫ƁŲŹǼ2. R´ñ"´ ǻ @:8<ƁŲŹw SeeSS extensionǻ @żģbenchmarkŬĭĺ¸ –Ž«ģǼ”ljâǶų‚ƅõ?üąú»ǻ

Slide 132

Slide 132 text

67 SeeSS ¶Ýć:ˆ github Ǽ˜ġ˜ĪæbÑŵeǼĨÆ%2 Chrome Web Store wƨǻ

Slide 133

Slide 133 text

/** SeeSS ! 1. Instant feedback of visual changes 2. Augment existing developing experience 3. Iterative design process ! Thank you for listening! */       SeeSS: Instant Change Impact Visualization for CSS developers 68 Presentor: Hsiang-Sheng (Johnson) Liang Advisor: Mike Y. Chen 2ĉijǻôô4ǻ

Slide 134

Slide 134 text

Backup Slides 69 notes.

Slide 135

Slide 135 text

Evaluation 70 #ķǚ© *4 ‹ł:8ü ¦? SeeSSǻ

Slide 136

Slide 136 text

Evaluation 70 #ķǚ© *4 ‹ł:8ü ¦? SeeSSǻ

Slide 137

Slide 137 text

Experiment Setup 71 ‚ŝǼ¯¦üw| [ DZƺǻ *  :-ǐƉŹǼ * Ş :-ƁŲŹǼ

Slide 138

Slide 138 text

Experiment Setup 71 ‚ŝǼ¯¦üw| [ DZƺǻ *  :-ǐƉŹǼ * Ş :-ƁŲŹǼ

Slide 139

Slide 139 text

Experiment Setup 71 ‚ŝǼ¯¦üw| [ DZƺǻ *  :-ǐƉŹǼ * Ş :-ƁŲŹǼ

Slide 140

Slide 140 text

Tasks 72 Website #1 w/ SeeSS #©¯¦üŦ˜ 2 ‹đM¹ň…ƵǼ  1 SeeSS prototype ǬţǼ

Slide 141

Slide 141 text

Tasks 73 Website #2 w/o SeeSS YŞ , SeeSSǻ ‹đ6 SeeSS ŸƓ counter balanceǻ ! ` ‹đ 5 CSS task R

Slide 142

Slide 142 text

Tasks Design 74 #K¯¦üUĢĭǼÕš<¹ňƈUǼ ŞÕpĦ$mǻ

Slide 143

Slide 143 text

Tasks Design 74 Please make the text wrap around the images in the staff section of about.html. #K¯¦üUĢĭǼÕš<¹ňƈUǼ ŞÕpĦ$mǻ

Slide 144

Slide 144 text

Task Design 75 Please make the text wrap around the images in the staff section of about.html.  task h&ŃðǼƚ¯¦ü, Ŧ Ņ dǼ%Ŏ

Slide 145

Slide 145 text

Task Design 75 Please make the text wrap around the images in the staff section of about.html.  task h&ŃðǼƚ¯¦ü, Ŧ Ņ dǼ%Ŏ

Slide 146

Slide 146 text

Collecting Feedback 76 #©õ?üR CSS task "Ņ * think-aloudǻ * ‚ŝBǼ#?ƭŢ½›2œ * ýÅǗĪǔƇǼ2ąúbĪǼ
 Éų47 SeeSS q‘ǻ

Slide 147

Slide 147 text

Collecting Feedback ≡ Think-aloud 76 #©õ?üR CSS task "Ņ * think-aloudǻ * ‚ŝBǼ#?ƭŢ½›2œ * ýÅǗĪǔƇǼ2ąúbĪǼ
 Éų47 SeeSS q‘ǻ

Slide 148

Slide 148 text

Collecting Feedback ≡ Think-aloud ≡ 5-point Likert scale
 questionnaires 76 #©õ?üR CSS task "Ņ * think-aloudǻ * ‚ŝBǼ#?ƭŢ½›2œ * ýÅǗĪǔƇǼ2ąúbĪǼ
 Éų47 SeeSS q‘ǻ

Slide 149

Slide 149 text

Collecting Feedback ≡ Think-aloud ≡ 5-point Likert scale
 questionnaires ≡ Interviews 76 #©õ?üR CSS task "Ņ * think-aloudǻ * ‚ŝBǼ#?ƭŢ½›2œ * ýÅǗĪǔƇǼ2ąúbĪǼ
 Éų47 SeeSS q‘ǻ

Slide 150

Slide 150 text

77 3 2 1 Action Flow in Browser  what needs to be done?  what needs to be done?  what needs to be done? cook Constructed Renderer Graph type ‘do laundry’ and click   what needs to be done? do laundry click type ‘do laundry’ and click  type ‘cook’ and click  click type ‘do laundry’ and click  4

Slide 151

Slide 151 text

78 type ‘cook’ and click  type ‘do laundry’ and click  Original Reloaded Reloaded Original type ‘cook’ and click  type ‘do laundry’ and click  Reloaded Original type ‘cook’ and click  type ‘do laundry’ and click  Reloaded Original type ‘cook’ and click  type ‘do laundry’ and click  3 4 2 1