Steve LaFrance's Portfolio

Hypothesis:
The waveform display area is the most important area of the interface. No matter what function outside of observing the waveform area it should still be visible.

Prototype application:
All on-screen menus are to be partially transparent to allow for the observation of waveforms while interacting with the menu content.

Test results:
Internal testing revealed that this approach made the content shown on menus difficult to read and interact with. The presence of waveforms behind the menus was distracting and slowed users down, impeded their ability to quickly understand the content presented on the menu.

Ideate:
The level of transparency was reduced but not entirely eliminated in an effort to accommodate the original hypothesis and limit the distraction created by the waveform content showing through.

Test results:
User testing revealed that over 90% of users found even the reduced transparency difficult to work with and unappealing. When presented with mock-ups that used varying levels of transparency they expressed a strong preference for no transparency. For this reason all menus were updated to be fully opaque.

Initial menu transparency approach

Initial menu transparency approach

Second iteration menu transparency

Final menu transparency

Hypothesis:
Users are most familiar with UI controls being placed at the top of the application. All buttons and menu controls should be located there based on current design paradigms.

Prototype application:
All UI controls were placed in a “control bar” at the top of the application area. To accommodate touch interaction this bar expanded vertically.

Test results:
Users expressed frustration with the multiple tabs and large “control bar” area. Testing showed that they felt it became too prominent and distracted from the work that needed to be done. This was most prominent when menus did were only partially full creating large blank areas.

Ideate and test results:
The menus were condensed and tabs eliminated. Upon further testing this still did not correct the users dislike of the presentation of the UI controls.

Ideate and test results:
In conjunction with another set of tests the menus were completely redesigned to be contained in a “control bar” that was located on the right-hand side of the display. The content was reorganized to leverage floating menus as well as reskinned using a darker color palette that better harmonized with the physical product.

Hypothesis:
The UI control areas should be color linked to the exterior color of the product to provide strong focus/contrast to the waveform display area (presented in black).

Prototype application:
All UI control areas were presented in a light gray tone that reflected the light gray color of the physical product.

Test results:
Internal testing showed that users disliked the strong contrast. It resulted in eye strain and generally distracted from the information being displayed in the waveform display area.

Ideate and testing:
Multiple color combinations were created for the control areas of the UI. Three different “tone” sets were selected for testing. The initial belief of the design team was that the slightly darker version would be selected, this would support the original hypothesis but help reduce the eye strain issue.

Test results:
The user testing resulted in nearly 80% of the users expressing preference for the darkest “tone” UI, only 7% selected the middle “tone” that the design team had expected to be the preferred model. Further investigation revealed that the new darker tone actually anchored the UI in the product display, the reason being the large black area of glass that separated the UI from the actual product itself.

Initial control area color scheme

First alternate control area color scheme

User selected control area color scheme

Selected color scheme in product