Background Abstract Human-Computer Interaction Design Process · Human-Computer Interaction Design...
1
National Aeronautics and Space Administration www.nasa.gov Human-Computer Interaction Design Process Special thanks to my mentor George Gorospe, USRA for providing funding, and NASA Ames Research Center for this internship opportunity The purpose of this internship is to contribute to the development of the LabMonitor System that will display lab environment data, which then relays if a lab is safe or unsafe to enter. The goals of the project are to collect, record, and display lab condition data recorded in the last 7 days in an online interface. This type of system will help supplement NASA’s goals of a safe, clean environment for employees to work in. LabMonitoring System Proof of Concept The goal of the project was to contribute to the development of this prototype system through the front-end development of the Graphical User Interface or GUI. This would allow people to easily understand the data generated by the sensor nodes through graphs and displays on a web interface. Background Abstract Figure 2. First GUI Prototype Progress x Results Acknowledgements Figure 6. Final GUI Prototype The UI was redesigned to contain icons to for the user to intuitively understand the purpose of each tab function. The Download tab is split into different sections for each node. The user can decide to checkmark what type of node data he or she wants to download, which will be placed in a .csv file. The first prototype was developed with the idea that a passerby would quickly and easily determine the lab’s conditions by looking at the Overview Page and data from the nodes could be chosen for download. Learning Outcomes React Router was used to create website navigation pages. The library allowed for code splitting between files, thus made for clean, readable code for each JS file. Figure 3. React Router Values for each node sensors were researched and set their threshold of danger levels. Figure 4. Sliders Figure 5. Default Slider Values The sliders allow users to customize warning levels of their lab conditions. Figure 3 is an example for temperature. The project gave me the opportunity learn front-end development (React, CSS, and HTML) along with data base skills (mySQL). I also developed the skills to understand and translate user needs into a GUI. The design process included iterations of designing, which included drawing paper prototypes, examining the UI layout of web interfaces, and allowing for people outside of the project to interact with it. This design process gave us the opportunity to refine the web interface for seamless use. Figure 1. Design Process Cycle LabMonitor System – Frontend Development Emily Le 1 and Andrew Jong 1 1 University of California San Diego, 1 San Jose State University
Transcript of Background Abstract Human-Computer Interaction Design Process · Human-Computer Interaction Design...
National Aeronautics and Space Administration
www.nasa.gov
Human-Computer Interaction Design Process
Special thanks to my mentor George Gorospe, USRA for providing funding, and NASA Ames Research Center for this internship opportunity
The purpose of this internship is to contribute to the development of the LabMonitor System that will display lab environment data, which then relays if a lab is safe or unsafe to enter. The goals of the project are to collect, record, and display lab condition data recorded in the last 7 days in an online interface. This type of system will help supplement NASA’s goals of a safe, clean environment for employees to work in.
LabMonitoring System Proof of Concept
The goal of the project was to contribute to the development of this prototype system through the front-end development of the Graphical User Interface or GUI. This would allow people to easily understand the data generated by the sensor nodes through graphs and displays on a web interface.
Background Abstract
Figure 2. First GUI PrototypeProgress
x
Results
Acknowledgements
Figure 6. Final GUI PrototypeThe UI was redesigned to contain icons to for the user to intuitively understand the purpose of each tab function. The Download tab is split into different sections for each node. The user can decide to checkmark what type of node data he or she wants to download, which will be placed in a .csv file.
The first prototype was developed with the idea that a passerby would quickly and easily determine the lab’s conditions by looking at the Overview Page and data from the nodes could be chosen for download.
Learning Outcomes
React Router was used to create website navigation pages. The library allowed for code splitting between files, thus made for clean, readable code for each JS file.
Figure 3. React Router
Values for each node sensors were researched and set their threshold of danger levels.
Figure 4. Sliders
Figure 5. Default Slider Values
The sliders allow users to customize warning levels of their lab conditions. Figure 3 is an example for temperature.
The project gave me the opportunity learn front-end development (React, CSS, and HTML) along with data base skills (mySQL). I also developed the skills to understand and translate user needs into a GUI.
The design process included iterations of designing, which included drawing paper prototypes, examining the UI layout of web interfaces, and allowing for people outside of the project to interact with it. This design process gave us the opportunity to refine the web interface for seamless use.
Figure 1. Design Process Cycle
LabMonitor System – Frontend DevelopmentEmily Le1 and Andrew Jong1
1University of California San Diego, 1San Jose State University
