Design is a Feature: WWDC '18 Design Takeaways

This year at WWDC 2018 Apple offered an answer to the question of how to design a great app. In session #801 - "Qualities

of Great Design", Lauren Strehlow, Design Evangelist at Apple, interviewed several design professionals from across the

industry and arrived at this answer…

"Design is hard."

It appears we'll have to keep debating the perfect Pantone color or the best button shape. Still, there was plenty of advice and guidance on the topic of design. This year, design received greater emphasis with more presentations than usual centered on various aspects of app design. Among those presentations was the annual Apple Design Awards which recognize exceptionally well designed apps.

The fact that there is no easy answer for good design was in itself one of the themes during the conference. Throughout the week, various speakers touched on the intangible notion that good design is something you can feel and something that, "you just know".

Quality design can be a key driver of engagement and user retention. One of the designers Apple interviewed spoke to the idea that something that is well constructed gives us a sense that it won't cause us harm. A quality design invokes trust, and a trusting user is a more engaged user. So how do we create that feeling of quality for our users?

If you want to make your app feel trustworthy and memorable it's important to think about the themes and patterns that Apple emphasized this year. Here are three concepts gleaned from their presentations as well as three apps that wove in these concepts to earn Apple Design Awards.

We should help the user focus on the task at hand.

• We're seeing the continuing evolution and simplification of mobile application user interfaces. A great byproduct of a simple interface is increased focus. In order to eliminate distractions, developers should distill their UI down to only the very essential pieces of information.
• Interface elements can be integrated by eliminating borders, using translucency and other techniques. This creates a seamless and engaging experience.

Apps can be simple and stunning at the same time.

• Everyone wants to create a stunning interface, but stunning doesn't mean complex. Your app should be simple enough to be intuitive yet stunning to a degree that delights the user. This is the perfect intersection that Apple is looking for.
• These simple interfaces should hint at and reveal possible interactions. Instead of wordy instructions that clutter the interface, embrace the process of active discovery. This can be both enjoyable for the user and highly effective at training new behaviors that drive deeper engagement.
• These actions should be affirmed in a simple, but pleasing way as well. Remember that the visual display is only one aspect of design. Apple also emphasized haptic feedback and sound design as vital components of the user experience. Physical tools like hammers and typewriters are felt and heard and our mobile devices are tools as well. Good haptics and sound design offer a simple way to delight users by affirming their actions.

A color is worth a thousand separator lines.

• By building a stripped down interface you will have fewer elements to denote different areas of interaction.
• Color is one of the oldest and most powerful tools available when designing an application's interface. By simply using two contrasting colors for distinct UI elements, you can instantly achieve an effect that previously required explicit separators or other cluttered elements on screen.

These three concepts can be seen in the apps that Apple recognized as 2018 Design Award winners. Apple does not provide a rubric for winning designs, but a close analysis revealed apps that exhibited the patterns and philosophies Apple spoke to throughout the week. Let's take a look at three of the winners.

First we'll take a look at iTranslate Converse, a spoken language translation app by iTranslate.

• Notice the absence of traditional UI elements. There's not a single bar or button on screen. A simple swipe up or down takes you to the other areas of the app.
• Active discovery is in play here. Look at the bottom swipe indicator and accompanying text. "English or French" not only tells you the current languages that can be spoken, but also establishes a subtle relationship between that text and the swipe gesture to tell the user how they can change languages.
• Less subtle is the use of color contrast. The bright white text pops off the orange background and immediately grabs the user attention.

Another award winner that uses the concept of color and contrast is BANDIMAL, a music composer for kids by YATATOY.

• Observe how the playful color palette is used as a tool to create separation of content and actions. Instead of using any sort of traditional separator line or border, the contrast between the different animals' areas creates a natural boundary.
• The white section on the right serves two purposes. It naturally separates the area from everything to its left, while also providing a distinct contrast for the three instrument buttons.
• The borderless button in the upper left blends seamlessly with the overall theme, but is clearly seen as a separate item due to the contrasting white color on the blue background.

Finally let's look at a fresh take on the calculator - Calzy 3 by WapleStuff.

• In order to separate the display from the input buttons, the app uses color to create a horizontal separator.
• To give prominence to the operator buttons, a light green is used to create a much stronger contrast with the background. This green is reused at the top, linking the action and its use through color.
• The strongest contrast, however, is reserved for what should have the strongest focus, the result.
• The yellow delete button has the only block of color on screen to denote its significance.

• We also wanted to highlight Calzy's today widget, a system location where space is at a premium and a simple design is extremely important. Notice the placement of the operators in this view. The four green buttons act as a natural vertical separator between the number buttons and the other action buttons without the need for any other elements in the small space.

This is just a sample of the amazing work being done by designers and developers all over the world and we encourage you to download and check out the rest of the winners.

As a part of this blog we reached out to one of CapTech's designers Kevin Flores who added this:

Sometimes, the hardest thing for a designer to do is to stop designing. When they do finish the first draft of a design, we have an internal review to ask questions like, "Okay, what's not needed?" Often times, we begin to strip away design elements or simplify them one at a time. This "un-designing" refinement exercise isn't as easy as it may seem. In fact, even Steve Jobs said:

"Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple."

Good designers will be able to explain/defend their strategy behind every design decision. But great designers maintain an empathetic, human-centered approach to designing the experience. They know users are the authority for what defines an engaging and intuitive experience, and design it with their wants, needs and expectations as the primary focus.

Our goal is to create digital experiences. The design shouldn't be the experience, but rather be a seamless part of making it more useful, fluid, and enjoyable for the user.