Friday, February 27, 2015

Lab 6 - Accessibility in Web Forms


Logical Format

  • Logical order of form fields 
    • Order of fields should follow an easy logical format, both visually and with keyboard access.
    • Check the linearised order of items using WAVE accessibility tool
  • Clear instructions on what information is needed


Labelling Form Controls
  • Required fields are labelled as such - ideally using the word Required as part of the label. 
  • Use <label for=''> tag to ensure screen readers can interpret your form fields correctly. Example here 
  • Link labels and input fields together using matching values in <label for='' > and <input id='' > tags. 
  • When using tables to layout forms, be sure to use 'scope' attribute to attribute headers to column/row contents where appropriate. 
  • When using checkboxes, use the <fieldset> tag to create a <legend> for the options. 
  • Use invisible labels where appropriate - <title> attribute will cause help-text to appear on hover. 
Keyboard Accessible Navigation 

  • Ensure your form can be completed using a keyboard only. 
    • JavaScript can be problematic - always test when using scripts 
    • Radio buttons are not universally supported across browsers and screen readers. 
      • Select menu is preferable for 'choose only one' situations. 
      • Be sure to include explanatory text in the first option - sometimes screen readers will not associate the label with the select menu. 
    • Avoid use of selections that automatically redirect - use a normal submit button. 

Test your Forms 

  • Use the WAVE accessibility tool 
  • Test the forms for full keyboard navigation
  • Test with screen readers to ensure users get the needed information


Sources:
Web AIM
American Foundation for the Blind
Getting your forms in Shape

Tuesday, February 24, 2015

Lab 5


Create a hotel website homepage (index.html) based on the screen prototype that you sketched in class this week. You should document the following:
  1. What is your mental model of this website?
  2. Will you use metaphors? If so, which ones?
  3. Pick the Gestalt laws that are relevant to your design. Highlight exactly where these are being incorporated.
  4. Comment on your intended use of affordance.

Sunday, February 22, 2015

Lab 4 - Part III - Perception and Attention


Visual Perception

The figure-ground exercise is a good one to remind us that what we see is often only part of what is in front of us. I like these kind of puzzles, but I have found that some keep my eye moving and looking for more, while others lose my interest quickly. The more cluttered or 'busy' the image, the more quickly I will lose interest. Where's Wally is exhausting for me, but I can sit for ages looking at Bev Doolittle's work.
On a more general application level, I see some important design considerations coming out of these images.
- The mind does it's best to make sense of what is seen. If the sense is not evident, the message is lost because the viewer moves on due to frustration or boredom.
- Image context is important. Cluttered and crowded images leave the user searching for focus. While this can be a useful tactic in design, it can easily go wrong.
- Light, colour, and line are very influential. The closure examples point this out and many of the images in the final link drive it home.
- Depending on how detail-focused or meaning-focused a person is, these closure images can be trivial or confusing. I have seen variations of the second and third closure examples used in cognitive assessment tools for children, and the word shapes are used in some teaching methods to help children who have difficulty learning to read.

Visual Memory 

The Pattern Memory activity was relatively easy for me until round 8 or so. The first time I played, I made it to level 11 before making a mistake, and the second, I made it past level 13. Using grouping and shape-making to remember the patterns helps but becomes more difficult as the board grows and the groups get more spread out. As a designer, this exercise emphasises the power of visual placement in helping users associate or distinguish things.

Attention and Working Memory

I have seen the basketball gorilla video before, so it didn't have the wow effect that it does for first-timers. It is known to those who study attention and thinking that people are not able to take in and process all of the information available in their environment. We selectively attend to those things that we see as important first, and any other details get taken in by chance. Again, this relates to design an Wikipedia has a nice summary of attention related design considerations.
Some key principles from the article:
Information access cost relates to lost time or effort in locating information. Proximity compatibility can help reduce information access cost by use of literal proximity or more figurative methods like common colours, patterns, or shapes. Predictive aiding is designing to facilitate users completing actions, and the principle of consistency (using familiar display formats, arrangements, etc.) can help users to find the information they need in an unfamiliar environment.



Lab 4 - Part I & II - FishCreek Web Development

Part I – Coding the Fish Creek Website website

HTML/CSS Validation tests: 
I tested my updated code with the HTML and CSS validators with good results. HTML validated with 1 error. I had a stray tag in the head, which was easily fixed because the validator indicates exactly where the trouble is. CSS validated with no errors on the first run.

Browser compatibility: 
I tested the code in Chrome, Firefox and Internet Explorer. I don't own a mac, so I wasn't able to test it in Safari. The page displayed the same on all browsers and I wasn't able to find any functional problems. Even the iframe I embedded was displaying the same place and functional! I suspect that this type of testing would turn up some snags if a page were using more complicated features. I noticed in the W3Schools site there are always tables showing what browsers support which features.


Part II – Web Development Tools 

After some research, I have selected a few browser extensions that would be essential helps for web development. 

For Firefox: 
Firebug is the most comprehensive developer tools add-on I found, and it is recommended in many articles as a must-have. It allows you to examine the HTML and toggle CSS elements of a page in real time on the same screen. There are many additional plug-ins you can add to get additional functionalities
ColorZilla is a colour tool with a number of handy features. You can use the eyedropper to get the colour reading of any image or text by simply hovering over it. The code is automtaically copied ot the clipboard, and you ahve the option to save colours as favourites as well. It also have a pallette tool and gradient generator which might come in handy when designing a colour scheme. 

For Chrome: 
DevTools is not technically an extension since it exists natively in Chrome, but it must be mentioned here because it is so essential. The functions in DevTools are essentially the same as those in Firebug for Firefox. This page outlines the features of the Elements panel and introduces keyboard shortcuts as well. 
Web Developer Checklist is an extension that quickly scans your site for violations of best practice and outlines them for you. 
Check My Links is another quick one that has the capacity to save lots of time. This extension scans over your page and tests all the links. Working links are highlighted in green, and broken links in red. 

For both: 
WebAIM has a nice introduction to the key features of the Web Developer Extension by Chris Pederick. When I first added this extension and tried it out, I wasn't impressed because the features were not intuitively easy to find or activate. After finding this tutorial, I can see there are quite a few handy features available. I think the extension might deserve a second look for these advanced features. 




Lab 3b - Cognition


Arab Web Design: How is it different?

RTL Layout - The right to left (RTL) layout must not only accommodate the language reading from RTL but also the images, menus, etc. Basically, the entire page has to be flipped horizontally. This article addresses some of the technical aspects of working with HTML and CSS for RTL sites.
Drupal was suggested as a helpful platform because it has in-built features that allow for internationalisation. There is also a layout switcher that can switch the layout from RTL to LTR while keeping shared content.

Images - Since the entire site will be read RTL, different images will be needed to make sure the site looks right. The author explains that simply flipping the images will not be sufficient and that alternate images would often be needed. Additionally, iconography assumptions must be checked because some may not translate well.

Text and font considerations -
Besides directionality, there are other considerations related to the language and the characters. Arabic characters are shorter and wider than Latin characters, giving the text a different overall appearance. One source suggested using a minimum font size of 16px to account for this.

Translations, linguistic and cultural - Translations must not only be checked carefully, but may influence the layout for buttons and other small elements. multiple sources suggested there are times when a sentence is required to convey the concept held in a short English word.
Additionally, there is a wide dialectical range across Arabic speakers so pages should use the Modern Standard Arabic (MSA), which is widely understood, while remembering to include dialectical differences when setting up SEO.
Design elements as fundamental as colour have differing meanings across cultures. Further, all content (text, images, etc.) should be checked for elements that may be seen as culturally sensitive or even inappropriate. Importantly, Simonsen points out that cultural standards vary widely across the Arabic speaking world.

Sources:
Arabic website - design for right to left languages
Cultural Considerations for Global Websites
Right-To-Left Text in Markup Languages
Showcase Of Web Design In The Arab World
The Insider Secrets To Creating Compelling Arabic Websites
What's Different about Arabic web Design?



Metaphor in web design

Metaphors use real life associations and meanings in design to speed up recognition and understanding of concepts and to facilitate navigation. Examples include:

Buttons and navigation tabs: In web design these items behave as they do in real life. Click the button to start some action or to turn on a feature. Select a tab and get access to the information inside.

Icons are less literally associated with their intended meanings, but only by a step. Choose the house icon to go to the home page; Click the magnifying glass to search for something; Select the envelope to see what new email has arrived.

Metaphor is used in conceptual design as well. An example discussed in lecture is the visual metaphor of a bookstore used in the Book Depository website. iBooks and Kindle use a similar device. Using the image of a garden or tree to invoke the idea of growth is another example.
Here is a selection of examples from my reading (citations below)



5 Reasons Why Metaphors Can Improve the User Experience
Inspiring Examples of Symbol and Metaphor Use in Web Design
Master the Metaphor
Using metaphors in web design (the Sheep)
Using Metaphors in Web design (tuts+)


Lab 3a - Page Layout

Page Layout

1. Tags for tables:
<table></table> - open/close the table
<tr></tr> - identify rows
<td></td> - identify cells
<td colspan=“2”> - specify number of columns to be spanned
<td rowspan=“2> - specify the number of rows to be spanned
<caption> - assigns a title to the table

2. Colspan and rowspan are used to merge columns and rows in tables. The number in the quotes specifies how many rows/columns to be spanned. When using either of these, the number of total rows/columns must balance or there may be formatting problems when the table renders.

3.
<table border="4" bgcolor="#FFFF00" width=100%>
<tr>
<td colspan="2">Banner</td>
</tr>
<tr>
<td colspan="2">Navigation</td>
</tr>
<tr>
<td width=80%>Main Content</td>
<td width=20%>Sidebar</td>
</tr>
</table>
<br>
<table border="4" bgcolor="#FFFF00" width=100%>
<tr>
<td colspan="3">Banner</td>
</tr>
<tr>
<td width=20%>Navigation</td>
<td width=60%>Main Content</td>
<td width=20%>Sidebar</td>
</tr>
</table>

4. I can now appreciate what you have said in lecture a number of times: "Always close your tags when you open them!"  I had appreciated it as helpful advice, but actually practising it has made the point even more clear. It is so much faster to code the tables if you set up the structure with the tags first.

Wednesday, February 11, 2015

Lab 2 Part III - SEO


Based on reading Google's Search Engine Optimisation (SEO) Starter Guide, here are a few key guidelines for good practice in SEO that I can see being very useful to me as a novice web developer.
  • Use your <head>  Though the information in the <head> is not seen on your page, it is still important for helping ensure that people will actually visit your page. 
    • The <title> tag sets out the text that appears in the browser tab when your page is visited. Even more important, this is the first thing someone will see of your site when it appears in a search result. 
    • The "description" meta tag is also very powerful. The sentence or short paragraph used here will be available for Google to use as a 'snippet' for your page in search results. 
      • Accurate - Be sure to accurately summarise the content of the page so that users would be interested if they read your description as a snippet of your page. 
      • Unique - Be sure to also use a different description for each page on the site. This way, the unique content on your pages can be found more easily by those searching for it. 
  • Get some structure. The structure of the URLs for your site, as well as its overall structure can make or break the ease of navigating to and within your site. 
    • URLs are best made of real words. Why? The URL itself can offer a succinct description of the content, and complicated or overly long URLs tend to turn off users. A simple, readable URL will look friendlier and more shareable to your users. 
    • Using a simple, clean directory structure will help keep users oriented as they browse your site. That straightforward structure will also help search engines direct people to the most relevant page within your site. 
    • Sitemaps and breadcrumb lists will make navigation easier for everyone by providing a reference point for getting where they want to be. 
    • Don't let users stay lost! Even the best organised sites should have a contingency plan for when users lose their way. If a user mistypes a url within your site or visits a broken link, be sure they land on a helpful 404 page. I found this article on making a better 404 page, which I'll be refer back to in future. 
  • Be interesting! Offer interesting and useful content first and your site's reputation will follow. Well organised and edited content gives your users the information they want, and fresh content gives them a reason to come back. There are a few things you can do to help highlight the great content on your site though. 
    • Anchor text for links should be descriptive, making it easy for users to predict whether the link is one they need to follow. Also, making links visually distinct will help draw attention to them. 
    • Images and alt text are important for SEO as well as making your site accessible to those using screen readers, etc. Be sure to pay attention to the alt text for your images and ensure that it is descriptive, helpful, and unique to the image. 
  • Help the Crawlers - Making use of rel="nofollow" and robots.txt can help the search engine crawlers to keep focus on your content, and protect your page's reputation. 
    • If you have a blog that allows public comments, you can protect yourself from comment spam by using rel="nofollow" to tell the web crawlers to disregard the links in the comments section. 
    • More relevant to massive sites with large amounts of content is robots.txt, which can steer the web crawlers away from entire pages or sections of the site. This would be helpful if there are areas of your site that you do not want to be included in search engine results. 
So, how does all of this relate to the website I am currently building? I think all of the tips outlined above are relevant to most sites. Since my project site is in its early stages, of most relevance at the moment would be setting up better use of the <head>. I currently do not have a description tag on the page, so that would be a first addition. Following that, I would ensure that images and anchor text are optimised and also implement breadcrumbs to help users browse more easily.