앱스토어 받기 버튼 뜯어보기
애플은 애플이다.
앱스토어의 UX/UI를 살펴볼때의 느낌은 잘 짜여있는 텍스트 어드벤처를 보는것 같다. '검색을 하고 싶다. -> 하단의 네비게이션의 끝에 위치한 검색 아이콘을 누르시오.' 직관적이고 간결하다. 잘 만들어져 있다고 생각하는 UX/UI들을 분석하는 것도 좋은 공부라고 생각한다.
들어가기에 앞서
인간이 무언가를 인식하는 과정은 오랜 시간 동안 진화를 거치면서 생존에 필요한 방식으로 발전해 왔다.
1. 앱스토어 디자인 역사 살펴보기
iOS 6 / iOS 7 / iOS 16(현재)사진에서 iOS 6와 iOS 7의 디자인은 아예 다른 서비스 처럼 보인다. 이러한 변화는 스큐어모피즘을 좋아하는 스콧 포레스트올이 떠나고 플랫하고 미니멀함을 선호하는 조나선 아이브가 CDO(Chief Design Officer) 자리에 오르면서 오게 됐다. 하지만 버튼은 아직 사각형의 형태를 가지고 있다.
현재 '받기' 버튼의 형태는 iOS 11에서 앱스토어 사용성 개선의 결과물이다. 둥근 버튼이 더 나은 사용성을 제공할거라고 판단한 이유가 뭘까?
2. 둥근 버튼이 더 나은 사용성을 제공한다?
그럼 모든 버튼은 다 둥글게 만들어야 하는걸까? 아니다.우리는 '버튼이 둥글다'에 집중하는게 아닌 '버튼을 둥글게 처리한 이유'에 집중해야한다. 버튼을 둥글게 처리하는게 왜 사용성에 긍정적인 영향을 줄까?
이 이유를 알아보기 위해서는 나무가 아닌 숲을 바라봐야 한다. 앱스토어의 레이아웃을 살펴보자.
사각형의 레이아웃'인간이 무언가를 인식하는 과정은 오랜 시간 동안 진화를 거치면서 생존에 필요한 방식으로 발전해 왔다.' 위에서 언급했던 내용이다. 인간은 인식한 형태와 차이를 가진 형태를 찾아내는데에 능하도록 진화했다. 그렇지 않은 인간들은 이미 풀숲에 숨어있던 호랑이에 잡아 먹히고 소화된지 오래다.
앱스토어에서 사용자는 무의식적으로 다양한 사각형들을 인지하는데, 여기서 애플은 버튼을 완전히 둥근 모양으로 만듬으로서 사용자가 이전에 인식한 형태와는 완전히 다른 형태를 노출시켰다.
인간의 인지 특성을 이용하여 사용자가 버튼을 더 빠르고 쉽게 인지할 수 있도록 도와준것이다. 덤으로 선을 빼고 배경을 회색으로 바꾸면서 형태가 단순해졌기 때문에 정신적인 피로도가 줄어든다. "선을 빼는 것 만으로 그런 효과가 있나?" 싶으면 아래 사진을 보면 된다.
언급은 안 했지만 같은 이유로 평가가 리스트에서 제외됐다.3. 버튼의 색과 정신적인 피로도
이제 모양이 왜 그런지를 알았으니, 색에 대해 알아야한다.
나서지 말아야 할 때와 나서야 할 때를 잘 구분하고 있다.왼쪽 화면과 오른쪽 화면에서 버튼의 색이 다른 이유를 알아보자. 이것 또한 버튼의 색에 집중하는게 아닌 화면의 맥락을 생각해야 한다.
왼쪽 화면에서 '받기' 버튼은 맥락 상 사용자의 눈에 띄지 않으면서도 둥근 형태가 인식이 되어야 하기 때문에 회색 바탕을 가지고 있다.
리스트에서 버튼을 빼지 않고 우선순위를 낮춘 이유는 버튼에 부여된 역할 때문이다.
처음 사용자에게 버튼의 형태를 인식 시켜주는 역할
숙련된 사용자에게 제공되는 지름길의 역할
추가로 오른쪽 화면에서는 버튼에 관한 확실한 강조를 볼 수 있다. 버튼이 파란색을 배경으로 한 강렬한 모습으로 나타나는 이유는 단순하다. 대다수 사용자가 이 화면에 도달한 목적을 이루는 버튼이기 때문이다.
추가로 사용자가 버튼을 놓치지 않도록 하기 위해 버튼이 거의 중앙에 배치가 되어 있다. 여담으로 이 화면에서 소름돋는 배려를 볼 수 있다.
결정을 내리는데에 필요한 최소한의 정보들을 묶어줬다.위에서 언급했듯이 '생존을 위한 진화를 거친 인간'은 신뢰를 기반으로한 결정도 정말 빠르게 내릴 수 있다. 애플은 신뢰를 기반으로 한 결정을 내리는데에 필요한 정보들을 시선이 꽂히는 버튼의 주변에 준비해놨다.
로고, 서비스의 이름, 제작사의 이름만 있다면 대다수의 유저는 스크롤을 내려볼 필요도 없이 목적을 이룰 수 있다. 덤으로 위 정보 다음으로 결정을 내리는데에 영향을 끼치는 '평점'을 시선의 흐름에 잘 배치했다.
배운 점
UX/UI를 공부할땐 전체적인 맥락을 봐야해요.
인지 특성들을 알고 있으면 인간을 위한 설계를 할때 도움이 돼요.
애플은 역시 애플이에요.
