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/