Task 2 – Interactive Media

Bad Websites

I was tasked with finding two bad websites and describing the different features.

Website 1 Name:

http://arngren.net (Gadgets)
Appearance: eg. colours used; layout balanced, clean, uncluttered? Text legible?

 

Too many colours (reds, blues, greens, yellows, purples and pinks), no consistent colour theory. Unstructured layout, hard to know where anything is, menus appear aligned to the left, at the top and to the right. Text is scattered and low-quality.
Structure & navigation; eg. content logically organised? Clear navigation? Purpose of each page recognisable?

 

Content is cluttered and confusing (so many pictures of varying sizes). Hard to discern where you navigate to different pages. Not sure where the pages would lead you on the website. No clear header bar with menu items, scattered across the page and multi-coloured.
Content; is the content sufficient for understanding? Is there too much content, not enough content

 

There is too much unintelligible content. Random items from cars to binoculars. Hard to work out why certain is there.
Usability: Is the site easy to understand and use? Too difficult to understand and use. You are immediately confused with the scattered layout. It is not explained what you should do on the site let alone it’s purpose.

Screen Shot 2016-04-05 at 14.16.42

Website 2 Name:

 

http://www.hssportsms.com/index.html (High school sports)
Appearance: eg. colours used; layout balanced, clean, uncluttered? Text legible?

 

Mostly white, with bold blue and red text. Layout is un-focused and un-appealing. The text is readable but looks very dated and and unattractive to look at as it is of varying sizes, fonts and colours.
Structure & navigation; eg. content logically organised? Clear navigation? Purpose of each page recognisable?

 

Content is scattered in different pages with PDF files to download. The navigation bar is clear. The purpose of each page is un-clear though due to the layout and type of content.
Content; is the content sufficient for understanding? Is there too much content, not enough content

 

There is little content because all of it is in downloadable pdf files, from results to awards and rankings. This comes across as lazy and more work for the user to try and get more information.
Usability: Is the site easy to understand and use? It is not easy to make sense of anything on the site or what you need to do, but it is easy to click on elements like the social media buttons and navigation menu items.

Screen Shot 2016-04-05 at 14.18.00

Good Websites

I was tasked with finding two good websites and describing the different features.

Website 1 Name:

 

http://www.cnet.com/uk/ (Gadgets)
Appearance: e.g. colours used; layout balanced, clean, uncluttered? Text legible?

 

Nice choice of colours (red, whites, and blacks) complement the readability of the site well. Layout is clear, structured into type of content and not overwhelming. Text clearly readable from the font, to size of text.

 

Structure & navigation; e.g. content logically organised? Clear navigation? Purpose of each page recognisable?

 

Content is laid out nicely, giving you brief statements as to what the page is about. Easy to navigate from one page to another with clear readable headers and clickable links.
Content; is the content sufficient for understanding? Is there too much content, not enough content

 

There is plenty of content, something for everyone (technology, audio, games etc.). Search function allows you to easily find what you are looking for.
Usability: Is the site easy to understand and use? Easy to get to get to grips with and simple to interact with. Slider, drop-down menu and search functionality all work with ease.

Screen Shot 2016-04-05 at 12.22.20

Website 2 Name:

 

http://www.maxpreps.com (High school sports)
Appearance: e.g. colours used; layout balanced, clean, uncluttered? Text legible? The dominant use of Blue complements the design and layout of the site. Layout is very clean, draws your eyes to focus on the content in the middle. Text is clear and consistent.
Structure & navigation; e.g. content logically organised? Clear navigation? Purpose of each page recognisable?

 

Navigation is clear and is made easy to discover things. Footer is also clear, with each page recognisable for what the user is looking for.
Content; is the content sufficient for understanding? Is there too much content, not enough content

 

There is the right amount of content for the user to feel satisfied. With stats, analysis and interviews. There is plenty of content for whatever sport a user is into.
Usability: Is the site easy to understand and use? Anyone can understand the content being delivered and use the provided search functions with ease. The drop-downs, slider and icon elements all work with ease.

Screen Shot 2016-04-05 at 14.19.24

Audience

Describing the audience of two different websites in the same field (music).

Screen Shot 2016-04-19 at 10.21.34

Radio 1

Target audience: Radio 1 caters to 15-29 year olds with it’s mix of contemporary music and speech.

Screen Shot 2016-04-19 at 10.28.27

Classic FM

Target audience: Their audience is split into two main groups. The ‘discoverers’ are between 35-50 and tune in to listen to just music. The ‘enthusiasts’ are usually 50+ and tune in for inspiration.

Differences in design and content

Design: Radio 1 utilises a design that is aimed towards it’s target audience. The use of bold pink and simple navigation so users can find the dj or track list with no problems. Classic Fm is different in that the website looks like it was made a while ago whereas Radio 1’s is very modern using the latest coding suites (e.g. Java , html). what little text bounces off the page on Radio 1’s site which appeals to it’s younger audience, whereas classic fm’s use of bold and italic font appeals to it’s more sophisticated audience.

Content: Radio 1 opts to use a minimal amount of text in favour of imagery of dj’s and album art. Most young people don’t have the attention spans to read through lots of text, meaning Radio 1 have done a god job with reaching their target audience. Classic FM opts to include more text, with news and what’s currently playing. The imagery that is there relates to the topic it is talking about, to give an impression of what to expect. Classic FM’s audience will probably appreciate the more in-depth content that appeals to their more sophisticated nature.

Navigation Menus

Describing the different navigation menu types with examples.

Screen Shot 2016-04-05 at 14.44.55

Primary Navigation

Example: BBC Sport website

Primary navigation is the main links to other pages underneath the header of a website. These links will take you to the main pages of a site, which will contain the bulk of the content. Using BBC Sport as an example, if you click on football it will take you to page dedicated to all football content on the website. News, results, tables, teams etc.

Screen Shot 2016-04-05 at 14.41.58

Secondary Navigation

Example: Amazon departments

Secondary navigation is the sub content within the main content of a website. Usually if you want to narrow down what you are looking for. For example, you can narrow down products into more specific categories like movies, tv, music & games. If that is what you are looking for.

Screen Shot 2016-04-05 at 15.06.41

Tertiary Navigation

Example: Tesco groceries

Tertiary navigation gives you even more specific content within a website. For example if you are looking for sports nutrition on Tesco you need to go through three drop-down menus to find the set of products you are looking for.

Screen Shot 2016-04-05 at 15.18.44

Mega menus

Example: Game

Mega menus are big squares on the pages of a website that usually are clickable pictures (most of the time advertising something). They usually take you to a specific page for that offer. For example clicking on PlayStationVR will take you to the page about the product itself and have the ability to preorder it.

 

Visual Cues

Describing the different visual cues on websites.

Screen Shot 2016-04-05 at 15.56.02

Text emphasis (instructional text)

Example: Microsoft

The Blue button draws your eyes from the white background and the bold call to action text makes you want to click on through.

Screen Shot 2016-04-05 at 16.18.09

Arrow, lines etc.

Example: Manpacks

Arrows and lines draw your eyes and direct you to something whether its an offer, sign up form or like the example above a link to another visual cue which is a link to a page on the website.

Screen Shot 2016-04-19 at 11.13.18

Highlighted links

Example: BMW

Hovering over certain text or links usually changes the colour from black to a blue, drawing the users attention. Sometimes these text links change animation when being hovered over, indicating they can be clicked. They also usually include call-to-actions like the example above.

app-store-logo1-950x334

 

 

 

Button

Example: Any website that offers an IOS app of their service

The instantly recognisable nature of Apple and their logo immediately draws the users attention and the incentive of having an easy-to-use app of the website they are on is also an attention grabber.

Technology

Choosing the gaming genre of website I described the different technologies employed.

Chosen website: IGN

Genre of website: Gaming

Screen Shot 2016-05-10 at 10.12.56

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

This gaming website has multiple examples of videos, audio and animations. These technologies will be utilised to promote newly released games and news stories.

Video

Screen Shot 2016-05-10 at 10.28.52

 

 

 

 

 

 

 

 

When you load up the website, a small, low quality snippet video automatically plays underneath the header in the advert itself. This is a clever way to promote the product as it is non-intrusive and is in the users first line of sight when the website loads. There is also the option should the user want to, expand the advert to watch the full length trailer as an embedded YouTube video.

Screen Shot 2016-05-10 at 10.16.57

 

 

 

 

 

 

 

 

 

 

 

Audio

Screen Shot 2016-05-10 at 10.33.05

 

 

 

 

As I mentioned above, the video that automatically plays when the website loads is muted so as to not annoy the user if they are not expecting. There is a simple one click button at the bottom left of the video that can un-mute the video if the user desires. The same applies to the expanded YouTube video. Except the volume is un-muted in this instance, implying the user is actually interested in what the game has to offer.

Animation

Screen Shot 2016-05-10 at 10.43.12

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

This rectangular based advert down the page a little on the right hand side, is animated showing off the character moving from left to right giving the impression of depth and actual movement. I then proceeds to show the game that can be bought and becomes clickable, taking the user to another website where they can purchase the game.

Screen Shot 2016-05-10 at 10.48.54

 

 

 

 

 

 

 

 

 

 

Another example of animation on the website is the scrolling main news stories just underneath the header. There is a red progress bar animation that indicates when the next main story will show up underneath. When the story loads it has a transition animation that slides from the top to the bottom. This is really useful for the user because it gives them main headlines in the gaming world at a decent pace for them to digest.

Leave A Response

* Denotes Required Field