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.