Web Design and Development
- 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.
- 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
- 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?
- 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
- 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
- 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.
Colour in Web Design
Source:Sitepoint article 'Essential colour checklists for Web design' by Marta Eleniak (april 28, 2003) http://www.sitepoint.com/print/1126
- Main ingredient for legibility is contrast. You can test your legibility by converting your site to monochrome. Use strong contrast between the background color and the text color.
- If you need to show pattern, place it in the center because our eyes work harder to take in patterns on the periphary.
- Important information to the user does not reply on colour alone.
- Avoid using too many colours at the same time, it creates a confusing overall effect.
- Black text on white background is best.
- Red and green are best used in the centre of the screen and black, white, yellow and blue are best used on the periphary
- Brighter colours are better by interfaces that will be viewed for a long period of time or if designed for older users.
- If you want colours to be easily distinguished from each other, use darker shades of blue, red, and purple and paler shades of green, yellow and orange.
- Colours do not the mean the same thing to different people.
- To convey low prices use brighter colours such a yellow
- Beige, blue, burgundy, and dark green give impression of high quality, solidity and tradition.
- Do not use red and green where you need to distinguish between them to understand the content.
- Do not use blue and yellow together when you need to distinguish between them to understand the content.
- Do not use grey text
- Do not use differnt blues simultaneously
- Do not use fluorescent colours.
- Do not pair extremes of wavelength (opposite ends of color chart) like red and blue as it induces headaches
- Do not use high chroma colours together like blue and yellow
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.
- Only include Help if necessary and if so place it in the upper right.
Meta Tag Suggestions
Be concise, use short words, short sentences, short paragraphs.
A short sentence on average is 12 words.
A short paragraph is on average three sentences (36 words long).
Attention grabbing words:
Announcing, benefit, bonus, choose, claim, discover, dissatisfied, easy, eliminate, exclusive, fast/fastest. Free, free trial, guarantee, help, idea, imagine, improved, introducing, learn, look, love, money, new, now, offer, opportunity, proven, sale, save, secret, select, sensational, special, surprise, today, warning, why, win, you.
- 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
Selecting and Changing All Text Layers at Once in Photoshop and PSE
When you are working on a project with a number of text layers, there is a quick way to select all of the text layers at once. This is handy to know in case you want to change the font for your project, but you don't want to have to hunt for each text layer and change them manually.
Here's how: Select one of the text layers in the Layers panel. These layers will have a T icon on the left side of the layer. From the Menu bar, choose Select > Similar layers. The software will search for all layers similar to the one you have selected, so in this case all of the text layers will be highlighted. To change the font, get the Type tool while leaving all of the text layers selected. Choose a new font in the Options bar across the top of the editing window. Your font choice will replace the current font type in each text layer automatically. You can change the font size, style and orientation this way, too.
The verbs we use to describe what people do with our work—use, navigate, interact—all underscore the power, the agency, that sits in the user’s hands. The value of the web, of social, of mobile, all rests on the foundation that the work we do requires the active participation of the audience, and that the value of our work is only measured through their engagement.
Optimize Images for Emails on Retina Displays
High-pixel density displays are becoming more and more common, but an increase in pixels per inch can make small images look fuzzy and unfocused. Fabio has a simple way to avoid using ugly images in emails:
Double the size of the image, and then constrain its width with either CSS or the width attribute on the img tag. The result is an image that maintains its sharpness on new device screens and works across many email clients.
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.
- Logo should be in the upper left corner of the site. It should be a link to the home page of the site.
- Include a tag line summarizing what the company/site does.
- Make homepage clearly different than rest of site *
- Use imperative language for mandatory tasks, ex. 'enter a city'.
- Do not use 'click here' for link names.
- Use icons only if they are extremely obvious/recognizable.
- Limit window titles to no more than 7/8 words.
- Use relative font sizes not absolute sizes.
- Explain benefits of registration.
- Make important buttons stand out.
- Use descriptive labels and supporting text for buttons.
- Avoid reset buttons.
- Adjust settings on server to allow for common typos and misspellings for URLs (for example ww instead of www). Setup wildcard domains (*.yourdomain.com).
- Eliminate extraneous navigation elements during a multi-step process such as a checkout or registration. Avoid distracting the user.
- Search input box should allow 25-30 characters
- Do not label the search input box, just attach a search button.
- Plan for imperfect searchers
- Study previous search results to identify problems
- If search returns an avalanche of results, offer means of narrowing results.
- If no results return, offer an easy way to expand results
- Explain how search works, give examples and tips.