온 오프라인에서의 포카요케 사례

포카요케란 무엇인가?

포카 요케(ポカヨケ, Poka-yoke)는 원래 일본어로 “실수를 피하는”이란 뜻입니다. 이 용어는 토요타의 '시게오 신고'에 의해 품질 관리의 측면에서 실수를 방지하도록 행동을 제한하거나 정확한 동작을 수행하게끔 하도록 강제하는 여러 가지 제한점을 만들어 실패를 방지하는 방법을 말하는 용어가 되었습니다.

예를 들어 자동차에서 기어를 주차 상태 위치인 “P”로 놓지 않으면 시동이 걸리지 않도록 만들어 운전자가 자동차를 안전하지 않은 상태로 놔두고 나가는 것을 방지하도록 하였습니다. 또한 컴퓨터에서는 USB 장치의 플러그를 꼽을 때 뒤집어진 상태로 꼽으려고 하면 작동이 안되도록 디자인 되어 있습니다. 인지 심리학 및 인간과 컴퓨터 상호작용 분야에서도 이를 이용하여 여러 가지 실수를 방지하는 디자인 원리의 하나로 받아들여져서 이용하고 있습니다.

[출처: 한국 위키피디아]

본 블로깅에서는 실생활에서의 포카요케 사례를 찾아보고, 이를 온라인에서 어떤 방식으로 적용하고 있는지 그 사례를 알아보고자 합니다.

[그림1] 배터리

포카요케의 사례 1. 배터리의 앞 뒷면 구분

앞에서 언급되었듯이, USB의 장치의 플러그는 뒤집어진 상태로 꼽으려고 하면 작동이 되지 않습니다. 배터리의 경우 이와 같이 앞 뒷면 구분을 하고 있습니다. 그러나 앞 뒷면을 끼우는 공간 자체가 구별이 잘 되지 않을 때가 많습니다. 또한 배터리를 2개 이상 끼우게 되는 경우가 있습니다. 배터리를 2개 이상 끼우는 경우에 어떤 것은 위쪽으로만 끼우게 되어있고, 어떤 것은 위쪽 아래쪽을 번갈아 끼우게 하고 있습니다. 이를 배터리나 꽃는 면에 + - 로 표시하고 있습니다만, 매번 끼울때마다 헷갈리는 경우가 있더군요. 마이크로소프트 사 에서는 이러한 불편을 없애기 위해서 아예 배터리의 앞 뒷면을 구분하지 않고 어떻게 끼우더라도 작동할 수 있는 특허를 냈다고 합니다.

[그림2] 전등 스위치

포카요케의 사례 2. 전등 스위치 온 오프 구분

집에서 흔히 불을 켜는 스위치를 켜게 됩니다. 스위치가 많을 경우에는 어떤 것이 켜졌는지, 꺼져있는지 혼동을 하는 경우가 종종 있습니다. 전등 스위치는 이를 방지하기 위해서 스위치에 홈을 넣어서 인지를 할 수 있게끔 하고 있습니다. 홈을 보여주는 것에서 그치치 않고, 켜져있는 경우 불빛이 들어온다던지 하는 방법을 사용하여 좀 더 인지하기 쉽게 만들기도 합니다. 

[그림3] 아이폰 온오프 버튼

아이폰에서는 온오프 버튼을 전등 스위치 형태의 메타포로 사용하고 있습니다. 다만 스위치 형태가 너무 추상적이기 때문에 이걸 켰는지 껐는지 학습하지 않고는 가끔 헷갈릴 때도 있습니다. 이를 방지하기 위해서 좀 더 스위치 형태를 보여주는 디자인도 제안되고 있습니다.

[그림4] 샴푸와 린스

포카요케의 사례 3. 샴푸와 린스의 구분

샴푸와 린스의 구분에 대해서는 예전에 따로 블로깅하려고 생각해둔 예제입니다. 마트에 가보면 샴푸와 린스를 동일한 색상 및 디자인으로 처리하는 경우가 있습니다. 하지만 이것은 사용성 관점에서는 별로 좋지 않다고 생각합니다. 저의 경우 시력이 좋지 않기 때문에 머리를 감을 때는 안경을 벗습니다. 이 상황에서 샴푸와 린스의 구분이 잘 되지 않아서 실수로 린스를 먼저 사용하게 되는 경우가 종종 있습니다. 이런 상황을 방지하기 위해서 아예 샴푸와 린스의 색상을 다르게 처리하는 경우도 있습니다. 또한 샴푸와 린스의 상단에 샴푸인지 린스인지 이니셜로 표시하는 경우도 있더군요. 어떤 마트에서는 이런 상황을 알고 있지만 어쩔 수 없다는 듯이, 샴푸와 린스라고 표시된 스티커를 따로 붙일 수 있게 제공 하고 있습니다. 이런경우에는 확실하게 색상 및 디자인을 차별화하여 사용자가 실수하지 않도록 했으면 좋겠습니다.

[그림5] 미투데이의 실시간 유효성 검사 폼

포카요케의 사례 4. 실시간 유효성 검사 폼

이번에는 온라인의 사례를 보시겠습니다. 인터넷으로 물건 구매시에 인류의 적 '엑티브엑스' 때문에 모든 결제정보를 입력 한 뒤에, 결제정보가 날라가는 경우를 심심치않게 봅니다. 이는 포카요케를 고려하지 않은 불친절한 UI라고 생각합니다. 또한 인터넷에서 회원 가입할때 잘못된 정보가 있을 경우 아예 입력 폼을 지워버리고, 새로 입력하라고 나오는 고약한 UI도 종종 있습니다. 

이런 경우 '실시간 유효성 검사 폼'이 포카요케를 고려한 좋은 UI 라고 볼 수 있습니다. 사용자가 잘못 입력하더라도 실시간으로 보여주기 때문에, 실수할 여지가 많이 줄어듭니다. 물론 실시간 유효성 검사를 개발하기 위해서는 개발 시간 및 비용이 추가로 발생합니다. 실시간 유효성 검사를 하기 위해 화면 로딩 속도가 느려질 수도 있습니다. 사용자를 위한 방법이기는 하나 이 방법으로 인한 득과 실을 명확하게 파악하고 소신있게 기획해야 할 것으로 보입니다.

[그림6] 구글의 자동완성 기능

포카요케의 사례 5. 자동완성

실전 UX 디자인 책에서도 포카요케의 사례를 다루고 있습니다. '자동완성(Auto complete)' 기능이 이에 해당합니다. 검색을 할 때 자동완성 기능을 이용하면 사용자가 기다릴 필요 없이 원하는 정보를 더욱 빠르고 정확하게 찾을 수도 있습니다.  하지만 이 책에서는 자동완성 기능이 항상 유용한 것만은 아니라고 지적합니다. 

1. 자동완성은 화면을 보지 않고 키보드를 치는 사용자에게는 무용지물이다. 

2. 사용자가 입력하려던 검색어를 버리고 자동완성 기능만 사용할 수도 있다. 

3. 문장으로 검색할 때나 상세한 내용을 검사할 때는 자동완성에 나오지 않는 검색이 더 정확할 수 있다. 

4. 입력한 단어가 너무 짧을때도 자동완성이 빛을 발하지 않는다. 

5. 사용자의 검색 의도와 다른 자동완성 검색어는 의미가 없다. 

6. Ajax 나 DHTML을 이용하는 경우에는 사이트의 접근성을 고려해야 한다. 

[출처 : 실전 UX 디자인 - 9장 자동완성의 위력과 함정 p.67~72]

이와 같이 포카요케를 위한 기능을 추가할때에는 기능 추가로 인해 잃을 수 있는 부분도 같이 고려하여야 겠습니다.

글을 마치며

다음과 같이 오프라인에서의 포카요케 사례와 온라인에서의 포카요케의 사례를 알아보았습니다. 저의 경우에는 UI 기획을 할때 이를 주의깊게 따지는 편입니다. 이를 테면 위시리스트에 담은 물품의 경우 위시리스트에 담았다고 보여지고, 버튼이 비활성화 되어 아예 클릭이 되지 않게 하는 방법을 선호하는 편입니다. 위시리스트에 담은 물품을 그래도 활성화하여 보여주면 결국 사용자는 한번 더 클릭을 해봐야되고, 좀 더 친절하게 하려면 팝업을 띄워 알려주어야 합니다. 하지만 저는 그런 방식 자체보다는 사용자가 애초에 클릭을 하지 않도록 만드는 방식이 좋다고 생각합니다. 

모바일 실무 전문가 모임인 Moux 에서는 포카요케 디자인 방법을 경고, 복구, 우회, 통과의 4가지로 분류하였습니다. 저의 경우에는 상황에 따라 다르지만 기본적으로 우회의 방법을 선호하는 편입니다. (여기에 나온 사례들도 우회를 중심으로 찾아보았습니다.) 만약 우회로 불가능한 경우에는 경고하고, 정말 중요한 정보라면 복구의 기능이 추가로 필요하다고 생각합니다. 

자칫하면 포카요케를 고려한 디자인이 실수방지가 아닌 사용자가 할 수 있는 범위를 제약하거나 혼동스럽게 만드는 요인이 될 수도 있습니다. 휴지통에 삭제를 하려고 파일을 넣었는데, '삭제하시겠습니까?' 라고 물어보는 UI가 과연 옳은 것일지 생각해 보시기 바랍니다. 사용자를 제약하지 않으면서도, 실수를 하지 않도록 배려할 수 있는 친절한 UI 사례가 온/오프라인에서 많아지기를 기대해봅니다.

*덧. alankang  님의 포카요케에 대한 부연 글도 더불어 읽어보세요. alankang 님은 시게오싱고의 포카요케의 정의에 접근해서 이야기 하고 있습니다. 이 글에서는 포카요케에 대해서 확대 해석한 부분이 없잖아 있고, 포카요케에 대한 부분을 좁힐 필요가 있다고 판단되는 바입니다.