Hover / No-Hover
Designing mobile apps, On smartphones, there’s no hover state. This can be a challenge for pages with a lot of content or features as the interface quickly gets bloated with links and buttons that would normally only be shown on hover
The feature must be accessed in either of two ways:
- Visible – the content or feature is accessible by visual means. It may be nested in sub-sections or child pages, but the content is nonetheless accessed from visible navigational elements such as buttons or links.
- Convention – by relying on mobile design conventions you may hide content and only display it when the user employs certain gestures such as swipe or shake, or when the user drags content around such as pull-to-refresh.
Storage and cache sizes
Depending on what you’re building, you might have options to download and store/cache content for offline usage. This could help reduce the data transfer for online transactions, making the product feel more responsive.
Typing on a touch keyboard is a slow and error-prone exercise so make sure to keep your form fields to an absolute minimum and pre-select clever defaults. Furthermore, you need to consider how you deal with errors in data.
Screen size, sensors and interactions
Screen sizes are much smaller when designing mobile software ( designing mobile apps ). You have a limited canvas, and your design should be simple with enough space for users to touch and interact with different elements. The smaller screens on touch devices results in reduced context. This tends to make it more difficult for the user to get an overview of the page, compare various options, and remember prior content.
Consider a long form. As the user scrolls down, the title of the form disappears along with previously entered data. Without this context, it gets significantly more difficult to interpret the meaning of the currently visible form fields. It also makes it difficult to spot errors retrospectively. In this instance, a review or summary screen can help avoid erroneous data while a header fixed to the top of the screen can help maintain context.
On touch devices, people use their fingers to click links and buttons on the screen, which significantly decrease the accuracy of clicks. This is also known as the “fat finger problem”.
this means you must consider the size and proximity of all clickable elements, making sure they’re large enough to reliably touch with a human finger and far enough apart that users won’t accidentally touch the wrong element.
Any mobile product has to contend with network latencies and failure points. Plan for these earlier on, or you may find you’re losing users because they keep staring at a ‘Try again later’ or ‘Connecting…’ message.
- No connection – While users probably won’t expect offline mode from your website then you should still try to handle lost connections gracefully. AJAX-enabled features are particularly prone to unexpected behaviour and silent failures.
- Slow download speeds – If you’re on a mobile EDGE network download speeds will be pretty miserable. In other words, if your site should be usable on slower connections too then be sure to make its footprint as small as possible by implementing aggressive asset caching, using CSS3 effects instead of images, etc.
In addition to just data connection, the SIM card also provides information like MCC (Mobile Country Code) and MNC (Mobile Network Code) that you may have used to identify which country the user is in and what network he is connected to. You can get info on whether he is on a roaming network or home network, and adjust the amount of data required accordingly.
Since the very nature of smartphones is mobility you have to consider the impact of “real world” distractions – a speaker announcement, walking in traffic, etc. Another and possibly larger source of distractions are digital interruptions – text messages, phone calls, push notifications, two-taps-away-from-Angry-Birds-syndrome, and so on.
Custom right-click menus aren’t that utilized on traditional websites, but you do see them in more and more web apps and most native software. Here, the right-click menu often acts as a quick context-based shortcut to commonly used features. However, mobile devices do not have a traditional right-click option.
Happy Coding 🙂