UX/UI의 10가지 심리학 법칙(5) - 포스텔의 법칙

자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게.

핵심 요약
- 사용자가 어떤 동작이나 입력을 하든지 공감하는 태도로 유연하고 관대하게 대처하라
- 인터페이스의 안정성과 접근성은 보장하되, 입력, 접근성, 성능 면에서 만반의 준비를 하자
- 다양한 가능성에 대해 잘 예측하고 대비할수록 디자인 회복탄력성은 좋아진다.
- 사용자의 가변적인 입력을 수용해서 기계가 이해할 수 있는 방식으로 해석하라. 입력의 한계를 정의하고
사용자에게 명확한 피드백을 제공하라

 

개요

- 훌륭한 사용자 경험을 디자인한다는 것은 훌륭한 인간 경험을 디자인한다는 뜻

- 인간은 때로 일관성이 없고, 자주 주의가 산만해 지며, 가끔 실수하고 보통 감정에 휘둘린다

- 인터랙션하는 제품과 서비스가 우리를 직관적으로 이해하고 너그럽게 대해주길 기대함

- 견고함의 원칙이라고도 부르는 포스텔의 법칙은 다양성과 복합성에 잘 대처할 수 있는 인간 중심 경험을 디자인하는데 도움이 됨

- 포스텔의 법칙 첫 문장은 자신이 행하는 일은 엄격하게 임

- 이를 디자인에 적용하면 인터페이스든 포괄적인 시스템이든 안정성과 접근성을 보장해야 한다는 뜻

- 안정성과 접근서은 디지털 제품이나 서비스에서 중요하게 여겨지는 특성

- 기기의 크기나 기능, 입력 메커니즘, 보조 기술, 연결 속도까지 누구에게나 정상 작동하는 인터페이스를 제공할 수 있어야 함

 

기원

- 포스텍의 원칙은 원래 컴퓨터 네트워크상 데이터 전송과 관련된 네트워크 엔지니어링 가이드라인으로 만들어짐

- 견고하마의 원칙을 근거로 도입된 장애허용 시스템 덕에 초기 인터넷 노드 통신은 안정성을 얻음

- 하지만 이 원칙은 컴퓨터 네트워크 엔지니어링 분야를 뛰어넘어 그 밖에 분야에도 영향을 미침

- 포스텍의 법칙에 담긴 철학은 사용자 경험 디자인이나 사용자의 입력과 시스템을 출력을 다루는 방식에도 적용 가능

 

사례

 

Apple(Face ID)

출처 : iPhone 또는 iPad Pro에서 Face ID 사용하기 - Apple 지원 (KR)

 

- 애플의 얼굴인식 시스템임

- 사용자는 ID와 비밀번호를 입력없이 얼굴로 본인 인증을 하고 모바일 기기의 잠금 해제 가능

 

반응형 디자인

 

출처 : 반응형 디자인 vs 적응형 디자인, 모바일 앱 디자인에 가장 적합한 것은? 디자인 로그 - 티스토리

 

- 반응형 디자인은 유동형 그리드, 가변 이미지, 미디어 쿼리를 활용해 다양한 시청 맥락에 맞게 웹사이트의 콘텐츠가

유동적으로 반응하는 것

- PC용 사이트와 인터넷 접속 기능이 있는 모바일 기기용 사이트를 별도로 만들던 당시 상황을 고려하면 혁신적인 웹사이트 기법

- 디자이너는 기기 맞춤형 경험을 만드는 것을 넘어 웹의 유동적 특성을 포용해야 한다는 압박을 받기 시작함

- CSS의 성능이 좋아지면서 다양한 기기에 맞는 상황에 맞춰 콘텐츠는 유연하게 반응할 수 있게 됨

- 반응형 웹디자인 기법은 광범위한 유형의 입력을 수용하되, 기기의 크기나 유형에 구애받지 않고 다양한 크기의 화면에서 안정적으로 출력이 이뤄지게 한다는 철학을 잘 구현함

 

점진적 향상 검색 컴포넌트

 

출처 : 검색 FE파트는 어떻게 생산성을 높여가고 있을까? Part 1 ❘ by Jaesung Na ❘ 롯데ON 기술 블로그

 

- 점진적 향상 전략의 강점은 브라우저 기능이나 기기의 성능, 연결 속도에 구애받지 않고 다양한 사용자를 관대하게 수용하는 능력

- 핵심 콘텐츠를 지키면서 향상된 기능을 보수적으로 추가하기에 누구의 접근성도 해치지 x

- 누구나 상자를 선택하고 검색질의를 입력할 수 있음

- 단 음성 인식 기능을 지원하는 기기에는 음성 명령을 허용함

 

디자인 작업 프로세스

 

출처 : LINE CREATIVE ❘ LINE Design System을 소개합니다.

 

- 컴포넌트와 패턴을 조합해서 다양한 애플리케이션을 만들고 프레임워크를 통해 디자인의 확장성을 보장하는 것이 가능해짐

- 조직 전반에 걸쳐 일관성을 유지하면서 디자인 규모를 키울때 매우 유용하게 쓰이는 도구

- 효과적인 디자인 시스템을 구축하려면 여러 유관부서가 제공하는 디자인, 콘텐츠, 코드, 전략, 의견, 비평에 이르기 까지

모든 것을 너그럽게 수용해야 함

- 그에 반해 디자인 시스템이 생산하는 결과물에 대해서는 엄격한 기준을 적용해야 함

- 가이드라인, 컴포넌트, 패턴, 원칙 등 모든 것이 명확하고 단호해야 함

 

디자인 회복탄성력

 

출처 : Decoding The Amazon Search Bar

 

- 사용자가 시스템에 입력하는 내용은 가변적이고 광범위하다

- 그러므로 더 나은 사용자 경험을 보장하려면 입력을 너그럽게 수용하는 시스템을 디자인해야 함

- 하지만 오류가 발생활 확률이나, 적어도 그다지 휼륭하지 않은 사용자 경험이 만들어질 확률도 높아짐

- 디자이너가 다양한 가능성에 대해 잘 예측하고 대비할수록 디자인의 회복탄성력을 좋아질 것

- 그 예로 아마존은 글꼴의 크기가 커지면 검색 바 아래에 있는 퀵 링크를 중요도에 따라 정리하고 덜 중요한 링크는 감춤

 

정리

- 포스텔의 법칙은 인간과 기계를 잇는 가교 역할을 함

- 인간의 가변적인 입력을 너그럽게 수용해서 구조적이고 기계 친화적인 출력으로 해석할 수 있는 시스템을 디자인해야 함

- 사용자의 부담이 줄고 더욱 인간적인 사용자 경험이 보장됨

- 그 만큼 오류가 발생할 가능성도 커짐

- 디자이너가 다양한 가능성에 대해 잘 예측하고 대비한다면 회복탄성력이 뛰어난 디자인을 만들 수 있음