userinyerface를 통한 고통 맛보기 Page 1

userinyerface

User Inyerface - A worst-practice UI experiment

벨기에 디지털 제품 에이전시 회사인 BAGAAR 에서 개발한 A worst-pratice UI expreiment로 최악의 ux가 어떤 것 일지를 모두 보여주는 대환장 파티인 이 페이지를 알게 되었고, 스텝을 넘어갈 때마다 참신한 고통을 주는 페이지였다. 

이 명저(?)가 생각나게 하는 훌륭한 페이지라고 생각이 들어서 페이지별로 들어간 참신한 고통을 리스트업 해서 반면교사로 삼고자 작성해보고 싶어졌다.

---

# Page 1. rending

첫화면부터 고통이 밀려오는 듯하다..

COLOR

첫 페이지이다보니 오늘은 우선 다른 많은 요소들 중 가장 처음 느껴지는 것인 적정 컬러 사용의 부재에 대해서 집중해보려한다.

 

페이지를 보게 되면 녹색 버튼이 시선을 집중시킨다. 

 

폰 레스토프 효과(von Restoff effect) 라는 용어가 있는데 이는 참가자에게 유사한 항목으로 구성한 목록을 보여주고 사람들이 그중 뚜렷이 구분되는 항목을 가장 잘 기억한다 연구로, 사람들은 눈에 띄는 새롭고 놀랍고 독특한 자극에 집중한다는 개념이다.

이 "NO"버튼은 사용자들의 이목을 집중시키고 있지만 사실 이 버튼은 아무런 기능도 하지 않는 버튼이다.

의미 없는 버튼이 어딘가 숨어있을지 모르는 다음 스텝으로 가는 버튼에 그림자를 만들어 그게 더 눈에 보이지 않도록 만들고 있다.

 

또한, 이 버튼은 role of color에 대해서 무시하고 있다.

우리는 일상에서 신호들을 보며, 초록불에 길을 건너며(긍정), 빨간불에는(부정) 멈추게 된다. 이처럼 색에는 그 역할을 내포하고 있다.

버튼의 녹색은 긍정적인 기능을 기대하게 만들고 사람들은 멘탈 모델에 따라 "NO"를 "ON"으로 이해할 만큼 인지를 유발하게 된다.

제이콥의 법칙에 따라 사용자는 여러 사이트에서의 기억을 이 사이트에서도 같은 방식으로 작동하길 기대한다.

 

 

description 속 font-color에 이야기해보면, 무언가 읽기 힘들다.

이는 색상 대비의 부족이다.

https://webaim.org/resources/contrastchecker/ 

WebAIM: Contrast Checker

이 페이지에서 색상대비를 계산해 볼 수 있는데,  페이지에서 사용 중인 backgroun-color와 font-color 간의 색상대비는 2.7:1로  WCGA AA, AAA 모든 텍스트에서 Fail로 나오는 걸 볼 수 있다.

AA의 경우 일반 텍스트에서 4.5:1 이상을 잡고 있는 것에 비해서 많이 부족하다.

등급	일반 텍스트	그 외
AA	4.5 : 1	3 : 1
AAA	7 : 1	4.5 : 1

이런 색채 대비의 부족은 내용의 readability를 낮추고 있다.

 

`Please click HERE to GO to the next page` (티스토리로 옮기니 더 끔찍하군요.)

이 부분에서도 색체 대비와, 제이콥의 법칙을 가볍게 무시하고 있기에 다음 페이지로 넘어가는 것부터 CTF문제를 푸는 느낌이었다. 

 

 

ref.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast