Skip to main content
SpringerLink
Log in

Poirot: A Web Inspector for Designers

  • Chapter
  • First Online:
Design Thinking Research

Part of the book series: Understanding Innovation ((UNDINNO))

Abstract

To better understand the issues designers face as they interact with developers and use developer tools to create websites, we conducted a formative investigation consisting of interviews, a survey, and an analysis of professional design documents. Based on insights gained from these efforts, we developed Poirot, a web inspection tool for designers that enables them to make style edits to websites using a familiar graphical interface. We compared Poirot to Chrome DevTools in a lab study with 16 design professionals. We observed common problems designers experience when using Chrome DevTools and found that when using Poirot, designers were more successful in accomplishing typical design tasks (97–63%). In addition, we found that Poirot had a significantly lower perceived cognitive load and was overwhelmingly preferred by the designers in our study.

This is a preview of subscription content, log in via an institution to check access.

Access this chapter

Log in via an institution
Chapter
USD 29.95
Price excludes VAT (USA)
  • Available as PDF
  • Read on any device
  • Instant download
  • Own it forever
eBook
USD 139.00
Price excludes VAT (USA)
  • Available as EPUB and PDF
  • Read on any device
  • Instant download
  • Own it forever
Softcover Book
USD 179.99
Price excludes VAT (USA)
  • Compact, lightweight edition
  • Dispatched in 3 to 5 business days
  • Free shipping worldwide - see info
Hardcover Book
USD 179.99
Price excludes VAT (USA)
  • Durable hardcover edition
  • Dispatched in 3 to 5 business days
  • Free shipping worldwide - see info

Tax calculation will be finalised at checkout

Purchases are for personal use only

Institutional subscriptions

References

  • Alimadadi, S., Sequeira, S., Mesbah, A., & Pattabiraman, K. (2014). Understanding JavaScript event-based interactions. In Proceedings of the 36th International Conference on Software Engineering (ICSE 2014) (pp. 367–377). ACM, New York, NY, USA. https://doi.org/10.1145/2568225.2568268.

  • Amiri, F. (2011). Programming as design: The role of programming in interactive media curriculum in art and design. International Journal of Art & Design Education, 30(2), 200–210.

    Article  Google Scholar 

  • Blackwell, A. F. (2002). First steps in programming: A rationale for attention investment models. In Proceedings of the IEEE Symposia on Human-Centric Computing Languages and Environments. IEEE, 2.

    Google Scholar 

  • Bolin, M., Webber, M., Rha, P., Wilson, T., & Miller, R. C. (2005). Automation and customization of rendered web pages. In Proceedings of the 18th Annual ACM Symposium on User Interface Software and Technology (UIST ’05) (pp. 163–172). ACM, New York, NY, USA. https://doi.org/10.1145/1095034.1095062.

  • Burg, B., Ko, A. J., & Ernst, M. D. (2015a). Explaining visual changes in web interfaces. In Proceedings of the 28th Annual ACM Symposium on User Interface Software & Technology (pp. 259–268). ACM.

    Google Scholar 

  • Burg, B., Ko, A. J., & Ernst, M. D. (2015b). Explaining visual changes in web interfaces. In Proceedings of the 28th Annual ACM Symposium on User Interface Software & Technology (UIST ’15) (pp. 259–268). ACM, New York, NY, USA. https://doi.org/10.1145/2807442.2807473.

  • Cai, D., Yu, S., Wen, J.-R., & Ma, W.-Y. (2003). Vips: a vision-based page segmentation algorithm.

    Google Scholar 

  • Chakrabarti, D., Kumar, R., & Punera, K. (2008). A graph-theoretic approach to webpage segmentation. In Proceedings of the 17th international conference on World Wide Web (pp. 377–386). ACM.

    Google Scholar 

  • Chang, K. S.-P. & Myers, B. A. (2012a). WebCrystal: Understanding and reusing examples in web authoring. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 3205–3214). ACM.

    Google Scholar 

  • Chang, K. S.-P. & Myers, B. A. (2012b). WebCrystal: Understanding and Reusing Examples in Web Authoring. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI ’12) (pp. 3205–3214). ACM, New York, NY, USA. https://doi.org/10.1145/2207676.2208740.

  • Chilana, P. K., Alcock, C., Dembla, S., Ho, A., Hurst, A., Armstrong, B., & Guo, P. J. (2015). Perceptions of non-CS majors in intro programming: The rise of the conversational programmer. In 2015 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC) (pp. 251–259). IEEE.

    Google Scholar 

  • Dorn, B., & Guzdial, M. (2006). Graphic designers who program as informal computer science learners. In Proceedings of the second international workshop on Computing education research (pp. 127–134). ACM.

    Google Scholar 

  • Dorn, B., & Guzdial, M. (2010a). Discovering computing: perspectives of web designers. In Proceedings of the Sixth international workshop on Computing education research (pp. 23–30). ACM.

    Google Scholar 

  • Dorn, B., & Guzdial, M. (2010b). Learning on the job: characterizing the programming knowledge and learning strategies of web designers. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 703–712). ACM.

    Google Scholar 

  • Fitzgerald, M. J. et al. (2008). CopyStyler: Web design by example. Ph.D. Dissertation. Massachusetts Institute of Technology.

    Google Scholar 

  • Frost, B. (2016). Atomic design.

    Google Scholar 

  • Fujima, J., Lunzer, A., Hornbæk, K., & Tanaka, Y. (2004). Clip, connect, clone: Combining application elements to build custom interfaces for information access. In Proceedings of the 17th Annual ACM Symposium on User Interface Software and Technology (UIST ’04) (pp. 175–184). ACM, New York, NY, USA. https://doi.org/10.1145/1029632.1029664.

  • Goodman, E., Stolterman, E., & Wakkary, R. (2011). Understanding interaction design practices. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI ’11) (pp. 1061–1070). ACM, New York, NY, USA. https://doi.org/10.1145/1978942.1979100.

  • Gould, J. D., & Lewis, C. (1985). Designing for usability: Key principles and what designers think. Communication ACM, 28(3), 300–311. https://doi.org/10.1145/3166.3170.

  • Head, A., & Hearst, M. A. (n. d.). Tutorons: Generating context-relevant, on-demand explanations and demonstrations of online code. ([n. d.]).

    Google Scholar 

  • Herring, S. R., Chang, C.-C., Krantzler, J., & Bailey, B. P. (2009). Getting inspired!: Understanding how and why examples are used in creative design practice. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 87–96). ACM.

    Google Scholar 

  • Hibschman, J., & Zhang, H. (2015). Unravel: Rapid web application reverse engineering via interaction recording, source tracing, and library detection. In Proceedings of the 28th Annual ACM Symposium on User Interface Software & Technology (UIST ’15) (pp. 270–279). ACM, New York, NY, USA. https://doi.org/10.1145/2807442.2807468.

  • Hibschman, J., & Zhang, H. (2016a). Telescope: Fine-tuned discovery of interactive web UI feature implementation. In Proceedings of the 29th Annual Symposium on User Interface Software and Technology (pp. 233–245). ACM.

    Google Scholar 

  • Hibschman, J., & Zhang, H. (2016b). Telescope: Fine-tuned discovery of interactive web UI feature implementation. In Proceedings of the 29th Annual Symposium on User Interface Software and Technology (UIST ’16) (pp. 233–245). ACM, New York, NY, USA. https://doi.org/10.1145/2984511.2984570.

  • Hong, J., & Wong, J. (2006). Marmite: End-user programming for the web (CHI ’06) (pp. 1541–1546). ACM.

    Google Scholar 

  • Ko, A. J., Myers, B. A., & Aung, H. H. (2004). Six learning barriers in end-user programming systems. In 2004 IEEE Symposium on Visual Languages-Human Centric Computing (pp. 199–206). IEEE.

    Google Scholar 

  • Lieber, T., Brandt, J. R., & Miller, R. C. (2014). Addressing misconceptions about code with always-on programming visualizations. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI ’14) (pp. 2481–2490). ACM, New York, NY, USA. https://doi.org/10.1145/2556288.2557409.

  • Lim, S. (2017). Ply: Visual regression pruning for web design source inspection. In Proceedings of the 2017 CHI Conference Extended Abstracts on Human Factors in Computing Systems (CHI EA ’17) (pp. 130–135). ACM, New York, NY, USA. https://doi.org/10.1145/3027063.3048427.

  • Norman, D. (2013). The design of everyday things: Revised and expanded edition. Constellation.

    Google Scholar 

  • Oney, S., & Myers, B. (2009). FireCrystal: Understanding interactive behaviors in dynamic web pages. In 2009 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC) (pp. 105–108). https://doi.org/10.1109/VLHCC.2009.5295287.

  • Park, T. H., Dorn, B., & Forte, A. (2015). An analysis of HTML and CSS syntax errors in a web development course. ACM Transactions on Computing Education (TOCE), 15(1), 4.

    Google Scholar 

  • Park, T. H., Saxena, A., Jagannath, S., Wiedenbeck, S., & Forte, A. (2013a). OpenHTML: Designing a transitional web editor for novices. In CHI ’13 Extended Abstracts on Human Factors in Computing Systems (CHI EA ’13) (pp. 1863–1868). ACM, New York, NY, USA. https://doi.org/10.1145/2468356.2468690.

  • Park, T. H., Saxena, A., Jagannath, S., Wiedenbeck, S., & Forte, A. (2013b). Towards a taxonomy of errors in HTML and CSS. In Proceedings of the Ninth Annual International ACM Conference on International Computing Education Research (ICER ’13) (pp. 75–82). ACM, New York, NY, USA. https://doi.org/10.1145/2493394.2493405.

  • Putnam, C., Reiner, A., Ryou, E., Caputo, M., Cheng, J., Allen, M., et al. (2016a). Human-centered design in practice: Roles, definitions, and communication. Journal of Technical Writing and Communication, 46(4), 446–470.

    Article  Google Scholar 

  • Putnam, C., Reiner, A., Ryou, E., Caputo, M., Cheng, J., Allen, M., et al. (2016b). Human-centered design in practice: Roles, definitions, and communication. Journal of Technical Writing and Communication, 46. https://doi.org/10.1177/0047281616653491.

  • Rode, J., Howarth, J., Pérez-Quiñones, M. A., & Rosson, M. B. (2005). An end-user development perspective on state-of-the-art web development tools.

    Google Scholar 

  • Rode, J., & Rosson, M. B. (2003). Programming at runtime: Requirements amp; paradigms for nonprogrammer web application development. In Proceedings of IEEE Symposium on Human Centric Computing Languages and Environments, 2003 (pp. 23–30). https://doi.org/10.1109/HCC.2003.1260198.

  • Rosson, M. B., Ballin, J., & Rode, J. (2005). Who, what, and how: A survey of informal and professional web developers. In 2005 IEEE Symposium on Visual Languages and Human-Centric Computing (pp. 199–206). IEEE.

    Google Scholar 

  • Shneiderman, B. (1983). Direct manipulation: A step beyond programming languages. Computer, 8, 57–69.

    Article  Google Scholar 

  • Wang, Y. D., & Zahadat, N. (2009). Teaching web development in the web 2.0 era. In Proceedings of the 10th ACM conference on SIG-information technology education (pp. 80–86). ACM.

    Google Scholar 

  • Wolf, T. V., Rode, J. A., Sussman, J., & Kellogg, W. A. (2006). Dispelling “Design” as the black art of CHI. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI ’06) (pp. 521–530). ACM, New York, NY, USA. https://doi.org/10.1145/1124772.1124853.

Download references

Author information

Authors and Affiliations

  1. Department Computer Science, Stanford School of Engineering, 475 Via Ortega, Stanford, CA, 94305, USA

    Kesler Tanner, Naomi Johnson & James A. Landay

Authors
  1. Kesler Tanner
    View author publications

    You can also search for this author in PubMed Google Scholar

  2. Naomi Johnson
    View author publications

    You can also search for this author in PubMed Google Scholar

  3. James A. Landay
    View author publications

    You can also search for this author in PubMed Google Scholar

Corresponding author

Correspondence to Kesler Tanner .

Editor information

Editors and Affiliations

  1. Hasso Plattner Institute for Digital Engineering, University of Potsdam, Potsdam, Germany

    Christoph Meinel

  2. Stanford University, Stanford, CA, USA

    Larry Leifer

Rights and permissions

Reprints and permissions

Copyright information

© 2020 Springer Nature Switzerland AG

About this chapter

Check for updates. Verify currency and authenticity via CrossMark

Cite this chapter

Tanner, K., Johnson, N., Landay, J.A. (2020). Poirot: A Web Inspector for Designers. In: Meinel, C., Leifer, L. (eds) Design Thinking Research . Understanding Innovation. Springer, Cham. https://doi.org/10.1007/978-3-030-28960-7_14

Download citation

Publish with us

Policies and ethics

Search

Navigation