Search provides users with a simple way to find what they’re looking for and can be invaluable on content-heavy sites. Therefore, it’s worth taking some extra time to ensure that your search area is attractive, noticeable, and easy to use.

With that in mind, here are a collection of snippets that take the humble search field up a notch. They range from simple CSS aesthetic enhancements all the way to JS-infused UIs that help make for a more immersive experience.

Morphing Search Bar Icon by Milan Milošev

Morphing animation is always a treat. Here we have the ubiquitous magnifying glass icon that, when clicked, morphs into a full search bar.

Clicking on the “X” sends the whole thing back to square one. This could be a nice solution for smaller screens in that you can tuck the field away when not in use.

See the Pen Search bar animation by Milan Milošev

CSS Search Field Hover & Search Animation by Sebastian Popp

This example offers similar functionality to the one above, but with an important difference. Instead of having to click to reveal the search field, a user just needs to hover over the icon.

This may be a relatively small thing, but it could provide a boost when it comes to usability. Again, a potentially solid choice for cramped spaces.

See the Pen CSS Search Field Animation by Sebastian Popp

Scrolling Search Bar by Chris Coyier

On mobile devices, users may be in for a whole lot of scrolling. But if they can’t find what they’re looking for, it often means that they’ll have to go all the way back to the site’s header to perform a search.

Here we have a “sticky” search bar that will attach itself to the top of the screen as you scroll down the page. This handy feature can make life that much easier for users.

See the Pen Search Box in Content Moves to Fixed Header by Chris Coyier

Material Fullscreen Search Transition by Luca Dimola

Google’s Material Design is being used quite a bit these days. So it’s only natural that the design language is applied to search as well. It’s also nice that, once clicked, this search field takes over the entire screen.

This allows users to focus solely on their search and, with a little work, designers could potentially add other related information to the display.

See the Pen Material Fullscreen Search Transition by Luca Dimola

Simple Custom Search by Fabio Ottaviani

There may be times when users want to search only specific areas of your site. While a custom search isn’t exactly a new concept, it hasn’t always been that visually appealing of a process. That’s what makes this custom search field demo so slick.

It sports a series of icons, each representing a different area where a search can be performed (plus handy tooltips). The user clicks which area they want to search – easy!

See the Pen DailyUI #022 – Search by Fabio Ottaviani

Context Animation by Riccardo Zanutta

Providing visual context during a search helps to assure users that they are on the right path. This snippet uses AJAX to both change the background color and add textual information as the user performs a search.

See the Pen Search input context animation by Riccardo Zanutta

Transparent Search Box by Jon Welsh

How do you create a search area that both stands out while not sticking out like a sore thumb? Using some transparency is one way to do it. Here we have a translucent search field that sits on top of a full-screen image.

The white border is strong, however, and that makes for a nice visual effect while not overtaking the page.

See the Pen A cool little search box by Jon Welsh

Multi Search with Combo Box by John McGarrah

For sites that allow users to search for more than one set of data, this example can be quite useful. It harnesses jQuery to enable the user to switch between different search fields, thus placing all search functionality in a single place.

See the Pen multi search with combo box by John McGarrah

The End Result

Search fields can play a vital role in keeping users on your website. And the examples above are proof that you can provide some useful enhancements without a lot of extra effort.

So, if you’ve neglected to pay much attention when it comes to the look and functionality of your site’s search feature, this will give you a great place to start.

The post 8 CSS & JavaScript Snippets for Making the Search Field Sexy appeared first on Speckyboy Design Magazine.

The more users enjoy your site, the more likely they are to stick around and become members, customers, subscribers, and so on. Improving your site’s search function can be accomplished with ease, but many may sabotage their search by making these common mistakes. Learn how to optimize on-site search and avoid the common pitfalls of your competition.

It Isn’t Visible

If users can’t easily identify your search form, they may grow frustrated and seek their answers elsewhere. Ideally, the location of your search bar should be easy to see from the above-scroll section of the page (i.e., not at the bottom). The closer to the top and left side you can bring your search box, the better.

While the search box shouldn’t be the first thing users see, it should be strategically placed so it falls within normal reading patterns.

Once you settle on a place, keep it as consistent as possible. As many as 30% of users will use your search function if they can find it, so maintaining the location consistently will yield quicker searches and return users.

It Isn’t Easy

Anything that places an obstacle between your user and completing their search detracts from its accessibility. If your search box has placeholder text, such as “question here” or “product name”, make sure that the text disappears when the user begins typing.

While users may not abandon the search altogether because of extra keystrokes, they’re still being delayed if their backspace key gets a workout. Eliminating even one extra key push can increase user satisfaction and make the search function more efficient.

Other ways to increase the accessibility of your search bar include cosmetic changes like color use and text readability. If your search bar uses custom colors at all, make sure they’re sharp and contrasting. Likewise, ensure that any custom fonts are legible in both size and shape.

Auto-Suggestions Aren’t Provided

Auto-suggestions can speed up the search process significantly for the user, especially if you offer multiple models or versions of a core product. The less time users must spend typing in their query, the longer they can spend engaging with the content they’re trying to find.

Autocomplete by Martin Bonov

No Autocorrect, Either

Perhaps one of the most crippling oversights in a search function is not providing autocorrection. If your search can detect the more common typographical errors in search queries, let it apply the corrections automatically.

The more a user has to retype their query, especially on mobile, the more likely it is that they’ll give up and find their answers from another website.

Whenever possible, you want to provide as few empty result pages as you can, and autocorrection can go a long way toward limiting them. Remember, the goal is always to make the trip between search and acquisition as effortless and short as possible.

The 404 Isn’t Helpful

Despite using autosuggestion and autocorrect to guide user searches, there will inevitably be a need to display an empty results page. Try to make this page as useful and beneficial for your user as possible.

Provide links to main directories, offer suggestions for reworking the search query, or direct them to your contact page. Whatever you do, be sure to give the user something for their trouble of searching, even if it can’t be the results they want.

Results Aren’t Straightforward

Search result pages should be as familiar and dressed down as possible. Save the more novel filters that your search engine can provide for the second step in the search process, not the first.

Hide the bells and whistles of your engine under an advanced search link and, if possible, have the search menu expand without leaving the page. Make sure that the search results landing page is easy to read on first pass, providing legible, plain fonts, and clean composition so that results can be assessed individually.

Advanced Search by CodyHouse

They Don’t Separate Filters and Sorting Methods

Sorting methods are a different beast from advanced filters and users will want access without having to perform additional work. Make sure that your sorting options (date, popularity, and so on) can be accessed from the same page.

To increase visibility, place the options on the top left corner at the start of the search results.

They Ignore Search Analytics

Your search analytics can be a powerful tool for marketing and UX. It can also reveal weaknesses in your search optimization. Monitor your search results on a frequent basis and establish metrics to use for comparison. When you utilize your search analytics, you can address any search weaknesses by going directly to the cause.

If you notice that out of 15,000 search queries for “monkeys”, for instance, there are only 3,000 clicks, you would be able to recreate the experience and determine if it’s a poorly optimized keyword, irrelevant data, or both.

No Search Variations

Adding variation search results can help your user find products they may not have considered before. If a user types “oversized sweater”, then you can provide them with alternative search query options and results (such as “oversized” and “sweater”) in separate sections.

That way, even if you don’t have the product or information they’re looking for, they’re able to view your closest equivalent. Providing something close, even if not exactly what they searched, is more beneficial than an empty results page.

Irrelevant Results

While the more results you can offer, the better, keep in mind that your results need to be relevant. If there’s no reason to link variations based on past behavior and the two entries don’t share common ground, don’t link it for the sake of avoiding an empty results page.

They Overwhelm Users

And finally, one of the biggest detractors from search UX is overwhelming the user with information. If there are over twenty entries that meet a user’s search query, don’t display them all unless the user has specifically chosen that option.

Instead, set the default display between 15-20 and allow users to tab between pages to view the rest of the results.

The post How to Fix Common On-Site Search Mistakes appeared first on Speckyboy Design Magazine.

In this post, we have ten useful WordPress search code snippets that will help improve the search accuracy for your readers. Just copy and paste.

You might also like these useful .htaccess snippets & hacks, these WordPress SQL Query Snippets, or these snippets that make WordPress user-friendly for your clients.

How To Exclude Posts or Pages from WordPress Search Results

If you would like to be able to control which posts or pages should be excluded from WordPress search results, all you have to do is copy and paste the code below into your functions.php file.

In this snippet, posts with the IDs 0 and 1 will be excluded. Edit accordingly to suit your needs.

function SearchFilter($query) {
    if ($query->is_search) {
        $query->set('cat','0,1');
    }
    return $query;
}
add_filter('pre_get_posts','SearchFilter');

WordPress Drop-Down Category Search Form

A useful function you could give to your WordPress search would be to allow your readers to filter the search results by targeting a specific category. This can be achieved by using a simple drop-down containing all of the category titles.

All you have to do is replace the standard WordPress search form (found within the searchform.php) with the snippet below:

<form role="search" method="get" id="searchform" action="<?php bloginfo('siteurl'); ?>">
  <div>
    <label class="screen-reader-text" for="s">Search for:</label>
    <input type="text" value="" name="s" id="s" /> 
    in <?php wp_dropdown_categories( 'show_option_all=All Categories' ); ?> 
    <input type="submit" id="searchsubmit" value="Search" />
  </div>
</form>

Search Within a Specific WordPress Post Type

WordPress gives you the ability to search specific post types by using this small snippet.

All you have to do is copy and paste the code below into your functions.php file.

function SearchFilter($query) {
  if ($query->is_search) {
    // Insert the specific post type you want to search
    $query->set('post_type', 'feeds');
  }
  return $query;
}
// This filter will jump into the loop and arrange our results before they're returned
add_filter('pre_get_posts','SearchFilter');

Display the Number of Search Results Returned

If you would like to show your readers how many results have been found per search term, you could use this helpful snippet.

Open search.php and locate the following:

<h2 class="pagetitle">Search Results</h2>

And replace it with this code:

Search Result for post_count; _e(''); _e(''); echo $key; _e(''); _e(' — '); echo $count . ' '; _e('articles'); wp_reset_query(); ?>

Highlight WordPress Search Terms with jQuery

To help make your search results that little bit clearer to your readers, you could use this snippet which will highlight the searched term within the results.

Copy and paste the following code into your theme’s functions.php file:

function hls_set_query() {
  $query  = attribute_escape(get_search_query());
  if(strlen($query) > 0){
    echo '
      <script type="text/javascript">var hls_query  = "'.$query.'";</script>
    ';
  }
}
function hls_init_jquery() {
  wp_enqueue_script('jquery');
}
add_action('init', 'hls_init_jquery');
add_action('wp_print_scripts', 'hls_set_query');

And then add this code into your header.php file, just before the /head tag:

<style type="text/css" media="screen">
    .hls { background: #D3E18A; }
  </style>
  <script type="text/javascript">
  jQuery.fn.extend({
    highlight: function(search, insensitive, hls_class){
      var regex = new RegExp("(<[^>]*>)|(\\b"+ search.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1") +")", insensitive ? "ig" : "g");
      return this.html(this.html().replace(regex, function(a, b, c){
        return (a.charAt(0) == "<") ? a : "<strong class=\""+ hls_class +"\">" + c + "";
      }));
    }
  });
  jQuery(document).ready(function($){
    if(typeof(hls_query) != 'undefined'){
      $("#post-area").highlight(hls_query, 1, "hls");
    }
  });
  </script>

Disable WordPress Search

If you are looking for a way to disable all of WordPress’s search functionality, you could use this small snippet.

All you have to do is copy and paste the code below into your functions.php file.

function fb_filter_query( $query, $error = true ) {
  if ( is_search() ) {
    $query->is_search = false;
    $query->query_vars[s] = false;
    $query->query[s] = false;

    // to error
    if ( $error == true )
      $query->is_404 = true;
  }
}
add_action( 'parse_query', 'fb_filter_query' );
add_filter( 'get_search_form', create_function( '$a', "return null;" ) );

Make your WordPress Search Results Unlimited

Sometimes you may not want your search results to be limited by the confines of the standard WordPress Loop. This snippet allows your search to return unlimited results.

In search.php you can add the following code above the loop for this functionality.

First of all find this code within search.php:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

And then add this code:

<?php $posts=query_posts($query_string . '&posts_per_page=-1'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

The post 10 Useful Snippets for Improving WordPress Search appeared first on Speckyboy Design Magazine.

Today, you will learn how to create a nice CSS3 search box using pseudo-elements.

The HTML

As you can see below, the markup is minimal and easy to understand:

<form class="form-wrapper cf">
        <input type="text" placeholder="Search here..." required>
        <button type="submit">Search</button>
    </form>   

You may have noticed the HTML5’s specific attributes like placeholder and required, here’s a short description:

• placeholder– Basically, this attribute shows a text in a field until the field is focused upon, then it just hides the text.
• required– This specifies that the current element is a required part of a form submission.

HTML5 also brought us a new value for the type attribute: type="search". Though, because of cross browser inconsistency, I decided to skip it for now.

Quick Tip

HTML elements like img and input have no content, therefore, a pseudo-element like :before will not render any arrow for our search button.

My solution was to use the button type="submit" element instead of casual input type="submit". This way, we can preserve the submitting form on ENTER key functionality.

The CSS

Below you can find the necessary styles for our demo:

Clear Floats

.cf:before, .cf:after{
    content:"";
    display:table;
}

.cf:after{
    clear:both;
}

.cf{
    zoom:1;
}    

Form Elements

Prefixed properties like -moz-box-shadow weren’t included, I just wanted to keep the following code clean. Though, they are included in the demo example.

/* Form wrapper styling */
.form-wrapper {
    width: 450px;
    padding: 15px;
    margin: 150px auto 50px auto;
    background: #444;
    background: rgba(0,0,0,.2);
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}

/* Form text input */

.form-wrapper input {
    width: 330px;
    height: 20px;
    padding: 10px 5px;
    float: left;    
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
    background: #eee;
    border-radius: 3px 0 0 3px;      
}

.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}

.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}    

/* Form submit button */
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 110px;
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    border-radius: 0 3px 3px 0;      
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}   
  
.form-wrapper button:hover{     
    background: #e54040;
}   
  
.form-wrapper button:active,
.form-wrapper button:focus{   
    background: #c42f2f;
    outline: 0;   
}

.form-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 12px;
    left: -6px;
}

.form-wrapper button:hover:before{
    border-right-color: #e54040;
}

.form-wrapper button:focus:before,
.form-wrapper button:active:before{
        border-right-color: #c42f2f;
}      

.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}    

That’s all!

I hope you liked this tutorial and I’m looking forward to hearing your thoughts about it. Thank you for reading!

The post How to Build a Stylish CSS3 Search Box appeared first on Speckyboy Design Magazine.

I’ve also included a bonus area where you’ll discover how to collect and analyze internal search conversion data from Google Analytics.

First, let’s take a look at a couple of case studies and learn why you need to be optimizing your online store with better search usability.

Why You Should Optimize Your Internal Site Search

30% of visitors will use internal search and in this case study by econsultancy after investigating 21 ecommerce websites they found that the average revenue generated was highest from visitors who performed searches.

In my personal experience I have also seen search improve conversion rate.

Here you can see the conversion rate for visits without vs with search for ecommerce company Bfyne.

Wow! What a difference, right?!

So now you’ve seen the impact search can have on conversion rates and revenue, let’s discover what you’ll learn in this post:

User Experience Best Practice for Search

Now it’s not enough just to have search functionality, there are many usability best practices to consider when designing the search functionality for your website.

Search Placement and Design

Your search should be easy to find when a visitors lands on your website. Following design patterns is important when designing your shop layout, users expect to find the site search in the top right or top middle of the screen. Reebok gets this right.

Don’t hide the search in a search page or behind an icon. This may be challenging for less able users to find.

Make it obvious and visible to the visitor with a search input box and submit button. The button should say ‘Search’ or ‘Go’ and the input box should allow for at least 30 characters.

This is one of the few times in form UX design when you don’t need to label your input field, you can also consider using the placeholder as the label in this instance. Normally a very frowned upon practice.

Search Within Results

When your search returns the results, make sure you include the search input again so visitors can amend their search quickly and easily.

Search Navigation – Scope

Scoped search gives the visitor the ability to search within a specific section of your shop. It also however limits their search by reducing their chances of finding what they were originally looking for.

A better option is to offer users the option to filter searches on the results page than with a scoped search upfront.

These ‘links’ are the simplest form of filter selection. Visitors can drill down into any category or subcategory within your product hierarchy.

It’s a good idea to include the number of results in each level as seen in the Amazon screenshot above, this feeds back to visitors the amount of results each category will return.

Search Navigation – Grid vs. List View

Some stores such as Home Depot allow the user to view the products in a grid or list view, this is great for different types of users who like to search in different ways.

Autocomplete

The autocomplete or autosuggest search functionality is more appropriate than scoped search, which offers the visitor the option to search in only one category.

Autocorrect

Instead of showing your visitor the dreaded ‘no results found’ page if they misspell something, you can use autocorrect. This can instill confidence in the website as it appears to be smart to the user.

However, beware, this can often give wrong results too!

No Results Found

If you do have to serve a no results page, make sure you offer the user an alternative, in this example they show great design and user feedback to increase conversions.

Performance

For bigger stores it is important to not only think about usability but performance also.

Ask yourself or your tech team:

• How many concurrent searches are supported?
• What’s the highest number of sources possible?
• What is the size of the data repository?

Saved Searches

Saved searches are great for complex sites, especially in niche B2B industries. This can compare to save to wishlist features for consumer facing stores.

Always Be Developing Your Understanding of Your Customer

Remember, conversion optimization is not about A/B testing or increasing what percentage of people click a button. It’s about improving profit company wide.

It is easy to increase conversion rates, just reduce all your prices to $1. Increasing profits is what you are really interested in when optimizing your shop’s conversion rates.

Make sure to collect data from sources such as internal search data and learn what people need and want and learn why, and always be striving to understand your customer and their motivations and desires.

Analytics can only take you so far, you will always need to know ‘why’ you need to get the conversion rate increase you want and need for explosive success.

You Can Improve Your Conversion Rate and Profits with Site Search…

…But you have to take action.

That’s why I put together a free ebook where you can learn how to analyse your Google Analytics data for search and customer insights.

Click here to access the ebook: Increase your Conversion Rate and Ecommerce Profits with Google Analytics Insights.

The post How to Increase Online Sales with Better Search Usability appeared first on Speckyboy Design Magazine.

These other prominent companies are slowly gaining traction on the Internet. Many have taken some lessons from Google in regards to web interface design. This is even the case in modern social websites such as Twitter and Facebook. The elegance of these webpages can be captured with clean and orderly design trends.

Absolute Simplicity

I feel that Steve Jobs followed a similar appeal in the design of Apple products and software. Simplicity can be described as the lowest common denominator between functionality and extra non-essential design.

Search engines provide a very specific purpose to their users. Everyone is looking for the fastest way to receive their query results without distractions. Difficulties may arise if you offer a bit too much functionality where your visitor’s feel overwhelmed. Check out my example screencap above from the newer engine DuckDuckGo.

Their homepage design is a perfect example of how to keep out of your user’s way! Give them the tools and links they need to perform searches with the least amount of intrusion. The best part about DuckDuckGo is their online reference guide. It walks you through example queries for their additional features such as calculations, unit conversion, and site-specific searches.

Quick Reference Guides

Most Internet users are familiar with the outer-workings of Google. With the ever-growing market of search engines it can be difficult to keep up with all these features. But one of the best interface features you can utilize is a reference guide, explaining some of the basic features in your engine and what you can offer to visitors.

Blekko does this very well in a number of ways. First you can find a bit of introductory notes and FAQ in the bar underneath the search form. This explains how Blekko drops spam results and does not even index content farms, blog carnivals, and similar duplicate web publications. Additionally the developers have provided a small video which you can access in the top left corner.

It is possible to slip bylines explaining these features into your web branding. But it’s difficult to give helpful details with just a short sentence under your logo. Write up a quick “About Us” page and stick the link in your footer! You certainly don’t need the full capabilities of creating a video to explain your search engine’s purpose – oftentimes written context and graphics work better anyways.

Custom Profiles

There is a large divide between support & reject account signups in search engines. The new Google+ design features profile and settings links at the top of each page. AskJeeves and Bing are two networks which have also adopted this trend, and of course many others to follow.

The most important aspect of this design paradigm is unobtrusive access. Users are primarily looking to use your search engine strictly for online searches. Any other social features should always come secondary within the interface. If possible, stick to jQuery dropdown boxes for login and registration forms. It saves time for your visitors and makes the interface appear more snappy and responsive.

Bing does a nice job of separating the integrated user experience from search tools. Along the top bar you’ll find links related to all different categories of news. It’s also very easy to access your Hotmail and past search history, so there are a lot of options to choose from. Yet none of these deter from the core focal point which is the search field front-and-center. The alternating background photos unique to Bing attribute to a wonderful aesthetic in the overall layout design.

Keyword Suggestions

Google Autosuggest was all the hype just a few years ago. And even today their latest technology dubbed Google Instant is still exciting buzz discussed between web developers. Other search engines would be wise to notice this trend and possibly implement a similar effect in their own interfaces.

AltaVista was purchased by Yahoo! and is currently in the process of migration. Both these search engines use a similar autosuggest feature as Google, though scaled back quite a bit. It’s a great tool to provide for your users and it can always be refined through analytics data. If you can successfully gather any user registrations it’s possible to display related queries based on their past interests and search history.

Of course, his feature may not be so popular with everyone. It may cause lagging in web browsers on older computers, not to mention how annoying it can be to an unexpected audience. Plus issues with privacy may pop up over time… Keep this Ajax functionality on by default if your server can handle it – but always offer your visitors the option to turn it off!

Setup Memorable Branding

You certainly don’t need to keep your page bland just to make a great search engine. Google has recently updated their design with some additional sidebar links – but the most notable trait about their layout is the logo. The company has been consistent with branding for over a decade now and this has contributed to their ultimate success.

Keep this in mind as you check out other search engines, or sit down to design your own. Branding is similar to identification which your users will recognize all throughout the site. Dogpile offers an interesting example which extends outside of just the logo design. Their background illustration is adorable, and much more pleasant than just a plain white page. You will not need a fancy illustration to captivate your audience. But certainly spend a few hours or days toying with different brand ideas to build a layout which stands out above all others.

Conclusion

Search engines are easily the best source of new information on the web. Spiders and web bots are out crawling hundreds of millions of websites every day. Content is truly king on the Internet, but only if we have reasonable tools to sort through it all. Google has left a powerful search framework which can now be tweaked by other intelligent minds.

Hopefully these ideas can get you thinking about the popular trends in search engine design. These layouts cater to plenty of whitespace and the utmost potential in user experience. The market is far from flooded, and there is plenty of opportunity for new ideas to rise into mainstream success. Certainly let us know your thoughts or questions in the post discussion area below.

The post User Interface Design in Modern Search Engines appeared first on Speckyboy Design Magazine.