=Paper=
{{Paper
|id=Vol-2068/milc5
|storemode=property
|title=Beyond a Skeuomorphic Representation of Subtractive Synthesis
|pdfUrl=https://ceur-ws.org/Vol-2068/milc5.pdf
|volume=Vol-2068
|authors=Martin Lindh
|dblpUrl=https://dblp.org/rec/conf/iui/Lindh18
}}
==Beyond a Skeuomorphic Representation of Subtractive Synthesis==
https://ceur-ws.org/Vol-2068/milc5.pdf
Beyond a Skeuomorphic Representation
of Subtractive Synthesis
Martin Lindh
Department of Computer Science and Informatics,
School of Engineering, Jönköping University
Jönköping, Sweden
martin.lindh@ju.se
ABSTRACT skeuomorphic design view still thrives and that is digital
This proposition paper wants to raise the issue of design software versions of vintage music gear. This study will
ideology within the field of music software that recreates specifically focus on digital software versions of vintage
vintage analogue synthesizers using subtractive synthesis. synthesizers that use the classic subtractive synthesis.
There is a clear dominance of a skeuomorphic design
ideology regarding the Graphical User Interface (GUI) French company Arturia has for instance recreated classic
within this field. The suggested study aims to research if this synthesizers like the Arp 2600, Prophet 5 and Roland Jupiter
is a correct choice in terms us usability, accessibility and 8 keeping every rotary knob, patch cable and wooden detail
intuitiveness. The suggestion is to conduct a series of A/B in the synthesizers digital incarnations.
tests of custom prototype UIs on three predefined groups of While this makes sense from a nostalgic standpoint this study
users. Group A, with a previous knowledge of analogue aims to find out if it also makes sense from a usability and
hardware synthesizers, Group B, with a knowledge of music accessibility standpoint. One argument for this is that users
software but limited experience with analogue hardware who are acquainted with the original hardware immediately
synthesizers and finally Group C, with a limited knowledge know their way around the software.
and experience of both music software and analogue
hardware synthesizers. The prototype GUIs will be made Or is it a good idea to incorporate flat design philosophy and
using a skeuomorphic design paradigm as well as a flat also new kinds of input controls in the world of subtractive
design paradigm that also incorporates a couple of new ideas synthesis software synthesizers the same way it has now
in terms of input controls. The A/B tests will be come to dominate web design?
complemented with semi-structured interviews with the
participants.
Author Keywords
Software synthesizers; subtractive synthesis; music
software; graphical user interface; graphic design;
skeuomorphism; flat design.
ACM Classification Keywords
H.5.2. Information interfaces and presentation (e.g., HCI):
User Interfaces; H.5.5. Information interfaces and
presentation (e.g., HCI): Sound and Music Computing.
INTRODUCTION
Apple, in large part influenced by Steve Jobs, brought the
skeuomorphic design ideology to the large digital audiences
Figure 1. Arturia Prophet-V2.
in the early 21th century. The style has lost a little bit of Example of Skeuomorphic design recreating
ground every year since then. Today most web pages and the classic Prophet 5 synthesizer,
many mobile and desktop applications has abandoned the produced by Sequential Circuits 1978-1984.
realistic style for a more clean and simplified look, often
referred to as flat design. A development accelerated by the There exist some examples of flat design within GUI design
demands of responsive web design. There is however one for software synthesizers. The Floppytron Synth from
area within Graphical User Interface (GUI) design where the Sampleso [13] is one such example. Another interesting
example, especially concerning the visual cues found in the
input controls (e.g. value visualized by colors filling the up
© 2018. Copyright for the individual papers remains with the authors. the actual control) is the Aalto Semi-Modular Software
Copying permitted for private and academic purposes.
MILC '18, March 11, Tokyo, Japan.
Synthesizer from Madrona Labs [8].
download speed/minimal use of the Graphics Processing
Unit (GPU). Tuner (2014) describes flat design as removing
stylistic characters such as drop shadows, gradients, textures,
and any other type of design that is meant to make the
element feel three-dimensional [15]. It’s worth pointing out
though that flat design can still keep skeuomorphic elements
in the sense that it uses visual metaphors for real life objects.
It just doesn’t aim for a realistic graphic style.
Subtractive Synthesis
Figure 2. LFO-controls in The Floppytron Synth.
Subtractive synthesis is a method to produce an audio signal
Example of flat design GUI for software synthesizers. found in early hardware synthesizers of the 1960s and 70s. It
is still used in a majority of modern analogue synthesizers as
well, and often recreated digitally in software synthesizers
[6]. The audio signal/sound that is generated is attenuated by
a filter, subtracting frequencies and altering the timbre. In
essence, the sound will usually have three main elements
present: the sound generator (usually an oscillator), the filter
(to shape the tone) and the envelope (to control the volume
over time) [3]. In addition to this most analogue synthesizers
also include a Low-frequency Oscillator which produces
pulse for modulation of the audio signal. There is generally
also a Voltage-controlled amplifier to amplify the audio
signal.
PREVIOUS STUDIES
There exist several studies on skeuomorphism vs. flat design
[2], [11], [12], and there has been an ongoing debate
Figure 3. Aalto Semi-Modular Software Synthesizer. concerning especially Apple’s former fondness for the
skeuomorphic philosophy for a couple of years [1]. To my
There is no doubt though that when recreating classic knowledge though, no one has yet focused on software
subtractive synthesis in the computer, the realistic approach versions of classic subtractive synthesis in regards to this
is far more common in terms of the GUI. aspect of the GUI.
DEFINING CONCEPTS METHOD
The study will be centered around three key concepts. And The study will be conducted through a series of A/B tests on
although skeuomorphism and flat design might be public users from three clearly defined groups of users. The
knowledge by now there is a need to define how they will be members of the groups will be observed as they solve given
used in this particular study. For readers not well acquainted tasks using prototype software synthesizers with custom
with subtractive synthesis, this is defined as well. Both GUIs. One prototype will be designed in a skeuomorphic
regarding physical hardware and in the digital format that style with visual metaphors reminiscent of vintage hardware
will be used and tested in the study. synthesizers and another will be done with a flat design GUI
Skeuomorphism replacing the rotary knobs with new kinds of interactivity
Oxford Living Dictionaries defines skeuomorph [10] as “an (described under the section “Designing the Prototypes”).
object or feature which imitates the design of a similar Eventual differences in workflow between the prototypes is
artefact made from another material”, and for computing in of particular interest. After the A/B test the participants will
particular as “an element of a graphical user interface which be interviewed using a semi-structured interview format. The
mimics a physical object”. The graphic designer questions will be of qualitative nature and the participants
accomplishes this by using tints and shadows, perspectives will be asked to explain why a certain workflow where
and textures imitating physical objects. The idea is to make chosen or preferred. The aim is to answer questions
the interface easier to use for people already familiar with the regarding usability, intuitiveness, accessibility and general
objects that are pictured. User Experience (UX). There will be focus on differences
between the three groups of users as well as experiences of
Flat design
individual users regardless of group affiliation. Pure
The general idea concerning flat design is that it is simpler,
aesthetic preferences will also be of interest.
more streamlined and lacks the perspectives, textures and
lighting effects found in skeuomorphism. Flat design THE USER GROUPS
approaches the concept of stylization and functional These are the three groups of users that will participate in the
minimalism. Focus is ease of use, scalability and fast study:
Group A: Previous experience of both music software Prototype 1 (P1) will be made in a traditional skeuomorphic
and analogue hardware using subtractive synthesis design drawing inspiration from classic vintage hardware
This group of users will consist of persons that has synthesizers like the Minimoog Model D and Korg
knowledge and experience of music software and also Mono/Poly. The majority of the input controls will be made
previous experience with analogue hardware. This group up of digitally recreated rotary knobs. The design will
would appear to be a key target audience for skeuomorphic incorporate 3D perspective, artificial lighting resulting in
software synthesizers since they are the ones who would tints and shadows and textures recreating wood, metal and
benefit most from the software resembling vintage hardware. plastic details. Since the purpose of the study primarily is to
As an interesting paradox though, there exist at least one investigate different visual design paradigms, the general
study [14] suggesting they are sometimes convinced non- layout will be based on the very traditional oscillators > filter
users of software synthesizers, believing they lack the quality > envelope generator workflow. A layout presumably
of the original hardware. recognized by the participants in Group A. If initial tests
Group B: Previous experience of music software, limited prove confusing to this group, to use an actual digital
experience of analogue hardware recreation of for example the Minimoog Model D might be
In this group, the users are familiar with music software and an option.
producing music in general. They are however not
experienced in vintage or modern analogue synthesizer
hardware, and their experience with subtractive synthesis
should be very limited. Ideal participants would be musicians
working outside the field of electronic music.
Group C: Limited experience of both music software and
analogue hardware
This group will be made up of beginners in the realms of
music production and synthesizers. They have to have a fair
amount of computer literacy but no previous or limited
contact with music software or analogue hardware
synthesizer.
DESIGNING THE PROTOTYPES
The software synthesizer prototypes for the study will be
built using Native Instruments Reaktor 6, a modular Digital
Figure 5. Initial sketch of Prototype 2.
Signal Processing (DSP) lab [9]. The prototypes will recreate
a classic subtractive synthesis-signal path using two Voltage- Prototype 2 (P2) will be designed using a minimalistic flat
controlled Oscillators (VCOs), one highpass/lowpass filter design ideology with clear solid colours. In addition to this
(VCF), one Low-frequency Oscillator (LFO), an Envelop some changes will be done in terms of input controls. It will
Generator (EG) and a Voltage-controlled Amplifier (VCA). however keep the layout of components and elements found
in P1, making the visual paradigm and the input controls the
For clarity, the traditional names using VC as a prefix is used,
key differences between the two prototypes. One of the
even though a digital version of subtractive synthesis isn’t
skeuomorphic design choices the study aims to challenge is
technically voltage controlled.
the digitally recreated rotary knob. Virtual rotary knobs
present a physical challenge for linear input devices like the
computer mouse or the trackpad which aren’t naturally built
for rotation. However, some interfaces apply a hidden linear
input which lets the user drag up or down vertically to change
the value. In P2 this vertical linear input will get visual
signifiers in the form of sliders/meters that fills up showing
the value of the specific functions.
Presented here are some suggestions for changes in terms of
input controls for the specific components of the subtractive
synthesis signal-path. An initial sketch of Prototype 2 can
also be seen in Figure 5. There are good arguments for the
graphic designer to also take interest in the technical aspects
Figure 4. of the software [5]. Taking this into account, the design and
Building prototypes in Native Instruments Reaktor 6. layout may change if technical aspects, especially related to
The components of the prototypes will be layered with the actual synthesizer build in Reaktor 6, deems it necessary.
custom skins designed in Adobe Illustrator.
Voltage-controlled Oscillators (VCOs) Controllers
The key feature for the oscillators is the choice of While using the prototypes an external MIDI keyboard will
waveforms. Traditionally this is done with a rotary knob. For be used to control the pitch/key. There will however be no
the flat design prototype this will be changed to illuminating other forms of external physical controllers, for instance for
buttons giving more space to showcase images of the rotary knobs. Everything else in the synthesizers User
waveforms. The selected waveform will light up when Interface (UI) will be controlled using a standard computer
chosen. Choice of octave range will be done with a slider mouse.
instead of a rotary knob. CONCLUSIONS TO BE MADE
Voltage-controlled Filter (VCF) The study aims to find some evidence as to whether the
Taking in account interesting technical studies [4], [7] dominating skeuomorphic paradigm in designing software
regarding the relation between oscillators and filters, the synthesizers has merit outside of the obvious nostalgic
VCF of the flat design version will get a placement with a connotations. Does the resemblance to classic hardware have
close proximity to the oscillators. If it checks out well in the suggested positive effect on usability, accessibility and
initial testing, the VCF controls might even be included in general user experience? How well does the argument hold
the same component box as the VCOs. The traditional rotary up that if the user already knows how to use the hardware,
knob will be avoided here as well, exchanged for a more they will know how to use the software as well. And how
visually clear representation of value. A suggestion is to use does this affect users who actually hasn’t that kind of
two vertical meters that fills up with the amount of Cutoff previous knowledge? It’s also interesting to find out how the
and Resonance applied to the signal. different groups of users respond to changes in the design of
Low-frequency Oscillator (LFO)
interface and input controls. What kind of difference in
For the LFO the visual representation would be the same as preferences can be found? Which group of users responds
for the VCO, adding an extra slider for the frequency control. best to taking a flat design approach.
Illuminated buttons to choose the waveform. It would also In terms of visualizing the audio signal and testing new input
be interesting with an actual visual display on how the LFO controls there are also much that can be done by extending
modulates the signal path. the study to include more ideas and prototypes. One
Envelope Generator (EG) interesting continuation of the study would also be to try and
For the control of the Attack Decay Sustain Release (ADSR) find new visual representation of more complex modular
EG there already exists some good examples of visual synthesizers with far more components using a variety of
representation of the sound. The four stages of the EG can different input controls.
easily be converted to node points that the user can affect REFERENCES
directly inside the actual visualization. This takes away the 1. Chris Baraniuk. 2012. How We Started Calling Visual
need for rotary knobs in the EG component as well. Metaphors “Skeuomorphs” and Why the Debate over
Apple’s Interface Design is a Mess. The Machine
Starts. Retrieved December 12, 2017 from
http://www.themachinestarts.com/read/2012-11-how-
we-started-calling-visual-metaphors-skeuomorphs-
why-apple-design-debate-mess
2. Ivan Burmistrov, Tatiana Zlokazova, Anna Izmalkova
and Anna Leonova. 2015. Flat Design vs. Traditional
Design: Comparative Experimental Study. Human-
Computer Interaction – INTERACT 2015. Lecture
Notes in Computer Science, Volume 9297. Springer,
Figure 6. Cham.
Example of how every stage of the EG (ADSR)
can be converted to controllable node points. 3. Simon Cann. 2007. How to Make a Noise. A
Comprehensive Guide to Synthesizer Programming.
Voltage-controlled Amplifier (VCA) Coombe Hill Publishing.
You could argue that for a simple subtractive software
synthesizer the controls for the VCA could be dropped 4. Antti Huovilainen and Vesa Välimäki. 2005. New
altogether. To get good alignment with the skeuomorphic Approaches to Digital Subtractive Synthesis. Helsinki
design though, controls for gain and output will be included University of Technology, Laboratory of Acoustics and
in the flat design as well, but converted to horizontal sliders Signal Processing.
reminiscent of what you would find in an ordinary digital 5. Alan Kay. 1989. User Interface: A Personal View.
music player. Digital Design Theory. Princeton Architectural Press
(2016).
6. John Lane, Dan Hoory, Ed Martinez and Patty Wang.
1997. Modeling Analog Synthesis with DSPs.
Computer Music Journal, Volume 21, Number 4. The
MIT Press (1997).
7. John Lazzaro and John Wawrzynek. 2001. Subtractive
Synthesis without Filters. Computer Science Division,
UC Berkeley.
8. Madrona Labs, 2018. Aalto Semi-Modular Software
Synthesizer. Retrieved February 1, 2018 from
https://madronalabs.com/products/aalto
9. Native Instruments GmbH. 2017. Reaktor 6. Retrieved
December 12, 2017 from https://www.native-
instruments.com/en/products/komplete/synths/reaktor-
6/
10. Oxford Living Dictionaries. 2017. Retrieved December
14, 2017 from
https://en.oxforddictionaries.com/definition/skeuomorp
h
11. David Oswald and Steffen Kolb. 2014. Flat Design vs.
Skeuomorphism – Effects on Learnability and Image
Attributions in Digital Product Interfaces. HTW Berlin
University of Applied Science.
12. Tom Page. 2014. Skeuomophism or Flat Design:
Future Directions in Mobile Device User Interface (UI)
Design Education. International Journal of Mobile
Learning and Organisation (IJMLO), Volume 8,
Number (2014).
13. Sampleso. 2017. The Floppytron Synth. Retrieved
December 15, 2017 from
https://www.sampleso.com/shop/floppytron
14. Claes Thorén and Andreas Kitzmann. 2015. Replicants,
Imposters and the Real Deal: Issues of Non-Use and
Technology Resistance in Vintage and Software
Instruments. First Monday, Volume 20, Issues 11
(2015).
15. Amber Leigh Turner. 2014. The History of Flat
Design: How Efficiency and Minimalism Turned the
Digital World Flat. The Next Web. Retrieved December
15, 2017 from
https://thenextweb.com/dd/2014/03/19/history-flat-
design-efficiency-minimalism-made-digital-world-flat/