Designing a UI That Changes the World
Written by Erin Malone
Colleen Bushell joined the National Center Supercomputing Applications (NCSA) group at the University of Illinois in 1986 to design data visualizations for the research work being done at the lab. She is a pioneer in data visualization techniques and using visual design to help researchers and scientists make sense of complex information. Most of her career has been spent working on visualization techniques for science and biology.
Bushell was attending the University of Illinois at Urbana-Champaign and studying in the School of Art and Design when she extended her graduate studies a year to take advantage of the newly established computer lab. It was there that she was able to explore various techniques of computer applied design and spatial relationships of animated text and imagery.
Bushell joined the NCSA, not fully clear on how she would fit in. Once there, she became a contributing designer to a variety of visualization projects including working with Professor Edward Tufte at Yale University and others at NCSA on redesigning thunderstorm visualizations from an earlier project. Some of these images appeared in Tufte’s books on information design.
Updated thunderstorm visualization by Colleen Bushell and M. Pauline Baker from 1995. The original visualization and the revised version are both based on data generated by a simulation run on a Cray supercomputer at NCSA. The original version was done by the NCSA Visualization Group in 1989, then led by Dan Brady, and team, including Matthew Arrott, Colleen Bushell, Mark Bajuk, Jeffrey Thingvold and Jeffery Yost. The animation of a thunderstorm as it forms debuted at SIGGRAPH, the international visualization conference. A version of this image appears in Edward Tufte's book Envisioning Information.
Bushell moved to the NCSA’s software development group led by Joseph Hardin, in 1990. This team developed software applications for scientists to understand data and to collaborate across specialties. One of the projects Bushell worked on in this group was for Ping Fu who was developing software called Alpha Shapes. Bushell used her experiences making visualizations to create the interface for the application. In an interview she says, “I didn’t have any training in interface design; rather, I approached the problem from the point of view of both a graphic designer and visualization designer, and not by applying traditional interface standards.”[1] She goes on to talk about the similarities in the goals between designing visualizations and interfaces and equates them as the same design objective applied to different problems—easy to understand communication of intent. One of Ping Fu’s interns was Marc Andreesen, who invited Bushell to work on several projects with his team, including Mosaic. She helped with ideas for the interface and used her design skills to layout the features and organize everything.
When talking about those initial designs for the application, Bushell remembers, “my focus was to make the interface secondary to the primary content and to always maintain this visual hierarchy. This basic concept minimized interface clicks and visually focused on the content. I wanted it clear and not visually noisy.” Another element of the design process with the team was deciding the basic conceptual language for the actions involved. “For example, is it software that ‘brings things to you,’ such as ‘go fetch me this page,’ or does the user ask to go someplace: ‘Let me go to this website.; Do we design ‘Go to this place’ or ‘Get me this thing’?”[2] We take these kinds of things for granted today, but in the early 90s these questions were going to define whether people might think about the internet as a place and the browser as a tool of service versus some other conceptual model. Other designed elements of this first browser have also come to be expected—like being able to view the source code of a webpage and using an animated spinner (or in the case of Mosaic, the NCSA “throbber” graphic) to indicate items loading into the page. The browser, whose development started in 1991, launched in 1993 and the world was never the same.
The Mosaic browser from NCSA. UI design by Colleen Bushell. The browser was released in 1993 to the public when the web was moved into the public domain. This was the first browser that could show inline images and text instead of having to click a link to open an image out of context to the textual content. It also allowed people to view source (the raw html) and came with the throbber (in the upper right corner) that let you know pages and content were loading.
Bushell continued to teach design at the University of Illinois and several of her students worked at Netscape and Microsoft on their browsers or doing interface design for their other tools. She also continued her research position at NCSA and worked on a variety of projects over the years including work for Albert Gore’s office to facilitate collaboration between policymakers across the country.
Bushell’s careful design consideration for hierarchy, for visual noise of the application in relation to the content that would be delivered, as well as her interface choices to communicate interactions is one of the reasons the browser as a tool was so successful. The simplicity of the tool allowed its users to see and experience the power of the internet.
Footnotes
[1] Lisa Wainwright, Anne Balsamo, and Judy Malloy, New Media Futures: The Rise of Women in the Digital Arts, ed. Donna J Cox, Ellen Sandor, and Janine Fron (Urbana; Chicago; Springfield: University of Illinois Press, 2018), doi:10.5406/j.ctv8j4d3.Copy.
[2] Ibid
Bibliography
“About: VI-Bio.” vi-bio.ncsa.illinois.edu. Accessed June 24, 2021. http://vi-bio.ncsa.illinois.edu/.
Bushell, Colleen. “Center of the Universe.” Edited by Storied. storied.illinois.edu. University of Illinois, August 20, 2020. https://storied.illinois.edu/center-of-the-universe/#.
Bushell, Colleen, Jock D. Mackinlay, William A. Ruh, Anselm Spoerri, and Joel Tesler. “Information Visualization.” Proceedings of the 21st Annual Conference on Computer Graphics and Interactive Techniques - SIGGRAPH ’94, 1994. https://doi.org/10.1145/192161.192295.
Irish, Sharon. “Hierarchies in the Circuitry: Women, Information Technology and Scholarship (WITS) at Illinois – Technology’s Stories.” www.technologystories.org, December 1, 2013. https://www.technologystories.org/hierarchies-in-the-circuitry-women-information-technology-and-scholarship-wits-at-illinois/.
Wainwright, Lisa, Anne Balsamo, and Judy Malloy. New Media Futures: The Rise of Women in the Digital Arts. Edited by Donna J Cox, Ellen Sandor, and Janine Fron. Urbana; Chicago; Springfield: University of Illinois Press, 2018.
Selected Stories
Lili ChengProject type
Ovetta SampsonProject type
Yehwan SongProject type
Anicia PetersProject type
Simona MaschiProject type
Jennifer BoveProject type
Chelsea JohnsonProject type
Donna SpencerProject type
Lisa WelchmanProject type
Sandra GonzālesProject type
Amelie LamontProject type
Mitzi OkouProject type
The Failings of the AIGAProject type
Jenny Preece, Yvonne Rogers, & Helen SharpProject type
Colleen BushellProject type
Aliza Sherman & WebgrrrlsProject type
Cathy PearlProject type
Karen HoltzblattProject type
Sabrina DorsainvilProject type
Lynda WeinmanProject type
Irina BlokProject type
Jane Fulton SuriProject type
Carolina Cruz-NeiraProject type
Lucy SuchmanProject type
Terry IrwinProject type
Donella MeadowsProject type
Maureen StoneProject type
Ray EamesProject type
Lillian GilbrethProject type
Mabel AddisProject type
Ángela Ruiz RoblesDesigner