Project 7 - Interactive Website
The uses of interactivity in the media industry (mindmap):
Why are we studying interactivity?
​
We are studying the uses of interactivity in the media industry, to see how we can use some of these advanced features to involve our audience more, and allow them to make my decisions and put them in control when navigating on our website and between other platforms. This will in turn make my website flow more easily and be much more engaging for my audience.
What you are being asked to do for this project?
​
During this project, I am being asked to research the use of interactivity in media products and plan and make my website more interactive in a number of ways, for example, I will create cross-platform links and techniques taking you to other online sites, such as Instagram. I will link to other pages on my website during certain sections of my work, for example, more information about films, director’s and artists that have inspired me to use certain techniques.
​
How will developing a cross-platform presence help you long term as a media producer?
​
In the long term, developing cross-platform techniques will help me to learn ways that I can promote myself as an individual, to make me more attractive to the industry by linking different projects and websites of mine together, in an interactive way, to showcase the full extent of my work. Furthermore, it will allow me to understand how audience’s use and operate media more clearly, so that I can tailor my products towards them and allow them to control them in an intuitive way.
Investigate a job role: User Experience and User Interface Designer (UX/UI):
https://www.screenskills.com/careers/job-profiles/games/design/ux-and-ui-designer/
What does the role involve?
​
The UX role involves ensuring for a smooth gameplay experience for the user, and that they receive useful feedback in a simple way. The main issue that the user experience designer focuses on, is that players don’t get angry at the game being explained in an unclear way, making it difficult for them to understand.
Furthermore, UI designers give a lot of attention to the user interface – where the players interact with the game in an intuitive way. They develop certain visuals such as the heads-up display (HUD) conveying information such as the scores, levels and maps, for instance. They ensure that the menus and commands are clear, effective and easy to navigate for the user.
UX designers tend to focus more on the information a player needs for the game to flow well. UI designers tend to focus on how that information is communicated. They make it look good and sound great.
​
What skills do you need to do it?
​
To become a user experience designer, you need to have high-quality creative and communication skills. Alongside this and other useful characteristics such as organization and reliability, the tools a UX designer requires are: scripting and visual scripting tools, animation skills and a high-level of expertise in image editing. These skills are all required to be obtained and shown on industry-level software such as Adobe Photoshop, for example.
​
What route might you take into this role?
​
It is important to study both art and science at school or college, before going into university, through studying A-levels or courses that usually involve art, graphics design, computer science, mathematics, creative media production, physics, games development – there’s a whole array of options and it is up to you to decide what suits you best and what you think will benefit you most based on your research into becoming a user experience designer.
Research:
Plan a range of audience research strategies, using primary and secondary sources:
​
Primary Research:
​
Focus Group: Show an example of a website in a simialr style to mine made by another creator on Wix to a group of people that are situated in my target audience age range of 16-18 year olds to receive diverse opinions. I will ask for feedback on the appearance of the website, its interactivity and cross-platform features. My target audience of 16-18-year-olds will respond with their opinions of the different techniques on show; this in-turn will allow me to develop my website in an interactive way, tailored to their best interests. This will help me in my project as it will allow me to receive ideas from other creators and my peers in developing my website, so I will have more features that I can include in my own to make it as intuitive and interactive as possible, whilst suiting the style of my website.
​
Website Testing: Allow members of my target audience to navigate and control the different interactive sections and features of my website that I have made and tested out. This will allow them to review the website development that I have already done, which will be very helpful for me as I will be able to truly see how intuitive and interactive my website is, by seeing people use it for their first time, without me explaining how the different features work. Consequently, I will receive honest feedback on the different sections of my website, and so I will be able to improve it accordingly, meaning my target audience will enjoy my website more, as a result.
​
Secondary Research:
​
Online Research: I will research on Google to find articles about the psychology behind how users control interfaces, to make sure my website can be as intuitive and interactive as possible, and that my target audience of 16-18-year-olds will be able to navigate it in a simple yet exciting way, if they were to browse through the different pages and sections of my website. I will also research different interactive techniques that are commonly used on websites, to inspire me in the development of my own work, and give me more ideas of the kind of website styles that my audience will respond to best, based on online statistics.
​
Wix Explore: To be able to research my audience further, through the use of secondary research methods, I will browse through the Wix explore page and view examples of websites that are tailored to similar audiences, to see the styles of these particular websites, so that I can incorporate some of these techniques in my own work, to attract my audience to my website through its appearance and interactivity.
​
Plan research into interactivity:
​
I will research the use of interactivity in the media industry and in websites especially, to give me a broad range on the idea of giving the audience control through interactive features. This research will be secondary and conducted online. For example, I can view other websites to gain inspiration for new interactive features, and as well as this, I can watch YouTube videos and tutorials to allow me to create these interactive features in a more advanced and stylish way. I will also research further into why interactivity is used, to give me a deeper understanding of the concept as a whole, to allow me to incorporate it successfully to a high-level within my website.
​
My Audience Research:
​
Focus group (Primary):
When conducting my focus group research, I made sure I used an example website that was in a similar style to my website to show the 5 people in my focus group so that I could receive useful feedback from them on it. This was due to the fact that their opinions would be more useful for me in improving my own website if I could see the parts of the example website that they liked and thought could be improved to be made more interactive, for instance - providing me with very useful information directly from my target audience.
​
I showed my focus group the home page of the example website. There were mixed reactions at first based on the largely dark colours shown on the homepage. Some of the audience said that the colours were too dark and it made the website appear boring, whereas others said that the website looked stylish and professional. I concluded from these opinions that I could use a combination of stylish dark colours with bright and engaging colours for my own home page to attract all areas of my target audience from their first viewing of my own website.
​
​
Continuing on in my time with the focus group, I demonstrated some of the interactive features of the website to them. For example, we talked about the use of the links to other platforms in the footer of the website, alongside the use of a contact form. Everyone in the focus group agreed the use of the links to other platforms in the footer was an effective way of making the website more cross-platform, one of whom said it made 'the website feel more modern' and made the company feel more 'prestigious' for covering more than one platform, so I will definitely stick to my original plan of linking my YouTube and Instagram, as this concept received highly positive feedback when put into use on the example website.
Furthermore, the majority of my focus group/target audience thought that it was a good idea to have the contact form in the footer of every page, as they said it made them feel like their opinion matters and that they like being able to interact with the website and give feedback if something doesn't work properly, for instance. One of the members of my focus group suggested that I could just include a separate 'Contact Us' page instead of having the contact form in every footer of my website, and this is something I will also consider, however I will likely go with the majority of my focus group's opinion, as I believe utilising the footer in this way makes more sense than adding in unnecessary pages.
I also showed them the interactive scrolling transition of items fading in as the user scrolls down the website. 3/5 members of my focus group agreed that it was a good idea but the items faded in too slowly as you scrolled down, however 2/5 liked the slowness of the fade as it meant that you didn't feel rushed when using the website, and it allowed you to appreciate what was being shown on screen more. This made me think I could use this fade in technique but I would ensure I found the correct balance in the duration it takes to fade in, to make the interactive feature appear worthwhile to include and to make it feel seamlessly implemented for a reason.
Online Research (Secondary):
​
When researching into interactivity in media and websites for my target audience online, I discovered an article on the website, 'Business 2 Community' published on the 27th June 2015, which conveyed the importance of website interactivity: https://www.business2community.com/online-marketing/how-important-is-website-interactivity-01248595
​
From this I could gather, that based on their primary research, they had discovered that the use of interactivity in your website links to credibility. In other words, the more interactive features your website contains for the viewer, the more believable and engaging your website becomes. This made me think about my target audience of 16-18-year-olds on my website, and how their attention span is stereo-typically lower than an older age group, meaning I knew I had to include a large array of interactive features, sections and pages, to keep them interested into wanting to view the pages of my website, as it makes them feel involved and more important as the viewer. This is an example of the reception theory in media, which is based around what the audience can do with the media they are given, and in this case, they are given the website and are able to control it an interactive and exciting way. This contrasts to several business websites which are usually very static giving the audience very few opportunities to interact with what is on screen, making them lose interest more easily.
Historic​ Uses of Interactivity (Secondary):
​
Interactivity has been developing in the media for many years. This is due to the fact that as we progress, audiences are becoming more active and involved through the development of social media, for example. However, historically the audience was more passive, meaning the uses of interactivity originally in media was slightly different; on television, interactivity has been used for a number of years, through the use of the popular technique of pressing the red button for more information, for example.
​
Websites historically had less interactive features and were much more static, however as the reception media theory suggests, audiences are becoming doing more with the media they are given - so new interactive features are being used and developed. This can include, voting systems, polls and more complex navigation techniques on websites, to engage these new and highly active audiences in the modern day. I will look to incorporate several interactive and cross-platform features across my website, to facilitate this. The uses of modern interactivity makes the user feel in control and empowered, linking to the uses and gratification theory, meaning they become more interested in the website and what it has to offer.
Contemporary Uses of Interactivity:
​
Researching and evaluating example websites on the Wix explore page (Secondary):
One of the first examples of a website I saw on the Wix explore page, featured and interesting and very interactive feature; when the user scrolls down the home page of the website, the colours and materials of the clothes are revealed. This was really effective as you can see the outfit being put together as you scroll, making the user feel involved and improving the website. I later discovered through my research that this was using the parallax scrolling tool on Wix, which is something I will definitely look to implement to my website if possible, when developing my pages in the near future.
​
​
Another interactive feature that improved a different website, and one that I could imagine working in my own website, was the photos moving and fading into the screen in a collage format, to draw the user’s attention in a slick and stylish way. This also involves the user as their actions alter the visuals on screen, another clear example of interactivity, and the use of the reception theory where the audience can choose what to do with the media that they are given. If I were to use this technique in my own website I would decrease the duration of the fading transition, as I believe this would suit my younger target audience better, as they like to find information quickly and in the easiest way possible.
Furthermore, something I noticed about a different website was the way they placed the menu to navigate the website. They used a small 3 lined shape in the top right of the screen, which although is a well recognised symbol these days, I did not believe it was made obvious that this was where the menu was, meaning some users may struggle to navigate the website due to a lack of an intuitively working menu.
Also, the menu itself took up the whole screen and was rather dull and uninspiring making the website feel very amateur. To improve this they could have experimented by reducing the opacity of the black background, or change the style of the menu by using a drop-down to make the website easier and more interactive to use.
When looking through further websites, I came across a fantastic interactive feature, which was where as the user hovers the mouse over one of the pictures on the home screen, a translucent overlay faded in to describe what was being shown in the picture and act as a link to take you to the page in the website where you could find out more about it.
This was really effective, but to improve they could have added more information on the overlays of the pictures to give you more information about what is being shown in the photos to make the user understand more clearly, so that they go to the correct page that they are intending to see, to boost the user’s experience.
Additionally, in the partners section of the website, they showed all the different logos of the company’s they are working with. This was effective to some extent and was a visually interesting way of seeing their partners.
However, to improve, the images could have had individual links to the official websites of the partners they work with, to ensure the user understands what these brands do and are trying to achieve, and to advertise for their partners more effectively, in an interactive way.
Lastly, a different website used the contact page in a very effective and interactive way, which allows users to submit any feedback or queries they wish. The text boxes are able to be filled in and sent by the user in a very clear and simple way, which means that the company can have a deeper understanding of their audience through the information they receive, as the users are able to communicate with them, in a simple, interactive and effective way. To improve this website I believe they could have used a wider variety of menus and colours, to make the website more visually engaging for the viewer.
Contextual Study on Interactivity
Throughout all the different contexts and uses of interactivity, including media, computer science, television and communication, the term interactivity is used in a very broad way, however all are related to interaction with computer-based programs through the navigation of a user interface. In media, the different contexts of interactivity can be clearly seen.
For example, in the open-world video game of GTA V, released in 2013 and still growing successfully to this day, there are hundreds of examples of interactivity, to satisfy the extremely active, young audience. The user not only interacts with the game by controlling the character, vehicles, and more, but also through interactive menus which are presented in exciting styles, as seen below in the format of a smart-phone. This allows the user to show the uses and gratification theory when navigating such menus, engaging them in the game by giving them large amounts of control and freedom of their actions within it. This is one of the many contexts of interactivity, as these days video games commonly involve these techniques to enhance the gameplay for the user.
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Can you give an example of poor interactivity? What is bad about it?
​
When browsing a popular fitness website, I noticed a poor use of interactivity. This was due to a hyperlink to the men’s section of the website not working. As you can see below, when the user clicks on the 'Shop now!' text which shows up as a hyperlink, it does not take you to the men’s clothing section and the Error 404 is seen. This is an example of poor interactivity and makes the website seem less professional and makes it more difficult for the user to navigate the website, potentially pushing them away from buying their products and reducing sales and profits for the fitness company.
​
​
​
​
​
​
​
​
​
​
​
​
What is AI?
​
AI, also known as artificial intelligence, is the intelligence shown by robots and machinery, being used as an alternative to the intelligence of humans to complete tasks. An example of where this could be used is in the video game industry to create the movement and decision making of non-player characters (NPCs) in games; essentially it can be used and developed in video game manufacturing to determine how an offline opponent behaves. This is important as it makes video games more realistic and challenging for the user - engaging them and causing them to enjoy and play the game more so that they can improve and defeat these opponents more easily.
​
What is VR?
​
Virtual reality (VR) harnesses the human senses of sight and sound to place the user in an artificially developed environment that is created with computer software. The user usually views these environments through a headset, making them very realistic and causing the user to feel like they could really be there. These feelings are extenuated by the fact that the users real life movement such as head turning, change what direction they are looking in the VR world. This is a very advanced example of interactivity that can be seen in the media industry, and is specifically for a very active audience, that want to experience total control.
​
What is AR?
​
Augmented reality (AR) is high-tech software that brings together VR technology with the outside world through the use of live video imagery that is improved digitally through graphics that generated on a computer software. Users can experience augmented reality through headsets and on mobile devices. A popular example of the use of AR technology was on the ground-breaking game of Pokémon GO - see below.
​
​
​
​
​
​
​
​
​
​
​
​
Explain how research into interactivity will help you make your Wix:
How will this research help you make your own website more accessible to an audience?
​
Research into the effective and less effective uses of interactivity will greatly help me when it comes to developing my website on Wix. This is due to the fact that I will learn and understand how to incorporate a multitude of interactive features, and how to improve on interactive features I have seen used during my research that were not as effective. Furthermore, I will research into how I can make my website possible to navigate in a creative and interactive way, through different buttons, menus and linking techniques. This will allow me to target my young and active audience, in a number of different ways. As a consequence, my website will be made more accessible to them through the different kinds of cross-platform linking I have researched and will demonstrate in a further creative way in my own work.
Planning:
How to make my website more cross-platform and interactive:
Reflection:
Today, I added icons of the Instagram and YouTube logo to the footer of my website, which is made the same across all my pages. I used these Icons as links to my personal Instagram and YouTube pages, to make my website more cross-platform and to give more of an insight of myself to the user. This was really successful as it gave my website a consistent feel with the footer being the same on each page, and the icons fitted well with the bold style of the rest of my website. Here is an example of the bottom of one of my pages:
​
​
​
​
​
​
​
​
​
I experimented with the hover box tool after being inspired by some of the other websites I evaluated from the Wix explore page. This was really effective and after understanding how the tool works and finding the best opacity to use, I managed to link the underlined text to the fashion lookbook project full page, in a very interactive and attractive way. I also added the float-in animation effect to add some more style and creativity to the hover box feature.
At first, I had a problem as I made the hover box background the video of the fashion lookbook, so I had two of the video playing at the same time and they were out of sync, and I became a little confused as to what the problem was. However, once I established this issue, I removed the video as the background of the hover box and changed the hover background to a reduced opacity of the colour black, everything began to become a lot easier and I could really see how useful the tool will be, and I will be adding it more on my home page and projects menu to improve the features of my website.
To make my website become more cross-platform, I have shown an example of one of my previous edits from my YouTube channel, and used the text on the hover box to act as a link to take you directly to my channel, to convey my passion for video editing further in an interactive way. This was a really simple and effective way to my digital portfolio more cross-platform, in a stylish and easily controllable way for my young and active target audience.
​
​
​
​
​
​
​​
​
​
​
​
This week, continuing on in my interactive website project, I decided that as an alternative to adding a 'Contact Us' page, I would use the same technique of inserting a contact form into the footer of my website, so that it can be easily accessed at the bottom of each of my pages. This will allow me to connect with my active audience and peers in a simple and effective way, allowing me to receive feedback to improve my website and make it more cross-platform and interactive in the future. This once again makes my website less static engaging my young audience and ensuring they know that their feedback and contributions to my website are important. This is backed up by the 'Thanks for submitting!' text pop-up after the user presses the submit button, conveying this and adding a further feel of interactivity in an exciting way.
​
​​
​
​
​
​
​
​
​
​
​
At first, when I added in the Contact Support menu template to my website, the colours and font did not correspond to my website as whole, giving my pages an inconsistent and unprofessional feel. I customised the font and the colour of the design to coincide with the rest of my pages, and extended the text boxes to the correct width of my website pages; this was really successful and I am very pleased with the outcome and the wide range of interactive opportunities this feature brings to my website.
​
​
​
​
​
​
​
​
​
​
​
I also used the same hoverbox technique, alongside interactive buttons to hyperlink to my different project pages on my website, to make this page more visually interesting than previously where I simply just used the interactive buttons. This made my page more colourful, interactive and engaging for my young target audience. I will add photos for the other projects and pages above the interactive buttons as I complete them. I have now altered my home screen to not hyperlink to each individual project through the images and hoverboxes, but to hyperlink to my projects page, my about page and my other platforms. This was due to the fact that it made the homepage look much neater and more organised, and means that the projects page is necessary for navigation for the user.
​
​
​
​
​
​
​
​
​
​
​
​
I finished my interactive website development today, although I will also continue to improve and develop it throughout the course, by making small adjustments to make sure all the links went to the correct pages, and lining up objects on my pages by using a grid tool. Additionally, I also added in another interactive, navigation feature to my website - a drop-down menu. This makes for a quick and easy way to access any of my project pages, or the user can click the projects title on the navigation bar to see their full previews as seen above, giving them different options of interactivity, something that is key for the active audience, and coincides with the uses and gratification theory, which is where the audience decide how they use the media. I adjusted the colours of the drop-down menu and what colours show when the user hovers over the options. I also made the colour of the font change when they click on one of the pages to go. this ensures the user understands that their actions have an effect on the website, making it feel more interactive through the visuals changing with the user's actions, engaging an active audience very successfully on reflection.
​
​
​
​
​
​
​
​
​
​
​
I also came up with the simple and effective idea, of linking the photos I use in my pages, particularly the professional practice unit, to the websites I studied for my secondary research. For example, the user can click on the photo of the production runner, to open a new tab that takes them directly to the page on the website ScreenSkills to view the full job description and everything to do with the role of the production runner, if they are especially interested in that specific job in the industry. This was quick and easy to do as I could take the links straight from my reference section at the bottom of the project, which I had previously made, and attach them to the images as hyperlinks. This is a very simple interactive technique but is also very effective in allowing the user to easily navigate to another website to find out extended information, on the subjects of each project.
​
​
​
​
​
​
​
​
​
​
​
​
Evaluation:
Throughout this project, I have developed a wide range of knowledge on the subject of interactivity and cross-platform techniques in different media industries, to ultimately allow me to develop my own website in a creative way to target my active target audience of 16-18-year-olds. This has been largely successful and has been seen through a number of interactive features such as drop-down menus, interactive hoverbox links to my pages and other platforms such as YouTube and Instagram, 'Contact Support' forms and much more.
​
Of course, there are still things in my website that can be improved. For example, one of my peers suggested I could incorporate a menu at the top of each of my projects using interactive buttons to take you directly to the different points of each project to avoid long periods of time spent scrolling. For example, you could have buttons to take you to the planning, research and evaluation sections of each project. This is definitely something I will look into in the near future to take my website to the next level and introduce further interactivity to my work, as an active young audience of 16-18-year-olds will want to find the information they are looking for in my website pages, as quickly as possible.
​
Another area that could be improved is my cross-platform Instagram page. Instead of using my personal Instagram, I could make another account specifically for my work in media. This would allow me to show more of my edits and work from the course, and extend my work to another platform in a more consistent way, as although my personal profile includes photographic techniques in its posts, the subjects do not particularly relate to my course as a whole. I could also make a twitter account specifically for this website, as that could been another way my target audience could leave any feedback, although the handy contact support form in the footer of my website does also allow them to do this.
​
One of my most successful interactive features I have added to my website have been the use of hoverboxes. Not only do these appear to be very stylish, but also allow the user to interact with them in a few different ways. Firstly, the hoverboxes appear when the user hovers over the image/video they are placed on top of, secondly the user can read the information placed in the text box within the hoverbox, and thirdly the user can make the choice to click on the hyperlink in the text of the hoverbox, to take them directly to a particular project of my website, or to another platform such as my YouTube or Instagram. This was all accomplished through one interactive feature, which is why it is my favourite piece of interactivity I have added to my website during this project.​
​
​
​
​
​
​
​
​
References:
Wix Explore Page Websites:
​
​
https://www.thankgoditsmonday.co/arbiterftf
​
​
​
https://www.calvinpausania.com/projects
​
Job Roles: ScreenSkills
https://www.screenskills.com/careers/job-profiles/games/design/ux-and-ui-designer/
​
GTA V Image: by LarkDv, December 21, 2017
https://www.juegoslarkdv.com/2017/12/descargar-gta-5-para-pc-full-en-espanol.html
​
Pokemon Go Image: The Verge, December 20, 2017 by Nick Statt
​
Resultz Nutrition Website:
https://www.resultz-nutrition.com/
​
​
Furthermore, I had other points of great success when developing my website over these past couple of weeks, for instance, the Contact Support section, which can be find in the footer of my website. I asked my peers to test out the interactive feature by sending in their peer critiques to me using this tool on my website. This was really effective and I was able to make improvements such as correcting an error in one of my hyperlinks, thanks to their feedback, proving that this could be a really useful way for my active target audience of 16-18-year-olds to respond and help me improve my website in the future
Additionally, the fact that the user is able to type directly into the boxes on the website itself makes it feel very interactive and is much more convenient for them, as they don't have to contact me via email, for example - it's all in one place. I added this piece of interactivity very effectively through placing it on the footer of my website, meaning the contact support form is at the bottom of each page. This makes it easier for the user to see the particular problem and write to me about it at the same time rather than having to contact me on a seperate page, attracting my target audience of 16-18-year-olds as they expect things to be very convenient and easy for them, due to advances in technology and social media.
I have seamlessly and effectively added interactive elements throughout all of my website, with multiple different links, features and of course the drop-down project menu being available on every page, allowing for an intuitive and convenient navigation experience for my active audience, and making for a very visually engaging website.
​​​​​​​​​​My research into other websites has influenced my decisions of the interactive elements I could use in my own work, and where to position them. For example, before my research I neglected the use of the footer of my website, however I saw different creators use it to great affect, so I added links to my Instagram and YouTube using icons as hyperlinks, and a contact form to receive user feedback. Consequently, I made the most of the feature of the footer, through different, useful interactive elements and to also allow for a more cross-platform and professional experience for the user.
​
After researching on the Wix explore page, I saw that the use of the hoverbox tool was extremely popular. I decided to incorporate it within my own website, after customising it to match the style of my pages and so that it worked in the correct way as an overlay of images and video, by lowering the opacity of the hoverbox. This interactive element was a brilliant success and a key part of the development of my website during this project.
​
The cross-platform techniques I have integrated into my web pages will allow my work to reach a much wider audience. This is because, my other platforms such as my YouTube and Instagram, both have a large number of followers, meaning if I am able to link these audiences effectively, to and from my website, I will grow a much larger audience that will view my website. It will also allow for a wider variety of audience types to view my website as my YouTube and Instagram aren't just tailored to 16-18-year-olds, but also to older and younger audiences as well - meaning the cross-platform features such as the links on the homepage images/video hoverbox overlays, and in the footer of my website, can positively impact the size and growth of my audience.
​
​