Default vs. Custom UI
A Guide On “How Not to Piss Off Your Engineers”
Default components are important. It’s critical that we have standards for all things in design, whether it’s the height for a bar stool, the size of a button, or the amount of guacamole you get in your super burrito. Standards drive cheaper production, unify language, and make deviations stand out.
Modernist design is a great example of building systems out of default components, but customizing critical components to great effect.
This poster by Experimental Jetset employs a standard grotesk font in black ink on white paper chosen clearly and accurately to communicate the necessary information.
This particular poster is for performance artist Vanessa Beecroft. To create the visual sense of a theater, Experimental Jetset used a single line, duplicated and rotated around one central point to create the graphical representation of a performer and the audience. They stuck so close to the “default” nature of modernism that when they deviated slightly it made an incredible design impact. The effort they used to create this impactful representation is minimal, but the effect is huge. They zeroed-in on the element that makes the design information interesting, and highlighted it with contrast of form.
Now, let’s talk UI. Designers love making custom solutions. It’s the inner art student in us that wants to leave a legacy or introduce novelty into our work. This creative thinking can lead to really unique interactions.
Take musical.ly, a lip syncing app that employs full-screen video as it’s primary interface. While certainly identifiable, the same novelty can be introduced with great folly. Such is the case with older interfaces — Windows Media Player as an example has become the butt of many design jokes, and for good reason.
Both musical.ly and Windows Media Player are examples of incredibly detailed design, but only musical.ly customizes with intention of content consumption.
WMP is customized to show off the artist’s hand at rendering. For musical.ly, the designer’s voice comes through in the user experience. It’s equally seen in the information hierarchy, the focus on consumption, the ease of interaction, and any assortment of meta design details. In this case, the goals of the viewer are prioritized above vanity, while preserving distinct identity. From the full-bleed vertical video content to the floating UI components created as derivatives of standard iOS design, the entire interface oozes customization.
And the list continues. They’ve designed customized segmented controls to quickly navigate between stream types. Since there are no floating action buttons on iOS, they designed a custom sidebar component to focus per-content interaction in close proximity to its parent component.
But customization doesn’t imply impact. You can strip away incredibly intricate UI to its bare essentials and still create an engaging experience.
Starting to see the correlation?
Instagram is incredibly standard. The new version even more than the last. The areas they customize, such as the photo list on the home tab, the curated results on the search tab, and the unique creation flow only slightly deviate from the stock iOS controls and flows.
The result is a universally accessible application. New and old users don’t need to learn or re-learn a method of interaction, visual language, or information hierarchy.
How do you determine when and where to customize elements? It requires careful consideration of potential design and development hours, balanced against the learning curve it takes your user to understand a non-standard approach.
It also means diligently defining your core product. If you are making an application all about finding nearby rollercoasters, the first thing you should do is deconstruct it — see what users really want — then start putting the time and energy into those features.
If wait times are important, push for showing wait times in a legible and easy to access way.
Use components that facilitate that information, not obstruct it. If you are looking to create a function that doesn’t exist in your default toolset, first ask yourself if it will help your user. If it will, it’s time to have a conversation with your developers. This must come before you get sign-off from the client — your development team will thank you later.
Proactively show your engineers what you are working on, walk them through how you envision the users will interact with your designs and discuss the business reasoning behind each decision. If custom design offers enough of a novel solution to replace or create a critical component, you’ve already made your case for design approval. Well done.
When we were designing Instant, we felt like finding deals should be a fun and exciting thing. Referencing skeuomorphic motion design, we went with a flippable carousel to indicate thumbing through newspaper deals. This customization was done to set Instant apart from competing deal aggregation apps and offer added delight to the user. The technical cost of rearranging a typical list view in this way was minor but paid huge dividends in both brand recognition and usability.
Search was customized to include an embedded toast message and curated carousel. Although it introduced non-standard design components, it drew from recognizable patterns found in apps as basic as the App Store. The rest remained stock iOS — with slight visual tweaks such as color and font styling.
When designing a product, you’re dealing with a spectrum. Under-customize and watch your application fall to the wayside (among the sea of similar apps) or over-customize and risk pissing off your engineers, confusing your users, and spending more money and time than you want to maintain the standard. Spend your energy wisely, and design with intention for clarity. Ease of use will always trump a cool animation.
Generalities regarding customization, but not rules.
- Leave settings stock, nobody cares how cool settings is.
- A little goes a long way.
- Use a grid and adhere to it.
- If you can’t sell it to your engineers, don’t sell it to your client.
- Start wild, and standardize from there. This way the unique part has more of a chance to shine through.
- Have bullet proof reasoning for why you’re customizing a component.
- User test, and don’t get mad when they can’t figure out your design.
- Duplicate artboards, add small customization, repeat.
- Get others to prove you wrong.
- “It looks cool” is never the right argument, unless you’re in advertising.
Resources
- Bruno Munari: Square, Circle, Triangle
https://www.amazon.com/Bruno-Munari-Square-Circle-Triangle/dp/1616894121
