[UX] Case Study - The problem in Usability design for TV guide

As far as I know, some graphic EPG(TV guide) UIs has usability problem. They show the program thumbnails and icons to record or enter or schedule to record in the same screen. They can be the confusing usability problem to users, and need to make sure the scenario exactly in usability design work.

If you have an experience about using Digital TV, you might see this kind of UI for navigating some programs. We usually call it TV Guide or EPG(Electronic Program Guide). Today, when I worked at the company, we had a regular meeting with my co-workers. At that time, we discussed how to design EPG UI better than now.

I wish you could guess what we were stuck in some problems, and you could understand what the problem was. Of course, I am also going to give my suggestion to solve the problem at the end of this article.

I am just going to guess that you have enough experience about watching digital broadcasting. Let's talk about this situation now.

wireframe example of EPG
wireframe example of EPG page design

When you like to looking for some programs that you want to watch now or the future, you will enter that page, EPG. After then, you can see some program thumbnails in each channel like the picture above. As long as you like to see more information about the program, you will press OK button in your remote controller.

wireframe of program detail
wireframe of program detail page

If you pressed OK button before, you could see something in detail about the program like the image above too, and you can choose some options that you will watch or record the program, or record all programs.

Here is another EPG UI in searching for previous programs that you already recorded. By the way, can you find something different from the first picture though? If you find that, you must have a very good sight for sure. :)

The difference is a play icon. When you see this UI, what can you think? Ok. I think it's much better two options that you can choose. Just guess what will happen to you when you press OK button on this UI.

1) You can see a picture like the second image above.
2) You can play the program and watch it right now.

wireframe example of unclear EPG design
wireframe example of unclear EPG page design

I think there is no best answer, but I want to say that we can make something clearer than this case. I know some people answered the first option and the other people might have answered the second option because the icon was not so clear to show this information. I think the definition of the metaphor for the play icon was unclear to give an information.

If you have another good sight, you can find something strange in the third image above. When we see the programs of Channel A, one program doesn't include the play icon. Why isn't it? There was an error while the program was recorded, so that can't be played but it should be shown on the screen. That's why a UX engineer designed and used the icon for distinguishing them before users enter the detail page like the second image. I thought this approach was not so bed, but I had a question to him about that.

Do you think users can expect that they are entering the detail page, when they press OK icon in this case either? The third image is not the same case from the first image because there were the icons on the image. I just insisted that some people might imagine they can play that right now when they press OK button in the third case due to the icon.

wireframe example of unclear program detail page
wireframe example of unclear program detail page

However, truly the scenario was designed like the second image. That means some people can think they misunderstand this somehow when they encounter this case. In the engineering point, this approach is very simple because they don't have to change the scenario, and they reuse the code from the second case.

By the way, what's wrong with users? They may not know why this UI was designed like this and they should be learned by force even if they don't have any problems in their usages.

Thus, now I am giving an suggestion to change the UI to solve the problem. Of course, some people don't agree with this solution but I think this way can reduce some uncertainty when users do their tasks.

I recommend we can distinguish between the programs. Apparently, if the program can't be played, we can make that are is blurred or dim. You know if something is not so perfect, we usually use that way below, and also we can keep the way to show that users can navigate the detail information like the first image. That means we can follow the same rule in the whole scenario, and user can also guess what happen to them.

wireframe example of EPG page design suggested
wireframe example of EPG page design suggested

Some people think that showing everything is always good to users, but you could think about the problem. Showing or giving some information is for Usability to help users but sometimes that is not so suitable. Before you consider that, you should think about the negative point like making more errors to users with the case above. Be sure that sometime your intention will be working differently on users even though you think you were right.

Finally, I hope that you can find a good way to solve the problems near us. However, why do we think about the solution with a narrow sight? Listen to people's opinion, and open your eyes bigger than now. In that case, I am sure that you can find better solution to solve your problem than now.

See you next~

댓글

인기 게시글

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

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