There are now more app developers than we have ever seen in the short history of smartphone devices. Google’s newest Android OS coupled with Apple’s advancing technology makes for a force to be reckoned with. Although mobile interfaces can borrow traits from the web, they can’t be perfectly emulated because mobile apps rely on touch-based interactions.
I want to share a few mobile interface patterns to help designers craft purposeful applications that run smooth and behave as expected. This is no easy task and it requires a lot of practice to figure out the best methods for any individual application. But I suggest looking for these interfaces in other applications to determine how they feel and behave on a typical device.
Tabbed Content Areas
Among the many traits of modern app design is a growing need to squeeze content into infinitesimally small locations. Although recent versions of smartphones comes with enlarged screen sizes, the content still fits into a very small area. Include the fact that mobile apps are touch-based and you’ll see why extra screen space is a tremendous benefit.
A common design pattern is to use tabbed content switching between feeds, lists, thumbnail views, and other pertinent information. This trend started with older versions of iOS using the same grouped button concept. However it has since evolved onto Android and is used prominently for interface design.
The mobile app Spring features an example on their profile page. This is a slightly customized example where the button group is colored to match the content. Many designers prefer to keep these buttons on related pages that switch between alternative options. User profiles are the most common examples because there’s often a lot of stuff to display.
Almost everyone knows about Instagram and certainly recognizes the iconic application interface. Their user profiles implement a similar tabbed group of links that switch between display styles for photographs. Viewers can see photos as thumbnails, details, or a couple other alternatives. So it’s important to note that button groups are useful for displaying different content on the same page, but they’re also useful for different styles of the same content too.
Guided Tooltips
To assist new users testing out an interface you might try adding some guided tooltips. These could appear as popup bubbles or as full modal windows on top of a mobile application. Naturally the purpose would be to explain any confusing or complex areas of the interface.
But it’s important to avoid excess mollycoddling. Most applications work the same and if you design a clean interface the buttons and navigation should be intuitive. Using too many of these tooltips can be annoying and degrading to experienced users. But that doesn’t mean they’re completely worthless – just use enough to expand on potentially complicated icons or buttons.
In a simple iOS app Rent the Runway you’ll notice there’s a brief tooltip explaining the interface. For applications which require detailed user interaction there’s good reason for these guided tips. Especially if the application is mobile-only without a companion website. Just be sure to focus on the most important features and only show each tip one time – any more than that is excessive.
Aside from interface-specific tips you can also explain features that relate to gesture. For example one of the Facebook screens uses a guide to explain how to swipe and hide chat conversations. This is not an integral part of the application but it can improve the browsing experience. Gestural tips are especially useful because they can’t always be understood intuitively – sometimes users need to know that swiping across or tapping & holding an item will perform an action.
Customized Navigation
Most UI designers recognize a mobile application when they see one. Kinda hard to miss those three lines so eloquently labeled as “hamburger icons”. While the name might conjure up the image of a 1950s malt shoppe, the user experience is still fantastic and heavily supported.
Take for example the sliding menu found in the Rdio app. It uses very clear and distinct colors between the foreground text and background gradient. This forces the menu to stand apart from the main application and still provide an easygoing user experience. To allow greater functionality the menu also includes a search bar and lets the user to swipe down for more links.
Looking at a similar interface for Gmail we can see a lot of the same repeated patterns. Contrast between text links, lots of space, plus a small bit of extra information. Some links include badges which showcase the total number of new messages in any given category.
Login & Signup Pages
When someone first opens an application they want it to be a warm and inviting experience. This is especially true of social networks where a user might not have an existing account. This can make the login/signup page a stressful or exciting experience based on how the UI design is handled.
After the splash screen finishes loading users should be thrust right into the action. A good example is RunKeeper which uses a customized login and registration page design. Users can switch back and forth easily and the fields are big enough to read from a distance. There’s also an option to log in directly using Facebook which has become a popular choice recently.
In this case the best design is the most streamlined design. Put together an organized list of features that must be included for the login/register page. These should be central to the interface without any major distractions. To spruce up the page you could include a logo, background photo, or branded vector art. Just be sure the artwork is secondary complimenting the primary login or registration form.
Closing
Although this is not an exhaustive list I hope these patterns can offer a solid point of reference for mobile designers. Once you begin to recognize common patterns you’ll be able to think critically about how they work. Then you can test out these patterns within your own application design process.
Source: http://ift.tt/1sZ1Fb3
No comments:
Post a Comment