There are countless times when we have come across terrible design flaws on certain mobile apps and websites. There are also times when an app or website instantly grabbed our attention and made us spend considerable time and eventually become our companion for some part of the day. In between these two, there are too many apps and mobile websites that always look mundane and dull, thus lacking anything worth interest to hold our attention. A majority of web apps actually come under this mediocre level while there are quite a lot that are design-wise nasty and there is only a small minority that are great in every design and usability aspect. What makes their design great, mediocre or nasty we would try to understand here.
Less is more
More than any other design elements, the use of negative space is being talked about a lot. This renewed focus on utilizing the space to boost the usability of an app seems quite reasonable. The vision needs to breathe and get space to focus on things that they need. Using white space around content also enhances readability and user attention. Most beautifully designed apps utilize lot of white space and tweaking with typography and contrast they make attractive design. Here are some principles to remember.
- Avoid content and design overload in a page. For mobile viewing less is always more.
- Make the content and buttons prominent with befitting contrast and variation of font.
- Offer small visually optimized content that can be easily scanned at a glance.
Applying rules of interaction design
While developing for mobile you have a lot less screen space and this makes applying interaction design principles more important.
- Objectively focused design: This principle guide you to design for your target audience and potential user. Through extensive user research you can create user personas that are more likely to use the app. Only then you can set design goals to satisfy their needs.
- Usefulness: After all, the app should be useful for being appealing to the users. So, make sure your design elements enhance usefulness and add value to usability in every respect.
- Guiding users to function: You need to use design elements to guide user to the needed functions intuitively. A delay or misunderstanding can spoil other good works done. There are countless nasty examples.
- Making users learn how to use the app: The app should allow easy understanding of how it works. Offer easily perceptible intuitive elements to let users instantly know as how to use the app.
- Offering feedback and response: After completing a task users can be given a response or feedback. It can be a simple beep sound or a message window.
Designing for every finger
All fingers are not alike and when it comes to tapping on the mobile screen fingers are much thicker than the precision-driven mouse cursors. The design elements should address these tappable and clickable areas to ensure precise command through finger tap.
First of all, offer enough room for a fingertip to click on links and buttons. Secondly, make buttons bigger and enhance in shape and contrast to allow more ease in finger tapping on them. But obviously too big buttons cannot be perceived as a button at all. Striking the right balance plays the key here.
Useful navigation menu
Any design principle starts with a navigation menu. Though there are too many menu styles already being experimented, you should always focus on usability across diverse sizes of mobile devices. A menu design not sufficiently optimized for mobile can make accessibility suffer.
- The dropdown menu is a flop for mobile devices as it is challenging for the fingers to navigate upon them. Same is true with hovering menu. So avoid these old design gimmicks in your mobile app.
- A sandwich menu looks good and with widespread use it has already become a convention. Any user understands this button in the top right corner at a glance.
- Contextual appearing and disappearing of menu button get the votes of many great apps. This menu design is good because it creates more room and allows access o menu when it is required.
Cool colors and right contrast
Color in mobile design is crucial to create a sense of space, allow interaction and engage people. Moreover, color and contrast enhances visibility and adds prominence to call-to-action buttons.
- Color in a subtle yet effective way connects people emotionally.
- Using color hierarchy in design one can give priority to ‘Call to Action’ buttons.
- Color is crucial to make uniformity and brand statement.
Make use of familiar mobile patterns
Mobile design mostly revolves around an array of device-specific attributes including placement of thumb, orientation, gesture and posture. Studying most popular interfaces and most common mobile patterns can prove to be helpful in this respect. Great apps are built over time by incorporating many design elements gradually. The use of familiar pattern make users feel at home and that is a great way to make it more useful.
You do not need to copy the design straight from other awesome designed apps. But by incorporating common patterns of UI design as a baseline you can further add creative layers on it. Focus specifically on two most important categories of interaction design patterns to ensure a great mobile app design, respectively as, gestures and animations.
- Gestures: Gesture defines a majority of mobile devices and all touch devices. So following a time-tested guide on all gesture inputs like touch, swipe, double-tap, pinch and zoom can help you doing the groundwork better.
- Animations: Motion is a crucial element that offers a ground for the users in mobile UI design. Animation adds depth to the experience of navigation.
In mobile app design interaction patterns help to dictate the layout of UI design elements. For instance, instead of placing navigation buttons at the top of the screen they can be placed at the bottom allowing tapping with a thumb while holding the device in hand.
