things-that-will-scare-your-web-design-clients

Dealing with concerned clients can be a challenge for numerous reasons. I liken it to running around with a fire extinguisher, desperately trying to put out blazes large and small. But it’s not just the panicky ones who need the occasional dousing. And it’s not necessarily their fault.

The web can be a scary place – even for seasoned designers. Trying to wrap our heads around privacy issues, security, accessibility and new technologies can make anyone’s head spin. So, just think of what they can do to the people who depend on us for help.

In some ways, it’s even worse for our clients. Why? Because there are any number of bad actors out there who are constantly trying to trick them, hack their site or otherwise extort a few extra dollars. Not to mention the perfectly legitimate things that, while innocent enough, can put a non-techie into a cold sweat.

With that in mind, here are a few items that tend to put even cool clients into panic mode. But don’t worry. Each one includes some tips for talking them off the emotional ledge.

The Web Designer Toolbox

Unlimited Downloads: 1,000,000 Web Templates, Themes, Plugins, Design Assets, and much more!

Mysterious Spam Invoices

If you own a website, or even a domain, odds are you’re going to start receiving all manner of nuisance messages. Whether they appear in your inbox or your postal mail, their aim is to get you to spend money – often out of fear.

One of the more famous examples of this are phony domain registration renewals. A company (if you can call it that) will send a letter that looks like an invoice, claiming the client’s domain name is about to expire. It will probably mention all the terrible things that can happen if they don’t renew this instant. And, oh yeah, the cost is massively marked up.

The only trouble is that your client has never heard of this company. So naturally, they’ll ask you about it. They may wonder if they’ve missed the deadline and why the price is suddenly higher. Have they already lost the domain? What will happen to their business?

Honorable mention goes out to those great “let me fix your website” emails that show up regularly. But they’re only kind of scary.

What to Do

When your client comes to you with a scam message, tell them so. But also tell them, if necessary, who their domain registrar is and why it’s important to have that information on file. It’s a great chance to educate them.

Man looking at a laptop computer.Google sends, it should still be looked into – just in case. Still, it’s worth mentioning that these messages need to be taken with a grain of salt. Clients shouldn’t worry that their site won’t be indexed or that they’re somehow being punished by an algorithm.

Let them know that Google’s automated tools can often focus on the minutiae. And, while you’ll be glad to review the issue, it most likely isn’t a major concern.

Google sign.painful experience.

I mention this because it seems to be more prevalent than ever with certain website configurations. Managed WordPress hosting services have been particularly difficult in this area. With some, it’s not just browser-based cache, we also need to worry about server-based as well. The result is a lot of wasted time, trying to get everyone on the same page.

What to Do

First, get a stress ball. Next, teach your clients about the wonders of cache and how they can clear it from their browser. In most cases, that will do the trick.

If you find that your web host has tough-to-clear server cache, it may be worth trying a staging environment. This would allow you to make changes on a non-cached location, while enabling your clients to see updates before you push them to production.

Woman typing.Gutenberg block editor. It looks and functions quite differently from the old Classic Editor. Not to mention that early versions lacked the polish we see today.

This led to a lot of confusion, frustration and, yes, even a little fear that things would break.

What to Do

Frankly, it often falls on designers to stay ahead of the game with these kinds of changes. If we see major developments coming along to the sites we manage, we should act to make the transition as smooth as possible (or delay it indefinitely).

In the case of Gutenberg, that meant educating clients about the new editor. And, in some cases, perhaps installing the Classic Editor to keep the status quo. It’s all about minimizing discomfort.

WordPress new post link.asked about it.

Certainly, having to calmly explain these situations can become tiring. There is no shortage of other things on our to-do lists. But on the bright side, it can be very satisfying to help clear up misconceptions and bring even a tiny level of comfort to someone else.

That in itself is a reward and it also helps to build a high level of trust between designer and client. And, looking like a superhero isn’t so bad, either.

5-things-every-social-media-manager-should-be-doing-in-2020

A lot happened in social media in 2019 – from the continued influence of President Trump’s Twitter feed to Miller Lite’s “Unfollow” campaign to the increased power of social media to drive action and public perception in political, economic and world theaters. However, now that the holidays are firmly behind us, I wanted to highlight five big themes in the social media world that we’re already starting to see emerge, which are certainly worth a look.

1. Privacy, privacy, privacy

Stealing from the old real estate adage, yes privacy is not only not going away, it will roar back in 2020 with vigor, but in a slightly different way. We’ve all seen platforms under fire for consumer privacy and Congressional hearings but look to platforms like Instagram as harbingers of things to come. The platform is rolling out a feature that prevents you from seeing what your followers like. Other indicators include TikTok, which has already killed the cult of the follower count, and newer platforms like VSCO (while not technically a social platform – it’s more of a creative community), which is devoid of all likes and comments, a move intended to promote creativity without societal pressure. Thankfully, these shifts mean social media will become more about quality content for engaged folks.

2. Tighter focus on child safety

Perhaps the only silver lining to all of the horrific things that are happening throughout the country with respect to our nation’s children is the renewed attention on how we must keep them safe at school, in shopping malls and of course where they spend a humungous amount of time – online, on apps, on their phones and in online games. Sure, YouTube was again thrust into the spotlight and made some changes, but with more Millennials (who are firmly digital natives themselves) marching toward parenthood and their hyper-awareness of all things marketing, expect child safety to be a big part of the continuing conversation. YouTube’s issues are still not entirely resolved nor forgotten, and kids spend way more time there than any other streaming platform. Expect young parents to expect more from the brands they allow into their lives.

3. Targeting and regulation join hands

A lot of factors at play here. Marketers continue to struggle with targeting. At the same time, some studies show that social media platforms may only be accurate about 30% of the time in pinpointing consumer decision-making. However, a more intense level of regulation, related to the 2020 US Elections, a renewed, intensified focus on fake news on social, as well as hyper targeting with bias, may draw targeting and regulation into the same sphere for useful collaboration, and actually emerge as a positive. Platforms with micro demographic targeting options have lulled marketers into ignoring offline behavior. Successful brands in 2020 will look beyond simply refining audience targeting and rather view social media targeting as one small part of the whole, regard new regulations as not a limitation, but a benefit.

4. Social finally embraces brand experience

For several years now, D2C brands have wholeheartedly embraced the concept of “brand experience” – more so than staid consumer brands have. Now look for social media to recognize the importance of well-integrated channels, starting with social customer experience at the core. Look for the focus to shift to ensuring brands are using social in meaningful ways to finally talk with consumers, versus simply talking to them. In the new year, we’ll see brands who are wildly successful at digital overall, start to address the bigger consumer experience and how they can extend digital success to the offline world.

5. Nano influencers

We’ve already seen a bit of this in 2019 but look for it to explode in 2020. Influencer marketing has made its mark on the industry – a recent study found a full 22% of internet users aged 18-34 purchase products after seeing influencers endorse it. Now, nano influencers, the smallest following of all tiers of influencers, roughly defined as social media influencers with between 1,000 and 10,000 followers, begin to fill in the long-tail portion of the much-discussed long-tail. It was bound to happen and for good reason. As markets become more and more splintered every day, nano influencers fill that need for marketers – their audiences are very small, niche, but very highly engaged, and brands start to capture the value of true engagement and genuine human connections.

Here’s wishing you health, wealth and prosperity in 2020, as well as meaningful connections on social!

More predictions for 2020


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



About The Author

Ashley Cooksley is a sales and marketing professional with more than 20 years in the digital industry and a proven track record, providing smart solutions to clients. As a member of the Social Element’s Executive team, Ashley handles everything from business development, sales, marketing, editorial management, creative development, strategic analysis, social media management and online community strategy.



4-things-shopping-ads-managers-need-to-prepare-for-in-2020

As we look ahead to 2020, the Shopping Ads practitioner is likely wondering what the upcoming year has in store for them. Here are four things to watch as we see the advertising platforms pick up steam with automation and creating efficiencies.

Smart Shopping Campaigns (SSC) – Let’s get automated with Google

We were all thinking it, so we might as well get that out of the way first! Smart Shopping Campaigns (SSC) are certainly the elephant in the room aspect of Shopping Ads 2020.

As a quick recap, Smart Shopping is a campaign type in which Google controls a bit of the process of showing Shopping Ads across multiple channels such as Display, Gmail, Youtube and Search and maximizes conversion value (or targets a specific ROAS) as much as possible. In October, I attended a seminar at Google LA in which we were told that 60,000 accounts are currently using Smart Shopping… and we should expect that number to rise in 2020.

However, here is what I expect to also change in 2020 with the increase in Smart Shopping usage – increased communication from Google demonstrating a desire to get Smart Shopping working the best that it can be with retailers and brands. I am hopeful.

We have seen the Black Box nature of Smart Shopping begin to be rolled back specifically in location control with a new customer acquisition focus (coming) and possible segmentation, and negative keywords (albeit, only through your agency representative at this point).

In this regard, I expect to see additional control handed over to advertisers as we help guide the machine more to our specific business / account goals, and with this machine’s obvious ability to hit ROAS targets there could be some truly great things in store in the future for this campaign type. Let’s cross our fingers here.

International shopping – Let’s get global

While much of the focus of the past 18 months in Shopping Ads has been on Smart Shopping, we’ve seen International Shopping Ads continue to become a simple reality in Google because of Google’s Currency Conversion as well as Multi-Country Feeds.

Get your international product shipping attributes figured out because you can get advertising on Google Shopping in another country in an astonishingly short time frame.

While this has been around for a while, I think it’s still not fully on advertisers’ radar. I expect that to change as e-commerce continues to grow with more retailers and brands going global in 2020 on Google Shopping than ever before because of this.

Feed-free product data – Let’s get structured… markup

I discussed structured data markup in my 2019 Shopping Ads prediction piece last year, and we’ve seen Google continue to make strides in this direction.

Nothing much has changed with what I wrote last year, other than that we’re definitely continuing to move in this direction and I would expect small businesses in late 2020 to have a serious option within their Google Merchant Center feed setup to simply allow Google to crawl their site and submit any data edits through Feed Rules.

Microsoft Smart Shopping Ads – Let’s get automated with Bing

Finally, don’t expect Bing to remain out of the fray when it comes to Smart Shopping. I have not received specific news on this from a Microsoft representative, but I would be shocked if they’re not working hard on their own Smart Shopping solution. My prediction is that we will have a Smart Shopping Microsoft Ads campaign type by late summer (at least in beta).

Perhaps it will be the best of both worlds, using their machines to make great decisions but giving advertisers helpful data to assist in a symbiotic machine-human world. Sigh, one can only hope!

What do you think is coming for us in 2020 with Shopping Ads? Feel free to reach out on Twitter or LinkedIn and let’s continue the conversation!

More predictions for 2020


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



About The Author

Kirk is the owner of ZATO, his Paid Search micro-agency of experts, and has been working in Digital Marketing since 2009. He has been named one of the Top 25 Most Influential PPCers in the world by PPC Hero the past 4 years and is known for his Ecommerce PPC articles across various industry publications. He is one of the revolving hosts of the weekly #PPCChat on Twitter, as well as an international conference speaker presenting on all things Paid Search (especially Shopping Ads). Kirk currently resides in Billings, MT with his wife, 5 children, books, and little sleep.



5-things-to-stop-doing-in-mobile-app-design

About The Author

Suzanne Scacca is a former WordPress implementer, trainer and agency manager who now works as a freelance copywriter. She specializes in crafting marketing, web …
More about
Suzanne
Scacca

Have you ever looked at the design techniques and elements you use to build mobile apps and evaluated whether or not they’re still useful or relevant? If you haven’t done this in a while (or ever), stop what you’re doing and read this. We’re going to look at the 5 things mobile app designers should stop doing so they can create more streamlined and positive user experiences.

I move to a new state every two to three years, so it’s important for me to live “light”. Every time I prepare to move, I go through the “Do I really need to keep this?” exercise. Although I’ve been doing this for almost 20 years, it never gets any easier. I wonder things like:

What if I sell my bed and never have a comfortable night’s sleep again?

What if I get rid of the fancy dress I wore once but might need for some hypothetical future event?

What if I decide to start baking cupcakes again and don’t have my cupcake tin anymore?

It’s easy to get attached to things when they served you well at one time or another. But if you take a closer look at the “stuff” you’ve accumulated, you’ll realize that a lot of it has lost its usefulness along the way.

I think it’s important to run through a similar type of decluttering exercise in the work you do as a designer. That way, the apps you build always look fresh and modern instead of weighed down by antiquated features or functionality that at one time had a purpose.

Before you start charging ahead into the new year, take a moment to reflect on how you approach mobile app design. If you’re still holding onto components or functionality that no longer serve any purpose or, worse, intrude on the user experience, it’s time for a change.

Want some help? I’m going to run through some elements you can afford to scrap from mobile app builds in 2020 and beyond.

Related Reading on SmashingMag:

1. Harmful FOMO Elements

You know why marketers, influencers, and designers use FOMO (i.e. it can be really effective in boosting sales). However, you also know how damaging it can be for users’ mindsets (not to mention the distrust they feel towards brands as a result).

You could avoid FOMO altogether, but it’s a tricky thing, isn’t it?

You know that (when left to their own devices) mobile app users may forget that your app even exists on their phones without something to pull them back in. But it’s too easy to go overboard with FOMO-inducing components.

For example, this is ToonBlast:

ToonBlast home screen countdown timers
The ToonBlast gaming app has numerous modules and countdown timers to induce constant FOMO. (Image source: ToonBlast) (Large preview)

The home screen is incredibly overwhelming. More than that, those ticking clocks (there are four of them) are a nightmare for users who can’t help but click on things they feel they’re going to miss out on by not doing so. And for users who can ignore the timers, they won’t be completely unaffected by them either. The game displays pop-up reminders for each of the countdowns. It’s impossible to ignore them.

This is FOMO at its absolute worst.

Even if reminders for each of the countdowns were sent as push notifications instead of disruptive pop-ups, it still would be bad for the user experience. There are just too many things competing for the user’s attention and each of the clocks is like a ticking time bomb.

I know it might seem like giving app users more reasons to engage is a good idea, especially if you’re struggling to attract and retain users. But if that’s really an issue, then you need to work on improving the core product first and foremost.

Going forward, I think we’d all do well to move away from harmful FOMO elements and embrace more simplified and stronger core products.

If you’re not sure what that looks like, I’d recommend turning your attention to Instagram:

Instagram FOMO-free
Instagram is working on removing FOMO from its app. (Image source: Instagram) (Large preview)

Instagram is a simple and straightforward product. Users turn their news feeds into personal curations of people and accounts they want to follow while sharing their own content with the world.

Now, Instagram isn’t completely FOMO-free as you can see from the Stories bar at the top of the page. However, there’s nothing really urgent about the way these stories are displayed. They don’t take up much space in the app (unlike the way Facebook handles it, for instance) nor are there any screaming alarms that say, “Hey! So-and-so’s story is about to expire! Watch it now!”

That said, Instagram is working to remove the harmful effects of FOMO in its app by doing away with like counters and cracking down on influencers and companies that don’t mark ads as such. If you want to create a strong yet simple product that keeps harmful FOMO elements out of the picture, keep this one on your radar.

2. Out-of-Context Access Requests

Unlike mobile websites and PWAs, mobile apps have the ability to get in front of 100% of users who activate push notifications. But that’s the catch. Your users have to be willing to press “OK” or “Allow” when you display that push notification (or phone access) request pop-up.

So, how do you get more of them to do that without constantly shoving those requests down their throats?

Some brands haven’t figured this out yet, to be honest. Take Snapchat, for example.

Snapchat push notification request
Snapchat doesn’t like when users disable notifications and phone access. (Image source: Snapchat) (Large preview)

This is one of those apps that just goes way overboard when it comes to requesting access to users’ devices. It wants to:

  • Send push notifications.
  • Use the camera.
  • Use the microphone.
  • Access saved photos.
  • Enable location tracking.
  • And so on.

Rather than ask for access when it’s relevant, it often sends a deluge of requests first thing when users sign into the app. That’s the wrong way to create a welcoming environment for your users.

A better way to go about asking for access or permissions would be to place it in the context of the app — and only when it makes sense. I’ll show you a couple of examples.

This is the app for ParkWhiz:

ParkWhiz location tracking request
ParkWhiz reminds users about the benefits of enabling location tracking. (Image source: ParkWhiz) (Large preview)

Look at the section called “Help Us Find You” toward the bottom.

Not only does ParkWhiz gently remind users to enable location tracking on their devices, but it does so by explaining the reasons why it would benefit them to do so. Notice also that this isn’t displayed in an intrusive pop-up at the point of entry. Instead, it’s in a spot in the app where, when enabled, it can help streamline the search experience.

YouTube is another app that does this well.

YouTube push notification tooltip
YouTube displays a small tooltip to remind users to turn on notifications. (Image source: YouTube) (Large preview)

In this example, YouTube quickly displays a tooltip over the disabled notification icon. The notice reads:

“You’re missing out on subscriptions! Tap the bell to turn on notifications.”

They’re right. I’m subscribed to this channel and, yet, I haven’t received notifications (push or email) about new videos for a while. I hadn’t realized this until I saw this reminder.

The way this is handled is nice. It makes users stop and think about what they’re missing out on instead of rushing to close out another request pop-up. It also doesn’t force them to turn on push for everything. They can customize which notifications they receive.

Push notifications are supposed to be helpful. And access to your users’ phones is supposed to enhance their experience. That’s why it’s important to ask for their cooperation in enabling these features within the right context. Rather than bombard them with request after request at the outset of installing or opening an app, deliver them within the experience as in-line elements.

3. Unnecessary Icon Labels

Note that this point is called unnecessary icon labels and not just a sweeping generalization of all of them. That’s because there are certain parts of an app where icon labels still work well. Like the navigation bar.

However, I’ve noticed an alarming trend lately whereby apps pair every page or tab name with a matching icon. There are a number of reasons why this is an issue and I’m going to use the GEICO app to demonstrate them.

GEICO mobile app home page
The GEICO mobile app home page comes with a list of services and modules paired with icons. (Image source: GEICO) (Large preview)

This home page makes it easy for users to take advantage of their auto insurance and related services on the go. Let’s focus on the “Vehicle Trouble” section though.

There are four tabs:

  • Emergency Roadside Service represented by a tow truck icon,
  • Start a New Claim represented by a car with what looks like a crash symbol,
  • Report Glass Damage represented by a car with a crack on the windshield,
  • View Recent Claims represented by a clipboard with the letter “C” on it.

The icons aren’t all that easy to decipher (except the tow truck) and I’m just not sure they add any value here. Really, if you can’t think of anything better than putting a letter “C” on a clipboard to represent claims, maybe icons aren’t needed after all?

Next, let’s take a look at the GEICO app’s list of settings:

GEICO app navigation
The GEICO app’s navigation pairs each page with an icon. (Image source: GEICO) (Large preview)

There are a lot of settings pages here. Not only that, they’re not the kinds of pages you’d typically see in other mobile apps, so the designer has had to get creative in pairing them with icons.

If this navigation didn’t have icons, I think it would be much easier to read through the options. The same goes for the home page. Without the icons, the font size could be increased so the focus could strictly be on the page names and insured users could get to the information they need more quickly. As it stands now, the icons are just wasted space.

Let’s look at another example.

Rover is an app that pet owners can use to book pet sitting and walking services. Icons are used sparingly through the app to distinguish services from one another as well as to label the navigation pages.

Rover mobile app with icons
The Rover mobile app includes icons to label its navigation and services. (Image source: Rover) (Large preview)

I don’t think the icons on this page are necessary in terms of expediting user selection (e.g. “I need overnight house sitting so I’m going to choose the moon-over-the-house icon.”). That said, I don’t think the icons detract from the button text since each option is clearly labeled with big, bold font. What’s more, the icons do a nice job of bringing balance to the buttons so there aren’t huge white gaps in the middle.

Now, let’s look at what the designer has chosen to do under the “More” tab:

Rover app settings
Rover’s list of “More” settings don’t include icons like the rest of the app. (Image source: Rover) (Large preview)

This is similar to GEICO’s slide-out navigation menu. But notice how Rover’s is text only. Considering how common these settings are from app to app, it would’ve been easy enough to add icons to each, but the designer chose to leave them off and I think that was a good decision.

There’s a time and place when icons serve a purpose. As far as labeling a secondary navigation menu in your app, it’s time to do away with that. I’d also express caution over labeling pages with icons if it’s a struggle to find a match. That should be a sign to you that they’re not needed to begin with.

4. Excessively Long Home Pages

In web design, we’re seeing much shorter home pages than in years past, thanks to the need for more efficient mobile experiences. So, why isn’t this something we’re doing in mobile app design?

There are some apps where this isn’t an issue. Namely, ones where there’s no scrolling at all (e.g. dating apps, gaming apps, etc.). And there are some cases where endless scrolling on the home page is fine (e.g. news and social media apps).

But what about other apps?

Listings apps (like for real estate or travel) sometimes have a hard time with this. For example, this is the top of the Airbnb mobile app:

Airbnb app home page
Airbnb app home page with search bar and categories. (Image source: Airbnb) (Large preview)

This part of the page is well done and includes everything users need to find what they’re looking for:

  • A search bar,
  • A list of travel categories to swipe through,
  • Quick links to recent search queries.

But for some reason, Airbnb has designed this home page to go on and on and on with sections for:

  • Top-rated experiences,
  • Airbnb Plus places to stay,
  • Introducing Airbnb Adventures,
  • Places to stay around the world,
  • Featured Airbnb Plus destinations,
  • Stay with a superhost,
  • Unique places to stay for your next trip,
  • Explore New York City,
  • And on and on it goes.
Airbnb promotional content
Airbnb includes over a dozen sections of content on the home page of its app. (Image source: Airbnb) (Large preview)

I’m not sure what the logic was here. While I understand wanting to help your users by providing them with useful recommendations, this goes way overboard. It’s not even as though this is personalized content based on the user’s profile or recent searches. It’s just a smattering of categories that, if anything, are going to overload and overwhelm users with options.

If the app you’re building or have built runs into a similar problem, check out Hotels.com for inspiration:

Hotels.com Discovery page in app
The Hotels.com app provides users with a search bar and recently viewed hotels upon entering the app. (Image source: Hotels.com) (Large preview)

Unlike Airbnb, Hotels.com’s home “Discover” page is short. All it takes is three swipes to get to the bottom of the page. Users see sections for:

  • Recent searches,
  • A city guide (based on a recent query),
  • Last-minute deals,
  • Current bookings,
  • Hotels.com Rewards standings (if relevant).

For the most part, the content is 100% relevant to the user and not just meant to promote every possible service or feature of the app.

If you really feel like users would benefit from seeing every possible feature, create a secondary navigation for it. That way, they can quickly scan through the options and pick the one(s) they’re most interested in. When you give them an endless home page to scroll through and too many listings and buttons to click, you’re only going to make it harder for them to take action.

5. Dark Patterns in Ads

You have to monetize a mobile app if you’re going to make the original investment worth your while. It’s as simple as that.

But I’ve recently encountered some very scary dark patterns in mobile app monetization — specifically, with the way ads are designed. And it’s got me wondering if third-party ad networks are really the smartest way to monetize if they’re going to compromise everything you’ve done to create an awesome in-app experience otherwise.

Now, I understand that app designers usually don’t have any role in designing the ads that appear. That said, do you really think your users know anything about ad networks and how those ad placements get inside your app? Of course not!

So, when one of your users has a bad experience with an ad, what do you think is going to happen? They’re not going to think:

“Oh, that advertiser is terrible for doing that.”

Instead, they’re going to think:

“If I see one more ad like this, I’m uninstalling this app.”

Let me show you some examples of ads that will push the limits of your users’ patience.

This is Wordscapes, a gaming app I’m quite fond of:

A cutoff banner ad in Wordscapes app
A banner ad at the bottom of the Wordscapes app is cut off. (Image source: Wordscapes) (Large preview)

I’ve been playing Wordscapes for a long time and when I first started, it was great. The banner ads were there, but they never really got in the way. And the interstitial video ads only appeared every few rounds or so. They were always easy to dismiss, too.

Over the past year or so, however, the quality of ads has majorly deteriorated. Take the banner ad above. That’s actually a video ad that doesn’t fit in the allotted space.

Then, you have this badly designed banner ad for Jynarque:

Dark banner ad for Jynarque
A banner ad that’s too dark appears at the bottom of Wordscape (Image source: Wordscapes) (Large preview)

Neither of these banner ads are really dark patterns. However, they do suggest there’s something not quite right about where Wordscapes is sourcing their ad content from.

Now, I’m going to show you some of the more deceptive ads I’ve come across.

This is an ad from Showtime to promote the TV show Shameless:

Wordscapes interstitial ad for Showtime
Wordscapes shows an interstitial video ad for Showtime’s Shameless. (Image source: Wordscapes) (Large preview)

See the number “5” in the top-right corner? That’s a countdown timer, which should tell users how long they have to wait until they can dismiss the ad. However, when the timer is up, this icon appears:

Showtime ad without an exit
A Showtime ad provides users with an untraditional escape after the timer runs out. (Image source: Wordscapes) (Large preview)

The timer gets to “0” and is replaced by this button. It’s not the traditional “X” that app users are accustomed to when it comes to watching ads, so they might not realize this will take them back into the game. In fact, they might misinterpret this “Next” symbol as a “Play” button and watch the ad in full. While it’s nice that Showtime gives users an exit, it would be better if the iconography were consistent with other video ads.

Then, there’s this interstitial ad for DoorDash:

DoorDash ad with no exit
A DoorDash ad includes two fake “X” buttons. (Image source: Wordscapes) (Large preview)

This is what the ad looks like the second it appears on the screen, which is actually encouraging.

“An ad that’s going to let us exit out of it right away! Woohoo!”

But that’s not the case at all. Notice how there are two X’s in the top-right corner. One of them looks fake (the plain “X” symbol) while the other looks like an “X” you’d use to dismiss an ad.

The first time I saw this, I clicked on the good “X”, hoping my finger would be small enough to miss the fake target. Yet, this is where I ended up:

DoorDash ad to app store exit
An ad for DoorDash tries to take Wordscapes visitors to the app store (Image source: Wordscapes) (Large preview)

The click takes users out of the Wordscapes app and tries to move them to the app store. After hitting “Cancel” and sitting through five more seconds of the DoorDash ad, this new “X” appears in the top-right corner:

DoorDash deceptive mobile ad
DoorDash finally displays the real exit button for its mobile ad. (Image source: Wordscapes) (Large preview)

At this point, I can’t imagine users are very happy with DoorDash or Wordscapes for this experience.

These examples of bad ads and dark patterns in monetization are just the tip of the iceberg, too. There are ads that:

  • Provide no timer or indication of when the ad will end.
  • Switch the placement of the “X” so users unintentionally click the ad instead of leave it.
  • Auto-play sound even when the device’s sound is turned off.

I know I’m picking on Wordscapes because I spend the most time inside the app, but it’s not the only one whose reputation is being hurt by third-party ad content.

Again, I recognize that you have no say in the design or execution of ads that come from ad networks. That said, I’d really urge you to talk to your clients about being more discerning about where they source their ads from. If mobile ads continue to be this bad, it might be worth sourcing your own ad content from partners and sponsors you trust instead of random companies that use deceptive advertising tactics.

Wrapping Up

There are a ton of reasons to declutter your mobile app designs. But if these examples have demonstrated anything, the most important reason to clean up is to get rid of useless and sometimes harmful design elements or techniques.

And if you’re having a hard time getting rid of the excess, I’d encourage you to reevaluate the core product. If it’s not strong enough to stand on its own, in its simplest of forms, then it’s time to go back to the drawing board because no amount of distractions you fill it with will make it a worthwhile download for your users.

Smashing Editorial(ra, il)

10-things-i-learned-about-seo-in-2019

I publish three websites: JohnWDeFeo.com (my personal website), Always Bring Sunscreen (a family travel blog) and Good, Cheap and Fast (a product review website). 

Each site receives a significant portion of its traffic from search engines and each site saw a sizable change in search visibility this year. 

Even after 16 years of working in search marketing, I’m always discovering something new. This article is a summary of my recent findings and observations.

Here are 10 things that I’ve learned about search engine optimization (SEO) in 2019.

Google Doesn’t Tolerate Anonymous Websites

When I launched Good, Cheap and Fast, it was published anonymously. My goal wasn’t to be mysterious: I wanted the site to emphasize data, not the person who compiled it. 

Maybe this intrigue was the reason for the site’s PR success. Yet, despite earning links from sites like Fast Company, Esquire and Slate, Google slammed the website in successive algorithm updates on January 4th, 2019 and once again on March 22nd, 2019. I was losing faith.

Despite receiving 100,000 referrals and an influx of great, earned links, Google dinged Good, Cheap and Fast…hard.

Despite receiving 100,000 referrals and an influx of great, earned links, Google dinged Good, Cheap and Fast…hard.

Then, I remembered that my friends and family members suggested that I include my photo and biography on the website. I admitted my mistake, took their advice and traffic recovered.

“Expertise, Authority and Trustworthiness” Might Be Detected Algorithmically

I added biographical information to each page on Good, Cheap and Fast in late March 2019.

The site’s search visibility climbed steadily within days of the change, achieving 200% growth only three weeks later. Unknown factors may have helped the site to recover, but the timing was spot on and I was able to repeat these results by adding “EAT” biographies on other websites.

Google Routinely Suffers Indexing Bugs

This article was dropped from Google’s index twice, possibly because Google was reading the timestamp incorrectly.

This article was dropped from Google’s index twice, possibly because Google was reading the timestamp incorrectly.

My top-performing article was dropped from Google’s index in March, and again in July.

Nevertheless, these drops occurred when the article was updated and improved. However, the drops did not coincide with the indexing bugs that Google admitted in April and August.

I believe that Google extracted a date from within the text of the article, assumed that it was the publish date, and determined that the article was too old to be relevant for a newsworthy topic.

Bing Filters E-Commerce Websites

The response I received from Bing. Click to expand.

The response I received from Bing. Click to expand.

Months after launching Good, Cheap and Fast, the site was still not indexed in Bing. I contacted Bing customer support to ask why. A representative told me that the site was blocked for reasons that he couldn’t disclose. He lifted the block, yet a year later, the site gets negligible traffic from Bing.

In the meantime, I’ve found other e-commerce websites that Bing entirely excludes from its index. For example, 10Beasts.com.

A Drop in Search Demand Can Look Like a Penalty

This looks like a clear example of algorithmic demotion, but in reality, it was merely a drop in search demand.

This looks like a clear example of algorithmic demotion, but in reality, it was merely a drop in search demand.

In June 2019, I published photos from the 2019 Coney Island Mermaid Parade. This website’s search visibility doubled, but then quickly fell by more than 60%. Was it a manual penalty? An algorithm change? Nope, it was a drop in people searching for “mermaid parade 2019 photos.”

Neither AMP nor Google News Are Prerequisites to Appear in Google Discover

I don’t use Google’s accelerated mobile pages (AMP) on my family’s travel blog, nor have I registered the site to be included in Google News. Nevertheless, the website’s articles appear in Google Discover (formerly known as Google Now and Google Feed). 

On the other hand, my product review website utilizes AMP and gets no traffic from Google Discover. I suspect that Discover emphasizes articles with a high dwell time.

Image Redirects Take a While to Process

Visits from Google Images hit rock bottom after my web host changed its content delivery network. Recovery was slow.

Visits from Google Images hit rock bottom after my web host changed its content delivery network. Recovery was slow.

Squarespace moved all of my websites’ images to a new content delivery network in the early fall. As a result, visits from Google Images briefly dropped to zero while Google processed the changes.

It took several months for these images to return to their prior rankings, despite the 301 redirects.

The Relative Importance of Links Is in Flux

My family travel blog has 50,000 words of unique content, hundreds of original photographs and very few backlinks. Nevertheless, the site’s search visibility grew steadily all year long…until recently.

The site was crushed by Google’s Nov. 7th algorithm update and it hasn’t recovered since. 

I’m not impartial, but I believe that my site’s travelogues are 10x better than the competition (e.g. Beaches Turks and Caicos, Dreams Punta Cana, and Eurodam Alaska). It kills me to see this content foundering, yet it may be a consequence of my failure to promote it.

Some algorithm Updates Adjust International Targeting (And It Can Look Like a Penalty)

Search visits to Good, Cheap and Fast fell off a cliff after Google’s Dec. 4, 2019 algorithm update, yet visits from the United States increased after that update. This makes sense because the site is only relevant to U.S. visitors. What seemed like a penalty was actually a reward!

Google Is Becoming a Pop Culture Engine

My name is shared with a victim of “The Amityville Horror” and Google doesn’t let me forget it. A Google search for “john defeo photographs” produces a list of crime scene photos and crackpot theories about ghosts. Meanwhile, both DuckDuckGo and Bing diversify their search results with respect to the fact that I was once a professional photographer.

Personal reasons aside, I find myself using DuckDuckGo more often because of its diverse search results. Click to expand.

Personal reasons aside, I find myself using DuckDuckGo more often because of its diverse search results. Click to expand.

The example above is a personal one, but certainly not an isolated one. Increasingly, I find that Google’s results are tailored to the wisdom of crowds, even when crowds are not so wise.

That’s all, folks. I’d love to hear what you’ve learned about SEO this year. You can find me on Twitter and LinkedIn. I hope you have a happy, healthy and prosperous 2020! -John

5-things-to-consider-before-building-a-mobile-app

Many companies are developing a mobile app for their customers to access their product, service, or content offering, and it’s no secret why. Mobile apps present many benefits.

For starters, the Android and iOS app stores provide a great platform for acquisition since they both have high levels of organic traffic. Customers that may not have known about a company can, therefore, find out about it when searching through an app store. Moreover, once a customer downloads an app, the app owner has more means of engaging with them, including push notifications, app software updates, and new functionalities that could interact directly with the customer’s smartphone.

However, too many companies rush into their app development efforts too hastily, and as a result waste a large amount of time and resources. These apps often have to be redeveloped from scratch either because the idea for the app was ill-conceived and not based on market needs, or because the app was built on outdated technologies.

These are the things that any business owner should consider before building a mobile app. Factoring them in early will save you a lot of time and sunk costs in the future.

1. Market Demand

Most companies developing a mobile app go wrong by not conducting rigorous market research before beginning development efforts. Intuition can be a wonderful tool. However, when assessing whether an app idea makes sense and whether there is actually a market that is willing to make the limited storage space on their phone available to use it, it makes sense to look at the data. Too many entrepreneurs or business owners get caught up in an enticing and romanticized idea for an app, without making sure that the data support their intuition.

When conducting market research for a mobile application, there are several things to take into consideration. A good first step is to create a profile of your targeted end-user demographics and conduct an analysis of that demographic.

In other words, determine who the ideal user of your app is as well as their characteristics, behavior, and interests. Platforms like Google Trends, your keyword research tool of choice, and market research software like Buzzsumo can be a good starting point. Be comprehensive in collecting data on your target users’ search queries, buying patterns, and needs.

The nature of your market research efforts will vary based on your company’s niche and the kind of product you’re building. Nevertheless, whatever the product is, adequate research is crucial.

2. User Experience Research

A good next step is to reach out to anyone in your network that matches the demographics of your target user. Ideally, this is someone that your app is a perfect match for who isn’t a friend or family member. Friends and family will tend to bring a positive bias towards your product when evaluating it.

Show your user tester wireframes or mockups of your app if you have them, and if you don’t, explain the functionality of the app in as much detail as possible. Take notes on their feedback, and be sure to include questions related to the business model of your mobile app. For example, if you plan to release a paid application, ask your tester if they would pay to use the app you have in mind.

It can be useful to employ a note-taking tool to streamline communication and ensure accurate notes.

3. Which Features Will Enable Monetization

You would be shocked by how often business owners ignore what is, perhaps, the most important part of building an app – how it will actually make money. Based on the feedback you’ve received from talking to potential users that are part of your target market, it’s time to determine which features need to be built into the application that will allow you to monetize it.

According to Digital Authority, out of every 10,000 apps developed only one will succeed. This is largely due to many apps not integrating functionality that will enable monetization.

If you plan to monetize your application by selling user data, for example, you have to make sure that your development team builds in ways to collect, house and organize that data. If you plan to sell the application to users, consider any payment gateways that must be built-in and verify if your price points are realistic with market demand.

If you plan to sell advertising placements on the app, consider what kinds of integrations or SDKs are needed to enable that. An additional step would be to contact potential advertisers and ask if there is any interest on their part in advertising on the app when it’s built. You will also get an idea of what kind of metrics you would have to meet in order to sell ads by speaking with advertisers beforehand.

4. Which Technologies and Programming Languages Will Be Used

A common mistake when building apps is using the wrong technologies and dependencies when developing the product. This can have dire consequences when distributing the app through an app store, making new updates, or introducing new features. The Apple and Android App Stores have specific requirements any app must meet when being uploaded, and building the app on unsupported technologies might mean it will get denied.

The Android App Store lists as one of its best practices that developers build software geared towards current versions of its operating system. Most of these requirements are demanded as a way for app store companies to ensure the quality of the products being offered on their platform. Most experienced mobile app developers should be familiar with these requirements, but you should be as well!

The Apple App store has its own set of best practices to consider before starting development.

5. The Cross-Compatibility of Different Technologies

Some other things to consider when choosing which technologies and dependencies to implement is whether the technologies used are cross-compatible for different operating systems. Certain programming languages are only supported on specific operating systems, while other languages and frameworks are deployable on multiple operating systems.

Finally, when choosing which tools to use for development, determine whether those frameworks will allow the code in the software to run natively on a user’s smartphone. Tools that allow for the implementation of native code will often mean the app runs more quickly. It also enables certain functionalities that are closely tied to a smartphone’s hardware.

Building an app isn’t easy, but with proper planning and research, it can be an amazing way for many business owners to capitalize on the trend towards mobile usage.

Author bio: This article comes from Marina Turea, content manager at Digital Authority Partners.

3-things-marketers-need-to-focus-on-in-2020

Marketing is one of the fastest-changing professions today. And like fashion trends (glad that bike shorts with blazers phase is over), as a marketer, you don’t want to find yourself “oh, so last year!” Read on to hear what’s hot for marketers in 2020 and how you can get ahead of the game.

Micro-campaigns

Much like the plaid miniskirt trend, micro-campaigns are short and sweet. If you haven’t heard of a micro-campaign, no worries — 2020 isn’t here quite yet.

Micro-campaigns are small pieces of a larger campaign and these bite-sized campaigns are released to customers earlier.

For example, you have a new product launch for athletic shoes. In the 2019 way of working, you’d spend a few weeks (or months) planning the campaign from beginning to end. It would include sponsorships, blog posts, social contests, in-store promotions, etc., with every last detail for the entire campaign planned in advance.

In 2020, you’re going to try the micro-campaign approach. Instead of detailed campaign planning, you start with a goal. Let’s say your goal is to increase awareness of a new shoe for teens in the Southwestern United States and to have these shoes purchased as a second pair in a BOGO offer when a parent purchases the first pair.

The goal says what you’re striving for, not the marketing that you’ll do to get there.

The marketing team then meets to brainstorm campaign ideas and prioritizes them into a marketing backlog. The backlog is different from the project plan because the work moves up and down in priority but just as importantly, it isn’t promised. Work may or may not happen based on how customers react.

Let’s say that your first piece in the micro-campaign is a YouTube video featuring teens wearing the shoes.

The YouTube video is a low-cost effort that you can get to market relatively quickly. While you plan to do more marketing, your first micro-campaign allows you to launch something much sooner than if you were to spend the upfront time planning everything.

In this scenario, instead of a large upfront planning phase, you focus on your goal, work as a team to brainstorm campaign ideas, decide which one you’re going to try first, and voila, it’s in the hands of your prospective customers!

The reason micro-campaigns are the new way for marketers to work is that campaigns don’t do any good in a planning phase. Many companies spend endless hours planning out intricate campaign details only to learn that the finally agreed-upon message doesn’t resonate with potential buyers.

Micro-campaigns are a quick, low-risk way to test the market and see if your campaign is on the right track.

In this case, your YouTube video was a viral sensation, your messaging was spot on and you can go ahead and try the next piece in your micro-campaign. Maybe you’ll nail it; maybe you won’t. Micro-campaigns allows marketers to adjust quickly and build on the momentum from your audience, not what your boss thinks your customers’ need to see.

Data-driven, rapid feedback loops

While rapid feedback loops have been around for a while, they are becoming more and more data-driven. If you haven’t incorporated feedback loops into your marketing yet, don’t worry – it’s not too late.

Regular old feedback loops can happen in many different forms, but they’re easiest to do when you’re running micro-campaigns.

Let’s take your YouTube video promoting the new athletic shoes. Your feedback in this scenario can come from seeing how many views you receive, reading comments and learning what about the video resonated with the audience.

This is a very non-techy way to incorporate feedback, but it’s still good. You can get this kind of feedback in a few days if you launch your video first. If you wait until you’ve perfected all of the campaign elements, this feedback is meaningless because there’s nothing you can do with the information.

To take your feedback to another level, marketers in 2020 will incorporate tools that automate a lot of this work to make it easy.

There are endless tools to experiment with and here are a few you may want to check out this roundup from mopinion.

Mass personalization

If you’re a GenXer like me, you probably learned about mass marketing in college. If you kept that old 1995 college marketing textbook, you may want to throw it off the 100th floor of a very tall building! Or you can take what it says and do the exact opposite because in 2020, customers want marketing to be very personal and all about them. After all, there are millions of websites and social platforms people can turn to, so if your messaging isn’t resonating with customers right away, they’ll go elsewhere.

Companies no longer have the luxury of pushing messaging that is self-serving. No one cares that you want to sell shoes. In fact, hard-selling in any way, shape or form is just so 1995!

So what’s a modern marketer to do? It’s really about testing and learning. We don’t know what’s going to resonate with our customers and prospects until we try out a few different approaches to see what resonates.

So this leads us right back to steps one and two: micro-campaigns and data-driven rapid feedback loops.

With micro-campaigns, we can succeed or fail with our personalization quickly. And with rapid feedback and supporting data to back it up, we can be agile and switch gears.

So what is being a marketer in 2020 really going to mean? It’s about learning-by-doing, backing up what we do with data and making our marketing about our customers, not our company.


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



About The Author

Stacey knows what it’s like to be a marketer, after all, she’s one of the few agile coaches and trainers that got her start there. After graduating from journalism school, she worked as a content writer, strategist, director and adjunct marketing professor. She became passionate about agile as a better way to work in 2012 when she experimented with it for an ad agency client. Since then she has been a scrum master, agile coach and has helped with numerous agile transformations with teams across the globe. Stacey speaks at several agile conferences, has more certs to her name than she can remember and loves to practice agile at home with her family. As a lifelong Minnesotan, she recently relocated to North Carolina where she’s busy learning how to cook grits and say “y’all.”



10-things-that-helped-me-improve-as-a-ui-designer

Everything I did and still do to grow as a designer.

Side projects are what lead me to discover my interest in product design in the first place.

When I was 18 years old, I had the idea to build a tool that allowed people to create their own Snapchat geofilters, which had just been released by Snapchat, at the time.

I had some graphic design experience — knowledge on how to use photoshop and illustrator, but zero exposure to product design.

Yep, this is the first UI design I ever made. (circa July 6, 2015)

After attempting to design my first side project, I realized that I enjoy the process but was clueless about how to properly design a real product.

I ended up hiring a designer to finish what I started, and they did a slightly better job…

This project led me to continue designing side projects for any and every idea that I had. Whether I had plans for my project to be developed or not, I would still design it as though it would be.

Working on side projects helped me develop the skills that other designers who aren’t focusing on the entire product experience, are skipping. I would have to take into account all of the states to make my product complete.

I’ve always pushed myself to come up with ideas for products and design them out as much as possible. I’ve created a bunch of products for fun that have never left a Sketch file on my computer.

My side project Rocket

Having a side project not only shows that you have initiative and can create a product on your own accord — but it also allows me to display my authentic design style.

It showcases a creation that came out of my creative exploration, with no one else’s fingers in it.

By Iconicebestiary

Anytime I download an app, sign up for a website, do online shopping, change my password, or literally do anything — I pay attention.

It’s easy to mindlessly sign up for apps or go through digital experiences without giving much thought to them. But it’s when I pay attention that I notice all the attentiveness to detail that went into constructing such a seamless flow.

By paying attention to what design decisions other, often much more established companies have made, it allows me to draw inspiration.

When I was starting, I knew little about product design, but the best place to learn was from the experiences that I was already having on a day to day basis. If every app I use has a “Sign Up with Facebook” button, then maybe there’s a reason for that.

I would often and still do, screenshot mobile app interfaces that I like and use them as a point of reference later.

By Iconicebestiary

Interviewing, in my opinion, keeps me sharp. It is a confidence boost when I get an offer and an opportunity for evaluation if I don’t.

I’ve interviewed for design roles at several companies; this does a few things to help me improve:

  • I can learn what skills employers are seeking
  • I have to be able to articulate what I am capable of and what I know — so I need to know what I’m talking about
  • I’m often asked challenging questions about product design which can reveal what I don’t know
  • Companies frequently have design challenges which require out of the box thinking
  • Companies often require a design presentation which improves my presentation skills

In one interview process, I had to complete a design challenge and then present my work explaining how I landed on particular design choices step by step.

In the interview, I was fielding dozens of questions challenging why I used specific colors, what kind of grid I used, why I established the hierarchy the way I did, etc.

Having my work challenged and critiqued is uncomfortable, but it helps me develop the soft skills to defend my design decisions and accept feedback if I agree with it.

At one point in the interview, a lead designer asked me why I didn’t do something that was, in my head, a lousy suggestion — so I explained and gave my reasoning. Later on, in the interview process, he admitted that he had given that suggestion to see if I would roll over and accept it or defend the decision that I made.

It’s crucial as a designer to be able to stand on your own and reject feedback if you have a better solution.

Similar to what you’re doing right now — I spent time scouring the web to gain a further understanding of how product design works. When I read, it allows me to think and acquire other people’s thoughts, opinions, and knowledge.

I read the standard design books like Lean UX and The Design of Everyday Things. Although I learned a lot from those books, I would say I learned more about UI design, specifically from articles.

I gained a better foundational understanding of UI design through design system documentation. Reading the rationale behind different components and how to use them had a significant impact on how I approach product design in my work.

By reading through the rationale behind particular design decisions for companies like Google, it can allow regular designers like me to utilize their findings and practices in my day to day work.

Some of my favorite design system documentation that I recommend checking out:

I will also frequently browse resources at DesignSystemsRepo.

By Iconicebestiary

When I started as a UI designer, I’d come from a graphic design-ish background working on Fiverr, mainly doing simple illustrations.

Fiverr wasn’t the ideal platform for UI design, so I quickly started applying for jobs on Upwork. I showcased my work on Behance, which was primarily side project designs.

In addition to Upwork, I reached out to people in my network to see if anyone needed help with product work. After a while of beating the seemingly dead horse of freelancing, I slowly started to gain some traction, and it had somewhat of a snowball effect.

The more clients I worked with, the more exposure I had to a diverse set of problems and industries, which helped me evolve as a UI designer. It also allowed me to get paid to learn and grow as a designer.

The more I learned, the more I earned. Which helped motivate me to learn more about product design and acquire new skills that I could offer to my clients to get that sweet, sweet money.

By Iconicebestiary

Anytime you ask someone how they got good at something; they’ll inevitably say the cliché “practice, practice, practice.”

Well, there’s a lot of truth to that. There aren’t any secrets; besides that, the more you do it, the better you’ll get — guaranteed.

I knew at the onset that it would be an uphill battle, but product design was a skill I wanted to acquire. I was determined to understand this evolving and ever-changing profession.

To do that, I had to become immersed in the world of product design. I had to hang out where designers hung out and spend a good chunk of my time designing, studying, watching tutorials, reading, etc.

By having a side project, it forced me to remain focused on the flow. I would never complete a design and be finished with it — I was constantly thinking of how I could do it better or improve what I already have.

If I were doing the daily UI challenge, it would be easy to slack off and skip days or do a quick UI and then call it quits for the day, never returning to it again. I wrote an article not too long ago expressing my frustration with daily UI challenges and why they are falling short for beginners.

With a side project, I was continually designing new screens and experiences and would become obsessed with the evolution of my product.

By doing UI work regularly on side projects or with freelance clients, I was forcing myself to remain consistent and learn something new every single day.

By staying consistent, I slowly started to see the progression, which motivated me to keep on keeping on.

By Iconicebestiary

This is something I wish I’d done earlier, to be honest.

At first, I was ignorant and thought my designs were great. As I got better and gained more exposure to the field, I realized how incredibly incompetent I was and how awful my designs were.

When I realized how far behind I was and how much I had yet to learn, it made me hesitant to share my design work with others. But it’s possibly one of the essential steps in progressing as a designer.

When I can get a fresh set of eyes on my designs and have someone with more seniority than I to evaluate my designs, they can bring them into a whole new light.

Suddenly I’m second-guessing every decision I made — in a good way. They can make suggestions or ask why I made the choices that I did.

Receiving feedback also helped me develop some of the soft skills of being a designer — like explaining my design choices and having a backbone if I don’t agree with someone’s feedback.

If I didn’t have anyone to share my work with in person, I frequently turned to Reddit. Reddit has a few subreddits that will provide design feedback for UI designs. Reddit.com/r/uidesign has been very helpful.

By Iconicebestiary

There are hundreds of great UI courses and tutorials available, but I only want to call out two.

On YouTube, DesignCourse has tons of great content that’s always relevant and useful, which makes it super easy to get a grasp on a new concept quickly.

When starting or learning a new tool, I would subscribe to LearnUX for $15/mo. LearnUX has a very comprehensive list of courses that not only teach how to use design tools but also the fundamentals of design.

Watching tutorials or just watching someone else work allows me to see how other people work and learn how I can improve my designs or workflow.

Even if I only learn a new keyboard shortcut, it’s worth watching a three minute Youtube video.

By Iconicebestiary

I personally always struggled in product design with being easily distr…Woah, that’s a shiny mailbox!

The predicament is, I’m already learning Framer, but UI animation looks cool, so maybe I’ll dabble with that and try Principle, but as I start getting into that Adobe XD releases an update for auto-animate, so I must give that a try and then…

There are always new trends, tools, design libraries, startups, product updates, and all the other things that I’m sure will make me a better designer.

I had to force myself to stop running around like a chicken with its head cut off. I had to force myself to pick what I wanted to focus on and reach proficiency before I moved on to the next shiny tool or UI trend.

This is important to my development because having minimal knowledge in an array of areas wasn’t helping me become a better designer.

When I shifted my focus to one thing at a time, I allowed myself to gain a more in-depth knowledge as opposed to a surface level understanding.

By Iconicebestiary

I was lucky enough to have two pivotal opportunities in my design career.

The first was working directly with a team of developers to create IOS apps.

This opportunity exposed me first hand to the scrutiny that designs on bootstrapped projects are restrained by. We had to be lean, and we had to work fast to surpass competing apps on the apps store.

This was my first time having daily stand-ups and working with a strategist, a stakeholder, and developers. I learned how to work with a team and make sure my ideas were in-line with their objectives. As opposed to being a freelancer where I would often be given a task and told to do it — with this, I was more or less a part of their team.

The second opportunity was when I interned as a product designer at Skookum, the company that I now work for full time.

This was my first time being on a design team, and the collaboration and team environment helped me progress more than anything else.

Being surrounded by people who were strides ahead of me not only motivated me to get better, but I was encouraged to ask questions and learn from them.

I did my best not to prove that I was good enough but instead to remain humble and ask as many questions as I could to soak up the knowledge in the room.

We would also have design critiques, where I would present my designs, and other team members would ask questions about my design choices. They would provide feedback and force me to rethink UX or UI decisions.

Being a part of a team and being involved in conversations about design or being engaged in creative brainstorming helped me think more deeply about design and how I approached it.

? Let’s be friends! Follow me on Dribbble and connect with me on LinkedIn. Follow me here on Medium as well for more design-related content.

some-things-you-oughta-know-when-working-with-viewport-units

David Chanin has a quickie article summarizing a problem with setting an element’s height to 100vh in mobile browsers and then also positioning something on the bottom of that.

Summarized in this graphic:

The trouble is that Chrome isn’t taking the address bar (browser chrome) into account when it’s revealed which cuts off the element short, forcing the bottom of the element past the bottom of the actual viewport.

.full-page-element {
  height: 100vh;
  position: relative;
}

.full-page-element button {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

You’d expect that button in the graphic to be visible (assuming this element is at the top of the page and you haven’t scrolled) since it’s along the bottom edge of a 100vh element. But it’s actually hidden behind the browser chrome in mobile browsers, including iOS Safari or Android Chrome.

I use this a lot:

body {
  height: 100vh; /* Nice to not have to think about the HTML element parent */
  margin: 0;
}

It’s just a quick way to make sure the body is full height without involving any other elements. I’m usually doing that on pretty low-stakes demo type stuff, but I’m told even that is a little problematic because you might experience jumpiness as browser chrome appears and disappears, or things may not be quite as centered as you’d expect.

You’d think you could do body { height: 100% }, but there’s a gotcha there as well. The body is a child of which is only as tall as the content it contains, just like any other element.

If you need the body to be full height, you have to deal with the HTML element as well:

html, body { 
  height: 100%;
}

…which isn’t that big of a deal and has reliable cross-browser consistency.

It’s the positioning things along the bottom edge that is tricky. It is problematic because of position: absolute; within the “full height” (often taller-than-visible) container.

If you are trying to place something like a fixed navigation bar at the bottom of the screen, you’d probably do that with position: fixed; bottom: 0; and that seems to work fine. The browser chrome pushes it up and down as you’d expect (video).

Horizontal viewport units are just as weird and problematic due to another bit of browser UI: scrollbars. If a browser window has a visible scrollbar, that scrollbar will usually eat into the visual space although a value of 100vw is calculated as if the scrollbar wasn’t there. In other words, 100vw will cause horizontal scrolling in a way you probably wouldn’t expect.

See the Pen


CSS Vars for viewport width minus scrollbar
by Shaw (@shshaw)


on CodePen.

Our last CSS wishlist roundup mentioned better viewport unit handling a number of times, so developers are clearly pretty interested in having better solutions for these things. I’m not sure what that would mean for web compatibility though, because changing the way they work might break all the workarounds we’ve used that are surely still out in the wild.

8-things-to-stop-doing-with-typography-(right-now!)

Good typography is an art that shouldn’t be messed with too much. Letterforms flow together to form words and phrases that are readable and have subtle visual meaning.

But if you aren’t careful, it’s easy to ruin typographic beauty in an instant.

If you have slipped into any of these design traps, this is the time to stop doing anything on this list to type and clean up your design pieces. (Your portfolio will thank you.)

Adding Drop Shadows

typography

Most fonts are perfect just the way they are. (I am dead serious.)

If the letters don’t work for your design, maybe you should consider another type choice. Don’t take the lazy option and add a way-too-obvious drop shadow or outline to the text.

…the best shadows go completely unnoticed

There’s this general rule about drop shadows that more people should follow — the best shadows go completely unnoticed. If you can see the shadow on a text element, then it is probably too big, too dark, and will get in the way of readability.

Honestly, using these effects is a fairly lazy way of trying to make text work. (You commonly see shadows and outlines on text that should have more contrast against the background.)

On the other hand, you can create some cool art-type text elements with shadows and outlines. But it is a technique that you’ll probably only ever use a couple of times in your design career.

Using Too Many Fonts

typography

It should go without saying. But it requires repeating.

Using too many fonts ruins all of the typography in a design. Using fonts that don’t pair well with each other (or the content for that matter) can ruin the design.

Pick a typography palette for projects. Set a type hierarchy and work from there. Obey the type style rules that you set for the project and chances are that it will turn out ok.

Not sure how to pair fonts? Learn more.

Ignoring Contrast

typography

Contrast is the thing that makes every bit of the type in your design readable. This is true of print materials, websites, and even tactile items like shirts or billboards.

Not having enough contrast between the background and typography — or not accounting for changes to contrast due to backlighting or environmental elements — is a common mistake. And it can kill the effectiveness of every word in the design.

…highly readable typography with strong contrast is a positive in terms of website accessibility as well.

You only have a few seconds to capture someone’s attention with a design. Don’t waste that precious time as users struggle to understand the words you want them to read.

To ensure readability, you want to put light text on a dark background (or vice versa) and not use similarly saturated colors against one another. As a rule of thumb, using black (or dark gray) and white text is the best option, when you have doubts about color combinations.

A tool such as the WebAIM Color Contrast Checker can help you determine contrast for text elements. As a bonus, highly readable typography with strong contrast is a positive in terms of website accessibility as well.

Using Caps, Bold, and Italics Too Much

typography

Did you know that lots of type styles can cause concerns when it comes to accessibility?

Using too many type variations – all caps, bold, italics, and underlining – can cause text to appear much more compressed and squeezed in than it really is. That’s a problem when it comes to readability.

If you are using these text effects for accents or to make a point, stop and ask yourself if there is a better way. All of these things are ok when used sparingly, but shouldn’t be throughout the overall design.

Double Spacing

typography

Stop putting two spaces between periods (and other punctuation) at the ends of sentences and the start of the next sentence. It only leaves an odd gap. This gap can get even more awkward at the ends of lines and result in spaces at the beginning of a sentence on a new line.

Modern digital typesetting is designed to take care of spacing between sentences for you. While you may occasionally need some manual adjustment, two spaces are seldom necessary (unless you are creating design elements on a typewriter).

Forgetting Device/Screen Size

typography

Don’t forget about mobile users when setting font sizes for website design, emails, or even social media images that will be displayed on small screens (and contain text).

The space between lines is just as important as the size of the text itself.

While this isn’t something that you do to typography per se, size has a great impact on whether people can understand the message. Some typefaces are also made for smaller sizes and render well, whereas other type families are much better suited for large display.

When it comes to thinking about font adjustments consider the size and leading. The space between lines is just as important as the size of the text itself.

Think about use and pick fonts accordingly. (Even if you have to adjust for different screen sizes, and you likely will.)

Using Hyphens in Display

typography

It’s not that big of a concern typically for web designers, but it’s a big deal for everyone else: Don’t hyphenate words in display type.

It’s just ugly. And hard to read.

Don’t do it.

Going On and On and On…

typography

It’s time to stop thinking that you can just go on and on and on with type because it is on the web. No one is reading all of that no matter how beautiful the lettering is.

Stick to words that matter. It’ll make better use of your type choice so that people actually read it.

The more text you have in the design, the more important typography becomes.

When it comes to text that goes on and on, think about the length of text blocks. Are paragraphs short and digestible? Do you use lists and formatting that makes it easier to scan?

Think about the number of characters per line – this helps dictate font size – and aim for 40 to 60 characters per line (somewhat less for the smallest screens). This can help you figure out if blocks of text are too chunky or awkward to read.

Stick to standard alignment for everything except headlines. Long blocks of centered text are incredibly hard to read. People don’t like or expect it – outside of poetry – and it causes a lot of eyestrain. Justified blocks of text are equally difficult to read if they are long and can cause awkward spacing issues that are a challenge to resolve in responsive frameworks.

The more text you have in the design, the more important typography becomes. Use a clear and easy to read font without difficult formatting in long blocks to facilitate readability.

Conclusion

Poor typography can ruin a project faster than almost any other design issue. For a design to be effective, people must be able to read and understand it. Most commonly, that’s in the form of typography.

Too much decoration, improper contrast or scale, and over-doing text elements are the most common issues you’ll find when it comes to typography. Remember to let letters stand on their own, provide plenty of contrast for optimum readability, and use fonts with words that have shared meaning and context.