Archcomix by Dan Archer

This page is to catalog my John S. Knight Journalism Fellowship at Stanford University, which I started in September. Originally created as a program for veteran journalists and their Pulitzer Prize-winning ilk in the industry, the year-long program was rejigged a year ago to put the emphasis on innovation in bringing news stories to a wider, more tech-savvy audience. Read more about the program here and my new cohort here. My project? To design a visual online interface (think webcomic 2.0) using sequential panels to create an interactive multimedia reading experience. This is much a sounding-board as it as public journal of sorts, so feel free to chip in or comment on anything below.

NB As of Nov 16, I’m moving all my Knight Project updates here This is a temporary workaround until I sync my Knight Project WordPress category page with this one, to save me having to add to the same static page, as opposed to entering multiple posts.

——

Nov 2:

Bit the bullet and finally sat down mano a mano with Adobe Flash builder. I know, I know, only last week I was bemoaning learning yet another computing language, but after seeing what it can do in my CS448b Data Viz class, I was intrigued. Plus it looks like more and more interactive animations are dependent on the flash coding that FB powers through its Flex framework. So apparently I’m running the Eclipse framework, using Flex in Flash Builder using the Flare library. All I know is that yesterday I managed to code several circles into spinning, twisting and resizing along various axises (axii?), and it made me surprisingly happy. Just the small matter of piping in some data now and seeing how intelligible I can make it. Fingers crossed. That evening Adam Johnson and I presented Pika-Don to the Stanford Graphic Narrative Project (aka the acronym-tastic GNARP), which went well. A small but engaged group, who were amazed to hear about just how many steps we took our intrepid SGP students through to tell Tsutomu Yamaguchi’s story in graphic novel format. More on our launch party from last week here:

———

Nov 1:

Urgh, it’s Nov already? Time to embrace week 7 with open arms. Excellent office hours session with Snir, our HCI TA, who not only helped me make sense of the JQtouchery that had me pulling my hair out on Friday, but also told me about Imageflow, the javascript code that I’ve plugged my panels into to create prototype #2. Check it out here. Now if someone could just tell me how to activate a manual swipe in JQtouch as opposed to linking the slide animation to graybutton div, that would be great.

—–

Oct 29:

Just when I thought there wasn’t any more room in this head of mine for new computing language, in walks JQtouch, the apparently “simple, easy-to-use” code for modelling iphone mobile prototypes. All I can say is that I wholeheartedly embraced the “fail early” concept of Stanford’s d.school and managed to put together several abortive prototypes before finally getting the hang of it (or so I thought) around 7pm,  after 3 hours of head-banging. In a desk, as opposed to an AC/DC kind of way.

—–

Oct 28:

Met with fellow Knight Fellow Sahar Ghazi, Senior News Editor at Dawn News, the only English-language news channel in Pakistan. Over the course of 2 hours Sahar condensed a vast swath of Pakistan’s history into a intricately complicated, yet somehow intelligible map of the country’s leaders, conflicts and contradictions, which I’ll be using for content when it comes to filling out my next prototype.

——-

Oct 27: Great meeting with Gabriella Giannachi, one of the members of the Cloudpad team. For more on the Cloudpad project in reference to a specific project of theirs called Rider Spoke, go here. The project builds on Gabriella’s background in performance in the creation of an interactive artwork archive that allows users to mix multimedia performances on a single web page. We talked about the intersection between our projects, as well as shared a lot of links to other multimedia pioneers, including:

• Veteran Multimedia Activist Lynn Hershmann’s W.A.R (Women Art Revolution) project, which uses graphic media (animation/illustration/film) to foster dialogue on historical representation from the 60s-present
• Design and the Elastic Mind, an interactive website based on a 2008 MOMA exhibition with an interface that expands in real-time to reveal different visual layers of content.
• Sosolimted, a design/data viz/performance collective whose video is posted on the archcomix homepage today

——–

Oct 26:

Skype seminar/Q&A with the students at Washington & Jefferson College about my work and their reading of Archcomix 2 (Red). We touched on the use of B/W over colour (danger of ‘pretty’ artwork undermining the real emphasis, which is always on narrative); why non-fiction/social justice (greater connection/more reader engagement with true stories); the role of partisan politics vs journalistic objectivity; and closer readings of certain stories (Beggars, the other 9/11). Thanks to Brianne for sorting it out – and welcome to any visitors who are now regular Archcomix.com visitors.

——-

Oct 25:

A positive meeting with Tristan Harris, CEO of Apture, in their downtown HQ today. We discussed the importance of triggers and persuasive technology, as researched by BJ Fogg at Stanford (on my list of folks to meet this year), as well as the important difference between a didactic information experience and an entertaining one. (The former involves active learning on the user’s part and a willingness to engage and participate at a cognitive level; the latter, more of a passive, filmic/TV-based experience that is more enjoyable in the moment of data transmission, but leads to poor long-term knowledge retention). Tristan was kind enough to show me how to incorporate the Apture code into my site, so if you check out this here link and hover over the Zelaya photo above the central start panel you’ll see the zooming pop up that the company’s famous for. Also, for those of you who checked out the first prototype on Friday, you’ll see I’ve taken feedback on board and added a semi-transparent background to group two of the strands together. Here’s a screenshot (left)  for those of you don’t know what I mean and aren’t intrepid enough to click the link.

——

Oct 21:

A productive brainstorming session with some of the other Knights: Hugo, Seda, Jigar, Adriano and Sahar. Helpful comments mainly focused around the navigational issues in the prototype, and what most users have brought up as an intimidating amount of white space. Best ideas from the session:

• Incorporating maps or the language of street signs in order to facilitate a new user’s sense of location in the page
• Test out a single panel interface (much like the iphone comic app) through which the user can then tap left right up down etc to navigate through the story
• Add in a background layer that groups together whole sections of the comics map, allowing the user to see the main strands of information in the story

HCI Lab this afternoon was good: we covered Jquery’s iphone mock-up software, which we’re using for our prototype (more prototypes round here than you can shake a stick at these days), as well as introductory javascript, which almost worked for me until I got my ” confused with my ‘. Ah, the sweet pedantry of coding.

——

Oct 20:

Another mini-hiatus from these updates, granted, but a productive one: I’m proud to announce that the first working iteration of my visual news interface is now up online under the name of Newspanels. It’s very early days now, but the streaming video is holding up well, as are the audio popups and the additional research links to Wikipedia and assorted other sites. I’ve tried it out on my iphone too, and it holds up well. The big test will be on the ipad, given the opportunities for hand scrolling from panel to panel as opposed to being bound by the scroll bar. Though, to give credit where it’s due, macbook pro users can easily get by using the multi-directional trackpad. One small point: I’d use Safari instead of Firefox if you’re on a mac, as FF tends to generate odd boxes around some of the pop-up links. Play around with it and send me your comments! This is the perfect chance for you to become active users and help shape it into a more efficient, engaging news reading tool.

In other news, the Honduran Coup iphone app is almost finished – just a few text tweaks and it’ll be headed for the itunes store. Massive shout out to Chris DeLeon for his help with everything.

I’m also delighted to say that my Human-Computer Interaction team has been busy working on our mobile news app too, which has now undergone half a dozen iterations, including a digital prototype using ForeUI digital prototyping software. Here’s a screenshot of an early version, since revised (left). More on how it works soon.

Last but not least, the Data Viz course has really heated up now that we’ve been introduced to specific software and gently nudged out of the nest of using pre-packaged tools (Many Eyes, anyone?). So it’s time to get to grips with Prefuse, Tableau (maybe not, since it’s Windows only) and Flex/Flashbuilder. Actionscript mayhem awaits. I’ll keep you posted on how I get on. In the meantime, here’s an excellent news visualization tool to check out called Newsmap

Oct 8:

I’ve been pointed towards so many great links this week, it’s been hard to keep up. Here are a selection of the best in all things data viz, information comms and web-based social justice/corp-gov’t accountability apps:

http://sunlightfoundation.com/resources/ – resources fighting for corporate accountability to track influence and expenditure inside Washington.

http://storyofstuff.com/

and the most blockbusting of all, Collapsus – a mashed-up production from the makers of Waking Life and the Scanner Darkly rotoscoped animation, which tells a fictionalised story about environmental breakdowns through an innovative 3-part sliding screen interface: live-action happens in the central panel, fake news reports in the right, and a global GPS systems denotes where the action’s taking place on the left. At last! A fresh approach to raising awareness of news topics in an engaging and – dare I say it- entertaining way.

———

Oct 3:

Dug up some very interesting uses of comics by none other than the Federal Reserve - check out these graphic explainer stories on how the Fed works, amongst other things. Thanks to Eddie Segel for the nod.

Sept 30:

Another perfect opportunity to fuse my Knight project with my human computer interaction class came about this week via our 2nd assignment. Silicon Valley being the tiny microcosm that it is, our first assignment ended up being covered by Tech Crunch magazine after one HCI student ended up doing his user testing on a Tech Crunch writer waiting in line at a local CVS in Palo Alto. Said writer was later chided for his article’s conspicuous criticism of paper prototyping by the 100s of commentators. This week’s goal? To observe an activity based on one of the three key words that would define the scope of our future projects (Change, Glance and Time). I went with “Glance”, conspicuously extrapolating it into the context of my comics news app, which is still in the works. It was really interesting to observe the different mobile news consumption habits of my 3 users (thanks to Ryan, Jenka and Di)  and find out about their news gathering routines: what was working for them, what they found inconvenient, what they would like to see more of, etc. So now I’m piecing their feedback together to think of what the idea app needs to incorporate to better serve their needs. One big plus was the consistently positive reaction of high visual content, and preview photo stories in particular as a way of skimming the essence of a story. The average time they spent getting their news on the go ranged from 5-10 mins, the majority of it being through native apps (AP, WSJ, Reuters, Guardian all firm favourites) though Google News was also popular. Big setbacks? Not having enough personalization options to filter out unwanted content, loading speed taking too long, links not being obvious, not having enough links, overcluttered interface, interface design not being intuitive enough. Here’s an interesting link I dug up on ipad news apps courtesy of Nieman Lab. Not to mention this one on the future of touch screen interfaces. Or this one from TED (couple of years old now, but still relevant) on interface-free touch screen monitors (go to 2:40 for the real meat of the clip). For now, I best get back to actually submitting my assignment. More later. In the meantime, if you have any mobile news app comments or suggestions, email me or leave me a comment!

Sept 27:

A temporary pause from the Knight Project at the end of last week to focus on the Borderland comics project, which is now within 12 hours of the deadline and just over 75% funded. More about it on the homepage. As for my project, today’s trinket of online visual journalism comes courtesy of Storify. Storify essentially lets you piece together news stories from different social media/online sources and then publish them as a “story” with its own URL. See left for a screen shot and click here for a test story I put together in 2 mins on human trafficking. The site’s very new – in fact the beta version (invite only, so sign up here) only just launched a few hours ago at Tech Crunch Disrupt, the tech convention on at the moment in SFO. First thoughts? Great idea, but the execution could be more user friendly – what about an infinitely scrollable horizontal scroll, in addition to the straight vertical one we see everywhere online?

Also, in another piece of eerie Silicon Valley/Stanford synchronicity, here is the paper prototype from my Human-Computer Interaction class assignment this week: designing a mobile device that lets you skim off news stories from different feeds, apps etc and then store them for later reading/hacking in the app’s native portal. Click for a larger view.

——

Sept 21:

Suddenly I see how the Knight is going to kickstart my project in unexpected ways. While weaving through the turnstiles at Green library over the weekend I came across a flyer for something called Cloudpad, which touted itself as an “online editor for media mashups”. Intrigued, I saw they were in fact running a prototype experiment at Green library on Sept 20 and 21, so I came back today and had the chance to play around with the interface. After only a few clicks, I couldn’t believe how similar it was to my proposed Knight project (see left). Basically, it’s the drag and drop interface I’ve been working on with Alex – you create “trajectories” using files from a preset video library and drop them onto a blank HTML5 page, allowing for synchronised and simultaneous playback. The footage was based around a series of interviews and footage taken from various different riders, hence the enigmatic title: “Riders Have Spoken”.

Watching the videos as I experimented with dropping them around the different areas on my screen, I couldn’t believe how similar our mutual approaches were: it turns out the team, who are predominantly based at the University of Nottingham and Exeter in the UK, are focusing on user-generated content uploads in the future, together with a sharing function across social media. The only significant difference, of course, is the element of narrative structure and how users would navigate what might quickly become a cluttered screen with a dozen different videos all playing at once. But the fact that the code is open source and up online means that I can get to grips with their interface and see how I might hack it for my project. Very exciting! For more on the project, visit Professor Gabriella Giannachi’s blog, Nottingham University’s Mixed Reality Lab, the Integrated Project of Pervasive Games or if you’re in the UK, even better – you can head to the Digital Futures conference in October.

Sept 19:

A very decent pointer from Professor Geri Migielicz in the Communication Dept led me to VUVOX, an interactive site that lets you create your own mashed up multimedia slideshows. You can embed audio, add video, and stick them together with captions to create an infinitely scrollable horizontal presentation that never shows any sign of slowing down or freezing, despite the amount of bandwidth it must be chewing up. Here’s a great example of what it can do:

Clearly this is taking media in the right direction, but it’s still bound by the constraints of chronological/linear narrative, and the only available choice to the reader is whether or not to watch the videos or skip past them they scroll through. No option to annotate or further hack content, though there are comment fields below. So one step up from Prezi, but still very much in the passive presentation camp.

Sept 16:

Been using the freeware HTML Coda program to experiment with a very early prototype of the project, plus have registered a new domain to preview the pages I’m currently working on. I’ll reveal its name once I’ve figured out how to amend my code, which currently only works because the images are sitting on my desktop. I have to admit I got very excited when I saw the page for the first time, even if most of the panels are placeholders. Here’s a bizarrely pixelated screengrab to the left (click on the image for a crystal clear full-page view). So what’s going on? The idea is that the narrative will read in multiple directions, allowing the user to scroll through in any order. What’s more, clicking on some panels will bring up new content, whether it’s a pop up box (a la Apture), like the example you can see under the first panel, or a video that will play like the youtube player that’s embedded in there. Hopefully this will give you, devoted blog reader, more of an idea of what I’ve been talking about. Any comments welcome!

Sept 13:

Interesting use of 3d graphics in this video from the NYTimes on a journalist’s escape from the Taliban in Afghanistan. Good discussion today about my project made me realize how important user functionality will be – particular the role of the user in creating their own personalized news experience. Most likely inspired by Sat’s visit to the Technocraft exhibition (see today’s home page for more). Also had a good chat with Daryl Cagle about editorial cartooning, which I’ll write up tomorrow. Now just need to decide on my final course choices for the semester. Been playing with very stripped down HTML code to put together a working prototype of the project – should be up by the end of the week!

Sept 9:

A great day at the D.School bootcamp (see today’s post for more), where I crossed paths with Danylo Berko, Programmer at the NYTimes, who I talked to about the challenges of adapting my comics platform to fit the NYT’s web template. Also brought up the idea of analytics and how visuals can influence a reader’s time onsite. The met with Alex Easton to talk about the javascript connundrum (see Aug 11 post, below) and how I think I’ve found a way around leaning on it too heavily. The answer? HTML 5. Though I might stick to standard HTML for the time being – literally placing images using div tags in a totally stripped down interface, including invisible/visible prompts to add extra layers (like comments for each panel) and forcing the reader to scroll around the page themselves. None of this animated javascript business (see Prezi iteration below – slick, but not enough usability). A very stripped down prototype should be up and running within 24 hours. Also, the first Archcomix iphone app is 90% complete! Ironing out some of the remaining kinks, should be live and submitted to the app store by the end of next week. Let’s hope it doesn’t go the way of Mark Fiore’s app…

——-

Sept 7:

After a brief hiatus, I think I’ve come up with a workaround for the javascript problem Alex and I ran into when we brainstormed how to build this online comics platform. Fundamentally, it’s the links to the source material that I’m more concerned about, so I’m happy to jettison the idea of a scrolling flash-style pan if it means we can build the template in cleaner HTML code. Using this excellent online resource at www.image-maps.com, I’ve posted a test run of 3 panels below from an old strip that ran in December over at Religion Dispatches. The difference? Hover over the 2012 billboard in the first panel, the caption boxes in the 2nd panel or the speech balloon in the third and you should get a clickable link to the sources. Now I just need to work out how to create a pop up new window that sits snugly within the parent page, much like Apture‘s setup. (Click on that link to see what I mean). Any ideas? Apologies for it being so small – The comicpress template is about as flexible as an arthritic octogenarian’s lower back.

——-
Aug 23: Over the weekend I put together the first stages of an embryonic animation project, which I hope to premiere on the online multimedia platform that I’m designing for my Knight Project. My goal is to create a 3-4 minute long animation chronicling the day in the life of an Unmanned Aerial Vehicle (UAV, or drone to you and me) pilot operating out of the Creech Airforce Base in Nevada. The thinking behind the project is to add more of a narrative element to the standard reporting that focuses more on the technological superiority of the military machine as opposed to the ethics involved in its operations. So far I’ve shot 5:30mins of intro scene footage on a Sony Digital Handycam VCR DX2000, which I’ll edit down to 30secs in iMovie. (Needless to say, after working on only a handful of iMovie projects, I cannot wait to learn my way around FinalCut). 30 secs should be the perfect amount of time to experiment with what sort of animation technique I’ll be using. The choices so far are:

1. Old-fashioned rotoscoping: ie. import the video into flash and trace over every single frame. Similar to what the vast team of animators did for the celluloid adaptation of A Scanner Darkly. Cons: most time-consuming. The SD animators had their own proprietary software and still went way over deadline (and budget).

2.Waltz with Bashir-esque Flash cut-up: In the words of Yoni Goodman, Director of Animation for W with B:

“‘I’d like to state that the movie has absolutely zero percent rotoscope. Every time one of my animators hears or reads about someone on the other side of the planet saying the movie was in rotoscope, I get a phone call, regardless of the hours.’

So what did they use? A Flash-based technique of subdividing every moving element on the page into a massive group of composite parts (or symbols/movieclips, to Flash users), then moving them from frame to frame instead of re-drawing everything each time. Read an interview with Goodman here.

See video below for what the final product looked like:

3. A combination of both, which is probably the most likely. Any other suggestions, let me know!

——

Aug 19: Went last night to IDEO Palo Alto (a local design consultancy firm with strong ties to Stanford’s D.school) for a lecture focused on storytelling in the news and ways to incorporate social justice issues into popular media. Neal Baer, Executive producer of ER and Law and Order SVU, told us that some 58m viewers watch one show on cable each week and argued that by inserting polemical issues into narratives viewers would be able to see interesting characters grapple with the contrasting angles in a way that was both emotionally and intellectually engaging. Baer also presented statistical evidence that viewers learned about specific medical processes from watching episodes from ER and some had even consulted their Doctor after hearing about the risks of contracting cervical cancer in one episode. Question is, what level of activism and involvement should creators be aiming at soliciting from their audience? Do we want conversations around the water cooler, or calls to elected representatives? Baer addressed this issue by mentioning his latest project, Actionlab.org, though it’s clearly early days there with only a placeholder domain currently up at that address. One question I had for him after the talk was how lone creators who aren’t affiliated to major networks should go about generating that sort of audience interest – possibly by allying with other organizations to boost their profiles – but we ended up talking more about the comics form and his graphic novel in progress. Any ideas? Some interesting links that were mentioned: The Enough Project to end Genocide in Africa, and Take Part, an online multimedia community for activists.

——-

Aug 12: Scott Doorley from Stanford’s D.school had some great tips and links to share today, the first being a fantastic Manga Newspaper that’s apparently been running in Japan for a while. The aim of the paper is to bring news stories to younger readers via comics, and from what I can see the stories cover a wide range of news commentary from around the world. Pity there’s not an english language version – only the preview panels that ran in Wired seem to be anglo-friendly.

Here’s Wired’s scoop, as well as a link to the site and the google translate english version of the homepage. We’ll see if they’re interested in running the Japanese translation of the Honduran Coup comic.

Second was this gem of a website, Prezi.com, which essentially replicates the actionscript Flash template I’ve been experimenting with for my webcomic format. The main goal was to collapse the idea of linear/chronological textual description of events, to give readers full rein to explore narratives in a simultaneous/open order. See below for my working prototype for the Honduran Coup. Thoughts? You’ll need to hit the zoom out button on the right first – hitting the play button will only take you through in a set order.

————

Aug 11: Came across a winning entry for the Knight News Challenge, “The Cartoonist”. I’ll let the creators, Ian Bogost and Michael Mateas, give you the elevator pitch themselves. (See below for video). The project has picked up a lot of press for its goal of using editorial cartoons to encourage readers to drill down into news stories and experiment with creating interactive media of their own.

I’ve been experimenting with a zooming online comics template powered by Flash, but am finding it pretty clunky to manage content with. Not to mention the small matter of Flash’s caustically allergic reaction to most PDAs, which are critical to getting the final app on. Time for an introduction to Javascript.

Also, this trailer of a CGI movie doing the rounds at the Shanghai Global Expo 2010 is interesting for its innovative use of state of the art 3D graphics to tell Polish history. Created by Platige Image animators, directed by Tomek Bagiński.