Viki: A visual wiki design

comments 16
Ported Posts / Uncategorized

Remember when you were a young and you drew epic images on giant rolls of butcher paper? The little boys would draw cool spaceships and army men battling one another in landscape full of tunnels, fortresses and lots of explosions. The little girls, with their surprisingly superior sense of color, drew fish, rainbows, and people. You didn’t worry about your drawing skills. You just doodled for the fun of it.

The best part was either a study hall or perhaps when you had one of your friends over. You’d grab a whole sheet of paper and you’d each start doodling on part of it. He’d draw some massive star destroyer that was about to take out your very nifty fighting ship. Naturally, you’d unleash your fighter’s super powerful “Mega-Zapo-Cannon” which would result in a giant explosion. You told your story and mashed it all up with your friend’s story. Half the fun was making up nifty scenes with ninjas, robots, spaceships and more. The other half was seeing what your friend managed to think up.

These paper mashups were a quirky upwelling of that primordial communal artistic pulse that lies within all of us. At a very basic human level, it is joyful to create cool intricately detailed images and share them with your friends.

Viki is a design for a communal art mash up that riffs upon those simple butcher paper drawing sessions from long ago. It is a game design and community site that can be made by anyone with some solid AJAX skills.

Web 2.0 games
I’m a big fan of modern software development tools, especially ones like the Web 2.0 technologies or Flash that allow rapid development of web applications without a heavy investment in expensive infrastructure. Server space is cheap and the tools are free or very low cost. More importantly, the mechanisms for communication and collaboration are built into the basic infrastructure of the platform. With a bit of brains, a lot of hard work and a very solid sense of marketing, there are oodles of opportunities for upcoming game developers.

The trick, however, is not about trying to replicate Space Invaders or Doom. Instead we need to create game designs that take advantage of the unique characteristics of the platform. Here is a hypothetical design exercise. Imagine you’ve been handed a piece of rope, three sticks and a duck. Your goal is to make a game out of this arbitrary collection of technologies and capabilities. If you try to replicate Doom, I guarantee that you’ll fail.

If you work within the constraints of the platform, some genius will create a game that is surprisingly addicting. It turns out that there are lots of things you can do with a duck.

The challenge with the web is the same story with different pieces. When you are developing for a new platform, you need to toss out the old genres and improvise some new ones.

What is a Viki?
A Viki in its most basic incarnation is a visual wiki. Instead of creating pages of words that are hyper linked together, the users create pages of images that are hyperlinked together. Think of it as the ultimate sticker book mash up.

You start with a set of stamps. Some of these are primitives like squares and circles. Others are text boxes. Others are clip art of spaceships, aliens, castle walls, and oddly attractive cucumbers. You can place and arrange any of these stamps on a canvas. This canvas is your very first, very personal page.



You can create more pages by selecting an object and saying that it is a link. Viki will ask you if you want to create a new page or link to an existing one. If you type in the name of a new page, voila…you have a new page that you can navigate to and start filling up.

Now the cool thing is that each page generates a thumbnail that is added to your stamp collection. Simply by creating new pages, you end up creating new stamps.

Viki is communal
A viki is a communal space. Anyone can go to a page and edit it provided that they have the correct permissions. Most folks claim that they can’t draw to save their life. However, if we provide easy-to-use tools and we provide strong social rewards to people for being creative, all sorts of creative sparks are bound to flourish. A little admitted lesson that many artists understand is that creativity is dramatically enhanced by peer pressure.

In addition to the communal reward systems, Viki also has a full suite of wiki features such as version control, recent changes and comments on changes. This helps people manage the Viki quite nicely.

Technology
The entire application runs in a browser with the data stored asynchronously on the server. For the user, there are very low barriers to entry since there is no install and no heavy download. Even the interface is simplified. Users don’t have to know Photoshop or Illustrator. They don’t need to spend years mastering the art of placing a line on paper. They browse to a URL and start creating.

There are also some nice bits for the developer here. Since we are using very simple technology, the prototype could be whipped up in a few nights of programming by an intermediate skill AJAX coder. Can you place a transparent gif with a CSS div and store it in a database? My friend Harold mocked up a basic proof of concept in a night of playing with Ruby on Rails.

Some of the more complex features such as thumbnail generation require server side image processing. This is not rocket science, merely work.

Someone I know once claimed that art programs will never make it onto the web. I call BS on this dinosaur thinking. 🙂 The trick is finding an application that benefits from web technology instead of attempting to shoehorn Photoshop into a web browser.

The game
So far, I’ve described an interesting toy, but not a game. Instead of laboriously iterating through potential design specs, I want to tell you a story about this design. It is an attempt to capture the feeling of playing the game. This provides a starting vision for the next stage of creating a new core mechanic through intensive iterative prototyping.

There are five main stages to our tale.

  • Discovery: How the player finds the world.
  • The Hook: Why makes the player want to dig further into the game?
  • The Feedback: What are the feedback systems that encourage deeper play?
  • The Store: How does this title make money?
  • The Source of Content: How do we provide the player with new content so they stay?

The Discovery
Harvey, an avid MySpace user discovers the NinjaGarden.com while browsing around looking for something ‘cool.’ Harvey is a rather normal kid of about 14 who enjoys doodling in his notebooks. He isn’t the best artist in the world, but that has never stopped him. He thinks the name is hilarious and the artwork on the site is rather fun.

There are dozens of very interesting stories on the site and he becomes enthralled in a particularly fascinating one about Mickey Mouse as a blood thirsty master ninja. The fact that someone took a worn out icon and made it authentic and edgy rocks his world.

The Hook
As Harvey digs deeper into the stories, he hits a wall that encourages him to register. Once he is registered, he has his own account that gives him energy points. He can keep reading until he runs out of energy points. The only way to get more energy points is to rank pages or start a story of his own.

He spies a story thread that he really like and creates a link off of one of the main scenes.

A new canvas opens up and he starts plunking down some of the basic elements in the basic collection. There are ninja cats, giant robots and naturally retro spaceships with fricking laser beams. And you can type rude things.

The Feedback
Other people start viewing Harvey’s new page. They dig it and offer comments. He is feeling popular and making new friends who appreciate what his creation. Reading stories is fun, but social interaction with real people is intoxicating.

Whenever someone visit or ranks his page, they leave energy points behind. These boost Harvey’s points which lets him read more. They also encourage him to create new pages. As Harvey’s page gets more readers who rank and comment on his work, he gains a reputation.

Some of the really popular pages make it to onto the “Garden of the Day” list. This means thousands of users are likely to check it out. Harvey begins to dream of one day reaching such heights.

The Store
The original set of stamps is rather limited. It turns out that there are lots more out there that you can buy using extra energy. Some of them are quite rare and a few you need to buy with a combination of energy and real money.

Harvey buys a set or two of professionally drawn Mickey images. They only cost him a five or six bucks and they let him create much more in-depth scenes.

The Source of New Content
It turns out that the stamps of Mickey and friends are created by a lass named Aya. At age 17, she is an excellent illustrator and delights in seeing what people create with her artwork.

She gets half the money that Harvey spends. There are two hundred other people that also bought her work and she just received a check for $150. That will pay for a very cute pairs of shoes. More importantly, she is famous. Her online reputation is reflected directly in the reputation of the pages that are created with her artwork. Perhaps it is only on one site with a small group of people. But it feels good to have people respect her and her art. She would not give that feeling up for the world.

Now the circle of content is completed. The few highly creative people provide a seed that encourages others to be creative. The result is an explosion of content that acts as a magnet for additional potential customers.

Is this a game?
You’ll notice that this is not a traditional electronic game where you shoot things. Some traditionalists might argue that it is not a game at all. On the surface, it has more in common with Wikipedia or Slashdot than your typical first person shooter.

Yet all the basic pieces are in place for a rousing social game. You have user created worlds where the act of consuming stories and creating stories are the game play verbs. You have a robust feedback system complete with strong goals for players to strive towards.

Viki is to traditional games as Charades is to Chess. It is a social sandbox game played by creative people.

Future Extensions
This is just a sketch of the basic Viki system. In the future, there are numerous styles of play that you can support with the same engine:

  • Living world: By building logic into the stamps, you can have a world that grows as you play. Logic can take into account the position of stamps and their time on the canvas. Trees can grow, characters can change facial expressions, etc. Drawing becomes a more involved act similar to gardening.
  • Combat: With the addition of basic Javascript-based collision detection, you can add a turn based system where players place object that attack one another. The pace of the game is such that the collisions only need to be detected one per click and can be calculated offline if necessary. The goal of the game is to build the coolest image while damaging the other side’s pieces.
  • Comic creator: Any time people put down images and text, they tell stories. Wouldn’t it be enjoyable to let people subscribe to a particular author’s canvas and encourage them to create a series of online comics. Think of it as a comic blog (a clog?).
  • Product design: With a viki, we have a system where larger numbers of people collaborate on complex multi-dimensional designs. Imagine a dozen participants with the best ideas percolating to the surface due to the built-in ranking system. Suppose that you are dealing with a design for a three hundred page website. A viki becomes your essential sketch pad and its contents are sorted by the wisdom of the masses.

Conclusion
I have several more of these ‘alternative’ game designs lurking in notebooks and half finished essays. I’m sharing them for two reasons.

First, most of the designs I’ll suggest are pretty inexpensive to implement and some folks may enjoy noodling with them as projects. To this end, I’m providing all source files from my mockups. Use and abuse as you desire as long as you include my name and a link back to this article. I’d be happy to publicize any fun experiments on this website. Click here to download the source images (1.2 MB)

Second, I want to encourage folks to think outside of the box when it comes to game designs. Not all casual web games need to be Match Three variants. There is an infinite universe of fascinating social games that have barely been explored. Some smart cookie is going to create an amazing entertainment phenomenon using tools that have been readily available to millions. They’ll be willing to try something new and when they do, everyone else will wonder why they failed to think of it first.

take care
Danc.

References
The quote that inspired the game
“My top five favorite things to do as a kid:
5) Play army
4) Walk the rail road tracks and explore wilderness.
3) Make weapons.
2) Build stuff with Legos.
1) Draw epic spaceship battles on 100 feet stretches of computer paper.”

– Robert ‘Apache’ Howarth on VoodooExtreme
https://web.archive.org/web/20060614072103/http://ve3dboards.ign.com/Message.aspx?topic=23127087

Photoshop tennis
https://en.wikipedia.org/wiki/Photoshop_tennis

Note on Legal Issues:
In any title that has user created content played by minors, there are legal issues. Luckily, other sites have been dealing with these for many years so the solutions are straight forward.

  • Collection of data from children under 18
  • Report problematic images. Quite likely these are tagged with a nudity tag and then just culled from under 18 imagery and searches.

16 Comments

  1. This is a great idea, and it seems you have already put a fair amount of effort into it either conceptually or even physically. Why not take it further and start working with some people to get it going? Unless you\’re just content to start the train and have others put their own thoughts into it.Perhaps the next version could be a Game-Wiki, where the same ideas go for the entire game-creation process, each person adding to the game in sequence?

    Like

  2. Is this a game? It is by our definition, which is \’a toy with a degree of performance\’. Almost anything which allows self-expression can fit this definition, thanks to the ambiguous meaning of \’performance\’. 🙂 Of course, ours is the broadest one in circulation, but I consider that to be a plus. :)Although the central play is different, this is very close to something I want to try implementing, but that I\’m not yet ready to talk about publically. It even has the same legal problems. 🙂 I constantly think about your challenge about sharing designs… it\’s hard. Much harder than I would expect. I know that no-one steals good ideas, because no-one can actually spot a good idea until they\’ve seen it up adn running, but still, the urge to hoard good ideas is suprisingly strong.We really have to get together and chat at some point – our goals are so very nearly perfectly aligned in some respects. It\’s a shame you\’ve been chased out of the game development world by its general incompetence. :)Take care!

    Like

  3. I like that you\’re starting this whole thing with an aesthetic (the feeling of playing \’drawing wars\’ with your friends in the 3rd grade)!

    Like

  4. this is awesome , i would love to code something like this sadly crunch in work + 2 kids limits the amount of time i have i will do some experiments though and keep you updated

    Like

  5. Fantastic idea!It reminds me when I was young and my friends and I would make elaborate scenes in Mariopaint, then record them on VHS and show them off to each other.You don\’t really mention anything about animation, but I\’d imagine the ability to have at least some simple animation would add a lot of fun to the experience.I really hope someone takes this idea and runs with it. I\’m already excited!Eric Poulton

    Like

  6. It is, as others have said, a great idea.I tend to be classicist when it comes to defining what is a game and what is a toy. It\’s just one of those things. \’Game\’ as a phrase always conjures an image of some kind of struggle or competition, whereas \’toy\’ always conjures an image of creativity and collaboration. The thing I take issue with is the notion that a piece of entertaining software gets labelled \’just\’ a toy, intimating that a classical game is therefore better. I don\’t accept that. A good few game designers eventually move into becoming more like toy designers (like Will Wright with Spore, for instance), such that I think we do not need to make such hierarchical evaluations. Toys, games, it\’s all good.

    Like

  7. See, what I need is programmer who can make all these world changing ideas come to life…:-) I want a Budweiser-style poster that says something like \”Games cannot live on art and design alone.\” There must also be code. take careDanc.

    Like

  8. Waldgeist says

    Wow, that\’s a fantastic concept. As others already stated, I would love to see this in action.

    Like

  9. Danc,any luck finding a programmer to do this? I\’ve been thinking a lot about this idea – primarily outside of game design at this point. Is this something Anark is doing? Any ideas of anyone doing anything like this? It needs to be built! :)Regards,Rachel(not a programmer – a UX junkie)

    Like

  10. Hi Rachel,I have not yet found a programmer who is willing to take this one on. *grin* It is a life long problem for me and my wacky ideas. In the end, most skilled creative individual prefers to A) work on their own ideas or B) at least get paid if they have to work on someone elses. I have to admit that I\’m as guilty of this as anyone. There are a number of other companies out there working on various forms of Web 2.0 style drawing programs. All of them seem happy to proclaim that \”Hey, you can do drawing programs on the web.\” It reminds me of early demos that put up a text box that you could type into. Very exciting as a technical demonstration, but not very useful. The world of graphical software on the web is as vast and rich as the blogs, wikis, online order forms and more that emerged from those inital primitive text boxes. The trick is getting someone to experiment with these fun concepts and actually build something. Words are a relatively weak method of building enthuasiasm for a new project. Hands on demonstrations are the real key in the majority of the projects I\’ve found support for. take careDanc.

    Like

  11. Nice, I really like this idea. Maybe I will be the one to make it happen. 🙂 I\’m sure if I ever do end up doing something like this it will look a bit different, but the underlying idea is really great!Thank you. 😀

    Like

  12. Hi Danc, I love your idea,it is one of the web things that still remain unntapped.I\’ve hired a team of 10 developers to work on it on a budget. Would you be interested in helping me in coordinating them? I\’m seeking for a collaboration with you. Many thanks in advance.Albertoa.armandi [at] adwearlife.com

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s