f3.js: A Parametric Design Tool for Physical Computing Devices
for Both Interaction Designers and End-users

Jun Kato, Masataka Goto
The presented system is publicly available at

http://f3js.org

2017/6/14

1

Physical computing devices, everywhere

2017/6/14

ACM DIS '17

2

Physical computing devices, everywhere• Physical user interfaces (as opposed to GUI)
• Home appliances• Smart devices• Internet of Things

2017/6/14

ACM DIS '17

3

Personal fabrication made easy

3D print in “Maker” venues
Photo taken by Atsushi Tadokoro (CC BY 2.0)
https://www.flickr.com/photos/tadokoro/5138646645

Soldering with parents

Working prototypes

Photo taken by Mitch Altman (CC BY-SA 2.0)
https://www.flickr.com/photos/maltman23/6954963529

How about device programming & assembly?
2017/6/14

ACM DIS '17

4

Research questions

regarding physical computing devices

For interaction designers• How can we support prototyping of the devices?
For end users• How can we support personal customization of the devices?
2017/6/14

ACM DIS '17

5

Preliminary observations:photos of 200 devices and informal interviews

2017/6/14

ACM DIS '17

6

Design patterns in Physical User Interfaces

Circle layout

Line layout• 187 devices have physical user interfaces on planar surfaces• 139 devices have modules placed along straight lines• 51 devices have modules placed on circular paths
2017/6/14

ACM DIS '17

7

Mental gap between software & hardware
SoftwareHardware• Designers need to imagine hardware while writing code
• “new Button()” does not infer any hardware layout
2017/6/14

ACM DIS '17

8

Difficulties in exploring design alternatives
Programming

Enclosure design• Expensive switching cost between two activities in two tools• Prior efforts in either one of these (software or hardware)2017/6/14

ACM DIS '17

9Preliminary observations (summary)• Typical design patterns should have tool support• Mental gap between software & hardware exists• Comparing alternatives is crucial for good design

2017/6/14

ACM DIS '17

10

f3.js: integrated support for programmers

DEMO• Live Programming with intuitive APIs of features & layout• Interactive development of IoT devices in one environment

2017/6/14

ACM DIS '17

11

Module repository for hardware metrics

2017/6/14

ACM DIS '17

12APIs for 3D extrusion and 2D layout

2D layout

3D extrusion
2017/6/14

ACM DIS '17

13

f3.js for parametric design of physicalcomputing devices• Typical design patterns should have tool support ☑ supported• Mental gap between software & hardware exists ☑ addressed• Comparing alternatives is crucial for good design ☑ supported

2017/6/14

ACM DIS '17

14

f3.js: customizing support for end-users

DEMO• Interactive UIs for customization• Automatic generation of devicebuilding instructions

2017/6/14

ACM DIS '17

15

User studies• 14 teams to create physical computing devices with f3.js• 5 interaction designers and 16 university students• Intel Edison and Grove modules, acrylic panels and screws provided• 3 interaction designers and 3 end-users with revised f3.js• 3 interaction designers asked to create parametric designs• 3 end-users asked to customize and assemble devices

2017/6/14

ACM DIS '1716

User studies:

results & discussions• Creativity support environments,
not tools• 3D vs 2D layout managers• Interface builders are important• Code-centric tool complements
to 3D modeling tools• Domain-specific language
support (like HTML)2017/6/14

ACM DIS '1717

f3.js: A Parametric Design Tool for Physical Computing Devices
for Both Interaction Designers and End-users

Jun Kato, Masataka Goto
The presented system is publicly available at

http://f3js.org

2017/6/14

18