New strategies for old problems: model-driven user interfaces - - PowerPoint PPT Presentation

New strategies for old problems: model-driven user interfaces

Giorgio Brajnik

• Dip. di Matematica e Informatica

University of Udine, Italy www.dimi.uniud.it/giorgio

eAccess Forum Paris 31 March 2014

c Giorgio Brajnik New strategies for old problems: model-driven UIs 1 / 20

Looking beyond the ALT text

Difficult accessibility problems

◮ difficulties in making sense of what one perceives ◮ difficulties in understanding how to interact: what can

be done, why something doesn’t behave as expected, too complex info or interaction options, ...

◮ cognitive barriers: learning new procedures,

comparing outcomes, carrying out complex/long tasks, coping with info overload

◮ emotional barriers: eg. older adults and their fear of

breaking things

c Giorgio Brajnik New strategies for old problems: model-driven UIs 2 / 20

Complex assistive technology

◮ that changes the way people interact ◮ eg screen readers

◮ change in input medium ◮ change in output modality ◮ change in actions: page scanning, table mode, form mode,

links list, ...

◮ web developers have a hard time to figure it out

c Giorgio Brajnik New strategies for old problems: model-driven UIs 3 / 20

Accessibility is difficult to assess

Maximum agreement b/w experts on outcomes of WCAG 2.0 success criteria

c Giorgio Brajnik New strategies for old problems: model-driven UIs 4 / 20

Model-driven engineering of user interfaces

Tenets

◮ Modeling lifts the abstraction level from code to models ◮ It provides means to direct the course of

understanding, design, construction, deployment,

• peration, maintenance and modification

◮ Thus modeling could be a way to overcome some of the

challenges

c Giorgio Brajnik New strategies for old problems: model-driven UIs 5 / 20

Example

A UI for controlling a classroom

◮ for 3 light sections ◮ for audio-video equipments ◮ for ventilation

c Giorgio Brajnik New strategies for old problems: model-driven UIs 6 / 20

Example

c Giorgio Brajnik New strategies for old problems: model-driven UIs 7 / 20

What model?

c Giorgio Brajnik New strategies for old problems: model-driven UIs 8 / 20

Data views (classroom example)

c Giorgio Brajnik New strategies for old problems: model-driven UIs 9 / 20

State charts

◮ invented by D. Harel in early ’80 ◮ in the context of avionics systems ◮ to cope with "badly organized documentation and mental

models" of engineers

◮ centered on events/conditions/actions rules

Key notions

◮ "device modes" are crucial for understanding ◮ visual language very powerful

c Giorgio Brajnik New strategies for old problems: model-driven UIs 10 / 20

State machines in UML 2.4

◮ Extended finite state machines: variables and operations

• n them

◮ Transitions with event triggers, guards, actions ◮ States with entry/exit/do actions ◮ State hierarchy ("superstates" and "superedges") ◮ Concurrent regions ◮ History ◮ Arbitrary plumbing with pseudostates ◮ Broadcasting of events

c Giorgio Brajnik New strategies for old problems: model-driven UIs 11 / 20

Behavior model for classroom UI

c Giorgio Brajnik New strategies for old problems: model-driven UIs 12 / 20

Behavior model

c Giorgio Brajnik New strategies for old problems: model-driven UIs 13 / 20

Variant

c Giorgio Brajnik New strategies for old problems: model-driven UIs 14 / 20

Example 2

c Giorgio Brajnik New strategies for old problems: model-driven UIs 15 / 20

Example 3

c Giorgio Brajnik New strategies for old problems: model-driven UIs 16 / 20

Possible accessibility benefits

◮ Structure of interaction is explicit:

◮ it could be embedded into the UI ◮ specific information could be added: ◮ What information is displayed in current state? ◮ Which actions are possible? ◮ Where do they lead? ◮ Can I go back? ◮ How far a certain functionality is? ◮ Is there a shortcut? ◮ it is much more abstract than ARIA markup c Giorgio Brajnik New strategies for old problems: model-driven UIs 17 / 20

UICompiler

Examples were automatically generated by

◮ a standalone Java application ◮ capable of handling standard UML state machines, with a

dozen types of widgets and extensible with custom templates

◮ able to generate mixed-fidelity prototypes along 3

dimensions: visual fidelity, data richness, interaction richness

◮ for a single target platform: HTML, CSS, jQuery, YUI

c Giorgio Brajnik New strategies for old problems: model-driven UIs 18 / 20

Conclusion

◮ Diversity in the ways people use the web is a cause for the

poor current accessibility status.

◮ New design approaches are needed. ◮ One avenue is Model-based User Interfaces, like

UML-IDEA. But

◮ Is it viable? ◮ Is it useful? ◮ Is it worthwhile? c Giorgio Brajnik New strategies for old problems: model-driven UIs 19 / 20

THANK YOU!

Questions?

These slides:

http://www.dimi.uniud.it/giorgio/events/ paris.pdf

Contact:

◮ brajnik@uniud.it

www.dimi.uniud.it/giorgio

◮ Interaction Design Solutions

(http://www.designcoaching.net) , a spin-off of the University of Udine.

c Giorgio Brajnik New strategies for old problems: model-driven UIs 20 / 20