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.



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.

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

New Book: Mobile First

A new book has been released in the “A Book Apart” series. Luke Wroblewski, best known for his research on forms, has written a book about mobile websites and apps. If you are familiar with Luke, you know he is pretty much the authority on this subject. In a recent podcast with Jared Spool he stated that too many companies are trying to figure out their mobile strategy instead of just putting something out there. His idea is that this mobile market is far from mature with so many changes in devices and players in the market, it’s nearly impossible to predict how an app or mobile website might perform in 2 months time.

“Mobile First” promises to be a good read with some great insights into the mobile market. An excerpt from the book has been published on the A list apart website.

Cool jQuery goodies to help the SEO and UX on the new ION website

Ion Website Homepage

The ION website, see it at iongeo.com

Worked extremely hard these last two weeks to release this new website. Take a look at the SEO dropdown menu. The objective was to incorporate SEO text on the homepage of the site and at the same time increase the findability of deeper content. I decided to go for a jQuery rich dropdown menu with descriptions for many 2nd and 3rd level pages. One problem we encountered upon execution was that the dropdown menus would interfere with some sudden mouse gestures the user would make. We solved that by putting a small delay on the mouse-over state.
Check it out at iongeo.com.