Multi-Device UI Development for Task-Continuous Cross-Channel Web Applications Enes Yigitbas, Thomas Kern, Patrick Urban, Stefan Sauer 08.06.2016

Overview Background and Motivation Solution Architecture Case-Study: Cross-Channel Banking Web Application Summary & Outlook Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

Background Wincor Nixdorf is a German corporation that provides retail and retail banking hardware, software, and services. Wincor Nixdorf is engaged primarily in the development of self-service systems. Self-service systems provide a wide range of products and services: … Self Checkout Ticket Machine Banking ATM Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

Introduction Classic Banking Liquid Banking Customers access banking services solely via isolated channels. Customers are able to flexibly access their banking service where, when and how it suits best. Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

What means „Liquid Banking“? Integration of various types of web-enabled smart devices for supporting banking activities. Distributed user interactions. Digital handover between different devices Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

14.11.2017 Challenges Classic Banking Liquid Fixed Channel Usage Flexible Channel Usage Separation of Channels Integration of Channels Data redundancy Data synchronization No Channel switch Continuous Channel switch C1: Support for heterogeneous UIs allowing access for different channels (e.g. PC, Smartphone, ATM). C2: Support for a flexible channel usage depending on the context. C3: Support for a seamless hand-over between channels allowing task-continuity. Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas © s-lab @ Universität Paderborn - http://s-lab.upb.de

Solution Architecture C1: Support for heterogeneous UIs allowing access for different channels (e.g. PC, Smartphone, ATM). C2: Support for a flexible channel usage depending on the context. C3: Support for a seamless hand-over between channels allowing task-continuity. Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

Instantiation of Development Process Case Study application architecture: On each device the client application is running as a single page web application inside a browser. Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

Step 1: Modeling Usage of existing OMG standardized models for specifying the UI Domain Model (UML Class Diagram) describing the data entities of the UI. Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

Step 1: Modeling Usage of existing OMG standardized models for specifying the UI Abstract UI model (Interaction Flow Modeling Language) for specifying the structure, content and navigation of the UI. Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

Step 2: Transformation Map IFML model elements to final web UI views, in our case to specific HTML5 elements. The Xtend plugin includes different Xtend templates to transfer the IFML source model into web UIs supporting different devices. Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

Step 2: Transformation Generated code snippet for login dialogue: Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

Step 2: Transformation During the transformation process, the application‘s view is built upon basic components with a custom look&feel like buttons, text input fields, dropdown lists, tables etc. Our custom components are sensitive to the target platform (desktop, mobile, ATM) and adapt themselves accordingly: Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

Step 3: Execution (Front-End) UI Router as a central key component to implement task-continuity. Inside a view controller and prior to saving a state, all context information is added to a state-context object: We implemented an AngularJS service PersistStateService, which converts the object context to JSON and sends it to the Back-End Server. On instantiation of the AngularJS controller associated with this state, the controller calls the service‘s restore method to retrieve the previously stored information. Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

Step 3: Execution (Back-End) The application‘s Back-End is implemented in JavaScript and uses Node.js as its runtime environment: Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

Cross-Channel Banking Web Application in Usage Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

Summary & Outlook Liquid banking scenario and challenges for developing heterogeneous UIs. Model-based solution architecture supporting efficient development of UIs for different channels (PC, Smartphone, ATM). Implementation of a cross-channel liquid banking web application as a case-study. Next Steps: Extension of transformation process to support the generation of dynamic aspects (e.g. input validation, controller artifacts, etc. Studies with web designers and developers to further evaluate the efficiency and effectiveness of our approach. Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas

Multi-Device UI Development for Cross-Channel Web Applications – Enes Yigitbas