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:

 

 

 

 

 

Skeuomorphism And Other Fun Things

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:

1. The Wall Street Journal
2. The Washington Post
3. The LA Times
4. The New York Post

The four similarities I found are as follows:

1. They are all most definitely flat designed websites.
2. They all have a clean, white background for clarity.
3. Each has expandable sections and menus in order to prevent cluttered menus.
4. 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:

1. News24
2. Times Live
3. IOL
4. All Africa

The four similarities I found are as follows:

1. These websites seem to have an old style, more archaic feel.
2. They all have either expandable menus or burger menus or both.
3. The homepage of each of these websites is huge in order to fit in the vast number of sections needed.
4. 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:

Blogging About Improving SEO For My Blog Is So... Meta.

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:

1. "description": This is used to describe the HTML document.
2. "author": The name of the author of the HTML document.
3. "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.
4. "viewport": This gives the browser information on how to scale the webpage according to the device being used to view the webpage.

Part II - 3: Sample Code From FishCreek

<head>
   <meta charset="UTF-8">
   <title>Fish Creek Animal Hospital</title>
  <meta name="description" content="Animal Hospital and Clinic">
  <meta name="keywords" content="Vet,Veterianrians,Animal,Clinic, Hospital">
  <meta name="author" content="Stephen Stenson">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="styles.css" rel="stylesheet">
</head>

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.



Follow me on Twitter:

So A Hammer Is Not A Screwdriver?

Lab Work - 14/09/2017

---

Part 1 - Q3. (a) & (b) Observations

Observation 1
Mock-ups, wireframes and prototypes would've seemed like massive red tape to me before but after reading the article here, I've realised that these stages are essential in order to add colour to an idea or project and flesh out potential issues early on in the development process. It's analogous to making a sculpture - you don't start carving the detail of the eyelashes into the boulder first, you create a rough outline of the figure as a whole and go from there.

Observation 2
Planning could be seen as a waste of time for those who want to jump right in and "do the do" but in fact, it's more likely to save time overall than anything. Being able to see potential pitfalls ahead of time is crucial for the success of the project cost and time wise.

Observation 3
With all the technology and software (freeware, open source software) available to developers today, there's just no excuse for poorly coded and tested websites. As read in this article, there are literally websites that will test how your website displays on different browsers for you!

Observation 4
Good websites are all about good end user experience. People have short attention spans nowadays. If your website involves too much interaction or is too busy or is difficult to look at in any way, your audience numbers will suffer immensely. You literally have a matter of seconds to reel the user in and if you can't achieve it then, you'll lose them forever.

Part 1 - Q4 (a) Terminology on Twitter 

1. Lo-fi: I chose this word because I've never seen it used in the context of design before and it was used many times. On Twitter, all I found were references to music!!
2. SEO: Searching this acronym on Twitter returned many posts about how to make your website more visible and searchable through search engines. It made me realise how mainstream and important these things are nowadays! The posts I found were mostly by web development bloggers.

Part 1 - Q4 (b) Twitter Follows 

1. AJ Ghergich (@SEO) - I mean, come on, his Twitter handle is literally @SEO
2. Search Engine Land (@sengineland) - Breaking news on all things Google and SEO.
3. Moz (@Moz) - Huge following on Twitter and commercially focused in order to drive webpage visits up.

Part 3 - Q1 Analysing the UI

https://www.yahoo.com/music/

Analysis

• Takes a long time to load / process heavy.
• I personally like the simplistic white background with darker elements in front. Makes everything easy on the eyes.
• There are a lot of different menus which can seem overwhelming unless the user is going to put in time to figure them all out. I'm thinking there should only be a few higher level menus leading to more detailed sub menus for easier navigation.

 http://www.discovery.com/

Analysis

• There's a lot of media (both moving and still) on this homepage meaning it's process heavy and slow to load.
• I like the design, it's slick and professional looking.
• It has a hamburger menu in the top right which leaves less cluttered menus across the top and down the side of the screen. I much prefer this. 
• I never like pages that make you scroll way down in order to see the full content. What user ever goes down to the bottom? I'd rather a tidy page where you don't have to scroll far to see all the content - at least on the home page!

https://www.codecademy.com/

Analysis

• I love this website - it's modern, it's minimalist and it directs your eyes naturally to the objects you need to focus on. 
• I really like the nude colour scheme. That's just personal preference though I guess!
• One thing that really bothers me from a UX standpoint is when forms on websites don't tell you that you've put something in wrong until you finish filling out the whole form (and then some even delete the whole form's content when it tells you there's a validation error at the very end!!!!!). Codecademy warns the user on the fly using coloured text and textboxes that a validation has failed. This is a simple but stand out feature from a usability viewpoint. This proves that UI could look great but at the same time UX could be pretty terrible! In the case of Codecademy, I think both UI and UX are fantastic.

Part 3 - Q2

	http://mobile.css-validator.org/
	Yahoo	Discovery	Codecademy
What did they look like?	N/A - Doesn't display on this website.	N/A - Doesn't display on this website.	N/A - Doesn't display on this website.
How did they score?	0%	0%	0%
What are the main problems?	Page size and external resources	Page size and format (not a HTML document)	Page size limit and frames
Which tool was the most informative/useful?	ready.mobi as it displays the websites through various devices	ready.mobi as it displays the websites through various devices	ready.mobi as it displays the websites through various devices
	http://ready.mobi/
	Yahoo	Discovery	Codecademy
What did they look like?	Bad on the low tier phone but good but need to scroll across on the rest	Need to scroll across on the low tier phone but good on the rest	Not optimised for low tier phone but displays well on others
How did they score?	28 passes 10 fails = 73.7%	26 passes 12 fails = 68.4%	24 passes 14 fails = 63.2%
What are the main problems?	Etag Support, Javascript placement and Caching control	DOM too large, Javascript Placement, Frames and CSS measurements	DNS Lookups, Javascript placement, Frames, CSS Measurements, Caching
Which tool was the most informative/useful?	ready.mobi as it displays the websites through various devices	ready.mobi as it displays the websites through various devices	ready.mobi as it displays the websites through various devices

Part 3 - Q2

a. Accessibility

1. Yahoo has some accessibility issues and everything is displayed as it should be.
2. The Discovery website seems to have a lot of accessibility issues with large areas not displayed.
3. In relation to Codecademy, there are some minor accessibility issues and the display in general seems to be fine.

b. Problems

1. The main problems on Yahoo are based around contrast errors, missing or redundant alt text  and redundant title text.
2. On Discovery, apart from the issues above only a few minor problems like missing alt text, redundant link etc. were present.
3. There are some contrast errors, redundant alt text alerts and a few empty link errors on Codecademy.

c. Similar Problems

The websites seem to have some similar issues like contrast errors and alt text alerts.

Follow me on Twitter: