Kyle Adamo published an article today over at UX Booth about integrating Google Charts in your prototypes to deliver a high-fidelity experience. Not something you would need to do all the time, but very useful when you do. Here’s how you can do this in ProtoShare.
From a Google Spreadsheet where you have a chart, you can select to publish an interactive chart or image. The interactive chart gives you a script block to paste into HTML (the ProtoShare Advanced HTML component for instance), and the image option gives you the URL of an image, which you can use in an Image Component in ProtoShare. Then wire up the charts with some states and a state Jump Menu and you’ve got the bare bones of the same widget. The video below shows the details. Sorry, no sound. I just did it quick this morning.
Let’s examine Adamo’s article a bit more. My first reaction, and I’m sure the reaction many UX professionals might have, was that this was an awful lot of trouble to go to for a protoype. Seems like this level of detail shouldn’t be necessary. It’s even possible that the functionality is overbuilt and the developers will have difficulty implementing it.
But Adamo addresses this in the article. He states that he knows his audience and his developers. Prototypes are used to convey concepts and generate discussion so decisions can be made. The high level of interactivity was needed for his stakeholders. If he had done less he would have wasted everyone’s time by trying to gain insights with insufficient information.
So for me the two big takeaways from this article are:
- Prototypes exist to drive communication so you can make decisions. Do what you need to make sure you are engaging your stakeholders to get answers to the questions you have.
- Use whatever you need to build your prototype. This might mean going outside your prototyping application. If you can quickly build a chart in Google spreadsheets and include it through an iframe or image, do that instead of spending lots of time building a chart with basic shapes.
Overall a good article on a creative technique used to quickly deliver what stakeholders needed to have an informed discussion. Well done, Kyle.
Have you ever incorporated external tools into your prototypes? If so, we’d love to hear about it in the comments.