This page requires that Javascript be enabled.
A lot of this isn't going to make sense unless both Flash Player 9 and Javascript are available and working in your browser.
If this isn't possible for you, here is a list of the comic panels content contained herein.
Welcome to the 'Implied Interaction' model - MK.1
Hi, welcome to my research.
If you'd likesome help getting around, please click the small grey panels below this one.
On theother hand, ifyou'd like tostart exploring, click that little panel at the top right of thescreen.
Navigation Walkthrough
Welcome to the help section.
This section will help you get about in this interface.
The first thingyou need to know ishow to move around the comic strips, so click this panel tomove it to the center of the screen.
All panels inthe main area act this way.* Try it! Click on this or another panel which is not presently in the center of the screen.
Think of thescreen as a window that you can move around the comicstrips in thisway.
Right! Next is zooming.
Zooming iscontrolled byeither the mouse scroll-wheel* orby the up and downarrow keys on yourkeyboard.
Zooming allowsyou to adjust thesize of the strips tosuit your ownpreference.
By zooming all the way out,lots of panels can be viewed at once and navigating quicklythrough a strip becomespossible.
As you may have already deduced, grey panels are links to other areas.
If you like, clickthe one below to return to the welcome strip.
Hovering overthese grey panellinks displays asmall note which identifies the links target.
Now you may have noticed those small panels in the upper right corner.*
* and that there are now 2 panels there rather than the one that was there before
That's a breadcrumb trail
When you follow a grey link panel fromone strip to another you'll add anentry to the breadcrumb trail
clicking the breadcrumb panelswill take you back to where you werebefore you followedthe link
There is alwaysone entry occupyingthe top slot in the breadcrumb trail*
* and it looks a like a little version of this one
... and clicking it will always take you tothe interface hub*
* unless you're looking at a resource page
Some panelswill feature blue underlined textwhich look likestandard HTML hyperlinks.*
* as that's exactly what they are
clicking this textwill take you to a resource page associated with the linked text.
Mostlythis runs a search onthe linked keyword or phrase.
A searchpresents a list resource materialand comic panels containinginformationabout thatkeyword orphrase
When viewinga resource pagethe breadcrumblist will have only entry.*
* still looking a like a little version of this one
This will always return you to the comic strips at the point at which you left.
That's pretty much it.
Like Jenifer Tidwell*I don't believe an innately intuative interface is possible
And, although allthis may seem like alot to take in, it's really pretty simple.
At least, once you've been using it for afew minutes.
Development Report: Round 1 (21/10/06 to 19/08/07)
Development Report
From the outset, this project was intendedto produce an application
Early on* Irealized that the subject of this application shouldbe the researchitself.
Despite that ittook a while* for any work to begin, you see ...
By attempting to see the big picture in onehit and imagine how this application mightlook ...
I was only confusing myself*
* which is how these things always seem to start for me
... not to mention breaking one of the most fundamentalrule of modernistdesign* ...
* or architecture at least.
form follows function!*
* Also how I've tried to approach the visual styling of these strips
So I set about designing the data structure and a basic framework which the appication could bebased on.
Working from specifics and designing one piece at a time ...
The barebone web application was the best part of functionally complete in around three months*
But it wasn'tpretty and didn't contain anything beyond notes around my theoreticalpostition.
I'd recently* hadthe idea that I could recreate some of the prime reasons for undertaking this lineof research as comic strips
... partly assomething forme to practicecreating comics with.
As they tendto be a little dull without a subject*
* As some of the stuff I would later present would demonstrate (April 11th Practice review)
... and partly asa way of providing a main body of work for the web applicationto serve.
So, goinga bitfurther
... I reasoned thatif the applicationis to house this body of research
... as well as be an example of it
... that this could take the form of a web-comic
as this would exploit some of the using the persuasive power of comics which both Scott McCloud* ...
... and Kevin Cheng* talk about.
By this point*in the project, I was finishing off my the first draft of my researchproposal.
It was suggested* that I might present this proposal as a comic.
This was to be the first serious strip I had attempted of any kind of length.
Planning began*.
I began* by drawing thumbnails of how I'd like the panels to progress and notes of what I wanted themto say**
Originally Ithumbnailed out the planning and theethics sections as well.
This quickly proved a little ambitious
timescales dictated that I needed to concentrate onthe research methods section dropping the others.
By mid April* the research proposalstrip was more orless complete.
This strip took nearly a month to turn out 50-or-so panels*.
* by way of a comparison, this strip has over 100 panels
That was, and is, waaaaaaaay too time consuming.
My working method has developed alot sincethen.
... and presently*I can producearound 15 panelsan hour**.
After concludingwork on the research proposal stage of the overall project...
... I lucked upon* the web interface which originally suggested...
... that maybe the infinite canvas would be a way forward.
From this early stage the idea to have the strips described by anXML blob
... which wouldhold all dialogue and a certain amountof panel descriptiondata
... was pretty well formed.
although thespecifics of how much panel data has goneinto the XML at anyone point haschanged,
... this basic arcitectural idea has worked out really well.
Initial concerns* for this interface included ...
(i) That the XML blob panel definitionapproach would be too ambitious*
*ambitious in terms of the project timeframe
(ii) That the amount of data the interface would need to load would be too large*
*and the resultant interface would be too unwieldy
(ii) That the amount of data the interface would need to load would be too large*
*and the resultant interface would be too unwieldy
(iii) That I had nostrong idea for howthe linkage betweensections would develop*.
* Finally resolved this as of 30/09/07.
Flash quickly* became an obvious choice as it is:
(i) A webtechnology and so would work with the web applcation.
(ii) A visual development environment which allows the easy creation of images
...in a way that other platforms like Java or PHP don't*.
*Not to suggest this isn't possible with Java or PHP, just much more laborious
(iii) Flash is afully object oriented programming environment which offers a wide range of development possibilities.
Meaning thatas the project grew and certain ideas and directions occured ...
Flash would easily allow their exploration.
In May,* Ibegan to definehow the XML datamight look.
Once the initial data structure was codified it became much easier tobegin development.
This began with the construction of some Flash Actionscript XML parsing classes.
Once the initial data structure had been designed, development became much easier.*
*much as was found with the backing web application
A couple ofpanels were drawn without speech bubbles to give the frameworksomething topick up.
this lead to a library of panels being developed.
... as I'd had the ideathat I should begin by re-creating the research methodsstrip with thisinterface
Each of thesepanels contain a library of speech bubbles and can optionally contain another library ofprops.
Like this one ...
... Or this one
and even this one
So, all the text and these visual details are all specified in the XML blob.
... as well as which panel is required ...
... and wherein the strip that panelsits
Between May and mid June this structure was built upon until the strip-interface was able to ...
(i) Draw panels from the XML
(ii) allow thereader to navigate around the strips by either draggingwhitespace* ...
*this is something I've removed as frustrating to use (23/8/07)
... or clicking on a panel which moves that panel to the top left*.
* changed to move to the center (21/8/07)
(iii) and allow navigation from one strip to another.
The linkingmetaphor took the form of a link buttonin the bottom right corner of a panel. *
Also at thispoint* the formattingof text and speech bubbles images was beginning to becomean issue.
Panel notes* are implemented for the first time**.
*like this one **16/06/07
By mid-June* dynamic speech bubble generation is possible
... and as everything is going so well, I decide* to get smart...
... and convert the project to Actionscript* 3.
* Flash's inbuilt programming language, version 3 is the current version availible in Flash CS3
... which proved nowhere near as easy as I thoughtit would be.
My shiny new copy of Flash CS3 had arrived.
... and I discover that Adobe have radically altered the Actionscript programming language*
* up to version 3, AS3 from now on, version 2 to be AS2 from now on
Although this new version of Flash allows the use of AS2 it seemed sensible to try and convert the interface to use AS3
... not only to be up to date
but also asAS3 corrects agood number ofAS2 syntacticalniggles
... and adds a lot of other features which I might use.
So I used upthe best part of a weeks* development time convertingto AS3.
*It was all more or less working again by 27/06/07
As the development of the research proposal strip was complete* ...
I decide to scriptand develop strips which act as write-ups of the projectso far.
the idea beingthat these will be real data for the application
and that any niggles would show up with plenty of time left to fix them.
First I complete* a comic strip about my interest in the infinte canvas.
I complete a strip about the gestalt filmmaking project and the impact this has for the overall research.
* I didn't take a note of when this strip was completed
Next* was the interface sectioning write up
* I didn't take a note of when this strip was completed
And a lot of time was swallowed by the strip which discusses the stylistic development of all these strips.
... and now* I am writing up and developing my development log.
* as of 18/08/07 (it's what you are reading now)
although allthis comic strip development has sucked up nearly a month of projecttime ...
My thoughts are collected and organised
I have a lot of data for the interface to work with, and I now know exactly how much testing and development time I have left.
I will be returningto this strip oncemore developmenthas been completed *
* it's 23/10/07 and I'm working back through the strips now.
Development Report: Round 2 (19/08/07 to 1/11/07)
so now that I'vealmost finished this itteration of these write ups *
development and experimentation will resume in a number of areas including ...
(i) The link metaphor
(ii) The strip-to-strip transitions
(iii) The infinite canvas navigational method
The first* to get some attention was the latter
Almost all of the navigational controls received a functional workover. *
* between 20/08/07 and 05/09/07
Then, after aperiod of tidyingback end code and improving some routines, * ...
* programatic routines, that is
began theintegration of the flash interface withthe underlying web application.
Important development considerationshere included:
i) Allowing the application to pass values to theinterface and socontrol the panel at which the interface starts.*
ii) Passing values from interface to application whenthe reader movesfrom a webcomic panelto a resource page.*
iii) Designing a newlink metaphor whichwould indicate it's destination to beHTML based.*
These wereall quickly satisfied. *
* all completed by 17/09/07
and byallowing meaningful navigation betweenthe interface panels and the textbased resourceinformation ...
... that prettymuch concludedall the major development!
There are a couple of points I've nothad time for.
For example, the breadcrumb list,when looking at a resource page onlyhas one entry!
... this takes thereader back to this webcomic interface at the point they left it.
Ideally, had there been more time,
... it would haveworked in exactly the same way as does inthe webcomic part.
Also, there isthe performanceissue. *
* an investigation into this began on 17/10/07
Larger webcomic strips, like this one suffer a bit when viewed on lesspowerfulcomputers.*
* What I mean is that the transitions are very jerky.
A number ofquick fixes were attempted. *
* quick, as there isn't much time left for development.
i) I tried changing all text objects from CSS format back to native Flash. *
* this didn't seem to have any effect.
ii) I removed all text from breadcrumb and grey button panels.*
* this also didn't seem to have any effect.
iii) I removed some of the more complex vector images and replaced them with bitmaps.*
The success ofthis last test lead me to believe that the webcomics are simply too complex.
They are simplyasking Flash to draw more lines that its able to cope with...
So, I brieflyattempted to limitthe number of panels displayed at any one time *
* both on and off screen.
But this caused a lotof the navigationalcode to break and was abandoned ...
As there just wasn't time left to implement it properly.
Despitethese issues, the interface is very usable,
... and ready for the reflection to begin. *
Interface Embedded Narrative
It is very difficult to overcome the ability of human perception to spot an where somethingends*
Whilst interfacedesign seeks to use meaning generated through the groupingof artefacts*
* a good example is the common placement of "new document", "open document" and "save document" in close association, to be seen in the majority of Microsoft Windows software.
Webcomicssuggest the possibility of fusing contentand control together in akind ofnarrative.
In order to prevent a certain amount of confusion, it will be essential to determine where thesenarratives stop.
Potentially thisidea of embedded narrative...
could do awaywith an old bugbearof the user-centred interface design community ...
Bet you can't guess whichone
Traditionally progression through a wizardis linear
... from step A to B to C without much room for deviation
this is at odds with the more abstract ways that humansusually work througha given task*
so to embed these stages into one view and allow narrativeto bring themtogether
... just as these panels are doing,
... is anidea withpotential
but this requires testing before its worth can be properly established ...
as anything other than an idea with potential.
Nevertheless ...
This is one of the potential directions that 'ImpliedInteraction' design could* take.
* Once again, in a project with a limited timescale it's impossible to explore everything one might want
!
'Gestalt Filmmaking'
'Gestalt filmmaking'.
Myunderstandingof how human perception workshas been improved by working with what I've come to call "Gestaltfilm".
"Gestalt film"is video in whichvisual detail isgreatly reduced,
the audio is removed,
... and the videosequence is reducedto extreme black and white.
Originally these filmswere intended an anexperiment to test thelimits of humanperception
at what levelof detail would images stopmaking sense?
Or to put it more academically...
at what pointwould the perceptual creation of meaning begin to fail?
And how couldimages being in motion rather than being static effect this?
To date this project has produced three short films
(i) The first film attempts to increase and then decrease the harshness of the visual distortions
A still from the first film
... the idea being tosee if meaning can be carried to a less comprehensibleimage
... by an earlier comprehensibleone
The result* seems to be "yes"!
To date only very informal tests have been carried out
(ii) The second film is a series of sequences edited together to form a simple narrative.
A still from one scene of the second film
The idea being to investigate firstly whether filmic edits would be visible
A still from another scene of the second film
... and secondly if sequences which would ordinarily not work next to each other* ...
* as clothes were different, and so was the time of day, and in some cases the location
... could be broughttogether in such away as to generate ameaning for theoverall film ...
which was not present in any ofthe sequences.
The second film indicates that edits are clearly visible even in highly distorted seqences
and that a narrative can be generated from wildly differing sequences of film if visual detail is reduced
Exactly the same type of perception manipulation that comics attempt. *
and as we findno difficulty conceptualising a comic panel, maybe I shouldn't be surprised we can see these filmic edits.
(iii) The third film take this experiment a stage further by adding a stop-motion filming technique.
A still from the third film
The first two films demonstrate that motion has some inherent quality
... which human perception is able to form into coherent meaning
Stop motionseemed a good way of exaggeratingand distorting motion in orderto test how easily perception is disrupted
This filmwas shot over 3 consecutive days, the totalrecording timewas 6 hours atthe rate of one frame everythree seconds.
The film was shot from only one camera postion.
... and then the detail was removed as with the earlier films
The result is extreme
A still from the third film (detail)
This filmhas also beeninformallytested* and the result is that anaudience is stillable to makesense outof it. **
* 25/9/07 at UWIC - M.A. Design session. ** Whether that be guessing what it originally was or simply 'seeing' something entirely different.
These films display the following Gestalt prinicpals
(i) Figure andground: Theobject of focus is usually obvious
(ii) Continuity: Meaning is carried between juxtaposed sequences in the first andsecond films
(iii) Similarity: In the second film, the ease at which filmic edits are understood and theway that different clips are able to be percieved as part of a whole.
(iv) Context: Overall meaning is generated bythe film which is present in no singularsequence
So how is all that of use in interface design?
Well firstly it indicates that perception will work as hard asit's made to
this is also pretty useful in context of comic book closure*
The idea thathowever much detail is ommitted or distorted, perception will always do its best to find a meaningfor it ...
... is potentially of terrific use.
In fact, as Scott McCloud has pointedout ...
The more work perception is made to do ...
the moreindividual and familiar is the resultant experience*.
Although I'msure he said it far more elloquantely than that.
Interface design academic Paul Dourish has developeded a humanist approach tointerface development. *
It's called'EmbodiedInteraction'. *
At the center of this approach is the person using the interface and engaged in the interaction.
Dourishclaims thatthe immediate environment *
* In both a physical and cultural sense.
... and past experiences of this personare vital.
Both tohow easily the interface islearnt
and how natural it feels to use.
and it is inthis space that Ibelieve the kind of Gestalt closure of comics ...
and the type of closure which these filmsseek to explore can be of use in helpingprovide this easily learnt, more naturaltype of interaction.
So whatspecifically have the 'Gestalt Films' added to the project?
Well, theyprovide an immediate way for an audienceto understandclosure
... which is a lot easier to grasp than a verbalor written descriptionalone wouldbe.
It's also been of direct benefit tothe design of this interface.
The way thatthe navigation transitions whenmoving from panelto panel, forexample.
The way thatthe navigation transitions whenmoving from panelto panel, forexample.
... was designed thatway as these films demonstrate thattransitions are easyto understand.
So ratherthan source being instantly replacedby target, *
* which can be jarring and/or confusing
We have a sequence with a start, middleand an end
Which should bemuch easier and more natural to follow. *
* after all, this is how our eyes journey across a page.
The same reasoning lies behind the inter-strip links, *
* The ones that the grey panels operate.
the fading out ofone to be replaced by another provides a sense of journey.
... which is an easy metaphor for people,as physical beings, to understand. *
And as motion seems to have these inherent properties which human perception candraw upon to help make sense of what'sgoing on
It was appropriateto bear that in mind when designing this interface
The 'Infinite Canvas' and how it may be of use.
The "Infinite Canvas" *
The "infinite canvas" concept describes webcomics as being freed of the confines of the printed page
Webcomics beingliterally comics read from the Internet, like the one you're reading now
No longer restricted by the size of the containing space
... the webcomic can progress in any direction it sees fit
even when thatis not the direction that comics have traditionally taken, after all ...
in a digitalenvironment there's no reason a 500 panel story can't be told vertically
[...] the monitor which [presently] so often acts as a page may act as a winow.
Depending onthe reader to scroll, click or drag, to navigate through the narrative.
Often using a presentation method which is a logical extension of the three panel newspaper strip cartoons. Known as a"trail"*
Trails takeadvantage of the way humans process and associate perceptual information.
Gestalt Psycologydescribes how two object placed next to each other are perceptually regardedas associated*.
... and how eachobject is easier to understand in light of it's neighbour and the whole theyform *.
The whole inthis case being both a narrative and a comic strip.
In the case of the last example, a word, then a sentence, and so on
... what Gestalt Psycology calls continuity and proximity
All based in ourability to clearly differentiate objects from backgrounds *
So 'trails'are an extensionof how we read.
which is why, if we ditch the linear trail, ...
and move to anolder, more print based model, like this block of panels
... perceptionis able to pick up the slack.
... and make sense out of what's going on.
"Trails" and the "infinite canvas" adds new weapons to comics' traditional arsenal of perception manipulatingdevices
... so how mightthese be used within a human-computer interface?
I believe theanswer is also tobe found in Gestalt Psycology
... in this case the concepts of context ...
and similarity.
Context modifies the meaning we give to an object of attention
based on ourunderstanding of itssurroundings and thesituation in which weexperience it.
so radically different meanings may be attached to the same object observed by the same person in two different contexts.
For example ...
Consider a car viewed in the context of the car show-room
this context might resultin a meaningof desire
wheras that same car speeding straight at that same person crossing a road
would be morelikely to resultin a meaning ofdanger..
this is a simplistic and extreme example
but aren't they always the best ones?
Which is literally our human habit of grouping like things together
or ofsuperimposing the properties of one concept onto another because they share a particular property
... which ishow metaphor works.
So this project shifts the contextof the "infinite canvas" from an entertaining comic bookstoryline...
to a web interface, where things generally happen in a far less linear manner
... and so the kind offreedom of the "infinite canvas" allows, seems to invite possibilitiesfor this context.*
* Perhaps similarly to the 'multiple desktop' metaphor of some Linux-based window managers
It allowsthe point of focus to split and convergewhen appropriate
multiple 'trails' existing simultaneously for differing purposes
... making apparentin what directions further information may lie. *
* or actions, or interactions.
The infinitecanvas couldallow for an arrangement of elements to suggest current interface paradigms.
The hub of this application being loosely representative of top-level navigation. *
Or it couldinclude existing interface ideas within the canvas itself. *
* like the blue underlined hyperlinks in this interface
A strip which included a feedback form in the middle of the narrative, for example.
The one, byassociation,lending meaningto the other.
Perhaps traditional interface artefacts can become fused inextricably with the content they help define and sort. *
* the natural conculsion of this is a long way off at the moment, even as a proposal
Which issomethingthis interface attempts to begin.
'Implied interaction' Hub.
Welcome tothe Hub*
* The central point of the interface model
The ideas behindthis interface are explored on this spoke.
(i) Firstly I wanted to experiment with Scott McCloud's 'infinite canvas' concept.
(ii) The need for sectioning was suggestedby my work with what I have called 'Gestalt filmmaking'.
(iii) The sectioning metaphor was suggested by an existing web interface.
(iv) Stylistically this interface is informed by numerous comic book artists, writersand thinkers.
This spoke contains project development and reflection information.
Have a look atthe development report phase 1. *
Or read thethe development report phase 2. *
Or readthe projectlog.
Maybe glance over the problem log.
The ResourceMaterial whichinforms the projectis on this spoke.
In this areayou could read my Bibliography.
Or the List of Figures and Movies.
maybe, look something upin the glossary.
Read the project research proposal.
or look at the conversation log.
Interactiveresources can befound on thisspoke.
Have a read of the navigational help section.
Here you canRun a search?
Or maybe Leave a message?
The development of link metaphors within this interface
The development of the inter-strip link metaphor
The link metaphoris a control which allows the reader to move from one comic strip to another.
Initially thismetaphor has taken the form of a buttonin the lower right corner of thepanel.
Clicking thisbutton took the reader to the link target.*
* But not any more as I've developed them out
Hovering over this button displays a description of the target.
The buttons in these panels are dummys. They don't work.
This initial design wasn't very good.
It washard to spot.
... and didn't make a lot of sense.
These buttonsexamined theorientation ofpanels around the target panel
... and with the black blocks attempted to provide some visual tie between source and target.
This tie was nowhere near strong enough.
And the creationof meaning between reader and interface failed.
A number of alternatives were considered during the initial build stages*
... but were all discarded at thatstage as either (i) too time consuming
...or (ii) too tricky to develop
As it turnedout the idea was already there, it just needed developing.*
* And this second round development concluded 30/09/07
the methods* used to examine the orientation of target panelswere extended to grabthose panels
then the methods* that drewpanels were abstracted so as to beuseful to differing areas ofthe interface
Using theseabstracted methods, buttons could becreated of clustersof small greypanels
... which directly represent the target panels they link to.
To furtherenhance the metaphor, hover text was added to these buttons
this displays ashort description of the type of contentthe reader may expect to find afterfollowing thelink.
These buttonsaren't strongly connected to one specific panel as the first buttonswere.
this doesn't matter.
As there is limited space for text in these panels, it's rare for only one panel to be of relevance to the linkage. And, as such, placement in association with a group of panels seems acceptable.*
* if this is not the case I would expect the test phase to show this up.
Of course, this isn'tthe only type of link metaphor in this interface.
The blueunderlined text insome panels are, toall ends, standardHTML hyperlinks.
These hyperlinkstake the reader from the webcomic interface ....
to the resource HTML pages which back this site.
I have no wishto disregardexisting controlmetaphors ...
... especially something as established* asthe hyperlink,
The hyperlink'susefulness has been clearly demonstrated by it's recent apperance in all sorts ofnon-web interfaces.*
* Microsoft Windows XP and Vista file managers for example.
Also, I hypothesize that by using a HTML control to link toHTML pages ...
The creation ofmeaning betweenreader and controlmight be eased bythis now familiar*association.
* Familiar in any culture of practice which includes using such interfaces.
Testing will determine howwell this actually functions.
That's itfor the linkmetaphors, useone to continuereading!!
The development of inter-strip transitions
Navigational Development
Now this isgoing to take some explaining!
In it's initial development phase,* the way readers were supposed to navigatearound thisinterface ...
.. was very different.
An inter-striplink metaphor wasin place, althoughit looked quite different.
Although theidea of clicking a panel to move toit* was in place.
the clicked panelmoved to the topright hand side ofthe screen, not the centre.*
* as this was much easier to develop.
And, because ofthis the only way of moving backwards through a strip ...
... was by using a clumsy dragging control
this worked whenthe reader clickedand held their left mouse button on any area of backdrop
... and thenmoved their mouse.
It was rubbish!
Nevertheless
using thiscontrol, the reader could manipulate the position of the strip onscreen.*
* or the position of the screen over the strip, whichever way you'd like to look at it.
This controlwas awkward and annoying to use. *
* My own judgement based on extensive use of it.
So when I resumed development*the navigational method wasfirst on the list to do.
* after completing the first round of test data (20/08/07).
First, the click panel controlswere modified so that they movedto the center of the screen ratherthan the top left,
This allowed thereader to move in any desired directionalong the strip ...
and meant I could retire the drag control.
Althoughclicking on panelsto move to themto centre screen worked well.
... it did limit the speed at which the reader might move through a strip.*
* this was fine for normal reading, but this is not always requried.
Zooming was a solution.*
Now thezoom functionwas tricky toimplement.*
* basic functionality was more or less working by 22/08/07.
The troublewas, the scaling function withinthe zoom ...
which takesit's fixed point as the top left of whatever is being scaled.
And that meantthat the zoomzoomed into andout of the top leftof the screen
... not the centre.
This tooksome thinking about.
That is, until Irealised that the zooming methoddidn't have to be asingle action
and as I'd already solved the move to centre issue ...
... all I neededto do was callthat functionafter everyresize call.
presto! *
* zooming completed on 23/08/07
By the way, haveyou noticed youare readingbackwards? *
* right to left rather than left to right!
At this point*most of the major navigation controls were pretty much in place.
That is except for the fact that whilst the reader could moveeasily between strips ...
... using the inter-strip link metaphor ...
They couldn't move back
Being able to undo an action is of vital importance. *
* or the reader won't feel they can safely experiment (you can cite that to pretty much any book on interface design you like).
So I neededsome form of undo.
A number of different models were considered.
One idea wasfor an undocontrol, similarto the link panels which wouldattach itself to target panels and act as a back button.
This was abandoned as (i) it wasn't visualydifferent enough from the link metaphor.*
* HTML hyperlinks can sometimes fall into this trap
ii) It wouldbecome increasingly difficult to account for technically, for example ...
What wouldhappen if the target panel already hada link metaphor,for example?
Also considered was a universal backbutton which would permanently occupyan area of the screen.
and wouldalways undo thelast undoableaction made bythe reader.
This idea wasdropped as the tie between control and action could be difficult tograsp *
* Professional experience leads me to this conclusion.
... as it wouldn't always do the same thing.
But this idea did open the door tothe solution,which was ...
A breadcrumb trail inspired control.*
* designing began 28/08/07. Development ran between (01/09/07 and 05/09/07).
Its that stack of small panels overon the right.
Every time thereader follows a link from strip to strip a crumb is added to the stack.
Clicking the crumbs takes thereader to where they were before they clicked that link.
This is a commonweb design andlately* also an interface design concept.
* Recent versions of the Microsoft Windows Operating Systems (XP and Vista) have both featured breadcrumb trails.
Visualy, thecrumbs take their cue from the inter-strip link metaphor, thesame reasoning is applied.
Testing will determine the effectiveness of this solution.
The research methods section of this projects research proposal
Kevin Cheng has a mantra...
"You can draw comics to communicate concepts"
Chenk, K. 2006. Communicating Concepts Through Comics
Let's see if it works
Due to the scarcity of other research projects in this area...
... this research project will take the form of an Action Research Case-Study
This case-study will generate data which may be employed in further research towards a theory of 'implied' interfacedesign
The research will produce a web application which will act as an example of an 'implied'interface
This web application will contain and serve the research project, growing to accommodate new requirements of it as they arrive. Simultaneously a tool used by the project and it's subject.
The functional requirements of theweb application will be arrived at by an 'Action Research' process of planning, action, reflection anditteration.
This provides a complete understanding of the cultural and technical aspects of any resulting interface artefact...
... as the interface designer is also responsible for the engineering...
... and it is the cultureof practice of this research project which serves as a context for the application.
This knowledge is vital when designing interfaces which promote what I* describe as an 'EmbodiedInteraction'.
* Paul Dourish, (Douish, P. 2001).
... something my 'implied' interface seeks to promote.
The idea is that this understanding is communicated by interface artefacts through a group of sympathetic stylistic and narrative devices...
... which is where the comics come in.
'Watchmen' by Moore & Gibbons, ' Sin City' by Miller, 'V for Vendetta' by Moore & Lloyd,'Hellboy' by Mignola, 'Preacher' by Ennis & Dillon, 'The Dark Knight Returns' by Miller.
This should ease the creation of meaning between participant and interface in an 'Embodied Interaction'.
The project will undretake an 'Action Research' investigation of comic book practice ...
... mainly to address a gap in my own knowledge.
To seek an understanding of as complex a subject as comic books without exploring the possibilities of tactile learning would be a mistake.
But isn't this a comic? What more is there to learn?
Actually quite a lot! This comic deliberately plays it safe in anumber of ways.
(i) There are many differing visual styles in the practice of comic art.
Images by Mary Fleener (McCloud, S. 1993, p55)
... and this comic has been stylistically informed in the main by experience gained in the field of Graphic Design, not comics.
(ii) This comic has no sense of perspective. Only the suggestion of a horizon*.
* A device Charles Schultz uses in his 'Peanuts' strips
(iii) This comic relies on a regular grid of panels *.
* Watchmen by Moore and Gibbons uses just such a layout.
... it doesn't experiment with the emphasis achieved by the manipulation or removal of frames.
Each ofthese elements represents an important aspect of the comic book medium. They also represent gaps in myknowledge ...
... and an understanding of how these elements manipulate human perception is vital to an understanding of comics.
The knowledge, techniques and ideas discovered by this comic-book investigative practice ...
... will inform the design of the web application interface.
Also planned as an 'Action Research' process of planning, action, reflection and iteration
... at this point the reflection will be undertaken with the help of research participants
... drawn from the IT industry.
This reflection will take the form of user-acceptance testing ...
... which is a standard software development strategy, trusted by the targetaudience.
Upon completion of the interface design, the project will enter it's final stage.
This will be a process of detailed reflection using a version of my* heuristic method.
* Jakob Nielsen. (Van Duyne, D. Landay, J. Hong, J. 2003)
... and possibly some user-acceptance testing as well.
These methods have also been selected as trusted industry standard testing methodology.
The purpose of this reflection, as I said previously ...
... is to generate data which may be employed in further research towards a theory of 'implied' interfacedesign.
The Sectioning of this interface.
The Sectioning of this interface.
The idea that the reader mightclick on panels, or buttons tomove from area to area
.. and so explore the interface
was culled from the website of an architecture firm
which I found oneday whilst browsingfor well designedsites at work
and which I've now lost my bookmark for
... and am now completely unable to re-find.
... and am now completely unable to re-find.
but the basic idea was that their site menu comprised a number of squares which represented top level categories.
behind these and off to the sides were sub menu categories
and clicking a main category square took the viewer to the selected sub category menu.
Thesesquares remindedme of comicpanels ...
It struck methat this kind of seperation would be terrific for connecting chapters of a webcomic
Not necessarily exactly this layered metaphor so much as theidea of linking content visually
Providingsome visual indication of the target.
And the small grey link panels are the result.
The development of Speech-Bubble generation
Speech Bubble development
At present *, around two weeks total development time has been spent on speech bubblegeneration.
In the first instance a library of static speech bubble images was developed for the few panels that were then availible. They were cropped to the panel frameas this one is.
given the differing positions of the characters' mouths from panel ...
to panel ...
and also when considering that some speech bubble have considerably moretext to hold than others.
this meant developing a lot* of bubbles.
... sucking up a lot of development time
... and potentially making the interface too unweildy to be of use in a web environment.
For any givenpanel, numerous speech bubble graphics had proven necessary
as without thatchoice, the range of panels which could be employed for anygiven piece of text were extremelylimited.
So, realising thiswould quickly becomea serious issue, I set about designing a solution*.
The idea was touse the same library of speech bubble images for every panel...
the positioningof which is controlled by anXML descriptor blob.
Should the speechbubble image extendbeyond the panel, as this one does,then the framewould automatically crop the bubble tothe edge of thepanel
... removingthe need for lotsof pre-cropped bubbles to be created.
Development of this approach took place mostly in late June*
Flash is hard-coded with a reasonablestarting pointin each panel.*
Then I have futher control over the bubble's position by specifying additional distances along the horizonal andvertical axis*.
* Also implemented 20/06/07
This gives me complete control over where any given speech isdisplayed.
Flash maps wherethe text should flow from and to by taking the size of the bubble image ...
Then building atext object of a smaller size over the bubble image
... it then alignsthe text to the centre of the speech bubble.*
* First implemented 27/06/07
Should the speech bubble extend beyond the frameof the panel ...
the masking effect* crops the graphic so that it doesn't interfere with neighboringpanels.
*worked on over a number of revisions and finalized 3/07/07
whilst Flash determines if the text itself would extend beyond the panel frame ...
and adjusts it so that text is not lost
Now, this is apretty novel wayof specifying comic strip dialogue
... and with more time the masking and positioning idea could be extended to the whole panel
so that body position, facial expression
camera distanceand angle,
and soon ...
...could all be controlled from the XML blob.
This would make the XML larger and more complex, but woudn't necessarily increase strip developmenttime.
as libraries ofXML fragment-panels would soon grow allowing quick duplication of most settings.
... and forming anew way to create both comic strips, and/or HCIinterfaces.
This may wellbe the next step beyond thisproject.
Strip generation development
Comic Strip production.
I had begun byscripting these comicstrips by drawingthumbnail panels inmy notebook*
These thumbnails showed roughly how I wanted the panels tolook and had briefnotes on what Iwanted them tosay.
This kind of method is used by Dave Gibbons
... and Frank Miller *
By the time the research proposal strip was complete,* I had developed some of my own ways of working.
The characters this strip used were all developed on a character sheet in AdobeFlash independant of frames or context
I developed a library of arms, heads, eyes, feet and so on to draw on when I needed to create new position or expression.
This cut down the number of new parts that needed to be designed in any one panel
... and the more panels that were developed, the bigger the librarygot and the quicker new panelswere developed.
... very much a graphic designers* way of working rather thana comic artists.
* and is drawn from my professional experience in that field
I had realizedafter the research proposal strip was complete* that the thumbnail approach wasn't workingfor me.
What is mostimportant inthese strips is whats being said,and working up from thumbnails really wasn'thelping me with that.
If fact most of the dialogue was fairly stuffy and didn't flow at all. Completely unlike aconversation.
...
Conversation isone of the innate strengths of the comic book medium
.. and is where Ibelieve a lot of it's persuasional power comes from.
Also the thumbnail method is a fairly time consuming way of producing acomic strip.*
... as eachpanel isworked upfromscratch.
As a result Iquickly abandonedthumbnailing infavour of a moretext-oriented wayof working*.
* Akin to the way Neil Gaiman works (Gaiman, N. 1992. The Sandman: Dream Country).
I began writing dialogue and brief scene descriptions as lists.
Included in thiswas a couple ofco-ordinates which indicated where I wanted the frame placed.
The more Iworked this way, the more I began to concentrate on whatis being said in eachpanel.
I startedincluding less and less of the descriptive information
... to the extent that it now rarely appears at all
unless something in the panel ...
or the panel's position has adirect bearing on what's being said.
So now*developing these comic strips is a two part process.
Firstlythe script is written, one panel toa line
... straightinto the XML descriptorfile.
When complete,this script isworked over, oneframe at a time
Decisions aretaken about visualstrategy,
frame orientation ...
and specifics such as choice of speech bubble ...
or if any props are required.*
Now this mayseem like the visual element of these strips is being reduced to a kind of afterthought.
Actually that isn't how it works out.
What I've found is that working inthis way ...
...allows complete attention to be paidto what is being saidin the first instance
and then allows much more attention to be directed towards how the narrative may be best supported*.
* whilst also prompting a detailed second read as a matter of course
So, some stripshave been crafted asa lecture, in which subject and camera distance don'tchange*.
and some stripsuse a full range of camera distances anda range of supporting characters.
I'm much happier with these latter comic strips
*
* and sometimes you just need an extra panel to tidy up
The development of this interface's visual styling
Visual Styling development
This is where allthe research into the comic book medium has been mostuseful
Very eary on Idecided on two important points, that ...
(i) Every visual decision for this interface needed a comic book precedent.
Without one howcould the potential effects of using any element beanticipated?
I'd have to test and re-test each specific decision taking far too much development time awayfrom the project
(ii) And secondly, so as to take advantage of what Scott McCloud describes as comic book closure*,
... that allelements shouldbe kept as simple as possible.
?
... but, not that simple as that!
still, simpleenough that the readers easily form closure with it
and not so detailed that potentially unfamiliar elements areintroduced
... disrupting closure!
The idea beingthat this lack of detail allows the reader space to fill in detailsfrom their ownexperience
... theirperceptionrounds out andcompletes anexperience whichis then both individual and familiar.
I explain this idea very clearly*.
So, taking the idea of using a regular square frame for each panel, for example
Square panels arrived partiallyfrom a developmentalperspective,
as its far easier to mathematically predict where a frame should go ...
... if they're all the same size!
But also,square panelshave been used as the best device to neithermanipulate nor misdirect the reader.
Now thetheory that is behind that statement belongs to a fewpeople ...
Will Eisner has a great deal to say about the way panel frames along with the angle ofshot can be manipulated to produce an emotional effect *
as, to a lesser degree, does Stan Lee *
lesser, as Lee tendsto produce a very narrow genre of stories in whichthe main emotionalcontent is excitement through danger.
and Scott McCloud describes* how panelshape can be used to manipulate the readers perception of time ...
Hang on,I describedthat first*
True, McCloud'sunpacking of thisbuilds on Eisner'swork but, as a result,it's more detailed.
So ...
Wide panoramic frames take longer for the reader's eyeto cross and serve to slow the pace of a story
Narrow frames convey a sense of nervous unease
... and cameraangle and perspecitive can increaseexcitement *
* except, perhaps, when used like this.
... or they can be used to distancethe reader fromthe scene
You see, thiskind of emotional involvement ...
and the manipulationof the pace ofthe narrative
are simply twomore details which could potentially getin the way of what I'm trying to say.
So I won'tbe using that then!
and by keepingthe panels regularand lacking in any particular emphasis
I've attemptedto eliminate any latent meaning that doing otherwise might produce.
the comic book precedent I'll cite for this is Watchmen *
Watchmen uses a regular 3x3 grid of panels per page. *
* this isn't a complete page
About this, artist Dave Gibbons has said ....
A structured9 panel grid gives you authority, like watching a movieor television *
or, in otherwords, the,frames get outof the way ofthe contentand allow thenarrative tospeak foritself
Likewise,as both Eisnerand I* point out, the camera anglein any given panel can effect the meaning ofthat panel enormously
So I'll not be using that either*
* obviously with the exception of this section
Something myown comic practice investigation quickly uncovered is that if the artist tries thisand either ...
(i) gets the perspectives in the frame wrong, or ...
(ii) two adjacent incompatible camera angles create an unpleasent juxtaposition
... both of whichare extremely easytraps to fallinto ...
and any sense of comic book closure is destroyed
So, its eye level shots only in these strips ...
My precedent for this is Peanuts!*
Charles Schultz draws each and every Peanuts panel at eye level.
At eye level thereader is able toidentify with hischaracters.
There is nosense of detached superiorty through use of a birds eye
shot
and likewise thereader isn't menacedby them froma worms-eyeperspective.
We mostly converse with people at eye level, and that's what Peanuts feels like,
its like a conversation the reader isin on.
And as this narrative is attempting is to persude you, the reader, of a set of propositions ...
thatwould seem best done at eye level!
That bringsme on to the howI've arrived at usingthis level ofdetail
The backgrounddetail, for example,has been reduced to asingle stroke for a horizon.
... or it iswhere the floor meetsthe wall?
Actually it doesn't matter.
If I appear to be standing outsideon a hill, that'sfine ...
If I appearto be indoors, that's also fine.
I'm sure somewill see it one way, others the other way
... others may see something else entirely
but howevermy location is understood, ineach specific interaction, it'llbe the most natural solution for thatreader*
* And that is what closure is getting at.
less for them to question or wonder about.
Because actually where I am has no bearing at all on what I'm saying.
So the level ofvisual detail I'm using is both simple and exaggerated.
Simple, to cutdown on unecessary detail in the kindof way that FrankMiller's more experimental works attempts.
Frank Miller's 'Sin City: Hell and Back'* is largely illustrated in harshblack and white ...
with only just so much detail as is necessary to make sense of a scene,
... and occasionally too little.
One sequence involves a truck entering a factory at night
* This sequencerelies on a seriesof partial-trucks moving by industriallooking shapes inorder to establishit's narrative ...
... much more inthe way onewould experience a factory at night *
So my use of reduced detail and harsh black and white is precedented by Frank Miller's SinCity books
Finally, I wantto talk about thedecision to notdraw figuresin proportion.
When Scott McCloud presents a circle two dots and a line and asks ...
What are you really seeing?
... the majority of people should answer "a face".
At least most of them have when I've tried it*
* informal testing on friends and family, not documented, you'll have to take my word for it
The reason is thathuman perceptionlooks to make senseof anything itencounters
so reasonablya figure with what is obviously a head, two arms, two legs, two hands ...
and soon ...
... should be largely recognised asa figure
by that rationale,any figure that is drawn deliberately out ofproportion ...
the readers perception should understand as normal
On the otherhand ...
a realistically rendered figurewith someelement drawn accidentally outof proportionwill just lookwrong
and so break upthe closure I've been trying to encourage.
Or, to put it another way ...
If the hands and feet in a cartoon or any pictorial representation of the humanfigure are correctly drawn, one can bepretty sure that the artist has won morethan half of his battle*
and by"correctly" I'm taking Carlson to mean "believably" rather than "realistically".
and so once again the my precedent isPeanuts.
These have been the findings of the comic book practice investigation
... and this manner of visual style is the result!
The development of inter-strip transitions
The development of the strip-to-strip transitions.
Basic strip tostrip hyperlinking was built fairly early on*
Originally,upon clicking* the link metaphor
*In much the same way as they would navigate a web page.
The stripdisapeared to be instantly replaced by the target strip.
As the Gestalt Film project had uncoveredthe importance of clear transitionalmetaphor.
... I decided thatsomething morewas requiredhere.*
... to make the point where one strip ends and the next starts more apparent
Five days was spent developing a moreelegant transition.
The strips now* fade in and out,from one to the other
... and this workedwell with the small blobs of development test data availible.
Transitioningbetween stripsallows room for the reader's perception to make a meaningful connection in the seperation*
The trouble is, orwas that, this is very demanding of the reader's computer*.
... and whentrying to blend 100 plus panels* simulaneously ...
* As well as the huge layer that sat behind them and permitted the drag functionality.
Evenhigher endhome computers groaned
Happily this problem has gone away.
In implementing the Zooming navigational functionality ...
I have removed the drag functionality.
... and it wouldseem that the huge layers that permitted the dragging werepart of what was slowing thetransitions
The performance ofthe inter-stripblends have improveddramatically.
... so no more workis required here.