[디자인 사용성] Laws of UX -01

[알아 두면 좋은] > [웹사이트, 웹서비스] 글에서 UX 법칙을 정리한 좋은 사이트를 소개했다. 

 

Home | Laws of UX

 

 

이제, 각 법칙들에 대해 알아보자. 

 

먼저, 사이트는 각 법칙이 하나의 페이지로 이루어져 있다. 페이지 안에는 법칙에 대한 개요와 함께 간략하게 법칙에 대해 설명하고 관련 아티클이나 관련 링크를 제공하여 법칙에 대한 근거들을 확인할 수 있게 구성되어 있다.

 

직접 사이트에서 내용을 파악하며 관련 아티클들을 읽는 것이 제일 좋은 방법이지만 아래에 각 법칙들의 Summary를 정리해 보았으니 이 글을 통해 대략적인 내용을 파악할 수는 있다.  

 

총 21개의 법칙을 한 글에 담기에 너무 많아 3개의 글로 나누어 정리하려 한다. 

Laws of UX - 02: https://tammist.tistory.com/45

Laws of UX - 03: https://tammist.tistory.com/46

 

자 그럼 먼저 7개 법칙에 대해 알아보자. 

 

---

Aesthetic-Usability Effect 미학적 사용성 효과 

Users often perceive aesthetically pleasing design as design that’s more usable.
사용자들은 종종 미학적으로 만족스러운 디자인을 쉬운 디자인으로 인식한다. 

1. An aesthetically pleasing design creates a positive response in people’s brains and leads them to believe the design actually works better. 심미적으로 만족스러운 디자인은 사람들의 두뇌에 긍정적인 반응을 일으키고 디자인이 실제로 더 잘 작동한다고 믿게 만든다. 
2. People are more tolerant of minor usability issues when the design of a product or service is aesthetically pleasing. 사람들은 제품이나 서비스의 디자인이 미학적으로 만족스러울 때 사소한 사용성 문제에 더 관대하다. 
3. Visually pleasing design can mask usability problems and prevent issues from being discovered during usability testing. 시각적으로 만족스러운 디자인은 사용성 문제를 덮어주어 사용성 테스트 중에 이슈를 방지할 수 있다. 

The Aesthetic-Usability Effect

---

Summary

이 법칙은 1995년 human–computer interaction 분야에서 처음 연구되었다. ATM UI의 26가지 변형 테스트를 했고 사용자가 느끼는 미적 매력과 지각된 사용 용이성 사이에서 강한 상관관계를 발견했고 이는 다시 말해 사용자에게 심미적 만족을 주면 실제 사용 편의성과는 별도로 본인에게 사용이 편하다고 느끼게 된다는 말이다.

 

이 법칙을 통해 GUI 디자인의 중요성을 느끼게 될 것이다. 하지만 이 법칙은 한계가 있다. 기능적으로 잘 작동해야 한다는 전제 조건이 강력한 제한 조건이 된다. 결국 기능적을 잘 작동하면서 동시에 미적으로 만족스러우면 그 만족도가 더 높아지는 것이지 사용성에 문제가 있는 인터페이스에는 소용이 없다는 것이다. 미적 만족감은 사이트의 콘텐츠와 기능을 지원하고 향상하는 강력한 역할을 하지만 주객이 전도될 수는 없다. 결국 아름답기 위해 기능을 불편하게 만드는 것은 이 법칙을 제대로 이해하지 못한 것임을 인지해야 할 것이다. 

 

---

Doherty Threshold 도허티 임계값

Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
컴퓨터와 사용자가 서로를 기다릴 필요가 없는 속도(<400ms)로 작용할 때 생산성이 높아진다. 

1. Provide system feedback within 400 ms in order to keep users’ attention and increase productivity. 사용자의 주의를 끌고 생산성을 높이기 위해 400ms 이내에 시스템 피드백을 제공한다. 
2. Use perceived performance to improve response time and reduce the perception of waiting. 인지된 성능을 사용하여 응답 시간을 개선하고 대기에 대한 인지를 줄인다. 
3. Animation is one way to visually engage people while loading or processing is happening in the background. 애니메이션은 백그라운드에서 로딩되거나 작업이 진행되는 동안 사람들을 시각적으로 참여시키는 한 가지 방법이다. 
4. Progress bars help make wait times tolerable, regardless of their accuracy. 진행률 표시바는 정확성에 관계없이 대기 시간을 견딜 수 있도록 도와준다. 
5. Purposefully adding a delay to a process can actually increase its perceived value and instill a sense of trust, even when the process itself actually takes much less time. 의도적으로 프로세스에 지연을 추가하면 프로세스 자체가 훨씬 적은 시간이 걸리더라도 사용자에게 인식된 가치를 높이고 신뢰감을 심어줄 수 있다.  

---

Summary

이 법칙은 1982년 Walter J. Doherty와 Ahrvind J. Thadani는 IBM Systems Journal에 컴퓨터 응답 시간에 대한 요구 사항을 이전 표준이었던 2,000(2초)가 아닌 400ms로 설정한 연구논문을 발표하면서 나오게 되었다. 이 법칙의 주요 내용은 빠른 시간 안에 피드백을 주어야 한다는 것이 핵심이다. 명령에 대한 응답이 빠르게 되어야 한다는 것보다는 시간이 걸린다면 왜 걸리는지에 대해 알려주고 현재 작동하고 있음을 보여주거나 명령에 대한 응답을 준비하고 있음을 알려주어야 한다는 말이다. 

 

대면 서비스와 비슷한 경향이 있다. 고객은 지금 당장 자신이 원하는 것을 바로 처리해주는 걸 가장 좋아하지만 만약 기다려야 한다면 왜 늦어지는지 얼마나 걸릴지에 대한 안내를 해주어 현재 상황을 이해할 수 있게 해주는 것을 원한다.

 

또, 서비스에 따라 달라지겠지만 기능이나 정보를 제공할 때 잠시 화면이 이동됨을 알려주는 페이지 등을 삽입하여 무언가 준비 중이라는 잠깐의 텀을 주는 것이 오히려 사람들에게 좋은 인식을 줄 수 있다는 것도 활용할 만하다. 일종의 대답과 같은 것이라고 생각한다. 편의점에 가서 무언가를 계산할 때 그냥 빠르게 계산해주는 것도 중요하지만, "계산해주세요."라는 나의 말에 "네."와 "네. 잠시만요."에서 느껴지는 나의 감정은 많이 달라질 것이다. 아마 이런 디테일이 사용자들에게 더 좋은 인상을 주는 것이 아닐까 하는 생각을 한다. UX는 언제나 현실의 경험을 바탕으로 생각해야 함을 느낀다. 

---

Fitts’s Law 피츠의 법칙

The time to acquire a target is a function of the distance to and size of the target.
목표물을 얻는 시간은 목표물까지의 거리, 크기와 상관있다. 

1. Touch targets should be large enough for users to accurately select them. 터치 대상은 사용자가 정확하게 선택할 수 있을 만큼 커야 한다. 
2. Touch targets should have ample spacing between them. 터치 대상은 충분한 여백을 가지고 있어야 한다. 
3. Touch targets should be placed in areas of an interface that allow them to be easily acquired. 터치 대상은 쉽게 목적을 이룰 수 있는 영역에 배치해야 한다. 

What is Fitts’ Law?

---

Summary

1954년 심리학자 Paul Fitts는 인간의 운동 시스템을 조사하면서 목표물까지 이동하는 데 필요한 시간이 목표물까지 와의 거리에 따라 크게 달라지지만 크기는 반비례한다는 사실을 보여주었다. 그의 법칙에 따르면 빠른 움직임과 작은 표적은 속도-정확도의 상충 관계로 더 큰 오류율을 초래한다고 한다. 

 

이 법칙은 주요한 기능을 담당하는 컴포넌트들의 크기를 키우고 터치가 쉬운 위치에 배치해야 한다는 것을 말하는 것이다. 작은 버튼은 클릭하기 더 어렵고 시간이 걸리기 때문에 사용성이 떨어진다.

 

그리고 연관된 정보와 기능 버튼 등을 가깝게 두어 사용자가 자연스럽게 기능을 인지할 수 있도록 도와야 한다는 것 또한 강조한다. 다양하고 많은 정보들을 가진 페이지를 다룰 때에 이런 정보와 기능의 관계를 잘 이해하며 진행한다면 좋은 해결책을 찾아낼 수 있을 것이다. 

 

---

Goal-Gradient Effect 목표 그라데이션 효과 

The tendency to approach a goal increases with proximity to the goal.
목표에 접근하려는 경향은 목표에 가까울수록 증가한다. 

1. The closer users are to completing a task, the faster they work towards reaching it. 사용자가 작업 완료에 가까울수록 작업에 더 빠르게 도달한다. 
2. Providing artificial progress towards a goal will help to ensure users are more likely to have the motivation to complete that task. 목표를 향한 인위적인 진행을 제공하면 사용자가 해당 작업을 완료하려는 동기를 더 많이 갖도록 하는 데 도움이 됩니다.
3. Provide a clear indication of progress in order to motivate users to complete tasks. 사용자가 작업을 완료하도록 동기를 부여하기 위해 진행 상황을 명확하게 표시합니다.

---

Summary

1932년 행동학자 Clark Hull이 처음 제안한 목표 기울기 가설은 목표에 접근하려는 경향이 목표에 근접할수록 증가한다는 것에서 나온 법칙이다. 쥐 나 동물을 통한 목표 기울기 가설은 광범위하게 조사되었지만 인간 행동 및 의사 결정에 대한 의미는 충분히 연구되지 않았다는 단점이 있다고 한다. 하지만 보상 프로그램이나 기타 유형의 동기 부여 시스템에서도 신중하게 다루고 있는 내용이라고 한다.

 

어려운 내용이라고 생각되지만, 간단히 말해 이 법칙은 사용자가 작업을 완료할 수 있게 하기 위해서는 다양한 장치가 필요함을 말해준다.

사용자가 동기를 가질 수 있는 장치를 사용(인위적인 응원 등)하거나 현재 진행상황을 명확히 표시하여 완료에 가까워지고 있음을 알려주어야 하는 등 사용자가 작업을 완료할 수 있게 도와야 한다는 것이다. 

 

가입이나 결제 등의 주요한 프로세스에서 이 법칙을 꼭 기억해두어야 한다. 물론 가장 좋은 것은 빠르고 간편한 가입과 결제일 것이다. 하지만 그렇지 않은 경우에는 이러한 동기 부여를 통해 사용자가 작업을 완료할 수 있도록 독려해야 할 것이다. 

---

Hick’s Law 힉스의 법칙

The time it takes to make a decision increases with the number and complexity of choices.
결정을 내리는 데 걸리는 시간은 선택의 수와 복잡성에 따라 늘어난다.

1. Minimize choices when response times are critical to increase decision time. 결정을 내리는 시간이 늘어날수록 응답할 때 영향을 미치는 경우 선택을 최소화하라. 
2. Break complex tasks into smaller steps in order to decrease cognitive load. 인지 부하를 줄이기 위해 복잡한 작업을 더 작은 단계로 나누어라. 
3. Avoid overwhelming users by highlighting recommended options. 추천 옵션을 강조 표시하여 사용자를 압도하지 않도록 하라. 
4. Use progressive onboarding to minimize cognitive load for new users. 새로운 사용자의 인지 부하를 최소화하기 위해 진행되는 온보딩을 사용하라. 
5. Be careful not to simplify to the point of abstraction. 추상화가 될 정도로 단순화하지 않도록 주의하라. 

Hick’s Law: Making the choice easier for users

---

Summary

Hick의 법칙(또는 Hick-Hyman 법칙)은 William Edmund Hick과 Ray Hyman의 영국인과 미국 심리학자 팀의 이름을 따서 명명되었다. 1952년에 이들은 존재하는 자극의 수와 주어진 자극에 대한 개인의 반응 시간 사이의 관계를 조사하기 시작했으며 자극이 많을수록 사용자가 상호 작용할 자극을 결정하는 데 더 오래 걸렸다.

 

이 법칙은 사용자에게 너무 많은 선택지에서 선택하지 않도록 도와주어야 한다는 것을 강조한다. 너무 많은 옵션, 너무 많은 정보들은 오히려 사용자를 더 헷갈리게 하고 어렵게 만든다. 그래서 적당한 수준의 선택지와 정보를 제공하고 선택할 수 있도록 해야 한다.

 

선택해야 하는 사항들이 많다면 오히려 단계를 나누어 제공하는 방향을 고민하는 것이 좋은 방법이 될 것이다. 그렇다고 너무 잘게 쪼개서 단순화시키면서 단계를 늘리면 사용자는 지루함을 느끼게 될 것이니 주의를 요한다. 

---

Jakob’s Law 야곱의 법칙

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
사용자들은 대부분의 시간을 다른 사이트에서 보낸다. 이것은 사용자가 그들이 이미 알고 있는 다른 모든 사이트들의 방식과 동일한 방식으로 작동하는 사이트를 선호한다는 의미이다. 

1. Users will transfer expectations they have built around one familiar product to another that appears similar. 사용자는 하나의 친숙한 제품을 중심으로 구축한 기대를 유사한 다른 제품에도 똑같이 요구한다. 
2. By leveraging existing mental models, we can create superior user experiences in which the users can focus on their tasks rather than on learning new models. 새로운 모델을 배우게 하는 것보다 기존 멘털 모델을 활용함으로써 작업에 집중할 수 있는 우수한 사용자 경험을 만들 수 있다. 
3. When making changes, minimize discord by empowering users to continue using a familiar version for a limited time. 무언가를 변경할 때 사용자가 제한된 시간 동안 친숙한 버전을 계속 사용할 수 있도록 배려해야 불협화음을 최소화할 수 있다. 

Jakob Nielsen, Ph.D. and Principal at Nielsen Norman Group

---

Summary

이 법칙은 새로운 서비스를 런칭할 때나 리뉴얼 런칭을 하게 될 때 무척 중요하게 여겨지는 지점에 대해 알려준다. 사람들에게 가장 좋은 UX는 익숙한 UX라는 말이 있듯 아무리 편한 UIUX를 시도하는 변화라고 하더라도 사람들은 새로운 변화에 좋은 감정을 보이지 않는다. 사람들에게 익숙한 네이버나 멜론 등이 리뉴얼을 할 때마다 불만이 폭주하는 것은 모두 익숙했던 것이 변했기 때문이다. 

 

그래서 새로운 서비스를 런칭하거나 리뉴얼 런칭을 하게 될 경우 기존의 서비스에서 익숙한 부분들을 참고하는 것이 좋다. 그러나 그 익숙함에 새로움을 얼마나 얹어서 만드느냐에 따라 혁신도 나오는 것이므로 새로움을 포기할 수는 없다.

 

대신 사용자들에게 제대로 설명을 해야 한다. 특히나 리뉴얼 런칭인 경우에는 더욱 필요한 일이다. 하지만 불만은 쉽게 사그라들지 않을 것이고 결국 시간만이 해결해줄 것이다. 사람들이 새로움에 익숙해질 때까지 말이다. 

 

그래서 개인적으로 리뉴얼 런칭의 목표에 사용자들까지도 납득할 만한 근거가 포함되어야 한다고 생각한다. 하지만 거의 모든 서비스들이 대체로 공급자의 입장에서만 생각하며 리뉴얼을 런칭하기 때문에 불만의 수위가 걷잡을 수 없이 커지기도 하는 것이 아닐까 싶기도 하다. 그만큼 리뉴얼은 어려운 일이라는 생각이 들게 하는 법칙이다. 

---

Law of Common Region 공통 영역의 법칙

Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.
경계가 명확한 영역 안에 있는 요소들을 그룹으로 인식하는 경향이 있다. 

1. Common region creates a clear structure and helps users quickly and effectively understand the relationship between elements and sections. 공통 영역은 명확한 구조를 만들고 사용자가 요소와 섹션 간의 관계를 빠르고 효과적으로 이해할 수 있도록 돕는다. 
2. Adding a border around an element or group of elements is an easy way to create common region. 요소 또는 요소 그룹 주위에 테두리를 추가하는 것은 공통 영역을 만드는 쉬운 방법이다. 
3. Common region can also be created by defining a background behind an element or group of elements. 공통 영역은 요소 또는 요소 그룹 뒤에 배경을 정의하여 만들 수도 있다. 

Principles of grouping - Wikipedia

---

Summary

이 법칙은 흔하게 그룹핑이라고 말하는 개념에 대해 알려주는 법칙이다. 인간은 자연적으로 대상을 조직화하고 패턴화 한다는 게슈탈트 심리학에서 그 기원을 찾을 수 있다. 게슈탈트 심리학자들은 근접성, 유사성, 연속성, 폐쇄성 및 연결성의 5가지 원칙을 이야기한다. 그룹핑 = 그룹화 원칙은 많은 정보를 다루는 때에 꼭 필수적으로 인지하고 작업을 임해야 하는 법칙이다. 

 

여기에서 말하는 공통 영역의 법칙은 연관된 정보들은 그룹핑을 통해 유사하게 보이도록 만들어야 하고, 그렇지 않은 정보들은 차별화를 확실하게 해줘야 한다는 것이다. 그래야 사용자가 정보를 이해하는 것에 혼돈이 덜하기 때문이다. 

 

이 외에도 게슈탈트 이론은 꼭 확인을 해보는 것이 중요하다. 

그래서 이 법칙과 함께 게슈탈트 이론에 대해서도 알아본다면 더 도움이 될 것이다. 

Gestalt Laws of Perceptual Organization and Our Perception of the World

그리고 예전에 게슈탈트에 대해 쓴 글을 다시 링크로 남긴다. 

[게슈탈트] 디자인과 심리학의 관계에 대해

---

먼저, 7개의 법칙에 대해 알아보았다. 나머지 법칙들에 대해서도 곧 글을 올리겠지만 글을 작성하며 다시 한번 기본에 충실해야 함을 느끼게 되어 크게 도움이 되었다. 

 

그럼 다음 글에서 만나기를 바란다. 

Laws of UX - 02: https://tammist.tistory.com/45