Skip to main content

Home/ @Publish/ Group items tagged Usability

Rss Feed Group items tagged

Pedro Gonçalves

7 Marketing Lessons from Eye-Tracking Studies #CRO - 0 views

  • Authorship photos might cause people to assume that the page is an article or a blog post rather than a product page.
  • most pages can be optimized by including images that serve as visual cues for where visitors should look next.
  • Relying on the screen above “the fold” to do all of the heavy lifting is one of the biggest usability mistakes you can make. The idea that it is the only place web users will browse is a complete myth.
  • ...6 more annotations...
  • This coincides with additional research that shows people tend to view the left side of the screen overall far more than the right.
  • According to this study from the Nielsen Group, all across articles, e-commerce sites, and search engine results, people almost always browse in an F-shaped pattern that heavily favors the left side of the screen.
  • Multiple tests (including this one and this other one) have shown that users have no problem scrolling down below the fold. Surprisingly, they will browse even further down if the length of the page is longer.
  • Users are extremely fast at both processing their inboxes and reading newsletters. The average time allocated to a newsletter after opening it was only 51 seconds. This means that you need to get to the point in your emails in under a minute.
  • This coincides with a study from MarketingSherpa that shows people prefer short, clear, and un-creative headlines for their emails. (Creative headlines can seem mysterious, and mystery in an inbox may equal spam.)
  • Once you’ve earned the right to appear in a prospect’s inbox, be sure to keep that privilege by crafting emails that are clear and get to the point quickly. You don’t have as much time to broadcast your message as you would in an online article.
Pedro Gonçalves

How Users Read on the Web - 0 views

  • 79 percent of our test users always scanned any new page they came across; only 16 percent read word-by-word. (Update: a newer study found that users read email newsletters even more abruptly than they read websites.)
  • Web pages have to employ scannable text, using highlighted keywords (hypertext links serve as one form of highlighting; typeface variations and color are others) meaningful sub-headings (not "clever" ones) bulleted lists one idea per paragraph (users will skip over any additional ideas if they are not caught by the first few words in the paragraph) the inverted pyramid style, starting with the conclusion half the word count (or less) than conventional writing
Pedro Gonçalves

20 top web design and development trends for 2013 | Feature | .net magazine - 0 views

  • “If you’re designing a website and not thinking about the user experience on mobile and tablets, you’re going to disappoint a lot of users,” he warns. Designer Tom Muller thinks big brands getting on board will lead to agencies “increasingly using responsive design as a major selling point, persuading clients to future-proof digital marketing communications”. When doing so, Clearleft founder Andy Budd believes we’ll see an end to retrofitting RWD into existing products: “Instead, RWD will be a key element for a company’s mobile strategy, baked in from the start.” Because of this, Budd predicts standalone mobile-optimised sites and native apps will go into decline: “This will reduce the number of mobile apps that are website clones, and force companies to design unique mobile experiences targeted towards specific customers and behaviours.”
  • During 2012, the average site size crept over a megabyte, which designer/developer Mat Marquis describes as “pretty gross”, but he reckons there’s a trend towards “leaner, faster, more efficient websites” – and hopes it sticks. He adds: “Loosing a gigantic website onto the web isn’t much different from building a site that requires browser ‘X’: it’s putting the onus on users, for our own sakes.”
  • Designer and writer Stephanie Rieger reckons that although people now know “web design isn’t print,” they’ve “forgotten it’s actually software, and performance is therefore a critical UX factor”.
  • ...6 more annotations...
  • Bluegg studio manager Rob Mills reckons 2013 will see a “further step in the direction of storytelling and personality on the web, achieved through a greater focus on content and an increase in the use of illustration”.
  • Apps remain big business, but some publishers continue to edge to HTML5. Redweb head of innovation David Burton reckons a larger backlash is brewing: “The gold rush is over, and there’s unrest in that apps aren’t all they promised to be. We now live in a just-in-time culture, where Google can answer anything at the drop of a hat, and we no longer need to know the answers. The app model works the old way. Do we need apps for every brand we interact with? Will we even have iPhones in five years’ time? Who knows? But one thing is certain – the internet will remain, and the clever money is on making web apps that work across all platforms, present and future.”
  • Designer/developer Dan Eden says that with “more companies focussing web efforts on mobile,” designers will feel the pressure to brush up on the subject, to the point that in 2013, “designing for desktop might be considered legacy support”. Rowley agrees projects will increasingly “focus on mobile-first regarding design, form, usability and functionality”, and Chris Lake, Econsultancy director of product development, explains this will impact on interaction, with web designers exploring natural user interface design (fingers, not cursors) and utilising gestures.
  • We’re increasingly comfortable using products that aren’t finished. It’s become acceptable to launch a work-in-progress, which is faster to market and simpler to build – and then improve it, add features, and keep people’s attention. It’s a model that works well, especially during recession. As we head into 2013, this beta model of releasing and publicly tweaking could become increasingly prevalent.“
  • “The detail matters, and can be the difference between a good experience and a great experience.” Garrett adds we’ll also see a “trend towards not looking CMS-like”, through clients demanding a site run a specific CMS but that it not look like other sites using the system.
  • “SWD is a methodology for designing websites capable of being displayed on screens with both low and high pixel densities. Like RWD, it’s a collection of ideas, techniques, and web standards.”
Pedro Gonçalves

Flat Pixels: The Battle Between Flat Design And Skeuomorphism - 0 views

  • Defining Skeuomorphism This obscure word describes the way designs often borrow a particular feature from the past, even when the functional need for it is gone. Examples include pre-recorded shutter noises on smartphones to remind us of film cameras, or calendar apps that feature torn paper and metal rings. Or, as Wikipedia tells us [1]: A skeuomorph is a physical ornament or design on an object copied from a form of the object when made from another material or by other techniques.
  • the digital world has seen skeuomorphism popularized in the past couple years mainly thanks to the recent iOS-inspired trend of rich textures and life-like controls.
  • By opposition, the other side of the coin would be the newly popular "flat style", of which Microsoft's Metro UI is probably the main example. Flat Style embraces visual minimalism, eschewing textures and lighting effects for simple shapes and flat colors.
  • ...23 more annotations...
  • this trend is not always about skeuomorphism – which implies a connection to a past incarnation of a similar design – but rather often about realism [2]: a purely visual style that tries to imitate real-world materials and textures, exemplified by Apple's tacky over-use of leather textures in some of their own apps.
  • skeuomorphic designs tend to look realistic (to make the connection with the original object clear), and realistic designs tend to be skeuomorphic (otherwise the realism would look out of place).
  • touch target couldn't be smaller than a certain size (Apple's Human Interface Guidelines recommend at least 44 by 44 pixels).
  • showing less on the screen, but doing more with it.
  • realism done wrong can morph into kitsch
  • the problem of getting skeuomorphism wrong: making something look like a physical object, but not work like it
  • That problem is that when borrowing elements from a design's previous incarnation, you often also bring its limitations along for the ride, even when these limitations have no reason to exist anymore
  • When done right, skeuomorphism and realism will trigger strong associations with real-world counterparts. This is both a strength and a weakness: sometimes, the association can be so strong that it will stop you from improving on what's already been done.
  • Gone were the shadows, highlights, gradients, and textures of iOS apps. Instead, Metro offered flat squares of color with big typography.
  • Microsoft's new design philosophy certainly seemed to strike a chord within the tech sphere, with many praising Metro's strong focus on typography and colors.
  • And while flat design is often purely visual, it does resonate with designer's love of minimalist concepts, embodied by the famous Antoine de Saint-Exupery that “perfection is achieved not when there is nothing left to add, but when there is nothing left to take away”.
  • Two of the most talked-about games in recent month, Letterpress and Hundreds both feature flat designs. In fact, Letterpress creator Loren Brichter even revealed that the whole game only uses a single image!
  • When you have a high-definition display and screen-optimized fonts, you quickly realize you don't need much else to create beautiful work.
  • is pushing many designers towards prototyping in the browser directly, foregoing static mockups entirely.
  • Add all this together and you begin to see why many designers are moving away from texture-heavy realism towards the more flexible and lighter-weight flat style.
  • keep in mind that the needs of users should always come before our aesthetic pursuits
  • visual style is nothing more than a means to an end [15]. If the situation calls for realism, go nuts on textures and highlights. On the other hand, if a flat aesthetic achieves the design's goal better then it might be time to go on a gradient diet.
  • With the recent releases of their newer mobile apps, Google has started pushing a style that some describe as "almost flat" [18], or maybe "skeuominimalism" [19]. Unlike the drastic visual wastelands of Gmail or Google Reader, this new style uses elements like shadows and gradients in a tasteful, subtle way. This style offers the best of both world: realism's affordances and subtle hints combined with the purity and simplicity off flat design.
  • another way to look at it is that it's simply design done right: seeking efficiency and simplicity without sacrificing usability to the altar of minimalism.
  • I will pick a camp and put my chips in with flat design (specifically, Google's less-extreme variety).
  • Google is not so much pioneering a new style as showing us what digital design looks like when it's done right
  • catch up with what the web has to offer, we'll have to get our hands dirty and start coding [21]. And when you're both designing and coding a layout, you start to appreciate the value of keeping things lightweight.
  • Flat design also forces you to really care about typography and layout, two areas where web design has traditionally lagged behind its more established print cousin.
Pedro Gonçalves

How to Manufacture Desire: An Intro to the Desire Engine | Nir and Far - 0 views

  • Addictive technology creates “internal triggers” which cue users without the need for marketing, messaging or any other external stimuli.  It becomes a user’s own intrinsic desire. Creating internal triggers comes from mastering the “desire engine” and its four components: trigger, action, variable reward, and commitment.
  • A company that forms strong user habits enjoys several benefits to its bottom line. For one, this type of company creates “internal triggers” in users. That is to say, users come to the site without any external prompting. Instead of relying on expensive marketing or worrying about differentiation, habit-forming companies get users to “self trigger” by attaching their services to the users’ daily routines and emotions. A cemented habit is when users subconsciously think, “I’m bored,” and instantly Facebook comes to mind. They think, “I wonder what’s going on in the world?” and before rationale thought occurs, Twitter is the answer. The first-to-mind solution wins.
  • A multi-screen world, with ad-wary consumers and a lack of ROI metrics, has rendered Don Draper’s big budget brainwashing useless to all but the biggest brands. Instead, startups manufacture desire by guiding users through a series of experiences designed to create habits
  • ...8 more annotations...
  • The trigger is the actuator of a behavior—the spark plug in the engine. Triggers come in two types: external and internal. Habit-forming technologies start by alerting users with external triggers like an email, a link on a web site, or the app icon on a phone. By cycling continuously through successive desire engines, users begin to form internal triggers, which become attached to existing behaviors and emotions. Soon users are internally triggered every time they feel a certain way.  The internal trigger becomes part of their routine behavior and the habit is formed.
  • After the trigger comes the intended action. Here, companies leverage two pulleys of human behavior – motivation and ability. To increase the odds of a user taking the intended action, the behavior designer makes the action as easy as possible, while simultaneously boosting the user’s motivation. This phase of the desire engine draws upon the art and science of usability design to ensure that the user acts the way the designer intends.
  • What separates the desire engine from a plain vanilla feedback loop is the engine’s ability to create wanting in the user. Feedback loops are all around us, but predictable ones don’t create desire. The predictable response of your fridge light turning on when you open the door doesn’t drive you to keep opening it again and again. However, add some variability to the mix—say a different treat magically appears in your fridge every time you open it—and voila, desire is created. You’ll be opening that door like a lab rat in aSkinner box.
  • Variable schedules of reward are one of the most powerful tools that companies use to hook users. Research shows that levels of dopamine surge when the brain is expecting a reward. Introducing variability multiplies the effect, creating a frenzied hunting state, which suppresses the areas of the brain associated with judgment and reason while activating the parts associated with wanting and desire. Although classic examples include slot machines and lotteries, variable rewards are prevalent in habit-forming technologies as well.
  • The exciting juxtaposition of relevant and irrelevant, tantalizing and plain, beautiful and common sets her brain’s dopamine system aflutter with the promise of reward. Now she’s spending more time on the site, hunting for the next wonderful thing to find. Before she knows it, she’s spent 45 minutes scrolling in search of her next hit.
    • Pedro Gonçalves
       
      Maybe... but how can that time be leveraged in a focused (and profitable) way?
  • unlike a sales funnel, which has a set endpoint, the commitment phase isn’t about consumers opening up their wallets and moving on with their day. The commitment implies an action that improves the service for the next go-around.  Inviting friends, stating preferences, building virtual assets, and learning to use new features are all commitments that improve the service for the user. These commitments can be leveraged to make the trigger more engaging, the action easier, and the reward more exciting with every pass through the desire engine.
  • As Barbra enjoys endlessly scrolling the Pinterest cornucopia, she builds a desire to keep the things that delight her. By collecting items, she’ll be giving the site data about her preferences. Soon she will follow, pin, re-pin, and make other commitments, which serve to increase her ties to the site and prime her for future loops through the desire engine.
Pedro Gonçalves

How People Read on the Web: The Eyetracking Evidence | Nielsen Norman Group Report - 0 views

  • Gaze patterns users commonly exhibit and accommodating these behaviors F-pattern Layer Cake Pattern Bypassing Pattern Spotted Pattern Commitment Pattern Scanning vs. reading, why people do it, and how to drive user behavior with your design
  • Kick effect: People look at the last result on a SERP before leaving the page. (The tenth organic result, on a page of 10 results, is the lowest result looked at in 12% of cases versus 7% combined for the seventh, eighth, and ninth results. In 59% of cases people looked no farther than the third organic result.)
  • Other patterns such as skipping, backtracking, love at first sight, zigzag, re-acclimating, and bypassing
  • ...1 more annotation...
  • People look at lists with bullets more often than lists without bullets (70% vs. 55%, respectively).
Pedro Gonçalves

F-Shaped Pattern For Reading Web Content - 0 views

  • This dominant reading pattern looks somewhat like an F and has the following three components: Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F's top bar. Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F's lower bar. Finally, users scan the content's left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F's stem.
  • The F viewing pattern is a rough, general shape rather than a uniform, pixel-perfect behavior.
  • Users won't read your text thoroughly in a word-by-word manner. Exhaustive reading is rare, especially when prospective customers are conducting their initial research to compile a shortlist of vendors. Yes, some people will read more, but most won't. The first two paragraphs must state the most important information. There's some hope that users will actually read this material, though they'll probably read more of the first paragraph than the second. Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior. They'll read the third word on a line much less often than the first two words.
Pedro Gonçalves

The Ideal Length for All Online Content - 0 views

  • 100 characters is the engagement sweet spot for a tweet. 
  • a spike in retweets among those in the 71-100 character range—so-called “medium” length tweets. These medium tweets have enough characters for the original poster to say something of value and for the person retweeting to add commentary as well.
  • the ultra-short 40-character posts received 86 percent higher engagement than others.
  • ...12 more annotations...
  • 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.
Pedro Gonçalves

IBM VP's Three Essentials For Creating Innovative Products | Co. Design - 0 views

  • Often when innovation is the goal, there’s pressure to create an original product with an unusual name. But sometimes following a completely obvious path is an effective, albeit counterintuitive, way to achieve a design that is easy to use and ultimately popular. Take, for instance, Facebook’s design approach. On Facebook.com, which will likely soon have one billion global users, all of the company’s successful features -- “Photos,” the “Like” button -- have names that are less about clever and more about direct, descriptive utility. And doing the obvious is not just what Facebook does in the arena of naming and branding. The company has been working on bringing real-world human actions and interactions in an online social context. People share photos in real life. They tell their friends what they like. They share information. Facebook is simply creating software and interface design that replicate these aspects and then naming them in the clearest way possible, almost to the point of where they don’t seem named at all. The result is proven usability and immense popularity.
  • Understanding the unarticulated needs of a product user, anyone interacting with a service, or even a team that converges in a space to collaborate and solve problems, enables solutions that inspire, surprise, and surpass expectations.
1 - 9 of 9
Showing 20 items per page