New dedicated blog for MA Module

July 5, 2007 at 12:58 am | Posted in General Topics | Leave a comment

I have set up a new blog for the MA module at: http://hismastersblog.wordpress.com/

Personal Project: Evaluation & Reflection

June 18, 2007 at 1:18 pm | Posted in - Personal Project, 01_Interactive Narrative | Leave a comment

My personal project is now at a stage where its basic function is clearer – the Maneki Neko as a mobile avatar is firmly established rather than just being something cute waving up and down at different speeds without any interface context.Choosing a small screen as canvas for interactive media inevitably requires a different design approach to large desktop or laptop screens, the challenge is to create something engaging within the limitations of the medium e.g. visuals cannot not be too detailed and with mobile phones particularly for want of a manoeuvrable device such as a mouse, navigation is de facto limited to pressing key buttons.

Flash’s native vector format lends itself to the first requirement ideally and also keeps down the filesize, I would generally predict as Flashlite applications become more popular we will see more vector art on handheld screens.

As I have previously focused far too much on controlling the object via microphone/voice (without getting results) some valuable time has been lost that could have enhanced the mobile Manki Neko. But by finally deciding to let go of this initial concept I am quite happy with the development to date, taking into account some adverse outside influences and the generally tight schedule with me also working 3 days a week in a “proper” job.

At this stage the user can choose between 3 different screen mascots, each with different properties taken from the popular colour coding for the beckoning cats: the black and orange fur representing luck (by far the most popular version), pink, a modern version, representing love and black representing health/keeping away evil (in Japan this is also believed to keep away stalkers which I find an interesting cultural side note).

Currently only the lucky cat turns into a widget by using the keycontrols , in this instance the turned around cat displays newsticker style Japanese proverbs related to luck which are fed from an external textfile i.e. are very flexible in terms of customization (no dooddling about within Flash needed to update content, just a change to the .txt file which resides in the same folder on the server as the source .swf file.)

The other colours would feed other little wisdoms according to their function.

I have taken this idea from the Mac dashboard widgets that usually work in two ways: the front is a fully fledged graphical interface either with something useful or entertaining, the back contains further information.

Time permitting I would have very much liked to add the following features:

  • First of all I would have liked to finish the original narrative idea of a cute little cat turning into something evil, the faster it waves its arm.This notion of kawai (cute) turning into evil kawai is a a popular element of modern Japanese culture and would have added extra interest/depth to the avatar
  • Authentic Japanese score; something I had arranged for with a Japanese girl I know from school but unfortunately both proposed meeting dates never took place
  • RSS-Feeds for appropriate content. The Maneki widget might have been too small to display this therefore I have already prepared another scroller controllable by keyboard up & down keys as opposed to the usual mouse drag & drop which would have not been appropriate for representing a mobile phone. There are ready made flash components in the common .fla library which would have made this relatively easy but again it was time issue as my experience showed ready made components may look simple but unless you fully understand the underlying actionscript can be a nightmare to customize , the devil is in the detail here.
  • Create a 3D version of the Maneki Neko (my research showed that true 3D is hardly possible in Flash but SWIFT 3D is a tool that can simulate 3D in Flash and even output .swf files. This would have meant learning a new software and paying for it (no trial fir Macs available) so I refrained from doing so due to time pressure.
  • Polish the interface to be more “Web 2.o” like i.e. use of drop shadows and shading for more visual appeal and relevence to a mobile widget application
  • Compare real Flashlite capabilities with regular actionscript

Technical challenges faced during this project where mainly somewhere deep within actionscript and as is often the case with programming just a single missed or wrongly set character can mess up everything requiring time consuming trial and error.As frustrating as some of these maybe e.g. it took half a day to get the textfeeder working in the proper screen proportions, I feel I have learnt a lot about little details in Flash/AS which make all the difference.

When developing in Flash in future I need to take a more semantic approach to the process i.e. seperate the design steps from the code. I get distracted very easily with minute details of colour, thickness of lines etc. which has cost me a lot of time I could have spent more effective.
Perhaps I have to take of my designer hat for development purposes and use simple shapes already named like the future graphics and replace these later with the proper images so I don’t even start to think if this line is too thin or that colour to bright for the screen.

As mentioned above I also regret not having dissed the voice control idea earlier as I think the project has potential in terms of design, narrative and technical wizardry – I might revisit it for my personal pleasure and add some finer touches later.

Networked Design Project: Evaluation & Reflection

June 18, 2007 at 9:53 am | Posted in 02_Networked Design | Leave a comment

My current model of the de-constructed object is at a stage I would consider as a rather sketchy prototype, however I would like to explain what I see as positive elements and look for reasons the outcome is behind what I would set myself as standard for a really good project.Our task was to choose an object and conduct wide ranging research on it, considering all the angles, however oblique. We were expected to end up with a huge amount of information, much of it apparently unrelated, which should all be connected by the original object we picked.

I think this part of the project was a particular strength of mine. My object of interest was a water tap as there are many cultural/usability/design topics to be discovered beyond the surface of this everyday object, see my ongoing research on this blog, relevant delicious bookmarks and files in my public box account. I also did a lot of original research whereby I sneaked into public toilets with my camera and waited for a good moment to take pictures of the taps on offer getting a few curios looks by people coming in when I just took some close-ups.

Sticking to original brief I really did consider all angles and my research took me from the design of water taps to the Israel/Palestine conflict and apparel for plumbers to the drought in Africa. While this was all very interesting and also what was expected initially I missed the opportunity to then quickly draw a line and make everything relevant to the original object again. While my peers already had a clearly defined scope I was still investigating into various subjects that in the end had more relevance to the very wide field of water than they did to the tap.

Neil Glen managed to get me focused again on the original topic by which time I was already lagging behind a bit. Usually with some extra effort it wouldn’t have been a problem to catch up but as there was a very busy period at work (I work 3 days a week in a “proper” job),the Uni other projects that demanded my input and a few scheduled sessions with Neil that got canceled due to different circumstances. During this period I carried on developing my interface to what I thought was a good direction. However during a then scheduled brief crit session Neil had a few issues with this direction and made some valid points about clarity of structure and relationships within my interface so it was back to the drawing board for me.

There was then hardly anymore dedicated time to talk about this project during our skype sessions as there were (very good) guest lectures and the other project for the guys on the Interaction Design course ( I was only taking part in this project as I am the last full time student for IMM and am doing a bit of both courses) was the main focus of attention. I missed the opportunity to contact Neil offline/after the sessions via E-Mail for some more guidance and clear directions – so, this being my own fault, I more or less developed in isolation being quite confident that my interface design would suffice.

It was now the beginning of June and I was slightly shocked that a) there were still some general issues with the design b) Martin jumping in for Neil made some contrary points which now left me more confused than helped by the crit. I was determined to still get this off the ground as good as possible and started creating a completely new interface with a changed frontal perspective and a bowl metaphor. As I wanted this to work modelled on the magic faucet by Villeroy and Boch (which you tap once for cold, twice for warm and 3 xfor hot water) this required some deeper actionscript coding as Flash has no default method of detecting a double-click. Again, on its own I am sure I would have managed but the pressure from the other projects was really building up too and I was generally struggling getting everything done to a standard I would be happy with (namely the Usbality Group project which became much bigger than anticipated,see seperaete notes on this topic, and the PHP module which I was working on without any formal Uni support)

So taking all the above into account I think positive notes of the model that is online now are that I reacted to feedback and came up with new design solutions answering to the main points of criticism. By developing the model further from a simple timeline animation to a model that utilises loadMovieNum and unloadMovieNum commands I also spent some useful time on starting to think in layers of information rather than linear chunks of animation.

The design of the interface is very minimalist using white,black and greys which I think this is just right for the topic, as well designed modern bathroom appliances also rely on clear shapes and forms/muted colour schemes.

I mixed a very literal interpretation of the subject (outlines of a bowl and tap) with typographical elements representing information/water as the core element. Generally I also subscribe to the view that the message should not be distracted by the metaphor used to display it but I made a conscious decision to use a relevant interface as this is such a special interest project – I don’t feel a generic container that could be used for any other topic was right in this particular case (see also Tom’s project e.g who also made the subject of his research the focal design element) for this particular project.

In summary here are a few more bullet points regarding my view of the project in retrospective

Positive

  • new ways of looking at navigation, forced to think outside the conventions of click here -> go there
  • new ways of looking at virtual communities & online games (insiders’ views were very inspiring)
  • inside knowledge of different course with a different approach
  • distance participation via Skype fun and useful, regardless of technical issues
  • responsiveness to feedback/crit by peers and tutors
  • thinking about interfaces as truly interactive experience, different approach to classic usability mindset

Negative

  • not keeping focused on important milestones (because they were lacking in the first place)
  • distracted to easily by paths that interest me be it culturally or technically
  • own project management an afterthought
  • final outcome way behind own expectations
  • change of direction shortly before hand in
  • rustiness of own Flash, or better actionscript skills

What I have learnt

  • Set clearer milestones;arrange for meetings beforehand when I visit Uni
  • push for more (written) feedback from tutors
  • write down more
  • use more pen and paper for sketches

    ———————————————————————————————————————————————–

  • Link to research & development files on box: http://www.box.net/shared/keaxnxatxj
  • Some related online research which I “socially bookmarked” here: http://del.icio.us/cklavery/networked_design
    ———————————————————————————————————————————————–

Usability Group Project: Evaluation & Reflection

June 18, 2007 at 6:43 am | Posted in 04_Usability Group Project | Leave a comment

This group project was set by Gordon Plant early this semester, by a majority decision the brief was to create a game for kids aged 5-8 teaching them to read music.

This was a completely new target audience for me to design for which I found interesting and as some group members have children in the a.m age group, looking for participants to take part in usability testing was another thing we wouldn’t need to worry about.
After all this was just going to be a small 50% project – or so we thought…

My initial research looked at the psychology of educational design, some examples of kids’ games and instruments and also general Usability guidelines & ones specifically aimed at Kids.

The general idea was to use a growing tree as an incentive for children to name the correct notes on the stave.
While I tried to point out that in my opinion involving animals would be much more engaging (most kids love animals and associate them with a tangible experience e.g. in a zoo or with a pet/fury toy most kids have a favourite animal but not a favourite plant or tree; an animal makes noises, interacts, has a face and is cute whereas a plant, to a kid with a short attention span , is just „there“ and either grows or doesn’t.) the game was developed further in this direction.

Initially we used a wiki as a development platform which was set up by Mike and also administered by me to a certain degree as I wanted to ensure it is clearly and concisely layd out for aesthetic reasons and the sake of clarity; I also helped some members posting their entries to the correct pages which wasn’t always as straight forward as it should be.

Eventually the group decided to switch from the rather clunky wiki platform to a collaborative group blog which I volunteered to set up.

Although the a.m tasks did not directly relate to the game I feel it was important to administer both the wiki and the blog, I spent a fair amount of time doing so, half an hour here and there being gone in no time doing related tasks.

I always contributed with ideas and feedback to any group discussion and feel I made some good points in the process. I did not always agree with group decisions but such is the nature of a collaborative project, most situations at work aren’t any different.

I think the group collaboration overall was good, although sometimes I would have wished for some more “positive vibrations” in times of stress.
There where many E-Mail discussions, comments left for each other on the blog and iChat sessions to push the project further.

Generally I sensed the willingness with every group member including myself to contribute to the project was potentially jeopardized by the pretty vague scope and weighting for a 50% project. I think we all missed a clear direction with regards to what is enough work to get a good grade for a project like this.
It was also a great shame that we only had Gordon’s support and input for 5 weeks as I personally found all his sessions ,also looking back to the PGCert,
very inspiring and interesting.

The game went through many steps in the design process both regarding structure and interface, it was tested on a live target audience twice and was scrutinized in terms of accessibility guidelines repeatedly. Every group member contributed to these steps and added to the amount of rich research.

Without sounding too pompous I would say that I was the driving force in pushing the interface of the game to where it is today. There was a time when the general group morale was pretty low but I insisted on working further on the interface to bring it to a visually pleasing and target audience relevant stage and volunteered to do so on my own. I am not sure I would have done so if I would have known about all the major very time consuming issues that crept up after that ominous decision. Actually I am sure I wouldn’t, although I am quite pleased with the final outcome.

The mainly PowerPoint related production issues and personal rants are well documented on the group blog and my personal conclusion is that while
PowerPoint may be a good island solution for creating a “quick and dirty” mock-up running on the machine that it was created on it is an
absolute nightmare once different platforms,versions,linked media,codecs and machines with different specs come into the equation.

If I knew what I know now beforehand, using Flash would have been much more convenient and less frustrating/non value added time consuming.

Overall the amount of work,testing,frustration and development put into this project by everybody would have been enough for a 100% project and while I am pleased with the final product this does leave a sour note especially when I see that my other Uni assignments (Networked Design and Personal Project in particular) suffered considerably.

Networked Design: Project finalised

June 18, 2007 at 6:38 am | Posted in 02_Networked Design | Leave a comment

Below is the URL for my work to date. It is still only a rough prototype but functionalities such as a scrollable text box using up & down keys,simple sounds, clearer idea of how “used” information disappears from the bowl (via load& unloadMovie) have been achieved as has a new crisp interface – the hierachy problems with displaying the info at an angle on a ring are therefore no more.I removed the typographical water flow for now (see it in previous version) as I could not stop it from flowing – these are thedangers of using half understood actionscript. Unfortunately the code snippet Neil Jenkins has kindly sent me for multiple click selection won’t work per simple drag and drop onto my button – I simply haven’t got the time to make this work now.

http://cklavery.net/uni/pgdip/networked_design/watertap_clive_170607.html

Previous version (with typo animation):

http://cklavery.net/uni/pgdip/networked_design/networkeddesign_clive_060607.html

See also some related online research which I “socially bookmarked” here: http://del.icio.us/cklavery/networked_design

PHP Project: Evaluation & Reflection

June 18, 2007 at 1:56 am | Posted in 03_PHP | Leave a comment

From the outset this project was going to be a tough challenge as I signed on fully aware that there is no formal Uni support for this module anymore.
It was the make or break decision if I could complete the course as the last full time student on the old structure of Interactive Multimedia (now Interaction Design) though so I accepted not really knowing what to expect as I am not a natural born programmer by any means.

My brief was to create a simple website using PHP and a mySQL database for a subject of my choice.

I borrowed the PHP Visual Quickstart Guide from the library and Amy kindly scanned her old lecture notes for me to get me started with the subject.
Other sources I found invaluable are bookmarked on my delicious page at http://del.icio.us/cklavery/PHP.

I bought some shared server space at mediatemple & started reading the book to get some theoretical background knowledge and pretty soon started to try my luck with the coding – what a great feeling it was to see the first simple php “hello world” echo appear online.

I downloaded the package MAMP which includes everything you need to have a local server configured on your computer and as my MAC has Apache running by default this was supposed to be a whizz. I really started struggling with this package and after some research opted to develop directly on my shared webserver at mediatemple. From my understanding using a local server and then transferring to your remote server would have also meant recreating the paths everytime and as I wasn’t part of a developer team who develop locally first and then upload it didn#t make much sense to me using this methodology.

The whole process was a huge trial and error exercise and eventually I started to get to grips with some basic concepts, looking at other people’s code and trying to make sense of it all. The same is true for figuring out the whole structure of my shared webspace at mediatemple, although they use an attractive GUI the underlying folder structure can be quite confusing.

What was great is that mediatemple already has PHP MyAdmin installed which is a good tool once you can establish a connection to your mySQL database which took quite a myriad of parse errors to manage.

The final website I have online now uses one SQL database (I found out I can only have two set up with my price plan at mediatemple) with different tables containing the data relevant to my subject: The Golden Era of Jamaican Music.

There is an introductory page written in valid XHTML & CSS leading to the different music genres and also an About Page which can be navigated at the footer of each page.

The genre pages also use XHTML transitional (which doesn’t validate completely but still works fine) and valid CSS to keep in line with the overall site styling. There are relevant images at the top of each page which set in the same violet tone as the background colour for content – this in conjunction with the orange tiling in the page background is a tribute to the colours of Trojan Records one of the most important labels for Jamaican music.

Ideally I wanted to have the structure album ->artist-> year -> label -> genre -> textfield for comments and then filter the data by genre to be displayed on the relevant page for Ska, Rocksteady or Reggae.

I couldn’t achieve this and after many,many tries I resolved to plan B thereby creating a seperate table for each genre.

Thanks to the fantastic support from my mate Axel (whom I also pestered in panic via Skype the Thursday before hand-in) I then set up tables that define the relationship artist to label and artist to album which then later make sense for the PHP inside the websites HTML code.

I feel the overall final website has achieved everything I needed to do plus a little extra e.g. the field for comments checks that you enter something in every field – if not you are prompted to go back and try again; when you have submitted the comment you get a message saying Thank You.

This was a really steep learning curve and the only reference php based website from last year I had from my peers is Penny’s (as both Mike’s and Adrian’s projects are no longer online) and I feel mine is an adequate solution for the brief.

—————————————————————————————————————————————————————————

See related development files on this shared box acccount: http://www.box.net/shared/4gmnfaz5z

Related online research bookmarked here: http://del.icio.us/cklavery/PHP.

Personal Project finalised

June 17, 2007 at 4:14 am | Posted in - Personal Project, 01_Interactive Narrative | Leave a comment

Below please find the links to the final files for my personal project, clicking on the hyperlinks will open a new browser window.

Find some related online research for this project here: http://del.icio.us/cklavery/personal_project

+ more research and development on my shared box folder here: http://www.box.net/shared/q54oiit9ib 

loadMovieNum function takes ages online

June 17, 2007 at 2:18 am | Posted in - Personal Project, 01_Interactive Narrative | Leave a comment

I have tried hours on end to make the loadMovieNum functionality work for all files but even the ones that load correctly need very,very long online especially for recognizing the initial keyboard clicks. I have therefore decided to also links to all seperate files on my webserver.

PHP Project finalised

June 16, 2007 at 10:58 pm | Posted in 03_PHP | Leave a comment

Phew, seems now everything is working as expected.

A last cruncher has been the formatting and display of the submitted comments,which are now fixed.

php_leavecomment.jpg

php_feedback160607.jpg

php_commentmade160607.jpg

As a reminder , here’s the URL again: http://cklavery.net/uni/pgdip/php_module/site/index.html

7 Deadly Sins Project: Evaluation & Reflection

June 16, 2007 at 3:34 am | Posted in - 7 Sins Group Project | Leave a comment

The second group project for the PGDip was shared by all students on both the remaining IMM and Interaction Design programmes.
To me the question beforehand was whether this would make an impact on the way this project would run and if it would be any different from the Usability Group project in terms of teamwork,communication and mutual inspiration.

Ironically I found although this group was double the size and people from different courses with different mindsets had to work together, it worked better in terms of teamwork and communication.

E-Mails were always promptly answered and there was a clear segregation of duties on one hand but also a collaborative dynamic throughout the project.
Individuals’ preferences were taken into account e.g. a group member not wishing to participate on MySpace which did not to do the overall outcome any harm.

I also don’t feel that me being based in Germany had a detrimental effect on my work for this project (apart from not being there for the installation set up which I did compensate with some extra work), via the E-Mail/MySpace communication and during my vists to Bath I’d like to see myself as a valuable member of the team who also brought many ideas to the table.

After an initial brainstorming session immediately after the brief was handed out with all team members it became clear that, especially as this was a 50% project, anything requiring a high level of technical/software or programming skills would not be achievable and in a way I found this quite liberating because this gave a conceptual slant to a University project which forced us to think about the blurring boundaries between the real (or what is generally regarded as such) world and the virtual online world(s) of Web 2.0.

Although the sin (and virtue) was pot luck I had the impression everybody enjoyed their actions being determined by a sin and personally speaking I did feel a little like Tim Dingman after a while.

While researching into his sin envy I came across many interesting pointers where envy plays a role in art,music history and popular culture.
I tried to make my character’s social background background,actions and interactions with the other virtual project members, the design of his social network on MySpace and the layout of the page itself relevant to this without being too obvious.
The MySpace avatar is a character called envy from a Japanese series called Full Metal Alchemist,which only insiders would know. I also set up a dedicated E-Mail account for Tim on gmail to add another realistic note to his character.

The main interaction  took place with his character adversary Graham (aka greed aka Adrian) which was really fun as you can see in the dialogues documented on this blog, Susan (pride/Mike) whom he developed a fancy for at the party and Irena (Penny), Susan’s sister with whon Tim shares similar ethics and who is useful to him with regards to finding out about the feelings of her sister.

As I could not be present for the final installation I made an extra effort in providing a few more artifacts in agreement with the other team members for the mock police office, being particularly concerned about the realistic look and feel of these elements.
I thoroughly researched into these fields e.g studying the Metropolitan Police’s Corporate Design guidelines and although technical skills were not particularly needed for the project I feel the installation benefited from my previous DTP skills.

I feel the overall outcome is a good achievement and an original concept well executed ,given the amount of time,weighting and other projects (not to mention work commitments etc.).

There would be many ways of making a similar project even better but this in my eyes would justify a 100% project (as we can see in the Netherlands with the school project Martin forwarded us).

Next Page »

Create a free website or blog at WordPress.com.
Entries and comments feeds.