If you are a business owner looking to get the most out of your digital presence read on.

Your Web site is currently under siege. Web audiences are reading less and less these days, jumping from site to site rarely engaging beyond a couple mouse clicks. In this fragmented digital media landscape grabbing your audience’s attention has never been more challenging.

The Web, once the domain of simple utilitarian sites comprised predominantly of text and few images, has evolved into a rich, distraction-inducing feast for the senses. Motion-graphics, banner advertisements and streaming videos have become staples of the modern Web experience. Click Here! Like this! Pin It! Retweet This Article! The Web is full of interactive forks in the road all vying for a piece of the screen and, significantly, a shrinking slice of the audience’s attention.

Through proper planning, design, and sound technical execution, your digital presence can shine and differentiate what’s unique about your business’s products and services to hyperactive Web audiences.

I will touch upon 2 core design elements that, if properly addressed, will enhance your Web site’s overall user experience, and set the stage for longer visits and stronger audience interactions.

Design Principle #1: Scale and Proportion

As desktop screens get larger and larger in terms of resolution –that’s the number of viewable pixels in the horizontal and vertical plane–modern Web user interfaces should take full advantage of this additional screen real estate.

An aging Web site built a mere 5 years ago will usually stick out like a sore thumb occupying just a small portion of the available browser area. In these cases the site in question may have been optimized for 1024-by-768 pixel displays, the dominant screen resolution 5+ years ago. Text will likely appear miniscule and will be difficult to read and images and important elements governing the site’s function (e.g. menu items, text input fields on contact forms) will lose their effectiveness visually and in terms of usability.

In the same way a Web site that hasn’t been optimized for mobile forces users to jump through hoops to get things done, so too an antiquated site designed for 1024-by-768 pixel displays can undermine audience engagement.

Fundamentally these issues can be resolved by using the entire Web browser. A modern Web site should strike a strong visual presence in the browser. That means large, bold headlines, expansive (but not distracting) imagery, big, easy to scan text; and clear, visually intuitive menus and calls-to-action that draw audiences inside to explore more of your site’s content.

Design Principle #2: Minimalism

Clutter is distracting. Busy looking Web pages encourage visitors to move quickly through pages rather than read through information. Limiting the number of competing graphical elements on any given page and visually prioritizing core messages can help your audience to focus on the content that is most important.

Many poorly designed Web sites barrage users with successive arrays of gratuitous and often irrelevant graphical callouts and Ads. Loading down your site’s pages with ineffective visuals may in fact have the opposite effect and drive people away.

Clean and simple always wins the day in the modern digital space. A great Web site experience starts with pairing down the competing messages and limiting unnecessary graphical embellishments, particularly around the outer perimeters of a Web layout –sidebar columns, header and footer area.

Similarly, reducing the amount of copy while increasing the size of body text greatly reduces the overall cognitive effort required to absorb information.

…

Thoughtful design and content are the basis of successful user experiences on the Web. Limiting user distractions through proper planning and technical execution helps your target audience focus on your content and perform important tasks like finding your address and contact information. Consequently one of the best ways to ensure your site breaks through the clutter on the Web.

Image credit: Coyoty

The growing influx of media choices at our disposal now includes social networks (take your pick), mobile apps, Netflix, DVRs, Youtube, and much, much more. These services and platforms are all competing for a narrowing slice of the audiences’ attention in what many experts agree is an increasingly fragmented media landscape. Not surprisingly, with so many media and information options available attention spans are getting shorter leading to the popular notion we’re reading less and skimming text (on Web pages) as opposed to reading pieces fully from beginning to end.

Jakob Nielsen, a Web usability expert, conducted a study back in 2008 and found that Web audiences (at the time) were reading just 28% of the words on the average Web page. In an earlier 1997 study, Nielsen performed research on how people read websites and found an astonishing 79% of test users scanned any new page they came across, with just 16% of test users reading word-by-word.

A more recent 2013 study by analytics vendor Chartbeat reviewed several high-traffic Web sites including Slate Magazine and found that most visitors would scroll through upwards of 50 to 60% of an article page, suggesting audiences were reading less than 1/3 of the text on any given page, or at least on the specific Web pages tested.

So clearly this isn’t a new trend. But what’s perpetuating this behavior?

Interestingly back during the Web 1.0 era the typical Web page layout was probably somewhere in the neighbourhood of 80 to 90% text-to-image. Today, thankfully, excruciatingly slow dial-up internet connections are largely a thing of the past and the ratio of text-to-image based content is arguably skewed in the opposite direction in favor of “rich media”. Things like streaming audio and video, motion-graphic banner ads, interactive info-graphics and games. The Web is is clearly becoming a more visually oriented medium, in many ways resembling television, though more participatory in nature.

Twitter, of course, is the poster child for the new brevity of communication that has become so prevalent in the social media sphere. Got something to say? You’ve got 140-characters or less. Don’t have time to write a comment? You can always Like or Pin a response instead; retweet and reblog to your heart’s content. And now there’s Vine, a sort of Twitter meets YouTube social app that allows users to post and share videos that have a maximum length of just 6 seconds.

Digital media consumption behaviours are clearly changing as is the way we’re communicating with one another through the wireless-everywhere-Web. In many ways ubiquitous internet access coupled with greater bandwidth speeds has ushered in a culture of immediacy in which people now expect an instantaneous flow of information. The Web is an active medium in which audiences are engaged with content and want to go from site to site, post to post, Tweet to Tweet, and get things done. But the question remains: are audiences reading?

In my next post I’ll explore a number of design and content strategies you can employ to connect with these text-skimming site-jumping time-strapped digitally distracted audiences. Stay tuned.

Image credit: Power to the Pixel

In this post we’ll look at the mobile equation from more of a UX design perspective by delving into some of the key elements that will ensure your audience has a great experience when interacting with your digital content through a mobile device.

The mobile Web is unique from the traditional desktop browser experience. The most obvious difference is screen size. While mobile displays are physically much smaller than conventional laptop and desktop screens, most modern smartphones will usually run a higher screen resolution (a.k.a. pixel density), somewhere in the neighbourhood of 150 ppi (that’s pixels per inch) all the way up to 326 ppi on the iPhone 5. Again, this resolution is much higher than you’ll typically find on a desktop monitor. Inevitably this will cause an older Web site —that is, one that has not been mobile-optimized— to render at a much smaller size in a mobile Web browser. Page headlines and body text for example, set at a common 14 pixels or less, will likely appear illegible to most readers. In 2 and 3-column Web site layouts this problem is amplified by the additional information cluttering up the limited screen dimensions which causes everything to appear tiny in the viewable screen area.

In a mobile-optimized layout less is more. Removing sidebar columns in favour of a single column layout lends precious screen real estate which can be devoted to larger body text and more clearly defined menus and buttons allowing for greater overall ease of use and less eye strain on the part of the user.

Formula1.com is a textbook example of a desktop centric Web site that renders poorly on a mobile device (screenshot taken on Samsung Galaxy SIII smartphone). In this particular case a conventional 2-column layout becomes a usability nightmare even when rendered in landscape mode. Having trouble reading the text? This is a classic mobile UX faux-pas. Visitors are forced to constantly zoom-in on specific regions of the interface and pan around the screen to effectively read text or navigate between pages. Buttons and text hyperlinks are insufficiently proportioned to accommodate touch inputs —that is, finger taps as opposed to mouse clicks.

A great example of a mobile-optimized Web experience is this very site you’re reading right now. Yabstadigital.com employs a fully responsive design layout that dynamically sizes and reorients visual elements to make the best possible use of the available screen real estate.
You could think of a responsively designed Web site as one that intuitively knows how big the user’s screen or browser area is and how best to rearrange the content for optimal display efficiency. If you’re curious and on a laptop or desktop computer, try resizing your Web browser window to see how our site layout smartly adapts to the changing window dimensions as you expand or contract the browser area. Whether you’re viewing this site on a gigantic 27-inch desktop monitor or a 4-inch smartphone, headlines and body text will always render clear and readable; buttons and menu items will be easily accessible for touch or mouse driven input, and above all, distractions such as excessive page scrolling and zooming in/out actions will be kept to a minimum allowing you to focus on the site content itself rather than wrestling with the interface.

Mobile design considerations play a critical role in establishing credibility in the digital space and require special attention. As we’ve seen, a poorly executed mobile site conspires to undermine the user experience and can result in higher bounce rates and leave your audience with a fractured impression of your business offerings.

By contrast, a well planned and executed mobile design strategy has the capacity to enhance audience engagement with your brand, product or service and foster more successful interactions. Mobile is quite simply an investment in your business’s future livelihood and competitiveness.