Nonprofit web design tips and more from CEDC

Posts tagged user interface design

0 notes &


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.

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.

Filed under A/B testing Wired web design WEB webdev user interface design

3 notes &

How Responsive Web Design becomes Responsive Web Publishing

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…

Filed under responsive responsive design mobile user interface design

7 notes &

Hover menus and usability

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 design­ers seem to believe that when their menus open on hover, they’re faster and eas­ier for most users to use. It cer­tainly might seem this way at first, but when you look deeper you’ll notice that the oppo­site is true. Hover menus are actu­ally slower and harder for most users to use. Menus that open on hover do save users a click, but that first click is nec­es­sary in let­ting the web­site know that the user wants a menu to open and is ready for it. It also con­firms to the user that some­thing is hap­pening as a result of their click. This behav­ior matches the user’s men­tal model of how most web­sites work. Click­ing for some­thing you want has never been an issue for users. What’s an issue for users is get­ting some­thing you don’t want or don’t expect sim­ply on hover…

Filed under hover click menu user interface design usability UX navigation

0 notes &

The Rising Importance of Flexible Web Layouts

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)

Filed under responsive design Css user interface design layout CSS Media Query Web

0 notes &

“Simple trumps complete” – a 5% feature (used by less than 5% of all users) is a distraction for all the other users, and is better removed, unless its really critical (a small number of users do need to cancel service, for example).

I have this mental model of particles of attention that a user brings, a finite quantity that they will spread around according to what catches their attention. I call them “attentrons”. An extra tab or button will attract a bunch of attentrons that are not then available to focus on other areas. So the tab had better be *better* than the competing areas of the site to avoid diluting the results, or it’s better off removed.

Neil Hunt, Chief Product Officer of Netflix
from a comment to a question on Quora as to what Netflix A/B tests
via Jared Spool and jonathanstegall

Filed under quote user interface design

0 notes &

Responsive Web Design

For

A List Apart:

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?

Smashing Magazine:

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.

And against:

(I should clarify, these items are against using this as a mobile solution, not against Responsive Web Design in general)

Jeff Croft:

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.

Cloud Four:

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.

Filed under responsive design css layout user interface design css media query Web