dr. sabin corneliu buraga - profs.info.uaic.robusaco/teach/courses/interfaces/... · (scapin&...

Interacțiune om‐calculator

Dr. Sabin‐Corneliu Buraga – www.purl.org/net/busaco

2.0

Dr. Sabin‐Corneliu Buraga

Facultatea de InformaticăUniversitatea “A.I.Cuza” Iaşi, România



2.0

Dezvoltarea sistemelor interactive condusă de modele



2.0

The definition of insanity is doing the same thingover and over again and expecting different results.

Benjamin Franklin



2.0

Cum putem evalua utilizabilitatea/calitateasistemelor interactive?



2.0

Criteriile de evaluare a utilizabilității(Scapin & Bastien, 1997; Vanderdonckt, 1995)

CompatibilityConsistencyWork loadAdaptation

Dialog controlGuidance

Error management



2.0

Criteriile de evaluare a utilizabilității(Scapin & Bastien, 1997; Vanderdonckt, 1995)

a priori şi/sau a posteriori

la proiectare şi/sau la testare (evaluation)



2.0

Criteriile de evaluare a utilizabilității

exemplu:detectarea inconsistențelor dintre meniurile navigaționale



2.0


exemplu:lipsa semnificației asociate legăturilor hipertext

Click here to go to the XML pageClick here to go to the GUI pageClick here to go to the FCS page

Visit: XML / GUI / FCS

More details aboutExtensible Markup

Language



2.0


exemplu:adoptarea diverselor strategii de plasarea conținutului & legăturilor navigaționale



2.0

Plasarea “optimă” a legăturilor în cadrul paginii principale (Shaikh & Lenz, 2006)



2.0

Plasarea “optimă” a legăturilor în cadrul paginilor subsidiare(Shaikh & Lenz, 2006)



2.0

Plasarea “optimă” a motorului de căutare internă în situl Web (Shaikh & Lenz, 2006)



2.0

Plasarea “optimă” a reclamelor – advertisments(Shaikh & Lenz, 2006)



2.0

PUI – Plastic User Interfaces

adaptation to the context of usewhile satisfying predefined usability properties of interest



2.0

D. Thevenin, J. Coutaz & G. Calvary, 2004



2.0

Jean Vanderdonckt, 2006, 2008



2.0

PUI – Plastic User Interfaces

necesitatea adaptării la nivel:lexicalsintacticsemantic

privind activitatea desfăşurată (task‐ul)de scop



2.0

Proprietăți calitative ale interfețelor‐utilizator (IFIP)

1. Prezentarea informațiilor

Multiplicity of devices: keyboard, mouse, stylus,…Multiplicity of representations:

alternate representations both in input and output, honestyInput/output reusability

(use output produced by one action as input for another)



2.0


2. Ordering of task planning

Multiplicity of user rolesMultiplicity of execution paths

Non‐preemptiveness: degree of freedom for users to decide what’s next

Reachability: possibility to navigate in the system (undo, redo)Observability versus Browsability



2.0


3. Adaptarea interacțiunii

Reconfigurability: system ability to support user personalizationAdaptivity: system ability to support automated adaptation

Migrability: system ability to transfer responsibility from one user to another, among users, among users and systems

Plasticity: system ability to adapt to the context of use while preserving predefined usability properties



2.0

Dix’s Principle

A complex action should be easy to do, but complex to undo



2.0

Standarde

ISO/IEC 9126‐1 (2001) – quality modelISO/IEC 9126‐2 (2003) – external measuresISO/IEC 9126‐3 (2003) – internal measures

ISO/IEC 9126‐4 (2004) – quality in use measures



2.0

Quality in use is the user’s view of the quality of the software product when it is used

in a specific environment and a specific context of use

ISO/IEC 9126‐4 (2004)



2.0

External quality is the totality of characteristicsof the software product from an external view

ISO/IEC 9126‐2 (2003)

calitatea sistemului în execuție

măsurată & evaluată în faza de testareîn cadrul unui mediu simulat, folosind metrici externe



2.0

Internal quality is the totality of attributes of a product that determine its ability to satisfy stated and implied needs when used under specified conditions

ISO/IEC 9126‐3 (2003)

calitatea intrinsecă a software‐ului rămâne neschimbatăpână la reproiectarea sa



2.0

Pentru alte detalii, a se consulta:

E. Law, E. Hvannberg & G. Cockton (Editors), Maturing Usability.

Quality in Software, Interaction and Value, Springer, 2008



2.0

Evaluarea calității realizată de utilizatori: user testing

aspecte de interes (J. Dumas & J. Fox, 2008)the focus is on usability

the participants are (potential) end usersthere is a real product/service to be evaluated

the participants perform tasks, usually while thinking aloudthe data are recorded and analyzed



2.0


metrici considerateeffectiveness, efficiency& satisfaction

vizând afectivitatea (emoția): fun, challenge & stimulation



2.0


considerarea utilizatorilor “speciali”internaționali

aparținând unei/unor minoritățiprezentând diverse dizabilități

copii şi/sau adolescențivârstnici



2.0


direcții de cercetareobjectives beyond productivityhedonomics (Hancock et al., 2005)



2.0


direcții de cercetareRITE – Rapid Iterative Test and Evaluation

în cadrul Microsoft (M. Medlock et al., 2002, 2005)

focused on fixing usability problems rather than finding them



2.0

Diferențe majore între ingineria software şirealizarea efectivă a interfețelor‐utilizator



2.0

Aplicații‐țintă & domenii de utilizareproductivitate personală, business, entertainment etc.

Notații & instrumente (inginereşti)modelare – eventual, formală – software

Tehnici de interacțiunetextuală, grafică, multimedia, neconvențională, 3D,…



2.0

Evoluția aplicațiilor interactive: context of use = (U, P, E)

Time

Platform

User(s)

Environment

Language

conform (Jean Vanderdonckt, 2006)



2.0

Diversitatea utilizatorilor

Varietatea task‐urilor

Eterogenitatea platformelor

Multitudinea contextelor de utilizare

Proliferarea tehnicilor de dezvoltare

a interfețelor‐utilizator



2.0

UI #12UI #11UI #10UI #9Application 3



Platform #4Platform #3Platform #2Platform #1

Application 1

Application 2

Application 3

UI model #1

UI model #2

UI model #3

Platform #1

Platform #2

Platform #3

Platform #4

Platform model #1

Platform model #2

Platform model #3

Platform model #4

Multitudinea modelelor ce trebuie considerate (Abrams et al., 2001)



2.0

În ce manieră putem crea/utiliza modelede proiectare a interacțiunii,în sensul ingineriei software?



2.0

MDA (Model‐Driven Architecture)permite dezvoltarea aplicațiilor interactive complexe

www.omg.org/mda/



2.0

Modelul/modelele faciliteazăo vedere abstractă a interacțiunii

separation of concerns, ability of correlation

parsability, editability

if possible, human readability



2.0

Modele folosite uzual în procesul de proiectare(P. Forbrig et al., 2004)



2.0

Exemplu de specificare a unui modelpentru realizarea unui task (L. Marucci et al., 2004)



2.0

Process Reference Framework for the development of plastic user interfaces



2.0

Environment T

Final userInterface T

Concrete userInterface T

Task and Domain T

Abstract userInterface T

T = Target context of use

Concrete userInterface S

Final userInterface S

Task and Domain S

Abstract userInterface S

S = Source context of use

Reification

Abstraction

Reflection

Translation

User S Platform S Environment S Platform TUser T



2.0

Task &Concepts

Abstract UI

ConcreteUI

Final UI Reformating

TranscodingRecoding

RespecificationRetasking

Restructuration

Programunderstanding

Redocumentation

Reverse Engineering

Design recovery

Reengineering

Revamping

conform (Bouillon, 2006)



2.0

Ar putea exista o descriere (formală) a sistemelor interactive, în termenii meta‐modelelor existente,

ce poate fi utilizată atât la proiectarea,cât şi în timpul exploatării interfeței/interfețelor?



2.0

Context: CADUI – Computer‐Aided Design of User Interface

a se consultaG. Calvary et al. (Eds.), Proceedings of the 6th International

Conference on CADUI 2006, Springer, 2007



2.0

Interac‐tive

System

Model of the IS

Model of the IS’

Interac‐tive

System ’

Transfor‐mation

Propertychecking

conform (Jean Vanderdonckt, 2006)



2.0

La nivel abstract, descrierea sistemului interactiv se realizeazăvia CIM (Computation‐Independent Model)

mision statement, function ref. tree, use casesinteraction requirements, concurrent tasks trees

Requirements Model



2.0

Descrierea independentă de platformă se faceprin PIM (Platform‐Independent Model)

object modeldynamic modelfunctional model

presentation model

Conceptual Model



2.0

Dezvoltare focalizată asupra unei platforme‐țintă este modelată via PSM (Platform‐Specific Model)

necesită utilizarea de instrumente de transformare (compilare), bazate pe un application model

Model Compilation



2.0

Implementarea efectivă urmeazăun CM (Code Model)

vizează crearea/generarea de cod‐sursă:interface tierapplication tierpersistence tier



2.0

Specificarea unui (meta)limbaj de descrierea interfeței cu utilizatorul

UsiXML – USer Interface eXtensible Markup Language

www.usixml.org



2.0

Specificarea unui (meta)limbaj de descrierea interfeței cu utilizatorul

alte abordări:MXMLUIML XAMLXUL



2.0

UsiXML în termenii UML XML Schema modele UsiXML



2.0

Dezvoltarea de interfețe pentru contexte multiple de utilizare

context de utilizare = < utilizator, platformă, mediu >

modelat via persona

organizațional+ factori socio‐psihologici



2.0


dificultățipentru designer

contexte multiplemetodologii diverse, uneori incompatibile



2.0


dificultățipentru utilizator

utilizabilitate precară a interfețeineadaptarea interacțiunii la contextul real



2.0


dificultățipentru dezvoltator

costuri crescute privind implementarea & mentenanțacreşterea complexității

realizarea unui look & feel unitar



2.0

Studiu de caz: mono‐platform UI

abordarea clasică – utilizarea unui interface builder

proiectarea vizuală nu urmează o metodă riguroasăcunoştințele nu sunt explicitate

lipsa suportului metodologic din partea tool‐urilor softwarereutilizabilitate redusă

interface builders cannot build their own UI (Szekely, 1996)



2.0

Se vizează unificarea următoarelor 3 axe:

modele (models)metoda (method)

instrumente (supporting tools)



2.0

Models

explicitly capture knowledge about UI and interactive applications with appropriate abstractions



2.0

Method

structures the definition and use of underlying modelsin a stage‐wise approach

exemplu: agile usability (Scott Ambler, 2008)



2.0

Supporting tools

support the use of the method by providing tools for models and their related operations

ideally, one model should be supported by at least one tool



2.0

Model to Model

PlatformIndependentModel (PIM)

PlatformSpecific

Model (PSM)Model to Code Source code

MDA Components

Techniques proposed based on UsiXML

ComputingIndependentModel (CIM)

Model to Model

UsiXML model:Abstract userinterface

UsiXML model:Concrete user

interfaceRendering Final user

interface

UsiXMLmodels: task,

domain

Graphtransformations


Jean Vanderdonckt, 2006



2.0

Interfața‐utilizator poate fi modelată la nivel abstract

entitățile interfeței abstracte pot fi reprezentate graficprin notații (Montero et al., 2005)

Abs.containerAbs. componentInputOutputNavigationControlSelect



2.0



2.0

Via IdealXML, se pot specifica asocieri (mappings)dintre modelul conceptual, modelul task‐urilor şi

modelul de interacțiune abstract

triggers (tg): { , } x

updates (up): x

observes (ob): x

isExecutedIn (ex): x

manipulates (ma): { , } x

These mappings can be established:



2.0



2.0

Uses language

Meta‐Meta‐ModelGraph Structure

is instance of

Meta‐ModelOur Meta‐Model

Meta‐Model Subset 1e.g., Task+Domain Model

is instance of

Meta‐Model Subset 2e.g., Concrete UI Model

is instance of

Initial UI Modele.g., MyTaskAndDomainModel

Resultant UI Modele.g., MyConcreteUIModel

Transformation RuleOur transformation catalog

Transformări model‐to‐model (Limbourg, 2004)



2.0

Definind reguli de transformare,se poate obține o specificație UsiXML a interfeței concrete,

pornind de la modelul abstract



interface

UsiXMLmodels:

task, domain





2.0

Folosind reguli de transformare multiple,pot fi obținute specificații diferite de interfețe concrete,

pentru fiecare tip de context de utilizare



2.0

Task and Domain

Abstract User Interface

Concrete User Interface

FinalUser Interface


T1 RenderingT2

T3

Task and Domain



FinalUser Interface


T1 RenderingT2

T3



2.0

Task and Domain


Concrete User Interface 1

(2-D Desktop)

FinalUser Interface

T1

Rendering

T2

T3 Concrete User Interface 2(2-D small display)


(auditory)

FinalUser Interface

FinalUser Interface

FinalUser Interface


Task and Domain


T4

Rendering

Rendering

Rendering

T5

T6 T7

Task and Domain



(2-D Desktop)

FinalUser Interface

T1

Rendering

T2

T3 Concrete User Interface 2(2-D small display)


(auditory)

FinalUser Interface

FinalUser Interface

FinalUser Interface


Task and Domain


T4

Rendering

Rendering

Rendering

T5

T6 T7



2.0

Folosind reguli de transformare multiple,pot fi obținute specificații diferite de interfețe concrete,

pentru fiecare tip de context de utilizare

acest proces se poate realiza la nivel softwarevia TransformiXML API/GUI



2.0

Crearea interactivă a unei specificații UsiXML se poate realizafolosind GrafiXML

export în cod‐sursă Java (Swing), XHTML 1.0 Strict, XUL

disponibil open source



2.0

Am putea “prelua” dintr‐o interfață finală(e.g., specificată într‐un limbaj de marcare)

informații pentru a modela la nivel abstract o interfață?



2.0

Utilizarea de tehnici de reverse engineering

pentru XHTML, se poate recurge la instrumentul ReversiXML

pentru cod compilat, există programul GrafiXML



2.0



2.0

Abordare bazată pe reguli

exemplu: un câmp de formular din (X)HTML

∀ x ∈ Ts : x = input and (x.type = “text” or x.type = “password” or x.type = NULL)

→ AddNode (“textComponent”, idText) where idText = NodeAmount (Tt)



2.0


tipologie a regulilor – conform (Florins, 2006):Final User Interface level rules

Concrete User Interface level rulesAbstract User Interface level rules

Tasks & Concepts level rules



2.0


Concrete User Interface level rules

transformarea componentelor grafice: resizing, modification, substitution, removal etc.

transformarea relațiilor dintre entitățile grafice:reorientation, moving



2.0

substitution removal moving



2.0


Abstract User Interface level rules

splitting rules(breaking the initial UI into chunks + adding transitions)



2.0

source interface(in the graphicaleditor GrafiXML)

executionof the splittingrule

box box

box

conform (Florins, 2006)



2.0

Studiu de caz: aplicație în domeniul e‐healthMulti‐platform for Emergency (Amouh et al., 2005)

disponibilitate pe 3 platforme:handhelddesktop

wall screens



2.0



2.0


inițial, s‐au luat în considerație diverse (meta‐)modele, conform nivelurilor de abstractizare



2.0



2.0


proiectarea inițială s‐a făcut pentru dispozitivul de referință

aplicând reguli de transformare & tehnici de graceful degradation,

s‐au dezvoltat interfețele şi pentru celelalte tipuri de ecrane



2.0



2.0

Studiu de caz: virtualizarea interfețelor‐utilizatorvirtualization of UIs (Vanderdonckt et al., 2004)

asocieri dintre componente de interacțiune 2D şi cele 3D



2.0



2.0

Studiu de caz: suportul pentru display‐uri multipleDistriXML (Grolaux & Vanderdonckt, 2005)

software architecture for migrating UIsfrom one platform to another at run‐time



2.0

Studiu de caz: suportul pentru display‐uri multipleDistriXML (Grolaux & Vanderdonckt, 2005)

detach migrate plastify

pentru migrare, se poaterecurge la design patterns (Javahery et al., 2004)



2.0



2.0



interface

Rendering

Final userinterface

UsiXMLmodels:

task, domain Generativeprogramming



Derivation rules

IdealXML

ReversiXML

FlashiXMLQtkXMLJaviXML

VisualiXML

TransformiXML

GrafiXMLVisiXML

SketchiXMLFormiXML

KnowiXML

MethodiXML



2.0

97 Polytechnic University of Valencia – Doctoral Course, Valencia, November 2006

Target Applications, Domains

Notations & tools User Interface Interaction Techniques

The Invisible UI

No more programming: only models

All Applications 2020

No Interaction TechniqueAutomated, batch systems Nothing

Character UIsBusiness applications Screen definitions

Graphical UserInterfaces

Information systems Entity‐relationshipAttribute model

State‐transition diagrams

Multi‐platform User Interfaces

Web, Java, C#,… applications

Task model, context model, UML,…

Virtual Reality User Interfaces3D Applications Scene model

Mixed RealityUser Interfaces

Command &control systems,

games

World models

Tangible UIsEmbodied UIsPhysical modelsEmbarked

systems

Palanque, 2002 & Vanderdonckt, 2006



2.0

Acest curs s‐a bazat în mare parte peJean Vanderdonckt (Université Catholique de Louvain),

Model‐Driven Engineering of User Interfaces,prezentare în cadrul

Polytechnic University of Valencia – Doctoral Course, 2006



2.0

interactivitatea în contextul ingineriei softwareutilizabilitate, calitate & modelare complexă



2.0

dr. sabin corneliu buraga - profs.info.uaic.robusaco/teach/courses/interfaces/... · (scapin&...

Documents