Your Guide to UX, UI, and Landing Pages

What you need to know


UX = User Experience: How the product feels. The overall navigation of the website.

  • Attempts to identify who the user is and satisfy what the user wants.
  • Ensures that the product flows and flows logically.
  • There is never only one right answer. UX Professionals may try several ideas before deciding.

UI = User Interface: How the product is laid out. The overall look of the pages.

  • UI professionals are often responsible for design consistency.
  • UI professionals ensurer that the interface effectively communicates, through visuals, the path that the UX designer put in place.
  • Make no mistake. You can be both a UI and UX professional.

SoundCloud, Spotify, and Pandora provide excellent examples of landing pages aimed at signing people up for a new account. Contrasting colors help draw the attention of the potential users to the signup menus. SoundCloud may be the least appealing of these landing pages because the white background doesn’t allow the signup menu to pop. Pandora most closely follows the tips I recommend for creating Landing Pages, but Spotify has its reasons (such as promoting a sale).

When deciding what you want your landing page to look like, or which landing page you choose from your designer. keep in mind some of these tips.

Start with the basics:

  1. Apply consistent design schemes.
    • Fonts and colors should match your other pages unless you have a really good reason to stray.
  2. Make the design attractive.
    • Remember that your opinion isn’t the only one that matters. You want it to be attractive to your users and potential users.
  3. Use high-quality images that match your offerings.
    • No stock photos.
  4. Add your Call-To-Action and make it the obvious next step for your visitors.
    • Visitors who are unsure of what to do next are more likely to drop out.
  5. Remove the clutter.
  6. Ensure the information you are trying to convey is above the fold.
    • Visitors shouldn’t have to scroll down to find what they’re looking for or what you’re trying to show them.

Follow up with these:

  1. Add endorsements and testimonials.
    • If you’re going to use testimonials make sure they are relevant to your current offering.
  2. Tweak your design with eye tracking in mind (infographic below)

101 on eye tracking

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s