Go to Source

In living organisms, the directional-transport capabilities of cell membranes ensure the concentration and confinement of DNA and the ingredients needed for its replication. But how was that accomplished at the dawn of life on Earth, when there were no such membranes to constrain indiscriminate diffusion and the attendant entropy growth? At the University of Munich, Dieter Braun’s biophysics group has addressed those questions with a suggestive demonstration of efficient replication and accumulation of DNA driven only by a quasistatic thermal gradient in a fluid-filled glass capillary stocked with nucleotides, a polymerizing enzyme, and a small initial template charge of the DNA to be replicated. The 0.1-mm-wide capillary is meant to mimic pores at hydrothermal vents in early seas. The thermal gradient is provided by an IR laser. The gradient drives DNA molecules away from hot spots and sustains a convective flow that subjects the DNA to thermal cycles that create new DNA and concentrate it at the sealed ends of the capillary. The convective cycles unzip the 143-base-pair double helices at 86 °C and then let them replicate at 60 °C. The DNA population doubles every minute or so, until exhaustion of the nucleotide stock eventually puts an end to that exponential growth. The figure shows the growing DNA concentration at one of the capillary ends over a span of 14 minutes. With continual nucleotide replenishment, such a system might replicate DNA at the rate of 1700 doublings per day. So aside from its possible relevance to paleobiology, the result is of biotechnological interest. (C. B. Mast, D. Braun, Phys. Rev. Lett., in press.)—Bertram Schwarzschild

Go to Source

A collaboration led by Pascal Martin of the Curie Institute in Paris yoked live and virtual cells to tackle the question, How does the ear amplify faint signals by factors of up to 1000? Hearing relies on converting mechanical vibrations to electrical impulses. The transduction takes place in the cochlea and is carried out by micron-scale hairs that sprout from specialized hair cells. To the tiny hairs, the watery liquid that surrounds them is viscous, just like honey would be to a tuning fork. An active feedback mechanism in the hair cells not only overcomes the viscosity, but also amplifies faint signals. But the feedback can’t provide all, or even most, of the ear’s prodigious amplification. Two years ago, theorists proposed that elastic coupling among groups of hair cells could make up the shortfall. Coupling, they argued, lowers the detection threshold by averaging out each cell’s noise fluctuations. Hair cells in frogs, humans, and other terrestrial vertebrates are indeed coupled to each other by various flexible structures. To prove that coupling boosts amplification, Martin’s team extracted a vibration-sensing organ from a bullfrog and attached a flexible whisker to one of the hair cells (see schematic). Through sophisticated computer control, the whisker was made to vibrate in a way that mimicked the net force on the live cell (green) exerted by two neighboring hair cells (gray). The expected enhancement to the amplification showed up. (J. Barral et al., Proc. Natl. Acad. Sci. USA, in press.)—Charles Day

Go to Source

In the presence of a suitable nucleating agent, a liquid in a metastable state below its thermodynamically defined melting point freezes. That’s what happens when atmospheric aerosol particles cause supercooled water droplets in clouds to form snowflakes. Researchers have suspected that the atomic surface structure of such seeding particles acts as a template, inducing local order in the disordered liquid and catalyzing its crystallization. Conversely, a solid with a different structure can inhibit crystallization, as has now been observed at the European Synchrotron Radiation Facility in Grenoble, France, by Tobias Schülli and his colleagues. The researchers coupled x-ray scattering data with molecular-dynamics simulations to study supercooled gold-silicon droplets on a silicon substrate, a system that is used to grow Si nanowires. Surprising results emerged when they heated the AuSi alloy above 676 K: As it cooled, the Si atoms leached onto the substrate and, as the figure shows, rearranged its surface atoms into pentagonal clusters. The alloy’s atoms near the interface mimicked the substrate’s surface structure (see inset), but the resulting local order did not promote crystallization in the droplets, which froze at 513 K, about 120 K below the freezing temperature for the AuSi alloy. Apparently, the pentagonal geometry inhibits freezing because it is not conducive to crystal packing. That finding suggests that substrates with such atomic structures offer a simpler method of maintaining and observing the supercooling process than such techniques as magnetically levitating or otherwise suspending the liquid droplet. (T. Schülli et al., Nature 464, 1174, 2010.)—Jermey N. A. Matthews

Go to Source

In this article, I’ll share some tips that I use in my work in Adobe Fireworks that could help improve the quality of your designs and workflow. Some of these tips are just quick explanations of features that you might not be aware of, while some are techniques and methods to improve the default visual results. Let’s begin!

Improve Fine Strokes

Fireworks’ stroke feature gives the user quite a lot of options. But one of the most important is missing: the ability to add a gradient to a stroke. Also, the effect from the Stroke tool isn’t always elegant — for example, when using an inset border with rounded corners.

Native stroke rendering in Fireworks. The rounded corners look a bit too thick.

Fireworks lets you specify the stroke’s position: outside, centered or inside. But the best results are when the stroke is outside.

Stroke can be set to different alignments in the Properties panel. Outside (example 3) looks better for fine strokes than centered or inside.

But in such cases, I recommend a composite path instead of a stroke to get better control of the result and to be able to apply a gradient to it.

Start by drawing two rectangles with rounded corners, one of them 2 pixels taller and wider than the other. Put the smaller rectangle above the larger (you can verify that it’s above in the Layers panel), and make its border radius smaller by several pixels, as shown here:

We’ll need two vector shapes to create our custom stroke.

The purpose of the smaller shape (the one with the yellow-orange background) is to cut out (or “punch”) the interior of the red shape, resulting in a 1-pixel-wide object that can be used in place of a stroke. To achieve this, select the two rectangles and hit the “Punch Paths” tool icon in the Path panel:

Punch Paths will help us get a better-looking stroke.

Alternatively, you could select the two rectangles and go to Modify → Combine Paths → Punch.

The stroke is now a composite path that you can easily edit and even apply a gradient fill to.

Bonus tip: Should you later decide that you need to resize this shape (without distorting its perfectly rounded corners), the “9-slice scaling tool” can come to your rescue:

Distortion-free scaling is easily achieved with the 9-slice scaling tool.

Draw Better Triangles

Triangles are everywhere in user interfaces: arrows in buttons, breadcrumbs, pop-over indicators and so on.

While Fireworks provides built-in arrow and polygon vector drawing features, I recommend going the customized route and drawing those vector shapes yourself.

The Arrow vector autoshape in Fireworks. The yellow control points allow for easy customization of width and height, thickness, type of head, roundness, arrow size and more.

The Smart Polygon vector autoshape in Fireworks. You can easily transform it into a triangle!

To illustrate our new workflow, let’s draw a simple arrow like the one in Kickoff’s download button:

Kickoff’s download button

Let’s start by drawing a nice triangle. Most of the time, you’ll want an odd number of pixels for the triangle’s base so that its middle falls on a half-pixel, resulting in a sharp arrow:

On the left, the triangle with an odd width. On the right, the triangle with an even width.

To create a triangle like the one on the left, we start by drawing a simple 7 × 7-pixel vector square using the Rectangle tool (found in the Tools panel, or simply press U). To delete its bottom-right point, use the Subselection tool (press A, or use the white arrow in the Tools panel), select the bottom-right node, then hit the Delete key; Fireworks will remind you that you are trying to change one point of a rectangle primitive and that it must be ungrouped for the change to occur; so, click “OK” to turn it into a vector, and delete the point. After deleting the corner, you’ll end up with this:

Our square with the bottom-right point deleted.

We now need to place the bottom-left point exactly at the center, which is located at 7 pixels ÷ 2 = 3.5 pixels from its current position. When you use your keyboard’s arrows, Fireworks moves the elements by full pixels only and aligns them perfectly to the pixel grid. This is convenient in most cases but not in this one. Luckily, Fireworks gives us a “Move Points” feature (in the Path panel) that lets us specify numeric values:

Moving horizontally by 3.5 pixels will center our bottom point.

If the triangle is now a bit too tall for our arrow, use the Subselection tool to select the center point again, and press the up arrow key twice to move the node up a couple of pixels.

We’re almost done! We just need to draw the 3 × 5-pixel rectangle part of our arrow and then use the “Union Paths” command (Modify → Combine Paths → Union, or press Control/Command + Alt/Option + U) to combine our two paths into one final single vector shape:

The separated shapes are on the left, and the unified shape is on the right.

Draw Better Ellipses

For some reason, Fireworks has difficulty drawing elegant circles (especially small ones), and the circles tend to have too straight an edge:

A default circle in Fireworks. Note that the top, right, bottom and left edges aren’t rounded enough.

We’ll use the “Numeric Transform” window (Control/Command + Shift + T, or in the menu Modify → Transform → Numeric Transform) to make the circle just a tiny bit smaller:

Decreasing the circle’s size by a bit will make it appear more rounded.

The original on the left, and our result after the transform on the right.

You will notice that the right circle is more elegant; that’s because we have fewer “full” pixels at the edges:

The original on the left, and our perfect circle (after the transform) on the right!

Fillet Points

One great feature of Fireworks that few people seem to know of is the Fillet Points path tool. Basically, it rounds any angle you select by a value that you specify. To use it, select any vector shape, and in the Path panel in the “Edit Points” section, choose “Fillet Points”:

Fillet Points rounds all of your angles.

Let’s use the built-in vector Star autoshape as an example. Note that you need to ungroup autoshapes and rectangle primitives before using Fillet Points; then you can either select the entire vector shape to round all corners or use the Subselection tool to select certain points to round.

The original shape on the left, and with Fillet Points applied on the right.

This can be a huge time-saver when you want to modify complex shapes with many filters and effects. Now you won’t have to redraw shapes over and over again just because the radius is a few pixels off.

Inset Paths

Another useful vector tool many designers are unaware of is the Inset/Expand Paths feature.

Inset/Expand Paths is also accessible via Modify → Alter Path → Inset Path.

As you’ve probably guessed by its name, this tool enables you to alter a vector path and make it either smaller (inset) or larger (expand) without losing its proportions.

Let’s say we want to make our Star autoshape from above 10 pixels smaller:

The Inset/Expand Paths prompt.

This dialog can be confusing if you do not know what all of the options and abbreviations mean. The third parameter (“Corners”) is the least obvious, because the meaning of “BE, RO, MI” is not defined. The letters are actually abbreviations of “Bevel,” “Round” and “Miter.” You can’t use those abbreviations in the text field, so you need to know the terms they represent. “Bevel” creates squared corners, “Round” creates rounded corners, and “Miter” creates pointed corners; the “Miter limit” specifies the maximum length of the pointed corners before Fireworks replaces them with clipped (or square) tips. We’ll use “Miter” in our example because we obviously want to keep our straight lines.

And voilà!

Gradient Dither

Adding a gradient between two similar colors (i.e. colors close in hue) in a big shape often produces an unsightly banding effect, as shown here:

Banding is visible in this gradient (especially on LCD screens of the common “twisted nematic” type, which display only 6 bits per pixel, not 8).

To prevent this, Fireworks introduced in CS5 a Gradient Dither option that can be used if the edges of the object are set to “Anti-alias” and if you use the “Radial” or “Linear” type of gradient fill.

“Gradient Dither” (found in the Properties panel) makes gradients look better.

The result is a smooth, unified linear gradient, similar to what you would get with CSS browser rendering:

With the “Dither” option applied, the gradient becomes much smoother.

Similarly good results can be achieved by dithering radial gradients.

Avoid Large Shadows

Fireworks isn’t very good at rendering large shadows (if you use the “Drop Shadow” live filter). If you’re curious about the subtleties involved, a detailed article on WebDesignShock compares shadow and glow effects in Fireworks, Photoshop and Illustrator.

Instead of a beautiful shadow that slowly fades to a transparent value, the edge of the shadow might look like it has been cut off before fading to full transparency. The issue is particularly noticeable on the Mac version of Fireworks:

A shadow effect created with the Drop Shadow live filter. Notice the edges (in Fireworks CS5 on a Mac)—yikes!

Here are the settings to use to get this drop-shadow effect on Windows and Mac:

The settings for the drop-shadow live effect on a Mac. Again, notice the “cut” edges of the shadow.

The settings for the drop-shadow live effect on Windows. The settings are the same, but the edges of the shadow are almost perfect.

So, instead of using a live filter, I usually duplicate the shape (the white rectangle in this example), set its edge to “Feather” and fill it with black.

Possible settings for the “shadow” vector shape behind the object.

Putting this shape behind the white rectangle produces a better-looking large shadow than the built-in method:

The original shadow on the left, and the “Feather method” on the right.

Practical Examples

A picture is worth a thousand words.

– Fred Barnard

Talking about gradients, fills, strokes, vector autoshapes, rounded rectangles, pixels and half-pixels is exciting, but a few real examples would be even better. Below are some illustrations, icons and UI designs that I made exclusively with Fireworks. The tips and tricks covered above made the results more elegant and refined.

Folder icon

UI for a date picker

“Free” icon

Icons for an FAQ

Envelope icon

Monochrome icon set

Kickoff teaser icon

Email account icons

Toolbar with navigation icons

As you can see, it’s all about pixel-precision, and Fireworks delivers great results!

Conclusion

Adobe Fireworks is a powerful tool, offering both vector- and bitmap-editing capabilities and even hiding some gems. Yes, it imposes different workflows, and some of its default effects are disappointing, but the advantages outweigh the little quirks here and there.

Having to change one’s work habits is always frustrating. Perhaps actions that you once did in a few minutes with your old design tool will now feel incredibly slow. Getting used to a different workflow takes time, and you might not see the benefit of using Fireworks immediately. The best thing you can do is commit to designing an actual project from start to finish using only Fireworks. Choose a small project or a personal side project for this purpose. Get your hands dirty for a few hours (or a few days). It’s the only way to be able to judge whether Fireworks really suits your needs. If you’re into UI design, I’ll bet it does!

If you’re interested in learning more about Fireworks, I highly recommend watching the great screencasts produced by Rogie King. They offer many more tips and tricks for refining designs and achieving more polished results than this article.

Also, the work of others can be a good source of inspiration and knowledge, so have a look at the Fw PNG Week series by Craig Erskine, and download and deconstruct his free source PNG files.

Happy experimenting with Fireworks!

Further Reading

• Video tutorials, Rogie King, Komodo Media
• Fw PNG Week (Fireworks PNG files for downloading and learning), Craig Erskine
• “I Didn’t Know Fireworks Could Do That!” (video presentation and tutorial), Dave Hogue, from Adobe’s MAX 2011 conference
• “Design Learning Guide for Fireworks: Using the Path Panel,” Tommi West, Adobe Developer Connection
• Rapid Fire (Fireworks tutorials), Jose Olarte

(mb, al)

Note: A big thank you to our fabulous Fireworks editor, Michel Bozgounov, for preparing this article.

© Benjamin De Cock for Smashing Magazine, 2012.

Go to Source

Go to Source

Carved into many Martian dunes are narrow, sinuous channels. Studies of their morphology and laboratory simulations suggest that the likely origin of the gullies is surface or near-surface water ice that melts and forms a flowing slurry of sandy debris. Dennis Reiss and colleagues at the University of Münster’s Institute for Planetology report new evidence for such transient liquid water. Their observations rely on data from the High Resolution Imaging Science Experiment, a camera on the Mars Reconnaissance Orbiter that provides nearly 10 times the resolution of the camera aboard the earlier Mars Global Surveyor. Armed with 23 sequential HiRISE images of the Russell crater dune field in Mars’s southern hemisphere over two successive Martian years (spanning November 2006–May 2009), the researchers uncovered signs of multiple flow events that, as seen in this image, in turn deepen and widen the channels. They also observed gullies lengthening over the course of the early Martian spring. Factoring in near-IR reflectance data, which tracked the melting of frozen carbon dioxide, and calculations of daily springtime temperature profiles at the surface, they discount dry flows and CO₂ flow mechanisms; they instead conclude that the gully changes are best explained by the seasonal melting of small amounts of water ice. (D. Reiss et al., Geophys. Res. Lett. 37, L06203, 2010, doi:10.1029/2009GL042192.)—Richard J. Fitzgerald

Go to Source

People like to test a number of metrics to see why people are not staying on a website. I think sometimes we spend so much time focusing on analytics that we throw common sense out the window. Don’t get me wrong—analytics are a powerful tool for improving a website. But often the problem is right in front of your face.

What if you simply told them that the reason people are leaving is because of the way they designed the website? How mind-blowing an idea is that? Doesn’t that change your entire perspective on the design? It could be the greatest thing in the world, but what if you really designed something to chase people away or looking at it another way: What if you have designed it so there is no incentive to stay?

Feedback… Om Nom Nom

I love getting feedback on the stuff that I write; yet my website has no comments section. Is it reasonable for me to wonder why people don’t leave feedback? I could tell people that there is a forum on the website where they can leave feedback, but that means they would have to register, get approved and then remember what they wanted to write. The website isn’t designed for instant feedback.

When I didn’t have any social media widgets at the end of a post, sharing of articles dropped over 80%. It wasn’t fair for me to assume that people would remember to share something they liked or that if they were on the fence they would make an effort to do so. If I really wanted people to retweet what I write, I would have to guide them to doing so by putting a retweet widget at the end of everything. Maybe I could even add some text asking them to retweet if they like what they read.

The point is that, if I expect a person to take an action, I would have to design the process for taking that action right into the website itself. I should never assume that a person who is interacting with my website will automatically take that action. Would a driver stop at an intersection that had no stop sign?

As designers we have to understand that the interface we create dictates the action of the people using it.

If you run a website and hope to get a lot of comments, then the best way to go about that is to make posting a comment as easy as possible. Of course, doing so could lead to people leaving all types of comments, both useful and not. A great example of designing how you want users to interact with a product is Pinterest.

The Pinterest Way

Most comment blocks on Pinterest are filled with simple comments. The content doesn’t lend itself to much discussion, but Pinterest obviously wants users to engage in other social interactions, and it has designed the product to make that easy to do. You can easily like, comment, repin and share any image that you come across, and all of this makes the content spread quickly throughout the network. This network effect is one of the main reasons for Pinterest’s explosive growth over the past couple of months.

Pinterest made an interesting decision in requiring all users to connect to the website through either Facebook or Twitter. This mean that real names (usually) are tied to users; because of this, the quality of stuff that people share is generally high. Allowing everyone to hide behind fake identities would have resulted in a much different experience.

But the system wasn’t designed that way; it was designed so that people who post quality content (or at least content that others in their circle like) would become popular. Thus, rather than turning into a website full of animated GIFs and Web comics, the website has become a valuable resource to its community—mainly because it was designed to function that way.

Maybe It’s Not That Simple

I realize that simply saying that a product was designed to do what it is meant to do makes fixing problems seem like the easiest thing in the world. Of course, as you dig deeper into how to improve a design, you will have more variables to keep in mind; but always be aware of the simple fact that people will do what the design of a website lets them do.

Why did Twitter evolve beyond being a place where people just leave status updates? Part of it has to do with the tiny microcopy that was above the status update field. Originally it said “What are you doing?” and this of course led to people talking about their breakfast. After some time they changed it to “What’s happening?” which helped guide the people using the service to post about what is happening around them.

Why was Digg being gamed for so long? Because the design encouraged it. Simple. Executives at Yahoo might sit around a table asking why users aren’t using its search engine? Does the design of the website look like it is meant for search or even encourage it? Do you think Google execs sit around a table asking why people don’t use its search engine when they hit its main page? The design of Pinterest encourages users to continually scroll down the page looking at more and more pins; it is designed to keep you on the website.

Do you want your users to do something specific? Then design your website so that they do it.

It could be the greatest thing in the world, but what if you really designed something to chase people away or looking at it another way: What if you have designed it so there is no incentive to stay?

© Paul Scrivens for Smashing Magazine, 2012.

Go to Source

After reporting my clumsy accident to friends and family, I instantly received comments like: “be more careful” or “better watch out next time”. In the end, I started to defend myself—if that crack would not have been there, I most likely would not have been face-planted.

When it comes to filling out forms on a mobile phone, I have observed many users running into a similar experience, merely less painful in its physical aspect. Many elements within a mobile form affect how smoothly users will get to a service or product hiding behind a form of any kind.

There are several factors that can be considered to be stumbling blocks throughout the journey of filling out a form. Specifically on a portable device, this journey is complicated by the fact that we have to consider contextual parameters such as time, location, or limited input options, in comparison to a firm desktop experience. In this post we will look at the most common stumbling blocks for mobile devices. Moreover, I will discuss design strategies to avoid stumbling blocks and to facilitate a safe and quick stroll through forms for mobile users.

Help Users Stay On The Right Path

Some might say that elegantly designed forms can be compared to the likes of an efficient traffic system—as soon as you enter the road, you also enter a world of permanent and dynamic guidance that helps navigate you safely to your final destination. For example, the crosswalk signals tell you when it is okay to cross the street, just as the street signs signal the names of the streets that you are on.

Street lights are also provided to help you navigate through difficult terrain in the dark. Keeping in mind your ultimate destination, you ultimately decide where to go, step by step. Road signs present your options and point out limitations. You can follow the traffic, take a short cut, or obey the navigation system on your phone.

In this situation, comprehensible and timely feedback is vital. The same applies to mobile form design. Signposts and immediate feedback encourage users to complete a form. Although inputting data on a mobile device can be very cumbersome, many people happily key in vast amounts of information when using services such as Twitter, Facebook, or text messaging on their mobile devices. Such services are good examples of how seemingly poor interfaces will not stop people from using a much wanted service, as long as the return of their effort is evident. People who understand and trust the outcome of their journey are less likely to hesitate about wandering even down a difficult path.

However evident the effort of typing on a mobile device might be, inputting data can take some time and can also become frustrating very quickly. Letting your users know almost instantly that they provide data in the wrong format, or that their username is already taken, is important. In the same way, a form can tell them where they are within the form, to make sure they don’t type the right data into the wrong field.

Furthermore, portable devices are more likely to suffer from connection errors and slow connections than desktop devices. Client-side validation techniques, such as HTML5/CSS based or optimized JavaScript approaches, have proven to be advantageous in this case, as they reduce the amount of data transfer to easily allow UI enhancements while coping with less stable connections. But keep in mind when using JavaScript for form validation, that some mobile browsers (such as the Blackberry OS browsers—except of the most recent one), are not JavaScript enabled per default. Therefore, users who are unable or uninformed about how to change their settings will benefit from implementations following the concept of progressive enhancement. The less time users spend on retyping data or waiting for data to be validated the quicker and happier they will get through a form.

Minimize Steps And Crossroads

One of the biggest take-aways from the Keystroke-level model in form design is that navigating along interactive elements requires both physical as well as mental activity. This can have a severe impact, especially on a mobile phone, based on the natural way of interacting with a portable device. Every input field within a form requires users to scroll through it, understand its meaning, focus on it, and then provide the correct information.

Due to the fact that people use their devices in a lot of different ways and these devices vary “greatly”, form elements that are spread over several input fields are prone to be rendered on a mobile device in a way unintended by the designers. As an example, during user testing sessions, I sometimes see users getting stuck on providing their phone numbers when having zoomed in on the form. The typical behavior is to enter their entire number into the first box provided for the area-code, completely missing the second input field. After submitting the form, they are puzzled about why there are two fields and the corresponding error message.

Separated telephone number fields (left) in comparison to a unified field (right) with optmized input type and a label within the field to remind users about the area code.

To allow users to get through a form quickly, there are a variety of compression techniques to reduce the amount of fields needed to provide certain data. Many of them require more post-processing on the back-end. If you can’t dissect numbers on the back-end, smart defaults or clever instructions work just as good. Some of them simply require a thought about the way of keying information into a field. For example, using a predefined drop down to provide the date of birth, rather than a loose input field or htlm5 optimized input fields for numbers, mail addresses, or other types of data, when appropriate. Dynamic input masks can help users to provide even quite complicated types of data with ease. Moreover, it will just take you a minimal effort of scripting.

At other times, forms might benefit from rather unconventional approaches such as text input fields for a quick and easy country selection. Furthermore, there are a variety of libaries such as jQuery mobile to optimize input fields and to ease validation, even for complex data.

Overall, our goal is to allow people to navigate through the form, achieving the quickest possible success with the least necessary effort. At all times we want them to feel that they are doing the right thing, and that their time is well spent. Brevity is crucial. Some people get stressed when spending too much time on trying to find hidden checkboxes, switching between keyboard layouts, or attempting to understand skewed marketing questions. Some people get physically tired answering redundant questions, filling unnecessary blanks, or scrolling up and down to find a required field that they just missed. To reduce cognitive load as well as physical effort it is important to remove optional steps from a user’s radar of attention, simplify the way of inputting information wherever possible, and to create a comprehensible flow throughout the form. If the process is too complicated (or the effort too high) a dropout is quite likely.

In the end, fine-tuned and streamlined forms will save your company phone calls from frustrated users and lead to more and more happy ones as it requires them to spend less time navigating through input fields and figuring out their meanings.

Uitilize Signposts And Mark Paths Clearly

Another great design concept to exploit for form designs are the Gestalt laws of grouping to help support the orientation of users. Applying grouping principles to a multiple questions form allows us to structure content, to create a visual flow, and to group related form elements.

In many projects I have seen design teams arguing about whether to break down a rather long form for mobile devices into several short pages or rather for one long page. Either way, there are endless possibilities for both design approaches to elegantly confirm users about their progress. This helps them recover from their errors, and to make them feel confident that the data being saved will not have to be reentered (in case they loose the connection, or accidentily close the application).

Both design approaches have their individual benefits, the only spanning factor here is the breakdown of the long form into meaningful and manageable chunks. For single-page designs, this means that it should even be possible to visually distinguish the single steps from one another. Especially with portable devices, the longer a form page is, the faster users will be able to scroll through, in case they have to jump between fields. Poor visual guidance in this way will result in users missing to fill out fields, losing sight of fields, and/or getting frustrated by searching for them after being presented error messages. White space and general grouping techniques are therefore vital to create visual guidance throughout a form.

Using color coding to highlight the active input field from other input fields (left) or to visually differentiate sections from one another in a long form (right).

Distinct grouping in interface design is a basic exercise because of its power for reducing processing speed and cognitive load. A while back, Matteo Penzo investigated the effect of different visual grouping techniques for a typical sign-up process. In his eye-tracking study, he analyzed the importance of label alignment for input fields and highlighted the superiority of top-aligned labels in many cases. Easy to distinguish input fields with top-aligned labels in close distance to one another allowed users to look at the label and the field in one go.

Other techniques required higher processing efforts, thus increasing the coginitve load and the time it takes to process the entire form. Less effort is good, and despite the granular example, we have to keep in mind that all these factors add up through input elements, the different sections, and the form as a whole within the website. The more complex the form, the bigger the effects of distinct grouping. Reducing the need for visual fixations allows a reduction in cognitive load, helping users to focus on their task and allowing your form to function almost like a navigation system—helping users to find their way to the goal.

By considering the effects of distinct groupings, we support our human capability to naturally perceive objects as organized patterns and take away the need for users to create an understanding about the form by reading the questions in depth, relating to the elements mentally. Naturally we want users to read through the questions. But similar to a vis-à-vis conversation, we can use facial expressions in combination with the words we say to underline our message and to get it across more easily.

Allow For Platform-Dependent Shortcuts

One of the major reasons that users get stuck on forms when filling them out on portable devices is limited visibility. Users, who are entering key information into a form’s field, usually have more than half of their screens covered with the keyboard, input suggestions, and other status information. To navigate between fields, and for general orientation, I see in many testing sessions where participants frequently try to disengage the onscreen keyboard, when looking for certain fields, or scrolling through the form to increase visibility.

However, many people will use the “return” button on the bottom right of the keyboard to disengage it after keying information into the field, or even to confirm their input for the single field. Although this approach helps many users to get rid of the keyboard (and to see the form on their whole screen), pressing the button also means, in many cases, that the form will be sent to the server straight away. Therefore, many users will be confused by a loading screen and the need to wait for a server response after pressing the “return” button.

The return button on Android (left) and iOS (right) is very salient within Web forms, and pressed by many users without the intent to send off the form.

Using the keyboard to send off a form is very handy, when using a single field form such as a search box. However, for multiple question forms on portable devices, it is important to check the form on the client side before sending it off, when users press the “return” button (by accident) to avoid confusing loading times. To ensure that your form is not submitted by accident, there are plenty of client-side validation tools; jQuery plugins, for example, provide everything we need.

Provide Contextual And Personalized Guidance

In short, be a tour guide. After all, designing a good form is like planning a hike with friends or family. Not only do we need to find out who will be on the trek, we need to plan for breaks, points of interest, and unguided side-treks in order to make sure everybody gets the most of their hike. However, as most of you will know, most hikes are not free of problems, and difficulties are inevitable; people can wander off, some might need help or more time to get through challenging passages, weather conditions are bound to change, and general mistakes happen. It is seldom that all of these inevitable difficulties will evolve into a real problem as long as we are prepared. Similarly to a hike, difficult situations are all about awarness, clear communication, and guidance. All it takes is a good approach to inform users what their problem is and what they can do to fix it.

There are plenty of techniques to help strayed users find their way back to the right path. Putting messages under input fields, for example, has proven to be quite a solid approach for telling users what has gone wrong. In combination with noticeable color coding (i.e. red for errors, or green for confirmation) you can be sure to get the necessary attention.

Two designs showing prominent error messages for misspelling hints (left) and general processing errors (right).

Another important aspect that is often neglected when it comes to messages within forms is the choice of words. On the one hand this refers to what we say, and on the other, it is about how we say it. Your error messages or instructions will most likely be read by a nontechnical human being. Let’s create messages as we would be talking directly to your user: avoid jargon, be tactful and brief. There are many useful recommendations on how to design effective error messages. Most importantly, we want our users to understand what happened and why it happened in a clear fashion.

On top of that, most users will not only appreciate clear notification, but also advice on how to fix the problem right away. Dyson, for example, managed to reduce support calls and increase the confidence in their products with a simple change in the way they display error messages. Rather then showing the problem (e.g. “Low Voltage Error”), they switched to displaying possible solutions (e.g. “Check Power Cable”). In this way, they are not only making their users aware of problems, they are also giving them guidance on how to fix them. On your form, many different users will possibly make similar mistakes. If possible, it is a good idea to analyze inputs to include a solution for the problem that helps users to recover them quickly. Ideally it even relates to the data they wrongly provided.

Wherever error messages pop up troughout the day, try to record them. At the end of the day, those records can tell us where stumbling blocks are still hiding, and what we need to improve to smooth out the path.

Conclusion

Mistakes happen—c’est la vie. Ideally though, we should aim to avoid most of the tripping hazards that delay so many users from filling out forms on a portable device. Similar to an uneventful stroll on the pavement, the smoother the path is to the destination, the more likely users will complete the journey. Easy orientation, no detours, clarity, and a little bit of guidance are a traveler’s best friends. And experience shows that the further users get before stumbling upon an error, the more likely they will put extra effort into completing the task.

Ultimately, other stumbling blocks may exist apart from the ones I discussed. So try to connect your analytics to the activity on the pages to find out where people drop out of the process. This will show where stumbling blocks may exist and help to remove one block after the other to ensure the user the smoothest journey.

(jvb)

© Robert Brauer for Smashing Magazine, 2012.

Go to Source

Go to Source