White-boarding a Mobile UI Elements Repository Tool

  • 527 views
Uploaded on

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.

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
527
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. + 1 Team Panda Andrew Chen | Bruno Torres | Janet Huang Jimmy Wang | MJ Lee | Surbhi DangiCarnegie 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  ReferencesCarnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013
  • 3. + Problem 3 Current mobile HCI resources are scattered across the webCarnegie 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 selectionCarnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013
  • 5. + 5 Demo http://bit.ly/O3okuHCarnegie 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 networksCarnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013
  • 7. + Design Page 7Carnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013
  • 8. + Develop Page 8Carnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013
  • 9. + 9 Future Enhancements versions of application classify and tag sources Support for different platformsCarnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013
  • 10. + Individual Contributions 10 Surbhi MJCarnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013
  • 11. + Individual Contributions 11 Andrew Bruno Poster for Tech Scenarios Showcase for the application ReferencesCarnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013
  • 12. + Individual Contributions 12Jimmy Janet Themes Layout Icons Tag Cloud Tag CloudCarnegie 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.1753667Carnegie Mellon University Silicon Valley | Human Computer Interaction 3/15/2013