4 Things to Keep in Mind While Designing for Small Screens
Some noteworthy pointers to help you ace small screen designing.
Over the past decade, the number of people who use their mobile phones to access the internet has escalated tremendously. In January 2020, mobile internet traffic was almost 52% of the total global online traffic and is set to double by the end of 2022 (Source: Statista) — owing to more affordable and faster internet plans.
This may be one of the reasons most companies these days are adopting a ‘Mobile first’ approach when it comes to product design. As the name suggests, it means starting the design process with the smallest screen sizes (which have the most restrictions) and working your way up to the large and extra-large ones. This approach primarily emphasizes on the majority of people who are going to drive the initial engagement with your product/service.
Keeping that in mind, below are four simple pointers that may come in handy while designing for relatively smaller screens.
1. Simplify things
Simplification improves clarity and reduces anxiety.
Declutter — ditch anything that isn’t providing something useful, meaningful, and valuable. Cramming everything in a less-than-7" real estate would be an overwhelming user experience, wouldn’t you agree?
Decluttering will also help in enhancing the overall speed of your site/app, which is a key factor in determining the amount of time users will spend on it. If the information is present lucidly, people are more likely to stick, thereby increasing the odds of higher conversion rates.
Have only one primary CTA (Call To Action) on each screen (this may sound like an obvious thing, but it gets ignored more than often). It will provide the users with a clear sense of what they can expect of that particular page/screen, and usher them in the right direction.
Use tabs, modals, cards, drop-downs, tool-tips, and other such elements to organize information. For instance, envision a typical membership page of an online service that offers 3 or more different packages to choose from. In a mobile landscape, using a table won’t be the most prudent option if the list of features is long. Rather, select the top 5–9 features (avoid listing more than 9; why?) of each package on individual cards — a card for each package. Moreover, you can save some needless scrolling by using ‘tabs’ that would enable users to switch cards just by a single tap.
Try avoiding Designer and Script fonts, as they can often be illegible (even more on smaller screens). Instead, cling to Serif and Sans Serif.
Below are some of my personal favorites -
- SF Pro Display (Sans Serif) — Free (Download)
- Inter (Sans Serif) — Free (Download)
- Playfair Display (Serif) — Free (Download)
- Charter (Serif) — Free (Download)
- Open Sans (Sans Serif) — Free (Download)
- Gilroy (Sans Serif) — Paid (Buy)
Font size is also very critical, especially while tending towards smaller screens. We wouldn’t want users to pinch and zoom every second to plow through a page. Apple, in its Human Interface Guidelines, recommends a minimum ‘Body Text’ size of 17pt, while Google’s Material Design suggests it should be 16pt.
2. Follow the ‘Rule of Thumb’
The vast majority of people (myself included) use either one or both thumbs to interact on their phones — simply because it’s convenient and feels natural.
Acknowledging that fact, try placing the main navigation items, frequently used controls, and primary actions at the bottom of the page, making them within easy thumb reach. For instance, if you are reading this on your phone using the Medium app, you may notice that all the primary (and frequently used) actions are stationed at the bottom for better usability.
3. Design for Fat Fingers
Have you ever had an experience in which you lost 2 brain cells just to figure out how to tap on a particular link that is stuffed between a button and another link while making sure you don’t accidentally trigger either of the other two? If yes, then you’d agree how frustrating it can be (and that we mostly end up tapping on either of the other two elements).
Such instances are a result of flawed ‘touch-targets’ — the area that responds to user inputs and extends beyond the visual shape of an element. Nielsen Norman Group suggests that interactive elements should be at least 1cm x 1cm (38px x 38px) for users to quickly and precisely select them.
4. Don’t Make Them Type
Typing on small screens isn’t much fun. It’s usually a slow and erroneous process and must be avoided whenever possible.
We often encounter web forms on various sites/apps that are seemingly endless, and filling one of those can be a very dull and tiresome process (especially on mobile phones where you don’t have the ‘tab’ key to quickly switch between fields). AI-powered chatbots can replace some of those hefty forms and make the overall experience somewhat less dry.
For times when you ought to have a form, try keeping it as precise as possible. Be savage about ditching anything irrelevant. Use the ‘Auto-fill’ feature to fetch previously entered information automatically, thereby saving some redundant typing.
Option to search for things by voice or image can be provided alongside the usual search fields — Amazon product search would be an example. Facial recognition and fingerprint scanning technologies can be leveraged to make users sign-in to apps instead of re-entering their credentials every time.
To automate sign-ups, Apple recently introduced a feature called ‘Sign in with Apple’ that lets users sign up on apps/sites with just a tap of a button, rather than having to fill a good old form. Their personal information is fetched automatically from their Apple Id, and the only additional tap they need to perform is to choose whether or not they want to share their iCloud email address.
I must add that these tips, for the most part, are just a summary of what I’ve learned so far via personal experience/courses/articles/books. They are in no way a definitive guide to excelling at designing interfaces for a mobile landscape, as there are numerous other factors considered and tons of research involved.
But I hope they help in some way! Cheers.
