Month: April 2016

When mobile-mageddon arrived last April, lots of businesses realized that building a mobile website wasn’t just a thing they’d have to tackle eventually, but an absolute must-have right now if they hoped to stay relevant and compete. That Google decided that mobile friendliness is going to influence search rankings is just icing on the mobile website cake.

But even though mobile search has overtaken its desktop cousin, the way people search on mobile—and the way they interact with mobile websites once they’ve landed on them—is different than the way they behave on desktop. And too few mobile website designers are paying attention.

Engagement, for one thing, is entirely different between mobile and desktop users. Take a look at Google’s numbers:

Image via Clickz.com

While there’s near parity in terms of number of searches, desktop users spent over three times longer on site and visited three times as many pages on each site. And the bounce rate for mobile was nearly twice that of desktop.

You can make of that what you will, but here are some hypotheses:

➤Mobile users have a pretty clear idea of what they are looking for when they search—they are on a mission for specific information.

➤If they don’t find what they’re looking for right away on a site, they will look somewhere else. 

➤They don’t have the patience to dig deep through a complicated navigation architecture; they expect to find what they’re looking for with just a few clicks. 

So…what does that mean for your mobile website design? Quite a lot, actually. Too many designers approach their mobile website as just a scaled down version of their main site, which misses the point, in my opinion. Your mobile website should be an opportunity to really leverage the unique qualities of mobile devices and engage the unique behaviors of mobile users.

Your mobile website should do more than just replicate the information on your desktop, it should deliver the information a mobile customer is looking for in a way that’s optimized for a mobile device. And that means a mobile-first mentality and design principles.

1. Prioritize Performance.

Slow load speed is the biggest frustration factor for mobile web users and one of the main reasons a customer will bounce away from a site; in fact, over three-fourths of consumers will click away from a site that loads slowly or won’t display properly on their mobile device. So you need to worry about performance first or your customers won’t stay on your site long enough to see all your other fancy mobile-first elements. Here are some things to keep in mind while you’re planning your mobile pages:

?Keep pages to 1 MB or smaller for fastest load times. 

?Think carefully about the images you need, and crop, resize, and compress them for faster loading. 

?”Minify” your code, especially JavaScript; JS requests increase complexity and slow page rendering.

If you want to know how your mobile site is performing, use this Google PageSpeed analyzer for concrete steps you can take if your site is loading to slowly on mobile devices.

2. Rethink Your Homepage Content.

For most small businesses, what mobile website visitors want to accomplish is probably different from what visitors to their main website want to do. All those flashy branding elements and images on your main site homepage aren’t going to interest your mobile visitors. Therefore, the information you put on your homepage should be directed at the needs of your mobile users, most likely some combination of the following:

?contact info, with click to call or click to text 

?location/directions/hours of operation

?search bar/product search

?place an order/order status/order tracking

?make a reservation/appointment/service request

?customer login/account access

?option to view main website

?mobile app download

?social media buttons

3. Simplify Menus and Navigation.

Image source

The “hamburger” menu is universally recognized and a very mobile-friendly solution to navigation—and it also respects the generally accepted idea that mobile navigation should take, at most, three taps to arrive at the desired page. Ideally, you should have just one sub menu under each menu category for ease of use. Be sure to put your most important pages first.

If you don’t need more than three or four menu items, you can experiment with static navigation, which has a simplicity that is visually appealing.

Image source

The key consideration in both cases is making your navigation and menu options easy for fingers of any size to tap and touch. Too many options packed in too tightly makes fingertip navigation virtually impossible. Which brings us, logically, to…

4. Design for Touch.

This is actually more nuanced than doing the obvious: Making sure buttons are large enough and spaced far enough apart that anyone, even someone with fat fingers, can navigate with ease. The average finger needs at least 44 pixels in both dimensions for a good touch experience; anything smaller and user experience suffers.

But beyond that, you need to design your mobile website around the common gestures and motions mobile   device users naturally use—and using those gestures as much as possible to let users accomplish their objectives on your site. What does that look like?

?Letting users tap a button or icon to call you, text you, email you, add an event to their calendar, use GPS to get directions, download a podcast—integrating the mobile device’s native functions and apps.

?Respecting the thumb zone in menus, navigation, and functionality.

                                                Image source

?Making user input as simple as possible: Choosing the right keyboards, using visual calendars instead of typing dates, incorporating auto defaults and auto complete, using social logins.

Image source

5. Reform Your Forms.

For the most part, mobile users really, really hate to type on their devices, so expecting them to enter a lot of information on your website is a real turn-off that is likely to cause a lot of visitors to head for the exits. So what can you do?

➤Only collect the minimum amount of information you need for a particular transaction. For example, if someone is signing up for your newsletter, you really only need a name and an email address (and don’t forget to use the email keyboard!).

➤If you have an e-commerce site, don’t force customers to register for an account to check out, give them the option of checking out as a guest.

➤For longer, multi-page forms/transactions, give users a status bar to gauge their progress.

➤Use best practices when designing forms for your mobile website. Users have an easier time completing forms with labels above the input boxes like the one on the left:

Image source

Forms are a great place for A/B testing; you can take out one or more fields, switch up the layout, play with the CTA and see which forms get the best completion rates. For the record, people are more likely to complete a form when it doesn’t require a phone number, so unless you absolutely need it, it’s best not to ask for it.

The travel industry does a pretty terrific job of only collecting the minimum amount of information necessary to give the customer what he or she is looking for—and doing it with a relatively painless form and method of user input. Look at this one from Expedia:

Image source

Someone visiting this mobile website can find airfares with just a few taps and without entering any personal information. Every mobile website designer should aim for this level of simplicity when it comes to collecting information.

6. Make It Easy for Them to Find the Products They Want.

Most mobile consumers have something specific in mind when they visit your site; mobile shoppers aren’t really browsers, as this chart showing Amazon’s visitors demonstrates:

Image source

A mobile visitor spends just four minutes and checks out about eight pages on average, which means he is spending about half a minute per page. That is a shopper on a mission; the desktop visitor spends twice as long on site per page.

For the mobile website designer, then, the challenge is making sure the menus and navigation makes it easy to find a specific product or narrow down the choices to meet a shopper’s particular needs that day. A mobile device user is most likely not going to spend a lot of time scrolling endlessly through products, so you have to be creative in providing menu options to help him find what he wants quickly.

Take a look at this menu from Paperchase, a UK stationery store. The menu options on the left are neatly organized with helpful submenus that will take the user to a very specific product category to help her find what she wants without a lot of searching.

                         Image source

This one has a really nice touch-friendly navigation with oversized buttons, which would be a great homepage asset, useful for helping visitors to their ultimate destination quickly. Notice, however, that this is a supplemental screen toggled from the hamburger menu, not the main site navigation.

                                   Image source

And don’t forget your search box. Your mobile website needs one, and if you really want to delight your mobile customers, make it a predictive search box like this one from Lush:

                            Image source

Don’t give into the temptation to scrimp on the content you put on your mobile website, either. You might imagine that there are some categories of products or information on your main site your mobile customers won’t need, but you might be surprised.

For example, you wouldn’t think many people would actually complete an expensive engagement ring purchase on a mobile device, so if you’re a major e-retailer like Blue Nile, why bother putting the same build-your-own engagement ring capabilities on your mobile site as you have on your main site? Well, for one reason, customers do enjoy building their perfect rings and sharing them on social media from the company’s mobile app and mobile website.

But that’s not all: Blue Nile generates 20 percent of its revenue from its mobile presence, and they estimate that mobile is responsible for closing about 30 percent of their sales. The company transformed its entire website to responsive design in 2015.

7. Don’t Neglect Your Fonts and Colors.

One of the worst things you can do is design your mobile website with text too small to be easily read; your users shouldn’t have to zoom to read a single word on your site, especially your navigation text. This leads to a terrible user experience, which is something search engines pay attention to in determining page rank.

For some brands, font choice is a major part of their overall branding, so the decision to switch fonts for the mobile site needs to be made judiciously. If you market to a mainly millennial demographic, you don’t have the same font size issues as, say, a brand that markets to baby boomers.

For easier navigation, choose fonts that are taller and naturally structured to leave a bit of space between letters. Most device manufacturers recommend Arial, Helvetica, Courier, Georgia, Times New Roman, and Trebuchet MS. Pick font colors that stand out from your background colors for easy reading.

And don’t forget the effect fonts have on load times, which is extremely important for mobile websites. When you are choosing a typeface, check it for speed. And only use a limited number of typefaces to keep page loads fast.

Image source

With the number of consumers who do business on the mobile devices, and the increased buyer intent when it comes to mobile searchers, today’s businesses really must do the work to compete for mobile customers. The first step, then, is a mobile-friendly website that rests on mobile-first design principles that enhance the user experience.

Mobile’s influence is showing no signs of slowing down, so whether you decide to revamp your desktop site with responsive design or create a wholly separate mobile site, the stakes are high to up your mobile game.

Developing a mobile app that people can’t resist downloading isn’t as simple as merely giving them something useful.

You’ve also got to write a good app description, name your app appropriately, and – you guessed it – create an amazing app icon that makes them want to click.

The average smartphone has 41 apps that the owner uses regularly. And if you want your app to be one of those essential apps, you need an icon that makes your app look irresistible. Otherwise, you’ll have a tough time enticing people to download your app in the first place, much less actually use it.

In the past, app icons were designed purely with functionality and ease of access in mind, but today we know that a good app icon choice is based almost entirely on aesthetics .

And – make no mistake – good app icon design is critical to your app’s success.

You can use your icon to promote your app.

With app store discovery accounting for about 70% of app downloads, your icon serves as a graphical representation of your app as a whole, so it really defines your brand and the first impression your app makes on potential buyers. Make a bad first impression, and it’s likely that your potential customers will skip right over your app and opt for one of your competitors.

In fact, research shows that 92.6 percent of people put the most importance on visual factors when making a purchasing decision.

Want to learn how to make an app icon? Keep the following best practices in mind while designing your icon, and your app will be much more likely to attract your target audience.

App Icon Creation Best Practices

Pick a bold, unique shape.

Simplicity is key to creating an app icon that’s memorable and recognizable. If you don’t pick a shape that’s unique and bold, your app will end up blending in to the rest, meaning that fewer people will be enticed to download it.

It’s also important to note that you should try to incorporate what your app does into the design of the app icon somehow.

The Spotify app icon is a great example of a bold, unique shape that incorporates the app’s purpose into the design. Take a look:

You can see that they’ve chosen two colors and a simple shape, which makes the icon easy to recognize. On top of that, the black lines inside the green circle represent increasing speaker volume. That’s because Spotify is a music app, so it immediately illustrates the app’s purpose.

Here’s an example of an app icon that isn’t so great:

This app has way too many elements. I mean, you can kind of tell what’s going on in the larger version, but it’s super difficult to understand all of the elements and what they mean in the smaller version. And because the smaller version is the one people are going to see on their mobile device, that’s a major problem.

So, while your app icon design doesn’t literally have to represent what your app does, it should represent some aspect of the overall functionality if possible. That way, people can quickly understand the value of your app just by looking at the icon.

Avoid using a photo.

This applies even if you think the photo includes a bold, unique shape. If you have a photo you really like that’s simple, bold, and represents your brand, create a vector image version of it. Or use some of the elements from the photo to inspire your vector image design, like this design by the Sipp app:

Image source: The Next Web

The Sipp app icon creators knew that the purpose of the app was to help users share information with their friends about the wines they tried. So their starting point was, of course, a picture of a glass of wine.

But they didn’t stop with the picture. Instead, they had the image illustrated and added a letter to it, improving the overall appearance of the icon and making it more memorable.

Don’t overload the icon with color and detail.

When designing your app, you have to keep in mind that the app will appear tiny on the user’s screen. That means that including too many colors or too much detail could hinder your app from standing out.

So limit yourself to two or three colors if possible, and resist the urge overload the design with detail. The simpler your app icon design is, the more it’ll stand out from the rest.

The Snapchat app icon is a great example of an app icon with a simple color palette and design.

It’s a simple design with rounded corners. You can see that the two main colors are white and yellow, and the designer used a black border around the white ghost to make it stand out even more. It’s instantly recognizable from other icons on the home screen. So not only will it get the user’s attention in the app store, but it will also increase opens. And there’s not a lot going on in the design – it’s just a ghost on a plain background. That’s about as simple as it gets!

If you look through the app store, you might also notice that many app icons tend to have similar appearances. A recent study by Appbot revealed that many of the most popular apps have icons that share similar colorways.

Red and blue dominate the landscape, while green is also pretty popular. But you’ll notice that the most prominent app icons tend to commit to just one or two colors.

Keep that in mind when you’re choosing the colors for your app.

And make sure the colors align with your brand. The color palette for the icon should be the same one you use in the design of the actual app, and it should attract your audience. Since 84.7% of people in a Secretariat of the Seoul International Color Expo survey reported that color accounts for more than half among the various factors important for choosing a product, its critical for you to choose the right color scheme.

Tip: Use contrast the right way in your design to draw potential customers’ eyes to your app icon. If you’re not sure which colors are best to use together or want to learn more about color theory in design, check out this blog post.

Don’t include words.

Think about it. Your app icon is going to look tiny on a smartphone screen, meaning that users will pretty much need a microscope to read any text you place on the icon.

That’s why it’s best to leave text out of your icon design. If you create an effective app icon and name your app something appropriate, that will be enough to draw people in. Then, they’ll be able look at the app description to learn about what it is and what it does.

Now, you might be thinking:

Wait a second. Facebook technically uses text in their icon by putting the letter “F” there, and they have one of the most successful apps ever!

And you’re right. They do.

This design works for them because it includes a bold, unique shape that represents their already well-known brand. So, if your brand is already well-known and you feel like a specific letter represents it, you may be able to create an iconic app icon with just that letter.

Otherwise, I strongly advise you to come up with something different that represents your app’s functionality. Just because Facebook can get away with using a single letter doesn’t mean that’s the best tactic for you.

Consider incorporating some kind of border.

We’ve already talked about how Snapchat put a border around the ghost in their app icon, but you could also put a border around the entire icon image. The Adobe Photoshop Express app icon is a great example of effective border use:

You can see that their overall design is still simple and the border makes the icon stand out.

The main reason a border can help create more impact for your icon is because it emphasizes the content inside the border, making it stand out more in the app store. And that can easily result in more downloads.

You can even get creative with the border itself, creating a 3D effect like this:

But remember – the border you use around your icon should have a strong color that contrasts well with the colors inside the border, or your icon might not stand out at all.

Look at your competitors’ app icon designs.

When you do this, you’ll be able to figure out which color scheme and design aspects could help you differentiate the most.

For example, let’s say you’re creating an app for users who want to check and organize their emails. Your best bet is to look up other email apps to find out what kind of design your competitors use. Here are some of the first ones that show up in the Apple app store when you search for “email”:

Lots of clean app designs, right?

They aren’t all the same thing, but there’s a similar theme throughout all of these. Most of them include a picture of an envelope, and all of them include either red and white or blue and white as the color scheme.

To stand out from these competing apps, you might consider choosing a different color based on your brand and target audience. You could get creative and choose a symbol other than an envelope, although you’d still want to pick something that represents email if possible.

See how quickly a simple competitive analysis like this could help you figure out how to set your app apart from the rest?

It only takes a few minutes to look up your competitors, so there are no excuses for not doing this before you start designing. If you do skip this step, you may end up with an app icon that looks just like everyone else’s, giving users no incentive to download your app over your competitors’ apps.

Create several app icon variations to consider.

You can simply sketch these variations on a piece of paper or have a graphic designer handle it for you. The point here is to brainstorm and give yourself several ideas to consider before finalizing your app.

Here’s a good example of app icon sketches from a Behance case study:

When you see your app icon sketches side-by-side this way, it’ll be easier to determine which elements you like best and which icon is most likely to entice users to download.

Look at your icon on a phone screen before you make a final decision.

When designing your app icon, you’ll need to consider how it will look against the colors of mobile device wallpapers. Keep in mind that most users have a unique wallpaper, so you want to make sure your app looks good against a range of dark and light backgrounds.

Some users even choose hectic live wallpapers with a range of colors and objects that can make apps hard to find on the screen. So it’s your job to make sure your app will always show up clearly.

And think about how the app looks in general on a phone screen too. If it’s too detailed to be recognizable or doesn’t look clean from a design perspective, you’ll need to make some changes.

Make sure your app icon is the right size.

When you create your app icon, it needs to be the appropriate size for the screen it’s going to be viewed on. And this isn’t an optional step for iOS app icons – Apple won’t even accept your custom icons if they aren’t the right icon size.

The last thing you want after spending so much time designing an appropriate app icon is for it to be rejected by the app store. So, if you’re going to release your app in the Apple app store, read their sizing guidelines here and make sure you follow them carefully. Wherever you plan to release your app, look for their required iOS app icon guidelines so you can follow them and make sure your app is accepted.

A/B test different app icons.

Doing so will help take the guesswork out of picking the best app icon design and help you choose the one that best resonates with your target audience.

If you’re releasing your app on Android, you can simply use the Google Play A/B testing feature. This is ideal for all Android app icons. If you’re releasing your app for iOS or somewhere other than the Google Play Store, try A/B testing your app with your Facebook audience – it’ll cost you some money, but the insight you’ll gain will be worth it.

Tip: For a more in-depth look at how to properly A/B test an app icon, check out this blog post. And for ideas on how to A/B test your app as a whole, read this advice from KISSMetrics.

Options for Creating Your Own Custom App Icons

You may be able to find a free app icon maker online, but you’re better off using quality design software or partnering with a professional graphic designer. That way, you end up with a well-designed icon that’s original and avoid having to work within the constraints of the free program (since it may only offer a few different fonts and images).

Let’s discuss these options a bit more in-depth now so you can make an informed decision.

Use Adobe Illustrator.

If you’ve worked in Illustrator before, you probably already know that its functionality makes it a great option for designing a vector image to use as your app icon.

After you’ve sketched your app icon design ideas, choose the one you want to work with, and import the sketch into Illustrator. Then, you can begin designing your icon based on the sketch.

Tip: If you don’t have lots of experience working in Illustrator but want to use it to design your icon, you can read this blog post for an easy tutorial. If you do have plenty of experience with Illustrator and Photoshop alike, here’s a more intermediate level guide to designing your app icon.

Hire a graphic designer or graphic design firm.

If you’re not a seasoned designer yourself, hiring one is probably your best bet for getting an app icon that resonates with your target audience and looks amazing in the app store.

Here are a few tips to help you hire the right graphic designer:

• Look for a designer who specializes in app icon design. If they’ve never designed an app icon before, they may not have a deep understanding of app icon design best practices. So, try to look for a designer who has a portfolio full of attractive app icons. They should also be comfortable creating an Android app icon as well as iOS icons.
• Avoid websites like Fiverr and Upwork. While some designers on these kinds of sites can produce high-quality work, you’re better off looking for a professional graphic designer on LinkedIn or asking one of your colleagues to recommend a designer they know and trust.
• Look for testimonials. If you see that the designer’s previous clients were happy with their results, there’s a good chance that you’ll be happy with your app icon design.

Keep in mind that you often get what you pay for when hiring a graphic designer, and don’t expect to get your icon designed for cheap. The financial investment will be well worth the extra downloads your app gets because of its well-designed, eye-catching icon.

And remember: if you hire a designer to create a handful of designs to choose from and none of them meet what you’ve been looking for to represent your app, don’t settle. Your app icon is important, so you need to get it right.

In Conclusion

Now, you have all the information you need to design your app icon in a way that will attract potential customers. And before you know it, you’ll be able to release your app and watch as its unique icon design attracts huge numbers of downloads.

Whether you’re building an Android mobile app and need a custom icon, you’re creating game app icons, or something in between, I hope this guide steered you in the right direction.

The standards of app design overall are still being set, and just as mobile devices continue to evolve, so will the appearance of the app icons made for them.

So, experiment, run A/B tests, and find out what icons work best for your brand. Your app will have a greater chance of succeeding as a result.

Do you have any questions about how to create an amazing app icon? Ask away in the comments section!