Empathy, data and responsiveness

Now our days everyone knows the importance of have a responsive web site or a mobile version of it, but the truth is that only be responsive is not exactly the best solution. It has to be the best for its users. What do they need to come first when comes to a fast access by the palm of their hands? What is the information that you want to highlight and the information that they want to?

 

Background

Recently I was working on the front end development of University of Vila Velha web site and I had to face a situation that motivated me to write this article. We are using bootstrap framework here and we have a page that has a 2 rows with 3 columns each. The third column in the first row is a special box where users are able to login into a student dashboard.

 

When we were planning this page we realized through Google Analytics data that more than 50% of our traffic were students that only wanted to access the student dashboard. Aligned to this, we wanted to make our students to be updated with our news about the university. So we created this page where, to access the student area, the students were exposed to the news.

 

So great so far…

This login box at the first row and third column was a great solution. But, if you know bootstrap, when it get to a resolution for mobile phones and tablets, it would break and the most important item of the page for my users wouldn’t be at the first fold, like this:

 

So, when comes to a situation like this, where I have to put in a balance the users needs and the institution needs I went back to the core of user centered design concept and provide to my final user a good experience, instead of demand from them a learning curve or causing a frustration feeling.

 

The Solution

To solve this problem I applied a great and simple css solution: the order property. “This property specifies the order of a flexible item relative to the rest of the flexible items inside the same container”(w3school). So I just set all my dynamic news as “Order:2” and the magic is done:

Doing it I was able to avoid frustration and bad experience of a lot of users. It’s a simple example of user centered design and user experience and it’s also very important for your business that you put yourself in the users position and trust in the data you collect.

Remember: empathy for your users is the key for a great project.