Posts tagged user interface design
Posts tagged user interface design
The A/B Test: Inside the Technology That’s Changing the Rules of Business
Over the past decade, the power of A/B testing has become an open secret of high-stakes web development. It’s now the standard (but seldom advertised) means through which Silicon Valley improves its online products. Using A/B, new ideas can be essentially focus-group tested in real time: Without being told, a fraction of users are diverted to a slightly different version of a given web page and their behavior compared against the mass of users on the standard site. If the new version proves superior—gaining more clicks, longer visits, more purchases—it will displace the original; if the new version is inferior, it’s quietly phased out without most users ever seeing it. A/B allows seemingly subjective questions of design—color, layout, image selection, text—to become incontrovertible matters of data-driven social science.
As understood from Marcotte’s seminal article and book, Responsive Web Design is a flexible, adaptive approach to the display of web content, achieved via technologies that rearrange, resize, add or subtract content. Marcotte’s Responsive Design serves a more legible, usable web page to an array of devices with varying screen resolutions and download speeds.
The popularity of Marcotte’s responsive web design will likely result in better content consumption experiences for a lot of websites, for a lot of people. However, by focusing our conversation on the optimization of visual presentation, we’ve placed just one of what I hope will be the three pillars of responsive web design: content, presentation and interface. By broadening the definition, we will allow responsive web design to better support the way people experience the web today and will experience it tomorrow.
In this essay, we explore ways in which the first pillar, content, might become responsive. But before we begin, let’s first examine the role physical devices can play in making these experiences possible, especially the mobile devices which initially inspired the responsive web design movement…
Some interesting comments on hover menus and usability vs. click menus. With the explosion of mobile devices (which don’t have hover states) this may all be one level more relevant, too. The comments have an interesting discussion with a variety of points of view so be sure to read through them as well.
Many designers seem to believe that when their menus open on hover, they’re faster and easier for most users to use. It certainly might seem this way at first, but when you look deeper you’ll notice that the opposite is true. Hover menus are actually slower and harder for most users to use. Menus that open on hover do save users a click, but that first click is necessary in letting the website know that the user wants a menu to open and is ready for it. It also confirms to the user that something is happening as a result of their click. This behavior matches the user’s mental model of how most websites work. Clicking for something you want has never been an issue for users. What’s an issue for users is getting something you don’t want or don’t expect simply on hover…
Just a few years ago, creating a fixed-width design and the coding to stick to that width was practical, as long as it could accommodate a wide range of users. However, just a few years ago, having the Internet on a cell phone was a luxury, netbooks were rare, and the convenient tablet device, such as an iPad, didn’t even exist. Now, a fixed-width design is almost inconvenient.
Mobile web designs began gaining momentum within the last few years, but often times they were just mobile stylesheets for very small devices, that accompanied the default, fixed-width stylesheet. Beyond this, truly flexible web designs have been few and far between. Ideally, a flexible web design should be fully proportional from the smallest to the largest device, without those proportions straining. After widths or heights hit a certain point (e.g. becomes too small for a computer screen), a design would then change stylesheets to alter content availability, layout structure, and more.
It’s easy to see the advantage of flexible layouts, but there are still many advantages of fixed-width layouts as well: they’re easy to create, faster to create, the layouts don’t break, and content doesn’t overflow to create a messy and unusable look. In other words, a fixed-width layout can be far more usable than any flexible layout if that flexible layout is implemented incorrectly. In this article, we’ll discuss the basic pros and cons of each type of layout, and why flexible layouts, despite past drawbacks, will be gaining a competitive edge in the next several years over the once popular fixed-width choice.
(See also: Responsive Web Design)
By default, an image element that’s sized at, say,
500pxdoesn’t exactly play nicely with an container that can be as large as
800px, but as small as
100px. What’s a designer to do?
Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design. But how?
In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical. Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there another option?
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
(I should clarify, these items are against using this as a mobile solution, not against Responsive Web Design in general)
For me, creating a great mobile version of a web product is all about capturing the context the user will be in when they visit.
By and large, mobile users want different things from your product than desktop users do. If you’re a restaurant, desktop users may want photos of your place, a complete menu, and some information about your history. But mobile users probably just want your address and operating hours. If you’re a blockbuster movie, desktop users probably want an immersive experience, including trailers and production details. On mobile, they probably just want to know where the nearest theater is and what time it’s showing. If you’re a calendaring application, desktop users probably want a full-featured suite of tools for adding and editing events. Mobile users are probably more focused on simply seeing what they’ve got going on today. If you’re a major retail site, desktop users may be more interested in browsing and shopping, whereas mobile users may be more interested in checking the status of an existing order.
In my experience, I rarely want to serve up the exact same HTML to mobile users that I do to desktop users. That’s not to say it never happens.
Unfortunately, CSS media query is fool’s gold for mobile devices. It hides tough problems and gives developers a false promise of a simple solution for designing to multiple screens.
The Short Version
Ferreting out the problems with CSS media queries for mobile devices is easy if you look at what media queries purportedly promise:
All you need to do to transform your desktop web design into something optimized for devices with smaller screens, less powerful CPUs, and slower network connections is to add more code.
The idea of adding more code—adding more to download—in order to optimize for mobile should be the first clue that this isn’t a good solution.