Showing posts with label Web design. Show all posts
Showing posts with label Web design. Show all posts

Thursday, February 27, 2014

The Psychology of Great Web Design


As many a great graphic and web designer knows, human behavior is just as important to a new design as the required elements themselves. Knowing the normal patterns of the human brain can help your designs have more influence while conveying the right message to your clients’ target audience. By learning the psychology behind decision-making online, design can be more effective overall.

What People Notice First is What They Are Looking For

shutterstock 137962241 Converted The Psychology of Great Web Design
What people notice first on a website depends on what they are looking for online. If they are looking to buy something, then they may look for a specific product or the e-commerce category page. However, if they are information-seeking, they could respond to a specific call-to-action for a white paper on the industry or the search bar.
In order to develop a design that fits, design the site to accommodate each type of user without making the design overwhelming.
When users are overwhelmed with choices, they aren’t as satisfied and aren’t as effective in the work they output, according to a 2000 study published on PubMed. By limiting how many directions a user can take once they get to a website, the more likely they are to stay on a page. Try to limit decisions into main categories that are easy to understand and cover what most groups of users are looking for (e.g. Buy, Call, or Learn).

Content is King

Content is one of the most integral parts of web design, and the formatting and typography of the text is just important as the text itself.

Formatting

According to Inspired Mag, an eye-tracking study concluded that large headers and call to action buttons actually kept users’ attention longer than images. When creating a layout, place your major call to action headlines and button elements on the design first, then build the structure around it.
This is because larger, more eye-catching text actually can also help users get a bigger overall picture of what the website is trying to say. One study done by the Nielsen Norman Group stated that users only read, on average, 20% to 28% of content on a website on a normal visit. Combine this with the average web user’s attention span of 8 seconds in 2013 (down from 12 seconds in 2000, according to Statistic Brain), and call-to-action headers and buttons are more important than ever.
Keep call-to-actions easy to read and understand that get the point across in as few words as possible. Too many words will lose users’ interest.

Typography

As creatives, we know that typography can have a huge influence in the way customers are made to feel about a product or service, whether they know it or not. The right typography can persuade a user to buy, love, and learn about an organization’s products, based on kerning, curves of the font, and even color.
We immediately develop emotions and judgments based on the font used. This means that, to the user, two different types of fonts don’t mean the same thing. Taking the time to focus on the branding behind typography used on the page has a direct influence in the overall effectiveness of the site design.

Photos

Photos are also another element of design that can influence a user’s brand sentiment. The photo’s composition and colors should both be taken into consideration, as both have a subconscious effect on telling the user what they should do on a website and how they should interact with the brand.
In the example to the left, the subjects are happy, so the user is made to feel happy as well. This is the effect of emotional contagion, which was developed by Elaine Hatfield, a professor of psychology at the University of Hawaii. People consciously and subconsciously influence one another’s emotions based on the emotions they are displaying to others. This means that happy people or elements that people associate with being positive can influence a user’s feelings about a company or product. Try to choose photos that embody the emotion the company is wanting the user to feel about their products.
Artistic composition and subject is not only focusing on what is eye-catching, but also what holds the best user experience. Placing text or other elements on top of photos requires the right contrast in order to make it readable.
In addition to the image composition itself, the text surrounding the photos can reinforce key points within the website, whether through integrated calls-to-action but also as image “captions”, either literally or in a design sense. Advia Internet cites a study where participants were more likely to read image captions because their eyes were drawn naturally to the text explaining the image. Keeping surrounding image text strong can lead to increased clicks and more time spent on site.

In conclusion

The psychology of online user experience influences the effectiveness of great web design. Whether it is through call-to-action size, typography, or images, having a basic understanding of how users interpret design elements will make design better.

Saturday, February 2, 2013

2013: The Year Of Responsive Web Design


2013 The Year Of Responsive
2012 was a pretty crazy year in the world of computers. For the first time in over a decade, the volume of PC sales projected for the year was lower than that predicted in 2011.

So, if PC sales are declining, what type of devices are consumers purchasing instead? Well, it’s been said that in 2013 tablet sales are expected to exceed 100 million units, and may, for the first time, top the number of notebooks that are sold.
Apple’s iPad has been a huge success since it was launched and is now the device of choice for many consumers who like to shop online. Last year also saw Amazon and Google gaining market share with their respective tablet devices, Kindle HD and the Nexus 7; however, Apple continues to dominate the market.
Smartphone usage also continues to grow at an extraordinary rate, with many more mobile users choosing to ditch basic feature phones; with mobile web usage set to overtake desktop usage in 2014, now more than ever, it’s vital that your business has a mobile web presence.
It’s no longer acceptable to develop a website that won’t be accessible via mobile devices; however not every business owner has the budget to create a separate mobile version of their desktop site (in fact it might be wise not to consider this option due to the negative impact it could have on your business’s search rankings).  Another option is the creation of a dedicated mobile app however with new mobile devices regularly being launched, often with their own operating characteristics, this may not be the most cost effective solution available.
So, given the drawbacks of all these options, what is the best solution for a business looking to have a mobile presence?
Responsive web design is now being adopted by many organisations as standard. It uses flexible images and fluid grids to automatically detect the screen size of the device that is being used to visit a website, changing its size and behaviour accordingly, making it accessible to all platforms. This means that once a site has been developed, it will be compatible with newer devices as they come on the market, making it a future-proof option.
Given the rapid adoption of tablets and smartphones and their ever-changing screen sizes, and the fact that internet users increasingly prefer to consume information and make purchases on these devices, I think it's inevitable that 2013 will be the year of responsive design.

(via)

Sunday, September 23, 2012

6 Easy Ways To Improve Your Site’s Navigation


Just about every website has some form of navigation. Unfortunately, not every website’s navigation is good. Most of the time, a website’s navigation is put together by Web 
How to improve your website navigation
designers who know a lot about making pretty websites, but very little about marketing a website or creating a website built for the customer.

Just because your navigation is built into the site doesn’t mean it’s doing the best job of giving your visitors what they want.
Navigation can make or break your website’s overall performance when it comes to retaining visitors, keeping them engaged and driving them through the conversion funnel.
Strong site navigation makes it easy for visitors to quickly find the information that interests them, sans a potentially frustrating “hunt.” It also helps search engines index your important information efficiently and effectively.
Conversely, poor navigation does more harm than good. It confuses visitors and sends them scurrying for the exit. When they can’t find what they’re looking for, you don’t get the conversion you want, either.

How To Improve Your Website Navigation

  • Keep it consistent. Consistent navigation – in both how and where it appears on your site – promotes ease of use and increases your visitors’ ability to find relevant information more quickly. If your navigation is constantly changing from page to page (except where absolutely necessary), visitors lose their on-site bearings and must reorient themselves constantly.
  • Divide categories clearly. If your navigation contains multiple sections, categories or sub-categories, these categories must be clearly and visually defined. In other words, category headings must be separated visually from the sub-categories, even if the categories are links themselves.
  • Make all navigation elements clickable links. When using multiple categorical divisions in your navigation, all heading elements should be clickable links. This is true even with drop-down menus where clicking a sub-category link may be the natural inclination of the visitor.
  • Use accurate navigation titles. Visitors should have a general idea of what they should find on a page even before clicking any navigational link. This is true whether it’s a main navigation link or an internal text link. Use accurate text to describe the linked page so visitors know what they’re going to get. Cryptic or misleading navigation text confuses and annoys visitors, possibly to the point of site abandonment. Make sure all link verbiage, whether textual or in an image, accurately portrays the corresponding pages.
  • Ensure every clickable image has ALT text. This is true of every image, but even more important for images that link to other pages. Be sure to include the ALT attribute with descriptive text. This ensures that everybody knows what the link is, regardless of how they are viewing your site.
  • Ensure your search feature works. When using an in-site search feature, the search results page must always produce relevant results. It must compensate for misspellings, show related items and even produce results for products you don’t have while displaying similar products you offer. Never produce a search result as “no products found.”
website navigation examples

It Doesn’t Work Until You Prove It

An easy, effective way to test your site’s navigation is to first browse a competitor’s website. As you do, take notes on what you like and don’t like. Jot down any problems you run across, as well as anything that stands out as being exceptional. Then go back to your own site and perform the same navigation and note-taking process.
Compare notes between the sites and see if there is anything you can do to make your navigation better. I’m sure you’ll find areas where your navigation is better, but most likely you’ll also uncover areas where your navigation is inferior.

(via)

Friday, April 20, 2012

SEO Benefits of Responsive Web Design

Site owners have many competing needs when developing mobile sites. Different devices, different capabilities, different screen sizes and resolutions, all have an impact on designing and developing mobile sites today.


According to Mongoose Metrics, a tracking and analysis firm, only 9 percent of sites are ready for mobile in 2012. The primary consideration with mobile tends to be enabling better usability and — for ecommece sites — conversion. Another study by Compuware, a software and services provider, shows that 57 percent of users will not recommend a company with a bad mobile site and 40 percent of users will visit a competitor's site rather than using a poorly optimized mobile site. The case for usability and conversion as primary concerns in the drive to take ecommerce sites mobile is easy to make. Fortunately, responsive web design — the leading solution to the mobile usability challenge — is also beneficial to search engine optimization.






What Is Responsive Web Design?

Responsive web design is a concept that blends CSS, CSS3 and JavaScript to create fluid site designs that can expand, contract, rearrange or remove content based upon the user's screen size. Instead of developing different sites for devices with different screen sizes and capabilities, one site with one set of pages reacts flexibly to display optimally on everything from a 27-inch desktop monitor to a three and a half-inch iPhone display. The usability benefits are obvious: Customers can interact with a site regardless of the device they're using instead of having to choose between viewing the whole page illegibly or one small part of it that's disorienting. Where usability improves, decrease bounce rates and increased conversions are usually not far behind.
True, there are cases where the function and content of the mobile site needs to be different than the desktop site. Responsive design can handle those instances also via CSS by removing or reducing the visibility of content that's less relevant to mobile users. In some cases only a mobile app will really meet the needs of mobile users. But this article is about neither mobile apps nor the technical details of implementing responsive web design. For an excellent technical overview and references to other resources, see Smashing Magazine's "Responsive Web Design: What It Is and How to Use It."

Responsive Web Design Benefits SEO

Fortunately, search engine optimization offers another great reason to consider responsive web design: links. The alternative to developing a single responsive site that meets all device needs is to develop multiple sites to meet individual device needs. One site for desktop browsers, one for smartphone browsers, one for tablets, and each has to be maintained separately after the expense of designing and developing them separately. From a search engine perspective, each needs links and/or user agent-specific redirects to get customers to the right version of the site. One site means one set of links to build, and no annoying redirects to add to server load, site speed and maintenance hassles.
Think of it this way, Groupon has developed Touch.groupon.com for smartphones, Ipad.groupon.com for the iPad, and www.groupon.com for desktop computers. The search engines don't have much interest in figuring out which sites should receive searches on which devices, though they easily could with their ability to crawl sites as different browser types. The point is that the onus is on the site to redirect the customers to the site that meet their device's needs. For more on this, see "How to Benefit from Googlebot Mobile's New Smarts," my recent article on that topic.
Most ecommerce sites I've visited do a terrible job of redirecting customers to a mobile version of a site — if they even have a mobile site in the first place. Even my poster child for mobile success, Amazon.com, uses different sites for different devices and redirects, instead of responsive design. In their case, however, it's hard to argue for a change when they're running on all cylinders with their current solution.

Do Links Matter for Mobile Sites?

So back to links. If a site has to physically redirect mobile users from its desktop site to its mobile site, and if smartphone and tablet sites rarely if ever rank in the search results, what do links matter for mobile sites? Excellent question. It's not about getting more links to the mobile version so it can rank. It's the fact that some mobile users may create links to or share pages from the mobile site, which essentially steals link equity from the desktop site.
Say a mobile version of a product page has links to it from two blogs, two Tweets, two Facebook Likes and two Google +1s. But the desktop version of that same page has links to it from 20 blogs, 20 Tweets, 20 Facebook Likes and 20 Google +1s. The mobile version of that page is almost certainly not going to rank, and it's stealing those links and shares from the stronger desktop version of the site. If the site had been built using responsive design, the single product page would have 22 of each type of link and share instead of 20 and two to separate pages. In summary, the benefit is consolidation is link equity to a single page, enabling that single page to send stronger signals and rank better than the two separate pages could have alone.

Example of Responsive Web Design in Ecommerce

The best example of responsive web design I could find was Nike's Store. From the home page down into the product pages, the URLs were the same for the mobile and desktop versions, but the display changed to suit the device. See the image below of Nike's 6.0 Dunk Low Women's Shoeacross a laptop PC display, an Android tablet screen and an Android smartphone screen. The URL is exactly the same for each of these images, despite the difference in design and layout. That's what makes it responsive web design and not merely a mobile web site.

Nike's responsive site design adjusts page design and layout to best display on various screen sizes.
Nike's responsive site design adjusts page design and layout to best display on various screen sizes.




For large screens, Nike renders their full-featured website.
For large screens, Nike renders their full-featured website.




For smaller screens, Nike has a cleaner, simpler web interface.
For smaller screens, Nike has a cleaner, simpler web interface.




For mobile browsers, Nike shows only the basic options needed for a purchase.
For mobile browsers, Nike shows only the basic options needed for a purchase.


Interestingly, Sony.com was the only other site I could find that practiced responsive design, but it has so far only implemented it on the home page. As soon as you click off the home page, the formatting reverts to desktop display. It's interesting that a company that makes mobile devices doesn't itself have a more mobile-friendly site.
Other sites like Walgreen’s, Shoes.com, Coldwater Creek, and others have mobile versions, but the URLs for the mobile pages are different than the URLs for the desktop pages. These sites, while mobile, are not examples of responsive web design. They are still splitting their link equity between different pages of the same content, missing the opportunity to send a stronger signal by consolidating their links to a single page with responsive web design.