Testing Code In Different Browsers

I opened my code in 'Chrome', 'Safari' and in 'Firefox'. Both browsers opened the code perfectly which to be honest I was not expecting. Maybe I am just a brilliant web developer .. That's a joke by the way.

Selective Attention Test & HCI (Lab 4 , Part 3 , Question 4)

I recently watched  a video entitled 'Selective Attention Test' by Daniel Simons and Christopher Chabris. The video is just over a minute in length. The video starts by showing a group of people with two basketballs. The viewers goal is to count the amount of times a pass is made by the group of people. So, I watched the video. Counted. 15 is the answer according to the video (I counted 17..). But then text comes up on the screen and asks, "Did you see the gorilla?". I did see the gorrilla in the video and I was asking myself "why is there a gorilla?". Probably explains why my count was 17 and not 15.

So to answer the question "how selective was my attention", I would like to think that my attention to detail is pretty okay. I noticed the gorilla and almost got the count right. But prehaps if the experiment was more complex, the outcome would have been different.

How is this relevent to Human Computer Interactions? Our goal as developers is to make programs, webpages, applications etc that the allow the user to navigator or opperate easily and efficiently. Creating a webpage that is so full of detail or is 'busy' may have a negative affect on your target user audience as the users are unable to decipher how to use your webpage. As deveoplers we must cater for this when designing for users.

Souces:

http://sharpbrains.com/blog/2006/09/28/attention-and-working-memory/

Visual Perception Games Part 2 (Lab 4, Part 3, Question 3)

I just played a visual pattern game called "Pattern Memory". Dots flash on a screen in a particular pattern and then disappear. You have to then click the pattern back. My first score was 10 out of 20 levels which is okay I guess. Nothing to brag about but sure. Why this game is interesting is because one can use the Gestalt principles during the game. The Gestalt principles try to analyse how people organise visual elements in a group. One way you can apply this method is my 'Similarity'. We tend to look for dissimilar objects, they stand out to our eye when we preceive the image. This is anormally. A web designer can use this method to catch the users attention if say the designer wants to highlight a particular part of his/her webpage. Another method is 'Proximity' where the eye preceives several objects together as a group. This is a tactic that one can use well in the game linked below. A web designer could use this strategy to create interesting designs for their page as the user will interpret all the seperate objects as one unified image.

Sources:

http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm
http://www.playkidsgames.com/games/patternMemory/patternMemory.htm

Games part 1 (Lab 4, Part 3, Question 2)

I played two games and did terrible. The first game was called visual blink. It estimated my brain age is 95. I am 22 just in case you were wondering. The second game I played was spot it. I played it once and my score was 15. I don't know if thats good or bad for a first go but sure.

If you want to check out these games you can play them here:

http://www.freebrainagegames.com/games/visual_blink.php
http://www.scientificpsychic.com/graphics/index.html

Add-Ons When Developing for Certain Browsers Types (Lab 4 Question, Part 2, Question 1)

• Firefox 

• I will use the extension "Classic Tool Buttons" to help make my webpage interface more user friendly as the layout will be more recognisable for most users.
• I will also use the add-on "NoScript Security Suite" to protect my site from clickjacking attacks.
• I shall use "Stylish" so I can have more customization features.

• Google Chrome 

• I will use "Colorzilla" so I can have access to a variety of colours for my webpage.
• I will use "Perfect Pixel"to allow my webpage to be more visually appealling even to the pixel.
• I will apply the extension "Meta SEO Inspector" to allow me to inspect meta data found inside webpages.
• I will also use "Stylish" add - on for the same reasons as above.

Sources:

https://addons.mozilla.org/en-us/firefox/extensions/web-development/

https://chrome.google.com/webstore/category/ext/11-web-development

Validating my HTML & CSS (Lab 4, Part 1 , Question 2)

I suppose one of the difficult things about using HTML and CSS is how it presents errors. It does'nt! And that's the problem. I ran my index.html file through an online HTML validator and I was surprised to say the least. 18 errors in total listing from attribute errors to obselete tag errors. I thought my code was flawless. I was so wrong. It was a similar story when I ran the CSS validator. Not as many error at least but still errors or warnings. They all seemed to be 'phrase errors'. I went back to try to fix them or some at least. I was partically successful in fixing my HTML and CSS but according to the online validators, I still have some errors.



Sources:

https://jigsaw.w3.org/css-validator/validator
https://validator.w3.org/

Flat Design & Skeuomorphism (Lab 3, Part 2, Question 7)

Flat design is a style of web design that became popular in recent years, (2012-ish), and is currently one of the most popular styles for designing a website. But what Flat design? It is the absence of 3 - dimensional visual effects in a website. According to the article "Flat Design: It's Origins, it's Problems and why Flat 2.0 Is Better for Web Users" by Kate Meyer, she describes flat design as a 'minimalist web-design'. Websites that use this type of web style are the likes of Facebook and Twitter. You can view some of the best flat designed websites here:
http://www.awwwards.com/websites/flat-design/

In contrast to this revolutionary , (if thats what you want to call it), flat design there exists a style that is it's opposite. This style is called Skeuomorphism or the use of 3 - dimensional icons and visual effects in a website. Many websites have used this style however this type of web design appears to be seen as a bit dated. You can view many examples of this style here: http://www.webdesignbooth.com/skeuomorphic-web-design/

Sources:

http://www.webdesignbooth.com/skeuomorphic-web-design/
http://www.awwwards.com/websites/flat-design/
http://www.webdesignerdepot.com/2013/12/infographic-flat-design-vs-skeuomorphism/
"Flat Design: It's Origins, it's Problems and why Flat 2.0 Is Better for Web Users" by Kate Meyer