Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

0

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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

  1. 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.
  2. 2. Lively Walk-Through
  3. 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. 4. Lively Walk-Through in Action
  5. 5. UI Prototyping with Lively Walk-Through
  6. 6. Story
  7. 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
  8. 8. Overview of Customer's Requirements
  9. 9. VDMer explaining the spec of DB
  10. 10. Simple GUI Prototype for Query
  11. 11. Sketching UI Design for Query
  12. 12. Sketching UI Design for Search Result
  13. 13. Putting the Sketch into the Prototype
  14. 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
  15. 15. Lively Walk-Through: System Design
  16. 16. Lively Walk-Through Prototyping Environment
  17. 17. 3 Layers for Animation
  18. 18. Top Layer: VDM Browser
  19. 19. Bottom Layer: UI Parts
  20. 20. Middle Layer: Livetalk Browser and Event-Action Editor
  21. 21. 3 Tools for Discussion
  22. 22. Frame Viewer shows what's going on
  23. 23. Cut Viewer to note and review discussion
  24. 24. Coverage Viewer shows what are unseen
  25. 25. System Requirements OS: Linux or MacOSX Smalltalk System: Squeak 4.3 or higher VDM interpreter: VDMJ-2.0.1 Libraries: SOMETHINGit, OSProcess
  26. 26. Architecture
  27. 27. Major Components
  28. 28. Lightweight Formal Methods
  29. 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. 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. 31. Two Worlds
  32. 32. Why collaborate? UI design without computer science may "create" an unfeasible UI. Functional modeling without interaction design may "construct" a stressful system.
  33. 33. UI Prototyping Cycles
  34. 34. How to make this happen?
  35. 35. How to make this happen? or Why this does not happen often?
  36. 36. They are Different Animals
  37. 37. They are Different Animals Formal specification UI/UX design the world of MAKING the world of USING
  38. 38. They are Different Animals What is the system? What the user interact with?
  39. 39. They are Different Animals Logical soundness Cognitive soundness
  40. 40. They are Different Similar Animals Understand by writing Understand by sketching
  41. 41. They are Different Animals Friends Animating the system makes formal engineers and UI/UX designers understand their design artifacts
  42. 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. 43. How to make this happen?
  44. 44. How to make this happen? Animation
  45. 45. Animation And Discussion Drive UI Prototyping Cycles
  46. 46. Live Demo
  47. 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

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

Views

Total views

897

On Slideshare

0

From embeds

0

Number of embeds

6

Actions

Downloads

8

Shares

0

Comments

0

Likes

0

×