Currently, there are entire institutions dedicated to performing usability tests that serve to demystify the user experience and explain how a website visitor interacts with a site. Several years ago, virtualhosting.com posted a fascinating article about website visitor eye tracking studies that revealed some very interesting tidbits on how your website design affects your visitors. Despite its age, I feel that many of its findings are quite relevant to the modern web and how visitors interact with websites. I hand picked several of their main points to discuss further here, you may view the list and their explanations in full at: 23 Actionable Lessons from Eye-Tracking Studies

1. 1. Text attracts attention before graphics.

   I instinctively want to disagree with this one. After all, everyone loves pictures and good photography can make or break a website’s design. However, when a visitor is coming to your website, the majority of the time they are looking for information about what you do, who you are, or how you can make them better informed. Your visitors want real substance, not just visual fluff.

2. 2. Users initially look at the top left and upper portion of the page before moving down and to the right.

   This point touches on the F shape of a user’s eye movements over a website. You can use this to your advantage and lay out important calls to action and headlines along this shape to maximize their visibility.

3. 3. Readers ignore banners.

   This should come as no surprise to many of you, users have been bombarded with banner ads on many of their favorite sites, and users are learning to completely tune these out. Because of this, it isn’t wise to design calls to action that resemble banner ads too closely in either shape or design.

4. 4. People generally scan lower portions of the page.

   This is a big one in my experience with client relations. All too frequently I get requests to try and stuff everything up on the page to keep the information “above the fold.” With the invention of the scroll wheel on mouses, it has become normal behavior for a user to scroll through a page. An excellent article that expounds on this point can be found at: Life Below 600px

5. 5. Shorter paragraphs perform better than long ones.

   Your visitors are lazy, they want to get the answer to their question as quickly and easily as possible. There is a challenge in balancing the need for text for SEO purposes, and the need to present your information as plainly as possible for your visitors. Users don’t read big blocks of text, the shorter and more succinct you can state your point, the more likely it is going to be read. In short, use lists.

6. 6. Lists hold reader attention longer.

   Lists present information in short phrases that make it easy for users to scan and find what they want quickly. Lists are the most efficient way to get your information to your users.

7. 7. White space is good.

   White space is vital to making your content more digestible for the user. By giving your information space to denote its importance, you make it easier for the user to find what they are looking for.

The main goal of user experience studies are to determine how to make your content more accessible and readable by your users. If you would like to find out how EyeMagine can optimize your site’s content to allow you to better communicate with your audience, please contact us today.

Create classes for every object

Procedural, function-based, timeline code has been a bad practice ever since I can remember, yet I still find it in many projects I come across from other developers. It’s really hard to keep track of as your application grows, and a nightmare to come back to after long break, if there are upgrades or changes that need to be made after launch. Do yourself a favor and follow the Object Oriented Analysis and Design principles of encapsulation and modularity. You really should understand all of the concepts of OOAD so put in the reading time. It’ll save you countless hours of future FLASHtrations.

What I like to do is set up my objects in Flash and use frame labels and instance names for the various movie clips that are contained within, then link them to an external ClassName.as file through the object properties screen in the library. You can reference them in your as file by doing something like this:

package com.library.ui{
 
	import flash.display.MovieClip;
	import flash.text.TextField;
 
	public class TextInput extends MovieClip{
 
		protected var _txtInput:TextField;
 
		public function TextInput(){
			super();
			_txtInput = TextField(this['txtInput']);
		}
		public function getText():String{
			return _txtInput.text;
		}
		public function setText(s:String):void{
			_txtInput.text = s;
		}
	}
}

Notice in the above code that I’m simply linking to an existing TextField object, TextField(this['txtInput']), within the movie clip, rather than creating one dynamically via new TextField(). This allows me to leave the text formatting, positioning and other design related properties completely separate from my logic and allow me to focus on what I do best, while letting a Flash designer/Animator worry about the rest. Simple, clean, and elegant.

Leverage “the Flash way” of getters and setters

If you notice above, I created a getText and setText which follows standards for coding Class property accessor methods. Flash’s standard TextField and many other objects don’t follow this standard, and in the interest of keeping your objects interchangeable with the ones in Flash, you should adopt the flash way of writing these methods. Let’s look at what the above code would look like with these changes. I will also add some other TextField methods I plan on using:

package com.library.ui{
 
	import flash.display.MovieClip;
	import flash.text.TextField;
 
	public class TextInput extends MovieClip{
 
		protected var _txtInput:TextField;
 
		public function TextInput(){
			super();
			_txtInput = TextField(this['txtInput']);
		}
		public function get text():String{
			return _txtInput.text;
		}
		public function set text(s:String):void{
			_txtInput.text = s;
		}
		public function get restrict():String{
			return _txtInput.restrict;
		}
		public function set restrict(s:String):void{
			_txtInput.restrict = s;
		}
		public function get maxChars():int{
			return _txtInput.maxChars;
		}
		public function set maxChars(n:int):void{
			_txtInput.maxChars = n;
		}
		public override function set tabIndex(i:int):void{
			_txtInput.tabIndex = i;
		}
		public override function get tabIndex():int{
			return _txtInput.tabIndex;
		}
	}
}

What this allows you to do is use this class just like you would any standard flash TextField inputs:

...
import flash.text.TextField;
import com.library.ui.TextInput;
...
var tf:TextField = new TextField();
tf.text = "foo"; //sets the TextField's text to "foo"
 
var myTextInput:TextInput = new TextInput();
myTextInput.text = "bar"; //sets the encapsulated TextField's text to "bar"
 
trace(tf.text + myTextInput.text); //output is "foobar"
...

Use inheritance

Object inheritance is something I love about programming. It really allows me to build well encapsulated objects that do something really well, then later when I need slightly modified versions, I can just inherit from the original and extend the functionality. Lets take our above example and extend it to be a custom number input.

package com.library.ui{
	public class NumberInput extends TextInput{
		public function NumberInput(){
			super();
			_txtInput.restrict = '0-9';
			_txtInput.maxChars = 2;
			_txtInput.multiline = false;
		}
		public override function set tabIndex(i:int):void{
			_txtInput.tabIndex = i;
		}
		public override function get tabIndex():int{
			return _txtInput.tabIndex;
		}
	}
}

Keep your code organized in packages

You may or may not have noticed the package name in the above object had several parts to it. It is split up into folders which keep related classes separate visually and programatically through packages. What I like to do is to start by creating a com folder to store all of my classes, then put a subfolder with the project name, for project specific classes, and a library folder where I put classes I tend to reuse across projects. These have subfolders to keep related elements organized like a ui, user interface, folder and similar. Here is an example:

com

• library
  • ui
    • TextInput
    • NumberInput
  • events
    • EventWithParameter
• myproject
  • ui
    • CustomTextInput (inherits from com.library.ui.TextInput)
    • CustomNumberInput (inherits from com.library.ui.CustomNumberInput)
  • Main (document class for myproject)

Keep your object library organized

Your library should be even more organized because objects often have numerous nested graphics and movie clips that can quickly create an unmanageable mess. How these are best organized is strictly a judgment call, but I can show you what’s helped me in the past:

Library

• UserInterface
  • Inputs
    • mcTextInput
    • mcNumberInput
  • MyCustomButton
    • mcMyCustomButton
    • Bitmaps
      • bg_idle.png
      • bg_hover.png
• Background
  • Bitmaps
    • background.png
    • office.png
  • mcFooter

This one will be greatly be appreciated by anyone that has to reuse or modify your code because it will save them lots of time figuring out which pieces go together.

Conclusion

Well, there you have it. This isn’t meant to be a comprehensive list but hopefully the suggestions here will help you on your way to becoming a better Flash developer. Good luck!

With such measurable and obvious success criteria, you would’ve thought that good practice and winning techniques would by now, be well established, and bad advice would be quickly exposed for what it is. It appears however, that this is not the case.  It’s amazing just how bad some of the advice out there really is.

Here are five of the worst offenders:

1. You can never give the user too much  [Wrong!]

On the face of it, this sounds like a good idea. The more information you provide, the better informed their decision becomes. However, in reality too many options can be overwhelming and lead to ‘choice paralysis’.  You know what that’s like: taking much longer to order food from a very long menu than from a shorter one, or taking an eternity to choose which of the thousands of available paint colors to apply to a home.

More is not always better. If you want to encourage users to buy, you need to make their choice a simple one.  Remove everything but the most important information, and minimize the number of choices available. This is something that’s been understood for some time in traditional retailing, but hasn’t filtered through to the web.

2. Never miss an opportunity to cross-sell [Wrong!]

We all know supermarkets do it:  You’re lining up at the checkout surrounded by chocolate, magazines and other extras.  You go in for a loaf of bread and come out with a bag full of candy and a magazine on interior design; it’s an effective technique.

Many successful websites also use this approach very effectively, looking for opportunities to cross-sell, based on your buying habits and those of other users.  They may not always up-sell though, as the web is not the same as the real world.  Good online retailers are often careful to avoid distractions at the checkout.  They are user-driven and therefore have to be as easy, focused and fast as possible.

Up-selling is important, but do it before the checkout process begins, or after the transaction is complete. Once the user makes a decision to buy, you need to ensure that nothing gets in the way of that transaction.  Some opportunities to cross-sell are worth missing.

3. It’s all about your site [Wrong!]

Web designers want to sell you web site design services. It is therefore unsurprising that they concentrate their attention and advice on the website. However, the website is only one small part of a successful ecommerce business.  The heart of successful ecommerce lies in service, not the website.

Don’t become so fixated on tweaking and improving your website that you neglect other areas of the user experience. Good customer service includes vital components such as email notifications, telephone support, policies, order fulfillment, handling complaints, offers and discounts, and ongoing communication.

Customers who receive superb service are considerably more likely to make a second purchase and recommend you to friends and family.  It’s even possible to substantially reduce your marketing costs if you make customer service a priority; your reputation will spread through word of mouth.

If you want to learn more about customer service, try Bruce Temkin’s blog

All that being said, getting your website right is still extremely important. Small things can make a big difference in the eyes of your users. Take for example security…

4. Users care about security… badges [Wrong!]

It’s clear that users care about online security. In fact many people are still unwilling to buy online for fear of credit card fraud.  The media has done an excellent job of making the public suspicious of online transactions, even though they willingly hand over credit cards at restaurants.

Whether the users’ concerns are justified or not, we need to take them seriously if we want people to buy.  Many ecommerce businesses spend a lot of money to ensure the site’s security.  How then do they choose to communicate this to their users to reassure them? – They slap a badge on their website!

Simply adding a small VeriSign or MacAfee badge to your checkout page is not enough to alleviate users’ fears.  At best they are free advertising for the companies involved.  At worst they are entirely ignored because they look like banners.  A better approach is to add copy to your website addressing this issue, and the steps you’ve taken to ensure your customers’ security. Don’t rely on a single graphic to say all that needs to be said.

5. Amazon is the template we should all follow [Wrong]

This lie is probably the most widely held of all. There is a belief that because Amazon is so successful, all ecommerce websites should follow their example.

There are however, a number of flaws in this argument:

- They don’t get everything right (nobody can)
- They are partially successful as they were one of the very first ecommerce sites
- Their reputation and brand recognition allows them to get away with a lot
- Users are familiar with their site and its eccentricities

In short, what works for them will not necessarily work for you. Too many website owners blindly copy Amazon because they are seen as the leader in ecommerce. Not only is that flawed for the reasons above, it also removes the possibility of you ever being better than Amazon or innovating in any way.

Bonus lie:  Ecommerce is easy

Probably the biggest lie of all is that ecommerce is easy. Admittedly off-the-shelf solutions such as Shopify make it extremely easy to build ecommerce websites. However, building the site is only the beginning. The real challenge comes in:

- Marketing your site
- Deciding when to up-sell
- Providing great customer service
- Communicating clearly
- Learning from others

Creating a successful ecommerce business is a long-term commitment that involves continually evolving both your website and your strategy.

EyeMagine can make this a whole lot easier for you. Contact us for more details or complete our online Request for Proposal form.
Read the full article (source)

We’ve been approached by many storeowners, small companies, mid-sized companies, and media agencies to help with a Magento storefront.  Sometimes it’s a fit and sometimes it’s not. EyeMagine has been able to identify a few important things to consider when shopping for a Magento Solution Partner.  We hope this discussion will shed some light on your own search for a Magento developer and we wish you the best!

Design

Consider an e-commerce site’s presentation.  How important is design?  Can you recall a poorly designed e-commerce site? Has the poor design affected your decision to purchase?  Can you imagine how a poorly designed e-commerce site would affect your customers’ decision to make a purchase?

Now let’s consider a beautifully designed e-commerce store. Has a clean, intuitive, inviting design ever influenced your decision to buy? How do you think an engaging store design will boost your sales?

We believe design and user experience is a critical element of a successful e-commerce store. See some of our work, for reference. Providing your customers with positive feelings of confidence, assurance, and well-being is a lubricant for any online shopping experience.

We work together to create the ideal design for your store. We ask for sites that inspire you and we research your industry and competitors to understand the difference between a successful e-commerce site and the average e-commerce site.

EyeMagine creates designs in PSD format. This is a standard file format that is converted to HTML files. The resulting HTML files will be used to create a custom Magento theme.

Custom Features

While design is quite critical, a store’s features and function are also very important.

As a Magento Solution Partner, we are versed in Magento’s native features.  It will be very important for you to know and understand the features that Magento provides, off the shelf. We are so familiar with the software that we can add new features.

What would be considered a custom feature? Here some examples of customizations to the Magento e-commerce platform:
- Invoiced sales report
- Blog
- Press Release content management system
- Product configurator

If your store needs features that are not included in the Magento Community Edition, each of those features will be evaluated and added to the scope of work.

Theme

Once we gather all of the feature requirements and create a design, we will proceed to create HTML that will be used to create a custom theme for your store.

Magento is a template-based e-commerce application, which means that it comes with a default theme. This default store can be seen at the Magento demo site. Custom theme templates are created that overload the default set of templates. When creating a new store, we create a new theme for the store that brings the design to life.

That theme will be unique to your store.

Payment Gateway

Magento supports online credit card transactions. Authorize.net is an online payment gateway that helps process online credit card transactions. Authorize.net is one of many payment options when offering credit card payment to your customers.

PayPal is another payment gateway that is included in Magento e-commerce platform.

Once a payment gateway is selected, the accounts department will open an account and configure bank account information to begin processing transactions.

Project Management

Who will you be speaking with while your Magento store is being produced?

On the surface, this may not sound like a matter of great concern. But, it is. A good project manager will bring your project to completion on time.

Our team understands how important deadlines are. We understand that marketing material is usually published prior to a site launch and we have experience with managing and delivering successful projects.

Web Hosting

Where will the site live? Who will be responsible for keeping the site accessible to the online shopping world?

Now that we have covered the visible aspects of a Magento e-commerce solution, we can’t forget about web hosting.

EyeMagine offers web hosting using our own web servers. We will install your Magento store on one of our development servers while your store is under construction.

Hosting fees vary depending on your business needs and/or anticipated store traffic. Basic hosting packages start at $75 per month.

In addition to the monthly hosting investment, all secure sites require an SSL certificate. An SSL certificate is a means by which secure information is encrypted between a customer’s computer and the e-commerce web server. Click here to learn more.

One thing to be mindful of is that SSL certificates must be renewed annually.

Budget

When considering a Magento Solution Partner, a very important factor in the project scope is the budget.  Just like shopping for a car, shopping for a Magento Solution Partner is going to be a lot more productive when you determine your budget.

When working with our clients, our approach is to gather all of their requirements and estimate the time involved in producing the project.

When working with new clients, we first learn the budget and confirm that there are enough resources for a successful engagement. Next, we gather all of the requirements and work together to create a scope of work that fits within the budget.

Conclusion

The above process has resulted in a long history of satisfied clients with successful e-commerce stores. We hope this will help you in your search for the perfect Magento Solution Partner. We would love to hear your response and your suggestions, so please tell us what’s on your mind.

You can read the article about horizontal navigation here: Eyemagine on Smashing Magazine. Look for our screen near the bottom under Various Trends And Styles.

Please feel free to comment below to add your two cents or correct any inaccurate information.

1. Choose your core focus market and select keywords

The first step is to decide what type of visitors your would like to visit your site and what keywords visitors from your industry are using in the major search engines. By solidifying effective search terms that will drive users to your site, you are now prepared to integrate these keywords into your site and blog posts (see below). Spend time deciding what keywords are used by people most who are looking for products or services that you offer and be sure that these keywords appear within the first few lines of your site.

2. Post on blogs and forums

This probably the most underused, and similarly over abused method to improve your search ranking. The key here is to answer questions and offer expertise to users on other website owners already established websites. For example if you are a mobile phone store, then you could answer questions users have about a phones features on a Motorola forum. By including a link back to your site, along with industry relevant keywords, your website’s ranking will rapidly increase. Forums allow you to build relationships in your niche industry and help build credibility and trust with potential customers. Furthermore, forums allow you to display your website link in the body of each post. Once the website hosting the forum is indexed by a search engine, there will be a noticeable effect on the ranking of your site. A free blog can be created with WordPress

3. Build Your Site in CSS

This article isn’t meant to be too technical, but simply put, ask your web designer if your website was built in tables or CSS. If he/she says “tables”, it is time to find a new designer. Many web designers still use tables to build websites. This technique has been completely abandoned by the expert design community and is frowned upon by search engines.

4. List your site on as many directories as possible

If you do a quick search using your industry as the keyword – say “los angeles photography” you will probably notice that many of the results that show up are different directories of sorts. Many of these directories are free. Submit your site to these directories along with your business information for instant results. If you are listed on a website that shows up in the first 10 pages of search results, it is likely your site will show up too.

5. Write articles on your site (like this one)

Having a blog on your site will provide a steady stream of fresh content that incorporates your keywords. A simple blog like this one can be set up with WordPress, a free open-source blog application.

6. List your business on google maps

This tool is free and better than Yellow Pages. Your site ranking will not only improve just by being listed, but users will be provided with a map directly to your organization, basic contact information, and even hours of operation. Customers will thank you for not burying the store phone number deep within your site.
Google Maps

7. Provide Useful Information

Search engines look kindly on providing visitors with rich, useful content. Don’t spam potential users. Educate users rather than up sell them. Here are some examples of this logic applied
- Pet care tips for a Vet office or pet supply store
- Valentine’s day date ideas for chocolate shop or florist
- Free excel finance calculators on website for real estate agent

8. Write press releases

Releasing a new product? Write a press release. Hire a new CEO? Write a press release. There are many websites that offer free press release listings for you to submit your release to. Make sure to link back to a relevant page on your site.

9. Submit your site to the search engines yourself.

Do not pay for any service that offers to resubmit your site to search engines. They could get you permenantly blacklisted from the search engine. Then it’s back to the drawing board. The major search engines are Google, Yahoo, Microsoft, AOL, and ask.com.

Google – http://www.google.com/addurl/
Yahoo – http://search.yahoo.com/info/submit.html
Microsoft – http://search.live.com/docs/submit.aspx
AOL – http://www.dmoz.org/add.html
Ask – http://www.garryconn.com/how-do-i-submit-my-site-to-askcom.php

10. Improve your Metadata

While search engines have admittedly reduced the importance they place on your meta tags, there is still great value to be had from optimizing all of your meta tags. For the title attribute, use a descriptive title that does more than state the page and your company name. For instance, on your about or company page, rather than have a title that looks like this “About | Eyemagine”, a more useful title would be something like “Eyemagine is an Orange County based web development agency”. Now, not only is the page title actually describing what content is on the page, but it contains relevant keywords that you want to target. Similarly, try tailoring your meta description to the page itself, rather than using the same description sitewide. For usage info, refer to the w3c page on meta tags: W3C Schools. One important thing to note, search engines have all but completely phased out the keyword meta data from their algorithms due to the abusive keyword usage by webmasters in the past. While many recommend ignoring them completely, I still create keyword lists (no more than 15-20 keywords.