Lumo Interactive works with hundreds of clients a year, and has created over a thousand custom interactive floor and wall displays for companies all over the world. This wouldn't be possible if we didn't spend a ton of time teaching our clients, who are primarily artists and agencies, how to think about their design projects and create compelling graphics for their interactive displays.
Over the next few weeks, we'll be publishing a post each week covering some basic design principles you should keep in mind when you're developing an interactive display.
Lighting and Contrast
By now, you've probably seen the amazing images of Teamlab's immersive digital museums. You may be wondering how they get such amazing contrast when all the projection installations you've ever seen appear washed out.
Remember that black = no light in a projection. You can achieve dark colors in two ways - by using a high contrast surface material designed for projection, or by turning off the lights so that the projection is the only source of light in the room. The best result is accomplished by combining both these techniques. This is what TeamLab does.
When you're designing an interactive display, you should avoid an incongruous style at all costs. Interactive floors and walls are not standalone apps, like the ones you download to you phone to play in the bathroom when you're procrastinating at work. You need to keep in mind and respect the architectural features of the room where your display is going to live, otherwise it'll look tacky, and won't invite interaction.
Think about how you'll house your hardware so it fits the environment, and so that it's easily accessible for maintenance. When you mount touchscreens into a wall or place projectors inside a ceiling, you'll have to consider ventilation, access, power, and overall aesthetics.
The last thing you want is for people to notice the equipment rather than noticing the display. Place hardware out of sight as much as possible, and make sure the display is the primary focus of the space.
We could write an entire book on this subject, but the following summary is the process Lumo follows to design UI for our installations. This same process has been used by many of our clients to cut down the final cost of their custom Lumo Play development projects.
1) Wireframe a layout for each screen in your display using paper prototyping, and make a complete storyboard showing how users navigate from one content piece to the next.
2) Conduct a useability test by having people ‘try’ your paper layout. This is called bodystorming.
We typically invite users of different ages and abilities to try our paper prototype. Depending on the complexity and goals of the installation, we may also conduct surveys, film our tests, and/or split test several layout ideas to help our team identify useability issues before we start designing and coding.
3) Find reference art and present some style options to your client. When choosing fonts, remember to keep in mind legibility, multilingual support, and content additions. Mood boards are a fantastic way to incorporate ideas and styles from other elements in the installation environment.
4) Finalize the layout design with the client, and provide your developers with the wireframes and placeholder art. This way, your chosen development team can start programming the project while the design team develops the final art.
Following these steps will allow you to finish your project more quickly. By designing your layout and UX first, you can test your usability right away, set reasonable goals for the interaction and functionality, and have your designers and developers working in parallel as quickly as possible.
If you have a custom project you'd like to discuss, you can reach Lumo Play's developers by submitting an estimate request: https://www.lumoplay.com/get-a-quote/custom-order-quote, or you can leave a comment below!