Analyzing Online Videos to Create a List of User Interface Elements: A Case for OpenCrane Design System

One of the first steps in developing a design system is to make a list of user interface (UI) elements, which is usually done by reviewing existing graphical user interfaces (GUIs). Doing so can be difficult depending on the context, since designers may not have access to a sufficient number of different GUIs. This paper presents a complementary method for creating a list of UI elements and the context is an ongoing work of developing a design system for remote rubber-tired gantry (RTG) cranes. We analyzed online videos published by the crane manufacturers that fully or partially show the crane GUIs. We included 11 online videos published by three crane manufacturers that met our selection criteria. The analysis of the online videos resulted in 29 UI elements. To evaluate the feasibility of this method, we compared the results with 27 UI elements elicited from a field study at a port that employed remote RTG cranes. The comparison shows that there is a significant overlap between the two sets of UI elements, but also some differences. This suggests that the two methods can complement each other instead of being alternatives. Regarding the order, we recommend conducting a field study first to obtain the necessary domain knowledge to better understand the content of online videos.