2012. 11. 19. 18:56ㆍRe-design!
질문: 왜 버스 운행 정보는 목록의 오른쪽에 위치할까?
1. 버스 운행 정보를 표시하는 가장 최적의, 궁극의 디자인이라서
2. 서울버스 앱을 베껴서
거의 모든 모바일 버스 운행 정보 페이지들이 목록으로 왼쪽에 정류장 명을 정렬하여 보여주고 오른쪽에 노선도와 현 위치의 버스를 보여주고 있습니다. 서울버스 앱이 처음 나왔을때는 이렇게 목록과 그래픽을 섞은 정보디자인이 상당히 참신했습니다. 웹에서는 긴 노선을 가급적 한 화면에 담기 위해 구불구불한 노선도를 사용하였는데 모바일에서는 이런 목록 형태가 적합한 듯하거든요. 하지만 현재 모습은 정보 전달 측면에서 최선의 디자인은 아닌 것 같습니다.
우선 이런 전체 운행 정보 페이지를 누가 왜 보는지 이해할 필요가 있습니다. 저나 주변 사람들의 활용을 보면 정류장에 도착하기 전에 버스 운행 상황을 확인하는데 사용하고 있습니다. 정류장에서 버스를 기다리게 아니라, 집에서 나가기 전이나 버스를 갈아타기 위해 정류장으로 이동 중인 경우에는 처음 도착하는 버스 시간이 아니라 좀 더 나중의 버스 운행 패턴을 알 필요가 있습니다. 보다 많은 정보를 얻으면 보다 많은 선택지를 선택할 수 있는 자유가 생기니까요. 정류장에 도착했을 즈음에 얼마나 기다려야 할지 가늠해 보고, 사람이 많이 몰리는 시간이라면 만원 버스를 보내고 연이어 오는 다음 버스를 타야겠다든지 지하철을 타고 가다가 버스로 갈아탄다면 아예 다른 정류장에서 타야겠구나 판단하는데 활용할 수 있습니다. 다른 케이스도 있겠지만 이런 사용 행태가 주가 되는 것 같습니다.
왜 나쁜 디자인이 표준이 되었을까?
저는 현재 통용되는 디자인에 크게 두가지가 문제가 있다고 생각합니다.
가장 거슬리는 문제는 그냥 눈에 보이듯이 버스와 정류장 이름이 양측 정렬 되어있어 매칭이 어렵고 불편합니다. 왼쪽 눈으로는 정류장 이름을 보고 오른쪽 눈으로는 버스 아이콘을 보라고 이렇게 한건 아니고 :) 아마 텍스트 목록을 기반으로 노선 그래픽을 부가적으로 덧붙이다 보니까 이런 형태가 나왔을 것으로 생각됩니다. 버스가 어느 정류장을 지나고 있는지가 가장 중요한 정보니까 디자인을 공부하지 않았더라도 두 정보 요소를 같이 두어야 하는 건 너무 당연합니다. 서울버스앱은 처음에 학생 신분의 개인 개발자가 디자인이 아닌 개발에서 출발했기 때문에 이런 모습이 되었다고 생각합니다. 하지만 이후에 정식적인 UI기획,디자인,개발,검수 절차를 거치는 기업들에서도 동일한 형태를 그대로 답습했다는건 문제입니다. 그냥 누가 봐도 이상한데 왜 아무도 이상하다고 안했던걸까요? 대신 변명을 하자면 이상하지 않았기 때문이었을 것 같습니다. 익숙해졌으니까요.
두번째 문제는 사용 행태에 따른 것인데 버스 노선의 목록 순서입니다. 버스의 출발지에서 종점까지 노선 정보를 받아와서 위에서 아래로 목록을 쭉 나열하여서 버스는 위에서 아래로 운행 합니다. 노선도를 확인하는게 아니라 특정 정류장에 버스가 도착 할 지 확인하는 경우, 인지 과정을 따라가보면, 목록 위에서 아래로 훑어보면서 기준이 되는 정류장을 확인하고 다음에 버스가 어디쯤 오고 있는지 시선의 방향을 반대로 바꿔 다시 위로 훑게 됩니다. 한 화면에 보이지 않으면 위로 페이지를 스크롤하고요. 우리는 대부분은 한 방향, 아래로 쭉 훑어보면서 아래쪽으로 스크롤을 내려보는데 익숙하기 때문에 이런 방식은 자연스럽지 않습니다. 그래서 어디가 버스 진행 방향인지 매번 헷갈립니다.
버스 운행 정보 디자인 probetyping
이런 문제 제기에서 출발한 리디자인을 해보았습니다. 처음에는 기존 화면을 캡쳐해서 포토샵으로 버스와 정류장 이름만 대충 정렬을 이리저리 바꿔보았습니다. 기존의 디자인을 개선하는 작업이라면 빈 화면에서 시작하는 것보다 이렇게 기존의 이미지를 활용하여 재조합해서 빠르게 아이디어를 시각해보는 lo-fi 프로토타이핑 방법이 유용합니다. 그냥 인쇄해서 오려붙이는 방법도 괜찮고요.
결과가 괜찮아 보여서 나중에 동작하는 프로토타입을 만들어보기로 했는데 몇달이 지나버렸습니다. 최근 감기 때문에 새벽에 깬 김에 대충 돌아가게만 만들어보기로 했다가 재미있어서 몇가지 디테일을 더했습니다. 정보 요소의 정렬과 목록 순서를 바꾸는 것 외에는 계획이 없었는데 나머지는 애자일 방식으로 하나씩 세부요소 디자인을 더해서 써보고 평가하는 방식으로 디자인 하였습니다. 이런 디자인 접근 방식이 정교한 방법론이나 툴보다 좋은 디자인을 만드는데 실질적인 도움이 되는 것 같습니다. 보다 빨리 자주 작은 실패를 경험해야지 디테일에 신경 쓸 수 있거든요. 직접 만지고 조작해보지 않고 화면을 상상해서 그리기만 해서는 디테일을 만들기 어렵습니다.
버스도착안내 리디자인 by 무이
1. 운행 중인 버스 위치 표시를 버스 정류장 이름 왼쪽에 두어 버스와 정류장 이름이 함께 보이도록 했습니다. 이것만으로 훨씬 보기 좋아졌습니다. 정보 요소의 정렬이 가장 중요합니다.
- 기준이 되는 정류장에는 하이라이트를 주는 것과 더불어서 서있는 사람 아이콘을 넣었습니다. 정류장 이름 정렬을 일부러 깨서 눈에 잘 들어오고 의미적으로도 기다리고 있는, 기준이 되는 정류장이라는게 명확하도록 했습니다.
2. 버스 노선을 반대로 하였습니다. 버스는 아래에서 위로 진행하고 아래쪽이 이전 정류장입니다.
- 기다리는 정류장을 찾으면 그 아래 보이는 버스들이 오고 있는 버스입니다. 그래서 아래쪽 한 방향으로만 훑어보면 되도록 하여 시선 흐름 유도가 자연스럽습니다.
- 오고 있는 버스를 더 확인하려면 보통 하던대로 아래로 목록을 스크롤 하면 됩니다. 기존 스크롤 습관을 일관되게 유지합니다.
- 기다리는 사람 아이콘과 정류장에 접근하는 버스 아이콘이 실제 버스 정류장에서 버스를 기다리며 바라보는 방향과 일치합니다.
- 네비게이션과 같이 나에게서 멀어지는 방향이 진행방향이 되어 멘탈모델을 형성하기 쉽습니다.
디자인 디테일
실제로 만들어진 순서와 거의 동일합니다. 핵심만 만들어서 확인하고 그 다음으로 중요하다고 생각되는 정보요소나 기능이 덧붙여졌습니다.
- 버스 차량 번호를 표시하지 않고 대신 정류장 도착 시간을 표시하도록 했습니다. 차량번호가 특별한 경우에 정말 유용한 정보이겠지만 평상시에는 노이즈입니다. 저상 버스라든지 하는 정보는 일반적인 경우에도 중요할 수 있으므로 잘 보이게 해야겠지만요. 버스에 도착 예상 시간을 표시 한것이 운행 방향의 큐가 되기도 합니다. 지나간 버스에는 시간표시가 없으니까요.
- 정류장아이디를 정류장 이름 아래에서 오른쪽으로 옮겼습니다. 대부분의 경우 정류장 이름이 아이디보다 훨씬 많이 참조되는데, 왼쪽 정렬된 이름 사이에 다른 요소가 끼어있으면 시선을 방해합니다. 방해되는 정보를 옮기는 것만으로도 정류장 가독성이 훨씬 좋아졌습니다. 정렬이 단지 열과 오를 맞추는것 보다 사용 시나리오에 따른 정보요소의 중요도 순서를 고려하는게 보다 중요합니다. 오른쪽의 정류장 아이디는 기준 정류장을 변경하는 버튼 역할도 하게했습니다.
- 기준 정류장이 맨 위로 가도록 페이지를 자동 스크롤 합니다. 지나간 버스는 중요하지 않으니까요. 모바일웹에서는 정류장에서 접근해도 기준 정류장을 표시하지 않아서 다시 정류장을 찾아 헤매야 하더라구요. (서울버스앱도 그래서 불만이라고 하고요) 단말 호환성 때문인지, 관심이 없어서인지 잘 모르겠습니다. 웹킷을 사용하는 브라우저는 자동 스크롤 정도는 쉽게 다 되는것 같거든요. 네이버 지도 앱에서도 정류장에서 버스 노선을 선택하면 이렇게 선택된 정류장이 맨 위로 오게 자동 스크롤 해줍니다. 그런데 아래로 보여지는 목록은 이미 지나간 버스라는게 함정. 그래서 목록의 방향이 중요합니다.
여기까지가 새벽에 만든 부분인데 기본 인상은 여기에서 결정 되었습니다.
- 방면 표시를 추가하였습니다. 방향이 반대인 같은 이름의 정류장이 있어서 헷갈릴 수 있거든요. 보통 사용하는 반환점이나 종점이 아니라 진행 방향에 가까운 지하철역명을 표시하게했습니다. 자주 타는 버스 기점이나 종점 아시나요? 대부분 노선의 중간에서 타고 내리기때문에 종점은 관심없는 경우가 많아서 방향을 알려주는 유용한 정보는 아닌 것 같습니다. 다니는 구간 안의 지하철 역은 그나마 잘 아니는것 같고요.
- 비슷한 이유에서 관습적으로 표시하는 기점-종점 정보를 뺐습니다. 버스 도착을 확인하려는 상황에서 별로 의미 있는 정보는 아닐테니까요. 대신 운행 대수를 가장 처음에 보이게 했습니다. 차가 끊겼는지 아닌지는 중요한 정보니까요. 막차가 떠난 정류장도 버스가 끊겼다는걸 알 수 있게 시각화했습니다. 어떻게 표시되는지는 막차 시간에 한번 보세요. :) 저도 그 시간에 잠 안자고 만들었거든요.
- 정류장에도 지하철역은 별도의 지하철 노선 심볼색을 사용하여 눈에 잘 띄도록 했습니다. 지하철 타려고 버스를 연결편으로 이용하는 경우가 많거든요. 또 텍스트로만 된 단조로운 정류장 이름 목록 사이에서 이정표 역할을 하여 노선을 찾아보는데 도움이 됩니다.
- 버스 노선 번호를 실제 번호판과 같이 버스 종류에 따른 색상을 배경으로 강조하여 크게 표시했습니다. 보통 지선,간선 같은 버스 종류 표기와 버스 번호로 두개의 정보 요소로 나누어 표기하는데 색상과 번호를 한덩어리로 인지하도록 했습니다. 지역별로 버스 종류가 다르기때문에 모든 경우에 적용할 수 있는 방식을 택한 것 같은데 효과적으로 정보를 전달하는 방식을 좀 더 고민할 필요가 있을 것 같습니다.
- 처음 로딩시나 새로고침하여 버스 위치가 바뀔때 애니메이션을 사용하여 버스가 움직이게 했습니다. 움직이면 멋질것 같아서 그냥 해봤지만, 버스 진행 방향을 무의식적으로 인지하도록 하는 목적이 있습니다.
- 마지막으로 버스 위치를 업데이트한 후 얼마나 시간이 지났는지 시각화하여 보여줍니다. 네이버는 업데이트 시각을 표시하는데 최신의 신뢰할만한 정보인지 판단하려면 현재 시간에서 빼는 산수를 해야 합니다. 버스를 타냐 못하냐하는 크리티컬한 정보인데 트위터 만큼도 안해주는건 좀 아쉽습니다. 다음은 보다 친절하게 도착 예상 시간에 타이머를 걸어서 남은 시간이 얼마인지 카운트하면서 보여주고 있는데요. 친절하긴 한데 이게 틀리는 경우가 많아서 오히려 신뢰도가 떨어지기 때문에 적합한 UI라고 하기엔 좀 그렇네요. 여기에서는 부가적인 정보라는걸 감안해서 움직임이 주의를 빼앗지 않도록 표현을 절제했습니다.
- '홈화면에 추가'를 하면 버스번호와 정류장 이름으로 표지판 형태의 독립적인 아이콘을 생성합니다. 즐겨찾기 기능이 있어도 앱을 실행하고 즐겨찾기 기능을 선택하고 또 목록에서 선택하기 까지 여러 인지 과정을 거쳐야 합니다. 자주 확인하는 노선을 개별 앱처럼 홈화면에 꺼내놓고 바로 실행하는 최대한 간결한 형태가 되면 좋겠다고 생각했습니다. 아이콘에는 서울남산체가 아니라 한길체를 사용했습니다.
직접 사용해 보고 평가해주세요
http://lab.pxd.co.kr/bus
위의 주소로 폰의 브라우저에서 사용해 볼 수 있습니다. 아이폰용으로 테스트했지만 안드로이드에서도 동작합니다. 화면이 조금 이상해지는것 같지만요. url에서 busno를 변경하면 다른 버스 노선을 볼 수 있습니다.
기본적으로 다음이 제공하는 버스 정보를 가져오고 아이콘이나 DOM구조도 대부분 그대로 차용하였습니다. 디자인 아이디어를 빨리 실험해보기 위한 해킹에 가까운 작업이었기 때문에 정식으로 서비스하기는 어렵습니다.
아이폰과 안드로이드앱으로는 현재 개발 중에 있습니다.
기존 디자인을 비판 하긴하였지만 하나의 한정된 사용 시나리오가 아닌 다양한 상황의 요구에 따라 더 많은 정보를 담으면서 일관성을 유지하기 위해서는 제약이 많이 생깁니다. 실제 프로젝트라면 안되는 이유가 백만개는 생겼겠지요. 다만 실험을 해보지 않은게 아쉽습니다.
정보 디자인에서 정보 요소의 정렬은 가장 기본적인 디자인 원칙입니다. 익숙한 것들을 기본에서 다시 돌아보는 계기가 되면 좋겠습니다.
이글은 techIT!에 기고한 글입니다.
[참고##정보디자인##]