Responsive design – what you see is what you get

Jenny stared at the man in the dark glasses sitting 2 inches away from his computer. He was the first visually impaired person on the usability test for the new website they were developing. The only thing visible on his screen was a giant Home button and the upper left corner of a picture. It was the picture the team had chosen with great concern.

– Well, this looks like a nice site, he said and clicked on the Home button.

Now the screen showed the Home button and the upper left corner of another picture. How was he to know whether this was a nice site or not? With the zooming level he used he missed the whole message. All their thoughts about how each page would be experienced from a user perspective were lost.

– Let’s see what we have here, he said and scrolled downwards and then horizontally to the right. Jenny noticed he just missed the search field right above.

– What if you try to zoom out a bit to see the rest of the page? she suggested eager to help him.

-Aha, you mean there’s more than this? he said with a doubtful voice and turned his head towards her.

– Sorry, just a nearly-blind-man-joke, he continued with a laugh. There is no use for me to zoom out. The text gets too small then and impossible for me to read.

Most certainly he would never return to this site again. Why would he? It would take him ages to just find the search box.

On her way back to the office she decided to try and find a place open for vaccination prior to her trip to Africa next month.

She picked up her phone and googled “vaccination yellow Fever”. The first hit sounded like a vaccination centre. She clicked on it.

“Sorry, but the page you are looking for doesn´t exist in this mobile version. Would you like to visit our full website version instead?”

Would I? No idea. I want a vaccine against yellow Fever, she frowned and clicked on the link for the full website version.

At the full website version of the vaccination centre, the text was so small she had to zoom in a lot. In fact, the only thing she saw on her mobile screen after zooming in was a home button and the upper left corner of a picture.

-Hmm, let’s see here… Where would I find the information about opening hours? Is it further down? To the right? Further down to the right? She swiped downwards and horizontally.

-Alright, this will get me nowhere and will take me forever, she said angrily to herself.

Her words from earlier today echoed in her head:
“What if you try to zoom out a bit to see the rest of the page?”

– The text gets to small then and impossible for me to read, she answered herself and stared at her phone showing a glimpse of a full website version.

Source: www.responsinator.com

How much of your message gets through to your visitors? Some argue that a mobile version showing a selection of your content with links to the full website is the way to go. But the cross-linking and zooming will disrupt the user’s journey to his answer. With a separate mobile version you may also end up with one extra content baby to feed and take care of.

Why only provide some of your content in excellent vision?

Be responsive. Give your users a full and satisfactory experience no matter what device or tools they need.

User scenarios – a powerful tool for higher conversion rates

What would you call the story of a user who wants to perform a task and fails? Some call it user scenarios but for me they are best describes as “situationas”. Situationas (or user scenarios) are stories that express user needs in a context. Whereas personas are focused on characteristics of users, situationas focuses on characteristics of user situations. It consists of three integral parts:

Who needs to do what and how well they are performing it today.

The situationa of Lisa below tells you nothing about who she is married to, what her interests are or where she lives. It only focuses on what she is trying to complete in her current situation.

Lisa needs to place reviews on remaining students
Lisa is in a hurry when she logs on to the school web. She clicks on the heading “class list” and sees the names of all the students in her class. The list view doesn’t say if a review has been placed or not. She clicks on the name Alice and sees that she has already given her a review. She continues to Oliver. After clicking on his name, she writes a short review about his achievements before its time to head back for class. On her way back to the classroom she realizes that she once again forgot to specify that the review concerned “fall 2011” which means Oliver parents will not find the review where they expect to find it.

Situationas can be effective when:

  • You need to visualize and explain why and where your website isn’t meeting your users goals
  • You or other members of your team need to decide how to improve your website in a way that increases conversion rate

You might argue and say that this sounds just like a use case or a user story. A user story tells you who wants to do what and why. A use case visualizes the steps necessary for a user to complete a goal. A situationa on the other hand helps visualizing obstacles present on the actual path your visitors take on your site today. These obstacles might be known to the ones performing user tests or analyzing web statistics. It is what you do next that is crucial. Do you come up with a solution to the obstacles right away or visualize the them to other team members or clients? By telling the story of your user’s situation you will include more people, more brains 🙂 in coming up with the best solution.

Consider the example below when two team members discuss a certain feature they are about to develop:

“Why are we placing an icon here?” “Lisa needs to see who she has reviewed on an aggregated level” versus “No idea. Maybe someone decided that icons look nice on this site”.

Which case would you rather solve?

By combining user scenarios (or situationas :-), user stories and use cases, you’ll get powerful tools for understanding the nature of the user needs, the reason why they want to perform a task and how to design the quickest path to complete the task without obstacles.