Product roles have become multifaceted, and thanks to the development of collaborative UI tools, designers and developers can now share a number of responsibilities.
Historically, the UI tool landscape has resulted in a separation of responsibilities into two distinct roles — designer and developer. However, as the practical side of creating UIs becomes more collaborative, we’re starting to see developers become knowledgeable about UX and vice-versa. Designers and developers no longer need to feel defensive and territorial about their craft; instead, they can make decisions together in a constructive way.
Let’s take a closer look at 4 UI principles that could fall under the jurisdiction of either designers or developers and what either could do to ensure that no stone is left unturned.
1. Enforcing consistency
Consistency is when a design reinforces learned concepts so that users can recognize and understand the user interface more efficiently based on similar (or their earlier) experiences of these concepts. This could mean using the same colors, button styles, heading sizes, and so on, for elements that need to convey the same (or similar) meaning or level of importance.
A lack of consistency adds weight onto the user’s cognitive load and diminishes their experience. It also increases the amount of code, which makes a developer’s job difficult.
Supernova’s DSM (Design System Manager) is ideal for organizing design styles and components and making sure that they’re being reused when necessary. This results in a cleaner design and therefore a cleaner codebase, and therefore…a cleaner mind! Plus, stakeholders will know where to look for anything regarding design or code whether they’re looking for components or simply some documentation that explains how to use them.
It’s not about using less or more styles, but rather using no more than what’s necessary and reusing them where it makes sense. Where more styles means more visual cues for the user to learn, developers should query seemingly unnecessary styles to see if they can be left out, should designers so happen to overlook them. From there, designers can then make the decision to either consolidate the styles or instead document their usage in the design system.
2. Choosing keyboard layouts
Revealing the correct keyboard layout (on mobile) often escapes the minds of designers, although it can actually make a massive difference. Revealing the email keyboard layout, for example, means that users won’t need to tap shift to find the “@“ key. As many of us can attest, typing is one of the most daunting and frustrating aspects of using a touch device.
If the designer so happens to forget to include the right keyboard layout, the developer can apply the correct layout in the code anyway. However, if these small details aren’t defined in the design, then developers may forget about them as well, or assume that they simply don’t matter.
The best solution to this is to work together.
With Supernova Studio, design and code become one, making it easy to edit micro-functionalities, like keyboard layouts, without design or code. This means that it doesn’t really matter whose responsibility these things are so long as they’re taken care of. Plus, communicating over comments is a convenient way of ironing out the details before committing to any changes.
3. Leveraging native UI components
Designers sometimes shy away from using UI components that are native to web browsers and OSs in favor of designing them from scratch. However, this can be unnecessarily time-consuming and forces users to learn unfamiliar UI patterns rather than interact with the more familiar UI patterns of browsers and OSs.
Developers tend to be more aware of the benefits of using native UI components. This doesn’t mean that developers should be overriding design decisions, however, they should speak up about the benefits of native UI components when they feel like a component has been somewhat over-designed.
There are many benefits to choosing native UI components over-designing them from scratch. These could include, for example, out-of-the-box accessibility, simplicity of implementation, and familiarity (as already mentioned). Web browsers and OSs usually allow these UI components to be styled a little bit anyway.
4. Leveraging device capabilities
Leveraging device capabilities can significantly improve user experiences. For example, the camera can be used to scan bank cards and QR codes (which reduces typing requirements) and let’s face it, Instagram wouldn’t even be feasible without camera-enabled devices.
However, not every OS/device has the same software/hardware capabilities, and it might be fair to say that developers are more aware of these capabilities since they integrate with them on a code/technical level. This makes them uniquely equipped to advise on matters of UI/UX where functionality is concerned, one of the many reasons why diversity of expertise is so important within product teams.
Designers should leverage device software and hardware to improve UX whenever possible, always remembering to consult with developers especially when designing multi-platform applications where different platforms may require different UI design approaches.
Narrowing the gap
Can developers take their design contributions beyond these UI principles, and if so, should they? And can designers learn to code only from observing the ‘code view’ and later contribute to improving the code?
Whichever way we look at it, developers have much to offer in terms of UI/UX knowledge, whether we’re talking design ops, visual consistency or the benefits of different native functionalities, to name a few. On the other side of the spectrum, designers can do a lot to ensure that the code being handed off is clean and efficient.
Creating a mobile app requires the knowledge and skills of both developers and designers. However, sloppy development can result in a sloppy UI, much like a sloppy design can result in sloppy development. In a sense, development is design and design is development, so we’ll be seeing a lot more collaboration between these two roles as the gap begins to narrow.
