The mobile phone has quickly become one of the most popular communication devices in the digital age and, as such, can provide a powerful channel for dialogue and interaction with audience or customers. The purpose of this post is to provide some simple tips to help, to begin designing mobile applications.
To begin with we consider the fundamentals of mobile design. Something that may seem obvious, but we are still surprised at the number of sites and applications on the market that seem to disregard these basic factors.
For example:
- Screen size and proportions: Move from desktop to mobile means much less screen space and a lot more variety in the proportions of the screen.
- Direct interaction with the screen: Unlike the desktop environment, users interact directly with the screen instead of using a mouse and keyboard, which establishes an immediate conflict of using the screen.
- Variable orientation: Mobile devices allow rapid switching orientation.
- A single screen: Even with the smartphones that allow users to run multiple applications or keep several browser windows at the same time, the results are displayed on a single screen set to interact, suggesting that we need to focus on creating experiences in a single screen.
- Limited interaction: There are no rollovers, so that the actions should be obvious and at the same time that the user correctly interpret the possible errors.
- Using the standards set for the devices: Yet the market matures, it is advisable to use consistent UI patterns that exist (for example, the back button in the upper left part) if we do not choose the standards must ensure that we use it for specific and right reasons.
- Limited resources: While smartphones are advancing at a rapid pace, there is a limitation in connection quality, battery life, processor power, internal memory…
Aside from knowing these basics, it is also very important to know the device and what we can offer to make a creative design. For example, Smartphones today offer a sophisticated set of entries that provide designers with multiple options. On the one hand the discovery of new gestures can be a powerful experience for users. A sense of excitement, mystery and achievement is added.
These advanced devices also offer additional controls in the form of: physical buttons (home, menu, back, volume up/down, etc.), physical keyboards (shortcuts, text entry), accelerometers (track movement and orientation), GPS, microphone (voice commands, audio, music), camera (pictures and visual codes).
Before designing and programming, it is necessary to take a series of decisions and preliminary work of analysis and documentation that does not take place; it will affect directly the quality and outcome of the project, regardless of size and scope.
For application design it is also important to define a proper Information Architecture (IA) for this device that allows us to organize content to be found and used by users in a simple and direct way. Some points to consider are:
- Keep it simple and focused. When designing app must define the tasks of users and support them with clean and well edited experiences.
- Prioritize content. Put the most important thing first.
- Keeping the context of the user in mind. Where are they? What is appropriate for that environment?
- Providing visual feedback, always. Often the user is left wondering whether the action that has been done worked. Always confirm the action taken immediately with a visual feedback.
And finally, for the visual design of the application we must take into account a number of recommendations that have divided into seven sections.
Context
With a desktop application, we can be sure that it is being used in a particular environment. With mobile, it is impossible, therefore:
- We need to know the users. Who are they? What do they know? What kind of behavior can assume or predict about users?
- What is happening to them. What are the circumstances in which the user better absorb the content to present?
- When will they interact. Are they at home and have time? Are they at work where they have short periods of time? Waiting for a train?
- Where are the users, are in a public or private space? Are they inside or outside? Is it day or night?
- Why they will use our application, what value is derived from the contents or services in current situation?
- How they are using the phone, hold it in their hand or in pocket? On or off? In vertical or horizontal format?
Message
The message we want to convey is fundamental. Through the visual design explicitly we create mental message that we want to generate the user. How someone reacts to our design and what is their impression. So we must ask ourselves: what are we trying to say visually in our application?
Look and feel
It is used to describe the appearance. It serves both to “I want a clean look” or “I want a wearable look”. Users are deeply concerned about the appearance of applications, because there are personal things. The sense of belonging is stronger than when it comes to desktop applications.
Sometimes it is difficult to determine the elements of an interface when making the app prototype. One way to help deciding a consistent design patterns is to use contrasting design. You can also check best app builders for help.
Layout
The definition of structures is essential in a mobile project to create a consistent and usable experience. One of the most important differences to consider in designing mobile app is that users have to do not only the screen, but also interact with it.
Thanks to the layout the user will processed visually the page. As progress the mobile landscape, we must be ready with designs that fit the size of each new device and its guidelines. Still it can be very difficult to create the best possible experience in different screen sizes.
Color
It is one of the most common obstacles we encounter when we design on different screens. When we carry out complex designs that are displayed on various mobile devices, limited color depth on a device can cause unwanted effects.
Color is becoming an increasingly popular way to make applications stand out regarding the competition. The first wave of applications created often has imitated the native applications for Apple iOS. But what we’re seeing more, it is a shift towards more bold designs with the use of primary colors and gradients. And matte finishes.
Typography
As mobile applications evolve, more and more designers are moving away from using standard system fonts and use more specific fonts. Many of the design features of typography in mobile applications come from anywhere.
Some recommendations:
- The text works best when it is large, easy to read and not subject to other interface elements.
- On mobile devices, combined with a thin type often makes it more readable experience in high-resolution displays.
- The height should be uniform and balanced. Lowercase letters should ideally be at least 2/3 of the height of the letter. This is known as the “x-height”.
- The wide and thickness confirmed. This means that the source must not be too much thin or too heavy, ideal an average.
- Avoid fonts with too long ascending and descending. The decorative fountains tend to break the three standards, so it is better to opt for an elegant sans-serif for user interface elements.
Graphics
Using graphics will use to establish or help visual experience. Graphs can be used to complement the look, or to support the content displayed in text. Its use is mainly based on Iconography or Pictures.
Comments are closed, but trackbacks and pingbacks are open.