Related Links
Feedback from Lo-Fi Prototype
- It made the visualization too complicated to show all keywords and websites in the default view. Users cannot get insight from the overwhelming representation.
- The red-blue color scheme is not expressive, and can't efficiently demonstrate the pattern of the data set.
- For each specific small piece in the circle, it is hard for users to tell which website it represents.
- There is a list of website, but no salient variable was used to distinguish their differences and priorities.
Interaction Design
Considering the feedback of our users, we tried to simplify the representation in the default view where users will just see the most important results for them, hiding some detailed information that requires more interaction to get from the system. The color scheme is also be simplified. A single red color is applied, and the percentage of transparency is used to quantitatively represent the value of power score. To distinguish the websites in the list, the length of the bars is used to represent the websites' overall visibility rank, and the width of the bars reflects the overall traffic of the websites.
Our users' primary need is to identify the ideal keywords that have high popularity (traffic) but low competition (aggregated power score of all competitors). To achieve this goal, it is not always necessary for them to know the exact degree of competitiveness for each keyword in each website. The aggregated competitiveness of each keyword across the entire market is sufficient to address their question. Therefore, in the default view the system will display a circle of keywords' aggregated data. This representation will reduce users' cognitive workload when they interpret the visualization, and support them to make selection based only on the abstract data. From the image below, users could easily tell that the keywords "real estate" and "apartments" are ideal choices, because they have high popularity (longer arc length) and low competitiveness (higher transparency of red color).
More detailed information is also available for users to analyze the dataset more thoroughly. By clicking the "divide" or "aggregate" button on the top of the page, users could be able to switch the views between overview and details. When users click "divide" button in the default view, the information of each website for each keyword will be added to the circle. Each small piece in the circle represents that how easy a website can be found by searching a certain keyword, i.e. the power score for that website on that keyword.
Because the visualization contains many pieces of information, they can hardly be displayed in a single view at one time. Mouseover event is a powerful method for us to help users explore more information as they need. When a user's cursor moves over the circle, a box will pop-up to the display more detailed information, such as the URL of the websites, keywords on target, as well as the accurate value of the power score.
By the same token, users can mouseover the list of website on the left to see detailed data about a certain website. For example, the client might be interested in looking at the web analytical data about their own website.
The detailed view contains all related information, and might be complicated for users to get a rapid insight about the questions they are current interested. Some interaction functions are provided for users to hide some of the dataset that is not directly relevant to the current decision making. By right-click, user can remove the selected keyword (a sector of pie) or website (a circle ring of the pie), and just focus on analyzing the remaining data of high interest. For example, if the SEO experts find some keyword already exists in the client's website or some keywords are not popular enough among the web audience, they can just remove them from the view. There are also options on right-click to add the hidden data back.
Assuming that the user is not interested in some keywords, he/she could removes them by right-click. The visualization will be reconfigured to keep the shape of an entire circle. The arc length of each keyword will change correspondingly, but the ratio among them is always consistent and precisely represents the popularity of the keywords.
In another scenario, users might want to analyze all keywords but focus on part of their competitors. For example, the overall visibility of the clients' website is the 3rd. They might be only interested in the two major competitors that have higher ranking. After removing all other minor competitors, the visualization will simply display the data of the two website under study. The brushing feature is applied to this system. When the website is removed, the color in the bar for that website will automatically become white which looks like the website is empty at this moment. By this design, users could clearly understand which websites are represented in the big circle.
After the filter function, if the visualization above is still a little complicated, user could abstract the representation further. As we mentioned at the beginning, user can switch the view between the detailed view and the abstract view as they need. After clicking the "Aggregate" button on the top, the system could calculate the overall competitiveness of the websites for each keyword, and display a simple representation to address users' question. From the image below, we can identity that the keywords "real estate" and "rent" have relatively high traffic and low competitiveness. This result is different from the analysis for the entire market in figure 1.
