Skip navigation
Help

How-To

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

laptopsonacid

CDM and yours truly team up with Berlin arts collective Mindpirates next week for a learning event we hope will be a little different than most. The idea behind the gathering is to combine learning in some new ways. The evenings begin with more traditional instruction, as I cover, step-by-step, how you’d assemble beat machines, instruments, effects, and video mixers using free software (Pure Data and Processing).

But, we’ll go a little further, opening up sessions to hacking and jamming, finally using the event space at Mindpirates to try out ideas on the PA and projectors. By the last night, we’ll all get to play together for the public before opening things up to a party at night. I know when I’ve personally gotten to do this, I’ve gotten more out of a learning experience. Getting to do it with the aim of creating useful instruments and beats and visuals here, then, I think makes perfect sense.

Working with free software in this case means that anyone can participate, without the need for special software or even the latest computers. (What we’re doing will work on Raspberry Pi, for instance, or old netbooks, perfect for turning small and inexpensive hardware into a drum machine.) No previous experience is required: everyone will get to brush up on the basics, with beginning users getting the essentials and more advanced users able to try out other possibilities in the hack sessions.

If you’re in easyJet distance of Berlin, of course, we’d love to see you and jam with you. In trying to keep this affordable for Berliners, we’ve made this 40 € total for three nights including a meal each evening and a guest list spot on the Saturday night party.

But I hope this is the sort of format we can try out elsewhere, too. If you have ideas of what you’d like to see in this kind of instruction – in-person events being ideal, but also perhaps in online tutorials – let us know.

Create Digital Music + Mindpirates present: Laptops on Acid
Facebook event

Pre-registration required; spots limited – Eventbrite
Register while spots are still available!

(fellow European residents, I’m as annoyed at the absence of bank transfer/EC payment at Eventbrite as you are – we’re working on an alternative, so you should email elisabeth (at) mindpirates [dot] org to register if you don’t want to use that credit card system!)

0
Your rating: None

Thavius Beck live in Los Angeles playing the legendary Low End Theory party, in 2009.

Whadayaknow, Ableton users?

Whether you’re an existing user or considering it for the first time, this month online school Dubspot is giving away 30 video lessons on using the software, free, through the end of June only. So, I turned to my friend Thavius Beck (Plug Research Records), LA-based producer and rapper, and master instructor, to make something exclusively for CDM to add a little more free knowledge. If you are playing with Ableton for the first time, you can unlock the 30-day free trial and give it a shot.

I’m just glad to read Thavius’ tips. You’ll feel a little more like an expert afterward, I guarantee – or, alternatively, count how many of these you did already know. (Yes, some of us have been using Live since its first release.)

30 Tips for Ableton Live

Thavius Beck

1. Holding SHIFT while adjusting a Transpose parameter with your UP/DOWN arrow keys will Transpose by an octave instead of 1 semitone

2. “Z” will transpose your computer keyboard DOWN one octave. “X” will transpose it UP one octave

3. “C” decreases the velocity of midi notes entered with the computer keyboard or mouse by 20. “V” increases the velocity by 20

4. You can disable the grid in the Arrangement View and in the Sample Editor by Right-Clicking in the grid area, and selecting OFF under Fixed Grid in the contextual menu

5. Individual drum cells in Impulse can be routed to other audio tracks to be mixed separately or given individual effects. Enable the I-O (inputs and outputs) button on the Session View, and in the Audio From tab select your Impulse instrument. In the tab below that, you’ll see all the sounds in your Impulse. Choose one, then either arm the track or set the Monitor status to IN.

6. The Ableton Device Spectrum not only shows you the frequencies being generated by your music in real time, it also will show you the specific note that a frequency corresponds to. Hold your mouse anywhere over the graphical display in Spectrum and a box in the lower right corner will show you the exact frequency, decibel level, and corresponding note based on where your mouse is.

7. If you have Live Suite, when using Slice to New Midi track try slicing to a single Sampler instead of the Built-In preset. When your slices are in the Sampler, you can change the pitch, attack, decay, voices, etc. of all the slices at once without using Macro knobs.

8. Right-clicking on the crossfader allows you to choose different crossfader curves.

9. If your audio interface has multiple outputs that are enabled (go to Live’s Audio Preferences and select Output Config), you can enable a separate CUE output so you can monitor on your headphones without affecting what is coming out of the Master. Make sure your I-O button is enabled, and on the master channel you will see Cue Out and Master Out. If the Cue Out is different from the Master out, your tracks solo buttons will become cue buttons, allowing you to cue up tracks in the headphones while the party people continue to party…

10. AutoFilter and Gate also have sidechain sections that allow an incoming signal to trigger/exaggerate/alter the effect.

11. Right-clicking on the metronome allows you to set a count-in. Helpful if you need to record something right at the beginning of bar 1.

12. If you need to record multiple tracks at once, go to Live’s Preferences, select the Record/Warp/Launch tab, and under the Record section disable the Arm button next to where it says Exclusive (you can also do the same thing to the Solo button if you want to solo multiple tracks). Ed.: I feel a little differently than Thavius on this one. I like that when you arm one track, you de-arm another. Generally, if I do want to arm multiple tracks, I’d rather hold down the “shift” key when selecting arm – the same for Solo. So consider that an alternative tip 12! -PK)

13. If you haven’t already, stay in that same page of Live’s preferences and turn off Auto-Warp Long Samples. This will prevent Live from putting a million incorrect warp markers on your audio when drag a longer audio file into it and enable Warp.

14. Complex warp mode may sound better than Beats for warping full songs and playing them below their original tempo, but be careful… Complex and Complex Pro are the only two warping algorithms that alter the quality of your audio even when it’s playing at the original tempo. They can also introduce some odd phasing issues when playing song with deep sub bass… Complex Pro is good for acapellas, but I suggest using either mode with a bit of caution before playing a gig…

15. If you change the Global Clip Quantization to NONE, you can scrub through your audio in the Sample Editor by hovering your mouse right below the loop bracket (so it becomes a speaker icon), click and hold, then drag the speaker icon through your audio clip.

16. You can create your own Slice to Midi preset by opening up a blank Drum Rack or Sampler, adjusting the parameters to your liking (you could even add effects to the blank Drum Rack if you like), save your new preset by hitting the disk icon in the upper right corner of the effect (or rack), and then dragging that preset into the following folder in your Live Library: Library/Defaults/Slicing. Next time you Slice to a New Midi track, try out your new preset…

17. Another way to manually “slice” a sample is to drop an Audio Clip into several different empty cells in the Drum Rack, and change the start point on each on so they each play a different part of the sample. The same thing can be done with the Sampler.

18. You can remove the Stop button from a blank clip slot by Right-clicking inside of it and selecting “Remove Stop Button” (or use the shortcut Command/Ctrl-E)

19. You can set the launch tempo of a Scene by Right-clicking inside the scene (next to the scene number) and selecting Edit Launch Tempo, then type in the tempo. You can also just rename the scene and type in the tempo followed by BPM.

20. You can also set the launch time signature of a Scene by Right-clicking inside the scene and selecting Edit Launch Time Signature, and then type in the time signature. You can also just rename the scene and type in the time signature (e.g. 7/8).

21. If you press DELETE while any parameter is selected, it will be returned to its default setting.

22. Double-clicking on any of Live’s Browser shortcut buttons will collapse any unfolded folders.

23. You can write your own notes in the Info View of clips by Right-clicking on any audio or midi clip and selecting Edit Info Text

24. You can drag any Groove Pool template into a midi clip slot to see the velocity and timing of the groove.

25. You can change the Launch Quantization of individual clips by enabling the Show Launch Button (the L button under the Clip View) and changing the Quantization from Global to something else.

26. If you want to MIDI or KEY map buttons to let you select or scroll through your Scenes, select with MIDI or KEY map, and you’ll notice buttons that appear above the Master fader and below the Stop Clips button. The first button will play the selected scene, the next two are arrows that can be mapped to buttons to select the next or previous scene, and the final box can be mapped to a rotary knob to scroll through your scenes.

27. You can automate tempo changes in the Arrangement View on the Master channel. On the Master channel in the Arrangement View, select Mixer in the Device chooser box (top chooser box), and then in the Automation control chooser (bottom choose box) you’ll be able to select Song Tempo.

28. If you select a parameter, it will be selected in the Automation chooser box on that track automatically. This is very helpful if you want to automate a parameter but aren’t sure exactly where to find it in the automation chooser box.

29. You can drag and drop a quicktime movie into the arrangement view so you can write music to picture.

30. If you set Locate Points in the arrangement view, you can MIDI or KEY map buttons to the Previous and Next Locator buttons (the left and right arrows above the first track in the arrangement view).

BONUS – Enable Info View to find out about any parameter that your mouse is hovering over. Very helpful if you don’t know all of the areas I refer to in the previous tips. Enjoy!

For more of this kind of knowledge, check out Dubspot’s full 30-lesson course with Thavius free – while you can.

http://www.dubspot.com/ableton3030/

“Did You Know?” Video Series

Very much along the lines of these 30 tips, earlier this year, Thavius also did a series of videos for Dubspot entitled “Did you know?” They focus on topics you perhaps should know about Ableton Live, but that some users – beginning and advanced alike – might have missed. Here’s that complete series.

Previously

Once More, From the Top: Learn Ableton Live in Videos, from the Very Beginning

http://www.dubspot.com/ableton3030/

Tweet

0
Your rating: None

Too much comment here will spoil the fun, so enjoy – particularly with Dubstep how-to videos becoming, bizarrely, some of the most viral things online. (Hmmm… it’s almost like kids are interested in producing a wildly-popular music genre. Strange. But I hope you’ll stick around for CDM’s new Csound Drones That Hurt Your Ears series, comi– hey, where did everyone go?)

I at least can see lovers and haters of the genre now known as “dubstep” (not to be confused with the previous genre known as dubstep) finding this amusing. But should I turn off comments, just in case?

Thanks to Berliner and serious sonic scientist Martin Backes for the find. Yes, Martin, I am stalking your Facebook page. In the blogger “journalism” field, we call that “research.”

Tweet

0
Your rating: None

Pure Data (Pd) is already a free, convenient tool for making synths, effects, and sequencers and other musical generators. But imagine stripping away all the things that tie it to a platform – UI, specific hardware support – so it will run just about anywhere, on anything, in any context.

That’s what libpd, a free, embeddable, open source (BSD) tool for making interactive music, does. Coders can take their favorite language and their favorite platform, and just plug in the power of Pd. They don’t even have to know almost anything about Pd – they can let an intrepid Pd patcher create the interactive sound effects and dynamic music for their game and just drop a patch into their assets.

One of the most powerful applications for this is the ability to add interactive music and sound to mobile apps, on iOS and Android, without writing and testing a bunch of custom DSP code. And that has enabled the use of libpd in apps as successful as Inception: The App. With music by Hans Zimmer and a custom “dream” experience created by RjDj, that app racked up millions of downloads in under a couple of months, and then, far from sitting idle on the app launch screen, went on to clock in over a century of user “dreamtime.”

Okay, so, you’re sold. You want to see what this thing can do, and maybe try it out, and you’re wondering where to start. So, here’s some good news: there’s a new site and a new book to get you going.

The site: libpd.cc

libpd has a new home on the Web, both in the form of a new GitHub repository to organize all the code and docs and samples, and a site that brings together a showcase of what the apps does and points you to where to learn more. The single destination is now hosted here by CDM:

http://libpd.cc

I built that site, so please, if there’s anything you’d like to see or you’ve got your own work created with libpd, let me know about it.

Even just having selected a few key highlights of apps built with libpd, it’s impressive what people are already doing with this tool:

libpd Showcase

The book, and a chat with its author

A new book published by O’Reilly focuses on building mobile apps using libpd, for iOS and Android. (iPhone, iPod touch, Android phones and tablets, and yes, even that “new iPad” introduced yesterday are therefore all fair game.)

You can read a section of the book right here on CDM, for a taste of what’s in store:
How to Make a Music App for iOS, Free, with libpd: Exclusive Book Excerpt

It’s an exceptional, comprehensive look at development using libpd, covering iOS and Android, but also a complete look at the libpd API and how to use it. For Pd patchers just getting started with iOS and Android, it includes all of the basics of how to use libpd in your mobile development environment. For mobile developers new to Pd and patching, it makes clear how you’d communicate with Pd, so you can either dive into Pd yourself or properly interface with patches made by musicians, composers, and sound designers with whom you may be collaborating. It’s an ideal title for anyone interested in taking a game and giving it a more dynamic soundtrack – in sound effects, music or both – or for people building mobile musical instruments and effects, sonic toys, interactive albums, or, really, anything at all that involves sound or music. Since it walks you through the entire development experience, you can sit down with it in the course of a few evenings, and get a complete picture of how to integrate Pd with your development workflow.

Dr. Peter Brinkmann, the principal developer of libpd, is the author of the title. I asked Peter to explain a little bit about the book, who it’s for (hint: you!), and what’s in it (hint: stuff you want to read!) …

CDM: How did this book come about? And the book process really helped drive improvements to libpd, too?

Peter B.: Shawn Wallace, an editor at O’Reilly, contacted me last summer and asked whether I would be interested in writing a short book on libpd. I was interested, and so I talked to my [Google] manager (“No conflict — we all have time-consuming hobbies!”) as well as a couple of colleagues who had written books for O’Reilly. They made a token attempt to dissuade me, but it was clear that they had enjoyed writing their books, and they seemed quite proud of the result, too.

Once I had made up my mind to write a book, the next question was whether to self-publish or go with O’Reilly. Self-publishing is a viable option these days, but then I decided that I really wanted an animal on the cover. Besides, I had never written a book before, and having the support of O’Reilly’s editorial staff made the prospect seem less daunting.

The first draft was done in mid-November, but at that time it was basically science fiction because it presented libpd the way I wanted it to be, not the way it was at the time.

So, after the bulk of the writing was done, libpd needed to be revised so that it would actually be in agreement with the book. In particular, Rich Eakin and I rewrote the iOS components for better performance and usability. That delayed the book by a month or so, which turned out to be a great stroke of luck because that was when I discovered that Xcode 4.2 had changed the entire development model by introducing automatic reference counting, instantly rendering existing
texts obsolete. That included my chapter on iOS, and so I had to sit down and rewrite it.

After that, the rest happened rather quickly — getting reviews, revising the draft, going through the production process. O’Reilly’s toolchain is remarkably efficient, using asciidoc and docbook in a Subversion repository. The editorial staff is great, too. I’m amazed to see how quickly it all came together.

How did you approach writing the book?

For the first draft, I just imagined that I was teaching a class on libpd. When you’re lecturing in front of an audience, you don’t have time to polish every sentence; you just have to talk and maintain some sense of momentum. That approach helps a lot when facing a blank page. After that, it’s many, many rounds of revisions to eliminate weak or redundant sentences.

For the sample code, I picked one project that uses all major components of libpd. That provided a natural progression from idea to completion, while touching on all important points in their proper context. I’m basically providing running commentary on my thought process when making an app, including common mistakes and pitfalls. Like this, readers will know how to recognize and work around most problems.

Another trick is to write more than necessary. The first draft contained a lot of gratuitous editorializing. Those parts were never meant to make it into the finished text, but they were fun to write and they kept me going when I wasn’t quite sure what to write next.

Who it’s for?

The book explains how to patch for libpd, and how to write apps with libpd, with special emphasis on the interface between Pd patches and application code. It’s for mobile developers who want to add real-time audio synthesis to their projects, as well as sound designers who want to deploy their work on mobile devices. It’s light on prerequisites; if you know how to write a basic app for Android or iOS, you’re ready to read the book.

Ed.: I’d add to that, given that there are such great tutorials on app development for Android and iOS – even many of them free, including some very worthwhile documentation from Google and Apple — if you’ve messed with Pd, you should give the book a try. And if you haven’t messed with Pd, this could be a great excuse. This book won’t teach you Pd, but it’ll make very clear how to glue everything together. -PK

Why does a book like this matter? What do you hope will come out of it?

I hope that the book will help popularize real-time procedural audio, in games and other apps. I’m thrilled to see all the projects that use libpd, and I hope that the book will help people create even more awesomeness of this kind. One thing I only fully realized when writing the book is that libpd lets developers use DSP code like a media file: An audio developer creates a Pd patch, and the app developer just drops it into the resources of the app and loads and
triggers it as needed. I guess this was implicit in a blog post I wrote on workflow and prototyping a year ago, but I think the DSP-as-media angle is even more powerful. I hope that the book will bring this out.

The book project has already improved libpd. Whenever I faced the choice between fixing an awkward bit of code or explaining the awkwardness in the book, I chose to fix the code. That took care of all the little things that were sort of bothering me but didn’t seem significant enough to spend time on. It also gave us a deadline for a number of related things that we wanted to do, such as migrating to GitHub and launching the new website, libpd.cc. Ed.: Cough. Yes, glad that gave me that deadline – and thanks to Peter B. for the extra push! -PK

Congrats to Peter on his first animal-on-a-cover! It’s really a great book: you read it, and feel like making more new things, inventing new creations that produce sound and music. And that’s a very good thing.

Tweet

0
Your rating: None

More and more applications these days are migrating to the Web. Without platform constraints or installation requirements, the software-as-a-service model looks very attractive. Web application interface design is, at its core, Web design; however, its focus is mainly on function. To compete with desktop applications, Web apps must offer simple, intuitive and responsive user interfaces that let their users get things done with less effort and time.

In the past we didn’t cover web applications the way we should and now it’s time to take a closer look at some useful techniques and design solutions that make web-applications more user-friendly and more beautiful. This article presents the first part of our extensive research on design patterns and useful design solutions in modern web applications. Below you’ll find a collection of 10 useful interface design techniques and best practices used in many successful web-applications.

Please feel free to suggest further ideas, approaches and coding solutions in the comments to this post. The second part of our research will be published soon: stay tuned via RSS Subscribe to our RSS-feed and Twitter Follow us on Twitter.

You may want to take a look at the following related articles:

1. Interface elements on demand

Simplicity is important in user interface design. The more controls you display on the screen at any time, the more time your users will have to spend figuring out how to use your interface. When there is less choice, the available functions become more apparent and are easier to scan. Simplifying an interface isn’t easy though, especially if you don’t want to limit the app’s functionality.

Kontain search
When you click on the search link in Kontain’s search box, a similar drop-down menu appears. So, if you need to narrow your search, you can use the menu to select the sort of content you’re looking for. Tucking these options away simplifies the search box.

One way of making things simpler is to hide or conceal advanced functionality. Find out the most commonly used functions of your interface and tuck away the rest. You can do this with pop-up menus and controls, which are very common on desktop software. For example, if your search bar has advanced filters, put them away in a special drop-down menu at the end. If users need those filters, they can enable them with just a couple of clicks. Deciding what to keep and what to conceal isn’t a simple task, though, and will depend on how important and how frequently used each of the controls is.

CollabFinder search
When you click on the search link in CollabFinder, you aren’t taken to a different page. Instead, the search box controls drop down, allowing you to begin your search straight away.

 

2. Specialized controls

It’s important to select the right interface controls for the situation. Different situations can be handled in different ways, and certain controls are better at their intended task than others.

Backpack calendar picker
Backpack has a compact calendar date and time picker for selecting a reminder date.

For example, you can select a date by using drop-down lists for day, month and year. Drop-downs aren’t very efficient, however, when compared to a calendar picker, where you can click directly on a day you want. Calendar pickers also help you see the days, weeks and months (and especially workdays and weekends) more easily and so allow you to make a more informed decision more quickly than you would with a simple drop-down list.

MyBankTracker APY Calculator
MyBankTracker’s APY calculator features easy-to-use slider controls for quickly trying out different projections.

Another good example of this are sliders. Yes, you can always input a number manually, but for certain situations, slider controls do a much better job. Not only are they easy to use — just click and drag — but you can also see how your selection fits between the minimum and maximum of an available range.

 

3. Disable pressed buttons

One of the problems Web applications encounters with forms is the submission process. With very simple forms, if you click the “Submit” button twice or more very quickly, the form will be submitted two or more times. This is obviously problematic because it will create duplicates of the same item. Preventing duplicate submissions isn’t very hard, and it is essential to do this for most Web apps.

There are two tiers to this safeguard: client-side and server-side. We won’t go through the server-side safeguard here because this will vary depending on the programming language you use and your back-end architecture. What you should essentially do is put in a check to ensure during the processing stage that whatever is being submitted is not a duplicate, and if it is to block it.

Yammer disabled button
Yammer disables the “Update” button while your new message is being submitted.

The client-side stage is much simpler. All you have to do is disable the “Submit” button the very moment it is clicked. The easiest way to do this is to add a piece of JavaScript to the “Submit” button like this:

<input type="submit" value="Submit" onclick="this.disabled=true" />

Of course, we would advise you to also implement server-side checks to be sure that duplicates don’t get through.

 

4. Shadows around modal windows

Drop shadows around pop-up menus and windows aren’t just eye candy. They help the menu or window stand out from the background by reinforcing its dimensions. They also block out the noise of the content beneath the window by darkening the area around it with a shadow.

This technique hat its roots in traditional desktop applications and helps the user to focus his/her attention on the appearing window. Since most modal windows aren’t as easy to distinguish from the main content as in desktop applications, shadows help them to appear closer to readers, because the window appears to be three-dimensional and lay above the rest of the page.

Digg login window
Digg’s log-in window has a thick shadow around it to block out the noise of the page beneath.

To achieve this effect, designers often create a container with a transparent PNG-image as background and place the content inside the container - with equidistant padding on all sides of the box. Another option is to use a background image with transparent borders and position the content box within this box using absolute positioning. This is exactly what Digg does — this is the image they are using (dialog.png). And this is the markup and CSS-style they are using:

(X)HTML:

	<div id="container">
		<div style="display: block; top: 236px; opacity: 1;" class="dialog">
			<div class="body">
        		<div class="content">
        			...
        		</div>
        	</div>
        </div>
      </div>

CSS:

.dialog {
    position: absolute;
    left: 50%;
    margin-left: -315px;
    width: 630px;
    z-index: 100001;

}
.dialog .body {
    background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */
    padding: 40px 13px 10px 40px;
}

Alternatively, you can also use JavaScript-based lightboxes or drop shadows using CSS3-attributes we’ve described earlier, but you need to be aware that Internet Explorer won’t support them.

Basecamp project switcher
Basecamp’s project switcher window has a large soft drop shadow that helps the menu area stand out.

 

5. Empty states that tell you what to do

When you’re designing a Web application, it’s important not only to test it with sample data, but to ensure that it looks good and is helpful when there is nothing there yet. You should design the empty states.

When there is no information for a page or query yet, a helpful message telling the user how to start could go in that empty space. For example, a project management application’s home page may list the user’s projects, but if there are no projects yet, you could provide a link to the project creation page. Even if there is already a button to do that on the page, an extra bit of help doesn’t hurt.

Campaign Monitor empty state
Campaign Monitor points you in the right direction when you start building an email campaign.

This technique encourages users to actually try out the service and proceed directly with using the service after registration. Guiding the user through single steps of the application may help him or her to understand what advantages the application offers and if it’s useful or not. It is also important to present most important options to the users and only them — it doesn’t make sense to overflood them with numerous options. Keep in mind that users usually want to get a more or less concrete idea of what is offered to them, but they don’t want to jump into details — they have neither time nor interest in it.

Using empty states to motivate users and animate actions, you can significantly reduce the amount of “drop-outs” and help your potential clients to gain a better understanding of how the system works.

Wufoo empty state
Wufoo’s forms page has a large, friendly message inviting you to create a new form if none yet exist.

 

6. Pressed button states

Many Web applications have custom-styled buttons. These are anchors or input buttons that have custom images assigned as their backgrounds. The default input buttons may not be suitable in some cases, and the text links are sometimes too subtle. The challenge is, when you make your links look like buttons, they should act like buttons — and this includes having a “pressed” look when the user clicks on them.

This isn’t a purely visual tweak. Giving instant feedback to the user will make the application feel more responsive and bring the experience closer to what the user experiences on desktop applications.

You can add a pressed button state with CSS by styling the active pseudo-class of the link in question. So for example, if your anchor has the class add_task_button, you can style its active class by targeting add_task_button:active.

Highrise button pushed
Buttons in Highrise actually show a pressed state when you click on them, providing the user with a satisfying responsive feel.

 

7. Link to the sign-up page from the log-in page

Some people who haven’t yet signed up to your application will inevitably end up on the log-in page. They likely want to try out your application but can’t find the registration page in a hurry. Perhaps they’ve tried accessing a feature that’s only available to registered users.

Delicious sign in
Don’t have a Delicious account? No problem; a sign-up link is provided on the Delicious log-in page.

Goplan sign in
Goplan has a nice colored button on the log-in page pointing to the sign-up page.

Make things easy for these folks by placing a registration link on your log-in pages. If they haven’t got an account yet, they shouldn’t have to look for a registration page. Our studies confirm: 18% have a sign-in form or a link to the sign-in form placed next to it (e.g. YouTube, Reddit, Digg, Lulu, Metacafe).

 

8. Context-sensitive navigation

It’s important to think about what the user expects to see and what they need in every given context. You don’t need to display the same navigation controls everywhere because users simply may not need them in every situation.

One of the best examples of context-sensitive controls is the recent change in the Microsoft Office 2007 interface, in which the default set of toolbars was replaced by ribbon controls. Each tab on the ribbon holds different controls relating to a particular activity, be it editing graphs, proofreading or simply writing. Web applications can also benefit from such context-sensitive controls because these controls help unclutter interfaces by showing only what the user needs, not everything that’s available.

Lighthouse sub-navigation
Lighthouse features a familiar tabbed navigation menu; however, it also has a second level of menus right under the set of tabs. This level displays only the items associated with the active section of the website.

 

9. More emphasis on key functions

Not all controls hold the same importance. For example, on a screen for creating a new item, you may have two buttons: “Create” and “Cancel.” The “Create” link is more important because that’s what the user will be doing most of the time. Only rarely will they need to cancel the screen. So if these controls are located side by side, you may not want to give both the same emphasis.

Lighthouse create or cancel
The “Create ticket” button in Lighthouse. You can see the “cancel” link next to it, in plain text. The button not only commands more importance but also has a larger clickable area and is easier to spot because of its frame.

To shift emphasis to the “Create” link, we can simply use different styles or types of controls. Some applications use the form input button for the create action, and have the cancel action as a text anchor. This not only gives the create button more clickable area, it also helps to grab the users gaze better when they’re looking for it.

10. Embedded video

While pictures and text are a great way to communicate and teach your users about your app’s features, video can be an even better alternative if you have the resources to produce it. Video has been gaining popularity on the Web in recent years. For Web apps, videos are generally used on the marketing website as a kind of screencast to show off a product’s features; however, this isn’t the only way to use video.

GoodBarry video
GoodBarry features a video screencast on its front page showing off the product. It also uses screencasts inside the app to teach people on how to get started.

Mailchimp video
MailChimp includes tutorial videos right on the admin panel to help out new users.

Some Web apps use video inside the application itself to teach users how to use certain features. Video is a fantastic way to quickly demonstrate how your product can be used, because it is easier to consume than a page of text, and it is also much clearer because the viewer can see exactly what to do.

Related articles

Please take a look at the following related articles:

Discuss further techniques in comments!

Please feel free to suggest further ideas, approaches and coding solutions in the comments to this post. The second part of our research will be published soon: stay tuned via RSS Subscribe to our RSS-feed and Twitter Follow us on Twitter.

About the author

Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability.

(al)

0
Your rating: None

By Steven Snell

The start of a new year is often a time of reflection on the past year, both personally and professionally, as well as a time to look forward to the year ahead. With that in mind, we thought it would be interesting to do a New Year’s group interview with a number of top designers and developers. We put together a big list of questions and posed two in particular to each of the participants.

We think you’ll enjoy the insight this panel provides into 2008 and 2009. There’s a wide variety of topics covered, including favorite resources, trend predictions, business lessons learned, upcoming events for 2009 and more. Let’s take a look at a large group interview with top web designers that takes a look back on 2008 and presents some predictions for the year 2009.

You may want to take a look at the other interview posts we’ve published earlier in our magazine:

  • 35 Designers × 5 Questions
    35 designers. 5 questions. 5 precise answers. Result: 175 professional suggestions, tips and ideas from some of the best web-developers all around the world.
  • 50 Designers × 6 Questions
    Even more insights from the best designers and web-developers across the globe.

Jonathan Snook

Jonathan Snook

Do you have any upcoming projects planned for 2009 that you’re particularly looking forward to?
I always look forward to conferences. It’s such a great way to hang out with talented, friendly people. SXSW is at the top of my list, even if I’m not speaking. With the folks from Sidebar Creative, we’ve got plans for more workshops, especially after the success of our first event, and we’re looking to roll out some new things next year. 2009 is shaping up to be a good year.

Do you have any thoughts or predictions about design trends that may become more popular or significant in 2009?
There’s been a maturation of design, with great usage of illustration and playing with the illusion of light. However, it’s been mostly decorative backgrounds and headers. There hasn’t been much push outside the generic two- or three-column layouts. Thankfully, we’ve seen a smattering of great art direction in 2008, and I look forward to seeing more of that in 2009. Jason Santa Maria’s, for example, is a site that I visit outside of my RSS reader every time because it’s unique. It captures my attention, and the content is well written and fantastically integrated.

Simon Collison of Erskine Design

Simon Collison

Are there any design trends or popular styles from 2008 that you like more than others?
I’m not a big believer in “trends” in Web design as such. For me, in Web design the patterns are rarely widespread enough to be what we could call “trends.” For example, it is easy to see pockets of ideas and copyists and approaches gaining momentum, but look somewhere else and the tide is flowing in another direction. Sure, crap stuff like Web 2.0-esque shiny buttons and reflections, or the great drop-shadow plague, or something good like “Wicked Worn,” they were real trends. What did 2008 give us that equals those?

There is one positive trend I like. More and more people are designing for the subject and audience, regardless of what is perceived as “trendy” — minimal, if minimal is required, or vibrant, if vibrant is required, etc. Now that is a trend I’d like to see spreading far and wide: relevance! I hated that world we lived in where, for example, regardless of audience, a Web app would always have the same visual bells and whistles. Crap. Oh, and as someone who always looks to try to take risks with a design, I’m pleased to see plenty of others still doing the same. More risk-taking in 2009, people!

Have you followed the work of any particular designers during the past year?
I pay attention to every single thing Mark Boulton puts out because he is consistently inventive, accurate and well-researched. His transparent redesign for Drupal has been a real eye-opener into his process, too.

I have followed Garrett Dimon’s blog because he has publicly documented the design and build of Sifter. Everyone can learn plenty from Garrett.

Obvious one, but Jason Santa Maria killed it in 2008, especially with the art direction approach to his blog redesign, a technique we use a lot at Erskine and hope to see more of next year. Jason is quietly brilliant, a humble genius.

And (cheeky this) our own incredibly talented superstar Greg Wood. He teaches me new ideas every day and is more talented than he realizes. I advise others to study his code, his ideas, his art direction.

Jason Santa Maria of Happy Cog Studios

Jason Santa Maria

What are some of your favorite or most frequently used fonts from 2008?
Soho and Soho Gothic from Monotype are just gorgeous and versatile families. And even though it’s becoming too much of a go-to, I use Gotham often when in a pinch for a simple sans serif.

What have been a few of your favorite sources of design inspiration, online or off, throughout the past year?
I’ve really gotten into FFFFOUND! this year. I subscribe to their update feed and love seeing all the random photos and bits of design that come down the tubes. Beyond that, getting away from my computer and taking photos always serves as a good source of inspiration for me.

Veerle Pieters

Veerle Pieters

What have been some of your favorite sources of design inspiration, online or off, during the past year?
When I look online, I mostly browse Flickr or FFFFOUND! or del.icious. One of the best offline inspirations is a book called Geometric, by Kapitza, which I recently bought. It really is a beautiful source of inspiration if you are looking for geometric patterns.

Do you have any design competitions planned for 2009 (like the “What is Graphic Design?” competition from 2008)?
Yes, I am planning on doing another one but haven’t decided on a date yet because it takes much planning up front. This one will be the only one that I will be doing because I believe in quality over quantity.

Darren Hoyt of Category 4

Darren Hoyt

Are there any design-related products, software or accessories on your wish list for 2009?
I’m looking forward to the release of ExpressionEngine 2.0. According to the previews, the way it handles themes should make production easier for us front-end designers. There’s also a pretty major control panel overhaul, which should make it an easier sell to novice clients.

I’m also excited about the official release of FontCase. Over the years, I’ve used some pretty hacky methods of organizing and labeling key fonts, but FontCase beta has solved a lot of those problems already.

What have been your favorite sources of design inspiration, online or off, during the past year?
Mainly books. The first was Michael Beirut’s 79 Short Essays on Design, which looks at design in the broadest sense, rather than getting specific about techniques or trends. I liked the big-picture perspective on how design impacts our lives in ways we don’t realize. The writing itself is really entertaining.

The second is Book One, by Chip Kidd, a huge anthology of his famous book covers. He has a way of marrying strange imagery and playing with your expectations, something commercial Web design doesn’t always allow for. Studying his work is great when you’re stumped for ideas.

David Airey

David Airey

Can you tell us something that you’d like to improve on as a designer in 2009?
I want to be more humble and to concentrate on my own faults rather than judging others. When you’re overly concerned about your view of colleagues and acquaintances, you lose focus and productivity. I’m far from perfect, so it’s important to look closer to home.

Are there any designers in particular who you’ve enjoyed following in 2008?
Eric Karjaluoto, through his blog, ideasonideas. Eric doesn’t publish blog articles very often, but when he does, they’re a sincere, insightful, personal look at the bigger picture, and I believe he’s a great asset to the design community.

Jacob Gube of Six Revisions

Jacob Gube

What frameworks were your favorite to use in your development during 2008?
My favorite JavaScript framework is MooTools with jQuery being a close second. The choice depends on who I’m working for, who I’m working with and what the requirements are.

Server-side, I’m a PHP guy and Zend is my favorite, but I want to mention that you can’t go wrong picking other top PHP frameworks out there, such as CakePHP and CodeIgniter.

For CSS frameworks, I believe in rolling your own framework if you really need to, because I find that the overhead in size and the usual cost of lower semantics in using CSS frameworks don’t justify the benefit, seeing as CSS (with the CSS2 specs at least) is a very simple markup language that really isn’t as verbose or complicated as client- or server-side scripting.

Do you have a favorite design- or development-related book from 2008?
This year, I read a lot of development books mostly to get familiar with emerging technologies like Flex 3 and AIR, as well as to upgrade my outdated ActionScript 2 knowledge to ActionScript 3. Learning Flex 3 is a superb primer.

For design, there is a lot of great content from independent bloggers (such as on the Usability Post blog) who produce great design- and UX-related articles, and unfortunately I didn’t find any ground-breaking books to read like Designing Web Usability (from 1999) and Don’t Make Me Think (from 2005). One book that I’d rank close to the caliber of the two previous books I mentioned is Web Form Design, by Luke Wroblewski, from Rosenfeld Media. Rosenfeld Media has some nice UX books in store for us next year, and I’m excited to get my hands on those. Additionally, I still think that for beginning developers who are getting into more intermediate-level, standards-based Web design, I would suggest CSS Mastery by Andy Budd and Designing with Web Standards by Jeffrey Zeldman.

Nick La of N. Design Studio, Web Designer Wall and Best Web Gallery

Nick La

Do you have any favorite designers whose work you enjoyed following in 2008?
I particularly like the tnvacation.com series of websites (fall, spring, summer, and winter) designed by designsensory.com.

What has been your favorite design trend or style from 2008?
My favorite design style is the collage and scrapbooking effect (see 2008 Design Trends at Web Designer Wall).

Chris Coyier of CSS-Tricks

Chris Coyier

What is your favorite CSS technique that you learned in 2008?
My favorite CSS technique from this past year isn’t a CSS technique alone, but rather learning how to control CSS through JavaScript, specifically jQuery. I already know CSS quite well, and since jQuery uses the same selectors as CSS, learning it wasn’t very difficult. Now I am able to integrate behaviors in websites in ways that were out of my grasp before. I can think “When I click this element, I want this other element’s CSS to change so that it is twice as big,” and I can make that happen quickly and easily. The power of that is incredible to me still.

Who are some of your favorite designers to follow on Twitter?
I love being able to follow all these incredible designers whose work I greatly admire: @jasonsantamaria, @mezzoblue, @collis, @vpieters, @snookca, @chrisspooner, @jessebc, @elliotjaystocks.

But even more, I like following my actual friends and people I enjoy conversing with. I am an equal opportunity follower. If you Tweet interesting things, I want to follow you!

Chris Spooner

Chris Spooner

Can you tell us a business lesson you learned from starting full-time freelancing in 2008?
One of the things that has surprised me the most is the obscure range of situations that project leads are generated from. When I look back at how my clients found me, I’m presented with a huge range of sources, which include the usual search engine phrases of “graphic designer + location,” but also some more generic and unusual terms that often bring up a related tutorial or article from my blog. Other sources of inquiry have been through seeing an example of my work on Web design galleries, discovering me through an online interview on another design blog and sometimes the subscribers of my blog themselves.

The lesson here is to consider every possibility of exposure and make the most of it. You never know what might come as a result of it.

Is there a particular product, software or accessory that is on your wish list for 2009?
I’d quite like to join the Apple fan club and swap all my computing kit for Mac products. An iMac, Macbook Pro and iPhone would look pretty nice sitting on my office desk! Unfortunately, I went and bought my Windows-specific Adobe software not so long ago, based on the idea that I already had a powerful computer setup. While Windows does the job without too many problems, I remember the overall niceness of OS X when I used to use an iMac at a previous job.

My girlfriend and I are looking to move home in the near future, so I think that would be the perfect opportunity to kit out a brand new office area with a shiny new kit, along with Adobe’s new CS4. I better get saving.

Alen Grakalic of CSS Globe and Templatica

Alen grakalic

What were a few of your favorite website designs from 2008?
There were many beautifully sites this year. Not actually sure if all were designed this year, but that’s when I first saw them. To name a few:

13 Creative

13 Creative

Ali Felski

Ali Felski

Viget Labs

Viget Labs

Clearspace

Clearspace

Carrot Creative

Carrot Creative

Alexandru Cohaniuc

Alex Cohaniuc

I loved this site Tomas Pojeta.

Tomas Pojeta

Another one of the sites I was absolutely amazed by was actually a Flash site: Level 2 Design.

Level 2 Design

Can you tell us something you learned during the past year that has helped you in running your business?
The one thing 2008 taught me was actually something I already knew but somehow keep forgetting: if you are a freelancer, never rely on a single source of income. No matter how cool the deal sounds, don’t work exclusively for anyone.

Randa Clay

Randa Clay

What were some of your favorite design trends or styles from the past year?
I love the vintage and retro look. The illustration style and color schemes are really appealing to me.

Do you have any new year’s resolutions for your business in 2009?
I’m not a big one on new year’s resolutions, but my continuing overriding goals are always to exceed client expectations, and to be one of the top developers of custom WordPress themes.

Jon Phillips of Spyre Studios, and founder of Freelance Folder

Jon Phillips

What are a few of your favorite tools or resources for freelancers that you used in 2008?
I used different tools in 2008 (and in previous years), but If I had to choose, I’d pick three: WordPress, because of its simplicity, ease of use, flexibility and great support from the community; Freshbooks Invoicing because they make it so damn easy to keep track of everything, and I also find the iPod Touch app to be very useful; and last but not least, I’d pick Adobe FireWorks, simply because most of what I do doesn’t always require that I open Photoshop. Of course, I used many more tools, but those are the ones I used almost every single day in 2008.

What has been your favorite music to listen to while designing during the past year?
Being a musician myself, I could say I’ve been listening to my band (and I have), but usually when I work on clients’ projects and designs I’ll listen to artists like Fiona Apple, John Mayer, Radiohead, Muse, Guthrie Govan, Tori Amos, and when I need something a bit “stronger,” I’ll listen to Slipknot, Tool, 36 Crazy Fists, Avenged Sevenfold, Meshuggah, Soilwork, etc. It really depends on my mood and what I’m currently working on. Let’s just say I like the sound of an acoustic guitar as much as distortion. :)

Jacob Cass of Just Creative Design

Jacob Cass

What was your favorite design course that you took in 2008?
I took eight design-related courses in 2008 while studying Visual Communication at Newcastle University, Australia. These were: Visual Communication Technology II, Animation and Multimedia, Advertising for Design, Graphic Design, Media Production, Visual Communication Imaging, Typography and New Media. My favorite and most hated course would have to be Typography. It was the most challenging and eye-opening course I have done on design, and since taking it I have realized that so much of design and communication is purely based on typography. I actually wish to do another course in advanced typography, however my uni does not offer it (yet).

What aspects of your work would you like to improve on in 2009?
Glad you asked me this. It may lead to some new year’s resolutions. I would like to learn more about complex illustration in Illustrator, and I also want to learn some new techniques in Photoshop. I am also trying to improve my typography and further my skills in logo design. But in saying all this, this does not mean I will not try to improve on any other aspect of design. As a designer, you have to continually improve and learn new things to keep up to date in the industry.

Brian Gardner of Revolution Two

Brian Gardner

Can you tell us something that you learned that helped you improve your business in 2008?
The one thing I learned this year is how powerful a community can be. In October, I decided to take Revolution and open-source it, and I was amazed at how many supportive users there were. More importantly, users have generously given their time on the support forum to help others. Building a product that people believe in can go a long way.

Are there any products, software apps or accessories on your wish list for 2009?
Truthfully, the only thing I want is a 3G iPhone, as my current one runs just fine, so need to go out and buy another one!

Elliot Jay Stocks

Elliott Jay Stocks

Can you share with us a business lesson you learned from going out on your own in 2008?
Great question! There are two main things: the first is that I massively underestimated the time it would take to do admin stuff when I first started out. I don’t have too much paperwork to do, but things like reshuffling the calendar to fit in projects, liaising with clients, keeping track of expenses, etc., all that stuff takes a lot of time, and I was totally unprepared for it to begin with.

The second thing is that you should only take on projects you care deeply about and that are going to keep you interested. I did a couple of projects in 2008 that I really didn’t enjoy by the time they came to a close, because I’d lost interest in them. And that only happened because, deep down, I was never really interested in them in the first place. Turning away work like that because of a personal point of view can be a financial risk, but it’s something I’ve started to do, because the only way I’m ever going to produce decent work is to have a passion for the projects I’m involved with.

Do you have any upcoming projects for 2009 that you’re especially looking forward to?
I have quite a few, actually! :) In January I’m going to take a break from client work and pick up recording of my new album (which I meant to do in December, before deadlines got shifted). So that’ll be great fun to do, and I’m really excited about releasing it. It’ll also be nice to have a complete break from designing and writing for a while so that I can come back refreshed.

The second thing is the next version of my personal website. I’ve been working on the redesign on and off for a few months now, but it hasn’t really gone anywhere. I’m hoping that I can dedicate a couple of weeks of solid work in early 2009 to get that nailed.

I’m also really looking forward to a huge number of speaking events and the traveling that goes with them. I’ve got lots lined up for next year, including a few I’ve yet to announce. In January, I’m going to announce a very big one that I’m doing later in the year! :)

Jay Hilgert of Bittbox

Jay Hilgert

What are a few of your favorite or most frequently used fonts of 2008?
Stainless, Dispatch, Myndraine, Kontrapunkt, Dirty Ames, Turbo Ripped, Immoral, Myriad Pro.

Are there any new graphic design techniques that you learned or developed in 2008 that stand out to you as being especially useful?
I’ve by no means mastered it yet, but I enjoyed learning about the gradient mesh tool technique in Illustrator. It immediately struck me as being useful in many ways, like for creating photo-realistic icons in 100% vector format, for example.

Fabio Sasso of Abduzeedo

Fabio Sasso

What have been some of your favorite products, software and accessories you have used in your work in the past year?
My new MacBook Pro and my iPhone 3G are definitely my favorite products. But in terms of software, I think the new Pixelmator was a great surprise.

What are your favorite design trends or styles from 2008?
For me, one of the coolest design trends in 2008 was mixing modern lighting effects with an ’80s style.

Noura Yehia of Noupe and DevSnippets

Noura Yehia

What were some of your favorite design-related online resources that you came across in 2008?
I read and skim a lot of design and graphics blogs, but there’s only one blog I read on an almost daily basis and that’s Smashing Magazine, which I do because I think every single post is a piece of work. Besides that, I also often check in to Web Designer Wall, NETTUTS, Six Revisions and DesignM.ag.

What has been your favorite online design community during 2008?
There are so many great design communities out there to keep any designer in a creative mood to work. I would definitely start with DeviantArt, having such a huge collection of well-crafted artwork all in one place. I also quite like checking Behance Network, Computerlove, Design Float and the Popular Bookmarks on Delicious, which send me to more places

Steve Smith of Ordered List

Steve Smith

What have been some of your favorite sources of design inspiration, online or off, throughout the past year?
Online, I find a lot of my design inspiration these days from screenshots posted to Flickr by my friends. Patrick Haney posted a set on Design Inspiration that’s a great look-through if you need a couple ideas for layout or colors.

Offline, I’m drawing a lot of inspiration from architecture. Architects have to think in multiple dimensions, something we Web designers don’t have to worry about. But I think the metaphor is valid, in that we need to think not just of the design aesthetics, but of the dimensions of usability, and accessibility as well. The website needs to look good from every angle.

Are there any current design trends that you would like to go away in 2009?
I’d have to say that one of the things I think is becoming a little cliché is the hand-written note, or the post-it note, or the paper-clipped scrap-paper effect. Don’t get me wrong, I’m sure this effect has its place. I think it just happens a lot more than it needs to these days. That said, a website should meet the needs of the project, not be designed to current fads in a vacuum.

Related articles

You may want to take a look at the other interview posts we’ve published earlier in our magazine:

  • 35 Designers × 5 Questions
    35 designers. 5 questions. 5 precise answers. Result: 175 professional suggestions, tips and ideas from some of the best web-developers all around the world.
  • 50 Designers × 6 Questions
    Even more insights from the best designers and web-developers across the globe.

About the author

Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag.

(al)

0
Your rating: None

Many e-commerce sites these days tend to be loaded down with too much information on their landing pages. The reasoning for cluttered e-commerce sites is simple: the more information you can cram on the page, the more the user will buy. Unfortunately, web buyers are a finicky bunch.

Jacob Nielsen reports that web users are becoming much more impatient while shopping and browsing online. Instead of spending their time going to a site’s homepage and finding the content by categories or other product recommendations, most shopping is done by quick Google searches. If the user can’t find what she’s looking for right away, she’s gone.

It’s crucial to have simple web designs to allow the user to quickly find the information they need, especially if you are selling a product. If the page is cluttered with useless text, widgets or unrelated products, the site becomes meaningless.

However, it’s become a common practice to do just the opposite. e-commerce sites have taken this “scatter shot” approach of trying to slap the potential buyer with as many options as possible. Instead of making the landing page solely about one product, sites usually clutter the page with unnecessary information, ads and related products.

Less Products Mean More Focus

Many web companies forget the cardinal rule of e-commerce: Web shoppers want as little hassle as possible. Instead of hopping in the car and driving to the store to buy a DVD, it’s much easier to go online and snag it from Amazon in a few clicks. The customer is even willing to wait longer and spend more money if the shopping experience is simple and fast.

Apple

Apple has mastered the art of minimal homepage design. If you go to their homepage, they’ll only show you three things:

  • A simple header navigation
  • One product in the body of the page
  • A few informational links about the featured product with images below the fold

Aside from the standard footer navigation, the homepage consists only of three parts. Here’s what you see if you click on a product link (like the iPhone).

iPhone homepage

Even on the product page, you immediately see what the page is about: the iPhone. The product itself dominates the bulk of the page, and the surrounding information are apps and features of the new iPhone. But more importantly, notice what’s not on the iPhone page:

  • Unrelated products
  • Unrelated sidebar ads
  • Lots of copy
  • Clutter

Apple has effectively shown just enough information in a very pleasing manner. There’s nothing wrong with showing lots of information, as long as it doesn’t feel like a lot of information. You’ll also notice that all of the information, links and pictures are all centered around the iPhone and what it offers. There are no distracting ads or unneeded information about other products.

There are a couple of tried-and-true methods that any designer or web developer can take to ensure that the site layout doesn’t drive customers away with clutter.

  1. Only what you need.
    The biggest aspect of simple web design is only showing what’s needed to make the sale, and nothing more. This doesn’t mean that you can’t give the user lots of information. Just make sure they want to see more information. Apple uses “Learn more” links throughout the page to accomplish this.
  2. Reduce clicks. The less clicks it takes for a customer to buy a product, the higher returns. Don’t make them jump through hoops to buy your product.
  3. The “Grandma” rule. If your grandma (or any elderly person) can figure out how to buy a product for your site, odds are it’s put together pretty well. Unneeded information will turn Grandma away quickly.
  4. Reduce the number of columns. Each time you add a column to a page, the content is pushed into a smaller and smaller space. This puts less emphasis on the main product, and more on extra stuff the buyer isn’t really looking for.
  5. Give less options. There is an added stress put on web shoppers to make decisions. Ultimately, the buyer wants to think as little as possible when making the purchase. Displaying products in a way that eliminates extra thinking and decisions will streamline the buying process and give the customer more peace of mind.
  6. Keep it clean. A clean design keeps visitors happy. By taking the time to ensure that the layout of the site is aesthetically pleasing keeps the customer returning to the site.

Intuitive web design means thinking like a potential customer. Would you shop at your site?

Other Great Examples of Simple e-commerce Design

Bell.ca

Bell.ca uses only a few colors to indicate the branding and offers visitors only the main navigation options. Notice how well the design manages to present a number of different options — shop navigation, support as well as personal and business areas. The design isn’t cluttered but clean and simple and provides the visitors with a broad overview of available options without forcing users to actually go through all of them. Also notice how clever the product navigation is designed at the top of the site. There is just nothing users can do incorrectly.

Shoeguru.ca

Shoeguru.ca present a very user-centric and product-centric design. The product seems to be on the stage just in front of the visitors. The design presents only the product, and nothing else; even only few navigation options are available.

Etsy

Etsy is a great example of how to place a lot of information on a page without it being cluttered. Etsy has a wide catalog of products to sell from, yet Etsy’s design has an earthy, relaxing quality. Creating a useful homepage that doesn’t distract is no small feat.

crupress

Crupress is an elegant book site without many distractions. The homepage manages to present a lot of text without agitating the user. The header navigation is prominent, but doesn’t demand attention. All the design elements flow together smoothly.

tokyocube

Tokyocube is a fun, trendy little site that sells Japanese products. Instead taking precious space explaining what the site sells, the products are put right in front of you. Also, the heavy use of white space allows the products to almost jump right off the page at you. You can’t help but click on one of the toys to learn more about them.

furious tees

While Furious Tees is a tad busier in graphics than the previous sites, it helps do two things:

  1. Show the playfulness of the site
  2. Make it very clear that all shirts are only $19.99

You aren’t lost trying to figure out what Furious Tees is selling, the products are all in front of you. Having all the products on the homepage is especially beneficial for novelty sites that have merchandise people normally wouldn’t be looking for.

But sites with lots of products on the homepage run the risk of becoming cluttered very quickly. Furious Tees doesn’t have this problem. They don’t use any extra sidebars or ads taking attention away from the T-Shirts. The focus is solely on the shirts and the hilarious design.

37 Signals

Basecamp (37 Signals)

Look no further than 37 Signal’s project management tool Basecamp for an incredible example of mixing different types of information to sell a product. Yet there’s just enough information to make an effective sales copy. Every word, every image has to be weighed in a design. If there’s not enough information, the user won’t spend time trying to figure out what the product does. Too much information and the user becomes overwhelmed.

The tasteful use of heading backgrounds and company logos makes every bit of information stand out on it’s own. And they somehow made all of the different types of media blend together, with plenty of space so that the user isn’t bombarded by lots of text or images at one time.

You Only Have a Few Seconds

Every website is going to require a different type of layout, design and copy to sell products. But designers can strive to do more with less by:

  • weighing every word
  • removing unneeded elements
  • using tasteful colors and whitespace
  • and limiting the amount of overall information the shopper sees at one time

Remember, online shoppers are a fickle bunch. They don’t “window shop”. They use search engines to limit their searches to a very narrow field. If they don’t like what they see, they leave. Site owners only have a very small window of time to capture the attention of the prospective shopper. A tasteful, clutter-free design that places the focus on the product (and nowhere else) will allow the shopper to find what she wants faster.

Glen Stansberry is a web developer and blogger. You can read more of his articles on smart web development at Web Jackalope.

0
Your rating: None

Last week we have presented first findings of our web forms survey. The main objective of the survey was to provide designers and developers with some intuition of how effective web forms are designed; we also presented some guidelines of how an effective and user-friendly web form can be achieved.

We have focused on sign-up forms as we wanted to consider further crucial forms (e.g. checkout forms) separately. Afterwards we’ve gone through each and every one sign-up form of the selected sites and analyzed the design approaches implemented in these forms. Below we present the second part of our findings — the results of our survey among web-forms of 100 popular web-sites where web-forms (should) matter.

Please notice that this post is not about checkout forms — that’s a topic for another discussion, we may consider them separately in one of the upcoming posts. We would like to thank Wufoo for providing us with a framework to conduct our survey.

3. Functionality of the forms

In the first part of our research we have considered the placement of the sign-up links and sign-up forms as well as on the visual appearance of forms. However, no matter how nice a design looks like, if the form doesn’t work properly, the completion rates will remain low. Let us now consider the functionality of the sign-up forms as well as typical problems, patterns and solutions used when it comes to the design of these forms.

3.1. Hover, active, focus - effects in use?

Apparently, to improve form completion rates designers try to avoid all kind of distractions and offer a clear, unambiguous and simple web form. This is essentially the reason why any visual effects are used very moderately — if used at all.

Screenshot

  • 84% of the web forms which we’ve reviewed didn’t have any kind of hover, active or focus-effects,
  • 16% used very subtle hover-effects.

3.2. Help, support, tooltips: static or dynamic?

Sometimes the label of the input fields isn’t concrete enough; however, users need to have a sufficient understanding of the information they need to provide. Which characters are allowed in the username? How many characters should a password have? Does a provided e-mail automatically become login to use the service?

Hints and tooltips provide assistance helping users to minimize the number of times an input should be reconsidered. Besides, there is nothing more annoying that some input field which doesn’t accept user’s input although it seems to be perfectly correct. To avoid it, designers make use of (usually) unobtrusive and clear hints.

Screenshot

57% of the reviewed web forms provided “static” help — tips which are supposed to explain what is expected from the user’s input; these tips are obviously placed next to the input field. 10% of the tooltips appear on demand - usually after some help-icon is clicked or when the user is typing the information in the input field.

3.3. Help, support, tooltips: where are they placed?

When providing users with assistance it is necessary to make sure not that the help is simply provided, but that it can be easily found and understood by users. It is crucial to make sure that users don’t make mistakes associating a hint to an input field. To achieve it you need to know where users expect hints to appear. So where are hints and help usually placed within the form?

Screenshot

If hints and help appear, they appear…

  • below the field (57%)
  • on the right side of the field (26%)
  • above the field (13%)
  • on the left side of the field (4%)

We have observed a strong trend toward hints placed directly below the input field. Usually such hints have a slightly different color, in most cases lighter than the main content.

3.4. Input validation: static or Ajax?

Although Ajax seems to have literally flooded web sites with a rich user interaction over the last years, it still hasn’t managed to reach a critical mass among popular web-services. Surprisingly, we weren’t able to identify a trend toward Ajax. The “classic” validation techniques which validate input after the user has clicked on the submit-button are more popular than real-time-validation with JavaScript.

According to our research,

  • 30% of the forms displayed only an error-message at the top of the form (no input fields were highlighted),
  • 29% had highlighted input fields with corresponding messages next to the input field (no error-messages were provided at the top of the page),
  • 25% used both error-messages and input fields,
  • 22% used real-time validation with Ajax,
  • 14% used JavaScript-error warnings,
  • 1% used a system-message with a “go back”-link.

3.5. Design of error messages

As you can see, we have identified six different types of error validation. It is remarkable that 14% of the forms still use Javascript-error-windows to communicate problems (e.g. YouSendIt, Mail.ru, Newsvine, Clipmarks, Yandex, see screenshot below) while only 22% had at least partial Ajax-validation (usually for checking available user names). It is also remarkable that not a single site had no validation whatsoever.

Screenshot
Newsvine uses JavaScript-error warnings to communicate problems.

Usually designers tend to report mistakes using a) error messages appearing after the submit-button is clicked and / or b) highlighting “incorrect” input fields visually. In the first case errors are usually bulleted and presented as a list at the top of the page, before the form. In the second case usually the color of the border of the “wrong” input field is highlighted together with the label of the field (in most cases with a red text color and red background color).

Sometimes designers combine both techniques and use error message as well as the input field highlighting. For instance, consider the sign-up form on Ning (see image below) which combines both techniques.

Screenshot

Usually, red is used to indicate mistakes; however it is not necessarily the case. Tickspot, Mixx.com and Furl use yellow to communicate problems occurred during the form completion.

However, if any color is used at all to communicate a successful registration, then it is green. It was the case in 97% of web-sites where success was highlighted visually.

Screenshot

3.6. Is it necessary to confirm the e-mail?

Only in 18% of the cases it was necessary to confirm the e-mail (e.g. Odeo, Ning). To be honest, we don’t really see any rationale in asking users to re-type the e-mail — after all, users can see what they input because the e-mail field is not starred out (updated). Do you?

Screenshot

3.7. Is it necessary to confirm the password?

It sounds reasonable to ask the user to confirm the input as the user doesn’t see the information typed in (he/she sees asterisks instead). However, many sited decide to remove one input field to minimize the time required to complete the form.

Screenshot

In 72% of the cases it was necessary to confirm the password. However, many large sites such as Facebook, Friendster, LinkedIn, Stumbleupon, Pownce and Twitter don’t require password confirmation.

3.8. Is captcha in use?

While users would definitely be glad if captchas were gone, they are necessary in practice, because web-sites need to make it impossible for spambots to create numerous accounts as otherwise they would need to filter spam accounts in the database.

According to our research,

  • 52% of the sites don’t use captcha,
  • in 39% of the cases it was impossible to reload the captcha without reloading the whole form. This is really dramatic from the usability point of view.

However, we couldn’t identify a trend toward sign-up forms with or without captchas. In any case, if you use a captcha, please make sure that it is either always easily readable or users can reload the image in case it is not readable. Some sites haven’t offered the possibility to reload the captcha, but Digg, AOL, Slashdot, Google and Last.fm have made it possible to the users to listen to it in case it is hard to recognize.

3.9. Cancel-button in use?

When we were coming up with the design problems to consider when designing web forms, we have expected sign-up forms to not have a cancel-button, as it doesn’t really make much sense for the users to abort the form completion after all fields have been typed in. Yet we were partly wrong.

The cancel-button was used only in 8% of the cases. In some of these cases the “cancel”-button came right after the “terms and conditions”-section (e.g. Zoho Writer). Consequently, if users do not want to agree to the service conditions, they could abort the process. On the other side, some services offer a payment plan before the registration (e.g. Crazyegg). In case users have selected the wrong payment plan they can get back with the cancel-button and select another plan they prefer.

Screenshot

Apart from that: we just don’t understand why Dzone has a cancel-button placed on the left in its sign-up form.

If the cancel-button is used, it is placed on the right side of the submit-button (4%). Among the sites reviewed in the post cancel and submit-buttons didn’t have a strong visual difference and were placed next to each other. From the usability point of view it makes more sense to use a clear visual distinction between primary action buttons and secondary action buttons and introduce a significant amount of space to clearly separate them.

3.10. Alignment of the submit-button

Depending on the form layout it may make sense to align the submit-button on the left, on the right side or place it in the middle of the layout. Designers seem to have a strong preference toward left-aligned submit-buttons (56%), followed by centered buttons (26%).

Screenshot

Right-aligned submit-button is still popular (17%), however it is often used when designers want to indicate the next step of the registration. In such cases submit-buttons are often titled “Continue” or “Next”. Reason: in usual desktop-applications “Next”-button is also often right-aligned.

3.11. Thank-you message

While few years ago most services offered a simple, basic thank-you message after a successful registration (usually with a link to the login-page), now most sites try to motivate users to explore the service immediately.

  • 45% of the forms asked just registered users to proceed with submitting further information, finding friends in the networks, suggesting the site to friends or filling out his or her profile.
  • 33% of the forms presented “places to go” and functions to explore in an engaging, user-friendly-tone,
  • 4% offered a basic “thank you”-message,
  • 2% had a redirect to the homepage.

Further findings

  • tab index was used correctly in 99% of the cases (the only exception was Habrahabr)
  • 24% of forms used conversational talk, trying to address users needs by speaking with them through labels. Informal phrases such as “What’s your name?”, “Your e-mail, please?” or “I’d like to…” are common in this context.
  • 38% of sites prefer to remain formal and use business talk, asking users the required information user-friendly (e.g. “Your name”, “Confirm password” etc.),
  • 38% of sites use system talk; here visitors are asked for their “Login”, “User password”, “Location” etc.

Bottom line

Let’s conclude with a brief overview of the findings presented above. Please keep in mind that we have considered only sign-up forms.

  • sign-up forms don’t have any hover, active or focus-effects (84%),
  • hints and help are either static (57%) or dynamic (33%) and appear below the input field (57%) or on the right side of the field (26%),
  • static validation is as popular as dynamic validation — no trend toward Ajax;
  • e-mail confirmation is not used (82%),
  • password confirmation is used (72%),
  • captcha can be used or not used (48% vs. 52%),
  • cancel button is not used (92%),
  • the submit-button is left-aligned (56%) or centered (26%),
  • thank-you message motivates users to proceed with exploring the services of the site (45%).

0
Your rating: None

This article is a guest post written by Dirk Jesse, the developer of YAML (Yet Another Multicolumn Layout), an (X)HTML&CSS framework which explains his motivation for YAML in the last paragraph of the article. This article is supposed to initiate the discussion about the need for more flexible layouts in modern web design and explain why flexible designs are still important — even despite the Full Page Zoom-functionality implemented in most modern browsers.

The new generation of web browsers — Firefox 3, Opera 9.5 and Internet Explorer 7 — provides a feature which seems to save a lot of work for web-developers in the future, namely the Full Page Zoom. Instead of allowing users to increase and decrease the font size on a given web-site, browsers now enable users to literally scale the rendered layout including visuals and background images. The whole design layout is scaled proportionally according to some adjusted zoom-factor, with all the elements of a page’s layout expanding equally. Consequently, every fixed, pixel-based layout becomes “scalable”; the content area always remains within the layout box it is supposed to be in and there is no chance of producing overlapping boxes as we’ve seen in the previous generations of web-browsers.

However, is the new zoom-technique indeed so advanced that we don’t need flexible layouts any longer? Just as this question is extensively discussed in the blogosphere, it is extensively answered with “yes”. And there is a good reason behind it. The coding of a fixed layout is much easier and, when used properly, produces exactly the results a designer is willing to achieve. With fixed layouts, designers can ensure the exact positioning of each pixel (a dream of many graphics designers comes true!) and the user can adjust the size of the layout with a scaling zoom on demand. No wonder that it’s tempting to motivate the switch to fixed layouts. However, as professionals, we need to consider how reasonable it is from the professional point of view.

In the following let’s discuss why we strongly believe that this paradigm won’t lead web design to more user-friendly and accessible web-sites, why flexible layouts still remain important today and why they will become even more important in the future.

Where Full Page Zoom doesn’t help at all

The main difference between fixed (px-based) and flexible (%-based) layouts is the simple fact that flexible layouts can better adapt to user’s viewing preferences. With flexible solutions, the width of the layout depends on the viewport of the browser and can perfectly fill the viewing space without any manual adjustments from the user’s side. Fixed layouts can’t do that. Full page zoom, when applied to fixed layouts, enables users to manually adjust the design after it has already been rendered.

Another important aspect which is worth keeping in mind: Internet Explorer 6, probably the nightmare of every web-developer out there, has a market share of almost 40% — and it doesn’t support zoom at all.


According to w3schools.com, the larger and wider screen resolutions (larger than 1024×768px) will become a standard in the future.

More problematic is the overwhelming confidence of developers that the individual decision-making is better for users from the accessibility point of view. When applied to fixed layouts the web-developer delivers a clear message:

Dear users, your browser can zoom my fixed layout - so please help yourself if you want or need to!

From designer’s perspective with this argument it is tempting to switch to a more comfortable (fixed) design solution at expense of accessibility. Why should a user adapt his viewing preferences to a web-site? Shouldn’t a web-site rather adapt itself to the viewing preferences of its users? If you think about it for a second, you have the same situation as in a cloth store where you are offered cloth only in some very specific size. If the size doesn’t fit to you, it’s your problem, not store’s owner. And if you want to you can take a needle, some fabric and create the cloth of its own choice for free. That is not user-friendly.

Even more crucial is the simple fact that full page zoom isn’t really feasible in practice. Let’s assume that the designers has a fixed layouts with the width of 960px. To zoom it using a 150% scale factor and still browse the page without horizontal scroll bar, users need to have at least the screen resolution of 1440px and a browser opened in the full-screen-mode. Is it really a path for the Web to take in the years to come? As Nancib states, “problem is that sometimes the font on a page is friggin’ tiny without zooming it in, but zooming the page (with the images) doesn’t just make it more readable.”

Web developers often tend to argue that flexible layouts are too complex and with full page zoom every fixed layout is becoming scalable anyway. That’s right, scalable, but not flexible. Why should a browser correct the mistakes a developer or designer has done when creating a site layout?

Flexible layouts are hard to control? That’s not true!

Whenever designers argue against flexible layouts they tend to use the following argument:

In flexible layouts the text flows in the width when expanding the browser window, making the content hard to read. This text flow is hard to control.

Wide text flow is definitely not a nice thing to offer your visitors. However, text flow doesn’t need to flow in the width when the browser window is expanded. To achieve attractive flexible designs one can use the properties min-width and max-width. Of course, Internet Explorer 6 doesn’t support both of them — just as it implements both hasLayout-model and the Float-model incorrectly. However, this is not the reason to not use floats for your design layouts, right?

To simulate max-width and min-width you can use various workarounds (JS Expressions); and to simulate min-width you can even use a pure CSS-solution. But what happens if the user’s browser doesn’t support JavaScript? Well, in this case a flexible Layout without max-width doesn’t necessarily destroy the layout, although the text flow may be too wide. But this is what the Progressive Enhancement is all about, so this is not that problematic.

How to find an ideal width for a flexible layout?

Let’s consider how wide the layout should be for an optimal flexible layout:

  • Layout width: use width:auto or any %-value to make sure that the layout makes use of the available width of the browser windows automatically.
  • Minimal width: use some px-value (e.g. 760px). This lower bound should be used for all pixel-based layouts, so the content remains readable when displayed in the minimal screen resolution.
  • Maximal width: use an em-value (e.g. 90em). Thus the text flow doesn’t grow in width in an uncontrollable fashion, but remains constant for various screen resolutions. Side effect: the maximal width is scaled according to the font-size of the browser.

Also keep in mind that we, designers, don’t really have the design layout (whether fixed or flexible) under control as the presentation of our layouts depends on the browser, font size adjustments, operating system, alternative user-stylesheets etc.

The Holy Photoshop Mockup

The most frequent argument used to motivate the fixed layout solution is the fact that customers are confident that a perfect Photoshop mockup would look best when displayed 1:1 in user’s browser. Indeed, it is hard to explain to the customers that flexible solution, although looking differently in different context, has some advantages. After all, if the design doesn’t look as expected on senior project manager’s wide screen laptop, then this is not something the customer would agree on.

However, following customer’s decisions blindly you neglect your professional responsibility to develop accessible, user-friendly web-sites. It’s your duty to complement your customer’s wishes, compromise and seek for the best possible solution for users and not for the senior manager. A quick argument that a user-friendly solution which doesn’t look best at some specific configuration would bring more satisfied customers and consequently more money in a long run usually suffices.


Vivabit.com: transparency, patterns and background images can lead to impressive and flexible results.

The end-result layout isn’t supposed to be used as a nice screenshot for one single portfolio. It has to serve users’ needs and enable them to get to the content of the site as quickly and as painlessly as possible. Take your time and go through some of the layouts presented in numerous CSS-showcases. In way too many cases the attractive pixel-based design breaks down completely when the browser window is resized or the content is scaled. A Photoshop Mockup isn’t necessarily easy to convert into a flexible design layout, however it is definitely worth consideration. Transparency, patterns and background images can lead to impressive and flexible results.

In most cases we design web-sites not to present some design, but to let the design help users to achieve some objectives such as finding the information they are looking for. Graphics-heavy flexible layouts are not easy to achieve and require planning, patience and confidence that the results are worth it. However, these efforts improve user experience and make the design medium-independent.

Mobile Browsers – Why flexible is better

Mobile Web layouts as well as its small and big problems are a topic which is worth a single discussion. Just one year ago my old mobile phone could access the Internet, however it was extremely hard to browse web-pages, read them and navigate. With the improved user interface of iPhone it has completely changed. Mobile web-browsers (e.g. Opera Mini or Safari on the iPhone) have dramatically improved over the last two years — at the moment it is almost natural that they render web-pages without any considerable display errors.

My iPhone has no problem displaying flexible layouts in the landscape format or portrait format; in fact it automatically adjusts them to the best format which fills the whole iPhone window. At the same time I often experience problems when loading fixed layouts — from time to time they need to be zoomed in to fill in the whole browser window.

What holds for mobile devices holds also for printing devices. Ironically, nobody really argues about the advantages that flexible layouts for print layouts manage to deliver. Flexible design allows to use portrait / landscape - formats for optimal printing.

The decision for flexible layouts against fixed layouts doesn’t only improve the accessibility on Desktop-PCs, but also creates robust and flexible medium-independent layouts which can be easily adapted to any output devices. After all, with flexible rules (relative measure units, minimal margin and padding, alignment etc.) instead of fixed rules (px) rendering engines can better consider the properties of the used media.

The future, the unexplored land

As mentioned above, the mobile Web is becoming more and more important. Are we now going to optimize layouts for 640×480 or 800×600? The screen resolutions are increasing, the prices for high-resolution displays are decreasing. At the same time the physical resolution of devices as well as the spatial printing resolution (dpi). Consequently, the absolute size of one pixel decreases. No wonder that pixel-based definitions are becoming less expressive.

The gap between low-resolution displays and high-resolution displays hasn’t bridged over the last 10 years. On the contrary: the gap has increased dramatically. Web-sites are viewed in hundreds of possible screen resolutions while each user may have his own preference for the viewport of his browser. This consideration alone explains how important flexible design layouts are today and how important they will be in the future. Consequently, fixed layouts won’t make the cut in the future as designers will need to consider more and more different devices to optimize the design for. What we need in web design to come to grips with all this variety are dominating relative measurement units.

Flexible Layouts with YAML

YAML (”Yet Another Multicolumn Layout”) is an (X)HTML/CSS-framework which was developed especially to meet the requirements of flexible and user-friendly design layouts. Since June 2007 YAML is available in English and provide an extensive documentation. Most CSS-Frameworks like Blueprint CSS or YUI Grids offer designers a predefined system of CSS-classes to create grid-based layouts visually. To create a layout designer needs to create a HTML-structure of the site and to assign CSS-classes to containers. The rest is automatically taken care of.

YAML takes a different route. The Framework supports the development of grid-based layouts as well as the development of the grid system - with the emphasis on flexible layouts. If a designer wants to create a grid-based layout he can use the basic skeleton with three columns, header and footer. Each element can be removed or adjusted to user’s needs. The actual design, the positioning of the columns, is done using CSS-definitions (and not HTML-structure as it is done in other CSS-frameworks). The benefit for designers: with YAML one has better options for defining his own system of classes, using any measurement units and getting clean code.

Based on the HTML-structure of YAML, the framework includes layout presets which already prevent IE-bugs; thus the framework makes it easier for designers to create a layout which works in both modern and older browsers. Layout examples provide an overview of what is possible with YAML and may deliver some ideas for your future layouts. Apart from that, YAML offers a set of flexible grid-components which you can use to create columns within columns and thus design a more complex but flexible Grid-layouts.


YAML Example: a demonstration of YAML’s flexible grids.

Consider the example above. BluePrint CSS has a demo-page which displays a layout created with Blueprint CSS. And this is the result of the very same template created using the flexible grid-elements of YAML. The scaling works even in IE 5.5, including min-width and max-width.

Apart from layout design, YAML also delivers style sheets for print layouts, as well as components for horizontal and vertical navigation. YAML definitely requires some time to climb the learning curve: the tool offers a variety of functions and user-friendly flexible layouts are definitely not easy to build.

The concept of YAML is, however, well documented in the online- and PDF-documentation and my provide beginners and professional with a good introduction to the framework. For practical purposes you can also use YAML-Builder, a handy tool for visual development of YAML-based CSS layouts which allows you to put the containers of the layout visually together via drag-n-drop. The valid HTML- and CSS-code is generated automatically on the fly.

0
Your rating: None

Effective web design doesn’t have to be pretty and colorful — it has to be clear and intuitive; in fact, we have analyzed the principles of effective design in our previous posts. However, how can you achieve a clear and intuitive design solution? Well, there are a number of options — for instance, you can use grids, you can prefer the simplest solutions or you can focus on usability. However, in each of these cases you need to make sure your visitors have some natural sense of order, harmony, balance and comfort. And this is exactly where the so-called Divine proportion becomes important.

This article explains what is the Divine proportion and what is the Rule of Thirds and describes how you can apply both of them effectively to your designs. Of course, there are many possibilities. Hopefully, this post will help you to find your way to more effective and beautiful web designs or at least provide some good starting points you can build upon or develop further.

Divine Proportion

Since the Renaissance, many artists and architects have proportioned their works to approximate the golden ratio — especially in the form of the golden rectangle, in which the ratio of the longer side to the shorter is the golden ratio. The rationale behind it is the belief that this proportion is organic, universal, harmonic and aesthetically pleasing. Indeed, being evident everywhere in the universe (in fact, many things around us can be expressed in this ratio), divine proportion (which is also called Golden ratio, divine section, golden cut and mean of Phidias) is probably the most known law of proportion which can dramatically improve the communication of your design.

As Mark Boulton states in his article Design and the Divine Proportion, “one of the key components in the vehicle of communication is composition, and in design schooling it is something that is taught as something you should feel rather than create logically.” Hence, to comfort your visitors with a pleasing and intuitive composition it is often worth considering the Golden ratio. So what exactly is Golden ratio? Basically, it is a proportion 1.618033988749895 ≈ 1.618 which holds between objects placed within some context.

Divine Proportions

Consider the example above. You would like to create a fixed width layout. The width of your layout is 960px. You would to have a large block for your content (#content) and a smaller block for your sidebar (#sidebar). How would you calculate the widths of your columns?

  1. First, calculate the width of your #content-block. You need to make sure that the ratio between this block and the overall layout width is 1.62. Hence you divide 960px by 1.62 which results in approximately 593px.
  2. Subtract 593px from the overall layout width (which is 960px) and get 960px - 593px = 367px.
  3. Now if you calculate the ratio between the #content-block and the #sidebar-block (593px : 367px ≈ 1.615) and the ratio between the container-width and the width of the content-block (960px : 593px ≈ 1.618) you have achieved almost the same ratio.

This is the whole idea behind the “Golden” proportion. The same holds for fluid and elastic layouts, too.

Of course, a web design doesn’t need to be organized according to the Divine proportion. However, in some cases it can improve not only the communication of your design, but also improve further details of your layouts. As an example consider The 404 Blog. The design itself is visually appealing, provides calm and supporting color scheme and has a nice composition.

However, the design does not correspond to the Divine proportion as you can see from the image below. Actually, users don’t necessarily feel it, because they intuitively split the layout in two separate blocks of the width 583px (630px - 31px - 31px) and 299px (330px - 31px). The reason behind it is that white space of the main area is passive (three columns, each 31px wide), it clearly supports the content next to it rather than being the content itself.

The ratio between the layout blocks is 630 : 330 px ≈ 1.91 ≠ 1.62, and the ratio between the content blocks is 583 : 299px ≈ 1.92 ≠ 1.62. The reason why the layout looks almost perfect although it doesn’t stick to the Divine proportion is the simple fact that it is balanced — both the layout blocks and the content blocks have the same proportion. Hence the design provides some sense of closure and structural harmony.

The interesting thing is, however, that due to a suboptimal layout length visitors are offered a suboptimal text length of over 90 symbols per line. However, an optimal number for comfortable reading lies between 60 and 80 symbols per line. The improvement of the layout would therefore lead to the improved readability of the content, too. That’s a useful side-effect of getting things done according to the laws of nature.

For some quick’n'dirty drafts you may use the ratio 5 : 3 which is not exactly the Divine proportion, but can turn out to be a useful rule of thumb in case you don’t have a calculator near you. Divine proportion usually provides bulletproof values one can perfectly incorporate in almost every design. When working on your next project you may want to consider using the following tools to calculate the widths “on the fly”:

  • Phiculator
    Phiculator is a simple tool which, given any number, will calculate the corresponding number according to the golden ratio. The free tool is available for both Win and Mac.
  • Golden Section Ratio Design Tool
    Atrise Golden Section is a program, which allows avoiding the routine operations, calculator compilations, planning of grouping and forms. You can see and change the harmonious forms and sizes, while being directly in the process of working on your project.

The Rule of Thirds

Basically, the Rule of Thirds is a simplified version of the Golden ratio and as such poses a compositional rule of thumb. Dividing a composition into thirds is an easy way to apply divine proportion without getting out your calculator.

It states that every composition can be divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines. The four points formed by the intersections of these lines can be used to place the most important elements — the elements you’d like to give a prominent or dominant position in your designs. Aligning a composition according to Rule of thirds creates more tension, energy and interest in the composition than simply centering the feature would.

Rule of Thirds
This photograph demonstrates the principles of the rule of thirds. Source: Wikipedia

In most cases it is neither possible nor useful to use all four points to highlight the most important functions or navigation options in a design. However, you can definitely use some of them (usually one or two) to properly place the most important message or functionality of the site. The left upper corner is usually the strongest one, since users scan web-sites according to the “F”-shape.

So how do you split a layout into 9 equal parts? Jason Beiard states the following method for applying the Rule of Thirds to your layouts:

  1. To start the pencil-and-paper version of your layout, draw a rectangle. The vertical and horizontal dimensions don’t really matter, but try to keep straight lines and 90-degree angles.
  2. Divide your rectangle horizontally and vertically by thirds.
  3. Divide the top third of your layout into thirds again.
  4. Divide each of your columns in half to create a little more of a grid.
  5. You should have a square on your paper that looks similar to the rule of thirds grid.

Let’s consider the following situation. Assume you have a layout of fixed width 960px. Consider the area above the fold which is likely to have the height between 750 and 950px.

  1. Divide the width of your layout by 3. In an example you get 960px / 3 = 320px.
  2. Divide the height of your layout by 3. In an example you get ( (750 + 950 px) / 2 ) / 3 ≈ 285px.
  3. Each rectangle should have the size of 320px × 285px.
  4. Construct the grid of the rectangles described in step 4 by drawing lines going through the ends of rectangles.
  5. Place the most significant elements of your designs in the meeting points of horizontal and vertical lines.

Consider the design of demandware.com presented below. Although the design uses a number of vibrant colors, it is not noisy and seems to be both simple and clear. The navigation options are clearly visible and the structure of the site seems to be easy to scan.

Rule of Thirds

However, if you consider the effectiveness of this design, you might find a perfect balance the design actually has. Indeed, it almost perfectly uses the Rule of Thirds as two out of four intersections of the lines (pink blocks in the picture below) contain exactly the information which the company wants its users to see — namely what the site is all about and an example of their work. Note also how perfectly the main sections are placed on the second horizontal axis. That is effective.

Rule of Thirds
Rule of Thirds in use: two out of four intersections of the lines (pink blocks) contain exactly the information which the company wants its visitors to see.

Summary

In some cases, applying the Divine proportion and the Rule of Thirds may significantly improve the communication of your design to your visitors. Offering your users an almost natural balance in proportion 1 : 1.62 you literally impose the natural order on it and force your design layout to become more scannable and well-structured.

Using the Rule of Thirds you can also effectively highlight important functions of your site providing your visitors with a design they can easily work with and effectively delivering the message you want to deliver in the first place.

0
Your rating: None