New Artefact 5 - Ideas

The plan for this artefact to see how branding can affect the audiences preconception of interaction in a web application. Does this change or adjust the interaction or how the content engages the browser?

This will test if the browser has preconception of a website due to its brand or company status. For example a well-known brand may be expected to have a more intricate design that has interactions and engaging content. In comparison to a less well known brand where the audience would have a different preconception. I hope this artefact will give me an insight into the viewer’s response and opinion.

Client project - Media queries

I chose to do some research on the structure of the web application. After gaining some background research and existing examples of media queries i decided against using them on the static design. The use of fallback codes and a mobile version made the use of these percentages in size and media queries irrelevant.
Below are a few images of existing media query websites i looked at in my research.

The meetings - Client project

The first meeting: Proposed plans and ideas
In this meeting I produced the client with wireframes and some images of my plans for the web application. In addition I proposed the web structure and how I would organise the content in a organised manner that would keep the user engaged.
The first meeting gave me a clear insight into the client’s needs and expectations. It also showed me how to achieve a website that fits their needs whilst being a unique addition in the market sector.
In addition to the meeting I sent emails to the client for the content. I asked if he could send me the relevant information and content that he wanted to be applied to the website. This proved successful in getting all the information, images and text that I needed to produce a function application.

The second meeting: Design/graphics
The aim of this meeting was to get feedback from the client and get their opinion on the website so far. I purposely asked them about the graphics and web theme.
Questions asked – and response
I displayed wireframes with colour swatches in Photoshop and got feedback with the client suggesting certain changes they wanted to the design. This was simple to do to the Photoshop file and gave me a solid design to work from in creating the product after the meeting.


The third meeting: Clarification on the progress so far
This meeting consisted of me presenting the almost finished product with it running on a server and functioning as a website.
The structure: This was the first time the client had seen the full layout of the website other than a few emails I had sent previously before this meeting. This gave me a positive input from the client with them clarifying that the layout and display of the content suited the business correctly for the genre.




The forth meeting: Final hand over with finished product presented
This meeting was straight forward with a meeting where I produced the finished product and discussed certain features. In addition I described the blog very simply and also made a few notes in the coding in sections that the client may want/need to update in future. This proved successful and concluded with me saying if there is any problem or queries feel free to contact me via email.
The finishing process was me organising the files and going over everything to ensure it was working correctly.

Client - Questionnaire

This is part of the questionnaire i used to gather primary research on the client based project.

Questionnaire – TDA coaching website

Please fill in the following questions after using the web application .

Do you think the design fits the genre/style of football?
(please circle the answer below)
Yes
No

Is there anything you would change about the web application?
Yes
No
(if yes what would it be)
………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………..


Did the website keep you interested?
(please circle the answer below)
Yes
No

When using the website were the pages easy to navigate?
(please circle the answer below)
Yes
No



As a website was it easy to use?
(please circle the answer below)
Yes
No

Client - Constructive criticism

After creating a first draft of the website I decided a great way to get ideas and some feedback would be a focus group and questionnaire. So to get clarification and test for possible problems I got a group of people to beta test the web application.

Focus group: This was the first bit of testing I did.
The questions:
Is there any part of the website that didn’t work/ function correctly?
What would you change if you could change anything?

The comments/ answers:
One said the links where unreadable - I changed it to a more readable font that complemented the design.
Another participant said the links where unresponsive to the mouse. – To overcome this I added a hover over affect that made the links light up to the interaction of the browser.
I like how simple the website is too use with everything in an organised structure, making it easy to find what you need.
Questionnaire: I did this in addition to the focus group. Below I have listed some of the questions I did in the questionnaire. I have also added some of the comments and responses I got from the questionnaire.

Do you think the design fits the genre/style of football?
Participant 1: yes the colour schemes complement the images.
Participant 2: Yes
Participant 3: I think the green works well as it is a colour used to symbolise football or sport.

Is there anything you would change about the web application?
Participant 1: Nope
Participant 2: Yes the text on some of the pages is difficult to read.

Did the website keep you interested?
Participant 1: yes
Participant 2: yep

When using the website were the pages easy to navigate?
Participant 1: yes
Participant 2: yeah the links where easy to use.

As a website was it easy to use?
Participant 1: yeah it was straight forward and easy to understand.
Participant 2: The website was easy to navigate.

If there was anything you could improve or change what would it be?
The results I got from the questionnaire.

The results gave me some interesting feedback with areas for improvement. I have now made these amendments and intend on producing the next draft to the client to get additional feedback and gain their response to the website.

ie 9 Advert

I thought i would post a blog about something web related other than my work. It is an advert i saw the other day advertising ie 9. The website link is below.

http://www.youtube.com/watch?v=IOaE4MV5IcM

Artefact 5 - Evaluation

After discovering how interaction enhances the web application and that the most successful form of interaction is mouse effects. I chose to ask a controlled questionnaire with supporting imagery and links to a group of participant’s. The questions where based around two existing web applications. I wanted the artefact to not only gain information on genre but accumulate evidence that supports the pervious artefacts theories.

This artefact has concluded my research with accurate data that clarifies my theories and results from pervious artefacts. It gave me data that supported the results that websites do interact with the audience.
The genre was one of the variables I looked at in this specific artefact. The results showed me that genre isn’t an enhancing factor unlike structure. This was shown because everyone is different with different personal opinions and choices on what looks and works well. It showed how some websites visuals could be appealing to a set group but then not be interesting to a different set of candidates. I discovered that genre all depends on the audience and has a lot of factors that can act against it or with it. These factors mainly focus around people’s personality. This is a key factor to act on a person’s response to the genre of a web application. Personality is a confounding variable in the interaction between user and website. Section one proved this with evidence and data that constantly had mixed responses.

In the primary research I have done in this module I have discovered that to engage an audience or group of people with an online application it must have some form of interaction. In addition to this I found the most productive technique to do this is through the F model structure with mouse interactions. There is no particular genre that works best it’s all down to general preference.

Artefact 5- Results

Artefact 5 – Results
The results showed me that a website doesn’t have a set genre that works best. The only element that

Section 1: This section was designed to test genre. It consisted of a series of different genre images to see which the preferred one out of the four was. This would allow me to see which genre if any affected the interaction in web applications.

Section 2: This particular section got the candidate to test out two web applications. It then asked a series of questions.

Section 3: This section was created to get information to support the research in pervious artefacts.
I got a total of ten people to participate in this experiment.

Question 1: After looking at all four images which one did you prefer the look of?
(Circle the answer below)
Image 1 -2 people
Image 2 -3 people
Image 3 – 1 person
Image 4 – 4 people
The results in this question showed me how everyone is different and there isn’t a set genre that enhances the interaction.

Question 2: which one out of the four images caught your eye first?
(Circle the answer below)
Image 1 -3 people
Image 2 – 2 people
Image 3 – 2 people
Image 4 – 3 people

Artefact 5 - Plans

The plan:

I aim to use two existing web applications that both use an F model structure whilst consisting of mouse interactions (hover or click affects). The only difference between the applications will be the genre. This will not only support the pervious artefacts in giving data that clarifies the findings but it will also see if genre has any affect over the interaction.

Section 1:

This will consist of images of different genre. These will be four complete different genres with the same layout and structure to see if there is a preference in visuals and genre.
X4 images followed by a few questions to see the audiences opinion on genre

Section 2:

Website 1: This will be a F model structure with interactions.
Website 2: This will be a F model structure with interactions with a different genre to the first.

The two websites will be used by the participant. This will then be followed by a set of questions about the experience. It will ask questions about genre and interaction to discover if genre can be an affecting variable in web design or if it’s just down to personal choice and personality.
The first three will be asking about the genre
The next three will be about the interaction. This will clarify the pervious artefacts results and give me more data on the topic.

Section 3:

This just be a set of questions to get additional data on interaction in websites.

Artefact 5 - Ideas

Ideas:

This is the final artefact and for it I want to take that final leap in the research whilst complementing the pervious artefacts. I hope this artefact will test genre and see if it affects the overall effect of interaction in websites. Also I aim to gain strong evidence to support that interaction does keep the viewer interested.

Artefact 4 - Evaluation

This artefact was designed to test a range of viewer’s opinions and views in a set group. This would not only allow me to see their reaction individual but as group seeing how other people’s opinions can affect or change their own initial feelings towards a website. The experiment was also created to see which method of interaction is the most powerful in engaging the audience and keeping them interested. In addition to this I also asked the questions individual to give me a group transcript with additional data from each individual candidate. This gave me statements and both accurate data in a debate as well as an individual questionnaire format.
The results showed me that the best methodology to keep the viewer engaged was the mouse hover/ click affects. This created the most positive results for the interaction. The response from the candidates showed me that they were most engaged by the mouse over interactions and kept more interested by these features. This was supported by the results I gained in the individual questionnaires. Participant 1: ‘I preferred the first website the Guinness one as it had lots of unusual features that kept me interested.’ This showed me how all the key elements complemented the design to create an environment that kept the browser interested. The other key fact I discovered from this research was that the content was best displayed to the viewer through the mouse interactions rather than the game features. The game interactions where described in the experiment as distracting and stopped the content from being taken in whereas the mouse effects kept a balance of interaction with content.

In this artefact I discovered that the best form of interaction to engage the viewer with responsive content was mouse interactions. The focus group and individual questionnaires supported this with results that stated how the mouse interactions kept them interested and displayed the content without distracting them. This artefact clarified how mouse interaction can improve the experience for the audience and how it is the best technique in deploying interact features to interest the browser.

Artefact 4 -The results

The results from the individual answers:

Below are some of the results and responses I got from the candidates who took part in the focus group. This was to support the transcript and give additional data to my research.

The first website was the Guinness website.
The second web application was the red interactive agency.

Question 1 answer’s:
Participant 1: ‘I preferred the first website the Guinness one as it had lots of unusual features that kept me interested.’
Participant 2: ‘The Guinness website as it was more appealing visually and had a lot of different features.’
Participant 3: ‘The second one because it was more like a game than a website.’
Participant 4: ‘I liked the red interactive website because of the game environment it used.’
Participant 5: ‘The second because of its unique style.’

This showed me that the candidate’s where mainly in favour of the first web application. As the answers described the engagement of the different interaction on the first website kept them interested and more involved with the variation of different features.


Question 2 answer’s:
Participant 1: ‘I would use the first website.’
Participant 2: ‘preferable the second because of its unique style.’
Participant 3: ‘The first because it was more appealing.’
Participant 4: ‘The first one because it’s simple to use and fun.’
Participant 5: ‘The second website as it’s different to ordinary websites.’

This showed no matter what the content was the user would use the Guinness website rather than the second portfolio web application. In addition the data showed me that the mouse interactions created an atmosphere that appealed more to the audience and would be preferred in daily use.

Question 3 answer’s:
Participant 1: ‘The first was the most interesting for me’
Participant 2: ‘I found the first one portrayed the content in the best manner.’
Participant 3: ‘I liked the second one as it portrayed the content in a different manner too normal websites.’
Participant 4: ‘I believe the first one was the more interesting out of the two as the content was organised well and was easy to use.’
Participant 5: ‘The first because I found the second distracted me from the content.’

This showed me which out of the two websites not only kept them interested but worked to portray the content through interactions well without distracting them. The results showed me that the method that did this best was mouse interactions instead of game based interactions or animations.

Overall I discovered that a web page can use interaction in different ways but the best method of interaction is mouse affects. This works best according to the data to keep the viewer not only engaged but also interested whilst using the website. It also was the best methodology to portray the content.

Artefact 4 - Transcript

Below is the introduction into the transcript and the debate/conversation to the first question.

This is the debate from the focus group. It was done after the five candidates tested both websites and then began with the questions as starting points to the topic. I asked the entire participants individual to fill in a question sheet with the three questions as in the debate/ focus group as all the participants didn’t have an opinion or make a comment in some of the areas. I have named each individual as a participant and number to keep them anonymous. Overall I believe I got some good results but unfortunately the conversations and debates didn’t last as long as I hoped. This is one of the reasons I decided to take it further by asking the questions individually.


Me: Ok after looking at the two websites I’m now going to begin the questions. Question one; After looking at both websites which one did you prefer and what where the reasons for this?
Participant 1: I preferred the first one because it had certain features that stood out and
Participant 2: I also liked The Guinness website as it was more appealing visually and had a lot of different features.
Me: Did anyone like the second website instead of the first?
Participant 3: I preferred the second but did like the game like environment of the second.
Me: why was that?
Participant 3: Erm because of the game like aspects.
Participant 2: I found the game like aspects distracting and hard to use.
Me: participant 3 why did you like those aspects more than the interactions in the first website?
Participant 3: because its different and instead of it just being a mouse to get around the website you can use the keyboard in the same way controlling a character. Which I found quite cool and more interesting to use.
Me: Ok

The Client Website - So Far

The client project is getting to a level that functions with all the content.
Below are a few screen shots of the website so far.
I have posted three of the pages to show the graphics/design of the web application.

Artefact 4 - The questions

Questions

Question 1:
After looking at both websites which one did you prefer and what where the reasons for this?


Question 2:
Which website would you use on a daily basis?


Question 3:
Which website do you believe was the most interesting in portraying the content?

Artefact 4 - The websites

The two interactive websites

These where the two web applications that where used in this artefact to test the two most interactive methods used in web design. These where previously discovered as the most popular in artefact two. I chose to ask a small group which would provoke a small debate whilst gaining the data. In addition I would ask the questions individual to get some set answers that weren’t affected by other people’s opinions or views. I managed to ask a set group of five three set questions that would start a small debate on the topic.

http://www.guinness.com/en-gb/home.html - The Guinness website (Mouse interactions)

This was the first webpage I showed the group with numerous mouse over interactions and other animations that where responses to the mouse click or mouse hover. The website consisted of a variety of different interactive features to engage the user all in the form of mouse effects.


http://ff0000.com/ - The red interactive agency website (game interactions)

This was the second website and unlike the first website that was mouse interactions this one was a game interaction. It uses a virtual environment with a game like structure to keep the viewer interested and connected with the content.

Artefact 4 – Ideas

The new plan for this artefact is to take the research that bit further by analysing the two specific forms of interaction that according to one of my last artefacts keep the viewer interested. These where games/animation and physical mouse effects to present the content. The reason for this is to see which is the most interactive after discovering these two techniques keep the viewer engaged and interested. I aim to now investigate how these work alongside the content to get the message across whilst keeping them interested.

I want to see which works best but at the same time stop any variables from affecting the outcome of the experiment. I will do this by keeping the websites in the same genre and use multiple examples for both. In addition I will ask a specific group to test the commercial websites and then make notes of a debate and also do a couple of one on one interviews afterwards to get data on the topic.
I aim to test the participant with a set of three websites that use

This will be a few websites tested by the group and a debate organised to see which website they preferred and why this will give me an insight into which is the most positive form of interaction in web design.

Artefact 3 - Evaluation

The aim of this artefact was to test one of the key variables in creating a website. After looking at interaction and how it affects the user’s opinion I chose to take it further by looking at the structure. I began by looking at different design principles of Constantine and Lockwood and the two main layout models. This allowed me to see the viewer’s response to structure and interaction.
I wanted to see if structure and design had any affect over the perception of the viewer and interaction in websites. I did this by creating a three section experiment testing both structure and interaction taking into account the viewer’s response.

The overall data showed me that structure in some cases can affect the content and enhance the experience for the browser. This been said the results showed me that the F layout was more popular than the Z model in keeping the viewer engaged. In addition the data showed me that users where more inclined to stay on a web page if it had a clear structure. It also made the websites interaction more effective if placed in key points. For example if it was placed in the F layout in one of the key points it would have more effect. This could be crucial in the first few seconds of entering a website. As it could either keep a viewer interested or make them go elsewhere. The principle that attracted the most participants was the structural design. This showed that browsers want a well-structured design with content in set places that is easy to take in.

I firstly tested structure in section one seeing the browsers opinions towards different design principles. This was designed to gain background information for the different design principles. I next asked the browser to look at two commonly used layouts and get them to clarify their favourite (the one that appealed most to them). Then to test the interaction against the structure I got three web links all using interaction with a different design model. To ensure genre or personal taste didn’t have any affect I ensured all the websites where of the same style/genre.
To conclude this artefact showed me that following the different design principles and layout maps can in fact benefit the webpage. They can do this by having a set structure that places key interactive elements in places that the viewer immediately looks at when entering a web page.

Overall I have managed to see what principle works best in designing a functional website and what layout enhances the interaction in a web application. In addition I have discovered that structure can be a way of improving the experience and keeping the viewer interested. The data shows that the F model is the strongest method of keeping a viewer interested through interaction enhancing the different elements.

Artefact 3 - Results

The results and data – Artefact 3

Listed below are the questions with the answers and results.
Instead of doing hand-outs of this questionnaire I did it virally asking friends to either print out or fill in online. This worked better in getting quick responses to analysis.

I managed to get 15 participants to take part in the survey. In this questionnaire I found it irrelevant to ask background questions such as name age or address. So instead I began by asking set questions on the structure before taking the research further with existing examples of layout and interaction in websites.

Section 1 results:
This section was designed to look at the principles of Constantine and Lockwood. I chose four select models all unique. I gave the title and description for people who haven’t heard of them. I then asked the participants a set of select questions that would allow me gain a clearer understanding of the audience’s views. The results showed me that the design principles had a mixed response for structural and simplicity. This made it clear that structure can be a method of enhancing the viewers experience and also improve the interaction. The two preferred methodologies where structural and simplicity. I took this research further in section two by looking at set models with imagery.
In this project I have discovered that the most popular principle overall was the structural principal.

Question 1: This question had a mixed response showing me that there is no specific principle that works best in the viewer’s eyes.
1)8
2)2
3)3
4)2

Question 2: The structural principle was the design that if in the form of a web application would immediately grab the viewer’s attention.
1)8
2)3
3)1
4)3


Question 3: This data showed me that two of the principal’s that previously grabbed the audience’s attention weren’t web applications that would be considered whilst browsing the web.
1)9
2)6
3)0
4)0

Question 4: This question showed me which design kept them most interested and engaged. The highest one was the structural principal followed by the simplicity principal.
1)8
2)5
3)1
4)1

Question 5:
1)9
2)5
3)1
4)0

Section 2 results:
This section was designed to see what visually appealed to the participants in structure.
The F model was the most popular with 10 out of 15 people preferring the design to the Z model.

Section 3 results:
Unlike the pervious sections this one looked at both interactions with structure. It helped me to understand how structure can keep a web page organised whilst keeping the viewer engaged.

Question 1:
1)9
2)4
3)2

Question 2: This showed me that the page that was most visually appealing was the page that kept the viewers most interested. This was the F model layout according to the data.
1)8
2)5
3)2

Question 3:
1)2
2)4
3)9

Question 4:
1)10
2)4
3)1

These results have helped me to see how structure can affect the interaction within a web application. The results showed me that structure can enhance interaction in a web application but it all depends on personal choice and the specific model used. For example the most popular in this survey was the F model with the structural principle being the most appealing. This combination would work to enhance any forms of interaction within the web application which would keep the viewer engaged and interested. This shows that certain techniques can improve interactions in websites and make them be noticed sooner. In addition this keeps the viewer interested and engaged quicker all working together to create a memorable experience.

Artefact 3 - The questions

The Plan and Process - Below is the questionnaire with the questions without the two images.

I aim to make this test just about the structure and interaction whilst taking into account the audiences response.
The structure will be based around the elements of the Constantine and Lockwood design principles. This will consists of the F model.

Section 1:
The four structure principles (These are four different methods of designing a web application).
Read each principle and the summary then answer the questions below to your best ability.

1. The structure principle:
Your design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another.

2. The simplicity principle:
Your design should make simple, common tasks simple to do, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.

3. The visibility principle:
Your design should keep all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with too many alternatives or confuse them with unneeded information.

4. The feedback principle:
Your design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users. After looking at all four images answer the questions below.

1.Which Layout would you find easiest to read/use?
(Tick the answer below)
1)
2)
3)
4)

2.If the principles where web applications which one would grab your attention immediately? (Tick the answer below)
1)
2)
3)
4)


3.When browsing the web which one would you be most inclined to use?
(Tick the answer below)
1)
2)
3)
4)


4.If all the principles where different web pages which one would you spend the most time on?
(Tick the answer below)
1)
2)
3)
4)

5. Which principle would keep you most interested when browsing the web?
(Tick the answer below)
1)
2)
3)
4)

Section 2:

Below is two images of the same design but laid out differently which one do you prefer.
(Circle the one that you prefer).
F model: Image A

Z model: Image B

Section 3:
Go through each web link in chronologic order and try out the different features.

1. F layout – Interactive website – Pixar -http://www.pixar.com/index.html

2. Z layout – Interactive website – Lions gate -http://www.lionsgate.com/

3. Other layout – Interactive websites – DreamWorks - http://www.dreamworksanimation.com/

Please answer the questions below to your best ability.
1. Which website out of the three did you find most visually appealing?
(Tick the one you preferred)
1)
2)
3)

2. Which webpage kept you most interested?
(Tick the one you preferred)
1)
2)
3)

3. Which web page was your least favourite?
(Tick the one you preferred)
1)
2)
3)

4. Which web page did you find most entertaining?
(Tick the one you preferred)
1)
2)
3)

5. What feature out of all the webpages stood out the most too you?
(Circle the answer below)
A) Interaction – Mouse effects
B) Animation/ sequences
C) Games
D) Other

6. Which layout out of the three did you prefer?
(Tick the one you preferred)
1)
2)
3)


Thank you for participating.

Artefact 3 - Design principles and layouts

Artefact 3 is designed to test structure and if it affects the interaction within web applications. So to test this I looked into different design principles and did some background research on layouts.

The structural layouts I considered where the F and Z model.

The Constantine and Lockwood design principles:

The structure principle:

Your design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another.


The simplicity principle:

Your design should make simple, common tasks simple to do, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.


The visibility principle:

Your design should keep all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with too many alternatives or confuse them with unneeded information.


The feedback principle:

Your design should keep users informed of actions or interpretations,changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.

Wordpress Plans

I have decided to create parts of the website in word press. This will give more perks and advantages to both user and client.

The different features that Wordpress could offer are:

A blog: This will allow the client to import images, data, schedules or other relevant information.

A weather forecast: This will allow players/clients to see the weather forecast and be updated on what equipment they will need for the conditions.

A calendar: This will act as a schedule producing information on when the next training session is or if a session has changed date or time.

A login form: I believe this particular feature will open up a section for players to see additional information from their coach on progress and training, whilst keeping it confidential and personal to them.


I aim to create a database in Word press that will give the client easy access and ways of updating the website whilst having those extra features that engage the browser and keep them well informed. These additional changes will help keep the web application one step ahead of competitors and ahead of times. I aim to create a blog with login and feeds to keep the browser up to date with news.

Artefact 3 - New plans

X3 images/wireframes

Followed by a set of 5-10 questions

X3 website links – Followed by 5 questions and 2-4 statements.

I have a understanding of that interaction is a key element in kee3ping the interested and engaged in the content. I aim to now see what variables can enhance the experience and maybe affect the outcome of the users experience. I will do this by showing three different wireframes and getting the audience too tick which one they were drawn to first or visually preferred. This will give me a starting point which I will take further by developing a three page application that uses the same content on every page just in a different layout each time. In the pages I will use a balance of interactions with content. It will ensure that the user will be purely tested on the structure. This will hopefully show me if structure can affect the browsers time spent on a website or not. In consideration to this I will use the design principles of Constantine and Lockwood, making three different layouts. The website links will be followed by a set of questions and statement’s to give me specific data that will give me a clear answer for if structure does enhance interaction in websites or not. This will prove interesting as apparently to grab the audience’s attention the content must be portrayed in a certain manner and layout, with interactions and engagement keeping them on the website but will this show in the experiment.

Questions I aim to investigate:

Does this affect how interactive a web application is?

Or can it enhance how interactive the web application is?

Does it have any affect over how interesting or appealing a website is?

Artefact 2 - final results

The final results showed me that websites interactive with the browser to keep them interested and engaged. After gaining possitive research to support this theory i intend to see what variables can enhance the experince and affect how interested a viewer is on a page. I aim to do this for the next artefact. After discovering that physically features on a website not only engaged the viewer but keep them focused.

Below is the second set of data to support the first questions and data i gained from google anaylitics.

Interactive Design (book)

I read specific articles within this book that helped with my primary research. It gave me a few theories and ideas of my own on how to test interactive design whilst having some useful information. Below is a spinet from chapter 3 which i found quite interesting.


Chapter 3: Cognitive Aspects
'In this chapter we examine cognitive aspects of interaction design. Specifically, we consider what humans are good and bad at and show how this knowledge can be used to inform the design of technologies that both extend human capabilities and compensate for their weaknesses. We also look at some of the influential cognitive-based conceptual frameworks that have been developed for explaining the way humans interact with computers. (Other ways of conceptualizing human behavior that focus on the social and emotional aspects of interaction are presented in the following two chapters.)'(interactive design, 2011)

Below is the web link to the website.

http://www.id-book.com/

Artefact 3 - Ideas

After gaining positive results and feedback towards the theory of websites being interactive I aim to take this research to the next level. In organise some hand on data in the form of a focus group. This will allow me to test them as a group and individually using live examples followed by a few starting points to debate. This will allow me to document the discussion and see the audience’s response and reactions towards interaction within websites. The notes on the debate will give me key quotes and figures that will hopefully support the theory of interaction being a key element in engaging the browser and keeping them interested.

The plan

I plan to keep the test as accurate as possible taking into account all acting variables.

I aim to start by getting an interactive web page against a non-interactive website then innate a debate that I will take notes from and then conclude this with a few one on one interviews to get a select few opinions.

Artefact 2 - Evaluation

The website was produced to gain a stronger development on the research undergone in artefact one. Allowing me to gain an insight into what works better in websites to interact with the browser and keep them interested.

After gathering positive data towards interaction in this website I realised that web applications must consist of a working balance between interactive features and content to keep the viewer engaged and interested. I took the theory further with artefact two by gaining some in-depth data using Google analytics and a survey to give the best possible results. I chose to categorise the different forms of interaction this gave me a greater understanding of each specific method. It allowed me to see what worked best in keeping the viewer interested.
This artefact showed me that browsers are more interested by interactive website but in particular more interested by physical interactions such as games or animation. Question two in the survey supported this with the majority agreeing with that animation and games are the most interactive feature. Question 5 specifically asked the browsers what feature kept them interested. If you compare these results to question 4 it shows that even though the participants where split over page 1 and 2 for which was most interactive still 2 people were interested by media factors from page 4. This still showed that the two most interactive features that kept the viewer engaged was mouse interactions and games/animation.

Overall this artefact has taken my research to the next level in understanding the different techniques and how they can affect the time spent on a web page. It also showed me how website environments can be improved with the use of interaction creating a more user friendly experience. In the next artefact I aim to take the research further by a focus group/ interview to get some quotes from users and see the reactions for myself.

Artefact 2 - what I discovered

This question specifically asked the browsers what feature kept them interested. If you compare these results to question 4 it shows that even though the participants where split over page 1 and 2 for which was most interactive still 2 people were interested by media factors from page 4.
These results clarified the theory from artefact 2 whilst supporting the data I had got from Google analytics. Overall from this artefact I have discovered that games and animations seem to keep the viewer more interested than non-interaction features such as text imagery or even video/audio.

The overall results showed me that most participants preferred the interactive web pages in comparison to the non-interactive. The participants were unaware which pages where the interactive and which weren’t to allow a fair test. In addition to the results accumulated by Google analytics I added a set of questions at the end of the test. This gave me more useful data as well as the results I got from artefact 1. This made the theory even more clear after being influenced by the questionnaire it was made even more obvious from the in-depth data that websites use interaction to keep the viewer interested. This artefact was created to give a clear comparison of time spent on a web page if it is interactive in comparison to a non-interactive web page. This gave results that proved the argument. It also allowed me to test a few variations of different interactive features to see which were most appealing. The data showed me that to grab the audience’s attention the webpage must use certain interactive features alongside the content.

Artefact 2 Results and analysis

I developed a design that would test the viewer’s engagement with a web application whilst testing the interaction in different forms. I have done this by using Google analytics to test time spent on the website and the time spent on each page. This generated results that gave me clear figures of which page kept the viewer most interested and what interaction worked best. In addition to this a small set of questions were asked at the end to give extra data.


The results
Below is a few of the results from Google analytics followed by a few sentences about what I have found. In addition to this the questions from the end of the experiment are listed below with the results.
The main feature was the custom report that I created. This tested time spent on the website, with average time spent on each page. It used metric features against dynamic features such as daily basis.
Here is three examples from the Artefact.
1. Page 1 (10:00 a.m.) --> Page 2 (10:04) --> Page 3 (10:10) --> Page 4 (10:11) -- >Exit (10:13)
2. Page 1 (9:00 a.m.) --> Page 2 (9:03) --> Page 3 (9:06) --> Page 4 (9:08) -- > Exit (9:12)
3. Page 1 (2:00 p.m.) --> Page 2 (2:05 p.m.) --> Page 3 (2:16 p.m) --> Page 4 (2:19p.m) Exit (2:25p.m.)

The results showed that the most common time spent on the website was around 16 minutes.
Here is the average time spent for each page:
Page 1 (mouse interactions/ hover effects): 2-5 mins
Page 2 (Animations and games): 6 – 12 mins
Page 3 (text based): 1-4 mins
Page 4 (video and audio): 2-6mins

The results showed that interaction does keep the viewer more interested and work to create a more engaging experience. This is shown with the lack of time spent on the non-interactive pages. The page that got most time spent on was the page that used the highest amount of interaction in flash based games and animations that required a physical input. This was the main focus of this particular artefact and with the results from artefact one they both point to the outcome that websites interest the viewer more with physically interactive features such as games/ animation and mouse effects.
The other results that I got from Google anaylitics gave me background information that was useful but not particularly necessary for this investigation, such as location, new vs old user etc.
The questions that followed the experiment are listed below with the results.
1. After using all for pages which one did you prefer?
The majority replied that they preferred using page 2 with the next most popular being page 1 (mouse effects/ physical interaction). Page 1 and 2 where the two interactive pages out of the four which showed how interaction can enhance the browsers experience.
2. What feature out of the website do you believe was most interactive?
Animation/games – 8 people
Mouse over effects and interactions -6 people
Text - 0
Video and audio -2people
Other -0
The results showed that the participants believed the features on page 1 and page 2 where most interactive. This shows that the viewer’s understood what interaction can take the form of in websites.

3. Out of all four pages which one kept you most interested?
This had a very similar outcome to question 1 with the majority answering page 1 and page 2. This clarified that interaction can keep the browser more interested even more than media or text.

4. Which page do you believe was most interactive?
Page 1- 7 people
Page 2- 9 people
Page 3- 0
Page 4- 0
This data showed me that the browsers found the games and animation the most interactive and engaging.


5. What particular feature in the website kept you most interested?
Animation/games – 8 people
Graphics and imagery – 0
Mouse over effects and interactions – 6 people
Video and audio – 2 people
Other – 0

Client website in Wordpress

I have decided to create the website in word press. This will give more perks and advantages to both user and client.

The different features that Wordpress will offer are:
A blog: This will allow the client to import images, data, schedules or other relevant information.

A weather forecast: This will allow players/clients to see the weather forecast and be updated on what equipment they will need for the conditions.

A calendar: This will act as a schedule producing information on when the next training session is or if a session has changed date or time.

A login form: I believe this particular feature will open up a section for players to see additional information from their coach on progress and training, whilst keeping it confidential and personal to them.


I aim to create a database in Word press that will give the client easy access and ways of updating the website whilst having those extra features that engage the browser and keep them well informed. These additional changes will help keep the web application one step ahead of competitors and ahead of times.

Google Analytics

I have used Google Analytics to create data for the website I made. It will allow me to gain a better understanding of how interaction works within websites whilst seeing which works best.

This is the first time i have used Google Analytics and i documented some of the pages such as the Overview that contained useful information. Also i managed to make my own custom form that measured time spent on the website and time spent on each page. This allowed me to see which page the user stayed on the longest.

The Overview


The vistor overview

Online Survey

This website was a useful tool in creating a custom survey that fitted in at the end of the experiment. On the website it offered different forms, questionnaires and surveys. Below are a few screenshots of the website itself.

This the client side overview showing surveys or forms you have made.



These are the different forms you can create with a small description.

Artefact 2 - Question list

The list of questions
After using the web application and participating in all four pages could you answer the following questions below to give an indication of your response.
Please fill in the answer to your best ability.



1. After using all for pages which one did you prefer?

2. What feature out of the website do you believe was most interactive?

3. Out of all four pages which one kept you most interested?

4. Which page do you believe was most interactive?

5. What particular feature in the website kept you most interested?

Thank you for participating and answering the questions above.

Below is a screenshot of the online survey i created.

Artefact 2 wireframe and ideas

This is the first wireframe and ideas for artefact2.

Artefact 2 - website experiment

I have created a simple four page website to test website interaction and how it engages the audience. I also looked at how these features can keep the browser more interested.

Below is a few screenshots of the website.
The splah page



Part of the home page/ page 1 of the experiment



Part of page 2



This is the final image page 4

Different Interactive Features

Links in dialogue

Light box

J Query gallery

Marquee

Calenderer

Mouse over affects

Physical click of the mouse features

The website plan (Artefact 2)

Splash page- This will introduce the participant into the experiment with a small introductory paragraph.

Page 1 – Home page (Java script and J Query)
This page will consist of mouse over features and other forms of interaction that will creating an interactive environment.

Page 2 – A flash based and animation webpage
This page will be a different form of physical interactivity.

Page 3 – HTML and CSS
This will just be text with minimal images. This page will be one of the non-interactive page.

Page 4 – Video and Audio
This page will consist of video and audio to show that some features can seem interactive but actually just be consumerism not physical interactions.

Final Plans for artefact 2

Interactivity is this key element in keeping the viewer interested. The link below is a blog entry that supports that without interactive features a website can be boring and not engage the browser.

http://www.hongkiat.com/blog/importance-of-web-interactivity-tips-and-examples/

After the first artefact I plan to take the idea of interaction in websites further by getting a group of participants to test it and answer a few specific questions on the experiment. This will hopefully produce positive data like the first artefact with accurate results.

The first page will consist of simple mouse over effects with simple Javascript and j Query.

This will use features such as a j Query gallery with simple Javascript imagery and dialogue effects.

The second will be a flash based animation and games to physically engage the audience with interaction.

The third page will consist of text using HTML and CSS. This will be the non-interactive page to test both ends of the spectrum.

The fourth will be a video and audio page this will try to see if people are tricked by consumerism instead of physical interaction.

The four page design will be followed by a unique set of questions relevant to the test. It will be also tested online with Google analytics with additional heat maps to track what the users looked at.

To summarise the structure two pages will test the two main different interactions whilst the third and fourth will test for non-interactive to see what grabs the viewer’s attention and keeps them interested.

Artefact 2 Plans

Plans and ideas

The plan for this artefact is to extend my knowledge of website interaction and the techniques used to keep them interested. This will hopefully give me an insight into what method works best.

This particular artefact is influenced by the questionnaire. After finding that viewers believe websites are interactive and also the understanding that browsers want to be interested when entering a website. I chose to take this theory further by developing a four page web application. This would include four types of interactive pages that would test the viewer’s reactions to come to a conclusion of what works to keep the viewer interested.

I will be testing how interaction is used in websites to create an interesting and engaging environment for users. I will do this because it will allow me to see what works best and how websites keep the participant interested in different ways.
I will begin the process by producing a 4 page website I will base each page around the same topic just with a different technique of producing the information. This will allow me to use Google analytics to produce a range of results. This will show me how long the person stayed on the website and further what they looked at with heat maps to support the findings. In addition to this I will follow up the experiment with a set of questions. It will give some extra information on the interaction within the website and how these kept the viewer interested. I aim to do this as the first artefact produced data that gave me the understanding that the websites use interactions to stimulate the audience and keep them interested. I personally wanted to take this further by creating my own website that can test these features. It will consist of two different variations of good and bad techniques/ non- interactive and interactive. This will allow me to see a difference in time spent on the page and also see if the viewer was interested by the page or not. This will tell me what works best and what interests the viewer most when interacting with them.

The first group will be mouse overs / mouse interactions. These will test the viewer and keep them engaged. The different effects will require a reaction from the browser.

The second group will be just sections of text and with little of anything else. This is to see how non interactive content can quickly stop the browser from being interested.

The third will be interactions such as games and interactive diagrams that all require a physical reaction from the audience.
The forth group will be minimal images and text with no forms of interaction with a clip or two. This will include video and audio to an extent.
The first group – this is designed to test for response and interaction in websites
The second group - this is designed to create a non-interactive environment that doesn’t engage the audience. This will give a comparison between the interactive pages to see the difference in results.
The third group – this group will consist of different interactions to the first but will test for interaction in website and hopefully give a conclusion of how they work to keep the viewer interested in comparison to non-interactive applications.
The forth group - this will be a middle ground with very few interactive features but other forms of media such as video and audio that engage the browser. This will see how the in between ground of interactive and non – interactive websites work in keeping a participant interested. This web page will consist of both methods.

Questions at the end of the website will allow me to get a better insight. It will give me clear pointers on what works best interactively in websites and what keeps the browser most interested.

Interactive Website Article

How Does One Achieve Website Interactivity?
There are many elements that can be focused upon to achieve web interactivity that attracts users. The main subject of the website should be taken into consideration. This can give a clue as to the kind of interaction to be used. For example, a product website will have various categories on display. The range should be presented in an interactive manner rather than plain rows of products. A 3Dimensional Flip Book can be used to its advantage to showcase a range of products with the relevant information. A user gets engaged whilst flipping through the book.

The creation of these website interactivities requires time to be spent on technical details. However, in the recent times, designers can create these interactivities within minutes without any programming with rapid interactivity software that is available in the market

This is an article on a blog that had different examples of interactive websites. It had a positive theory of how interactive websites keep the viewer more interested.

http://www.hongkiat.com/blog/importance-of-web-interactivity-tips-and-examples/

Evaluation - Questionnaire 2

This is the evaluation after doing the second part of artefact 1. I created a second questionnaire to ask more precise questions and get more accurate data.


Evaluation

The data from this questionnaire resulted in giving me accurate results and an understanding on how responsive content works. In addition it showed me what engaged and interacted best with the audience to stimulate the browser and keep them interested. These results showed me that being interested is one of the most important elements of creating a website. If a website doesn’t engage the browser or keep them interested it can result in them looking elsewhere for the content. Question 12 supports this statement with the majority of the candidates believing that websites need to keep them interested and in addition keep them engaged.

In one of the questions there was a split better two of the possible answers for what most interests them as a browser content scored high but was just beat by interaction and engagements. This showed that content is a main factor of why they use the web page but keeping a viewer interested doesn’t just rely on the content, it also relies on interaction and engagements that stimulate the audience with physical features.

The results from this questionnaire made it clear that there is a demand for interaction in websites. Also the web page must engage the user to keep them interested. I intend to exploit these findings by producing an interactive web application with various techniques to test the user and see what features keep them most interested, What do they believe is most interactive and what engaged them. This will give me an idea of what features work best in interacting with the browser and also be a way of comparing an interactive website with a non-interactive sight to see the audience’s opinion.

Questionnaire addition 2

Below is a couple of the questions and results from the second questionnaire I did.

12. When browsing the web do you agree that websites need to interact with you as a user and keep you interested, to prevent you from looking elsewhere?

Yes – 15 – 100%

No – 0

This showed that every candidate believed that websites should interact with the user and keep them interested. This would prevent them from going elsewhere.


10. What part of a website interests you most?

1: content -6

2: Interactions and engagements - 8

3: Other -1

In this question I aimed to see what people found most interesting. It would give me a clear insight into what they thought. The data showed that content was important but interactions and engagements where more affective in keeping the browser interested.


4. Are you more interested to stay on a website if it has physical features that stimulate a reaction?

Yes - 14

No -1

This question gave positive feedback towards physical features that stimulate a reaction within websites. This extends the theory that people want to be engaged on a website and have physical interactions that stimulate.

Project process

This is the new project process for the proposal.

Client Website so far

This is the client website so far. There is still a few changes to make but the basic structure is there.

Questionnaire Evaluation (Artefact 1)

I chose to do a questionnaire for the first artefact as it would give me an insight into the audience’s opinions and their thoughts on the topic. It would also work as a great foundation for the next few artefacts.

After doing a range of background research I translated my report question into a series of questions that would reflect the study and gain results that would support my argument. In addition it helped me gather accurate results. The results showed that a hundred percent of people where under the impression that websites are interactive. This supported the argument that websites use specific design techniques and interaction to engage viewers and keep them interested. The data also showed that people believe that mobile internet is more interactive than desktop applications. Is this because people use touch screen phones which creates a new and exciting environment for mobile users.

The likert scale questions consisted of statements that where answered with a scale of 1-5. This created positive results but additionally let the candidates strongly agree/ disagree with the statement. This produced accurate responses to each statement whilst giving clear results that could be compared and analysed. In addition to this I used charts and tables to display the data and help clarify specific points and arguments that supported the theory that websites do interact and engage the audience. Specific answers such as ‘The animated website because the pictures keep my attention and engage with me, whereas the writing image was confusing and unclear. ’ This insinuated that browsers believe websites with interaction interest them more than plain text that can be daunting.

Overall the results showed me that no matter what the age or gender the candidates believe that web applications are interactive, using audio and video to engage them. It was clear from the questionnaire that imagery and audio/video are the two most popular forms of interaction used. The experiment showed that these two groups can influence people to stay on a web page or used incorrectly go elsewhere.

This clarified the secondary research I had done and also supported the argument that websites interact with the audience using responsive content to engage the browser and interest them.

Questionnaire Results (Artefact 1)

A few of the questionnaire results with charts and tables.

Question 16: What key factor would make you engage with a website?

Imagery -17 people
Audio -18 people
Video – 23 people
Animation/games -12 people
Other - 0





Question 6: Do you think websites are interactive?

Yes – 60 people (100%)
No – 0 people

This question showed me that everyone believes that websites are interactive in some shape or form. This proved a great success in supporting the argument that websites are interactive. The question had a second part that was created to see which factor they believed interacted.

If yes what factors do you think engage the audience. (E.g. colour scheme, imagery, video etc.)

1 - Colour scheme and graphics – 7 people
2 - Audio and video – 30 people
3 - Animation and page transactions – 13 people
4 – Other – 10 people





Question 7: When using a website what factor of the web page keeps you most interested?

(Circle your answer)

1 – Content - 17
2 – Interactions, such as transitions and animation -11
3 – Video and audio - 30
4 – Other -2

This question was a key way of comparing the different features and how they may enhance the viewer’s experience.

Designer - Impero

Designer: Impero
www.imperodesign.com


“One of the greatest things about the internet lies in the freedom for people to not just build websites in a certain way, but also to create them for just about any purpose. The epitome of this freedom of expression is City Dogessentially a specialist service that promises to make urban pooches better behaved” (dotwebdesigner, 2011). The website has a real professional feel to it. The website creates a memorable experience and uses bold graphics to create a functional application. The use of bold typography in a range of styles, coupled with a two-tone color palette and some subtle decorative features taps into current trends, while also remaining lightweight in build. Overall I think the design is very impressive using a subtle design that conveys a clear business message.

Final wireframe design (client project)

After doing different background research and looking at existing companies in this genre I produced this design. It followed the design methods and structural themes that websites in this field follow to give a design that is fit for purpose. I used a selection of colours that complemented each other but also signified football in the colour scheme. For example the green is a significant colour to football that represents many different things in team logos, to the stadium pitches. The structure itself is spilt into three main horizontal sections with the links and header in the top, captions of text and gallery in centre, with information, contact and footer at the bottom. This breaks up the content making it flow better and much easier to understand.
Below is a screen shot of the design with annotations and labels to explain the different plans and why.

Mock up designs (Client Project)

I made three mock up designs with different structures and colour schemes. The images are annotated with the plans and ideas.

Robots.txt

“The Robot Exclusion Standard, also known as the Robots Exclusion Protocol or robots.txt protocol, is a convention to prevent cooperating web crawlers and other web robots from accessing all or part of a website which is otherwise publicly viewable. Robots are often used by search engines to categorize and archive web sites, or by webmasters to proofread source code. The standard is different from, but can be used in conjunction with, Sitemaps, a robot inclusion standard for websites.” (wikipedia 2011)

I looked at numerous websites to gain an understanding of robots.txt to see how it worked and what it is used for. A robots.txt file on a website will function as a request that specified robots ignore specified files or directories when crawling a site. This might be, for example, out of a preference for privacy from search engine results, or the belief that the content of the selected directories might be misleading or irrelevant to the categorization of the site as a whole, or out of a desire that an application only operate on certain data. I hope this document will work as a factor to the live client project. It may take me a few attempts to get it functioning live but the text its self seems straight forward.

Artefact 1 (Plans and Ideas)

Below is the plans for artefact 1 and ideas.

I intend to analysis the data found from this questionnaire using a series of tables and charts. I will then review the results and statements to come to a conclusion for the research. This will give me an insight into the audience’s opinions and also an understanding of if interaction is a key element. It will also help to create the next two artefacts as they are based around the structure of how design theories and interaction can affect the viewer’s perception.

I chose to manufacture a questionnaire as part of the research as it will offer a chance to get other opinions on the topic and analyse the different variables. This is the first of five artefacts and will be the foundations to my primary research. The research will enable me to understand the audience and their thoughts on web applications on both mobile and desktop, but mainly seeing the interaction of content. Interaction is a factor in web design and helps to engage the audience and keep them interested. This data will help to see if it does or doesn’t work. In addition taking into account the different structures and design theories. This may support the research in the report or may show it to be a different outcome. I aim to see how websites interest the viewer, and does this develop into an addiction. The questionnaire proved a perfect way to start the research.

I began the development of my questionnaire by analysing existing questionnaires and surveys to see the ideal way to produce one that gets background research, answers the question in hand and weighs up all the possible variables. I used a range of different types of questions such as multiple choice. This produced different types of answers to analysis. It was split into sub sections with the opening questions giving a bit of background to the participant. The next set of questions consisted of multiple choices and a variety of questions for the participant to express their opinion. This open answered question will help to gain the different views which will give accurate data to analysis. To ensure the questions met the needs of the topic I also looked at a few practitioners to see how they approached the market and used questionnaires to achieve a set of data. That was accurate and weighed up all the different variables.

In distributing the questionnaire I chose to hand it out to a selection of people. I first split it into two groups of 50. This being people who use computers on a regular basis and people who don’t. This would test if interaction in websites appealed to both people who are well equipped on computers and people who aren’t. After this I ensured I got a mixture of both genders and all age groups. This would clarify if these two factors have any input in the interaction side or if they don’t affect the results at all. The plan was to distribute the questionnaires across the majority of age ranges and both genders with a selection of computer literate and non-computer users. This was to check all possible effecting variables that may be a part of the equation. I discovered that the best way to do this was send a chain mail to people through Hotmail or social networks whilst to get the extra forms filled out I would approach others with a one on one method.

Fallback code for HTML5

This is a fallback code that works to enable different tags that dont show up in internet ie6, 7 or other browsers.

http://remysharp.com/2009/01/07/html5-enabling-script/
Fall back code for div tags and features on HTML5. Website above.

Questionnaire (website)

How To Create The Perfect Client Questionnaire is an article that explains how to design and make the best possible questionnaire. It was a great starting point for designing my questionnaire and making a set of questions that asked all the points i needed to understand.

http://www.noupe.com/how-tos/how-to-create-the-perfect-client-questionnaire.html

ARTIST/DESIGNERS - bascule

The corporate home for Tokyo-based web studio Bascule Inc you’ll see the site ‘exhibits charming cultural contrast with western designs’ (webdesigner, 2011). The page is very long and feels like a blog with paragraphs of text broken up by little flash animations and bright vibrant images. “Our mission is to promise high-quality user experience to people who visit our websites,” says the company’s PDF brochure. “We aim to provide unique and sophisticated communication design, leaping over the traditional paradigm of web creation.” The website produces unique illustrations with vivid and extravagant scenarios. The feature that I found most appealing was a very amazing animation. If you scroll right to the bottom of the homepage there is a small creature with a jar. If you click the jar it sucks the entire website into it. This looks and works very well with such attention to detail in this very different animation. The only down side was the long loading to enter the site due to the translation from Japanese to English.
Here are a few images from the home page.

www.bascule.co.jp

The image below doesnt done the website justice. If you go on the website you will see how interactive the webpage is.

Colour Schemes (Client website)

A few colour swatches and different colour schemes

Orange, red on grey and black – These colours will have the ability to stand out and catch the browsers eye. I looked at a range of different styles and genres of colours schemes. This helped in creating a few of my own and incorporating a colour scheme fit for purpose. I preferred the pastel style colours over the bright colours that are too bold and eye catching. The bright colours draw the attention away from the important content and sources.
Here are a number of different colours schemes I gathered to fit the genre and purpose of the website.

Below is a range of different colour schemes that i though would work with the genre.

Artefact 2 and 3 (plans)

Website ideas/plans

Artefact 2 and 3 will be used to produce two complete different experience’s to test the interaction in websites. They will enable me to see the audience’s reaction towards the different interactions in web pages.
This artefact will consists of a web based application with a series of three interlinked pages. This will give an experience and atmosphere similar to any existing web application. The only difference is that this web site will be designed to have all the interactions that engage the audience. This will work to test if the interactions enhance an experience and how they can keep the viewer interested. This particular artefact will consist of a website that uses different theories and principles with different forms of interactions. It will then be used and tested by a group of participants. In addition a focus group or set of questions will be asked to get accurate data that will be then compared with the results from artefact 2. Artefact 2 will be another website in the same genre. It will consist of opposite features not following the design principles or any forms of interaction. This will show the differences and how simple interactions can make a responsive website whilst engaging the audience.

Artefacts 2 and 3 are both web applications that will work together to test if interaction is a key element in keeping a viewer on a website and engaging them.

Initial plan for Artefact 1:
Website 1 (interactive site) will consist of:
4 pages
A homepage with interactions, images, J query galleries, graphics, media e.g. audio or video
Structured to the F model
Structured to the Lockwood design principle and other design theories

Artefact 2:
Website 2 (minimal design)
Bulks of text
Poor use of colours
Not structured to design theories or principles
No media
No J query animations or slide motions

Artefact 1 (Draft questions for Questionnaire)

Draft Questions

This is the question that is being analysed and the focus of the research. (“How does the response of websites and interaction help keep viewers Interested?”)

The questionnaire was used to weigh up all the variable’s and use numerous questions to ask a range of participant’s relevant questions to the experiment. Each question aimed at a specific area of the interaction whilst gaining background information.

What is your gender: Male, Female?

Circle the relevant age group: 20 below, 21- 39, 40-59, 60- 79, 80 and above

How regular do you use the internet? Please state how often in days, eg every 2 days.

What most appeals to you when entering a website?

What keeps you interested in a website and makes you stay?

Artefact 1

Questionnaire

Initial ideas
In this artefact I aim to achieve a better understanding of how web applications appeal to the audience. Is it the engagement of the design elements and use of media or is it an addiction. I will get numerous participants to answer the questionnaire. I will get both media and non-media participants to answer the questions to get varied data from both ends of the spectrum. This will help in obtaining accurate results that will be analysed to give a final outcome. I intend to get at least 40 people for both sides of the spectrum. This will in total give me at least 80 results that can then be analysed and put in to charts and tables for further analysing. This will make it easy to see most common of certain question and work out the mean and mode. This will give me a final conclusion to the particular investigation and will be a key primary source.

Different theme ideas

These are three different theme ideas for the client project.

The first idea is a Comic style using bold colours similar to work of Lichestien (pop art). This is inspired by marvel and DC comics. It will use elements of comic strips in the layout with bold imagery.

The second idea is a professional finish with graphics and chrome finishes giving an element of sophistication. (Similar to LIVE LOUNGE and BBC look for professional side of theme.)

The third idea is a black and white/ Noir style design with relevant colours that make specific parts stand out. This gives the effect to grab the audience’s attention.

I intend to create a retro colour scheme with a modern theme. This will give the impression that it is Morden new and professional whilst having a retro twist. This will give it that unique appeal whilst grabbing the audience’s attentions merging the retro style with the professional and Modern finish in the graphics. This will help in producing a website that works well and has a professional feel with an original style making it stand out from offer competitors.

After trying these different designs and looking at the different themes I chose to keep it professional with textures and brush effects to create a bold design. I also applied a colour scheme that has a retro feel. This gave the design a modern appeal whilst having a retro genre to the design that fits the football style.

Football based websites

These are a few websites in the same genre as the client application. I chose to look at a range of different websites to gain an insight into how they appeal to their audience.

Website 1 consists of a graphic based website it is a high budget website designed for the professional football team Barcelona. I looked at high and low budget websites to make the comparison between the two and see what methods are used to fit the genre. I looked at a few coaching/ training websites too also get an understanding of what is out there at the moment and how they appeal to the audience. This consisted of my own market research into the methods of design and layout in these particular applications. I discovered that the layouts where very complex following the structural design principle of Constantine and Lockwood whilst having lists and links to numerous pages of content. These specific rules applied to the football clubs and other football based websites. I discovered there was a pattern in the themes and how they achieved the genre. In the different websites I looked at I saw how they scattered the content across the pages splitting it into blocks of information. This gives the browser an insight into the services of the web application and an over view of the content.




Website 2
This is a basic website that immediatly shows the browser the purpose. It uses little animation or other forms of media, stopping any distrations from the text. This makes the content the main focus.



Website 3
This website uses a complex structure with numerous links leading off the homepage to different sources. It is designed as an information point for the local football club.