Showing posts with label tools. Show all posts

Friday, November 14, 2014

This Technology Makes It Possible to A/B Test Brick and Mortar Stores

November 14th, 2014

Imagine how many video cameras there are in retail stores around the world. Now imagine the usefulness of turning those cameras’ millions of hours of video—of shoppers’ in-store interactions and activity—into simple, optimizable, visual data.

Steve Russell has long seen the potential to turn that retailers’ dream into a reality. After studying computer science and economics at Stanford, Russell founded a company, eScene Networks, that was effectively YouTube for businesses—six years before YouTube even existed. Later, in the wake of 9/11, he founded 3VR, an intelligence company that utilizes video search technology to, in his words, “catch bad guys.” 3VR is now used by law enforcement across the country.

“I’d just become fascinated with video as a source of information,” Russell explained. “I realized that there are tens of millions of video cameras in the world, and if we could use computer vision and search technologies to suss out the interesting information held by those cameras, it would be beneficial for many different businesses.”

With that in mind, and with his background in video-based analytics, Russell founded Prism Skylabs in September 2011—an attempt, he said, “to build a cloud-based SaaS business around unique physical infrastructures already out there.” The most crucial of those unique physical infrastructures: retailers’ video cameras.

As the San Francisco-based company explains on its website:

Prism helps make sense of a visual world. Our unique cloud service transforms any video camera into a business intelligence tool that can be accessed from any device. Retailers large and small, as well as other customers, use Prism’s platform to remotely audit, manage, and optimize their real-world businesses.

I spoke to Russell about the Internet of Things, how Prism is addressing privacy concerns, and the future of real-world optimization.

NEGATING PRIVACY CONCERNS

The Internet of Things (IoT) is the practice of bringing everyday, otherwise inanimate objects to life, as it were, by connecting them to the Internet. Examples include a smart thermostat that learns your temperature preferences; a fitness tracking device with built-in sensors, paradigmatic of the “quantified self” movement; and, in Prism’s case, a technology that optimizes offline commerce by putting visual data online. While the IoT’s evolution means increased convenience—Cisco says there will be 50 billion IoT devices by 2015—it also means more pervasive privacy concerns.

Some of Prism’s competitors, whose goals are likewise to help retailers analyze customers’ in-store activity, “deliver information about shopper behavior by identifying phones’ unique MAC addresses and [using] them to track movement,” writes Gigaom. Because this tracking is “often done surreptitiously and on an opt-out basis,” it has been met with widespread criticism, including from senator Al Franken.

Apple attempted to boost customers’ privacy and negate companies’ abilities to track people by including a feature in iOS 8 that sends random, fake MAC addresses to Wi-Fi networks, though its effectiveness is questionable. Even some pockets of the government—the very entity notorious for its invasion of privacy—are attempting to get on board, Russell said, with pending privacy regulations coming from Congress and the FTC.

Russell said he anticipated these concerns. “I thought it would be important to get ahead of that and invent the technology that might become standardized in years to come,” he said. He has thus positioned Prism as an analytics company with privacy built into its technology engine.

“All our data is anonymized in the aggregate, so you end up with something in the form of ‘500 people walked into your storefront today,’” he said. Unlike Google, which only blurs people’s faces in Street View, Prism’s technology can remove people completely from the visual landscape.

“We have a more privacy-centric product that retailers and others can confidently employ without fear of a law coming down the pipeline that will make it illegal,” Russell said. “We’re an answer to privacy concerns—a good actor, a white knight with a real privacy solution and a way to get businesses to take this massive investment they’ve made in video infrastructure in their stores and put it to productive business use.”

It would be imprudent, however, to completely discount Prism’s competition. Some startups are finding that opt-in tracking, in which consumers fork over their personal data in exchange for a small sum of money, is feasible. Still others are aiming to be personal data brokers between consumers and data-hungry companies.

PRISM VS. THE COMPETITION

Beyond its privacy-protection software, Prism is different in other ways. For one, Prism doesn’t require retailers retailers to install expensive new devices to generate optimizable data. Prism’s data—not hard numbers but visually comprehensible heat maps—is overlaid on existing video-camera imagery of actual stores.

Prism’s heat-map technology allow retailers to see, for example, which products, and how their placement and layout, are engaging customers. If Prism’s heat map shows that a certain product display is consistently red—meaning it’s getting a lot of attention—a retailer would know to put that display in a more prominent, accessible part of the store. Conversely, a retailer might want to scale back its in-store advertising of a product that is blue or green, which signals that consumers aren’t giving it much consideration. It’s A/B split-testing real life.

What’s more, Prism’s high-quality imagery is created at a very low bandwidth, “about one percent of what a competitor with streaming video, like a Dropcam, might require,” explained Russell. That allows for an easier implementation of Prism across retail markets.

Since Prism’s inception, Russell has had no trouble finding retail clients, most of whom have issues “managing hundreds of stores around the globe. They began using us to look at their stores,” he said, “and effectively turn all the cameras into sensors that can analyze customer behavior.” Prism—whose team includes former employees of NASA, Google, Apple, and Microsoft—now has north of 300 customers, is deployed in 63 countries on five continents, and has analyzed more than 300 million customer movements and customer–product interactions.

A LAUNCH INTO THE FUTURE

“Since the beginning of Prism,” Russell told me, “we’ve been conscious of the ton of information that’s hidden within cameras and certain sensors all around us. The big challenge is finding ways to use technology to unlock that and make it useful.”

Now, it’s Prism’s technology that’s being unlocked: On November 3, the company launched Prism Connect, opening up Prism’s software platform to device manufacturers, who will be able to embed the technology “on a host of next-generation devices, from cameras to routers to sensors,” Russell said. By opening its technology, Prism is smartly making its native integration into consumer devices even easier, with out-of-the-box cloud connectivity. “There have been a ton of entrants to the IoT video analytics space in the past year, from Dropcam to companies like Samsung, so it just seemed sensible to open up the software to these devices,” Russell said. “It’ll mean a greater payoff for our customers to have a more turnkey value-driven solution.”

Connect is launching with more than 10 brand partners, including Samsung, Sony, Intel, and Cisco, with whom Prism’s platform will have easy integration.

At the same time, Prism announced the forthcoming release of the first camera powered by Prism. The device will be manufactured by a boutique company called ISD. “It’ll be the first device of its class with Prism on board,” Russell said, “with a tiny, low-cost sensor that does everything Prism is known for, and with the kind of ease of installation you’d expect from a consumer IoT device.” Prism also announced its updated mobile app, “the fastest, sleekest, and most searchable way to interact with cameras and sensor networks,” the company said a press release.

Prism Connect is noteworthy on multiple levels, Russell boasted. “It’s news for Prism’s core retailer customer base, which is getting a better, faster, cheaper, easier device. It’s news for many other customer-facing verticals, from restaurants to hotels to college campuses, that will now have a better video-based analytics solution. And it’s just relevant to the ongoing disco of the IoT space more generally.”

Time will tell where that “ongoing disco”—a corporate dance of innovation and takeovers, such as Google-owned Nest’s $555 million acquisition of Dropcam—goes. In the next year or so, Russell predicted, Prism and its ilk will be “embedded or installed in more cameras natively, and you’ll see price points come down on those devices, and retailers will be able to deploy the service more broadly and more quickly at lower costs.”

Retailers may soon be able to optimize the real world like never before.

from The Content Strategist http://ift.tt/1v9Zxxw

via IFTTT

Friday, October 10, 2014

Training the CMS

go to article

by EILEEN WEBB October 07, 2014Published in Content Strategy, Writing, Workflow & Tools · 15 Comments

Nothing brings content modeling to life like launching a shiny new site: teasers fit neatly without any awkward ellipses, images are cropped perfectly for different screen sizes, related content is wonderfully relevant. The content strategy comes to life, and all is right with the world.

But for years, my joy was short lived—because it would only take a couple weeks for things to begin to fall apart: teasers would stop teasing, an image would get scaled oddly, and—I won’t lie—I’d even start seeing “click here” links.

“Why are you messing this up?” I’d wonder. The content was perfectly modeled. The CMS was carefully built to reflect that model. I even wrote a detailed training document!

In my mind, I saw authors printing out my instructions and lovingly taping them to the side of their screen. In the real world, they skimmed the document once, then never opened it again. When new staff was hired, no one remembered to tell them a content guide even existed.

The problem? I’d spent months neck-deep in the content model, and knew exactly how important those guidelines were. But the authors didn’t. For most of them, it was their first time breaking content into its component parts and building it for reuse. It’s not surprising they were fumbling their way through the CMS: misusing fields, putting formatting where they shouldn’t, and uploading images that clashed with the design.

Maybe you’re like me: you know what needs to happen in the CMS to create the experience everyone’s bought into on the front end, but you’ve found there’s a big difference between having a plan and actually getting people to execute it in their daily work. The results are frustrating and demoralizing—both for you and for the authors you’re trying to help.

Don’t despair. There’s a better way to get your content guidelines adopted in the real world: put them right where they’re needed, in the CMS itself.

Getting the team together

If you’ve made a content template or page table before, the idea of an instructional content strategy document will sound familiar. Content templates act as a guide to a content model, explaining the purpose of each field and section, including information like intended audience, style reminders, and example copy. The problem is that these guidelines typically live independently of the CMS; the closest they ever come to integration is including a few screenshots of the editing interface.

Content guides are generally owned and created by whoever is in charge of content in a team. But actually gathering the guidelines is a collaborative effort: a designer contributes information about ideal photo caption length, art direction, and image sizing. A developer knows all the different places a particular field will be displayed, which file formats are accepted for upload, and how many blog posts can be promoted to the front page at once. A project owner or manager knows whom the author should contact with attribution questions, which audience a product description should target, and which voice and tone documents are relevant for each content type.

Getting content guidelines into the CMS itself requires connecting all these disciplines, which means it doesn’t fit neatly into most teams’ processes. In this article, I’ll show you how to bring all the pieces together to create guidelines that provide help when an author needs it, and make it easier for them to do their job well. We’ll do this by following three principles.

Good labels and guidelines:

provide context, explaining what a field is for and how it will be used;
are specific, encouraging accuracy and uniformity while eliminating guesswork; and
are positive and helpful, rather than hostile and prohibitive.

Let’s walk through how we can apply these principles to each piece of the CMS, using specific examples and addressing common challenges.

Content types

Before throwing an author into the endless fields of an edit form, we want to give them an introduction to the overall content type: what it is, where and how it will be displayed, and who it’s for.

Let’s say authors used to create new pages for each event, and then remove them (when they remembered!) after the event ended. We’re replacing that with a specific Event content type. To help authors transition, I might include text like:

Events are displayed in the Calendar page and in a block on the homepage, and will be automatically archived after their date has passed. The calendar is mainly used by members who are already familiar with our work and internal terms.

Where and how this works varies by CMS. For example, Drupal has an “Explanation or submission guidelines” field for each content type that displays at the top of every entry’s edit page. Wordpress allows you to add meta boxes to edit screens with custom code or plugins like Advanced Custom Fields, which makes the information more accessible than hiding it in the contextual help tab. If you’re not sure how to do this in your CMS, talk to your developers—chances are, they can make it possible once they understand the goal.

Field names

When naming fields:

Be specific and descriptive. For example, in an artist profile, you might replace the default of “Title” and “Body” with “Artist Name” and “Biography.” Even when they feel redundant, field names like “Event Name” and “Event Description” help orient the author and remind them which content belongs where.
Describe the content in the field, not the format of the field. An image field named “Image” doesn’t tell an author what kind of image. Something like “Featured Photo” is better, and best is a specific description like “Venue or Speaker Photo.”
Be consistent. For example, don’t phrase a label as a question (“Open to the public?”) unless you consistently use questions across all your fields and content types.

CMS form using three generic field names: Title, Type, and Body. — Before: Generic field names on a CMS entry form.

CMS form using three specific field names: Artist Name, Preferred Medium, and Full Biography. — After: Specific field names give context to the entry, and help authors avoid mistakes.

Help text and instructions

Where a field name describes what content is, help text describes what it does. The goal is to help authors meet the site’s strategic, format, and style needs, and answer questions like the ones in these four categories:

MESSAGING AND INFORMATION

What’s the underlying message of this copy?
What does this content do, in the context of the site? Is the point of this field to inform a user, drive them to action, or provide metadata for the site structure?
Are there things this field must include, or shouldn’t include?
Should the alt text describe, caption, or explain the function of this image?
Who’s the audience? Are they new to our work or familiar with our internal jargon?

STYLE, VOICE, AND TONE

What grammatical structure should this text take (e.g., full sentence, sentence fragment, Three. Word. Tagline.)?
Should the title be straightforward, or written as clickbait? (Hint: NO.)
Should there be ending punctuation?
Character count can be enforced by the CMS, but is there an ideal length the author should aim for?
Are there style rules, such as acronym or capitalization usage, that are likely to come into play?
Are you trying to change authors’ current writing habits? For example, do they need reminders not to write “click here” or reference page location like “the list to the left”?

TECHNICAL

Which formats are allowed for an image or file upload?
Do uploads have a size limitation?
Should the filename follow a specific pattern (e.g., OrpingtonPoster-August2014.pdf)?
If a field uses HTML, which tags are accepted?
For a checkbox or select list, is there an upper or lower limit to the number of selections?

DESIGN AND DISPLAY

Does the value of this field change how or where the content is displayed? For example, does a checkbox control whether an article will be pushed to the homepage?
Does this field display alongside other fields (and so shouldn’t be duplicative), or appear alone (like teaser text)?
Will the CMS scale and resize images automatically, or does the author need to upload multiple versions?
Where will this image be displayed? Will different sizes (like thumbnails) show in different places around the site?
Are there art-direction requirements for this image? For example, does it need dark negative space in the left for an overlaid headline? Should it show a person looking directly at the camera?

CMS event entry form with specific help text like “Spell out your acronyms!” and “When possible, use place names over street addresses” for each field. — A CMS form with a mix of technical and editorial guidelines helps authors create consistent content entries.

MAKING EVERY WORD COUNT

You can’t answer all of those questions at once—no one is going to read three paragraphs of instructions for a single text field. Your goal is to highlight the most valuable—and most often forgotten—information. For example, a company that long-ago settled on PNGs for its product images doesn’t need reminders of appropriate file types. You might remind users to write in second person in a “Subtitle” field, then link off to a full voice and tone document for more guidance.

Whatever you do, use space wisely—if the field label is “Featured Photo,” don’t write “This is where you upload the featured photo.”

Special considerations

BEWARE THE BIG WYSIWYG

Even the most well-meaning authors can be overwhelmed by a big blank box and a million WYSIWYG buttons, and the results aren’t pretty. Editorial guidelines help remind users what these long text fields should and shouldn’t be used for.

If authors will be doing any formatting, it can be helpful to customize the WYSIWYGand provide explicit styling instructions to keep them on track.

WYSIWYG editor with a very limited selection of formatting buttons, and help text including advice like “Remember that date-specific events should be made into Timeline entries rather than tucked into this field.” — WYSIWYG field with a limited selection of buttons, including editorial and formatting guidelines.

Be wary of endless “DO NOT” instructions. Positive reminders and examples of good content can be just as effective—and feel much friendlier—than prohibitions.

MAKING LISTS CONTEXTUAL AND CLEAR

Select fields and lists of checkboxes are part of many content types, but they’re used for a variety of different functions: a “Category” field might control where an entry is shown on the site, how it relates to other content, or even which layout template will be used for display. Good instructions provide authors with this context.

Please remember to change your lowercase, underscore-ridden, concatenated, and abbreviated machine names, like “slvrLc_wynd,” to real words, like “Silver-Laced Wyandotte.” Key:label pairs exist so that your authors don’t have to speak database to be successful. Use them.

ORDERING YOUR FIELDS

Many CMSes will let you group fields—most commonly in fieldsets or tabs—to help authors make sense of what they’re seeing. In most CMSes, the front-end display order doesn’t need to match the backend form order, so you can organize fields to help the authors do their job without affecting how things look on the live site.

Usually, you’ll want to either group similar content fields together, or arrange fields in the order they’ll be entered.

For example, say that you need multiple versions of a single piece of information, like a short title and a long title. It’s helpful to see these side by side, with reminders about how specifically the versions should differ from one another.

Or, say that your content will be copied from another system, like a manufacturer’s specification or a legacy database. Matching your field order to the content source means that authors won’t have to skip around while creating an entry. Similarly, if your authors always enter the “Event Location” content in between the “Presenter Bio” and “Event Date” fields, the edit form should match that—even if it’s not the order that makes the most sense to you.

Two fieldsets showing fields organized in groups under Homepage slideshow and Open graph metadata. — Fieldsets help make sense of complex CMS entry forms, organizing fields into groups that help authors keep track of different types of content.

GETTING SPECIFIC

The developer in me wants to create a library of reusable generic help snippets, but the best instructions I produce are the ones that are specific to a particular client’s internal organization and processes. Don’t shy away from including information like “Contact Ann Sebright (x8453) for photo attribution information,” or “Check the internal calendar for date conflicts before posting a new event.”

Making it real

Every team’s workflow is different, so I can’t tell you exactly how to integrate the creation of these instructions into your projects. I can give you questions, though, so you can have productive conversations at the right times in your process.

PICKING A CMS

If you haven’t selected a CMS yet, consider the following questions when evaluating your options. If the CMS has already been chosen, be aware of the answers so you can adjust your instructions strategy accordingly.

What formats of field-level help text does the CMS support: single lines of text, paragraphs, pop-ups, hover text?
Can the instructions include HTML? A bit of simple formatting can go a long way toward readability.
How hard is it to update the help text? As needs change over time, will adjusting the instructions be a hassle?
Can you change custom field labels used in the admin interface without affecting the machine name used in queries and front-end display?

CONTENT MODELING

Content strategists, developers, designers, and clients or subject-matter experts often work together to build content models. But it’s important to bring regular authors—not just the project leads, but the people who will actually be creating entries on the site—into the conversation as well, as early as possible.

Review content models and field names with authors before they are finalized. Do the field names you’re using make sense to them? Do they understand the relationships between fields, and what that means for connections between pieces of content?
Are there places where the new model differs significantly from the authors’ current conception of the content? Larger changes warrant more detailed reminders and help.
For fields that are subtly different from one another: what kind of information will authors need to distinguish between them and use them correctly?
If you’ve chosen a CMS with a limited ability to include help text, have you simplified your models accordingly? A model people can’t remember how to follow won’t do much for your content.

CONTENT MIGRATION PLANNING

When you have significant legacy content, plan for migration to be its own phase of the project. Talk about what kinds of guidelines would make moving content to the new CMS smoother.

If blobs in the current site are being split into component chunks, position those field components near each other during migration, since they are all being derived from the same source.
Create a set of perfect example entries for authors to consult during migration. A set of real content—especially one showing how information from the old site fits into the new model—is a valuable reference tool.
Consider adding “migration phase” instructions and field groupings, with a separate set of “live site” guidelines to be put in place after migration is complete. The kind of reminders needed while content is being moved are not always the same as the help text for content being newly created.

DESIGN AND DEVELOPMENT

As the design and CMS take shape, designers and developers are in the perfect position to spot potential snags.

Are any pieces of content making your spidey sense tingle? Is there author-editable imagery that has particular art direction needs? Are there site functions (e.g., “only one piece of content can be promoted to the front page at a time, and promoting a new piece will un-promote the existing content”) that you feel like you’re the only person who understands? Make note of any piece of site content that makes you nervous, and share them with your team so the guidelines address the issue.
Who’s going to enter the help text into the CMS itself? If the instructions are more tactical, this may be something the development team can do as they’re building out the content models. The content strategist may take the lead for more editorial guidelines—in many CMSes, help text is entered through a GUI rather than in code, so its entry doesn’t necessarily need to be owned by a developer.
Help text deserves its own QA. It’s incredibly important to see the instructions in context—there’s no other way to realize that a particular piece of text is too long or lost in the clutter, or that the field order doesn’t make sense in the form. The development and client or business teams should both review the edit forms for every content type to make sure all the important information has been captured.

ONGOING ADJUSTMENTS

Revisit your work regularly with both your team and your client or project sponsor. Adjusting the help text or rearranging the fields won’t take much ongoing time, but can make a huge difference to the quality of the author experience—and the resulting content.

Review live pages, especially any with complex layouts. If you find images that aren’t following art direction or text that isn’t providing needed information, add more specific help text around those issues.
Chat with the authors using the system and make adjustments based on their feedback. Is there anything annoying about the edit form? Are the fields in an order that works for them? Are there places where a link over to a style guide or intranet page would save them time? Small changes to the interface can make a big difference to the overall workflow for an author.

Setting authors up for success

I used to think it was inevitable: that a few months after launch, I’d be guaranteed to find misused fields and confusing headlines littering a site—the particular kind of chaos that arises from combining a powerful CMS with untrained site administrators. But as I’ve moved the content guidelines into the CMS itself, my post-launch check-ins have shifted away from annoyed sighs and toward small improvements instead.

When we embed instructions where they’re most relevant and helpful, we help our authors build good habits and confidence. We allow them to maintain and expand a complex site without feeling overwhelmed. A website that looks perfect on launch day is a wonderful thing. But when we improve the author experience, we improve the content forever—and that’s a whole lot more satisfying.

Wednesday, August 6, 2014

Outdated UX Patterns And Alternatives

09 FEB 2014 ON UX

via Sideproject

Meet North, design and development standards to align and guide your project. It's a comprehensive guide contributed to the open source community to encourage, "a mobile-first, in-browser, system based approach to design and development."

Check out North on GitHub:

The section of the guide that I found most interesting is, Outdated UX Patterns, a collection of examples of what not to do when building a website, which tries to steer designers from borrowing from ineffective practices to solve common problems.

Just like how presentations deprecate, so do UX patterns. There are a plethora of outdated UX patterns currently being used that do not suit users or business well and their usage should be ceased. The following list is by no means comprehensive, but should be used as a guide (along with in-person testing and analytics) to determine if patterns being used should be updated. —Sam Richard

It may be ambitious to call some of these patterns "outdated" since many of them are still prevalent across the web. It's also worth saying that there are no simple answers as far which alternatives to explore. But lets walk through some examples of potentially ineffective UX patterns and explore some other options:

Carousels

1% clicked a feature. Of those, 89% were the first position. 1% of clicks for the most significant object on the home page?

These are everywhere on the web, but largely inefficient when it comes to getting users to engage with content past the first slide.

Carousels exist to keep people from beating the shit out of each other in meetings. — Brad Frost

Alternative:

Prioritize content, rather than 4-5 content pieces that get buried in the same region, choose the most important message and display that. Failing to prioritize content is failing to have a content strategy, which means you're basically throwing your content up against the wall to see what sticks.

Large Background Images

From North: Large background images add a large amount of weight to a page for very little actual gain. Any user whose screen is generally smaller than 1024px will absolutely not see the background image. Small screens simply don't have the screen real estate to display content and background images.

Alternatives:

Context-aware image sizing to "deliver optimized, contextual image sizes for responsive layouts that utilize dramatically different image sizes at different resolutions"
Interchange is an example of this, it allows you to dynamically load content on a responsive site based on user's browsers, so you can target small, medium and large images for the right use-cases.

Counterargument:

Treehouse published an article on Creating Responsive Websites with Photo Backgrounds, looking at a few different responsive techniques including how to adapt large background images to an interface:

The trend of large photographic backgrounds has become very popular in recent years. The improvement of Internet connections has allowed more data transfer per second, which means images can load a lot quicker in real-time. There are also plenty of open source scripts out there for generating cross-browser support using fixed photo backgrounds.

The performance hit can be minimized a bit by optimizing images for the web and lossless images using services like Yahoo! Smushit.

In the end, the decision again comes down to what you're providing by serving up the image, does the use of a large image communicate a message worthy of the longer load time? If its a must-have, that's a concession you may be willing to make. Otherwise, its not worth it.

Mega Menus

From North: Mega menus became popular for providing infinitely nested menus or, in the worst cases, micro sites for each menu. These create complexity issues for uses are particularly hard to navigate without fine pointers.

It's important not to make people scavenger hunt for what they are looking for.

Users have words and phrases in their mind that will cause them to click on a link. We call these trigger words. They are essential to good navigation..... When the mega menu is hidden, all of the trigger words on the menu are also hidden. Users can't predict the future, so they don't know they need to reveal the menu to get what they need. — Jaried Spool, 6 Epic Forces Battling Your Mega Menus

Alternatives:

Simplify the menu structure, especially when it comes to heavily nested mega menus that go three or even four levels deep.
Guide users with more clicks for a more natural flow. With a confusing or complex menu, people often resort to searching or just give up. Instead, steer people in the right direction based on their needs.

Text In/As Images

From North: Text that is part of an image makes that text inaccessible to screen readers without the proper alt attributes and becomes hard to read (in most cases, impossible) if that image is resized, which happens often in responsive web design.

Alternatives:

Use web fonts and CSS3 Fonts:

Overlays

From North: Overlays are a UX pattern popular for everything from insertional to modal content or interaction. Overlays, while seemingly a boon for user experience, wind up creating countless issues for users without keyboards, fine pointers, who resize their browser, or generally would like to exit one without going forward through the user interface.

Alternatives:

Use insertionals/inline widgets within the flow of the interface
Put the overlay content on a new page
Here's a fullscreen overlay effect done with CSS and SVG from Codrops.

Page Preloaders

From North: Users want to get to a site's content as quickly as possible. If instead of providing it a preloader is put up that is designed to halt a user from getting content until every piece that makes up that content is available, a user is likely to leave and not come back.

Alternative:

Allow content to load naturally or lazy load content.

Social Integration

From North: While social integration is often seen as a great boon, more often than not the plethora of third party logos scattered throughout a page make a site look more like NASCAR than a finely crafted brand. While the effect of this hasn't been thoroughly researched yet, there is one truth; social integration provides free advertising for those social networks and ties the site's branding to those social networks, for better or worse.

Alternative:

Allow users to share content organically. Sharing widgets may plant the seed to share content with others, but if a user is compelled to share something they are interacting with, its a pretty safe assumption that they know how to post it to their social channels. Note: I obviously have a share button on this site, my advice would be not to gratuitously slap share widgets everywhere without considering your audience's intentions.

Content Insertionals

From North: Seen often in article views, content insertionals are usually links to other tangentially related content in-between paragraphs as a stand-alone paragraph or as non-hyperlink "links" in an article that produce a hover or click modal of other, likewise tangentially related content. These items take the user's attention and prevent them from being immersed in the content.

Alternative:

Don't break up primary content with secondary/related content, showing that content is more effective when a user is done reading an article than while they are in the middle of reading something.

Auto Play Media

Image via The Verge, "Facebook's auto-playing video ads are coming this week"

Auto playing media, whether its sound or video can cause all kinds of problems for people on your site. It's important to always make playing media a choice for your users. Otherwise you may be serving up video to speakers that are on too loud or triggering media during a meeting or quiet place like a library. Have you ever been on a website and thought, "Man, I wish I didn't have to press this play button"? Neither have people using websites you are designing.

Infinite Pagination

From North: Infinite pagination that truly is infinite should be reconsidered for a more measured approach where two to four pages are automatically loaded with additional loads being triggered by user interaction.

Alternatives:

The above approach is less frustrating for users, automatically loading some content rather than a non-stop barrage of content, like you might find on a site like Inc.

Unexplained Merged Functionality

From North: Merged functionality, like Amazon's Buy now with 1-Click, can be a big win for user experience, but any merged functionality must be explained. Registering for a website does not necessarily mean a user would like to sign up for that website's newsletter, so they shouldn't be. Logging in with Facebook to comment doesn't necessarily mean a user would like all of their browsing activity pushed to Facebook.

Alternatives:

Make sure any time a new feature is being worked in, to give the full context and description of what is happening before putting that functionality in place. Never automatically sign someone up for a newsletter or do anything that you haven't gotten explicit permission for.

Updated UX Patterns

Don't be afraid of patterns but be willing to challenge existing ideas especially in the time of transition we're in now. The playing field is leveled, we have a chance to uncover the next great set of design patterns. — Michael Boeke, Braintree

The point of looking at something like this isn't to abolish things like large background images or infinite scrolling completely, but to raise questions before re-using common interface elements out of habit. Watch where you borrow inspiration from, if you're looking for it from other websites, your project is going to look like other projects and fall into the same traps. Be thoughtful in your UI decisions and center your choices around two questions, a) what you are trying to communicate? and b) are your users best interests in mind?

Brian Krall

A Sr. Front-End Developer working in the web for the last 7 years. Now at Duo Consulting in Chicago, Illinois. He spends his free time with his lovely wife and slobbery golden retriever, Kirby.