2010년 10월 15일 금요일

팝업, 사람들이 가장 싫어하는 광고기술

웹사이트에서의 광고, 가장눈에 띄는 것이 효과적일까?

흔히들 눈에 가장 잘 띄는 것이 가장 효과적인 광고라고 생각합니다. 하지만 항상 그렇지는 않습니다. 특히 웹사이트는 다릅니다.

"(웹사이트)사용자들은 웹사이트를 (읽는 것이 아니라) 단지 본다"

위 말은 어느 웹사이트 디자인을 분석한 책에서 봤던 내용입니다. 한 눈에 내용을 파악할 수 있는 구성과 제목 선정, 그림이나 삽화 활용 등이 중요한 거겠죠.

요약하자면, 팝업은 사람들이 가장 싫어하는 광고기술입니다.

팝업, 사람들이 가장 싫어하는 광고기술

이런 웹사이트의 특성은 사람들은 수 년간 웹사이트를 사용하면서 만들어진 습관에 의존한다는 것으로부터 기인합니다. 그 중 하나가 팝업에 대한 사람들의 습관입니다.

닐슨 노먼 그룹의 User Experience2004 컨퍼런스에서 야후의 플랫폼 연구 매니저인 존 보이드와 이베이의 사용자 연구 담당자인 크리스천 로러 이 두 사람은 사용자들이 온라인 광고를 인식하는 방법에 대한 대규모 연구 결과를 발표했다. 온라인 광고의 디자인 요소 중 가장 사람들이 부정적으로 뽑은 것이 바로 "창 위에 표시되는 팝업"이었다. 설문에 참가한 사용자의 95%가 부정적이라고 응답했다. 현재 한국에서 다시 조사한다면 더 부정적인 결과를 얻을 것이다. 제이콥 닐슨 "팝업창은 사용성의 심각한 위배"

위 내용은 이콥 닐슨의 <웹 사용성 중심의 웹 사이트 제작론>이라는 책을 인용한 것입니다. 수년 간 웹사이트에서 겪었던 '불필요한 팝업'때문에 사람들은 자연스럽게 팝업이 보이면 '닫기'버튼을 찾습니다.

다함께 홈페이지는 중요한 행사를 앞두고 홈페이지 첫화면에 팝업을 띄우곤 했습니다. 앞으로는 최대한 팝업을 사용하지 않는 것이 좋겠다는 판단입니다. 이번 공개토론회 "북한의 3대 권력 세습, 이것이 사회주의인가"를 위한 광고는 다음과 같이 넣었습니다.

위 그림처럼 배너형식으로 아코디언과 상단메뉴 사이에 광고를 넣었습니다.

광고처럼 보이지 않게

지금 드는 생각은 텍스트 부분은 이미지로 처리하지 않았다면 더 좋았을 것 같다는 생각입니다. 왜냐하면 사용자들은 기업광고처럼 보이는 것들도 무시하는 경향이 있기 때문입니다. 눈에 띄는 이미지 배너로 제작했다 하더라도 이것이 광고배너처럼 보이는 것은 사용성을 낮추는 효과를 내기도 합니다. 따라서 홈페이지에서 자주 사용하는 기본적인 레이아웃에 광고내용을 삽입하여 디자인하는 것이 더 나을 것입니다. 앞으로는 이 점도 적극 반영하여 배너제작을 해야겠습니다.^^

2010년 4월 13일 화요일

레프트21의 주요기사보기 안내

다함께 홈페이지는 웹마스터 보다는 관심을 가져주시는 방문자님들이 만들어가는것 같아요. 특히 아이짱님의 꼼꼼한 지적 덕분에 오류 투성이었던 홈페이지를 바로잡아가고 있습니다. 아이짱님이 말씀해주신 오류는 레프트21의 주요기사를 보는 부분이었습니다. 이 오류들을 수정하면서 수정한 내용과 함께 주요기사보기 기능에 대해 글을 써야겠다는 생각이 들었습니다.

① 집중이슈 목록

이 목록을 클릭하면 해당 집중이슈를 모아보는 페이지가 새창으로 열립니다. 그런데 어떤 목록을 클릭해도 모두 같은 페이지가 열리는 오류가 있었습니다. 이 화면은 레프트21의 첫화면을 그대로 파싱(읽어와서 분석)해서 가져오는 것입니다. 파싱을 하는 기능을 파서라고하는데 이 파서에 문제가 생겼었습니다. 이 오류를 수정했습니다.

② 가장 큰 크기의 제목은 메인기사입니다.

메인기사는 주요기사 중 하나로 정해집니다. 대부분의 경우 주요기사 목록의 가장 첫번째와 같습니다. 본문의 일부를 노출시키는 기능을 추가할 예정입니다. 제목만 있으니 썰렁하고 주요기사의 첫번째 목록과 일치하기 때문에 메인기사는 썸네일이나 본문의 일부를 노출하는 것이 적절하리라 생각되요. 레프트21의 첫화면 개편이 진행중이라고 하니 그 작업과 맞추어서 업무재휴를 하도록 하겠습니다.

③ 주요기사 슬라이드

예전에는 주요기사 목록만 쭉 나열하는 방식이었습니다. 이것을 슬라이드로 넘기도록 한 것이죠. 주요기사 순서는 다함께에서 임의로 수정하지 않고, 레프트21의 편집을 그대로 따르고 있습니다. 레프트21의 편집은 주요기사를 기사가 생성된 시간 순서대로 편집하지 않습니다. 이 때문에 새로나온 기사가 첫번째에 나오는 것은 아니겠죠.

최신을 가장 위에 배치하는 방식은 장단점이 있다고 생각됩니다. 어떤 글이 최신 글인지 바로 파악할 수 있는 장점이 있는 반면 "어떤 기사를 잘보이게 배치할 것인가?"라는 편집자의 의도를 반영하기는 어려워집니다. 이 때문에 레프트21의홈페이지에서 "최신 온라인 기사보기"라는 기능을 별도로 제공하여 최근순으로 기사를 볼 수 있도록 한 것이겠죠?(물론 온라인기사만 해당됩니다)

다시한 번 아이짱님의 관심에 감사드리면서 앞으로도 좋은 조언 계속 부탁드리겠습니다.

2010년 4월 2일 금요일

성명, 레프트21주요기사, 포럼의 재구성

대부분의 경우 디자인은 기능과 긴밀합니다. 다함께 홈페이지의 첫화면의 주요한 기능이 "성명과 주요기사와 포럼의 정보를 보여주기"라면 이 세가지를 한눈에 쉽게 볼 수 있도록 해줄 수 있는 디자인이 필요하겠죠. 현재 개편중인 다함께 홈페이지는 이런 점을 적극 반영하려는 노력이 돋보이는 디자인입니다. "핵심기능 선택하기"라는 글에서 잠시 소개드린것인데요. 아래와 그림을 보시죠.

미니 아코디언

미니 아코디언을 통해 성명,레프트21,포럼을 어떻게 재구성했는지 바로 확인하실 수 있습니다. 이전보다 더 작은 화면에 세 개의 요소를 배치했지만, 아코디언을 펼치는 순간 더 큰 화면으로 각각의 내용을 볼 수 있다는 사실을 알게됩니다.

홈페이지 방문자는 가만히 스크롤만 하다가 어지러운 화면을 견디지못해 나갈 수 있었습니다. 이제는 방문자가 아코디언을 연주하는 작은 재미?를 느끼실 수도 있습니다. 그리고 더 동적인 화면이 되었지만 어지럼증은 줄어들었을 텝니다.

오래방문하지 않더라도 일정이나, 신문 주요기사와 포럼 등을 확인하기 위해 자주 방문하는 웹페이지가 되었으면 좋겠다는 것이 저의 바램입니다.

  • 이윤보다 사람을,
  • 경쟁보다 연대를,
  • 전쟁이 아니라 평화를,
  • 차별이 아니라 존중을
  • 반전 ·반신자유주의
  • 노동자 투쟁
삼성이 박지연 씨를 죽였고, 정부는 살인을 방조했다
  • 노동자투쟁
  • 낙태논쟁
  • 대학교육
  • 그리스 총파업
  • 민주노동당 탄압
  • 대학교육
북한 관련설 흘리지 말고 진정한 원인을 신속히 밝혀라
  • 세계화의 신화
  • 위기의 시대
  • 마르크스주의
  • 노동자 투쟁
  • 언론과 대중의식
세계화와 '탈산업화'-신화와 현실

새로 개편되는 홈페이지에 대해 의견을 많이 주시면 적극 고민하고자 하는 것이 다함께 웹마스터가 가장 중요시하는 가치 중에 하나입니다. 블로그도 많이 방문해주세요^^

2010년 3월 31일 수요일

노동자투쟁 특별페이지 개설

계급의 귀환과 특별페이지

경제 위기 속에서 사람들이 느끼기엔 “경제적 공포와 고통이 더 시급하기 때문”에 “경제 위기 고통전가에 맞서는 것이 우리의 최대 과제”라는 것이다. 최일붕은 노동자 계급 투쟁이 중요하다고 강조하며 이를 “계급의 귀환”이라고 표현했다. 경제 위기 시기에 노동자 투쟁 지원을 효과적으로 건설하기

2010년은 작년에 이어 노동자들의 투쟁이 계속 벌어질 것입니다. 노동자들이 경제위기와 고통전가에 맞서서 언제나 저항에 나서지는 않을 수 있으나 한국의 경우 촛불항쟁의 경험이 노동자들에게 자신감을 준 측면이 있기 때문에 저항에 나설 수 있습니다. 이미 크고 작은 투쟁들이 전국에서 저항을 시작하고 있습니다. 얼마전 한진중공업의 투쟁, 금호타이어도 투쟁을 시작했고, 발레오만도나 현대자동차(전주,울산)를 시작으로 비정규직투쟁도 확대되고 있습니다.

23일부터 노동자투쟁 특별페이지를 개설하여 운영하고 있습니다. 앞으로도 계속 유지할 텐데요. 이곳에서 노동자들의 투쟁과 관련된 기사 및 성명, 자료, 일정들을 한눈에 볼 수 있도록 했습니다. 한국 노동자들의 성공적인 귀환을 위해 보템이 될 수 있다면 좋겠습니다. 아래 그림을 통해 특별페이지를 소개하도록 할게요^^


2010년 3월 15일 월요일

상단메뉴 개선했습니다.

기존의 플레시였던 상단메뉴를 수정했습니다. 다함께의 상징적인 색인 붉은 색은 살리되 톤을 어둡게하고 그라데이션처리를 하여 고급스럽게 표현해 보았습니다.

저는 모서리가 둥근 형태는 지향하지 않지만 기존의 디자인에 크게 벗어나지 않는 곡선을 이번에도 사용했습니다. 아무래도 대부분 둥근 모서리가 좀 더 보기 편하다는 의견이 많아서요.ㅋ

로고도 바뀌었습니다. 로고 상단의 슬로건이 "노동자 연대―" 로 수정되었고, 로고 하단에는 그림자를 넣었습니다. 슬로건이 바뀐지는 몇 주 되었는데, 홈페이지에서는 반영이 늦어졌네요^^

메뉴에 마우스를 올리면 하위메뉴가 슬라이드로 펼쳐집니다. 기존의 플레시 메뉴때처럼 부드럽게 보일 수 있도록 최대한 노력했습니다. 그래도 부드러운 펼침은 플레시가 약간 더 나은 것 같습니다;; 장점은 플레시 플레이어가 웹 브라우져에 설치되어있지 않아도 메뉴바를 사용하실 수 있다는 점입니다. 왜냐하면 플레시로 만든 것이 아니라 '자바스크립트'라는 언어로 만들었기 때문인데, 대부분 웹브라우져는 '자바스크립트'언어를 해석하는 기능이 장착되어있습니다. (물론 때에 따라서 고급 사용자가 자바스크립트 해석기를 꺼두는 경우도 있는데, 이때에도 사용할 수 있도록 했습니다. 디자인은 좀 궁색해지기는 합니다만...; )

아래 그림과 같습니다.

다함께 상단메뉴

다함께 상단메뉴 메뉴에 마우스를 올리면 하위메뉴가 펼쳐집니다.


자바스크립트를 강제로 사용하지 않도록 했을 경우 하위메뉴가 아래로 펼쳐진 상태로 시작합니다.


2010년 2월 10일 수요일

[초보 웹기획] 핵심기능 선택하기

다함께 홈페이지는 현재 개편중입니다. 개편의 과정과 그 속에 녹아 있는 기획 아이템들을 소개하는 글들을 (개편이 완료될 때까지) 쓸 예정입니다. "웹에서 이미지 활용하기"와 "홈페이지 상단메뉴 만들기"에 이어 세번 째 내용이네요. 당부드리고 싶은 말은 앞으로 소개되는 디자인은 진행중이기 때문에 일부 수정될 수 있습니다. 다만, 기획의 취지와 방향에 대해서 말씀드리고자 합니다.

다함께 홈페이지의 메인페이지에서 핵심적 기능은 '다함께 성명'과 제휴 언론사인 '<레프트21>'그리고 '포럼'이 세가지를 하나의 화면속에 배치하는 것일 것입니다. 세가지를 한 화면에 배치해야 하기 때문에 한눈에 들어오도록 구성해야합니다. 긴 설명보다는 그림으로 보여드리는 것이 빠를 것 같습니다.


상단의 그림은 성명서란에 마우스를 올렸을 때, 가운데 그림은 <레프트21>란에 마우스를 올렸을 때, 하단의 그림은 포럼란에 마우스를 올렸을 때 화면입니다. 즉, 마우스를 올리면 펼쳐지고 나머지는 접히게됩니다. 여러분은 위 세개의 그림을 마우스로 선택하여 보게되는 것이죠. 당연히 개편이 완료되지 않았기 때문에 위 화면은 지금 적용된 화면과는 다릅니다.

접혔을 때

접혔을 때

아쉬운 점은 위와같은 구성을 적용하려면 javascript라는 언어로 작성해야하는데, javascript를 사용하지 않는 소수는 펼치거나 접을 수 있는 기능을 사용하지 못하게 됩니다. 이 점을 보완하기 위해 펼쳐지기 전에는 내용을 압축적으로 표현하여 링크를 걸도록 할 예정입니다. 오른쪽의 그림처럼 말이죠.

참고한 글 "핵심기능을 선택하라"