Web Design and Development

Forms

• Explain the process and provide cues as they proceed through the process.
• Put cursor in first required form fields
• Show progress
• Fix tab order
• Integrate help
• Provide confirmation
• Indicate required fields with an asterisk and/or include the word 'required' or 'optional' next to each field.
• Indicated required field titles in bold.
• Provide formatting examples for data
• Provide pulldowns or lists to ensure accurate data.
• Use Javascript to disable buttons once they are clicked (have them fade out or change the text on the button).
• Offer contextual help right on the form.

Custom 404 Pages

• Include the company's name and logo.
• Include an explanation of why visitor is seeing the page
• A list of common mistakes that explain the problem
• Links back to home page and/or relevant pages
• A search engine to help find right information
• An email link for visitors to report errors/problems

Contact Us Page

• Spell out the email address, do not hide it in a text link.
• Let them know the expected response time
• State hours of operation
• Provide map with address

Acknowledgement Emails

• Include timeframe for formal response
• Include phone number and real name.
• Use tracking numbers as a reference
• Provide a clear and accurate subject line
• Explain what to do next if issue is unresolved
• Sign the email.

Questions to answer

   1. What should people know about a site so they are not misled and do not waste their time?
   2. What is the site about?
   3. For whom is the site intended?
   4. Why should people stick around? What can you do on this site?
   5. What do people need to know about the company to place their trust in its site?
   6. What are the main reasons users want to come to the site? Are they reflected on the homepage?
   7. Is the homepage intuitive with respect to the pathways that are available?
   8. Are error messages helpful and instructive?
   9. Can visitors access the information they want from multiple locations or are they restricted to a narrow pathway?
 
Product Descriptions

• Why should they buy?
• What are the customer's needs?
• What are their concerns?

Product Listing Page

• Include brief description along with price.
• Integrate price anchoring.
• Include a buy it now link
• Allow for sorting - name, brand, price, date, featured items.
• Allow for comparison

Product Pages

• Highlight features and benefits.
• Provide lots of details, photos and images that provide answers.
• User reviews
• Buy button
• Allow for navigation to next item in category

Errors

• Clearly state the error at the top of the page and the problem area that needs to be corrected.
• Indicate problem are with bold red text
• Draw attention to the problem with an alert icon or graphical cue
• Offer possible solutions to the problem.
• Do not force visitors to retype data correctly, accept alternative formats.
• Accept all valid data and only ask for problem info (do not send them back to the same form).
• Be consistent in all error messages.
• Lead with a clear heading and the most important information
• Offer bullet points not blocks of text
• Use bold red text and color variations to highlight crucial information
• Edit copy so that it is brief and meaningful.

Homepage Usability

Here are some tips I learned from reading Homepage Usability by Jakob Nielsen and Marie Tahir.

• Put logo in the upper let.
• Include a tagline that summarizes what the company does/site does.
• Include an About Us section (or better yet, About ).
• Use imperative language for mandatory tasks
• Do not use 'click here' for link names.
• Never name a category 'links', qualify what type of links.
• If a link launches a PDF, tell the user.
• Use only icons that are extremely obvious and recognizable.
• Search input box should allow for 25-30 characters.
• Do not label the search box, just attach a search button.
• Window titles should be no more that 7/8 words long.
• Do not use splash screens.
• Use relative font sizes, not absolute sizes.
• Include a privacy policy - establish trust with your visitors.
• Only include Help if necessary and if so place it in the upper right.

More Information

I highly recommend going through the slides in this presentation on 'Automating Front-end Workflow' by Addy Osmani.

• The Pros and Cons of 5 Current Web Design Trends
• Adactio: Journal—10 Commandments of Web Design by Jeffrey Zeldman
• Managing outcomes has been made possible because the Internet allows us to measure how successful people are as they interact with technology. The Web is the greatest laboratory of human behaviour ever invented. We should use it. --source
• Your body text is too small
• Style Tiles
• Designing Cool Brands
• The New Design Guidelines
• How to keep up to date on Front-End Technologies - The Recipe
• How readability can make sure people actually read your content
• Seriously, use icon fonts, a great article by Ben Frain
• Delivering Responsibly
• Roots of Minimalism in Web Design
• Five Simple Steps to Designing a Grid Based Layout
• A Designer's Checklist For Designing Awesome Multi-Page Layouts

Front-end Handbook

Is this why flat design is so popular?

If you want people to recognize an object (for example, an icon), use a simple geometric drawing of the object. This will make it easier to recognize the underlying geons, and thus make the object easier and faster to recognize.Favor 2D elements over 3D ones. The eyes communicate what they see to the brain as a 2D object. 3D representations on the screen may actually slow down recognition and comprehension.