How to create an embeddable timeline chart


The other day, web developer friend asked me how to create and insert a timeline into WordPress. He actually wanted to put an interactive timeline with links, images and video on the homepage of a news site.

I checked out several options out there and settled on TimelineJS. You can create timeline charts directly on their web site. Each story in the timeline has to be loaded as rows in a google spreadsheet. You can enrich each of the “steps” or events with links, videos and pictures and everything’s stupid-easy to use.

At the end you get an iframe embedding code that you can copy and paste to your site. But they even have a WordPress plugin for that. There’s even other developers who have created alternative tools based on TimelineJS that allow you to play with more settings.

So if you ever need a quick and dirty solution to build a timeline and tell a story, look no further.

 

Now, if you’re a developer and you want a proper, scalable and maintainable solution, that’s another story.

In the case of my friend, depending on an external site for such a crucial part of a website is not a good idea. What if these guys decide to abandon the product (hope not!)? What if their site goes off-line? My friend may lose his content temporarily or permanently. It’s not maintained by him, it’s not hosted by him, it’s not backed up by him. His content it’s not his.

So, the correct solution is to find a way to self-host a similar solution.

Fortunately and amazingly, TimelineJS is an open source tool and it’s on GitHub. If you’re a developer like my friend, you can download the source code, copy it to your server and that’s it. You’ll have a fledged timeline builder in minutes.

 

How to demo an app in six steps | John Nelson

dilbert-software-demo

Over in his blog, John Nelson gives us a full step by step recommendations on how to successfully demo an app in front of an audience.

In my case, my two biggest mistakes are usually going too fast or not providing enough context before beginning. I know it because of the questions that rise later during the presentation. So I’m putting this here also to remind myself:

  • Slow movements and self-narration.
    • Each click has cost, be click-stingy.  Viewers want to understand and follow along; don’t inadvertently mislead them with nervous clicking and unrelated mouse movements.
    • Move slowly and deliberately.  Take your hand off the mouse when not actively demonstrating an action.
    • Narrate your movements aloud, describing where your attention is moving to, the UI parts involved in the action, each action you take as you take it, and the result.
    • Speak slowly.  Pause from time to time to see if someone is trying to chime in (conference calls pretty much mute everybody when you are talking -so give them windows to interrupt).

 

  • Provide a statement of context for the viewers.  Remind them why they are watching you demo.  Don’t dive into the guts (and don’t ‘bury the lead’).  If this were a newspaper article, what would the headline be?  Some examples, depending on what sort of demo it is:
    • A feature pitch: “So wouldn’t it be nice to be able to quickly and easily roll up your manufacturing data by whatever geographic region you like? Here’s how.”
    • An iterative walk-through of an agile project: “We’ve been heads-down this week on our latest set of tasks and we’ve made some exciting progress.”
    • An overview demonstration of a product: “Really, what VCC does, is give you a single picture of the people and places that you care about in the context of events that pose a risk to them so that you can get the jump on threats.”

This also reminded me of something I read the other day at Don Melton’s blog, about presenting to Steve Jobs:

When demoing something to Steve, you had to pace yourself. If Steve said, “Stop,” you fucking stopped. Hands down and waited. And you didn’t jiggle the cursor while he was looking at the screen. Certain death.

Continue reading How to demo an app in six steps.

Full of Interesting Strangers | Michael Loop

IMG_6948

@rands writes a wonderful recap of what’s right and what’s wrong with conference badges and gives some insightful advise on proper conference badge design:

A Badge Connects You to the People.

The badge achieves this by providing as much social connection with as little social friction as possible.

A well-designed badge provides useful at-a-glance information.

When you walk up to an interesting stranger, you don’t really want to spend more than a half a second staring at their badge.

What’s their title? What do they do? This and other important information doesn’t belong on the badge: it belongs in the conversation facilitated by the badge. This is the point of the badge: to create a great many first conversations.

If you’re somehow connected to conference services, keep reading.

 

 

How to create a dashboard

Consider the dashboard of a car: in it, the driver can see the most important data: speed, RPM, mileage, etc. The dashboard displays decision-making information, in a graphical manner, in a single place.

The information dashboards should comply with the same requirements:


Although not necessarily copying the model of a car! This is a mistake. There are better ways to graphically display information.

CIO Dashboard, a Stephen Few classic

So, we take a few charts, some tables and we throw them all together in one screen, right?

Uh… nope.

 

What makes a good dashboard?

  • It contains the requested information (obvious? Not always!)
  • It has readable text with high contrast (black over white, or some other light shading).
  • It highlights the key information.
    • Charts are easy to find.
    • The problems are marked with icons or in bold letters.
    • The important information is generally at the upper left or lower right side.
  • It has no more than 5 or 6 data containers.
  • It displays useful data to make decisions.
    • Comparisons against goals, previously set standards or historical data.
  • It doesn’t require vertical or horizontal scrolling. All the information is shown in the same screen.
    • If you have a lot of information, you can use tabs.
    • If you must, use multiple screens. But remember: the key is to keep all the data related to each other in the same screen.
  • Its graphics have a high data/ink ratio without chartjunk.
  • It displays the right charts according to the type of data.
  • What seems interactive, is interactive. The charts offer details and drill-down when you click on them.

But I think the most important thing is that the dashboard tells a story, or helps you tell a story and, above all else, is esthetically simple. No color degradations or images with shading or use of 3D. Imagine for a second that your car displayed your speed with a 3D chart, would you be able to read it so easily? Would you be able to make right decisions? I don’t think so. Have that in mind when designing a dashboard.

Inspiration

At Excelcharts you can get various dashboard examples made in excel. If you need a little more spiritual aid, I recommend Information Dashboard Design, de Stephen Few.  A short and easy to read book; ruthless when it comes to tearing down old notions and clear when teaching the principles of good design for dashboards and reports in general.

Although it has some things specific to their product, the Tableau Visual Guidebook is an excellent guide on the basics of producing a good data visualization. The last pages contain a great checklist that you should complete before deploying your visualization.

 

How to create effective presentations, III – The endings


You have already mastered the art of transforming your message into a story. You even managed to create a 15-second version of your idea. But once you finish your speech, people haven’t noticed that you’re done. There’s no applause.

Maybe you have a problem finishing things.

Most of us are lousy to wrap up presentations. Some stay quiet and wait 5 painful seconds until the first person notices and starts doing the slow clap.

Others, at least, use a slide that signals the end. It usually says “thank you” and it has that tatty clip art of two guys shaking hands (extra points if it’s a multi-ethnic or multi-gender image).

And this might work in some cases.

Some times during those sleepless nights in which we create our slides, we forget the purpose of the presentation: to have someone remember what we said.

But we do the opposite, we reach the 20th slide talking about technical details, numbers, financial diagrams and half of our audience has already forgotten everything and is just waiting for that “thank you” slide while tweeting “#boring #fail”.

And your best idea, that one that you presented on the fifth slide, will be forgotten forever.

Two elements to capture the audience at the end:

 

The Silence

Before the last slide, keep quiet for 1 or 2 seconds

Any person that has mentally away from the meeting will return after a moment of silence. What happened? Why did he stop?

The Summary

This can be a “next steps” or “the road ahead” slide. A closing slide that summarizes what you said. Try not to repeat the same words that you used the first time. Summarize without repeating, so that people don’t get distracted again.

Steve Jobs, even with all his magic, was not a good closer. Many of his presentations ended up with a thank you. But the most memorable ones were those in which he gave a surprise at the end. His famous “One more thing…”

His job was to sell how wonderful Apple was. Not to sell products. And nothing summarizes that idea better than a surprise at the end.

So next time you’re planning a presentation, leave some space for silence and summarize your presentation with different words. Don’t let your audience’s last memory of your presentation be those boring slides near the end.