태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'시간표'에 해당되는 글 2건

  1. 2014.12.08 TableTalks 컨퍼런스 시간표 리디자인 (HCI 2015 시간표) by 無異
  2. 2014.09.22 [정보디자인] 정보 소비 맥락을 고려한 시간표 리디자인 (7) by 無異
2014.12.08 07:43

TableTalks 컨퍼런스 시간표 리디자인 (HCI 2015 시간표)


이전에 시간표 리디자인 에 대한 글을 쓰면서 pxd LeanUX lab에서는 학회 시간표를 좀 더 잘 만들어 볼 수 있지 않을까 고민하고 있다고 말씀드렸는데요. 이번 HCI 2015 에 맞춰서 진행되는 모습을 미리 보여드리려고 합니다. 아직은 다듬어야 할 부분이 많지만 저희가 생각한 가치가 사용자에게 정말 의미가 있는지 알아보는 유일한 방법은 조금이라도 빨리 직접 피드백을 받아보는 것이니까요.


TableTalks


간단히 설명하면 학회(또는 행사) 시간표의 각각의 셀(발표) 하나 하나에 게시판이 제공되는 서비스 입니다. 컨퍼런스에서 발표가 끝나고 QnA 시간이 있긴 하지만 시간이 한정되어 있고 또 뭔가 궁금한 점은 있는데 질문이 바로 잘 정리가 안되어서 머뭇거리다가 질문 기회를 잃는 경우가 많은 것 같았습니다. 그래서 질의 응답의 기회가 온라인 상에서도 열려있으면 좋겠다는 생각을 했습니다. 실제로 요즘 질문을 온라인 SNS를 통해 받는 경우도 있긴 하고요. 단순히 질의응답에 한정하기 보다는 같은 주제의 같은 관심을 가진 여러 사람들이 같은 공간에 모인다는 것이 굉장히 드문, 흔치 않은 기회인데 발표만 듣고 바로 또 다른 발표를 듣기 위해 흩어지는 것이 아쉽다는 생각을 했습니다. 오프라인에서는 시간이나 공간적인 제약이 있지만 같은 관심을 공유할 수 있는 온라인 공간이 제공되면 이런 제약을 넘어서 뭔가 재밌는 일들이 더 많이 일어나지 않을까 하는 생각에서 서비스 아이디어가 출발했습니다. 

외국의 큰 컨퍼런스 같은 경우에 공식 홈페이지이나 앱으로 세션마다 실시간 대화창을 만들어서 제공하거나 하는 경우도 있는데 저희는 범용적으로 누구나 쉽게 웹(모바일) 시간표를 만들어서 공유(토론) 게시판을 제공하는 서비스를 만들고 있습니다. 큰 규모의 학회만이 아니라 소규모 행사나 인디 밴드 공연 일정등에서 유용하게 사용될 수 있기를 바라고 있습니다. 


1. 보기 편한 시간표 만들기 (모바일에서도 보기 편하게 만들기)


이 서비스를 사용하게 되는 가장 큰 유인은 시간표이기 때문이라고 생각합니다. 시간표는 행사에 참석하는 마지막까지 확인하는 정보이니까요. 이런 공유/토론 게시판이 제공되기에 가장 이상적인 장소인 이유이기도 하고요.
그래서 우선은 시간표를 보기 편하게 만드는데 신경을 썼습니다. 이런 학회의 공식 홈페이지에서의 온라인 시간표(테이블)가 보기 쉽지 않은 이유는 정직하게 HTML table 요소를 사용해서 인 것 같습니다. 중고등학교 시간표처럼 정확한 시간 단위로 짜여져 있는게 아니라 세션마다 일정이 조금씩 다른 경우에 table의 셀에 채워 넣는건 한계가 있는 것 같았습니다. 컨퍼런스 시간표보다는 캘린더 앱에서 일정 표시 사례들을 많이 참고하여 디자인에 적용하였습니다.

학회에 참가해서는 대부분 PC가 아니라 모바일로 접근하니까 모바일에서의 표현과 인터랙션에 신경을 썼습니다. 작은 화면에서 많은 발표장이 있다보니까 모바일에서 가장 좋지 않은 가로 세로 스크롤이 동시에 생길 수 밖에 없는 상황이 됩니다. 스크롤이 되면 장소가 어딘지 시간은 언제인지 알 수 없게 되는 경우가 생기게 되는데 장소가 시간축을 고정하고 내가 어느 영역을 보고 있는지 길을 잃지 않도록 했습니다. 










2. 나의 시간표 만들기

온라인 시간표는 정보 전달의 용도이지 내가 어떤 세션을 들을지 계획해 놓는 매체로는 잘 활용되지 않는 것 같습니다. 실제로 HCI 학회에서도 종이에 인쇄해 나눠 준 시간표에 자기가 들을 발표를 체크해 두는 경우가 많았습니다. 
시간표를 보면서 찜(favorite)을 해서 나만의 시간 계획표를 만들 수 있도록 했습니다. 시간표 상에서는 심볼과 배경색을 사용해서 내가 관심있는 발표를 강조하여 표시하도록 했습니다. 각 게시판으로 이동하는 즐겨찾기는 이것들을 따로 모아 나만의 시간표로 표시하는 안과 일반 목록으로 표시하는 안의 절충안으로 날짜별로 그룹핑된 형태를 제공하고 있습니다.



3. 참가자 간의 공유 공간


온라인 공유 공간이라는 생각을 하면서 일반적인 게시판과 채팅방의 형태 중에서도 많은 고민을 했는데, 공유된 의견이 계속 쌓여서 정보가 되는 모습을 그리고 있어서 게시판이 더 적합하리라고 생각했습니다. 일반적인 카페의 게시판처럼 하나의 글에 댓글이 달리는 형태 보다는 한  주제에 대해서 토론을 할 수 있는 쓰레드 형태의 게시판을 참고하였습니다. 참여를 높이기 위해서 본문이 바로 노출되는 트위터와 페이스북의 형식을 우선 차용하였습니다. 이것이 최선의 형태는 아닌 것 같아서 보다 적합한 게시판 형식을 계속 고민하고 실험 중에 있습니다.





4. 발표자의 홍보 공간


처음에는 사용자로 청중에 포커스를 맞추었는데 개발 회의를 계속하면서 발표자에게 가치를 줄 수 있는 방향에 대해서도 고민을 함께 하였습니다. 사내에서 학회에서 발표했던 분들을 인터뷰 해보았더니, 발표자 입장에서 발표 준비에 시간을 투자하면서 기대하는 것은 보다 많은 사람들에게 내용이 전달되기를 ㅂ 발표자 개인의 입장에서는 홍보할 수 있는 채널이 한정되어 있었습니다. SNS를 통해 소개를 한다고 하여도 개인적인 소개글은 휘발성이 커서 전파력에 한계가 있었습니다. 자신의 발표 세션이 독립된 공간으로 토론을 할 수 있는 공간으로 제공이 되면 사람들에게 알리는데 구심점이 되고 발표 전에 참석자들이 어떤 부분을 궁금해 하는지, 또 발표 후에 피드백을 받거나 발표 자료를 올리고 지속적으로 내용을 공유하는데 도움이 될 수 있을 거라고 생각합니다.
발표 내용이나 발표자 소개를 보다 적극적으로 알릴 수 있는 공간으로써 활용할 수 있도록 고민하고 있습니다. 발표자에게 권한을 주어서 게시판을 꾸미고 관리할 수 있도록 준비하고 있습니다.

 


이번에 HCI 학회에 참가하시는 분이 계시면 사용해 보시고 의견 부탁드립니다. 아직  MVP(minimum viable product) 수준으로 기능 구현이 미흡한 부분이 많지만 버그 리포트도 좋고, 특히 활용 부분이나 필요한 기능에 대한을 의견을 주시면 많은 도움이 될 것 같습니다.

HCI2015 공식 홈페이지 http://hcikorea.sql.co.kr/hcik2015/index.asp
TableTalks x HCI2015 시간표 http://lab.pxd.co.kr/tabletalks/hci2015


No dictionary results were found. Please try another search.
Tip: Didn't want this definition pop-up? Try setting a trigger key in Extension Options.
[참고##리디자인##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2014.09.22 17:12

[정보디자인] 정보 소비 맥락을 고려한 시간표 리디자인

지난주에 저희는 HCI2014 학회에 참가하였습니다. (예 그렇습니다. 글을 쓰다가 내버려둔지 몇개월이 됐네요.) 학회 참가 기간 동안 몇가지 시간표들을 접하였는데요. 표의 열이나 행에 빽빽하게 숫자를 나열한 익숙한 형태였지만 시간표를 활용하는 실제 사용 맥락에서는 정보를 이해하기가 쉽지 않았습니다.
pxd에서는 이런 경우에 사내 전체 메일로 정보디자인 퀴즈를 내고 의견을 나누곤(주로 싸웁니다) 하는데, 업무가 바빴는지 참여가 저조했습니다. 그래서 이번에는 블로그를 통해 정보디자인에 관심있는 디자이너, 학생분들과 함께 고민해보려고합니다. 우선 제가 고민했던 부분을 공유합니다.


1. 도대체 리프트권 종류가 왜 이렇게 많아?

작년 학회 참가자들에게서 하이원 슬로프가 좋다는 얘기를 많이 들어와서, 저는 학회보다 스노우보드 타는데 더 관심이 있었습니다. 그래서 스키 신청 메일을 받자마자 바로 페이지를 열어봤는데요. 무슨 리프트권 옵션이 이렇게 많은지, 후야권, 야오권 이건 또 도대체 뭔지 알 수가 없어 많이 당황스러웠습니다.
리프트권 - 출처 : 하이원 홈페이지

시간을 어떻게 비교할까?

리프트권 구분에 사용되는 용어가 임의로 만들어진 조어라 이용시간을 꼼꼼히 살펴봐야만 나에게 적합한 리프트권을 선택할 수 있었습니다. 대충 보면 군더더기 없이 깔끔한 표이지만 막상 내가 원하는 시간을 비교하고 고르려고 하면 정신이 혼미해집니다.
정보를 전달하는 입장에서는 이런 표가 가장 효율적이겠지요. 적은 노력으로 누락없이 정확한 시간 정보를 전달합니다. 하지만 정보를 전달 받아 활용하는 사용자 입장에서는 표를 보고 비교 선택하는데 인지 부담이 큽니다. 수치로된 두 시간을 머리 속에서 개념화하여 기억해서 각각을 비교해야 하는데, 이런 정보 처리는 뇌가 익숙하게 할 수 있는 작업이 아니거든요. 단지 공간에 나열했다고 비교가 쉬운게 아닙니다.
이런건 머리 속으로 생각만 해서는 비교가 어렵기 때문에 우리는 뇌를 확장하려고 종이에 그려서 비교합니다. 이용 시간은 연속적인 시간의 구간이니까 공간의 한 축으로 치환해서 그래프로 시각화하기만 해도 비교가 수월해집니다. 비교 선택이 아니라 그냥 오후권은 몇시 부터 몇시까지에요? 라는 질문에 대한 정보를 제공하는 거라면 현재 표시 방법이 효과적이었겠지만요. 그럼 해결은 간단합니다. 추가로 표에 시각적으로 쉽게 비교할 수 있는 그래프만 더하면 될 것 같습니다. 그래서 제가 바로 그려봤을까요?
디자인을 하는데 있어 매우 중요하다고 거듭 느끼는 부분인데요. 문제가 무엇인지 정의(가정)하고 바로 문제를 해결하려고 하는 건 좋은 디자인 접근이 아닙니다. 그 다음 할 일은 비슷한 문제를 남들은 어떻게 해결했는지 열심히 찾아보는 것입니다. 다른 사람들의 해결을 살펴보면 내가 미쳐 보지 못했던 문제나 제약이 무엇인지 배울 수 있습니다.
처음에는 국내 스키 리조트의 홈페이지들을 찾아봤습니다. 하지만 역시나 시간을 숫자로 쭉 나열한 건 모두 똑같더라구요. *

그래서 이번엔 외국의 사례를 찾아봤는데요. 와. 스키 문화 자체가 달라요. 우리나라처럼 시간대별로 자잘하게 나눠서 리프트권을 파는게 아니라 하루권, 이틀권, 사흘권 이런 식이더군요. 일본의 근교 스키장 같은 경우에나 하루를 3개 정도 시간대로 나눠둔 정도이고요. 원하는 해결은 찾지 못했습니다. (좋은 사례를 아시면 알려주세요.)
그럼 이젠 직접 그려볼 차례입니다. 처음 한두개는 손으로 스케치를 해보다가 귀찮아서 표(HTML)의 시간을 읽어 그래프로 그려주는 스크립트를 짜서 돌렸습니다. 저는 코딩을 잘 몰라서 어렵게 했지만 요즘은 좋은 스크립트 라이브러리들이 많아서 이런건 간단히 할 수 있습니다.
redesign by 無異
숫자라는 심볼과 시간 개념(12 시간, 분과 시의 관계), 두 시간 간의 간격을 비교하려면 머리속에서 여러 차례 계산(변환) 과정을 거쳐야하지만 공간에 펼쳐놓으면 비교가 쉽습니다. 그래프의 위치와 길이 차이는 주의를 기울이지 않고도 바로 인지(pre-attentive processing)할 수 있거든요. 후야권이란건 오후+야간권이고 야오권은 야간+오전권 이었네요.


시간표는 24시간제를 표시하는게 좋다?

시간은 일반인에게 보다 익숙한 12시간제로 바꿨습니다. 제가 군인도 아니고, 제가 보는 시계도 12시간제로 되어 있어서, 24시간제로 표기된 시간을 보면 머리 속에서 한번 더 변환 과정을 거쳐야 하니 인지 비용이 발생합니다. 24시간제는 정보를 전달하는 입장에서 효율적입니다. 물론 12시간제로 표시하면서 동일한 오전,오후를 반복하여 표기하면 24시간제보다 더 복잡해 보일 수 있습니다. 하지만 대부분의 일상생활에서 맥락을 통해서 오전인지 오후인지 알 수 있는 경우가 대부분이라 평상시에 오전 오후를 생략해도 우리가 생활하는데 지장은 없습니다. 한 위 표에서는 그래프가 같이 있고 맥락상 오전 오후를 예측할 수 있어서 오전오후 표시는 간결하게 표시하였습니다.

또 시간은 개개인의 시간개념이 시간이라는 심볼에 맵핑됩니다. 오후 6:30 분이라는 시간을 들었을때 겨울철에 날은 얼마나 어둑해지는지 해가 지고 얼마나 쌀쌀해지는지, 배가 출출해질 때인지 무한도전 봐야할 시간인지 등 다양한 경험이 바로 연상 되지만 18:30에는 바로 맵핑이 되어 있지 않습니다. 군대처럼 모든 구성원이 24시간제를 쓰도록 강제되어 익숙해진 상황이 아니라면요. 24시간제를 사용하면 오전 오후에 대한 혼동이 줄게 되지만 일상적으로 사용하는 시간에 대한 경험의 연상을 잃게 됩니다. 우리가 외국어를 배울때 apple을 사과라고 말을 외우는게 아니라 정말 사과에 대한 표현에 있어서 24시간제는 leading zero가 붙어서 보기 좋게 정렬이 되는데 12시간제로 표시할때는 정렬을 맞추기 위해서 주의가 필요합니다. 저는 오른쪽 정렬 대신 opacity가 0인 투명한 0을 붙여주는 꼼수를 사용했습니다.
redesign by 無異
비교에는 선형적인 시간축 그래프가 좋긴하지만 그래서 다시 몇시부터 몇시까지 인지를 직관적으로 아는데는 방학 시간계획표처럼 아날로그 시계판에 표시하면 좋지 않을까 하는 생각이 들었습니다. 그래서 그려봤는데, 썩 좋지는 않네요. 주간과 야간을 색으로 구분해봤는데 별 도움이 되지 않는 것 같습니다. 파이가 별로여서 도넛으로도 그려봤는데 그것도 별로네요. 망했어요.

* 국내 스키 리조트 홈페이지의 리프트권 표시 방식이 모두 똑같다고 했는데 사실 모두 그런건 아닙니다. 곤지암 리조트는 리프트권의 시간이 정해져있는 방식이 아니라 me-time pass 라고 원하는 시간에 원하는 시간만큼 탈 수 있도록 시간권을 판매하여 이런 복잡한 시간표가 아예 필요없습니다. 서비스 디자인 측면에서는 이런게 더 좋은 해결이라고 할 수 있겠습니다.


2. 셔틀 버스는 얼마나 기다려야 오는거야?

대절한 버스를 타고 학회장인 호텔에 우선 내렸는데 제가 들으려던 강의까지는 시간이 꽤 남았습니다. 셔틀을 타고 숙소인 콘도로 가서 잠깐 쉬고 올까싶어 홈페이지에서 셔틀 시간표를 찾아보았습니다.

여기서 문제. 현 위치는 강원랜드 호텔이고 숙소는 마운틴 콘도 F 동, 현재 시간은 12 시입니다. 2시 강의를 듣기 위해 돌아와야 한다면 숙소에서 얼마나 쉴 수 있을까요? 차라리 그냥 기다리는게 좋을까요? **

셔틀버스 시간표 - 출처: 하이원 홈페이지
셔틀버스 시간표를 이용하는 주요 use case는 다음 세가지일 것 같은데, 이 세 가지를 한꺼번에 확인해야 하는 아주 피곤한 경우였습니다.
1. 현재, 현 위치에서 셔틀을 타려면 얼마나 기다려야하나? (언제 오나?)
2. 목적지까지 가는데 시간이 얼마나 걸리나?
3. 특정 시간까지 목적지에 도착하려면 언제 셔틀을 타야하나?

셔틀은 얼마나 자주 다니는 걸까?

사실 1 과 3 은 좀 특수한 경우고 보통은 대충 몇시쯤 정류장에 나가면 될지 주변 시간대의 배차 간격을 확인하게 됩니다. 셔틀이 자주 오면 빡빡하게 시간 맞춰서 움직일 필요가 없으니까요. 저 표를 보고 어떤 시간대에 셔틀이 자주 오고 어떤 시간대는 많이 기다려야 하는지 배차 간격을 바로 알기는 어렵습니다. 위와 같은 표는 숫자를 빽빽하게 적어서 정보효율이 높은 것 같지만 표를 이용하는 맥락에서 중요한 정보인 내가 셔틀을 이용할 시간대에 얼마나 빈번하게 운행을 하는지는 바로 알기 어렵습니다. 이런 정보를 드러내 보이려면 표보다는 시간을 축으로한 그래프를 그리는게 좋습니다.
Edward Tufte - The Visual Display of Quantitative Information
이런 운행 시간표 그래프의 가장 인상적인 예가 Edward Tufte 의 The Visual Display of Quantitative Information 의 표지에 실려있습니다. 빨간선이 난잡하게 그어진 추상화처럼 보이는 그래프는 사실 열차시간표입니다. 그래프의 레이블이 생략되어 있는데, 가로축이 시간 이고(아마 48 칸-30 분 간격 일거에요) 세로축이 정차역입니다. 예를 들어 맨 윗쪽은 서울역, 맨 아래는 부산역이라고 하면 그 사이에 천안, 대전, 대구, 밀양 같은 중간 정차역들입니다. 왼쪽에서 오른쪽으로 내려오는 사선은 하행선 열차이고 반대로 그어진 선은 상행선 열차입니다. 선의 기울기가 조금씩 다른데 기울기가 열차의 속도를 나타냅니다. 완행 열차는 모든 역에서 선이 끊겨있고(정차시간만큼) 급행열차는 일부 역은 그냥 지나칩니다. 굵고 진하게 그려진 선이 몇 개 있는데 이건 다른 선들보다 기울기가 급하죠. 특급열차입니다. 하행선은 하루에 4편만 편성되어 있는데 1시 3시 사이에 3편이 몰려 있습니다.


원래의 셔틀 시간표 그대로 세로를 시간축으로 하여 그래프로 옮기면 위와 같은 모습이 됩니다. 왕복 노선을 한번에 그리니까 정신이 없네요.
redesign by 無異
정류장과 시간 축을 바꾸고 왕복 노선을 분리했습니다. 세로축의 정류장 간의 간격을 운행 시간에 비례하게 조정하여 일직선이 되도록 했습니다. 셔틀은 아마도 일정한 속도로 운행할테니까요. 그렇게 하니 그래프의 정류장 간격으로 실제 지리적인 거리를 가늠할 수 있습니다. 구불구불한 꺽은선이 반듯하게 단순화되니 불필요한 노이즈가 사라져서 배차간격이라는 정보도 더 잘 드러납니다. 표에서는 알기 어려웠지만 그래프로 보면 시간대에 따라 배차 간격이 다르고 상행과 하행의 운행 패턴도 차이가 있다는걸 바로 알 수 있습니다.

어느 방면인지 쉽게 알 수 있게 하기

하이원 호텔에서 스키하우스로 돌아가는 노선은 표의 운행 순서를 반대로 뒤집어 그렸습니다. 원래대로 그리는면 사선의 방향이 나란해서 사실 더 예뻐보입니다. 나란해야 보기에도 좋고 마음도 평안을 찾습니다. 눈에 거슬리지만 뒤집었는데요. 셔틀이 하이원 호텔을 반환점으로 왕복으로 운행하기 때문에 표에는 같은 정류장이 두번씩 나옵니다. 그래서 처음 표에서는 어느 방면으로 가는 것인지 확인하는것에서 부터 헷갈렸습니다. 그런데 셔틀을 직접 타보면 산길을 따라가는 노선이라서 스키하우스 쪽로 올라가는지 아니면 내려가는지 지리적 위치에 따라 방면에 대한 맵핑이 자연스럽게 생기게 되더라구요. 그래서 내려가는지 올라가는지 방면을 사선의 방향으로 실제와 같이 반영하고 둘의 구분이 도드라지도록 했습니다. 어느 방면인지 확실하면 정류장을 하나하나 찾지 않아도 탐색 범위가 반으로 줄어드니까 원하는 정보를 찾기 수월해지겠죠.

정보가 아닌 요소를 덜어내어 data ink ratio 높이기

그래프에서 축의 그리드는 직접 정보를 담고 있는 것이 아니라 데이타를 보조해주는 말그대로 보조선이니까 실제 데이타를 방해하지 않게 가급적 없애거나 덜 도드라지게하는게 좋습니다. 터프티 책의 기차시간표처럼 실 데이타라인이 직선인 경우에는 보조선을 가늘고 옅게 하더라도 형태적으로 유사한 반듯한 선들이 겹치게 되어 복잡해 보일 수 있습니다. 주 정보를 도드라지게 대비를 높이려면 보조적인 정보는 가급적 다른 전주의처리 요소를 사용하는게 좋습니다. 시간 구분은 데이타를 읽는데 도움을 주므로 없애는 것보다는 이렇게 선 대신 면으로 구분하는게 좋을 것 같습니다. 30 분 간격의 보조선은 배경과 같은색으로 선이 추가된게 아니라 면이 나뉘도록 해서 복잡한 요소가 더해지지 않아 보이도록 했습니다. 대신 정류장을 구분하는 보조선은 각각의 포인트를 찍어주는 것에 비해 요소를 많이 줄일 수 있어서 사용하는게 더 효율적인 선택인 것 같고요.

목적에 따라 표와 그래프 선택하기

그래프로 그렸을때 숨겨져있던 정보들이 시각적으로 드러나긴했지만 그대신 가장 중요한 도착 시각을 잃었습니다. 특정한 목적에는 적합하겠지만 일반적으로 셔틀을 타기위한 맥락에 적합한 표현 방식은 아닐 것 같습니다. 물론 클릭하거나 현위치, 현재 시간을 자동으로 반영해서 시간을 표시하게 할 수도 있겠지만요. 하지만 전 가급적 인터랙션이 없는 걸 선호하거든요. 종이에 프린트를 해야 한다든지 해서 매체가 인터랙션을 지원하지 않을 수도 있고요.

redesign by 無異
그래서 시간표의 각 시간을 실제 시간에 해당하는 위치로 옮겨보았습니다. 시간도 바로 읽을 수 있고 배차 간격이라는 감추어진 정보도 드러날 수 있도록요. 똑바로 빽빽히 나열된 행을 좇아가다보면 오히려 헷갈릴 수 있는데 여백이 적당하게 또 불균등하게 있어서 굳이 그리드로 구분하지 않아도 뇌는 연속된 관계로 잘 인식 할 수 있습니다.여기에서 기존의 표와 시간축이 적용된 표를 전환해가며 비교해 볼 수 있습니다.
원래의 표에서는 반환점도 하나의 여정으로 쭉 이어서 표를 그렸는데요. 이건 셔틀을 운전해서 반환점을 돌아와야하는 기사에게 의미가 있지 버스를 타려는 사람에게는 혼란만 주게 됩니다. 이 혼란을 줄여보려고 (마운틴 스키하우스 ⇄ 하이원호텔  ⇄ 마운틴 스키하우스) 같은 표시를 하거나 (출발 → → → 도착) 같은 불필요한 설명을 표에 덧붙이다보니 오히려 더 복잡해집니다. 근본적인 해결은 방면에 따라 표를 분리하는 것입니다. 방면을 쉽게 구분할 수 있도로 오르막과 내리막으로 표시하고 주요 정류장을 표의 헤더에서 강조하여 쉽게 찾을 수 있게 했습니다.

표에 적합한 숫자 글꼴

표에는 text figure 인 Merriweather Sans 를 사용했습니다. text(lower) figure 는 소문자 알파벳처럼 높이나 위치가 달라서(전주의처리) 숫자 각각의 인지가 쉽고 모여있을때 리듬감이 생겨 덜 단조로워 보입니다. 한글에서는 대부분 한글자체가 네모꼴에 맞추어져있고 숫자도 그에 어울리게 같은 높이로 그리다보니 이런 숫자 글꼴이 잘 사용되지는 않습니다. 숫자가 보조적인 정보로 쓰일 경우에는 너무 튀지 않고 무난한 lining figure(같은 높이) 를 사용하는게 좋겠지만 자체로 중요한 정보라면 lower figure 를 사용하는것도 좋습니다. 다만 시간은 자릿수가 중요하니까 각자리의 위치가 정렬이 되어야 보기편한데, text figure 는 대부분 고정폭이 아닌 유동폭 글꼴이라 정렬이 안되는 문제가 있습니다.
** 나중에 알고 보니 학회기간 동안 셔틀을 증편 운행하여 시간표와 상관없이 배차 간격이 짧았습니다. 시간표는 별 의미가 없었습니다. :)


3. 학회 시간표에 누락된 정보는 무엇일까?

마지막은 예상 하셨듯이 학회 시간표입니다. 이런 학술대회의 시간표는 언제 어디에서 어떤 강연을 하는지가 필수적인 정보입니다. 한 강연을 듣는다는건 같은 시간의 다른 강연을 못 듣게 되는 것이니까 비교도 잘 할 수 있어야합니다. 표를 효율적으로 만들려면 가로축의 장소(강연장)에는 많은 정보를 넣지 못하니까 아래 그림처럼 별도로 발표장 지도를 제공합니다. 두개의 독립된 정보를 join 해서 찾아봐야 하죠. 저도 이번에 강연장을 못 찾아서 헤맸습니다. 호텔이 경사지에 지어져서 지상 입구로 들어오면 당연히 1층인 줄 알았는데 2층인가 3층이더라구요.

사진 출처 - HCI학회 페이스북
사실 제가 관심있는 부분은 현재의 학회 시간표 정보를 어떻게 효과적으로 표현할 수 있을까가 아니라 소통의 채널로서의 시간표입니다. 나와 공통의 관심사를 가지고 또 보다 구체적으로 같은 주제의 강연을 들으려는 사람들이 같은 시간에 같은 공간에 모이는 경우는 굉장히 드문 기회거든요. 강연을 듣고 몇분의 질문답변 시간을 가진 후 다시 뿔뿔이 흩어지는건 아깝다는 생각이 들었습니다. 시간표의 강연 한 칸 한 칸이 하나의 게시판 또는 대화방이 되어서 학회 전부터 어떤 정보를 얻고 싶은지 의견을 나누고 배경이 되는 지식을 공유하고, 또 강연이 끝나고 나서도 발표 자료를 공유하고, 궁금한 점들을 서로가 묻고 답하는 공간이 되면 멋지지 않을까 하는 생각을 했습니다. 실제로 SxSW 같은 대규모 컨퍼런스 같은 경우는 자체의 앱에서 이런 기능을 제공하고 있고요. 저희 LeanUX lab 에서는 요즘 이런 문제 제기에서 접근한 학회 시간표의 리디자인을 개발을 해보고 있습니다. 내 친구들은 어떤 강연을 듣는지 알 수 있고, 강연에 관련된 주제의 정보를 함께 강연을 들을 사람들과 함께 공유할 수 있으면 재밌지 않을까요? 학회만이 아니라 공연에서는 팬들과 뮤지션이 소통하는 공간이 될 수도 있겠고요.

시간을 공간에 펼쳐 놓기

원래의 표나 그래프를 이용하는 방법이나 전달되는 정보 자체는 동일합니다. 하지만 분명히 더 잘 설명해줄 방법이 있을텐데 자기가 편하고 익숙한 방법만을 강요하는 같아서 불친절하다는 느낌을 받습니다. 사용 맥락을 고려하여 시간 정보를 적절히 공간에 시각화하면 사용자가 정보를 해석하는 과정을 줄여 정보 소비를 좀 더 수월하게 해 줍니다. 익숙하게 사용하고 있는 다른 표들도 이용하는 맥락에서 정말 최선의 표현인지 깐깐하게 다시 돌아보면 좋겠습니다.

[참고##정보디자인##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 7
Ad Test...