Learning UI Functional Design Principles Through Simulation With Feedback

The user interface (UI) is a key component of an interactive software application; therefore, it is important to provide software developers with basic UI design skills. However, teaching UI design is challenging, even at a basic level, and there is little teaching support. In this article, we investigate the benefits of the feedback-enriched simulation environment (FENIkS) for learning fundamental UI design principles toward designing the functional aspects of a UI. FENIkS is a model-driven educational environment making use of simulation as learning support by generating a UI and the underlying application starting from conceptual domain and presentation models. The generated application and UI contain feedback elements for the learners. This feedback shows if the generated prototype is compliant with certain key design principles and why the principles are considered to be well applied or not. We conducted an experiment using bachelor-level courses to observe the effects of FENIkS on the learning of UI design principles by novice UI designers. The effectiveness of FENIkS was measured by comparing the results of students on a test performed without and with the use of FENIkS, using statistical methods. The findings show an improvement in student's learning of UI design principles when using the FENIkS approach.

[1]  Johnson Dehinbo,et al.  Establishing and applying criteria for evaluating the ease of use of dynamic platforms for teaching web application development , 2011 .

[2]  Monique Snoeck,et al.  Assessing the influence of feedback-inclusive rapid prototyping on understanding the semantics of parallel UML statecharts by novice modellers , 2017, Inf. Softw. Technol..

[3]  Monique Snoeck,et al.  Enterprise Information Systems Engineering : The MERODE Approach , 2014 .

[4]  Monique Snoeck,et al.  A Fully Implemented Didactic Tool for the Teaching of Interactive Software Systems , 2018, MODELSWARD.

[5]  Jean Vanderdonckt,et al.  Past, Present, and Future of Model-Based User Interface Development , 2011, i-com.

[6]  Aloke Dey,et al.  Developments in Crossover Designs , 2013 .

[7]  Yongtian Wang,et al.  Teaching based on augmented reality for a technical creative design course , 2015, Comput. Educ..

[8]  Sri Hastuti Kurniawan,et al.  A method and advisor tool for multimedia user interface design , 2006, Int. J. Hum. Comput. Stud..

[9]  Jeffrey C. Carver,et al.  A checklist for integrating student empirical studies with research and teaching goals , 2010, Empirical Software Engineering.

[10]  D.C. Whittinghill,et al.  Using Rapid Feedback to Enhance Student Learning and Satisfaction , 2006, Proceedings. Frontiers in Education. 36th Annual Conference.

[11]  Jesús Gallardo,et al.  CIAT-GUI: A MDE-compliant environment for developing Graphical User Interfaces of information systems , 2012, Adv. Eng. Softw..

[12]  Robert L. West,et al.  Using Cognitive Modelling Simulations for User Interface Design Decisions , 2004, IEA/AIE.

[13]  P. Black,et al.  Inside the Black Box: Raising Standards through Classroom Assessment , 2010 .

[14]  Cristina Conati,et al.  Providing Adaptive Support in an Interactive Simulation for Learning: An Experimental Evaluation , 2015, CHI.

[15]  A. Kluge.  Experiential Learning Methods, Simulation Complexity and Their Effects on Different Target Groups , 2007 .

[16]  Denis Lalanne,et al.  A Usability Refactoring Process for Large-Scale Open Source Projects: The ILIAS Case Study , 2017, CHI Extended Abstracts.

[17]  James R. Lewis,et al.  IBM computer usability satisfaction questionnaires: Psychometric evaluation and instructions for use , 1995, Int. J. Hum. Comput. Interact..

[18]  Andreas Holzinger,et al.  Usability engineering methods for software developers , 2005, CACM.

[19]  Jean-Sébastien Sottet,et al.  Model Transformation Configuration and Variability Management for User Interface Design , 2015, MODELSWARD.

[20]  Monique Snoeck,et al.  Generating User Interface from Conceptual, Presentation and User models with JMermaid in a learning approach , 2015, Interacción.

[21]  Jean Vanderdonckt,et al.  Designing graphical user interfaces integrating gestures , 2012, SIGDOC '12.

[22]  Monique Snoeck,et al.  Process mining analysis of conceptual modeling behavior of novices - empirical study using JMermaid modeling and experimental logging environment , 2014, Comput. Hum. Behav..

[23]  Richard E. Clark,et al.  Blueprints for complex learning: The 4C/ID-model , 2002 .

[24]  José Albors-Garrigos,et al.  New Learning Paradigms: Open Course Versus Traditional Strategies. The Current Paradox of Learning and Developing Creative Ideas , 2011, Social Media Tools and Platforms in Learning Environments.

[25]  Shuai Wang,et al.  Enhancing learning and engagement through embodied interaction within a mixed reality simulation , 2016, Comput. Educ..

[26]  John Hattie,et al.  Visible Learning: Feedback , 2018 .

[27]  Monique Snoeck,et al.  Assessing the effectiveness of feedback enabled simulation in teaching conceptual modeling , 2014, Comput. Educ..

[28]  Goetz Botterweck,et al.  A model-driven approach to the engineering of multiple user interfaces , 2006, MoDELS'06.

[29]  Yijun Yu,et al.  Adaptive Model-Driven User Interface Development Systems , 2014, ACM Comput. Surv..

[30]  Ken Nguyen,et al.  Identifying Interface Design Patterns by Studying Intrinsic Designs , 2016 .

[31]  Theo Mandel,et al.  The Elements of User Interface Design , 1997 .

[32]  Francisco Montero,et al.  GUILayout++: Supporting Prototype Creation and Quality Evaluation for Abstract User Interface Generation , 2011 .

[33]  Hallvard Trætteberg.  A Hybrid Tool For User Interface Modeling And Prototyping , 2006, CADUI.

[34]  Martin L. Barrett,et al.  A hypertext module for teaching user interface design , 1993, SIGCSE '93.

[35]  Abdelhak Ziyyat,et al.  Interactive simulations for teaching and learning differential equations , 2016, 2016 International Conference on Information Technology for Organizations Development (IT4OD).

[36]  Patrick Langdon,et al.  Integrating a Cognitive Modelling Framework into the Design Process of Touchscreen User Interfaces , 2015, HCI.

[37]  C.A.P.G. van der Mast,et al.  An interactive multimedia tutorial for user interface design , 1995 .

[38]  Jenny Preece,et al.  An Interactive Case Scenario For Teaching User Interface Design , 1999 .

[39]  R. Geary,et al.  Testing for Normality , 2003 .

[40]  C. Stoney,et al.  Design of Clinical Trials and Studies , 2018 .

[41]  Fabiane Barreto Vavassori Benitti,et al.  Evaluation of a game used to teach usability to undergraduate students in computer science , 2015 .

[42]  Benjamin K. S. Khoo.  A Computerized Constructionist Approach To Simulation And Modeling Pedagogy , 2014, BIOINFORMATICS 2014.

[43]  Monique Snoeck,et al.  A PIM-to-Code Requirements Engineering Framework , 2013, MODELSWARD.

[44]  Joan E. Sieber,et al.  Protecting Research Subjects, Employees and Researchers: Implications for Software Engineering , 2001, Empirical Software Engineering.

[45]  D. Boud,et al.  Rethinking models of feedback for learning: the challenge of design , 2013 .

[46]  João Pascoal Faria,et al.  Automatic Generation of user Interface Models and Prototypes from Domain and Use Case Models , 2010, ICSOFT.

[47]  Norman E. Fenton.  Viewpoint Article: Conducting and Presenting Empirical Software Engineering , 2004, Empirical Software Engineering.

[48]  Monique Snoeck,et al.  Feedback-Enabled MDA-Prototyping Effects on Modeling Knowledge , 2013, BMMDS/EMMSAD.

[49]  Orhan Gemikonakli,et al.  The aptness of Tangible User Interfaces for explaining abstract computer network principles , 2016, 2016 IEEE Frontiers in Education Conference (FIE).

[50]  Wilbert O. Galitz,et al.  The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques , 1996 .

[51]  Margaret M. Burnett,et al.  A practical guide to controlled experiments of software engineering tools with human participants , 2013, Empirical Software Engineering.

[52]  Kris Luyten,et al.  DynaMo-AID: A Design Process and a Runtime Architecture for Dynamic Model-Based User Interface Development , 2004, EHCI/DS-VIS.

[53]  Ki-Sang Song.  Teaching software engineering through real-life projects to bridge school and industry , 1996, SGCS.

[54]  Benjamin K. S. Khoo.  User Interface Design Pedagogy: A Constructionist Approach , 2011, Int. J. Inf. Commun. Technol. Educ..

[55]  Larry Ambrose,et al.  The power of feedback. , 2002, Healthcare executive.

[56]  Jean Vanderdonckt,et al.  An automated layout approach for model-driven WIMP-UI generation , 2012, EICS '12.

[57]  Andrew M. Dearden,et al.  Teaching Usability Principles with Patterns and Guidelines , 2007, HCIEd.

[58]  Jan Elen,et al.  Conceptualizing the Domain of Automated Feedback for Learners , 2019, CIbSE.

[59]  Monique Snoeck,et al.  UI-GEAR: User Interface Generation prEview capable to Adapt in Real-time , 2017, MODELSWARD.

[60]  Y. B. Wah,et al.  Power comparisons of Shapiro-Wilk , Kolmogorov-Smirnov , Lilliefors and Anderson-Darling tests , 2011 .