Create a Mobile User Experience

The mobile user experience is one of the hottest design topics to date.

What do mobile users want and expect? How can designers and developers better create great sites for users on smaller screens?

Creating the best mobile experience requires thought and planning. Just taking your website and expecting it to work on mobile is not enough (and it likely will not work). To really meet the needs of today’s users, mobile website design should be an essential part of your web design strategy.

And meeting those needs starts in the early stages. From outlining site content to making color and design decisions, mobile should be integrated every step of the way.

Planning for Mobile Design

Ampersand

Fueled

Best Designed WordPress and Bootstrap Themes

Designmodo Shop

Understanding what you want a mobile site to accomplish is a key part of the planning process. But other factors can be just as important – branding, speed, performance, look and design.

Decide what you want your mobile site to do. Information? Sales? Driver of traffic elsewhere? Optimize your site for this function. For most companies, the mobile site is an extension of the website and can work in a similar or different function.  Before the first wireframe is drawn, outline what the mobile site should do and who will use it.

Think about branding. There are two schools of mobile design thought – create a dedicated mobile site that is not necessarily like the main website or to create a mobile site that uses the same design scheme for the mobile arena (this may be a fully responsive site or not). Either way, the mobile site should look like it is a part of the main site. Colors, fonts and the overall experience should mirror each other.

Make it fast. Mobile users tend to be very impatient. Plan for it. Create user interface flows and elements that are made to load quickly and reliably.

Finally, you want it to look good. Use the same great design techniques and principles for mobile as you would for any other site – define a color and font palette, use great images and show users where to go and how to use your site.

Mobile Considerations

Charmin

Coosh

Food

The top consideration to keep in mind when it comes to mobile design is screen size. For a mobile site to work effectively, it needs to be able to be viewed with ease and navigation and use buttons need to be easily tappable.

Some of the most user friendly mobile sites take advantage of multiple screens for information. Consider ways to use less text to create more bang on each page.

Eliminate all the columns. Most mobile users hold their devices vertically. Design with that in mind (even though it is in direct counter to the orientation of most websites). With a vertical orientation, single column design tends to work best.

Think about whether the mobile site should be dedicated or not. A few years ago, many mobile sites were dedicatedly-mobile (sites with an “m.” ahead of the URL); this is becoming less common. Dedicated mobile sites often were stripped-down, navigation-only models of the main site. While these sites typically worked well, they did not provide ideal user experiences. More mobile sites are being designed to complement the main site, so that the look, feel and experience is very much the same. These sites are the most popular among mobile users and it is an experience that is becoming expected as the new standard.

Think About Design

Ncwine

Cerahati

Details should be a top priority for mobile design. Because there is less room on the screen, in theory there are fewer things to look at. So each one of these details should be executed well.

Stick to the basics and create a design that is both simple and elegant.

Create font and color schemes that use a limited number of options and go for high contrast colors and text so that every word on the site is easy to read. Keep scale in mind when working with mobile and consider type that is slightly larger than you might use for the typical website.

Optimize UI elements, or consider a pre-designed kit, so that each element will look great and not affect performance. Drawable elements should be scaled to the appropriate size and consider color and resolution when tracking load times. Sometimes the smallest items on the screen can be the things that take the longest to design and load. Take special care with the creation of these elements.

User Interface Elements

Sometimes having a few good tools can really make the difference in starting a new project. With more and more mobile development and design on the horizon, the options are almost endless. But here are a few tools that can really push you down the path to a nice site.

Pandora

Pandora UI for iOS: Beautiful icons for the iPhone and iPad are just a click away with the Pandora UI kit. Nothing is better than a kit when it comes to creating a new mobile (or any) site from the ground up. Kits can help you save time and eliminate the worries of inconsistent project details. This UI kit is made just for mobile with a variety of buttons, icons, forms and tools that are ready right out of the box or customizable.

Protoio

Proto.io: The Proto.io UI tool helps with prototyping, especially for mobile design. The application is web-based and works on iOS and Android platforms. One of the coolest features is the ability to test and simulate interactivity. An added bonus for designers are some pre-made UI components.

Patterntap

Pattern Tap: Looking for background inspiration? Pattern Tap is the go-to guide for backgrounds, images and overall inspiration. Although the site it not just for mobile, it is a great resource for inspiration and to study patterns of user interaction. (For a look at only mobile, select the “mobile” platform in the dropdown menu.)

android ui

Android Asset Studio Launcher Icon Generator: Don’t forget the shortcut icon. Create a simple and cool Android Launch Icon in seconds from an image or text with this fun tool. Choose from a variety of sizes, shapes and download it right away. (It is important to note that this tool is built only for Google Chrome.)

Conclusion

Whether you build from scratch or look for some parts to get started, consider mobile as an important part of your overall design scheme.

Think about how you want users to interact with your site and what actions they will take. Remember to keep it simple and easy-to-use so users will want to return to your mobile interface.

Carrie Cousins has more than 10 years experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with her on Twitter @carriecousins and Google+.

Newsletter

2 Comments
  1. Marco Barbieri Feb 15, 1:27 pm

    Good points.
    Remember, “Less is more”: replicating a whole desktop website experience on a mobile is not always the best way to go.
    You might want to concentrate on some key tasks rather than replicating all your offering..

    Reply
    +9
  2. Johnson Lu Feb 16, 8:15 pm

    This is a great read for anyone who is using responsive web design. Sometimes you have to do more than just use a responsive framework and you’ll have to manually design a mobile version of your website.

    And as Marco stated in his comment, sometimes it is best to have a simplified mobile version of your website that omits parts of the desktop version

    Thanks for the article.

    Reply
    +2

Leave a Reply

*
* Minimum length: 20 characters