Group items tagged

When you hover over a menu item, a submenu appears. But apart from hovering over an item, you can also simply click on it to follow the link. Now, what should happen when you tap on the item with a touch device? Should the submenus appear, or should the link activate? Or both? Or should something else happen? On iOS, something else happens. The first time you tap a link like that, the submenu appears; in other words, the hover event fires. You have to tap a second time to actually follow the link. This is confusing, and not many people will tap a second time. On Android, the submenu appears and the link is followed simultaneously. I don’t have to explain to you that this is confusing.

It’s very well possible to think of complex solutions11 whereby you define different interactions for different input devices. But the better solution, I think, is to make sure that the default interaction, the activate event, just works for everybody. If you really need to, you could choose to enhance this default experience for certain users.

The same principle that we follow for interactions — whereby we design the activate event first and enhance it later — applies to graphic design. We should start designing the things that we know everyone will see. That’s the content. No matter how big or small a screen is and no matter how minimal the feature set of a browser, it will be able to show letters.

rather than pollute the page with all kinds of links to get people out of there, we should really focus on that thing in the middle. Make sure it works. Make sure it looks good. Make sure it’s readable.

you start by designing the relationship between the different font sizes.

When the typography is done, you would start designing the layout for bigger screens; you can think of this as an enhancement for people with bigger screens. And after that, when the different layouts are done, you could add the paint. And by paint, I mean color, gradients, borders, etc.

When I say to start with typography, I don’t mean that you aren’t allowed to think about paint at the same time. Rather, I’m trying to find the things that all of these different devices, with all of their different screen sizes and all of their different features, have in common. It just seems logical to first design this shared core thoroughly. The strange thing is that this core is often overlooked: Web professionals tend to view their own creations with top-of-the-line devices with up-to-date browsers. They see only the enhancements. The shared core with the basic experience is often invisible.

All of the things we created first — the navigation, the widgets, the footer — they all helped the visitor to leave the page. But the visitor probably wanted to be there! That was weird.

To build a responsive website that works on all kinds of screens, designing for a small screen first is easiest. It forces you to focus on what’s really important: if it doesn’t fit in this small square, it is probably not terribly important. It forces you to think better about hierarchy, about the right order of components on the page.

Once you’re done with the content, you can start to ask yourself whether this content needs a header. Or a logo. Or subnavigation. Does it need navigation at all? And does it really need all of those widgets? The answer to that last question is “No.” I’ve never understood what those widgets are for. I have never seen a useful widget. I have never seen a widget that’s better than white space.

does the logo really need to be at the top16 of every page? It could very well go in the footer on many websites

the option to add extra luggage to a flight booking might be most effective right there in the overview of the flight, instead of in the middle of a list of links somewhere on the left of the page.

does the main navigation look more important than the main content? Most of the time it shouldn’t be, and I usually consider the navigation to be footer content.

The whole purpose of your own blog is to drive the highest quality, most targeted traffic to your conversion funnel – if you are not doing that, you might as well not have a blog.

Fluid layouts are often compared to water, but water isn’t always fluid. H2O has three different states, and depending on the temperature can be a solid, liquid, or gas, transitioning seamlessly from one to another at specific points (0ºC, 100ºC). An infinite grid also has multiple states (single column, multi-column, etc.), and should transition as seamlessly as possible between them at specific breakpoints as well. For example, just as ice is an appropriate state for water when the temperature is low, a single-column layout may be the appropriate state for an infinite grid on smaller devices. Water’s state change is caused by the rearrangement of its molecules. When an infinite grid changes state, we rearrange its components.

Each state in a responsive layout tends to be made up of the same components, such as an image gallery or navigation menu. However, as Ethan Marcotte recently outlined, the form these components take can vary dramatically between one state and another, usually involving a change in one or more of the following attributes: Hierarchy: What’s its order and prominence in the layout? Density: How much detail do you show? Interaction: Should it be a list of links or a dropdown? A carousel or a group of images? Width: Is it fixed (a specific width), flexible (set with max-width), or fractional (set with percentages)?

Absolute units like pixels effectively give a layout a sell-by date, locking it to a finite resolution range in which it will “work.” Proportional units (ems, rems, and percentages) enable you to define the important relationships between elements, and are a crucial first step on the road to resolution independence.

Pixels size an element relative to a particular resolution Ems size an element relative to its font size; large rems size it relative to the document’s base font size Percentages size an element relative to its container VH and VW units size an element relative to the viewport

lets say my largest state is 75em wide (any larger and the white space starts to dwarf the content), and my smallest is 34em (any smaller and the measure is less than optimal). In the largest state it makes sense for my navigation to be a horizontal list (interaction) at the top (hierarchy), but in the smallest state it might make more sense to move it to the bottom of the layout (hierarchy), or collapse it into a show/hide list (interaction). Designing these independently of one another helps you be more objective about what is best for each state, rather than stretching a one-size-fits-all solution across every state.

Just like water changes to steam when its molecules get too far apart, one state should change to another when the relationships between its components begin to break down, such as when the measure is getting too wide, or the left-aligned logo is getting so far from the right-aligned menu that the visual connection between them is broken.

The number of states you require will depend on how much your layout changes from one extreme to the other. For example, my smallest state has a single column with a collapsed menu, and my largest state has three columns and an expanded menu. However neither state looks quite right between 34em and 53em, so I’ve added an “in-between” state which maintains the smallest state’s single column article, but expands the menu and divides the footer into three columns to make the most of the space available. This smooths out the transition from one extreme to another quite nicely.

With each state change, remember to reconsider the hierarchy, density, interaction, and width of each component

the goal is to make the most of the space available, relative to your content, to maximize readability and presentation.

In the latter block, each division might have a different class name or perhaps different additional classes applied. This allows for greater flexibility in rearranging them in the layout. In the first block of code, the three content divisions will always reside inside their parent container.

With CSS, we have the ability to rearrange blocks inside a container. We don’t have the ability to break content out of one container and move it inside another container. If you want more mixing of blocks, then you’ll need fewer containers.

there are currently far more instances of websites that are dropping columns wholesale

Every element is its own unique block and serves as its own container. The page’s main heading is its own contained block. All of the meta information is inside another container directly below it. After that, every paragraph, subheading and image is also its own self-contained block of content. The same goes for anything else that might end up in a post, such as a block quote or code block.

a challenge to how we think about structuring our HTML, particularly to how we use containers. Elements can’t move from one container to the next. We can fake it with complex CSS, or we can rewrite the HTML with JavaScript; but, ultimately, if we want to intermix elements, we’re best of using fewer HTML containers to create columns. Instead, we should leave more of our content blocks in their own containers and use CSS to create virtual columns in the layout. This solution doesn’t confine our elements to structural containers and instead enables us to more easily rearrange the elements in different layouts.

Content that is positive, informative, surprising or interesting is shared more often than content that is not, and while content that’s prominently featured is shared more often than content that is not, this is a minor factor compared with how emotionally resonant the content is.

It takes months and years to build relationships with people, and they all are built on many lightweight interactions over time. And people build relationships with brands in the same way as they build relationships with people: slowly, one interaction at a time. Just as we don’t suddenly become best friends with someone, we don’t suddenly fall in love with a brand – so build products that support lightweight ways for people to interact and show the aggregations of those interactions over time.

You can debate things in conference rooms all day long. You can run iterative, qualitative research to reduce risk. But when it comes to social design, if it isn’t public, it doesn’t exist. Building beats talking; it’s better to launch fast and grow slowly than try launching an all-singing, all-dancing extravaganza.

The longer things stay in meeting rooms and internal prototypes, the more competitors with public-facing products are learning about what works.

Launch early, learn fast, and iterate.

Many designers and urban planners spend a huge amount of time detailing buildings and landscapes, setting down paths for how people will move. But they often get it wrong. People will cut across the expansive lawn, laying down a muddy path through the grass. People will force their way through hedges, in the process creating fresh pathways. Rather than detailing out every last interaction, it’s better to construct the basic frameworks and then watch how people move. Then you can iterate, because you already know where the paths should be.

What our eyes see connects directly with the unconscious parts of the brain that marketers want to reach; that means you want to make your points (and your website design) as visual as possible. Photos and pictures are a great way to sell concepts quickly and directly in a brain-pleasing way. And, by the way, facial expressions are great to use--our noggins immediately identify with them.

Our brains are getting inundated with messages all day long--so they respond well to pitches that are short and sweet. Short impactful statements on the homepage can do the job a whole lot better than huge blocks of copy that overexplain what you’re all about.

If you’re too clever or too abstract, our brains are going to want to move on (unless it’s something we really want to figure out, which isn’t usually the case with marketing). Make sure your content is written clearly in language everyone can understand (unless you’re serving a niche audience that expects more technical or sophisticated language).

Emotion hits our underground intellect more powerfully than the most effectively worded argument. It makes whatever the message is more memorable as well. Go beyond facts to make your customers feel.

By working towards more actual social engagement opportunities with our website visitors, instead of just artificially boosting traffic, we also increase our odds for creating conversations, conversions, and long-term clients.

In the last update, Google changed the layout of posts so that you only see three lines of the original post before you see “Read more” link. In other words, your first sentence has to be a gripping teaser to get people to click “Read More.”

The ideal length of a Google+ headline is less than 60 characters To maximize the readability and appearance of your posts on Google+, you may want to keep your text on one line.

Many different studies over the years have confirmed that shorter posts are better on Facebook.

Writing for KISSmetrics, headline expert Bnonn cites usability research revealing we don’t only scan body copy, we also scan headlines. As such, we tend to absorb only the first three words and the last three words of a headline. If you want to maximize the chance that your entire headline gets read, keep your headline to six words.

some of the highest-converting headlines on the web are as long as 30 words. As a rule, if it won’t fit in a tweet it’s too long. But let me suggest that rather than worrying about length you should worry about making every word count. Especially the first and last 3.

The ideal length of a blog post is 7 minutes, 1,600 words

to ensure maximum comprehension and the appearance of simplicity, the perfect line length ranges between 40 and 55 characters per line, or in other words, a content column that varies between 250-350 pixels wide (it depends on font size and choice).

Consider that shorter lines appear as less work for the reader; they make it easier to focus and to jump quickly from one line to the next. Opening paragraphs with larger fonts—and therefore fewer characters per line—are like a a running start to reading a piece of content. This style gets readers  hooked with an easy-to-read opening paragraph, then you can adjust the line width from there.

In September 2012, MailChimp published the following headline on its blog: Subject Line Length Means Absolutely Nothing. This was quite the authoritative statement, but MailChimp had the data to back it up.

Beyond the perfect length, you can also adhere to best practices. In general, a 50-character maximum is recommended, although MailChimp does point out that there can be exceptions: The general rule of thumb in email marketing is to keep your subject line to 50 characters or less. Our analysis found this to generally be the rule. The exception was for highly targeted audiences, where the reader apparently appreciated the additional information in the subject line.

The ideal length of a title tag is 55 characters Title tags are the bits of text that define your page on a search results page. Brick-and-mortar stores have business names; your web page has a title tag. Recent changes to the design of Google’s results pages mean that the maximum length for titles is around 60 characters. If your title exceeds 60 characters, it will get truncated with an ellipse.

Finding a hard-and-fast rule for the maximum recommendation of a title tag isn’t as easy as you’d think. Quick typography lesson: Google uses Arial for the titles on its results pages, Arial is a proportionally-spaced font, meaning that different letters take up different width. A lowercase “i” is going to be narrower than a lowercase “w.” Therefore, the actual letters in your title will change the maximum allowable characters that can fit on one line.

Customizing content, as Chubb did with Masterpiece, is a form of simplicity because it involves winnowing information and increasing relevancy.

Even the largest company can achieve the illusion that it is speaking to you and only you.

According to a recent survey by the research firm Outlaw Consulting, the youngest wave of Generation Y consumers (those aged twenty-one to twenty-seven) responds very positively to brands that communicate with them in a “straightforward and stripped-down way, use plain packaging, and avoid excess,”

One of the qualities these younger respondents associate with simplicity is authenticity--that is, “keeping it simple” is tantamount to “keeping it real.”

Many brands these days would kill to be thought of by younger consumers as “real” and “authentic,” yet they fail to recognize that simplicity--in their products, packaging, and messaging--is one of the most important ways to convey this quality.

When we talk about breakthrough simplicity, we mean an interaction that cuts through the clutter. This is a standard that should be applied to everything a company puts out into the world, from the product to the ads down to the smallest piece of correspondence: It should do its job quickly, clearly, simply. People just don’t have the time or the interest to wade through corporate rhetoric and jargon to figure out what you’re trying to tell them. Through clarity of thought and presentation, it’s possible for a business to rise above the cacophony of today’s marketplace.

simplicity sells

280 Slides:

LovelyCharts:

They throw into relief the larger questions of privacy policy we’re currently wrestling with as a culture: Too much disclosure of the social graph can lead to friends feeling that you’re tattling on them to a corporation. The interest graph can turn your passions into a marketing campaign. The behavior graph can allow people who wish you harm to know where you are and what you’re doing. And revealing the personal graph can make it feel like an outside entity is quite literally reading your mind.

companies are actively constructing these graphs already. These products and services are in the market today, but most in existence target only one or two of these graphs. Few are pursuing all four, both given the immaturity of the space and a lack of clear targets to shoot for. This has the unintentional effect of highlighting the risks of using such services, without demonstrating their benefits. For the potential of contextual computing to be realized, these data sets must be integrated.

In an ideal contextual computing state, this graph would be complete--so gentle nudges by software and services can bring together two people who are strangers but who could get along brilliantly and are in the same place at the same time. It could be two people who share a friend and who simultaneously move to Omaha, where neither person knows a soul.

It’s easy for data to depict what you actually do instead of what you claim to do. Sensors do the job. So do, if less elegantly, self-reporting mechanisms. This data can sit in pivotal contrast to the interest graph, allowing computers to know, perhaps better than you, how likely you are to go for a jog. It would be useful, too, for a travel site that notes how you tell friends you’d like to visit China but records that you only vacation in Europe. Rather than uselessly recommending vacation deals to Beijing, a smart travel app would instead feed you deals to Paris or Berlin. The behavior graph provides the foundation, to some extent, of Google Search, Netflix recommendations, Amazon recommendations, iTunes Genius, Nike+ run tracking, FourSquare, FitBit, and the entire "quantified self" movement. When mashed against the other three graphs, there’s a potential for real insight.

Within a decade, contextual computing will be the dominant paradigm in technology.

The survey asked respondents to rank different marketing activities first, second and third in importance, collating all three preferences to get the overall percentage. On first place preference, corporate websites came out joint top with online advertising, cited by 18% apiece as the most important activity. Social media slumped in importance on this measure — cited by just six per cent of respondents as the most important activity (and second only to the company blog):

The results indicate that corporate websites still have a key role to play when it comes to marketing a company’s offerings, despite the big role also played by social media. It’s also notable that mobile marketing is still relatively low down the priorities list, with an aggregated percentage of 24%. It’s still far better than the poor unloved (and doubtless rarely updated) company blog, though, with just 6%.

Corporate websites perhaps have a key reputational role to play in the marketing mix, supplementing and underpining social media marketing spending — by providing reassurance of a brand’s professionalism where a Facebook page can provide evidence of user engagement/approval (or otherwise).

The top priorities for increased budgets in 2013 are commerce experiences, social and mobile marketing, and content creation and management

Site users don’t tend to have kids of their own, make somewhere between $0 and $50,000 (66 percent do), have either no college (41 percent) or college backgrounds (48 percent), and tend to reflect a more ethnically diverse makeup.

Ten out of the ten top Hollywood studios advertise on Tumblr now

the U.S. is Tumblr’s top traffic source.

Tumblr’s future, for now, seems to be closely tied to its young adult demographic, their whims, and perhaps even their historical aversion to online ads. This audience has grown up connected, is often skeptical and cynical when it comes to brand advertising

It’s not an easy group to reach, which makes Tumblr’s revenue potential tricky to pin down. Too much or the wrong kind of advertising, and a fickle teen audience may find a new home elsewhere. Though Tumblr is now home to over 100 million blogs, if a good chunk belong to teens, it’s difficult to count that as serious traction –  today’s teens are less committed to their digital creations than adults, having already invented methods like “whitewalling” and “super-logoff” to erase and hide their Facebook pages, and are now turning to “ephemeral” messaging apps like Snapchat, which delete their communications upon viewing.

Tumblr will need to be careful with the results of those advertisers’ efforts. Overdone marketing messages could sour Tumblr’s most engaged users on their online hangout. Done well, however, Tumblr could endear itself to its reblog-happy user base even more, connecting aspirational imagery and content with those who are still young enough to dream they can spend their way into new feelings.

Humans, like the mice in Skinner’s box, crave predictability and struggle to find patterns, even when none exist. Variability is the brain’s cognitive nemesis and our minds make deduction of cause and effect a priority over other functions like self-control and moderation.

Recent neuroscience has revealed that our dopamine system works not to provide us with rewards for our efforts, but to keep us searching by inducing a semi-stressful response we call desire.

Variable rewards come in three types and involve the persistent pursuit of: rewards of the tribe, rewards of the hunt, and rewards of the self.

We’re meant to be part of a tribe so our brains seek out rewards that make us feel accepted, important, attractive, and included.

But as sociable as we are, our individual need for sustenance is even more crucial. The need to acquire physical things, such as food and supplies, is part of the brain’s operating system and we clearly wouldn’t have survived the millennia without this impulse. But where we once hunted for food, today we hunt for deals and information. The same compulsion that kept us searching for food coerces us to open emails from Groupon and Appsumo. New shopping startups make the hunt for products entertaining by introducing variability to what the user may find next. Pinterest and Wanelo keep users searching with an endless supply of eye candy, a trove of dopamine flooding desirables. To see an example of how the hunt for information engages users, look no further then the right side of this page. There, you will find a listing of popular posts. Using intriguing images and short, attention-grabbing text, the list is a variable reward mechanism designed to keep you hunting for your next discovery.

We also seek mastery of the world around us. Game mechanics, found everywhere from Zynga games to business productivity apps like to-do lists, provide a variable rewards system built around our need to control, dominate, and complete challenges. Slaying new messages in your inbox stimulates neurons similar to those stimulated by playing StarCraft.

Email, for example, is addictive because it provides all three reward types at random intervals. First, we have a social obligation to answer our emails (the tribe). We are also conditioned to know that an email may tell us information about a potential business opportunity (the hunt). And finally, our email seems to call for us to complete the task of removing the unopened item notification in a sort of challenge to gain control over it (the self). Interestingly, these motivations go away as soon as we’ve actually opened all our emails and the mystery disappears. We’re addicted to checking email while there is still variability of reward and once that’s gone, emails languish in our inboxes.

As B.F. Skinner discovered over 50 years ago, variable rewards are a powerful inducement to creating compulsions.

The key to creating hyper-timely emails is planning and being nimble, says Christopher Stemborowski, associate communication strategist for marketing agency Oxford Communications. “Seeming timely can be the result of preparing multiple emails or just one email and waiting for the right time to send it.”

Build multiple versions ahead of key events: In the same way that shirts are made ahead of the Super Bowl declaring each team the champion, you can design two versions of an email to respond quickly to the outcome of major events.Plan an email for an event that has an unspecified date: Snowstorms will happen each winter. Will you have an email ready to go out the moment it happens? With a little planning, you can.Track trending online memes: In 2011, we have seen a #winning Charlie Sheen and a really excited Rebecca Black ready to have fun, fun, fun. Smart brands can tap into these memes in email blasts. You can keep track of these popular memes by viewing the trending topics section on Twitter.

Blasting irrelevant content to your email subscribers is one of the biggest email marketing mistakes you can commit.“For example, if a salon sends an email to men that highlights services solely for women, it shouldn’t be a shock when the men unsubscribe,” Stemborowski says. “To avoid this, the salon needs to know who in its database are males and who are females and then avoid sending irrelevant messages.”

“Self-selection means subscribers willingly receive emails that are in the categories they asked to get,” Stemborowski said, adding that it’s vital to keep the screening short so users don’t abandon the process.

More than ever, people are reading emails on their mobile devices. Mobile email usage increased 36% in 2010, according to comScore.

The first line of your email should never read, “If you are having trouble reading this email click here,” he adds. “Remember, the first line of the email is what shows up as the preview on smartphones. For this reason, the first line is premium real estate and, with this in mind, you should put your most important message first for a well-crafted call to action.”