Lively Walk-Through: A Lightweight Formal Method in UI/UX design
?
1 like?956 views
Presented at the 4th Symposium on Architecture Oriented Formal Approaches to High Quality Software Development
Lively Walk-Through: A Lightweight Formal Method in UI/UX design
- 1. 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.
- 3. 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
- 4. Lively Walk-Through in Action
- 5. UI Prototyping with Lively Walk-Through
- 6. Story
- 7. Case Story : Chemical Reaction Database A VDM engineer and two UI designers is working together on the Chem DB project Feb 2013, the first meeting of the VDM engineer and the UI designers
- 9. VDMer explaining the spec of DB
- 10. Simple GUI Prototype for Query
- 11. Sketching UI Design for Query
- 12. Sketching UI Design for Search Result
- 13. Putting the Sketch into the Prototype
- 14. Assignment for the next session VDM: writes a VDM spec for "reaction path" estimates computational complexity of reachability test UI: designs interactivity of energy-level graphs
- 17. 3 Layers for Animation
- 18. Top Layer: VDM Browser
- 19. Bottom Layer: UI Parts
- 20. Middle Layer: Livetalk Browser and Event-Action Editor
- 21. 3 Tools for Discussion
- 22. Frame Viewer shows what's going on
- 23. Cut Viewer to note and review discussion
- 24. Coverage Viewer shows what are unseen
- 25. System Requirements OS: Linux or MacOSX Smalltalk System: Squeak 4.3 or higher VDM interpreter: VDMJ-2.0.1 Libraries: SOMETHINGit, OSProcess
- 26. Architecture
- 27. Major Components
- 29. Why Lightweight? Formal specs in other MORE than specification phase... ¢ requirement analysis ＄ type checking, animation ¢ design ＄ reference, assertion ¢ test ＄ test oracles, test cases
- 30. 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?
- 31. Two Worlds
- 32. Why collaborate? UI design without computer science may "create" an unfeasible UI. Functional modeling without interaction design may "construct" a stressful system.
- 34. How to make this happen?
- 35. How to make this happen? or Why this does not happen often?
- 36. They are Different Animals
- 37. They are Different Animals Formal specification UI/UX design the world of MAKING the world of USING
- 38. They are Different Animals What is the system? What the user interact with?
- 39. They are Different Animals Logical soundness Cognitive soundness
- 40. They are Different Similar Animals Understand by writing Understand by sketching
- 41. They are Different Animals Friends Animating the system makes formal engineers and UI/UX designers understand their design artifacts
- 42. 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
- 43. How to make this happen?
- 44. How to make this happen? Animation
- 45. Animation And Discussion Drive UI Prototyping Cycles
- 46. Live Demo
- 47. 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