A single design formula? Not a chance.
Design is an art form, It has none!
Designing for mobile will be a roller coaster of hurdles and problem if you don’t know some important design rules. I know design is also about breaking rules and building up on new innovative ideas, But if you understand these rules, you would know what rule you are breaking and be able to create something that is concrete and more together than a random design with design flaws that just don’t speak very nicely.
1: Poor Information Architecture (IA)
How do you design and organize the architecture of your app? Would you start with the core feature or maybe the easiest to implement? A lot of us make the mistake of not emphasizing enough on the Information Architecture of the app.
In order to get this right, you need to know what is important on the mobile platform and then what is important to the user. Remember,
Things important to the user are the only important things!
Find out the content or features most accessed by the user, and put them on the top. That is also called prioritizing by popularity. You will only get to that if you Research how the user will use the app.
Another lethal mistake to avoid when it comes to designing the Information Architecture of your app is having an overwhelming Navigation. Ever heard of the phrase Keep It Simple Stupid or KISS, for short. That translates to keeping a minimalistic approach.
Don’t put in too many categories and for every category you do put, there must be some form of relating content in it. NEVER LEAVE A CATEGORY EMPTY!
Lastly, I would advise you on the number of links you put in your article as well. I know that’s more of an SEO thing, but seeing too many links in your app is a bad omen for anyone who reads frequently. Add links in sensible numbers, do not over stuff your users with a dozen links. That’s bad with any angle you look through.
All of these and some more, in balance, contribute to a smooth Information architecture.
2: Design Should Solve a Problem
Why do we download apps? Because we need some problem addressed. Pictures don’t look good? We download photo editors. Just like that, Every app is a solution!
When you are designing, remember the problem your design solves and move on to the next goal. A random design of based on your own preferences might land you some luck (only if you have good taste), but a long term guarantee of your designed UI will most eminently depend on how meaningful and valuable the UI of your app is in solving a problem.
3: Consistency In Design
Consistency is one of the most vital elements of a great UI design. It should be applied on each and every interacting element of your app.
How does that pan out?
When you don’t use the same font types across different screens, that is Consistency Violation 101.
This single design principle includes the language you use, the UI elements you choose, the way you lay out your site, the functions and features you include, and especially the visual components we decide on like color and font.
Applying consistency throughout your app evenly is probably one of the trickiest principle. Where it helps improve the overall user experience, it is also important to know where you can be a little inconsistent to be more consistent. On the whole, consistency is important for eliminating unnecessary learning and confusion for your users, it is vital to keep in mind that you should use it when necessary but do not let it constrict you from innovating on design ideas where it makes sense to be a little inconsistent.
4: Your Text Content Should Speak Not Scream
A lot of times I have seen apps that hold a perfect and consistent design flow, but the content is handled with the utmost negligence and is not readable. You might as well not design an app in the first place if you wish to ignore how you place your text content.
Using the right Font type, size and color is important but with that, you need to place your content following certain design principles. That not only adds a certain aesthetic to the whole UI, but the pleasant effects ripple through to a great navigation, better readability and ease of use for the user.
Most for granted Text design principles include:
- Not kerning appropriately
- Compromising text readability for Aesthetics
- Ignoring uniform line lengths
- Careless Text Alignment
- Underestimating the use of Grid
- Filling whitespace with unnecessary text
- Neglecting Proper Spacing
5: Avoid Congestion – No Cluttering!
A cluttered app is the worst app. Even if all you information is relevant and interesting, over stuffing will only result in driving your users away. If you need to show a lot of information,
try using a progressive disclosure. That is, when the user clicks or hovers over the interface, more options are revealed. That minimizes a lot of everything. It only shows content when the user wants to see it. You get a nice and clean UI with all your information available in hindsight.
6: Bombarding With Features
This mostly depends on the complexity of the idea but still try to keep it as simple as possible. If you provide too many features in your app, you could end up overwhelming the user. Also, too many features would make your app sluggish and lower the overall performance. That said, you are introducing two problems in the UI of your app.
b: A slow loading UI
Both of these problems add to a very bad first impression and you lose users instantly. It is best to have few features at first and designing around the primary features of the app, which serves the main functions to the visitors. After that, if it is required, you can go for updates in later versions of your app. This is also called designing for need to know content and is very effective.
7: Using The Wrong Colors
Of course! I think everyone knows the importance of choosing the RIGHT colors for your app but the irony, People always talk about choosing the right color, and with a lot of effort and careful planning mostly end up choosing the wrong colors.
This is by far one of the most common and lethal mistakes people make when designing for mobile UI.
With that, I’d like to a add in the contrast settings here as well. I focus on just contrast because not using the right contrast makes the text a painful effort to read and sometimes even ignore!
Use contrast in a way that text is easily distinguishable from the background color. Other than that, if you just use tools rather than choosing colors on a whim to help you create color combinations, you will be a lot closer to choosing colors in a professional manner and do wonders. Try it
8: Sync With The Intended Platform
Another thing to remember is respecting the differences in UIs of different mobile platforms. Every mobile OS has its own set of guidelines for Interface design. Right now, Apple and Android are leading the mobile realm. It is important to follow OS guidelines when designing for native platforms to get the maximum quality of design in your app. Why? Because Users are familiar with the design and interaction patterns of the respective OS, and anything that contradicts with the guidelines, creates friction and contributes as added learning for the user.
You avoid this phenomenon by not carrying over UI elements from other platforms. Use native components as much as possible Icons, functional elements (input fields, checkboxes, switches) and typefaces should have a native feel.
What did we learn from this: The design Interface should feel native.
9: Give Proper Feedback
Feedback is very essential for a responsive UI. How do you get there? By providing feedback on interaction. Even in the real world, every single object responds to every interaction in some way. And this has to be uniform, you will need to provide the right feedback for every interaction. If your app lacks on the feedback, your users will second-guess their actions and this will lead to a bad user experience as well. Now, how do you provide feedback? It’s simple! Feedback could be anything, from a message, gesture or a visual cue. You could highlight a tapped button or make the device vibrate, But your feedback needs to be natural and appropriate.
The more natural and real the UI of an app feels, the more users find it easy to interact with.
10: Designing For Yourself
Another mistake most designers make is losing focus on the user as the design progresses, all through the end. Sure, we start with how the user would want things, but in the process forget and start to design with our own preferences and biases (unintentionally of course). Not using a color because you don’t like it, Not designing a certain button because you felt it wasn’t necessary, isn’t the way you design an app that keeps users locked in. I know creativity is a major part of the design process, but it needs to align with what the user wants. Not only will the app be unique but the client-oriented design will also ensure user satisfaction.
In order to get this done, design a minimal viable product first, test it and change accordingly, if needed.
Some Expert Advice
Learning how to improve mobile app UI is not a one-time practice, you keep learning and evolving with the needs and requirements of your users. Wrapping this article up with some expert advice, I know of this great mobile app designer with tons of proven experience and buckets full of designing wisdom.
Chandler Faye, is responsible for multiple mobile UI design awards and is currently working with CitrusBits, a top Mobile app designing agency in Los Angeles.
She says and I quote,
- Give your content room to breathe by adding padding around text and main content. Do the same with buttons — buttons that have very limited tappable areas make it hard for users to interact with your app.
- Margins, padding, and fonts should be consistent on every single screen. Users notice when a button is misaligned or text is out of place — keep things clean across all your storyboards!
- Whenever possible, export tappable UI elements like icons as square transparent PNGs with the icon centered horizontally and vertically. The PNGs should have the same dimensions so that the icons can scale and look consistent throughout your project.
- Unless a situation really calls for something else, always use aspect fill for images. This is the setting that will take advantage of the nice icons you exported for recommendation #3! “
The Key Takeaways
The UI of a mobile app is not a single entity. Various design principles harmonize together to produce a balance between the UI & UX of the mobile app. You can’t get it right without syncing the UI design principles with the UX of the mobile app.
Things to remember!
Before starting, be crystal clear who you are designing for and keep circulating your designs around that question, who and how are people going to use my app?
Every interaction requires an equal feedback reaction!
Esthetics are important but not to the point that compromise the easiness, simplicity and convenience of your app.
A complex, overly congested app with bombarded features is its own advocate for a ‘ don’t use me app’ verdict.
It’s important what the text says, but it’s more important how you place it, where you place it and how readable it is.
A design that helps achieve a target is a design that solves a problem and that is the design you want for your app.
All of these aspects combined and put in a nice and organized way is your information architecture which dictates what comes first or last. You always base that on your audience and voila! You are done for the day.