We talk a lot about scrolling, clicking, and the fold and I think we’re making great headway in the battle against an old, antiquated term. There is one important thing to keep in mind though — just because users scroll doesn’t mean we should make them do it more than they need to. This is more important than ever when we talk about our responsive sites at a small screen size.
Stacking content, and when not to do it
When you compare the desktop version of a responsive site to its small screen counterpart one of the major differences you’ll notice is that content is now stacked rather than displayed side by side. We do this because stacking content allows us to make it a comfortable and legible size on a mobile device. This makes the page longer but that’s ok because we know users scroll and scrolling is easy on one of them fancy smartphones.
We really need to be conscious of what we’re stacking though. The main goal, regardless of screen size, is to get the visitors to their content as quickly as possible. That means the first screen of any mobile website (what the visitor sees before they scroll anywhere) should be mostly the content they’re looking for. Below you’ll see two websites. On the left is the iMarc website and on the right is a low fidelity version of a real website I stumbled across the other day. Unfortunately it’s a layout I see far too often.
Both of these examples are of a blog detail page. On the iMarc site you can easily see that you’re in the blog section of the site, you can see the title and meta data of the blog article, and you can read almost the entire first paragraph of the blog. Taking a look at the example on the right all you get is a logo and two levels of navigation. Visitors aren’t here to admire your logo and navigation, they’re here for your content. If you’re not giving them even a whiff of your content on the first screen then you’re doing something wrong.
Give the people what they want
When it’s time to determine what you’re responsive site is going to look like on a small screen try to keep a few things in mind.
I’m sure your logo is wonderful but your visitors aren’t here to stare at it. Make it as small as you can get away with.
Collapse your navigation into a UI element that will display it when the user needs it.
Make sure your visitors can see some of your content on the first screen. Let them know there’s more to you than logos and links.
Remember these simple guidelines and you'll create an enjoyable mobile experience for your website.
I'd like to talk for a moment about losing. Specifically about losing work, and ultimately, time. Back in the early days of my employment at iMarc, we didn't have the same luxuries we so heavily rely on today. Before we adopted subversion, it wasn't uncommon to lose copious amounts of work due to simple miscommunication. Groans and swearing would echo through these walls as we carelessly saved over each other's hard work. Before cloud computing and automatic backups, everyone would inevitably lose data and designs due to occasional mechanical or human error. Even as recently as last week, I almost lost an hour of work when Photoshop decided to lock up unexpectedly as I was saving a fresh new design. The near loss of my work reminded me of something I used to do frequently that I still do from time to time.
I destroy my own work.
Often times as designers, we'll spend hours and days creating a design comp that we think our clients will love and embrace. We'll show it off internally to the entire creative team, strategy department, as well as our project managers and anyone else who happens to walk through the room. Some may love it as is, while others will offer several opinions on how it could be improved. How much feedback do I welcome before going back to work implementing said changes? I'd wager that most designers are content keeping what they currently have, iterating as needed to incorporate all of the feedback they've gathered, despite how tedious. More often than not in these scenarios, I take a different approach.
I create a new document.
A blank canvas can cause anxiety, especially with a deadline looming. The silver lining to this is that things always go faster the second time around. I know what works and what doesn't. I know the tricks to replicating the good styles I had established the first time around. If I had painted myself into a corner in the first version, I'm now free to explore new options. If my design was too complicated before, a second attempt is almost always cleaner and therefore easier for our front end team to implement.
I'm of the belief that nothing is ever truly "done". There will always be something to improve or remove. The most important things I can do as a designer are knowing when to stop fussing with a design, knowing when and what feedback to ignore, and realizing when it's time to start anew. There are plenty of fields and careers where the luxury of starting fresh with your work isn't a possibility. We forget sometimes that just because we may never have to "lose" our work again doesn't mean we shouldn't axe it ourselves from time to time.
iMarc will go through the hiring process once or twice in a typical year, and after almost two decades in business we've really been able to experiment and figure out what works great for us. Over this time, we've established things like:
our hiring site, where everybody at iMarc can check in on the process, see who the candidates are and what we like about them individually*
our roles doc & employee manual, which serve as the blueprints for our job listings
what we're looking for in a candidate, and in what order
when to interview in person vs. phone vs. email and what to ask whom, when
... and a bunch of other things that seem obvious but if you don't write them down you will invariably forget about (e.g. Making sure the applicant can actually get to the office.)
iMarc doesn't have a “formal” Human Resources person, so the manager of the relevant department (Engineering, Operations, BizDev, etc.) leads up the process. When it comes to hiring in Production this almost always falls on Dave, because he's just so darn good at it, and puts up the least amount of fight when we're arguing over who gets to vet two hundred applications from Craigslist.
When it came time to hire a Jr. UX Engineer, we gave Dave a break and I took the reins. Prior to diving in I sat with The Master and learned some tricks of the trade, so-to-speak. One thing that I had actually remembered was this blog that Dave had written back in 2009: "Why We Ignore Word". I'd recommend taking a moment to read that, but I'll provide a quick summary just in case: We instruct applicants to submit resumes in plain text or PDF - resumes sent in MS Word are ignored. This generates some controversy and speculation that we are inflexible tyrants and/or morons.
I knew the "ignore word" rule-of-thumb, but in my process I just couldn't bring myself to do it. What if that perfect candidate just overlooked that one, tiny thing, but otherwise they were God’s gift to User Experience?! So I vetted nearly every application regardless of resume format, 50% of which had a Word resume attached and little to no cover letter provided.
We're a few weeks into the process, and I've talked to a dozen or so talented engineers across the country, four of which we loved and invited to the office for in-person interviews. On a lark, I took a look at the initial emails I received from the candidates we seriously considered, and without an exception, they all provided PDF or online Resumes, as well as a personalized cover letter.
I just put down the phone with our newest hire: our friend Maribeth has accepted the position for the UX Engineer role. Looking back over the entire process, I probably could have cut my overall time in half, and saved a number of applicants a whole bunch of back and forth, if I had simply ignored Word.
*Did you know that Jeff and I were hired together in 2006, and I outscored him 9-8 (out of ten) in our hiring class? NBD.
We just implemented a new video background on our homepage. Typically, our go-to tool for converting video into the necessary HTML5 formats has been Miro Video Converter. It's been relatively successful at compressing most videos we've thrown at it in the past, not to mention it's dead simple. For better or worse, our latest video was getting a little hefty in size and Miro didn't give us the options we needed to be able to tweak bitrates and so forth. Enter FFmpeg.
FFmpeg is pretty much the standard open source video/audio encoding tool. (The FFmpeg Wiki is full of great encoding tips and examples) You can install FFmpeg on OSX using homebew.
brew install ffmpeg --with-libvpx
Using --with-libvpx ensures that we will compile FFmpeg with the VP8 encoder which we will need for our WebM video file. Using ffmpeg can be a bit daunting at first as there are so many options, but for the straightfoward encoding we will be doing, we can follow the command template below:
For our use case of using HTML5 video as a background element, we do not require any audio. We are disabling audio in the output with the -an flag above. Now we can go ahead and start encoding our HTML5 video formats! Here are the commands that we used:
The key to getting a successful result is definitely a lot of trial and error. Play with the bitrates/size until you get an acceptable quality to filesize ratio in each format. One of our goals was to keep the video very close to 1MB and we were able to achieve that using FFmpeg.
Anna Jaques Hospital Website in the Health category. This pairs with the Anna Jaques Women's Health Care website we did in 2012. The Anna Jaques Hospital also took a Silver in the Communicator Awards last year.
Off The Front Productions Website in the Self Promotion category. Off The Front is a full service video production company that focuses on telling its clients' stories. The site is dynamic, responsive for great mobile, tablet and desktop experiences, and of course features seamless integrated video. Off The Front also won a W3 Silver award earlier this month.
RSA Conference Website in the Events category. This site uses outstanding blog, social, video and event content to create a year-round experience for attendees, and uses fully responsive design and programming to work perfectly on all desktop and mobile browsers. RSA Conference also won a W3 Gold award earlier this month.
Wilson Elser Website in the Law & Legal Services category. Wilson Elser is one of the nation's largest law firms, and the complex content management system we built for them lets them manage attorney biographies, offices, practices and industries, news and events, and microsites without ever touching a line of code. And, of course, it looks great and is easy to use. Wilson Elser also won a 2013 Communicator Award of Distinction this past spring.
We're very proud of the work we do for our clients. Without such great clients, we wouldn't have won so many awards over the years. Thank you!
Renaming your brand can truly be a daunting and challenging exercise that forces you to look over your core values and leverage them as a new entity. There is always some hesitation to "start fresh". The best brands out there are memorable, relevant, and resonant.
Memorable - The top goal of every brand. It helps form lasting connections with your audiences and influences how they think about your brand.
Relevant - The ability to identify and relate to your audiences needs, wants, and desires. Your brand can speak their language and appears current in that space.
Resonant - The emotional connection. Ultimately responsible for the long-term brand loyalty. Use emotionally driven communications to elevate your brand from your compeition.
To calm the fear associated with potentially mis-aligning your new brand or losing key characteristics, make sure to ask yourself the following questions:
What are your brand's core values? How does your current name fail to correctly represent those?
Who is the primary audience of your organization? Will the new name make sense to that audience?
What weaknesses or obscurities do you hope a new name will clear up for your audience?
Can all of your stakeholders agree on the value being gained from changing the name? What is the value?
Does the name hold up to your brand vision moving forward?
Is the new name available as a domain name for purchase (.com, .net, .org)?
Say the name outloud. Does the name sound harsh or is it difficult to say?
Will this new name have a tagline? Can the new name stand on its own without it?
Do any visuals come to mind when thinking about this new name?
Does this new name have any harmful connotations (inside or outside your industry)?
By knowing the answers to all of the questions above, you will have the solid foundation needed to then create a new name for your brand...and avoid reinacting this scene:
The biggest, but least visible, challenge in any collaboration is ensuring that every contributor shares the same vision for the end product. The obvious methods are traditional project documents, such as site maps, wireframes, specifications documents, and design compositions.
Each team member will have a slightly different interpretation of the design documents. This is good: diversity limits blindspots and tunnel vision. Yet, it also is bad: too much divergence can result in the end product lacking conceptual integrity. Symptoms include confusing navigation, unfocused content, irregular styling, inconsistent UX ... overall, an uneven user experience. The website or app may not be bad, but it won't be as good as it should be.
How do you ensure that every team member has the same conception of the product?
Involving the entire project team as early as possible goes a long way. This gives the benefit of diversity, while ensuring that every member has participated in conceptualization. We exercise this in obvious ways such as our full-team project kickoffs, but also in less obvious ways.
Enter the Whiteboard
At iMarc you are likely to see someone stand up and start writing on a whiteboard at the slightest provocation. And over the years, more and more dry erase surfaces have appeared throughout our Newburyport offices. Why?
They are impermanent, which encourages experimentation. Anyone can use one, which encourages participation. They are big, which encourages exploration. Everyone can see them, which makes them social and shareable. They are informal, which democratizes the process and encourages joining a discussion.
Experimentation. Participation. Exploration. Sharing. Discussion. All attributes of effective collaboration. Whiteboards make it easy for groups to explore ideas early in the process, which in turn makes them co-authors of the project. This increases the consistency of the project vision across all the participants, improving the quality of the end product.
And as an unexpected bonus, we've found it usually results in faster execution.
A Flock of Whiteboards
When I started at iMarc over eight years ago, we had one whiteboard. It was one of those giant seven-by-four foot, heavy wood-framed monstrosities. We carried to from room to room, hanging it on eye bolts we had screwed into the walls. It required effort and planning to use. As a result, it wasn't used by many people.
Over the past few years, though, we've added more and more whiteboards to our office. But instead of hanging more big, heavy boards, we've been converting entire walls at a time.
The first was our lunchroom wall. We experimented with rolls of stick-on dry erase surface, for an inexpensive proof-of-concept. That wasn't very durable, so we took it down and put up inexpensive panel board from Home Depot. The big expanse, combined with the nearby table and seating, makes for a great workspace.
The downside of panel board is the seams. They catch markers on the way by, discouraging full use of the space. They also don't erase as cleanly as "real" dry erase boards. For that reason, I recently removed the panel board that had been installed in our UX/Strategy room. I replaced it with a painted-on dry-erase surface sold by Rustoleum.
Upsides: Erases extremely well, enhances marker colors, frameless. Downsides: Requires three to four coats, and if you put it on too thickly, it runs. Since it's glossy, it shows every flaw in the wall underneath. It's a net win.
The next dry erase surfaces to appear were downstairs in the BizDev office. Nick and I tried out the more expensive IdeaPaint brand. Like the Rustoleum, it's a two-part epoxy, but it's much thicker and requires only one coat. We painted the wall and the top of our rolling 4' cube with IdeaPaint, and the sides of the cube with Rustoleum. The cube makes a great collaboration surface, mixing physical and drawn items.
As for that huge whiteboard that started all this? Still in use. It now lives in our designers' room:
Next? Perhaps the Engineering Room... for the moment, though, our Engineers seem happy to gather in the lunchroom when brainstorming. And it saves disturbing anyone in the coding zone.
I won't go so far as to say that whiteboards are the reason our work has gotten so much better over the years. But they sure haven't hurt.
We are very excited to share that 4 recent projects were just honored with W³ awards!
The W³ Awards honors creative excellence on the web, and recognizes the creative and marketing professionals behind award winning sites, videos and marketing programs. The W³ is sanctioned and judged by the International Academy of the Visual Arts, an invitation-only body consisting of top-tier professionals from a "Who's Who" of acclaimed media, interactive, advertising and marketing firms.
The work honored included:
The RSA Conference website, in the Events category (Gold). This site uses fully responsive design and programming to work perfectly on all desktop and mobile browsers.
The Rapid7 website, in the IT/Software category (Silver). In addition to the new website design and strategy, iMarc also reimagined their brand and designed an all-new identity.
The Anna Jaques Women's Health Care website, in the Health Care category (Silver). This site pairs with the award-winning project we did for Anna Jaques Hospital in 2012.
We're thrilled about having our work so well received, but also for our project partners on the client side. Every great project springs from a great collaboration, and in each of these projects we had great partners on the client teams. Thanks and appreciation from all of us to our terrific clients for their contributions to the great outcome.
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.