[Thesis Defense] SeeSS: Instant Change Impact Visualization for CSS developers

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ŉ=kâ CSS dƤP|ć Ņ¦Čƣ 'Ƥyr|ćğùĈÊÂƤìŞ%

Slide 6

Slide 6 text

5 html { font-size: 100%; } body { color: #333; background: red; } ✖ ✖ blue; ✖ ✖ tĘƤ |íIj&+ |ćƣ ƫ Æ#&1ŉ=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*Ç ßĘƣ

Slide 10

Slide 10 text

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

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*Ç ßĘƣ

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*Ç ßĘƣ

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ƕ-ƣ ƫ BuÆð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ƕ-ƣ ƫ BuÆðW 400pxƣ

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

14 CSS editing Change O Unintended changes «¼EÌE42H|íÖ Rĥďƣ @#ńĸļčćjƢ7HD>²"@Ƥôô"oƣ # ° ŀAJF!ƣ

Slide 21

Slide 21 text

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

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ƣ śĄƑŒ¦ČƤĻƛöĭŃêĲ© 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ƣ śĄƑŒ¦ČƤĻƛöĭŃêĲ© 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źÀPJ 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źÀPJ 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$ƦﬂowƧ+àƣ

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

22 padding: 2em 1em; } .title { font-family: Lato; color: #A9071E; width: } .login-button { ! ! } Visualize after Change #B87ÓNJƤ RĄ |íqJƣ ! 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ÓNJƤ RĄ |íqJƣ ! 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ŃÆ)ĳÃŦğ¥ÏŔ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ŃÆ)ĳÃŦğ¥ÏŔ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ŃÆ)ĳÃŦğ¥ÏŔ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ŃÆ)ĳÃŦğ¥ÏŔ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ŃÆ)ĳÃŦğ¥ÏŔJƣ

Slide 40

Slide 40 text

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

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 ŸƄº287|íIƤØşé±|ćƣ k"ƤƫÆ° HTML 5 CSS ŉ=Ŗƣ ! ƫ|ćP/^ render :¹¹9ÃƤĤĉĮƐIxƣ # prototype IƤ9Ã Ą |ć screenshotƣ

Slide 47

Slide 47 text

28 Site Crawler ŸƄº287|íIƤØşé±|ćƣ k"ƤƫÆ° HTML 5 CSS ŉ=Ŗƣ ! ƫ|ćP/^ render :¹¹9ÃƤĤĉĮƐIxƣ # prototype IƤ9Ã Ą |ć screenshotƣ

Slide 48

Slide 48 text

28 Site Crawler CSS ŸƄº287|íIƤØşé±|ćƣ k"ƤƫÆ° HTML 5 CSS ŉ=Ŗƣ ! ƫ|ćP/^ render :¹¹9ÃƤĤĉĮƐIxƣ # prototype IƤ9Ã Ą |ć screenshotƣ

Slide 49

Slide 49 text

28 Site Crawler Render crawled pages Stores in Snapshot DB ŸƄº287|íIƤØşé±|ćƣ k"ƤƫÆ° HTML 5 CSS ŉ=Ŗƣ ! ƫ|ć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 @ĳÃ÷n°ĝŉ=ŖƤº2 HTMLƣ @ HTML ^ƒŁ:9ÃƢĤĉĮƐƣ @Impact visualizer *İY ćj0VŜ9ÃƤƨÊåfķůĭNĎƌúƣ ! łƌú'@9ÃIƤŗƚŬ¥Ŭƣ @LTPJĴŅģ 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 @ĳÃ÷n°ĝŉ=ŖƤº2 HTMLƣ @ HTML ^ƒŁ:9ÃƢĤĉĮƐƣ @Impact visualizer *İY ćj0VŜ9ÃƤƨÊåfķůĭNĎƌúƣ ! łƌú'@9ÃIƤŗƚŬ¥Ŭƣ @LTPJĴŅģ 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 @ĳÃ÷n°ĝŉ=ŖƤº2 HTMLƣ @ HTML ^ƒŁ:9ÃƢĤĉĮƐƣ @Impact visualizer *İY ćj0VŜ9ÃƤƨÊåfķůĭNĎƌúƣ ! łƌú'@9ÃIƤŗƚŬ¥Ŭƣ @LTPJĴŅģ 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 @ĳÃ÷n°ĝŉ=ŖƤº2 HTMLƣ @ HTML ^ƒŁ:9ÃƢĤĉĮƐƣ @Impact visualizer *İY ćj0VŜ9ÃƤƨÊåfķůĭNĎƌúƣ ! łƌú'@9ÃIƤŗƚŬ¥Ŭƣ @LTPJĴŅģ 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 @ĳÃ÷n°ĝŉ=ŖƤº2 HTMLƣ @ HTML ^ƒŁ:9ÃƢĤĉĮƐƣ @Impact visualizer *İY ćj0VŜ9ÃƤƨÊåfķůĭNĎƌúƣ ! łƌú'@9ÃIƤŗƚŬ¥Ŭƣ @LTPJĴŅģ 4\ŗƚÞ8Æ£h®ņƣ

Slide 56

Slide 56 text

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ÓNJS@Ƥ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 ǡƤMǇƫśĦǤǻ [Ã¯řü?čǼ ƑĄ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 ǲř½ÃƷ¡NǼļ thumbnail ŗ. +ǁǻ Ş¹Ǽ?;åº~ðĆǦº, ǮĄÌ°^êǼÌƃ¡N%2Ķ'ǁö thumbnailǼD¡NŬ ǋƧǻ

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ǼǉO ö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ǼǉO ö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ǼǉO ö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ǼǉO ö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ǼǉO ö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üǻ @ #Øš¡NǄŗǐƉŹǼY A5bǻ @ #?Ŝ§Ŝ3QŇ Ôİ¡N|BƵűǻ ! ƣO#Íħ SeeSS 1ƜÜ:8üǼ9!# ď)ǖǀǼ#żØšØūX¹Ǽ( #ĐŏǈbÑǼƀ9bÑ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üǻ @ #Øš¡NǄŗǐƉŹǼY A5bǻ @ #?Ŝ§Ŝ3QŇ Ôİ¡N|BƵűǻ ! ƣO#Íħ SeeSS 1ƜÜ:8üǼ9!# ď)ǖǀǼ#żØšØūX¹Ǽ( #ĐŏǈbÑǼƀ9bÑ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üǻ @ #Øš¡NǄŗǐƉŹǼY A5bǻ @ #?Ŝ§Ŝ3QŇ Ôİ¡N|BƵűǻ ! ƣO#Íħ SeeSS 1ƜÜ:8üǼ9!# ď)ǖǀǼ#żØšØūX¹Ǽ( #ĐŏǈbÑǼƀ9bÑ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üǻ @ #Øš¡NǄŗǐƉŹǼY A5bǻ @ #?Ŝ§Ŝ3QŇ Ôİ¡N|BƵűǻ ! ƣO#Íħ SeeSS 1ƜÜ:8üǼ9!# ď)ǖǀǼ#żØšØūX¹Ǽ( #ĐŏǈbÑǼƀ9bÑ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ǼOBǅǞ brainstorming ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI:8đǼþM. Ǽ:8üǼĨÆāŤZî¿WUƵǼcD; ĺ«§ơƮǺùƼŕŅńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>ƂǼo 3 ǥĹ8NƪǳǻŉZ$ttĠāŤǼ H»/Ǯ¡N7(Ǽ9!:8üǼĨÆA ZîĳWǸ¡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ǼOBǅǞ brainstorming ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI:8đǼþM. Ǽ:8üǼĨÆāŤZî¿WUƵǼcD; ĺ«§ơƮǺùƼŕŅńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>ƂǼo 3 ǥĹ8NƪǳǻŉZ$ttĠāŤǼ H»/Ǯ¡N7(Ǽ9!:8üǼĨÆA ZîĳWǸ¡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ǼOBǅǞ brainstorming ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI:8đǼþM. Ǽ:8üǼĨÆāŤZî¿WUƵǼcD; ĺ«§ơƮǺùƼŕŅńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>ƂǼo 3 ǥĹ8NƪǳǻŉZ$ttĠāŤǼ H»/Ǯ¡N7(Ǽ9!:8üǼĨÆA ZîĳWǸ¡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ǼOBǅǞ brainstorming ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI:8đǼþM. Ǽ:8üǼĨÆāŤZî¿WUƵǼcD; ĺ«§ơƮǺùƼŕŅńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>ƂǼo 3 ǥĹ8NƪǳǻŉZ$ttĠāŤǼ H»/Ǯ¡N7(Ǽ9!:8üǼĨÆA ZîĳWǸ¡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ǼOBǅǞ brainstorming ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI:8đǼþM. Ǽ:8üǼĨÆāŤZî¿WUƵǼcD; ĺ«§ơƮǺùƼŕŅńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>ƂǼo 3 ǥĹ8NƪǳǻŉZ$ttĠāŤǼ H»/Ǯ¡N7(Ǽ9!:8üǼĨÆA ZîĳWǸ¡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ǼOBǅǞ brainstorming ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI:8đǼþM. Ǽ:8üǼĨÆāŤZî¿WUƵǼcD; ĺ«§ơƮǺùƼŕŅńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>ƂǼo 3 ǥĹ8NƪǳǻŉZ$ttĠāŤǼ H»/Ǯ¡N7(Ǽ9!:8üǼĨÆA ZîĳWǸ¡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ǼOBǅǞ brainstorming ƘŴǼ @o 2 ǥĹ©A#8ǼZ_ āŤ%2WI:8đǼþM. Ǽ:8üǼĨÆāŤZî¿WUƵǼcD; ĺ«§ơƮǺùƼŕŅńƽ ƊĺŦŪÂȃ @o 2 ǥĹ>ƂǼo 3 ǥĹ8NƪǳǻŉZ$ttĠāŤǼ H»/Ǯ¡N7(Ǽ9!:8üǼĨÆA ZîĳWǸ¡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ǊĴC¡Nǻ Ş¹Ǽ@ ? ù3»Ǽ?ǸÌƃƔ6 AÌƃ7ǃǹlƁŲŹ render Å_ą ÷Ɠ¡Nǻ  !

Slide 94

Slide 94 text

Slide 95

Slide 95 text

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ƁŲŹ Ũ]ǻ#Ð ŃðǼÏáľĥŏǈbÑǻ @ before / after QŇ Ǽ+² ǻö ù idea > ǧLǸafterǹǼ ǻ

Slide 98

Slide 98 text

Slide 99

Slide 99 text

Slide 100

Slide 100 text

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|ù91]ĩ ideaǻ

Slide 102

Slide 102 text

Slide 103

Slide 103 text

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 ǉO code editor MwdǼ:8ü§J!Uǘıǻ ! āŤ6ǐƉŹļÊ."Ǽĝüč6ŚĪću Ǽŧƀ¡NÙÐǧLŚĪćǆÕǻ ! 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õ?CǌǐƉŹǻ ǷǼõ?üØšƖǵ 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 URǻ ! 1. ȄSite Recorder ǲř:8ü7Cđư{Ǽư{ư{Å_łwǼş Renderer Graphǻ 2. ȄRenderer Graph ĕ Renderer ſ<Ǽ? iframe łwļ DOM Ǎş. ǻ 3. ȄLiveReload :8üÞ?¾ŠǼǲřǡƤāŤ¡NǼŧƀƁŲŹļǻ  ȄSeeSS File Tracker LiveReload clientǼ` LiveReload ǲřǡƤ¡NǼĳŷ 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

Slide 116

Slide 116 text

Slide 117

Slide 117 text

Slide 118

Slide 118 text

Slide 119

Slide 119 text

Slide 120

Slide 120 text

Slide 121

Slide 121 text

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ƖǵǼRyĲ_¡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ƖǵǼRyĲ_¡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œĚ|ǦºƔ(âìĬNs¡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ƖǵǛǼŉZ$ menu ƖǵǼE)ŬĭUØūǻ ŉZ$õ?ü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ƖǵǛǼŉZ$ menu ƖǵǼE)ŬĭUØūǻ ŉZ$õ?ü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÷Ɠǉ:ƲƠ¬ÀǼâ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Ŭĭĺ¸ «ģǼǉâǶųƅõ?üąú»ǻ

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Ŭĭĺ¸ «ģǼǉâǶųƅõ?üąú»ǻ

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Ŭĭĺ¸ «ģǼǉâǶųƅõ?üąú»ǻ

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Ŭĭĺ¸ «ģǼǉâǶųƅõ?üąú»ǻ

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ĉĳǻôô4ǻ

Slide 134

Slide 134 text

Backup Slides 69 notes.

Slide 135

Slide 135 text

Slide 136

Slide 136 text

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

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

Slide 147

Slide 147 text

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