Concept Connect an overview a review a new media design project by Shiraz Iqbal at NID GN powered by Processing. 2012
There is a story of a place that was a haven for creative people to interact, connect and bond over a shared love of their work. The legend tells of a college campus in Ahmedabad where collaboration was an everyday thing and cross disciplinary projects were commonplace. As the institute expanded, schedules became tighter with new technology and much time passed, the early compartments of design disciplines that students were put into became rigid boxes that very few very even poke their heads out of throughout their time at the institute. Yes, there is so much work, so little time and so many students across the three NID campuses that it can be daunting to set out to find a collaborator these days. It is just simpler to work alone or at most with others you see in class every day and finish off your work for the juries. But what if everytime you set out to work on a project there was somewhere at hand where you could find out what connected work was happening at your very own institute? Forget researching online databases, why shouldn’t you have an easy way to start out with the projects of the people around you? Enter Concept Connect.
one a visual database of all projects [...] that is easy and fun to explore. connections between projects [are exposed]. [It] seeks to break down the barriers of organization by design discipline
the solution
Concept Connect is envisioned to be an online portal to which you can sign in using your NID student account either on a computer or a mobile device. It enables an easy alternative form of social networking within the NID community across all campuses. In the interactive information visualization, the user encounters a mass of interactive life-buoy like objects bobbing about the screen. Each donut/buoy represents one project within the NID community. Connections between projects are represented as strings which stretch & cause connected projects to be dragged along as the user selects and moves his project of choice across the screen.
Projects are added in real time and each one is automatically categorized by knowledge taxonomy for ease of access from a rational scientific perspective. These knowledge categories have nothing to do with the traditional organisation by design discipline. Concept connect seeks to break down such barriers.
Fig 1. Cropped screenshot : [...] each donut/buoy represents one project... Connections between projects are represented as strings... Projects are added in real time, and [...] automatically categorized by knowledge taxonomy
review
two
SEE BY CATEGORY
CHAT+COLLABORATE
Currently when the user hovers over a node, the concept summary of the project corresponding to that node is retrieved using a boolean search and displayed with minimal lag. Fig 2. The area at the bottom of the screen where information about the selected project is displayed
LOGOUT
Concept
Connect
COLLABORATIVE SOCIAL NETWORKS
detailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion
conceptual links with other projects
machismo WHO status
masculinity
sex education
love
gender
identity
project name
Within the Processing environment, the results returned by each Alchemy query are stored in a project class and then appended to an XML file . Every time there is a new entry, processing reloads the contents of this XML file into a set of project details variables that corresponds to a parallel set of visual node variables.
MY PROJECTS
NGO
Once a user inputs a project’s details via a form field, it is sent to the Alchemy API that uses a semantic text processing engine to extract keywords and concepts. Alchemy also returns a broad category to which the text belongs. Current support returns one of the following : arts & entertainment, business, computer & internet, culture & politics, gaming, health, law & crime, religion, recreation, science & technology, sports and weather.
Upon review it seems superfluous the separation between the community, concept and connect screens. Instead, following login, the user is presented directly with the visualization screen albeit with some modifications. The layout of the screen is modified to the following structure with a list of experience management options above and a split information display at the bottom of the screen. This frees up a significant chunk of the screen for the project nodes.
UN Declaration
Concept connect is founded on user data sharing. Consequently the opening screen presents the user with three options : add Concept, Connect projects, Community engage. The first option takes you to an entry form where you can enter details about a project you’re working on to add it to Concept Connect, the second one takes you to the interactive data visualization that is at the heart of Concept Connect and the third one lets you interact with the virtual community of users.
children
overview
hope
Indian woman
violence swear words bharatiya nari
tradition
Diagram 1. Revised layout to accomodate a large mass of projects + bring all connected options into the same screen space
When the user hovers over a node, in addition to the concept summary, a keyword cloud is generated on the bottom right that lists concepts that are common between that project and all other projects on the screen. The stronger the link, the heavier the display font weight. When any of the overhead options (along the top of the screen) is clicked, a translucent overlay menu is displayed on top of the visualization. The add project form is moved to within the “my projects” option. Within this menu the user can select to add projects, actively link one of their projects to another user’s project (pending approval from that user so that once approval is received, the link is shown in the visualization as an active one) or give credit to another user who is collaborating with him/her. Additionally it is suggested that the Processing.js environment for web based visualizations be used solely for visualizations in the beta testing version with all database functionality being moved to a mySQL database.
overview
review
three
If a node is clicked, then the keyword list of that project is matched with that of all the other projects. A weighted list of projects which have the same keyword is then displayed. The more the number of matching keywords, the greater the correlation and then larger the font size in which the name of the related project is displayed. Also concept connect draws on-screen these links as threads which cause the connected projects to be dragged along with the selected project.
If a node is clicked, then the names of the projects that are linked with that project are displayed in the bottom right hand of the screen, along with the visual links being displayed in the visualization. The project names and nodes are coloured as per their knowledge taxonomy on selection. SEE BY CATEGORY
CHAT+COLLABORATE
MY PROJECTS
LOGOUT
Concept
Connect
COLLABORATIVE SOCIAL NETWORKS
‘project name’
linked to :
detailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion
How to Become a Woman? Against the Dying of the Light: Sustaining Live Social Games
Across Boundaries: Idealising Home
Web-Based Design Education: A New Media Perspective
Diagram 2. Once a project is dragged, the other projects it could be linked to are shown, along with a weighted display of the names of those projects. Weightage is by the strength of the conceptual link determined by Concept Connect.
Fig 3. The projects that have links to the selected one displayed showing the strength of correlation
Using the broad category field that each project has been assigned by Alchemy (see the top of this page) the number of projects belonging to each category is graphed in a bar graph on the right of the screen.
The very first management option on the top left, “see by category” is where the prominent bar graph from the first iteration of concept connect has been moved to. On selecting this option, the knowledge taxonomies are revealed. These are selectable to allow visual differentiation as shown below. SEE BY CATEGORY
CHAT+COLLABORATE
MY PROJECTS
LOGOUT
Computer science, information & general works Philosophy and psychology Religion Social sciences Language Science Technology Arts & recreation Literature History & geography SHOW SUB-CATEGORIES SHOW CATEGORICAL LANDSCAPE
Concept
Connect
COLLABORATIVE SOCIAL NETWORKS
masculinity
sex education
love
gender
identity
WHO status
NGO
machismo
UN Declaration
conceptual links with other projects children
project name detailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion
hope
Indian woman
violence swear words bharatiya nari
tradition
Diagram 3. Knowledge taxonomy bar graph within the “see by category” option.
Fig 4 .
Significant changes have come about in the proposed layout. The system of knowledge taxonomy has been revised to the Dewey decimal system which is used in standard library classification. Additionally next to each category is a tick box which turns on and off the selective colouring of those projects so they can be easily visually investigated.
review
four
Following the model of systems like Chore Wars “ [which] lets you claim experience points for household chores. By getting other people in your house or workplace to sign up to the site, you can assign experience point rewards to individual tasks and chores, and see how quickly each of you levels up. ” “... it's completely up to you what you do with the data. You could use it just for a few weeks, to get a sample reading of your [gameworld and players]..” (which is the most immediate functionality that Concept Connect affords) “... or award treats for levelling up, or allow them to 'spend' in-game gold pieces on toys and games in the real world“ (Communally decided rewards) Once the community figures out universally acceptable systems of exchange and recognition for services rendered, it is expected that a tool such as this will optimise the time spent acquiring skill sets, and contribute to higher quality of finished projects in the college. The community of students then becomes a game world.
CHAT+COLLABORATE
Computer science, information & general works Philosophy and psychology Religion Social sciences Language Science Technology Arts & recreation Literature History & geography
MY PROJECTS
LOGOUT
Philosopy Metaphysics Epistemology Parapsychology & Occultism Philosophical Schools of Thought Psychology Logic Ethics Ancient, medieval, and Eastern philosophy Modern Western Philosophy
Metaphysics Ontology Cosmology (Philosophy of nature) Space Time Change Structure Force and energy Number and quantity
SHOW SUB-CATEGORIES SHOW CATEGORICAL LANDSCAPE
Concept
Connect
COLLABORATIVE SOCIAL NETWORKS
conceptual links with other projects
machismo WHO status
masculinity
sex education
love
gender
identity
project name detailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion
NGO
The prototype offers a Community Engage option in the opening screen prior to entering the visualzation which is an avatar management center. (this feature has not been implemented in the prototype) Each student creates a virtual character that can gain experience points for collaboration & contributions to others' projects. Here, students can forge new project links, acknowledge a contribution made to their project by others and select avatar (personal) attributes that he/she wants to work on developing. These could be anything viz. graphic design skills, electronics, hacking skills etc.
SEE BY CATEGORY
UN Declaration
As this is the secondary form of interaction with the data., each category line on the graph is interactive. If clicked, Concept Connect highlights all the projects in that category for easy access.
children
overview
hope
Indian woman
tradition
Diagram 4. Knowledge taxonomy list opens on clicking the show sub-categories option, allowing the user to narrow his/her search. Clicking the Concept Connect logo takes you back to the main visualization, alternatively unselecting the show sub-categories option will take you back to the overlay view shown on the previous page
If the “Show sub-categories” option is selected, the visualization is suppressed to avoid overcrowding and the user gets to select just what kinds of Philosophy projects for example they would like to see highlighted. This is in accordance with Tidwell’s assertion that “an interface must provide a fluid environment for reflective cognition and higher order thought” (Tidwell) The second button provided within this menu, “Show Categorical Landscape” maps a “kind of conceptual grocery store” (Lin 1992 & Card 1999) on screen. The concept nodes re-arrange themselves so that related ones are spatially near and form a map (since one project may be conceptually close to multiple knowledge categories) SEE BY CATEGORY
CHAT+COLLABORATE
MY PROJECTS
LOGOUT
SHOW CATEGORICAL LANDSCAPE
Religion
Arts & recreation Language
Computer science, information & general works
History & geography
Social sciences Philosophy and psychology
Concept
Connect
COLLABORATIVE SOCIAL NETWORKS
PROJECT INSPIRED BY discussions with Dr. Jignesh Khakhar & Girish Krishnan BUILT ON D Davis's 2010 sketch 'Directed Graph', Dynamic Relaxation INTERFACE DEVELOPED ON the ControlP5 library by Andreas Schlegel, 2012 PROTOTYPE CODED BY Shiraz Iqbal January 2013.
violence swear words bharatiya nari
Science
Technology
Literature
masculinity
sex education
love
gender
identity
WHO status
NGO
machismo
UN Declaration
conceptual links with other projects children
project name detailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion
hope
Indian woman
violence swear words bharatiya nari
tradition
Diagram 5. The conceptual grocery store
The options made available under “my projects” and “chat
review
references review
and collaborate” are shown in the diagrams below :
Card, Stuart K., Jock D. Mackinlay, and Ben Shneiderman. Readings in information visualization: using vision to think. Morgan Kaufmann, 1999.
Tidwell, Jenifer. Designing interfaces. O'Reilly Media, Incorporated, 2010.
CHAT+COLLABORATE
MY PROJECTS
LOGOUT
ADD A PROJECT EDIT PROJECTS CONFIRM A SUGGESTED LINK ACKNOWLEDGE CONTRIBUTIONS
Concept
Connect
COLLABORATIVE SOCIAL NETWORKS
WHO status
masculinity
sex education
love
gender
identity
machismo
NGO
conceptual links with other projects
detailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion
UN Declaration
project name
children
Lin, Xia. "Visualization for the document space." Visualization, 1992. Visualization'92, Proceedings., IEEE Conference on. IEEE, 1992.
SEE BY CATEGORY
hope
Indian woman
violence swear words bharatiya nari
tradition
Diagram 6. The options available under “My Projects” option
SEE BY CATEGORY
CHAT+COLLABORATE
MY PROJECTS
LOGOUT
CHAT LIST
Prateekshankar Dixit Girish Krishnan
UNREAD CHATS
May Pillai
6
CAPTURE SCREENSHOT
Suganth Chellamuthu Suyog Patel
SHARE SCREENSHOT
Jignesh Khakhar
SHARE ATTACHMENT
Tania Jain
CREDIT RECEIVED
Me
2
so I think I can help you with the graphics on this project
Prateek
Alright specifically i think your logo design project was excellent and I’d like some input in that direction
Concept
Connect hmm... do you mean _
COLLABORATIVE SOCIAL NETWORKS
WHO status
masculinity
sex education
love
gender
identity
machismo
NGO
conceptual links with other projects UN Declaration
detailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion
children
project name
hope
Indian woman
violence swear words bharatiya nari
tradition
Diagram 6. The options available under “My Projects” option
Gamification has been hinted at in this redesign of the interface. with the introduction of credits received for contributions and acknowledgement given for contributions. However, prior to developing the game world further, the interface described in the review needs to be prototyped and tested.
APPENDICES follow where each of the diagrams presented in the review section have been reproduced at a larger size so details are visible.
five
appendix SEE BY CATEGORY
six CHAT+COLLABORATE
MY PROJECTS
LOGOUT
Concept
Connect
COLLABORATIVE SOCIAL NETWORKS
WHO status
masculinity
sex education
love
gender
identity
machismo
NGO
detailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion
UN Declaration
conceptual links with other projects children
project name
hope
Indian woman
violence swear words bharatiya nari
tradition
Diagram 1 & Diagram 2 SEE BY CATEGORY
CHAT+COLLABORATE
MY PROJECTS
LOGOUT
Concept
Connect
COLLABORATIVE SOCIAL NETWORKS
‘project name’
linked to :
detailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion
How to Become a Woman? Against the Dying of the Light: Sustaining Live Social Games
Across Boundaries: Idealising Home
Web-Based Design Education: A New Media Perspective
appendix SEE BY CATEGORY
seven CHAT+COLLABORATE
MY PROJECTS
LOGOUT
Computer science, information & general works Philosophy and psychology Religion Social sciences Language Science Technology Arts & recreation Literature History & geography SHOW SUB-CATEGORIES SHOW CATEGORICAL LANDSCAPE
Concept
Connect
COLLABORATIVE SOCIAL NETWORKS
WHO status
masculinity
sex education
love
gender
hope
Indian woman
violence swear words bharatiya nari
identity
machismo
NGO
detailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion
UN Declaration
conceptual links with other projects children
project name
tradition
Diagram 3 & Diagram 4 SEE BY CATEGORY
CHAT+COLLABORATE
Computer science, information & general works Philosophy and psychology Religion Social sciences Language Science Technology Arts & recreation Literature History & geography
MY PROJECTS
LOGOUT
Philosopy Metaphysics Epistemology Parapsychology & Occultism Philosophical Schools of Thought Psychology Logic Ethics Ancient, medieval, and Eastern philosophy Modern Western Philosophy
Metaphysics Ontology Cosmology (Philosophy of nature) Space Time Change Structure Force and energy Number and quantity
SHOW SUB-CATEGORIES SHOW CATEGORICAL LANDSCAPE
Concept
Connect
COLLABORATIVE SOCIAL NETWORKS
masculinity
sex education
gender
identity
WHO status
love
NGO
machismo
UN Declaration
detailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion
conceptual links with other projects children
project name
hope
Indian woman
swear words bharatiya nari violence
tradition
appendix SEE BY CATEGORY
eight CHAT+COLLABORATE
MY PROJECTS
SHOW CATEGORICAL LANDSCAPE Computer science, information & general works Arts & recreation Philosophy and psychology Religion Social sciences Language Language Science Technology Arts & recreation Literature History & geography Social sciences SHOW SUB-CATEGORIES Philosophy and psychology
LOGOUT Religion
Computer science, information & general works
History & geography
SHOW CATEGORICAL LANDSCAPE
Concept
Technology
Literature
machismo WHO status
masculinity
sex education
love
gender
identity
detailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion
NGO
conceptual links links with with other other projects projects conceptual UN Declaration
project name name project
children
Connect
COLLABORATIVE SOCIAL NETWORKS
Science
hope
Indian woman
violence swear words bharatiya nari
tradition
Diagram 5 & Diagram 6 SEE BY CATEGORY
CHAT+COLLABORATE
MY PROJECTS
LOGOUT
ADD A PROJECT EDIT PROJECTS CONFIRM A SUGGESTED LINK ACKNOWLEDGE CONTRIBUTIONS
Concept
Connect
COLLABORATIVE SOCIAL NETWORKS
masculinity
sex education
love
gender
identity
WHO status
NGO
machismo
UN Declaration
detailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion
conceptual links with other projects children
project name
hope
Indian woman
violence swear words bharatiya nari
tradition
appendix SEE BY CATEGORY
nine CHAT+COLLABORATE
MY PROJECTS
LOGOUT
Computer science, information & general CHAT works LIST Philosophy and psychology 6 UNREAD CHATS Religion Social sciences CAPTURE SCREENSHOT Language SHARE SCREENSHOT Science SHARE ATTACHMENT Technology Arts & recreation 2 CREDIT RECEIVED Literature History & geography SHOW SUB-CATEGORIES SHOW CATEGORICAL LANDSCAPE
Concept
Connect
COLLABORATIVE SOCIAL NETWORKS
masculinity
sex education
gender
identity
WHO status
love
NGO
machismo
children
detailed conceptual information about the project as provided by the student along with the contact details of the student. this will be a scrollable text box with selectable text for easy copy pasting into a chat window for discussion
UN Declaration
conceptual links with other projects
project name
hope
Indian woman
violence swear words bharatiya nari
tradition
Diagram 7
fin.
an alternative social space for cross disciplinary design collaboration
Concept Connect Interface developed on : the ControlP5 library by Andreas Schlegel, 2012 Visualization built on : Daniel Davis's 2010 sketch 'Directed Graph', Dynamic Relaxation Project Inspired by : discussions with Dr. Jignesh Khakhar & Girish Krishnan Prototype coded by : Shiraz Iqbal January 2013.