Designing application for smartphones is challenging compared to the desktop versions. Since there is a lack of ample amount of space in mobile devices, one needs to work smartly to ensure efficient space utilization without hampering the user experience. In this article, I would like to walk you through some of the great ways to Design for Smaller Screen Sizes and not compromise with the User Experience.
How to Design For Smaller Screen Sizes:
Icons are the Main Assets:
If you closely take a look at your smartphone, you would see a lot of icons for apps and icon-based buttons. Unlike desktop applications, you don’t need to write text for all the individual design elements like “Back” button etc. All you need to do is place a back arrow icon and the user will do the rest.
Use Tabs:
Showing everything is not feasible on a mobile screen. Although the resolution of the smartphones that we see nowadays are significantly higher, still we need to provide sufficient breathing space to every design element. To do so, you can bifurcate the information within multiple tabs or use a Hamburger menu to save space without compromising UX.
Design Widgets:
Through the advent of multi-window operations in smartphones, there has been a demand for scalable applications as well as the widgets. Such widgets are useful when a user is performing multi-tasking and he can use the widget to access the application.
Use Drawer, Slider, and Carousel:
The drawer is one of the very useful design element for mobile applications that appears when the user clicks on the Hamburger menu. Since all the main menus and submenus cannot be displayed at once, Hamburger menu comes to the play that incorporates all the menus which user can access any time when he is using the app.
Since sliding is often used by smartphone users, use of Sliders and Carousel is very handy.