Categories
Mobile

New Mobile UI/UX for Assistive Music Technology

View the original post

Featuring an iOS guitar tuner app for visually impaired musicians.

Name: Tuneful

Tuneful home screen/note selection.

https://medium.com/media/16acbb2f9c293f45c3226e35ce638775/href

Design Functions

  • Pressing the buttons simulates braille language, and plays the sound of the chosen note.

Design Inspirations

  • The idea for a mobile guitar tuner for the visually impaired came when stumbling upon Google’s “TalkBack” Braille keyboard feature for Android. The interface and mechanics were very inclusive and integrative and piqued interest in terms of accessible and assistive UX/UI.
Google’s Braille keyboard “TalkBack” for Android

Problem

Accessible and usable music technology does not inclusively address the needs of the visually impaired.

Thesis

Design in music technology for the visually impaired needs to be more assistive rather than accessible so that visually impaired musicians can achieve at the same level as sighted musicians.

Tuneful inactive vs. active interface.

Current Assistive Music Technology

UX

Wireflow

Tuneful Wireflow (Wireframe + Flowchart)

Design Considerations

  • Ergonomic Interface
    The 6-button key interface was built for comfort, efficiency, and inclusivity.

The guitar has 6 strings. Listed from low to high, the guitar string notes are:
E, A, D, G, B, E. In guitar tuning E, A, D, G, B,E is the standard, because it ergonomically eases finger and hand transition between chords, and scales with little fret-hand movement. Braille is similar in that characters can be touched in a natural hand position.

  • Buttons vs. Gesture-Oriented Navigation
    The method and use of gesture-oriented navigation are common/trendy in one-hand mobile use for not having to alter your hand from a resting position. The use of two hands is necessary for the use of this application and when keying braille, making buttons a more appropriate choice for the design.
  • Color Palette
    Blue is a common colorblind-friendly color because it is still easily distinguishable making it an appropriate choice for the design as well.
Tuneful color style guide.
Tuneful color style guide.

The three types of colorblindness are Deuteranopia, Protanopia, and Tritanopia (green weak red weak, and blue weak). The use of colors that are weak or blended can become problematic. The guide below shows how Tuneful’s color palette looks from a color-blind person’s perspective.

Tuneful’s color style guide from a color-blind perspective.
  • Typeface
    Blacklisted was chosen for its distorted look, similar to an audio signal waveform.

Low Fidelity | High Fidelity Mockup

High Fidelity Mockup

Tuneful button keying simulation
Projections for vision impairment (2010–2030–2050) by National Eye Institute

8% of the American population is visually impaired. There are many causes for visual impairment from personal injury, to inherited conditions, infections, and age.

Studies out of the University of Melbourne have found that people who go blind at younger ages develop better pitch discrimination and pitch-timbre discrimination than sighted people, regardless of their levels of musical training.

User Personas

User personas: Jeff Healey, Jose Feliciano, Johnny Hiland

Defining the divide.
As technology pioneers forward the use and inclusion of music technology will create more opportunities for musicians, but without proper study we will only re-create rather than advance. Defining the divide of accessible, and assistive UX/UI and inclusivity moving forward will take a well-structured approach and understanding of the user method. Tuneful is one of many concepts opening the doors for creativity and shining a light on a community left in the dark. Assistive music technology and its pioneers will effectively help the visually impaired to communicate with sited peers and instructors.

View mockups and other projects here!


New Mobile UI/UX for Assistive Music Technology was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.