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.

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.

Hyperlink your images, it’s easier for handheld devices

After experiencing my iPhone for the last 2 weeks, I noticed that the worst user experiences I had with websites were the ones with one-word hyperlinks. It is very hard to actually tap a one word hyper link if you have anything but the tiniest fingers. A solution for this is to make sure you link multiple words. Not only is this better for usability – you can actually describe what happens when a user clicks the link – it also increases the probability of ‘hitting the target’ on a mobile phone.

The best experience is when there’s a lot of white space around the link and/or where images are linked, for instance in big call-outs or sub navigation. When designing Greenstar-na.com, we tried to keep this in mind.
On the new Greenstar North America site we tried to make both the images and the section titles clickable, to make it easy for anyone not on a PC or Mac to follow the links.

What are your experiences with usability of websites on mobile phones?