Hard Working v.s. Smart Working

Before, I always think, [Try your best] = [Hard working]
From past personal working experience till the team project experience, I always put all the effots, but also wondering why the results were not so efficient than I expected.

Today, I understood, "smart working" is more accurate answer for myself and the attitude to do things in the future.

Project Milestones

First Week

• Mon. 14th Jan.: Deconstruction text, brainstorming ideas, roles decided
• Tue. 15th Jan.: concept decided, tutorial with Sandra
• Wed. 16th Jan.: disccusion of Paper prototype , storyboarding, PP test plan
• Thr. 17th Jan: modification of paper prototype, tutorial with Mazy, PP test plan
• Fri. 18th Jan: PP testing, video Location deciding, video shooting preparation, first mock-up of interface
• Sat. 19th Jan: video shooting preparation
• Sun. 20th Jan: video shooting

Second week

• Mon. 21th Jan.: vedio exporting, editing, coding software solution finding
• Tue. 22th Jan.: intro video editing, sound editing, interface designing, coding
• Wed. 23th Jan.: timelines' video editing, masking, sound editing, interface designing, coding
• Thr. 24th Jan.: tutorial with Mazy, timelines' video editing, masking, sound editing, interface designing, coding
• Fri. 25th Jan.: Usability test preparation, timelines' video finished, interface designing, coding
• Sat. 26th Jan.: coding, usability test preparation
• Sun. 27th Jan.: usability test, discussion of modification and presentation points, presentation website

Third week

• Mon. 28th Jan.: Presentation and Crit
• Team C blog: http://0708maimmintnarc.blogspot.com/

Presentation and crit

After presentation finished, we got valuable points to think our product.

• overall, the VURPs' can grasp our concept and the story
• high interactivity, but also loose the plot control
• we didn't go deeper the ambiguity
• VURPs' can't interact deeper into our product
• the technical problems influence the result, it hard to judge the level of VURPs' motivation
• is Flash a good tool for this project?

need debugging and modification

• From the testing, we found:
  1. The visibility of Instruction button. Only one user clicked the instruction button for help.
  2. The dark scroll problem. 2 Users can not wait the murder video finished, and tried to click the dark scrolls at the beginning.

3. There is no navigation to back to intro or the beginning of murder video. If user can not understand the story at first time, they have no chance to watch the video again.

4. Technical problems influenced the result. Interesting to find, 3 of them all started form the right slider “Pallas”. However, owing to the technical problems, each timeline video delayed to responded and very slow. Once they can not find the difference on screen, they loose patient to wait and started to try other scrolls, consequently, felt confused the characters.

5. The scroll control not functioned well. 4 Users clicked the arrows or the scrolls as a button. Only 1 user use mouse and control it well. 1 user clicked the screen directly tried to drag and move characters.Issue 6.: Users felt confused about the characters. The classification of each character was not clear enough from long-shot video.

• Modification required:

1. Make Instruction button more visible by size and position. Move the position to the right-bottom corner. Most users started the right-bottom slider, when they got stuck, it’s the most visible position.

2. Remove the dark scrolls at the beginning to avoid distraction. Users will finish watching the murder story without distraction, and then start to play with the movie.

3. Add button of “back to intro” and “back to the beginning” allowing user the chance to navigate anytime.

4. Reassure technical modification on coding and all the possible ending combination of videos can go smoothly.

5. Make the double arrow clickable as a functional button. Users can click both the scrolls and the double arrow icons to make a better control.

6. Clarify the characters in video and in scrolls by different colors, make remarkable connection with scrolls. Considering the video can not be shot again, use After Effects editing software to clarify characters in video. Meantime, put photos on sliders and use flash effects and color coding the scrolls.

Usability test

• I suggested to have test in my flat because it's a student accommendation, even on Sunday, we can find target audience to test.


• due to the purpose and methadology is different from PP test, we revised Questionnaire


• Test process and Participants:
  This time, all the team joined the test. Michele was responsible for moderator, taking notes and filming. I tried to find target audience for testing. The others for observers from long distance to avoid too much disturbance. In total 5 participants were tested ranging from ages 18 – 28, all studying at University of the Arts, London. Each user considered themselves keen readers and only one seemed to enjoy both reading and gaming. First, the interface played the intro video. After this, the screen displayed the murder video to give them a story background (the scrolls were in dark color which means users can not move them at that time). Then, 4 scrolls appeared brightly on the screen, we observed their response; meantime, the moderator kept on asking them questions.
• due to the time is rush, the interface has some technicle problems and bugs
• for ex.: the scrolls will disapear, users can't find where to interact ; the sliders not working

Masking Finished!

• Finally, I finished all the masking, although not satisfying, if I had more time, I would do more detailed on each frame.
• I gave Shira the ".aep" file for coding.
• we plan to do the usability test on Saturday, with my laptop. Considering Shira uses Mac; so, I asked her to give me the files which PC can operate without any problems. One is ".swf" another is ".exe"
• she gave me a trial version of our interface to test at my home. If any problems, we have to solve before we start to do Usability test.
• after testing, the ".exe" works (my Flash Player 9 is not working)

After Effects

• It's my first time to learn how to use After Effects
• When I do the masking via After Effects, I have to import the video to each layer. When I did render videos, I have to wait for a long time.
• Today, I compressed each video by QT Pro again. Checking together with Shira, we found the re-compressed quality is still good enough to fit on our final interface and it save me time to work.
• Originaly, I thought, the ".aep" After Effects file contains lots of video, it should be a large file. But after exporting, I am surprised found it's very small!
• the masking took me long time because I have to pay attention to the position alignment on same background, to be careful and more details on characters overlapping part.
• I have to speed up to give Shira final file for coding
• Shira found solution to use Flash replacing Director. I am not quite understand how, she suggested me to have a look on her blog which is helpful! http://nln-sg.blogspot.com/

Updating my Premiere and download trial After Effects

• I use Premiere 6.5 , Shira suggested me, I should update to Premiere Pro which can save time in redering video. Besides, I need After Effects to do "Mask", so I download both the legal trial version from Adobe.
• To download and install took me almost the whole afternoon and I can't do anything
• Finally, both softwares installed in my laptop. But when I open the software, my laptop shut down... I close and restart my laptop, still not solved...
• another classmate said, this is because Premiere Pro and After Effects will cause problem on my PC system and Chinese interface. I am not sure whether it's true or not, anyway, I can't open it, I have to remove them to let my laptop back to normal operation.
• again, it took me long time to remove and I can't do anything in video editing or masking...
• final solution is: I still use Premiere 6.5, and download the Mac After Effects trial version to studio computer to do mask.

Premiere - Quicktime Pro - iMovie

• I started to do the intro video editing.
• Since most classmates use studio's computer and not every computer has installed Premiere. I decided to bring my laptop to work with my teammates. But when I use premiere to export the video, I found one error. I gave Taz the ".avi" format to do sound editing, but it can not be opened by i-Movie...
• so, next time, I will make sure each video all exported by both accept format ".mov"

Backing up is important!

I always keep in mind "Backing up is important."
To make sure our valuable videos being put in a safe folder (because we have no time to shoot again if any tragedy happened),

• we upload all the videos in our server, team folder - every teammate can get the file anytime
• we create a new folder on desktop of studio computer, which Taz used to do editing
• I brought my USB disk to have third copies
• everyday before we left studio, I will updated all the files in my disk
• even if I worked at home, I will upload one file to the server and keep another both in my laptop and USB disk

Export DVs to computer

• we spent long time to export DVs to computer. I started to question, why there is no faster way to do export. But it seems, all we can do is to be patient and wait. DV file is original video format, uncompressed, the file is huge.
• why no technicians trying to find a better solution to do quick exporting?
• we use QuickTime Pro to compress all the DVs' to be ".MOV" format, because I will use Premiere to do video editing.
• Taz will also help me in video editing, she used i-movie. To make sure we can edit the file by two different softwares, she exported the video via QT Pro.
• QuickTime Pro is an important bridge allowing the connection between our editing softwares.

Director and Quicktime

To be honest, I tried to understood what my teammates discussed, I am a beginner about coding or software problems.

They explained to me in a simple way, what I understood are:

• we planed to use Director to do coding to connect each timelines/videos.
• but the version of Director is not compatible with Quick Time 7 Pro
• if solutions can't be found, we may try to use Flash to support.

Video shooting

• Since our product required several pieces of videos, we planed to shoot and then appply masking effects, overlapped on same background. We have to make sure the camera fixed very well and precisely. However, after we finished the shooting and check the videos, we found, the camera moved a little bit. Half videos are in same positions, half are not (tragedy...)
• We have no time to shoot again, so, we decided to do the position alignment in video editing.
• Besides, during the process of shooting, we discussed together how to overcome the characters position in different timeline.
• We change our idea, Mrs Wese and Pallas stand in building instead of by windows. In this way, we can find a good angle to set camera to include all the characters.

Video shooting preparation

• Location decided. Shira asked if any of us has a projector we could use (to light the individual characters).

The story based on night, we have to light characters if we shoot from far distance. But, non of us have this kind of stuff... We have to start shoot earlier, and maybe use video editing effects as a solution.

• I think about we may also need to discuss how to prepare the following things:
• Schmar: a thin blue suit, the jacket was unbuttoned / his weapon, half a bayonet and half a kitchen knife,
• Pallas: his collar turned up, his dressing-gown girt round his portly body,
• Mr Wese: no special dressing (industrious night worker), a stick
• Mrs Wese: with a fox-fur coat over her night-gown,
• Policeman: dress?
• Others: post, clock, the door bell, red textile represent blood?

Storyboard

• Taz finished the storyboard.
• The possible combinations are infinite; here, we list 12 types first.
• The rest rely on coding to allow VURPs' to explore.

  

  

Location not decided yet...

To find a suitable location is not easy...

We needed to find a street corner with 2 windows for Pallas and Mrs Wese.
In this way, we could fix the camera and shoot the background we need.
To solve this problem, we discussed on team blog.
-Shira's place is not good enough
-Sasha's place is quite good, but we may have to give up the window view and find alternative solutions.

Tomorrow I have animation skill course in University, I don't have time to look for the location. I called my friend who lives near Deptford Bridge DLR stop. She promissed me to shoot some photos for me! Maybe I can find good view and suitable place.

We planned to shoot video tomorrow, but it seems we may delay till everything well prepared.

Paper prototype test

• 3rd version of PP: fixed on table to make it more like a screen + add control on the left side + draw line on right side to align the first scene + change arrows to be “up” and “down”

Before we started the test, we modify:

• 5 scrolls and increased policeman layer: Although in final interface we have only 4 scrolls (we put the policeman in the same timeline with Schmar), for paper prototype we have to separate them to control the policeman individually. In this way, we can avoid if Schmar walks on street and policeman appears in wrong timing then cause our users confusing. The same consideration also applied on the policeman layer.
  
• color coding characters: for users easy to see different characters movement
• color coding names on films: for “computer” easy to control during test
• change arrows to be “up and down”: in our interface, we planned to put characters photos on the scroll for easy identify each character, so we move the arrows out of the scroll.
  

Test Process and Participants:

I worked with Michele.

My role is a moderator (observation and asking question) and Michele as both computer and narrator at the same time. The whole process was recorded by camera. We found 7 students in LCC, and asked them general questions to do first-stage investigation because we target at readers instead of a game player. 3 of them were our target audience and interested in participating in our test. We conducted the process by making users see the paper prototype covered by a paper which wrote video on it. The narrator described the intro video and uncovered it to ask users to play with the prototype.

Findings:
1. After the intro video, users didn’t know where to look for help when they get stuck, we have to encourage them to touch the scrolls.

2. After trying our products, though they all understood if they move sliders then the story will play on the screen. They felt confused about which scroll represented which character exactly in the video.

3. One user tried to move the sliders by left and right, instead of turn up and down.
4. Only one user mentioned she can change the story and see different ending. The murder will happen or not happen based on the control of sliders. The other 2 users did not grasp the point of interaction with the story.

5. All of them didn’t know the direction of up and down (sliders) represent different timeline would backward or forward.

Recommendations for our interface.

1. Instruction button is necessary. Add one button on the top-right of the screen and pup-up instructions to help users know how to start to interact with this movie.

(photos upload later on Jan. 31)

2. Give clear hint on the scrolls to guide users find characters: change the position of names from bottom to top and change the order of sliders correspondent with characters’ position in video.

3. Change the direction of scrolls to be left and right, allowing users easier to use mouse control the sliders.

4. Use double arrows similar to DVD player to give timeline hint. Guide users the control function of backward and forward.

(photos upload later on Jan. 31)

ftp connection works!

I tried many times at home, I can only upload files to my personal file.
So, I brought my laptop and asked Michele's help to check why can't I connect with our team folder on server. If I can upload files to team folder anytime, it will be helpful in file management and sharing information with other teammates.

Michele told me, I should connect to FTP/ROOT folder.
After I back to my place, I tried to upload the PP test questionnaire on team folder, and then made link on our team blog. It works!

Every teammate can get any shared file through team blog. It facilitate team's idea communication and information sharing. Although for other people, it may be just a simple thing, for me, awesome!

Timetable

• Our timetable:

since it's two weeks project, we have to do everything on time. For this week, I thought, the following are more urgent.

• the PP test tmr
• we need to finalize our storyboard, otherwise, the shooting will be delayed
• before shooting video on Saturday, we have to find the best location.
• we need to find more people to be actors

P.S. I have to find free time to self-learning HTML & CSS.

Preparation for the Paper prototype

Based on Michele's PP testing script, I made questionnaire, but with some modification.

• I found the question no.1 and 2 are repeated, so I delete it.


• I add one question about " Do you like narrative / story ? " If the testers we found are keen readers of narrative, maybe they can give us good suggestions.

Modifications about the paper prototype

• Before tutorial, the origial prototype:

( 5 layers with Characters' name on it)

• After the tutorial, some changes were made:
  ( clarify different characters with different color )
  (layers increased from 5 to be 7 layers)
  
  ( the 3 photos illustrated how to show our users during the test and the screen changes by draging the transparent films)
  (add the triangle signs to guide user to shift the slider here)

• notes from the tutorial with Mazy:
  1. clarify narrative: make clear that this is a narrative rather than a game
  2. clarify our target audience: the students which is more interested in narratives
  3. script will be helpful
  4. include sound in the paper prototype test (maybe )
  5. slider control: think about give hint to guide the users, let them know how it works
  6. questions for the p.p. testing should be more detailed: for ex., what's your favorite movie or books, what's the last books or movies you read/watch...etc.

First version of paper prototype

Supurised to see the paper prototype Sasha made.
We also disscussed how to explain our idea with this paper prototype during tutorial with Mazy.

HTML & CSS

After morning meeting, each of us started to do our works in the afternoon.
- Shira & Taz: storyboarding
- Sasha: paper prototype making
- Michele: Timetable and scheduling

I think I should start the website planning. Although in "my room" website, I used Dreamweaver and Flash to create, I have only basic understanding about the HTML & CSS. So, I talked with Michele about my situation, and asked him how to start.

He showed me some examples in studio, and suggested me two books from LCC library:

• Head First HTML with CSS & XHTML by Elisabeth Freeman and Eric Freeman (2006), O'Reilly Media.: USA

• The Zen of CSS design - visual enlightenment for the web, by Dave Shea and Molly E. Holzschlag (2005) New Riders: USA

Thinking about Paper prototype

• Design our paper prototype:
• Since we want to create our final product as an interactive movie, we came up with how to make our paper prototype displayed in a dynamic way and simulate the real screen and functionality for our users. We use “drag” idea from X’mas card. If user moves the scroll, we will drag the transparent film to demonstrate the movies as they are watching a real interface.
  
• purpose:
• to discover whether our concept works or not and to see if users can grasp the idea of timeline and characters scrolls. (not to test users' understanding of this story, since the timelines video are not available to include and conduct now)
• to observe how much our product concept can trigger users’ interest and motivation, and also, to receive feedback from them to improve our final product.

• I also think about the preparation: According to Mazy's lecture, before we start to do the paper prototyping test, I think we need to make sure the following points
• paper prototype: it's better to storyboard each branch of our narrative, and the choice screens to our storyboard ( will check the prototype tmr, we have time to modify before the tutorial with Mazy at 12:00)
• the roles in the test: we need to decide
  - moderator: tester, ask questions and write down observations ( I suggest 2 people, one for question, and another for taking notes)
  - computer: operate the prototype according to the participants' choices of each step, don't speak to the user (I suggest 1~2 people, one for the screen, another one for the sliders control)
  - narrator: describe each scene displayed in the prototype and narrate the action represented on the screen
• practice: ensure the testing process goes smoothly and in case of missing something
• randomly select the students in LCC to test: at least 3 students

*** during the testing, avoid of describing how to use the control screens, just describe what is happening in each screen.***

To play with Ambiguity? (after tutorial with Sandra)

We explained to Sandra our first-stage idea. Since it's still very rough, we need to figure out more details to make our concept complete.

Snadra suggested, if we want to play with Ambiguity, we should make research first about the definition. Besides, although we want to challenge, we should keep in mind about the following:

- does it make sense?

- is it motivated?

- what are you trying to do?

- what do you want to acchieve?

- challenge doesn't mean just do something new. "Motivation is key!"

- risk: may loose the Kafka's story

After the tutorial, we sit down have a discussion again and make a list about all the ambiguity in this story.

1. Motivation for the murder
2. The relationship between Pallas and Schmar
3. The relationship between Julia and Schmar
4. Scrutiny: - Why was Pallas satisfied and why couldn't Schmar reach a conclusion?
5. Are Schmar and Wese brothers?
6. Who is Julia?
7. Why did Pallas not stop the murder?
8. Is Schmar satisfied with the result?
9. Is Schmar arrested by the policeman?

We also made research about ambiguity:

• Emphasise Ambiguity - 'Ambiguity as a resource for design' http://machen.mrl.nott.ac.uk/var/uploads/2002-gaver-0.pdf
• Ambiguity definition http://www.google.co.uk/search?hl=en&rlz=1B3GGGL_enGB232GB238&defl=en&q=define:ambiguity&sa=X&oi=glossary_definition&ct=title
• Ambiguity as a Conceptual Framework for Design - Michelle Dalmau http://mcs.open.ac.uk/yr258/amb_frame/

Concept decided and production planning

Concept decided:

• an interactive movie, not a game.
• seperate each characters' timeline as sliders/scrolls on interface
• users can control and move forward or backward to see what happen and different endings
• we need to find the possible combinations (maybe thousands...)
• all of us know the coding is difficult but we all agree it's very challenging and excited to have a try
• although the puzzle game idea is also very interesting, considering it's lower interactivity, or we can say, it may be the safe alternative for our project. But may difficult to trigger VURPs' interest and motivation
• i prefer to challeging play with narrative elements: character and time

Once the concept decided, we have to make storyboard with possible combinations first, then we can process video shooting. (waiting...)

Brainstorming production idea and roles decided.

Today's meeting:

• Except for sharing the deconstruction text, we brainstorming the idea for this project.

my teammates have two ideas:
- play with timeline by sliders: users will be a DJ can edit the story by different characters'
timelines
- objects puzzle game: we shoot video from objects point of view, users have to puzzle all the
objects in right place to explore Kafka's story.

we will discuss more details and make decision tomorrow.

• we also decided everyone's role in this project:

Last project, I had experience in project manager, and i am willing to do the presentation website to learn HTML further. Besides, I will also assist my teammates to learn video editing and help the usability test. I learnt how to use Premiere at my first locative-media project, this project offers me a good chance to practice more.

1st meeting with teammate - share ideas

We shared with each other how we deconstruct and analyze the text.
- the text-order and the story-order are the same because the murder was narrated chronologically.
- the non-linear model this text represents is multiple storyline

I think the text can be divided apparently by certain time segment. At each same time segment, there are several events consisted by “different characters in each location or overlapped location”.
For example: The first time segment is before the murder happened (around 9 o’clock). The murderer, Schmar is waiting in the corner and struck his weapon; the witness, Pallas is watching from the window; the victim’s wife, Mrs Wese peers out to wait for his husband back home; the victim, Mr Wese is working in office. We can discover, at the same time segment, these events (4 characters in 4 locations) happened synchronously.

Then, the door bell ring started the second time point and the third or forth followed.

In this text, I think it can be separated by 5 major time segments, which are: 9 o’clock before murder, the door bell rings out, the murder, after the murder and the end. Within each time segment, it embedded different character’s storyline based on locations.

Comparing my personal text-order / story-order and diagram with group’s, I found some aspects are slightly different in the following issues:

Issue 1. Text-order and story-order list (my revised list has 11 sentences, my group is 17)
I combined details in one sentence because I thought these tiny points happened at the same time segment and no big difference even if we separate in 2 or 3 sentences. For ex., my first sentence is Schmar brings a knife, strucks the knife and waits the victim by the corner of the street; but my group separated them to be 2 sentences (See The personal and team text-order and story-order).

(personal)

http://0708maimmintnarc.blogspot.com/2008/01/final-story-order.html (Links to team story-order)

Issue 2. Multiple Storyline Diagram diversities I separated the timeline by 5 segments. However, my group’s split the timeline by more exact events and based on about 9pm or after 9pm (See Team diagram). Another interesting finding is, in my original diagram included 6th character Julia. Yet, my teammates searched 2 more versions of Czech and German translation text, we found Julia is Mrs Wese. In German version, there is one sentence wrote, “Julia is waiting in vain.” The more research we made, the more we understand Kafka’s original story and having ideas in analysis the story.

F. Kafka: Bratrovrazda - Czech translation http://ld.johanesville.net/kafka-07-povidky?page=15

F. Kafka: Ein Brudenmord - German original http://www.textlog.de/32071.html

(Team Diagram)

Deconstruction Diagram: Non-Linear model (multiple storyline)

After drawing the diagram, I found the Timeline, Characters and locations should be more detailed as below.

The motivation of murder is interesting, what I think is, the motivation can be developed to the main idea to design an interactive narrative game or movie. The VURP can be the detective and then inference the story by choosing roles.

Deconstruction of the short story from F. Kafka- A Brother's murder

Text B: A Brother’s Murder (from F. Kafka)

After reading the text, I found the text-order and story order are almost the same. The story is narrated by a narrator (P.O.V.) followed the timeline of murder/event. Only one order (no. 2), I think it's a little bit different. By the text order, the writer uses question sentences to tell reader, Pallas is the witness and during Time 1 and Time 2, he was waiting and watching from his window. However, if we follow the story order, it should be, "Wese has been killed by Schmar --> and then, Pallas witnessed all the process".

Another interesting point is, readers are not sure Julia's role. All the clue is from Schmar shrieked to Wese, "Wese! You will never see Julia again!", and maybe writer leaves the imagination for readers to guess, trigger readers' curiosity and then every reader will have their own story in their brain. For example, Julia maybe Mrs Wese's name, something happend during the 3 people which cause the murder motivation. Or Julia maybe the 5th character in this story, and there is another event.

According to the story, simple and first-satge analysis could be listed as followed:

• Characters:
  C1: Schmar, the murder
  C2: Pallas, the witness
  C3: Wese, the victim and a industrious night worker
  C4: Mrs Wese, the victim’s wife
  C5: Julia (? maybe Mrs Wese’s name, maybe someone which was known by the murderer and victim in common.)

• Timeline:
  Time 1: before the murder event happened
  Time 2: the murder happened
  Time 3: after
  
• Location:
  L1: the corner of the street where Wese worked.
  L2: Pallas’s home
  L3: Wese’s home, only 5 houses farther along on the opposite of the street.


• Text-order:
  1. In one night with clear moonlight, Schmar, the murder, brought a knife and waited the victim by the corner of the street.
  2. Meantime, Pallas, the private citizen, witnessed all the murder from his window.
  3. The victim’s wife, Mrs Wese waited her husband at home which is only 5 houses farther along on the opposite of the street.
  4. There rang out the sound of the door bell and Mr Wese, the industrious night worker, walked out the building and paused by the corner.
  5. Wese was stopped and killed by Schmar.
  6. Pallas shut to Schmar ‘he saw it at all’ and they scrutinized each other.
  7. Mrs Wese came rushing up with shock and collapsed on top of Wese.
  8. Schmar, the murder was led away by the policeman.


• Story-order:
  1. In one night with clear moonlight, Schmar, the murder, brought a knife and waited the victim by the corner of the street.
  2. Meantime, Pallas, the private citizen, seemed that he knew the murderer, stood and watched from his window to wait for the murder happened.
  3. The victim’s wife, Mrs Wese waited her husband at home which is only 5 houses farther along on the opposite of the street.
  4. There rang out the sound of the door bell and Mr Wese, the industrious night worker, walked out the building and paused by the corner.
  5. Wese was stopped and killed by Schmar.
  6. Pallas witnessed all the murder, shut to Schmar ‘he saw it at all’ and they scrutinized each other.
  7. Mrs Wese came rushing up with shock and collapsed on top of Wese.
  8. Schmar, the murder was led away by the policeman.