Mobile design is very important since the majority of people own a mobile device and access the digital world through it. We need to give them a good user experience. So, these are my suggestions to get closer to achieving that.
Mobile screens come to various sizes, from very small to very large. As a good designer, you have to find a way to make your app fit well in all of them so that all users have a positive experience. How can you achieve that? My suggestion is to design for the smallest available screen - which is probably the 320pt width screen - first, and that’s because on that screen you will face the most limitations. Create your design based on those limitations, that will also help you discover what features are important for your app and which are not, and make it fluid, which means that the layouts should be expandable to fit the larger screens. The fluidity is necessary. When a layout is fixed to a specific size, it will not be responsive. It will overflow when putting on smaller screens and appear narrow in larger ones.
Another factor that you should take into consideration if your app is addressed to iOs and Android devices, is the differences between them. Some of these differences are detected in the sizes of buttons, icons, inputs, tap targets, fonts, and the way the navigation happens. Generally, for android devices, you have to follow the instructions in material design and for iOs, those in the Human Interface Guidelines.
Typography has to do with everything written on the screen. The font, the style, the size of a text, are all part of it and it requires a skilled designer to make the decisions in that area, in order to create a special app that stands out. Bad typography will leave a negative impression on the user, no matter how useful your app is. So, it is one of the factors that shape a good UX experience and you have to pay attention to it.
Some other things you should keep in mind are:
When you start to do your design, you should think about how the users interact with their phone, how they hold it, in which areas are convenient for them to look and tap, and then decide how it is going to be formed.
The first thing you should take care of is the location of your content. Keep in mind that users prefer to look and tap at the center of the screen, so you better place the functions and the content that you consider important and you want them to notice. Also, you better avoid putting content at the areas where the user's fingers usually stand, for example in the edges of the device, so it will not be obscured.
Second thing, make sure that the touch targets are large enough for the user’s finger to tap comfortably and also, give the user a clear indication of a successful tap as a confirmation of his/her actions.
Another part of a user's interaction with the mobile device is scrolling. Possibly, your design will include scrolling, whether the whole screen can be scrolled or a list. You need to leave the right amount of blank space for the user to scroll easily. Most users prefer to scroll at the right side of the content, so ensure that there is a reasonable margin that allows gestures without them hide content or go on clickable items and unwanted actions happen.
User experience on the web is different from user experience οn the mobile, so there is no point in trying to bring one into the other. The right thing to do is to create a design that adapts well in the mobile environment and overcomes its limitations.
One of the limitations that you will face is the size of the screen. Mobile screens are obviously much smaller than the ones of laptops or desktops, therefore you can’t display the content in the same way, you need a different layout. In fact, you may need to skip some content and features that are not of great importance, in order to save some space and make a more efficient mobile design. You also have to take into consideration that mobile users use their fingers to interact with the screen, not a mouse, which means that is necessary to make the clickable items quite visible and easy to get tapped on.
Moreover, there are some features that fit only in the web page model and not the app model, such as underlined links. It is better not to include underlined links in your mobile design because they are not easy to interact with. It will be hard for the user to tap to an underlined link, due to the small space it takes. It is better to use buttons. Another feature that is wiser not to include, is the dropdown menus and here are some reasons why not to: Selecting an option from a dropdown list is a multi-step process that contains tapping on the dropdown to open the list of options, scrolling and scanning through the items to select one, and then closing it. Also, scrolling through the options might be painful (especially if there are a lot of options) on some mobile screens where the visible and scrollable area of the list is small, for example, if the dropdown is close to the bottom of the screen. It is better to use some alternatives, like this:
When you have a big load of content, is not an easy case to organize it. In this situation, there is a principle that will help you and you should keep in mind: Put minimum content on the screen. It is not necessary to display everything on one screen. The more you add, the more complicated you make it for the user, who will drown in a sea of information and nothing will grab his/her attention at the end. The ideal is to put one primary action per screen. It will take a lot of screens, but is better than have fewer and cluttered ones. Designing screens that support one single action of real value, make your app clear and easy to use and learn. This single action will surely get noticed by the user, who will tap on it and navigate to more content. Don’t forget to create smooth transitions between the screens for even better user experience.
We are really glad that you stayed until the end. Therefore, -we have something extra for you.
Follow this LINK to get access to some great resources and ideas for your designs.