Tutorial Mode

Cheryl Platz (writer of the excellent blog twenty-sided woman which you should all be reading on a regular basis WHY DON’T YOU GET ON THAT) wrote a post today describing the antiquated state of iconography in user interfaces that got me into a UX sort of mindset. She describes how Windows is moving away from such abstracts, preferring more straightforward tiles containing text descriptions. But I started thinking about another source of iconographic inspiration that I think she and the rest of you might find interesting…

Even in the most modern of word processors and spreadsheet editors, most of the button interaction is represented by vague analog metaphors. The last time I interacted with a floppy disk, I was using them as coasters for a Hackers-themed movie night! (long story short, you missed out) And as Cheryl mentioned, clipboards aren’t an obvious analogy for applying duplicated information, so why did it become the standard for something as frequently evoked as “Paste”? Microsoft’s solution, as outlined in their previews for Windows 8’s Metro UI, is to replace those tiny icons with large, touchable rectangles detailing the contents of each application and service. Go ahead and watch the video:

Not too shabby! Metro looks very touch control-friendly and the icons clearly communicate their purpose. But I want to take another brief look at the tiny icons that have served us in the pre-post-PC world and think of another way to utilize them:

A video game-style tutorial mode.

Video games have been trying to deal with relating digital actions to real world analogs for at least as long as productivity applications. In fact, games have it a lot tougher: while you may perform tasks somewhat resembling saving and cut/copy/pasting in everyday life, you’re far less likely to find yourself, say, controlling the actions of a hapless family of avatars as they seek out lives and careers.

A game has to get the player familiar with a wholly alien interface in a very short period of time if it wants to keep said player engaged. As technology advances and games increase their capabilities, control schemes necessarily become more complex. Soon a large portion of the screen is devoted to complicated button layouts, and there isn’t always space for textual descriptions explaining the functions. Let’s look at this screenshot from The Sims 2 (click to enlarge):

(The Sims makes for a good comparison since it, like a word processor with a toolbar, is a largely mouse-driven interface)

See that dial on the bottom-left corner? It’s loaded to the brim with icons attempting to communicate functionality with simple pictographs. And you know what? It’s not always succeeding. From my past experiences with other user interfaces and societal conventions, I can probably figure out a few of these buttons; the plus/minus and curved arrow look like they could be related to camera controls, the sun/leaf/snowflake/tulip pictures presumably correspond to the seasons. Random clicking will probably yield more information about the other controls.

But what if I’m not the type of game player that wants to take risks by random clicking? Or going back to the original point, what if I’ve just finished typing up my very first Microsoft Word document, and I don’t inherently know that a picture of thirty year-old data storage technology that most computers don’t even support anymore represents the action of saving my work? Am I expected to click wantonly until the desired result is obtained?

How, then, do video games overcome this problem? Since their inception, most games come with instruction manuals detailing how to perform all the actions you need to get started, but who in the Word or Sims scenarios really reads a manual? No, the real way for a game to instruct on these behaviors is with a guided, in-game tutorial. Almost every modern game has the ubiquitous “tutorial mode”, handholding the player as it painstakingly describes each essential button and refusing to proceed until we apply their instructions and repeat the stated actions. The game teaches you what a mouse click does, then patiently waits for you to click that mouse button.

What would users think if Microsoft Word 2012 came with a tutorial mode? Before you write your Great American Novel, out comes Clippy with a mandatory walkthrough describing the functions of all the most commonly-used buttons on the toolbar. Users would painstakingly be guided through the concepts of copying and pasting, of right-justification, of embedding hyperlinks. Every person that ever used Word would have this shared educational experience (unskippable, of course), giving all users a much-improved baseline of knowledge and self-sufficiency.

At this point, it wouldn’t matter what we put on the icons. The floppy disk becomes no more useful a graphical representation than a National Geographic photo of a panda chewing on bamboo. It would be a wonderful opportunity to immediately phase out all this outmoded imagery and replace it with more interesting and timeless abstractions. Since everyone did the tutorial, the panda button would be a self-evident representation of saving our work. Clippy said so in the walkthrough. By applying a button’s function within the context of the action, we effectively remove the abstractness from the abstraction.

It should be noted that this is actually a terrible idea. But if some up-and-coming developer implemented something like this in his indie word processor, I’d certainly give the tutorial level a go.

[discuss on the forum]

Square One (the state of starting anew, not the hit public broadcasting television series)

I haven’t been drawing.

There was a time, oh so long ago, when I thought to myself, “Self, you need to create something people will enjoy. This something should come in the form of a webcomic that doesn’t involve the intellectual property of others.”

And so I promptly screwed around and stopped working on everything comic-related. Life got in the way, but really I let life take over and changed my priorities. I got a better job, moved back to the part of California that doesn’t suck, and threw myself into activities directly related to paying bills and advancing career.

Through all this, I kept it in my mind that I wanted to get back to comics, that I wanted to make my big splash in the webcomic world with something I could truly call my own. I’m finally at a point where I feel like I can start to work toward these goals.

Too bad I forgot to keep drawing during all that downtime!

I feel like I’ve got a horrible case of the stupid fingers. I would never have claimed to be a great artist (that takes more formal art education, generally), but my lack of practice means my drawings today look not all that different from my drawings five years ago, when I still wasn’t where I wanted to be talent-wise. As a result, I’m forcing myself to go through the basics, to rebuild a foundation upon which I can build something resembling decent artistry.

While browsing through various Livejournal blogs of webcomic artists I admire (not at all to try and steal their powers), I was directed toward an excellent online tool at Pose Maniacs. The site has digitally-rendered male and female models in thousands of configurations of poses, with musculature exposed to help you break down the form. Of particular interest is the thirty second randomizer, forcing you to get your gesture draw on. It’s a wonderful resource I highly recommend everyone bookmark and frequent right away (get the iPhone app while you’re at it; I love the thought of having this sort of resource wherever I go). In the interest of attempting to build discipline through public display, here are some figure drawing exercises from yesterday and today (slightly NSFW pics of naked nudeness after the break). Continue reading Square One (the state of starting anew, not the hit public broadcasting television series)

Lacy, Gently Wafting Valentines

My yearly tradition returns for another year! Like all yearly traditions ought to. Whenever I can muster up the strength to do so, I make Valentine’s Day cards for my mother and siblings to enjoy. Last year I made a batch in the style of Back to the Future. This year I decided to go with something relatively more contemporary: enjoy my Dr. Horrible’s Sing-Along Blog valentines!

If you haven’t seen Dr. Horrible yet… seriously, what’s wrong with you? Please go buy the DVD (or Blu-ray), buy the soundtrack, watch Commentary! The Musical, buy the Commentary! soundtrack… then come back here and print out the valentines and enjoy please.

[discuss]

Chocolate Chip Candy Cane Cookies

My weekly 2011 updates continue with: baking!

This Christmas season, I wanted to make a contribution moderately more interesting than my usual iTunes gift card stocking stuffers. With that in mind, I decided to invent my own recipe, because I figure everyone’s gotta have their own recipe at some point. After many batches of tinkering, I ended up with this, a recipe for chocolate chip candy cane cookies! Continue reading Chocolate Chip Candy Cane Cookies

Internet Carols (and a resolution)

Happy New Year, The Internet!

Sorry it’s been so long since my last post. And sorry for an apology that followers of my works hear all too often. A lot’s been happening in my life lately, but I hope to make up for my varied absences with my New Year’s resolution of MORE BLOG POSTS OMG

What will this result in? Hopefully more frequent updates on this blog (and other projects)! When I decided on this resolution, my first thought was to post something daily, but I have a feeling that would get rambly-cluttered and also insane, so my current goal is one blog post per week. I may not always have major projects to discuss, but at the very least I’ll keep all my faithful readers appraised of goings-on like a good blogger should.

Which brings us to my first blog post of 2011, wherein I discuss: Internet Christmas carols!

For the holiday season, Blue decided to make video Christmas carols for her favorite websites. Seeing that this was an awesome idea, I humbly offered my assistance at sprucing up the videos with vocal accompaniment and jingly bells, with iMovie providing the picture-in-picture magic. Here are our collaborative results! Continue reading Internet Carols (and a resolution)

More or less a given thing

For Week 27 of her weekly song project, Blue performed I’m A Believer by The Monkees. And so did I! In Scott Pilgrim and Ramona Flowers attire!

I even remembered most of the words! I’ll copy her credits blurb wholesale now:

Also for full credits: the image at the beginning was from Edgar Wright’s film Scott Pilgrim Vs. The World, which is on sale in DVD/Blu-ray on Tuesday. The music was from Legend of Zelda: Link to the Past. The comic itself is the AWESOMETASTIC Scott Pilgrim series by Bryan Lee O’Malley, and the pixel skull shirt was designed by Diesel Sweeties creator R. Stevens!

Also as a reminder, I made the artwork for her album, Infinity Right Now, which is totally out now!


Go buy some!

[discuss]

Infinity Right Now

Remember Blue? Of course you do! She played the webconcert live at my apartment back in September, and it was made of pure awesome. Well for the past few months, she’s been working hard on not-so-secret projects, and now all that work has come to fruition in the form of a brand new album!

In addition to having excellent songs about stuff like webcomics (including Dinosaur Comics, Questionable Content and Girly!) and Mathnet and people named John(/Jon), this album features special artwork by yours truly. The musician has been faithfully rendered in a Chrono Trigger-style sprite, which can only further enhance the already-intense levels of awesomeness this album already emanates. Here’s the cover:


(when you buy the album, you get the cover in EVEN HIGHER RESOLUTION. If that’s EVEN POSSIBLE)

Infinity Right Now is available RIGHT NOW from Blue’s Bandcamp page! In addition to the twelve official songs, there are two actually-secret bonus tracks, and if you buy during the brief pre-release period, you get a not-secret extra-bonus even-bonusier track!

Go pick it up already! And tell all your friends about it, so that they’ll pick it up and tell all their friends about it and so on! They might end up retelling you about it too. Don’t feel too bad about that, it’s statistically likely that you’ll appear more than once on the Friend Continuum.

[discuss]

Webcomics Webconcert LIVE! at Mario’s Apartment

Have I told you about Blue? I probably should have mentioned Blue sooner. Blue is the guitarist that plays over at HELLO, THE FUTURE! She sits on her dining room table and plays songs about webcomics and Mathnet and feelings into her webcam for all her fans to enjoy from the comfort of their homes. Last month she did a Webcomics Webconcert via Ustream and played live OVER THE INTERNET, and it was made of amazing!

Why am I talking about this obviously awesome Internet musicianista? Because I’ll be hosting her next Webcomics Webconcert at my apartment!

She’ll be flying to California in September to attend w00tstock (oh geez, have I not blogged about w00tstock either? I’m rapidly losing my blog cred), and while she’s in town she’ll be doing another live performance from my apartment!

“How,” you ask, “how can I ever hope to attend this epic event when I am nowhere near Mario’s apartment?!” Well it just so happens that this Webconcert will be streamed OVER THE INTERNET JUST LIKE THE OTHER ONE from my house to all of yourses!

All you need to do is jump on the Webcomics Webconcert Ustream page on Saturday, September 18th at 6pm Pacific Daylight Time. I will also have an open invitation to any of my friends that live sufficiently locally to attend, and we’ll all go get dinner after the show!

While you’re waiting for the big event, go watch Blue’s past performances and get sufficiently pumped!

[discuss]

In 3D!

Yesterday Geoff posted the following Facebook update:

Geoff - 3D Movie Remakes Facebook Post

This inspired us to come up with other titles for 3D movie remakes. A sampling:

  • Inglorious Basterds: The 3rD Reich
  • Back to the Future Part III-D
  • 2 Fast 3D Furious
  • Live 3D or Die Hard
  • 3D Men and a Baby
  • 3D0 (300)
  • 3D Ninjas
  • Independence Day – I3D:4
  • Dragon Wars: 3D War
  • The 3D Amigos
  • D3D The Mighty Ducks: “The quack attack is back Jack… IN 3D!”
  • Numb3Drs (technically a TV show, but still awesome)

Got any more?

[discuss]

HTML5 Video Playlist: A Brief Kludge

Twitter buddy @adecelle issued a challenge:

The listing in question describes how to replace an HTML5 video source in sequence; basically, it lets a single <video> tag change its movie in the course of playing the video, resulting in a YouTube-style playlist. Problem was, in the form presented on the site, there was no intuitive way to add x more videos, and the second video in the sequence would loop forever. It had been awhile since I had gotten to practice some coding, so I figured I’d give it a go.

As it turns out, this was a difficult nut to crack. My repeated Google searches on how to construct an HTML5 video playlist yielded a handful of code examples from various sources, but these examples were apparently written completely off the cuff and were more broken than the Apple code. Eventually I had to cobble snippets from multiple sources to make a functional output with the desired capabilities:


<script type="text/javascript">

function myEndedListener(){
var myVideo = document.getElementsByTagName(‘video’)[0];
myVideo.addEventListener(‘ended’,myNewSrc,false);
}

function myNewSrc() {
var myVideo = document.getElementsByTagName(‘video’)[0];
myVideo.src=”videoplaylisttest2.m4v”;
myVideo.removeEventListener(‘ended’,myNewSrc,false);
myVideo.load();
myVideo.play();
myVideo.addEventListener(‘ended’,myNewSrc2,false);
}

function myNewSrc2() {
var myVideo = document.getElementsByTagName(‘video’)[0];
myVideo.src=”videoplaylisttest3.m4v”;
myVideo.removeEventListener(‘ended’,myNewSrc2,false);
myVideo.load();
myVideo.play();
myVideo.addEventListener(‘ended’,myNewSrc3,false);
}

function myNewSrc3() {
var myVideo = document.getElementsByTagName(‘video’)[0];
myVideo.src=”videoplaylisttest4.m4v”;
myVideo.removeEventListener(‘ended’,myNewSrc3,false);
myVideo.load();
myVideo.play();
}

</script>

<video controls src=”videoplaylisttest1.m4v”>
</video>

Example site (H.264 videos in MP4 containers; YMMV)

I was particularly proud of finding the bug on the Apple developer page: the event listener keeping tabs on the ‘ended’ state of video playback (when the video reaches its end) was reloading the same video over and over again when playback concluded. It was on the Opera Developer Community page that I found the solution in removeEventListener() (their multiple video example, for the record, was fairly unusable as well, but I appreciate their help in coming up with a solution).

The end result is messy code, to be certain. I’m fairly confident that someone more technically savvy and JavaScript-fluent could come up with a cleaner solution, but as Paul told me, the important thing is that it fulfills the function (tested on Safari 4.0.5 for Mac OS X Snow Leopard and MobileSafari 3.1.3 for iPhone 3GS; the initial autoplay doesn’t work on the iPhone but the sequential JavaScript fu works like a charm on both).

“Why post all this JavaScript/HTML5 stuff on your sporadically-updated blog about video games and stuff?”, I hear you ask? Simply put, I wanted to add something to the search results pool in the hope that someone else can stumble upon this tiny corner of the Internet and benefit from all this legwork. Good luck, wayward e-vagrant!

[discuss]