역주 : 시작하기 전에
사용자 경험은 프론트엔드 개발자가 고려해야 하는 중요한 요소인데요, 이번 글을 통해 스포티파이, 유튜브, 핀터레스트 등 메이저 서비스에서는 어떤 방법으로 사용자 경험을 향상시켰을지 살펴보고자 합니다.
실제 서비스들에 적용된 UX의 원리
원제 : Laws of UX learned from Spotify, YouTube, Medium, Twitter, Pinterest, Netflix, Uber, Instagram, etc.
저는 드리블이나 비핸스(역주 : 디자이너 포트폴리오 사이트)의 도움 없이 디자이너가 되기 위한 방법을 익혔는데요, 여러분도 저처럼 혼자 공부하는 것에 익숙해졌으면 하는 마음에 이번 글을 통해 대형 서비스들이 어떻게 UX 원리를 따르고 있는지를 소개해보려 합니다.
이 글에서는 제가 사용했던 서비스들에 적용된 7가지 UX 원리에 대해 다루며, 글을 다 읽은 후에는 조금이라도 더 나은 디자이너가 되실 것이라고 장담합니다.
그럼 가장 많이 사용되는 UX의 원리들을 간단히 알아보도록 하겠습니다.
1. 미적이면서도 사용성있는 효과
사용자들은 디자인의 사용성이 뛰어날수록 미적으로도 훌륭하다고 생각하곤 합니다.
인간이 미적인 가치를 사랑한다는 것에는 이견이 없을 텐데요, 이는 디자인에도 적용되어 사용자는 아름다운 디자인(이를 디자인에서는 "미적으로" 훌륭하다고 합니다.)을 선호하곤 합니다. 사용자는 미적으로 훌륭한 디자인을 사용할 때는 사소한 불편은 그냥 넘어가고 잘 사용합니다.
그리고 모든 대형 어플리케이션들은 이를 알고 있기 때문에 모서리를 둥글게 디자인하고, 아이콘을 단순화하고, 이미지를 더 매력적으로 꾸미고, 텍스트를 굵게 만들고, 색감을 더 뚜렷하게 드러냅니다.
이런 UX 원리를 통해 여러분의 디자인을 보다 사용자 친화적으로 꾸밀 수 있고, 이는 서비스의 성장을 위한 좋은 리뷰를 받기에도 도움이 될 것입니다.
그러나 장기적으로 볼 때는 미적인 디자인만이 해결책이 아닐 수도 있는데요, 단기 사용자들은 기꺼이 리뷰를 통해 도움을 요청하지만 이내 시간이 지나면서 불만을 갖게 되고 서비스를 이탈하게 됩니다. 따라서 어플리케이션을 만들 때는 미적인 디자인뿐만 아니라 사용성을 함께 고려해야만 합니다.
핵심
- 미적으로 훌륭한 디자인은 사람들의 뇌로부터 긍정적인 반응을 생성하고, 더 잘 동작할 것이라는 믿음을 이끌어냅니다.
- 제품이나 서비스에 적용된 디자인이 미적으로 훌륭하다면, 사람들은 사용성이 약간 불편해도 감수할 수 있습니다.
- 시각적으로 만족스러운 디자인은 사용성 문제를 감출 수 있고, 사용성 테스트 단계에서 문제가 제기되는 것을 방지합니다.
2. 간결함의 법칙 (Law of Prägnanz)
사람들은 대상을 인식하는데 필요한 노력을 최소화하고자 복잡하거나 모호한 이미지를 최대한 간단하게 인지하고 해석합니다.
사물을 간결하게 만드는 것은 새로운 것이 아닌데요, 많은 사람들은 실생활에서 더 간단한 것들을 좋아합니다.
사람들은 복잡한 것을 좋아하지 않는데요, 사용자들 또한 지구에서 왔기 때문에 똑같이 심플한 인터페이스, 간단한 아이콘, 색상, 요소와 같이 간단하고 직관적이면서 사용하기 편리한 것들을 좋아하기 마련입니다.
만약 복잡한 요소를 추가하게 된다면, 두뇌는 기본적으로 이를 더 간단한 형태로 해석합니다.
예를 들어 달에는 수많은 바위와 패인 자국이 있지만, 우리의 뇌는 이를 단순히 밝고 노란 달로 해석하듯 말이죠.
간결성을 활용하는 가장 좋은 방법은 스포티파이(Spotify)처럼 간단한 요소들을 사용하는 것으로, 처음에 사용한 작고 복잡한 아이콘들이 사용자들에게 많은 부담을 줄 수 있음에 따라, 스포티파이는 새로운 아이콘을 사용한 하단바로 업데이트했습니다.
또한 스포티파이는 간결함을 위해 이외에도 "탐색" 같은 여러 옵션들을 하나로 묶었습니다. (좌 : 묶기 전의 UI / 우 : 묶은 후의 UI)
핵심
- 사람의 눈은 여러 정보에 압도당하는 것을 막기 위해 복잡한 도형에서 간결함과 순서를 찾고자 합니다.
- 연구를 통해 사람들은 복잡한 사물보다 간단한 사물들을 더 쉽게 인식하고 기억할 수 있음을 확인할 수 있습니다.
3. 피츠의 법칙 (Fitts's law)
사물을 인식하는데 걸리는 시간은 대상의 크기와 거리의 함수로 표현됩니다.
모든 앱의 '구매하기', '예약하기', '장바구니에 추가' 버튼은 다른 버튼들보다 크다는 것을 알고 계셨나요?
이유는 바로 피츠에 법칙에 있습니다.
피츠의 법칙은 대상을 인식하기(get)까지의 시간이 크기와 거리감에 비례한다고 설명합니다.
만약 사물이나 버튼이 작다면 사용자의 마음을 돌리기까지 시간이 걸릴 것이고, 그동안 사용자는 초점을 잃을 수 있습니다.
따라서, 목표하는 요소는 사용자가 짧은 시간동안 클릭하기 쉬운 곳에 배치하는 것이 권장됩니다.
예를 들어, 에어비앤비는 사용자가 시간을 오래 들이지 않고도 버튼을 탭할 수 있도록 엄지가 클릭하기 쉬운 곳에 버튼을 위치시킴으로써 피츠의 법칙을 적용했습니다.
우버, 아마존, 나이키, 리프트(Lyft) 역시 이 법칙을 따르며, 이들 중 많은 곳이 각자의 방식으로 피츠의 법칙을 사용합니다.
여러분들은 다른 색상, 크기, 아이콘을 사용해 버튼을 눈에 띄게 한 뒤 사용자가 최대한 이를 탭하기 쉽게 만듦으로써 이를 적용할 수 있습니다.
핵심
- 사용자들이 정확하게 선택할 수 있도록 터치할 대상이 충분히 커야 합니다.
- 터치할 대상은 대상들 사이에서 충분한 공간을 가져야 합니다.
- 터치할 대상들은 인터페이스 위에서 쉽게 인식될 수 있는 영역에 위치해야 합니다.
4. 제이콥의 법칙 (Jacob's Law)
사용자들은 대부분의 시간을 다른 어플리케이션들에 사용합니다. 이는 여러분의 앱들도 사용자가 이미 알고 있는 다른 앱들처럼 동작하기를 선호한다는 의미입니다.
제이콥의 법칙은 유용한데요, 이전에 사용해봤거나 사용중인 어플리케이션들에는 많은 유사점들이 존재합니다.
유사점에는 탭 바나 아이콘, 스타일, 폰트 등이 있을 수 있고, 이것들은 단순한 우연이 아닌 계획된 결과물입니다.
거대한 어플리케이션 제작자들은 사용자들이 대부분의 시간을 다른 어플리케이션을 사용하는데 쏟는다는 것을 알고 있고, 사용자의 편의를 위해 다른 어플리케이션과 비슷하게 보이도록 서비스를 제작합니다.
핀터레스트, 틱톡, 인스타그램은 소셜 미디어 플랫폼끼리 서로 비슷한 탭 바를 가지고 있는데, 인스타그램을 많이 사용하는 사람이라면 유사한 홈, 알림, 프로필 탭 메뉴를 통해 틱톡과 핀터레스트 역시 쉽게 사용할 수 있습니다.
핵심
- 사용자는 익숙한 어플리케이션을 통해 쌓은 기대치를 비슷해 보이는 다른 어플리케이션에도 기대하게 됩니다.
- 기존의 멘탈 모델(역주 : 사용자가 제품을 이해하는 방식)을 사용함으로써, 사용자가 새로운 형태의 어플리케이션에 적응하는 수고를 덜고 이전의 경험을 그대로 사용할 수 있도록 해 더 나은 사용자 경험을 제공할 수 있습니다.
- 변경점을 추가할 때는, 사용자들이 제한된 시간동안 기존의 친숙한 버전을 사용할 수 있도록 함으로써 새로운 버전과의 불일치를 최소화해야 합니다.
5. 미완성 효과 & 목표 가속화 효과 (Zeigarnik & Goal-Gradient Effect)
미완성 효과 : 사람들은 완료되지 않았거나 중간에 방해받은 작업을 이미 마친 작업보다 더 잘 기억합니다. 목표 가속화 효과 : 목표에 가까워질수록 목표를 끝마치고자 하는 경향이 증가합니다.