In this edition of Ask UXmatters, our panel of UX experts discusses whether responsive Web design is really necessary for ecommerce sites and some of the key elements of responsive designs.
Imagine that your company has chosen you to be part of a team that is going to design and build or update an ecommerce Web site. The budget and deadline are tight, and the boss wants to know what is the minimum that you can do to create a strong, profit-building machine. What would you tell him? Would you stay focused only on your existing desktop Web site—or if you’re creating a new site, build for the desktop first—and let your mobile customers deal with it as best they can? Would you build a Web site that is somewhat different on and adapts to each type and size of device? Would you insist on developing a mobile app? And how would you plan to maintain the solution?
Champion Advertisement
Continue Reading…
In my monthly column Ask UXmatters, our panel of UX experts provides answers to our readers’ questions about a broad range of user experience matters. To get answers to your own questions about UX strategy, design, user research, or any other topic of interest to UX professionals in an upcoming edition of Ask UXmatters, please send your questions to: [email protected].
The following experts have contributed answers to this edition of Ask UXmatters:
Steven Hoober—Mobile Interaction Designer and Owner at 4ourth Mobile; author of Designing Mobile Interfaces; UXmatters columnist
Cory Lebson—Principal UX Consultant at Lebsontech; President, User Experience Professionals’ Association (UXPA)
Eryk Pastwa—Vice President of Design at Creatix
Janet Six—Principal at Lone Star Interaction Design; UXmatters Managing Editor and columnist
Q: Is a responsive Web site really desirable for ecommerce sites? If so, what are the key elements that you need to consider for smaller screens?—from a UXmatters reader
“You probably need both a responsive site and mobile apps,” replies Steven. “Web sites are discoverable, but apps are more engaging for frequent users. However, you may not need the extra features of a native app, so I’d start by optimizing for the mobile Web, then monitoring usage rates. If you have a group of customers who regularly engage with your Web site multiple times a week, they might benefit from the seamless experience of a mobile app, which can remember them and where they left off. You can use that data to estimate future use and do a pretty straightforward cost/benefit analysis to figure out how much investing in app development would really be worth to your company.
“If you do both, make sure that your apps and Web site work well together. Plus, it’s essential that every feature in the app has an equivalent on the Web site and vice versa. You don’t want users to think the app is in any way inferior to the Web site. Do be sure to use custom URIs (Uniform Resource Identifiers), so links to your site from search results, texts, or email messages get redirected to the corresponding information in your app.
“A good middle ground is the concept of hybrid. I’m not by any means talking about using a write-once tool like Titanium, but instead using lots of Webviews inside a custom application frame. A hybrid app loads your content—and even some user-interface changes—instantly. It can also be cheaper to build. But remember to build the right experience for your company and your customers. Don’t let cheapness be a driving factor in platform choice. Otherwise, in my experience, you’ll end up with something that gives poor results and costs more in the end.”
Who Is Your Audience?
“The right answer depends on whether you are targeting loyal, dedicated customers or new or infrequent customers,” responds Cory. “For example, Amazon Prime members have made some level of commitment to Amazon for their online purchases. Having a native app for customers like these, who may be making purchases frequently, would certainly be a good idea. But new or infrequent customers of an ecommerce site would not immediately download an app. For these customers, having a Web site that can cater to their needs for a first-time or infrequent experience is key.”
Native App Versus Responsive Web Site
“The right approach depends on the strategies and objectives of the business,” answers Eryk. “In most cases, a native mobile app is the way to go because it offers a more powerful, cleaner, faster experience. Plus, it provides push-notification options and delivers personalized content directly to the user.
“However, contrary to the views of most design and development firms, I would add that a well-designed, well-executed Web site is often a good way to go. Installing a mobile app takes time and usually requires registration—a big barrier that reduces conversions. So it’s better to have a responsive ecommerce site that allows fast one- to two-touch conversions.
“Further, browser support is quite good, so why build a separate solution for each mobile platform? With a single Web application, you can cover an entire market and deliver instant updates, because there’s no delay for app-store approvals or customer updates.”
More About Responsive Design
“An aside about responsive design: it’s over used and doesn’t provide the best experience for ecommerce users,” adds Steven. “Sure, you should totally make your site work on mobile devices and tablets—and maybe even TVs and everything. But going with a purely responsive solution can easily lead to page bloat, and you can incur maintenance complexity, as well as technical debt, if you aren’t careful. Plus, a responsive site doesn’t actually act very much like a mobile experience.
“Adaptive design, which Josh Clark has described so well, uses any technique that is necessary to ensure that you present the right Web experience to the user. The core of this from a presentation-layer perspective is really device detection, which—with WURFL (Wireless Universal Resource FiLe) baked into Wikimedia, Wordpress plugins, and more—can be easier than it looks.
“You don’t have to create a separate mobile site. Instead just switch out components and features as necessary. For example, you shouldn’t have an email form in a mobile site or app. Instead, launch an email contact intent. You can get access to a user’s location and much more. The advantages go on, but I don’t want to spend too much time on them here.
“I always say that responsive is fun, and adaptive is for business,” concludes Steven.
The User Perspective on Responsive Web Sites
What Web sites would users consider to be ecommerce sites? Not just those that sell things. If a Web site’s purpose is to make money for a company—even if it’s not to actually sell products—you should consider it an ecommerce site from a design point of view. An example would be a soft-drinks company directing customer interest to other Web sites or brick-and-mortar stores that sell their products. Thus, companies ignore responsive design at their peril.
Unfortunately, the reality is that responsive Web design takes time and money that some companies don’t have. So, what to do? Take a closer look and determine whether a possible increase in business from a Web site that supports mobile users would pay for the design and implementation work. In Luke Ahn’s Entrepreneur article, “3 Insights Entrepreneurs Must Know About Millennials’ Mobile Behavior,” he discusses a comScore study that shows 18% of millennials are mobile-only users. Changes are afoot, so maybe it’s time for your company to prepare for the future before it goes the way of Radio Shack.
If time and budget are extremely constrained, start by implementing a responsive Web site, making sure that you take advantage of WURFL technologies in automatically resizing your site’s pages and changing the layout of columns as necessary. Even though this would be only a minimal and less-than-ideal solution for an ecommerce site, it would at least make it apparent that your company cares about mobile users. And, if you implement a mobile site that offers limited functionality, be sure to add a Go to Full Site link on every page of your Web site, so power users who are familiar with your desktop site can do anything they might want to do.
Of course, it would be best to create a complete mobile Web site or native mobile apps if your company has the time and money. In any case, ensure that mobile users feel they can accomplish everything they need to do on their mobile device, just as they could on your desktop Web site. If your design solution at least achieves that, your customers won’t walk away frustrated, taking their money with them.
Just so you know that UXmatters cares about our mobile users, Figure 1 shows a preview of our responsive Web design (RWD) on mobile. The site has been under development for almost a year, and we need a great Web developer to help us to finish the implementation, get our recalcitrant slab-serif Web font working, and launch. Thanks to UserZoom for making this development effort possible and to Chris Becker for designing our new logo.
Figure 1—UXmatters responsive Web design on mobile
Great article, thank you. Responsive design is such a critical element of online success with ecommerce Web sites. Responsive design is now the only method we use, especially for ecommerce Web sites.
Wonderful article!! Responsive Web design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge a Web page to make it look good on all devices—desktops, tablets, and phones. This is the most popular method for bringing your ecommerce store or business online.
Dr. Janet M. Six helps companies design easier-to-use products within their financial, time, and technical constraints. For her research in information visualization, Janet was awarded the University of Texas at Dallas Jonsson School of Engineering Computer Science Dissertation of the Year Award. She was also awarded the prestigious IEEE Dallas Section 2003 Outstanding Young Engineer Award. Her work has appeared in the Journal of Graph Algorithms and Applications and the Kluwer International Series in Engineering and Computer Science. The proceedings of conferences on Graph Drawing, Information Visualization, and Algorithm Engineering and Experiments have also included the results of her research. Read More
