Visualize This!

One could claim without much exaggeration that making data come to life in effective online tableaus is a must for any well-designed website. After all, the internet is about the transmission of information in beautiful and compelling design. Communicating effectively is key, and websites have a huge role to play in a media landscape marked by the sheer volume of available data, whether the objective is publicizing successes in genomic sequencing, reaching strategic communications goals, showcasing useful municipal information, or simply highlighting meta-data like visitor count and other forms of data analytics. Little wonder, then, that data visualization is increasingly becoming an indispensable content management resource and posting strategy. One thing to keep in mind–web browsers evolve, and so do visualization libraries. If you have not updated your list of visualization tools recently, you need to take a look at the available options.

When it comes to data visualization, gone are the days of word clouds. Enter JavaScript and a variety of libraries built around it—Springy.js, D3.js, digraph.js, chart.js, Google’s Visualization API, polymaps.js—that control the behavior of abstract mathematical models. Most of these libraries are open source but some (see, for example, plotly, ZingChart) require payment for their services. Although each of these ensures a relatively quick and effective, almost tactile, representation of data, the skill level required to make the most of a given library varies. One of the excellent open-source choices for creating charts is D3.js, especially when coupled with the Waypoints API. If you have previously dabbled in D3.js, you know that it can be a challenging library with arcane and little-known options that take time to explore. Sure, making a pie chart from scratch is easy if one is familiar with the basics of JavaScript but adding options and customizations can be tricky, as discussion on professional websites and blogs testify. One of the significant advantages of D3.js over similar libraries is that it gives the developer a great deal of control in customizing their data, rather than relying on pre-made charts that can fit it.

Some of the inherent complexity of D3.js and JavaScript objects can be tackled with the Waypoints API—it is slim but intuitive and rich in options, and provides a layer on top of D3.js that makes animations a cinch. Waypoints focuses almost exclusively on managing animations and triggering the correct function as a visitor scrolls up or down a page —for everything else you would need to depend on JavaScript or custom functions in D3.js. It does assume some knowledge of JavaScript and the dom tree, as well as JavaScript event-handling , especially when it comes to displaying a series of animated graphs on a single page. Its most important functionality is the ease with trigger points can be set up, particularly useful for fine-grained control over a series of moving objects. Ideally, the animation for each of these should trigger at a precise location, not sooner and not later, made possible by a Waypoints closure.

Content Shouldn’t be an Afterthought

Designing a website is like taking a script and making it into a movie. The movie director converts the text of the script into scenes and casts talented actors that will bring the movie to life.

Now imagine this, what if the director started shooting without a finished script?

Would that impact the quality of the movie? Would his decision cost the studio more money? Well, if it’s Steven Spielberg or Billy Wilder directing the movie than the answer is probably no.

Let’s put it this way: designing a website without enough content is a guessing game that negatively impacts and slows down the creative process. Yet for some reason, many clients wait until they receive a nice set of designs before they start creating or finalizing content. This is where the design can fail when you have to force, rewrite or shortened the final content to fit into the newly designed layout.

Content is the most important part of your website. The right content will give your business a voice; tell your business’s story and emphasize what you do and why your target audience should invest in your products and services.

Content includes photos, video, text, logo, graphics, and headlines.

The benefits of putting content first

#1 — Stop nasty surprises from derailing your project budget and schedule.

#2 — With a content-first approach, your designer can design better and more detailed set of wireframes.

#3 — Avoid endless rounds of iteration.

What happens when a content first approach is not followed or is completely ignored?

Compare and contrast both design and see how using lorem ipsum and real content can change the design for better or worse.

Example 1– no real content, placeholder text

 

Example 2 – real content, no placeholder text

Things to think about when creating or planning content for your site.

Preparation is key.

Ask yourself these following questions.

What sort of impression would you like your target audience to have about your business? Will your content engage your visitors? What message are you trying to communicate through your content?

Avoid

  •      Conflicting messages
  •      Duplicated copy
  •      Spelling and grammatical mistakes
  •      Outdated content

The content you provide to your designer during the discovery phase does not need to be final or perfect. Start by reviewing your existing content, maybe it’s not exactly what you want to say, but it’s a start. Revising existing copy is generally easier than writing from scratch so give it a try

Ideally, designers would love to receive final content from their clients at the beginning of each project, but it never happens and probably will never happen. Remember a design constructed without real content may look okay in the end, but it will never be as good as a design with real, actionable content.

So, should content be an afterthought? No! It should be one of  your first thoughts. While design helps lure the audience and draw their eye to an actionable area, content tells them what action should be taken.

Ghost Reviews

How many websites do you visit in a month?

According to Nielsen’s statistics, the average American visits 89 web sites in a month, spending just over 29 hours browsing those sites. And these are the numbers from 2010, before many had yet grown accustomed to browsing sites regularly on their smart phones.

This is all to suggest that your website visitors have all seen enough to know what they like. In fact, over half of your site visitors are going to spend less than 15 seconds on your site. Are they happy with what they find? Or will they be quickly moving along to your competitors site?

If anything, it’s just a little too easy for us to cast our verdict on a site’s quality. It’s certainly easy to move right past a web presence that isn’t up to snuff. Sometimes we don’t even dwell on our assessment of a discarded site, just as we dive absently into many that work. We’ve been surfing the net for decades now, we ride intuitively.

You don’t have to be a user experience design professional to recognize great UX when you experience it. Just like you don’t need to be a graphic designer to be influenced by an impactful design. But when an unimpressed visitor passes right on by, it’s not just the site being passed over.

We assess the overall quality of businesses and services by way of their web presence.

Your site might be being assessed harshly by visitors who aren’t intentionally leaving their review. And if your site just isn’t connecting for any reason, you need to know.

There are a number of metrics to help gauge a site’s effectiveness. Such metrics include the dreaded: ‘visitors who leave your site quickly, never to be seen or heard from again’. This can be a website’s most straightforward ‘pass/fail’ test. These are your most negative reviews. If far too many site visitors are ghosting entirely, well… that’s a problem. Of course, what is more nebulous is the ‘why’ behind such behavior; as is what, exactly, you can do to hold onto more visitors.

You’ll never get rid of all of these ghosts. But trying to convert more of them is the good fight. Fortunately, ghost-busting isn’t always as daunting as it might seem.

User experience design and general design aesthetics can be largely subjective. But not entirely. There’s a small window of objective assessment that can actually give us a clear look at a site’s impact.

Analytics and user testing has proven that expectations built off previous site experiences can help us review a new site design objectively. We can assess site infrastructure as it relates to or adheres to our shared expectations. Considering the volume of sites the average site visitor processes, it’s no surprise that they will lean further into the UX they already prefer. What’s more, with enough user data, we can even discover the objective consensus for an optimal site experience.

From there, we can design a site experience to look and even feel better than the current objective consensus–but not too far as to be an alien and non-intuitive experience.

Baby steps.

Our best experiences with a new site is when we can interact immediately. It’s exciting when a site experience awes us with any number of new flourishes; but a successful new site should still always allow for us to dive right into the experience.

Basically, as we engage with site infrastructure and learn our way through an interface, we’ve already put the work into learning those processes. Sites that adhere to these learned models simply feel more intuitive. It’s more than just ‘keeping up with the Jones’s’ for the sake of appearances. This has real stakes in the success (or failure) of a business.

It only takes us a few clicks to review a site. It can take considerable effort for a web presence to meet the expected standards of the day, but it’s a key step towards keeping the ghosts at bay.