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

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.

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.

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

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. 

Saturday, February 7, 2015

Lab 2 Part I - HTML head tags

We covered a few tags for the <head> in lecture and I found more in other reading. I list all here.

<title> defines the title of the page.
<title> Page Title </title> 

<meta> is used to provide additional information about the page including page description, keywords, author, and other meta data.
The meta element can include the following attributes: name, content, charset
<meta name="keywords" content="HTML, CSS, web development, user interface">
<meta name="author" content="Robert Frost">
<meta charset="UTF-8">

<style> sets out style information. This is used for embedded CSS.
body {background-color:purple;}
p    {color:blue;}

<link> links the page to other resources like style sheets.
<link rel="stylesheet" href="mystyle.css">

There are also <base> and <script> tags used in the head, but we have not covered them in class yet.

<base> sets the default address and target for links on the page
<script> refers to an external script (like JavaScript)

Monday, February 2, 2015

Lab 1 Part III

1. Review of three sites with regard to ageing users (over 70): WebMD, Book Depository,

Of these, I would have expected WebMD and Book Depository to be more concerned with accessibility for the 70+ group, but since Wired is a tech focused group, they may have focused more on having their site to be intuitive to all users.

WebMD seems to do a fair job of making their home page approachable by older people, and the 'Health A-Z' tab and the search bar at the top of the page make it easy for users to locate info on a particular topic. The featured stories are of a range of topics but the article view is a bit cluttered with sidebars and blinking advertisements. The text in the menu bar is rather small which would present a challenge for those with poor sight. Overall, the site would probably not present massive navigation challenges to users 70+, but if the site were interested in improving, I would suggest adding a text-size adjuster to the top of the main page, de-cluttering the article views and removing the pop-up alerts from the page.

Book Depository has some featured content on the main page as well as a category menu on the left sidebar. The search box is easy to find at the top of the main page and takes the user immediately to the results of their search. The feature to add keywords to refine the search is helpful, but would not be intuitively understood by the older user. Shoppers can easily click through to see details of a book, but the button for returning to the results page might be easily overlooked as it is in the top left of the page rather than on the right-hand side near the easy-to-spot 'add to basket' and 'add to wishlist' buttons are. When items are added to the basket, the item count and running total is displayed at the top of the page, which would reduce the need to open the 'go to basket' link during shopping. The text on the site, particularly in the details of books, is small enough to be problematic for those with limited sight.

Wired may not be targeting the over 70 set but their generally user-friendly design is still reasonably accessible to older users. The main page has featured content tiled down the page and the menu bar expands on hover to show sub-menus. There is not a search box on the main page, but the magnifier icon links to a different page where the user can search. An improvement would be if the magnifier expanded to display a search box on hover. As with WebMD, the site has some ads, but it is not as easy to distinguish the ads from the main content here. For example, there is a full page-width ad for the iPad Air 2 at the top of the main page immediately below the menu bar which is in no way marked as an advertisement. I found it interesting that of the three sites, Wired uses the largest text in the body of its articles.

After reviewing each site in turn, I can see some clear positives in each for the older user. All of the sites also have features that could be improved to make the site easier for older users.

2. WALK is an organisation that provides a range of supports to adults with intellectual disabilities. Their website provides comprehensive information about their services in an easy to navigate format.

3. Survey Monkey survey

4. I had only a brief look at the survey monkey survey, and planned to return to it later. Unfortunately the survey wouldn't let me back in because I had visited before. However, after the conversation in lecture the following week, I would say that the survey would not have done much to sway my thoughts from the initial review. This might have been less the case if we were given some explanation of the terms in the survey. For example, what could 'clearly marked exits' mean in the context of a website?

5. Mobile friendly assessment
All three of the above sites scored 0% scored 7% scored 32% scored 32% scored 52%

It seems that even sites that seem mobile friendly to me are not doing well on this benchmark.

6. Accessibility checker has 32 errors, 79 alerts has 2 errors, 96 alerts has 42 errors, 125 alerts

Again, none are looking good. Just for fun, here are the additional sites I tested above: has 5 errors, 2 alerts scored 32 errors, 8 alerts scored 1 error, 1 alert (Note: Only the header of the mobile site rendered in the test frame, so I tested the regular site too, which scored 280 errors, 14 alerts) scored  0 errors, 1 alert

It looks like the accessibility standards are also largely not being met.
WALK would have of course developed their site with accessibility as a top priority as many of their service users have multiple accessibility needs.

Sunday, February 1, 2015

Lab 1 Part I

1. Create a Blog for the course. If you are reading this, you are here!

2. Twitter account. My twitter account is @anninireland

3. Technology Topics: Twitter search

It seems there is a new version of JavaScript coming out soon; I found a few tweets about the preview including this one posted by @JavaScriptGuide - Try out JavaScript 6 features while you wait for the real thing

Found a link to an article outlining how to do client-side testing in JS posted by @JavaScriptDaily -
A Journey Through Client-Side Testing with JavaScript:

Web design/development:: 

UX Magazine posted an eye-catching quote from an article on its website talking about the importance of design in enterprise apps.  @UXmag - "The last thing you want your app to invoke is the quizzical stare with head cocked to the side"  - #enterprise #UX

This article offers up some trends in web design for the new year. One that I had to look up to learn more about was isomorphic JavaScript; this seems to be an interesting idea! posted by @netmag -
Updated! 10 web design trends that will change EVERYTHING in 2015:

smartphones/ mobile tech ::

Prynt is a new company looking for Kickstarter funding to produce a smartphone case that is also a mini photo printer, essentially making your phone a polaroid camera. Kickstarter page here:
Tweeted by multiple sources including @gaurdiantech, @engadget, @prynt, @popsci, @willstweet, @ekado and many more

Google is preparing for a market test of Ara, a new concept in smartphones. The mudlar phone will apparently allow users to replace or upgrade indiviual components of the phone without having to replace the whole phone. Screen, battery, speakers, camera, etc will all be exchangeable. The idea could be one that promotes sustainable design and reduces consumption, but it could easily go the other way by promoting constant upgrades. The market test is scheduled this year in Puerto Rico, with an aim to have them available widely by year's end. Stay tuned.
Tweeted by @fastcodesign, @googleprojectara, @designtaxi, @verge, @android headline, and more
Links with more info:


Feeds to follow on twitter::

@netmag - magazine for web designers and developers. Features practical articles and includes a bit of fun.

@codrops - Nice mix of articles and tutorials on web design and development

@smashingmag and @sitepointdotcom both look to have some excellent news and info related to web design and development

I found there are quite a few others out there that specialise in JavaScript, User Interface, HTML/CSS and more, but for now, I will watch the more general ones.

4.  Observations from reading mobile&multi-device design 

Reading this text was an interesting introduction to thinking about design concepts. Though I use web and mobile technologies, I have given little if any conscious thought to the process of designing them. Here are a few observations and reflections on the reading.

Just in time features
I was interested to read about the process of this feature evolving from 'invisible' features to one that subtly but effectively draws attention to itself.

Passwords and Usability 
Passwords are a necessary annoyance, but Luke puts the issue into perspective and makes some very good points. I think the decision of showing the password by default but offering the option to hide it is a very good balance of maximising usability while retaining a security feature that some people will feel is very important. Sure, someone looking over your shoulder to spy on your password is still possible, but there are many other security threats which are taking precedence now.
I also see the sense in not prominently displaying the log-out feature. I do find it tedious to have to re-login to apps every time they open.

Gradual Engagement: Maximum user happiness 
I hadn't thought about the idea of user drop-off after installing apps and was a bit surprised there was such a dramatic drop. On reflection though, I can recall some apps that I abandoned quickly when I found getting the app up and functional was taking too many steps.
Polar has implemented a range of techniques to ensure users are able to get into the app easily and find its useful features without getting in the way. Making sure the user is able to interact with the core functionality of the app immediately means thinking more carefully about the user's expectations and building in features and actions to be there at the right time to make the user experience better.

Besides leaving the sign-up/sign-in process until later, Luke describes how the app incorporates just in time education through well timed tips rather than a formal app-tour, and the strategy of keeping on the train while incorporating social media integration.

Performing actions optimistically
I was not familiar with the idea of performing actions optimistically, but after reading about it here I am sold on the concept as a way to increase user satisfaction. While the results of this strategy are invisible to the user, that is what makes it brilliant. Allowing the user to move on to another poll while the app continues in the background to upload the data lets the user get on with what they want to do and keeps them engaged with the app. Yes, creating a local version of the poll requires more programming, but the user gets a better experience, which can make an important difference in whether they stay with the app or move on to something else.

The related section on avoiding the spinner describes a technique I have been aware of before and seen in practice. However, the suggestion of skeleton screens as a way to achieve this might not be ideal for all applications. Where I have seen this kind of behaviour in apps, I found it as frustrating as staring at a spinner. Although I'm sure there are a number of other programming techniques that are intertwined with this one.

Thumb flow
It makes a lot of sense to design and test a product for the way that it will be used.
Thinking about the main actions that a user would take and building in simple thumb swipes and taps to do these while incorporating the just in time tips to help users discover these features would go a long way to making the app incredibly easy to use.
It seems to me though that this process would take quite a bit of thinking and planning, trial and error, to get right. Particularly finding a way to make these slick features known without getting in the way of using the app. The timing and placement of the tips that should help users could easily be a designed hassle rather than help. 

Companion design
I was interested to learn a little bit about this concept and I can see its potential as the 'next thing' in design. Depictions of technologies being fully integrated with one another are common in television and film, but the level of integration in life is only beginning to develop. Sure, web services can now easily sync between devices, but the level of integration and interaction that Luke is talking about here goes far beyond that. I like the idea of apps being connected to what a user is watching on TV and being able to enhance the media experience. I wonder though, with all the different platforms out there (PC, Mac, TV, iphone, Android, etc.) how far away is this from being practically possible on a wide scale?