Saturday, December 31, 2016

Comics of the week #372

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…

Blind faith


Jealous designer


New rotary

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


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

from WordPress

Friday, December 30, 2016

Samsung expands entry-level VR browsing

Those not completely familiar with Samsung’s Galaxy S7 smartphones may not have heard about Gear VR, the company’s mobile virtual reality headset. Users wearing the Gear VR get to utilize their phone as their display and processor, but the Gear VR unit is the controller.

Different iterations of the headset have been released to good reviews, so users will be excited to know that the latest release of the Oculus-powered app that controls the experience comes with an improved browsing experience.

According to a news release on Samsung’s Newsroom, version 4.2 helps users get greater control and a more immersive experience.

All this is centered on one of the biggest improvements in the browser, which is support for WebVR 1.0. This is the premier iteration of the VR web browser standard that’s been developed by Mozilla and Google. As far as users are concerned, they’ll experience this improvement by now being able to look at 3D images and streaming VR content more easily on the device.

Another big change is the ability to alter the background of their VR environment, courtesy of the aptly named Change Background feature. High-quality images are provided in-app, so users just have to make the selection for the background they desire. Thanks to VR tech, these vivid scenes infuse more depth than ever to a user’s browsing experience, which has the effect of bringing them to an environment that’s realistic enough to stimulate the interest for exploration.

The end result of this update is a far richer browsing experience. When you include the Skybox feature, which was added to Gear VR in an earlier update, users get to enjoy a truly immersive way of browsing.

One last feature should also have a positive impact on users’ browsing habits.

The File Explorer feature gives users the chance to both seamlessly browse and view videos and pictures on their mobile devices or USB storage, thanks to the USB OTG (on the go) support tool.

All of these updates should be considered in conjunction with other, powerful Gear VR features like:

• Voice-recognition support
• An on-screen keyboard that includes 11 languages (among them English, Korean and French)
• Bluetooth-device integration (mouse, keyboard, gamepad)

Together, version 4.2 now offers users a very comprehensive, immersive experience to explore and browse the most interesting content on the Internet.

What has always made Gear VR stand out is how it allows users to experience the web as if they were watching a movie in a theater. The big, virtual screen—now made richer with these improvements—is a key component of this experience.

80 Unique Custom-Made Abstract Paintings – only $21!


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

from WordPress

Thursday, December 29, 2016

The simple way to get better at design

Design, by its very nature, is there to be judged. We do it every day—whether it’s our own creation, or that of someone else. When we see something, we’re looking at it and forming an opinion (positive or negative).

So, those of us who do this type of work for a living do understand that it’s all part of the gig. Clients will of course give their opinions about what we have created for them. Our job is generally two-fold:

  • Communicate with the client as to why we made specific design choices and back up our methods with supporting evidence. For example, perhaps a client doesn’t like the placement of a search field. You might point out that you placed it in that particular spot as research shows more users will utilize the feature.
  • Make sure you’ve done your best to ensure the client’s happiness with your work. Whether they come around to your way of thinking or not, you still need to put forth your best effort to help them achieve their goal.

There’s a certain amount of give-and-take in the design process when working with a client. But that’s to be expected when you’ve been hired by someone to represent their brand.

However, in recent times, designers have also become subject to another kind of criticism: one they voluntarily sign up for.

Putting your work on display for the design community

Beyond the usual client feedback, there are “community critique” websites. Many designers are choosing to submit their work to sites like Behance or Awwwards – places where the community at large (and a jury in the case of Awwwards) can offer both critique and some creative inspiration.

Both communities, although a bit different in methodology, are quite popular. Behance is run by Adobe and is completely free to use. Besides websites, they also feature varied types of media such as photography, architecture and fashion. You can upload your work via their site or directly from Photoshop CC. Community members can vote up and comment on submitted works, while Behance curators create featured galleries showing the best of the best.

Awwwards differs in that they focus solely on websites and they also charge for submissions. After submission, your site will be evaluated by a panel of eight judges and can also be voted on by members of the community. But only community member voters with a specific amount of “status” points to their credit actually count towards the final verdict. If you do well enough, you may even get featured as a “Site of the Day”, and included in their yearly book.

Sharing is caring

… having your work critiqued by other design professionals can also make you a better designer.

There is some truly outstanding work being shared. It’s hard not to find inspiration when browsing through the submissions. If you decide to join in the fun, you may find that you’ve made a positive impact on someone else. Even if you don’t win any formal honors, inspiring others is a reward in its own right.

It’s also entirely possible that, if your work becomes popular, your career may get a real boost. Behance, for example, has an area of their site for job postings. Granted, the competition is fierce. But if the right person sees your creations, it could lead to some big opportunities.

Going through the whole process of having your work critiqued by other design professionals can also make you a better designer. Helpful tips from others can point out some different techniques or help you to clean up some inconsistencies in your work. Little things like this can make a big difference in the finished product.

Potential pitfalls?

While there are lots of positive attributes, these communities are not completely risk-free. For one, the joys of putting yourself out there to be judged may not be for everyone. We sensitive types might not be ready or willing to handle low ratings—or worse—unflattering comments.

Thankfully, scanning the comments section of various Behance listings showed mostly positive and uplifting messages from other members. Initially, one of my biggest fears when peering into these communities was that anyone could come in and say derogatory things about another person’s project (this is the internet, after all). But that didn’t seem to be the case. It could be the result of a friendly community combined with top-notch comment moderation.

In fact, the only minor annoyance in the comments section is the self-promotion from other designers (“Great work! Please click here to see my profile.”). Oh well, you can’t blame people for trying.

As for low ratings, well, that could be tough to take. To some, it could feel devastating to see their hard work panned. On the bright side, it may be a good motivator to continue learning and improving your skills.

Go ahead, put yourself out there

Until recently, I hadn’t taken the time to look into sites like Behance or Awwwards. I have to say that my initial reaction to the thought of these community critique sites was one of concern. I thought that perhaps they’d be equivalent to the trolling we so often see on social media. Pleasantly enough, I was wrong!

For many, submitting your work for review can be a very positive experience. At the bare minimum, you’ll have the opportunity to see how you stack up against some of the best designers out there. That can lead to a growth in your skills and perhaps even a boost for your career as a whole.

Still, this may not be the best fit for every personality. Criticism, even if it’s well-meaning, can be difficult to hear. But even if you’re not interested in submitting your own projects, I encourage you to take a look around at the quality of work on display in these communities. You’ll undoubtedly find yourself inspired by what you see. Plus, you may even get a shot of confidence from discovering that you’re capable of doing similarly well in your own projects.

Both Awwwards and Behance appear to be well-run communities. You can feel confident that your participation in them (whether you submit something or not) will be very worthwhile.

LAST DAY: Mega Bundle of 48 Vintage, Grunge Fonts – only $19!


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

from WordPress

Wednesday, December 28, 2016

4 Design Terms Every Marketer Needs to Know

The transition from text-based to visual marketing is already well underway, as customer demand drives organizations to rethink how people communicate on the most basic level.

Cisco estimates video will constitute 80% of all consumer Internet traffic by 2019, and although marketers are racing to catch up, they’re still behind the times: in 2015, 52% of senior marketing executives believed that visual assets such as infographics, photos, videos and illustration could help them tell their brand story. But given that human attention spans dropped a whopping 33% between 2000 and 2015, from 12 to 8 seconds — and some report its dropped even lower — marketers no longer have any choice in the matter: eye-catching visuals that are quick to digest and easy to share will be an essential tool for any brand moving forward.

But what’s a brand to do when you have no idea what visual assets will be both effective and the right fit for your organization? This post will explain a few essential terms and tips you’ll need to get started.

1. Visual Communication

Visual communication may be the most form of all.

It may sound simple enough: visual communication uses images and visuals to create meaning.


Because it is likely to become the only way that the majority of marketers communicate with their audiences — so you need to know it when you see it. This isn’t just because people prefer video to text, and are more likely to share photos. It’s also easier than ever for any brand to reach an international audience. Just take a look at Google AdWords, which (finally!) launched a redesign in March, of which an essential part of the design was making it language-agnostic to remove obstacles for audiences with a wide variety of backgrounds and skill sets.

new-adwords-designThe new Google AdWords features clean visualization and icons that communicate the type of information being mapped, no matter what language you speak. Image Source

When necessary, limited text is included to explicate the meaning. Take a look at Starbucks’ visual communication strategy: one tweeted image incorporates autumn leaves combined with moss emblematic of their Pacific Northwest roots, announcing that the drink in hand is both seasonal and rooted in Starbucks’ larger tradition.


Starbucks’ visual communication strategy ensures every piece of visual content is immediately identifiable with their brand. In one of Starbucks’ most-liked tweets of the last few months, autumn leaves communicate the seasonality of the drink while moss connects to the company’s Pacific Northwest roots — no text necessary.

Another tweet reminds customers (without using a single word) that the brand is famous for just how personalizable their products are. Their stores and products project the same visual identity as their social pages. You know a Starbucks image immediately when you see it. That’s effective visual communication.


Starbucks communicates its reputation for personalized drinks, the breadth of its product offerings, and its release of seasonal cups — all in a single, text-free illustration.

But it’s easy to fall short of this goal. A great piece of visual communication should communicate in just the same way as the AdWords interface now strives to: without reading a word, you should be able to look at the design and tell what the graphic is about — what message it’s trying to send.

Here are a few questions to ask to determine whether your visual content meets the standards that your audiences will hold you to. If the answer is “no” to any of these, rethink whether your content is really communicating effectively:

  1. Ask someone unfamiliar with the graphic or video to glance at it for 5 seconds. Can she tell you what the theme is?
  2. Are you using illustrations and assets custom-made for the content, as opposed to cookie-cutter graphics or clip art?
  3. Is the content targeted toward achieving a single goal?
  4. Are both the design and the copy calibrated to attract and interest your target audience?
  5. Have you kept text to a minimum?

2. Visual Storytelling

Every brand has a story to tell, but with more stories to choose from than ever before, keeping an audience engaged can be a challenge.

The answer lies in what’s already interesting to your viewers: we’re living in the golden age of television and online video; game and virtual realities are becoming more complex every day; and websites encourage visitors to interact actively with their content. Storytelling today has to be something users can see, interact with or hear before they’ll share.

Take a look at Carrington College’s informational motion graphic on springtime allergies:

It transforms pollen, white blood cells, and even mast cells into humorous characters to reframe what could otherwise be a boring explanation as a story. Every audience is attracted to stories — it seems to be a part of our human DNA. And with the help of clever visual storytelling strategies, anything can become a story.

Visual storytelling uses visual communication to craft a narrative that explains a concept and often evokes an emotional response. It’s ideal for those marketers seeking to share an idea, promote a point of view, or convince potential customers of the quality and effectiveness of their product. As with visual communication, education is one of the end goals, but this approach aims to persuade the viewer to reach a specific conclusion.

Here are a few elements that make for a great visual story:

  1. Plot: You should carefully guide your viewers from beginning to end.
  2. Priorities: Only use the strongest data and arguments. Too much information is overwhelming.
  3. Audience: Identify a single target audience and create a story they can relate to.
  4. Goal setting: If you’re trying to make too many points at once, or share too many ideas, you’ll end up turning viewers away. A targeted, single goal promotes shareability and engagement.

3. Information Visualization

You’ve got more data than ever and no idea how to cull meaning from that data. Or maybe you do know what it means, but it’s nearly impossible to get your colleagues interested in what that data has to say — much less get your customers so excited that they’re willing to retweet that data to their followers. This is where quality information visualization comes in — and “quality” is the keyword.

Information visualization aims to convey meaning as quickly as possible. The primary focus is to educate the viewer, not to persuade them to form a specific opinion. Information visualization can also be aesthetically engaging and even interactive, as The New York Times proves with its visualization of deportation numbers.

trump-deporation-nytimesMassive amounts of data are made meaningful in The New York Times’ visualization of U.S. deportation numbers. The graphic transforms as readers scroll down. Image Source

But to be effective, you need to use visualizations that stand up to scrutiny, follow mathematical and scientific best practices, and quickly communicate the big picture. Not everyone is up to this task. Here are a few essentials for when you’re visualizing information:

  1. Check your graphs: Using a pie chart for something that’s not a percentage or setting inconsistent scales for your graphs are both big errors that could take center stage instead of your actual message.
  2. Keep it simple: Don’t try to pack too much information into one image. One graph should have one takeaway.
  3. Focus on the message: Getting lost in the data is the opposite of the point. Help readers understand what’s important and why through careful organization of the content, as well as icons and illustrations when necessary.

4. Visual Campaigns

What if you have a more complex story to tell? Most companies do. One piece of content just can’t say everything you need to say.

One piece of content — even if it’s a social post that goes viral or a video that gets thousands of likes — also isn’t likely to assure the long-term success of your company. That’s why more and more organizations are looking at improving their branding by placing more emphasis on visual content and creating a consistent look and feel that will span multiple marketing campaigns and a variety of content types, from motion graphics and interactive pages to infographics and social posts. At the same time, marketing campaigns are now expected to have a consistent and recognizable visual element — something that can be recognized instantly.

Take a look at how Coca-Cola’s one brand campaign launched this year. Its products were available in dozens of countries, with dozens of looks designed for maximum appeal wherever they were sold. It was a massive undertaking, but the company pared down its product design to just four universally recognizable packages.

coca-cola-one-brandImage Source

Coca-Cola’s old strategy was to create new branding for each new product. Now, they’ve united their global branding with four consistent, and instantly recognizable, colors, each of which is visible on all sides, no matter which way the bottle or can is turned on the shelf.

“When people see this new brand identity, they’ll know they’re buying a Coca-Cola,” explained James Sommerville, vice president of global design.

This is all to say that companies are redesigning all their customer-facing content to offer up a consistent visual message. Here are just a few of the benefits of undertaking a visual campaign:

  1. The consistent use of quality assets across your brand communicates an overall dedication to quality that customers today are equipped to recognize and prepared to appreciate through engagement and sharing.
  2. A single face for your visual content communicates that you’re committed to authentic and honest communication — not changing your stripes with every new piece of content.
  3. Multiple visual assets can reach a broader audience because of their adaptability to different platforms.
  4. A consistent look builds brand awareness.


In the end, visual communication is an indispensable tool for any marketer, but execution is key. Not just any visual content will do the job. Consumers ignore sloppily designed or cookie-cutter graphics in favor of those that inspire — not only in how they look but also in how they deliver their primary message. Armed with these essential terms and a list of dos and don’ts, you’ll be well prepared to avoid the pitfalls as you navigate to the visual communications agency that’s right for your brand.

About the Author: Erin McCoy is the Public Relations Manager for Killer Infographics.

from The Kissmetrics Marketing Blog

from WordPress

12 UX rules every designer should know

“User experience” is a broad term that gets bandied around at meetings and swapped with “user interface” as if the two are the same—they’re not. This confusion has probably affected your career as UX and web design roles have slowly started to overlap. Even your clients may be confused as to what exactly your job is.

Like it or not, UX has a huge impact on what web designers do. You can create the best design in the world, but it won’t succeed if it’s not usable. And it won’t be usable unless you know a little UX strategy. These UX lessons will teach you how to improve projects’ usability and make you indispensable to your clients.

1) UX is not UI

Even if you don’t interchange the terms “UX” and “UI”, you’ll likely hear your clients say it at some point. You’ll have to be able to explain the difference between UX and UI so they can understand what is, and isn’t, your job.

User interface refers to the actual system… User experience is about the emotions…

User interface refers to the actual system the client interacts with. The layout of an iPhone’s settings menu is a user interface. User experience is about the emotions the interface evokes during that interaction; the user’s satisfaction with an easy-to-use settings menu is user experience.

Essentially, UX is the totality of the emotions resulting from the UI. Good UX designers understand human emotion and user behavior patterns, because those things affect how users respond to an interface.

2) UX is not just a “web thing”

Web design is only a small portion of UX. Every print design you see, product you use, and even place you go, also has UX. Eating at a terrible restaurant is a bad experience; easily opening a package is a good one.

Offline UX design may seem like a different ball game—after all, creating a navigable website isn’t the same as designing a sports car for people to drive on real roads—but in reality, the two types of UX affect each other.

Nav bars are a great example of how the web and physical worlds overlap. Website navigation used to be on the left side of the page, but somebody realized we prioritize information from left to right—meaning content should be on the left. By the early 2000s, nav bars moved to the right side of the viewport.

If you’re a web designer, it never hurts to brush up on print, packaging, or other types of physical UX design. This cross-training expands your knowledge and helps you see projects from a fresh perspective.

3) UX is art and science combined

Art and science make an odd couple, but that’s essentially what UX is. Understanding how UX combines art and science lets you refine your design process to reach solutions more easily.

UX is scientific in that it poses a problem-solution scenario in which the designer poses a theory about how to fix the problem. So let’s say the problem is an outdated site hurting sales. The designer suggests a way to update the site; through testing and adaptation, that suggestion evolves into a solution.

The solution is where the art comes in. Colors, typefaces, layout, and so forth all combine to create an aesthetically pleasing whole. As with viewing art in a gallery, the design evokes an emotional response, which in turn produces an outward behavior.

4) UX creates goal-driven design

Every designer has dealt with clients who insisted on having things their own way. This creates a conundrum, because the client’s way may not be the only or best way to solve that specific problem. Similarly, some designers think their way is the only way and won’t listen to any other ideas—even if those ideas might work better.

Rather than taking this single-minded approach, UX stems from using goal-driven design to look for the most effective solution.

Let’s say your client wants to move their customer testimonials link to the top of the page so it gets more traffic. But the problem isn’t necessarily the link’s location; it’s that the link needs more traffic. You could also fix the issue by making the link more visible where it’s at. Either solution will solve the problem; being open to those options is goal-driven design.

5) UX showcases your brand

Good UX design reflects brand identity, so it requires you to stay true to the client’s goals.

Once in a while, you may find yourself in a design trance. Colors come easily, type fits together, images are imaginative—and none of it matches your client’s brand identity.

It’s imperative that you don’t get caught up in creating a look that doesn’t meet the client’s needs. And while that sounds almost laughable, it happens much more easily (and often) than you might expect.

Good UX design reflects brand identity, so it requires you to stay true to the client’s goals. Make sure you ask questions about the brand upfront and schedule regular input from stakeholders, who will be able to tell you if you’re sticking with the brand or straying away.

6) UX designs for the user

It sounds silly to say “design for the user,” because that’s what UX is. Yet many web designers are often the victims of their own creativity. Their designs have all the bells and whistles — and even meet the client’s expectations — but they may still not meet the user’s needs.

Designing for the user requires you to do something that’s often difficult for creatives: let go of your opinion. While you may view something as best, it may not be best for that situation.

To make sure you’re on the right track, you’ll want to learn some guidelines to user-driven design. A good rule of thumb is to start by researching different types of users and mapping out how they use the site you’re working on. Before you release the finished design, use A/B testing to verify that you’ve reached the best solution.

7) Identify behavioral triggers

Good UX design relies heavily on psychology. The cool part is, UX designers not only learn users’ tendencies – they can trigger new behaviors that lead to conversions. But there’s a right and wrong way to do it.

Take notifications, for instance. They’re meant to spark a behavior, but it’s easy to forget actually doing the behavior takes time and effort for the user. Some designers bombard users with notifications at the worst times, then wonder why there’s no response.

The trick is to research how users’ motivation changes throughout the day, so you can time notifications accordingly. For instance, receiving a notification on the way to work won’t do any good, because the user has a competing, and more urgent, goal of getting to work. But the same notification received on the way home gets more attention, because now the user actually has time to engage in the behavior.

Your goal is to empower users with a beneficial solution; to help their day go smoother in some way. The more you play to their desires and habits, the more successful your design will be.

8) Encourage scrolling

Scrolling sends users deeper into the site and asks them to invest more time – making them more likely to convert. That’s why some designers place their calls to action at the bottom of the page, where users have to scroll to get to them.

Even above-the-fold sites — which place the call to action at the top of the page to optimize the “love at first sight” principle — can promote scrolling. You can encourage users to spend more time on the site with “scroll cues,” such as an arrow that points down to the next section or partially visible text that requires users to scroll to keep reading.


9) Ask yourself, “What has the user done?”

Before you can start solving a problem, you have to understand what exactly the problem is. You’ll want to analyze the user’s experience on your current site. Ask the right questions to find out how they’re interacting with the site now, what’s working, and what’s going wrong.

If possible, get a little help from the customer service department. Collect their notes on issues clients have complained about, or listen to recordings of frustrated customers. Often, you’ll learn about design issues while customers are ranting about what went wrong the last time they tried to use the site.





10) Let content define the interaction

UX isn’t just about the icons users click or the colors on the page. Almost everything visitors see is content – whether that’s writing, images, or videos. Yet many designers completely skip talking to the content team or developing any sort of content strategy.

A great-looking site is essentially useless unless you back it up with strong content. So on your next design, start asking questions. Are you redesigning a site that already has a voice – and if so, how should you incorporate it? Or are helping set the tone for a completely new site?

The goal is to create content that’s easy to absorb and process. You ultimately want your users to feel as if a friend is guiding them through the site, because a friend would know exactly what they want and show them where it is.





11) Don’t create inconsistency

Users who feel confused are more likely to get frustrated — even if they don’t have the vocabulary to say why…

Inconsistency is one of the biggest problems users deal with. Yet many designers actually try to make their designs appear more creative or memorable with intentional inconsistencies in color or style.

Let’s say you used a nav burger on your homepage, while another landing page features a dropdown arrow. Both icons technically do the same job, and the homepage has its own unique look. However, users developed an impression of your site while they were on the homepage. Seeing another type of navigation on other pages conflicts with their initial impression, creating confusion.

Users who feel confused are more likely to get frustrated—even if they don’t have the vocabulary to say why—and they won’t come back. A consistent site, on the other hand, lets them take care of their business without pondering your stylistic choices.


12) Eliminate pointless page elements

UX design has evolved a lot over the last decade, as the internet shed its gawky teenage phase and morphed into a sophisticated adult. Gone are the days of too-bright colors and nav links scattered across the page. Today’s site is streamlined for good UX.

So why mention eliminating pointless page elements? Because “pointless” has gotten a lot more subtle. People aren’t making the same gaudy mistakes – well, in most cases. Today, a pointless page element might be a call to action with two commands instead of one, or an image that draws the eye away from where it should go.

To get rid of these things, you’ll have to learn how to gauge an element’s value. A good way to check for useless elements is to get into the user’s mindset – ask yourself how each element makes you feel and whether it helped you reach your goal.


You may not be a UX designer. But when you start applying the principles of good UX design to your web designs, you’ll find yourself creating better, more effective websites. That’s the goal of a good design, after all — to guide the user to the information they need and show them what to do with it. With the help of these tips, you can implement UX design and spark a positive reaction in your website’s users.

Creative 3D Lettering Mega Bundle – only $10!


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

from WordPress

Tuesday, December 27, 2016

Designing effective web surveys

Web surveys are important tools that websites and businesses can use to gauge important feedback from their site visitors and customers. Web surveys are also somewhat unsung elements of a site because their role is primarily to collect data instead of being a main feature.

In e-commerce, and in any business really, determining what your customers want is largely based on directly asking them. Plus, doing so will also give you amazing insight into the user experience—what’s working, what’s not, and what could and should be improved!

So, as you see, using web surveys offers a lot of benefits. Of course, designing them properly has a lot to do with whether or not they’re successful for any site.

We’re going to skip the part about defining your survey’s objective and being clear on the type of feedback you want since that’s a given for any successful survey. Rather, we’ll only focus on the survey-design aspect.

1) The use of images

You probably have a belief in your head that a web survey should be mostly just a bunch of rote lines all up and down the webpage, with each line asking a question. While that’s definitely the classic or old-school idea of a survey…designing it in such a stark and empty fashion won’t do any wonders for its conversion rate!

Using images throughout your survey—intelligently spaced and breaking up different sections—has been proven to influence the conversion rate, but also other, very important survey behaviors.

Survey Monkey ran an interesting experiment tied in to the 2015 UK elections. They had three treatments of their survey design, each with three, unique images—which was the only constant variation in the design (they phrased the question of who respondents wanted as PM differently in two of three designs). They wanted to determine how the click and completion rates were affected.

The images they used were:

  • The entrance to 10 Downing Street (where the British PM lives).
  • A color-coded map of the UK, colored by party representation.
  • Rosettes (ribbons for military decoration).

The map image performed the best in terms of the click rate, which was 9.3%. The Downing Street entrance did the worst with only 5.9%, and the rosettes has 8.2%.

On the completion rate side, the images didn’t really affect this stat, as both the map and Downing Street images had a completion rate of 89.9% while the rosettes did a bit better with 90.9%.

This makes a lot of sense, as images have been proven to affect the conversion rates of sites. On the web, using images in your design always leads to better results.

So when you’re designing surveys, don’t just include images, but think carefully about the ones you’re using. In surveys, they should relate somehow to respondent characteristics for maximum impact.

2) Understanding the limitations of mobile

When it comes to mobile, surveys are a double-edged sword. On one hand, more people are now using mobile than desktop, so more people than ever will be taking your survey on their smartphones. Unfortunately, the survey user experience is just worse on mobile for a number of reasons.

The big problem is time. Surveys on mobile take users anywhere from 11% to 50% longer to complete than those on desktop. Users and customers today value speed more than anything in UX, so the length of time for survey completion on mobile is definitely a big cause of friction.

This slowness boils down to three reasons in particular:

  • Server connections on mobile are just slower than high-speed, desktop Internet.
  • The smaller screen sizes of mobile make it harder to read and get through survey questions.
  • Users are just more distracted on their smartphones, particularly when attempting to do surveys in transit.

What can be done about this slow mobile speed?

For starters, don’t use matrix questions, which are those multiple questions shown on a grid. You’ve seen them anytime you’ve ever had to answer a survey question, but they aggravate the UX by forcing users to scroll up and down and left and right. Doing all of this on a small smartphone screen is clearly a nuisance. Instead, forego multiple choice questions and answers with more direct questions that only require a yes or no answer from users (and, therefore, no need for a grid).

Keep the length of your surveys relatively short to increase completions.

Of course, remember to always test your survey across various devices: iOS, Android and desktop.

Above all: Design for user experience

Designers and developers are always taught to first design for the user experience. Designing a web survey can be a tad tricky since you’re not dealing with a conventional page, but it’s a great chance nonetheless to apply all that you know about designing for great UX.

The Laboratory for Automation Psychology and Decision Processes at the University of Maryland provides a set of helpful guidelines in web-survey design. The basic principles all have to do with presenting the survey in a user-friendly way.

Some helpful pieces of design advice include:

  • Putting your logo at the top left of the page and the navigation menu vertically, on the left side of the page.
  • All questions and answers should be left-aligned.
  • The response format should be positioned to the left of all response categories.

Besides these, it’s always a good idea to use design elements that encourage easy reading since your users/survey respondents will be scanning the length of the page to read the questions and, hopefully, complete the entire survey.

Further good practices include:

  • Using enough white space between the individual questions so users can focus on one question at a time without feeling like they have to squint or try hard to guess what the question is asking.
  • Using a size of font that’s easily readable on the web, especially on smaller screens for mobile; according to research from UXmatters, that would at least be 4-point for small mobile devices and 6-point for bigger mobile devices.
  • Using, if possible, numbers and/or bullet points to further break up the questions into smaller, more easily digestible chunks of text that’s easier to skim.

Overall, the web survey you design should be a joy to move through and answer—not a detestable chore that your users won’t finish.

Points to consider

Web surveys can be an effective tool to get feedback from users, readers, clients and consumers of any given site. The catch is that they have to be designed for usability, so the respondents don’t abandon the survey before completion. You want good, usable data from any survey that you create!

So remember some important guidance:

  • Definitely use images, but be choosy and only use those relevant to survey respondents.
  • Always design your survey for mobile since more and more people use mobile even to answer surveys these days.
  • Follow basic UX principles to ensure survey readability and usability.
Robust Business Card Creation Kit from Graphicdome – only $9!


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

from WordPress

Monday, December 26, 2016

7 key attributes of a quality UI

User interface design is a hot topic these days and for good reason. In a world where digital experiences are such a large part of our lives, the value of a quality user experience is higher than ever. Not only is it important now, but the quality of user interfaces is bound to be even more important in the future given the tremendous growth of mobile, digital, and the Internet of Things.

From web sites, to displays in our cars, to thermostat controls in our homes, user interfaces of all types make up much of our daily experience. Taking into account that users are becoming more experienced with digital displays and are expecting better experiences than they were willing to put up with just a few short years ago, it is imperative that businesses carefully consider the quality of the experience they create for their customers.

But what makes a quality user interface?

1) Simplicity

Great user interfaces tend to be nearly invisible. They are not made up of gaudy adornments or unnecessary elements. A quality user interface is made up of necessary elements that are logical and concise. While you are working on the design of your interface, ask yourself “Does the user really need this to compete their task?” before adding features and content. Limit your interface to the items that are essential for the user. Don’t add items just to feed your ego, but rather, focus on the quality of the user experience.

One company that does a great job with this concept is Maaemo. On this Norwegian restaurant’s website the very first thing you see is the option to book a table, other options are hidden behind a hamburger menu to avoid clutter. No time is wasted scanning through complicated navigation trying to figure out where to go to book a table.

2) Clarity

Clarity is one of the most important attributes of any user interface. Keep in mind that your user interface exists for the sole purpose of facilitating users interacting with your system. To do this it must clearly communicate with users. If users can’t figure out how to use your interface easily they will become frustrated and abandon the experience.

To help improve clarity, create clear and concise labels for buttons and actions. You want to keep your messaging simple to improve the experience as well. The easier your labels, navigation and content is to read, the easier it is for users to understand what to do.

Remember though that the first attribute was simplicity; you want to keep that in mind with your labels, definitions and explanations. Avoid cluttering up your interface with lengthy explanations.  Your users will not read or appreciate them and they will only get in the way of the user experience.

It is better if you can explain a feature in one word instead of two. Save your users the reading time and cognitive strain by keeping your labels and messages concise. While keeping text both clear and concise may require some effort, it is well worth it to improve the user experience of your user interface.

3) Consistency

With your user interface, you will want to maintain consistency throughout the entire experience. Consistent interfaces will allow your users to rely on and develop usage patterns that will improve the experience. People crave consistency and you should give your users the opportunity to be proven correct when they rely on it.   

They want an experience where if they learn to do something, they will be able to rely on it working the same way on other screens. Maintain language, layout and design throughout your interface. By doing so you make it easier on your users to understand how things will work, increase their efficiency and improve the user experience.

4) Familiarity

One of the goals of UX design is to make an interface intuitive for users. Let’s consider what intuitive means when it comes to user interfaces, if your interface is intuitive, it can be naturally understood by users. To do this, it is important that you leverage familiarity in your design.

Your interface will feel familiar if users don’t have to think how to use it because they already understand it. When users are familiar with something, they know what to expect and don’t have to think about what to do. Because of this, work to identify areas of your design where you can leverage familiarity to make interacting with your system easier for your users.  A current example of this would be the hamburger icon seen on so many apps these days. Any time you see this icon you instantly know where the menu is and you don’t have to stop and look for the menu and think about what you are supposed to do. It comes naturally because you are familiar with this icon.

The Born Shoes web site helps illustrate this concept. Familiar icons are placed in a familiar position making it easy for visitors to know what to do.

5) Visual Hierarchy

One attribute that is often overlooked but is important to a quality UI is designing your interface so that it allows users to focus on what is important. If you try to make everything look important you just create information overload and reduce the quality of the user experience. The contrast between the different sizes, colors and placements of elements should work together to give a clear understanding of your interface and what a user should do. A well designed visual hierarchy reduces the appearance of complexity and helps users accomplish their tasks.

The Budnitz Bicycles website shows how the use of color can help create a visual hierarchy that draws users to a particular section of their web site. Here their shop button stands out and guides visitors.

6) Efficiency

Your user interface is how a user will get to where they want to go and do what they want to do. A quality user interface allows users to perform tasks with speed and ease, in other words, it operates with efficiency.  One of the best ways to improve the efficiency of your interface is through task analysis.

To perform a task analysis, consider the activities and tasks users are most likely to perform and then streamline the process to make each as quick and easy as possible for users. Consider carefully what functions it needs and what goals users are trying to achieve. Rather than just creating a list of where users can navigate, consider what your users are going to want to do and help facilitate those activities through your design.

Mulberry provides an excellent example of this with their website over the holidays. Anticipating visitors looking for holiday gifts they allow users to shop for gifts without having to work to do so.

7) Responsiveness

When it comes to the responsiveness of an interface, you should consider a couple different forms of responsiveness. To begin with, a responsive interface is fast. You want your interface, and the system behind it, to work fast. Users easily become frustrated having to wait for a web site to load for instance.

In fact, these days if your web site hasn’t loaded in three seconds you will start losing visitors quickly as they just start hitting the back arrow on their browser. According to Kissmetrics, 40% of people will abandon a website that takes more than 3 seconds to load and as more time passes even more users will hit the back arrow. Mobile apps and web sites that load and operate quickly improve the user experience.

Additionally, when you think about responsiveness you should also think about your interface responding to users. Your user interface should provide feedback to the users. Let your users know what is happening and that their effort to engage with the interface has been understood. For instance, create a response to let them know they have pushed a button successfully or create a progress bar to let users know the next screen is loading so they don’t assume it is stuck. These types of feedback improve the user experience and reduce errors. 

20 Fabulous Handwritten Fonts from Area Type Studio – Only $19!


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

from WordPress