[ux] 추가 내용 있음 알림

너무 많은 데이터를 사람에게 한 번에 보여주려면 뇌에 과부하가 걸리게 된다.

이럴 때 나오는 반응은 1. 하품 / 그리고 2. 취침이다.

이런 것을 인지부하이론에서는 인지 과부하 (Cognitive overhead)라고 부른다.

UX 디자이너들은 그래서 '점진적인 표시'라는 개념을 사용한다.

즉 지금 즉시 필요한 것만 보여주고, 사용자가 인터랙티브하게 더 보거나 안 보는 선택을 할 수 있게 해주는 것이다.

개발자에게 늦은 적재(lazy load)와 비슷한 개념이다.

아마존: http://www.amazon.com/CLR-via-C-Developer-Reference/dp/0735667454

북 세부정보(Book Description)을 보면 아래 회색으로 흐려지는 부분이 있고, 아래 "더 보기(Show more)"가 있다.

뭔가 사라지는(dim) 듯한 음영은 아래 무언가가 있다는 룩앤필을 준다. 그리고 아래 방향으로 있는 Show more는 사용자가 더 보기 위해서는 이 링크를 눌러야 겠구나라는 판단을 하게 도와준다.

구현방법

혹시 이것을 구현하기 위해 이미지를 생각했다면 땡! 다시 말해 당신은 패턴과 유지보수를 생각하지 않았다는 것이다.

바꿔 말하면 컨텐츠마다 일일이 포토샵 작업을 해주어야 한다는 데 이것은 끊임없이 디자이너를 괴롭히는 일이 될 것이다.

1단계 - 컨텐츠(원본)

 기본 상태는 평범하게 아래와 같이 단일 색상의 컨텐츠이다.

2단계 - 그라디언트를 줄 위치에 div로 영역을 준다.

 실제 컨텐츠 상에 보이지 않지만 아래와 같이 존재한다.

3단계 - div 영역에 그라이언트 스타일을 준다.

 굵은 색이 그라디언트 효과를 준 것인데, 여러개가 있는 것은 브라우저 마다 그라디언트를 적용하는 방법이 다르기 때문이다.

.psGradient {

   z-index: 2;

   position: relative;

   height: 50px; 

   margin-top: -50px;

   overflow: hidden;

   background: -moz-linear-gradient(

     bottom, 

     rgb(255, 255, 255) 15%,

     rgba(255, 255, 255, 0) 100%

   ); 

   background: -webkit-gradient(

     linear,

     bottom,

     top,

     color-stop(15%, rgb(255, 255, 255)),

     color-stop(100%, rgba(255, 255, 255, 0))

   );

   background: -webkit-linear-gradient(

     bottom,

     rgb(255,255,255) 15%,

     rgba(255, 255, 255, 0) 100%

   );

   background: -o-linear-gradient(

     bottom,

     rgb(255,255,255) 15%,

     rgba(255, 255, 255, 0) 100%

   );

   background: -ms-linear-gradient(

     bottom,

     rgb(255,255,255) 15%,

     rgba(255, 255, 255, 0) 100%

   );

   filter: 

     progid:DXImageTransform.Microsoft.gradient(

     startColorstr='#03ffffff',

     endColorstr='#ffffff', GradientType=0

   );

   background: linear-gradient(

     bottom,

     rgb(255, 255, 255) 15%,

     rgba(255, 255, 255, 0) 100%

   );

}

 그리고 z-index의 값이 중요하게 작용하는데, 컨텐츠 위에 div가 있어야 그라디언트 효과가 적용될 것이다. (포토샵의 레이어를 생각해봐라)

크롬에서는 만 적용되었고 나머지는 무시 되었음을 알 수 있다.

파이어 폭스는 -moz-linear-gradient가 적용되었다.

IE8에서는 효과가 제대로 나오지 않았다고 생각했는데 영역이 짧아서 그냥 전체가 표시되어 버린 것이었다.

 http://www.amazon.com/Depth-3rd-Edition-Jon-Skeet/dp/161729134X/ref=pd_bxgy_b_img_z 로 테스트 해보면 음영이 IE8에서도 보인다.

한 가지 사용자에 대한 배려는 우선 순위를 고려하라는 것이다.

파이어 폭스에서 캡쳐를 위해 다시 로딩을 해서 처음부터 음영부분을 노려보았다.

그런데 처음에는 음영 효과가 없다가 로딩 후반부에 가서야 적용이 되었음을 알 았다.

처음에는 사용자 룩앤필은 처음부터 적용되어야 맞지 않나 생각을 했으나, Book Description은 컨텐츠에서 스크롤을 해야 볼 수 있다. 처음 사용자가 바로 내리기 보다는 위에서 필요한 정보를 얻고 스크롤링을 하기 때문에 메인 페이지가 먼저 로딩 우선순위가 높음은 당연하다.