1 / 15

Bridging the Gap between Model and Design of User Interfaces

Bridging the Gap between Model and Design of User Interfaces. Sebastian Feuerstack, Marco Blumendorf, Prof. Dr. Sahin Albayrak. Agenda. Background & Motivation Process: Developing User Interfaces at Runtime Case Study MASP: A CTT-based Runtime Environment for Multi-Modal User Interfaces

bonita
Download Presentation

Bridging the Gap between Model and Design of User Interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Bridging the Gap between Model and Design of User Interfaces Sebastian Feuerstack, Marco Blumendorf, Prof. Dr. Sahin Albayrak

  2. Agenda • Background & Motivation • Process: Developing User Interfaces at Runtime • Case Study • MASP: A CTT-based Runtime Environment for Multi-Modal User Interfaces • Conclusion & Outlook Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006

  3. Motivation • Development of (multi-modal) user-interfaces involves several people with different skills. • Typical approach for web applications: Designer (Pictures) -> Developer (HTML) -> Developer (Backend) -> Usability-Expert (Evaluation) -> next iteration… • Problems: • Cooperation • Duration of iteration • Late usability evaluation • Our goal: Bridging the gap between model and design of user interfaces Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006

  4. Collaborative Rapid Prototyping Process • Realizes Rapid Application Development (RAD): • Rapid Prototyping • Iterative Development • Time Boxing • Team Members • (Active, involved management) (James Martin) Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006

  5. Collaborative Rapid Prototyping Process - Details • Analysis phase using ConcurTaskTree Editor • Usability Tests by simulation of scenarios • Deployment to CTT interpreter (web application) • Detailed task description • Design • Picture upload • Implementation • Replaces design with source code (HTML, VoiceXML) • Iteration • Analysis: Refinement of abstract tasks • Design/Implementation consider comments Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006

  6. Case Study: Virtual Cook • The Virtual Cook • Smart devices in the kitchen • Provide new interaction capabilities • Multimodal user interfaces • Problems The user interface should be • multimodal (graphic, voice, gestures) • flexible (different modalitiesat different times) Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006

  7. Case Study: Virtual Cook: The ConcurTaskTree Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006

  8. Case Study: Runtime Environment with loaded Virtual Cook CTT Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006

  9. Case Study: Virtual Cook: The ConcurTaskTree vs. AUI Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006

  10. Case Study: Virtual Cook Final User Interface Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006

  11. MASP: Prototyping Tool • Supported Operations: • Upload of a ConcurTaskTree in CTT-XML Format • All Tasks are realized as HTML Boxes (div-Tag) • Basic manual layouting using BorderLayout (<,>,V,^) • Edit Task Drescription (D) • Image Upload (I) • Audio Upload (A) of WAV Files, Video Upload (M) in MPEG/Flash for demonstration of complex interactions • Edit Source Code(S) • Set Navigation Path (currently only used for audio output) Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006

  12. MASP: CTT-based Runtime System for Multimodal User Interfaces • Web application that can load and interpret CTT • Interpreter computes the Enabled Task Sets (ETS) and considers the temporal operators between the tasks • From the ETS an Abstract User Interface is derived • All tasks (even abstract tasks) are annotated with presentation information • Runtime system relies on general JSP mechanisms Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006

  13. Conclusion • Only one model at runtime must be managed • no model mapping required • Downside: reduced flexibility (plasticity) of final user interface • Approach enables agile user interface development as there is no distinction between design and runtime. • Collaborative environment and instant feedback • All involved persons work with the same state of the application Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006

  14. Future Work / Discussion • Very rudimentary support for development of a „real“ multi-modal system • Identifying the optimal abstraction level for the task analysis is still a problem • We are considering using a library of user interface building blocks to speed up the image to code step. • A performance analysis of the runtime system is required to justify a setup in a production system. • Simultaneous task manipulation Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006

  15. The End … • Thank you for your attention. • For further information please contact us! • Sebastian.Feuerstack@DAI-Labor.de • Marco.Blumendorf@DAI-Labor.de • Or visit our web page - www.dai-labor.de Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006

More Related