Lab 4 - Contd

Perception and Attention

Visual perception

I played the following visual blink game and scored a brain age of 42! http://www.freebrainagegames.com/games/visual_blink.php

In my first attempt of the Spot It game I scored 8.
http://www.blueorangegames.com/spotit/

While playing both games I noticed that even after staring at the images for a long time the differences and similarities were not easily detected.

Graphics, color, lines, patterns and background shading can be positioned in ways that disrupt vision, make the image appear distorted in size, color or depth, create blind spots and after images. It is important to design a webpage with careful consideration given to how it will be perceived so that the end user can understand and interact with the webpage without difficulty and so that the page is perceived as intended. Indeed perception and the identification of images will also be influenced by the viewer’s intuition.

Visual memory

In the following game I reached level 8/20. http://www.playkidsgames.com/games/patternMemory/patternMemory.htm

This game made me aware of the limitations of short term memory as there is only so much visual information I can remember in one second and it also made me aware of the methods I use while trying to memorise information quickly.

The Gestalt principles of similarity and proximity were used. The objects were the same shape and colour which made them easier to recognise and it was easier to recall the objects when they were grouped together. Closure was used to memorise objects when a grouping resembled a shape.

Positioning similar elements together in a webpage can make it easier for the user to interact and learn how to use a website, as it creates a logical association between elements. The user will easily recognise parts of the page which are related and then recall them easily when navigating a page. The positioning of dissimilar elements can be used to draw attention to focal points

Testing attention and working memory

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

While playing the above game I focused entirely on the players in the white t-shirts and did not see the gorilla!
Users will only focus on what they are looking for in a webpage and not pay attention to elements of the page that are not related to their goals. For example users have learned to selectively ignore banners as these are usually advertisements.  Thus a webpage must be designed so that the important information is not overlooked.

Lab 4 - More CSS & Cognition

Markup Validation

The markup validity of my documents was checked using the validator at http://validator.w3.org/

The code input for Index.html showed the following errors:

• Stray end tag div x 2
• & should have been escaped as & x 3
• No space between attributes x 1
• Duplicate ID x 1

Each of these errors were easily fixed.
The code input for My Services.html showed the following errors:

• & should have been escaped as & x 3
• Text not allowed in element ul in this context x 6

These errors were also easily fixed.

CSS was checked using the validator at http://jigsaw.w3.org/css-validator/ and the results showed…

...Congratulations! No Error Found.

The webpages were tested in Internet Explorer and Chrome and displayed correctly in both.

Web Development Tools Firebug is a web development add on for use with the Firefox browser. The tool is used to examine, debug and edit the HTML, CSS and JavaScript of a live webpage. The tool views the live source code, highlights changes as they occur and shows the effects of editing instantly while CSS can be inspected, previewed and tweaked.   Web Developer is an extension which adds several web development tools to the browser. The tool appears as an icon beside the chrome address bar once downloaded. The tool can be used to disable and edit CSS, validate html and describe errors, change image sizes, outline tables and headings and resize windows.

Lab 3 - Starting CSS

Coding Tables

The colspan and rowspan attributes communicate to the browser to display a cell that spans the width of multiple lower-level columns or rows. The colspan attribute specifies the number of columns that a cell will span and rowspan attribute specifies the number of rows a cell will span.

For example in the following table the colspan attribute is used to display one column cell labelled Annual Sales Volume in the first row which covers the four lower-level columns underneath. Similarly the rowspan attribute is used to display a single cell in the upper-left corner that spans the width of two column rows.

 
The following is a snapshot of the code used to create the above table . Line 12 shows the rowspan attribute used within the table data tag and was given a value of 2. Line 13 shows colspan used with the table label tag and given a value of 4 followed by the name of the column label.

It was easy to write the code for the first table seen in Example One above as the table followed a basic orderly structure. It is the type of table that is straightforward to read left to right in rows which makes it easy to visualize beforehand therefore it was obvious which parts of the code to write first.

Using a table to format a webpage was more difficult. It was necessary to examine the webpage layout beforehand to organize the table and determine which page sections go into which area of a table. In writing the code it was not obvious which table tags to  use. There were further attributes to consider that were not immediately obvious such as setting the table border to 0, specifying how wide the table cells should be relative to the webpage and aligning the cell contents. In doing this exercise I referred back to the examples and needed to edit the code a lot more to get the webpage to display correctly and further work is necessary to separate and style the contents of the table properly.

Cognition

The South African newspaper websites listed on http://www.onlinenewspapers.com/  displayed the following common features:

1. Colour - The websites use white backgrounds with black text and some red, blue and grey text.

2. Layout – The layouts use multiple columns with a header and navigation section at the top of the page, content in the middle sections and a footer.

3. Content – The content is mostly text with some photographs and is organized by news type eg News, Sport, Lifestyle.

4. Responsiveness – The webpages were easy to read and navigate on a laptop screen.

The USA newspaper websites listed on http://www.onlinenewspapers.com/  displayed the following common features:

1. Colour -The websites use mostly white backgrounds with black text and sometimes text in an array of other colours with contrasting backgrounds.

2. Layout - The layouts mostly use 4 columns with a header and navigation section at the top of the page, content in the middle sections and a footer.

3. Content - The content is mostly text with a lot of photographs and videos also. Content is organized by category.

4. Responsiveness – The webpages were easy to read and navigate on a laptop screen.

In comparison to the USA news websites, the South African news websites appear to be more basic. The USA news website display richer and dynamic content in each part of the layout. For example the header sections contain log in and subscription details and information on the weather. The USA websites have a greater quantity of main content with many of news stories  headlines accompanied by a photograph. The US websites contain several navigation areas in the header and footer.

Flat UI Design

Flat design is a minimalist web design style that does not use three dimensional visual effects in webpage graphics such as shadows, textures, outlines and highlights. 3D techniques are typically used as cues to help users understand interactive elements such as clickable buttons or text entry fields and differentiate them from other data elements. Flat design omits these effects and instead relies on icons, labels, colour and the context of the webpage, such as having clickable navigation links at the top of the page. It is a design pattern that works well on touch screen devices. This design can be seen on the Apple homepage and in Windows 8.

Skeuomorphism is the replication of the design features of everyday objects into the design of webpage objects. The logic is that this representation will help users understand the purpose of a webpage object based on experience of real world objects. For example Amazon used a bookshelf graphic as a background in Kindle for organizing digital media.

Lab 2 - Starting Coding & SEO

Using meta tag in an HTML5 page

The meta tag is a void element that appears in the head section of a web page structure.  The meta tag provides information about the webpage such as character encoding, page description, keywords and author.

1.       Character Encoding

Character encoding represents the set of letters, numbers, punctuation and symbols used in a webpage and allows the browser to display the web page content. In Example 1 below the meta character set is indicated to be Unicode utf-8, this is used for HTML5 web pages and email.

 

2.       Web Page Description

The meta tag may also be used to describe a webpage to a search engine.  The search engine will use this data to list relevant results.  This description will also tell search engine users what the web page contains. Example 2 below shows a meta tag named as "description" and the content value defines the web page description:

3.       Keywords

The meta tag can also be used to specify keywords relevant to a webpage. In the past these keywords were accessed by search engines to rank websites in searches but are now mainly used to detect spam. Example 3 below shows a meta named "keywords" and the keywords written as the values of the content.

  4.   Author

Another use of the meta tag is to define the author of a web page. As seen in Example 4 below the meta name is author and the writer of the web page is referenced as Sarah Webb.

 

Search Engine Optimization

Search engines are the first place most web users go to find a web page. As such search engine rankings provide an opportunity to generate and drive targeted traffic. The following four guidelines describe website improvements which can maximise visibility in search engine rankings:

1.  Create a unique and accurate title for each page of the website

It is best practice to choose a relevant title that accurately describes the webpage as this will communicate to search engines what the content of a page is and will appear in the first line of the search result for users. If a web page description matches a user's search query the words appear in bold in the search results. Short and informative titles are best for displaying in search results and are helpful to website visitors. For example the title tag of a business website homepage could describe the business name, location and main product offerings.  It is best practice to identify each page with a unique title as this will differentiate the page from others in the website and provide the best results to users. For example the following shows the first organic result for the search query "laptop bag online" using Google:

2.      Use the description meta tag

 A short paragraph which summarises the content of the website can be written inside the meta tag to give search engines an overview of the page. This description may be shown beneath the title of a search result with the parts of the page that match the search keywords. It is best practice to write a description that is relevant to the webpage, is non-generic, does not just contain keywords and is not just a copy and paste of the webpage. The below example shows the meta tag description of a google search query for "Oasis Clothing" using Google. It also recommended to have a unique meta-tag description on each webpage.

 

3.      Create URLS that are easy to understand

Search engines use software which crawls websites to explore and index the content. A URL that is as simple and easy to understand as possible gives a search engine more information about the page when crawling. The URL will display below the document title and description in a search result as seen in the example below. It is best practice to use URLs that are short, relevant, descriptive and are without excessive keywords. If a URL is not recognised by mobile devices it may not appear in a mobile search index.

 

4.      Build a navigation hierarchy with a natural logical flow

A websites navigation indicates to the search engine which content is important.  It is easier for search engines to crawl a navigation hierarchy that is made up of normal text links as opposed to drop down menus and images.  An overly complex navigation hierarchy also makes it difficult for users to find content. An XML Sitemap file can be created specifically for search engines, this provides links of the web page structure and make it easier for search engines to find webpages. It is best practice to keep a site map organised and updated.

Lab 1 - Beginning Web Development

In my first post I will briefly discuss two interesting observations from the two articles on web design linked below:

Article A:Turning Design Ideas into Reality: Brainstorming, Wireframing, Prototyping

(1)   The inclusion of stakeholders in the initial brainstorming process can reduce the risk of a design being signed off by a committee that has not participated in the actual design. By collaborating with those with an interest in the final product, ideas and issues are raised that could be potentially overlooked by the designer.

(2)   A wireframe can be beneficial for communication as well as design.  While outlining the content, layout and behaviour for the designer, the low fidelity wireframe provides a visual tool to communicate the proposed solution to stakeholders and is a simple way to prompt feedback early on in the process.

Article B: 10 Common Web Developer Mistakes

(1)   As a user’s navigation is goal driven, users dislike this flow to be interrupted by pdfs, new windows or advertising. It is suggested  that designs should omit anything that looks like an advertisement because web users have learned to selectively ignore anything that looks like an ad such as banners, animation and pop ups.

(2)   It is suggested that users prefer websites which they feel in control of as they know what to expect when they visit it. These expectations are formed from experience of using other websites. A website can avoid losing users by staying consistent and applying the current design norms.

Using Twitter I searched for the terms JavaScript and Responsive Web Design from the articles above and found the following information:

JavaScript

Article: What is javascript

Posted by: @onemonthedu

In this page Javascript is described as a front end programming language responsible for the behaviour of a website; how HTML and CSS move around and animate a web page. In a short video it is explained that JavaScript is written between the script tag along with frameworks which are listed.

Responsive Web Design

Article: What is the difference between adaptive vs responsive web design

Posted by: @onemonthedu

In this article the objective of Responsive Web Design is described as designing a website which will enhance the user experience by catering for all device sizes. A responsive web design uses percentage based layouts in a grid system in which grids can stack as browser width narrows.

I am now following three new pages on twitter!

Web Design Ledger

Follow @webdesignledger

This is a publication written by webdesigners. I chose this page because of the range of content which is updated regularly including tips and tools for web design, web design news, interviews, design trends and examples of good web design. And we have used an article posted by this page in the our first lab exercise!

HTML5 Hub 

Follow @HTML5hub

The profile is described as a community of web developers. It focuses specifically on HTML5. Although it does not post regularly and has a smaller following, the twitter page has posted several links that could be useful in developing my skills as a beginner.

Webdesigner Depot

Follow @DesignerDepot

Similar to the Web Design Ledger this is a blog which posts on all aspects of web design and includes tutorials. It has a large following on Twitter and over 28.1k tweets so there is plenty of content to explore! The articles will be a useful resource in learning about web development in practice.

Analysing the UI

Q1. The following websites were analysed with regard to a user with a visual impairment:

https://www.blogger.com/
This website is not easy to navigate. When logged in it is not clear how the website is organised, how to find your way around and access the different areas of the website. It is finicky and takes some practice to use it. It could be improved by simply including structured text navigation area on the left hand side. 

http://edition.cnn.com/
The website is accessible to a visual impaired person in that the text is large, bold and contrasting black with the white background. However there are a lot of images displayed which a visually impaired user might not be able to see therefore should include text headings. The dynamic navigation areas at the top of the page are easy to follow but also include pictures.

http://www.amazon.co.uk/
The home page is quite cluttered but the shop by department navigation is clearly labelled. Although the navigation lists are long and might create difficulty for a visual impaired person, the links are described very specifically which is helpful if using a screen reader.

http://www.surveymonkey.com/s/LYJMBHK
Q3. The above evaluation questionnaire made me consider different factors such as the language, consistency, feedback, exits, help section, search function, page load time and currency.

Q4.The CNN and AMAZON websites were analysed using the validator http://validator.w3.org/mobile/
The CNN result was 0% mobile friendly;
It failed in several areas. The failures categorized as critical and severe were:
The total size of the page (1.6MB) exceeds 20 kilobytes (Primary document: 78.3KB, Images: 93.4KB, Style sheets: 1.4MB)
The certificate is invalid.
-The size of the document's markup (78.3KB) exceeds 10 kilobytes
The CSS style sheet is not syntactically valid CSS

I could not find a website that rated higher than 60%. I tried several and Facebook was the only website that gave a result other than 0%.

http://www.amazon.co.uk/ did not return a result after several attempts, the webpage showed a message that the server returned an empty or invalid response.
Amazon.com  however was rated at 36%;
The page size limit is given as a critical error: The total size of the page (207.7KB) exceeds 20 kilobytes and one severe error the CSS style sheet is not syntactically valid CSS.


Q5.The evaluation reports positive web accessibility for both in Features such as Alternative text, Structural Elements such as headings, lists and tables and HTML5 and ARIA.

The parts of the webpage which hinder accessibility are reported as Errors, Missing alternative text, linked image missing alternative text, missing form label, document language missing, empty button and empty link. There are also Alerts and  Very Low Contrast Errors reported.

The accessibility errors are in the same areas for both websites but Amazon carries a higher frequency of errors with an additional error of missing alternative text.   As this is a comparison between a News versus a Shopping website, the differing content type, size and style of each website could influence the differences in the type and frequency of accessibility errors.