Designing Your Website

dev-bloguser

Dev Cham

July 18, 2019

Smart Start Development Website Startup

Above The Fold

  1. Put the most important information “above the fold” on your website. Make sure your visitor’s eyes are directed to exactly what you want them to see – without the clutter.
  2. Put your most popular products or services into a single category and highlight that category above the fold.
  3. Any element on the homepage that must immediately attract the attention of users should be placed ‘above the fold’.
  4. Keep conversion elements above the fold.
  5. Opt-in boxes and other conversion elements should be above the fold for optimal results.

Call To Action (CTA)

  1. Place your call to action up front – ideally above the fold and so that it stands out among any other buttons on your page.
  2. If you’re using long copy, add multiple calls-to-action throughout the copy. One above the fold, one at the end and others in logical places throughout the body text.
  3. What happens after your user clicks the Call to Action button? Make sure the entire process flows smoothly and they know exactly what to expect.
  4. Use CTA buttons rather than links. Buttons are more obvious and more clickable, particularly when viewed on mobile devices.
  5. Include a headshot. Don’t be afraid to include a personal photo in your sidebar or near your CTAs. It can reduce the sense of risk by showing that there’s a real person behind the brand.
  6. Make your call to action bigger. In most of my testing, I’ve found that the bigger the CTA, the better the conversion rates. Many companies I’ve worked with have simply made their call to action button a bit bigger and watched their conversion rates grow by 10 percent to 25 percent. That’s significant. According to Fitt’s law, the bigger and closer your CTA button, the easier and more likely people are to click on it.
  7. Test your Call to Action text. Try “Order Now” instead of “Buy Now” or “Checkout”.
  8. Test the shape, color, size, and wording of your Call to Action Button.
  9. Draw attention to important information with hand-drawn arrows, underlines, and asterisks. Don’t overuse this effect to the point where it’s distracting though!

 

Design Thinking

  1. Here are some rules of thumb to follow for accent colors:
  2. It needs to be bright enough to draw attention to whatever you’re attempting to draw attention to.
  3. It needs to be complementary with the other colors on your website so that it doesn’t clash.
  4. It needs to stand out from whatever background it’s on. This means that a blue button on a blue background probably isn’t a good idea.
    It needs to be reserved for key calls to action so it doesn’t blend in by getting overused on the site.
  5. Don’t be afraid of white space. Not only does it help to reduce the cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen.
  6. Don’t put all your testimonials on one page. Put them alongside the product to help increase credibility and trust.
  7. Use alternate colors for your call to action buttons, otherwise they can be lost in the overall color scheme of your site.
  8. Check your error pages. Use them as an opportunity to direct people to more recent/relevant content. Don’t just give them the 404!
  9. Do not have unsolicited windows or graphics ‘pop-up’ to users. Users have commented that unsolicited windows or graphics that ‘pop up’ are annoying and distracting when they are focusing on completing their original activity.
  10. Let users know if a page is programmed to ‘time out’, and warn users before time expires so they can request additional time.
  11. Provide a link to printable and downloadable document versions. Many users prefer to read text from a paper copy of a document. Paper allows users to take notes, highlight ideas, follow presentations, and save information that may be difficult to find at a later time.
  12. Don’t Ignore the Importance of Your Site’s URL Structure. You should ideally end up with something that looks like a pyramid, with an increasing number of pages the further down you go. This top-down approach can be seen on a number of very successful websites.
  13. Split test a holiday-theme for your website. Target it to visitors who come from areas where that holiday is celebrated.
  14. Use whitespace effectively in your design so that it draws the eye in toward the call to action. Empty space doesn’t have to be filled.
  15. Put the most important information you want visitors to read at the top and bottom of your page. People read those first, and typically only skim the middle.
  16. Can the visitor get to where they want to go on your site in 3 clicks or less? If not, make it happen. Don’t make them guess how to navigate your site.
  17. Consider giving users the ability to increase font size on your site for easier readability (particularly on smartphones).
  18. Homepage is not the only important page. Consider landing and product pages equally important.
  19. White space is not wasted space. Not only is white space responsible for readability and content prioritization, it also plays an important role in the visual layout and brand positioning.
  20. Provide users with appropriate feedback while they are waiting. If processing will take less than 10 seconds, use an hourglass to indicate status. If processing will take up to sixty seconds or longer, use a process indicator that shows progress toward completion. If computer processing will take over one minute, indicate this to the user and provide an auditory signal when the processing is complete.
  21. Users frequently become involved in other activities when they know they must wait for long periods of time for the computer to process information. Under these circumstances, completion of processing should be indicated by a non-disruptive sound (beep).

Images On Your Website

  1. Use real photos instead of corny stock pictures. Nobody believes for a minute that you’ve got a multi-ethnic, always-smiling, drop-dead-gorgeous staff.
    Instead of an ordinary image of your product, test an image of your product actually being used by a customer.
  2. Instead of a plain product image, consider adding an image of what the successful outcome or finished product looks like.
  3. Use high-quality images.
  4. Using generic, tacky stock photos can send the wrong message about your brand. Use professional-quality photos where possible.

 

Landing Pages

  1. Eliminate links that don’t serve a specific purpose from your landing pages. Make the objective clear and obvious to avoid distracting the customer.
    Does your headline include some reference as to where the visitor clicked from previously? Tie in your landing page with your ad or the user’s search for seamless engagement.
  2. Give your customer an incentive to fill out additional form information by placing it on the “Thank You” page and offering a freebie for their participation.
  3. Use a P.S. to throw in an enticing bonus or a reward for taking action within the specific timeframe. People often read headlines first, then read P.S.’s second.
    It should go without saying, but don’t direct your PPC or ad traffic directly to your homepage. Create landing pages based around actual searches.
  4. Have a link to your coupon or current promotion right on the landing page. Better yet, automatically fill in the “coupon code” at checkout if possible.
  5. Keep the look and feel of your landing pages consistent with your ads and main website. No one wants a mental disconnect from clicking an ad to visiting the actual site.
  6. Don’t ask too many questions on your landing page. Instead, let the visitor click the call-to-action first. Even then, limit how much you ask for up front.

 

Share

smartlybuilt-facebook-blog smartlybuilt-linkedin-blog smartlybuilt-twitter-blog

Similar Posts