배민으로 살펴보는 40가지 UX 심리학 - 4
40가지 UX 심리학 분석하기 2기
안녕하세요~
심리학적 접근을 이용해 UX 디자인을 효과적으로 구성하는 법칙 40가지 시리즈의 마지막 순서가 왔네요~!
이번 글은 나머지 화면구성요소 위주의 법칙이 많은 점 참고부탁드리며, 4편 시작하겠습니다!
1~2. 근접성의 법칙, 대칭의 법칙
근접성의 법칙 - 가까이 있는 요소들은 연관성이 더 높다고 지각되는 현상
대칭의 법칙 - 대칭적 요소들은 서로 통일성을 가지는 현상
이전 메인 화면이에요.
상단 동일한 라인에 ‘배민1’과 ‘배달’ 메뉴를 같은 크기와 모양으로 디자인해 통일감을 줬죠. (대칭의 법칙)
배민1이 처음 출시되었을 때 처음에는 '배민1이 뭐지?'라는 생각이 들었는데, '배달' 메뉴 바로 옆에 배치되어 있어서 자연스럽게 ‘아 배달과 비슷한 서비스인가 보다'라는 생각이 들었어요. (근접성의 법칙)
자칫 낯설 수 있는 ‘배민1’ 서비스를 새로운 배달 서비스로 사용자가 잘 인식하고 이용하도록 적절하게 배치한 사례라고 생각합니다.
3. 지각적 맹시
한 일에 집중하고 있으면 눈앞에 있는 명백한 다른 자극을 지각 못하는 현상
서비스를 이용하다가 딤처리가 되면서 토스트 팝업이 크게 뜨면 팝업밖에 안 보이게 되죠!
이런 식으로 쿠폰을 맨 앞에 노출시켜서 사용자가 쿠폰을 받아보고 구매할 수 있도록 유도하고 있어요.
처갓집양념치킨 생각이 없다가도 이런 식으로 먹음직스러운 치킨을 보여주면서 쿠폰을 주면 자연스럽게 구매하는 사람들이 생길 거예요.
저는 땡기는 게 딱히 없을 때 이렇게 쿠폰 광고가 뜨면 가끔 사 먹는 편인데, 이런 광고를 쓰면 사장님의 실제 매출이 어느 정도 늘지 궁금하네요!
4. 유사성의 법칙
비슷하게 생긴 요소들은 하나의 그룹으로 지각되는 현상
배민 메인 상단에 노출되던 추천키워드예요.
추천키워드를 모두 비슷하게 디자인했기 때문에 별도로 라벨링(예. 추천키워드)이 들어가지 않아도 이 키워드들이 하나의 그룹이라는 점을 알 수 있어요!
5~6. 폐쇄성의 법칙, 관념 속 원형의 법칙
관념 속 원형의 법칙 - 불완전한 원형을 발견한 경우 관념 속의 원형을 보는 현상
폐쇄성의 법칙 - 여러 패턴이 주어졌을 때 부족한 정보를 채워서 단일패턴으로 지각하는 현상
함께 주문 아이콘입니다.
사람 아이콘 옆에 반쪽짜리 사람아이콘이 나열되어 있어요.
모양 자체만 보면 불완전한 모양이지만 저희는 자연스럽게 이 모양의 빈 공간을 채워 사람모양이라고 인식합니다.(관념 속 원형의 법칙, 폐쇄성의 법칙)
즉, 사람 모양 뒤에 두 명의 사람이 더 있다고 인식해서 세 명의 사람이 나열되어 있다고 생각하게 되고 여러 사람이 함께 주문할 수 있는 기능임을 쉽게 떠올릴 수 있죠~
7~8. 동시 이동의 법칙, 연속성의 법칙
동시 이동의 법칙 - 동시에 이동하는 요소들은 서로 동일한 패턴으로 인식되는 현상
연속성의 법칙 - 연속적으로 이어지는 요소는 하나의 선이나 흐름으로 바라보게 되는 현상
상품 리스트나 배너는 위와 같이 스와이프 하면 동시에 이동하죠~
이렇게 동시에 이동하는 요소들은 동일한 패턴으로 인식되어 같은 성격의 콘텐츠임을 알 수 있어요. (동시 이동의 법칙)
그리고 연속적으로 이어지는 상품 사진, 상품명, 평점, 배달팁 등이 연속적으로 이어져 해당 영역이 하나의 선으로 인지되죠. (연속성의 법칙)
메인에 노출되는 음식점이 매우 많은데 이렇게 콘텐츠 별로 한 줄씩 그룹핑해서 사용자가 인지하기 편하게 노출하고 있어요.
9. 프라그나츠의 법칙
전체를 지각함에 있어서 최대한 단순한 방향을 추구하는 현상
인간의 시각은 정보를 가능한 단순하게 보려고 하기 때문에 아이콘 역시 최대한 단순하게 디자인해서 직관성을 높일 수 있어요.
위 화면에서 알뜰배달은 원화 아이콘을 노출해 돈을 절약할 수 있음을,
한집배달은 집 모양에 1과 직선만 추가해서 한 번에 한집만 빠르게 배달함을 인지시키고 있네요!
동그라미 모양, 집 모양만으로도 직관적으로 정보전달을 잘 한 사례라고 생각합니다.
10~11. 공통 영역의 법칙, 균일 연결의 법칙
공통 영역의 법칙 - 경계선이 명확하게 정의된 영역을 공유하는 경우 요소는 그룹으로 인식되는 현상
균일 연결의 법칙 - 연결선, 공동영역 표시에 의해 연결된 요소들은 한 그룹으로 지각되는 현상
UI 설계에서 빠질 수 없는 법칙이죠!
전체서비스의 경우, 다양한 메뉴를 공통 연결선 및 공통 영역으로 배달, 배민1, 배민B마트 등의 서비스별로 구분하고 있어요.
많은 요소를 그룹핑해서 보여줄 때 공통 연결선이나 공통영역은 빠질 수 없는 필수요소인 것 같아요 ㅎㅎ
마치며
저번 글에 이어 UX 심리학 11가지를 마지막으로 소개드렸습니다~
UI 설계의 기본적인 요소들이지만 UX 심리학으로 한번 공부해 보니 설계하면서 왜 이런 식으로 구성해야 하는지 나름의 명확한 이유가 생기더라고요!
여러분도 참고하셔서 UI/UX 설계하실 때 많은 도움이 되었으면 좋겠습니다.
제가 소개드린 것 말고도 인지심리학 등 다양한 UX 심리학이 있으니 추가로 공부해 보셔도 좋을 것 같아요!
+) 이전 시리즈도 보고싶다면?
그럼 저는 이만 물러나며.. 이제 UX 심리학 사례 대신 다른 주제로 스터디 후 또 유용한 정보 전달드리러 오겠습니다! 아마 데이터 관련 주제이지 않을까 싶어요 ㅎㅎ
다들 곧 다가오는 연휴도 즐겁게 보내시길 바라겠습니다 :)
