User Experience in Web Design

By dan.santoli at May 07, 2010 09:28
Filed Under: Skinning & Design

User experience is possibly the largest factor a web designer/ manager must account for. If the user gets frustrated, lost, or confused, chances are your customer will leave the site and the company will lose a sale. There are many things to take into account when dealing with the user experience. Many of the factors are fairly obvious, but are definitely worth going over. AspDotNetStorefront wants our customers to be as successful as possible and drive their ecommerce websites to their optimal ability.

Here are some things to take into consideration:

I touched last week on how you should consider your audience and how they normally view things. In a standard English culture (if that is your demographic) users will read left to right, top to bottom. Keep this in mind when displaying certain information or links. Customers want to come to your ecommerce site to find the products they want in the easiest way; don’t make it uncomfortable for them to look for something that is outside their normal operations.  I also commented on browser sizes and screen resolutions. Some browsers or screen sizes may be set different and the first areas to get “cut off” are the left and bottom. If you have very vital links or information, avoid placing them to the far left or at the bottom.

Links Links are how viewers get around. It is a style and trend now to make links with no text decoration ( not underlined or offset in color ). This approach is fine, but make sure there is some kind of hint that these are links. I suggest they be a different size or color than the rest of your text, be placed in a separate box, or in a section titled “links”. A grasp of previous navigation could really help the user visit past information, double check something, or let them know where they are. Changing the color of a visited link will let the viewer know he or she has already been there and help them navigate where to go next.

Non-scannable Text There is nothing more unattractive and boring then arriving to a website with a text heavy information block. Viewers don’t want to arrive at your site and read a book; they want a quick read. Don’t write for print, try using some of these techniques to get your viewers the info they want, quickly:

  • Subheads
  • Bulleted lists
  • Bold or highlighted words
  • Short paragraphs
  • A simple and easy writing style


Font When designing a website, don’t use font-families that others may not have. A website will only display the font if the user has it. Use “web safe” fonts that 99% of computers come with.

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Lucida Console
  • Lucida Sans
  • Palatino Linotype
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana


Font size is another issue that some people may not consider. CSS style sheets give the website the power to disable a web browser’s font size. What this means is that some browsers will display a text size differently or relevant to settings. Instead of specifying a direct font size ( such as 12px ) use a percentage in the styles. The “rule of thumb” is to typically use 120% for big text and 90% for smaller text. Make sure to have the most contrast between your background and the text color! It is very difficult to read a font that does not “pop” out from the background. Also consider your demographics when choosing your font. If your ecommerce products are intended for senior citizens, use larger font! It might sound funny, but some reasons why web designers make mistakes with font are because they are generally younger and have better eyes, or because they have invested in a good computer or monitor with good resolution.

Consistency Keep things consistent and simple. When viewers explore your site and products, they don’t want things changing on them constantly. Keep navigation, links, products buttons or information boxes in the same place throughout the site to avoid confusion.

Little Things Often it is the little things that bother a user. Some annoyances can change a customer’s view of the site, and could directly impact their impression of the company. Try to avoid PDFs if you can. A customer wanting information, and having to resort to a PDF that opens in a separate tab or application with a different size and format depending on how they view it (or even having to save and open the file manually) will disrupt the flow of the read. Sometimes opening window after window gets annoying to the customer and they end up closing out information. Try and limit setting up a site that sparks a new window for content. Make sure your customers are getting their questions answered. They come to your site for a reason. A huge mistake I often see is when a site has products, but no listed price. Remember that users don’t have the time to read through your site or find something buried under a thick layer of marketing collateral. 

Always put yourself in the shoes of your customer. Have colleagues visit the site and be sure to not explain things to them, see if they can navigate through it. Three key words to keep in mind when developing a good mix of a site are: content, context and users. If you cater to these in a balance, your ecommerce user experience will be solid.


Last, think of these words when strategizing for the site:

useable, useful, desirable, valuable, findable, accessible, credible

2010 Web Design Trends

By dan.santoli at April 23, 2010 10:58
Filed Under: Skinning & Design

AspDotNetStorefront makes it a priority to stay in tune with significant industry changes and trends. We offer a great e-Commerce platform to display your products for sale right out of the box, but can you be doing more to enhance the effect it has on your viewers?

We have done some extensive research on 2010 web design trends and were curious to find results on what customers and users of your site may be aesthetically drawn to like “what’s in” right now and what is appealing to the average viewer. Utilizing these techniques is far more than just conforming to what people like. Naturally, if a viewer enjoys his or her time spent at the site, it will encourage them to spend more time there, explore other parts of your site, and are more likely to return. 

With that in mind, I’d like to touch on several 2010 web design trends, in the pursuit of informing AspDotNetStorefront customers and fellow designers on what is having the most success within the industry right now.

Oversized: The human eye is naturally drawn to big and bold things. One of the latest emerging trends is oversized images and logos; there are a couple of places where this is applicable. Headers are a great area to exercise this technique. Splash pages are slowly fading out. To make a better impression, and one more unforgettable, try oversizing a logo on an oversized header. This could even take up the entire screen, but will showcase one important, highlighted aspect. Viewers will be more enticed with your graphics/ product/ identity and will want to scroll down or click to see more.

Pictures are very inviting and will engage the viewer almost always. There is no fear in placing a larger picture (as long as it doesn’t crowd the page). Think of photos that will set a theme, display a product, introduce a corporate identity or set the tone of the site.

Organization: The user experience is probably the most important thing while designing a web site. We want the viewer to never get frustrated and give up or leave and never return. A good organization and layout will help the user feel at ease and enjoy their experience more. Think about walking into your favorite store.  What is the mood or tone that the store sets? What do the displays look like or what type of music is played during your shopping experience? Think overall experience and then think about the fact that as a designer it is our obligation to translate all of this graphically.

Headlines, subheads and regular content should be organized in a hierarchal system. A viewer should naturally be able to have a primary read (like a title or headline), secondary read (like subhead or preceding paragraph, chart, product...etc.), and possibly a third read (could be content, description, more info...etc.). What the content is does not cause the problem; the problem is when your site becomes busy and causes the viewer to scan his or her eyes all over the screen missing out on some important content. If you have a featured product, make sure the viewer gets attracted to it first. Think of how a viewer naturally looks at a site and that’s how you should consider placing elements. If your site is for a region like the United States, think about how a user naturally reads left to right, or up to down. Placing elements on the left or top just might get their attention or help them navigate a bit better. If you are new to organizing websites, you’ll notice that many existing sites contain their most important information on the left (such as links, navigation, side stories) and at the top (such as logos, navigation, and company name). The top and left are also utilized often because they are the last to get “cut-off”. If you have a user with a smaller screen resolution, it shrinks starting with the bottom and right.

The footer is another key feature of a site. The footer can be used to wrap up the information in links, display secondary links, display personal information or encourage the viewer to proceed to the next page. A huge trend for 2010 is oversized footers. It’s a chance to get a lot of content at the viewer one last time.

Icons: Icons are used more frequently on today’s websites. They are used to represent something in the most obvious way. Icons can replace text and be more attractive to the viewer. When designing an icon, a tip is to design the first thing you think of when thinking of what you want to represent. If you follow that method, then you are designing the most obvious thing representing what the icon is for. 2010 trends for icons are shiny and reflective or 3D icons with depth, shadow and highlights. The next time you spell out the link “shoppingcart”, try creating an icon as well to draw in your viewer.

Rounded Corners: The only thing people have to say about rounded corners being “in” is that it’s different from the normal box effect. It helps if you have a more organic site with curves and swirls; these rounded corners won’t disrupt the cohesive flow.

Minimalism: There is nothing wrong with having the most plain, basic site while highlighting the important aspects. Some of the most successful websites are just text on a white background (Google, Craigslist...etc). As a graphic designer, I fully understand the effect that white-space can have on a design. It draws attention to certain things and allows the flow to “breathe”.

Introboxes: An introbox is an introductory statement about you or your company, placed somewhere at the beginning of your site. This box/ section is actually taking the place of “about me” pages in 2010 websites and giving a nice” welcome” to your site.

Themes: There are many themes emerging out of the last couple years. Retro themes are actually a new thing. Doing a retro theme adds certain aesthetics to your site that some people can relate to, admire or just entice people. Another new style is a magazine/ collage type of layout. This approach is the opposite of minimalism, yet the viewer should still be able to comfortably navigate their way through the site. In this approach, you will see cut out pieces, large headlines, pictures all over the place and clearly defined columns and sections. Illustrative styles have always been in, but with the advancement of technology and software, more illustrations are making their way into sites. This could be anything from a simple graphic in the background of your content to a huge illustration on every page of the site.

Social Media: This is more of a general trend rather than a web design tip, but it is still vital to the success of your general or ecommerce business. Create a Facebook, Twitter or Linkedin account and place a link/ icon on your site. Social Media can broadcast information to a mass amount of people and feed them live updates. Blogs are also a great social media tool. Blogs engage a reader in following your company, as well as creating more words for searches in terms of SEO. The more words people can search (through google, yahoo…etc) the higher your ecommerce site and products will get placed in the page rank.  

There are many more trends not listed, as well as new ones emerging each day. In the organization section of this post, I touched a little bit on user experience. The next post I will make will go over vital points of the user experience and how to make his or her experience as enjoyable as possible.