userinyerface를 통한 고통 맛보기 Page 2 (1)

혼돈2.gif

Cumulative Layout Shift

두 번째 페이지를 열자마자 빨간 상자가 모든 콘텐츠를 밀어버리며 등장한다 (어지럽다.)

여기에서 Web Vitals중 CLS에 대해서 이야기가 필요해보인다.

CLS는 직역하면 누적 레이아웃 이동으로 사용자가 예상치 못한 레이아웃 이동을 경험하는 빈도를 수치화해서 시각 정인 안정성을 측정한 수치입니다.

위와 같이 버튼을 누르려고 하던가 값을 입력하고자 할 때 비동기식으로 로드되는 콘텐츠에 의해서 대상이 이동하게 되면 잘못된 콘텐츠를 클릭을 유발해 사용자에게 불편함을 준다.

해당 콘텐츠는 쿠키에 대해서 베너를 일부로 띄운 거지만, 종종 페이지에서 이미지나 동영상의 크기가 지정되지 않아서 콘텐츠가 로드되는 과정에 콘텐츠를 이동해 CLS빈도가 높아져 UX를 떨어뜨리게 된다. 그렇기에 대체 문구와 크기 결정을 주는 것은 UX관점에서 중요하다.

Input placeholder

placeholder가 value로 들어가있다.

placeholder는 input에 아무 값이 없을 때 입력을 돕기 위한 간단한 힌트(단어 또는 짧은 문장)를 나타낸다.

위와 같이 값을 넣어주게 되면 잘못 제출했을 때 해당 힌트까지 제출이 되는 문제를 유발할 수 있고, 사용자에게 지우고 작성하게 하는 불필요한 과정을 만들기에 해서는 안된다.

추가로, 힌트는 값이 입력되었을 때 사라지게 되어, 사용자에게 어떤 패턴을 입력하라는 요구에 대해서 기억을 하고 있어야 하며 그 패턴을 까먹었을 때는 값을 지워야만 확인이 가능하다. 그렇다 보니 좀 복잡한 패턴을 요구하는 경우 label에 노출해주어 사용자가 인지하게 만들어주는 것도 좋은 방식이다.

https://www.smashingmagazine.com/2018/06/placeholder-attribute/

 

Modal

시간압박은 왜둔거지 ? ...

사용자에게 시간이 경과하고 있음을 알려주기 위해서 모달을 사용하고 있다. 이는 사용자에게 focus를 빼앗아 버리고, 추가로 정상적으로 종료하고 있는 것까지 방해하고 있기에 매우 끔찍하다.

x라고 인식되는 우측상단 아이콘은 사실 전체화면이다... ©lose라니 ;;;

콘텐츠를 사용자에게 전달할 때 modal을 통해서 추가적인 정보를 전달하는 과정이 많이 쓰이게 되는데 사실 modal은 따져보면 문제가 많은 방식 중하나입니다.

 

모달을 피해야 하는 이유 https://medium.com/allenhwkim/why-not-modal-84d9f5d7c646 

- 콘텐츠의 내용을 url로 탐색할 수가 없다. 

- 접근성 요구에서 키보드를 통한 포커스를 제공하기 힘들다.

- 모바일 디바이스에서 크기를 설정하기 힘들다.