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?

Why I hate CAPTCHA (or "I am a Human!")

I think that most people have, at one point, come across CAPTCHA (or similar), that small box that contains a distorted word that you have to type correctly.

Kill Captchas

This is done to prevent bots, or automated software from logging into sites, or filling in forms, etc.

What really bugs me about this approach (from a User Experience point of view) is “Why do I have to prove that I am human?! It’s putting the onus on me, as a visitor. The system should be putting the demand for proof on the bots!

Here are two excellent articles that cover exactly what I am referring to:

  • Time to Kill Off Captchas (Scientific American)

  • Beyond CAPTCHA: No Bots Allowed!

The Scientific American article discusses how, whenever there’s a problem in the modern world, we counter it by building barriers. Barriers that provide more inconvenience to genuine users, than for the “bad guys”.

Beyond CAPTCHA: No Bots Allowed!” goes into the problems that are encountered with CAPTCHA. How the distorted text is so hard to read, etc. It carries on describing alternatives that can be put in place. It was, however, in its conclusion that the author showed that he understood my pain, with this sentence:

Don’t make users take responsibility for our (site owners) problems.

This followed up with the succinct:

Bots, and the damage they cause, are not the fault or responsibility of individual users, and it’s totally unfair to expect them to take the responsibility. They’re not the fault of site owners either, but like it or not they are our responsibility — it’s we who suffer from them, we who benefit from their eradication, and therefore we who should shoulder the burden. And using interactive authentication systems such as CAPTCHA effectively passes the buck from us to our users.

 

Kapow!! There it is…don’t make the problem with bots, the responsibility of the users!

I agree totally! Do you?

(What are your thoughts on CAPTCHA?)

Captcha

  • Street View and reCAPTCHA technology just got smarter
  • A Gaming Replacement for Those Annoying CAPTCHAs
  • How Captcha Turned You Into a Data Entry Robot
  • The ‘CAPTCHA’
  • Apparently reCAPTCHA has Digitized All the Books
  • I hate captchas!

BA and UX specialist: A winning combination for superior results in software projects

Digital_composite_spring_1016

The following is from a blog post on Modern Analyst.com. It was written by Adriana Beal. I really like what she wrote, and with the kind permission of both Adriana, and Modern Analyst, I am reproducing the post here.

————————————– ~~~~ ——————————————

I’m a fierce proponent of a business analyst role separate from other roles, such as project manager. As I’ve written in the past,

In my experience as a consultant, the most successful projects typically have a business analyst and a project manager working together to accomplish project goals. Activities such as planning the work to be done, identifying and securing necessary resources, determining tasks that must be completed, assigning the tasks, delegating authority, tracking progress, etc., are the responsibility of the project manager, while the business analyst remains in charge of producing consistent, complete, feasible, truly needed, accurate, traceable and verifiable requirements.

But what about user experience or interaction designers[1]? Does every software project truly need a UX/UI specialist (or team of specialists)? Or could this aspect of the solution be taken care by the collaboration between the BA and the development team?

BA and UX specialist: A winning combination for superior results in software projectsNot all software projects will require a UI/UX designer. For example, a project enhancing a system that already provides good usability, implementing changes with zero or little impact in the way users interact with the system, can be successfully completed without the intervention of a UI specialist. This would be the case of a project created to implement massive changes in the business logic that calculates the price of airline tickets, but with no effect in the screens customers use to check prices and purchase flight tickets.

In many other types of software projects, however, the quality of the user experience may have a huge impact in user adoption rates, time-to-market, customer loyalty, and future costs with end-user support and application maintenance, among other aspects that are important for the business. Table 1 illustrates how the UX designer role complements the tasks performed by the BA to provide the right foundation for the work of the technical team responsible for implementing a software solution.

  Business Analyst User Experience Designer Implementation team
Main focus Business problem assessment

Requirements discovery and documentation

Information Architecture

Visual Design

Interface design

Usability

Prototyping*, system architecture, data modeling**, technical design, programming

* If not executed by the UX specialist

** If not executed by a data-focused BA

Main deliverables Requirements documents, business rules Wireframes, visual comps, results of usability tests System architecture and technical design documents, code
Examples of decisions How to go about the requirements discovery process (interviews, workshops, etc.), when the requirements are considered “done”. What to align 
with what in an interface, when to use techniques like contrast and proximity to group and segregate 
items in a display.
Which data structure (e.g., simple partitioning, associative array, 10-ary tree) to use to represent the content a large flat text file.

Table 1: How the BA and UX roles complement each other.

Arguably, a BA and a developer can work together to figure out the user interaction elements of a software solution on their own. That’s what happens in projects when there isn’t a budget or interest in bringing a UX specialist to the team. A BA may create wireframes the developer uses to produce the screens, and the developer may be responsible for decisions such as when to use a button vs. a link, or radio buttons vs. a drop-down menu to provide options to users. There are two main problems with designing the user experience in a complex software project without the help of an UX specialist, though:

  • Trying to recruit a single individual with all the skills necessary to be at the center of a systematic approach to defining a solution for the business problem (BA role) or effectively coding the specified solution (developer), who is also knowledgeable in information, interaction, and visual design, as well as cognizant of the advantages and constraints associated with the interface of various types of devices that will be used to access the application, and capable of designing and executing effective usability tests, (UX specialist), is almost like trying to hire a modern-day Leonardo da Vinci.
  • Even if you could find such a talented professional, there’s still the problem of competing demands for her time and attention.

Imagine you are in the middle of a project in which everything is going well (the business stakeholders have approved the requirements and the proposed look-and-feel, and the initial prototype built to confirm the solution was fit for purpose was a success). As the developers work on the final code, they discover that there is a problem with a data feed, which at times may prevent all the expected data to be included in one of the reports the application is to provide.

A solution must be found quickly to avoid costly delays in the project. The BA immediately starts to work on understanding and communicating the issue, as well as analyzing the alternatives to propose to the business stakeholders. Meanwhile, realizing that the report will have to include some sort of visual indication to alert users whenever the data set they are viewing is incomplete, the BA engages the UX specialist to begin thinking of how best to convey the information in the screen (using color codes? a warning message? an icon that when tapped or clicked opens a pop-up message explaining the issue?). In parallel, the developer will be working on the logic necessary to validate whether all the expected data was received in the last feed, or a subset is missing, thus requiring the warning to be displayed for users.

With each professional working on one aspect of the solution, it’s much easier to ensure the issue will receive the best possible treatment in the shortest period of time. In a case relatively simple like this, if time wasn’t an issue, it might be relatively easy for the BA and developer to work together and achieve a solution that was fit for purpose. But if time is limited, or the issue would have a more substantial impact in the user interaction design, having a UX specialist involved may become crucial to avoid creating a system that does what it’s supposed to do, but is so hard to navigate or complete a task with, that users refuse to adopt it.

Investments in usability can easily translate into better profit margins, sales/employee, success rates of new products, customer satisfaction, repeat purchase rate, dropout rate, length of new product introduction cycle, and more. Even a 5% improvement in success rate of a checkout process in an ecommerce website, driven by usability improvements, may represent millions more in revenue for the business. Likewise, cutting in half the time an employee takes to find a physician in the system to refer to a patient may create savings of millions a year for a healthcare company.

Creating an easy to use and pleasant user experience is a collaborative effort. In many of my projects, after seeing the visual comps a talented UX specialist designed, I’ve made a suggestion to reorganize the elements of a screen that was accepted and incorporated into the visual design. Or, during user acceptance testing, a user has asked for a change in color or size of buttons after using the application for a while. The key contribution a UX specialist brings to a project, though, is a deep understanding of UX principles, and the ability to bring together multiple viewpoints to “connect the dots” and do what’s right for the end users.

Smart companies know that ill-conceived software products end up costing them millions (if not billions) of dollars and many headaches. Some companies put UX specialists in charge of product requirements, some hire a BA to take care of the requirements and expect the project team to collectively make the interaction and visual decisions. Smarter organizations know that the combination of BA + UX offers the best approach to ensure that their software projects have a shortened programming time and delivers a superior product. Together, a business analyst and a user experience designer make it much easier to produce feasible-to-build, easy-to-use, attractive product that enables the user and the business to achieve their end goals. Their combined efforts make it possible for software developers to keep focus on the technical challenges of creating quality code for a well-designed software product that does complex things simply.

Author: Adriana Beal received her B.S. in electronic engineering and MBA in strategic management of information systems from two of the most prestigious graduate schools in Brazil. For the past 10 years she has been offering consulting assistance throughout the software development life cycle for organizations implementing large, complex software projects.


[1] Interaction Designer, User Experience Designer, and User Interface Designer are usually interchangeable job titles. UI can be seen as a subset of UX — it focuses on how you interact with an application, while UX is the sum of all that you experience with the application. For example, for the same UI to select and and play a video, you could have a different overall user experience depending on delays associated with video streaming, the sharpness of the images based on screen resolution, etc.

  • BA and UX specialist: A winning combination for superior results in software projects (Modern Analyst.com)
  • The myth of the “UX designer” (elliotnash.me)
  • Why Business Analysis Fails the User Experience (versionux.net)
  • SWOT analysis on websites and mobile apps with usability testing (e27.co)
  • What is UX? (alikaspar.com)