존 아블론스키의 'UX/UI의 10가지 심리학 법칙 - 사용자의 마음을 읽는 인간 중심 제품과 서비스 디자인.'을 읽고 개인적으로 정리한 내용입니다.
혹시 문제가 될 내용이 포함되어 있다면, 댓글 달아주시면 수정하도록 하겠습니다. (__)
1-6. 피크엔드 법칙 **
인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다.
사람은 절정(peak), 마지막(end) 순간의 감정을 바탕으로 경험을 판단한다. 게다가 긍정적인 순간보다 부정적인 순간을 더 생생하게 기억한다.
따라서 사용자에게 가장 도움을 주는 순간(중요하게 여겨지는 순간)을 파악하고, pain point를 줄이는 것이 중요하다.
이것을 파악하기 위해 사용자 여정 지도를 만드는데, 이는 사용자가 임무나 목표를 성취하는 과정을 서술함으로써 사용자가 제품 혹은 서비스를 사용하는 방법을 시각화할 때 매우 유용하다.
그리고 pain point를 감소시키는 방법으로 에러 페이지를 따로 만들어둘 것을 제안한다.
=>
법칙의 내용에 대해서는 깊이 공감한다. 특히 부정적인 감정이 긍정적인 감정보다 감정가가 크기 때문에 이를 경감시키는 게 중요하다는 것이 인상 깊었다.
개발자로서 다양한 에러를 만날 수 있다. 책에서 예시로 들었던 것처럼 404 에러는 대표적인 프론트엔드 쪽 오류이다.
추가로 생각해보았을 때는 에러 페이지를 만들지 않더라도 에러가 발생했을 경우, 에러의 원인과 어떻게 하면 이 에러를 해결할 수 있는지 구체적으로 알려주면 좋을 것 같다고 생각했다.
그래서 사용자가 빨리 원래 서비스 혹은 제품으로 복귀하고, 원하던 행동을 할 수 있도록 고민해봐야겠다.
1-7. 심미적 사용성 효과
사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.
=>
'보기 좋은 떡이 먹기도 좋다.'라는 속담이 생각나는 파트였다.
다만 '보기 좋은 디자인'이라는 정의가 애매하다는 생각이 들었다. 개인적으로 이해한 바로는 정렬과 배치가 고르게 되어 있는 디자인을 보기 좋은 디자인이라고 정의하는 것 같았는데, 이또한 사용성이 뛰어난 디자인이 아닌가 싶었다.
1-8. 폰 레스토프 효과
비슷한 사물이 여러 개 있으면 그중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다.
예를 들어서 그냥 줄글로 되어 있는 warning popup이 아니라, 경고 아이콘과 '삭제'라는 부분에는 붉은색으로 표시하는 것을 뜻한다.
이렇게 하면 사용자는 이 아이콘을 주목하고 대화상자에 담긴 콘텐츠가 중요하다는 것을 깨닫는다.
또 한 가지 예시로는 드롭박스에서 회사의 메인 구독 모델을 가운데에 배치하고, 그 모델만 다른 레이아웃을 적용하는 것이다.
다만 이것을 적용하기 전에 저시력자나 움직임에 민감한 사용자에게는 어떤 영향을 미칠지 사전에 고민해보아야 한다.
=>
아주 효과적이고 본능적으로 사용하는 방법이라고 생각한다. 이 효과를 확실히 누리려면 다양한 파트의 사람들이 협력해야 할 것 같다.
기획면에서 어떤 것이 우리 회사의 메인 서비스일지 고민하고, 디자인면에서는 해당 서비스를 어떻게 강조할 것인지 고민해야 한다.
개발자로서는 이렇게 협의된 내용을 어떻게 하면 웹 표준, 웹 접근성을 지키며 구현할 수 있을지 고민할 수 있다.
1-9. 테슬러의 법칙
복잡성 보존의 법칙이라고도 알려진 테슬러의 법칙에 따르면, 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.
최소한의 복잡성이 존재하기 때문에 결국 사용자 혹은 시스템이 이 복잡성을 감당해야 한다.
다만 추상적으로 느껴질 정도로 인터페이스를 단순화해선 안 된다.
예시로 나오는 게 gmail이다.
메일 서비스를 이용하려면 필연적으로 수, 발신인이 필요하다. gmail은 이 복잡성을 해결하기 위해 보낸 사람은 자동으로 채우고, 받는사람은 기존 이메일을 기반으로 상대를 추천한다.
최근에는 ai를 접목하여 이메일 작성의 부담을 덜어준다.
또 다른 예시로는 애플 페이가 있다.
애플 페이에서는 이전 구매 내역을 불러올 수 있어서 사용자는 주소 등을 작성할 필요가 없어진다.
=>
이 부분도 개발자로 고민할 여지가 충분히 있을 것 같다.
예를 들어 사용자의 정보를 미리 채워두는 것이라면, 상태는 어떻게 관리하면 좋을지 고민해볼 수 있다.
페이지 이동이 일어나는 경우 이 상태를 어디서부터 물고 올지, 아니면 전역적으로 관리할 지, 만약 여러 개의 컴포넌트라면 props로 값을 관리할 수 있는지 등등 말이다.
1-10. 도허티 임계 **
컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터렉션하면 생산성은 급격히 높아진다.
웹의 페이지 용량 평균은 기하급수적으로 증가해왔다. 2019년 PC 페이지 평균 용량은 2MB에 달하며, 모바일 페이지 용량도 1.7MB로 그리 가볍지 않다. 2010~2011년 PC 평균 페이지 용량이 609KB, 모바일 페이지 용량이 262KB였음을 감안하면 약 3배 정도 증가했다.
그만큼 웹은 무거워졌고 사용자의 대기 시간은 길어지게 되었다. 반면 사용자의 인내심은 훨씬 줄어 인터렉션을 하지 않을 경우 최대 0.4밖에 기다리지 못 한다.
해결책은 1. 성능 최적화를 통해 웹을 최대한 가볍게 만들고 2. 사용자에게 더 빨리 인터렉션을 제공해서 전체 페이지가 로딩될 때까지 기다리지 않도록 하는 것이다.
예시로는 스켈레톤 UI, 블러 업, 프로그레스 바 제공, 낙관적 UI 제공 등이 있다.
=>
웹 서비스를 만드는 사람이자 이용하는 사람으로서 매우 공감하며 봤던 챕터이다.
업무를 할 때에도 이 부분을 고민해서 최적화를 할 수 있는 방법을 알아보았고,
사용자에게 더 빨리 인터렉션을 제공하기 위해 스켈레톤 UI를 도입했었다.
특히 블러 업 기법은 Progressive JPG를 활용할 수 있을 것 같다.
예전에 웹 성능 최적화 기법을 스터디하며 알게 된 것인데, 고품질 이미지를 한번에 전송하지 않고 전송하는 방식이다.
그 덕분에 브라우저에서는 초기에 저품질 이미지가 보이고 점차 원래 품질을 회복한다.
당시 테스트로 Progressive JPG를 만들어 보았는데(Link에서 만들었다.)
바로 Progressive JPG를 만들 수 있었던 기억이 있다!
무거운 이미지를 사용하는 사이트에서 해당 부분을 도입할 수 있을지 검토해보아야겠다.
2. 감상평
개인적으로 무척 유익했던 책이다.
학부 때 배웠던 내용이 새록새록 기억났다. 그리고 업무를 하면서 자연스럽게 사용했던 부분들이 그때 배웠던 것 덕분이라 생각하니, 어떻게든 배운 것은 써먹는구나 ^^; 싶었다.
여기서 배운 내용을 참고해서 실무를 할 때에 더 적극적으로 활용해봐야겠다!
