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 - FirefoxFirebug 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 - ChromeResponsive 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 PerceptionOptical 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:

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.

Similarity - All the symbols are the same shape, this helps in grouping them together.

Closure - This isn't really relevant in this game in my opinion.

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.

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.

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:

Monday, October 2, 2017

Lab Work - 27/09/2017

Part I - Reviewing This Week's Lectures

Page Layout

1. colspan is used to determine how many columns in a table the cell spans i.e. merges the cell horizontally. An example of the code is outlined below:<table> <tr> <td colspan="3"> "Stephen Has A Great Blog"</td> </tr> <tr> <td>Yes</td> <td>No</td> <td>Maybe</td> </tr></table>

rowspan is the same as colspan above except it merges cells vertically. Example below:<table> <tr> <td rowspan="3"> "Stephen Has A Great Blog"</td> </tr> <tr> <td>Yes</td> </tr> <tr> <td>No</td> </tr> <tr> <td>Maybe</td> </tr></table>
2. Coding tables is a pretty laborious task with a lot of potential pitfalls and syntax errors possible due to the sheer number of tags involved. If not indented sufficiently, it's extraordinarily easily to lose track of where each cell can be edited and which element belongs in which section of the table.

I guess one positive is that you have total control over every single property of the table, including each individual cell and the table itself as a whole.4. Cognition - USA Websites
I analysed the following websites:

The Wall Street Journal

The Washington Post

The LA Times

The New York Post

The four similarities I found are as follows:

They are all most definitely flat designed websites.

They all have a clean, white background for clarity.

Each has expandable sections and menus in order to prevent cluttered menus.

Each website has a frozen header which stays at the top of the screen as the page moves.

5. Cognition - South African Websites

I analysed the following websites:

News24

Times Live

IOL

All Africa

The four similarities I found are as follows:

These websites seem to have an old style, more archaic feel.

They all have either expandable menus or burger menus or both.

The homepage of each of these websites is huge in order to fit in the vast number of sections needed.

The websites are pretty flat but contain some old style shadows and remnants of skeuomorphism in places.

5. Cognition - Differences

I think the USA websites are a lot flatter, cleaner and more modern looking that the South African websites.

The South African websites all have options for translation into different languages which reflects their particular cultural needs.

It seems to me that the South African websites are narrower than the USA ones which leads me to believe that they are made for smaller, narrower screens perhaps reflecting the gulf in popular devices in the two countries.

7. UI Design

a. Flat Design is a two dimensional, minimalist type of design that is generally displayed using squares or rectangles to create symmetry and neatly boxed off areas. The use of very basic, simple icons is also prevalent. It's designed to be fast loading, low on processing, stylish, aesthetic and to be unintimidating to the end user.

Flat Design has been criticised for having too much focus on aesthetics and too little focus on usability. In extreme cases, there seems to be a loss of functionality and instead, a fashionable, difficult to use but awe-inspiring look.

Apple's website (here) is a prime example of a website that uses Flat Design. The navigation bar is flattened so much that it may take some users a second to realise it's a clickable menu at all. As you scroll down, all the sections are neatly boxed off into squares and rectangles. It almost feels like the website was created by a person who has O.C.D. purely related to symmetry and minimalistic design.

The current Apple website. This was very different a few years ago when design trends were different.

b. Skeuomorphism or skeuomorphic design is based on the premise that people will find interfaces more intuitive if they can relate them to real life - it's a metaphoric design. An example of this would be a website selling books that has 3D book-like graphics displayed on a wooden book shelf where the books interact with the user in a similar way to the physical world ala the old iOS "iBooks" app.

While this is highly intuitive for users, it's also clunky and slow due to heavy processing loads and the design is often cluttered. This often leads to a negative user experience (UX), hence the shift to flat design.

The old iOS iBooks App. You can see the shelves look 3D due to shadowing and the books move when clicked.

The current trend seems to be going towards a bit of a mix between flat and skeuomorphic design. In recent years, design has flattened far too much leaving the end users in the lurch. Designers are beginning to fatten up the flat designs by creating small shadows around buttons again in order to distinguish buttons from simple blocks and in general creating some design depth. This is known in some circles as "flat 2.0" and we're going to be seeing more and more websites designed this way in the future.

Follow me on Twitter:

Lab Work - 21/09/2017

Part II - 1: Using <meta> in a HTML5 page

<meta> tags are used to provide information to search engines in order to help them index and rank results of searches performed. These tags will never be seen on the front end of a web page as they are contained within the <head> tags.

Four typical uses of the <meta> tag can be described using the following elements:

"description": This is used to describe the HTML document.

"author": The name of the author of the HTML document.

"keywords": These are comma separated words which help categorise the document and tell search engines specific terms which should be associated with the HTML document.

"viewport": This gives the browser information on how to scale the webpage according to the device being used to view the webpage.

Part III - Search Engine Optimisation (SEO)

A diagrammatic representation of the workings of SEO - in flat design format no less!!

There are many things I've learned from the articles I've read on SEO and here are what I think are the four most important:

1. Future proof by thinking mobile﻿﻿﻿﻿﻿﻿
Not only is it a good idea to design a website by using mobile first and then scaling up for practical coding purposes but it seems that Google have now made the commitment to begin to index web pages using mobile sites as opposed to desktop versions.

This means that both desktop and mobile websites will be ranked using the mobile version thus massively increasing the importance of the mobile friendliness of websites. This can be achieved by using the various tools to help your website become more mobile friendly, for example: https://search.google.com/test/mobile-friendly

As Google is the most popular search engine by quite a long way, I see this change as hugely important to web developers and it should radically change their approach if they previously developed with a desktop-first style.

2. Ensure all your pages are indexed
As obvious as this may sound, it's often an overlooked important step to ensure you're as searchable as possible!

The process is simple: subtract the total number of pages on your site you don't want indexed from the total number of pages on your site - this gives you the total number of pages you want indexed.

Use a tool like Website Auditor to see how many pages you have indexed and if there's a disparity then you need to take action to ensure the pages which should be indexed are indexed.

3. Make sure your page speed is optimised
Not only does page speed affect your UX and therefore likelihood of users returning to your website, Google are also obsessed with speed. They have included a signal in their search algorithm which affects site ranking by measuring how fast a website responds to web requests.

As the world wide web gets larger and sites become more process heavy, speed is becoming more and more a priority. Tools like Website Auditor (linked above) or Google's own PageSpeed can give you an indication as to how well - or badly - your site's speed will affect your page ranking.

4. Optimise <meta> tags for greater searchability
As outlined earlier in this blog, <meta> tags are important as they enable search engines to quickly and efficiently categorise your website without needing to crawl through tons of data to find keywords and descriptions etc.

Using the correct <meta> tags in smart ways can make a huge difference to SEO. For example, the "description" <meta> tag can affect your page ranking. Google recommends using a unique description that is human readable and diverse in order to maximise the effectiveness in the ranking algorithm.

Finally, using the <title> tag to appropriately describe the website is the most important on-page factor for search engine optimisation.