글읽기 화면의 인터페이스
첨부파일 https://imweb.eond.com/coding/164665
아래 스크린샷은 '구글 철학'에 대해서 검색해보다가 나온 블로그입니다. 대개의 블로그가 그렇듯 아주 구조적으로 정리가 잘 되어있어 보입니다.
요즘의 블로그툴은 웹표준에 맞추어 스킨을 제작하기 때문에 특이할만한 별다른 디자인적 요소는 없습니다. 다만 내가 펴내는 정보를 얼마나 남에게 잘 전달할 수 있는가 하는 컨텐츠 위주의 레이아웃 구성을 하기 때문에 첫눈에 보기에도 무엇이 중요한 정보인지 덜 중요한 요소인지 분간할 수 있습니다.

layout_yongpd_readpage.png

예를 들어 위 스크린샷의 경우 글이 위주이고 오른쪽 컬럼에는 글쓴이에 대한 정보와 전체 글의 주제 꾸러미들을 볼 수가 있습니다.
글의 하단에는 트랙백이나 댓글 등이 표시되어 있고요. 특이할 것 없는 일반적인 블로그의 형태라 할 수 있습니다.

그런데 우리가 검색을 통해서 어떤 웹사이트에 내가 찾고자 하는 정보에 바로 접근하였다면 어떻게 그것이 내가 찾는 정보인지 판단할 수 있을까요?
나에게 필요한 정보는 바로 내가 찾고자 하는 정보이고, 그 정보가 얼마나 정확한 정보인지에 대해 먼저 판단할 것입니다. 그러한 판단의 기준은 다음과 같습니다.

1. 첫눈에 들어오는 글의 제목
2. 훑어본 대강의 글 스토리
3. 글의 작성일자

저의 경우는 이 세 가지 기준으로 내가 찾고자 하는 정보의 정확성을 판단 짓습니다. 물론 전반적인 웹사이트의 디자인을 통해 웹사이트의 분위기를 판가름 지을 수 있겠지만 형태적이 아닌 내용적인 측면에서 바라보도록 합니다.

다시 위 블로그를 예를 들어 좀 더 파고들어보자면, 위 사이트에 접속합니다. 그런 다음 내가 찾는 글의 주제, 글의 내용을 확인하게 되면, 이 글이 과연 언제 작성된 정보인지를 먼저 확인합니다.

layout_yongpd_readpage_deta.png

그런데 글의 제목과 내용은 가장 먼저 들어오지만 언제적 쓴 글인지에 대한 정보는 바로 확인하기 어렵습니다.
제가 말씀드리고 싶은 건 글보기 화면에서의 웹페이지의 구조 또한 중요하다는 것을 말씀드리고 싶은 것인데,
일반적인 웹페이지의 구조를 큰 틀로 나누어 보면,

1. 헤더
2. 본문
3. 푸터

헤더, 본문, 푸터의 구조로 나누어져 있습니다. 글보기의 화면 역시 이와 같아야 그 글에 대한 정보를 이용자가 더 쉽게 파악할 수 있습니다.
우선 헤더에는 글의 제목, 글쓴 날짜, 글쓴이, 댓글의 수(이는 글목록 화면에서의 UX를 그대로 글보기 화면에까지 적용시킨 것입니다.)가 표시되어야 하고, 본문은 글의 본문, 푸터에는 글의 주소 및 트랙백, 댓글이 표시되어야 합니다.

글보기에도 이러한 구조적으로 일반적인 스크롤의 상단에 글의 정보를 한 눈에 파악할 수 있는 헤더 정보가 삽입되어 있어야지 사용자들이 찾을 때 쉽게 이용할 수 있는 글보기 화면이 됩니다.
첨부파일
코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 235 articles in 4 / 12 pages
번호 제목 제목 날짜날짜
공지 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018/01/03
공지 jQuery를 배울수 있는 동네들입니다. 2013/08/09
공지 관련 링크 [1] 2010/05/23
175 [크로스브라우징] Azure Remote App 2015/08/31
174 [Script] jQuery Cookie(쿠키) 처리 [출처] jQuery Cookie(쿠키) 처리|작성자 주용준 2015/08/27
173 [PHP] 쿠키를 굽자 2013/02/22
172 [Script] 쿠키 레이어 열기 닫기 PHP, Only Cookie - Hide/Show 2013/09/08
171 [반응형 웹] 반응형 템플릿 (naradesign) 2015/08/26
170 [반응형 웹] 반응형웹(MediaQuery) 템플릿 파일 2015/08/26
169 [위지윅에디터] ckeditor 공식사이트 2015/08/25
168 [위지윅에디터] 기타 위지윅 에디터 2015/08/25
167 [위지윅에디터] 오픈소스 HTML 기반의 위지윅 에디터 2015/08/25
166 [반응형 웹] 모바일 실제 해상도와 device-width 2015/08/24
165 [반응형 웹] [다음 TROY] 기기별 모바일 해상도 테스트 할 수 있는 사이트 2015/08/22
164 [반응형 웹] responsive-animated-block-menu 2015/08/15
163 [프레임워크] http://view.jquerymobile.com/master/demos/ 2015/08/10
162 [프레임워크] http://pages.revox.io/doc/jquery/form_wizard.php 2015/08/10
161 [프레임워크] jquery-steps.com 2015/08/10
160 [프레임워크] http://getuikit.com 2015/08/09
159 [jQuery] jQuery Image Slider and Gallery 2015/05/27
158 [Script] Top으로 스크롤 되면서 돌아가기... (by sisims) 파일 2014/09/29
157 [Script] 슬라이드 이미지 2014/06/16
156 [Script] 간단한 javascript 페이징 처리 - 미니페이지 2014/06/16

해시태그 디렉터리

지금 이순간

오늘의 핫게시물