Playing Brain Games At 33 Is Depressing...

Lab Work - 04/10/2017

---

Part I – Coding a Fish Creek Website

2. Validation Sites 

http://validator.w3.org/

There were no errors highlighted in the HTML file. I have validated a site in previous labs which showed up errors where I had <dd> tags without <dl> tags and I removed them accordingly.

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

There were no errors highlighted in the CSS file.

3. Browsers

• Firefox - No issues, opened as normal.
• Chrome - No issues, opened as normal.
• Microsoft Edge - No issues, opened as normal

4. Fluke

This is a great little game for tapping into a person's competitive nature in order to sneakily teach them the different ways to select various tags and objects in HTML. I finished all 32 levels and surprisingly feel like I have much more ability to manipulate my HTML code.

Part II – Web Development Tools

1.a - Firefox
Firebug is an add-on for Firefox that enables you to edit, debug and test your webpages either live or locally.

ColorZilla is a Firefox extension that enables you to get a colour reading from your browser, change it and paste it into another program.

1.b - Chrome
Responsive Web Design Tester helps you see how your website behaves in different browsers and devices. This is becoming more and more important every day as discussed in previous blogs with Google changing their algorithm to look at mobile websites and also with the diversity of different browsers and websites in use nowadays!

CSSViewer lets you quickly view the CSS properties of an object that the mouse is hovering over on a website. This seems like a great tool for developers as they can see a feature or design they really like on a website and quickly get a view of how it was achieved!

Part III – Perception & Attention

2. a - Visual Perception
On Visual Blink, I scored 1,792 giving me a brain age of 20 (yay!). To be honest though, I think the trick to this game is pre-empting where the changes are going to occur e.g. a watch, necklace etc. Maybe pre-empting is only something a 20 year old would do though? Probably wishful thinking.

 

Spot It! is a really fun and addictive game for anyone with a tendency for addiction - in fact, if this blog entry was late I was going to blame it entirely on Spot It! I used to play video games professionally so it definitely tapped into my competitive nature.

Some tricky features of this game are that the colours change as you "hover" over the images thus rendering it really difficult to spot it, the images are rotated differently which we're not trained to perceive and also the images are different sizes which puts you off totally. I think a younger person would be able to concentrate and focus for far longer as the older you are, the more you seem to complicate things with worry and anxiety like "oh my God, time is running out - hurry!!".

Also, it's clear that the brighter, louder colours like red, blue and purple are much easier to spot and your eye is naturally drawn to them whereas the less distinct colours like yellow and turquoise take a lot more focus and concentration to see. As a designer, I can use this information to influence my colour choice depending on what my goal for the user is.

 

2. b - Visual Perception
Optical illusions and visual perception are key to designing a website. As web designers, we need to take the end user through a journey, *the* journey that we intend to take them on. Being able to manipulate an end user through their visual perception of your website is a key skill in taking them through the journey you planned.

 

3. Visual Memory

• On my first attempt at this game, I got to level 16. I guess that means my visual memory is better than I would have thought! It tells me that visual memory is probably underrated in most people's eyes as it just occurs automatically and subconsciously without us realising it.
• I used the Gestalt Principles unbeknownst to myself:
1. Proximity - I imagined the different symbols as one whole symbol rather than a group of individual ones. If I ever focused on just one, I'd instantly forget where the other ones were.
2. Similarity - All the symbols are the same shape, this helps in grouping them together.
3. Closure - This isn't really relevant in this game in my opinion.
4. Continuity - If your tactic was to make shapes with the symbols (as in, draw imaginary lines between them) then you'd use continuity to do so.
5. Figure-Ground - I definitely used this as I trained my eyes to ignore everything in background and only focus on the foreground i.e. the symbols themselves.
6. Symmetry - I don't think symmetry is relevant for this game as the symbols were never in a symmetrical pattern although the game area itself was a square so there's an element of symmetry there!
• There are a multitude of ways for the designer of a website to interact with the users of the website. Playing Pattern Memory can help by learning how to draw the user's attention to certain areas when needed. It's important to understand how our visual memory works and what it's limitations are, also taking into consideration the average age of the users and therefore what their visual memory limitations may be.
 

4. Attention & Working Memory

• I actually did notice the gorilla and counted 15 passes but I think I probably shouldn't have noticed the gorilla if the people in the white shirts had my full attention!

• This is relevant to Human Computer Interaction as it goes back to the importance of being able to manipulate the user into seeing what you want them to see. Every web designer has a specific journey they want a user to experience and a specific message they want a user to see. By being able to draw a user's attention to certain areas and away from others, the web designer will be much more effective in delivering a quality UX.

Follow me on Twitter: