Saturday, July 29, 2017

Comics of the Week #400

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

No, that’s not it

Email workout

 

No rest

Can you relate to these situations? Please share your funny stories and comments below…


1300+ Versatile Photoshop Brushes – only $14!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot http://ift.tt/2tLVdGg




from WordPress http://ift.tt/2eVvusp

Friday, July 28, 2017

3 Secrets of Successful AR Design

Over the past several years, augmented reality (AR) technology has established a home in entertainment, marketing, education and many other industries. The use of AR apps in the enterprise will grow to $2.4 billion in 2019. On the flip side, augmented reality also brings a lot of challenges for designers. Today most experienced designers have got skills in designing web and mobile apps, but these skills aren’t always applicable for immersive AR experiences.

This article will look at how AR is affecting UX, and how UX designers can rise to the challenge of designing engaging augmented user interfaces.

What is AR?

Augmented Reality refers to technology that uses real-time inputs to create an output that combines both real-world data and some programmed elements. AR adds a programmed layer over actual reality to create a third, dynamic level of augmented experience. With AR apps, instead of just seeing information, users interact with it and receive live feedback on the action they have performed.

AR apps are already thriving in the Android and iOS ecosystems right on our smartphones and tablets. Examples of AR that the majority of users have at least heard of, if not used, are things like:

Pokémon Go: Players can collect game characters that can be uncovered by moving in the real world.

SnapChat lenses: SnapChat uses facial-recognition technology to enable users to enhance images with computer-generated effects.

Snapchat’s lenses feature

Microsoft HoloLens: Using tools like Microsoft’s HoloLens it’s possible to see and interact with complex models such as 3D model of a human heart.


 Microsoft HoloLens

How To Design for AR

The field of designing AR user experiences is still in its infancy, and since there are no established UX best practices for it yet, I’d like to share my own personal approach to UX in AR apps…

1. AR Use-Case Needs to be Evaluated

The concept of “measure twice, cut once” is especially important in building AR apps. Before diving in, it’s important to have a clear answer on the question “What do I want to achieve with this AR app?” Your ultimate goal is to ensure that the AR experience is right for the project. Keep in mind the following:

  • AR experiences should be tied to clear business and user objectives. You shouldn’t create an AR app just because it’s trendy—that’s almost a sure way to create a poor UX. Rather, the desired functionality needs to be evaluated to fit with the experience that the AR display medium can offer.
  • As always, good user experience only comes from close attention to users’ needs.  This means that if you’re going to design an AR experience, you should invest heavily in user research. Spend some time really getting feedback from your target audience, get to know how they do something in the real world without any kind of device, and how AR can help them do it better.

2. Consider the Environment in Which the Product Will be Used

Since you will integrate an AR design solution into the users’ environment, you want it to feel as natural as possible. The environment significantly affects AR design:

  • In a private environment (e.g. home or  work) the UX designer can count on long user sessions and a complex interaction model. The whole body can be involved in the interaction, and specific devices, such as a head mounted display, can be used for manipulation.
  • In public environments, usually outdoors, it’s important to focus on short user sessions. Because regardless of how much people might enjoy the AR experience, they won’t want to walk around with their hands up holding a device for an extended period of time.

Thus, when designing an AR app, you first need to research the environmental conditions in which the app will be used and how it will affect the user:

  • Identify interaction scenarios upfront, even before specifying technical requirements for the project.
  • Collect all the details of the physical environment to be augmented. The more environmental conditions you identify before building a product, the better.

User testing should be a critical step in the review process. When the first working prototype of your AR app is ready, you should run comprehensive user tests on product use in real conditions. Your ultimate goal here is to make interaction with the product comfortable for users.

3. Make the Interaction with AR Simple

AR in an app should be a layer of added value that reduces the time needed to complete simple tasks. Keep in mind that with each product people are seeking out experiences, not technologies, and they won’t like a technology that isn’t friendly to use. Thus, when designing your AR solution I recommend the following approach:

  • go to the environment where the user will perform the task;
  • think through each step that your users will go through in order to accomplish the task;
  • record each of those steps.

This information will help you conduct a task analysis. The analysis will help you make things more natural for the users. Consider the Google Translate app in the example below. The app uses the phone’s built-in camera to translates the captured text into another language. This example perfectly illustrates the value that AR technology can provide.

AR experiences should be designed to require as little physical input from users as possible. When users are looking through the device screen at an augmented picture, it’s going to be hard for them to input data at the same time.

 

Easily Build Your Own Website with Dragify – only $24!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot http://ift.tt/2ve4ewa




from WordPress http://ift.tt/2tPdPcs

Thursday, July 27, 2017

5 Ways to Make Your Website Stand Out

Everyone involved in building a website wants it to stand out from other websites. Clients want to stand out from the competition and leave a favorable impression on potential customers; designers strive for originality and to compete with other designers; back-end developers want a success story in their portfolios and an original or different-looking site can help with that.

And we want it bad. There’s a cottage industry of people writing articles designed to help us design more original-feeling sites. I’ve even seen articles about “Trends to Make Your Site Stand Out”, and it feels like at least one of those words is sorely misused.

Goodness knows I’ve obsessed over it in the past. I know the feeling that your work just isn’t good enough because man, the last couple of sites you made really felt the same. Where’s the inspiration? Where’s the creativity? Well, originality isn’t the be-all and end-all. If a site that feels the same as many others gets the results you want, that’s not a bad thing.

But you can create sites that stand out. Consistently producing original—or at least original-feeling—work doesn’t happen by inspiration or by luck. It happens with planning, and a lot of effort. Here are five approaches you can use to make your work stand out, with their pros and cons. I’m not going to include a ton of examples, because the idea is to not copy other sites.

1. Layout and Structure

Okay, this is perhaps one of the more obvious ways to differentiate your site from the rest. It’s also the most difficult. On the pro side, using a fancy layout or site structure that no one has ever seen before is instantly memorable. It can also be a lot of fun. After creating your fifty-second three-column site, mixing up the layout provides a challenge for your visual design skills and your front-end dev skills that can’t be beat.

The cons: There are only so many ways that information can be organized before you start to lose accessibility and usability points. The development time is often increased, as you end up working to solve problems few have encountered before. The really crazy layouts often depend heavily on JavaScript. Layout should ideally not depend on JavaScript.

2. Branding

Branding is the other really obvious way to make your site stand out. And it’s easy. Just find out what your client’s branding guidelines are, and stick to them. Embrace them. Make your client sick of seeing their own logo and colors. Then maybe tone it down a little, and you’re good to go.

The cons: This approach only works if your client has highly original branding. If their brand style guide consists of Helvetica and not much else, you are at a severe disadvantage.

3. Graphics and Imagery

If the branding isn’t enough, you can use graphics and/or photos on your site to establish a distinct visual style. Sites with big images do tend to convert more, after all. People are visual creatures, so visual stimuli can make it easier for users to connect with you on an emotional level. Plus, the stylistic options are just about endless, which makes it easier to create an original-feeling design.

The cons: Graphics and photos that look original are expensive, because they pretty much have to be custom made. Using stock images will likely kill the distinction that you’re going for.

4. Text and Content

This is probably the most important—and sometimes the most difficult—way you can set yourself apart. What is said on any site can and should be a reflection of the client’s personality and/or company culture, while still being clear. You can use copy, microcopy, and even things like video to communicate personality in a way that sets you apart.

The cons: Ok, first you have to get any text at all from your client. Heh. And then you have to get copy that actually feels like a human wrote it. Most marketing copy has a very specific tone that seems to transcend borders and cultures. Getting the reader to see past the obvious desire to sell them things is the trick, and it’s a tough one.

I mentioned microcopy before, but it really makes a difference. Users expect sales copy when reading up on a product or service. But if the rest of your site, especially the interactive bits like forms, treat the user as human rather than as a mere customer, this will make your site stand out in big ways.

5. Animation

Animation is a huge deal right now, and for good reason. When done right, it can take a pretty good experience and make it unforgettable. While I’m glad splash screens went the way of the dodo, I can still remember some of the animated web experiences I saw during the ’90s. Did I say before that humans were visual creatures? Well make those pictures start moving, and you can start a new industry in California.

The cons: I saved animation for last because it’s very effective, but also very hard to get right. I mean, everyone and their dog is animating their sites now. That means that if you want your animation to stand out from everyone else’s animation, you’ll have to step up your game. Bouncing buttons ain’t gonna cut it. Animation that’s badly done can also cause usability problems, performance problems, etc.

Conclusion

Look around on the internet and you’ll notice that it’s very rare for any of these approaches to be used alone. It’s fairly common for people to even try to combine all five. As usual, however, it’s best not to split your focus too much.

Ask yourself where your strengths lie. Are you a good writer and illustrator? Focus on text and imagery. Are you a great brand designer and animator? Make that logo blow people’s minds. And most of all, remember to have fun while you’re making something new.

LAST DAY: Gigantic Bundle of 1000+ Logos, Elements, Mockups, Textures – only $19!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot http://ift.tt/2vaJ95N




from WordPress http://ift.tt/2uAcvZA

Wednesday, July 26, 2017

How to Drive New Feature Adoption with Kissmetrics

When you launch a new feature, you can put adoption (or lack thereof) in four categories:

  • Users that haven’t heard of the new feature
  • Users that have heard of the new feature but haven’t used it
  • Users that have heard of the new feature, used it once or a few times and stopped
  • Users that have heard of the new feature, used it once and are continually using it

Each group of users need to be treated differently. And each group can be learned from to drive more product adoption and help direct future product releases.

Here’s how to do it in Kissmetrics.

Users That Haven’t Heard of The New Feature

You can find who fits into this group by using a simple yes/no survey from a tool like Qualaroo. You can place it on every page of your app and have it appear until the user provides a response:

populations qualaroo survey

For the people that select Yes, you can have a simple messaging saying Thank You. But for those that select No, you can prompt them to check out your new feature.

feature announcement on qualaroo

That’s one way to make sure newcomers are at least aware of your new feature and what it does.

But as the saying goes, you can bring a horse to water but you can’t make him drink it.

In this case, your user is the horse and the water is….ok, bad analogy. But you get the point. Awareness isn’t activation. Activation isn’t engagement.

So, that’s method #1. The other method involves using a little analytics from Kissmetrics. Just pull up a People Search and find the people that are current users, have received the email announcing the feature, but have not used it. While some of these people may have read the subject line, they aren’t too familiar with your new feature because they didn’t open the email and haven’t used the feature in the app.

Run that search, and you’ll get a list that looks something like this (just with different email addresses):

list of people in people search

So it looks like there’s a few people that aren’t too familiar with this feature. For them, we’ll create an email message that we’ll send to them. We won’t have to leave Kissmetrics or export anything to do this. It’s all in the same solution.

new feature announcement through kissmetrics campaigns

We’ll send them an email about this new feature, and will create follow up emails for people that still haven’t used the feature. The goal here is to get users who haven’t heard of the feature to start using it and getting value out of it.

Users That Have Heard of Feature But Haven’t Used It

Now we have the group of users that are at least aware of the feature, but haven’t tried it yet. These users may have opened the email announcing the new feature, visited the feature page, asked a member of your support team a question about it, or click an in-app notification.

You can find any of these people with a simple People Search. Just plugin your conditions and date range, and run a search.

We’ll create a Campaign message for them. Since they’re already aware of the feature, this won’t need be a replica of the email announcement. Instead, we’ll try to entice them to try the feature using the power of social proof. We’ll use customer testimonials that we’ve collected.

jenni testimonial email campaign

This email will be sent to users who are aware of the feature, but have not used it yet. If they receive this email, open it, and still don’t use the feature, we can create another email with a different twist – maybe embed our product video into the email.

And we’ll do all the tracking in Kissmetrics. We’ll keep a watchful eye of the product engagement with Populations:

Now let’s go on to the next group of users.

Users That Have Heard of Feature, Used it Once or Twice, and Stopped

This group of users has heard of the feature, is aware of what it does, and has even tried it a few times before eventually not returning to it.

This group of users needs to be treated a bit differently than the previous two. We aren’t as interested as getting them to try the product as we are gathering feedback to see why they dropped off. The reasons will vary:

  • I didn’t get value out of it
  • I’ve been too busy to get to using it
  • I’m about to cancel

To find this group of people, we’ll run a People Search for users that have used the feature no more than 3 times, have not used in the past 2 weeks, but have logged in in the past 2 weeks. This is to make sure we’re finding the active users that are logging in but are not using our new feature.

If there is a group of people in this search, we’ll create a Campaign and write our message. There are a couple ways we can go – we can either ask them for feedback on the feature or try to get them to use it again. Let’s first start with a feedback email.

campaigns feedback collection

We’ll send this email to our users that fit the criteria mentioned above. The main objective of this interaction should be to gather feedback to see which problems they run into (if any) and discover why they aren’t using the feature anymore, despite still signing in and using the product.

Users That Are Using the Feature Often (5+ times a week)

These can be known as our power users. They’ve not only heard of the feature, they’re actively using it. These users can be a source of feedback, and a few of them may even be willing to provide a testimonial that you can use in public. Some of them may even go a step further and write a positive review on a site like G2 Crowd or Capterra.

The search for these users is pretty straightforward. You’ll find users that have used the feature at least x amount of times in the last week. A good measure for most features is at least 5 – this way you’ll find people that have used the feature 5 or more times during the last 7 days.

getting feature feedback from power users

We can also attempt to learn more from these power users and funnel those insights into future product development and marketing materials. For instance, if we find that the users that get the most use out of our tool are growth teams, but we’ve been targeting marketing teams, we’ll know we should consider modifying our marketing messaging to target growth hackers.

Unique Emails to Each User Group

Throughout this post, we’ve gone through four user groups and emails you can send to each group.

It’s important to keep in mind that these are separate emails going to different groups of users. We aren’t sending all these emails to the same customer group. For example, we won’t be sending the same email to power users as we do to users who have never heard of the feature. Each group gets its own email as they are treated differently and what we are looking to get out of them differs.

Conclusion

Building something people want is hard. At least, building something a lot of people want is hard.

Then, getting them to keep using it day after day, year after year is almost impossible without near-perfect, flawless product iteration.

Customer development can help. So can co-creation.

And good ol’ customer feedback through conversations and emails can also do the trick. Especially when it’s targeted towards a specific user group with differing product-adoption levels. Kissmetrics can help you identify these user groups, and you’ll even be able to send these behaviorally-targeted emails within Kissmetrics. Click the play button to learn more.

http://ift.tt/1SsY8tZ

Questions? Ask them in the comments.

About the Author: Zach Bulygo (Twitter) is the Blog Manager for Kissmetrics.

from The Kissmetrics Marketing Blog http://ift.tt/2tZugxQ




from WordPress http://ift.tt/2uX4gYG

11 Pricing Table Designs That Really Sell

Every SaaS product and subscription website needs a great pricing table. It’s the easiest way to share information with potential buyers and explain the differences in your plans.

But with so many websites running pricing tables they can get a little stale.

These designs are some of the best I’ve found with fresh trends, color schemes, and a clean experience that encourages user interaction. If you’re designing a custom pricing table page then these designs are sure to give you some cool ideas.

1. Algolia

The hosted search SaaS product Algolia has a clean pricing page with a material design style and colorful icon designs.

Each column uses different a color in the header to stand out and create contrast. The tables are pretty simple so the information is easy to consume at a glance.

Typically you find signup buttons at the bottom of each column but Algolia uses one large CTA underneath the table. This keeps it cleaner and reduces the need to duplicate buttons over multiple columns.

2. Slack

The Slack pricing page is also pretty unique with a left-hand feature column for labels. You can find this in many other pricing tables but not always with such a smooth design.

Each row uses check marks to show which features are covered in each plan. These rows are super spacious and the headers even use a light grey background to build contrast for easy skimming.

Not to mention the fonts they’re using look fantastic and really make the content easy to consume.

3. Symu

I’ve never seen greyed-out features in a pricing table but Symu makes this work. Each column has a small progress bar placed just above the features list showing how much you get with each plan.

This grabs your attention fast and the greyed-out features also catch your eye.

My problem with the light gray font is that it’s tough to read. Potential buyers may not know what they’re missing out on with the free plan, so they’d have to read the “Team” column to clearly see all the features in one list.

But the visual removal of these features with a lighter font implies scarcity, a great tool for sales and marketing.

4. Digital Ocean

The VPS service Digital Ocean has their own rotating pricing table because they offer so many different plans.

Most new visitors will start with cheaper plans so it makes sense to keep these right in view. But you can click, or swipe, through the list to browse higher-priced plans with more power and storage space.

Another feature I like is the “create account” button which only appears for the selected plan. This draws your attention to that one plan so you can compare it against its neighbors and see whatever works best for you.

5. UsabilityHub

The pricing table on UsabilityHub has a nifty design with hover details for each feature. Different accounts let you run different tests but newer users may not understand the value of these tests.

If you hover the information icon beside each feature you’ll get more info about what it means and why it’s useful. Some are just features like A/B testing while others are account settings like team support or custom branding.

For the larger team column you’ll also notice the monthly quote increases automatically when you add more people onto the plan. This is great for teams who want to estimate costs and get quick estimates for software.

6. Optimal Workshop

Optimal Workshop uses a lot of branding and custom graphics on their pricing page. This may not add directly to the table itself, but it does add to the ambiance of the page.

The main feature I like in this design is the built-in monthly/yearly price switch. You’ll often see these on pricing pages but they’re usually way too small. This gives visitors a false sense of pricing because initial prices can be pitched cheaper assuming the user wants an annual plan.

With this pricing table you can clearly see what you’re getting per month and how to compare between the monthly and yearly costs.

7. Airtable

Here’s another design that uses bright colors to grab attention. The Airtable pricing page keeps things simple and tries to draw your attention to the prices immediately.

If you look right above the table you’ll see the same monthly/yearly switch. See how it’s miniscule enough to completely miss at a glance? That’s a nice trick for sales but it’s not great from a UX perspective.

The best part of this table is the hover effect added onto each row. You can learn about each feature just by hovering to figure out which plan offers exactly what you need.

8. Lookback

Another table design with the hover information is Lookback. You won’t find the hover tooltip on every row but it’s visible on the most complex feature items.

Another minor design choice that I like is how each column of features adds onto the prior one. The column for the “Pro” plan notes that it offers everything in the standard plan along with a few extra features.

Sometimes this can throw off visitors who aren’t reading closely because they may gloss over this text. But it’s a great way to save space and keep your tables clean.

9. BuzzSumo

Although the design is somewhat basic, I have to say the BuzzSumo pricing table does a lot of things right. The monthly/yearly billing switch is in clear view and you can even see exactly how much you’ll save by switching to annual billing.

Their features list feels a tad crowded but it’s pretty simple to read through. And each row uses the hover info feature with tooltips explaining what each feature means.

My only complaint here is the aesthetic of the page. It’d look nicer if the features connected more into a larger table with more borders or perhaps zebra striping. But the UX is superb and that’s what matters most on a pricing page.

10. Litmus

The email testing suite Litmus has been around for years and it’s the de-facto choice for email newsletters. Their pricing page isn’t too detailed but it offers just enough for potential buyers.

They use the labeling trend of “most popular” by highlighting one specific plan to stand out from the rest. It’s a design choice that works well and encourages more signups for mid-tier plans over cheaper ones.

But I really like the amount of space you get with each row. The features are explained right on the page and some features even have internal pages with more detail.

With clean text, solid borders, and plenty of whitespace, this pricing table is one of the most pragmatic designs in my list.

11. Stripe

Stripe’s pricing page is incredibly simple and it’s hard to even call this a full pricing table. But it’s so well designed that I just had to include it here.

The goal of any pricing table is to share information with potential customers, and to convert those people into paying customers. Stripe’s design offers two very clear payment plans: Direct payments or larger enterprise setups.

People looking into Stripe won’t fall into analysis paralysis trying to choose between five different plans. The table is quick to read and offers an easy way to calculate costs.

But if you like this table design you could build out a similar pricing table and throw one or two more plans into the mix.

Super ReFocus, A Powerful Mac Image Editing Tool – only $9!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot http://ift.tt/2uW66sY




from WordPress http://ift.tt/2uZ25TQ