Client Project: Sonic Machines Development

Basic template so far coded :

Resources

Responsive slider: http://owlgraphic.com/owlcarousel/

Research Project: Further reading

To inform my project I have read some more of  "Interaction Design, beyond human-computer interaction".

My main notes on "Chapter 2: understanding and conceptualising interaction" in a spider diagram:

And "Chapter 3: Cognitive Aspects":

Research Project: HTML5 Canvas and new technologies

From my findings in artefact 3, the results show that some people are more engaged by the website because of the V.E. These environments exist in the form of interactive or non interactive animated flash or canvas applications.

My findings from reading "HTML Design Essentials" by "Creative Masterclass" makers of .net magazine:

Flash versus HTML5

HTML is winning hands down. canvas: web graphic trends

Adobe edge HTML5 Canvas

"The danger of adobe edge faces is, ironically from something we call 'flash' effect'. Animation and interactivity used for pointless purposes; sites that showcase splash screens and progress bars. What we fear is the second coming of 'skip intro'."

"It seems to me that we're simply jumping on the animation bandwagon because we can, and are in serious risk of backtracking on all the great advances in usability we've had over the last few years. Every new portfolio site is now going to spin, shake"

VML and SVG Javascript

Vector Mark-up language: supported by IE6 - IE9 only

Scalable Vector graphics: supported on all browsers

"Both SVG and VML work by adding special DOM nodes to the document which represent shapes, like circles, lines, and polygons. Like any other DOM element, these shapes can be styled, positioned, and interacted with using native JavaScript or your favorite JavaScript library like jQuery, YUI, etc."

" First, since SVG and VML require us to add DOM elements for each shape to the document, the document model can quickly become overloaded for complex drawings, and the application could slow down or even crash. HTML5 Canvas is much more efficient and performant."

HTML5 Canvas 

"Second, unlike SVG, which can have events bound to shapes via native JavaScript or a JavaScript library, HTML5 Canvas does not provide an event binding API, which is a real bummer. And if you try to implement something yourself, you’ll quickly realize that it’s ridiculously difficult to create an easy to use mouse / touch event system that’s performant. 

Fortunately, there are several HTML5 canvas libraries out there that address this problem, including KineticJS, EaselJS, Paper.js, Fabric.js, and Processing.js."

Janvas 

SVG drawing program. Quite new at the moment: http://www.janvas.com/illustrators_designers_developers/projects/janvas2D_web/index_EN.php

Research Project: Artefact 3 results

My artefact 3 findings are:

Q. On a scale from 1 to 10, where 1 was very diffciuit and 10 very easy, rate how easy the website was to use? (navigating the site)
6.42

Q. On a scale from 1 to 10, where 1 is very slowly and 10 very quickly, rate how long it took to work out what to do on the website?
7.

Q. On a scale from 1 to 10, where 1 is feeling annoyed and 10 is feeling happy, rate how did the website make you feel?
6.33

Q.On a scale from 1 to 10, where 1 is very slowly and 10 very quickly, rate how long did it take for the website to make you feel annoyed or frustrated? (Choose N/A if you didn't feel annoyed at all)
6.

Q. On a scale from 1 to 10, where 1 is poor and 10 is excellent, rate how visually appealing or interesting the website looked?
6.71

Q. Overall did you like the website?
Yes:  14 (58.33%)
No: 10 (41.67%)

Q. Why did you like or dislike the website? (choose one main reason)
Easy to use: 1 (4.17%)
Looks interesting: 13 (54.17%)
Difficuit to use: 7 (29.17%)
Looks terrible: 3 (12.50%)

Results

• The website was neither very easy or very hard.
• Most users found it quite quick to learn what to do.
• More users felt happy using the website than annoyed, the average rating was in-between.
• The website wasn't quick at getting people frustrated, many didn't get annoyed at all.
• Users gave a high score for how visually appealing it looked.

• More users liked the site than dislike.
• The main reason for liking the website was because it looked visually appealing. 54.17%
• The main reason for disliking the website was because it was difficult to use. 29.17%

User feedback

"A very unique type of website that stands out far from the rest, but the use of this type of design must match the type of website that targets a specific target audience, websites such as commercial shops or agencies should avoid this as it would be hard to navigate for elder users."

"It seemed like a gimmick. As an experimental website it was OK, but I'd be really annoyed if I actually wanted to find a specific thing."

"it was difficult and got frustrating. however the concept is really good! simple looking but effective!" 

"Very well made. Loved how the menu looked 3D."

"Very unique and interesting to use, I especially liked how you had to discover how to navigate the website, but it was not difficult to learn how to use it. Very cool, I would like a website like that."

"I was more so curious about the website than anything, it had an interesting and unique layout that flowed almost effortlessly which I enjoyed a lot."

My Expectations

I expected people to be put off by the 3D navigation despite it looking quite innovative and new. I also thought you have to compromise aesthetics with usability with V.E websites.

My Conclusions

Q. Where are we at currently with interactive presentation? Are we seeing fully interactive elements such as "Virtual environments" being introduced to the web? Can and do they provide a enhanced user experience?

Yes they can to some extent. The results show that some people are more engaged by the website because of the V.E. These environments exist in the form of interactive or non interactive animated flash or canvas applications.

Q. From artefact 2 my findings are that you need to compromise website aesthetics with usability. Does this apply with VE? What is the limit, how far can you push it until it becomes unusable or dysfunctional? 

You do need both. The main factor for liking the website 58.33% was because it looked interesting 54.16%, but only 14.17% of people liked it because it was easy to use. This shows people are more willing to sacrifice usability for aesthetics.

However, the compromise between aesthetics with usability still this applies to V.E to an extent because 41.67% disliked the website, 29.17% of which thought it was hard to use and 12.50% because it looked terrible.

Q. Can interactive VE (2D Flash built made to look 3D) improve user experience? (extend operability) 
The more wacky the art website, the more patient the user is and the more forgiving they are.

If it's interesting enough, it engages and draws the use in, the content buys them leeway and it potentially increases the appeal of the website.

However, it doesn't necessarily make usability easier. Only 4.17% found the website easy to use.

Further research

canvas: web graphic trends: how html is beating flash big style!

html5 can create rich Internet experiences.

Research Project: Artefact 3 preparation

My artefact 3 consists of testing users to see what their response is to this interactive 3D virtual environments navigation website: http://www.screenvader.com/

And then collecting responses from a survey:

Q. On a scale from 1 to 10, where 1 was very difficult and 10 very easy, rate how easy the website was to use? (navigating the site)

Q. On a scale from 1 to 10, where 1 is very slowly and 10 very quickly, rate how long it took to work out what to do on the website?

Q. On a scale from 1 to 10, where 1 is feeling annoyed and 10 is feeling happy, rate how did the website make you feel?

Q.On a scale from 1 to 10, where 1 is very slowly and 10 very quickly, rate how long did it take for the website to make you feel annoyed or frustrated? (Choose N/A if you didn't feel annoyed at all)

Q. On a scale from 1 to 10, where 1 is poor and 10 is excellent, rate how visually appealing or interesting the website looked?

Q. Overall did you like the website?

Q. Why did you like or dislike the website? (choose one main reason)
Easy to use
Looks interesting
Difficult to use
Looks terrible

Client Project: Portfolio Mockup

Individual music page

On each individual music page he wants the following: text, video and music tracks. The music tracks are finished versions of the piece and are different to the video content. These will be on this page, or on the main page if it becomes operational (the album sidebar)

He doesn't want individual sound file/clips of his work (like on his exhibition).

As extra’s he would like a sliding gallery for pieces that don’t have a video (vinyl work). One with a window and scrollable arrow keys to navigate across each picture.

Icon’s 

He likes the icons. He wants to keep the racing car one the same, and he likes the circle details on both the vinyl and washing machine.

He prefers the simple triangle for the metronome but if possible it would be nice if there was a graphical detail that would represent the pendulum rather than the scales.

Home Page

He has decided he wants all the textual information on the front page. He has sent me the text he wants on there, he may condense it and make it a bit shorter to fit the main page. He doesn't want a separate about me page.

On the front page, the video featured will be a video of his latest work.

Client Project: Mockup Icons

I had a client meeting with Owen today from Sonic machines and he looked at the designs I've come up with and he is really happy with them.

He liked the one which had a balance between the constellation and image of the object both being equally prominent. He thinks you need to strike a balance between the two.

He likes both the white line and the black line lines for the constellation pattern. He likes the faded lack on the metronome but the darker shade of purple looks better on the washing machine image. He is happy for me to create 3 more for each icon.