Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11 th , 2009
Mar 26, 2015
Bridget – IM facilitated Collaboration tool for visual designers
Miaoqi Zhu, HCI/d 2009The School of Informatics,
Indiana University BloomingtonMay 11th, 2009
Core problem
Can we talk about this more ?
Send
Core problem
I am sorry I thought you were gone…
Send
Core problem
What kind of red do you want ?
Send
Core problem
I cannot design this, it is too hard !
Send
Core problem
I am sorry, can you send me the
file again?Send
Any attempt to move beyond the physical should address the need to make
the technology so transparent that it does not feel like anything is lost, by
which I mean as a visual designer, I do not want to lose
the creativity from collective thinking !
- Ryan McCullah
Research• Literature Review• Survey• User Interviews• Participation Observation
Exemplar research
Reduce Complexity
Designers’ collaboration
Status Awareness
Brainstorming
Final Production
Sharing ResourcesAnd how can IM be integrated into these?
Research(2nd)
• More Literature Review• More Interviews• More Observation
Exemplar research(2nd)
InsightsIM is normally used to check simple/routine
tasks at the office ;
Resource: http://www.flickr.com/photos/library_of_congress/2179136411/sizes/o/
InsightsVisual designers like drawing stuff on any space
to support brainstorming;
Resource: http://www.flickr.com/photos/tofu_mugwump/2465191253/sizes/o/
InsightsDesigners need media and want to share ;
Resource: http://www.flickr.com/photos/maddito/887867054/sizes/o/ /
InsightsMost designers have good technical skills ;
Resource: http://www.flickr.com/photos/560/2608285937/sizes/l//
InsightsSocial connections are needed at work ;
Resource: http://www.flickr.com/photos/dmswart/474195730/sizes/o/
InsightsUI design affects collaborator’s awareness .
Resource: http://www.flickr.com/photos/martin-kulakowski/3055870213/sizes/o/
Concept Systems
Emotion Teller
Interactive awareness map
3D Office “peeping” Whiteboard DIY
Whiteboard Fun
Sketch matching
iFile Share
………
Mind Map
Final Concept
IM facilitated Whiteboard
Emotion Teller
iFile ShareWhiteboard Fun
Sketch matching ……......
Mind Map
Prototype – Two Workspaces
Prototype – Workspace - Brainstorming
Prototype – Workspace - Get it done !
Prototype – features in Brainstorming
1. Pencil for drawing;
2. Pen for writing;
3. Eraser for removing objects on the board;
4. Brush for rough painting;
5. Basic shapes (line, rectangle …)
6. Color selection
7. Move whiteboard and Zoom in/out
Prototype – features in Brainstorming
1. Individual work area;
2. Collaboration at the same time;
3. IM provides video conferencing;
Prototype – features in Final Production
1. Leave comments on colleague’s artwork at anytime
2. Comments can be retrieved by the author(s)
Prototype – features in Final Production
1. Add any design tool from local PC or MAC;
2. Drag any tool to whiteboard to open it.
Prototype – IM
1. Group people into different categories;
2. Icons for collaboration, audio/video conferencing, and mobile chatting;
3. Hide your artwork from others temporarily.
Prototype – IM
1. Input messages by both typing and handwriting;
2. Control of messages receiving velocity;
3. Single or multiple chatting threads
Prototype – Sharing Resources
1. One folder is only shared with just ONE person;
2. Drag anyone to “Share Center” panel to create a new shared folder;
3. Top part only shows the people in the current IM list.
Prototype – Sharing Resources
1. The host of each file is represented by her/his picture
2. Drag any file to “Share Center” to create a new shared resource
3. Paste URL and hit “Enter” to save website if the resource is online
Prototype – Sharing Resources
1. Confirmation requests will be sent by Bridget if your resource is shared by others
Prototype – Sharing Resources
1. Users can also view how a specific file was shared in the past.
Prototype – Status Awareness
1. Click on icon on the top left part of others’ work area to open up the widget;
2. Quick access to IM functions;
3. See status messages from social networking sites;
4. View past projects of your colleagues
Prototype – Additional features
1. Users can record collaboration process for future reference;
2. Users can also print and save sketches on the whiteboard.
3. Users can switch between projects at anytime.
Usability Testing
• Paper prototypes
• 3 participants
• Scenario based tasks
Usability Testing
• Positive feedback on concept
• Problems with UI elements
Future directions
• Redesign the interfaces
• Develop the actual application
• Conduct more Usability Testing
• Market “Bridget”
What I learned
• Understand users are important
• Various approaches to do HCI design - First reduce, then combine
• Make technology support technology
Many Thanks to
The School of Informatics
Dr. Shaowen Bardzell
Dr. Erik Stolterman
Dr. Martin Siegel
HCI/d class of 2009
Indiana Memorial Union
Cheryl Crouch
Damen Morris
Brandon Morley
Kristine Ki
Jason Gross
Anne Patterson
Thank you !
And Questions ?