When clients visit iMarc and take a tour of our office in Newburyport, they get a small glimpse into our lives and personas by scoping out our workstations and how we adorn our rooms. As a member of the creative team, I share a room with fellow Lead Designer Paul Kelley and our Creative Director Jared Laham. These tours often start in the confernce room, snake through our Associate Director of Operations' (Patrick) office, and head upstairs into the "creative room". Visitors most frequently comment on three things:
"Wow, you guys like to keep it warm in here, huh?" - We sure do!
"I really like all of the art and trinkets you have in here; looks like you guys have the 'fun room'!"
From our room, guests are ushered through the "developer room" and the "strategy" room. Comparatively, one could argue that we do reside in the "fun room" due to our decor (and attitudes - I hope). However, in fairness, everyone here at iMarc is both fun and creative; we just happen to have that word attributed to us directly in our titles. Even the most seemingly straightforward problems and objectives are tackled creatively by our engineers and strategists. To better understand what it means to be a creative designer, we must first address a question we are asked constantly by nearly everyone over the course of our careers: "What is the difference between art and design?"
If the purpose of art is to have no purpose, then design is merely art with purpose. The beauty of art is that anyone and everyone is an artist, despite what they may think. I smile when I hear someone say that they "don't really 'get' art" because that isn't a requirement at all. In fact, art has almost no requirements. Art doesn't strive to please everyone, and although some art is more recognized and well known, nobody can say that a piece of art is "better" than any other. I can look at a painting or a photograph and declare "I like that" or "this isn't my taste" without having to defend why I feel that way. A big part of being a designer is knowing, from a tecnhical standpoint, why something "looks better" than something else. In this sense, design is the ying to art's yang.
Since we've established that design is art with purpose, it immediately opens itself up to interpretation and validation. As designers here, we must strive to please our clients and deliver great looking work that also meets all business objectives. An artist has the luxury of dismissing negative feedback, but designers must turn negative feedback into positive results while maintaining cohesion and simplicity. Naturally there are cases where we must trust our gut and push back on questionable suggestions while being as accommodating as possible. If you strive to make something that everyone "likes", then nobody will really "love" it. Creating art is an extremely personal endeavor, and design can be just as emotional, especially for someone new to the field. Designers quickly develop thick skin after years of peer and client reviews. A huge part of our job entails brainstorming multiple concepts that are almost immediately culled in favor of stronger solutions. Iteration is an enormous part of our process, and helps to sharpen and shape our final concepts.
As the tools we use and technology around us evolves, our job as designers becomes even more important. Computers and software can't make creative decisions. There will always be a need for someone with an artistic eye to beautify and elucidate what we create. Even the most thorough user experience tests can only inform our decisions; it is up to strategists and creatives to interpret that information and devise a clever, meaningful, and attractive way to display information.
Design is so much more than what font looks best and what the hot color palette is this month. Creating art can certainly make you a better designer, but that doesn't necessarily go both ways. Each member of the creative team here has a huge passion for art and photography, and fostering those skills ultimately makes us more capable to deliver fresh and informed takes on what will ultimately be transformed into meaningful websites, applications, and marketing collateral.
In closing, a great designer should be passionate about art and unafraid to think creatively; exhausting all possiblities and exploring every idea until the perfect solution is distilled. Applying this knowledge to a strong foundation provided by our business development team and thoughtful considerations from strategy is how all great projects begin. Our job is to portrait content in the best possible light by both challenging expectations and establishing new custom concepts that speak directly to project goals.
The word “intuitive” comes up a lot in the RFPs, briefs and proposals that land in my inbox…
“intuitive and understandable”
“intuitive and engaging”
“inviting and intuitive experience”
“navigation is intuitive”
Conversely, our new clients often describe their old sites using phrases like “not intuitive”.
Intuitive is a fuzzy term at best – if it were obvious, wouldn’t every site already be intuitive? Perhaps intuitive is like art: as Supreme Court Justice Potter Stewart put it, “I know it when I see it.”
Surely, we can do better.
Define the problem
Let’s start with the venerable Oxford English Dictionary:
intuit|inˈt(y)o͞o-it| (verb) to understand or work out by instinct
Hmm. Computers can’t possibly be instinctive; they’re too new. That's no good to us.
intuitive|inˈt(y)o͞oitiv| (adjective) 1. using or based on what one feels to be true even without conscious reasoning; instinctive. 2. easy to use and understand.
Now we’re getting somewhere: “without conscious reasoning”. A well-designed site or product won’t make the user think about what they're doing. Or as Steve Krug put it, “Don’t make me think”. 1
Look at the research
Jef Raskin, father of the Macintosh project, wrote:
“When users say that an interface is intuitive, they mean it operates just like some other software or method with which they are familiar.”2
Intuitive = familiar? A strong statement! Shouldn’t intuitive mean inherently known, in some fashion?
Consider the computer mouse. Anyone reading this article can use a mouse on any computer with no thought. That fits the definition of “intuitive” above quite well: we use it “without conscious reasoning” and find it “easy to use and understand”.
So, is the mouse an intuitive device?
When Apple introduced the mouse to the mass market in 1984, it was unfamiliar to users. Apple included with every Mac an audio cassette and instructional disk to explain the strange, new device to buyers. Jump to about 2 minutes 30 seconds into the video:
Learning the mouse required education, thus, it can’t be considered inherently known. Thirty years ago, the mouse was un-intuitive. Today it is intuitive. Hmm.
This is suspiciously similar to the psychological “Mere-exposure Effect”:
“a phenomenon by which people tend to develop a preference for things merely because they are familiar with them”3
That summary, in fact, understates how extreme the effect is. When we encounter something new, we don’t start out neutral:
“Robert Zajonc … observed that exposure to a novel stimulus initially elicits a fear/avoidance response by all organisms. Each repeated exposure to the novel stimulus causes less fear and more of an approach tactic by the observing organism. After repeated exposure, the observing organism will begin to react fondly to the once novel stimulus.” 4
Humans distrust the unfamiliar until it has proven itself safe over the course of repeated exposure, and eventually we come to like it. (Ten to 20 exposures seems to do the trick.)
Paul King, a computation neuroscientist at UC Berkeley, described intuition as:
“a highly parallel and mathematically precise statistical optimization of outcomes based in past observation. What makes it “intuition” is that we don’t have introspective access to the steps and factors that produce the conclusions.”5
In other words, intuition is built upon past experience.
Susan Weinschenk, psychologist and interface designer, puts this into a constructive framework by applying mental model theory:
“a mental model refers to the representation of something—the real world, a device, software, etc.—that the user has in mind. … Users’ mental models come from their prior experience with similar software or devices, assumptions they have, things they’ve heard others say, and also from their direct experience with the product or device.”6
Now that’s something we can get our teeth into. Not only do people like familiar things more, we can structure the tasks and content on our website or app to match how users think they should work.
Jared Spool, founder of User Interface Engineering, addresses prior knowledge succinctly:
“A design is intuitive when: current knowledge is equal to target knowledge.”7
That’s a principle of very practical application: If our user needs to know something to use a website or app, we must either be certain they already know it, or we need to teach it.
One last concept: Cognitive load.
“In a nutshell, Cognitive Load is the amount of ‘Brain Power‘ required to understand something. This could be perception, problem solving or juggling things in memory.”8
The more your users have to think about your website or app, they less they are thinking about the actual problem they need to solve. To make them happy, don’t make them do extra work.
Users have expectations of how things will work,
Users need a certain level of knowledge to succeed,
Familiar things are understood quickly and easily,
New things take more work to understand,
Therefore, your product should work as users expect (not as you expect), require minimal knowledge, and be familiar.
Put it into practice
We can infer from these principles a number of techniques to help us design intuitive websites or apps:
Reduce choice to the essentials.9 The more users have to ponder their options, the less happy they are. (Progressive disclosure techniques can help mitigate this.)
Use familiar models. Make sure to match your interface to your users’ mental models. Using established patterns is a great shortcut; ui-patterns.com is a good place to start.
Use familiar affordances. Buttons, links and menus should look like buttons, links and menus. Use standard icons for alerts, chats, etc. Indicate truncated content with ellipses. And so on.
Reduce the knowledge gap. This applies to everything from language (use familiar words!) to process (online checkouts don’t vary much for a reason). If you must teach the user, make it unmissable, because they won’t be looking for it.
Provide the right content. To adapt the old proverb, one person’s clutter is another’s content. Think about what content each user needs, and give them that and only that content. Contrawise, just because you don’t like a dense table full of numbers is not a good reason to remove that data.
Many more rules can be derived, of course. But these are a good starting point. Do these things, and you will be well on your way to designing intuitive experiences.
Raskin, who could be stunningly innovative in designing interfaces, opined that the desire for “intuitive” interfaces actually prevented real innovation:
“As an interface designer I am often asked to design a ‘better’ interface to some product. Usually one can be designed such that, in terms of learning time, eventual speed of operation (productivity), decreased error rates, and ease of implementation it is superior to competing or the client’s own products. Even where my proposals are seen as significant improvements, they are often rejected nonetheless on the grounds that they are not intuitive. It is a classic ‘catch 22.’ The client wants something that is significantly superior to the competition. But if superior, it cannot be the same, so it must be different (typically the greater the improvement, the greater the difference). Therefore it cannot be intuitive, that is, familiar. What the client usually wants is an interface with at most marginal differences that, somehow, makes a major improvement. This can be achieved only on the rare occasions where the original interface has some major flaw that is remedied by a minor fix.”10
For radical products with unique, compelling and obvious advantages (say, a touch-screen pocket computer with wireless data and voice), you can get away with requiring the user to learn. But when your product is not so unique (say, a website for a company that makes websites and apps), the unfamiliar is your users' enemy, and thus yours.
You can perform a judo move on this problem: To do something something new, couch it in something familiar. Consider the iPhone's home screen, filled with icons on a grid; it's conceptually like a Windows Start menu or Mac Dock. It's familiar, therefore, people like it. Contrast this with the Windows 7 Phone's innovative but unfamiliar Start screen, filled with scrolling Live Tiles. It's a genius presentation of information and apps, but utterly unfamiliar to its potential customers, and sales have not been good.
Staying focused on engineering tasks, especially large ones, can be difficult. In addition to our regular client work here at iMarc, we’ve continually improved our engineering practices by working on internal projects and libraries. The time spent on internal projects tends to be fractured. It can be tough to ensure that the initial vision of a task is followed through to the end. As iMarc has grown as an organization, we’ve developed some helpful guidelines for keeping the momentum going on our internal projects. Disclaimer: as with any process, there are exceptions to the rule. These are only basic guidelines.
Don't go alone
If you have an idea, it can be helpful to get someone else invested as well. Sure, not everyone will have the resources to help you with the final implementation, but there’s no harm in having someone to bounce ideas off of as you work toward a solution. It can be helpful to have multiple stakeholders, even at a high level, to ensure a project’s success. It encourages everybody involved to work to a standard, and will be a net positive for your team’s communication.
Assign a point person
While working with a team to achieve your goal provides solid benefits, it can’t be allowed to become the wild west. There should be a point person whom has the final say and can manage tasks. Engineers often hold strong opinions—if an agreement can’t be reached, the point person is responsible for making a decision and getting everyone on the same page. Personally, I prefer that no seniority comes into play when assigning a point person. If somebody is passionate about a problem, they are the right person to take the reigns. It also gives anybody a chance to step up and be a leader.
Make a plan
Don’t code right away. I will say it again: Don’t code right away. I think every engineer has been guilty of this at one point or another. You get excited about a solution and with your magnificent wizardry you desire to see something on the screen. All I can say is: STOP NOW. You need to sit down and quietly make a plan. It can be an intricate, detailed document, or simply some scribbly wireframes, but you need to think about the problem. How are things going to work? How does this talk to that? How does the user interact with this piece? Sure, there will be issues that need to be worked out during implementation, but the better the plan is upfront, the more productive you will be when sitting down to code. Be sure to break down any big task into small, manageable pieces that can be handed out à la carte to other engineers.
Don't get distracted by 'the new shiny thing'
There’s always a new framework, library or whatever to play with. If you are halfway through an implementation, think hard before retrofitting some new tool into an existing codebase. In most cases, you’re asking for trouble. Also, what about the task at hand? You’re working toward a goal with a plan and a team, so keep going! Don’t jump off the train. You’ll be happier and more productive in the end. Still, always be aware of the new tools at your disposal, just know that everything becomes legacy. It’s the nature of software, so you shouldn’t fear it. There will always be a chance to use the new shiny thing on your next project.
Document as you code
This will keep you honest and aware of all the pieces in play. Truthfully, there’s nothing worse than skipping documentation, and then having to go back and try to figure out what you (or someone else) were doing. Take the few minutes necessary to write some minimal documentation.
Put in the hours
This may be obvious, but your project isn’t going to write itself! Find a way to commit as much time as possible. You will always have priorities that will need to come first, but try to find a few minutes each day to think and code. If you make a plan with many small tasks, it makes putting in the hours easier. I don’t have extended periods of time every single day to work on internal projects, but If you can even find 15–30 minutes here and there to jump in, get something done, and get out, you’re moving the ball forward. Not to mention that it helps you keep the details fresh in your mind. Coming back to a project after lying dormant for a week or two requires a lot of uptake—it’s best to avoid it.
Today, I was startled by a stat I found in Jeffrey Cohen's "21 Unbelievable B2B Content Marketing Statistics". Right there in the top 5, wedged between gems about the most effective content and how many B2B firms perform content marketing, was this:
I had to read it again. "Only 25% of B2B Marketers use content marketing for customer retention." How alarming!
The old marketing adage states that it's much easier and less expensive to keep a customer than to bring a new one in the door. Harvard Business Review found that increasing retention by 5% increases profits from 25%–95%. For that reason, it's important for marketers to identify what type(s) of content lend itself for retaining customers, and then make a plan to execute.
4 kinds of content that help retain customers
Here are 4 examples of retention content you can use to engage customers:
Short videos are an excellent way to educate current customers. Many of your customers will be visual learners, so seeing instead of just reading will go along way to delivering value. Video you put on YouTube should be 60-90 seconds, but videos on your own site can be longer, at 2 to 3 minutes; according to Cisco's Leslie Drate. And, 84% of IT decision makers forward or share the videos they watch, so make sure it's easy to share.
Blog to educate and inform
Blogging is not just for lead generation. Long-time customers often aren't aware of what you can offer them today. Blogging is a great (and inexpensive) way to keep customers up-to-date on your company's offerings and achievements. This is especially important if your business or offerings have changed over the years.
Be proactive via social media
Social media is a real-time, interactive way to stay in touch and support your existing customers. Actively use it to respond to customer questions, thank customers for positive testimonials, and even address some negative feedback you may have received.
Your customers are choosing to engage with brands on their social channels, whether that be Facebook, Twitter, and/or LinkedIn. Be there for them.
Support content on your website
This is where it all begins – your website! Customers are returning to your site for more information and answers to their questions about your products and services. Make it easy for current customers to navigate FAQs; download help and product guides; and search and access website copy tailored to their needs.
What are your examples of retention content? Ping @imarcllc to share them!
I enjoy photography and love the look of a wide angle shot. The problem for me, and possibly for you too, is that I don’t have a thousand dollars to drop on a sweet wide angle lens. This posed a problem for me when I was planning my trip to Europe this past July. I knew I would be in front of these massive buildings and wouldn’t be able to back up enough to get the whole subject in frame. As you can see below, I can't get it all into my viewfinder.
I entertained the idea of renting a lens, but that can be expensive plus you run the risk of a freak accident damaging a lens that you are now on the hook to fix. There was the possibility of borrowing a lens and, while that certainly took care of the cost factor, the freak accident scenario was now even more treacherous.
I decided to forget about buying/renting/borrowing and instead I stiched together a bunch of images into one big wide angle photo using a Photoshop feature that I never really play with, Photomerge.
What you’ll need
We’ll start with the obvious, you need your camera. Preferably a DSLR but a point and shoot that can lock your auto exposure should do just fine.
A camera card with a lot of free space. Remember each image you want to take will be comprised of a dozen or more so you want to have enough space. Also, a higher write speed is preferable because the wait time between each photo will be shorter.
Photoshop. It's what I use, so it's what I know.
Keep in mind
There are a few things to remember when doing this to ensure that your composite image comes out looking its best.
Lock your exposure
Locking your exposure is very important. If you don’t lock it when you meter your first shot, then your camera will try to measure the light that’s in the viewfinder every time you take a photo which will lead to an inconsistent look across all of your photos especially if your subject has a lot of highlights and shadows throughout. If you want the sky to be blue in your image, meter for the sky. If you want your subject and foreground to be vibrant, meter for that.
Use one focal length
If you have a fixed lens, then you have nothing to worry about. But if you don't, make sure you don’t zoom in or out while you’re taking all the images for the large photo.
Overlap each shot
Make sure that you’re overlapping from image to image. If you don’t, then you’ll have gaps in your final photo and that’s not going to give you the results your looking for in the end.
Plant your feet and pivot
Remember that each frame will make up one large image from one focal point. This means you only want to pivot your camera around to take each image as if it’s on a tripod. If you move from left and right or up and down you’ll get weird stretching in your final shot.
Time to make the donuts
Let's get to work. Think about how you want to frame your shot and center the subject in front of you. Positioning your subject off center could provide cool results but let's focus on the little things first and you can experiment later. Remembering what I said about pivoting, take enough images to cover everything you want to have in your final shot. Below are all the frames I used in my shot. I like to start in the middle and make my way around in large circles.
Now that we have all the frames we'll let Photoshop work its mojo. We're looking for Photomerge, it's located under File/Automate.
Now all we have to do is select all the images we want to use and check off some settings.
When you have everything set, click OK and let Photoshop take it from here. It'll open up the files, place all the frames in the right place and manipulate them so that everything lines up. Depending on how much RAM you have you might want to grab a coffee, sometimes it can take a while. When the process is complete you'll see something like this.
Hopefully your merged image will be very close to your initial vision and will require only minor tweaking. As you can see from my example there's some warping going on so we want to try to fix that and give us a nice straight horizon line.
Now all you have to do is crop out the jagged edges, and you're pretty much set!
Most of us are familiar with the carousel, even if we don't know it by name. You may know it as a slideshow or a marquee, but they all have the same functionality. It's generally the first thing a user sees when visiting a site - a big block of rotating content that lies at the top of the homepage. The goal is to show users as much content as possible, while giving them a call to action.
These are just a few examples of carousels that iMarc has built for clients. We often include them in sites as they are a common request. But just how effective are these carousels at providing meaningful content and giving a call to action that the users actually take?
Why do we use carousels?
The use of carousels is derived from a need to give multiple pieces of content a center stage on the homepage. Many clients believe it is important to have the most important content lie "above the fold." Generally, this is driven by a need to satisfy multiple departments within a company wanting their content front and center.
From a developer's point of view they are easy to implement due to the abundance of ready-built plug-ins. The combination of ease-of-implementation and the demand from clients makes carousels a very popular tool in the web development industry.
What does the data tell us about carousels?
Unfortunately, most carousels have proven to be less than effective at engaging users. Erik Runyon has some great data reflecting this conclusion.
User engagement with the carousel ranged from 1.07% – 9.409%. The high end of the range was an outlier, with the majority of the carousel engagement being in 1-2% range.
Within that 1-9% range, the first slide in the carousel was clicked 54.57% – 89.1%. Subsequent slides had engagement as low as 2.4%. This mean that slides were engaged by as low as .02568% of users. You can see why this could be a problem.
On the bright side, it seems randomizing the order of the slides helps with engagement. If the first slide is different everytime a user lands on the page, then the engagement should be spread out equally across all slides.
Using a carousel that automatically switches between slides raises engagement. The site that used an autoplaying carousel had the highest engagement, at 9.409%. It also had the highest engagement for subsequent slides, which ranged from 7.97% – 17.87%. Both of these figures are significant deviations from the other sites tested.
What about iMarc specific data?
Recently, iMarc conducted user testing for the a client's website. After providing the users with a series of tasks to complete, we asked them if they could recall what the three slides on the homepage carousel were about. Zero of the testers were able to list back all three correctly, and the majority were only able to recall the first slide. Further, we found the less content that was on a carousel slide, the better. This is especially important if the carousel auto-scrolls - users must be able to quickly scan the content before the slide transition occurs.
What should we take away from this data?
Before I wrote this post, I was ready to throw out the idea of carousels all together. Having looked at the data, I still believe they are not very effective at engaging users. However, if you must use a carousel there are several paths to improvement.
Randomize the order of the slides for every user when they land on the page. This prevents the first slide from being the only content the user engages with.
Turn on autoscrolling. Many users have difficulty finding or using the navigation controls for carousels. This prevents them from ever seeing anything but the first slide.
Continually refresh the content in your carousel. Often times the carousel is used in a prime spot for promoting new material. If content is left to linger, it can become stale, wasting real estate that could be used more effectively.
Lastly, I'd like to point to Dave Tuft's post on "above the fold" which is a good complement to this post. The use of carousels and the emphasis on above the fold content for webpages are two common points of contention. It may be time to rethink both.