bridget – im facilitated collaboration tool for visual designers miaoqi zhu, hci/d 2009 the school...
TRANSCRIPT
![Page 1: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/1.jpg)
Bridget – IM facilitated Collaboration tool for visual designers
Miaoqi Zhu, HCI/d 2009The School of Informatics,
Indiana University BloomingtonMay 11th, 2009
![Page 2: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/2.jpg)
Core problem
Can we talk about this more ?
Send
![Page 3: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/3.jpg)
Core problem
I am sorry I thought you were gone…
Send
![Page 4: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/4.jpg)
Core problem
What kind of red do you want ?
Send
![Page 5: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/5.jpg)
Core problem
I cannot design this, it is too hard !
Send
![Page 6: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/6.jpg)
Core problem
I am sorry, can you send me the
file again?Send
![Page 7: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/7.jpg)
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
![Page 8: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/8.jpg)
Research• Literature Review• Survey• User Interviews• Participation Observation
![Page 9: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/9.jpg)
Exemplar research
![Page 10: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/10.jpg)
Reduce Complexity
Designers’ collaboration
Status Awareness
Brainstorming
Final Production
Sharing ResourcesAnd how can IM be integrated into these?
![Page 11: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/11.jpg)
Research(2nd)
• More Literature Review• More Interviews• More Observation
![Page 12: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/12.jpg)
Exemplar research(2nd)
![Page 13: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/13.jpg)
InsightsIM is normally used to check simple/routine
tasks at the office ;
Resource: http://www.flickr.com/photos/library_of_congress/2179136411/sizes/o/
![Page 14: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/14.jpg)
InsightsVisual designers like drawing stuff on any space
to support brainstorming;
Resource: http://www.flickr.com/photos/tofu_mugwump/2465191253/sizes/o/
![Page 15: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/15.jpg)
InsightsDesigners need media and want to share ;
Resource: http://www.flickr.com/photos/maddito/887867054/sizes/o/ /
![Page 16: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/16.jpg)
InsightsMost designers have good technical skills ;
Resource: http://www.flickr.com/photos/560/2608285937/sizes/l//
![Page 17: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/17.jpg)
InsightsSocial connections are needed at work ;
Resource: http://www.flickr.com/photos/dmswart/474195730/sizes/o/
![Page 18: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/18.jpg)
InsightsUI design affects collaborator’s awareness .
Resource: http://www.flickr.com/photos/martin-kulakowski/3055870213/sizes/o/
![Page 19: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/19.jpg)
Concept Systems
Emotion Teller
Interactive awareness map
3D Office “peeping” Whiteboard DIY
Whiteboard Fun
Sketch matching
iFile Share
………
Mind Map
![Page 20: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/20.jpg)
Final Concept
IM facilitated Whiteboard
Emotion Teller
iFile ShareWhiteboard Fun
Sketch matching ……......
Mind Map
![Page 21: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/21.jpg)
Prototype – Two Workspaces
![Page 22: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/22.jpg)
Prototype – Workspace - Brainstorming
![Page 23: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/23.jpg)
Prototype – Workspace - Get it done !
![Page 24: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/24.jpg)
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
![Page 25: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/25.jpg)
Prototype – features in Brainstorming
1. Individual work area;
2. Collaboration at the same time;
3. IM provides video conferencing;
![Page 26: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/26.jpg)
Prototype – features in Final Production
1. Leave comments on colleague’s artwork at anytime
2. Comments can be retrieved by the author(s)
![Page 27: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/27.jpg)
Prototype – features in Final Production
1. Add any design tool from local PC or MAC;
2. Drag any tool to whiteboard to open it.
![Page 28: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/28.jpg)
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.
![Page 29: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/29.jpg)
Prototype – IM
1. Input messages by both typing and handwriting;
2. Control of messages receiving velocity;
3. Single or multiple chatting threads
![Page 30: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/30.jpg)
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.
![Page 31: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/31.jpg)
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
![Page 32: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/32.jpg)
Prototype – Sharing Resources
1. Confirmation requests will be sent by Bridget if your resource is shared by others
![Page 33: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/33.jpg)
Prototype – Sharing Resources
1. Users can also view how a specific file was shared in the past.
![Page 34: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/34.jpg)
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
![Page 35: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/35.jpg)
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.
![Page 36: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/36.jpg)
Usability Testing
• Paper prototypes
• 3 participants
• Scenario based tasks
![Page 37: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/37.jpg)
Usability Testing
• Positive feedback on concept
• Problems with UI elements
![Page 38: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/38.jpg)
Future directions
• Redesign the interfaces
• Develop the actual application
• Conduct more Usability Testing
• Market “Bridget”
![Page 39: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/39.jpg)
What I learned
• Understand users are important
• Various approaches to do HCI design - First reduce, then combine
• Make technology support technology
![Page 40: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/40.jpg)
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
![Page 41: Bridget – IM facilitated Collaboration tool for visual designers Miaoqi Zhu, HCI/d 2009 The School of Informatics, Indiana University Bloomington May 11](https://reader035.vdocument.in/reader035/viewer/2022070305/5513d92a55034646298b54f1/html5/thumbnails/41.jpg)
Thank you !
And Questions ?