반응형
존 야블론스키님의 책을 읽고, 책의 내용과 저자의 웹사이트(https://lawsofux.com/) 내용을 간단하게 정리하고자 한다. 핵심 개념을 제외하고는 생략된 설명과 예제가 많으니, 책을 직접 읽거나 웹사이트를 정독하는 것을 추천드린다.
- 제이콥의 법칙(Jakob’s Law)
- Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
- 혁신적으로 UX를 향상(much better)하는게 아니라면, 사용자가 익숙한 인터페이스를 똑같이 제공하라.
사이트마다 같은 인터페이스 - 웹사이트가 제공하는 핵심 기능에 집중하는 것도 힘든 유저이다. 새로운 UI까지 학습시킬 수는 없다.
- 꼭 변화를 주고 싶을 경우, 기존 방식을 활용할 수 있는 방법(따로 URL을 마련하는 등)을 유저에게 제공해줘라.
- 피츠의 법칙(Fitts’s Law)
- The time to acquire a target is a function of the distance to and size of the target.
- Target은 사용자가 쉽게 Point할 수 있도록 위치시켜야 한다.
- 데스크탑일 경우, 대상이 크고 이동 거리가 가까울수록 정확하게 접근하기 쉽다.
- 모바일일 경우, 대상이 크고/Thumb Zome에 있고/대상 사이의 간격이 클수록(Fat Finger Friendly) 접근하기 쉽다.
- 힉의 법칙(Hick’s Law)
- The time it takes to make a decision increases with the number and complexity of choices.
- 사용자의 인지 부하(cognitive load)를 줄여라
- 선택지의 개수를 줄여라.
- 복잡한 과정은 작은 단계로 쪼개라.
- (slack 처럼) 신규 유저의 경우, 듀토리얼을 쪼개서 진행하라.
- 추상적으로 보일만큼 간소화하지 마라. 예를 들어, 문구 없이 Icon만 사용하면 사용자의 인지 부하가 커진다.
- 밀러의 법칙(Miller’s Law)
- The average person can only keep 7 (plus or minus 2) items in their working memory.
- 밀러의 법칙은 ‘7개까지는 기억할 수 있으니 괜찮다’는 말이 아니라, 사람들이 쉽게 기억할 수 있도록 ‘덩어리화’하라는 말이다.
- '0209831234'라는 숫자를 '02-0983-1234'로 덩어리화하면 기억하기 쉽다.
- '0209831234'라는 숫자를 '02-0983-1234'로 덩어리화하면 기억하기 쉽다.
- 포스텔의 법칙(Postel’s Law)
- Be liberal in what you accept, and conservative in what you send.
- 유저의 액션(input)은 너그럽게, 개발자의 액션(send)은 깐깐하게.
- 유저가 input을 대충 입력해도 정상적으로 작동하도록 한다.(숫자, 날짜, 전화번호)
- 개발자는 유저의 input을 시스템에서 정해둔 명세대로 잘 변환한다. (시스템 자체가 유연해서는 안된다.)
- 유저가 어떠한 기기, 브라우저, 성능, 국가에서 들어오더라도 수용한다.(점진적 향상법)
- 유저의 input이 어떻게 들어올지 고민하고 미리 예측하는 것이 중요하다.
노력을 해도 예상할 수 없는 input일 경우, 억지로 맞춰주려고 하지말고 명확한 피드백을 제공한다.
- 피크엔드 법칙(Peak-End Rule)
- People judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience.
- 유저는 웹사이트를 활용하면서 가장 인상깊었을 때와 사이트를 벗어날 때의 경험을 바탕으로 사이트를 평가한다.
- 유저는 긍정적인 경험보다 부정적인 경험(Negative Peaks)을 더 잘 기억한다.
- 부정적인 경험(ex> 404 Not Found Page)을 기회로 삼아 웹사이트 고유의 위트와 분위기를 나타낼 수도 있다.
사이트의 특색을 나타내는 Not Found Page
- 부정적인 경험(ex> 404 Not Found Page)을 기회로 삼아 웹사이트 고유의 위트와 분위기를 나타낼 수도 있다.
- 심미적 사용성 효과(Aesthetic-Usability Effect)
- Users often perceive aesthetically pleasing design as design that’s more usable.
- 유저는 예쁜 디자인이 더 잘 동작할 것이라 믿는다.
- 유저는 디자인이 예쁠 경우 경미한 버그나 사용성 저하를 참아주는 경향이 있다.
- 폰 레스토프 효과(Von Restorff Effect)
- The Von Restorff effect, also known as The Isolation Effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
- 중요한 정보는 시각적으로 독특하게 하라.
- 색깔로만 구별하지 말고 모양도 활용해라. (색맹, 색약 고려)
- 과도한 motion을 사용하지는 마라. (불안을 유발하지 않기 위해)
- 여러개를 강조해서 서로 경쟁하게 하지 마라.
- 광고로 오인하게 하지 마라.(광고 주변에 중요한 내용을 넣거나, 긴 글 중간에 이미지를 넣으면 광고로 오인할 수 있음)
- 테슬러의 법칙(Tesler’s Law)
- Tesler’s Law, also known as The Law of Conservation of Complexity, states that for any system there is a certain amount of complexity which cannot be reduced.
- 특정 기능은 더 이상 줄일 수 없는 복잡성을 갖는다. 이 복잡성을 유저가 해결하게 하거나, 개발자가 해결하게 하게 해야한다.
- 예: 이메일 작성 UI에서 보내는 사람을 (본인으로) 자동으로 채워주고, 받는 사람의 목록을 추천해주기.
- 도허티 임계(Doherty Threshold)
- Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
400ms 이하에서 급격히 상승하는 생산성 - 400ms 안에 피드백을 줘서 유저를 집중시켜라.
- Progress bar와 애니메이션 등을 이용하여 대기 시간을 즐겁게하라.
- Progress bar가 정확할 필요는 없다.
- 작업이 너무 빨리 끝날 것 같은 경우, 대기 시간을 늘리면 오히려 신뢰를 얻을 수도 있다.
- Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
이 책을 읽고 프론트엔드 개발자로서 UX/UI에 관해 조금 더 깊이 있게 고민할 수 있게 되었다!
반응형