Original Source: http://feedproxy.google.com/~r/tympanus/~3/aBOCpNSpPt0/

Mmm… swirly goodness…
Hey! Snap out of it! Ok. Now, in this tutorial we’re going to have some fun creating this pretty crazy little effect by tipping our toes into WebGL. The water is warm, I promise!

What’s OGL?

OGL is a WebGL library that is going to save us having to write a bunch of pretty unfriendly WebGL code directly. It has been my baby for the last year or so – I’ve been busy adding a bunch of examples to try and give people a kick-start with practical references.

By design, it’s tightly coupled to WebGL with only a small amount of abstraction – meaning it’s very lightweight. For example, the OGL classes required for this experiment are under 13kb gzipped – and more than half of them are just maths.

You got any more of them mouse trails?

Yes! Moving on, sorry.

Mouse trails (or any sort of trails) are just innately fun to interact with. The little touch of physics that it adds can really make an animation feel incredibly reactive and tangible, to the point where you can be certain that a good percentage of your users’ time will be spent playing with the effect, before consuming any of your site’s content… sorry not sorry.

Of course, they can be achieved using a whole range of techniques. Example time.

Starting with a really clever, recent one done using the DOM (html) and CSS. I especially love the difference-blend style they’ve added to the trail. The crux of the effect is a number of diminishing circles that follow one another, giving the effect of a tapered line.
Developed by Luca Mariotti. With the ink trail effect from Ricardo Mendieta.

Here’s an effective take on one, made using the 2D Canvas api. This one draws a circle at the head of each line every frame, while simultaneously the whole scene slowly disappears.
By Hakim El Hattab.

And here’s one used as a main game mechanic, made using SVG by yours truly – a few trips-around-the-sun ago… It’s a dynamic bezier curve whose start, middle and end positions are updated every frame.

So each of these previous (viable) options use drawing APIs (CSS, Canvas 2D, SVG) to render those pixels. WebGL, on the other hand, leaves all of that pixel-drawing math in your capable hands. This means two things.

Firstly, it’s more work for you. Yep, it’ll probably take you longer to get something up and running, working out those pesky projection matrices, while keeping an eye on the optimisation of your attribute buffers…

Buuut (important but), it’s less work for the computer – so it’ll run (normally, waaaay) faster. You’re basically cutting out the middle man. It also gives you a crazy amount of flexibility, which I highly appreciate.

The Approach

I’m a fan of visualising problems to understand them (let’s not talk about quaternions…), so let’s break it down.

We will start by making a number of points, made up of [x, y] coordinates, arranged in a lovely little line.

Then we’ll use these to generate a geometry, duplicating each point so that there are two vertices at each step along the curve. Why two? Just a sec.

Now, because our paired points are at the exact same position, our line is infinitely thin when rendered – and hence, invisible… No good. What we need to do is separate those pairs to give the line some width. And, puuuush.

And there we have our line mesh, all visible and line-y…

The part I nimbly skipped over there is also the most complicated – how do we know in which direction to move each vertex?

To solve this, we need to work out the direction between the previous and next points along the line. Then we can rotate it by 90 degrees, and we’re left with the angle we want: the normal.

Now that we have our normal, we can start getting a bit creative. For example, what if we separated the pairs differing amounts at each point? Here, if we make the pairs get closer together toward the ends of the line, it will give us this sharp, tapered effect.

Now see what fun ideas you can come up with! I’ll wait. A bit more. Ok, stop.

And that’s the most complicated part over. Note: I haven’t gone into the depths of each caveat that drawing lines can present, because, well, I don’t need to. But I couldn’t possibly write about lines without mentioning this extremely informative and digestible article, written by Matt DesLauriers about everything you’d want to know about drawing lines in WebGL.

Code time – setting the scene

To kick us off, let’s set up a basic OGL canvas.

Here’s an OGL CodeSandbox Template project that I’ll be using as a guide. Feel free to fork this for any OGL experiments!

First import the required modules. Normally, I would import from a local copy of OGL for the ability to tree-shake, but to keep the file structure empty on CodeSandbox, here we’re using jsdelivr – which gives us CDN access to the npm deployment.

import {
Renderer, Camera, Orbit, Transform, Geometry, Vec3, Color, Polyline,
} from ‘https://cdn.jsdelivr.net/npm/ogl@0.0.25/dist/ogl.mjs’;

Create the WebGL context, and add the canvas to the DOM.

const renderer = new Renderer({dpr: 2});
const gl = renderer.gl;
document.body.appendChild(gl.canvas);

Create our camera and scene.

const camera = new Camera(gl);
camera.position.z = 3;

const controls = new Orbit(camera);

const scene = new Transform();

And then render the scene in an update loop. Obviously the scene is empty, so this will currently look very black.

function update(t) {
requestAnimationFrame(update);
controls.update();

renderer.render({scene, camera});
}

But now we can do all of the things!

As an input to OGL’s Polyline class, we need to create a bunch of points (xyz coordinates).

Here, the x value goes from -1.5 and 1.5 along the line, while the y value moves in a sine pattern between -0.5 and 0.5.

const count = 100;
const points = [];
for (let i = 0; i < count; i++) {
const x = (i / (count – 1) – 0.5) * 3;
const y = Math.sin(i / 10.5) * 0.5;
const z = 0;

points.push(new Vec3(x, y, z));
};

Then we pass those points into a new instance of Polyline, along with colour and thickness variables (uniforms). And finally, attach it to the scene.

const polyline = new Polyline(gl, {
points,
uniforms: {
uColor: {value: new Color(‘#1b1b1b’)},
uThickness: {value: 20},
},
});

polyline.mesh.setParent(scene);

Here we have that working live. (Click and drag, scroll etc. If you want…)

How about a square? Let’s just change those points.

const points = [];
points.push(new Vec3( 0, -1, 0));
points.push(new Vec3(-1, -1, 0));
points.push(new Vec3(-1, 1, 0));
points.push(new Vec3( 1, 1, 0));
points.push(new Vec3( 1, -1, 0));
points.push(new Vec3( 0, -1, 0));

Circle?

const count = 100;
const points = [];
for (let i = 0; i < count; i++) {
const angle = i / (count – 2) * Math.PI * 2;
const x = Math.cos(angle);
const y = Math.sin(angle);
const z = 0;

points.push(new Vec3(x, y, z));
};

You may have noticed that when you rotate or zoom the camera, the line will always stay the same thickness. You would probably expect the line to get thicker when it’s closer to to camera, and also to be paper thin when rotated on its side.

This is because the pair separation we spoke about earlier is happening after the camera’s projection is applied – when the vertex values are in what’s called ‘NDC Space’ (Normalized Device Coordinates). Projection matrices can be confusing, but luckily, NDC Space is not.

NDC Space is simply picturing your canvas as a 2D graph, with left to right (X), and bottom to top (Y) going from -1 to 1. No matter how complicated your scene is (geometry, projections, manipulations), each vertex will eventually need to be projected to a -1 to 1 range for X and Y.

A more common term you’ve probably heard is Screen Space, which is very similar, but instead of a -1 to 1 range, it’s mapped from 0 to 1.

We generally use cameras to help us convert our 3D coordinates into NDC Space, which is absolutely vital when you need to spin around an object, or view geometry from a specific perspective. But for what we’re doing (mouse trails. I haven’t forgotten), we don’t really need to do any of that! So, in fact, we’re going to skip that whole step, throw away the camera, and create our points directly in NDC Space (-1 to 1) from the get-go. This simplifies things, and it also means that we’re going to get the opportunity to write a custom shader! Let me show you.

Shaping the line with a custom shader

Firstly, let’s create our points in a straight line, with the X going from -0.5 to 0.5 and the Y left at 0. Keeping in mind that the screen goes from -1 to 1, this means we will end up with a horizontal line in the center of the screen, spanning half the width.

const count = 40;
const points = [];
for (let i = 0; i < count; i++) {
const x = i / (count – 1) – 0.5;
const y = 0;
const z = 0;

points.push(new Vec3(x, y, z));
};

This time when we create our Polyline, we are going to pass in a custom Vertex shader, which will override the default shader found in that class. We also don’t need a thickness just yet as we’ll be calculating that in the shader.

const polyline = new Polyline(gl, {
points,
vertex,
uniforms: {
uColor: {value: new Color(‘#1b1b1b’)},
},
});

Now, there are two shaders in the WebGL pipeline, Vertex and Fragment. To put it simply, the Vertex shader determines where on the screen to draw, and the Fragment shader determines what colour.

We can pass into a Vertex shader whatever data we want, that’s entirely up to you. However, it will always be expected to return a position on the viewport that should be rendered (in Clip Space, which, for this case, is the same as NDC Space; -1 to 1).

At the start of our Vertex shader, you will find the input data: Attributes and Uniforms. Attributes are per-vertex variables, whereas Uniforms are common variables for all of the vertices. For example, as this shader is run for each vertex passed in, the position Attribute value will change, moving along each point, however the uResolution Uniform value will remain the same throughout.

attribute vec3 position;
attribute vec3 next;
attribute vec3 prev;
attribute vec2 uv;
attribute float side;

uniform vec2 uResolution;

At the very end of our Vertex shader, you’ll find a function called main that defines the variable gl_Position. These two names are non-debatable! Our WebGL program will automatically look for the main function to run, and then it will pass the gl_Position variable on to the Fragment shader.

void main() {
gl_Position = vec4(position, 1);
}

As our points are already in NDC Space, our shader – made up of just these two sections – is technically correct. However the only issue (the same as we had in our breakdown) is that the position pairs are on top of each other, so our line would be invisibly thin.

So instead of passing our position right on through to the output, let’s add a function, getPosition, to push each vertex apart and give our line some width.

vec4 getPosition() {
vec2 aspect = vec2(uResolution.x / uResolution.y, 1);
vec2 nextScreen = next.xy * aspect;
vec2 prevScreen = prev.xy * aspect;

vec2 tangent = normalize(nextScreen – prevScreen);
vec2 normal = vec2(-tangent.y, tangent.x);
normal /= aspect;
normal *= 0.1;

vec4 current = vec4(position, 1);
current.xy -= normal * side;
return current;
}

void main() {
gl_Position = getPosition();
}

Ah, now we can see our line. Mmmm, very modernist.

This new function is doing the exact steps in our approach overview. See here.

We determine the direction from the previous to the next point.

vec2 tangent = normalize(nextScreen – prevScreen);

Then rotate it 90 degrees to find the normal.

vec2 normal = vec2(-tangent.y, tangent.x);

Then we push our vertices apart along the normal. The side variable has a value of -1 or 1 for each side of a pair.

current.xy -= normal * side;

“OK OK… but you skipped a few lines”.

Indeed. So, the lines that determine and apply the aspect ratio are there to account for the rectangular viewport. Multiplying against the aspect ratio makes our scene square. Then we can perform the rotation without risk of skewing. And after, we divide by the aspect to bring us back to the correct ratio.

And the other line…

normal *= 0.1;

Yes that one… is where we can have some fun. As this manipulates the line’s width.

Without this bit of code, our line would cover the entire height of the viewport. Why? See if you can guess…

You see, as the normal is a ‘normalised’ direction, this means it has a length of 1. As we know, the NDC Space goes from -1 to 1, so if our line is in the middle of the screen, and each side of the line is pushed out by 1, that will cover the entire range of -1 to 1. So multiplying by 0.1 instead only makes our line cover 10% of the viewport.

Now if we were to change this line, to say…

normal *= uv.y * 0.2;

We get this expanding, triangular shape.

This is because the variable uv.y goes from 0 to 1 along the length of the line. So we can use this to affect the shape in a bunch of different ways.

Like, we can wrap that code in a pow function.

normal *= pow(uv.y, 2.0) * 0.2;

Hm, how exponentially curvy. No, I want something more edgy.

normal *= abs(fract(uv.y * 2.0) – 0.5) * 0.4;

Too edgy…

normal *= cos(uv.y * 12.56) * 0.1 + 0.2;

Too flabby.

normal *= (1.0 – abs(uv.y – 0.5) * 2.0) * 0.2;

Almost… but a little too diamond-y.

normal *= (1.0 – pow(abs(uv.y – 0.5) * 2.0, 2.0)) * 0.2;

That’s not bad. Let’s run with that.

So now we have our shape, let’s deal with the movement.

Adding movement

To start off we just need 20 points, left at the default [0, 0, 0] value.

Then we need a new Vec3 that will track the mouse input, and covert the X and Y values to a -1 to 1 range, with the Y flipped.

const mouse = new Vec3();

function updateMouse(e) {
mouse.set(
(e.x / gl.renderer.width) * 2 – 1,
(e.y / gl.renderer.height) * -2 + 1,
0
);
}

Then in our update function, we can use this mouse value to move our points.

Every frame, we loop through each of our points. For the first point, we ease it to the mouse value. For every other point, we ease it to the previous point in the line. This creates a trail effect, that grows and shrinks as the user moves the mouse faster and slower.

requestAnimationFrame(update);
function update(t) {
requestAnimationFrame(update);

for (let i = points.length – 1; i >= 0; i–) {
if (!i) {
points[i].lerp(mouse, 0.9);
} else {
points[i].lerp(points[i – 1], 0.9);
}
}
polyline.updateGeometry();

renderer.render({scene});
}

Have a play with it below.

We can make this a bit more fun by replacing the first point’s linear easing with a spring.

const spring = 0.06;
const friction = 0.85;
const mouseVelocity = new Vec3();
const tmp = new Vec3();

requestAnimationFrame(update);
function update(t) {
requestAnimationFrame(update);

for (let i = points.length – 1; i >= 0; i–) {
if (!i) {
tmp.copy(mouse).sub(points[i]).multiply(spring);
mouseVelocity.add(tmp).multiply(friction);
points[i].add(mouseVelocity);
} else {
points[i].lerp(points[i – 1], 0.9);
}
}
polyline.updateGeometry();

renderer.render({scene});
}

The extra bit of physics just makes it that much more interesting to play with. I can’t help but try and make a beautiful curving motion with the mouse…

Finally, one line is never enough. And what’s with all of this dark grey?! Give me 5 coloured lines, with randomised spring values, and we’ll call it even.

And there we have it!

As we’re using random values, every time you refresh, the effect will behave a little differently.

End

Thank you so much for sticking with me. That ended up being a lot more in-depth than I had planned… I implore you to play around with the code, maybe try randomising the number of points in each line… or changing the shape of the curve over time!

If you’re new to WebGL, I hope this made the world of buffer attributes and shaders a little less overwhelming – it can be really rewarding to come up with something interesting and unique.

Crafting Stylised Mouse Trails With OGL was written by Nathan Gordon and published on Codrops.

Original Source: https://www.webdesignerdepot.com/2019/09/tips-on-designing-creative-websites-that-will-wow-your-clients/

The global market keeps getting bigger and bigger, which should be good news for web designers – but there’s a catch.

The clients you can expect to serve are more sophisticated and want creative websites, not just the regular HTML and CSS.

You can’t deliver just anything and expect them to be happy. You’ll also have some serious competition to contend with. As a consequence, your website must adequately address an ever-growing need for improvements. Like in flexibility, responsiveness, and conversion optimization.

Fortunately, the cloud has a silver lining; and a bright one at that. Tools to meet these challenges and address them head on are readily available. With the most notable case in point being Be Theme, the largest and most versatile WordPress theme of them all.

With a tool like Be Theme at your fingertips, you’ll be more than able to successfully handle any challenge that comes your way.

Then, it’s simply a matter of following these 5 simple steps to design creative websites. They are eye-catching, impressive in their ability to convert visitors to users and guaranteed to put smiles on your clients’ faces.

5 Steps to Building Astoundingly Creative Websites
Step 1: Choose a Mesmerizing Color Palette

The color palette you use can make a difference between a so-so website and an attention-getting one. Choosing one should not be difficult if you follow a few simple rules:

its colors need to attract instant attention;
they need to be on-brand, and;
the color palette you select needs to visually support the message your app or website is designed to convey

Artist features BOLD color touches that will instantly attract attention.

This Be Theme pre-built website is another great example of what can be accomplished with an eye-grabbing color palette.

Carbon8 is an example of how to align the color palette with the website’s brand. It is done with its clever use of various shades of green. Note how the deep green element draws visitor’s eyes to the center of the page.

BeInsurance features a subtle, crisp color palette. It perfectly reinforces a strategy of using crisp, clear images to gain the clients you need.

BeFestival is a great example of using a color palette designed to appeal to a larger audience.

Step 2: Display Crystal-Clear Photos and Images

This step should be obvious. A crystal clear presentation suggests the business behind it goes the extra mile. That is when it comes to clearly present their products and services. Using the best images you can get your hands on can give you an extra edge over the competition.

BeStylist is an example of the advantage of displaying images with flair. The crisp image definitely supports the intended message.

Or, try something like RansomLTD; minimalist, yet crisp and powerful.

A pre-built website like Zajno illustrates how crystal-clear pics can be used to display your creativity.

The Design Shop employs flair and creativity to entice visitors with crisp and compelling images of your products.

Step 3: Show Visitors How Your Creativity Benefits Them

Creativity isn’t about you. It’s about serving your visitors. It can be extremely effective when it helps them imagine themselves actually using your product or service.

BeMarketing’s homepage video illustrates another way to show people how they can benefit from using your products.

Lane illustrates a fabulous approach you can use to express your structural design perspectives.

BeSimple takes a minimalist approach. It’s the typography and way the text is presented rather than the text itself that’s effective.

BeTravelBlogger provides the basis for a travel blogger’s dream site. You can use it to present your travel adventures and escapades with a super-cool layout of graphics and snippets.

Step 4: (Over)use “White” Space

Yes, it’s true. White space is a design element you can sometimes overuse without causing harm. In fact, in many cases “more is better”, as is obvious in the following examples.

Makespace has a clean design that allows the eye to focus on key elements, imagine, and create.

BeSketch & The Drive New York are two examples where plenty of white space is used to great effect.

When white space is part of the brand it can really help to drive the message home. BeIcecream is an extreme example of how plenty of white space can be used to great effect.

Step 5: Make Your CTAs Grab Them By The Eyeballs

If you don’t have CTA buttons that can’t be ignored, your website isn’t going to convert as many visitors into users as you hoped or planned. You want those buttons to be big, bright, and bold enough to make people feel they absolutely have to be clicked on.

BeDrawing’s CTA button is above the fold as it should be, and it clearly stands out. You can’t help but notice it the instant you’ve finished reading the headline. Its centering on the page makes it serve as a gate that invites visitors to enter.

Stuart makes effective placement and use of 3 clearly defined CTA buttons.

Your CTA can match other elements on the page and still easily attract attention. A great example of this is BeKids, where the color of the button matches the color of other hero section elements.

Building Creative Websites – a Summary

Follow these surefire steps (with the help of a surefire website building tool) and you’re well on your way to satisfying the most demanding of clients. Crisp, stunning visuals, a cleverly chosen color palette and the clever use of white space, images that enable visitors to see themselves using your products, and the all-important bold and beautiful CTA buttons give you the combination for success.

Success typically breeds additional work. Sometimes web design is not as much fun as it used to be. If you suddenly find yourself juggling projects and deadlines to the point you’d be better off using pre-built websites.

You’ll find the most generous gallery of more than 450 creative websites on Be Theme that you can customize to your liking. Start using them now and you’ll never have to worry about juggling projects and deadlines!

 

[– This is a sponsored post on behalf of Be Theme –]

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;}

Original Source: https://www.smashingmagazine.com/2019/09/too-much-social-proof/

Is There Such A Thing As Too Much Social Proof?

Is There Such A Thing As Too Much Social Proof?

Suzanne Scacca

2019-09-23T13:30:59+02:00
2019-09-23T18:06:20+00:00

It’s very easy to start a business these days. But succeeding in that business is another story. There are just too many people who want to escape the 9-to-5, do something with their big idea and make a better life for themselves in the process. I totally applaud that.

However, it’s not practical to think that the idea will sell itself. Consumers need to be given some reason to trust that their money (or time) will be well spent. And when a business or product is new, the best way to gain this trust is by getting clients, customers and others to vouch for you.

That said, is it possible to go overboard with testimonials, reviews, case studies, client logos and other forms of social proof? And is there a wrong way to build social proof into a mobile website or PWA?

Yes and yes!

When Too Much Social Proof Is A Bad Thing

I was working on the copy for a new website earlier this year. My client told me that the design team had prepared a wireframe for the home page and wanted me to use that as a framework for the copy. Normally, I would be stoked. When I work as a writer, I want to stay in writer mode and not have to worry about layout and design suggestions.

The only problem was that the home page they wanted was littered with social proof and trust marks. It would’ve looked like this (note: the purple boxes contain social proof):

A sample wireframe of a home page with too much social proof. (Source: Canva) (Large preview)

In reviewing the wireframe, I had a number of gripes. For starters, it was way too long, especially for mobile visitors.

There was no way people were going to scroll seven times to find the section that finally invites them to take action.

“

Secondly, there was too much social proof. I know that seems counterintuitive. After all, isn’t it better to have more customer validation? I think in some cases that’s correct. Like with product reviews.

In BrightLocal’s 2018 Local Consumer Review Survey, respondents said they want to see at least 40 product reviews, on average, before believing a star rating.

BrightLocal’s consumer review survey says that consumers want to see 40 review before believing a business’s start rating. (Source: BrightLocal) (Large preview)

Even then, consumers aren’t looking for a perfect score. As you can see here, only 9% of respondents need a business to have a perfect rating or review in order to buy something from them:

BrightLocal survey respondents prefer to see a minimum of 3- or 4-star ratings instead of 5. (Source: BrightLocal) (Large preview)

And I can tell you why that’s the case.

I used to write product reviews. One of the things I’d do when assessing the quality of a product (before making my own judgments) was to look at what online reviewers — professional reviewers and customers — had to say about it. And let me tell you… there are tons of fake reviews out there.

They’re not always easy to spot on their own. However, if you look at enough reviews at once, you’ll start to notice that they all use the same verbiage. That usually means the company paid them to leave the review or gave family, friends and employees pre-written reviews to drop.

I’m not the only one who’s noticed this trend either. BrightLocal’s respondents have as well:

33% of BrightLocal respondents have seen lots of fake reviews while 42% have seen at least one. (Source: BrightLocal) (Large preview)

Only 26% of respondents said they hadn’t come across a fake review while 42% had seen at least one in the last year and 33% had seen a lot.

When it comes to things like testimonials and case studies, I think consumers are growing just as weary about the truthfulness of the praise.

TrustRadius surveyed B2B buyers on the subject of online reviews vs. case studies. This is what it found:

TrustRadius asked respondents to assess their feelings on customer reviews vs. case studies (Source: TrustRadius) (Large preview)

It makes sense why consumers don’t feel as though case studies are all that authentic, trustworthy or balanced. Case studies are written by the companies themselves, so of course they’re only going to share a flattering portrait of the business or product.

Having worked in the digital marketing space for a number of years, I can tell you that many customer testimonials aren’t always genuine either. That’s why businesses need need to stop worrying about how much social proof they have and start paying more attention to the truthfulness and quality of what they’re sharing with visitors.

The point I’m trying to make isn’t that we should ditch social proof. It’s an important part of the decision-making process for consumers. But just because it can affect their decision, it doesn’t mean that repeatedly bashing them over the head with it will work either. If your website and its messaging can’t seal the deal, a bunch of logos and quotes meant to convince them to buy won’t either.

What you need to focus on when building social proof into a mobile site or PWA is quality over quantity. Sure, you might want to highlight the sheer quantity of reviews that have been gathered on a product, but in terms of space on your website? With social proof, less is more.

Tips For Building Social Proof Into A Mobile Website Or PWA

You don’t have a lot of room to spare on mobile and you don’t want to make your visitors dig and dig to find the important details. So, while you do need social proof to help sell the business and its product, you need to do so wisely.

That means giving your content room to shine and strategically enhancing it with social proof when it makes the most sense to do so.

Consolidate Social Proof on the Home Page

I know how hard it can be to convince people to work with you or buy from you when your business is new. That’s especially the case when you’re entering a field that’s already dominated by well-known and well-reviewed companies.

However, rather than make your home page longer than it needs to be — for desktop or mobile visitors — why not consolidate the strongest social proof you have and put it in one section?

What’s neat about this option is that you can get creative with how you mix and match your social proof.

Customer Reviews + Trust Seals

Two Men and a Truck is the kind of company that needs customer testimonials. It’s the only way they’re going to effectively convince new customers to trust them to enter their home and carefully transport their belongings from one location to another.

Local movers Two Men and a Truck stack a testimonial on top of trust seals on the home page. (Source: Two Men and a Truck) (Large preview)

Rather than bog down their home page with testimonials, Two Men and a Truck use one especially positive review and a number of professional trust seals to close the deal in one fell swoop.

Google Reviews + Facebook Reviews

Another way to consolidate social proof on the home page is by aggregating reviews from other platforms as the website of Drs. Rubinstein and Ducoff does:

The home page of Drs. Rubinstein and Ducoff shows off the latest reviews from Google and Facebook along with an average star rating across all platforms. (Source: Drs. Rubinstein and Ducoff) (Large preview)

This is a tiny section — it doesn’t even fill the entire screen — and yet it packs a lot of punch.

First, you have the total number of reviews and average star rating shown at the top. Remember that survey from BrightLocal? This is the kind of thing that would go a long way in convincing new patients to sign up. There’s a good amount of reviews to go on and the average rating seems realistic.

Also, because these reviews come from Google and Facebook, they’re connected to real people’s profiles. Plus, the date is included in the Google review.

Unlike testimonials which are just a quote and a person’s name (if we’re lucky), this is a quote, a star rating and the date it was published. This way, prospective patients don’t have to wonder how long ago it was that Drs. Rubinstein and Ducoff received these reviews.

Twitter + App Store Reviews + Awards

You’ll find another creative example of consolidated social proof on the Pocket website.

Pocket uses Twitter, the Google App Store, the Google Play Store Webby Awards as trust marks. (Source: Pocket) (Large preview)

Even though Pocket is free to use, that’s not necessarily enough to convince someone to try a new piece of software — especially if you want them to download it as a mobile app.

Rather than rely on faceless testimonials, though, Pocket has chosen to show off some convincing and verifiable social proof:

A quote from a Twitter user with a healthy follower base,
The actual rating of its app on both apps stores,
The number of times it’s won a Webby award.

It’s a unique patchwork of social proof which is sure to stand out from the traditional quote block many websites use to promote their products.

Make It Sticky

One of the great things about making the move to a PWA is you can use app-like elements like a sticky bar to show off important information to visitors. If it makes sense to do so, you could even put some social proof there.

Google Reviews Widget

There’s been a big surge in independent mattress companies in recent years. Tuft & Needle. Loom & Leaf. Saatva. They all seem to promise the same thing — a better quality memory foam mattress at a steal of a price — so it’s got to be hard for consumers to choose between them.

One way to make this differentiation is with Google Reviews.

On the desktop website for Lull, the home page reviews callout is tucked into the bottom-left corner.

Lull shares Google customer reviews in a widget on its desktop website. (Source: Lull) (Large preview)

It’s almost too small to notice the reviews with so much more to take in on the home page. That’s a good thing though. The social proof is always present without being overwhelming.

What’s interesting to note, though, is that the mobile counterpart doesn’t show any Google reviews on the home page. It’s not until someone gets to the Mattress page where they’re able to see what other customers have said.

Lull shares Google customer reviews in a sticky bar on its PWA. (Source: Lull) (Large preview)

In this particular screenshot, you can see that the Mattress page on the PWA has a section promoting the product’s reviews. However, even when visitors scroll past that section, the sticky bar continues to remind them about the quantity and quality of reviews the mattress has received on Google.

CTA Banner

Another type of website this sticky social proof would be useful for would be one in hospitality. For example, this website for the Hyatt Regency San Antonio:

An example of one of the Suites pages on the Hyatt Regency San Antonio website. (Source: Hyatt Regency San Antonio) (Large preview)

Just like the Lull example above, the Hyatt Regency tucks its social proof into a sticky bar on its internal sales pages.

The Hyatt Regency places TripAdvisor reviews next to its conversion elements in a sticky bar. (Source: Hyatt Regency San Antonio) (Large preview)

Visitors see the number of TripAdvisor reviews and star ratings when they first enter the Suites page. When they scroll downwards, the sticky bar stays in place just long enough (about one full scroll) for visitors to realize, “Cool. It’ll be there if or when I’m ready to do more research.”

What’s nice about how this particular sticky bar is designed is that the reviews are part of the conversion bar. It’s kind of like saying, “Want to book your trip, but feeling nervous about it? Here’s one last thing to look at before you make up your mind!”

Create a Dedicated Page for Social Proof

If you’re not building a PWA or you have too much social proof to show off in a small space, create a dedicated page for it. This is a great option, too, if you plan to share something other than just testimonials or reviews.

Testimonials/Reviews

Winkworth is an estate agency in the UK. Testimonials are a useful way to convince other sellers and lessors to work with the agency. Yet, the home page doesn’t have any. Instead, the company has chosen to place them on a Testimonials page.

The Winkworth estate agency keeps its home page free of testimonials and instead places them on a dedicated page. (Source: Winkworth) (Large preview)

It’s not as though this page is just a throwaway of every positive thing people have said. The testimonials look like they’ve been hand-picked by Winkworth, especially the longer ones that contain more details about the experience and the people they worked with.

An example of some of the hand-picked testimonials Winkworth has gathered for its Testimonials page. (Source: Winkworth) (Large preview)

Each testimonial includes the person’s name as well as which Winkworth location they’re referring to. This way, visitors can learn more about the experience at specific locations instead of just hearing how great Winkworth is as a whole.

Case Studies

It’s not just testimonials that could use their own page. Case studies shouldn’t clutter up the home page either.

While Bang Marketing promotes its case studies with a promotional banner on the home page, that’s all you hear of it there. They save their customers’ stories for individual pages like this one:

Bang Marketing includes a video testimonial with every case study. (Source: Bang Marketing) (Large preview)

Each case study page is minimally designed, but captures all of the information needed to tell the story.

First, there’s a video from the client explaining what Bang Marketing was able to do for them. Then, there’s a brief description of what the team worked on. Finally, high-quality images provide visitors with a look at the resulting product.

This is a much more effective way to share case studies than placing a barrage of portfolio images all over the home page.

Press

There are two ways to handle the Press section of a website. The company could publish its own press releases or it can share information about where it’s been featured in the press.

While the former is useful for sharing company news and wins with visitors, it’s just too self-promotional and won’t help much with conversion. The latter option could really make a big impact though.

This, for instance, is what visitors will find on the About & Press page for The Dean Hotel:

The Dean Hotel includes magazine covers and article screenshots as social proof on its website. (Source: The Dean Hotel) (Large preview)

After a short intro of the hotel, the rest of the page is covered in magazine covers and article screenshots that go back as far as 2013. Visitors can click through to read each of the articles, too.

The Dean Hotel uses articles as social proof on its website. (Source: The Dean Hotel) (Large preview)

This is a unique way for a website of any type to share social proof with visitors.

If your client happens to have a bunch of positive press and never-ending hype surrounding its brand, try to leverage that on the site. Plus, by including screenshots from the articles themselves, you get another opportunity to show off the product (or, in this case, the hotel and its rooms).

Wrapping Up

Consumers have become very savvy when it comes to marketing and sales online. That’s not to say that they don’t fall for it — usually, when it’s done genuinely and with transparency. However, we’re at a point where a brand saying, “We’re the best! Trust us! Buy from us!”, doesn’t usually cut it. They need more validation than that.

At the end of the day, your mobile website or PWA needs social proof to convince visitors to convert.

That said, be careful with how you build social proof into the site, especially on the home page. You don’t have time or space to waste, so don’t create something unnecessarily bulky just so you can show off how many testimonials, reviews, case studies, client logos high-profile partnerships you have. This is about quality over quantity, so make it count.

(ra, yk, il)

Original Source: https://www.smashingmagazine.com/2019/09/questions-ask-next-potential-employer/

15 Questions To Ask Your Next Potential Employer

15 Questions To Ask Your Next Potential Employer

Robert Hoekman Jr

2019-09-20T12:30:59+02:00
2019-09-20T22:08:07+00:00

In my book “Experience Required”, I encourage in-house UX professionals to leave companies who refuse to advance their UX intelligence and capability. There are far too many companies these days who understand the value of UX to waste your time being a martyr for one who will only frustrate you. Your best chance of doing a good job is to avoid a bad position.

Smartly, during a recent Q&A about the book, an audience member asked how we can avoid taking these jobs in the first place. What kinds of questions, he wondered, can you ask during an interview to spot red flags before the company stabs the whole flagpole into your sacred UX heart?

Know What You Want To Know

There’s the usual stuff, sure, such as asking why the position you’re applying for is currently open. What the company’s turnover rate is like. Why that turnover rate is so low or high. A little Googling will easily enough net you a decent list of broad questions you can ask any employer.

But what you really want is to get UX-specific. You want to hone in on precisely what your life might be like should you take the position.

Your best chance of doing a good job is to avoid a bad position.

“

Sadly, I lacked a great answer at the time to the question about interview questions, so I let it eat at me until I woke up at three a.m two days later and started writing notes. That morning, I emailed my reply to the moderator.

Ask A Great Question, Then Shut Up

To devise the list below, I considered what kinds of things I’d wish a company knew and understood about UX prior to working with them. I can operate in all kinds of situations—as a UX and process innovation consultant, this has been my job, and pleasure, for nearly 13 years now—but I want to know from the start, every time, that the effort will be set up for success. These questions aim to uncover the dirty details that will tell me what I’m walking into.

Much like a good validation session or user interview, these questions are open-ended and designed to draw out thoughtful, long-winded responses. (One-word answers are useless.) I strongly recommend that when and if you ask them, you follow each question with a long, stealthy vow of silence. People will tell you all about who they are if you just shut up long enough to hear them do it. Stay quiet for at least ten seconds longer than you think is reasonable and you’ll get the world.

People will tell you all about who they are if you just shut up long enough to hear them do it.

“

I’d ask these questions of as many individuals as possible. Given that tech interviews are often hours-long and involve many interviewers, you should be able to grab yourself a wealth of good answers before you head out the door to process and sleep.

If, on the contrary, you are given too little time to ask all these questions, prioritize the ones you’re personally most concerned about, and then consider that insufficient interview time might be a red flag.

Important: The key to the answers you receive is to read between the lines. Listen to what is said, note what is not said, and decide how to interpret the answers you get. I’ve included some red flags to watch out for along with each question below.

The Questions

Let’s get right to it.

1. How does this company define UX? As in, what do you believe is the purpose, scope, and result of good UX work?

Intent

Literally every person on Earth who is asked this question will give a slightly, or wildly, different answer than you expect or hope for. At the very least, the person interviewing you should have an opinion. They should have a sense of how the company views UX, what the various UX roles have to offer, and what effect they should have.

Red Flag(s)

The UX team has a very limited role, has no real influence, and the team, for the most part, is stretched so thin you could put them on a cracker.

2. How do the non-UX people on your product team currently participate in UX decisions?

Follow-ups: Describe a recent example of this kind of participation. What was the UX objective? How was that objective vetted as a real need? What did you do to achieve the objective, step-by-step? How did it turn out? What did you learn?

Intent

Find out how the entire product team approaches UX and how collaborative and supportive they might be in acquiring and acting on good research insights.

Red Flag(s)

They don’t participate in UX decisions.

3. What UX roles exist in the organization, and what do they do?

Intent

Determine where you’ll fit in, and how difficult it might be for you to gain influence, experience, or mentorship (depending on what you’re after). Also, build on the previous question about who does what and how.

Red Flag(s)

UX people at the company are heavily skilled in graphic design, and not so skilled in strategy. The current team members have limited influence. Your role will be similar. Strategy is handled by someone else, and it trickles down to the UX team for execution.

4. Who is your most experienced UX person and in what ways does that experience separate them from others?

Intent

Determine the range of UX intelligence on the team from highest to lowest. Is the person at the top whip-smart and a fantastic leader? Does that person mentor the others and make them better?

Red Flag(s)

The interviewer cannot articulate what makes that person better or more compelling than others. If they can’t answer this question, you’re speaking to someone who has no business making a UX hiring decision. Ask to speak to someone with more inside knowledge.

Noteworthy, but not necessarily a red flag: If you learn that the most experienced person on the team is actually someone with a very sleight skill set, this can mean either there’s room for you to become an influencer, or the company puts so little value on UX that they’ve selected only employees with a small view of UX. The latter could mean you’ll spend all your time trying to prove the value of bigger UX involvement and more strategic work. You may like that sort of thing. I do. This would not be a red flag for me. It might be for you.

5. What are the company’s plans for UX long-term? (Expand it? Reduce it? How so, and why? Is there a budget for its expansion? Who controls it and how is it determined?)

Intent

Map out your road for the next couple of years. Can you rise into the role you want? Or will you be stuck in a cul-de-sac with zero chance of professional growth?

Red Flag(s)

We plan to keep doing exactly what we do now, and what we do now is pretty boring or weak. Also, we have no budget—like, ever—so if you want to bring in a consultant, attend a seminar, hire another person, or run a comprehensive usability study with outside customers, well, good luck with that.

6. How do UX professionals here communicate their recommendations?

Follow-up: How could they improve?

Intent

Learn how they do it now, and more importantly, whether or not it works.

Red Flag(s)

The interviewer has no answer, or—far worse—has an anti-answer that involves lots of arm-waving and ideas falling on deaf ears. The former can, again, mean the interviewer has no business interviewing a UX candidate. The latter can mean the UX team is terrible at communicating and selling its ideas. While this can be overcome with your much better communication skills, it will almost certainly mean the company has some baggage to wade through. Poor experiences in the past will put other product team members on defense. You’ll have to play some politics and work extra heard on building rapport to get anywhere.

7. Who tends to offer the most resistance to UX recommendations and methods and why?

Follow-up: And how much power does that person have?

Intent

This person will either give you the most grief or will give you the great opportunity to improve your communication skills (remember: design is communication!). Knowing who it is up front and how that person operates can tell you what the experience will be like.

Red Flag(s)

Executives, because they distrust UX. If you lack support at the top, it will be a daily struggle to achieve anything substantive.

8. What do UX practitioners here do to advance their values and methods beyond project work? Please be specific.

Intent

See how motivated the UX team is to perpetuate UX values to the rest of the company and improve how the team works.

Red Flag(s)

They don’t.

9. What do you think they should do differently? Why?

Intent

Discover how your interviewer feels about UX. This is, after all, a person who has a say in hiring you. Presumably, this person will be a big factor in your success.

Red Flag(s)

Keep their noses out of product development, stop telling the engineers what to do (speaks to perception of pushy UX people).

10. Describe a typical project process. (How does it start? What happens first? Next? And then?)

Intent

Find out if there is a process, what it looks like, and how well it aligns with your beliefs as a UX professional.

Red Flag(s)

You’ll be assigned projects from the top. You’ll research them, design a bunch of stuff in a vacuum with no way to validate and without any iteration method, and then you’ll hand all your work to the Engineering team, who will then have a thousand questions because you never spoke to each other until just now.

Bonus Question

How and when does the team try to improve on its process? (If it doesn’t, let’s call that a potential red flag as well.)

11. How has your company learned from its past decisions, and what have you done with those learnings?

Intent

UX is an everlasting experiment. Find out if this company understands it’s supposed to learn from the work and become smarter as a result.

Red Flag(s)

No examples, no thoughts.

12. If this is an agency who produces work for clients: What kind of support or backup does this agency provide for its UX recommendations, and how much power does the UX group have to push back against wrongheaded client ideas?

Follow-ups: How does the team go about challenging those ideas? Provide a recent example.

Intent

Find out how often you’ll be thrown under the proverbial bus when a client pushes back against what you know to be the right approach to a given problem. Your job will be to make intelligence-based recommendations; don’t torture yourself by working with people who refuse to hear them.

Red Flag(s)

The interviewer says the agency does whatever the clients demand. You will be a glorified wireframe monkey with no real power to change the world for the better.

13. How does the company support the UX group’s work and methods?

Intent

Determine how the company as a whole thinks about UX, both as a team and a practice. Is UX the strange alien in the corner of the room, or is it embraced and participated in by every product team member?

Red Flag(s)

UX is a strange alien. Good luck getting anyone to listen to you.

14. What design tools (software) does your team use and why?

Follow-ups: How receptive are people to trying new tools? How does evolution happen?

Intent

Know what software you should be familiar with, why the team uses it, and how you might go about introducing new tools that could be better in some situations.

Red Flag(s)

Gain insight into how the team thinks about the UI portion of the design process. Does it start with loose ideas drawn on napkins and gradually move toward higher-quality? Or does it attempt to start with perfection and end up throwing out a lot of work? (See the next question for more on this.)

15. Does a digital design start low-fi or high-fi, and what is the thinking behind this approach?

Follow-up: If you start lo-if, how does a design progress?

Intent

You can waste a lot of hours on pixel-perfect work you end up throwing out. A company who burns through money like that is also going to be the first one to cut staff when things get tight. No idea should be carried through to its pixel-perfect end until it’s been collaborated on and vetted somehow, so you want to know that the company is smart enough to start lo-fidelity and move gradually to hi-fidelity. Hi-fi work should be the result of validation and iteration, not the start of it. A lo-fi > hi-fi process mitigates risk.

Red Flag(s)

All design work starts and ends in Photoshop or Sketch, and is expected to be 100% flawless and final before anyone sees what you’ve produced.

Running The Interview

In an unrelated Q&A years ago, a hiring manager asked how to spot a good UX professional during an interview. I answered that he should look for the person asking all the questions. I repeated this advice in Experience Required.

Now you can be the one asking all the questions.

And in doing so, not only will you increase your odds of being offered the gig, you’ll know long before the offer shows up whether to accept it.

If you, dear reader, have more ideas on how to scavenger-hunt a company’s red flags, we’re all ears. Tell us about it in the comments below.

(cc, il)