4G is Going To Be a Mobile Design Game Changer

4G networks are here and so are 4G enabled devices. Yet we worry about adding little scripts and bloating CSS files because we want to make our sites load fast on mobile. OK, here’s something to wrap your brains around. I just got my 4G enabled Android smartphone and now I am enjoying speeds up to 12 Mb/s on the road over 4G. No more slow loading pages, I am finally able to get nice enough speeds to type this post on my tethered Macbook as I wait for my son’s violin lesson to end.

Is 3G going to be another IE6 for web developers? Hmm, that analogy doesn’t really stand up but hopefully you get the idea. Is it that we have to cater to all 3G users on slow connections until 2020 or will everybody be on 4G/LTE in about a year? I’m thinking the latter. With the new 4G/LTE Android devices already here, the steady roll out of 4G networks and the 4G enabled iPhone 5 coming out soon, I think the 4G revolution is going to be a game changer for mobile design.

 

 

Social Media Buttons and Widgets Could Double Page Size

Here’s one for anyone who uses social media plugins, widget or badges on their website. You could be slowing your site down by doubling the size of your documents! I just realized that my social plugin added a whopping extra 300Kb to my site. So my page load doubled from about 300Kb to 600Kb because of one small plugin. All the plugin does is to make it easier to “like” a post and display the number of likes the post got. The funny thing is that by default it loads on all pages, even on the homepage.

Facebook fan badge

Like to show the world your site has been liked by so many people with one of those Facebook fan badges. Steady now! It added a crazy 600Kb to my site. Suffice it to say, I got rid of that too.

The trade off

Yes, this is the dilemma. Either have your site load faster – I just optimized it for 3G devices – and miss out on the user’s ability to like or promote your site, or live with longer loading times and just grin and bear it. In the meantime, I’m on the lookout for smaller scripts or custom plugins.

Mobile Site Navigation and Content Context

Breadcrumbs provide context to your page and might be the answer to solving your mobile website navigation problems.

One of the challenges in mobile (handheld) website design is to design the main navigation. With so little available real estate on a small screen, your first instinct is the minimize the navigation by hiding it behind an icon. Some designers opt for having the main navigation at the bottom of the page. Both methods are abundant on the mobile web, and both have usability pros and cons.

Main navigation at the bottom of the page

Obviously having your main navigation at the bottom of your page forces the user to scroll and look for it. Luckily, scrolling on a handheld is a swipe with a finger or a thumb. So the user effort is minimal. However, it might not be intuitive to have navigation at the bottom of the page. This is probably why some designers have navigation at the top of the page.

Main navigation at the top behind an icon

ESPN.com among others, have the main navigation behind an icon at the top of the screen. Unfortunately there is no universal icon that users might recognize as navigation. From user testing I have learned that the little wayfinder icon just confused people. Also the little icon that resembles a list is not that intuitive. Users seem to have the most success finding the navigation with a little button labeled “menu”.

Lack of navigation and context

So now that you have your navigation behind your icon, it’s time to look at your page titles. On a desktop site you usually have your navigation displayed and with navigation status indicators, users are able to see in which context a certain page should be seen. Let’s say you are in a section called “Industries” and the page is called “Energy”. It’s safe to assume the majority of your users will understand that the page “Energy” belongs under “Industry”. However, on your mobile site you are hiding your main navigation. The user only sees “Energy” as a page title. There is no context since the navigation isn’t visible.

Breadcrumbs to the rescue


And here’s where are old friend the breadcrumb comes in. By using breadcrumbs at the top of the page, you’ll be able to provide much needed context.

Third Party Validation

Companies are struggling with trust and user’s anxiety. Third party validation is a great way to put a user’s mind at ease.

Do I know you?

Ever visited a website and thought “My God, who are these people?”. It happens to me several times per day. It’s no biggie, unless they have something I need. That something is usually a book, since I am really into books. At that point I wan to know if these people are trustworthy, after all why should I trust them with my credit card or will they actually send me a book? So I make sure the connection is actually secured and they accept major credit cards or paypal. But that’s not enough.I need to know if this company has a good reputation. Therefore I look for some obvious signs like testimonials and other form of endorsements.

Trust markers

So this is me buying such a simple thing as a book. I shell out maybe $20 and I’m done. So what if I am some big shot executive looking to outsource my IT department? Don’t you think I’ll operate on the same principle? Of course! It doesn’t matter what you sell or who you are. Users want those trust markers. They look for external validation. A book buyer looks for positive feedback from other buyers. A CEO might look for case studies, testimonials and awards that your business might have won. Client lists or logos will give B2B sites greater value, because users instantly feel more secure. “If those people use it, they must know what they are doing.”

It really works

In Tim Ash’s excellent new book “Landing Page Optimization” he gives excellent examples of adding trust markers on websites. One of the highlights of the book is a little segment about optimizing a contact form. Simply adding logos of well known companies resulted in a 40 and 58% increase in conversion. How’s that for a simple fix?

I Want to Date Your Website

I don’t know your company. Your company has something I want, but I need to know if you can deliver, if your trustworthy and what others say about you. Sound familiar? If not, replace the word “website” with “prospective employee” and you may get my drift. But I like to take things one step further. I think a website visit should be more like a date. That means you have to impress your date, buy flowers, show wit, share knowledge, be charming and gain trust. I know what you should NOT do. Being pushy usually turns a date off. Dressing down is a no-no. A marriage proposal on a first date is generally not appreciated. A marriage proposal during each and every conversation is only tolerated if it’s meant as a joke. If there’s no trust, forget it. Being all talk and no substance might get you a one night stand, which is ok, if that’s what you’re after. But if you’re in the business of relationship building you have to ask yourself the following question:

Do you want to build a lasting relationship with your customers or have a flighty encounter?

If you answered “a flighty encounter” I suggest you stop reading now and go read some other articles. Sure, building a relationship with your customer is much, much harder than making a quick buck, but wouldn’t it be so much better when your customers keep coming back for more? So what techniques can we employ to create returning visitors? How can we increase user satisfaction and make them come back? Stephen R. Anderson just wrote an excellent book called “Seductive Interaction Design” in which he describes 4 methods of winning your customers over. In short it comes down to:

Aesthetics – Dress up nicely

Beauty is in the eye of the beholder, but organization and finesse will not go unnoticed. Make sure your appearance is down to a tee. Quality control is essential. Donald Norman’s book, “Emotional Design,” makes the case that users are very forgiving for flawed functionality if the interface looks attractive. Ergo, if you want to stand out in the crowd, look your best. Make it fun to be on the website, give it a personality. Even a daunting task like filling out a mortgage application online can be made fun if designers use their imagination. True, it’s serious business and you shouldn’t make it into a joke, but hey if users can have fun while doing it, great! At the same time you do want to be somewhat mysterious in your approach to your user. Give them a little teaser of what you have to offer but make sure you fulfill your promise of providing the goods later on.

Be Subtle – Don’t push too hard

Ever get annoyed by a pushy salesman? I know I do. Granted, when I am ready to buy, I want the cash register nearby. When I first enter your shop and don’t know anything about you, chances are I’m not ready to buy. Stop breathing down my neck and let me get to know you.

Gameification – Play hard-to-get but offer rewards

Thousands, probably millions of websites hardly get any traffic. Out of those there are probably a substantial number that were a really cool idea at the time when they were build. Some of these even got good marks during user testing. So what happened? Why don’t they get any traffic? Because they are no fun! Wonder why LinkedIn has such a high percentage of profile completeness under it’s users? Why does foursquare does such a good job in user retention? Because they make it fun – yet they make you sweat for it. In his book “Designing for Emotion” Aaron Walter takes up the case that we are evolving from usable interfaces to pleasurable experiences. As an example, he shows us Mailchimp, an application for sending email marketing campaigns. For some users, setting up a campaign in Mailchimp is a real pain. We know from psychology that users will perform better on a difficult task when they are in a good mood. Ergo, by giving the interface some personality – in this case a chimp that shares witty one-liners upon logging in – you take away part of the pain by instantly generating a feel good moment. We now know that a design has to be usable and content has to be trustworthy and reliable. Why not take it a step further and create emotional designs that really connect with users? After all, we are designing for humans, right?

A clear call to action goes a long way

When researching websites, I often see a lot of call to actions like “Read more” linking to an article or deeper content. There are a number of reasons why this is not a great idea.

The most obvious is that the “Read more” description isn’t a description at all. It doesn’t tell me anything about what I will be reading next. A great number of users merely scan websites and since links usually stand out in color or style, will only read text stands stands out from the crowd. Those users will likely not follow a ‘read more’ link.

Another group of users is the one that relies on screen readers. Screen readers read out links to visually impaired users, and if you have 20 “Read more” links on a page, this is far from helpful.

The third point I want to make is that if you are designing for emotion, you have to make calls to action more engaging. Compare the calls to action in the marquee on IBM.com with the more generally dreaded “Read More”. They actually took their time and wrote great calls to action that are descriptive and make you want to click that link. You do the math.

Why you should have a content strategy

When it comes to making and keeping your website successful, content strategy should take an active role in your organization.

What is content strategy?

Content strategist extraordinaire Kristina Halvorson describes content strategy as: “planning for the creation, publication and governance of useful, usable content”. In other words, it is a strategy – you got to think long term, and it involves content – in this case the stuff you publish.

She goes on to say that “at it’s best, a content strategy defines:

key themes and messages
recommended topics
content purpose (i.e., how content will bridge the space between audience needs and business requirements)
content gap analysis
metadata frameworks and related content attributes
search engine optimization (SEO), and
implications of strategic recommendations on content creation, publication, and governance.”

The importance of a content strategy

There are several reasons why a content strategy is a good thing.
First of all, you will want to create an ongoing stream of unique content that your users are interested in so they want to come back. In-depth, well-written content helps you market your brand and company. It builds company character. For example, producing case studies could position you as a reliable source; it shows users you’ve actually done the stuff you are trying to sell them. We call it “show and tell”.

Another reason is to regularly publish content that lets you be found on the web. SEO specialists love content because it contains keywords, so the more opportunity they have to infuse keywords in new content, the happier they are. Search engines look for those keywords and will be more likely to return search results featuring your website. If you are servicing a niche market, this is an excellent way of being found on the web.

A third reason is that a content strategy will help you align communications across all of your media, print and digital. This will create a much more united marketing effort.

Whatever your process for publishing content, always think of the user. Quality over quantity. Ask yourself, what content are you publishing and at what time. Ask yourself also where are you publishing this. Is it on your website, on your blog, on Facebook?There are so many digital and non-digital channels nowadays, you will probably need a dedicated professional to help you make the right choice.

Tools of the content strategy trade

A content management system, or CMS is an important integral part of any content strategy. A good CMS, like BrandExtract’s SAM puts the publishing power in the hand of the content manager. No need for the IT guys to get your document on the web, a few clicks in the CMS will publish your document. This leaves more time for the content manager to schedule and co-ordinate content and to make sure new content is produced on time.

Further reading on content strategy

If you’re interested in Content Strategy, I can highly recommend 3 books:

The Discipline of content strategy by Kristina Halvorson
The Elements of content strategy by Erin Kissane
Clout – the art and science of influential web content by Colleen Jones

The pixel width of email blasts

My colleague Kathy asked me what the design width of email blasts should be. I had to admit I had no idea. So I did a little research in my inbox, measured my recent html email blasts and notifications and here are the results. Pixel width is approximate, I might be off a pixel or two. All widths are in pixels.

  • Starbucks: 736
  • Newegg: 652
  • Amazon: 663
  • Gap: 703
  • B&N: 665
  • LinkedIn: 590
  • PayPal: 600
  • Apple: 600
  • Peachpit: 636
  • Netflix: 541
  • Twitter: 712
  • At&T: 592
  • UPS: 588

There you go, Kathy. Email designs are between 541px and 736 with an average width of 637 pixels.