UI Design for Audio: How to Design for Hi-Fi
We love good Hi-Fi and this passion drove us to the conclusion that designing interfaces for it must be the ultimate thing for us. After several years in the industry and projects for clients such as NAD or Bluesound Network Speakers, we learned a lot about interfaces for music and Hi-Fi. Here is what we learned.
Design 4D
Especially with Hi-Fi-equipment your App is part of a team, just the tool to get the other devices running the way the user expects it. Because of this, understanding the real life scenario is key. He wants to set up a player, so keep in mind the distances. Understand how loud stuff should be when setting up the device for the first time. And even if he listens to music, what should the App deliver? The App is the portal to the music but while listening to it, the user might roam through his apartment or simply wants to enjoy the album-art. So keeping all four dimensions in mind helps a lot to get users exactly where they are.
Patterns Are Key
When people are using products they want the “shiny shiny”. But not to any extent. Working with patterns is key when you’re in the audio-area. These are Apps that people use while preparing for the day, at work or at night-time. Something that gets used that often needs to be super considered and can incorporate the “shiny shiny” later when the most important criterias are matched. This way and not the other way around you produce tools that people love to use. I love to play around with perception in UI but everytime I hand over crazy things to prospects, you feel the wall between them and the task they wanted to tackle. Patterns are the way to get down those walls and get people to their music quickly. Wether it be lists for content or simple navigation in the now-playing-area. Work with what people expect and extend from their. Not the other way around.
Developers <3
Especially with things like data-driven network speakers, working with developers closely is key. Having some good documentation about what the API is capable of or at least working together in Slack to have a great back and fourth is helping a lot to create a good App. Integrating Devs into the conversation early to see where we are and how big the playground is helps to figure out what the features might look like and how the perfect result might be in the future.
Dark is the new cool
No area benefits as much from a dark interface as music-apps do. Especially in the audio-segment users often open your App when it’s early in the morning or they are having some cozy chill on their couches in the evening. Having a bright and glary interface might draw your users away from your App and product quite fast. Another plus is also that dark interfaces celebrate album-artwork much better than a brighter interface does.
Another plus is also that dark interfaces celebrate album-artwork much better than a brighter interface does.
But they bring their own challenges as well. Since shadows are no option for separating areas, you have to get creative to make your layouts. From lines to dozens of shades of grey (not as much as in the movie) you have to stick to your toolset to move peoples attention from A to B.
