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.

6-things-to-consider-when-making-your-portfolio-website

2. Conjure up a Design Aesthetic That Complements Your Work

Making the design of your portfolio website harmonious with your works is something you should strive for. In other words, all the colors, patterns, buttons, and other elements on your site should be in tune with what you plan to display. Or, at the very least, you should carefully consider the relationship between your works and your website design while coming up with your portfolio.

Of course, that is not to say that your website design should distract your viewers from appreciating your works. Rather, it should aim to complement them. There are a few different ways you can achieve this.

  1. Go for minimalism. Regardless of the nature of your work and the style you want to present, going for a minimalistic web design approach is an unmistakable decision. The reason for this is simple – if you incorporate minimalistic design into your portfolio, your works will be at the forefront, and your visitors will be able to easily navigate through them and get a comprehensive overview of your style and skills.

2. Strive for similarity. In case you want to be more daring with your design elements, colors and animations, it might be a good idea to try and blend all these elements with your works, i.e. to get them to have the same or similar vibe as the creative pieces you plan to display in your portfolio. Using this tactic, you can make your portfolio design “become one” with your works.

3. Create a contrast. Another way you can approach your portfolio design is to make it look different from your works. Depending on the nature of your work, this can actually make your portfolio pieces stand out even more.

As far as the structure of your portfolio goes, here are some things to keep in mind when figuring out how to compile your works and present them to the world.

What we mean by portfolio lists is a collection of several portfolio pieces shown together on a single page. Depending on how you chose to organize your portfolio, a portfolio list can showcase your entire collection of works or just a few pieces from one category. There’s a number of ways you can present your portfolio lists to ensure each piece gets the attention it deserves.

For example, if you have works that are rich in color or detail, or if various pieces from your collection simply don’t go well side by side, you need to make sure they have enough space to “breathe”. To do this, you can create more free space around them, thus preventing your portfolio from becoming oversaturated. This can be done by:

  1. Using a slider to present your works one by one,

2. Creating a list with plenty of white space,

3. Showcasing a smaller number of works with more empty space around them,

4. Using an asymmetric or “broken grid” type of list. This will let viewers rest their eyes as they go from one piece to the next, and you’ll still be able to showcase your works in all their glory.

If, on the other hand, your works are more minimalistic in their structure and/or fit well next to one another, then more compact list types such as a masonry or pinterest style list can work much better. By using a list that places your pieces closer to each other, the sense of unity and the consistent style in your works will immediately prevail, which can be a great advantage when used wisely.

Portfolio singles are pages dedicated to each single piece from your portfolio. Depending on the type of work in question, singles can contain one or more images. For example, if you’re presenting a logo design or a piece of art, you can always add early sketches and drafts to your single, or even random things that inspired you while working on the piece. This is a great way to present your unique way of viewing things as well as the creative process that led to the finished piece of work.

When it comes to single presentations of your work, the same rules apply as for portfolio lists. Whether you’ll use small images, big images, sliders, masonry grids, or something else entirely depends on the material you’re showing off. You can try out a few different presentation styles and see which one seems to best suit your work.

Like we mentioned before, it’s always a good idea to include a description of the work. In some cases, you might even want to write up an entire case study. However, if you think that your works speak for themselves, then it may be best to keep things simple. This means including only your most effective work examples and adding only the most essential info needed.

Hover animations are an essential part of the web and, as such, they must not be overlooked. The hover animations you choose for your portfolio should match both the style of your website and your works. There are a few paths you could choose when deciding on your hover animations.

One option is going minimal, almost without any changes in the way the works are displayed. Another popular trick is to switch the image and show a different picture when your visitors hover over each of your works. Or you could stick with a more classic approach and add a subtle motion animation or even simply display a few key pieces of information across the image on hover.

All in all, hovers can be another great addition to your portfolio presentation and can help further emphasize the uniqueness of your work.

In case you’re struggling with choosing a design concept for your portfolio, there’s no need to fret – plenty of portfolio WordPress themes have predesigned layouts which can help you set up your portfolio with ease. You just have to find the theme that best fits the general style you’re going for, and then simply customize to your liking.

10-things-to-know-about-android-10

Dave Burke

VP of Engineering

Published Sep 3, 2019

Android 10 is here! With this release, we focused on making your everyday life easier with features powered by on-device machine learning, as well as supporting new technologies like Foldables and 5G. At the same time, with almost 50 changes related to privacy and security, Android 10 gives you greater protection, transparency, and control over your data. This builds on top of our ongoing commitment to provide industry-leading security and privacy protections on Android. We also built new tools that empower people of all abilities, and help you find the right balance with technology.

Here are the 10 things you should know, centered on innovation, security and privacy and digital wellbeing: 

Simpler, smarter, and more helpful

1. Smart Reply now suggests actions. So when someone sends you a message with an address or a YouTube video, you can open and navigate in Google Maps or open up the video in YouTube—no copying and pasting required. And Smart Reply now works across all your favorite messaging apps.

2. Come to the dark side… with Dark Theme. You can enable Dark Theme for your entire phone or for specific apps like Photos and Calendar. It’s easier on your eyes, and your phone battery too. 

3. Take advantage of larger, edge-to-edge screens with the new gesture navigation. With simple swipes, you can go backwards, pull up the homescreen, and fluidly move between tasks. After switching, you won’t want to go back to visible buttons. 

4. With a single tap, Live Caption will automatically caption videos, podcasts and audio messages across any app—even stuff you record yourself. Live Caption will become available this fall, starting with Pixel.

New privacy and security features put you in control

5. You can choose to only share location data with apps while you’re using them. You’ll also receive reminders when an app that you are not actively using is accessing your location, so you can decide whether or not to continue sharing. 

6. In a new Privacy section under Settings, you’ll find important controls like Web & App Activity and Ad Settings in one place. 

7. With Google Play system updates, important security and privacy fixes can now be sent to your phone from Google Play, in the same way your apps update. So you get these fixes as soon as they’re available, without having to wait for a full OS update. 

Find the right balance with technology for you and your family

8. You have greater control over where and when notifications will alert you. Mark notifications as “Silent” and they won’t make noise or appear on your lockscreen, so you’re only alerted by notifications when you want to be.

9. Now Family Link is part of every device running Android 9 or 10, right in settings under Digital Wellbeing. Parents can use these tools to set digital ground rules like daily screen time limits, device bedtime, time limits on specific apps, and more. They can also review the apps children install on their devices, as well as their usage.

10. Want to be in the zone but not off the grid? Digital Wellbeing now brings you Focus mode. Select the apps you find distracting—such as email or the news—and silence them until you come out of Focus mode. Sign up for the Beta to try it.

There’s lots more in Android 10, including a new enterprise feature that lets you use different keyboards for your personal and work profiles, app timers for specific websites so you can balance your time on the web, new gender-inclusive emoji, and support for direct audio streaming to hearing aid devices. 

Android 10 begins rolling out to Pixel phones today, and we’re working with our partners to launch and upgrade devices to Android 10 this year. Learn more at android.com/10.

5-human-things-ux-designers-can-learn-from-conversational-design

It seems like magic: you talk to the phone, and it talks back. And if you’re lucky, it says something useful. You type into the chat box, and if the bot is good, you find out what you need to know. [Cue: shocked-looking stock photo models.] The current marketing term for it is “conversational design”, and it’s gaining more and more traction beyond big companies like Apple, Google, and Amazon.

Conversational design is actually old, in technological terms. IBM did a lot of the groundwork for voice-activated tech as far back as the ’60s. One of the first big chatbots, Jabberwacky, was conceived in 1981 and launched in 1997, and later evolved into Cleverbot.

Chatbots and their voice-activated cousins were initially little more than proofs of concept

Chatbots and their voice-activated cousins were initially little more than proofs of concept. There was even a bot or two where you could talk to “God”. Then came Apple, with Siri. Siri was probably the first commercially viable conversational interface. At least, it was the first massively successful UI of its kind.

Since then, the concept has taken off, and now everyone who wants to provide customer service without actually talking to their customers, is in on it…with conversational UIs of varying quality. See, good conversational design is just good design. You have to follow pretty much the same basic principles to get your message across. However, building a good conversational UI requires us to focus on design principles that might not otherwise get a lot of love in your average visual UI.

In the spirit of looking beyond our immediate area of expertise, and learning from other design disciplines, let’s see what the best conversational designers can teach the rest of us:

1. Anticipation

Anticipating the needs of our users is central to all design projects, no matter what kind of design you’re talking about. Conversational design, however, takes this to another level. Dealing with the needs of people who are talking to their device like it’s a person requires anticipating all the questions they might have, and indeed, all the ways they might ask those questions.

The best conversational UIs are based on very thorough research, massive data sets, years of testing, and a fair amount of guesswork to try and predict what people are going to need. Doing an A/B test doesn’t sound so bad now, does it?

2. Interpretation

Real conversations often go something like, “Hey, you know that guy, the pretty one, from the show yesterday?”

“We were watching stuff on the CW. They’re all annoyingly pretty.”

“The one with the hair? The dark hair? Skinny… goes fast?”

“You mean The Flash. Goddammit Brian, his superhero name is two short words. You can and should remember this.”

Human beings are highly inefficient at communicating what they mean, which is why there are literal college courses on various forms of communication. Half the effort of a conversation is often spent trying to figure out another person’s frame of reference, to then figure out what they mean.

Conversational UIs, therefore, cannot rely on specific, limited input from their users, like visual UIs can. They have to take a chunk of speech or text, scan it for meaning, scan it for relevant information, and then see if there’s anything at all they can do with it. And they’re typically not allowed to swear at us.

Beyond anticipating a user’s needs, all designers need to get better at determining their intent, when they click on a button five times to see if it’ll do something different, browse through the navigation menu seemingly at random, or any other weird stuff you see in your analytics.

3. Flexibility

For a quick example, let’s look at what happens when a conversational UI is not nearly flexible enough. 

flexibility

4. There Are Two Sides to Every Button Click

Regular UI design often comes down to laying out a path, a journey, and hoping users will hit all the right buttons to follow it. Conversational design recognizes the fact that every time someone uses your UI (of any kind), there’s a a two-way conversation happening. You said your piece already, when you designed the interface, and now it’s the user’s turn.

With a live conversation, we can adapt to someone’s input in real time, and the conversation will change to reflect that. The better conversational UIs can do this as well.

Imagine a world where your website can adapt to the user’s input on the fly, making it easier for them to find things they want. It already exists to some extent, with algorithms, big data, curated timelines (ugh), and recommended products (meh), and even some innovative apps that do their best to offer help when a user seems lost (thanks!), but this is a concept we’ve barely begun to explore. And it’s exciting.

adapt

5. Just Use Semantic HTML Already

We already know we need proper, semantic HTML for better SEO. And we need it for people who can’t rely on their eyes to browse the Internet. But if that’s not enough for you, consider poor Siri, Alexa, and their long-suffering siblings. The artificial assistants we talk to sometimes have to read through your markup—that’s right, your markup—to figure out where and what in the seven hells your phone number is, for example.

Listen, I’m not saying that improperly formatted data is what’s going to set off the AI rebellion, but I’m pretty sure that people who write bad HTML will be pretty high on “The List”.

semantic

Featured image via DepositPhotos.