Making your website responsive ≠ great usability!

stack_of_blocks

 

 

 

Aah – responsive web design – that great technique that allows the layout of a web site to adapt to the viewing environment.

 

 

If you view the site on a normal large screen, it looks good.
On a tablet, still looks good.
On a smartphone – still looking good.

BRO_ResponsiveDesign_BostonGlobe

None of the page elements are lost, they just get moved, or stacked, without becoming teenie tiny, to fit the screen they are displayed on.

It’s promoted as “providing an optimal viewing experience” and as being “a must for tablets and mobile devices”.

It’s all wrong

Well, my friend, I am here to tell you that as good as “responsive web design” might be, you still need to think about what people use your site for before you make it an “optimal viewing experience”.

Case in point (or “let me give you a real-world example”)

I live in the wops (also known as “middle of nowhere”, “the other side of the black stump”, “the back of beyond”).

That, combined with the fact that the house I live in has no telephone lines, means that I need to get my phone, and Internet, through a wireless broadband connection.

The homepage, of the company that provides this service, is a wonderful thing, and the top of the page displays pictures and promotional messages. If you scroll down the page, there’s more information on the products the company offers, along with a list of FAQs on the right side of the screen.

browser -1429703304606 - full - fade

Under the FAQ’s, the “network status” is displayed. This shows if there are any problem with the networks. It’s tucked down on the bottom right of the page, and you have to scroll down to it. No big deal. If I can view the web site, then I know that the network status is all OK.

If I can view the web site, then I know that the network status is all OK.

The site uses responsive web design. This means that all these page elements “stack” in a way that allows for that “optimal viewing experience”. On a smartphone, all the information is sill accessible. This is a wonderous thing, and butterflies and doves take to flight…

However, consider this…

When there is no problem with network, I work happily away online, and the company’s website is the last place I tend to go – I already have their product.

I want to check on the status of the networks. And do you know where I can find this? At the bottom of the responsive “optimal viewing experience” site.

When there is a problem with the network, I can’t get to anywhere on the network.

So I switch to my smartphone, and use the mobile network to open up their site. Do you think that I am interested in their products and services. No! I want to check on the status of the networks. And do you know where I can find this? Three quarters of the way down the responsive “optimal viewing experience” site. And to get there takes time… Not a lot I admit (when compared to a tree growing), but it still takes time, and makes that user experience a very poor one.

Here’s a image of the web site when viewed on my phone…

When viewing on a smartphone

Does it give me the sensation of an “optimised viewing experience“. No.

Several smart people at this communication company have clearly sat around a table, and decided that responsive web design is what they need. Or a web design company (in this case a “web design, app development and online marketing” company), convinced the them that “a responsive web would be really cool and if they didn’t have one, small puppies would start dying“.

This is where responsive web design is a Fail

Having one web site that is displayed nicely on all devices sounds like a great idea. There is only one set of code that needs to be maintained, and when content is changed, it only has to happen in one place.

The big thing, however, that promoters of responsive web design miss is that people have different needs when they view information on different devices. As shown in the example above.

What should be done.

The number one thing that should be done when redesigning a company website is …

Talk with the customer!

Find out what the user of the site are actually looking for when they view your site.

This can be done through a number of ways:

  • focus groups – talk with the customer
  • personas – create “categories” of users, each with its own reason for visiting the site.
  • surveys – talk with the customer
  • actual historic data – server logs, site statistics, etc. – see what the needs and uses of a customers have done in the past

Note – talking with the customers doesn’t necessarily apply to the “design” of the site, but more to the content used/information required. (Check this article out) 

Other useful articles

  • Meet Content – Web Focus Groups: Know Your Users, Know Your Content
  • Digital Current – Focus Groups: Marketing’s Oldest Technique Adapts To the Digital Age
  • WebPageFX – Website Focus Group Studies
  • Smart Insights – Web design personas
  • Step Two Designs – An introduction to personas and how to create them
  • JohnHaydon.com – How To Create User Personas for Your Website
  • Google – Google Analytics

Create a separate site that is especially designed for a mobile device

Yes, yes, I know that his is going against the current glassy-eyed trend. However, if you consider that needs and uses of smart device users is different from PC users, then it makes sense to have separate sites.

There is no need to make the entire site portable.

Responsive sites are, in the vast majority of cases, thin long versions of the desktop website, with the same amount and type of content and functionality that is optimized for the computer experience, not the mobile device and connection. There is no need to make the entire site portable. In the example given above, as a smart device user, I don’t care about the companies products.

Make a specific app.

Creating an app has its benefits. An app is generally dedicated. Because it is something installed on the device, it can take advantage of the phones hardware. As a result, better functionality.

And its something that the user wants (otherwise it wouldn’t be there).

However, the same principle applies here, as it does for a web site (be it responsive, or separate) – find out what the company wants. The company mentioned in the example above have an app that still does not provide me with the information that I want…the status of their networks.

More resources that are of value:

  • Worry Free Labs – Should Your Company Build a Responsive Site or a Separate Mobile Site?

Test, test, measure and test

During the process of designing the site/app, constantly run usability tests. Get feedback from “real” users. Make sure that what is getting made is what is actually wanted.

After the site/app goes live, keep testing…is it meeting user’s expectations? Is there room for improvement?

Measure the use of the site…there are several measurable metrics that give you valuable information how the site is being used.

Have a look at these resources for more information:

  • Nielsen Norman Group – Articles on Testing
  • Measuring U – Usability Testing & Analysis
  • Nielsen Norman Group – Articles on Metrics
  • Usability Net – Test & Measure

 

Conclusion

Whether you decide to have a separate mobile site, a responsive site, or an app….do your homework, and make sure that it is offering value to the user.

Otherwise, it’s just a waste of space, money, and time (yours and the customers). 

Useful Resources:

  • 10 PDF reports to learn about usability
  • The Truth about Responsive Website Design
  • What should I think about when working with a developer?

 

  • Ten tips for great usability on a business website
  • Looks vs. Function (usability, comfort). Which would you choose?

Getting Lost in a Wild SharePoint Site

In this post, I want to tell you about a unexpected,but interesting journey I have made.

——————–

Recently I was asked to help “trim” a SharePoint site that had become overly complex. The site was going to be migrated to a different domain, and the goal was to tidy up the site.

On first glances the site look harmless.

But once I started delving deeper, I could see that it was a jungle of sub-sites, interlinked in a strange M.C. Escher way.

To really get to understand how everything was connected, I decided to map it all out.

Using MindManager (it could have been any mind mapping tool – or even pen and paper), I started with the top site.

The beginning was easy, the path was clear. Things were

L O G I C A L.

Then as I got deeper, things started getting more complex. And, now and then, there were tricky little bits where I SharePoint Governance plan viralwould follow a path and suddenly find myself in a totally different area, feeling disoriented. Fortunately with the use of a good compass and a ball of string I had been unravelling as I went along, I was able to find my way back.

I made notes, I took photos, and  I saw some amazing things. (Unfortunately, my camera was damaged when I tripped over some metadata in one of the fields, so you’ll just have to take my word for it).  Slowly, over several days, I was able to map out the site (and sub-sites, and sub-sub sites).

The map was big, with lots of colorful lines showing relationships between the various parts, as well as highlights and comments. When you looked at it at its original size, it looked like some strange alien exoskeleton. It was not until you increased resolution that you got to see the fine workmanship.

My “client” was impressed with what I had done. The didn’t have MindManager installed, and when I tried to create a flash, or PDF version of said map, MindManager bailed on me. Thank goodness for the MindManager Viewer. At the time of writing, this had not been installed. I’ll know when it has been…I’ll hear lots of “Oohs” and “aahs” and other sounds one makes when one is impressed with something.

SharePoint map governance Note – artist’s rendition


Site Mapping Tools

Now, it may be that there are tools, or applications, out there that will achieve what I did, automatically.

Does anyone have any suggestions?

  • SharePoint Sites, Growing Like Weeds, Need Governance (pcworld.com)
  • AIIM White Paper on SharePoint Deployment (arnoldit.com)
  • SharePoint: On Premises and in the Cloud (arnoldit.com)