21 August 2020
The world is shrinking and it’s only getting smaller. Computers used to fill a room but now fit into backpacks. We used to be tied to our homes by our phones now they are our travel companions, always there keeping us entertained.
Our search for information has transformed and now we live in a fast-paced world where access must be fast and immediate. If you’re going to design for mobile, there are many things to consider and while many are understanding the target audience or standard UI/UX considerations; there are mobile-specific design considerations too to keep in mind, but don’t forget that these don’t replace the need for user research.
To get started, will you use responsive design or adaptive design and if you do, the most basic aspect is context. Think of the way in which the mobile device will be used and the specifics of the devices themselves.
If your users access the mobile web from their desks, great! But we all know, more and more people are using their mobile devices to access the internet, and we can likely expect this trend to continue.
Basic considerations for mobile design
Responsiveness is the name of the game here. We all know mobile devices have much smaller screens than desktops, and therefore designers should be aware of which elements are necessary to include in the design and which aren’t. That being said, mobile devices have a very wide range of sizes. Now think about how many different phones and tablets there are on the market today. The designer must consider these variations in screen sizes in order to ensure the design is consistent regardless of the device being used.
Simplicity goes along with the first consideration about screen size. This does not mean that now you have to stick with minimalistic designs with no creative juices, you just need to choose which features are worth sprucing up and which aren’t. Since the screens on mobile devices are relatively small, it is important to keep the design simple.
So try to:
- Remember to make targets big enough so that they’re easy for users to tap. (making navigation comfortable)
- Minimize the levels of navigation involved by offering short-key access to different features
- Ensure labelling is clear and concise for navigation
- Avoid excessive scrolling (create navigation that can lead the user to the specific points he needs to get in the quickest way possible)
- Make it easy to swap between the mobile and full site (if you choose to implement separate versions)
It is essential to maintain an overall consistent appearance throughout mobile applications which will provide familiarity and ease of use from the end-user. Consistency is a fundamental principle of design that will eliminate confusion. Additionally, elements that further consistency can include but are not limited to style and colour, fonts and font sizes, and even buttons.
Consistency means the following:
- Visual consistency: Ensure all typefaces, buttons and labels are consistent across the entire app. (the arrangement of the icons and the text must form a whole without including empty spaces inside)
- Functional consistency: Improves usability and learn-ability by allowing users to leverage existing knowledge about how the design functions.
- External consistency: Design should be consistent across multiple products. This way, the user can apply prior knowledge when using another product.
Finger-friendly mobile design
It is important to consider how users interact with mobile. With mobile devices, we use our fingers to navigate through different hand gestures that have become standard use for tasks.
- Tap: Touch surface briefly
- Double tap: Touch surface with two quick motions (often to zoom)
- Drag: Move along surface without breaking contact
- Pinch/spread: Touch surface with two fingers to move in (pinch) or out (spread)
- Press: Touch surface and hold
- Flick: Scrolls quickly
When using mobile devices, users expect things to work a certain way, and it is important that designers consider these actions.
Button design is also an important consideration in this category. Because users will be navigating with their fingers, buttons need to be large enough to tap with ease. Similarly, important buttons like clear, save, delete or submit should be placed in a location on the screen that won’t accidentally get tapped, whereas the commonly used buttons and call to action should be placed in areas easy to reach to encourage use.
Optimize the content for mobile
As we know, well-crafted content can do wonders for your application. An excellent Typography is key for application success. It is the art of arranging text in such a way that it looks readable and accessible on all mobile screens. When the user lands on the screen, the content should be clear at first glance.
To ensure this, do the following:
- Use proper spacing between the lines (do not squeeze the lines just because you need everything to fit in)
- Try to keep font standard (don’t use more than 2 typefaces)
- Use text colour that looks aesthetically appealing to the user
- Standardize font size to fit any screen size (16px is a good place to start when choosing your default mobile font size.)
- To increase readability of content, avoid all caps.
- Do not extend the length of the paragraphs, keep it short (30 to 40 characters per line)
After going through all the design considerations for one mobile design to another, think about this; a great design is the perfect combination of beauty and functionality, and that is exactly what you should be aiming for when designing for mobile and remember to keep those creative juices flowing.
Get in touch if you are interested in finding out how Integrove can help you.