Archive for the ‘Design’ Category


User Experience 101: Keep it Simple

I recently bought a domain name for a client from GoDaddy. To sum the experience up in 2 words: Turd Sandwich. The experience was horrible!  All I wanted to buy was a single domain name for a single year, but I had to wade through page after page of offers and bright red text and buttons demanding I add other products or services to my order because of the amazing discounts they were offering.  On each new page I came to, I had to figure out what it was they were trying to sell me on and then search diligently for the “no thanks, please continue” button.  Even when I was finally able to get to the check out page, GoDaddy had automatically added the renewal of two domain names I already own to my cart.  No thanks!  By the time I clicked the final “submit” button, I was ready to pull my hair out!

The lesson learned?  User experience matters.

Here are 5 important lessons on how to improve your site’s usability and make your website a pleasant experience for your user. 

1. Start with a plan.  

Before you type a single line of code or put a pixel on the screen, plan out what you want that user experience to be like.  Get out a piece of paper or use a Word document to create wireframes of the experience.  Will your checkout process have 2 screens or 3?  Should your user have to register before they add to their cart or only when they go to check out? 

Drawing out the basic framework of your site can bring up user experience questions early on in the process and can help you make the best decisions for your site.  It also helps you stick with the vision and goals of your company. 

2. Just because you can, doesn’t mean you should.

Maybe the shopping cart solution you’re using allows you to display up pop-ups for related products and accessories, but that doesn’t mean you should do it.  Think about and research the type of marketing or experience you want to set up for your website and ask the important questions like: Does this feature add value to the experience?  Does this distract the user from the desired action I want from them?  Is this feature in-line with the rest of our business model and core values?

Offers are great on websites when they help your customers.  Everyone loves to save money and know they are getting a good deal.  But on GoDaddy’s site, I counted 18 different areas where they to cross-sell, over-sell, or up-sell me on some sort of additional service or feature that I absolutely had no intention of buying. 

3. Make it simple.

Make your site simple and intuitive.  A shopping cart experience shouldn’t be any longer than 3 of 4 screens once the user has the products in his cart.  Don’t drag out the experience by giving him too many hoops to jump through or he might give up entirely.

It’s a good idea to remind your customer of the related products you offer, but make sure to do these in a way that supplements the core task that is taking place.  Make these product links available to the user, but don’t slow down the check out process.  If the user is enticed, he will click.  Otherwise, let your customer buy the product and be on his way.

4. Make the next step the obvious one.

When your customer is going to make a purchase on your website, make the next step in the process visually the most obvious one.  On your product page, make your “Add to Cart” button the one that stands out the most.  On your shopping cart page, make the “Check Out” button red or some bright color to draw attention to it.   Don’t make the user hunt around for the right button to click, make it easy for them to buy your product. 

On GoDaddy’s website, I was inundated with orange buttons: search for another domain name, add another item to my cart, continue to registration, 6 buttons in total!  All I wanted to do was check out, but it took me a minute or so to figure out which orange button I was supposed to click that would get me out of their ordering screen hell.  

5. Feedback, feedback, feedback.

If you are designing a new site around a specific group of users, bring them into the conversation.  If you’re planning a new website, what features and functionality would provide value for them?  Show them your wireframes for the site and ask if they have any feedback on the flow of the site.  Does it make sense to consolidate some of the steps into a single step?  What is the best way to lay out the screen so that it’s obvious to the user where they need to go next? 

Even once your site is designed, solicit feedback from users.  How is the site working?  Are there areas that aren’t intuitive that might need to be re-worked?  Are there tools or resources that might make the site more valuable?  What frustrations are they running into when they go to make a purchase or interact with your website?

What has been your user experience on the web?  Which sites have frustrated you and which sites have gotten it right?  Share your thoughts below.

What Type Are You?

What Type Are You?

Pentagram.com has posed an interesting question: What Type Are You?  This interactive video walks you through 4 questions to determine which typeface really reflects your character. 

Click here to find out!  The password is “character”

Why do I need a blog?

First of all, what is a blog?

A blog is a type of specialized website that displays a series of articles that contain text or images.  Blogs are generally specialized by topic, for example fashion, politics or graphic design.  Blogs can be maintained by companies, organizations or individuals and can contain news or commentary on a particular subject.  Users are often able to comment on the blog topics generating an on-going conversation.  Users can also set up “blog readers” that allow them to automatically track blog articles from multiple blogs in a single location.

 
Why do I need a blog?

The following are some good reasons why you, your company, or your clients might need a blog: 

Build credibility
One thing that a blog does is help build credibility.  In a recent study* it was shown that 36% of online users think more positively about companies that have blogs.  Your credibility grows if the entries you are posting are relevant and accurate.  With a blog, you have the opportunity to become an authority in your field. 

Engage and Understand Your Customer Better
A blog can help you get to know your customers better by interacting with them directly.  You can post an article on a specific topic about your product and gain instant feedback from your audience.  Also, you can reply directly to comments to create a personal relationship with them.  You can build an interactive community around a specific topic or brand. 

Keep Your Audience Informed
Most companies use their blogs to keep their customers informed about topics relating to their business or their products.  You can use a blog to generate buzz about your new product, provide resources and FAQ’s or to educate people on certain topics or concerns. 

 Build Up Your Company for Prospective Customers
When prospective customers visit your blog, they will be able to learn more about your company.  If your blog posts are relevant and are saying the right things, these prospects will have an easier time trusting you with their business.  If your articles are useful and of interest, there is a better chance that your readers will forward the articles on to their friends and business contacts.

Increase your Visibility in Search Engine Results
A large component of effective search engine optimization (SEO) is having your site updated regularly with new content.  By having a blog that is producing new content on a regular basis, your search engine rankings will increase and you will be more visible in search results. 


How do I get a blog setup?

There are several free hosted blog services available such as Blogger that are fairly easy to set up and get going. Ideally you want a blog that can reside on your own site (for SEO purposes) and you will want to customize the appearance to your liking.  So if you’re looking to customize your blog, one great solution is to the open source platform blogging platform, WordPress.   

WordPress allows you to take their blog code and customize the look and feel of it using HTML and CSS.  You just need a hosting account that supports PHP and MySQL.  This software allows you take a custom design and incorporate it into a fully functional blog. 

Getting started?
Interested in getting a blog set up for your company or one of your clients?  Flip Studios can help you get started!  We make it easy.  Give us a call at 949-748-6940. 

Already blogging?
We would love to hear about your blog adventures.  What have you learned that could be useful to others?  What are some of the benefits you have found with blogging?  Feel free to comment below!

 * “Power to the People – Wave3” from Universal McCann

Poster: The 7 Rules to Understand Design & Designers

I saw this poster on French designer Fabien Barral’s website the other day and thought it was fun:

The 7 Rules to Understand Design and Designers

How to Create Effective Site Navigation

Effective navigation can make your site easy to use or can cause visitors to leave your site in frustration.  How many times have you been on a site and been annoyed because you couldn’t find what you wanted or the information you were looking for wasn’t where you expected it to be?  Website visitors have been trained to a certain degree to look for information in the most probable places, and when they don’t find what they’re looking for, they get frustrated and leave.  With some planning, you can create your next site so that website visitors can find what they want quickly and easily.

Organize Your Information Well

When designing a website, think about the structure of the site first.  Create an outline of all of the pages and try to organize the information in the most logical way.  What will make the most sense to your website visitors? 

sitemap

 

Get the Most out of Your Primary and Secondary Navigation

The primary navigation will help visitors drill down to the information they are looking for.  From within those main sections, display a list of secondary navigation items to help the user find the page that he is looking for within that section. 

 You can design these links however you want, but the important thing is to be consistent.  Keep your primary navigation in the same place on the page no matter what page the visitor is on.  This continuity on each page will allow the user to easily navigate through the rest of your site.  Here are some other helpful tips:

  • Order your links in terms of the importance of each page.  If your website is selling books, make the links to the different book departments very prominent. 
  •  Remind the user where they are.  When a user clicks on the About Us section, change the color of that navigation item to something different to show the user where they are.   
  • Don’t overload your primary navigation with links to every page in your site.  Simple is better.  If you have too many primary navigation links, think about consolidating some of the pages or moving some information to sub-sections on your site.
  • Keep the names of your site navigation meaningful.  Don’t use terms that are internal to your organization.  Someone who has never been to your site before should know immediately where the link will take them. 

Here are examples of effective primary and secondary navigation:

oc_register

bloomingdales

 apple

 

Create Your Footer Navigation Wisely

There are some links that need to be on every page, but don’t neccessarily need to be featured prominently on the site.  These links can be part of your footer navigation.  Here are some examples of links that can be linked from your footer:

  • Privacy Policy
  • Terms and Conditions
  • Site Map
  • Shipping Information
  • Returns Policy


Use Progression Navigation

If your website contains a shopping cart or a multi-page registration form, it’s a good idea to display progression navigation.  You can do this at the top of the page by displaying where the user is at in the process, such as “Step 2 of 4 – Billing Information”.  This sets the expectation with the visitor how many screens he must go through in order to finish the process.  It also allows the visitor to click to one of the previous steps if they need to make changes. 

amazon

 

Create a Breadcrumb Trail

On sites that are large, it can be useful to implement breadcrumb navigation.  This provides the visitor some visual clues that tell them where they are and how they can navigate back to any previous section.  Breadcrumbs are extremely helpful if the website visitor is linked from an external site.  It gives them a sense of where this page fits in with the rest of the site structure.  Generally these breadcrumbs are displayed toward the top of the page, below the main navigation. 

bn

 

Other Helpful Tips

  • Try to minimize the number of clicks it takes to get to the relevant information as possible.
  • Don’t open pages in new windows, unless they go to an external site.  This confuses users and disables their “Back” button.
  • Make your “Contact Us” link prominent and obvious.
  • Don’t change the position of design elements from page to page.  As a general rule, keep the header and footer of the site consistent on every page. 
  • Use consistent names in your page headers.  If the user clicks on “About Us”, display “About Us” as the header on that page.
  • Always have your logo link to your site’s home page.
  • Use a site map of text links to provide structure of your site to provide direct access to your site’s content.  Make sure that your site map reinforces your site’s hierarchy.
  • Unless your site is small, don’t put every link on every page.  This can be confusing and can overwhelm your visitor.  Create a logical organization of pages using sub-navigation and provide a link to your site map. 
  • Above everything else, make your site’s navigation consistent!  Don’t make your visitors have to re-learn the navigation depending on what page they are on. 

 What tips do you have for creating effective site navigation?  What sites have you found that use effective navigation?  Share in the comments below!