이전글에 UI 디자인의 전략적 디자인에 대해 이야기한 바가 있다. 전략적 접근은 다시 말하면 사실의 근거 하거나 과학적 추론에 근거 하여야 한다. 수박 겉핥기 정도의 지식임에도 매우 유용한 과학 이론이 있으니 디자인에 삼각함수이다.
UI 디자인에 삼각함수
간단하게 정리 하자면 인간의 눈은 판독성이 좋은 구간(각도)이 있는데 그 외의 구간은 형체만 확인 하거나 그 생상을 확인 하는 정도 이다.
우리 눈은 모든 영역에서 동일한 시력을 구현할수 없다는 이야기다.
그렇다면 우리눈이 판독성이 가장 좋은 부분은 어디일까 ?
연구결과 눈의 정면을 기준으로 좌,우 10도 즉 20도 의 영역이다.
그렇다면 간단한 수식으로 우리가 바라보는 시각물에 대해 판독성이 매우 높은 구간을 알수 있지 않을까?
난 시야각을 좌, 우 20×2 즉 , 40도의 영역으로 예상하고 거리는 디바이스를 터치하는 거리를 50cm 로 측정하여 삼각함수 수식에 적용해 보았다.
예를 들어 요즘 대두되는 키오스크의 경우 가장 최적의 판독 공간을 계산해보도록 하자
일단 우리가 알아야할 정보는 다음과 같다
- 눈과 디바이스의 거리 (사용자 팔의 길이)
- 눈의 생물학적 판독 영역 (시야각)
즉
거리와 각도를 알면 삼각함수를 계산할수 있다.
UI 디자인에 삼각함수 계산방법
1. 거리(팔길이) 측정
먼저 눈과 디바이스의 거리를 측정해 보자.예를 키오스크로 들었기 때문에 터치에 대한 고려도 해야한다.
필자는 사이즈 코리아(https://sizekorea.kr/) 에서 13세 여성의 팔길이를 검색 하였다.
13세 여자신체 사이즈에 적당하다면 거의 모든 사용자에게 대응 하리라 판단 하였기 때문인다.
대략 500mm 로 측정 되었다.
오차가 있겠으나 500mm 정도면 터치하는 사용감에 무리라 없다는 판단이다.
2. 각도(시야각) 측정
여러 학술지나 기술관련 연구자료를 찾아보면 지배적으로 30도 정도가 사람이 인식하는(집중하는) 시야각임을 알수 있다.
자 이제 산수의 시간
길이와 각도를 알았으니 가장 판독성이 높은 영역을 찾아낼수 있다.
B의 각 = 30도, a=500mm 그럼 b의 값은? https://your-calculator.com/math/triangle/right-triangle
계산해 보니 280mm터 정도 이다
모니터를 세로로 보는 키오스크의 경우 가장 많이 사용되는 27인치를 기준으로 고려해 보자
세로 33센티, 가로 60센티 정도이다. 위 계산값을 적용하면
위 그림과 같은 영역의 판독성이 높은 영역을 계산해 낼수 있다.
해당 영역에 주요버튼 및 UI요소들을 배치하면 매우 판독성이 높은 인터페이스를 구현할 수 있다.
여러 요소들을 고려하여야 하겠지만 서문과 같이 디자이너가 수박겉핥기라도 기초 이론을 근거로 디자인한다면 설득력과 신뢰를 확보할 수 있다.
이후의 배치는 이글을 보는 여러분들의 몫이다.
참고로 난 그다지 비주얼이 출중하지 못한 디자이너이다. 따라서 그 외 시각전략 과 행동경제학적 이론에 무게를 두고 프로젝트를 수행하고 있다.
이전글에도 이야기기했듯 전략적 접근을 위해 매우 유용하다.
insight
키오스크는 물리적 사용성을 고려해야하는 디바이스 이다. 기초 단계이지만 수학적 이론과 생물학적 이론이 우리가 만든 디바이스의 사용성을 극대화 할수 있다.
정확한 문제의 원인분석 과 취향을 배제 하고 이론적 배경이 백업해 주나면 성공적인 UI 프로젝트이지 않을
역시 다지인은 공부가 많이 필요한 직업이다.