For today’s web developers, start-ups and forward thinking businesses the notion of ‘web content’ and where it’s seen is changing at an incredible rate. Gone are the days of designing and producing a site suitable just for a desktop PC monitor. In 2011 web content must be developed to be viewed and interacted with across a range of screens of varying sizes, from smartphones to the widest flat-screens – and this post should help us to start considering ‘multi-screen thinking’ and its importance.

In the interest of keeping this post quite snappy I have opted to focus on just three types of web content: home pages, e-commerce pages and promotional content (such as blog posts and news articles) which should give us a range of examples. I also wanted to make the information easy to remember, so let me introduce you to:

The 3 “…ables” of multi-screen thinking when creating web content

1. Viewable

The first ‘multi-screen thinking’ question to ask ourselves when creating web content is: will this be viewable across multiple screens? Even before we have moved away from desktop monitors and laptops, it is important to bare in mind the range of browsers web users are using to arrive at your homepage. According to TopTenREVIEWS the top 3 browsers available currently are Firefox, Chrome and Internet Explorer and it is important to bear in mind that some sites may load slower in certain browsers than others – and if your homepage is not viewable on a certain browser within a few seconds it is likely that user may give up and head somewhere else.

Of course, beyond desktops and laptops, web content needs to be quickly viewable on smaller screens such as smartphones and tablets such as iPad – and the most important information and ‘calls to action’ should ideally be seen as soon as a homepage is loaded.

2. Usable

So if you’re happy that your web content is adequately viewable across all screens (and browsers), the second thing to consider is whether that content is usable too. This is increasingly important with mobile devices in mind. As Internet Retailing reports, 18% of online shopping at Christmas was expected to be done via mobile but only a 23% minority of retailers had sufficient navigable mobile sites or apps in place for this proportion of users.

With more people shopping on mobile, e-commerce sites need to not only ensure that product pages are displaying vital information simply, clearly and concisely – but the checkout process needs to be quick and easy (and must remain safe) for smartphone users as well as traditional internet shoppers. Of course, testing and refining the process on a variety of technologies is key here.

3. Shareable

Aside from simply being viewable and usable across multiple screens, shareability is also a big factor when it comes to web content – and especially content geared towards getting traffic to your site (such as blog posts).

There can be multi-screen issues as simple as formatting, with text size and lengths of articles – but aspects of good shareable posts which really get people “liking” on Facebook or re-tweeting on Twitter, such as data graphs, images and infographics need to transfer well to smaller screens (and across 3G and 4G networks). This is the first step to ensuring prospective sharers are seeing the kinds of things they like to pass to their friends and followers as soon as possible, and on any of their devices. Good fresh content should be seen by as many people as possible, and new tech users are really the last group you want to frustrate by not considering mobile devices when producing content to be shared.

The Magic Number: Why data is important three times over in our multichannel world – a #JUMPchallenge post

This guest post by Luke Richards is part of the #JUMPchallenge, a blogging competition designed to raise awareness of how to join up online and offline marketing, launched to support Econsultancy’s JUMP event.

Data and tracking has become more important to web developers and digital marketers as online business has become increasingly competitive.  However, as companies start to look at their performance across multiple channels – i.e. incorporating mobile and social media, as well as search engine optimisation, onsite usability and offline techniques – intriguing developments have been made into collecting data seamlessly across channels and then using this information in the best possible way.

Read more…

Barclaycard kindly sent me a new credit card today. After jumping through hoops to get it activated – I won’t get diverted by that farce but do they really have to try and upsell at every opportunity? – I then went to register with their online banking.

Ok, this doesn’t look too bad to start with. The text is a bit small, and maybe there’s a bit too much, but we’re ok so far. Next up, entering my card details.

I guess they have to be super-sure it’s really me who is registering, but credit limit? Is that bit necessary? Now some contact details.

You’ll notice that email has little blue marks, whereas mobile doesn’t. I didn’t notice this at first and ended up supplying my mobile number just in case, but it turns out that mobile is the only optional field in a form of 16 fields. May as well have just made it required, Barclaycard.

Ok, so far, we’ve only seen minor issues. Now comes the really bad bit, entitled “Security Details”. And these are *really* secure. Super secure. Machiavellian in their security, in fact.

At first glance this doesn’t look too bad. Username, fine. Passcode, well that’s like a password right? Memorable word? Par for the course on banking sites. But…

Noooo! I have to include some random numbers!

Whyyyyyy?! So I have to come up with a totally arbitrary number that can’t be mixed with symbols or letters? So it was like a password, just utterly rubbish.

Grrrrr! My memorable word has some random restrictions on it to make it even harder to find a really good one! And then, as a final “screw you”:

A logic puzzle to work out whether you should or shouldn’t tick the boxes.

I’m not gonna get this time back, Barclaycard! I’ll remember this!

Investigating Crazy Egg’s heatmap and visitor tracking tool today, I found a nice bit of UI in their plans and signup process. The plans page itself looks sweet:

But the really slick part comes when you click the “Sign Up” button:

The other plans fade out and the signup form slides in – no page refresh, and an quick jump to the next step in the process. Good work Crazy Egg!

I came across a great 404 page the other day and thought I would share it. The page at first glances looks like any other but if you read the text, you will see that they have redeemed themselves for the broken link by offering me a discount of $3 off any of their products.

This is a great way to capture the interest of would be browsers that would normally see this page and immediately hit the back key, instead not only do they capture my attention, but they also tap into my curiosity which gets me to immediately click the products link.

In this case I didn’t need any of their products but this is a great tip.

Also note the search bar being visible. This is essential on a 404 page for keeping customers that know what they are looking for on your site.

Hot on the heals of Part5: Designing Content Displays, Rob Adams has just posted up the next chapter of his excellent designing for flex articles, titled Part 6:Guiding with motion to the Adobe Flex Developer Center: Flex Interface Guide. If you have not read the other five parts, check them out first.

This chapter covers:

• The differences between motion design in Flex applications and motion design in other mediums.
• How to use motion to leverage users’ instinctual understanding of the physical world to enhance your application’s usability.
• How to use screen to screen transitions to help guide users to the next area of interest and make it clear how to return.
• How to use motion effects to provide feedback and focus your users’ attention.

For More Information

• Flex Interface Guide
• Flex Developer Center

Leisa Reichelt has posted up an interesting presentation on DIY guerrilla User Research which is well worth a look. I have embedded her slideshow below.

She points out that no matter how small the budget, even a small amount of User Research can pay off in a big way. She goes through some of the techniques used by Interaction Designers when conducting research and some invaluable tips on conducting and writing interviews, it is well worth a look:

View Leisa’s Presentation on slide share.

The default Flex 2 Aeon theme looks fairly polished and showing it to clients in the early stages of a project can have it’s disadvantages. For example a client may believe the project is closer to release than it is or if you use Adobe Flex for prototyping may believe that the default theme represents the final look and feel.

If you intend to customise the chrome of a flex app, showing a client the default look and feel not only leads the client into a false expectation of the finish product but, if the app is purely a prototype, may make a case for it being used for the foundation of production code or prevent an further exploration in to the visual design.

Ted Patrick has provided an excellent technique to overcome this.
Read more…

Hi All,

Just a quick post. Rob Adams has just posted up the next installment of his excellent designing for flex articles, titled Part 5: Designing Content Displays to the Adobe Flex Developer Center: Flex Interface Guide. If you have not read the other four parts, check them out first.

For More Information

• Flex Interface Guide
• Flex Developer Center

Back in September, Adobe released a new section to the Flex Developer Center, called FIG or Flex Interface Guide. This is an excellent resource for anyone involved in the Interaction Design (IxD) or User Experience (Ux) of RIAs or any developers who want to make more user focussed apps. There are several articles still in draft about designing for Flex. One of the upcoming articles that will be particularly of interest and relevance to the new possibilities of designing RIAs is the use of motion, as a tool to guide users.

Read more…