lively walk-through: a lightweight formal method in ui/ux design

47
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.

Upload: tomohiro-oda

Post on 10-May-2015

268 views

Category:

Technology


0 download

DESCRIPTION

Presented at the 4th Symposium on Architecture Oriented Formal Approaches to High Quality Software Development

TRANSCRIPT

Page 1: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

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

Tomohiro OdaSoftware 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.

Page 2: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Lively Walk-Through

Page 3: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

What is Lively Walk-Through?

UI Prototyping environment built onVDM-SL interpreter and Smalltalk system

Users:VDM specifiers and UI/UX designers

Objective:To better undersntand the systemTo discuss and make agreements

Page 4: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Lively Walk-Through in Action

Page 5: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

UI Prototypingwith Lively Walk-Through

Page 6: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Story

Page 7: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Case Story :Chemical Reaction Database

A VDM engineer and two UI designersis working together on the Chem DB project

Feb 2013, the first meeting of the VDM engineer and the UI designers

Page 8: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Overview ofCustomer's Requirements

Page 9: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

VDMer explaining the spec of DB

Page 10: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Simple GUI Prototype for Query

Page 11: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Sketching UI Design for Query

Page 12: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Sketching UI Design for Search Result

Page 13: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Putting the Sketch into the Prototype

Page 14: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

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

Page 15: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Lively Walk-Through:System Design

Page 16: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Lively Walk-ThroughPrototyping Environment

Page 17: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

3 Layers for Animation

Page 18: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Top Layer: VDM Browser

Page 19: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Bottom Layer: UI Parts

Page 20: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Middle Layer: Livetalk Browserand Event-Action Editor

Page 21: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

3 Tools for Discussion

Page 22: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Frame Viewershows what's going on

Page 23: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Cut Viewerto note and review discussion

Page 24: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Coverage Viewershows what are unseen

Page 25: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

System Requirements

OS: Linux or MacOSX

Smalltalk System: Squeak 4.3 or higherVDM interpreter: VDMJ-2.0.1

Libraries: SOMETHINGit, OSProcess

Page 26: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Architecture

Page 27: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Major Components

Page 28: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Lightweight Formal Methods

Page 29: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Why Lightweight?

Formal specs in other MORE than specification phase...● requirement analysis

○ type checking, animation● design

○ reference, assertion● test

○ test oracles, test cases

Page 30: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

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?

Page 31: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Two Worlds

Page 32: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Why collaborate?

UI design without computer science may "create" an unfeasible UI.

Functional modeling without interaction design may "construct" a stressful system.

Page 33: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

UI Prototyping Cycles

Page 34: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

How to make this happen?

Page 35: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

How to make this happen?

or

Why this does not happen often?

Page 36: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

They are Different Animals

Page 37: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

They are Different Animals

Formal specification UI/UX design

the world of MAKING the world of USING

Page 38: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

They are Different Animals

What is the system? What the user interact with?

Page 39: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

They are Different Animals

Logical soundness Cognitive soundness

Page 40: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

They are Different Similar Animals

Understand by writing Understand by sketching

Page 41: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

They are Different Animals Friends

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

Page 42: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

They are Good Friends

VDM spec gives a functional basisVDM animation gives motion to sketches

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

Page 43: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

How to make this happen?

Page 44: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

How to make this happen?

Animation

Page 45: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Animation And Discussion DriveUI Prototyping Cycles

Page 46: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

Live Demo

Page 47: Lively Walk-Through: A Lightweight Formal Method in UI/UX design

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