Bridging the gap between model and design of user interfaces
Download
1 / 15

Bridging the Gap between Model and Design of User Interfaces - PowerPoint PPT Presentation


  • 108 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Bridging the Gap between Model and Design of User Interfaces' - bonita


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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
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


Motivation
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


Collaborative rapid prototyping process
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


Collaborative rapid prototyping process details
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


Case study virtual cook
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


Case study virtual cook the concurtasktree
Case Study: Virtual Cook: The ConcurTaskTree

Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006


Case study runtime environment with loaded virtual cook ctt
Case Study: Runtime Environment with loaded Virtual Cook CTT

Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006


Case study virtual cook the concurtasktree vs aui
Case Study: Virtual Cook: The ConcurTaskTree vs. AUI

Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006


Case study virtual cook final user interface
Case Study: Virtual Cook Final User Interface

Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006


Masp prototyping tool
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


Masp ctt based runtime system for multimodal user interfaces
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


Conclusion
Conclusion Interfaces

  • 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


Future work discussion
Future Work / Discussion Interfaces

  • 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


The end
The End … Interfaces

Informatik 2006 - Workshop Modellbasierte Entwicklung von Interaktionsanwendungen, 6.10.2006


ad