Website Usability : A Detailed Checklist

Some time ago I came across an interesting site (click here for original article) where, amongst other things, discussed User Interface and User Experience. I’ve downloaded their PDF (which you can get here) with a 25-point checklist.

Here are the important elements of UI (User Interface) and UX (User Experience) to consider when creating a website :

  1. Site load-time
  2. Text-to-background contrast
  3. Font size and spacing
  4. Use of flash and add-ons
  5. Images have ALT tags
  6. Customized 404 pages
  7. Placement of company logo
  8. Tagline is concise and appropriate
  9. Home page is clean and simple
  10. Company information is accessible
  11. Contact information is accessible
  12. Main navigation is accessible
  13. Navigation is concise
  14. Buttons and links are used appropriately
  15. Company logo links to home page
  16. Links are clear and constant
  17. Site search is accessible (if available)
  18. Headings are clear
  19. Critical content is above the “fold”
  20. Styles & colors are consistent
  21. Emphasis (bold, etc.) is used sparingly
  22. Ads & pop-ups are unobtrusive
  23. Main copy (text) is concise & explanatory
  24. URLs are meaningful & user-friendly
  25. HTML page titles are explanatory ()

Keeping this is mind, your websites should be (relatively) user-friendly. It is important to keep this list at hand both when creating the UI and working on the UX.

Open Discussion : Are Mobile Websites Necessary?

In a world where everything is “right here, right now”, are mobile websites necessary? From the point of view of a client, are they really that important? Should every web designer think about adapting for mobile — or thinking mobile first? Is a separate mobile site better, or should we adapt to fit on mobile screens? What about jQuery Mobile? Or why forget the mobile site all together and flip to a mobile app?

What do you think?

Custom Error Pages

Ever had that error page for a missing page? You can create your custom error pages to suit your website design and make your error message as original as you may want it to be.

Custom pages could be created for:
Redirection
- 301 – Moved Permanently
- 307 – Temporary Redirect
Client Error
- 400 – Bad Request
- 401 – Unauthorized
- 403 – Forbidden
- 404 – Not Found
Server Errors
- 500 – Internal Server Error

To define your custom error pages, create a standard HTML page with an error message. For example, a 404-page would read something along the lines of “Sorry, the page you have looked for could not be found. Perhaps it was typed incorrectly, or the link you have followed does not exist.”

Once your page has been created, define the error page in your .htaccess file.

You can customize the URL — or page address — of your custom error pages. For example, your 404 page could be called page-not-found.html. In this case, your .htaccess file would read as such:
ErrorDocument 404     /page-not-found.html

Note: make sure your custom error pages are greater than 512 bytes as smaller files will not be shown on browsers such as Internet Explorer 6 and older. Best practices also recommend you to make your error pages useful: explain the error, offer alternatives such as links to go to the home page, or for small sites, display your site map.

It’s that simple !

Interactive forms using Acrobat

If there is one thing administrative personal like to avoid processing is the information collected from forms, particularly when they are submitted by hand. This article will explain how to create a form which you will be able to save as a PDF and print if necessary.

First, create any form you wish in the software of your choice (ex: Adobe Illustrator) and save it as a PDF. (To make things easier, I suggest you use “Save a copy” rather than “Save as”.) From the “Forms” tab of the document menu of Acrobat, select “Add or Edit Fields”. Press the “Add New Field” button and select “Text”. Place your text box where you want it to be. Make sure you see all the properties of your newly formed text box.

In the “General” tab, give your text box a unique name. Similar to the “id” property in HTML, the name allows you to have as many independent boxes as you may need. Under “Appearance”, select your desired font, color, and size.

Next, we will create a Save Button. Add a new field but this time, select the “Button” type. Give your button a name, and switch to the “Options” tab where you will define the button label, or the text that will appear on the button. Type in “Save”. In the “Actions” tab, select “Execute a menu item” from the “Select Action” menu, on the trigger of your choice. Press the “Add” button, which will open a new window. Select “File>Save As…”. Press “OK” and close the window.

Repeat the process to create another button. Under the “label” field, type in “Print”. Under the “Execute a menu item”, select “File>Print”. Switch back to the “General tab”. Under “Form Field”, select “Visible but doesn’t print”, and do the same for the Save button. When you press print, you won’t see any of your buttons, but the entered information will be shown.

Last thoughts

With only a few steps, we have created a PDF which we can save and print in a few seconds.