User Interface Specification in Complex Web-based Information Spaces
INSPECTOR: Method and Tool for Visual UI Specification
1Human-Computer Interaction Lab, University of Konstanz, Germany2Daimler AG, Group Research & Advanced Engineering GR/ESP, Ulm, Germany
Thomas Memmel1, Heiko Ziegler2, Richard Oed2, Harald Reiterer1
Thomas Memmel1, Harald Reiterer1
IASTED-HCI 2008, Innsbruck (Austria), 18.3.08Combined talk about UI specifcation methods and tools Thomas Memmel et al.
How do we build interactive systems with high UI quality and usability in complex organizations?
2
Usability Expert: - Must bridge the disciplines- Needs to extend his expertise
Usability-driven question: Bridge the gaps
IASTED-HCI 2008, Innsbruck (Austria), 18.3.08Combined talk about UI specifcation methods and tools Thomas Memmel et al.
Responsibility Assignment in Corporate Projects
3
IASTED-HCI 2008, Innsbruck (Austria), 18.3.08Combined talk about UI specifcation methods and tools Thomas Memmel et al.
Current Situation• Media disruptions• Text-based artifacts• Document-based requirements management• Difficult to translate into UI• Intransparent • Ambiguous
Corporate UI Development Process
IT Supplier
Client
4
Required Change• Usability strategic factor• UE must not be outsourced• Early prototyping• Rapid feedback• Corporate Design • Specification incl. Design
IT Supplier
Client
IASTED-HCI 2008, Innsbruck (Austria), 18.3.08Combined talk about UI specifcation methods and tools Thomas Memmel et al.
Solution A: Model-Driven UI Specification
5
IASTED-HCI 2008, Innsbruck (Austria), 18.3.08Combined talk about UI specifcation methods and tools Thomas Memmel et al.
MAXpro (Daimler AG)
• XML-based UI Prototyping & Specification tool• Motivation:
– function as a vehicle for discussions– easy generation of alternate UI design solutions– different versions of the UI generated easy and
quickly– early externalization of design vision (client)– up-front usability evaluation (client) – prevents costly late-cycle changes and helps to – become less dependent on a supplier
6
MAXpro: Video
7
IASTED-HCI 2008, Innsbruck (Austria), 18.3.08Combined talk about UI specifcation methods and tools Thomas Memmel et al.
MAXpro: Lessons Learned
8
• Formalization vs. Chance for Innovation
• Rather inappropriate to propel creative processes
• Actors cannot take part in participatory design without knowing the terminology
• Applied no sooner than after the requirements analysis
– Office stays the dominant tool in earlier phases
– User and task modelling misses
• Design rationale not incorporated, but dispersed in different media
IASTED-HCI 2008, Innsbruck (Austria), 18.3.08Combined talk about UI specifcation methods and tools Thomas Memmel et al.
Solution B: Model-Based UI Specification
9
IASTED-HCI 2008, Innsbruck (Austria), 18.3.08Combined talk about UI specifcation methods and tools Thomas Memmel et al.
Interactive UI Specification Explained
10
Interactive UI Prototypes Interactive UI Specifications
Vehicle for requirements analysis
Vehicle for requirements specification
Exclusively models the UI layer; may be inconsistent with specification and graphical notations
Allows drill down from UI to models; relates UI to requirements and vice versa
Either low-fidelity or high-fidelity Several levels of detail
Supplements text-based specification
Alternative to text-based UI specification
Design rationale saved in other documents
Incorporates design knowledge and rationale
Mayhew, Rosson & Caroll, Constantine
Constantine, Ambler, Beck
Holt, Ambler
Leve
l of a
bstr
actio
n: T
ext t
o U
I des
ign
Define a common denominator for interdisciplinary UI modelling (Bridge the gaps)
New Research
A common denominator in UI Modelling
Scenario Map
Interactive UI Specification
Inspector UI design
Detailed specification design
Medium-fidelity design
Abstract canonical designPersonas, User Roles
User Role Map Use Case DiagramUse Case Diagram
Task Map
Flow DiagramEssential Use Case
Activity Diagram
Data Flow Diagram
UI
Storyboard
Use
r M
odel
Tas
k M
odel
Inte
ract
ion
Mod
elV
anderdonckt: CA
ME
LEO
N R
eference Fram
ework
INSPECTOR: Video
13
IASTED-HCI 2008, Innsbruck (Austria), 18.3.08Combined talk about UI specifcation methods and tools Thomas Memmel et al.
Summary & Conclusion
• Model-driven and model-based approach for UI specification
• New research towards a common denominator for UI-related modelling
• Idea of interactive UI specifications
• First empirical studies prove: the idea to interconnect a thoughtful selection models with different levels of UI design very much contributes to UI specification processes in client organizations
14
Thank you very much
Please do not hesitate to ask questions
15