last post

This will be my last post for this scrapbook assignment, I have finished final documentation assignment and noted some research in there has not been posted here so the following is from assignment four:

Validating accessibility


At the W3C it recommends the following to validate accessibility for automeated tools wont cover all issues:

“Validate accessibility with automatic tools and human review. Automated methods are generally rapid and convenient but cannot identify all accessibility issues. Human review can help ensure clarity of language and ease of navigation.

Begin using validation methods at the earliest stages of development. Accessibility issues identified early are easier to correct and avoid.
Following are some important validation methods;

1. Use an automated accessibility tool and browser validation tool. Please note that software tools do not address all accessibility issues, such as the meaningfulness of link text, the applicability of a text equivalent, etc.
2. Validate syntax (e.g., HTML, XML, etc.).
3. Validate style sheets (e.g., CSS).
4. Use a text-only browser or emulator.
5. Use multiple graphic browsers, with:

-sounds and graphics loaded,
-graphics not loaded,
- sounds not loaded,
-no mouse,
-frames, scripts, style sheets, and applets not loaded

6. Use several browsers, old and new.

7. Use a self-voicing browser, a screen reader, magnification software, a small display, etc.

8. Use spell and grammar checkers. A person reading a page with a speech synthesizer may not be able to decipher the synthesizer's best guess for a word with a spelling error. Eliminating grammar problems increases comprehension.

9. Review the document for clarity and simplicity. Readability statistics, such as those generated by some word processors may be useful indicators of clarity and simplicity. Better still, ask an experienced (human) editor to review written content for clarity. Editors can also improve the usability of documents by identifying potentially sensitive cultural issues that might arise due to language or icon usage.

10. Invite people with disabilities to review documents. Expert and novice users with disabilities will provide valuable feedback about accessibility or usability problems and their severity.” (W3C, 1999)

So that is all! I need to do to validate accessibility properly. It is good to note that using a validator and gaining validation does not actually mean you have achieved your goal but just a step in the process.

lightbox

I want to use lightbox javascript (Dhakar, 2007) to open images of my designs. Javascript though can be turned off in users browsers and lightbox only works on 'all modern browsers'.

Jakob Nielsen is quite anti javascript: "Avoid JavaScript in your Web pages. No code equals no risk of bugs. If you must use JavaScript, test and debug religiously on all combinations of platforms and browser versions" (Nielsen, 2001). I think I read in our text somewhere that Krug? or was it in accessibility somewhere? that if you use something like java and flash then you should supply an alternative for those with incompatible platforms and browsers etc..

So I intend to use light box but supply an alternative for those that can't or wont be able to open the images that way. All I need to do now is work out how to do that!

I found this information: "Lightbox JS is a great example of what I'm talking about. Reference a JS file, then add rel="lightbox" to any image tags on your page and they get a cool popup effect. If the image tag has a title, it's used in the display. If the browser doesn't support it or the page is being rendered in another format (screenreader, print, etc.), it's a standard image tag so it degrades gracefully. Perfect" (Galloway, 2006).

I disabled java in firefox and noticed image (only) opens in a new page at the lightbox site, so this means images can still be opened for a larger view. I find myself forgetting to press the close button when I open images this way and tend to hit the back button which means I am taken from the site! This could be just me, I forget that you can click anywhere on the page to remove the image! My boyfriend doesn't have this problem though, he is good at closing elements in their correct places, could be just a personal usability issue, however, I will need to test this with users as this lightbox way is not a standard convention with opening images.


Dhakar, L. (2007) Lightbox Version 2.03.4,
Retrieved from: http://www.huddletogether.com/projects/lightbox2/
May 22, 2007.

Galloway, J. (2006) Using markup based javascript effect libraries to make dynamic sites in standards compliant html,
Retrieved from: http://weblogs.asp.net/jgalloway/archive/2006/01/18/435857.aspx
May 22, 2007.

Nielsen, J. (2001) Poor Code Quality Contaminates Users' Conceptual Modes,
Retrieved from: http://www.useit.com/alertbox/20011028.html
May 22, 2007.

more usability research

It feels a bit lame only relying on Krug for usability there may other issues I need to consider not mentioned by him. Online I found a few do and don'ts in design from: http://www.usabilityfirst.com/websites/design.txl#DosAndDonts

One thing I picked up from them (Foraker design) was the suggestion all links which are blue and underlined tend to get more clicks than other links. This style has become a web standard, you see it everywhere and it does make links obvious. On the other side of this designers should never use blue underlined text unless they are actual links other wise we will confuse users. I added this blue link theory to my mock up site with the following result:

I notice the links do stand out more obviously, but I felt they were obvious before. Other points noted at that site were:

Dos and don'ts for achieving usability in design

Do:
Use ALT tags for all graphics, especially navigation graphics.
Use black text on white background whenever possible for optimal legibility.
Use either plain-color backgrounds or extremely subtle background patterns.
Make sure text is in a printable color (not white).
Place navigation in a consistent location on each page of your website.
Use a familiar location for navigation bars.
Keep the design from scrolling horizontally.
Use one axis of symmetry for centered text on a page.
Encourage scrolling by splitting an image at the fold.

Don't:
Allow ALT tags to get clipped (especially an issue for small, fixed width images).
Display static text in blue or underlined.
Use boldface or ALL CAPS for long pieces of text. These slow down reading.
Leave too much white space--reduces scannability.
Make the user scroll to find critical information, especially transaction buttons and navigation links.
Use horizontal rules to separate chunks of content.
Alternate too frequently between centered text and left-aligned text. Most text should be left-aligned.
Fix pages at larger than 800 x 600 pixels. Larger pages may force users to scroll horizontally.

And: "People with different browsers will more likely get the proper interpretation of text regardless of how it is displayed. For example, users with screen readers may be able to hear ‹STRONG› words emphasized in the speech synthesis as opposed to words in bold or italics. And automated tools can interpret an ‹H1› tag versus a header displayed as ‹FONT SIZE=5›" (Foraker, 2002-2005). I didn't notice that one at W3C accessibility guidelines.

I notice there site has the 3 A's for adjusting text size, I have noticed this before and will research a bit more to see if I should add that option to my site. Alot to read in this site accessibility, ROI, methods and so on... may be tomorrow.

Foraker design (2002-2005) website design:Design,

retrieved from: http://www.usabilityfirst.com/websites/design.txl#DosAndDonts

May 21, 2007.

Index card test

I conducted one of these index card tests as adviced in our curriculum section, this involves, basically, making up cards with information on each which a participant then has to place on a paper tab (like 'home', 'about us' etc). I asked four participants with the following results:

The table shows a few obvious responses, information with three or more hits:

home page - special deals should be placed here.

about us - phone number, address and email along with business information.

designs - prices and websites business has created here.

privacy - legal information placed here.

What is not so clear is where people expect to find a portfolio and services, which leaves me wondering if I should add a separate page for these items? I am now off to research what I need to do in my site to make it accessible.

Vischeck

Looking at guideline 2 "Don't rely on color alone." I went to the Vischeck site again and put through my screen design image draft with the following result:

The first one is the result of Protanope (another form of red/green color deficit)















this one is the result of Deuteranope (a form of red/green color deficit)

and then Tritanope (a blue/yellow deficit- very rare)

I think they all degrade okay, but its hard to do this on a draft, something to check when site is finished to look for readability of text etc.. Quite a good resourse Vischeck http://www.vischeck.com/vischeck/

Accessibility

I am looking at "Web Content Accessibility Guidelines 1.0" at http://www.w3.org/TR/WAI-WEBCONTENT/ for information on how to design an accessible website, for this is part of usability for disabled internet users.

There are a few levels of compliance recommended:

Conformance Level "A": all Priority 1 checkpoints are satisfied;
Conformance Level "Double-A": all Priority 1 and 2 checkpoints are satisfied;
Conformance Level "Triple-A": all Priority 1, 2, and 3 checkpoints are satisfied;

The priorities:

[Priority 1]
A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents.
[Priority 2]
A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents.
[Priority 3]
A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents.

Ideally I shoul design to cover all priorities if I am going to 'showcase' in my own site how design aesthetics, usability and accessibility can all mesh and work well. There are 14 guidelines mentioned and I have added a 'short' summary of each, the site also has techniques available to help developers achieve compliance, I will look to that in next post with my own site and how to apply guidelines:

Guideline 1. Provide equivalent alternatives to auditory and visual content.

for example use the 'alt' tag for images to explain the image purpose etc.. as a basic checkpoint up to providing auditory descriptions.

Guideline 2. Don't rely on color alone.

Don't rely on color to convey information and backgroung and foreground colours cannot be too close in hue.

Guideline 3. Use markup and style sheets and do so properly.

an example is using tables for layout and header to change font size makes it harder for specialised software to read pages. The majority of these checkpoints deal with correct use of code.

Guideline 4. Clarify natural language usage

this is about identifying the documents language.


Guideline 5. Create tables that transform gracefully.

Only use tables for tabular information, and alot of checkpoint here if you intend to use them.


Guideline 6. Ensure that pages featuring new technologies transform gracefully

Design with older browsers and for users that turn off feature in mind etc.


Guideline 7. Ensure user control of time-sensitive content changes

Moving text cannot be read by some programmes and disabled users.


Guideline 8. Ensure direct accessibility of embedded user interfaces.

make things like applets and scripts directly accessible and /or compliant with assistive technologies.


Guideline 9. Design for device-independence.

This is about allowing users to interact with what ever they choose, mouse, wand etc.. rather than it being dictated certain elements can only be used by a mouse, for example.


Guideline 10. Use interim solutions.

Aspects of this priority involve not opening or causing pop up with out first informing user. Some older browsers real list of links as one link.

Guideline 11. Use W3C technologies and guidelines.

pages will be more accessible if we avoid using non w3c compliant programmes, like shockwave.


Guideline 12. Provide context and orientation information

grouping elements and providing contextual information, title frames etc.


Guideline 13. Provide clear navigation mechanisms.

consistant and clear navigation, identify the target of each link, include a sitemap etc.


Guideline 14. Ensure that documents are clear and simple.

consistent layout, simple language and consisent style.


Alot there, a good guide at that site to refer back to when designing as different sites will have different accessibility issues.

logo

The main reason I wanted to create a logo for this assignment was all to do with the tagline element. So I came up with a few designs which I posted in webct discussions for peer feedback. The design most liked was:

Issue with above logo is how the tagline needs to say what your business does - be relevant and descriptive and Edwin pointed out that search engines can't read images, so I thought it might be better to have an image logo and a tagline made in a header tag, I also went to a grayscale color as they are easier to match with other colours:

web sites designed for you

The above image would end up as site id. for all pages and the tagline would only really need to be on home page but I will place it on all of them. I also drew up a site demo to show basic elements and how I plan on having every page colour change to suit the tab:

The above shows search bar position, site id and header for tagline, advert position, footer and the style concept for the tab page colour changes.

final documentation

I have been mainly looking to Steve Krug's book for starters to this assignment as I need to build a site that is usable and also accessible.

with usability I found:

That Krug believes web navigation is not just a feature of the internet but that it is the web. There should be a basic page structure where the site id is in the top left and in the center of that top banner the section then utility links to the right.

krug likes tabs (Krug 2004, 79), I never actually got the idea they were like binder tabs as I am used to them being on the right of the page not the top. As they are used in websites now they just look like links crammed into the top banner to me. I am toying with the ides of using tabs to the top of the page, performing usability testing, to see if I'm alone. I might design tabs into my page to the right, do testing and if it is found too hard move them to the top. As tabs are becoming a standard convention users are aware of, it makes sense to use them if it makes it easier to navigate sites as users can go straight to what they are used to.

I am planning a small site so I don't really feel a search bar is needed. However, krug strongly recommends them as many users go straight to the search bar and I should cater to their preferences. I am going to put one on my site for users and also as I have never created one before it will be good to learn as any site I design shall end up needing one.

The Home Page is different according to krug in chapter 7 and I need to remember and incorporate the following:

• site identity - what site is and for and why user should be here and not another site
• site hierarchy - give overview of what site has to offer
• search box - 'as above'
• teases - hint at the good stuff in the site like hot deals and top stories
• timely content - signs of life, weekly deals etc.
• deals - allocate advertising space etc.
• shortcuts - most frequently requested, most downloaded etc,
• registration - if login needed put it on home page
• abstract objectives - for example, show what user is looking for and what they are not, show user where to start. establish credibility and trust - and all pages not just home for those objectives.

These 4 questions (Krug 2006, 99):

what is this?

what do they have here?

what can I do here?

why should I be here and not somewhere else?

should all be answered in a glance, also, you need to impress, entice, direct and expose the user to deals.

Krug mentions a tagline should express what the businness does or offers (Krug 2006, 101), So my business logo for my web design site shoul state that I build websites for people.

With accessibility I went to Lynx viewer http://www.delorie.com/web/lynxview.html
as recommended in webct study modules but I had no luck viewing pages so Iam currently downloading a copy. I, still going through the accessibility tutorial at webct, went to the vischeck site and the samples are amazing, I could create a site where colours hardly contrast for users like in the hat images where the colours all end up varying shades of mustard yellow colours.
Couldn't find the ficticious uni of antarctic.
Went to http://www.contentquality.com/ and put in our webct which failed on a few usability issues in WCAG priorities, in IE, for example:

4.3 Identify the primary natural language of a document.
Rule: 4.3.1 - Documents are required to use the META element with the 'name' attribute value 'language' in the Head section.
Note: This rule has not been selected to be verified for this checkpoint.
Rule: 4.3.2 - The HTML (Root) element must use the 'lang' attribute.
Failure - The HTML (Root) element does not use the 'lang' attribute.

Also downloading the firefox developer tool which has accesiblity tools, heaps of broken links in this tutorial exercise so I couldn't view all the sites mentioned. Noticed though different home reader software have their own usability issues. Ah.. yet another issue to explore for designers are there many issues with text browsers? and design issues with different home readers? more research for me to do for assignment as I really want my site to be assessible, not because I feel asite like mine would be in demand for disability users but because i need to assert in my sites design what issues I stand for. like usability, accessiblity and simplicity. So I feel I need to design my site to the same standards.

at the w3c site http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/ it advices us to remeber the following while designing sites:

-They may not be able to see, hear, move, or may not be able to process some types of information easily or at all.
-They may have difficulty reading or comprehending text.
-They may not have or be able to use a keyboard or mouse.
-They may have a text-only screen, a small screen, or a slow Internet connection.
-They may not speak or understand fluently the language in which the document is written.
-They may be in a situation where their eyes, ears, or hands are busy or interfered with (e.g., driving to work, working in a loud environment, etc.).
-They may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system.

There are alot of guidelines on this page for me to implement into site design, quite a challenge, but well worth it.




Krug, S. (2006) Don’t Make Me Think, A common sense approach to Web Usability, Second Edition, New Riders Publishing, Berkeley, California USA.