Mobilizing the User Experience: Design for the Small Screen

As marketers begin adapting to a new channel, content is making its own leap to the mobile web.  With an entirely new class of devices emerging, web content is no longer one-size-fits-all.  And while there seems to be a lot of confusion around the technical methodology of mobile development (such as optimizing websites for mobile devices, or building apps), it’s all a part of a greater design process.

Ultimately, the role of design hasn’t changed.  On the mobile platform, design dictates content, which in turn drives an engaging user experience.  Design for the mobile web is simply about translating content into a new format, with the mobile user’s experience in mind (think small screen, finger-friendly navigation).

Creating a strong user experience is essential to the success of any mobile marketing campaign, whether you’re optimizing your site for the mobile web, or building an iPhone or Android app.  There are several key cues and elements that have become design standards across the mobile platform, and which should be incorporated into every project to ensure that users have a positive and successful experience with your brand over the new medium.  In this blog we’ll explore some of those design standards, and help you to envision your brand’s future on the mobile web.

Creating a strong design for the mobile platform is about balancing usability and aesthetic.

First and foremost, the design should promote ease of use.

For the mobile platform, this means that navigating a website or app should be simple and intuitive.

Navigation

Within apps, the standard navigational element is a tab bar, which is usually displayed at the bottom of the screen.  The tab bar should be visible at all times, so that the user can easily navigate the program.  Commonly used tab bar icons work as visual cues so the user can find the home page, perform a search, mark favorites, access program settings, and share content with friends.  Tab bars may also incorporate customized icons that enable the user to perform actions specific to the program, such as access account information or leave a comment.  While tab bars can vary in formatting on different mobile platforms, the use of universal icons (like the ones shown below) helps to make navigation intuitive.  Users don’t need a crash-course because they are already familiar with these controls.

On a mobile website, this functionality can be simulated with buttons or links assembled into a linear navigation menu, like you can see here:

Content

Simple and intuitive navigation is essential to a strong mobile design, but it’s not the only thing.  Content itself should be managed a little differently on the mobile web than it typically is on desktop sites—because, when it comes to content, context is everything.How much is too much? That may vary between two different platforms.  A mobile site or app should only present information that is relevant to the mobile user.  With limited space, and the limited time constraints (or attention spans) of most mobile users, marketers can meet consumer expectations simply by delivering content that is in demand.  The mobile website should feature select portions or segments of the content available on the desktop site—not all of it densely packed into a mobile friendly version.

The user experience is central to successful content management.  Consider, as a user, what information you would actually need to access from your mobile device.  This should take priority on your mobile website.

Aesthetic

Usability and relevance are critical in designing for mobile, but effective design really comes through in the aesthetic of the final product.  Creating a polished, visually appealing interface on mobile devices requires expertise and an extensive knowledge of the medium.  Optimizing a desktop website for the mobile platform involves more work than simply rearranging items to fit within a smaller frame.  Building a strong, fluid and appealing interface requires a deep understanding of the mobile user experience.

That said certain design elements have become standards for mobile web development, such as formatted drop-down menu items, finger-friendly buttons that facilitate user interaction, smoother transitions between pages, and item groupings that fit within the small display space.  Above all, the final product—whether it’ a website or an app—should be developed with the mobile platform in mind, and the user experience at the center of design.

Still struggling to envision your business on the mobile web? Give us a call or drop us a line for a free consultation, and see how we can extend your brand to new frontiers.

0