Project Description
Web developers have enough on their plates without having to worry about keeping track of styles they find online. Saving styles is a practical way to reduce redundant work and helps designers match the aesthetic of their webpages to existing ones that match their target user base. While developers have the option of using built in web inspectors, their interfaces are often busy and densely packed with information that is typically irrelevant for a web designer. Web inspectors also lack an easy way to save styles for future use.
Our Goal: create a web extension that provides a way to easily and intuitively view and save styles from a webpage
Low Fidelity Prototype
Explore our story board and user flow for three use cases
Storyboard
Use Case 1
Provide a way to examine saved styles in a preview format which offers a visual display of the template
User Flow
Wire Flow
Use Case 2
Provide a way to highlight elements on a page and retrieve their associated styling
User Flow
Wire Flow
Use Case 3
Provide a way to easily organize saved styles through searching and sorting with the ability to copy, rename, and delete styles
User Flow
Wire Flow
Working Prototype
User Flows Implemented
Scan
Scan an element on a web page and retrieve its styling
Preview
Preview saved styles
Manage
Organize and manage saved styles with sorting, search, and edit
Development Environment
Development Tools
-
Visual Studio Code
-
Chrome APIs
-
Regex101
Programming Languages
-
Javascript
-
HTML
-
CSS
Version Control
-
Git
Icons
-
Inkscape
-
Bootstrap icons
Database Development
-
All of the user data was stored using the chrome.storage API, which stores the data in the web browser
-
The styles were stored in a JSON format, including the name, the date the style was saved, and the CSS itself
Front End
HTML
1
CSS
2
Javascript
3
Bootstrap Icons
4
Back End
Written entirely in Javascript, with some inline CSS and HTML
Demo Video
Evaluation Results
Goal of Evaluation
​The goal of the evaluation is to discover whether both web design novices and professionals can use our Style Checker tool easily and intuitively, and whether our tool has a place in their workflow and in their lineup of web design and development tools.
Three Key Questions
Highlight
How effective is the highlight and retrieval feature at quickly accessing and displaying relevant CSS styling?
1
Organize
How effective is the search and sorting feature at enabling the user to conveniently store, find, and manipulate saved templates?
2
Preview
How effective is the preview feature at giving users an idea of what the saved CSS template would look like when applied to an element?
3
Participants
For the evaluation, we recruited 3 participants. Due to the small sample size, our findings are not necessarily generalizable across all potential users of the extension.
The team had originally planned to source a larger number of participants from CSC 210, the web programming class offered at the University of Rochester. We created a link to our Github repository and advertised it in the CSC 210 slack channel. The team also made an in-class announcement encouraging students to participate, however we did not receive much engagement with our evaluation.
​
The team brainstormed that some of the barriers listed below may have contributed to the lack of responses:
- the evaluation was complex, and had many steps and moving parts
- CSC 210 has low attendance and an inactivate slack
- the evaluation was long (approximately 15 minutes)
- the evaluation took place at an inconvenient time (finals week)
​
Possible solutions if the evaluation was conducted again:
- simpler, more unscripted evaluation (questionnaire with mainly open ended free response questions and a few Likert scale questions)
- finding participants at an earlier time, and from a more diverse set of classes ​
Evaluation Tasks
Scan
Use capture mode to retrieve the styling of an element on Wikipedia and save it in the style library
Manage
​Test the edit, copy, sort, search, rename, and delete features
Preview
Preview a style in the library and use the copy features in the preview window
Test Procedure
1
Pre-test
Participants are provided with an overview of the web extension and its functionalities, the tasks they will complete, and instructions on how to perform the tasks
The instructions are found on the Github repository for the extension and include text based instructions with screenshots in order to make it clear how to perform each task
Participants are given time to familiarize themselves with the extension
2
Test
Participants are asked to perform the above three tasks
The participants screen record their progress
After completing each task, participants are asked to take notes regarding how the task went
3
Post-test
A questionnaire is used for participants to provide feedback on their experience and satisfaction with performing each task.
The questionnaire includes questions on how easy they found each task to complete and how satisfied they felt overall with the features our extension offers and the problems it aims to solve.
Data Collection
Methods
Questionnaire
-
Based on likert scale
-
Serves as a measure of effectiveness and satisfaction
Screen Recording
-
The participant records their screen as they complete the tasks so that we can analyze how they complete the tasks and how long it takes them to complete the tasks.
-
Serves as a measure of efficiency
Quantitative Analysis
Screen Recordings
Using the screen recordings that were submitted by the participants, the team was able to evaluate the average completion time for each of the three tasks and compute how many errors were made during the evaluation
​The average time to complete all tasks was 216 seconds, or 3 minutes and 36 seconds. Task 2 took the longest to complete, which is expected given that the number of tools the user was asked to test in Task 2 was significantly greater than Tasks 1 or 3.
Task 2 had the highest error rate, likely due to the nature of having so many tools to test. The main errors the team noticed were participants randomly clicking on icons (possibly unable to tell which icon matched which feature), missing steps of the evaluation, or misinterpreting the instructions and doing extra steps.
Questionnaire
The post-test questionnaire administered after the completion of the tasks yielded the following results in response to our three key questions above
Qualitative Analysis
Questionnaire Feedback
What participants liked
Styling Retrieval and Preview
Design and look of the extension
Simple and easy to use, good for new developers
What participants disliked
Unclear action dropdown
Preview of element padding was confusing
Tool was perhaps too simple compared to chrome's dev tools
Key Takeaways
Style Checker was found to be moderately to very effective for finding CSS on a webpage, saving it for later use, and previewing templates saved in the extension. Participants reported that the tool helped them hone in on specific elements easily, and were interested in the preview feature’s use for design inspiration. No participants found the highlighting feature frustrating to use, but some participants were frustrated by aspects of the saving/sorting and preview features. The participants noted that the margins section of the preview feature could be confusing, and that the dropdown icon was not intuitive enough for a new user. However overall participants found the UI to be very readable, and on average ranked it higher than the readability of google chrome’s inspect tool. Our tool also outperformed google chrome’s UI on learnability, as all participants ranked our tool as being easier for a novice web developer to use when compared to the inspect tool. For finding inspiration from websites online, participants ranked both inspect and style checker as being useful, and â…” of the participants were interested in using the extension in the future.
Want to see more?
Visit our Github repo here