Study Note

[UI/UX] 폰 레스토프 효과

💡 비슷한 사물이 여러 개 있으면 그중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다. ​ 인간은 산만한 세상에서 살고 있다. 이런 세상 속에서 주의력은 주변 세상을 지각하는데 핵심적인 역할을 하게 된다. ​ 디지털 인터페이스를 접할 때, 사용자는 시각적으로 대비되는 요소에 빠르게 주의를 뺏기게 된다. 따라서 인터페이스를 구성할 때 사용자의 주의를 끄는 요소를 (색상, 형태, 크기, 위치, 움직임 등) 어떻게 사용할지 신중하게 고민해야 한다. ​ 선택적 주의력​​ 사물에 집중하는 능력은 용량과 지속시간 면에서 제한이 있기 때문에, 사람들은 관련없는 정보의 습득은 희생하고 원하는 정보에만 집중한다. ​ 배너무시 사용자가 광고로 인식한 요소를 무시하는 경향을 말한다. 꼭 필요한 컨텐츠라도 광고처럼 보..

💡 복잡성 보존의 법칙, 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다. ​ 제품과 서비스 사용자가 겪을 불필요한 복잡성을 제거해 명쾌하고 단순한 경험을 구현하는 것은 디자인의 중요한 목표이다. 좋은 사용자 경험이란 목표달성을 방해하는 장애물을 제거한 쉽고 직관적인 경험을 말한다. ​ 도허티 임계 💡 컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션하면 생산성은 급격히 높아지게 된다. 반응이 즉각적이라고 느끼기 위해서는 0.1초 이내여야 한다. 지연이 1초 이상으로 늘어나면 사용자는 집중하기 어려워지고, 작업 수행에 필요한 정보를 놓치기 시작해 생산성이 감소한다. ​ 처리 시간을 더이상 단축할수 없을 때는 사용자에게 피드백을 주면 좋다. Skeleton sc..

💡 사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다. ​ 자동 인지 처리 감지 중인 대상에 의식적으로 주의를 기울이기에 앞서 과거 경험을 바탕으로 정보를 처리하고 판단하는 것을 말한다. 시스템 1: 충동적으로 작동하며 심리적 노력이 거의 들지 않는다. 매사에 신속하고 의식의 제어도 받지 않는다. 시스템 2에 직감, 느낌, 의도, 인상 등의 정보를 제공한다. 시스템 2: 시스템 1이 난관에 봉착했을 때 호출하며 직면한 문제를 해결하겠다는 목표를 가지고 정보를 더 정밀하고 구체적으로 처리 주의를 기울여야하는 복잡한 문제에 사용한다. ​ 디자인이 아름다우면 사용성도 더 좋게 느껴져 사용성 문제를 간과할 수 있다. 항상 사용성에 주의를 기울여야 한다.

💡 인간은 경험 전체의 평균이나 합계가 아니라 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다. ​ 인지편향 판단에 관여하는 사고나 이성에 발생하는 계통오차를 말한다. 상황을 철저하게 분석하기보다 효율적으로 신속한 결정을 내리게 해주는 정신적인 지름길이 되기도 한다. ​ 여정지도 사용자가 임무나 목표를 성취하는 과정을 서술해 사용자가 제품이나 서비스를 사용하는 방법을 시각화 할 때 유용하다. 렌즈, 경험, 통찰

💡 자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 관대하게 해야 한다. ​ 인터페이스나 시스템은 사용자에게 안정성과 접근성을 보장해야 하며, 사용자의 입력은 포맷이나 입력 매커니즘을 막론하고 무조건 수용해야 한다. ​ 사용자에게 요청하는 정보의 양을 보수적으로 책정해야 한다. 사용자가 채워야 할 필드가 늘어나면 의사결정 피로감으로 정보의 품질이 떨어진다. 중복요청을 피한다. ​ 반응형 웹디자인 → 기기 맞춤형 + 웹의 유동적 특성 ​ 점진적 향상: 콘텐츠에 초점을 맞추고 스타일과 인터랙션을 점진적으로 쌓아가는 전략을 말한다. 다양한 사용자를 관대하게 수용할 수 있다. 핵심 콘텐츠를 지키면서 향상된 기능을 보수적으로 추가하는 방식으로 이루어진다. ​ 디자인 시스템 재사용 가능한 컴포넌트와 패턴의 ..

💡 보통 사람은 작업기억 속에 7(+-2)개의 항목밖에 저장하지 못한다 ​ 덩어리화 인간의 단기기억은 한계가 있고, 정보를 덩어리로 만들면 정보를 더욱 효과적으로 암기할 수 있다. 콘텐츠를 적절히 덩어리로 나누면 이해하기 쉬운 디자인이 완성된다. 저장되는 덩어리 개수는 해당 분야에 관래 각자 지닌 배경지식에 따라 달라질 수 있다. ​ 텍스트 장벽 체계나 서식이 없고, 행 길이도 적절히 나누지 않은 콘텐츠같은 것을 말한다. 사용자의 인지 부하를 가중시켜 정보 습득을 방해한다. ​ 덩어리화한 콘텐츠는 모듈별로 그루핑되고, 규칙에 따라 나뉘며, 체계가 부여되어 콘텐츠간의 관계를 사용자가 쉽게 이해할 수 있게 된다. 단기 기억에는 한계가 있으며, 정보를 유의미한 덩어리로 정리하면 단기 기억을 최적화할 수 있다.

💡 의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다. ​ 그렇기 때문에 선택지는 제품이나 서비스의 사용자가 부담을 느끼지 않고록 종합하고 정리해서 보여줘야 한다. 다만, 추상화라고 할 정도로 지나치게 단순화 해버리면 어떤 조치를 하야할 지, 다음 단계는 무엇인지, 특정 정보는 어디서 찾는지 불분명해져 오히려 혼동을 불러오게 된다. ​ 인지부하 인터페이스를 익히고 인터랙션하는데 필요한 정신적 자원의 양을 말한다. ​ 디자인 프로세스에서 사용자의 목표 달성에 도움이 되지 않는 요소를 제거하는 과정은 꼭 필요하다.

💡 대상에 도달하는 시간은 대상까지의 거리와 대상의 크기와 관련되어있다. ​ 사용성은 좋은 디자인을 이루는 요소이다. 인터랙션은 최소한의 노력만으로 불편 없이 간단하게 이루어져야 한다. ​ 터치 대상 터치 대상의 크기는 사용자가 쉽게 알아보고 명확하게 선택할 수 있을 정도로 충분히 커야한다. 터치 대상 사이에 충분한 거리를 확보해야 한다. 터치 대상은 인터페이스상에서 쉽게 도달할 수 있는 영역에 배치해야 한다.

💡 사용자는 웹사이트를 통해 축적된 경험을 바탕으로 디자인 관례에 대한 기대치를 형성하는 경향을 보인다. ​ 사람들은 이미 알고있는 것과 같은 방식으로 작용하기를 바란다. 따라서 인터페이스에 변화를 줄 때는 사용자에게 익숙한 모델을 한시적으로 이용할 권한을 부여해 불협화음을 최소화하는 것이 필요하다. 인터페이스를 만들 때 사용자를 불편하게 할 방해요소를 최대한 제거해 사용자가 목적을 달성할 수 있도록 해야 한다. ​ 멘탈 모델 멘탈 모델은 어떤 시스템에 관해 그 시스템의 작동 방식에 관해 알고 있다고 생각하는 바를 가리킨다. 과거의 경험을 바탕으로 새로운 대상과 인터랙션 할 때 사용한다. 멘탈 모델 부조화는 주로 익숙한 제품이 갑자기 변할 때 발생하게 되며, 해당 제품이나 서비스를 인지하는 방식이나 이해..

react-markdown 라이브러리를 사용하면 리액트에서 마크다운을 랜더링 할 수 있다. 현재도 업데이트가 이루어지고 있는 라이브러리이다. GitHub - remarkjs/react-markdown: Markdown component for React Markdown component for React. Contribute to remarkjs/react-markdown development by creating an account on GitHub. github.com