앱과 진단기기의 UI/UX 기획 하는법이 달라?

들어가면서

보통 우리가 UIUX를 찾고 만든다라고 하면은 많은 사람들이 게임이라던지 앱 그리고 웹 개발 등과 관련하여 생각을 하곤 한다. 하지만, 이에 못지않게 UX라고 하는 것은 어디든 존재하는 것이며, 각 제품별 형태와 쓰임새에 따라서 다른 유저 경험을 전달해야한다.

 

훌륭한 디자이너는 조작을 어떻게 하는지를 명확히 하고, 그 조작을 보여주며
사람들이 알고자 하는 점을 잘 이용한다. - 도널드 노먼

---

전혀 다른 플랫폼에 다가 동일한 조작 방식을 만들도록 유도를 한다면 그것은 아무래도 몸에 어울리지 않은 옷을 입는것과 다름이 없을 것이다. 다른 화면 크기와 방식 그리고 사용환경에 대해서 나는 프로젝트를 진행하며 어떻게 리서치를 적었고 진단기기 UI를 설계시 고려했는지를 공유해보고자 한다.

 

한눈에 보이는가? (인지영역)

급작스럽지만 나는 UI/UX와 관련하여서 해당 백그라운드를 가지고 있지 않다. 오히려 이 프로젝트를 위해 선발되었던 가장 큰 이유는 내가 소비자와 가장 가까이서 이야기를 많이하고 그들의 이야기를 많이 경청했기 때문이였다. 그렇기 때문에 이 프로젝트를 해야한다고, 회사로 부터 제작 요청을 의뢰 받았을때 나는 빠르게 UX란 것이 무엇인지 정의내리고 그에 따른 기준을 성립해가야했다.

 

그렇기에 많은 점에 있어서 UX 디자이너 들의 포트폴리오와 철학들을 탐구했다. UX의 아버지 도날드 노먼은 사용자가 불편할 수 있는 부분들에 대해서 그들의 본능을 파악하고 그에 따라 때에 따라 단순하게 혹은 여러 기능을 배치함으로써 사용자가 제품을 잘 활용할 수 있도록 '의도적인 편리함'을 제공하는 것이 가장 중요하다고 하였다.

 

이에 따라, 나 또한 의도적인 편리함을 제공하기 위해서 가장 중요한 것은 사람들이 헤매지 않도록 제품을 한눈에 볼 수 있는 시야를 제공하는 것이 중요하다는 판단을 하였다.

 

한눈에 보이는 화면을 통해 의도적인 편리함을 제공한다

---

사용자가 필요로 할 수 있는 기능이 바로 눈에 띌 수 있도록 배치하되, 사람들이 헤매지 않도록 만드는 것이 가장 중요한 것이다. 그 점에 있어서 나는 시야각이라는 점에 먼저 집중을 했다.

 

인간 시야각

인간은 좌우 시야각이 180 - 210도 그리고 상하 시야각이 120도 내외다. 

인간의 시야각 출처: 위키피디아

그렇다고 해서 모든 부분을 한번에 스캐닝하는 것은 아니다. 시야의 경계선 부분에 대해서는 우리는 그다지 잘 확인을 하지 못한다. 인간은 본디 보고자 하는 대상을 시야의 중심부에 놓고 신경 쓰지 않는 부분에 대해서는 주변부에 위치를 시킨다. 즉, 시야의 중심 부분이 우리가 제대로 볼 수 있는 부분이라고 해도 무방하다.

 

조금 더 과학적인 이야기를 해볼까? 우리의 색채를 지각하는 원추세포는 황반에 집중되어 있다. 다만 망막 전반에 원추세포가 존재하므로 주변 색을 탐지하는데도 큰 문제는 없다. 다만, 이렇게 자기가 집중하는 부분에 대해서 색 변화에 대해 민감한 인간에게 주변부 색깔을 계속해서 변경하는 실험을 하면 어떨까?

다트머스대 연구자들의 시야주변부 색을 5초에 걸쳐 흑색으로 바꾼뒤 8초간 유지시 주변부 색 변화를 알아차리는지에 대한 실험 출처: 미국립과학원회보

 

결론부터 말을 하자면, 10도 이 내외의 영역을 제외한 나머지가 흑백으로 바뀌더라도 10명 중 3명은 알아차리지 못하였다. 즉, 우리는 이렇게 중심부에 있는 정보를 처리하거나 시야 내에 있는 부분에 대한 정보를 캐치하는데는 특화 되어 있지만 그렇지 않은 부분에 대해서는 정보를 그렇게 빨리 픽업 하지 못한다는 것이다.

 

시야각의 중요성

즉, 시야라는 것을 고려할때 인간이 정확하게 사물을 인지하고 색을 확인할 수 있는 중심시 (< 5-8°) 그리고 그 보다는 낮은 식별 능력을 가지는 황반영역 (< 18°) 그리고 그 외 부분에 대해서는 근 주변시 (> 30°) - (거의 사물 인지 어려움)로 이렇게 나뉘게 되는데, 사용자가 원하고자 하는 기능이 근 주변시에 있다면 제품을 사용하는데 불편함을 느낄 수 있다.

 

인지영역의 파악

그럼 결국 화면의 크기에 따라서 사용자의 인지에 문제가 없도록 내가 제공하고자 하는 디스플레이의 크기가 문제는 없는지 확인을 해보아야한다. 우리가 제공하고자 하는 제품의 크기는 8인치 였으므로 평균적으로 제공되는 모바일 크기 6인치와 모니터 사이즈 24인치와 비교를 했을때는 모든 역역에 있어서 황반시까지는 들어옴을 확인을 하였다. 

 

(나는 중심시를 8°로 설정을 하였다. 이는 UX를 디자인 하는 사람의 선호도에 따른 것이다. 그외의 각도는 모두 일반적인 기준들을 따랐다.)

 

스크린 크기별 인지영역 예시

 

사용 거리 파악

우리 진단기기를 사용하는 사람들은 대부분이 간호사, 임상병리사 혹은 의사들이다. 간혹 군인이나 특수 계급들도 존재한다. 하지만 무엇보다 그들은 전부 의료전문관계자 여러분들이다. 그 말인 즉슨 그들이 다룰 장비라던가 신경써야할 부분이 많다는 것이기도 하다. 

 

혹은 이렇게도 말할 수 있다. 그들의 경우에는 이 기기 앞에서 많은 시간을 보내지는 않는다. 주로 서 있거나 아니면 잠시 앉아서 앞에서 테스트를 하거나 하여 빠르게 다음 환자를 맞이하거나 아니면 다른 업무를 진행해야한다. 그럼 그들의 각각의 자세에 따른 진단기기와의 거리를 확인하여서 내가 가설로 설정한 인지영역이 정확하게 맞는지 또한 확인을 해야했다.

 

일단 진단기기를 사용하는 사람들의 경우 각각의 자세에 따른 거리는 다음과 같이 설정하였다. (최대 길이를 설정한거다.)

앉아있을때: 40cm, 서있을때: 60cm

이렇게 했을때 과연 그들에게 있어서 근 주변시 이내에 모든 화면이 다 확인이 되는가?

 

그렇다. 전부 다 영역내에 들어오는 것을 확인하였다. 최대 12 ~ 14인치 까지 근주변시 내 영역이 펼쳐져 있어 화면 내 컴포넌트를 찾는것에 대해서는 문제가 없음을 확인하였다.

 

입력 방식 고려 - 터치감

자, 진단기기의 경우에는 예전 10년전까지만 해도 감압식도 있었다. 내가 만들고 있는 제품의 이전버전도 그랬다. 근데 이제는 정전식이 대세이다. 감압식이 싸다는 장점이 있었지만 다음의 단점이 있었다.

1. 느린 반응 속도
2. 불편한 촉감
3. 무반응 (압력 필요)
4. 줌인 혹은 줌아웃 어려움

등과 같은 점이 있으니 결국 이번에는 LCD를 변경함으로 해서 정전식으로 가도록 하였다. 단가 상승이라는 부담은 있으나, 제품의 부품 공급과 수리면에 있어서도 정전식이 편하였으므로 이를 선택한 것이다.

 

사용자와 사용 환경에 대한 고민

진단기기라는 것이 여러사람이 사용하지는 않지만, 다수가 사용할 수가 있고 선임 혹은 후임자가 불시에 사용할 수 있는 제품이기도 하다. 그러다 보니, 개인화된 앱보다는 조금 더 고려해야할 부분들이 있다.

 

일단 사용자의 러닝 타임을 최대한으로 줄여줄 수 있도록 배려를 해야한다. 필요한 순간에 필요한 기능이 한눈에 보일 수 있도록 컴포넌트 등을 배치해 두어 실험자가 실험을 하는데 있어서 어려움을 겪으면 않된다. 또한 너무나 과도한 기능을 제공하는 때에는 해당 기능이 검사를 진행하는데 있어서 어려움을 겪게 만들지는 않는지 혹은 해당 정보를 관리하는데 있어서 필요한 추가 인력이 발생하지는 않는지, 또는 불필요한 탐색 시간을 걸어서 사용자가 기기를 이해하는데 어려움을 겪지 않는지 등도 고려를 해야한다.

 

공개적이지는 않지만 공개적으로 사용될 수 있는 제품. 또한 이 제품이 KFDA, FDA, 그리고 CE의 심사를 거쳐야 한다는 점을 고려한다면 소비자 뿐만아니라 해당 제품의 심사 시간을 단축 시킬 수 있는 방법을 찾기 위해 개인정보의 노출도를 최소한으로 만들어야 한다. 사용자에 차별성을 준다던지, 접근 레벨에 정보 열람 가능 여부를 확안하게 한다던지 혹은 인터넷을 사용하는 다른 기능들을 대체할 수 있는 방법 들을 찾아보아야 한다.

 

이와 더불어 이 제품이 출시가 되었을때, 영업팀은 어떻게 해당 제품을 쉽게 사용자에게 교육할 수 있는지 또한 여러모로 판단을 해야했다.

 

오늘의 마무리

진단기기는 확실히 일반인들이 다뤄볼 기회가 없는 제품이긴 하다. 사용자의 캐릭터 또한 매우 한정적이고 교육 또한 쉽지 않다. 하지만 그럼에도 불구하고 확실히 해야하는 것은 사용자의 목적에 잘 도달할 수 있도록 의도적이지만 편리한 사용법을 유도함으로써 사용자가 검사 결과를 도출하는데 어려움이 있어서는 안된다는것이였다. 지금까지가 제품에 대한 상세 부분을 디자인 하기전 고려한 사항이였으며, 이 후 이에 대한 이야기를 좀 더 해보려고 한다.

 

참고

주변시 정보 및 인지영역 - http://m.dongascience.com/news.php?idx=37825

시각 인지 관련 참고기사 - https://story.pxd.co.kr/1332

삼각형 변 계산법 - https://www.triangle-calculator.com/

제품 기사 - https://www.newswire.co.kr/newsRead.php?no=955340