Towards Effective Adaptive User Interfaces Design by Tomas Cerny*, Michael J. Donahoo# and Eunjee Song# *Czech Technical University #Baylor University, TX, USA ACM RACS 2013, Montreal, CA

Background User Interface design Adaptive UI features OOP 3-layer application Enterprise SW. Architecture Component-based UI Java EE Existing standards Data-driven appl. JPA Information systems Beans Validation ACM RACS 2013, Montreal, CA

Basic data presentation in UI Fig. UML Class diagram for data PersonInfo Fig. UI presentation of PersonInfo Implementation OO Class / Entity Domain specific language (DSL) ACM RACS 2013, Montreal, CA

Basic data presentation in UI What is the issue? Fig. UML Class diagram for data PersonInfo Fig. UI presentation of PersonInfo Implementation OO Class Domain specific language ACM RACS 2013, Montreal, CA

We decompose the form design into various concerns ACM RACS 2013, Montreal, CA

These concerns can be seen as individual ones ACM RACS 2013, Montreal, CA

But the implementation is in a single dimension ACM RACS 2013, Montreal, CA

UI Design Issues Domain-specific languages (DSL) for UI No type safety Information replication Data model -> Presentation Tedious and error-prone (manually) Cross-cutting concerns Lots of coding involved Research: 48% of total application code and 50% of time devoted to UIs. Hard maintenance Date model changes -> manual changes in UI part ACM RACS 2013, Montreal, CA

What is an Adaptive UI Basic UI Adaptive UI Provides a single UI for various users No matter their origin, context, capabilities, etc. Adaptive UI Takes into consideration specific users, runtime and application context Adapts to the end user Adapts to runtime conditions ACM RACS 2013, Montreal, CA

What is an Adaptive UI Basic UI Adaptive UI ACM RACS 2013, Montreal, CA

What is an Adaptive UI Basic UI Adaptive UI ACM RACS 2013, Montreal, CA

What is an Adaptive UI Basic UI Adaptive UI (Confused, Child and Elderly) ACM RACS 2013, Montreal, CA

What is an Adaptive UI Basic UI Adaptive UI (Confused, Child and Elderly) ACM RACS 2013, Montreal, CA

What is an Adaptive UI Basic UI Adaptive UI (Confused, Child and Elderly) ACM RACS 2013, Montreal, CA

What is an Adaptive UI Basic UI Adaptive UI (Confused, Child and Elderly) ACM RACS 2013, Montreal, CA

Related work evaluation criteria Runtime context Development & maintenance Adaptive UI Performance Cross-cutting concerns Adjustable output Information replication ACM RACS 2013, Montreal, CA

Model-driven development MDD Runtime context +/- Development & maintenance +/- & - Adaptive UI Performance - Cross-cutting concerns Adjustable output Information replication ACM RACS 2013, Montreal, CA

Domain specific languages DSL Runtime context +/- Development & maintenance +/- & - Adaptive UI Performance - Cross-cutting concerns Adjustable output Information replication ACM RACS 2013, Montreal, CA

Widget editors Runtime context - Development & maintenance +/- & - Adaptive UI Performance + Cross-cutting concerns Adjustable output +/- Information replication ACM RACS 2013, Montreal, CA

Code-inspection Runtime context + Development & maintenance Adaptive UI - Performance Cross-cutting concerns Adjustable output Information replication ACM RACS 2013, Montreal, CA

An Ideal? Runtime context + Development & maintenance Adaptive UI Performance Cross-cutting concerns Adjustable output Information replication ACM RACS 2013, Montreal, CA

General Design Approaches Model-driven development Issues with maintenance, runtime context, performance, binding to existing systems, information replication Generative programming Static, directly address cross-cutting concerns, information replication Aspect-oriented programming Applies in runtime, limited research in the UI, information replication ACM RACS 2013, Montreal, CA

Existing development approaches 3-layer architecture Enterprise software architecture Component-based UI Standards for persistence (ORM) and data validation Extension for Security and Presentation Annotation-based ACM RACS 2013, Montreal, CA

How to get to the ideal Lets combine Generative Programming Current standards, Aspect-oriented programming Generative Programming Model driven development Code-inspection ACM RACS 2013, Montreal, CA

Rich Entity Aspect/Audit Design Introducing READ Rich Entity Aspect/Audit Design ACM RACS 2013, Montreal, CA

READ Entity – the data class Rich Entity – extended with annotations/XML Central point of information Aspect/Audit – code-inspection and transportation ACM RACS 2013, Montreal, CA

READ Phases 1. Inspection 2. Transformation (Meta-model + Context) Code-Inspection -> Meta-model Context enforcement -> Context-aware meta-model 2. Transformation (Meta-model + Context) Presentation rules (Aspect-driven) DSL Template composition (Aspect-driven) DSL Layout composition (like as XSLT) DSL 3. Runtime code integration ACM RACS 2013, Montreal, CA

READ Phases ACM RACS 2013, Montreal, CA

READ formalization: Aspect concept model Join Point Model Static – the data structure Dynamic – the application context Pointcut Language Unified Expression Language to for queries Type eq ‘String’ and required and length > 255 Adaptation Mechanism UI Presentation and integration of various concerns ACM RACS 2013, Montreal, CA

READ Phases The Outcome 1. Inspection Meta-model + Context = Join Points (Static + Dynamic) 2. Transformation Presentation rules (Aspect-driven) For each data field Pointcut – a query to field properties and context (EL) Advice – a presentation template to use Presentation template composition (Aspect-driven) Gives Presentation Advice – aspect integration Layout template composition (like as XSLT) 3. Runtime code integration ACM RACS 2013, Montreal, CA

READ practical impact Runtime context + Devel. & maintenance Adaptive UI Performance Cross-cutting concerns Adjustable output Information replication ACM RACS 2013, Montreal, CA

READ evaluation Case study Java EE 7 data classes ACM RACS 2013, Montreal, CA

READ evaluation Case study Java EE 7 data classes ACM RACS 2013, Montreal, CA

READ evaluation Case study Java EE 7 data classes ACM RACS 2013, Montreal, CA

READ evaluation Case study Java EE 7 data classes ACM RACS 2013, Montreal, CA

READ evaluation Performance Java Server Faces ACM RACS 2013, Montreal, CA

READ Real Study ACM-ICPC ACM RACS 2013, Montreal, CA

READ Real Study 32% of the entire UI code is generated! ACM RACS 2013, Montreal, CA

READ Real Study 32% of the entire UI code is generated! ACM RACS 2013, Montreal, CA

Conclusion READ approach Reduced Devel. & Maintenance efforts Benefits of AOP, GP, MDD Runtime Approach Adaptive UI Integration of Existing standards OS Library AspectFaces for Java apps. ACM RACS 2013, Montreal, CA

Future Work Business rule integration Ontology-based criteria Platform-awareness Ongoing work on Android, PHP, etc. User interface protocol ACM RACS 2013, Montreal, CA

Q/A @inproceedings{cerny2013, Title = {Towards Effective Adaptive User Interfaces Design}, Author = {Tomas Cerny and Michael J. Donahoo and Eunjee Song}, Booktitle = {Proceedings of the 2013 Research in Applied Computation Symposium (RACS 2013)}, Isbn = {978-1-4503-2348-2}, Month = {October}, Year = {2013}, Keywords = {Aspect-driven design;Inspection-based approach; Adaptive user interfaces,;Reduced maintenance/development efforts}} ACM RACS 2013, Montreal, CA