Web design trends we can expect to see in 2017

It’s that time of year where we look at the year that was and the year that will be. We’ve seen a lot of amazing website designs this year, and I’m eager to see what 2017 has in store for website and website design.

2017 is sure to bring some amazing website designs, but if we look hard enough, we can already start seeing some trends that are sure to dominate websites in 2017.

Let’s take a look at the 10 website design trends we can expect to see in 2017.

Emphasis on the content


Credit: Vice

We’ve spent years adding things to our websites such as sidebars, headers, banner ads, sidebar ads, calls to action, comments, popups, social media buttons, signup boxes, etc. All of these things have ended up cluttering our websites and taking up more and more real estate, taking the attention away from the entire point of a web page: the content.

In 2017, websites are likely to start moving back to basics and placing more emphasis on content. Whether that means we remove all of the other distractions we’ve spent years adding, or just making them take up less real estate is yet to be determined. Getting back to the heart of a website — the content — will be prevalent moving forward.

The end of flat design


Credit: Dansk Design Center

I think we’ve reached the point in flat web design where everything is starting to look the same, and we’ve lost our personality and creativity in design. When you strip everything away, you’re left with what everyone else has: the basics that look just like each other.

From my standpoint, flat design has turned from a modern update of skeuomorphic design to a set of design aesthetics that everyone applies (think Google’s Material). Because of this, sites are starting to look the same, and not much differentiates sites from one another. Designers feel that the creativity is gone, and with the desire to create something great, I see flat design ending for the most part in favor of layouts and designs that are more imaginative and unique.

Geometric shapes, lines, and patterns


Credit: Sequence

It seems as though the use of geometric shapes, lines, and patterns have really taken off in the late part of 2016, and I anticipate this continuing through 2017. There are various ways in which geometric shapes have made their way into websites. Be it the use of circles around images, photos that are geometric heavy, or the overall design of the site relies heavily on the use of lines and patterns.

There is nearly infinite amount of ways in which you an integrate geometric shapes, lines, and patterns into your website, and this could be one way in which designers take flat design to a new level (and even add some personality, as mentioned above). Overall, expect to see these types of design styles more throughout 2017.

Imaginative heading styles


Credit: Rehab Studio

We’re starting to move away from the basic heading style seen on websites (san serif, all caps, centered heading) and moving more toward imaginative or creative headings. Changing up the heading style is a welcomed way to be unique in your design.

Changing up the justification and layout of the heading, adding unique elements to the heading, or even going without a heading (at least above the fold) are all ways in which designers are starting to experiment with changing up the typical heading style on websites.

Duotone gradient imagery


Credit: Lois Jeans

In the pursuit of staying more on brand, more brands are using duotone imagery and graphics for their websites. Even TNW has got the duotone down right, and it isn’t even 2017 yet.

Not strictly duotones, but some designs are even experimenting with two or three colors and using the duotone effect. Think Instagram. While flat design helped us get rid of (most) gradients, using duotone imagery that combines a couple of colors together has proven to be a nice update to the old and tired gradients and solid color areas.

Increased use of animations and GIFs


Credit: Cool Club

Animations are starting to be used more heavily on websites as they are often a great way to show how something works, how to do something, or otherwise reveal meaningful content. GIFs have been used for this purpose, but now we are seeng GIFs becoming more sophisticated and animations using SVG and CSS to achieve some pretty unique design elements.

I anticipate in 2017 the use of animations will become more prevalent, as more content types are shared and animation helps communicate things easier and quicker than text and video can. Plus, when done right, can often be even more lightweight than several images or even a video.

Navigation diets


Credit: Nacache Design

As being a mobile society, I believe that because most of us access the web through our phones more than our computers, the overall trend to make things easier to navigate has taken over and reformed our navigation on websites.

Instead of overly complicated and long navigations, more and more sites are starting to simplify their navigation down to about four to five items. Keeping navigation to a minimum also helps visitors to focus on the intent at hand, instead of trying to find a way off the page.

Microinteractions


Credit: Buck Design

Microinteractions are the subtle, but powerful ways to interact with a website. They are often found in hovers, click animations, scrolling effects, etc. While we’ve always had these types of design elements, designers are spending more time on them, making them are informative and more refined.

Probably the most used integration is the hover/rollover, where a visitor can simply move their cursor over parts of the site to see these microinteractions and interact with the site in that way.

Increased use of hand-drawn elements


Credit: Anyways

Perhaps a different type of web design trend is the increased use of hand drawn elements. These elements include fonts, icons, graphics, buttons and other elements that bring a nice unique touch to websites.

Websites have never been a medium that most would associate with drawing out, but the introduction and the subsequent takeoff of these hand drawn elements have been a nice change from using standard design elements.

More emphasis on landing pages, less on a home page
As we refine content and opt to market and share it more, in 2017 we will likely see a rise in landing page designs instead of a home page design. While every website needs a home page, I think that as content marketing spreads, marketers will want to direct traffic to dedicated landing pages to better target their visitors and their needs.

It makes sense: The idea of content marketing is to increase awareness and conversions, and what better way to increase conversions than to have visitors land on a page strictly made for them. These pages will be as well designed and thought out as others on the site, but target the visitor much more.

Conclusion

2017 is sure to see some great websites, and these design trends will most definitely be seen on some of the best website designs yet to come.

From hand drawn elements to duotone images, imaginative headings to more focused content layouts, to microinteractions to animations, these design trends will dominate web design in 2017.

Mobile Web Navigation Best Practices

Smartphones are not simply phones, but users’ favorite devices for checking destinations, locations, schedules, and bank balances.

Internet browsing is almost completely transferred to handheld devices, knowing how much time busy people spend on the go, and all the situations in which they’d grab their phone and surf the internet.
 

Image source: Basov Design
 
Still, the biggest problem of handheld devices is their limited screen space, which often obstructs visibility while multi-tasking forcing users to surf with a single finger.

That puts navigation quite high on the list of web development and design priorities. Both developers and designers know a good site is worth nothing if it confuses users, and doesn’t let them find what they are looking for. In most such cases, users leave never to return.

Image source: Rosie

But how to be absolutely sure you’ve handled navigation well? Let us share the mobile web navigation best practices that can be useful to you:

A SUITABLE NAVIGATION MENU FOR SMALL SCREENS

One fact designers always consider is that the behavior of users when accessing a website from their phone is different than accessing the same website from their desktops. Including a comprehensive menu on a small screen is a tricky task, but it is perfectly feasible if planned carefully.

THE MOST IMPORTANT PAGES GO FIRST


Image source: VisualRocks.co

Before you release your own mobile version, take a look at the ones that are already there. Which pages are displayed first? Better yet, have you developed your own strategy for outlining top category pages?

If not, think about the most common actions you expect users to perform, and in particular those that can satisfy their mobile needs.

In the world of mobile browsing, speed is a top notch priority. Users don’t want to list categories for ages in order to perform something simple, and the best way to improve their experience and to invite them to stay is to keep paths simple.

YOU DON’T NEED A LOT OF MENU BUTTONS


Image source: Olia Gozha

Remember that you’re designing a mobile menu which will be displayed on a small screen. Your real estate in the case is fairly limited, so don’t experiment with too much clutter. Keep only the most important fields.

For instance, try to figure out which links can be your users’ priority, and which are the elements that are not really relevant in a mobile environment.


Image source: Anthony Lagoon

Of course, this is not going to be easy at all, but if you want your website to be really mobile friendly, you must stick to a more limited framework than the desktop one, and have a maximum of five menu buttons.

CONSIDER NESTED NAVIGATION

Nested navigation is a three-line button which can be invaluable for mobile websites. The tool allows covering options in drop-down menus so that they won’t occupy the front page space when not needed.

THE FEWER TAPS THE BETTER


Image source: Vilém Ries

Everybody wants to make his website more productive, but tenths of taps are not that likely to help. If you want a successful site, keep tapes and minimum, and let the user choose from a very basic menu.

This strategy eliminates the risk of errors, especially because the user can go back quite easily, and he won’t be frustrated.

BEWARE OF FONTS AND CONTRASTS


Image source: Greg Christian

Due the fact that you’re working on a small screen, try to keep text readable without zooming. This is one of the most important mobile-friendliness priorities.

Navigation, in particular, has to be easy to read, so you should choose a clean font and make it taller with some extra space between the letters. Most commonly, designers opt for Times New Roman, Helvetica, Arial, Georgia, Courier, and Trebuchet MS, because none of them has overdone ornamentation.

INCLUDE SCROLLING NAVIGATION


Image source: Simon Robinson

Be careful when placing categories in your navigation menus, and think of their hierarchical order: Is there a category that is more important than the others? Are there any subcategories? All of these aspects have to be considered in order to ensure each category has its own place.

For instance, the most important categories should come highest in the menu, while the user should scroll down to find the less important ones.

STACKABLE BUTTONS


Image source: Roma Datsyuk

Remember that what mobile users see on their device is a portrait rather than a landscape, so try to present your web design vertically. The text that was originally read across should be read down, assuming that you have no more than 5 categories.

TOUCH DESIGN

Both smartphones and tablets are handled with touch, which is why you need to consider the average space required by fingertips when deciding on the size of your elements. Ideally, when selecting items in tight spaces, users should rely on at least 44 pixels (left to right and up to down) space to tap on the exact item they want to see.


Image source: Nashatwork

As you probably know from personal experience, leaving less target space than 40 pixels leads to taping on the category above or below the desired one – a thing that is very likely to confuse or even disappoint users.


Image source: Marko Prljic

OPTIMIZATION TIPS

  • Place menus on the top/bottom of the screen, depending on what users intend to do on your website. If their aim is to scroll down and to look for content, your bottom menu is likely to inspire them to continue browsing instead of leaving your site to check the competitor’s one.
  • Hide a part of the menu to free space for other content, or make it visible only when users deliberately click on it. In such way the menu will stay up front, and will still be visible without obliterating more useful content.
  • Include a link to the menu on top of the screen in case the menu link is at the bottom.
  • Short and wide are your best bets when designing mobile navigation, since you’re making sure that category titles are visible and look better.
  • Try to decrease header images, or replace them with a smaller logo to leave more space for navigation.
  • Remember to keep your design and branding elements consistent with color, typography and style, and keep all navigation buttons similar instead of wasting valuable space to add large images and graphics.
  • Keep text as short as possible, especially when designing the menus and the buttons. Sometimes, it will be extremely difficult to limit what you have to say to a couple of words, but this is the best way to save space and to keep users interested.
  • Whatever can be made simpler, make it simpler. This matters especially to the homepage, where users should focus exclusively on the top items and the elements that are most relevant to them.


Image source: Rahul Bhadauria

THINGS TO AVOID IN MOBILE NAVIGATION OPTIMIZATION

As counterintuitive as it sounds, users don’t like too much choice. You need to keep them satisfied with only few buttons, and to avoid the following mistakes:

  • Offering too many choices
  • Relying only on horizontal scrolling
  • Hovering
  • Including slider menus
  • Oversimplifying and boring users
  • Making navigation unintuitive
  • Complicating access to important information


Image source: Damien Da Costa

FINAL THOUGHTS

Mobile web design changed almost every basic design rule and principle and imposed a whole new set of practices to adopt. It was a drastic change of interface requirements and a turnover in standards, and like it or not, we had to jump on the bandwagon and surpass the learning curve to know what is best for our mobile users.

Design is no longer traditional, and that’s fine because we live in a user-focused world where creativity matters less than satisfying customer needs. Before designing whatever, we have to ask ourselves:


Image source: Clément Pavageau

What is it that the user came to do on our website? How can we make that easier for him? Does our budget allow it? These are the answers that will help you develop a great mobile navigation strategy to attract and keep users on board.

Basically, all that needs to be done is to meet their needs – that will make them happy, and it will inspire them to come back and to recommend your website.

Building Blocks for a Successful Website Redesign

Do I Need a New Website?

Architects work with construction developers to build spaces. Graphic designers work with coders to build websites. The “brain” draws up a visionary blueprint and the “brawn” ensures that vision is realized to its fullest potential.

For architects, understanding the intricacies of laying bricks can greatly impact the outcome of a wall design. We consider bricks as modular building blocks, yet time and again we’ve seen beautiful, surprising and impactful end products made out of this simple baked clay.

responsive web design

The process of developing a website shares this sensibility. Even though every website is built in standard HTML codes, a visionary graphic designer working with a seasoned Web developer can create a one of a kind user experience that is equal parts beautiful, functional and sustainable for years to come.

Aligning your vision with a team of graphic designers and Web developers at the outset of a website revamp project is key to a successful collaboration.

Below are a few lessons learned to help plan your website makeover project.

You need a new website if:

1. Your clients don’t award you projects because of what they’ve seen on your website.

2. You get complaints from people trying to get information or view your work on the website.

3. Your website is not responsive chances are your website is more than four years old. Instead of buying into “mobile optimization” projects, or “deflashing” your website, you may as well reimagine your website with today’s user behavior in mind. Call it a complete website revamp instead.

4. Your website loads slowly and images not very on today’s larger screens.

5. Updating the website feels like a big personal project due to a poor content management system (CMS) or the absence of one.

6. Your business model has changed and the website can’t be easily updated to reflect this.

Starting a Website Revamp Project

webdesign makeover

To start a website revamp project, first consider the following:

1. The primary stakeholders are on board usually partners or marketing director of your firm.

2. Someone in your company is ready and available to be the point contact person with the designers and Web developer.

3. You can allocate some time and resources to the website revamp, i.e. preparing images, proofing/editing texts, testing the website prototype, managing review and approval process internally.

BASIC TECHNICAL REQUIREMENTS

Your new website should fulfill the following technical requirements for today’s Web standards.

Don’t settle for anything less:

1. Responsive design. Your website must be fully optimized for tablets and mobile phones in addition to desktops.

2. Don’t use proprietary tools that require users to install special plugins to view your website (hint: don’t use flash) no one is patient enough to go through hoops just to access a website.

3. Search engine optimization (SEO). Make sure your website is ready for SEO. This usually takes time to nail depending on your business’ focus. Hiring an SEO specialist can greatly expedite increasing the rank of your website on popular search engines.

4. Content management system (CMS). Always ask for a CMS tool that allows you, or someone internal, to manage the website content on your own without having to contact the web developer for updates. The waiting game will cost you missed opportunities in no time.

5. Ongoing relationship. You may not need to work with the web developers regularly, but you want to make sure the company you’ve selected to work with has a good track record in responding to existing clients when they’re in need of technical help, regular maintenance, of feature updates.

DEFINING THE SCOPE OF WORK

web designer
Answering these questions will help you define a project brief and begin conversations with web designers:

1. What are your business goals?

2. What are your aesthetic values?

3. Can you identify problems with the existing website, both technically and aesthetically?

4. Do you need new branding/logo? Are you open to ideas? If you are, be prepared for a longer process working with the graphic designer. It’s also a good idea to work with a web designer who understands branding.

5. Who will be involved in the decision making process for design and technical build? Can they be involved in the early design and planning steps?

6. Do you have login information to the existing web hosting, domain registrar, and the CMS?

7. What visual assets do you have? Is it worth photographing key projects for the revamp project? If no photography is available, will you be showcasing renderings, sketches, or drawn up plans?

8. Do you need to rewrite or edit descriptions and specifications for each project? If so, make sure to schedule this properly accounting for the internal review and approval process.

14 Hot Web Design Trends From 2015

The loudest content medium out there has finally learned how to be quiet. In 2015, web design moved away from information overload to an aesthetic revolving around empty space and simplicity. Taking a cue from magazines, web pages are using large high-definition photographs and typography to lure in readers with eye-pleasing openers before revealing further content.

Related: 25 Must-Have Free Fonts for Entrepreneurs and Designers

This design is influenced by a new appeal to simplicity and by the need to cater to mobile web traffic, which is increasing every year. In the face of this push to cut away excess, here are 14 design trends that have reared their heads so far in 2015.

1. Minimalism

From simplifying logos and typefaces (here’s looking at you, Google) to cleaning up entire web pages, minimalism is the trend influencing all others. Websites are focusing more on their actual content and reducing all of the clutter around it. Footers, sidebars and borders are all disappearing, and even color palettes are being simplified as companies emphasize one dominant color in their visual design.StubHub’s logo change is a perfect example of this trend.

2. App-like menus

Designing with the mobile market in mind changes more than just aesthetics. It has impacted the way web illustrators think about organizing their content and how they let readers access it. Sticky menus and sidebars are falling out of favor to make room for content that readers actually want to see. These days, menus are at the top of the screen and are mostly hidden, noted by a single icon (often a stack of three lines called a “hamburger”) that when selected drops down or slides out into a more robust menu. Social media analytics companyUnmetric has a beautifully simple example of this style of menu.

Image credit: Unmetric

3. Ghost buttons

Web sites are moving away from loud, flashy buttons, and are embracing transparent buttons. Because they are less obtrusive, ghost buttons help sites highlight more of the content they want audiences to actually see instead of call-to-actions they would otherwise force users to click. Ghost buttons include only the outline of a button (no fill) along with a word or two in simple typography in the center. BigDrop, a web design firm, features a prominent ghost button on their landing page.

Image credit: BigDrop

4. The reign of the hero Image

Already trending in 2014, the hero image hasn’t gone anywhere this year, but it has evolved. Last year, sites all over the web included the standard hero image: a high-definition (HD) picture featured prominently at the top of a website that stretched the entire width of a user’s browser window with only a few words of text overlaying it.

This year the hero image has changed in a few remarkable ways. Some sites have taken the HD photo one step further and embedded HD video onto their landing page. Others pursued the opposite route: blurring the banner photo or removing it altogether in favor of a simple colored background to draw attention to the text. Spotify’s site shows a blend of these trends, offering an image on one half of the page but leaving plenty of white space for its heading and a pastel and ghost button to boot.

Image credit: spotify

5. Interesting typography

When the hero image became popular, designers began paying more attention to typography. Picking an engaging font is crucial to drawing a visitor’s attention when so much of the site’s content is simplified and reduced as an effect of minimalism. Ad agency RSQ uses custom typography on its website and features a powerful statement without any other distractions to spotlight its message to audiences.

Image credit: RSQ

6. Stock photos that don’t look like stock photos

The days of the generic stock photo are over (thank the photography gods); jaw-dropping visuals are in. With communities like 500px andUnsplash, finding high quality do-whatever-you-want-with-it photography is easier than ever. As a result, websites no longer look like the result of an uncoordinated stock photo shopping spree. Now, they actually feel genuine.

Image credit:500px

7. Single page design

Nobody wants to click through multiple pages anymore. Instead, users prefer to scroll through content on one long page. This trend too has its roots in mobile web surfing because it is far easier to scroll down with your thumb than it is to click through multiple pages and wait for each to load. This year has reinforced that concept, and while few websites are only a single page, most are reducing the number of pages they have and lengthening the content on each to be more mobile-friendly.Smartwater’s website uses scrolling to great effect by making the visitor scroll up rather than down to illustrate that their water is distilled from vapor.

Related: The Key Elements of a Great Blog Design (Infographic)

Image credit: Smartwater

8. Parallax scrolling

A way to make websites more engaging, parallax scrolling creates a three-dimensional illusion that draws audiences into a site’s content. Many brands now use parallax scrolling to create a more immersive effect for visitors. Dangers of Fracking uses this brilliantly as you follow a drop of rain from the clouds to the depths of the earth.

Image credit: Dangers of Fracking

9. Modular design

Call it a grid, tiles or cards, each of these designs creates the same effect: organizing content in an efficient, aesthetically pleasing way. A single column of content is inefficient and less user-friendly by comparison. Modular design allows a page to show more content to users faster, in a way that makes more intuitive sense and creates a more visually engaging layout at the same time. On its homepage, The Next Web offers a textbook-perfect example of good modular design.

Image credit: The Next Web

10. The evolution of flat design

Flat design made a huge impact on graphics last year, so much so that Google released its own version of flat design called material design. Material design employs the same aesthetic as flat design, focusing on simplicity and clean presentation, but Google’s design has more subtlety. Whereas flat design includes simple illustrations to create recognizable but minimalist two-dimensional content, material design uses gradients, slight animation and shadowing to add depth to the image. With most web designers in a minimalist mindset, material design won’t be going anywhere soon. Below is Material Design Blog’s landing page, which is a great example of how material design works for logos.

 

Image credit: Material Design Blog

11. Line icons

Alongside material design, line icons is the other movement finalizing the decline of skeuomorphism. Rather than an icon looking exactly like the object it represents (a design style that Apple popularized with its iOS icons), icons are created with simple lines and shapes that convey an action, object or thought we are all very familiar with. Many line icons have become universal in web design, such as the outline of a magnifying glass signaling the search function or the hamburger (three stacked lines) for a menu. Below are examples of line icons fromOtherIcons.

Image credit: OtherIconsb

12. Google Maps integration

Google Maps is everyone’s go-to map service, and it is only getting better. With customizable options, more brands are integrating the service into their websites — a move that is long overdue. Companies can add Maps to their site and customize its colors to complement their preferred color scheme. For example, Airbnb uses Google Maps and customized markers to help users figure out where available rooms are and how much they cost so they can plan a getaway that fits their budget and style.

Image credit: Airbnb

13. Scalable vector graphics (SVG)

When Apple released Retina display, designers were up in arms. Upset that their graphics and images suddenly looked pixelated with Retina’s higher resolution, designers were forced to adopt new methods that would allow their illustrations to look good on and be compatible with any device. Fortunately, Scalable Vector Graphics (SVG) rose to the challenge. SVG presents graphics as vectors, which allows them to scale with different resolutions. With SVG, images maintain their clarity and sharpness on all devices. Snap.svg, a Javascript SVG library, has many examples available, such as this one below.

Image credit: Snap.svg

14. Vertical split layouts

Split screen layouts are popping up all over the web this year. With a vertical split layout, designers are able to present twice the content to users in a clean and simple format. Websites are divided in half widthwise, featuring two separate messages. The split screen is a great way to show equality between two things because standard web layouts dictate the most important things come first. Car maker Peugeotuses a vertical split layout on its homepage to blend the human element of the car with the car itself, suggestive of the relationship between driver and vehicle.

Image credit: Peugeot

Now that 2015 is coming to a close, which new trends will designers adopt in 2016?

DANNY WONG
CONTRIBUTOR
Entrepreneur, marketer and writer.

Need More Customer Data? Improve Your Design.

For most businesses, customer data is as good as revenue. When more customers give up their names, email addresses and other forms of personal information, you get valuable ammunition you can use in your future marketing campaigns—or maybe a direct line to a possible sale.

Most modern business to business (B2B) and service-based companies use form-based calls to action, which prompt users to leave their personal information in exchange for something small, like exclusive content or a special offer.

It’s no secret that design tweaks can help improve your chances at achieving this type of conversion, but a new study suggests that Web design and the type of information displayed on a given screen can significantly indicate whether someone chooses to disclose personal information about him/herself—and how much he/she discloses.

Throughout the experiment, several things were changed, include the placement and prominence of privacy statements, and the layout of items in the interface. However, little of the core content or approach were altered. This suggests that a handful of simple changes to the layout of your landing page and the type of information you present to your customers can greatly increase your conversion rate.

INCREASING TRUST

One of the biggest design factors responsible for getting people to disclose personal information more willingly is trust. If your design and content naturally makes people trust you more, they’ll be more likely to hand over their information—they’re less worried that you’ll abuse the information, and if their expectations aren’t met, they feel satisfied that someone on the other side will help them attain a resolution.

Trust comes in many forms, so how you build that trust is up to you. You could prominently display your privacy policy, as well as describing how you’re using (and not using) that information—the study referenced above found that fuller, more transparent disclosures of privacy policies led to more personal information being disclosed. You could also include markers known as “trust badges,” which display different affiliations and accreditations of your company to prospective buyers. For example, if you’re a “top rated” seller on eBay, or if you use SSL security, you could feature a badge that conveys that information to customers.

Aside from that, you can include customer-submitted information, like reviews or personal testimonials, to show that your company is worth doing business with. Videos tend to be the most helpful, as they’re harder to fake, but written reviews can help too. You could also prominently feature your personal brand, if you have a strong reputation in the industry or some worthwhile affiliations like an impressive client list. 7Search.com, for example, shares its most well-known clients on its homepage:

MAKING IT EASY

Other design changes that can influence how much information a customer discloses involve making it easier for a customer to disclose it. Here, you’ll have to strike a careful balance, since making the process easier for customers often means reducing the total amount of information they have the opportunity to disclose. For example, narrowing your conversion form from 10 fields of personal information to 4 can significantly increase your total conversions, but reduce the amount of information you gain from each conversion.

The best way to approach this is to make the point of first contact as minimally invasive as possible—two or three fields is enough to get a good start. From there, you can always work to attract more information through a branching path. For example, offer a line that asks whether a user would be willing to conduct a brief survey about their habits and interests—those who mark “yes” can be followed up with for more information, and those who mark “no” can still be used for what information they did submit. This approach allows you to collect the most amount of information that people are willing to give—without alienating the stingiest customers in your user base.

GRABBING ATTENTION

Last but not least, you’ll need to include design and layout elements that grab your customers’ attention. Having a call to action off to the side, practically invisible, will do nothing for your bottom line conversion rate. Including it prominently, with strongly contrasting colors and energetic wording that encourages action, will. While “Get Started” isn’t the most exciting copy, the blue in the call-to-action below (from Light CMS) works great against the other colors on the page to draw attention.

However, if you go overboard and make your call to action obnoxious and over-the-top, you might end up making your offer seem like a scam, which negates any trust you might have built through other changes.

The key here is to offer a sleek, eye-catching, yet professional layout that encourages people to take action. You’ll have to play around with different color schemes, pictures, and other design elements to see what works, but there are no clear shortcuts here.

It’s common knowledge that the design of your pages and calls to action can affect whether or not people convert, but the type of design changes—and the content you do or do not make available—can dramatically affect not only whether people convert, but how much information they’ll be willing to share with you. Experiment to see what layouts and offers tend to accumulate the greatest amount of customer information, as the more information you can get, the better.

By Larry Alton, @LarryAlton3 :

10 Timely Tweets by Allison Howen

Twitter is a fast-paced environment, which means that a brand’s posts can be pushed down the newsfeed in a matter of seconds.

In order to stay both top-of-mind with consumers and at the top of their newsfeed, brands are always looking for ways to increase their visibility. One of the ways they can do this is by participating in relevant and timely conversations. By doing so, brands can increase their chances of being seen not only in followers’ newsfeeds (and improve ROI), but also by other prospects who search a trending topic or hashtag on the social network.

It is important to note, however, that brands should be selective about the real-time conversations that they join, and only participate when they have something relevant or appropriate to say. For inspiration, check out 10 examples of timely tweets featured below:

1. Universal Pictures

Back in 1989 Universal Picture’s Back to the Future Part II film predicted a Cubs’ World Series Win in 2015. Because of that, the company wasted no time in congratulating the team on their National League Division Series (NLDS) win against the Cardinals with a tweet that put their brand in the middle of the trending Twitter conversation.

 

2. Constant Contact

A very simple way to increase visibility is by acknowledging holidays, which Constant Contact did with its celebratory Canadian Thanksgiving post.  

 

3. Uber

Popular ridesharing company Uber not only published a tweet to join today’s #NationalDessertDay trending conversation, but also created content to inspire people to find a sweet treat they would like to try (and maybe take an Uber to get there).

   

4. Avery Brewing Co.

Colorado-based brewing company Avery joined the “Talk Like a Pirate Day” conversation on Twitter by endorsing its Rumpkin brew as the unofficial drink of the holiday.  

 

5. Android

Android found an easy way to join the New York Fashion Week (#NYFW) conversation and also promote its watch collection by using the trending and timely hashtag.

   

6. DiGiorno Pizza

DiGiorno puts itself into trending conversations all the time on Twitter. One of many examples is when the food company used a picture, caption and hashtag to make itself relevant during Shark Week back in July. Typically sharks and pizza don’t go together, but DiGiorno made it work (as the brand does often for a variety of tending topics).  

 

7. McDonald’s

McDonald’s leveraged the popularity of the Emmy’s to increase the visibility of its new “All Day Breakfast” campaign.

   

8. Petco

Not only did Petco leverage a hashtag that toilet paper company Charmin made popular (#TweetFromTheSeat) to increase its visibility, but it also did so when replying in real-time to a tweet that Charmin had posted. Interacting with popular brands can also increase a company’s visibility, as the brand being interacted with will likely favorite or retweet the content.  

 

9. Alex and Ani

Alex and Ani leveraged the football season and Thursday Night Football to showcase some of its inventory for a relevant game.

   

10. Rockit Burger Bar

This Chicago restaurant decided to promote one of its menu items by participating in the hashtag for World Egg Day.  

 

5 Checks to ensure your Business Facebook page is up to date

5 checks

#1: Review Your About Box

One of the big differences between pages in the Local Business category versus the other categories has been the About box in the page’s left sidebar. Pages in the Local Business category would show the business’s address and phone number, while pages in all other categories have the page’s short description displayed.

about box description image

Previously, the About box displayed the page’s short description for non-local businesses.

Now, some pages in other categories, such as Company, display the address and phone number in the About box, instead of the short description. Pages that have not yet added their address and phone number, like the one for Gucci, show “Ask for” links to visitors.

about box image

There are “Ask links” in the About box on pages that do not have updated contact information.

It’s important for marketers who have a Facebook page in a category other than Local Business to visit it to make sure it shows your short description, as opposed to a missing address and phone number.

about box admin view image

This is the admin view of pages missing local business information.

If your page is missing information, you either need to update your address and phone number (which you can do by clicking on what needs to be changed) or switch your page to a different category.

To edit your page category, go to your About tab and edit it under Page Info.

about box edit image

Go to Page Info in the About tab to update the category of your Facebook page.

The updated category will appear beneath your Facebook page name, so choose something highly relevant for your page.

#2: Add a Call to Action for Different Devices

The Call-to-Action button allows you to display a specific call to action next to your page’s Like button.

This drives traffic to your website or mobile app, and ensures people who like your page will be presented with the most options to follow your page.

Here are two examples of Facebook pages in a similar industry: Due.com and Hiveage.

Due’s Facebook page does not use the Call-to-Action button. When someone likes the page, the options to Get Notifications from the page and have the page’s posts show up first in the news feed are separated under two drop-downs.

page without call to action image

A Facebook page without a Call-to-Action button splits the audience’s notification options.

On the other hand, Hiveage’s Facebook page uses the Call-to-Action button. When someone likes the page, the options to Get Notifications from the page and have the page’s posts show up first in the news feed are under the Liked drop-down. This is where new fans are more likely to hover.

page with call to action image

A Facebook page with a Call-to-Action button gives viewers notification options under the Liked button.

If you don’t have a Call-to-Action button on your Facebook page, you can easily add one. Go to your page and click Create Call to Action.

create call to action image

Click to create your Call-to-Action button.

Next, you will find options to set your Call-to-Action button for website visitors (from a computer), as well as for iPhone and Android users.

create separate call to action image

Set up a separate call to action for website, iPhone and Android users.

Click the drop-down under Choose a Button to see your call-to-action options.

variety of call-to-action options image

Choose from a variety of call-to-action options.

Next, enter a relevant website URL in the website field. Alternately, switch No to Yes under Set up a Link to an App and then choose a specific app for iPhone or Android users.

select apps image

Click Yes under Set up a Link to an App, and then select apps for iPhone and Android users.

When you’ve finished the setup, click the Create button to test your Call-to-Action button. You want to make sure it directs Facebook page visitors to the right web page or app.

#3: Choose a Featured Video

Video on Facebook is a hot commodity. Add a Featured Video to your Facebook page. It will appear at the top of your About box, as shown on the Facebook page ofSubaru.

subaru featured video image

Subaru uses a Featured Video on their Facebook page.

To include a Featured Video on your page, start by uploading a video to the Videos tab. Afterward, you get the option to add it as a Featured Video.

featured video option image

Add your upload to the Videos tab, and get the option to add a Featured Video.

Simply select a video from your uploads to add as your Featured Video. Once you do that, you can click the pencil icon at the top right of the Featured Video on the Videos tab to add a description to your video, change it or remove it.

edit featured video image

Click the pencil to edit your Featured Video.

It is particularly important to add a description to your Featured Video, since anyone who clicks to watch the video will see it. Think of it as another call to action, likeChipotle does on their page.

video description image

Use your Featured Video description as a call to action.

As long as you’re thinking about descriptions, add one to your Facebook page’s cover photo. The same rules apply. Anyone who clicks on it will see whatever you added for the photo description as a call to action.

#4: Allow People to Privately Message Your Page

While this feature has been around for a while, some businesses don’t realize its value. Think of messaging as a great reputation-management tool. People might be more likely to click the Message button on your page with a complaint before posting something publicly on your page.

To enable this feature (if you haven’t already), go to your page’s General settings and check the box to allow people to privately message your page.

page message image

Go to your page’s General settings to turn on the Message option.

The Message button will then appear next to your Like button.

page message button image

Make sure your Message button appears on the page.

The Message button is also a great option for businesses that don’t allow people to write posts on their pages. The alternative is forcing people to put complaints as comments on random page posts.

#5: Post Regularly With Publishing Tools

When did you last post to your Facebook page wall? In addition to the above cosmetic tips, you want to continuously make sure your Facebook page has new posts for your fans to enjoy.

If you don’t want to invest in a third-party tool and can’t remember to post to your Facebook page daily, try the built-in Publishing Tools.

page publishing tools image

Use the Publishing Tools inside your Facebook page.

This set of tools allows you to schedule posts, so you keep your page updated regularly. All you have to do is take a little time one day a week to write some great updates for your page. Then schedule a new post to publish each day.

schedule daily posts image

Take one day a week to schedule daily posts using Publishing Tools.

Once you schedule your posts, you just have to wait for the notifications to roll in and monitor comments. The updates will keep your page fresh and open the door to engagement opportunities with your audience.

In Conclusion

Your Facebook page represents your business, so make sure it’s accurate and fan-friendly. Perform these basic checks to ensure your page is up to date in terms of the latest features Facebook has to offer. This is essential for page owners and their audiences.

What do you think? When was the last time you updated your Facebook business page? What other things should Facebook page owners be on the lookout for? Please share in the comments.

Website DO’s and DONT’S

These great tips will certainly help to increase your website traffic and have your visitors stay longer.
As a Social Media marketer, you want people to stay on your website, love what they see and either contact you or buy. Right? Oh, you think you’re not a marketer? Well if you have a business you need to think of not only your creative business hat on, but your sales and marketing hat on too. Social Media marketing is more important than ever.

It’s not just about putting up a Facebook Page or a Pinterest account. Nor is it about having create a website and forgetting about it. Even if you delegate the work you need to have a grasp of the facts that it takes all the components of Social Media marketing working together to create a successful business.

So as we’re talking about how to get more traffic to your website here, just think of one word – ease. Ease is the name of the game these days. Ease of navigation, easy to read and relevant content, easy to find what you want on the site and easy ways to contact the business owner. Users expect more and more. A fast load time for your website is also important. If things are too confusing, take too long and all too hard they’ll never hang around to see, hear or read your Social Media marketing message. These ease elements apply to all your marketing but if you keep them top of mind for your website that’s a great start.

aabdesigninc.com

5 Psychology Secrets for Interaction Design

It’s becoming more important every day for your designs to connect more with users and include a “human element.” Website and user experience design needs to feel real, from aesthetics to interactions to motion (perceived and real) to emotional connection.

The problem designers most often encounter when thinking about users is not thinking about them as actual people. It sounds a little crazy, right? But we are not talking about designing robots here. As described in Interaction Design Best Practices, humanistic design creates an engaging experience that users can connect with physically and emotionally.

Here are a few ways to do it.

1.Your Mantra: “Humans Come First”

The first step is saying it out loud: “Humans come first.”

Now repeat it until you hear this phrase echo in your head before and during the design and planning phases of every project. And the way to do that is to actually be more human. Be intentional in actions, interactions and design. Most of all, empathize with your users.

Screen Shot 2015-09-03 at 09.40.14

Photo credit: Reebok

One way to ensure that you’re designing for humans is to create a user persona. You can use fictional identities composed from researching your users. This will help eliminate you guessing about your users and will allow to design with their needs in mind.

For example, the persona process we follow at UXPin looks like this:

  • Review usage data in our app, segmenting users based on overall engagement. For example, these segments might include people who started a trial but didn’t buy, people who started a trial and bought, etc. Once we’ve defined the segments, we look at behavior based on events created in KISSMetrics.
  • For qualitative data, we interview ~30 users total from all segments to try to understand the “why” behind the data.
  • Based on quantitative data and interviews, we can start plotting out patterns that eventually form our user personas.

Screen Shot 2015-09-03 at 09.40.45

Photo credit: UXPin

You need to create things people want. Step back and evaluate every website or app you frequent. Do you feel like you are part of the design? Is it personal? It is intuitive and easy? That’s human.

2. Design for Comfort and Predictability

There are a few elements in the design process that you just can’t change, like device type and screen size. But you can affect how things render and how comfortable your designs are to use in different environments.

For a design to “feel right”, it must be comfortable to use.

Screen Shot 2015-09-03 at 09.41.21

Photo Credit: Rosenfeld Media, Creative Commons 2.0

  • Thumb patterns on mobile devices need to be reachable and accessible. Think about different phone, and hand, sizes when considering element such as buttons or swipe actions.
  • Think about typeface size. Users should not squint to read the copy.
  • Provide contrast that will stand up in varying conditions. While desktop users are most likely to view a website indoors, users might look at a screen in other lighting conditions with their various devices.

Screen Shot 2015-09-03 at 09.41.51

Photo Credit: Bugaboo Strollers

  • Motions and movement should mirror real-life. (Look at the 360-degree rotation of the stroller above.) Think about the physics of a ball rolling. Now imagine that ball on a mobile phone screen: which way should it roll? (To the lowest point of gravity as the phone is moved because balls always roll downhill.) As outlined in Interaction Design Best Practices, perfecting these microinteractions go a long way towards creating a delightful experience.

The more comfortable users feel, the more likely they’ll continue to interact with your product.

3. Connect Emotionally

Focus on the one emotion your project should convey. Don’t get wrapped up in trying to create multiple emotional experiences. Do one exceptionally well.

The emotional connection is two-pronged:

  1. Your design should create a relationship between users and your product.
  2. Your design should create relationships between users.

Screen Shot 2015-09-03 at 09.42.18

There are a variety of ways to create an emotional connection with your users. As outlined in Web UI Design for the Human Eye, color is a good way to stir emotions in people. Contrast, complementary colors and vibrancy all tug at the heartstrings in different ways. Colors evoke different moods in people as well. For example:

  • Red: Conjures up passion, and gets the blood pumping with excitement. 
  • Orange: Gives a whimsy lightheartedness to a design.
  • Green: Promote prosperity, both physically and financially.
  • Purple: Conveys the lap of luxury.

Screen Shot 2015-09-03 at 09.43.26

Photo credit: Felt App

But color is but one aspect that goes into nurturing an emotional bond. Copywriting and visuals also play a role. Felt App’s marketing site has light copy with a conversational tone. The photos are all moments that one might experience in life — mementos of the past. The colors are earth tone, mostly browns with a splash of red from the one envelope. All of these elements alone don’t add up to an emotion, but together these all craft the feeling of nostalgia.

Emotional connections are established in a variety of ways. Brand loyalty, for example, stems from emotional connection. The type of emotion is determined by the tone, message and design choices you make. For example, a photo of people crying can cause concern for users – why are the people in the photo upset and how can they be helped?

4. Design with Mental Triggers

Understanding a little human psychology goes a long way when it comes to design.

But you don’t have to enroll in college again to use those tools. Spencer Lanoue broke down “ Psychological Triggers That Make UX Design Persuasive” from an academic research standpoint for you.

Screen Shot 2015-09-03 at 09.44.21

Photo credit: Laerepenger

Here’s what the concepts look like (and how they relate to design):

  1. Do something for other people. And they will return the favor. Look at the example above, take the quiz and you can save money.
  2. People look at the behavior of others. Especially when they are not sure how to act. Include a social stream in your design to make users feel like part of a bigger group.
  3. Users want what they can’t have. The scarcity principle is why limited-time deals work so effectively.
  4. Users tend to fall in the middle when it comes to making choices. Most people will be drawn to the center. As recommended by Hick’s Law, more choices leads to decision paralysis, so choose carefully.
  5. People are drawn to what is relevant to them right now. Consider beacons, notifications or check in tools to be in the moment.
  6. People remember elements that stand out. Use contrast to create focus.
  7. People require timely feedback. Know the “Power of 10” when it comes to interaction design. As Jakob Nielsen stated, users need feedback within 0.1 seconds to feel like they still control the experience. If it takes longer than 1 second for your interface to respond, the feeling of control quickly disintegrates. Whether the feedback is purely visual or text-based (like a modal window), make sure it’s clearly understood and uses a conversational tone.

Screen Shot 2015-09-03 at 09.45.24

Photo credit: Bose

Bose is a good example. The site takes a few seconds to load, but the smooth loading animations makes the wait feel less tedious. As you hover over each product, the smoothly triggered animations makes the user feel like they’re playfully browsing through a rolodex. The interface also features contrasting bars of colors to capture the user’s attention, drawing them immediately to the products.

Take a look at the animated prototype we built below in UXPin. Notice how the menu loads immediately after tapping, but transitions a bit slower (so that it’s not jarring). Again, we use bright colors here to quickly grab the user’s attention.

Sep 03, 2015 09:47

Photo credit: UXPin

While it may feel manipulative, the use of psychological trigger allows you to further your ability to reach out to the human on the other end of the screen.

5. Design With Simplicity

A wise man once said, “the design is in the details.” Simplicity always strengthens the details.

Websites such as Facebook, Twitter and Instagram thrive on this human factor. People are sharing their lives with other people. The design and interface is simply the vehicle that gets them there. Now think about the designs of each of these websites. All of these platforms started with simple tools for sharing and while they have grown in complexity over the years, the core usability is still easy to learn.

Screen Shot 2015-09-03 at 09.48.03

Photo credit: The University of Sydney

Start with simple visual elements:

  • Color: Stick to one or two colors that are high in contrast. Keep cultural considerations in mind, especially if your website is designed for an international audience.
  • Typography: The first rule of typography is that it must be legible (letters are easy to discern) and readable (words and sentences are easy to understand). All main body copy should be set at a level that is comfortable for the eye. Start with a sans serif style and include plenty of space between lines. For the best visual comfort, consider size and the number of characters per line.
  • Space: More space makes a design feel open and inviting. Cramped lettering or elements that are too close together feel chaotic and jarring. It’s a tricky balance though, because wide open spaces can sometimes create the feeling that something is missing. A good approach is to subtract elements from your design until it breaks, then working your way back over the threshold.
  • Micro-interactions: Design interactions and notifications work in an almost invisible way. Like a simple hover animation, they add visual polish while giving users instant feedback. Follow the 12 principles of animation.

Prototyping your design is a good way to see if these visual elements work or not. While doing so, look for where you can trim because as the old adage goes, “less is more.”

Takeaways

Designs with a human touch just feel right. It might be intangible, but it’s undeniably powerful.

Think of interactions between people. Most communication happens using common languages, such as speech or even posture or gestures. It’s usable communication.

It’s the very same thing when it comes to designing a website or app. The most stripped-down purpose is to communicate something with users. Creating a simple, easy-to-understand method for this communication is always the quickest route to success.

3 ways to find out if your SEO initiative is working

seo1

There has never been more data available to digital marketers. With this abundance of information, however, comes the significant challenge of understanding and leveraging the data.

The goal of any SEO campaign is to look at a project and quantify its impact. Was the project a success? What was the lifetime value of a project? What types of projects work best for each objective? Once these facts are known, it is possible to gain a better understanding of how and why certain projects were successful and then predict the impact of future projects and initiatives. More specifically, if the expected return on a project is known, it is possible to prioritize budget and timing accordingly.

Most marketing experts measure unique users, page views, time on site, bounce rate and search rankings to determine if a campaign is working. These metrics don’t determine, however, why it worked. Fortunately, there are lesser-used statistical analysis processes that can be leveraged to make these determinations and get to the root causes of poor performance.

  1. SIMPLE LINEAR REGRESSION

A simple linear regression is a basic input versus output equation. In relation to SEO terms, analyze organic search trends over a 12-month period and adjust for seasonality. To do this, first find the seasonal index, a breakdown that shows the relationship of one month to the entire year.

Once the index is complete, “de-seasonalize” the data by dividing each month by its seasonal index, run a simple linear regression to find a true forecast and then re-apply the seasonal index to each corresponding month. Once this simple linear regression is complete, it is then possible to create yearly forecasts for organic search traffic, set accurate SEO program goals and generate monthly expectations for a project that takes seasonality into account.

  1. MULTIPLE LINEAR REGRESSIONS

A lot more variables exist that can impact organic search traffic than just seasonal trends, and that’s where the use of multiple linear regression becomes effective. This is an approach for modeling the relationship between a dependent variable (“Y”) and multiple explanatory variables (denoted “X”). From an SEO standpoint, a multiple linear regression takes external factors such as paid search, display advertising, market fluctuations and seasonality into consideration. With these factors included in the equation, it is possible to determine how various inputs impact search traffic, accurately predict future organic search traffic and provide a historical indication of where SEO may have led to incremental traffic.

 

GROW YOUR SEO

Businessman editing the annual report charts - working on a tablet computer

SEO

See what gardening and SEO have in common in this infographic at wsm.co/gardenseo

  1. IMPACT ANALYSIS MODEL

Multiple linear regression relies heavily on historical organic search traffic, but the impact analysis model (another form of analysis) allows us to establish a baseline, incorporate multiple inputs and uncover the incremental value of SEO projects. A baseline for organic search traffic is essentially what the numbers would be without the use of SEO. That being said, traffic should fluctuate with industry search trends. In order to develop a baseline, first determine the search volume trends within the industry or vertical. Once that is complete, determine a year-over-year growth/decline rate for each month within that sector and then apply (monthly) the growth/decline rate to the previous year’s organic search visits and get this year’s baseline. Then, using a multiple linear regression, determine the impact of media spend contributions including online media click and impression contributions. This process takes into account both online and offline advertisements.

Incremental visits are then determined using the following equation:

Organic visits – (Organic Baseline + Online Media Click Contribution + Online Media Impression Contribution) = Incremental Visits.

With these factors considered, digital marketers can determine how many incremental visits and conversions the SEO project drove over the course of a year, how the various SEO projects impacted traffic and what the impact of future projects will be. Using linear regressions to forecast the future, multiple linear regressions to understand the external factors and the impact analysis model to determine expected return on a project, it becomes possible to prioritize budget and timing moving forward.

Applying this level of advanced statistics to SEO projects can seem to be a relatively novel concept, but its effectiveness demands a closer look.