Visual Recommender

Online Visual Recommender is a first of its kind - personalized responsive visual recommender in the matrix form with user-controllable interface. It enables users to compare recommended results for different categories as well as public interest vs personal affinity for topics.

In this project, we present first of its kind - personalized responsive visual recommender in the matrix form with user-controllable interface. Major research in recommendation system has been focused on algorithm logic providing more accurate and personalized recommendations. Several studies have established that user satisfaction can be dramatically increased with the help of interactive visualization endowing capability to change the system content catering individual’s need. Our approach enables users to compare recommended results for different categories as well as public interest vs personal affinity for topics. We have also integrated filter in our model to customize and remove unwanted results contributing towards user controllability. As a part of personalized recommender we also provided hide feature to store preferences of the users. To induce user’s trust in our system we tried to come up reasonably transparent system logic. This recommender model tries to reach maximum audiences with its responsiveness thereby adding value towards usefulness of an associated website. To access complete report on this model click here.

Click here to get User ID and Password to login. These are the real User IDs from stackoverflow. We have created personal preferences for each of them based on questions asked and answered by that user. After logging in, you will notice that results on right columns are weighted on personal preferences of that user.

Let's look at visual elements of the the model.

  • Visualization Grid

  • Here is a recommender at first look-

    Responsive image

    We divided our recommendation space into grid of four boxes. First row corresponds to attributes ‘Voted’ and ‘Rated’. Second row is for ‘Popular’ and ‘Verbatim’. By default, we set our left side buttons to ‘Trusted’ and ‘Popular’ attributes. You just need to click on the buttons to change their type. We have also provided tooltips for each button to explain user the meaning of each attributes. Further, our grid is divided into two columns viz., Public and Personal. If user has not logged in, then we replicate the result of Public column into Personal column. Swearingen have already emphasized on the importance of visual aspect of recommender system. We followed their advice while designing our prototype.

  • Recommendation box

  • Here is the screenshot of our model when user searched for ‘how to define array without specifying length’ –

    Responsive image

    To maintain consistent coloring we had blue color for complete first row and green color for second one. This consistency in color helps user understand that each box in a row has recommendation result with respect to one attribute. Whereas different colors in each column suggest that results belong to different attributes.

  • Heat Map

  • Traditional ranking system would have been ineffective in our case if user wanted to take advantage of grid system to compare results simultaneously across different domains. That’s why we came up with heat map. Each question is preceded by a box symbolizing recommendation score in that box. Darker the box higher the result recommended. Two or more squares with same shade of color depicts questions with comparable or similar recommendation score. We used SVG for building squares.

  • Hide Symbol (Eye with red slash)

  • In order to hide the question which user does not want to see in future, we came up with this hide symbol which succinctly does portray desired meaning. It is the part of implementing personalized recommendation system with online feedback and update. We used SVG for building hide symbol.

  • Filter Button: Answered

  • If user is merely interested in answer to the question then she can filter out those questions which do not have any answer yet. Our toggle button right after submit button instantly updates the recommended results according to the current value.

  • Navbar

  • Bootstrap has collapsible navbar which can detects screen size and collapses if browser width goes below 768px. It means small screen devices will have collapsed navbar where large screen devices will have full-fledged navbar. In the collapsed mode user has to click on toggle button to expand and see all the navbar menus and buttons. We included search and other navigation buttons in the navbar so that 90% of the space in any screen size will be occupied by recommendation grid. This was one of the tricky decision in order to maximize available space usage for recommendation results.

  • Mobile View

  • Below is a screenshot of our recommender when opened in iPhone 6 –

    Responsive image

    You can notice that first row box has consumed most of the width of the screen. This happens when user click on the box in mobile. Same effect we get in big screen devices on hovering the particular box. Again the reasoning behind it was to maximize space usage and focus on current box by showing maximum content without scrolling sideways. Here, we implemented Sneiderman’s details on demand strategy - showing details only when required.