Read Microsoft Word - Final Paper4.doc text version

Visualizing Compatibility Between People Over Variable Personality Dimensions

Noaa Avital Catherine Harrison Dept. of Electrical Engineering Dept. of Computer Science and Computer Science UC Berkeley UC Berkeley [email protected] [email protected]


Sharena Paripatyadar Dept. of Computer Science UC Berkeley [email protected]

Although many compatibility tests and dating/matching websites exist, there are very few available visualizations that actually show the compatibilities between people over the various dimensions of personality in succinct and clear ways. This is exacerbated by the numerous types of tests and the dimensions that cover the results. To address this issue we have created a web interface that allows the input of up to 20 personality dimensions and the test values of up to 4 people (the base person and 3 comparison people) that will automatically generate an image that clearly shows how compatible the people are on each dimension and give an overall sense of compatibility. Visual representation decisions were based on user tests and as such should be applicable to nearly all personality tests and dating services.

Keywords: information visualization,

Cattell, researched personality traits and came up with personality structures for categorizing people. The most famous model of personality is the Myers-Briggs Type Indicator, a model built on the writings and observations of Carl Jung by Isabel Biggs Myers and Katharine C. Briggs. This theoretically-motivated yet popular model, featuring four personality traits (or dimensions)1, spawned an outgrowth of modifications and elaborations, and has been used as a basis upon which compatibilities between people are determined. As online dating sites crop up and increase in popularity, the push to accurately match people online has increased dramatically. Type classifications such as Myers-Briggs are used to determine whether or not people would be a good match, and matches are based on tests such as these and other proprietary tests. As a result, users of the sites are presented with their matches and each match's personality type, generally given as a set of letters (such as ENTP, see footnote) indicating personality dimensions or as a paragraph of information. While this information is important to determine one's interest in a match, it is difficult to quickly gauge how compatible one is with a match and on which dimensions, especially when comparing multiple matches. This problem is magnified by the fact that different sites use different criteria and personality dimensions, sometimes over 20


compatibility, dating, web, 2D graphics, personality.


Trait and personality theories have been around in the field of psychology for many years. Many in the field, such as Gordon Allport and Raymond

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.

Expression: Extroverted vs. Introverted Perception: Sensing vs. iNtuition Processing: Thinking vs. Feeling Implementation: Judging vs. Perceiving

dimensions, to determine compatibility. This nonuniformity and vast amount of information makes comparing matches very arduous. It is this issue of a lack of clear and concise representation of one's compatibility with a match, as well as the inability to easily compare multiple matches, that motivates this work. Our image generator allows for an input of up to 20 dimensions, their corresponding types and values, (see implementation) and displays an image that takes into account the number of dimensions, the number of people being compared, and the similarities between people to easily show where people stand on every dimension and in their compatibility on the whole. We believe that this image generator can be used with nearly all online dating services and can solve the issues they have with people's inabilities to accurately discern their multi-dimensional compatibility with their given matches.


gives the user matches and expects the user to take their word for it that they are compatible, based on the eHarmony secret formula compatibility tests, and employs no visual elements in elucidating how compatible they are and over which dimensions. Instead, the site offers paragraph upon paragraph of explanation as to what the user's personality is like and what their match's personality is like on every dimension. On top of this the match's profile is also given to the user, thus introducing even more reading material and making the differentiation between matches difficult and involves a lot of reading. With eHarmony there is a huge number of dimensions, and the lack of a visual representation of the match means that users must rely solely on the user profiles they are presented with and to determine which person they are most compatible with they must do a lot of reading. This hinders quick comparisons and also hinders remembering who is who when scrolling through matches. If a user has quite a few matches they have to reread the profile to remind themselves who each person was, while a visualization could create a quick mental relationship between the match and the user's memory about them, which could save a lot of time and confusion.


As the motivation for this project was rooted in the online dating community's lack of viable visualizations for showing compatibility with matches, most of the related work lay within these sites themselves, with one notable exception.


One of the most popular dating sites that features compatibility tests given to users in order to match them with other users is eHarmony.comi. This site gives a long questionnaire that determines the user's personality type over 29 dimensions2, and uses this data to match them with other users who they deem to be compatible with them. The site


PerfectMatch.comii is a site that uses 8 dimensions to determine match compatibility. Like eHarmony, a questionnaire determines the user's personality type and uses the data to match them with other uses. PerfectMatch is different in that it gives an 8 letter3 (similar to

· · · · · ·


Social Orientation: Character, Kindness, Autonomy, Vitality, Communication Style, Conflict Resolution Extraversion: Adaptability, Emotional Energy, Romantic Passion, Dominance, Sociability, Humor Openness: Intellect, Curiosity, Artistic Passion, Physicality: Physical Energy, Sexual Passion, Appearance Goal Orientation: Industry, Ambition, Education, Organization Emotional Temperament: Self Concept, Emotional Status, Obstreperousness, Anger, Management, Mood Management Values: Spirituality, Family Goals, Traditionalism, Altruism, Family Background

Risk Taker (R)vs. Risk Averse (X) Relaxed (B) vs. High Energy (A) Optimistic (O) vs. Cautious (C) Seeks Variety (V) vs. Seeks Predictability (P) Flexible (F) vs. Structured (S) Compromiser (C) vs. Dominant (D) Temperate (T) vs. Hot (H) Extrovert (E) vs. Introvert (I)


Figure 1: eHarmony Profile

Figure 2: Breakdown



Myers-Briggs 4 letter types) personality type to the user and tells the user what other 8 letter personality types would be compatible with them. The site then presents users that are within those compatible personality types as good matches. This, even more so than eHarmony, is a situation under which visualizations would come in handy because matches are presented with compatibilities over different dimensions as equally good matches, while the user may find certain dimensions to be more or less important. In this type of situation a visualization that enumerated the dimensions and showed compatibility over each of them explicitly would be an aid in deciphering which match is more highly desirable. While PerfectMatch does show one visualization, it is not very informative. Since the site tells the user what their personality type and what personality types would be compatible with them, there is a set of types that the user would consider. The site then provides the user with a pie chart indicating the breakdown of the population of people in PerfectMatch that would be a potential match with the user, with a slice dedicated to each

personality type. While this does show the likelihood of being matched with a specific personality type if, per se, there were more people on the site of that specific type, it does not aid in finding or identifying matches in any way.

Jung Typology/Marriage Test

The only source of existing compatibility visualization that is widely available are associated with the Jung Typology testiii, which uses the same personality dimensions as the Myers-Briggs test. The Jung Marriage Testiv takes the results of the Typology test for two people and creates a series of sliders with dot placement along the sliders as indications of where on the continuum of each personality dimension each person lies. The sliders are coupled with coloring to encode a value judgment about how good or bad the match is on each dimension, and also has an aggregate percentage calculation with a value judgment associated with it. Each dimension and the value judgment associated with it is then placed in a matrix so that a look at the matrix

Figure 3: Jung/Myers-Briggs Compatibility Matrix/Sliders

shows the compatibility over each dimension, and a further look can be taken at each individual slider to see how the dot placements indicate compatibility.


Figure 4: Bar Graph prototype

To decide how the generated visualizations would look, we first figured out what is important to the user, and then brainstormed ideas of visualizations and created 12 prototypes. We then broke the problem up into 3 categories, based on the number of dimensions (1-4, 5-8, 9+). We narrowed down our prototypes to the top 3 visualizations in each category, and created a usability study of these images in order to choose our final images. Our first step was to come up with what is important to our visualization. This visualization must allow the user to see which dimensions they are compatible with a person, and if there is more than one person, see which person they are more compatible with. Using ideas from Tuftev and lecturevi, we brainstormed ideas.


The sliders (Figure 5) are similar to the bar graph as they also plot each person's score for each dimension. It is easer to see the difference between the people on this over the bar graph, but we wanted to make it clearer about what dimensions are compatible. We decided to add colors to the sliders based on value judgment. If the slider is green, the people are very compatible; if they are red then they are not similar in that dimension. Our color scale is below. (Figure 6)

Possible solutions included a bar graphs, sliders, meters, scatter plots, heat maps, radial graphs, and colored circles. The bar graph (Figure 4) shows each dimension, and plots how each person scores in that dimension. For compatibility purposes, the user cares mainly about the different between themselves and the other person, and with the bar charts the distance between the ends of the bars indicates the difference between the people over the dimension that that set of bars represents.

Figure 5: Sliders prototype

Figure 6: Color scale for value judgment of compatibility, right is very compatible, left is not compatible.

To take this a step further, we added whiskers to the sliders. (Figure 7) The whiskers come

out of the dot that represents the user, and shows the `good' range for where the other people need to lie in order to be compatible.

Figure 7: Sliders with whiskers prototype

Another prototype we made was meters. (Figure 8) These are similar to the sliders and bar graph; they display each person's personality score with a needle on the meter.

Figure 9: Scatter plot Prototype

Another image we made with a small number of dimensions in mind was a color comparison one, where each person's rating of each dimension is coded to a color, and placed on half a circle. If the two people are very similar, the circle will be one color. This color mapped circles are below (Figure 10),

Figure 8: Meter prototype

Scatter plots was another alternative. Each person's personality would be mapped to x and y coordinates on a graph. (Figure 9)

Figure 10: Circle-Halves Color Comparisons

Heat maps (figure 11) is a visualization that we thought might work for more dimensions. Each square represents one dimension, and the color corresponds to whether the person and

the user are compatible for that dimension (green if compatible, red if not).

the center is the user, and each segment is one dimension of the personality test. The difference between the user's score and the other person's score for each dimension is measured from the center, and a dot is plotted. If the person is very compatible, then all the dots will be near the center, if not, they will be near the edge. To make this graph clearer, we created colored rings based on value judgment of how compatible two people are. The resulting prototype is below.

Figure 11: Heat Map Prototype

Another visualization prototype is a line graph. (Figure 12) Similar to the sliders, it plots a point for each person's score for each dimension. The dimensions are along the x axis, and scores along the y. The scores are connected with a line for each person. The more similar the two lines are, the more compatible the people are.

Figure 13: Radial Graph Categorization

Figure 12: Line Graph Prototype

The final visualization we designed was the radial graph. This graph does not show the scores of each person's compatibility, instead, like the heat map, it just shows the difference between the user and the other person. The graph is set up so that

Due to the variable websites and compatibility tests, our image generator will need to take in a variable number of dimensions and a variable number of people. In order for our visualizations to be effective and clear, we need different visualizations for different number of dimensions. For example, a 2 dimensional compatibility diagram would need to look different than when there are 20 dimensions. We created 3 categories for the visualization, visualizations when the number of dimensions is four or less, 5-8, and more than 8. This helps us break down our problem. We looked at our prototypes, thought about visualization heuristics, and chose three top visualizations for each category to test our users with.

Top Visualizations

For 1-4 dimensions, the top visualizations that were used in our user tests are the bar graph, sliders, and sliders with whiskers. (Figure 14)

Figure 14: dimensions





Figure 16: Top Visualizations for 9 or more dimensions

The top visualizations in the 5-8 dimension category are the line graph, radial graph, and sliders without whiskers. Prototypes of these visualizations with the correct number of dimensions are below. (Figure 15)

Now that we have 9 top visualizations, we ran usability studies to find out which ones were the best.


In order to determine the best way to visualize compatibility we decided to do user testing to find out which visualization was easiest to interpret.


Figure 15: dimensions





The top visualizations for the nine or more category were heat maps, radial graphs and line graphs. (Figure 16)

Since the visualizations for each dimensional category are distinct, it was logical to have three separate user tests. One for each category of dimensions (1-4, 5-8, 9+). And, since users are supposed to use the graphs to find out who they are compatible with, the logical test was to ask them to determine differences in compatibility. To do this we first showed each user two images of a particular visualizations. We asked the user to imagine that these were the results of his or her comparison with 2 different people, in other words that each image paired the user with a different potential partner. The task was then for the user to decide which person he or she was more compatible with. Figure 17 shows an example of this user test:

Trial 5 A B

Figure 17: Sample user test. The user would be presented with this trial and select the person that is more compatible with them. In this case, they are more compatible with person B.

Each user was given 3 sets of these trails, one for each visualization type in the category. Before they began a test we would give them an example of what the visualization looks like and briefly explained what it meant. We assumed that a system like this would have a short blurb explaining what the visualization meant. As well as asking them to pick the most compatible match, for each type we timed them to see how long it took them to complete all 10 trials. We also changed the order of the trials for different users to make sure learning bias did not affect the trials. After the test we then asked for each user's subjective opinion, to find out which they thought was the easiest, which they thought was the most confusing, how it was that they went about determining the better match.


sliders without whiskers due to differences in feedback. Our more technical users preferred the sliders with whiskers and the non technical users preferred the sliders without whiskers. When asked to explain their choice, the users who chose the sliders with whiskers said they added to their ability when the people were very close to each other. But the other users said that it cluttered the visualization and confused them. They said they primarily look at the color of the bar and only if the colors are the same do they then look at the placement of the dots. They claimed that the placement is enough to determine compatibility. The accuracy and timing results were similar in both cases. Since there were more users who preferred sliders without whiskers and since our primary users are non-technical, we chose to use the sliders without whiskers. All users tested preferred the radial graphs over the line graphs, sliders and heat maps for 5-8 as well as 9+ categories. Their times also proved that the radial graphs were the easiest to understand because users were fastest and most accurate with the radial graphs. Users found the heat maps confusing because they did not clearly show which dimension each square represented and often the colors were too close to determine which is a more compatible match. Users attempted to see compatibility in the line graphs by trying to find similar shapes in the graph. However, with many dimensions users found it difficult to follow the lines. As for the sliders, the users found there were just too many of them to compare, it took a long time for them to decide, and it was difficult to get an over all picture of how compatible each couple was.


We conducted 10 interviews to determine the best visualization. This is not quite enough for statistical analysis but the subjective results were quite persuasive. In the 1-4 category it was clear that bar charts were creating an incorrect impression on the user. Due to the line down the center of the graph, users tended to think people that were on the same side were more compatible than people on opposite sides, even if they were actually closer in distance. There was some discrepancy in deciding whether we should use the sliders with whiskers or the

After seeing how overwhelming the positive response was for the radial graphs we considered using only the radial graph for all dimensions. However, a full circle for one dimension would be confusing, but it could

work for 4 or more dimensions. And due to the size of the image and the approximate size it would occupy on a website, we decided that more than 20 dimensions would be too difficult to view on the radial graph. Therefore, we decided to use the radial graph for 4-20 dimensions and to use the sliders with out whiskers for fewer than 4 dimensions.


For the radial graph we added another dot for each person that was being compared. Again, showing more that three people on this graph became very confusing and difficult to understand; therefore, we kept the limit of three potential matches, as shown in Figure 19.

For the radial graph we examined shading each sector of the pie with a color representing how compatible the couple was in that dimension, similar to the sliders. However, we found this ended up being very similar to the heat map and when the number of dimensions became large, it became difficult to differentiate between a large clump of one color and the same number of another color spread out through the chart. Also, we then decided to extend the graphs to visualize more people, and having the sector color based on if it was a good match no longer made sense, as explained below.

Multiple People

Figure 19: Comparing multiple people on the same graph in radial Zooming In Figure 19 also shows another feature we added. This is called "zooming in". When all matches fall in the green are of the radial graph, we zoon in and so discrepancies in the green area more prominently. Aggregate Once there were multiple people on a radial graph, it became more difficult to understand; therefore, when more than 2 people are compared in more than 3 dimensions and aggregate view is drawn before the full radial graph with the specific dimensional breakdown in compatibility is shown. This view is shown in Figure 20.

To visualize more people, in the sliders graphs, we extended the width of the slider and put the couples below each other, as seen in Figure 18. Each couple gets its own color to see how compatible they are in that dimension.

Figure 18: Comparing multiple people on the same graph in sliders

We found that adding more than three people per graph made the graph look cumbersome and difficult to read, thus we limited the number of potential matches to three.

Figure 20: Aggregate slider comparing 3 possible couples


To build our system we built a web applet using processing to create the image and we created a web form in order to obtain the criteria necessary.

Web Interface

Radial Graphs

The web interface build with php focused on getting from the user a series of criteria that would be necessary to display an image. The inputs we required are: · Number of dimensions · Dimension name and values · Range of possible scores for each dimension · Qualitative range of results (i.e. what is considered a Good/Med/Bad match) · 2 ­ 4 people's results The request is then interpreted by the applet and based on the number of dimensions requested it decides whether to create a slider, a radial graph or an aggregate combination.


Sliders are displayed only when there are three or less dimensions. There is one slider for each dimension. Each slider contains two dots, one for the user, and one for the person that they are comparing with for a match. The dots are placed on the slider according to their score for that dimension. The color of the slider is based value judgment for how good the match is between the two people. At the beginning, the user inputs how similar the people have to be for a `good' match, `ok' match and `bad' match. We use this information to figure out what color to use. There are six possible colors, ranging from green to yellow to red. We calculate the difference between the people, and then linearly interpolate the data the user gave about what is `good' and come up with the color for that particular slider. When comparing with more than one person, the slider expands to contain more rows. Each row contains two dots, one for the user and one for the person that they are comparing with. A legend appears, with each person's color and their identifier, so the user knows which person is which.

The radial graphs are constructed with the given data in mind for 4 or more dimensions. The number of sectors is determined by the number of dimensions of compatibility in the data, and the name of the dimension is written alongside the corresponding sector in a unique color. The graph is split into green, yellow, and red rings, where corresponding areas represent good, moderate, and bad matches, respectively. The distance of a dot in a sector from the center of the circle indicates how good the match is, and the ring it falls in (green/yellow/red) is a value judgment on that dimension. The user inputs what range of values is considered good, moderate, or bad, and the placement of the dots is normalized according to it. If only two people are being compared then the color of the dot in each sector corresponds to the color of that sector's dimension name. This makes for easy comparison with other radial graphs. However, if more than two people are compared then all of the dots that correspond with a single person are colored the same color, and that color appears in a legend near the graph along with the person's identifier. In this case all of the dimension names are colored black. Since it is possible in the event of multiple people on the graph that there is an overlap of dots in a dimension. To ensure the visibility of all dots, an overlapping case causes the dots to shift along the radius so that they are next to each other and all are visible. Many of the sites that motivated this work supply a user with multiple matches, all of whom would fall into the "good" (green) area of the graph, which would make for difficult differentiation. For that reason if all dots fall within the green area then the graph zooms into that area and is split into dark green, green, and light green instead of green, yellow, and red. This allows for a consistently clear comparison view.

Aggregate View

The aggregate view is a combination of sliders and the radial graph. Therefore, when the user wishes to see more than two people in more than three dimensions, first an overall compatibility is calculated by averaging the differences between the people in each dimension. This overall compatibility is then shown in the format of a one dimensional slider. When the user sees this he or she gets an overview of how compatible he or she is with the various potential partners. Then the user has the option to click the graph to see the specific details about the couples. Clicking takes the user to the radial layout; here the user can see compatibility in specific dimensions.


interesting avenues for future work included using this visualization as a graphical search query system. Here the user can place the dots on the graph for his or her idea mate and the query will return matches that fit those criteria. Another interesting avenue to consider would be to extend this idea to visualizing the personality type of a group. This would help people build the right types of teams as well as to help understand the team dynamics and to do personality evaluation to find the best people for each role in the team.

REFERENCES, Inc eHarmony Compatibility Matching SystemTM Protected by U.S. Pat. No. 6,735,568

ii i

After researching dating compatibility and coming up with many different ways to show the similarities of people's personalities and doing usability studies, we have implemented a successful way to visualize compatibility. We decided that the inputs to our image generator would include a scalable number of dimensions and people being compared. Because of this, we discovered that the most effective way to visualize this data is to have a different visualization for a few people and dimensions and a different one for a lot of people and dimensions. The sliders work best for a few dimensions, and radial graphs work for a lot. When we include multiple people and a lot of dimensions, an aggregate is the best way to go as too much information is overwhelming and confusing. The user is able to see more detail when they click on this aggregate. In addition, we hypothesize that users especially like to see color value judgment since all the visualizations we ended up using have a red to green scale that help the user figure out what person is most compatible.

FUTURE WORK Duet Compatibility System Featuring Dr. Pepper Schwartz


Jung Typology Test Copyright cgiwin/JungType.htm Jung Marriage Test Copyright eMatch.htm


Tufte, Edward R. The Visual Display of Quantitative Information, Graphics Press 2001 pp. 14, 95, 97, 125, 131, , 153, 169



Lectures covered in CS294-10 Spring 2006 c/o Maneesh Agrawala and Jeffrey Heer

This technology can be extended in the future in several ways. As a compatibility visual aid it can be further developed to add magnification/weight to certain dimensions which the user considers significant. It can also be advanced to handle more dimensions and more users. Some of the more


Microsoft Word - Final Paper4.doc

11 pages

Report File (DMCA)

Our content is added by our users. We aim to remove reported files within 1 working day. Please use this link to notify us:

Report this file as copyright or inappropriate


You might also be interested in

Online Dating: Sex, Love, and Loneliness : The New Yorker
Microsoft Word - Gostautait,Bucinien.doc
Microsoft Word - Final Paper4.doc