Skip navigation
Help

web content

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

Today, a large collection of Web hosting and service companies announced that they will support Railgun, a compression protocol for dynamic Web content. The list includes the content delivery network and Web security provider CloudFlare, cloud providers Amazon Web Services and Rackspace, and thirty of the world’s biggest Web hosting companies.

Railgun is said to make it possible to double the performance of websites served up through Cloudflare’s global network of data centers. The technology was largely developed in the open-source Go programming language launched by Google; it could significantly change the economics of hosting high-volume websites on Amazon Web Services and other cloud platforms because of the bandwidth savings it provides. It has already cut the bandwidth used by 4Chan and Imgur by half. “We've seen a ~50% reduction in backend transfer for our HTML pages (transfer between our servers and CloudFlare's),” said 4Chan’s Chris Poole in an e-mail exchange with Ars. “And pages definitely load a fair bit snappier when Railgun is enabled, since the roundtrip time for CloudFlare to fetch the page is dramatically reduced. We serve over half a billion pages per month (and billions of API hits), so that all adds up fairly quickly.”

Rapid cache updates

Like most CDNs, CloudFlare uses caching of static content at its data centers to help overcome the speed of light. But prepositioning content on a forward server typically hasn’t helped performance much for dynamic webpages and Web traffic such as AJAX requests and mobile app API calls, which have relatively little in the way of what’s considered static content. That has created a problem for Internet services because of the rise in traffic for mobile devices and dynamic websites.

Read 13 remaining paragraphs | Comments

0
Your rating: None

The web as we know and build it has primarily been accessed from the desktop. That is about to change. The ITU predicts that in the next 18–24 months, mobile devices will overtake PCs as the most popular way to access the web. If these predictions come true, very soon the web—and its users—will be mostly mobile. Even designers who embrace this change can find it confusing. One problem is that we still consider the mobile web a separate thing. Stephanie Rieger of futurefriend.ly and the W3C presents principles to understand and design for a new normal, in which users are channel agnostic, devices are plentiful, standards are fleeting, mobile use doesn’t necessarily mean “hide the desktop version,” and every byte counts.

0
Your rating: None



Less than 24 hours after a Russian hacker pocketed $60,000 by exploiting a previously unknown critical vulnerability in Google Chrome, company developers released an update removing the security threat.

The quick turnaround underscores one of the key advantages of Google's open-source browser: the speed in which highly complex bugs are fixed and updates are pushed out to users. By contrast, Microsoft, which must run updates through a battery of rigorous quality-assurance tests, often takes months to fix bugs of similar complexity.

Read the rest of this article...

Read the comments on this post

0
Your rating: None

  

Life and nature are one big transition. The sun slowly rises to mark a new day and then slowly sets to mark the end of the day and the beginning of night. We are created in the womb and from small cells we grow, are born and gradually age until we die. Perhaps these natural transitions in life are what make artificial transitions feel… well, right. Sometimes, though, when something jumps from one state to another, it feels OK but doesn’t quite feel right.

Mission Transition

A transition that has been designed to be slow can feel awful. When designing an application, an interface or any type of structured content, we must ensure that users understand where they have come from as they arrive at the new page or state. The transition from one screen or group of content to another should feel natural and should be tested on devices of varying power and speed to get a wider view of how the transition feels. Too fast, and it may appear broken or jumpy; too slow, and it will be frustrating to use.

When discussing design, the word “transition” usually conjures up thoughts of overblown PowerPoint presentations or home-made movies made with cheap video-editing software. But there is more to transitions than meets the eye.

Transitions take us from one state to another all the time, many times a day in fact. Most of the time, these transitions feel completely invisible (as they should), and until they are taken away we don’t really know they are there. This article discusses transitions and how well-designed transitions can enhance the user’s experience by imparting a sense of control and easy navigation. We will also discuss how poor transitions can impair the user interface.

What Is A Transition?

By definition, a transition is “a change from one form or type to another, or the process by which this happens.” As mentioned, we make transitions all the time without really knowing it, and they certainly extend beyond our computer interfaces. A well-designed transition takes the user from point A to point B very quickly while conveying the path they have taken.

Transitions are common in interface design, as we know, but are also used in movies and product design. In product design, transitions are triggered by touch, movement or physical handling of the product; in interface design, however, transitions are triggered by navigating through the interface of the application or Web content. A transition should be designed to give the user a sense of their virtual position or location within the interface.

Examples Of Transitions

Cinematic

In a scene near the beginning of the 1971 movie Willy Wonka & the Chocolate Factory, winners of the golden ticket gather outside the gates of the mysterious factory to see the elusive Willy Wonka emerge.

Frames from Willy Wonka and the Chocolate Factory
Frames from Willy Wonka & the Chocolate Factory (1971).

As the scene unfolds, the viewer watches from behind the crowd, through the gates, towards the factory; the next camera angle takes us from behind the crowd to just inside the factory gates; and then we’re beside Wonka as he limps along the red carpet; and then we jump to watching him from behind. Although there is no visible “tweening” throughout these transitions in camera angle, we the audience still perfectly understand where we are.

We are watching the movie from our comfy chairs and yet we are made to feel as though we are physically present near the factory. This is an emotional transition.

Interface

If you have an iPad or iPhone, pick it up and go into the settings. Tap around between the menu options to see how the screen slides from right to left and left to right. Scroll to the bottom of any screen to see the soft bounce that indicates you have reached the end of the content. These simple quick transitions were carefully designed to give the user a sense of location within the operating system. Only when you slow these transitions down do you notice the detail that has gone into these in-between bits.


The iOS transition effect in slow motion, by Lim Chee Aun. (Watch this on Vimeo.)

Although we are not viewing a physical location, as in a movie, the OS still gives the user a sense of location by letting them know through the transition where they are navigating to and where they have come from. When you tap on a menu button, the screen shifts to the right to show the next step, and to the left to show the previous step.

Google Chrome on Windows shows us another simple transition, as seen in the video below. When opening a new tab, you see it open with a brief animation from the left. Closing the tab animates it back to the left before disappearing.

The Path app, which is available on both Android and iPhone, is packed full of interesting transitions between states. It’s worth downloading to see how it handles jumping between features.

When the app opens, you go from the splash screen to the actual content with a quick page turn. Clicking on the main menu will spring open the menu options, which spring back once you close the menu. This detail shows the user where those menu items come from, and while we may not consciously think about it, it’s an important detail in the overall user interface.

The Scorekeeper app has what appears to be a very simple interface. Solid colors and a lot of straight edges give the impression that the app is easy to use — and perhaps even that little thought has gone into the visual design. But look again. The transitions in this app are beautiful. When a player is awarded points in a game, the app updates their ranking in the list, using excellent transitions to move the player from their original position to their new one.

Product Design

I’m afraid I have to use Apple again for this example. If you’ve ever bought an iPhone, you would have noticed the design of the packaging. The compact box with matte laminate finish has been thought through to the last detail. The vacuum effect that you get when lifting the lid means that you’re not just breaking a seal and cracking open a box; rather, the lid slowly slides open (similar to the experience of the OS), taking a good second or two to reveal the shiny new device. This unboxing could be described as a physical transition.

Though not an obvious transition, the MacBook’s power light gently pulses when the device is sleeping. The transition is interesting because its fading in and out mimics the natural breathing rhythm of a sleeping person. This can be considered a transition because it’s a visual indication of the state of a device that is neither on nor off, but in between the two states.

Automotive

Modern cars are packed full of excellent transitions that guide the driver through various states. For example, the cabin light comes on when you unlock the door, and then it gradually fades as you buckle the seat belt and start the engine. The subtle lighting takes the user from pedestrian to driver in one smooth transition.

Car interior
(Image credit: eduard_orbitron)

Nature

As I sit in my chair typing this article, I can turn my head from left to right. By doing so, my field of vision shifts. If I want to look at something to my left, I turn my head — in the process catching everything that crosses my line of sight — until my eyes arrive at the object of attention. My eyes and body have made a transition, and it’s important that we be conscious of our actions as human beings to discover more about natural transitions. Watch the video below to see how the human body transitions from one state to another.

Why Are Transitions Important?

As designers, we do our best to make content easy to find, easy to read and aesthetically beautiful. But as processors become more powerful and technology advances, the devices and systems people use to access this content will hurtle forward, and we’ll discover new ways to deliver this content. We’ve quickly adopted touch methods, and now gestures are becoming important, too. With this in mind, we need to give users a sense of location in our applications, and transitions will play an important part in this.

Most Web content now is organized as “pages”: clicking or tapping a link simply show the page behind that link (provided the connection is fast enough). There is rarely any form of transition from one page to the next, and we have become used to this method of displaying Web content. But we can introduce useful and beautiful transitions into Web content — such as by using jQuery ScrollTo — but these transitions can be clunky for a number of reasons, including slow connections, excessive processor requirements and the transition speeds defined in JavaScript.

Best Practices For Transitions

There are plenty of ways to incorporate transitions into a design. Here are some general suggestions:

  • Avoid any pause at the point of clicking, touching or swiping.
    Hardware speed will always be a factor, but it’s safe to say that chips, processors and memory are getting faster by the second, so test your code and loading times to make sure there is no lag.
  • Test in the real world.
    There is no better way to test transitions that by running them in the real world — especially if you are designing for mobile, because people on the go devote less time and attention to navigation. Load a prototype of your design in a supermarket or on the train, and test it to see how it performs under pressure.
  • Don’t reinvent the wheel.
    In general, follow the conventions of the operating system you are designing for, because transition styles that diverge greatly from what people are used to will likely cause confusion and frustration. Of course, don’t hold back on designing new transitions; just keep the standards in mind.
  • Mind the future.
    These days, we interact with apps by clicking, touching, swiping and speaking. However, gestures will likely become a new way of controlling content, so start considering them now. If people will be able to use their bodies (rather than their fingers or mice) in various ways to manipulate the screen, we will have to give thought to timing, pace and physics — that is, the speed at which a body performs a gesture to move content will have to be matched to the speed at which the content moves. Imagine the frustration of throwing a tennis ball as hard as you can, only for it to travel a few feet on release. Our users will feel this same frustration if the timings of our transitions are poorly designed.

Conclusion

A good transition should be almost invisible to the user. It should help the user understand where they are navigating to and where they have come from, but it should also be smooth and quick. A stall or stutter impairs the overall user experience and tells the user that something is wrong. There is such a thing as UI motion sickness, where the user gets so used to the fluidity of moving between screens that when a screen freezes for a second or two, the user feels like they’ve come to a sudden stop. It is these sensations we should avoid.

For help and inspiration on using transitions in your designs right now, check out the following resources:

(al)(fi)

© Mark Cossey for Smashing Magazine, 2012.

0
Your rating: None

MrSeb writes "With the grandiose bluster that only an aging juggernaut can pull off, Microsoft has detailed the Internet Explorer Performance Lab and its extraordinary efforts to ensure IE9 is competitive and IE10 is the fastest browser in the world. Here are a few bullet points: 128 test computers, 20,000 tests per day, over 850 metrics analyzed, 480GB of runtime data per day, and a granularity of just 100 nanoseconds. The data is reported to 11 server-class (16-core, 16GB of RAM) computers, and the data is stored on a 24-core, 64GB SQL server. The 'mini internet' has content servers, DNS servers, and network emulators (to model various different latencies, throughputs, packet loss)."


Share on Google+

Read more of this story at Slashdot.

0
Your rating: None

An anonymous reader writes "Back in early 95 I registered a domain name and built a website for a hobby of mine. Over time the website (and domain) name have built a small but steady stream of traffic but my interest in the hobby is essentially gone and I've not been a visitor to my own site in well over two years. I'd like to sell the site/domain to a long time member who has expressed interest in taking over and trying to grow the site, however I use the domain for my own personal email including banking, health insurance, etc. How have fellow readers gone about parting ways from a domain that they've used for an email address?" More generally, what terms would you like to include (or have you included) in a domain transfer? Old horror stories could help prevent new horror stories.


Share on Google+

Read more of this story at Slashdot.

0
Your rating: None

  

Product pages for e-commerce websites are often rife with ambitions: recreate the brick-and-mortar shopping experience, provide users with every last drop of product information, build a brand persona, establish a seamless check-out process.

As the “strong link in any conversion,” product pages have so much potential. We can create user-centric descriptions and layouts that are downright appropriate in their effectiveness: as Erin Kissane says, “offering [users] precisely what they need, exactly when they need it, and in just the right form.”

Beyond that, a user-centered creation process for product pages can help brand the information as well as reduce the content clutter that so often bogs down retail websites.

User-centric product copy garners positive results because it anticipates the user’s immediate reaction. As Dr. Timo Saari and Dr. Marko Turpeinen, authors of “Towards Psychological Customization of Information for Individuals and Social Groups” suggest, individual differences in processing information implicates dramatic variances in type and/or intensity of psychological effects, such as positive emotion, persuasion, and depth of learning (2).

We can describe products in various ways. Highlighting certain aspects of a product will elicit different reactions from various users. Gearing product descriptions to a particular audience encourages those users to effectively process the information, heightens persuasion, and increases the potential to predict what the users want (but didn’t know they needed). The effort required of user-centric product descriptions demands that we understand how certain descriptors, contexts and inclusions of details affect the target user, and that we then put our discoveries into action.

This article offers a user-centric guide to producing product pages and provides examples of successful e-commerce websites that present user-centric approaches to product page descriptions and layouts.

Get To Know Your User

Approaching product page description and layout from a user-centric perspective demands that we have a rich understanding of the target user. As Saari and Turpeinen suggest, Web customization starts with some type of model, be it individual, group or community. With your user models in place, you can best assess what they need and how to write for them.

In her book Letting Go of the Words, Web usability expert Janice Redish suggests these strategies for getting to know your target user:

  • Scope the email responses that come through the website’s “Contact Us” form and other feedback links. Consider the profiles of the senders. You can discover commonalities in lifestyle, technological capability, education level and communication preference through these channels.
  • Talk to the customer service or marketing employees at your company. Don’t approach them with a broad demand to describe the typical client. Rather, ask questions about their interactions with clients. Who is calling in? Who is stopping by the office? What queries and complaints are common?
  • Offer short questionnaires to visitors to the website. Redish suggests asking people “a few questions about themselves, why they came to the site, and whether they were successful in finding what they came for.”
  • If possible, acquire a sense of the client simply by observing the people who walk through the front doors of the business. This is a great way to pick up on key phrases, jargon, emotional behavior and demographics.

Once you’re able to confidently brainstorm the major characteristics of your target user or group, then developing the models to guide the writing process comes next.

Keep in mind that gathering and compiling this information can take as little or as big an investment of time and money as you (or the client) can afford and still be effective. As Leonard Souza recently noted, even stopping in a nearby coffee shop to engage five to ten people in your target demographic can yield useful insight. With a bit of flexibility, you can find learning opportunities that are convenient and on the cheap.

The models created from your user research can be fashioned into personas, which Souza describes as “tools for creating empathy among everyone in the project.” Use personas to guide user-centric copywriting by establishing very specific user goals and preferences.

A persona is a fictional person amalgamated from the characteristics of your target user. You can get creative here with the persona’s name and image, but not too creative. The persona must be mindfully constructed according to the age, education, family status and other personal details culled from your research.

Now that you have a persona to please as you construct a product description and layout hierarchy, staying user-centric is that much easier. Take a look at the product description from Lululemon, a British Columbia-based yoga-wear retailer:

Product page for lululemon.com
Product description from Shop.lululemon.com

The product description assumes that the reader knows a specific set of jargon: How many non-yoga participants would know what downward-dog means? Or “pipes”, as the “Key Features” section refers to arms? This content drives right to the needs and preferences of a very specific user. She wants warmth (four of the “Key Features” note the thermal quality of the product), convenience (pre-shrunk fabric, easy layering), and motivation for an active lifestyle (she recognizes the yoga jargon and enjoys giving her “pipes some air time”).

A rich understanding of the user has made this product page effective and delightfully specific to both the user and the brand.

Master S.M.A.R.T. Content and Layout

Without specific, measurable, actionable, relevant and trackable user goals driving the copy on the product page, the information will sag. I draw here from Dickson Fong’s enlightening article “The S.M.A.R.T. User Experience Strategy“ to suggest that care should be taken to develop user goals that guide the writing process for product pages.

The S.M.A.R.T. formula will keep you on track as you plot out product details and decide what descriptive angle to use.

Fong provides an excellent user goal for a product page: “I want to learn more about this product’s design, features and specifications to determine whether it fits my budget, needs and preferences.”

This will help you create a checklist when assessing what to present first and what to offer as optional information when structuring the layout of the page (more about that in the “Create Information Hierarchies” section below). It provides direction when you’re writing content and helps you focus on the benefits to the user. And as Darlene Maciuba-Koppel suggests in The Web Writer’s Guide, “In copywriting, your end goal is to sell benefits, not products, in your copy.”

For users, benefits and accomplished goals go hand in hand. A product that doesn’t fit their budget, needs or preferences offers them little benefit. So, in order for S.M.A.R.T. goal-driven product pages to serve user-centric purposes, the text must follow suit. Fong suggests presenting relevant content details that are specific to the consumer of that product type.

Let’s take Fong’s S.M.A.R.T. user goal for product pages and assess the specifications at play on the following two pages from Dell:

Product page for Dell.com
Product page for Alienware on Dell.com

Featured on Alienware, Dell’s computer subsidiary for high-performance gaming, the description for this desktop computer has been tailored to the primary browsing goal of a very specific user. The needs and preferences of the user have already been predicted in the bullet-point outline, highlighting optimum graphics and top-notch liquid-cooling capabilities, thus harmonizing the checklist of features with a checklist of benefits for the user. A number of the product’s features could have been highlighted, but for optimal ease, the specifics most likely to help the user accomplish their goals are featured.

With the next Dell desktop computer, another goal of the target user is covered in the description:

Product page for Dell.com
Product page description for Inspiron 570 on Dell.com

With a noticeable absence of technical details and a heavy emphasis on product personalization, this description plays to a user with very different needs than the Alienware shopper’s. Even the tabs have been re-arranged to best meet the user’s goals. The Inspiron 570 page shows “Customer ratings” as the first tab, while the Alienware page offers “Design” first and then “Tech specs.”

These decisions are all geared to accomplishing very specific user goals: find the required information and assess the benefits.

Use Personal Pronouns

Consider again Dell’s description of its Inspiron 570:

Make It Yours

The Inspiron 570 desktop is everything you want and nothing you don’t. Available in vibrant colors, so you can complement your style or stand out from the crowd. Plus, you can build your desktop according to your needs with a choice of multiple AMD processors and NVIDIA ATI graphics cards as well as other customizable features. So whether you are surfing the Web, emailing friends and family, downloading music and photos or blogging about it all, the Inspiron 570 desktop can handle it.

Your wants, your style, your needs, your friends and your Internet past-times. Including the title, eight instances of “you” or “your” turn up in this 86-word segment!

Personal pronouns in product descriptions are perfectly appropriate and quite effective at engaging users, because, as Redish states, “People are much more likely to take in [messages] if you write with ‘you’ because they can see themselves in the text.”

With Dell’s content, the personal pronouns target a specific user (one who is savvy enough to download music and email and who is interested in customization and feeling unique), while also managing a broad gender appeal.

Outdoor equipment retailer REI employs personal pronouns in its online product descriptions, creating dynamic scenarios aimed at a specific user:

Saranac product description
Product description for REI.com

The description asserts that this canoe will help you navigate a waterway that “you’ve recently noticed,” anticipating a specific user reality (or dream).

The product showcase is devoted to the user’s needs and showing how the user will benefit from purchasing the canoe. Using “you” is the clearest and most direct way for this retailer to grab the user’s attention and to convince them, at any time of the year, that this canoe is the right buy.

Angie King backs this up in her article “Personal Pronouns: It’s Okay to Own Your Web Copy.” She suggests that using first- and second-person pronouns helps users connect with the content, and “reflect[s] the way real people write and speak,” fostering an immediate connection.

For a product description to speak directly to a specific user or group, the “you’s” should flow freely.

Use Information Hierarchies

Adopting a user-centric approach to the layout and copy of product pages helps you tackle the challenge articulated by Kean Richmond: “How do you cram so much information into a single Web page?”

In addition to technical specifications, shipping information, item details and preference options (and don’t forget that compelling product description), product pages must also list every describable service that the product performs for its user, including customer benefits (as Darlene Maciuba-Koppel explains, too).

By all means, provide the user with every last detail possible. Answer every conceivable question, or make the answer visible for discovery. Do so with information hierarchies that are based on a rich understanding of targeted users. This will keep each page tidy and drive users to complete your business goals.

In a structure in which, as Kean Richmond states, “all the important information is at the top and [the rest] flows naturally down the page,” details that might not be a top priority for the target user can be tucked into optional tabs or presented at the bottom of the page. The key is to gauge the structure of the page with the sensibilities of the targeted user in mind.

Look At User Context

Here’s where you become a mind-reader of sorts. Erin Kissane points to the approach of content strategist Daniel Eizan in understanding what specific users need to see on the page in order to be drawn into the information. Eizan looks at the user’s context to gauge their Web-browsing behaviors. Eizan asks, What are they doing? How are they feeling? What are they capable of?

Establishing user context aids in planning an information hierarchy, and it is demonstrated by small and large e-retailers. On the big-box side, we have Walmart:

Product page for Walmart.com

By making the price and product name (including the unit number per order) immediately visible, Walmart has anticipated a possible user context. A Walmart visitor searching for granola bars has perhaps purchased the product before. With the unit price made visible, perhaps the anticipated user is judging the product based on whether this box size will suffice.

Details such as “Item description” and “Specifications” are options that are convenient to the user who is making a large order of a familiar product.

The user’s context shapes the hierarchy: the user seeks a quick calculation of units per product versus price. The targeted user does not immediately need an ingredients list, allergy information or a description of the flavor. But if they do, they are available in a neat options-based format.

Walmart has built its reputation on “Everyday low prices,” and the brick-and-mortar philosophy has crossed over to its website. Walmart anticipates users who have some familiarity with its products and who have expectations of certain price points. These factors play into the information hierarchy across the website.

Now look at the product page of a different kind of retailer, nutrition bar manufacturer Larabar:

Product page for Larabar.com
Cashew Cookie product page from Larabar.com

Here is an online presentation of a retail product that is similar to Walmart’s Nature Valley granola bar (though some might argue otherwise).¬†However, the information hierarchy clearly speaks to a different user — a specific user, one who might be looking for gluten-free snack foods or a vegan protein solution. The Larabar user’s context is much less urgent than the Walmart user’s. The product page does not reveal pricing or unit number. Ingredients are visible here, with simple images that (when scrolled over) provide additional nutritional information.

The anticipated user has more time to peruse, to browse several varieties of product, and to read the delightful descriptions that help them imagine the tastes and textures of the bars.

This user might be very much like the targeted Walmart user but is likely visiting the Larabar website in a different context. This product page offers more immediate information on nutrition and taste, selling to a user who is perhaps hunting for a solution to a dietary restriction or for a healthy snack alternative.

However, the red-boxed “Buy Now” is positioned in a memorable, convenient spot on the page, leaving no guessing for the user, who, after reading a description of this healthy bar full of “rich and creamy flavor,” will likely click it to find out the purchasing options.

With these two pages for (arguably) similar products, we see two completely different ways to structure product details.

Both are effective — for their targeted users. A person seeking gluten-free snacks for a camping trip might be frustrated having to search through the hundreds of granola bar options on Walmart’s website. But they wouldn’t be going there in the first place; they would use a search engine and would find Larabar.

Information hierarchy solves the content-overload challenge that can overshadow the process of constructing a product page, and it is an opportunity to bolster user-centric copy and layout. As mentioned, the key is to gauge the user’s context.

Conclusion

While a user-centric consideration of product pages is not the only way to go, it does provide a focused approach that has appeared to be effective for some pretty successful e-commerce players. Consistency in product pages is key, especially when building a brand’s presence; a reliable guide can ease the writing process. The user-centric method does require some primary research, but this lays a sturdy foundation by which to gauge every bit of content on the page according to how it benefits the user.

As Maciuba-Koppel says, as a content writer or designer, your goal should not be to sell products, but to sell benefits.

Now watch the conversions multiply.

(al) (fi)

References

0
Your rating: None

Stories have been around as long as we have, helping us understand our world and ourselves. We learn and retain information best through stories, because they turn information into more than the sum of its parts. But what makes a story a story, and what does it mean for the digital world we’ve built? Elizabeth McGuane and Randall Snare weave an enchanting tale of attention, comprehension, inference, coherence, and shopping.

0
Your rating: None