choosing-the-right-ui-component-for-communication-with-your-users

Adam Shriki

In this article, I’ll explain how to choose the right UI component for the type of message you want to deliver to your users. For this purpose, I created a friction scale which rates UI components according to the level of friction they create for users.

Why do we need this?

Communicating with users is crucial.

Messages can be delivered in many ways and by different mediums. Different stakeholders in the company want to deliver different kinds of messages — product owners might want to let users know about new features, marketing managers want to upsell or advertise, and support agents want to help users complete certain tasks or flows.

Creating a structured scale for different types of messages will help us organize and prioritize our messages. This will help our users understand us better and hopefully, even love us.

So, how do we make the right choice?

(10) Highest friction

Push Notifications

When allowed, push notifications deliver high friction messages on mobile and web applications. They show up on top of everything else, usually accompanied by a sound, even if the user isn’t currently using the app.

Use push notifications to:

1. Deliver high priority call-to-action messages

2. Let users know of something valuable for them

How to use push notifications?

To be able to send push notifications to your users, you need to first ask for their permission. Ask users for permissions at the exact moment they might benefit from granting it. Use notifications wisely and cautiously so users will develop empathy towards your messages, rather than resentment.

Examples:

  • New in app message
  • New opportunity according to current location

(9) High friction

View

Some content is best experienced in a separated ,dedicated view, allowing users to focus on one individual object and its related actions at a time.

It is the highest friction inducing form of showing content inside the app, so its use should be justified.

Use View to:

1. Focus and engage users more deeply with specific content and its related actions.

2. Show complicated data that requires a lot of on-screen real estate.

How to use a full-screen view?

The purpose of a full-screen view is to bring users’ focus to a surface that appears in front of all other elements on the screen and goes away only when they perform a specific action.

Examples:

  • Object View
  • 404 screen
  • Login screen

(8) High friction

Dialog / Modal

Dialogs appear without warning, requiring users to stop whatever it is they’re currently doing. Use them sparingly, since not every choice or setting change justifies such an interruption.

Use dialog boxes to:

1. Keep users in a certain flow — allow users to perform a particular action without exiting the screen they’re currently on.

2. Capture users’ focus and remove secondary distractions.

3. Bring attention to a choice users need to make or

to specific information they need to know before moving forward.

How to use dialog boxes?

Dialog boxes don’t fill up the entire screen and users can perform an action to make them go away. They’re interactive notifications meant to inform users before performing an important action.

Examples:

  • Confirm a deletion
  • Making a BIG announcement
  • Critical error message

(7) High friction

Banner

Banners display important, succinct messages and provide optional actions for users.

They should be displayed at the top of the screen, below a top app bar. Since their location is consistent and they’re non-modal, they allow users to either ignore them or interact with them at any time.

Use banners to:

1. Inform users of site-wide issues.

2. Display warnings or errors that will directly impact users’ ability to

complete certain tasks.

How to use banners?

A banner persists over a session and appears without any action from the user’s side.

When scrolling, banners typically move with the content and scroll off the screen. Only one banner should be shown at one time.

Examples:

  • NPS survey
  • Trial ended message
  • License expired notification

(6) Medium friction

Growl

A Growl displays a promoted message without interrupting the ongoing use of the app.

In addition to text, it usually shows an image or an icon, as well as a CTA that contains a deep link or an external link.

It floats on top of all other elements at the bottom left or right corner of the screen and needs to be explicitly dismissed.

Use growls to:

1. Promote certain communications without disrupting users.

2. Show warnings or alerts that were triggered in the background, not by a process but by a state, and don’t have an immediate effect on users.

How to use growls?

Display growls at the bottom left or right corner of the screen. They can be triggered by background state and/or by a person from your marketing, support or product department who wants to promote an announcement.

Examples:

  • New feature announcement
  • Background warning update

(5) Medium friction

Snackbar / Toast

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, at the bottom part of the interface. They shouldn’t interrupt the user experience and don’t require any user input to disappear.

Use snackbars to:

Provide lightweight feedback about an operation.

How to use snackbars?

Snackbars automatically disappear after four to ten seconds, to allow users enough time to read the message, without blocking the information behind them for too long. Snackbars can optionally include a single action and can stay on-screen permanently, until swiped off.

Examples:

  • Message sent successfully
  • Document ready for download

(4) Low-Medium friction

Popover

Popovers contain helpful information like explanation of context. They appear next to the relevant element and may contain actions related to it.

They can be triggered independently or by a certain action.

Use popovers to:

1. Provide extra information that might be useful, combined with the question mark icon.

2. Provide direction for filling out a form.

3. Offer more actions related to a certain element in the interface.

How to use popovers?

A popover is displayed upon tapping or clicking a certain element on the screen. Usually a popover appears with an arrow pointing at the pressed button so it remains constantly visible to the user.

Examples:

  • Explanation about a new element
  • Information tooltip including an action

(3) Low friction

Callout

Callouts are text excerpts, used as a visual cue to draw attention to the text. They’re used to help direct users towards important pieces of information. They should appear on top of the element they refer to, without blocking any other part of the interface. They should be short, easy to scan, informative and clear.

Use a different color for callouts that contain error messages.

Use callouts to:

1. Warn users before asking them to take action. This is usually done in anticipation of a significant change.

2. Let users know something has gone wrong after they’ve tried to do something — as an error message.

3. Let users know they have successfully completed an action — as a success message.

4. Alert users about additional information without requiring an action — as an informative message.

How can it be used?

Callouts can contain an icon, a title and a message. There are four different types of callouts: success, warning, alert & informative. Deciding whether to use a callout or a different component depends on the level of information you want to deliver.

Examples:

  • Announcing new elements were added
  • Warning about a settings change that can harm your computer

(2) Low friction

Tooltip

A tooltip is a brief, informative message that appears when a user interacts with an element within a graphical user interface (GUI). Tooltips are usually triggered in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture. Tooltips are highly contextual and specific and don’t explain the bigger picture or the entire task flow.

Use tooltips to:

1. Provide information for unlabeled icons.

2. Provide descriptions or explanations for their paired element.

3. Don’t use tooltips for information that is vital to task completion.

How can it be used?

1. Provide brief and helpful content inside the tooltip.

2. Support both mouse and keyboard hover.

3. Use tooltip arrows when multiple elements are nearby.

4. Ensure it has moderate contrast against the background.

5. Position the tooltip so it doesn’t block related content.

6. Use tooltips consistently throughout your site.

Examples:

  • More info
  • User Onboarding guide
  • New small feature announcement

(1) Lowest friction

Email

Email messages are relayed through email servers, provided by all Internet Service Providers (ISP).

Emails are transmitted between two dedicated server folders: sender and recipient. A sender saves, sends or forwards an email message, whereas a recipient reads or downloads the email by accessing the email server.

Use emails to:

1. Activate user accounts

2. Deliver welcome or onboarding messages

3. Invite or share content with other users

4. Notify about activity

5. Send reports and dashboards

6. Reset password or perform two-factor authentication

7. Notify users regarding security issues or changes in their account

How can it be used?

While emails are low-friction, they should be fully customizable so each user can tailor them to their own interests.

Emails should always be personalized to match the current progress and state of the recipient within the product.

Emails can contain both marketing and product content, but the message should always be clear and focused.

We’ve seen many different types of messages used for different purposes. Choosing the right element depends both on the content and the context of the message.

Have fun in the world of non-disruptive messages!

choosing-the-right-font-for-your-design

Dorjan Vulaj

Typography = Pretty Font. Right?

The main purpose of typography is making it easier to read what you’ve written. It makes it possible to quickly scan your text. When done well, it enhances the message it presents.

Typography can change the entire look and feel of a presentation, it can convey a certain mood or feeling.

On a website, choosing the right font design has this “magical” power of making your website look better, causing your visitors to feel more at ease, thus improving their experiences on your website.

These different typefaces are the main classifications used in 80% of today’s writing and content.

It’s better for a typeface to be clear and legible, rather than so unreadable that it’s distracting from the overall communication goals of the design.

If someone has to spend an extra 3 seconds to understand what has been written, then they will disregard your design.

Typefaces have personalities. A font you select should embody the character and spirit of your brand. Try to match the font style to your brand’s character.

You will need more than one font to make a design work, especially if you’re working on a webpage, but not more than 5 fonts. You have to make sure that the fonts you use are similar enough to complement each other, but different enough to show the distinction between them.

For your main paragraph font, the most formatting you’ll likely need is boldness, italics, and underlines. However, for various reasons you might want to use even more varied font formats, for things such as quotes. In this case, it’s best if you choose a font that has enough weights that can properly convey this information.

There are so many amazing creative designs out there that show how the right choice of font creates a masterpiece. See what fonts similar brands are using. Take a look at your competitors’ styles and collect your favorites.

Of course, getting inspiration from other designs does not mean that you will make your design very similar to it. You have to find ways to make your design stand out. Don’t be afraid to experiment and be bold with your choices.

There are no “wrong” or “right answers”

As you build your own skills in selecting typefaces, you’ll develop your own rules about choosing type.

picking-the-right-stock-photo-for-your-next-design-project

Valia Havryliuk

While building a website, iOS app, or another creative project, we will use eye-catching visuals. Those pictures will trigger specific emotions among our users and will emphasize the goal behind the design. Also, they will reflect a brand’s voice, style, messaging, and target audience.

As a marketer and junior designer myself, I often look for nice visuals. I use them in articles, pet projects, banners, new adds or posts in social networks. With the power of resources mentioned in this guide, I can find hundreds of beautiful stock photos and images. And it doesn’t take me ages.

Now I am happy to share my collection of stock photos & image sites with you. Enjoy!


Pexels and Pixabay — well-known platforms for great free images:

  • Pexels provides high quality and completely free stock photos that are nicely tagged and easily searchable. Also, you can follow your favorite photographers there.
  • Pixabay has a broad library of 1.5 million royalty-free stock videos and photos shared by their community. Their images are searchable using a search bar. Content can also be filtered by type.

Unsplash — a great collection of over 1 million beautiful photos contributed by their community of photographers. You can search by keyword, view trending images or browse through their collections.

FOCA — just amazing photos provided by Jeffrey Betts. It spans many categories, including nature, city scenes, workspaces, and macro photography. These photos are breathtaking, right?

FreePhotos.cc — absolutely free resource full of commons photos for your website or print projects:

  • gathers images in one place for easy preview and download,
  • all photos are put under 100 categories, from “art” to “yoga”.

Magdeleine — a blog that features the best free high-quality stock photography for your inspiration. Easily search by categories, license, tag or even by dominant color.

pxhere — is another image website that has a similar look to Pexels:

  • makes it easy to find an image and offers a search bar & a tag system,
  • all free stock photos can also be filtered using colors.

Reshot — a massive library of handpicked free photos that don’t look super corporate and boring. It’s built for startups, freelancers, and makers who are sick of creative photos you won’t find elsewhere. The main page features trendy photos and a search bar to look for your own.

StockSnap.io — their aim to make it easier to find, share and use amazing photographic imagery for any creative project:

  • find hundreds of absolutely free high-resolution images that uploaded weekly by the online community,
  • offers a search bar for finding the right image and no login or account is needed to download images.

SkitterPhoto — here you’ll find a wide variety of authentic stock photos. The main page features admin picks and the newest photos. Also, it offers color palettes and tags to use as a filter.

Burst — a free stock photos and textures platform that is powered by Shopify:

  • various categories such as animals, business, family & much more,
  • it sorts by favorite, newest and top pictures, also can be filtered by tags.

  • We need to have more diverse visuals, as a way to show more voices. Check WOCinTech Chat to find photos of women technologists of diverse backgrounds. And take a look at The Gender Spectrum Collection that features images of trans and non-binary models that go beyond the cliches.

  • Are you looking for realistic food photos? FoodiesFeed is the most delicious website I’ve ever seen. It collects thousands of naturally looking food photos made by professional food photographers, food bloggers or passionate foodies.
  • For all who want to recapture history through cool vintage photos — New Old Stock. It’s a growing collection of vintage photos from the public archives.
  • If you want to make a stylish blog using just one color palette, check Duotone. This awesome tool quickly adds a duotone effect to photos. You can search thousands of images via Unsplash or drag and drop your own images into the browser.



what’s-the-right-approach-to-online-marketing-for-your-business?

When it comes to online marketing, there’s a lot of advice out there. I can’t criticize, I’m responsible for a good deal of it myself.

But, everywhere you look, it seems like there’s another person sharing their latest marketing innovation, best practice or hack. It’s almost impossible to keep them all straight, let alone decide which ones are relevant to your business.

So what do you do? How do you sort through all of the clutter and pick a marketing approach that will work for you and your company?

To be honest, the secret to effectively marketing your business isn’t the latest best practice or marketing hack. Those might be tools in your marketing tool chest, but they won’t do you much good if your fundamental approach to marketing isn’t solid. In fact, if they distract you from focusing on the most important things for your business, they can actually do more harm than good.

With all that in mind, let’s take a look at why you should take most marketing advice with a grain of salt and a few reliable marketing approaches you can use to get consistent results.

The problem with most marketing advice

When it comes to marketing advice, there’s one thing you have to keep in mind: almost all marketing advice comes from marketers. And marketers are constantly trying to sell something.

Even when they’re not directly trying to sell you on a product or service (or their breakthrough, ultra-secret methodology that will make you an overnight millionaire), marketers can’t help but market. It’s instinctive for them. If they want you to believe in their breakthrough or hack, they’ll do their level best to make it seem awesome.

There’s nothing wrong with that…as long as you remember one thing: your results may vary.

No two businesses are the same. Even direct competitors can struggle to effectively replicate each others’ marketing secret sauce. There’s nothing wrong with that, but this point often tends to get lost once marketers start talking about how great their latest idea is.

So, the next time you’re reading about the latest and greatest in the marketing world (including this article), remember, just because something worked for someone else, that doesn’t mean it will work for you. There’s a lot other people can teach you, but ultimately, what’s right for your business will be specific to your business.

How will you approach marketing?

In light of all that, you might be wondering, How do I know what marketing strategies will work for my business?

That’s a great question.

While there are countless different tricks, tactics and hacks you can use to promote your business online, most of them fall into three basic categories. In my experience, as long as your marketing is effective in at least one of these areas, you’ll be successful. So, it pays to understand each of these marketing approaches and which one(s) you want to use for your business.

Ideally, you want to be strong in each of the following areas, but that can often be overwhelming, so start by trying to identify which sort of strategy best fits your company’s personality, needs, and brand.

1. Create something compelling

Although we all love fun, engaging and compelling content, let’s be honest, most marketing is boring. For every truly brilliant ad or article, there are a million utterly forgettable ones.

But here’s the thing. People want to see something fun, funny, entertaining, novel or just plain compelling. They don’t actually hate marketing – they just hate boring marketing. So, if your company can be clever, thought-provoking, soulful or hilarious, people will naturally be interested in your marketing. 

Engaging content stands out from the crowd. It gives people something interesting to look at, think about and share with others – even if that content isn’t all that unique or different to begin with. 

Take the following image from “The Art of Manliness,” for example.

Squatty Potty a cultural phenomenon.

Obviously, you shouldn’t expect Squatty Potty success from your own marketing, but the point remains that engaging marketing works. There are countless examples of business that made their mark by creating content that their customers love.

The downside to this approach, of course, is that putting together compelling content takes a lot of creativity and work – which is a big part of why most marketing content isn’t all that compelling. If you or your business isn’t creative or willing to put in the time and energy to create engaging content, this approach might not be for you.

But, if you love the idea of creating compelling, stand-out content, this sort of approach can do wonders for your business. Marketing like this makes people remember your business and want to follow you for more great content. It isn’t easy, but it can certainly produce great results.

2. Strike first

Sometimes the easiest way to win against your competitors is to beat your competition…to the competition. It’s not hard to get clicks when your business is the only option people see.

And, when it comes to online marketing, there’s always something new to try.

Social media platforms, ad formats, campaign strategies, those hacks and breakthroughs we mentioned earlier—they all fall into this category. Anytime a new option comes around, if you can be the first one to figure out how to make it work, you win. How much you’ll win may vary, but you’ll almost always have a market advantage until your competition catches on.

The problem is, though, striking first is probably the most popular approach in this article. As marketers, we love shiny new toys, so most businesses eagerly look for the next big thing that will allow them to achieve maximum success with minimum effort.

As a result, the long-term effectiveness of this strategy tends to wane with time. The more people who start using the platform, tactic or ad format, the more competition you have and the less exciting your results become.

Take Facebook Ads, for example. 

Not too long ago, you could get clicks for pennies and there weren’t a ton of businesses running ads. These days, however, Facebook is crammed with ads and the cost per click is pushing up against two dollars.

For advertisers who figured Facebook out early, it was a real cash cow. But, nowadays, you have to have a solid strategy just to make any money with Facebook Ads.

The other challenge with trying to be first is that it can sometimes be hard to predict which options are worth investing in and which ones will be a waste of time and effort. For example, remember Vine?

During its hey-day, Vine was a hub of content creation. Accounts that created memorable video snippets became incredibly popular, almost overnight.

CPC that makes your competitors green with envy.

The point is, most business success doesn’t happen overnight – even if it looks like it does. Behind every story of overnight success are countless days and nights of work. But nobody mentions all of the blood, sweat, and consistent effort that lead to a sudden stroke of brilliance. All we see is the end result – and then wonder why we can’t achieve the same thing without all of the effort.

If there’s one thing that I’ve learned in my career, it’s that consistently doing the right things usually yields results over time. It’s not always fun to be patient, but eventually, it pays off.

Of course, if your business is struggling to keep its head above water or patience and consistent effort make you miserable, this approach can be hard to employ. But honestly, even if your focus is on one of the other approaches we’ve discussed in this article, you’ll always be well-served by being consistent in your marketing.

Conclusion

With all the chatter out there about online marketing strategies, hacks and breakthroughs, it can be easy to get confused about what applies to your business…and what doesn’t. But honestly, most marketing advice fits into one of the three categories we’ve discussed in this article: 

  1. It helps make your marketing more compelling
  2. It’s a new idea that most businesses aren’t trying
  3. It’s something that needs to be done consistently to yield good results

Understanding which of these approaches you want to focus on in your business can help you figure out which strategies to try and which ones to ignore. If creative, compelling content simply isn’t your strong point, don’t try to implement a big, bold, attention-grabbing strategy. Instead, focus on tactics that play to your strengths.

Your business is unique. You don’t have to replicate what someone else does to be successful. You just have to figure out what makes your business special and the best way to communicate that to your audience.


Opinions expressed in this article are those of the guest author and not necessarily Marketing Land. Staff authors are listed here.



About The Author

Disruptive Advertising, Jacob has developed an award-winning and world-class organization that has now helped over 2,000 businesses grow their online revenue. Connect with him on Twitter.




how-to-choose-the-right-font-for-your-website

When it comes to website fonts, there are so many things to look into, and it can get real overwhelming real fast. That’s why it’s best to start from the very basics before going any further.

  • Should you go for Serif or Sans: this is one of the elementary font category classifications. Based on the Roman alphabet, Serif typefaces are characterized by a decorative stroke located at the end of the vertical and horizontal strokes of the letters.

Some of the most famous serif fonts include Times New Roman and Georgia. The Times New Roman font in particular falls under the category of classic web-safe fonts. Overall, you can’t go wrong with choosing default font types such as this one, as they are usually easy to read and have been around for a long time, so lots of internet users are used to them. Still, if you’d rather try a bolder approach, then we recommend checking out fonts such as Noe Display, Freight Text or the Portrait collection. Of course, there are always Google’s serif typefaces that you can use for free, such as Playfair Display, Cormorant Garamond, or Crimson Text, to name a few.

Sans typefaces have no serifs on the letters (the word “sans” stands for “without” in French), and they are known for having a more modern and clean design compared to their serif counterparts. Helvetica, Tahoma, Verdana, Futura, and Arial are all examples of widely used sans serif fonts. As for free fonts, we suggest trying out the following for the Google Fonts free font library: Roboto, Source Sans Pro, Poppins, Heebo, or Montserrat.

What type you will choose largely depends on your target audience and the mood that you want to evoke with your font design. Generally, serif typefaces are used with the intention to bring forward a more formal and elegant tone. Though they can also be used to give an alternative look to your web page, and can often be found in magazines and within the fashion industry.

Sans fonts, on the other hand, most often symbolize minimalism, simplicity and straightforwardness. However, one of the great characteristics of sans serif fonts is that they are highly flexible. For example, if paired with an old style typeface, a sans serif can take on its qualities, in turn giving off a more traditional vibe.

  • Kerning, leading and tracking: these three design elements can be vital when figuring out the look of your typeface. These methods have the purpose of modifying the space between letters in order to get a visually pleasing and easily readable font. Kerning stands for the space between two letters, leading represents the space between lines of text, and tracking (or letter-spacing) is the spacing between groups of letters.

  • Contrast: in typographic web design, contrast is used to emphasize different chunks of text in a multitude of ways, all with the purpose of making the important parts stand out more. Different contrast types include size, weight (making certain parts of the text appear bold), color, form (for example, capital or lowercase letters) and structure (different forms mixed with different typefaces).

  • Alignment: figuring out how the text will be placed on the page is also an element that can contribute greatly to your font design. You can align your text to the left, right, or center. In addition, you can choose whether you want the text to be ragged on the right or justified.

Generally speaking, the text aligned to the left is the easiest to read.  Fully justified text is considered more formal as it lines up evenly on both sides of the margin, while ragged text has a reputation of being more informal and friendly. You can set up your alignment depending on your audience type, their expectations, and whether you have to think about the space limitations or not. In case you have to make full use of the writing space, then, by all means, go for the justified alignment. And if you want your perfectly aligned text to appear less dull, you can always divide different parts of the text by inserting some visuals or a subheading in between. If you do this, make sure to wrap your text around the images to give your page a cleaner and organized look.

When aligning your text, you should also pay attention to Line Length (the distance between the left and right side of the text block). The most effective way of measuring line length is by average characters per line. The optimal line length is from 45 to 80 characters, including spaces.

setting-the-right-goals-&-expectations-for-your-web-design-business

Motivational speakers love to tell us to “dream big”. And while that certainly sounds inspirational, it should probably be taken with the proverbial grain of salt. This is especially so when it comes to running a business.

Within the realm of web design, it’s hard not to envision ourselves at the top of an empire – one built on our own hard work and great ideas. When you see some of the real-life success stories and combine them with those too-perfect social media profiles, it’s only natural to want a piece of the pie.

Yet, reality can be altogether different. For instance, it’s quite unlikely we’ll hit the e-commerce jackpot like Jeff Bezos. And we may not have the status symbols of a social media star. When this realization hits, it can make us feel as if we’ve failed.

But that’s not necessarily the case. Quite often, so much of finding success is about setting the right goals and expectations. The following are some tips on how to do just that.

Be Inspired by Others, Not Bound by Them

Looking at a person or business that you admire, one that has “made it”, can be a great source of inspiration. If they did it, why not you?

Indeed, there’s something exciting about acknowledging someone else’s success and wanting to emulate it. Having real-world examples to turn to makes for a great resource when building up your own business. The key is in knowing where to draw the line.

We are all individuals who have different skillsets, face different challenges and even live in different parts of the world. Therefore, one person’s blueprint for getting to the top may not necessarily be the same as yours. And just because they’ve accomplished something – wealth, vast knowledge, top-flight projects – doesn’t mean your experience will be exactly the same.

Everyone’s path is going to be different. And while it’s great to have others in the industry to look up to, we shouldn’t set our goals based solely on what they have done. After all, we don’t work just to compare ourselves with other designers. Doing so doesn’t sound very fulfilling, does it?

Instead, it’s about doing something we love and, hopefully, satisfying our clients. The goal should be to become the best version of ourselves and not simply living up to what others have done.

A woman relaxing in a swimming pool.projects or maybe even partnering up with another designer.

Regardless of what you’re looking for, the answers will provide you with a solid base when it comes to setting expectations.

A pathway.broken websites, handling finances and generally doing the grunt work that takes us away from the fun, creative stuff. It’s pretty much the opposite of those big dreams.

So, maybe the balance we need is more about improving reality, rather than striving to live in a fantasy world.

For example, if you’re not satisfied with the types of clients you’re getting, think about what it will take to level up. Perhaps it will require you to learn some new skills or narrow your focus when it comes to the types of projects you take on.

The idea is to make your day-to-day existence a more accurate reflection of who you are and what you want to do. Sure, the big picture is still important. But it’s those smaller, more incremental changes that can end up making the biggest difference.