디자이너가 알아야 할 UX 법칙 10가지 (1)
당연해서 잊기 쉬운 원칙들
오늘은 존 야블론스키(Jon Yablonsky)의 UX 법칙 10가지중 일부를 소개하려고 합니다. 시작부터 “법칙”이라는 말에 거부감이 드실 수도 있겠습니다. 물론 여기서 말하는 “법칙”은 법률적 의미의 법칙은 아닙니다. 이걸 지키지 않는다고 경찰에 잡혀가지도 않습니다. 그보다는 더 나은 프로덕트를 만드는 데에 도움이 되는 인사이트라고 봐주시면 됩니다. 프로덕트를 만드는 사람의 의도가 아닌, 사용하는 사람들이 실제로 생각하고 행동하는 방식을 행동 과학을 기반으로 연구하여 엄선된 인사이트들을 소개합니다.
1. 야콥의 법칙 (Jakob’s Law)
사용자는 다른 모든 사이트와 동일한 방식으로 작동하는 것을 선호한다.
우리는 새로운 프로덕트를 디자인할 때마다 혁신적인 것을 만들고 싶어 합니다. 그러나 이용자에게 이미 익숙한 규칙을 기반으로 디자인한 것이 가장 좋은 방식이 될 때가 많습니다. 사람들에게 친숙한 인터페이스를 제시해야 사용자는 필요한 작업을 빠르고 쉽게 수행할 수 있기때문이죠. 따라서 타당한 이유가 없다면, 이용자에게 익숙한 어포던스와 인터페이스를 사용하는 것이 더 낫습니다.
유사한 프로덕트에서 확립된 디자인 패턴을 활용해 보세요. 사람들이 예상하는 위치에 로고, 메뉴, 버튼을 배치하는 겁니다.
보편적으로 사용되는 아이콘을 활용해 보세요. 예를 들어, 돋보기 아이콘은 이용자에게 보편적으로 검색 기능을 사용할 수 있다는 어포던스를 제공하죠.
2. 힉스의 법칙 (Hick’s Law)
선택지의 수가 많을수록 선택하는 데에 더 많은 시간을 쓴다.
프로덕트를 만들때 가장 흔한 실수 중에 하나는 많은 기능을 제공하려 한다는 겁니다. 그러나 더 많은 선택지를 줄수록, 이용자는 더 많은 결정을 해야 합니다. 그건 이용자 입장에서 프로덕트를 이용할 때 더 많은 인지적 노력이 필요하다는 뜻이고, 그건 그다지 즐거운 일이 아닙니다. 실제로 사람들은 적은 선택지가 주어졌을 때 자신의 결정에 더 나은 기분을 느낀다고 합니다. (선택의 역설)
단순함을 유지하세요. 이용자가 꼭 알아주었으면 하는 핵심 콘텐츠 주변을 깔끔하게 남겨 두세요. 사용자의 주의를 산만하게 하거나 과도한 인지 부하를 주지 않도록 해야 합니다.
사용자에게 가치있는 선택지만 제시하세요. 예를 들어, 티셔츠를 구매할 때에는 색깔, 사이즈에 대한 선택지만 있어도 충분합니다.
3. 목표-가속화 효과 (Goal-Gradient Effect)
목표에 접근하려는 경향은 목표에 근접할수록 증가한다.
시작이 반이라는 말이 있죠. 그만큼 무언가를 시작하겠다고 마음먹는 게 어렵다는 겁니다. 게다가 앞으로 얼마나 더 노력해야 하는지 가늠할 수 없다면 막막해지죠. 이용자들에게 프로세스가 얼마나 진행되었는지를 보여줌으로써 이용자들이 프로세스의 도중에 포기하는 것을 방지할 수 있습니다.
진행률을 시각화하여 보여주세요. 예를 들어, 예약 또는 결제 프로세스의 단계를 보여줄 수 있습니다.
시스템이 이미 알고 있는 정보에 대해서 인풋필드를 자동으로 채워주면 좋습니다. 사용자가 프로세스가 더 빠르게 진행되었다고 느낄 수 있게 도와주세요.
4. 서열위치 효과 (Serial-Position Effect)
사용자는 처음과 끝을 기억한다.
인간의 기억은 완벽하지 않습니다. 인간의 두뇌는 무의식적으로 처음 보거나 들은 것을 가장 중요하다고 여깁니다. '첫인상이 중요하다'든가 '마무리가 좋으면 다 좋다.'든가 하는 말도 여기서 나옵니다. 우리가 프로덕트를 만들 때에도 이러한 인간의 인지적 특성을 따를 필요가 있습니다.
가장 중요한 정보를 처음과 마지막에 배치하세요
중요하지 않은 정보는 목록의 가운데에 배치하고, 필요하다면 이용자가 건너뛰고 다시 돌아올 수 있도록 하세요.
5. 단일정확성의 원칙 (Law of Uniform Correctness)
시각적으로 연결된 요소는 더 관련성이 높은 것으로 인식된다.
이 원칙은 게슈탈트 심리학에서 나왔습니다. 우리의 두뇌는 정보에서 패턴을 찾아 의미 있는 것으로 묶어서 생각하는 경향이 있습니다. 사과, 바나나, 파인애플이 놓여있는 사진을 보고 “과일이네.”라고 생각하는 것이죠.
UI 요소간의 연결을 시각적으로 보여주세요. 연속된 프로세스의 경우 프로세스의 각 단계를 상징하는 탭이나 레이블을 시각적으로 연결하여 보여줄 수 있습니다.
색상을 사용한 연결도 가능합니다. [계속] 또는 [확인] 과 작업을 수행하는 기능은 초록색 버튼으로, [취소] 또는 [돌아가기] 와 같이 작업을 되돌리는 기능은 빨간색 버튼으로 표시할 수 있습니다.
형태와 색상을 함께 사용하는 연결도 가능합니다. 예를 들어, 아코디언은 접혀있을 때 회색이었다가 펼쳐지면 파란색으로 변할 수도 있습니다. 이용자에게 회색-닫힘, 파랑-열림으로 의미의 연결을 전달할 수 있죠.
