Adaptive User Interface Modelling for Web-environments T-121.900 – 15.10.2002 Antti Martikainen

Slides:



Advertisements
Similar presentations
Fast. Forward. Wireless. Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati.
Advertisements

Win8 on Intel Programming Course Desktop : WPF Cédric Andreolli Intel Software
DOCUMENT TYPES. Digital Documents Converting documents to an electronic format will preserve those documents, but how would such a process be organized?
Chapter 19 Design Model for WebApps
Smart Style on the Semantic Web Jacco van Ossenbruggen Lynda Hardman CWI Amsterdam.
Understand Web Page Development Software Development Fundamentals LESSON 4.1.
Project 1 Introduction to HTML.
© 2009 Research In Motion Limited Methods of application development for mobile devices.
Engineering the Presentation Layer of Adaptable Web Information Systems Zoltán Fiala 1, Flavius Frasincar 2, Michael Hinz 1, Geert-Jan Houben 2, Peter.
Principles and Methods
October 16, 2007HighEdWebDev2007 Single Source Website for Full Spectrum Access Rick Ells University of Washington
1st Project Introduction to HTML.
HTML 1 Introduction to HTML. 2 Objectives Describe the Internet and its associated key terms Describe the World Wide Web and its associated key terms.
Chapter ONE Introduction to HTML.
Web Design Basic Concepts.
Device-Independence with UIML (User Interface Markup Language) Marc Abrams uiml.org W3C Workshop on Web Device Independent Authoring.
1 Introduction to Web Development. Web Basics The Web consists of computers on the Internet connected to each other in a specific way Used in all levels.
What is Web Design?  Web design is the creation of a Web page using hypertext or hypermedia to be viewed on the World Wide Web.
INTRODUCTION TO DHTML. TOPICS TO BE DISCUSSED……….  Introduction Introduction  UsesUses  ComponentsComponents  Difference between HTML and DHTMLDifference.
CONTROLSITE & Accessibility Independence for All Presented by: John Leal Goss Interactive Production Team.
Reverse Engineering of Web Pages based on Derivations and Transformations L.Bouillon, Q.Limbourg, J.Vanderdonckt, B.Michotte Université catholique de Louvain,
Alternative Views of the Web Jon Gunderson, Ph.D. Division of Rehabilitation-Education Services University of Illinois at Urbana/Champaign.
XForms: A case study Rajiv Shivane & Pavitar Singh.
Overview of Previous Lesson(s) Over View  ASP.NET Pages  Modular in nature and divided into the core sections  Page directives  Code Section  Page.
An Approach to Task Modelling for User Interface Design Costin Pribeanu National Institute for Research and Development in Informatics, Bucureşti, Romania.
Web Accessiblity Carol Gordon SIU Medical Library.
DSpace UI Alexey Maslov. DSpace in general A digital library tool useful for storage, maintenance, and retrieval of digital documents Two types of interaction:
3231 Software Engineering By Germaine Cheung Hong Kong Computer Institute Lecture 12.
HTML, XHTML, and CSS Sixth Edition Chapter 1 Introduction to HTML, XHTML, and CSS.
Design and Construction of Accessible Web Sites Michael Burks Chairman Internet Society SIG For Internet Accessibility for People with Disabilities June.
Website Accessibility. What is Website Accessibility? Making information on the internet usable and understandable for EVERYONE, including those with.
An Overview 1 Pamela Harrod, DMS 546/446 Presentation, March 17, 2008.
Chapter 9 Design guidance and design rationale. UIDE Chapter 9 Sources of Design Guidance Standards Standards –User interface standard Design Guidelines.
Group 3: Art Gallery Monica Almendarez Content/Project Manager Willliam Egle Technology Manager Christina Pié Usability/ADA Compliance Manager Mirjana.
Session: 1. © Aptech Ltd. 2Introduction to the Web / Session 1  Explain the evolution of HTML  Explain the page structure used by HTML  List the drawbacks.
1 Representing New Voice Services and Their Features Ken Turner University of Stirling 11th June 2003.
FDT Foil no 1 On Methodology from Domain to System Descriptions by Rolv Bræk NTNU Workshop on Philosophy and Applicablitiy of Formal Languages Geneve 15.
Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.
Accessibility : Designing the Interface and Navigation The Non-Designer’s Web Book Chapter 7 Robin Williams and John Tollett Presented by Sherie Loika.
Review of Paper: Johan Hjelm “Position dependent services using metadata profile matching” Youyong Zou Apr.15,2001.
Framework for Virtual Web Laboratory I. Petković M. Rajković.
Device-Independence with UIML (User Interface Markup Language) Marc Abrams uiml.org W3C Workshop on Web Device Independent Authoring.
SDPL 2002Notes 4: Intro to Style Sheets1 4. Introduction to Style Sheets n Discussed recently: –Programmatic manipulation of documents n Now a more human-oriented.
Murielle Florins 1, Francisco Montero Simarro 2, Jean Vanderdonckt 1, Benjamin Michotte 1 1 Université catholique de Louvain 2 Universidad de Castilla-la-Mancha.
Cooperative Computing & Communication Laboratory A Survey on Transformation Tools for Model-Based User Interface Development Robbie Schäfer – Paderborn.
Asstt. Prof Sonia Sharma Computer Dept 1 HTML ( Hypertext MarkUP Language ) HTML is the lingua franca for publishing hypertext on the World Wide Web.
HTML Concepts and Techniques Fifth Edition Chapter 1 Introduction to HTML.
LESSON 15 – UNIT 0 ADAPTING YOUR WEB SITE FOR MOBILE DEVICES.
Chapter 1 Introduction to HTML, XHTML, and CSS HTML5 & CSS 7 th Edition.
SDPL 2004Notes 4: Intro to Style Sheets1 4. Introduction to Style Sheets n Discussed recently: –Programmatic manipulation of documents n Now a more human.
Class Diagrams. Terms and Concepts A class diagram is a diagram that shows a set of classes, interfaces, and collaborations and their relationships.
SEESCOASEESCOA SEESCOA Meeting Activities of LUC 9 May 2003.
1 February 1-7, Cancun, Mexico ACHI’09 A structured approach to support 3D User Interface Development Juan Manuel Gonzalez-Calleros, Jean Vanderdonckt.
Web Design Principles 5 th Edition Chapter 3 Writing HTML for the Modern Web.
Web Accessibility. Why accessibility? "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
HTML PROJECT #1 Project 1 Introduction to HTML. HTML Project 1: Introduction to HTML 2 Project Objectives 1.Describe the Internet and its associated key.
Project 1 Introduction to HTML.
Objective % Select and utilize tools to design and develop websites.
Chapter 1 Introduction to HTML.
Avraham Leff James T. Rayfield IBM T.J. Watson Research Center
Project 1 Introduction to HTML.
Objective % Select and utilize tools to design and develop websites.
Prepared for Md. Zakir Hossain Lecturer, CSE, DUET Prepared by Miton Chandra Datta
WPF AKEEL AHMED.
Web Content Accessibility Beata M. Ofianewska (DG COMM) 7 December 2006 December 2006 COMM C2.
Website Accessibility
International University of Japan
Introduction UI designer stands for User Interface designer. UI designing is a type of process that is used for making interfaces in the software or the.
Modular design of domain-specific languages
Teaching slides Chapter 6.
Presentation transcript:

Adaptive User Interface Modelling for Web-environments T – Antti Martikainen

Contents Requirements for Adaptation Device Independent UI Languages UI Models Model Mapping Conclusions

Scope This presentation is not about –Intelligence in adaptation –Adaptation based on users behaviour Rather it is about –Modelling principles to enable a single application to adapt to different kinds of devices, and –Finding balance between usability requirements and development times and maintenance costs

Screen resolution WAPPDAComputer 48x48256x x768

Adapting applications to devices Managing bi-directional interactions requires device specific adaptation to –Screen resolution –Connection speed –Different Markup languages –Rendering capabilities –Functional capabilities

Language/Device specific capabilities Visual rendering –Colours –Tables –Frames –Images Voice detection vs. Visual input Scripting capabilities –Javascript Style sheet usage –CSS (  XSLT) …

The Common Multi-channel Delivery Mechanism

Device Independent UI languages

PDA

WAP

Voice System: "Masters Scores. Please select one of the following for player: Tiger Woods, David Duval, Phil Mickelson, Mark Calcavecchia..." User: "Tiger Woods." System: "Please select one of the following for Tiger Woods or say "all" to listen to all of available information: Player, Tournament Score, Round 1, Round 2, Round 3, Round 4." User: "Tournament Score." System: "The Tournament Score for Tiger Woods is 16 under." User: "Lookup." System: "What information would you like?" User: "Can I have the Round 3 score for Chris DiMarco?" System: "The Round 3 score for Chris DiMarco is 69. What information would you like?" User: "Goodbye."

Web browser

Windows CE

Examples of Device Independent UI languages UIML (User Interface Markup Language) –Does not allow implementing device specific features MAXML (Multi-channel Access XML) –Engine implements device specific features automatically  designer cannot affect usability

Common Problems with Abstract Languages Applications built with abstract languages are either –Implemented to match the capabilities of the “weakest” device (lacking required functionality), or –Not usable, at least concerning some devices

User Interface Modelling systems UIM languages consist of models –Task –Presentation –Domain –Device –Dialogue –User

Task model Describes how users do their tasks in a certain application Contains the task structure, and the order and division of interactions between user and system Formal task descriptions should work as a device independent starting point for the UI Task model could support a more straight forward flow in realizing user requirements in the UI

Presentation model Represents the visual and auditory elements provided to the user by the user interface. Presentation elements give abstract tasks a concrete form May also contain stylistic properties, such as colours and font size Example: –Define that a persons name is shown in an input field

Domain model Defines the underlying objects that the user can indirectly see and manipulate through the user interface Commonly attached to (abstract) task elements to achieve UI code reuse Example: –A product has certain attributes; These attributes are managed through certain actions

Device model Presents the capabilities, such as the used UI language, connection speeds and other properties of a device Example: –Can the device handle JavaScript? CC/PP –W3C standard for device capabilities –Incomplete does not define all necessary elements does not say what UIM systems should do with device properties

Dialogue model A more concrete approach to task model Defines interactions in cases of technical forces Example: –How to implement a confirmation, when one device is Javascript enabled and another is not?

User model Defines the attributes and roles of users Can be used to provide a way to model UI preferences for specific users or groups of users Examples: –Exclude a group of users from some task –Show all possible data attributes to company management

Mapping problem

Combining Separate Models Location, available services etc...

Transforming the UI

Conclusions Model-based UI development strives for –Systematic and faster UI development with UI code reuse –Serving all existing devices Difficulties –How to proceed from abstract to concrete UIs without compromising aesthetic design –Required models and mappings are not completely clear –Development tools are important (no commercial products) –New UI design methodology