The project details elements of a web-based tool that provides easy look-up and access to all available mobile-ui-elements for designers and front-end developers.

1. + 1
Team Panda
Andrew Chen | Bruno Torres | Janet Huang
Jimmy Wang | MJ Lee | Surbhi Dangi
Carnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013

2. + 2
Agenda
 Problem and Approach
 Demo
 Features
 Landing Page
 Design Page
 Develop Page
 Future Enhancements
 Individual Contributions
 References
Carnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013

3. + Problem 3
Current mobile HCI resources are scattered across the web
Carnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013

4. + 4
Approach: Tag Cloud
3D rotating tag cloud of HCI element categories for quick browsing and selection
Carnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013

5. + 5
Demo
http://bit.ly/O3okuH
Carnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013

6. Landing Page
+ 3 position slider for
6
filtering examples by user-
type
Catch name and logo Button for users to add
at top left new content
3D rotating tag cloud for browsing HCI element
Sort order selection for the listed examples. Default is
categories. Users can select tags to filter the examples
by popularity.
below.
Examples are color-coded by user type (pink/blue) and
Search bar directly under central focus of site. difficulty. More difficult examples are darker in color.
Searches will filter both the tag cloud and example
results.
Popularity of example indicated by number of votes and
boldness of color.
Ordered list of HCI examples filtered by user-type and tag
selection. Infinite scrolling loads more elements dynamically.
Short description of example
User avatar and username of the
originating creator.
Tags associated with the example
User avatar and username of the
originating creator.
Easily share examples on popular
social networks
Carnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013

7. + Design Page 7
Carnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013

8. + Develop Page 8
Carnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013

9. + 9
Future Enhancements
versions of application
classify and tag sources
Support for different
platforms
Carnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013

10. + Individual Contributions 10
Surbhi MJ
Carnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013

11. + Individual Contributions 11
Andrew Bruno
Poster for Tech Scenarios
Showcase
for the
application
References
Carnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013

12. + Individual Contributions 12
Jimmy Janet
Themes
Layout
Icons
Tag Cloud
Tag Cloud
Carnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013

13. + 13
References
[1] Daniel Ritchie, Ankita Arvind Kejriwal, and Scott R. Klemmer. 2011. d.tour: style-based
exploration of design example galleries. In Proceedings of the 24th annual ACM symposium
on User interface software and technology (UIST '11). ACM, New York, NY, USA, 165-174.
DOI=10.1145/2047196.2047216 http://doi.acm.org/10.1145/2047196.2047216
[2] Ranjitha Kumar, Jerry O. Talton, Salman Ahmad, and Scott R. Klemmer. 2011. Bricolage:
example-based retargeting for web design. In Proceedings of the 2011 annual conference on
Human factors in computing systems (CHI '11). ACM, New York, NY, USA, 2197-2206.
DOI=10.1145/1978942.1979262 http://doi.acm.org/10.1145/1978942.1979262
[3] Joel Brandt, Mira Dontcheva, Marcos Weskamp, and Scott R. Klemmer. 2010. Example-
centric programming: integrating web search into the development environment. In
Proceedings of the 28th international conference on Human factors in computing systems
(CHI '10). ACM, New York, NY, USA, 513-522.
DOI=10.1145/1753326.1753402http://doi.acm.org/10.1145/1753326.1753402
[4] Brian Lee, Savil Srivastava, Ranjitha Kumar, Ronen Brafman, and Scott R. Klemmer.
2010. Designing with interactive example galleries. In Proceedings of the 28th international
conference on Human factors in computing systems (CHI '10). ACM, New York, NY, USA,
2257-2266. DOI=10.1145/1753326.1753667 http://doi.acm.org/10.1145/1753326.1753667
Carnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013