Thursday, 26 January 2012

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.

Monday, 23 January 2012

Project process

This is the new project process for the proposal.

Thursday, 19 January 2012

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.

Tuesday, 17 January 2012

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.

Friday, 13 January 2012

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

Wednesday, 11 January 2012

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.

Tuesday, 10 January 2012

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?

Monday, 9 January 2012

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.

Themes and ideas for client project

Plan
I intend to produce a website that will fit the genre and needs of the client.
I looked at existing football coaching and training applications. This gave me an insight into how they achieve a site that tells the audience its market sector. Below are some images and websites I found. In addition I looked at football websites particularly focusing on fan websites and teams.
I will use the research to create a website that grabs the audience’s attention and functions to the user’s needs. It will work across all browsers and have a mobile version to fit the increasing market in portable devices. In addition it will create a friend environment that is easy to use and interacts with the browser.

Mood board
I looked at different imagery that represents football as a sport. I created a wireframe from a mood board of images that stood out. This gave me an idea of the colours, images and iconic styles.