Searching for the best UX: search forms & boxes in web design - envato.com coupon

Websites that center around a search form usually place it front & center. Google and eBay are two fantastic examples.

But many sites like blogs or social networks have a search feature that doesn’t take as much priority. These search fields still need to be usable but they don’t need to draw as much attention. Finding that balance is key and in this post I’ll examine some UX trends for designing great search forms.

The obvious answer of placing a search field right in plain view can work well. But when you’re trying to save on screen space you’ll have to look into other techniques.

Modal Search Windows

The modal window has become ubiquitous for opt-in fields and related messages to grab the visitor’s attention. But modals can also be used to display a large search field front & center without keeping it fixed in view.

A search modal window may take over the entire page or just use a small window. The size doesn’t matter as much as the interface and the form design.

Take a look at the Barcelona theme as an example. It has a full search bar appear on top of the page with a darkened background.

This only appears when the user clicks the small magnifying glass icon located in the navigation bar. It’ll automatically display the search field no matter where you are on the page.

It’s interesting to note that the Barcelona theme hides this magnifying glass icon in the responsive layout. So it’s not accessible for mobile users which can be a huge downside.

A different example is the more recent Click Mag theme which also has a magnifying glass icon in the navbar.

This modal window takes over the entire screen and uses a transparent background with a white hue. It draws all attention to the search field which is generally the best approach.

I also like how Click Mag’s responsive theme keeps the magnifying glass in view at all times. This way mobile users always have access to the search feature.

If you’re looking for a live example you should check out the Comedy Central website and look in the top-right corner. You’ll see a magnifying glass button which opens a fullscreen modal search.

This modal does not have a transparent background so it does fully overtake the content. It also provides more content on the page beyond a simple search field.

With this approach you can guide visitors deeper into the site with trending videos and breaking news. This also gives the search form its own page full of unique content.

If you go the modal window route just make sure it can work for all visitors. This is a much newer trend and it can work well if designed properly.

Inline Search Form

Instead of opening a new modal window for the search you might prefer to drop the field into the page. This can use a link that toggles the field into view rather than toggling a modal window.

I find this to be much more dynamic and flexible when it comes to the user experience. You can have inline search fields that span the entire width of the page, or some that take over blocks of content.

For example check out Cartoon Brew and click the top-right magnifying glass icon. A small search form animates out to the side of the icon.

This search field could be fixed and visible at all times. But by hiding it off-screen the designer can save space and offer a much more fluid experience.

The responsive menu also displays the search field right at the top so mobile users have direct access to the search input. This is an excellent strategy that really places usability first.

Searching on the Avada theme is another nice example where the search field drops down beneath the menu.

Unfortunately this theme does not include the search field in the responsive menu. In my opinion it should be a staple and accessible to anyone, but it still works with this design and it saves space in the actual navigation.

A better style would be a combination of the Avada dropdown mixed with something like HealthMag which displays the search field on top of the icon.

In the HealthMag example you’ll also find a search box embedded into the sidebar. Some designers may call this redundant but I think it adds an extra layer of security.

Great usability means nothing if it only works for half of your audience. And with more people browsing on mobile there’s good reason to design a search form for that audience too.

Autosuggest Results

Another common design trend is the autosuggest dropdown list. This idea originates back to Google and has since leaked into many networks like Pinterest and Facebook.

But even with lesser-known websites it can still be useful to suggest search terms and/or related pages. I prefer to add autosuggested pages because they can save time and introduce visitors to pages they never would’ve found otherwise.

The search field on Cartoon Network’s site is a stupendous example. When you start typing the autosuggest window appears with icons and details for each page.

Since Cartoon Network primarily targets a younger audience the icons provide a visual cue for each page. This dramatically improves usability and makes browsing search results a lot more fun.

A cleaner and more professional example can be found on Wikipedia.

If you have hundreds of pages that you want to push out then autosuggest is the perfect solution. It can be a tricky feature to add but if you’re using WordPress there are solutions online if you know where to look.

Clear Form Design

This may seem like an obvious statement but a well-designed search form isn’t always clear.

You want to design for clarity to make it obvious what the form does and how a user should use it.

Modern designs use the magnifying glass icon because it’s so ubiquitous that most users inherently understand what it means. But some sites use large buttons with the text “search”.

I like both styles as long as the search field works and is easy to understand. For example the HappyChild theme uses a magnifying glass icon for the search button.

The form’s placeholder text also reads “search…” so it should be more than obvious to anyone. But you do need to make sure the icon is visible and easy to see at a glance.

I’d argue that 99% of websites can get by with the magnifying glass icon representing the search button.

Just make sure you don’t remove the button and assume that users know to press “enter”. Not everyone is a master of keyboard shortcuts so a usable design must have a button somewhere on the form.

You could get more complicated like with EmallShop and include radio buttons or a dropdown menu to limit searches to particular categories.

Although these extra features don’t matter as much as the basics.

If your search field has a noticeable button and has related placeholder text like “search…” or “enter keywords” then your design should be intuitive enough for every user.

Looking Ahead

Search trends haven’t changed all that much but they have become more dynamic in recent years. I can’t say where we’ll be in another 5 years but I do believe the biggest challenge is providing a great experience on mobile.

Double check all your search fields and make sure they work on all devices. If your search form is legible and easy to interact with then you’ve nailed two key points of usability. Any other design trends you follow can add to the aesthetic(modals) or make the search field more intuitive(like autosuggest).

 

_{Featured image: Kali_ua}

The post Searching for the best UX: search forms & boxes in web design appeared first on Envato.

envato.com coupon from Envato http://ift.tt/2k7o5nQ
envato.com coupon