평소 UX/UI 개선에 관심은 많았지만, 객관적인 지표에 기반하여 개선하고자 하지는 못했던 것 같다. 그냥 사용자 입장에서 어떻게 느낄지 계속해서 생각해보고 개선하려고 했던 정도?
이번 기회를 통해서 법칙을 기반으로 UX/UI를 어떻게 개선하면 좋을지 알아보면 좋을 것 같아서 글로 정리해보려고 한다.
제이콥의 법칙
사용자는 본인이 오래 사용하면서 축적된 경험을 토대로 새로운 프로덕트를 판단하는 경향이 있다.
따라서, 이 법칙은 일반적인 디자인 관습을 따를 것을 권장한다. 사용자의 축적된 경험을 이용해야 한다는 것이다.
멘탈 모델이란?
우리가 어떤 시스템에 관해 그 시스템의 작동 방식에 관해 알고 있다고 생각하는 바를 의미합니다. 우리는 항상 새로운 것을 접할 때 과거의 경험으로 쌓은 지식을 바탕으로 새로운 대상과 상호작용합니다. 즉, 기존의 경험을 활용한다면 새로운 시스템의 작동 방식을 이해하는데 필요한 인지적 노력을 줄일 수 있을 것 입니다. 다시 말해, 디자인을 사용자의 멘탈 모델에 맞추면 사용자 경험이 개선된다고 할 수 있습니다.
💡 핵심은 사용자가 새로운 경험을 이해하기 위해 기존 경험을 활용하자는 것이다.
피츠의 법칙
목표물에 도달하는 데 걸리는 시간은 목표물의 거리와 크기에 따라 달라진다.
온라인에서 이 법칙이 꽤 자주 무시되고 있다고 한다. 버튼이 너무 작거나 엉뚱한 위치에 있는 것이 대표적인 예이다. 그런 버튼을 정확하게 조준하거나 사격하는데 걸리는 시간은 늘어나기 마련이고, 이 과정에서 반드시 사용자는 에너지를 소비하게 될 것이다.
🚨 즉, 사용자가 목표에 도달하기까지 소모하는 에너지의 총량이 증가한다는 것이다.
💡 그럼 이를 어떻게 따라야 할까?
1. 터치 대상의 크기는 사용자가 쉽게 조준할 수 있을 정도로 충분히 커야 한다.
2. 터치 대상 사이에 충분한 거리를 확보해야 한다.
3. 터치 대상은 인터페이스 상에서 쉽게 도달할 수 있는 영역에 배치해야 한다. (터치하기 선호하는 영역은 화면 중앙부라고 한다. 정확도도 중앙부에서 가장 높다고 한다.)
힉의 법칙
선택지가 너무 많으면 인지 부하가 증가한다.
의사 결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다.
💡 필터 기능을 활용하여 원하는 조건의 상품만 보거나, 원하지 않는 조건의 상품은 걸러내는 방식으로 소화해야 할 정보량을 줄이고 사용자가 원하는 상품에 더 쉽고 빠르게 도달할 수 있다.
밀러의 법칙
보통 사람이 한번에 기억할 수 있는 항목은 최대 7(+-2)개 정도로 제한된다고 한다.
💡 특정 정보를 제공할 때, 7개 이하 되도록 5개 이하로 제공하는 것이 좋다. 비슷한 부류의 정보들을 묶어서 표현하면 조금 더 가독성 있게 보여줄 수 있다.
포스텔의 법칙
유저는 채워 넣어야 할 정보의 양이 많아질수록 인지부하가 증가한다.
이 법칙의 대표적인 사례는 '입력 폼' 이다. 폼은 본질적으로 사용자가 서비스와 인터랙션하는 수단이기에 입력하는 정보의 양이 증가할수록 사용자에게 부과되는 인지적 에너지와 노력이 커지게 되어 사용자가 입력 폼을 다 채울 확률이 낮아질 것이다.
💡
1. 사용자에게 요구하는 정보를 최소한으로, 제한적으로 요청한다.
2. 또 다른 예시로, 사용자가 '20241018'만 입력해도 자동으로 2024-10-18 형식으로 변환되는 UX가 있다.
3. 사용자의 실수를 파악하여 텍스트나 alert을 통해 피드백을 제공하여 사용자가 실수를 수정할 수 있게 도와야 한다.
피크엔드의 법칙
사용자 경험은 평균이나 합계가 아니라 절정의 순간이나 마지막 순간에 느낀 감정을 바탕으로 판단된다. '실패했던 경험'은 더 오래 기억하려는 경향이 있다.
💡 따라서, 이러한 순간에도 최대한 부드럽고 재치있게 표현해줘야 한다.
테슬러의 법칙
모든 시스템에는 더 이상 줄일 수 없는 일정 수준의 복잡성이 존재한다.
이 법칙은 글로 이해하기 어려울 것 같아, 토스 앱의 스크린샷을 가져왔다.
토스는 사용자가 계좌번호를 입력하면 해당 계좌번호에서 은행별 계좌번호 고유의 패턴을 파악해서 '은행 선택' 드롭다운 아래에 추천 은행명 버튼을 표시해준다. 이를 통해 드롭다운으로 일일이 은행명을 찾지 않아도 되는 편리함을 제공하고 있다.
💡 즉, 아무리 단순하게 사용자 경험을 제공해 주려고 노력한다고 하더라고 복잡성을 줄일 수 있는데는 분명 한계가 있는데, 이때에는 그 복잡성을 사용자 대신 행해주는 방식으로 제공해야 한다는 것입니다.
심미적 사용성 효과
사람들은 보기 좋은 디자인이 사용성이 더 뛰어나다고 인식한다.
시각적으로 만족스러운 디자인은 사용성 문제를 가려 사용성 테스트 중에 문제가 드러나는 것을 방해할 수 있다.
폰 레스토프 효과
비슷한 사물이 여러 개 있으면 그중 가장 색다른 것만 기억한다.
💡
1. 특정 기능을 강조하거나 유도하기 위해 진한 컬러, 보색 컬러를 사용한다.
2. 필수 입력 필드에는 Required 표시를 통해 사용자가 중요한 정보를 놓치지 않도록 해야 한다.
🚨 그렇다고 너무 많은 부분을 강조하면 사용자가 필요한 정보를 한눈에 찾을 수 없게 되므로 주의!
도허티 임계
사용자의 관심을 유지하고 생산성을 높이기 위해서는 0.4초 이내에 시스템 피드백을 제공해야 한다.
사용자가 원하는 정보를 딜레이 없이 바로 보여주면 좋겠지만, 외부 정보를 불러온다면 어쩔 수 없는 딜레이가 발생한다.
💡 보통 이런 딜레이를 스켈레톤 UI, 로딩 애니메이션 등을 통해 역동적인 볼거리를 제공함으로써 사용자가 느낄 수 있는 따분함을 해소해줄 수 있다.
참고문헌
