“The first thing we need to understand about mobile design is that it’s different – and not just with regards to size. The physicality and specifications of mobile devices impart different design affordances and requirements. Because mobile devices are lighter and more portable, we often find it more convenient to use them. Consequently, through this more regular use, we feel a unique, emotional connection to them.” 1
Because mobile devices have fundamentally changed the users expectations, it’s important that designers design with a user-center design process to arrive at their solution.
There are four mobile delivery methods that a designer can use to achieve a user-centered design:
- Mobile-specific site: which is optimized for mobile devices.
- Responsive site: this type of site reorients itself for mobile devices.
- Native app: an application that’s installed on the user's device. These are self-contained, and every screen of the app is defined up front.
- Hybrid app: this can offer a little more flexibility, as it’s viewed in a browser. It loads content from the web and provides users with an “app-like” interface.
"People appreciate iOS apps that feel as though they were designed expressly for the device. For example, when an app fits well on the device screen and responds to the gestures that people know, it provides much of the experience people are looking for. And, although people might not be aware of human interface design principles, such as direct manipulation or consistency, they can tell when apps follow them and when they don’t. As you begin designing an iOS app, be sure to understand what makes iOS devices unique, and learn how to incorporate HI design principles so that you can deliver a user experience people will appreciate.” iOS Human Interface Guidelines
Mobile Information Architecture (IA)
Some of the more popular patterns that are practiced in mobile and tablet design are: Hierarchy, Hub & Spoke, Nested Doll, Tabbed View, Bento Box and Filtered View.Hierarchy pattern is a standard site structure with an index page and a series of sub pages. If you are designing a responsive site, you may be restricted to this; however, introducing additional patterns could allow you to tailor the experience for mobile.
Hub & Spoke is pattern gives users a central index from which users will navigate out. It’s the default pattern on Apple’s iPhone. Users can’t navigate between spokes, but must return to the hub instead.
Nested Doll leads users in a linear fashion to more detailed content. When users are in difficult conditions, this is a quick and easy method of navigation. It also gives the user a strong sense of where they are in the structure of the content due to the perception of moving forward and then back.
Tabbed View is a collection of sections tied together by a toolbar menu. This allows the user to quickly scan and understand the complete functionality of the app when it’s first opened.
Bento Box or dashboard pattern brings more detailed content directly to the index screen by using components to display portions of related tools or content. This pattern is more suited to tablet than mobile due to its complexity. It can be really powerful as it allows the user to comprehend key information at a glance, but does heavily rely on having a well-designed interface with information presented clearly.
Filtered View allows the user to navigate within a set of data by selecting filter options to create an alternative view. Filtering, as well as using faceted search methods, can be an excellent way to allow users to explore content in a way that suits them.
It’s important to understand how mobile and tablet interactions differ when compared to their desktop counterparts and designers need to consider the above methods and patterns throughout the entire design process - from R&D (Research & Development) to the final product - when designing for mobile because they impact the user.
There are also some interactions designers need to pay attention to when designing for mobile and tablet devices. These include: ergonomics, gestures, transitions, and mobile-specific interaction patterns.
Ergonomics
It’s important to pay attention to device dimensions as well as the practical components of a device. The way the user holds the device can influence how easy it is for the user to reach parts of the screen or “hit areas.” These are the areas of the screen the user touches to activate something and require enough space for the user to touch - the smallest button size is 44px square.Gestures
All devices enable gestures which makes it a crucial component of mobile interaction design. Some of the gestures include: press, long press, double press, small swipe, large swipe, pinch/spread. There are some standards and patterns for developing gestures on touch-based devices that you can read more about here.Transitions
These are interactions between application states that help tell a story or establish a gestural metaphor, and they help facilitate recall and prevent users from getting lost. Some of the basic interactions include:
Common Patterns
Because mobile devices have less space, along with the users viewing conditions often affecting their experience, it can be a challenge for designers to provide users with an efficient and positive user experience. Some of the most valuable interaction patterns include those used to improve navigation, select content, sign in/out, and negotiate forms.Main Navigation
Main or “primary” navigation is a visual manifestation of our website's or application’s information architecture.Selecting Content
Pressing links to activate content facilitates flow, making it easy for the user to quickly select content with one hand. If done well, this transition also increases user engagement.Sign-In
Entering a username, email and password is an essential process for some applications. As designers, we can ensure that it’s as painless as possible.Forms
Filling out forms on a mobile device can be a frustrating experience, especially if that form appears on a website designed for a desktop and lacks a mobile version. Make the process easier for the user by paying attention to the small details. You can also use native forms.Getting the interactions accurate on a mobile device is essential. Today’s solutions become tomorrow’s standards and guidelines. It’s important to keep in mind the details that define a mobile layout and mobile-specific interactions. In doing this, designers can create intuitive mobile experiences that are then translated through the visual design. Below are some additional things to keep in mind when designing for mobile and tablet.
- The structure of the layout needs to be taken into consideration as well as how to best utilize the available screen space; a grid system will help to achieve this.
- Keep in mind that on a mobile device the user typically only moves vertically through content, whereas on desktop, the user is able to view content in any direction one wants.
- Interactions must be user-friendly, and the visuals need to reinforce those interactions.
- Sizing and placement of elements should ensure ease of use, and space to scroll and swipe must be sufficient to allow a user to easily navigate through these elements.
- Group like or related items and establish a vertical rhythm that supports the communication of the content hierarchy.
- As previously mentioned, by utilizing a grid system and placing elements on the baseline grid, it will make reading and understanding content easier, as well as create structure within the design.
- And finally, using color is a valuable tool for communication. While it can be very subjective, it can be used to convey tone or style, to differentiate between sections, static items and interactive functionality and can also be used in communicating status changes.
References
http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/
http://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/
http://www.uxbooth.com/articles/designing-mobile-part-3-visual-design/
http://www.smashingmagazine.com/2012/08/10/designing-device-orientation-portrait-landscape/
https://css-tricks.com/a-couple-of-best-practices-for-tablet-friendly-design/
http://www.lukew.com/ff/entry.asp?1197
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/
