Development and evaluation of web-based user interfaces for interactive virtual 3D models of chemical compounds

Z razmahom informacijsko-komunikacijske tehnologije (IKT) je na področju kemijskega izobraževanja na voljo vrsta programskih orodij in učnih gradiv za prikaz submikroskopske narave snovi. Ocenjujemo, da so orodja v učnem procesu v splošnem premalo izkoriščena in da k temu prispevajo pomanjkljivosti v njihovi dostopnosti, funkcionalnosti, pa tudi uporabniških vmesnikih. Glavni cilj doktorske disertacije je bil zasnovati, oblikovati, izdelati, ovrednotiti in optimizirati nov spletni uporabniški vmesnik za prikaz in izdelavo virtualnih 3D modelov molekul, ki bi imel širši nabor funkcionalnosti in izboljšano uporabniško izkušnjo v primerjavi z obstoječimi tovrstnimi spletnimi orodji. Vmesnik naj bi učečim (študentom, dijakom in učencem) omogočil prikaz in izdelavo oz. urejanje virtualnih 3D modelov molekul, učiteljem kemije pa olajšal pripravo učnih gradiv s 3D modeli molekul. Razvoj novega grafičnega vmesnika je potekal v štirih fazah: 1) analize učnih načrtov, gradiv in orodij, 2) izdelava koncepta vmesnika, 3) oblikovanje vmesnika in 4) implementacija vmesnika. V fazi analiz smo preučili učne načrte in spletna učna gradiva, z Nielsenovimi hevristikami primerjali obstoječa programska orodja in njihove značilnosti ter analizirali potencial skriptnega jezika knjižnice orodja JSmol. Pri zasnovi vmesnika smo upoštevali uveljavljena načela in priporočila načrtovanja uporabniških vmesnikov ter elemente in prakse uporabniško usmerjenega načrtovanja pri razvoju programske opreme. Pripravili smo logični, fizični in izvedbeni koncept vmesnika z meniji in orodnimi vrsticami. Za implementacijo smo uporabili nadbesedilni označevalni jezik HTML 5 (Hypertext Markup Language 5), kaskadne slogovne predloge CSS3 (Cascading Style Sheets 3), programski jezik JavaScript, JavaScript knjižnico JSmol in skriptni jezik Jmol/JSmol. Končni rezultat disertacije sta dva nova uporabniška vmesnika oziroma dve funkcionalno izpopolnjeni orodji 3DChemMol in 3CDU z implementiranimi novimi funkcionalnostmi. 3DChemMol je novo orodje in spletni uporabniški vmesnik, ki omogoča prikaz in izdelavo 3D modelov kemijskih spojin. Izdelan je dvojezično (slovenski in angleški jezik) ter je prosto dostopen na spletu (http://www2.arnes.si/~supddoln/3dchemmol). Grafični vmesnik obsega izvirno oblikovane menije, orodne vrstice in okna za prikaz 3D modela molekule. Vsebuje module za nalaganje, prikaz, manipulacijo, izbiranje in urejanje 3D modelov molekul ter za preučevanje lastnosti (elektronegativnost, merjenje kotov in vezi, simetrije) in konfiguracije modelov molekul (konformacije in izomeri ter primerjave modelov spojin). Prototip 3DChemMol je bil najprej ovrednoten s kognitivnim sprehodom učitelja-eksperta, čemur sta sledila optimizacija in odpravljanje težav. Primerjalna hevristična analiza končne verzije 3DChemMol z izhodiščnim vmesnikom JSmol je izpostavila bistvene izboljšave v osmih od desetih Nielsenovih hevristik, kot so npr. oblikovanje novega vmesnika z orodnimi vrsticami, dodane funkcionalnosti (npr. za generiranje kemijskih imen in nalaganje modelov spojin, za razveljavitve korakov v gradnji modelov) ter dodane štiri oblike pomoči za uporabnike. Uporabniška evalvacija 3DChemMol v skupini 54 študentov je potrdila dobro naučljivost in uporabnost orodja ter omogočila globlje vpoglede v interakcije med vmesnikom in uporabniki. Med interakcijami z modelom so bile študentom najtežje tiste, ki so zahtevale dobro prostorsko predstavo. 3DCU je dodatno novo orodje in vmesnik v slovenskem jeziku, ki je namenjen zlasti učiteljem. Prosto je dostopen na spletu (http://www2.arnes.si/~supddoln/3dcu). Učiteljem omogoča, da z izbiranjem parametrov sami oblikujejo lastne prilagojene prikaze s 3D modeli molekul. 3DCU vsebuje module za izbiranje spojin, oblike prikaza in za prikaz prilagojenih vmesnikov za posamezne aktivnosti (npr. urejanje ali merjenje v 3D modelu molekule). V doktorski raziskavi smo dosegli vse zastavljene cilje. Izvirni rezultati obsegajo nova temeljna spoznanja o funkcionalnostih in oblikovanju interaktivnih spletnih vmesnikov za prikaze in izdelavo 3D modelov molekul ter dve novi orodji in vmesnika z izvirnimi rešitvami v funkcionalnostih in oblikovanju. Rezultati doktorske raziskave so prispevali tudi nove možnosti na področju kemijskega izobraževanja v smislu učenja in poučevanja kemije z uporabo virtualnih 3D modelov molekul.With the advent of information and communication technology (ICT), numerous software tools and teaching/learning materials are available in chemistry education to illustrate the submicroscopic nature of matter. We believe that these tools are generally underused in the learning process and that deficiencies in their accessibility, functionality, and user interfaces contribute to this. The main objective of this dissertation was to conceptualise, design, build, evaluate, and optimise a new web-based user interface for the display and construction of 3D virtual models of molecules that provides a wider range of features and an improved user experience compared to existing web-based tools of this type. The interface should allow learners (pupils and students) to view and construct or edit virtual 3D models of molecules and make it easier for chemistry teachers to create teaching materials with 3D models of molecules. The development of the new graphical interface was conducted in four phases: 1) analysis of curricula, materials, and tools, 2) development of the interface concept, 3) interface design, and 4) implementation of the interface. In the analysis phase, we examined curricula and online learning materials, compared existing software tools and their features using the Nielsen heuristics, and analysed the potential of the scripting language of the JSmol library. The interface design followed established principles and recommendations for user interface design and the elements and practises of user-centred design in software development. We developed a logical, physical and implementation concept of the interface with menus and toolbars. For the implementation we used Hypertext Markup Language 5 (HTML 5), Cascading Style Sheets 3 (CSS3), JavaScript programming language, JSmol JavaScript library and Jmol/JSmol scripting language. The final result of the thesis are two new user interfaces and two functionally enhanced tools 3DChemMol and 3CDU with implemented new functionalities. 3DChemMol is a new tool and web-based user interface that allows the display and construction of 3D models of chemical compounds. It is bilingual (Slovenian and English) and freely available on the Internet (http://www2.arnes.si/~supddoln/3dchemmol). The graphical interface consists of originally designed menus, toolbars and windows for displaying the 3D model of a molecule. It includes modules for loading, displaying, manipulating, selecting, and editing 3D molecular models and for examining the properties (electronegativity, angle and bond measurements, symmetries) and configuration of molecular models (conformations and isomers, and model comparisons). The 3DChemMol prototype was first evaluated by a cognitive walk-through by a teacher expert, followed by optimization and troubleshooting. A comparative heuristic analysis of the final version of 3DChemMol with the JSmol base interface revealed significant improvements in eight of the ten Nielsen heuristics, such as the creation of a new toolbar interface, added functionalities (e.g., for generating chemical names and loading compound models, undoing steps in model construction), and the addition of four types of help for users. A user evaluation of 3DChemMol in a group of 54 students confirmed the tool\u27s good learnability and usability and provided deeper insights into the interactions between the interface and users. Among the interactions with the model, the most difficult for the students were those that required good spatial representation. 3DCU is another new tool and interface in Slovenian, aimed especially at teachers. It is freely available online (http://www2.arnes.si/~supddoln/3dcu). It allows teachers to create their own customised representations with 3D models of molecules by selecting parameters. 3DCU includes modules for selecting compounds, display formats, and displaying customised interfaces for specific activities (e.g., editing or measuring in a 3D model of a molecule). The thesis has achieved all of its goals. Original results include new fundamental insights into the functionalities and design of interactive web interfaces for displaying and constructing 3D models of molecules, and two new tools and interfaces with original solutions in terms of functionalities and design. The results of the PhD research have also contributed to new possibilities in the field of chemistry education in terms of learning and teaching chemistry using virtual 3D models of molecules