존 아블론스키의 'UX/UI의 10가지 심리학 법칙 - 사용자의 마음을 읽는 인간 중심 제품과 서비스 디자인.'을 읽고 개인적으로 정리한 내용입니다.
혹시 문제가 될 내용이 포함되어 있다면, 댓글 달아주시면 수정하도록 하겠습니다. (__)
0. 책을 읽게 된 이유?
나는 비전공 개발자로 심리학과 출신 프론트엔드 개발자다. 내 전공을 선택했을 때에도, 프론트엔드라는 직무를 선택했을 때에도 이유는 분명했다.
사람에 대해 더 알아보고 싶어서! 아무리 생각해보아도 이게 제일 중요한 이유였다.
제품을 만드는 개발자가 되면서 관심사는 사람이 아니라, 우리 서비스를 이용하는 사용자로 좁혀지게 되었다.
이제 내 목표는 사용자에게 어떻게 하면 더 편리하고 유려한 디자인을 제공하고, 우리 서비스에 락인시켜서 매출을 올릴 수 있을지였다.
조금이나마 이런 부분에 도움이 되고자 이 책을 읽어보게 되었다.
1. 내용 정리
1-1. 제이콥의 법칙
사용자는 여러 사이트에서 대부분의 시간을 보낸다. 그래서 여러분의 사이트도 자신이 이미 알고 있는 다른 사이트들과 같은 방식으로 작동하길 원한다.
사용자의 멘탈 모델, 즉 특정 시스템의 작동 방식에 대해 알고 있다고 생각하는 바에 따라 움직인다. 사용자 멘탈 모델에 어긋나는 서비스를 제공했을 때, 사용자는 멘탈 모델 부조화를 일으키게 된다.
따라서 웹 서비스는 이런 멘탈 모델을 지키기 위해 현실 세계의 요소를 따오게 되었다.
예를 들면, 폼 컨트롤은 제어 패널을 본떠서 만들었다고 볼 수 있다.
다만 '사용자의 멘탈 모델'이라는 부분에서 '사용자'가 누구인지 애매할 수 있다.
이런 부분을 해결하기 위해 '페르소나'라는 가상의 사용자를 만든다. 비즈니스를 만드는 사람들은 이 페르소나를 통해 일반적인 멘탈 모델을 만들고자 한다.
=> 이 부분에 대해서 깊이 공감했다. 대부분의 사용자는 편의성을 위해 서비스를 이용하는데, 서비스를 파악하는 데에 너무 많은 에너지를 쏟게 만들면 사용자가 지레 지쳐 떨어져나가버릴 수도 있다.
즉, 심리학에서 말하는 스키마를 통해 멘탈 모델이 구성된다고 알고 있는데 이렇게 구성된 멘탈 모델에 주목할 필요가 있다.
프론트엔드 개발자로서 이 부분을 서비스에 녹여내기 위해서는 평소에 습관처럼 쓰던 부분들에 더 관심을 가져야겠다고 생각했다.
1-2. 피츠의 법칙
대상에 도달하는 시간은 대상까지의 거리와 대상 크기와 함수 관계에 있다.
즉, 사용자의 입력을 받는 부분은 충분히 크고 각각 적당한 너비를 가져야한다.
대표적인 터치 대상의 최소 권장 규격은 아래와 같다.
휴먼 인터페이스 가이드라인(애플) - 44x44pt
머티리얼 디자인 가이드라인(구글) - 48x48dp
웹 콘텐츠 접근성 가이드라인(WCAG) - 44x44 CSS px
또한 좌상단->우하단으로 이동하는 웹 사이트와는 달리, 화면이 작은 모바일의 경우 가로세로 중앙 부분에 가장 집중도가 올라가게 된다.
이 부분을 서비스에 적용한 사례는 아래와 같다.
1) 폼 입력에서 레이블을 클릭하더라도 입력폼을 작성할 수 있도록 함.
2) 폼 전송 버튼이 마지막 입력 폼과 가까운 위치에 있음.
=>
생각해보니 현업에서 개발할 때에도 자연스럽게 이 법칙을 지키고 있었다.
첫 직장을 다닐 때 UI/UX적으로 불편한 디자인이 있었고, 그 부분을 개선했던 경험이 있다.
지금 생각해보니 컴포넌트 간의 거리가 지나치게 좁았고, 이후 소개할 힉의 법칙을 준수하지 않아서 불편했다고 느꼈던 것 같다.
1-3. 힉의 법칙
의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다.
눈에 띄는 명확한 콜 투 액션의 부재, 불분명한 정보 아키텍처, 불필요한 단계, 과도한 선택지나 정보 등은 사용자의 행동을 방해할 수 있다. 간단히 말해 인지 부하가 오는 것이다.
책에서는 예시로 애플과 구글, 슬렉을 제시하고 있다.
인상 깊었던 건 구글과 슬렉 부분이었다.
구글은 검색이 먼저, 필터링은 검색 이후에 할 수 있도록 되어 있다.
슬렉은 다양한 기능이 있지만, 온보딩 슬라이드를 몇 가지 보여준 뒤 바로 사용자를 서비스에 투입시킨다. 단, 슬랙봇이라는 것을 만들어서 사용자가 필요할 때 필요한 정보만 제공하도록 한다.
=>
회사 메인 페이지를 만들 때 이 부분을 고려했었다. 오래된 서비스의 메인 페이지를 변경하는 건이라, 기존 사용자가 이미 익숙해진 UIUX를 변경해야 했기 때문이다.
다양한 의견이 나왔지만, 결론적으로는 메일링 서비스를 통해 변경된 내용을 알려주는 것으로 해결하였다.
실제로 변경 전후를 비교해보았을 때 사용자는 자신이 원하는 서비스를 제대로 찾아갔다. 아마 그 이유로는 사전에 메일링 서비스를 제공했고, 앞서 말했던 제이콥의 법칙을 잘 지켰기 때문이라 생각한다.
1-4. 밀러의 법칙
보통 사람은 작업 기억에 7(+-2)개의 항목밖에 저장하지 못한다.
여기서 말하는 '7개'라는 숫자는 단순하게 7개라는 뜻이 아니다. chunk 단위로 묶은 덩어리가 7개라는 뜻이다.
즉, 유사성이 높은 부분을 컴포넌트로 묶으면 사용자는 7개 이상을 기억할 수 있게 된다.
책에서는 뉴스 페이지, 나이키 홈 등을 예시로 들었다.
=>
이 부분 역시 자연스럽게 사용했다. 대부분의 프론트엔드 개발자들이 그럴 것 같은데, header와 aside, section 등을 나누다 보면 자연스럽게 chunk 단위로 묶이게 되기 때문이다.
1-5. 포스텔의 법칙 **
자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때에는 너그럽게.
여기까지 읽으면서 프론트엔드 개발자로서 가장 중요하다고 생각한 부분이다.
사용자의 입력은 너그럽게(포용력 있게, 다양하게) 받아들이면서 출력은 정확하게(사용자의 의도가 맞도록) 나오는 게 가장 중요하다고 생각하기 때문이다.
예를 들어서 폼의 필드를 작성할 때 이미 작성한 내용은 미리 채워져있는 게 사용성 면에서 우수하다.
그리고 다양한 디바이스에 대응할 수 있는 반응형도 이젠 필수가 되었다.
즉, 웹 표준과 웹 접근성을 지키며 개발해야 하는 것이다.
=>
실무를 하면서 이 부분을 지켰는지 고민해보게 되었다.
예시로 나온 폼의 필드 부분이나 반응형 구현은 해본 적 있다. 그리고 개인적으로는 무의미한 div 남발을 자제하고 상황에 맞는 태그 쓰기, br 태그 덜 쓰기 같은 것들은 해본 적 있다. 또 다국어 서비스를 제공했기에 여러 언어로 접근하더라도 동일한 서비스 경험을 할 수 있도록 고민해보았다.
하지만 tab index를 수기로 지정해주거나 저시력자들을 위해 깊이 고민해본 적은 없다. 새 프로젝트를 하게 된다면 이 부분을 더 고민해볼 수 있도록 해야겠다.
