[BOOK] UX/UI 10가지 심리학 법칙

사용자 경험 개선을 위한 10 가지 고려사항

UI/UX를 사용하는 주체가 사람인 만큼 알 수 없는 사람의 마음을 연구하는 심리학은 UI/UX와 더 없이 좋은 궁합을 이루는 요소이다.

유명한 심리학 법칙을 UI/UX에 적용하고 개선점을 생각해볼 수 있다는 점에서 디자이너 뿐만 아니라 프론트엔드 개발자에게도 크게 도움이 될 만한 내용이다.

소개하는 법칙을 간략하게 알아보자.

제이콥의 법칙

사용자는 모든 사이트가 자신이 알고 있는 다른 사이트들과 같은 방식으로 동작하길 원한다.

익숙한 디자인은 쉽게 사용방법을 알 수 있으므로 정신적인 노력이 줄고 인지 부하가 감소한다. 따라서 인터페이스를 익히는 데 드는 정신적 에너지가 줄어들게 되고, 이는 목표 달성에 사용할 에너지가 늘어나게 되는 것을 의미한다. 따라서 성공적인 목표 달성 확률도 높아진다.

페이지 구조, 작업 흐름, 내비게이션, 검색 등의 전략적인 영역에 일반적인 디자인 패턴이나 관례를 사용하는 것은 해당 웹사이트나 애플리케이션을 즉시 사용할 수 있도록 하기 위해 흔히 쓰는 방법이다.

제이콥 닐슨이 제창한 제이콥 법칙은 사용자가 다른 웹사이트를 통해 축척된 경험을 바탕으로 디자인 관례에 대한 기대치를 형성하는 경향을 보인다는 법칙이다.

사용자의 멘탈모델(시스템의 작동 방식에 관해 알고있다고 생각하는 부분)을 따르지 않는 디자인은 서비스 인지 방식이나 이해 속도에 악영향을 미친다.

제이콥 법칙은 똑같은 디자인을 옹호하는 법칙이 아니라 사용자가 새로운 경험을 이해하기 위해 기존 경험을 활용한다는 사실을 상기시키는 것으로 보아야 한다.


피츠의 법칙

사용성(usability)은 사용이 편하다는 것을 의미하며, 인터페이스가 이해하기 쉽고 탐색하기도 쉽다는 뜻이다. 

인터랙션은 최소한의 노력만으로 불편없이 간단하게 이루어져야 하며, 인터랙티브 요소를 사용하기 위해 움직이는 시간은 인터랙션의 중요한 지표이다.

터치 대상의 크기는 사용자가 정확하게 선택할 수 있을 정도로 충분히 커야 하며, 터치 대상 사이에는 충분한 거리를 확보해야 한다.

또한 터치 대상은 쉽게 도달할 수 있는 영역에 배치해야 한다.


힉의 법칙

의사 결정에 걸리는 시간은 선택지의 수와 복잡성에 비례해서 늘어난다.

인터페이스에 선택지가 많으면 효율적이지 않으며, 사용자의 니즈를 완벽히 이해하지 못했다는 것을 드러낸다.


밀러의 법칙

자극에 포함되는 정보 양의 기억 범위는 7개 정도이다. 기억 범위에 더 큰 영향을 끼치는 건 정보의 기본 단위인 비트(Bit)가 아니라 정보 덩어리(Chunk)의 개수이다. 단기 기억에는 한계가 있으며 정보 비트를 유의미한 덩어리로 정리하면 단기 기억을 최적화할 수 있다는 것이 밀러 연구의 핵심이다. 개인이 기억할 수 있는 덩어리의 수는 맥락이나 익숙한 정도, 수용력 등의 요인에 따라 달라지더라도 단기 기억은 한계가 있으므로 정보를 덩어리로 만들면 더 효과적으로 암기할 수 있다. 덩어리화는 UX 디자인에서 콘텐츠를 다룰 때 도움이 되며, 콘텐츠를 적절한 덩어리로 나누면 이해하기 쉬운 디자인이 완성된다.

콘텐츠를 시각적으로 뚜렷이 구별되는 그룹으로 나누고 명확하게 체계화하면 디지털 콘텐츠를 평가하고 처리하는 방식에 알맞은 정보를 표시할 수 있다.

덩어리화한 콘텐츠는 모듈별로 그룹 지어지고 규칙에 따라 나뉘며 체계가 부여되기 때문에 콘텐츠끼리 어떤 관계를 이루고 있는지 사용자가 쉽게 이해할 수 있다.

특히 정보의 밀도가 높은 경험을 덩어리화하면 콘텐츠 구조가 형성된다.

따라서 콘텐츠를 적절한 크기의 덩어리로 나누어 정리하면 사용자가 정보를 더 쉽게 처리하고 이해하고 기억하는데 도움이 된다.


포스텔의 법칙

인터페이스와 시스템은 안정성과 접근성을 보장해야 하며 인터페이스 디자인은 사용하기 쉬워야 한다. 사용자의 입력은 포맷이나 메커니즘을 막론하고 무조건 수용해야 한다. 또한 다양한 입력 방식이나 네트워크 대역폭, 연결 강도 등 여러 변수에서 발생하는 차이를 모두 아울러야 한다. 

폼은 본질적으로 인간이 시스템과 인터랙션하는 수단으로, 사용자는 제품이나 서비스가 요청한 정보를 폼 요소를 통해 전송한다.

또한 사용자에게 요청하는 정보의 양은 보수적으로 책정해야 한다. 사용자가 채워야 할 필드가 늘어날수록 인지적 에너지와 노력도 커지며, 이는 의사결정 피로도(decision fatigue)와 연결되므로 중복된 요청없이 꼭 필요한 정보만 요청해야 한다.


피크엔드 법칙

피크엔드 법칙이란 감정적인 절정과 마지막 순간의 경험에 집중하여 어떤 것을 판단하는 경향을 의미한다. 따라서 사용자의 전체 경험을 긍정적으로 만들려면 이러한 순간에 각별한 주의를 기울여야 한다. 

인지편향이란 정보를 처리하고 의사결정을 내리는 과정에서 생기는 체계적인 오류를 의미한다. 이는 인간의 뇌가 복잡한 정보를 단순화하거나 빠르게 판단하기 위해 사용하는 휴리스틱(heuristic)에서 비롯된다.

인지 편향의 한 종류인 피크엔드 규칙은 기억 회상을 방해하는 기억 편향으로 자신의 감정을 강하게 자극한 사건을 그렇지 않은 사건보다 더 잘 기억하게 된다. 


심미적 사용성 효과

외형적 사용성은 내재된 사용 편의성보다 외형적 아름다움과 더 큰 연관이 있다.

브라운의 디자이너인 디터 람스는 less but better 원칙으로 형태가 기능을 따를 것을 강조한다.

미학적으로 이름다운 디자인은 사용성 문제를 눈감아 줄 확률이 더 높아지는 심미적 사용성 효과가 작동하기 쉽다.


폰 레스토프 효과

폰 레스토프 효과는 인간이 다른 요소와 시각적으로나 개념적으로 분리된 항목을 잘 기억하는 것을 의미한다.

집중 능력은 용량과 지속 시간에서 제한이 있기 때문에 관련 없는 정보를 희생하고 관련 있는 정보에 집중하는 것을 선택적 주의력(selective attention)이라고 한다.

선택적 주의력의 한 가지 사례로 배너 무시(banner blindness)라는 행동이 있다. 이는 사용자가 광고라고 인식하는 요소를 무시하는 경향을 가리키는 용어로, 디지털 광고처럼 도움이 되지 않는 정보를 무시하는 것이다.

따라서 꼭 필요한 콘텐츠라고 해도 광고처럼 보이거나 광고 근처에 위치하게 되면 무시당할 가능성이 있음을 주의해야 한다.

폰 레스토프 효과를 잘 활용하면 사용자를 의도대로 안내할 수 있으며, 폰 레스토프 효과는 남용하지 말고 명확한 목적이 있을 때만 사용해야 한다.

아예 아무것도 강조하지 않는 것보다 더 나쁜 것은 지나치게 많은 시각적 경쟁 요소를 강조하는 것이다. 


테슬러 법칙

이 법칙은 모든 애플리케이션과 프로세스에는 완전히 없애거나 감출 수 없는 일정량의 복잡성이 존재함을 의미한다.

이 복잡성은 개발 과정이나 사용자 인터랙션 단계에서 처리하게 된다. 개발 단계에서 제거하지 못한 복잡성은 사용자에게 전가되고 사용자 경험으로 이어진다. 제품과 서비스 사용자가 겪을 불필요한 복잡성을 제거하여 명쾌하고 단순한 경험을 구현하는 것은 디자이너+개발자가 추구해야 할 중요한 목표이다.

좋은 사용자 경험이란 목표 달성을 방해하는 장애물을 제거한 쉽고 직관적인 경험이다. 그러나 인터페이스가 너무 추상적인 수준까지 단순해지면 사용자가 올바른 결정을 내리는 데 필요한 정보가 충분히 제공되지 않으므로 주의해야 한다.


도허티 임계

컴퓨터 반응 시간이 생산성에 불균형한 영향을 미치는 것을 의미한다.

컴퓨터와 사용자는 서로 기다리지 않아도 되는 속도로 인터랙션할 때 생선성은 급격히 높아지며 느린 시스템은 인터페이스를 사용하는 사람의 생산성을 떨어뜨린다.

반응이 즉각적이라고 느끼려면 0.1초 이내여야 한다. 0.1~0.3초 사이의 지연은 맨눈으로 감지되는 수준이므로 자신의 통제에서 벗어난다고 느낄 수 있다.

1초 이상의 지연은 인지 부하가 커지고 사용자 경험이 나빠지게 된다. 스켈레톤 스크린을 사용하면 사이트가 더 빨리 로딩되는 것처럼 보이므로 속도와 반응성에서 더 긍적적으로 인지하게 된다. 


기타

다크 패턴은 기술이 사용자의 행동에 영향을 미치는 또 하나의 방법이다. 참여도를 높이기 위해 불필요한 정보 공유나 마케팅 정보 수신 허용 등 사용자가 의도하지 않은 행동이나 그들에게 도움이 되지 않는 행동을 하도록 유도하는 것이다.

예를 들면 재고가 부족하다고 느끼면 더 갖고 싶어하는 심리를 이용해 재고의 상태를 표시하는 희소성 패턴(scarcity pattern)이 있다.


결국은 사용자의 인지 부하를 감소시키고 복잡성을 줄여 최고의 사용자 경험을 안겨주기 위한 방법은 사용자 입장에서 고민하고 생각하여 결과물을 만드는 것으로 귀결된다.

이외에도 좋은 내용이 많다.

interface, type 차이점이 뭘까(Typescript)

비슷하지만 동일하지 않은 interface vs type

타입스크립트에서 타입을 선언하기 위해서는 interface 또는 type 키워드를 사용합니다.

각각의 선언 방식은 다음과 같으며 =의 유무만 다릅니다.

// interface
interface Team{
  name : string
}

// type
type Team = {
  name : string
}

그리고 타입의 확장 방법은 다음과 같습니다.

// interface
interface City extends Team {
  city : string
}

// type
type City = Team & {
  city : string
}

interface와 type의 가장 큰 차이점은 바로 선언적 확장(Declaration Merging) 기능인데요.

선언적 확장이란 이미 선언된 타입 선언에 필드를 추가하는 것입니다.

하나는 가능하고 하나는 가능하지 않은데 interface만 가능한 것이 특징입니다.

사용 방법은 다음과 같습니다.

interface Team {
  name : string
}

interface Team {
  manager : string
}

위와 같은 방법으로 이미 선언된 interface에 다시 필드를 선언할 수 있습니다.

하지만 type을 다음과 같은 방법으로 사용하면 에러가 발생합니다.

type Team = {
  name : string
}


// Error 발생 -> 'Duplicate identifier 'Team'
type Team = {
  manager : string
}

추가로 type은 원시형(number, string 등) 데이터를 다른 이름으로 지정해서 사용할 수 있지만 interface는 불가능합니다.

자세한 내용은 다음 코드와 같습니다.

//type으로 원시형 데이터의 이름을 지정
type NameDataType = string;

const printName = (name : NameDataType ) => {
  console.log(name);
}

//interface는 불가
interface NameType extends string {
}

차이점을 신경써도 되지 않을 상황이라면 취향에 따라 선택하면 되지만 기본적으로는 interface를 쓰면 큰 문제가 없다고 합니다.

참고 : typescript 공식 문서