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, operation, 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 on 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
Recommend
More recommend
