- Copy written by the marketing manager?
- Design inspired by your annual report?
- Interactions borrowed from PowerPoint’s Transitions gallery?
- Built in Flash?
- Voiceover done in the office with a laptop mic?
- Sitting somewhere deep in your website, probably badly resized?
If any of the above describe your currently available product or service demos, the time has come for a radical rethink. If you are thinking of creating one, this is how not to go about it.
The demise of Flash and the unstoppable rise of HTML5 have led to a new generation of interactive demos, mostly created on a single page and requiring scrolling (by a mouse or fingers depending on your device) instead of clicking or page flipping.
For the baby boomers dominating the corporate world, the idea of endless scrolling probably sounds like an anathema – but it works. The linear simplicity of the scrolling action leads to a user experience that is much friendlier than asking the user to click on buttons, chevrons, curled corners, or even worse, clickable graphics embedded within the demo’s content.
Below, we list 10 examples of such demos that deliver their content in an arrestingly simple manner. It is worth noting that single page demos should not be confused with single page websites (although a demo is often treated as a website). We define a demo as a form of story-telling, with a beginning a middle and an end, that brings a topic to life.
A well designed demo, hiding a number of little interactive surprises, a feature that brings the content to life but also makes it a bit more complicated than it needs to be.
Straight forward, well illustrated and to the point.
Stunning visuals, but puts style over substance which, given the product, is not necessarily a bad thing.
Irresistible story-telling with great visuals to bring it to life.
A rather flat and static demo, but one that delivers a lot of information. Simplicity is an asset in this case, as any further movement and interactions would compromise the user experience.
Another example of style over substance. The great graphics (helped by a great product) come at the expense of good legibility.
Lean and mean Victoria might have done her magic with the car, but the demo is on the heavy side. It is worth a look though as it incorporates multiple levels of navigation; tricks better avoided, or used with extreme prudence.
A lively example that focuses on data.
An example of multi-layered navigation that moves horizontally. However, the actual story gets suffocated by the visual assets and interactive bits.
A simple demo/product website that keeps design, animation and interactions under control to offer a slick browsing experience.
So how do these examples compare to what you have sitting on your company’s website?
It’s unlikely that your products or services look as sexy as the Toyota 86 but still, with a bit of design and copy love, your offering can be transformed into a compelling story as well.