[UX] Case study – A wrong designed scroll page

These days we should carefully consider the scroll page design after we started to design mobile page at the same time. If we don’t consider this point, users may be very upset to get to the footer area after the list in the page. The List area will be expanded after that is refreshed. I have seen lots of cases having this kind of problem on their services, and they are irritating more than just upset for sure.

I don't know when this kind of UI and behavior was applied to many web sites. I think this approach was started from Facebook style design for mobile especially.

Of course, on mobile, the size of the screen is not enough to show all  contents at once. That's why they needed to get rid of footer area from that. Originally, footer area has kept in the same position for a long time in UI industry. Many expert consider it's a kind of golden rule that bottom area is for footer.

However, Facebook changed suddenly this approach in their service.

1. What's the problem?

Honestly, there is still an area for footer in many service web site. You can see the image as below. Can you imagine what happens to you when you try to approach the footer menu?

wrong scroll page design collapsed
wrong scroll page design collapsed

When you almost get to the footer menu, system is starting to load more contents automatically, and then the footer area is going down before you select the menu in the area. (You can see this situation with the image as below.) Of course, you can still see the footer area though. Moreover, you can also guess what happens to you again.)

wrong scroll page design expanded
wrong scroll page design expanded

Oh ya. when you try to approach the footer area, the same situation is happening again and again. What the hell this situation ends when there is no more contents to load. Then finally you can catch the right menu in the footer area. Can you understand why this is happening? Many designers have said to me that they don't like the footer area because that's a kind of limitation to design the page. I can agree with that somehow but what this is going on to users. In that case, they said there are just few users to approach the area. I also know that but if that's not the reason to design such a stupid UI action. At least, they designed the area like the original style, they should have considered that they don't make users are frustrated to the design. That's the most important point that you design it, and you should consider all cases. That's your responsible for your design and users at least.

I think this is just a reason to show the page more elegant, but you know what this is not just elegant at all. This mistake occurs so often from designers and developers to make their work easier and more elegant.

2. Good practice

I think here is a good practice to solve this problem.  This service site should have applied this UI and action to their web site and mobile site at the same time, so they drastically move the footer area to the top side like the image.

I think many of designers can hate this design, and I can also understand it somehow. However, I believe this approach is very nice and innovative. Some people can also say how users know the area is for footer at the first time. Surely, users are wondering where the footer area is, and they looking for that. Before they learn this, they can be frustrated with it at least, but they are never done again next time.

In other hands, in the upper case, even if users know where the footer area is and how to access that, they can't do that easily and they have to be frustrated again and again.

Do you think which UX is better for you?

improved scroll page design
improved scroll page design

I am sure this approach solve all problems for mobile and web like multi-modal service UI and also the users' problem.

Do you think this is not cool? I think it is. This is UX and we should go to this kind of approach when we design UI.

댓글

인기 게시글

[오류해결] KMS 인증(Activation) 오류(error) 0xC004F017 문제 원인 및 해결 방법

[오류해결] 카카오톡 PC 버전 접속 오류(일시적인 장애이거나 네트워크 문제일 수 있습니다. 잠시 후 다시 이용해 주세요. 오류코드 70101, 11002, LL)와 다음(daum.net), 티스토리(tistory.com) 접속 오류(오류코드 DNS_PROBE_FINISHED_NXDOMAIN) 문제