The daisy patch is an eurorack module from electrosmith build to quickly prototype digital eurorack modules. It features a push button encoder, four potentiometers and an oled display with a resolution of 128 x 64 pixels. This is quite limited compared to the devices we use in our daily lives, like cell phones and tables and notebooks with touchscreens, mouse and keyboard and many more potential input devices and therefore represents its own challenges for the user interface designer and developer.
As motivated developers, we’re always up to a new challenge, so lets device in and see how to design user interfaces under these circumstances.
Design#
The pushbutton encoder will be reserved for the overall nacigation and the potentiometers will be used for control over the parameters. The overall navigation makes use of three levels, either level with one or multiple pages. Turning the rotarty encoder will switch pages or change selections while pushing it changes menu levels.
The navigation map is depicted in the following diagram.
So in the intial design the first level contains 7 pages, the second level contains only one page, and the third level contains 2 pages. The pages on the first and second level will present the user 4 parameters each which he can then control with the potentiometers. If the page would need more than 4 parameters, we will add additional pages to contain the additional parameters.
The page on level 2 is different. It facilitates either selecting on of the envelopes, or navigating to menu level 3. This page will therefore have a different design than the others.
Page Design for Level 1#
The page design for the pages in the level 1 menu is mostly custom based on the requirements for the individual page. Each individual page allows to configure specific settings of the currently selected envelop. The pages will be defined later once the specific pages and their functionality will be implemented. All pages have in common that they are always relevant for the currently selected envelope. They render the page name in the left hand corner of the screen and the index of the currently active envelope in the right hand corner of the screen so that is is always clear which envelope is being edited.
The layout is depicted in the graph below.
Rotating the encoder changes the currently active page and clicking the encoder navigates to the 2nd menu level.
Page Design for Level 2#
Level 2 only has one page. It allows the user to select the active envelope or open the third menu level where the user can setup the global configuration. It displays 6 smaller boxes to select the active envelope and one box labeled S to open the setup menu.
Rotating the encoder changes the currently selected envelope or the S page. The currently selected entry is highlighted with a white background. Clicking the encoder either navigates to the 3rd menu level if the S is currently selected or to the 1st menu level is any of the envelopes is selected.
Page Design for Level 3#
Every page in level 3 allows setting up global configuration parameters. These pages are custom to the configurable parameters and only have in common that they display the name of the page in the top right corner.
Rotating the encoder changes the currently active page and clicking the encoder navigates to the 1st menu level.
Now that the design is set, it only needs to be implemented :upside_down_face: which we’ll do in a follow up article in the series.