Fixing A Broken User Experience

Go to article

• By Stefan Klocek
• September 27th, 2012
 
• User Experience
 
• 20 Comments

Advertisement

Unless you’re developing completely new products at a startup, you likely work in an organization that has accumulated years of legacy design and development in its products. Even if the product you’re working on is brand spanking new, your organization will eventually need to figure out how to unify the whole product experience, either by bringing the old products up to par with the new or by bringing your new efforts in line with existing ones. A fragmented product portfolio sometimes leads to an overall broken user experience.

Understanding an organization and its users and designing the right interaction and visual system take exceptional effort. You also need to communicate that system to teams that have already produced work that doesn’t align with it. This isn’t easy work. In this article, we’ll introduce you to a strategy for fixing the broken experience that starts with surface improvements, goes progressively deeper into structural issues and ends with a big organizational shift.

(Smashing's side note: Have you already bought the brand new Smashing Book #3? The book introduces new practical techniques and a whole new mindset for progressive Web design. Get your book today!)

The Hierarchy Of Effort

Many large successful companies end up in a situation where they must maintain dozens, if not hundreds, of applications in their product portfolios. These huge suites are the result of mergers, acquisitions, different sets of user needs, legacy services and contracts, and the inefficiencies that naturally develop in huge organizations. Sometimes the reasons for so many different product lines are legitimate; other times, the wide set of offerings doesn’t serve anyone’s needs particularly well. Users will often struggle to learn a suite of related products because of major differences in how they look and operate.

The initiatives to fix these broken experiences are referred to in ambitious and somewhat generic terms, such as “common look and feel,” “unified online experience” and “unified look and feel.” Regardless of the term, the common elements represent a drive to bring consistency to a large set of products in multiple stages of development and spearheaded by a centralized internal group. There’s a sense of urgency; we often meet with some internal resistance; and frequently we’re charged with fixing a previous agency’s failed attempt to deliver design and guidelines that can be metabolized by the client.

The hierarchy of effort to fix a broken user experience

One effective approach begins with surface improvements, goes progressively deeper into structural issues and ends with big strategic organizational shifts. We start with the low-hanging fruit and at each step reach higher to develop products that will ultimately deliver great experiences. It’s worth noting that this approach was developed to make it possible for a team to make incremental improvements to products already under development, but also to look ahead to future releases, when rewriting code or rethinking interactions won’t be so disruptive.

If your organization is working on its first product, then this approach would be totally backward. But in a large organization with a lot of history and many products, this approach will help you articulate both a short-term and long-term strategy for building a product portfolio that delivers a user experience that is learnable and builds confidence and a portfolio that makes your work easier and more effective.

VISUAL CONSISTENCY AND SIMPLIFICATION

The lowest amount of effort required is at the bottom of the pyramid, so we suggest starting there. Sure, it’s lipstick on a pig, but simply taking a consistent visual approach will help to bring many different products under a shared brand experience.

Assuming you’ve done the groundwork to articulate the design of an ideal experience, the simplest and arguably easiest way to start implementing it is to reskin the products currently under development. Finding ways to simplify and excise unnecessary information, unifying the information architecture, and adopting standard fonts, colors and controls are all relatively low-effort ways to improve existing products.

This is the foundation. It won’t improve a poorly designed interaction, but it could dramatically increase the appearance of unity to the end user. Products that have a consistent visual language will clearly convey their membership in a single portfolio. The benefit of improving the visual system first is that changing or adjusting the skin of an application is much easier than changing things such as behavior, which will require rethinking and recoding fundamental aspects of the application.

BEHAVIORAL CONSISTENCY

If your organization has simplified and unified the visual language, the next step is to make the behavior consistent. This is basic stuff: disciplined reuse of patterns instead of applying patterns ad hoc from a grab bag of widgets, and unifying the nomenclature and conceptual frameworks. Hopefully, any individual product will have internally consistent patterns; it’s when you look at sets of applications that were developed by different groups or obtained through acquisitions that you usually see wide discrepancies.

Assuming that the given design expresses high-level principles and provides a basic set of pattern libraries, the goal at this stage is to evaluate individual products and figure out how much work is required to align them. This work entails at the very least replacing widgets in some applications. It usually also entails a decent amount of coding and testing to ensure that the revisions contribute to a consistent experience. Maintaining a shared approach and understanding will require more coordination between development groups.

Behavioral consistency makes it easier for the end user to learn a tool and then to transfer those skills when picking up related tools. The user has to build only a single mental model of how the applications work. This gives them confidence and enables them to pick up new products without facing a steep learning curve and without being confused about how things are done.

BEHAVIORAL OPTIMIZATION

The prior step was done solely to align the behavior of the various products. A deeper level of work is required to optimize the behavior and to make the applications more powerful and easier to use.

This step reworks the products even further. It means evaluating the current products against the user’s needs and goals and looking for ways to eliminate work and to simplify the patterns. This assumes some measure of design effort beforehand to identify the areas where this will make the most difference. It assumes a commitment to user-centered product design, some research, as well as personas and scenarios. Without these, you’ve got no way to decide what patterns to simplify, which work to excise, and what user needs to anticipate and solve for.

An optimized experience enables users to perform their tasks with less or more effective work. Any work that’s performed is captured in such a way that users aren’t asked to perform the same task twice. Smart defaults are captured and leveraged to make tasks flow more quickly. Where possible, shift computing work to computers, and judgements to humans. Mine data to see broader patterns and opportunities that allow the system to anticipate and meet needs before they become issues.

This is where you do everything you can to make each application the best it can be. It takes a lot of work, with new interactions introduced and much code rewritten. A considerable investment of time and effort is required.

UNIFIED EXPERIENCE STRATEGY

The result of the last iteration is a set of products that do what they do best. The point of this iteration is to rethink how the suite works together. This often means rethinking product strategy.

Designing a unified experience requires looking at the big picture, reevaluating the internal product silos in the organization, and reconsidering the ideal workflow for individuals and between roles. It could lead to collapsing multiple products into one, bridging gaps with new products, eliminating redundancies in capabilities or refocusing the service. This kind of work takes deep organizational commitment and a strong mandate. It takes long-range, instead of short-term, planning. It can’t be done quickly, and doing it well takes organizational honesty and courage.

The real beneficiary of this kind of effort is the end user, because this product strategy is user-centered. The company recognizes that the product exists to help people perform their work and that they might use other tools and services to accomplish their goals. Users don’t exist in isolation; they share work with others. Success isn’t measured by how well they perform a task, but in how competently they traverse a complex and dynamic ecosystem of people, data, devices and services. When a company brings their product line to this stage, both the organization and the product line have been transformed.

UX CULTURE

All of the prior steps were aimed at fixing a broken user experience. By following them as an iterative path, it becomes possible to greatly improve a severely broken user experience. The way to avoid having to repeat this cycle in a few years is to transform the organization itself. Software and services are conceived and developed in a particular organizational culture, and this has a profound effect on the products. Products coming out of an engineering-oriented organization bear the unmistakable focus on technology; services with a focus on sales deeply communicate this; and products that come out of organizations with a UX bent cannot avoid their focus on a good user experience.

If you want to repeatedly deliver a great user experience, you need to go deeper than applying design to the surface. Your organization needs to understand and commit to making user experience a core priority. Executives have to support or advocate for the unique perspective that design brings; capable designers have to work for a user-centered approach; and a user-centered way of building things has to be integrated into the organization.

A great user experience almost never just happens. Understanding the user and keeping their needs as your priority throughout the design and development stages take deliberate effort. Products and services are created by teams of people who collaborate to bring an idea to life. The output is ultimately shaped by the agreements about what is important, the methods of performing the work and decisions on how to measure things. A shift in organizational culture takes the most effort and the longest time, but it results in the largest, most pervasive and most coherent shift — not just for the organization and its products, but for those who use them.

Isn’t This All Backwards?

“But wait,” you’re thinking. “Isn’t this all backwards? Shouldn’t you design the whole system around the right workflow, optimize the behavior within it, make sure it’s consistent with other products, and finally make sure it’s visually simple and clear?” Yes. Yes, you should, especially if you’re making a brand new product.

But we see again and again that few large companies really have the ability to clear the table, start with a clean slate and build something utterly new and great. Most start with a line of products that cannot be abandoned. They have applications that are supported by various teams around the world, perhaps owned by different subsidiaries and in various states of compliance. While you can design the ideal experience, you can’t just build it. Moving toward something whose design really delivers will take many iterations. This situation isn’t great, but it’s the reality. When you find yourself here, you can’t boil the ocean. You have to start somewhere. In our experience, starting at the bottom is a very practical way to move forward.

(al) (jc)

airbnb seeing 26% of its traffic from mobile devices

airbnb seeing 26% of its traffic from mobile devices as its iPhone app tops 1m downloads

27TH SEPTEMBER 2012 by JOSH ONG

Travel booking site Airbnb says mobile adoption of its service is “exploding”, and it’s marking a new milestone today to prove its point – over a quarter of its traffic now comes from mobile devices.

Half of those visits come from Apple’s iPhone and iPad and the iPhone app alone has been downloaded more than a million times. A sizable portion of those users still seem to be active on the app, as 500,000 of them upgraded to Airbnb’s latest version when it went live earlier this month.

Though room bookings and mobile might not always seem to go together, Airbnb believes it’s an improved experience. In the company’s own words:

As mobile becomes customers’ preferred medium for connecting online, we’ve seen a shift in user behavior that indicates mobile will be increasingly important for businesses outside of the technology industry. Specifically, we’re seeing explosive growth in mobile adoption, which is driving real value to our travel business and contributing to a better experience for our community.

Airbnb maintains that the uptake of mobile is contributing a better user experience for both hosts and guests. At the least, they’re communicating more, as over 530,000 messages were sent on Airbnb’s mobile platform last month. They’re also saving some time. The company also says that reservations happen faster on mobile and messages get responded to as much as three times faster than on the Web.

The startup has been tearing it up this year: after launching its Wish Lists feature in June, users added one million listings to it in two months. In August, it hit a new record with 60,000 bookings in one day after doubling reservations in the first half of the year.

Header image: Oli Scarff / Getty Images

A Crash Course in Information & Visual Design

Go to article

sfard on September 29 2012  |  favorite

Good design is an interesting thing. It's easy to identify but hard to explain. If you have ever tried to mimic good design, you'll really know what I mean. Sometimes, even with the "inspiration" right before your eyes, you struggle with creating something that feels as "tight" as the original piece.

My goal is to give you a crash course in some of the fundamental elements of design as well as a few subjective best-practices from my experience. Design is too much of an interrelated mash of intuition and science for me to begin to try and enumerate explicit rules, but what I can do is share some direction and things to watch out for that will hopefully make you a better designer.

Introduction

Visual design is the sum of many details. Good design is forgiving to a degree. Get one or two of the details wrong, and the whole piece might look acceptable to enough people. But there reaches a point of divergence where everything falls apart.

Perfection comes from relentless iteration. Don't think for a second that even the world's best designers can visualize final products right off the bat. Experience will refine a designer's perception of good work and help improve her handle on creative tools, but there is no escaping elbow grease. Ever.

White space

I'm starting with white space, because it is perhaps the single most important overlooked factor to consider in visual design. White space directs the eye and provides balance to content on a page. Look at this article. Most of the right side is empty. This wasn't an accident or a result of an absence of content - it is there, in part, to help focus attention on the content of this article.

White space need not be white. It can be another color, a pattern, or even a full-blown photo. Another, better word, to use is negative space. A helpful design exercise is to visualize the white space of a page as standing out from the rest of the page. What does it look like? When white space feels "whole", like it's "hugging" the content, without being overbearing, you're probably using it well. If it feels like disconnected patchwork, you're doing it wrong.

Here we have the letter "e". I have turned it on its side and covered half of it to obscure our tendency to see it as a letter of the alphabet. I have also reversed the colors between the background and the foreground. See how the negative space "holds" the letter. You can almost see the negative space as its own entity.

Fonts and readability

"Web design is 95% typography" says design agency Information Architects. Problem is, there is no real agreed-upon convention for font use. Designers argue about fonts all the time about things like what constitutes a good font, when and where should you use a certain font, and is Helvetica the greatest thing invented since sliced bread?

Best I can do is give you some thoughts:

• While some claim that serif fonts tend to be more readable, there has been no conclusive study proving that, making it appear to be convention over best practice.
• Don't make text blocks too wide. One of the hardest things for the eye to do when reading body content is to find the next line of text. The further the end of one line is from the beginning of a new line, the more difficult it is to anticipate the position of the new line. Consider why newspapers are written in columns rather than across the entire page. Or why the text block on this site is only 600 pixels wide.
• Save expressive and unconventional fonts for headers, or better yet, signange/branding/identity work. Readability is objective #1 for content.
• Give body content enough line spacing and padding to standout. Simple rule of thumb: text looks good with 1.5x line height (so if you choose a font size of 18 pixels, 27px is a good line height).
• If you're a web designer using Photoshop, keep in mind that browsers and operating systems render fonts differently. As a general rule, , OSX/Linux machines render fonts with more weight and antialiasing than windows based machines. Apple does a better job at softening edges, but it comes at the expense of crispness. As a result, light fonts tend to look better on Apple machines. Photoshop will render greater "weight" regardless of OS.

Kerning & Character Spacing

Here is an awesome game that will help train you to think about kerning.

Though related to fonts, kerning and character spacing, are special enough that they deserve their own header.

First some definitions. Kerning refers to the the optimal default spacing between individual characters, while character spacing is a standard additional (or reduced spacing spacing) between all characters in a body of text. Like white space, because it's something you don't immediately "see", kerning and character spacing can easily be overlooked.

In the time of typewriters, fonts (like courier sans) were monospaced, meaning the space between characters was static. Nowadays, they're not, and kerning matters. Most professional fonts have built in kerning pairs, which is exactly what it sounds like. Someone went through every combination pair of characters and decided on an optimum visually appealing space between them. When kerning pairs don't exist, most software will generate its own best guess. If you are a Photoshop user, note that you can often choose between "metric" and "optical" kerning. Metric kerning uses human-generated kerning pairs, while optical is algorithmic. It's debatable which looks better, but the argument favoring metric is clearly that someone took the time to find optimal kerning pairs.

Character spacing, along with color palette for instance, can do a lot to express the emotion of a design. Tight character spacing can connote modernity or absolutism, while wide character spacing can connote something lofty or whimsical. A couple things I've noticed.

1. Wide character spacing tends to look better with all caps text
2. Stick to standard spacing with body content

Perspective

Our visual perception in the real world is dictated by rules and shortcuts developed by our brain to discern objects and patterns from the raw neural input of our eyes. Much of visual design is about understanding and exploiting these shortcuts to imply meaning. Here are a few examples you can use in your design.

• When it comes to size, extremes matter. Put two objects next to each other of about the same size, and it's hard to infer size. Make one much larger than the other, and all of a sudden you "see" size as an influencing factor in design.

By placing two objects of very different sizes next to one another, you help users infer their sizes through relativity.

• Closure is a psychological predisposition we have to perceive implicit patterns to complete incomplete forms. By exploiting this tendency you can ironically reinforce the perception of a figure by actually leaving parts out.

An example of closure

Dimensionality and Figure-Ground Relationship

Drawing the eye's attention to a figure can be aided by the fact that our brains want to see a background and a foreground. If you give the user additional cues, through methods like skewing, scaling, or blur, you can mimic depth of field in your designs and enhance that relationship. Elements "closer" to the screen will typically imply greater importance.

The actual giraffe stands out in the image on the left, whereas the word "Giraffe" stands out in the image on the right.

Beware of unorganized design that blurs the line between figure and ground.

Information Hierarchy

The eye should have to do as little work as possible to decipher information hierarchy on a well designed page. What is the title? Where is the content? What content does this title refer to? These are the types of things our brains should subconsciously determine. If you find you have to put in mental effort to understand what is what on a page, you have some serious information hierarchy problems.

There are four obvious tools to help you organize information: indentation (or padding), color, and size. Play around with these to see what feels right. The one, slightly less obvious, tool is spacing. When two elements are placed side by side with one another, even if their size and color differ, the eye will often assume equal significance or parallelism between the two. Notice how the title of articles on throwww spans the entire page while content does not. The "Articles by" pane floats on the right side of the page, but below the title, not inline.

Color

The use of color is maybe the hardest thing to "teach" to someone else. Like some other design considerations, a refined experience of color comes from practice, experimentation, and keen observation.

Compare the "feeling" you get looking at these two screenshots. The example on the left makes heavy use of pastels, off-whites, and gradients, while the one on the right uses highly contrasting elements.

There are encyclopedia-length books about the history and use of color. Needless to say there's too much to possibly say about the matter in one post. Instead, let me get as practical as possible.

• Think of colors in context of palettes. The human perception of a figure's color is completely relative to the colors of a figure's surrounding. This is why palettes are incredibly important. The same shade of red or blue will look quite different and conote a different "feeling" against two different background.
• Experiment with using off-whites and off-blacks instead of pure white (#ffffff) or pure black (#000000). Pure white and pure black stand out a lot and can dominate a page, so use them sparingly and with purpose.
• Do not use too many vivid (high saturation) colors in a single palette. Color palettes, like other elements of design, is aided by hierarchy and focus.

Here's a test. What color is this text? You'd be wrong if you said black. You'd also be wrong if you said grey. It's a really dark blue. Why not just use black or grey? Because black would make the body content stand out a tad too much, and grey looks kind of flat against an all-white background. That's not a rule. It just looked and felt right on this project.

Personal Style

Here is some counter-intuitive advice for you: don't try to develop a personal style. I admonish personal style because subjective preferences and habits interfere with user-centered design. The choice of style should be entirely based on user needs and the purpose of what it is you're designing.

Thing is, no matter how hard you try, you will develop your own style. It's inevitable. So why focus on it? Create things entirely based on their purpose and everything else will fall in place.

Concluding thought

The most important objective of information design is to make work navigable and readable. The complementary use of color, white space, perspective, and font curation are your friends. Consider each in relation to one another. Refine the hell out of your work, and beautiful things will happen.

If you read this far and liked it, you can follow me on twitter

Additional Reading

Someone asked for references to expand on some of the things I introduced in this article. So here are some resources I've found helpful The Elements of Graphic Design - The best general graphic design book I've ever read. Thinking with Type - A really useful book about Fonts. Kerntype - An interactive tool/game to get a feel for kerning. Information Architect's Blog - A blog by a leading design agency. * My portfolio - Shameless promotion of my own work.

Giving Our Clients The Best Deal In Mobile

Go to article

• By Paul Boag
• October 5th, 2012
 
• Clients, Opinion Column
• 9 Comments

Advertisement

Are we cheating our clients when it comes to mobile? More precisely, are we allowing our desire for mobile work to get in the way of providing our clients with the best solution for their business needs? This is the uncomfortable question we asked ourselves recently when redesigning our agency’s website, and we want to discuss it with the broader Web community: You, dear reader.

When redesigning our own website, we were forced to challenge our reasons for putting so much emphasis on mobile development.

We are not for a minute suggesting that either we or anyone else is intentionally taking advantage of the current excitement about mobile to “con” our clients. However, we do wonder whether our clients’ excitement and our own desires are hindering our ability to make rational business decisions — decisions that would lead to the best solution for our clients.

Jumping On The Band Wagon

By now, we all know that mobile is the next big thing. Not only do we realize it, but our clients know it, too. The growth in smartphone usage and the availability of fast mobile Internet connections are driving an explosion in mobile Web access. Organizations of all shapes and sizes need to start taking mobile seriously or else suffer in the near future.

There can be little doubt that mobile is becoming a major way to access the Web. Image source: Econsultancy.com.

For us, mobile is new and exciting and spells the future for our industry and careers. Unsurprisingly, we want to be a part of that. This scenario is not dissimilar to the one that many print designers found themselves in, all those years ago. When the Internet arrived and everybody was desperate to get their first website, the print design world skilled up and got building. Many websites were built in those early days that were never visited by an actual user. For many, the excitement got ahead of the demand.

Nothing is wrong with us as a community wanting to move into new areas. Nevertheless, we need to ensure that we do not push solutions onto our clients that they do not yet need, simply to boost our portfolio.

Do Our Clients Need To Think Mobile Yet?

Timing is everything. For businesses that are trying to turn a profit, their return on investment (ROI) matters.

Although mobile is important, it still amounts to a very small percentage of the overall traffic for many organizations. So, quite often, optimization for mobile lands at the bottom of the design debt list — the list of issues that have to be addressed by the design team. Business considerations, particular features and technical issues in the shop often have a higher priority, especially if the client’s company is relatively small.

While investing in the future is, of course, important to the client, if they do so too early, they run the risk of investing their money in areas that don’t have an immediate result and that might become out of date just at the moment when the areas become relevant to the client. Helping them work through this timing issue is important for us, as service providers.

Wait a second! If we build our websites mobile-first, surely they won’t go out of date, right? I am not so convinced. Certainly, best practice in responsive design are not the same as they were a year ago. We are learning more all of the time, and best practices continue to evolve. Can you honestly claim that the code and design solutions you came up with a year ago are as good as the code you are writing today? Responsive design patterns emerge and change, CSS and JavaScript techniques evolve, and some solutions don’t stick around for a long time.

For many websites, the percentage of mobile traffic is still relatively low.

It’s difficult because many clients are just as excited as us about mobile. They want to build a mobile app or website because they love playing with their shiny new device. They know that mobile is the future and, so, convince themselves that now is the right time to invest. But it might not be right for their circumstances. Mobile might not yet be worth spending their budget on. Timing is everything when considering ROI.

The Cost Of Native

Among shiny things, native apps are the shiniest of all. Whatever arguments you may have against building native apps, if you put your bias aside (we all have bias), it is difficult to argue — at least to our clients — that native is not cool, slick and shiny.

In my experience, when most clients think mobile, they think apps. You don’t see TV advertisements promoting mobile websites, but a lot of ads promote app stores and native applications. Clients might not know the difference between native and hybrid — and our responsibility is to explain the difference to them — but when they think “apps,” they want “cool, shiny and in the app store.” They want a native app.

However, such apps are expensive. You need developers with a specialized skill set. It might sound obvious, but building apps is very different from building websites. Apps are software. Software projects need more rigorous planning and longer testing cycles, and so they take longer to complete.

And then you have to consider multiple platforms. If you go the native app route, then each time you roll out an app to a new platform (Windows, iOS, Android, BlackBerry), you have to do a lot of the work again. Usually little can be reused. Also, operating systems are updated a couple of times a year, and there will be at least one new device each year, too. These changes usually require apps to be updated as well. Of course, when dealing with Apple at least, there is no guarantee that your app will be approved and added to the store for customers to download.

You can reduce the costs involved by using hybrid app solutions and HTML5. The hybrid and native approach each has its pros and cons and its own place, but the bottom line is that app development is an expensive business.

The Hidden Costs Of Responsive Design

There may well come a time when we need to build bespoke versions of websites for mobile devices. As users replace laptops with tablets and many others access the Web only on their phones, such a move would be a worthwhile investment for some organizations. In the meantime, for everyone else, responsive design is a good solution. Because it applies a new style sheet to the client’s existing HTML implementation, it need not be costly to implement.

At least that is the theory. In reality, things are more complicated. We all claim that responsive design is a cheap solution, but that depends on how far we take it. At the most basic level, responsive design just requires some changes to the CSS. However, we all know in practice that that is not always the case. Making an existing website responsive can be incredibly time-consuming, especially if you have to deal with legacy HTML code that can’t be easily changed.

THE SPECIAL CASES

Responsive design is not as simple as linearizing the content. Many elements need special attention. The most obvious is navigation, which often scales poorly across devices. However, it is not the only element. Maps, video, slideshows, graphics and tables all need special attention. Also, third-party “widgets” that embed content on a website aren’t always configured to be responsive.

Navigation does not always translate easily to mobile devices.

THE COST OF IMAGERY

Then there is the biggest challenge of all: images. Many Web designers are rightly suggesting that delivering desktop-sized images to mobile devices is unadvisable due to bandwidth limitations. We also now need to consider devices with high-pixel-density displays, which require even larger images. However, optimizing images for different platforms and creating a mechanism to deliver these further increases the cost of responsive design. At some point, you have to consider client-side and/or server-side optimizations to address this and other issues, such as reducing the load of elements that won’t be displayed on mobile devices.

There is even talk now of the need to optimize typography so that it scales for different devices. Again, the idea has a lot of merit, but a price tag comes with it. The problem is that we as Web designers want to be seen by our peers as producing websites that use the absolute latest best practices. God forbid that we are seen coding with last year’s techniques!

Now, screens are changing not just in size, but also in pixel density. Oliver Reichenstein suggests that we do not just need responsive layouts, we also need responsive typefaces. He has launched iA’s new website with responsive typography with a custom-built responsive typeface.

Of course, our desires are not what matters. What matters is that we provide our clients with solutions that make sense for them. This often entails providing a solution that we consider to be inferior. Not every client needs a Rolls-Royce — some will be happy with a Skoda.

The question is how do you know which solution best fits a client.

Picking The Right Solution

As I have already suggested, ROI should be the primary criterion in determining the right approach. If a client has a large audience that is willing to pay good money for an app, then you can go to town and build a Rolls-Royce. But if the project is more speculative, then starting simple would be best.

But money should not be the only deciding factor. The choice between a native app and a responsive website, for example, is not really a budgetary one. After all, a responsive website could cost more than some native apps.

In some cases, the decision will come down to what the app will do. If the client’s primary requirement is to deliver content to the user, then a responsive website is probably more appropriate. In my experience, the kinds of native apps that users download and continue to use are task-oriented. If your client wants to enable users to complete certain tasks quickly, then a native app might be the answer. Otherwise, use the Web.

The only exception is when the client needs to access features on mobile devices that are inaccessible to the browser. Typical examples are things such as the camera and the accelerometer.

If you conclude that a Web-based solution is the right approach, then it becomes an issue of budget and timing. If the client is happy with their existing website and doesn’t wish to change it, then you could consider building a mobile website that targets particular devices. This might not be your preferred approach, but it could be the most cost-effective until the client undertakes a redesign.

If the client’s budget is tight, then you might choose to use media queries to target certain ranges of screen resolutions, rather than going fully responsive. This will make development slightly easier, thus keeping costs down. Similarly, you would have to leave image optimization to the carrier, rather than optimize images on the server.

The message here is simple. Whether talking about native apps, responsive websites or anything in between, we need to put aside our personal desires and even the desires of the client, focusing instead on what the client really needs: a mobile solution that generates the best return for their business.

(Image credits on the front page go to Information Architects.)

(jc) (al) (il)

VISUAL CONTENT STRATEGY

POSTED BY
LISA CLARK

Go to articleWhat It Is + Why You Need It

show your smarts. share this post.

Share on facebookShare on emailShare on google_plusone

4

 To draw users in with digital content, you need words and visuals. Let's dig into the visual side of strategic planning for content.

WHAT IS VISUAL CONTENT STRATEGY?

When we say content, we're talking about more than text. We mean images, videos, infographics, slide sets, and more. A strong content strategy will define what to tell andwant to show through visuals. However, we find many people tend to focus on text. So, we often use the term visual content strategy to emphasize that those visual content assets need strategy, too.

Visual content is a powerful asset. It supports your words to better educate, entice, or inspire your users.  As Chuck Longanecker points out, the Square website explains its service with visuals. What could be a confusing written description is handled deftly by text, images, and video. (See below.)

The Square website explains its product deftly with images and video.

Now that you have a sense of what visual content strategy is, let's take a closer look at the benefits.

WHY DO YOU NEED IT?

Visual content strategy offers a host of benefits.

Getting and Keeping Attention

When you plan visual content well, you...

Create a strong first impression.
How your digital touchpoint looks will be the first thing a user evaluates. When you have effective visuals, a user will evaluate you positively and be more likely to stick around.

Focus users' attention. 
Visual content cuts through online noise to grab the attention of all those "content skimmers" (people who scan your content before they decide where to dig in). 

Highlight what’s important. 
When you support certain messages with photo, infographic, or video, you emphasize those messages more. 

Building Your Identity

When you plan visual content well, you...

Strengthen your brand identity.
Today, you need more than a logo and web templates to have a distinct visual style online. When you apply a distinct style to your images, infographics, videos, and more, you become easier to recognize and to remember. Plus, you come across as different from competitors or other sources of content. 

Make your site feel more credible.
Quality visual assets make your online presence more professional and, as a result, seem more credible.

Being More Influential

When you plan visual content well, you...

Simplify complex concepts to educate and persuade. 
When you convey big ideas with effective visuals and text, users will understand much faster than with text alone.

Improve action such as conversions.
For example, users are 85% more likely to make a purchase after watching a product video. Video allows you to show aspects of a product or service that are hard to show otherwise, such as how a shoe actually looks when someone walks.

Expanding Your Reach on Search and Social

When you plan visual content well, you...

Make your content easier to share.
What gets shared online? Most often, it’s images and videos. Visual content gets your message or your point to more people.

Improve visibility within search results.
Users can’t help but look at video or images that show in search results--a page full of words. (See example below.)

 I saw an image from one of our previous blog posts shows up in a search result. Images draw your attention when scanning search results.

Make your content easier for users to discover on social media. 
Social media is a natural choice to share your visual content. This is especially true in light of the explosive growth of social sites such as YouTube, Pinterest, and Instagram, which focus on visual content assets. When you strategically share your images, videos, and other visual content assets on social sites, you become easier to find on those sites.

These reasons are only the tip of the iceberg, but I think you get the idea. When you ignore the visual side of content strategy, you risk missing the opportunity to get people's attention, become more distinct, reach more people, and become easier to discover.

WHAT'S NEXT?

Visual content strategy is such a rich topic, I can't possibly cover it all in one post. So, in future posts I'll share my two-pronged approach to visual content strategy as well as techniques and tips. And, for a handy summary of when to use visual content, check out pages 120-125 of Clout.