There is a plugin that runs in the browser (Chrome) that aims to recommend which of your friends might like the page being viewed. The plugin communicates with a recommendation API service, that when given the web page url, provides back to the plugin a set of friends that might like this web page and why. The recommendation API service utilizes semantic information in the web page and the social media content of the friends to create a set of possible matches (friends that might like the page).
* In plain English: The web page has info on what the page is about and there is a database with friend info that describes what they might like. The recommendation API service tries to match the page to friends and return the top 4 to 8 friends most likely to want to see this page.
* The returned information, besides the friend's names, include ranked keywords of each friend that were used to match them to the page; this info helps answer the question "why was this friend identified as possibly liking this page?"
The plugin utilizes the returned data and displays just the thumbnails of the most recommended friends on the right side of the browsing window. What is not displayed are the deeper information like why the person was selected (those keywords, scores, etc.).
When the cursor hovers over the thumbnail the additional information is made available. It is the design of the display of the additional information what is being sought.
This design request is a visual concept design. Think of Edward Tufte designing the organization of the information to make it useful. So it is not expected to have a Powerpoint deck delivered. What is needed are sketches / wireframes / visual layouts of the concepts.
The recommendation API returns to the browser plugin the following data
* A list of friends
* For each friend there are
** avatar thumbnail.
** a list of 10 to 20 keyword terms plus a term score (a number) that were used to match the friend to the web page. The term score is used to determine the value of that word in the matching. A high number means the word is more relevant in the matchup.
** The friend's relevance score (a single number) that represents the likelihood the friend might like the web page; higher number means person more likely to like the web page.
The plugin will display the avatar thumbnails of four to eight top friends recommended for the page on the right side of the browser window, in a vertical stack. Hovering over each thumbnail is the action, and the data available that action is that friend's thumbnail, name, score, and list of relevant keyword terms+scores.
* How best can the information (name, avatar, friend score, keywords and scores) be displayed and be useful?
** "Useful" means can the info help the user make a decision on who to select to share this webpage?
* Can the information be displayed be used to help the users learn more about their friends?
I am looking for 2 to 3 concept designs.
The call to action I am seeking is when that info is displayed is for the user to learn more about their friend and decide if they should send them a note about the web page.