automated evaluation of wordpress theme design derek ohanesian csc 499 advisor: prof. chris...
TRANSCRIPT
![Page 1: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/1.jpg)
Automated Evaluation of
WordPress Theme Design
Derek Ohanesian
CSC 499Advisor: Prof. Chris Fernandes
November 7, 2014
![Page 2: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/2.jpg)
Research QuestionIn what ways can an automated system provide web design advice?
Can an automated system analyze a blog’s WordPress theme and provide valuable feedback about design improvements?
![Page 3: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/3.jpg)
Motivation
The World Wide Web democratizes publishing
A well designed website is less accessible.
![Page 4: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/4.jpg)
What is design?
By design, we mean the user interface, encompassing the presentation, aesthetics, and accessibility of the website.
Design is separate from the content of the website.
![Page 5: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/5.jpg)
Why Blogs?• Limits scope
• Similar content, differentiated by design.
• Focus on evaluating the design, while the content type remains constant
• Limited data set the two-column style blogs only
![Page 6: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/6.jpg)
What is WordPress?• An open-source content management system
(CMS) for blogging. The most popular CMS for websites.
• Separates the content from the design. Different WordPress “themes” can be applied to the blog content to create the design of the website.
• Thousands of freely available and open-source themes available.
![Page 7: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/7.jpg)
![Page 8: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/8.jpg)
![Page 9: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/9.jpg)
![Page 10: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/10.jpg)
Research Question
How can we use data collected from WordPress themes to provide valuable feedback about design improvements?
![Page 11: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/11.jpg)
Data Collection• WordPress themes include a set of functions that
the theme designer can call to access the blog’s content and present it in the design of the page
• I intercept these function calls and inject labels to each section of the website, so I know what content is being displayed
![Page 12: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/12.jpg)
![Page 13: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/13.jpg)
Title
Tagline
Post Title P
ost
Post titles
![Page 14: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/14.jpg)
Data Collection• By injecting labels into the WordPress theme, I
was able to collect more precise data about the content being displayed.
• In addition, general data about…o position of elementso fontso colorso sizeso visual style
![Page 15: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/15.jpg)
Procedure
• Previous research shows that certain quantitative heuristics correlate with good design
• For this project, I tested similar heuristics on a data set of over 200 two-column WordPress themes
![Page 16: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/16.jpg)
Heuristics• Quantity of unique colors used
• Text contrast on background
• Left/right balance of major elements
• Density of content elements (percent of area)
• Font size for some elements
• Quantity of fonts used
![Page 17: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/17.jpg)
Number of Colors
0 1 2 3 4 5 6 7 8 9 101112131415161718192021222324252627282930313233343536373839400
5
10
15
20
25
30
35
40
45
50
Number of Colors Used
NumberOf Themes
![Page 18: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/18.jpg)
Number of Colors
0 1 2 3 4 5 6 7 8 9 101112131415161718192021222324252627282930313233343536373839400
5
10
15
20
25
30
35
40
45
50
Number of Colors Used
NumberOf Themes
One theme with 38 colors
![Page 19: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/19.jpg)
ColorScheme
![Page 20: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/20.jpg)
5 colors
![Page 21: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/21.jpg)
17 Colors
![Page 22: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/22.jpg)
Number of Colors
• “Sweet spot” at 5 colors?
• Greater than 10-15 colors indicative of a problem?
![Page 23: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/23.jpg)
Layout Heuristics
• Area of page used (density)
• Balance (left/right)
![Page 24: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/24.jpg)
Area of Page (~2% content)
![Page 25: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/25.jpg)
Area of Page (~47%)
![Page 26: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/26.jpg)
Area of Page (~47%)
![Page 27: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/27.jpg)
Balance
![Page 28: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/28.jpg)
Balance
100%
(of content on left side)
![Page 29: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/29.jpg)
Balance
50%(of content on left side)
![Page 30: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/30.jpg)
Text Contrast• WC3 recommendation for making web more
accessible
• Web Content Accessibility Guidelines (WCAG)
• Recommended color contrast algorithm must produce contrast within a certain range to be considered “good visibility”
![Page 31: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/31.jpg)
Text Contrast
100% of color combinations pass WCAG test
![Page 32: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/32.jpg)
Text Contrast
0% of color combinations pass WCAG test
![Page 33: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/33.jpg)
Text Contrast
• Inconsistent data
• Some color combinations are not included in my analysis (hard to parse CSS, or alpha channels)
• WCAG 2.0 has an improved color-contrasted algorithm
![Page 34: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/34.jpg)
Evaluating Heuristics
• Heuristic provide a set of scores for each theme
• A test set of unevaluated themes has been set aside
• A human evaluation of the themes in the test set can be compared to the automated evaluation to evaluate its effectiveness
![Page 35: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/35.jpg)
Future work• Evaluating automated scores against human
heuristic evaluation (this term)
• Assigning weights to heuristics
• Scoring themes with additional heuristics
• Adding additional themes to data set
![Page 36: Automated Evaluation of WordPress Theme Design Derek Ohanesian CSC 499 Advisor: Prof. Chris Fernandes November 7, 2014](https://reader036.vdocument.in/reader036/viewer/2022081603/56649e005503460f94ae9333/html5/thumbnails/36.jpg)
Q & A