정렬은 질서를 부여하여 시각적으로 아름답게(건강하게) 보이도록 하는 역할과 함께 정보를 효율적으로 전달하는데도 많은 도움을 줍니다. 미술을 공부하면서 배우는 중요한 디자인 기본 원리 중 하나이긴 하지만 정보를 어떻게 정렬해야 하는지에 대한 자료는 많지 않은 것 같습니다. 그래서인지 정보 전달이라는 관점에서 UI 디자인 시안들을 보면 정보 요소 정렬의 활용에 아쉬운 부분이 많이 보입니다. 몇 가지 단순한 정렬 규칙만 지켜도 정보 인지 비용을 줄여 사용자가 편안하게 정보를 얻을 수 있도록 UI를 개선할 수 있거든요. 정보 정렬에 관한 사례들과 유의할 점을 모아봤습니다. 사내 교육용으로 필요할 것 같아서 정리하다보니 많이 길어졌습니다. 시선의 흐름 정보 디자인에서도 흐름이 중요합니다. 정보를 펼쳐 보여주는 a..

네이버, 다음의 버스 도착 안내의 현재 운행 버스 위치는 왜 오른쪽에 있을까요? 또 서울시와 경기도, t맵와 올레맵도 왜 다들 오른쪽에 있는 걸까요? 아래 그림을 보며 이유를 한번 생각해 보고나서 계속 글을 읽어주세요. 그림: 왼쪽 상단부터 서울버스앱,네이버지도,다음지도,서울시버스정보,경기도버스정보,올레맵,T맵 질문: 왜 버스 운행 정보는 목록의 오른쪽에 위치할까? 1. 버스 운행 정보를 표시하는 가장 최적의, 궁극의 디자인이라서 2. 서울버스 앱을 베껴서 거의 모든 모바일 버스 운행 정보 페이지들이 목록으로 왼쪽에 정류장 명을 정렬하여 보여주고 오른쪽에 노선도와 현 위치의 버스를 보여주고 있습니다. 서울버스 앱이 처음 나왔을때는 이렇게 목록과 그래픽을 섞은 정보디자인이 상당히 참신했습니다. 웹에서는 긴..

미국의 5대 신문 중 하나인 USA Today의 디자인 및 브랜드 아이덴티티가 최근에 개편되었습니다. USA Today는 1982년에 창간되어 미국 전역에 발행되는 전국지로서, 이미지를 이용해 정확한 정보 전달을 제공하는 것이 특징이며, 간결한 기사와 대담한 그래픽으로 시선을 끌어 지금은 미국에서 발행부수가 가장 많은 신문 중의 하나로 자리매김 하였습니다. 평소 USA Today를 이용하고 관심있게 지켜 본 유저로서 본 포스팅을 통해, 쇠퇴하던 신문 업계에서 신선한 성공 모델로 불리우며 많은 독자를 매료시킨 비결에 대해 간단히 소개하고자 합니다. 우선 한 번 보시죠. [이전 로고(좌측) / 새 로고(우측)] Windows 8 UI가 연상되는 디자인입니다. 이미지, 절제된 컬러, 그리드를 기반으로 하여 주..

User Interface를 사람과 기계와의 대화라고 한다면 전 가급적 이 대화가 적었으면 합니다. 기계랑은 후딱 얘기를 끝내고 남은 시간을 좀 더 사람답게 사용하고 싶습니다. Edward Tufte 가 얘기 한 adjacent in space rather than stacked in time 이라는 원칙을 정보 디자인에 적용하면 불필요한 대화(인터랙션)을 많이 줄일 수 있습니다. 사용자가 비교하고 선택하기 위해 정보를 나열하는 경우에는 비교에 필요한 정보 요소를 클릭같은 조작을 통해 하나씩 하나씩 보이게 하지 말고 같은 공간에 펼쳐놓아서 한 눈에 비교할 수 있도록 하라는 것입니다. stacked in time 방식을 터프티는 “It’s one damn thing after another” 라고 합니다...

지난번 사내에서 강규영님의 정보 시각화 강의 를 듣고 규영님 블로그의 http://alankang.tistory.com/295 관련 공부 자료에서 안 읽어봤던 책도 읽어보고 관련된 블로그도 관심있게 구독하고 있습니다. 그 중에서 akaiving님의 블로그를 재밌게 보고 있다가 관심있는 주제가 있어서 글을 남깁니다. 간단한 데이터 시각화를 통해 투표율 증감 패턴 발견하기 글에서는 지난번 서울시장보궐선거와 무상급식주민투표의 시간대별 투표율 변화를 그래프로 표시해서 한 눈에 비교해 볼 수 있도록 시각화 하였습니다. 그래프 출처 : http://akaiving.com/2011/10/26/dv-difference-two-voting-rates/ 보통은 아래와 같은 누적 그래프를 통해서 비교를 하는데 시간대별 투표..

2월 14일 pxd 에서는 강규영씨(http://alankang.tistory.com, http://twitter.com/alankang )께서 "정보 시각화(Information Visualization)"라는 제목으로 강의를 해주셨습니다. 중요한 의사 결정을 데이터에 기반해서 내리고, 빅데이터에 대한 사람들의 관심이 모여지는 요즈음, 데이터를 중요하게 생각하는 트랜드에서 디자이너들은 무엇을 준비하면 좋을까라는 시작으로 발표를 진행해 주셨습니다. 시각화를 왜 하는가에서부터 실제로 내 주변에서 접하는 통계적 추론, 과학적 추론의 데이터를 어떻게 적용해 볼 수 있는가까지 살펴 볼 수 있는 유익하고 즐거운 시간이었습니다. [참고 - 2012 pxd talks - Talk, Workshop & Coaching..

얼마 전에 네이버 이미지 검색 결과 디자인이 개편되었습니다. 네이버 이미지검색 개편 http://naver_diary.blog.me/150113580452 기존 방식에 비해 세가지 뷰가 추가 되었습니다. 텍스트 설명을 없애고 이미지에 집중하도록 한 "썸네일만 보기" 와 타일형태로 여백을 없앤 "크게보기" , 새창으로 이동하지 않고 별도의 프레임에서 더 크게 보는 "미리보기"가 새롭게 추가 되었습니다. 네이버 썸네일만 보기 정보요소의 중요도와 대비 처음 슬쩍 봤을 때 기본 화면인 "썸네일만 보기"는 텍스트 부가정보를 없애고 마우스 오버하였을때 썸네일이 확대되면서 부가 정보를 보여준다는 점에서 구글 이미지 검색 개편의 영향(이라고 쓰고...)을 받은 것 같았습니다. 검색을 하는 의도에 따라 다르겠지만 저는 ..

검색엔진 뭐 사용하세요? 네이버,다음,구글? 네이버가 좋아요? 구글이 좋아요? 이런 질문은 아빠가 좋아? 엄마가 좋아? 같은 질문과 별반 다르지 않습니다. 둘은 지향하는 바가 다르기 때문에 필요에 따라 보완적인 관계에 있지 무엇이 더 좋고 나쁘다고 하기 어렵거든요. 그런데 다시 뒤집어 생각하면 둘 다 부족하다는 의미입니다. 이전 글에서 이어지는 내용입니다. http://story.pxd.co.kr/327 일로써 인터넷 자료 조사를 많이 하기도 하고 약간의 검색 중독 때문에 검색엔진 사용이 극단적으로 많은 편에 속하는데요. 검색에 할애하는 시간이 많다보니 그만큼 네이버,구글의 검색 결과에 만족스럽지 못한 부분이 많이 걸려서 결국 개인적으로 매쉬업을 이용해검색서비스를 만들어 사용하고 있습니다. 최근 몇 년 ..

네이버 tv가이드 http://tvguide.naver.com/ 가 어제 리뉴얼을 했습니다. 기능면에서는 많이 좋아졌는데 눈이 편하지는 않네요. 깔끔하긴하지만 가장 중요한 방송명은 눈에 잘 들어오지 않습니다. Information Hierarchy 하나의 셀 안에는 방송시간,방송명, 부가정보 픽토그램 세가지 정보가 있습니다. 이중에서 가장 정보 중요도가 높은건 방송명 입니다. 부가정보는 사실 없어도 그만입니다만 현재 디자인에서는 부가정보에 더 시선이 갑니다. 텍스트보다 이미지가 주목성이 높은데다가 강조색까지 사용하고 있으니까요. 형태적으로 셀에서 가장 먼저 시선이 가는 부분은 세로 시간선입니다. 방송명이 이 시간선과 정렬이 되어 있지 않고 방송시간을 훑고 지나가야 볼 수 있어서 잘 읽히지 않습니다. 간단..

아이폰의 사파리 브라우저는 모바일 스크린에서 제대로 웹을 사용할 수 있는 최초의 브라우저라는데 큰 의미가 있습니다. 폰의 작은 화면에서 웹페이지를 보려면 화면의 확대 축소가 꼭 필요하게 되는데, 아이폰의 사파리는 축소한 경우에도 이미지와 폰트를 깔끔하고 읽기좋게 렌더링하여 보여줍니다. 직관적인 핀치 제스쳐나 더블탭을 이용한 자동 폭맞춤은 확대축소 조작의 번거로움을 없애주고요. 폭맞춤 상태에서 스크롤을 하면 옆으로 삐져나가지 않고 상하로만 움직이도록 보정해주는 특허도 작지만 실제 경험적으로는 상당히 편리하고요 carousel 방식의 사파리의 페이지 관리 사용 효율보다는 간결하고 학습이 쉽도록 하는 애플의 UI 철학에 공감은 하면서도 폰에서 웹브라우징을 많이하다보니 사파리의 페이지(탭 또는 창) 관리 방식은..