Lively Walk-Through:A Lightweight Formal
Method in UI/UX Design

Tomohiro Oda
Software Research Associates, Inc.
Key Technology Laboratory
This work was supported by Kaken Japan Society for the Promotion of Science, Grants-in-Aid for Scientific Research,
Grant Number 24220001.

Lively Walk-ThroughWhat is Lively Walk-Through?
UI Prototyping environment built on
VDM-SL interpreter and Smalltalk system
Users:VDM specifiers and UI/UX designers
Objective:
To better undersntand the system
To discuss and make agreements

Lively Walk-Through in ActionUI Prototypingwith Lively Walk-ThroughStoryCase Story :Chemical Reaction Database
A VDM engineer and two UI designers
is working together on the Chem DB projectFeb 2013, the first meeting of the VDMengineer and the UI designers

Overview ofCustomer's Requirements

VDMer explaining the spec of DB

Simple GUI Prototype for QuerySketching UI Design for QuerySketching UI Design for
Search Result

Putting the Sketch into the Prototype

Assignment for the next session

VDM: writes a VDM spec for "reaction path"estimates computational complexity ofreachability test
UI: designs interactivity of energy-level graphs

Lively Walk-Through:System Design

Lively Walk-ThroughPrototyping Environment

3 Layers for Animation

Top Layer: VDM Browser

Bottom Layer: UI Parts

Middle Layer: Livetalk Browser
and Event-Action Editor

3 Tools for Discussion

Frame Viewer
shows what's going on

Cut Viewer
to note and review discussion

Coverage Viewer
shows what are unseen

System Requirements
OS: Linux or MacOSX
Smalltalk System: Squeak 4.3 or higher
VDM interpreter: VDMJ-2.0.1
Libraries: SOMETHINGit, OSProcess

ArchitectureMajor Components

Lightweight Formal Methods

Why Lightweight?
Formal specs in other MORE than specification
phase...
● requirement analysis○ type checking, animation● design○ reference, assertion● test○ test oracles, test cases

Why Lightweight?
Formal specs in other MORE than specification
phase...
● requirement analysis○ type checking, animation● design○ reference, assertion, unit test

● test○ test oracles, test cases● UI/UX design○ why not?

Two Worlds

Why collaborate?
UI design without computer science may"create" an unfeasible UI.
Functional modeling without interaction design
may "construct" a stressful system.

UI Prototyping Cycles

How to make this happen?

How to make this happen?
orWhy this does not happen often?

They are Different Animals

They are Different Animals

Formal specification

UI/UX design

the world of MAKING

the world of USINGThey are Different Animals

What is the system?

What the user interactwith?

They are Different Animals

Logical soundness

Cognitive soundness

They are Different Similar Animals

Understand by writing

Understand by sketchingThey are Different Animals Friends

Animating the system makes
formal engineers and UI/UX designers
understand their design artifacts

They are Good Friends
VDM spec gives a functional basis
VDM animation gives motion to sketches

UI sketch gives a context of functions
UI animation gives user's perception

How to make this happen?

How to make this happen?

Animation

Animation And Discussion DriveUI Prototyping Cycles

Live DemoConclusion● Lively Walk-Through bridges between
functional modeling and UI/UX design○ VDM animation gives motion to a UI sketch.
○ UI animation gives user's perception.

Future Work● Image processing (animating a sketch)● Support for post-session tasks○ for VDM engineers○ for UI designers