There are tools that can help you achieve a consistent user experience in your app.
Titles, buttons, navigation bars, information boxes and more — their design is supposed to help you keep your user experience consistent throughout your app. But since user experience evolved, changing and being fine-tuned, we need to have tools to maintain it easily.
In this tutorial, I will go over some of the technics that can help you maintain your design and make it consistent throughout your app and devices.
Consistent (UI) is Important
Consistent UI is important, for the following reasons:
It can help your new user learning curve to be more moderate.
When the user meets your app for the first time, your first screens are actually his “tutorial” for your app. He learns what a button is and how it behaves, where the menus are, and what transitions to expect when he moves to the next screen. Inconsistent UI can make his learning curve steeper and finally get him off your app and delete it.
It can help your user feel “at home”
When the user knows what to expect, how a button feels and how the text looks like, he will feel more calm in your app, because he already “knows around”.
First of All, Work with You Designer
Not all designers you work with will keep the UI consistent, in terms of colors, sizes, fonts, etc., but all of them aim to, so the most important thing to understand, is that your designer is your partner for the mission.
Request for style guidelines which refers to fonts and sizes, define what is a title, a sub-title, and a body, also request for a colors palette.
In some cases, you will be the one that will lead the requirements.
Use Custom Views, Even for Labels and Buttons
Once you define things like “Page Title”, the best practice will be to create a custom view, sub-classing from UI-Label, and call it “Page Title Label”. Inside this class, you can define all the relevant properties such as color, font, and size in its constructor, and just use it for titles wherever needed.
Make your custom views to function properly when added from code or from XIB/Storyboard files.
Besides UI labels, you can define background views to keep your background color consistent, using UI buttons to make sure that the highlight experience is the same (for example), and “UITextField”, this is to make sure that all placeholders look the same.
Remember, you don’t have to define only colors and fonts, but also behaviors and animations, implement them right inside your custom views.
Create a “Skin”
Create something like a “Skin”. A skin class can be defined as all the colors, fonts and behaviors for all your custom views and transitions, and the latest can retrieve the values from the skin.
You can also create some singleton like “Skin Handler” which holds several skins, and return only one, in case you want to do a/b test on your user experience, or even add a feature to your user, that will allow your users choose their own skin.
Get Auto-Layout for help
Try to make your views refer to their intrinsic content size and not to give them fixed values. This is important because when you take advantage of intrinsic content size, you make sure that distance from elements remains the same when dynamic font size is changed, or when the user changes his device.
For example, “UITable View Cell”, the distance from the label to the top, and from the label to the bottom needs to be defined in auto-layout, so that when the size of the font will increase due to dynamic font size definition, the distance will be the same while the cell height will be bigger.
Transitions are the way screens changed for the user, but it is also how views appear, especially pop-ups, dialogs, and so on. Create custom transitions with constant values for duration and damping (remember to keep them in your “Skin”), and create them not only for view controllers, but also for views as a separate class.
Add Routers to You App
Sometimes we open the same screen/pop-up from several places. In order to open it always in the same way, create a router for this screen, so you’ll have one access point to move to this screen.
Diagram of the tools
This is actually the summary of the article. It’s all based on Skin (Which can support dark mode easily), on top of it are the transitions, custom views, and auto-layout, and the router uses it all.
Those are some of the tools you can use to make your UI more consistent. But remember — it’s not just a technical issue, but also a design and product mission to make your UI defined properly, but using those tools can help you define the way of doing just that.