That’s why the job of sharing information is about more than just the information itself. How it is presented can be equally important.

Through WordPress plugins, there are several ways to both calculate and display various kinds of data. Here are some tools to help present information in an attractive visual format.

wpDataTables – Tables & Charts

wpDataTables enables you to import custom data and visualize it in the form of a chart. It accepts several data formats, including CSV, Excel, JSON, and XML. From there, choose from 14 types of charts to share with your visitors.

A premium version ups the ante with support for Google Sheets and front-end editing.

Interactive Geo Maps

Use Interactive Geo Maps to display geographic areas in style. Each map is responsive and interactive. You can, for example, color in specific countries (and hover states), add hyperlinks, and display tooltips.

Upgrade to pro and get features such as cluster map markers and the ability to change the default zoom level.

iList Infographic Maker

Need a quick infographic or listicle? Infographic Maker allows you to create these highly-visual assets directly within WordPress. Your creations can include all sorts of content – including various charts. It also works natively with the Gutenberg block editor.

The pro version includes the ability to add multipage listicles, along with plenty of customization options.

WP Charts & Graphs

WP Charts and Graphs features a visual building experience, complete with live previews. Chart types include bar, pie, polar, radar, among others. Adding the generated charts to your content is accomplished via a shortcode.

EmbedPress

Visual data can come from many places – and that’s where EmbedPress comes in handy. The plugin makes it easy to embed content from over 100 sources and works with the Classic Editor, Gutenberg, and Elementor.

Content from Google Docs, Wistia, and Spotify are just the beginning. It also takes local files such as PDFs and makes them viewable in your posts. Upgrade to pro to gain access to custom branding options and more.

M Chart

Add your data via a spreadsheet-like UI, and M Chart will turn into a beautiful visualization. Choose from various chart types and which library powers them (Chart.js or Highcharts).

Chart images can be previewed within WordPress and embedded via a shortcode or permalink.

Visualizer – Tables & Charts Manager for WordPress

Visualizer enables you to create 12 different chart types, including line, bar, area, column, pie, and geo charts. Data can be easily imported via a CSV file.

Charts are displayed via HTML5/SVG to allow for a sharp display on any device.

Data Tables Generator

Data Tables Generator lets you create interactive tables. They can be sorted and even have charts attached.

Tables are created within WordPress in an Excel-like interface. On the front end, users can export tables in various formats.

Responsive Mortgage Calculator

Sometimes, fancy charts and tables can hinder a user’s ability to decipher data. Responsive Mortgage Calculator takes a complicated thing (figuring out the terms of a mortgage loan) and makes it dead simple.

Users fill out a short, customizable form and get a simple text output of the results.

Calculated Fields Form

Those who need to dynamically generate calculations based on user input will love Calculated Fields Form. Various types of calculators can be created, including those based on date, pricing, weight, percentages, and good old-fashioned numbers.

It’s a Visual Medium

One of the keys to great design is ensuring that the user can access information and do so in a way that is easy for them to understand.

The interactivity that the web provides can be harnessed to do just that. Take advantage of the tools above and enable users to see your data in a whole new light.

The post 10 Powerful Plugins for Visualizing Data in WordPress appeared first on Speckyboy Design Magazine.

When you shop online, there’s very little effort involved in anything you do, including abandoning your cart. Simply close the tab, and that’s it. When you’re on the other side of the cart, however, it means that all that effort and time you spent to get them to that point is flushed down the drain.

Some Shocking Statistics

The fact is shopping cart abandonment is the most difficult roadblock for online retailers to get past. According to the digital marketing platform Listrak, an average of 81% of shopping carts are abandoned. Others report the number as 73% for desktop users, on tablet 80%, and 85% on mobile.

This article reports that 68% of all eCommerce sales were via a mobile device, which means that the percentage would be even higher if more mobile users actually went all the way to checkout.

Think about those numbers for a second. At best, it means that for almost every seven people out of ten that shop on your online store do not go through with the purchase. It’s enough to make you weep, isn’t it?

Of course, that is the average, which means there are retailers that get much better results than others do, and your goal is to be on the winning team. To do that, you should learn from the mistakes of others before you also become part of a sad statistic.

These proven tactics can help you avoid shopping cart abandonment on your eCommerce site as much as possible,

Use Familiar Trust Signals in Your Transaction Form

Remember that song “Trust In Me” from the Jungle Book, where the treacherous python Kaa tries to lure Mowgli into his coils? That is essentially what you are doing with a transaction form without familiar trust signals. You’re telling your buyers to trust you blindly with sensitive personal and financial information.

That’s fine if they do, but unfortunately for you, 61% of shoppers say they will abandon their cart because there were no security logos, and 75% will do the same because they didn’t recognize the trust signal you put on your trust form. Surrender to the inevitable; place a recognizable security logo on your transaction form.

Be Upfront About Added Costs

Your promotion or sales pitch was successful, and you get your shoppers to click on the ‘Buy Now’ button. Lo and behold, you hit them with shipping costs and other fees, and they abandon the cart. A whopping 44% will not go through with a purchase when they perceive the shipping and handling costs to be too high.

More importantly, unexpected shipping costs at checkout is the number one reason for shopping cart abandonment. Shoppers don’t like nasty surprises.

If you can’t afford free shipping, then at least be upfront about it. Let your customers know how much they should expect to pay before they add the item to the cart. If they add it to the cart anyway, they are less likely to abandon it.

Go for Free Shipping

According to a report from UPS, 38% of shoppers state that they have purchased from a site because of a shipping offer, and 39% are willing to purchase enough to qualify for free shipping.

It is obvious that going for free shipping for your eCommerce site is a great way to get people to go complete the checkout process, so it is worth considering.

If you will incur considerable costs to offer free shipping, crunch the numbers so that your customers will buy enough to make it worth your while. It works for Amazon, why not you?

Have a Retargeting Strategy

While your goal is to have 0% shopping cart abandonment, that just isn’t going to happen. There will always be people that will abandon their carts even if you do everything right.

The good news is about 72% of people that abandon their carts have some intention of coming back. Your best reaction is to retarget those customers by sending them an email reminding them that they haven’t completed their purchase and maybe offering them a freebie or other incentive.

Have a Cart Icon Visible at All Times

Sometimes, people abandon their carts because they were distracted by a burning smell in the kitchen or they had to go to a meeting.

It is important to remind them about it the next time they visit your site by having a cart icon clearly visible that displays the number of unbought items, or they’ll simply forget.

Make It Easy for Them to Buy More

Shopping navigation has to be a seamless experience to encourage people to buy more. If they click on a product, which brings them to the cart, you should have buttons on that window that allows them to “Continue Shopping” or “Proceed to Checkout.”

If you make it hard for them to get back to the product pages, you might frustrate them, leading to just the one purchase, or worse, cart abandonment.

Offer Several Payment Options

Online shopping is convenient in many ways, but it has its downside. One of them is the availability of the preferred payment method. Some people prefer PayPal or similar, others want to pay with a credit card, while still others prefer mobile payment systems like Apple Pay.

If you don’t offer the payment option they want, they will go elsewhere. Sure, it’s a hassle, but you want their money, so make an effort to give them what they want. Have as many payment options as you can manage to capture more sales.

Accommodate Guests

Registering an account to buy a $2 item is a pain, and most people simply won’t bother. Don’t force your buyers to create an account to buy. You can make account creation optional, so it is easy for them to make a purchase anonymously through a guest checkout.

Maybe later on, when they are regular customers, they won’t mind doing so, especially if you offer them an incentive to do so, such as a discount code for their next purchase.

Streamline the Checkout Process

If you are playing an online game, going through several stages to get to the Big Boss is a good idea. Not so much when you’re trying to sell something. For that, you want the checkout process to be ridiculously fast and effortless.

Reduce the number of pages your customer has to go through to get to the checkout to as few as possible. Remember that each click they have to make increases the chances of abandonment, so keep the count low.

Activate Exit Pop-up Reminders

You’ve probably seen these several times when you’re about to leave a site. A window pops up that asks you if you’re sure you want to leave the page.

On eCommerce sites, these pop-up windows usually come with some incentive for you to keep on browsing, such as a reminder that you still have items in your cart or a discount offer for concluding the purchase. It is very effective, and easy to implement

Offer Them Their Money Back

Finally, convince the fence-sitters to take the plunge by offering them a no-questions-asked money back guarantee. It reassures the customer that if they change their mind later on, or they’re not satisfied with the product or service, they don’t risk anything by giving it a try now.

It also makes them trust your site more, because you stand by your product or service.

Don’t be under any illusions; you will still have some cart abandonment on your site. However, if you follow the foregoing suggestions, you reduce the risk considerably. Any decrease in your cart abandonment is well worth the effort in the long run.

The post Proven Tactics to Avoiding Shopping Cart Abandonment appeared first on Speckyboy Design Magazine.

Thanks to modern developments, it’s easier than ever to capitalize on these design concepts to the benefit of the user. To leverage these concepts effectively, designers have to empathize with their users.

Empathy Drives UX

To create amazing UX, you definitely need a different approach. Unless you empathize with your users, it can be hard to understand what they are looking for when they land on your site. You need to be honest in guiding users while understanding their requirements.

With users in mind, look at their different perspectives and give them engaging solutions.

If you have trouble with this, step away for a moment – what would your mother feel like if she visited your site? How would that differ from your college-aged cousin? Whether you choose your mother or your cousin matters – who are you talking to with your site?

Get to know your audience a lot better by understanding their demographic. Figure out how their needs can be best addressed. Simultaneously, focus on result-driven solutions that will attract them.

Modern businesses have plenty of data at their fingertips, so it shouldn’t be too hard to figure out who your target demographic is.

That information can be used to engage customers, and customers – happy to see a brand they know is targeting them – will engage back.

To do this, brands need to make a solid first impression and establish value and reliability to consumers as quickly as possible.

If you’ve spent time getting to know them and implementing practices that makes their UX easier, they will feel it. Failing this, consumers will look elsewhere and see what competitors have to offer.

Most contemporary business strategies use data collected from their audiences and user bases to craft new tactics for generating brand interest and making connections to customers.

Data drives the modern world, and it’s critical for designers to leverage the insights gained from data to the benefit of their customers.

This aligns seamlessly with overall business goals: you analyze your data to see what customers are most interested in buying, which pieces of your content they enjoy the most, and how much time they spend engaging with you.

While companies leverage these data trends to provide better customer goods and services, these insights can also help web designers create better user experiences for their consumers online.

Intuitive Web Design

When you visit a website, you generally have a better overall experience if you can quickly and easily navigate around the site and find what you need.

When web designers imagine what their customers are going to want to see on their sites, they can devise more intuitive user experiences. Anticipate how a user will want to engage with the site and design it with functionality and usability in mind.

Intuitive design hinges on knowledge of your customers and understanding their goals and reasons for engaging with your brand. Customer profiling, or the concept behind defining your ideal customer types, is crucial to intuitive design.

Depending on the type of business you conduct, the typical customers you serve, and the overall culture and mission of a company, potential website designs can vary widely. The first step in effective, intuitive design is taking the time to understand your customers.

Design for Users, Not Search Engines

Once you know who you are targeting, you must establish value to them. This means proving your relevance in your market and showing customers what sets your brand apart from the competition.

This matters in web design, too. Countless companies use cookie-cutter templates for their websites, and stuff them full of keyword-laden, generic content to improve their search result rankings.

It’s imperative for modern web designers to avoid falling into the trap of designing for search engine bots rather than actual users.

Search engine giants like Google and Bing regularly update their search result algorithms. This practice aims to create a more level playing field for every brand vying for top search result page positions.

In turn, you must find new ways to make the search engine rules work in your brand’s favor.

In years past, getting the top spot in search result rankings depended on a web designers’ ability to make their sites easily readable for the bots that crawl through web pages to determine value.

Now, most search engines prioritize sites optimized for human browsing, penalizing sites that use exploitative tactics like keyword stuffing to reach the top spots.

Think about who will be visiting your site and what they will need to find, want to see, and which kinds of content they’ll enjoy. In many cases, this may require quite a bit of testing.

You’ll need to carefully define your customer profiles and determine where they spend their time online, which social media networks they use, how they prefer to consume content, and what types of content they tend to share.

Once you have an understanding of the type of customer you want to attract, it’s much easier to design a website built around providing that customer type with a stellar experience.

Personalization Takes Intuitive Design Deeper

While intuitive design aims to provide various general customer types with fantastic experiences, personalization takes this endeavor further and strives to generate functionality and content tailored to individual users’ preferences.

Many services like email clients, social media platforms, bill paying websites, and various eCommerce sites provide their users with a plethora of customization options. Users can tailor their experiences how they like, only seeing the content and information that most appeals to them.

Customization vs. Personalization

Customization can be enjoyable for many users, but ultimately personalization has a more profound effect.

Some of your users may not want to have to tailor their experiences themselves, or may not realize the option is available. They’ll assume the site’s apparent clumsiness is the fault of the designer, not their own, for failing to investigate how much they can customize on their own.

When you employ user data to craft personalized experiences, it conveys that you are paying attention to your users and want them to have a fantastic experience.

For example, in Android’s BBC News app, users can select their preferred news topics and access them quickly in the ‘My News’ section of the app.

Most modern consumers likely engage with highly personalized designs on a regular basis without realizing it.

As we all know that if you regularly sign into a Google account to read emails, browse the web, pay your bills, and make purchases, you probably agreed to allow Google to collect your user data as part of your end-user license agreement.

Google collects your data to determine your habits and which aspects of the web you find most appealing.

Eventually, you’ll notice the advertisements shown on various websites resonate with your interests, and may even directly relate to products and services you’ve purchased or researched in the past.

Personalized Data Creates the Best UX

Ultimately, customers must make peace with the fact that their user data is a valuable commodity to the businesses that advertise to them. By providing companies with this data, users will eventually start to have more meaningful and engaging experiences with those companies.

Data is a critical element for achieving this, but solid design matters just as much. If users aren’t enjoying the time they spend on your site, it doesn’t matter how much time and money you’ve invested in researching them.

Great user experiences in web design should be a marriage of artistry and functionality. We’re growing closer to a world in which every internet user has a unique, carefully tailored experience on the internet.

Web designers should strive to make this a reality on a smaller scale with their own websites. Intuitive and personalized design will invariably generate better.

The post How Empathy & Personalized Interfaces Can Help Improve UX appeared first on Speckyboy Design Magazine.

For web design to be considered truly effective, analytics data has to tell a story that supports the claim. The Internet is one of those rare spaces where artistic touches can be measured with hard numbers. Design elements can be tested, quantified, and improved to truly capture the collective taste of a user base.

If you ever wondered why Apple and Google are leading the way in terms of design, it’s not just because they can hire the most talented people. A big part of their success is their tenacity in testing every design variable they use. Fortunately, you don’t have to be a mega-corporation to do what both these iconic enterprises do. With simple tools, no budget, and a little effort, you can start refining your site’s look en route to better usability and conversion rates.

Measuring the Elements of Web Design

Effective design should adhere to the core principles of what makes a site good. There are four elements that need to be considered at all times when putting a site together: These are:

1. A Clear Objective

Every site needs to send a strong but implicit message to the users about what it wants to accomplish. Whether it’s a sales pitch, an opt-in offer, an invitation to consume content, or to participate in a discussion, each page has to reflect a motive that’s beneficial to both the visitor and the webmaster.

Site design should serve as a guiding force for site objectives – it should help move the audience in farther along a conversion funnel.

Metrics to Consider:

The following metrics can help you determine whether or not your site manifests a clear objective or if it’s driving away users with vague motives:

• Bounce Rate – In traditional marketing, they say that a confused mind always says no. Applying that to web design and usability, a confused visitor will always hit the “back” button on their browser. According to analytics guru Avinash Kaushik, the bounce rate is the sexiest metric in all of digital marketing. It’s simple yet it tells you so much in just one glance.

A bounce happens when a user lands on one of your pages and goes back to the referring page without clicking on anything. It suggests that the user’s intent was likely not satisfied and the user experience was largely unfulfilling. If your site has a bounce rate of 60% or higher, that may be a cause for concern. It’s an indication that your design, your messaging or both could be confusing.

The bounce rate is the percentage of visits that bounced off a site’s pages versus the total number of visits. Practically every analytics platform offers bounce rate data for an entire site and on a per-page basis. In Google Analytics, your bounce rate is one of the first things you’ll see in the dashboard.

• Conversion Rate – A conversion happens when a site goal is accomplished. This could be a visit to a page, a transaction, an opt-in to a mailing list, a phone call, etc. Your conversion rate, therefore, is the percentage of visits that went on to convert versus the total number of site visits.

Unclear objectives can make a site’s conversion rate suffer. Being clear in your messaging and having a design scheme that limits distractions can help keep your conversion rate healthy. If your site’s conversion rate is below 2%, you’ll want to review your design and see if it helps or hurts the clarity of your site’s objectives.

2. Compelling Content

Content is central to every user’s experience in a site. Whether it’s text, video, audio or images, it has to be properly laid out and formatted to attract the most engagement from your audience. When properly supported by good site design, content becomes easier to access and share. Conversely, bad design can limit content’s ability to influence users and extend your site’s reach.

Metrics to Consider:

Most analytics platforms will give you an abundance of data that will give you ideas on how well your content is performing. Page-level bounce rates, as described under the previous section, are valuable in narrowing down pages that may be suffering from design issues. Here are other metrics to look at when trying to find clues about content performance with respect to design:

• Average Time on Page – The duration of your users’ stay on your pages is an indication of their engagement level. Non-engaged traffic leaves your pages in a hurry and bad design can contribute to their eagerness to leave. If the average user spends less than two minutes on average when they visit your pages, you’ll want to investigate the matter immediately.

Average times on site/page stats are served up in Google Analytics and most other platforms. In fact, you can find this metric right on GA’s basic dashboard. For page-level time averages, you can go to GA’s “Site Content” section and generate reports for all your pages to see which ones are underperforming. From there, you might be able to spot commonalities and patterns which can help you identify design issues.

• Exit Rate – Which pages in your site are sending away the most visitors when they’re not supposed to be the final stop in a conversion funnel? This metric will let you know. Under Google Analytics’ “Site Content” report, you can sort site pages according to which ones lead users out of your site the most. Pages with abnormally high exit rates should be investigated for possible design improvements that can halt the visitor bleed.

3. Ease of Navigation

Ease of navigation pertains to how quickly a user can browse through a site to find what he or she wants to see. The strategic use of menus, search boxes, and categories will help facilitate better navigational experiences. Ideally, a user shouldn’t take more than four clicks to go from the home page to the subpage that addresses their intent. Anything beyond that usually means your navigational design is confusing or ambiguous.

Jeff Sauro of MeasuringU wrote an excellent post on what you should look out for when trying to gauge a navigation scheme’s performance. These include:

• Findability Rate/Completion Rate
• Time to Find
• Variability in Finding Time
• Initial Click
• Success Path
• Confidence
• Difficulty:
• The Most Difficult Items to Locate
• First Path Success vs. Second Path Success
• Reasons for Difficulty

You can read the definition of each in the post linked above as well as hints on how to gather the data for them.

If you’re looking for navigation analytics reports that are easier to come by but not quite as in-depth, you’ll want to check out Google Analytics’ Navigation Summary. This hidden gem can be found under Behavior>Site Content>All Pages in GA. It shows how visitors flow from one page to another so you can gain insights on which pages are promoting good navigation and which ones are acting as traffic stoppers.

The goal is ultimately to make sure that your design is facilitating visitor movement and discovery of pages that satisfy user intent. The faster and easier the navigation paths make things for your audience, the better your big conversion numbers get.

4. Visual Appeal

Visual appeal refers to how a site holistically makes an impact to the visitor. Most people agree that visual appeal is a function of a site’s layout, color scheme, textures, fonts, and use of rich media. It’s also the part that’s the most subjective out of the four principles that make up a quality site. This means it’s the area where the most testing and analysis should be done to see which scheme pleases the majority of an audience.

For the most part, there are two types of testing done to see which visual elements work best for a site’s overall design. These are:

• A/B Split Testing – in web design and marketing, A/B testing is an experiment conducted to see which of two variants gets a better response from a small section of an audience. For instance, if you’re choosing between two calls-to-action button colors, you’ll want to perform this kind of test to see which one gets more clicked.

The same could apply to elements like fonts. If you want to know which one of two fonts promotes better reading, you can run a split test to see which setup yields better engagement signals. Average times on pages and scrolldown rates are some of the stats you’ll want to check.

Google Website Optimizer is an excellent tool for A/B testing. It’s free to use and is relatively friendly even to newbie webmasters.

• Multivariate Testing – If A/B testing tells you which one among singular elements works better, multivariate testing tells you which combination of elements promotes ideal user behavior. Does that button color go well with your background and the font style? Let user behavior give you the most honest answers.

Like A/B testing, Google Website Optimizer is a great tool for this type of test. VWO and Optimizely are also great options.

Tools to Help Improve Web Design and Performance

Planning and executing modifications to your website can be a daunting task, but this shouldn’t mean that you have to start from scratch. Listed below are tools that may help you get started.

Goal Setting and Tracking

Setting goals are an integral part in making enhancements in web design, as well as tracking them to see how you are faring. Google Analytics provides a comprehensive setup in creating goals for the changes you wish to apply. With GA, you can create custom goals, set values, record your status, and share them. You can also use Goals on Track, an alternative analytics platform for goal setting and monitoring.

Site and Page Speed

The changes you will implement in your site and webpages are likely to affect the loading speed. You can supervise these two activities using Pingdom, a tool that tells you how fast your site loads, and PageSpeed, a tool Google created that helps analyze how quickly your optimized webpages turn up.

Heat Map

Heat maps on your site allow you to determine the activities visitors do, such as clicks and scrolls, when they are on your site. It tells you which places they go to most and which areas are getting the least attention. Identifying your site’s heat map will clue you in to the aspects of your web design people consume the most. The tools that will help you monitor this are Crazy Egg and Inspectlet.

Coding Cheat Sheet

Coding is probably one of the most tedious tasks when it comes to implementing web design changes. Fortunately, ample guides are available to coders such as jQuery, CSS, HTML5, and Javascript to aid them.

Concluding

Ultimately, web design is a matter of continuous evolution. It’s good to go with artistry and best practices in the initial phases, but analytics and testing have to fuel the optimization process. Having a feel for what looks good and what works is nice; knowing for sure with numbers that don’t lie is even better.

The post How to Interpret Data to Improve Your Website Design and Performance appeared first on Speckyboy Design Magazine.

One of the best ways to grow a customer base is focusing on the user experience.

The processes for creating the best UX possible are going to vary from business to business, but one of the most important tools any company can use to improve UX is data. “Big data” is a term seen quite often in the marketing world, and describes the immeasurable amount of consumer and online user data companies collect. Modern business thrives on innovation and speed, and understanding your customers is one of the best methods for staying relevant and profitable longer.

Collecting data is vital, but so is what you do with it. Every company needs to invest in data collation and analysis tools to make the most of this wealth of information. User data analytics will tell you how long users stay on your website, when they abandon a shopping cart before confirming an order, and which pages draw the most attention.

It’s vital to leverage your data analytics to create a better UX for your website, and it’s possible to do that in several different ways.

Data Helps Build Better Consumer Profiles

When you decide to pursue better UX backed by data, one of the best jumping-off points is your target customer profiles. Almost any customer-focused company is going to have customer profiles, which are essentially avatars that represent the types of customers who will be attracted to a company.

Marketing departments and analysts use these profiles to determine the best ways to reach the customers most likely to find value with the company’s products or services. Data helps them create even more detailed profiles based on customer behaviors and changing trends.

Data gathered from your ecommerce site, social media pages, and other web-based content is going to provide a broad view of how customers and leads interact with your brand. While having a big picture is certainly valuable, it’s also vital your team knows how to extract the specific patterns that help shape your customer profiles. You’ll be able to break your customers and site users down into more well-defined groups.

Once you do so, ask a few questions and see what your data has for answers:

• How do your user groups perceive a specific product or service?
  When you examine how different types of customers interact with certain areas of your site and which products and services they buy, it can help you determine how best to reach the ones that don’t seem as interested. Every product isn’t going to appeal to every potential customer, but you will probably generate much more interest if you tweak your approach to wrest the attention of your lukewarm leads.
• What does your audience find most valuable about your products?
  Product reviews and other feedback from your customers are crucial. Consumers typically don’t pull any punches when it comes to telling companies what they think of their offerings. Spikes in social media activity after a new product launch will tell you where people are talking about your new items, what they think of them, and what needs improvement.
• How do your products and services solve your customer’s problems?
  Today’s marketplace demands a laser-like focus. Customers want very specific and effective solutions to very precise problems and pain points. Your data is going to show you what people find most valuable about your brand and how they think it fits into their lives.
• Where do you need to improve?
  Is a certain section of your site seeing very little traffic, or has a recent blog post generated much more negative feedback than usual? User traffic is going to show you what is getting your users’ attention, and what generates reactions. Of course, you want to create positive reactions and for your products to be well-received, but when you fall short of doing so, your data can show you why so you don’t make the same mistake twice.

When it comes to creating more robust customer profiles and user groups, you can also go so far as to ask your users these questions. You can even take the opportunity to ask pertinent questions about your UX and generate some flash revenue by rolling it into a promotion. Offer your site’s visitors a coupon for a future purchase in exchange for taking a short survey about their experiences on your site, or conduct a similar survey on social media.

Research is one of the best ways to find out where your online presence needs the most work. Once you’ve found your pain points and those of your customers, you need a process for making significant, meaningful changes that will result in better UX.

Marrying Design and Data

A company’s web designers and data analysts may work in the same department, but they have very different approaches to site construction. Design is typically focused on visual appeal and psychology while data science relies on quantitative analytics and engineering.

A fantastic, in-depth quantitative data set is typically visually unappealing, and intuitively functional, visually attractive interfaces usually don’t effectively communicate data.

Data-centric apps need to be intuitive to navigate and visually appealing. Web pages used to be mostly static and offered very few means of interaction, but this is no longer the case. Users have much more control over their online experiences with web pages, and UX designers can play a big part in making those experiences more meaningful and engaging.

Data scientists and analysts can help their teams understand the patterns that emerge from data, and UX designers need to take that information and use it as a tool to enhance UX. When data scientists take the time to present data in more visually intuitive ways, it’s easier to leverage it as a design element.

Build Data-Driven UX

Once you find the patterns and elements of your data that affect UX, you can create a more user-focused and data-driven UX that is going to generate much more meaningful user interactions with your brand.

Qualitative data showing things like how users behave on your site and why reveals the motivations behind the quantitative data you collect. That quantitative data includes who your users are, what problems they have, when they are most active, and where they look for answers to their problems.

The data you collect will shape much more detailed customer profiles and provide a clearer picture of your users’ behaviors. Once this data is firmly in hand and you know how it affects your users, you can start creating an actionable plan to create a more engaging and finely-honed UX.

Data-driven design is a continuous process. As your organization evolves and your customer base grows, the methods you use to engage with those users are going to need to change, as well.

The post Leveraging User Data for Improved UX appeared first on Speckyboy Design Magazine.

Getting data from these disparate places can be a challenge. Each has their own API, which comes with the requisite learning curve. Not to mention all of the maintenance tasks that can waste precious time. And the more services you harvest data from, the more complicated your job becomes. Pretty soon, you are swimming in a tangled mess of code.

The question is: How can you simplify the process?

The answer is by utilizing scrapestack, of course. This real-time, scalable proxy and web scraping REST API can help you get the data you need – easily and reliably.

Sound like a lifesaver? Here’s a look at what it can do for you.

A Powerful Web Scraping Engine

Scraping is an incredibly useful way to bring data into your application. You can use it for everything from listing your tweets to parsing product reviews from Amazon or getting your current Google ranking.

scrapestack was built to handle all of your scraping requirements in one easy-to-use place. That means no more running around, trying to figure out various APIs. Instead, take advantage of these powerful features:

Automated Solutions for Technical Challenges

Harvesting data at scale can be difficult. You often run into technical issues such as IP addresses being blocked or having to deal with CAPTCHA responses. scrapestack has built-in solutions to keep content flowing smoothly.

For example, their pool of 35+ million datacenter and residential IP addresses from across the globe allow for features such as IP rotation and smart retries. You can also scrape from over 100 global locations or use random geo-targets.

As for those pesky CAPTCHAs, scrapestack can help you there as well. They’ll be taken care of automatically.

Built for High Speed and Volume

Web scraping requires a robust infrastructure to ensure that data gets where it needs to go – and quickly. With over 1 billion requests handled monthly and 99.9% average uptime, scrapestack has been built for reliability.

It’s also blazing-fast, with the ability to scrape millions of web pages in mere milliseconds. Plus, it can serve up concurrent API requests. All the performance and stability you need is baked right in.

Access to Full Page Content – Including JavaScript

With scrapestack, you’ll get the full HTML content of a web page – including JavaScript rendering. It’s everything you would find in a web browser, all within a JSON response. Just enter in a valid URL to get started.

Fast Integration

scrapestack’s API was designed to handle all of the most difficult tasks for you. And it’s extremely well documented. The result is that you can be up and running in as little as five minutes. All it takes is a few simple lines of code.

Start Using scrapestack for Free

Data harvesting doesn’t have to be so complicated. scrapestack has the infrastructure, features and flexibility you need to efficiently scrape web pages. It opens the door to an almost limitless array of content possibilities.

And they also have plans to fit all budget and data requirements. In fact, you can get started for free.

So, grab your free API key and see all of the benefits scrapestack has to offer. You can easily upgrade as your needs change.

You might just be amazed at how quickly and easily you can scrape content from anywhere.

The post Get the Data You Need in Real-Time with scrapestack appeared first on Speckyboy Design Magazine.

As users are able to interact with and edit more more parts of their applications, every piece of information (i.e. location data, timestamping, profile info, mutual connections, etc.) and content (profile images, user-generated content, business listings, etc.) must be designed with that in mind.

In this article, we dive deep into 18 different UI patterns for data and content management.

You should also have a look at Exploring Social Design Patterns For the Web and The Importance of Navigation Design Patterns.

An Overview of The Data & Content Patterns

Here’s an overview of the design patterns we’ve detailed in this article:

1. Favorites & Bookmarks
2. Stats / Dashboards
3. Contextually-Aware Content
4. Hover Controls
5. Context Menus
6. WYSIWYG
7. Autosave
8. Lightbox Photo Slideshows
9. Full-Screen Modes
10. Interactive Content Layers
11. Maps As Backgrounds
12. Group Friends & Content
13. Grids
14. Cards
15. Hidden Information
16. Empty States
17. Direct Manipulation of Content & Data
18. Draggable Objects

1. Favorites & Bookmarks

Examples: Airbnb, Medium

Problem: The user wants to save and highlight content they like.

Solution: Let users save and bookmark content for their reference. This UI pattern is more about personal organization rather than promoting content, and many web apps like Facebook, Gmail and Airbnb let users “star”, “favorite”, “save” or “bookmark” content privately, giving the user a way to come back to any place in the app that they might need later.

As opposed to liking or sharing content that tends to get lost in the timeline as the user’s activity progresses, Favorites and Bookmarks can be used to mark content that the user would need to come back to, for example neighborhoods a user is researching in Airbnb or a particular email that the user wants to mark as important. This UI pattern gives users a private way of highlighting important content as opposed to taking an action on it like sharing or liking it.

2. Stats / Dashboards

Examples: LinkedIn, Medium

Problem: The user wants to easily keep track of their activity and status.

Solution: Present important information and statistics to summarize user activity and status in terms of numbers. Twitter and Quora show users the number of followers and tweets or answers they have for an indication of activity. While some web apps only show number of likes, shares or followers, others like Medium, LinkedIn and Quora also show users more detailed statistics about their activity using Dashboards that used to be limited to business applications.

With the extensive tracking and analytics data available for user interactions, this pattern will become even more popular as users want to track their activity on the system and even analyze how they’re doing in comparison to others.

3. Contextually-Aware Content

Examples: Facebook

Problem: The user wants to interact with content in different ways based on the context without having to take additional actions.

Solution: Change the state of content based on other settings in the application or it’s sizing, positioning, or other attribute. For example, you can auto-play multimedia content as the user scrolls past. This makes the consumption of user content much smoother by eliminating the step where users stop and hit the play button.

In terms of making things easier for users, this pattern makes sense but at the same time it is worth considering the annoyance it can cause. For that reason alone, this pattern is worth considering only for sites and networks that feature a lot of multimedia user-generated content where the user is browsing with the explicit intention of consuming that media. The user would probably not browse through a Vine timeline for any other reason than to watch the videos, so it makes sense. Facebook‘s implementation is a little suspect for the same reason.

4. Hover Controls

Examples: Pocket

Problem: The user wants to have access to controls without cluttering the content view.

Solution: Hide actions and control buttons until a user hovers over the item they relate to. It’s always good to give the user complete control over content, but when an interface has a lot that can be acted upon, each button steals focus away from the content. This UI pattern hides these contextual controls until the user hovers over the content with their mouse, keeping them out of the way until needed. Pinterest puts all focus on the photos, so the “heart”, “send”
and “pin” buttons are invisible until you hover over the photo.

As discussed in Web UI Design Patterns 2014, this fits well with the modular cards UI pattern. Since the buttons appear over the image itself, there’s no confusion about which item they will act upon.

5. Context Menus

Examples: Dropbox, Medium

Problem: The user wants to have access to controls without cluttering the content view.

Solution: Put contextual action buttons in a menu that pops up when the user selects an item or right-clicks somewhere in the UI. A context menu opens up to show essential actions that can be taken in the current view or upon the selected content. This makes things faster for users. Instead of having to scroll up to a toolbar, users can simply perform their desired action in place.

The traditional context menu is triggered by a right click, and applications like Word Online, Google Drive, Evernote and Dropbox that emulate a desktop UI use them mostly for CRUD controls. Another implementation of context menus is a menu that pops up when users select text on the page. Medium puts the “notes” button and “share as a tweet” button behind this kind of context menu, and Quora puts an option to quote the text in an answer.

6. WYSIWYG

Examples: Gmail, Medium

Problem: The user wants to add formatted text and preview what their content looks like without having to worry about markup languages.

Solution: Implement a WYSIWYG text editor that lets users format their entered text without having to go into Markdown formatting or HTML code. This gives users a clear preview of how their content will look once published and can be a great way of lowering the barrier of entry for novice users. In the spirit of direct manipulation, this pattern is widely implemented in most blogging and email web apps, allowing users to edit and preview formatted multimedia content as they would in a text editor on their desktop.

7. Autosave

Examples: Gmail, Medium

Problem: The user wants to protect their data and continue working without having to remember to do so.

Solution: Prevent accidental data loss by implementing an autosave feature in your app. Gmail and Google Docs does this flawlessly, auto-saving your work every few seconds and preventing any “oh, no!” moments. The autosave pattern is an unobtrusive way of doing that without forcing the user to remember to save every few minutes.

Browser crashes, power or connection failures, or even accidentally closing the browser tab are major annoyances that can be soothed when the user is assured that their work hasn’t been lost. With cheap data storage and other UI patterns like User History, it makes sense to preemptively save user data rather than risk losing it by mistake. Of course there needs to be a clear indication that the app is autosaving, and perhaps even an additional “Save” button to provide a greater feeling of control.

8. Lightbox Photo Slideshows

Examples: Facebook, Pinterest

Problem: The user wants to browse through multimedia content.

Solution: Show multimedia content in a lightbox overlay. This modal window creates focus on the image or video content and breaks it free from the confines of the page’s design. It also puts users in a better position to simply browse through the gallery without being distracted with the surrounding “chrome” in the page.

Most implementations of this pattern also dim the background page behind the modal window and that prevents the user from losing their place in the main content view. This can come in handy particularly when paired with an infinite scroll pattern, as in Facebook and Pinterest. It’s faster than loading a new page for each image and also preserves the user’s flow when the want to back out of the multimedia gallery. For photo galleries, a modal lightbox slideshow is an essential UI pattern.

9. Full-Screen Modes

Examples: YouTube, Medium

Problem: The user wants to focus on content instead of being distracted with the UI

Solution: Design a full-screen mode that hides or minimizes the UI clutter around content. This helps users focus on what matters, rather than being distracted by the clutter of the UI. While multimedia web apps like YouTube and Vimeo let users view videos in full-screen mode, other web apps like Medium and Facebook are using the full-screen concept to eliminate unnecessary “chrome” when the user wants to perform particular actions.

For example Facebook lets users browse photo albums in a Lightbox Photo Slideshow (above), which is another pattern that we cover, but this expands to the entire screen. Medium removes all distractions when the user is writing, effectively achieving the same immersive effect as an otherwise traditional full-screen mode.

10. Interactive Content Layers

Example: Airbnb, Yelp

Problem: The user wants to know which items within a content view they can interact with in further detail.

Solution: Layer interactive items to provide an “augmented reality” approach to your content. Yelp and Airbnb provide classic examples of this pattern: Next to the search results for different locations, these sites include a map that highlights each search result with a corresponding location ‘bubble.’

When users hover over the search result, the corresponding location bubble in the map becomes highlighted so that users can immediately see where each result is located. Additionally, users can interact with the map itself, e.g. by dragging to different locations – both Airbnb and Yelp have a ‘Search when map is moved button’ that automatically shows new location bubbles in the new areas of the map.

11. Maps As Backgrounds

Examples: Airbnb, Foursquare

Problem: The user wants to spatially place content on a map to see what’s going on around them.

Solution: Provide maps as backgrounds when the user is browsing for information that’s local in nature. Web apps like Foursquare and Airbnb layer their listings onto the map view, transforming the user’s search and browsing activities into an immersive experience. This makes sense for most location-based web apps which provide users information about localized content because it helps them place it according their own location on a map in a way that’s more intuitive than just browsing a list.

12. Group Friends & Content

Examples: Google+, Google Play Music

Problem: The user wants to organize content according to their own groupings

Solution: Allow users to sort and organize friends and followers inside the app. Google+ and Facebook among others allow users to group friends and content alike. Besides allowing users to sort their friends, web apps like Google Play Music and Ebay allow for content to be categorized into playlists and collections that not only help them organize the huge amounts of user-generated content for their own convenience, but also create a way for them to share these collections with their friends and followers.

As content of all forms – including friend profiles – continues to proliferate, the ability for users to curate and organize things in a way that makes sense to them becomes more important.

13. Grids

Examples: Pocket, NYTimes

Problem: The user wants content to be organized.

Solution: Show snippets of content in a grid. Spotify and Google+ present all their content in a grid, as do Pinterest and Digg, effectively separating each item from the other while maintaining a structure. Grids are a great alternative to the simple list views and work extremely well for content that can be represented visually, making it much more enjoyable for users to scroll through lots of content.

Other sites that are content heavy, like NY Times or CNN can also benefit from a grid layout to help provide some visual structure to the various pieces of content. Some like Pocket and Groupon also allow users to toggle between the grid and list views depending on their preferences.

14. Cards

Examples: Twitter, Google+

Problem: The user wants to browse through content quickly and interact with it, without the detail views cluttering up the UI.

Solution: Present snippets of information in bite-sized cards that can be manipulated to show more information if the user wants it. Popularized by the likes of Pinterest to show large image thumbnails in a compact layout, we see “card” views now being implemented in a variety of web apps beyond video and photo galleries on the web, and often this is combined with a Grid pattern.

This pattern works best for “modules” of data that can be viewed or manipulated individually, like posts on Tumblr or Facebook. Cards are a way to allow users to browse and discover all kinds of content in a more engaging way while accommodating responsive design trends, as well as social feed patterns.

15. Hidden Information

Examples: Medium

Problem: The user wants quick access secondary information that’s not usually necessary to show.

Solution: Hide contextual information that’s not essential behind the UI but make it accessible for power users. Medium hides comments behind a number, subtly showing users that there’s additional information available.

This keeps the user’s focus on the primary content without distracting them with extra clutter in the UI. As users become familiar with the system, the visual shortcuts become easier to spot. Google+ achieves the same effect by hiding multiple tags on each post and marking it with a colored bar to indicate extra tags other than the first one that is always visible.

16. Empty States

Examples: Airbnb, Pinterest

Problem: The user needs to know why a section of the application is empty and what to do next.

Solution: Make sure your UI provides a good first impression by designing for the “blank state,” that is the condition when there is no user data. This is the natural state of your UI and the first thing a user sees. It is also the point where many users decide whether its worth it to continue, so designing the empty state is very important. This is a great place to show some examples that will help users get started or simply to show them instructions on how to proceed.

Airbnb shows a mockup of how a particular section would look like once it’s populated by the user’s content, while Pinterest takes the opportunity to guide the user through what next steps they should take; other sites like Tumblr and Medium give users hints on what the empty area is and what it should be once the user takes a certain action.

17. Direct Manipulation of Content & Data

Examples: Asana, Facebook

Problem: The user wants to interact with entered content or data in a direct and intuitive way.

Solution: Allow for content to be edited directly without having to transition between editing or deleting modes. Letting users work with data directly on the screen can make your UI more engaging by eliminating the extra layer of interaction provided by a button or context menu. Instead of selecting the item and then toggling between individual CRUD (Create, Read, Update, Delete) states, users of Asana for example can directly tap on task names to edit or delete them.

Other sites like Tumblr and Medium follow the same principle however they do include a toggle which moves the user into an editing mode. This pattern is an alternative to the WYSIWYG pattern discussed earlier but goes ahead of just giving users a preview of what their formatted content will look like, showing them also how it looks in context of the surrounding content as well.

18. Draggable Objects

Examples: Asana, Google Play Music

Problem: The user wants to sort and organize items in a way that makes sense to them in the current view without pogo-sticking between master and detailed views of content.

Solution: Content can be picked up and rearranged, or simply dragged across to perform an action. One great example of this pattern is when you’re arranging items on the homescreen, but we see this being implemented in a lot of web apps as well.

Google Play Music lets you drag and drop songs in a playlist to rearrange the order in which they’re played. Since this is a very interactive action, you should make sure the UI provides visual feedback in the form of animations or color changes to clearly indicate that something is happening. For example, items being dragged in Asana are highlighted with a shadow. Another visual cue is highlighting the drop target, that is the location where the item will fall when the user lets go.

Keep Your User Organized

Keep track of where your users are supposed to be interacting with data and content, whether they ever view those sections of the application, how often they interact with them, where they’re coming from and going to in the application (i.e. the user flow) and so on. Keep rearranging, re-sequencing, re-sizing, and tweaking those controls until you get more of the desired actions. And, of course, think deeply about how the user is actually using your mobile application when they’re viewing and engaging with the data and content – make sure you’re new and existing not missing something obvious when designing your app.

For a deeper look at how some of the hottest companies are implementing data and content management design patterns ( and 50+ other patterns), feel free to check out the e-book Web UI Design Patterns 2014. Use what you need and scrap the rest – but make sure to tailor them to solve your own problems and, most importantly, those of your users.

The post A Deep Look at Data & Content Design Patterns appeared first on Speckyboy Design Magazine.

But things are changing. Google, for one, is now requiring us to add billing information to our accounts if we want to continue to use their Maps API. And the recent revelations of the whole Facebook/Cambridge Analytica scandal have shaken the very foundation of trust when it comes to securing user data.

Of course, those aren’t the only examples of the changing landscape that one can find. But they do represent a sort of bait-and-switch of the ideals that these companies like to preach. And it leaves a sour taste in the mouth of those of us who have helped to spread this technology in our web projects.

There Was Always a Catch

Whether or not we realized it at the time, many of these “free” services we have added to websites had a cost attached to them. The companies providing the service were after user data that they could turn into profit.

That might not be an inherently bad thing, but it certainly is a wildly-successful business strategy. Instead of, for instance, making Google Analytics a straight-up pay service – Google realized that they could give a basic (but still incredibly valuable) version away to anyone who wanted to use it. This, in turn, would provide them with server farms worth of data that they could index, monetize and, perhaps most importantly, use to shape the web to match their vision.

As we’ve seen, Google in particular is wielding an incredible amount of influence these days when it comes to web technologies. Analytics has become the standard of statistical analysis – but it goes well beyond that one product.

One way or another, they’ve managed to push structured data, Accelerated Mobile Pages (AMP), and material design to the masses. Their APIs for Maps, Fonts, Translate and AdWords are virtually everywhere. Their 2008 acquisition of DoubleClick has only strengthened their ubiquitous presence on the web.

At this point in time, it might be easier to find a needle in a haystack than it would be to find a website that doesn’t make a call to Google.

So, yes, there has always been more to this bargain than just adding some cool features to your website. That may be fine, but seeing these providers now change the game on us has led to some realizations.

Meet the New Boss

The bargain designers made with big data over the years has worked pretty well for both sides. But when the providers turn around and dictate a whole new set of terms or show some very undesirable behavior, it really says something about how they view the relationship.

The feeling I get is that some of these providers are happy to have the web design community on board, but only on their terms. They’ll take the user data we willingly give them but don’t seem to be concerned with the consequences of changing things up midstream.

The fiasco with the Google Maps API is just one example (and I don’t mean to single this particular company out – but they do seem to define the issue quite well). Imagine the number of websites using this particular API. Then think about the number of products that have been built around the API. Now, think of all the time and treasure it’s going to take to adapt to the provider’s sudden change in policy.

In this case, Google absolutely knows that they have developers between a rock and hard place. Either we rip up our existing setups to use a competitor’s API (and do it within the virtual nanosecond of a window they provided) or simply shut up and do as they say.

But the truth is that any one of these big providers can do exactly the same thing at any time. Facebook, for example, did something similar with its Pages feature years ago. Remember when you could make a post to your business Page and every one of your followers would see it? These days, they want you to pay for the privilege of “boosting” that same content.

The lesson here is that anyone who has the market penetration and influence over the web can make life a living hell for web professionals as well as website owners.

We’re Not Mad…Just Disappointed

There was a time when the online world was just exploding with great innovation. There were companies that seemed to literally change the world overnight – and it was hard not to buy into what they were doing.

Personally, I fell for it hook, line and sinker. The “everything is free” hippie in me thought that this technological wave was going to promote individual freedom and bring a sense of altruism via the web. Maybe it has in some ways.

But the overwhelming feeling of the moment is that it was just another sales pitch – one that worked incredibly well. It compelled us to integrate tools that, in some cases, ended up being used against us to varying degrees.

Yes, we’ve been able to add some amazing functionality and user convenience to our websites. But the cost may have been more than we bargained for.

The post Is Big Data Selling Out Web Designers? appeared first on Speckyboy Design Magazine.

Now, this got me thinking, isn’t it the same with websites? Website users are known for their ruthlessness and impatience vis-à-vis website that does not deliver on their expectations. In as good as a few seconds, these visitors make up their minds whether a website is good or bad. That means your website design is under tremendous pressure to make an immediate impact. For those who say this is a difficult task, I say this is a near impossible task. You can never be sure, whether you can capture the attention of your website visitors in a few seconds.

But, what if you want to design for the 3 second rule, that is, make sure your website manages to make an impression in the first three seconds that users spend on the site? What if you want to put your design under pressure? And what if you want your website to make a resounding impact, no matter what?

Here’s what you can do:

1. Impact Design is Unique

Don’t come up with the tried and tested ideas that make the rounds of the World Wide Web. Take risks, and think unique. Such designs might or might not work, but if they do, you’ll have a really successful website on your hands.

This is Diesel’s page showcasing Diesel’s Fall Winter 2013 collection of Shoes, Bags & Accessories. Notice the use of emotional galleries and the innovative navigation that captures immediate attention. It’s the navigation that is the tour de force of the page, and acts as the element used to help engage the visitors and make an impression on them.

Story Pixel is a site that does this really well. It goes retro with its design theme and captures the attention of its visitors instantly! It is the kind of site that captures immediate interest; you look at it and you want to know more about it.

2. Using Illustrations to Make your Case

If you want to stand out from the crowd, you can’t beat the power of illustrations to carry the day. The problem with using illustrations is that not every web designer is a good illustrator. Creating a really effective illustration requires a herculean creative effort oozing with artistry. This is why many web designers avoid using illustrations on their websites. But, who said anything about web design being easy. So, create an impression with illustrations, the way these sites are doing:

Red Ape is an Illustration, Animation and Creative Design Company and its Home Page leaves no room for doubt as to its purpose. So, you got an illustration, a storyboard, 3D graphics, and the works on the Home Page. Don’t say it isn’t impressive.

The landing page of Stereo Creative makes use of banners to showcase a collection of abstract illustrations and the work they have done. This is again something that makes it’s point brilliantly.

3. Using Emotions to Make an Impact

Emotive appeal helps build an immediate impact. It’s something that persuades visitors to react in a certain way, immediately. Most successful websites on the World Wide Web have emotions woven into them. These emotions are a result of the visuals, the text on the pages or a combination of the two.

There are lots of things happening on Gopher Gridiron. You look at the visuals and you have a sense of drama that characterizes a hard fought game of American Football. Immediate attention is guaranteed.

Charleston Family Fun is what fun family holidays are all about and each and every pixel of the design screams ‘fun’. The emotions are so brilliantly implemented through the design that you get right into the holiday mood, when you look at the website’s design. It’s a perfect example of how emotive appeal can make an instant connect.

4. Go Back into the Past to Make an Impact in the Present

I have personally found making use of nostalgia to create impressive websites, work every single time. The use of nostalgia in websites gives out a feeling of being loved, protected and a plethora of other feelings that make the necessary impact on the website visitors. But the use of nostalgia must have some purpose in mind and align itself with the website’s message. Something that Milk Every Moment does brilliantly:

The site’s purpose is to promote drinking milk, by stirring up the fondest memories of our childhood. You open the site and you’re greeted with retro design elements with a video banner playing some nostalgic videos. Even if you aren’t a milk lover or are lactose intolerant, you’ll still end up loving the site.

5. Say the Right Things

Content has always been King and when it comes to creating a decisive impact with the website design, it is more than just king, it’s actually everything.

Moz is a company that helps businesses market themselves better on the internet. It makes great use of content to make its point and relies very little on visuals.

Accenture is another services specific site that uses content brilliantly to capture the attention of visitors. The best content is one that answers all the right questions, and that’s illustrated by this site perfectly. It also showcases the credibility and authority of the business that the website represents.

If you’re not able to zero in on the right visuals for your website, it’s better to focus on its content instead; this will help you grab the necessary eyeballs.

End Words

As I mentioned before, making sure your website makes a great first impression on its website visitors isn’t easy. But web designers are doing it, and the examples in this article are proof that they are doing it well. So, there is no real reason why you cannot do it as well. All it requires is a bit of effort in the right direction, and stretching the limits of your creative instincts and technical proficiency. If you do this, you are bound to succeed. All the best!

The post Designing for the 3 Second Rule appeared first on Speckyboy Design Magazine.

Image Source: Which UX Methods.

As discussed in The Guide to Usability Testing, there are a wide range of user research options ranging from resource-intensive usability lab studies to simple email surveys. Our screen-recorded user tests provided us both attitudinal and behavioral insights since we could hear what users thought (attitudinal) as well as see what they did on screen (behavioral). We’ll explain why qualitative research matters, explain our takeaways, and show how we wove them into the new design.

The Right Approach to Qualitative Analysis

When it comes to qualitative analysis, it’s not enough to just ask users to recount their experiences. As Jakob Nielsen, Partner at the Nielsen Norman Group, points out, the first rule of usability is to never listen only to what users say. The wrong approach would be to create a few designs and then ask users which one they like the most — users haven’t tried the design, so they can only comment on surface features.

The right approach to qualitative analysis, and the one that we are champions of, is to examine user behavior and then ask them the Single Ease Question. This process helps to eliminate cognitive biases and gets to the bottom line of UX analysis: how did the users accomplish their tasks, and how easy or difficult was it? Our screen recording also captured audio (and we encouraged people to think out loud), because otherwise it’s easy to miss why certain behavior occurred. The “why”, after all, is the most important part of user analysis.

Analyzing Qualitative Results

Distinct patterns emerged in our observations of user interactions with Yelp (we explain these patterns in greater detail in User Testing & Design). Overall, we learned that the Search bar was one of the most essential features, and it was easy to use if the users knew exactly what they were looking for (if they knew the name of a business, for example). Other features weren’t as intuitive, though, as you’ll see in our discussion below.

1. The Search function was the primary starting point for any task

All five test participants relied heavily on the Search bar, even for tasks that could easily be completed by browsing through the Categories instead (such as finding an interesting restaurant or bar without being given any specific parameters).

In fact, four out of the five participants went straight to the search bar to find a restaurant. Only one user started browsing through the categories, and she quickly found them “overwhelming” and ended up resorting to the Search bar instead.

The Search bar was the most intuitive feature for users.

Yelp’s categories were “overwhelming” and less helpful than the Search bar.

Note: in our test instructions, we asked users to “find” a restaurant, not to “search for” a restaurant, because we wanted to observe how they would naturally go about this task without biasing them toward a specific function.

Interestingly, when the users were given specific parameters (like the budget, ambiance, and type of restaurant, or the name of an individual business) they almost universally ignored everything on the homepage except for the Search bar. Knowing this, we realized it would be very important to make the Search bar the most prominent feature on the redesigned site.

2. Events were not very noticeable

In one task, we asked the two users without Yelp accounts to find an interesting event in their area this weekend. We wanted to learn whether they would use the Events tab at the top of the page.

The Events tab is easy to miss.

Surprisingly enough, nobody used the Events tab. When asked to find an interesting event in their area this weekend, one test participant used the Search bar while the other navigated through the Arts & Entertainment category in the Best of Yelp section.

We learned that if we wanted users to actually interact with the Events feature on Yelp, we would need to make it easier to find.

3. Bookmarking was frustrating, and no one used Lists

We were curious to see how users would choose to save locations for later reference. In Yelp, there are two ways to do this: users with existing accounts can either bookmark a location or create a list. We simply asked Group 1 (three users with Yelp accounts) to “save” a number of locations to look into later so that our wording wouldn’t mention any features that could bias their actions.

Of the three users who were given this task:

• One saved the businesses using Bookmarks but complained that the process took a long time.
• One started to save businesses using Bookmarks but gave up because it took too long.
• One was not able to figure out how to save businesses and gave up on the task.

The two users who used Bookmarks both remarked that it would be nice to be able to bookmark a business from the search results page, rather than having to go to each business’s page separately, as you can see in the video below.

Click the “Play” button to hear user thoughts on the Bookmarks feature.

It would be nice to allow users to have an easier and more intuitive method of saving businesses to return to later, so we prioritized bookmarking in our redesign.

4. Searching for a specific venue was extremely fast and easy

All five users were given a task to find a specific business to find out if it was open at a certain time. They all successfully completed this task, and rated the task as “Very easy”. As mentioned previously, all five used the search bar to accomplish this task.

Since searching for a specific business is working so well, we decided not to change anything about the way Yelp has designed this functionality.

5. Users relied on photos to determine the ambiance of a restaurant

When asked to find a restaurant with a certain ambiance, none of the five users attempted to use the search bar. Instead, three users looked through photos of the restaurant on Yelp, one visited the restaurant’s website, and the last stated that the price symbols ($,$$,$$$,$$$$) was enough to indicate if the restaurant had the right ambiance.

Click the “Play” button to hear user thoughts on determining restaurant ambiance.

This brought up two insights:

1. Photos are an essential part of the Yelp experience, and they are critical for users to choose a business.
2. Ambiance doesn’t play much of a role in Yelp’s search or filtering functions. We decided that, in the redesign, we could either include a filter for types of ambiances, or we could make it more expressly clear that using the Search bar will search for keywords in reviews as well as the name and type of business, so Search could be used to identify ambiance, menu items, and more.

6. Users relied on filters, but they could be improved

In the task where five users were asked to find a restaurant for a group of 15, three of the five participants used the “good for groups” filter, while one used the “make a reservation” feature and scrolled down until she found a restaurant that could seat the group.

At another point, one user attempted to select two categories to filter his results, but one of his choices disappeared when he clicked the other. (See the video below.)

Click the “Play” button to hear user thoughts on using Filters.

While filters are important, we learned that they could be greatly improved. This finding inspired us to run a card sort on all of Yelp’s current filter options to determine which ones are actually useful to users.

7. The price categories weren’t clear

When users were searching for the restaurant with specific parameters, one of the requirements was to find a restaurant within a $20/person budget. Two of the five users were confused by whether their $20 restaurant budget would fall into the $, $$, or $$$ category. One user stated that she didn’t know what the symbols meant, and another clicked the wrong category. The other three correctly chose the $$ category.

The definition of the symbols does not display when users select filters; it only displays when the user navigates to a particular restaurant’s page. Since price expectations are highly subjective, it was unclear to users which category they should choose.

With this insight, we decided that in our redesign, we would need to be more explicit about what each dollar symbol indicated.

Design Based on Usability Testing

Once it was time to design, we followed an approach based on the last few steps of the Google Ventures design process. UXPin CEO Marcin Treder first started with many informal sketches before a team decision helped cull it down to the top 2-3 sketches. To prevent design by committee, Marcin had the final say regarding which sketches would progress into wireframing and prototyping with UXPin.

After moving into UXPin, we created a wireframe to incorporate most of the design changes, then added some interactions and animations to turn it into a low-fidelity prototype. Once the animations were smoothed out, we added detail in UXPin for a high-fidelity prototype. Screenshots from the process are shown below.

1. Sketches

Homepage:

Search Results:

2. Low Fidelity Wireframes

Homepage:

Image Source: Yelp Redesign.

Search Results:

Image Source: Yelp Redesign.

3. Low Fidelity Prototype (click to interact)

To click through a few interactions and browse the entire design, you can play around with this in the Live Preview.

Image Source: Low Fidelity Yelp Prototype.

4. High Fidelity Prototype

To click through a few interactions and browse the entire design, you can play around with the high fidelity prototype in the Live Preview.

Homepage (click to interact):

Image Source: High-Fidelity Prototype.

Search Results (click to interact):

Image Source: High-Fidelity Prototype.

Watch, Listen, Learn

What users say and what users do should serve as checks and balances during user testing. While you don’t need to necessarily be present during the test, an audiovisual recording is mandatory, otherwise you might miss out on the context of actions. When you combine qualitative analysis with quantitative analysis , you’ll get an even clearer idea of why and how to fix a problem, as well as how many usability problems your design needs to solve.

To learn more about how to incorporate cost-efficient usability testing into your designs, check out the free e-book User Testing & Design. You’ll find 109 pages of screenshots and tips, using the Yelp redesign exercise as an example.

The post Turning Qualitative User Data Into Actionable Design appeared first on Speckyboy Design Magazine.