태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.


2012.11.19 18:56

[정보디자인] 버스 도착, 노선 운행 정보

네이버, 다음의 버스 도착 안내의 현재 운행 버스 위치는 왜 오른쪽에 있을까요? 또 서울시와 경기도, t맵와 올레맵도 왜 다들 오른쪽에 있는 걸까요? 아래 그림을 보며 이유를 한번 생각해 보고나서 계속 글을 읽어주세요.

그림: 왼쪽 상단부터 서울버스앱,네이버지도,다음지도,서울시버스정보,경기도버스정보,올레맵,T맵


질문: 왜 버스 운행 정보는 목록의 오른쪽에 위치할까?

1. 버스 운행 정보를 표시하는 가장 최적의, 궁극의 디자인이라서
2. 서울버스 앱을 베껴서 


거의 모든 모바일 버스 운행 정보 페이지들이 목록으로 왼쪽에 정류장 명을 정렬하여 보여주고 오른쪽에 노선도와 현 위치의 버스를 보여주고 있습니다. 서울버스 앱이 처음 나왔을때는 이렇게 목록과 그래픽을 섞은 정보디자인이 상당히 참신했습니다. 웹에서는 긴 노선을 가급적 한 화면에 담기 위해 구불구불한 노선도를 사용하였는데 모바일에서는 이런 목록 형태가 적합한 듯하거든요. 하지만 현재의 모습이 정보 전달 측면에서 최선의 디자인은 아닌것 같습니다.

우선 이런 전체 운행 정보 페이지를 누가 왜 보는지 이해할 필요가 있습니다. 저나 주변 사람들의 활용을 알아보니 정류장에 도착하기 전에 버스 운행 상황을 확인하는데 사용하고 있었습니다. 정류장에서 바로 버스를 기다리게 아니라, 집에서 나가기 전이나 버스를 갈아타기 위해 정류장으로 이동 중인 경우에는 처음 도착하는 버스 시간이 아니라 좀 더 나중의 버스 운행 패턴을 알 필요가 있습니다. 좀 더 미래의 더 많은 정보를 얻으면 보다 많은 선택지를 선택할 수 있는 자유가 생기니까요. 정류장에 도착했을 즈음에 얼마나 기다려야 할지 가늠해 보고, 사람이 많이 몰리는 시간이라면 만원 버스를 보내고 연이어 오는 다음 버스를 타야겠다든지 지하철을 타고 가다가 버스로 갈아탄다면 아예 다른 정류장에서 타야겠구나 판단하는데 활용할 수 있습니다. 다른 케이스도 있겠지만 이런 사용 행태가 주가 되는 것 같습니다.


왜 나쁜 디자인이 표준이 되었을까?

저는 현재 통용되는 디자인에 크게 두가지가 문제가 있다고 생각합니다.

가장 거슬리는 문제는 그냥 눈에 보이듯이 버스와 정류장 이름이 양측 정렬 되어있어 매칭이 어렵고 불편합니다. 왼쪽눈으로는 정류장 이름을 보고 오른쪽 눈으로는 버스 아이콘을 보라고 이렇게 한건 아니고 :) 아마 텍스트 목록을 기반으로 노선 그래픽을 부가적으로 덧붙이다 보니까 이런 형태가 나왔을 것으로 생각됩니다. 버스가 어느 정류장을 지나고 있는지가 가장 중요한 정보이니까  디자인을 공부하지 않았더라도 두 정보 요소를 같이 두어야 하는 건 너무 당연합니다. 서울버스앱은 처음에 학생신분의 개인 개발자가 디자인이 아닌 개발에서 출발했기 때문에 이런 모습이 되었다고 생각합니다. 하지만 이후에 정식적인 UI기획,디자인,개발,검수 절차를 거치는 대형 업체들에서도 동일한 형태를 그대로 답습했다는건 문제입니다. 그냥 누가 봐도 이상한데 왜 아무도 이상하다고 안했던걸까요? 대신 변명을 하자면 이상하지 않았을 것 같습니다. 익숙해졌으니까요. 

두번째 문제는 사용 행태에 따른 것인데 버스 노선의 목록 순서입니다. 버스의 출발지에서 종점까지 노선 정보를 받아와서 위에서 아래로 목록을 쭉 나열하여서 버스는 위에서 아래로 운행 합니다. 단지 노선도를 확인하는게 아니라 특정 정류장에 언제 버스들이 도착할지 확인하는 인지 과정을 따라가보면, 목록 위에서 아래로 훑어보면서 기준이 되는 정류장을 확인하고 다음에는 버스들이 어디쯤 오고 있는지를 시선의 방향을 반대로 바꿔 다시 위로 훑게 됩니다. 화면에 다 보이지 않으면 위로 페이지를 스크롤하고요. 우리는 대부분은 한 방향, 아래로 쭉 훑어보면서 아래쪽으로 스크롤을 내려보는데 익숙하기 때문에 이런 방식은 자연스럽지 않습니다. 그래서 어디가 버스 진행 방향인지 매번 헷갈리고요.


버스 운행 정보 디자인 probetyping



이런 문제 제기에서 출발한 리디자인을 해보았습니다. 처음에는 기존 화면을 캡쳐해서 포토샵으로 버스와 정류장 이름만 대충 정렬을 이리저리 바꿔보았습니다. 기존의 디자인을 개선하는 작업이라면 빈 화면에서 시작하는 것보다 이렇게 기존의 이미지를 활용하여 재조합해서 빠르게 아이디어를 시각해보는 lo-fi 프로토타이핑 방법이 유용합니다. 그냥 인쇄해서 오려붙이는 방법도 괜찮고요.
결과가 괜찮아 보여서 나중에 동작하는 프로토타입을 만들어보기로 했는데 몇달이 지나버렸습니다. 최근 감기 때문에 새벽에 깬 김에 대충 돌아가게만 만들어보기로 했다가 재미있어서 몇가지 디테일을 더했습니다. 정보 요소의 정렬과 목록 순서를 바꾸는 것 외에는 계획이 없었는데 나머지는 애자일 방식으로 하나씩 세부요소 디자인을 더해서 써보고 평가하는 방식으로 디자인 하였습니다. 이런 디자인 접근 방식이 정교한 방법론이나 툴보다 좋은 디자인을 만드는데 실질적인 도움이 되는 것 같습니다. 보다 빨리 자주 작은 실패를 경험해야지 디테일에 신경 쓸 수 있거든요. 직접 만지고 조작해보지 않고 화면을 상상해서 그리기만 해서는 디테일을 만들기 어렵습니다. 



버스도착안내 리디자인 by 무이


1. 운행 중인 버스 위치 표시를 버스 정류장 이름 왼쪽에 두어 버스와 정류장 이름이 함께 보이도록 했습니다. 이것만으로 훨씬 보기 좋아졌습니다. 정보 요소의 정렬이 가장 중요합니다.
- 기준이 되는 정류장에는 하이라이트를 주는 것과 더불어서 서있는 사람 아이콘을 넣었습니다. 정류장 이름 정렬을 일부러 깨서 눈에 잘 들어오고 의미적으로도 기다리고 있는, 기준이 되는 정류장이라는게 명확하도록 했습니다.

2. 버스 노선을 반대로 하였습니다. 버스는 아래에서 위로 진행하고 아래쪽이 이전 정류장입니다. 
- 기다리는 정류장을 찾으면 그 아래 보이는 버스들이 오고 있는 버스입니다. 그래서 아래쪽 한 방향으로만 훑어보면 되도록 하여 시선 흐름 유도가 자연스럽습니다.
- 오고 있는 버스를 더 확인하려면 보통 하던대로 아래로 목록을 스크롤 하면 됩니다. 기존 스크롤 습관을 일관되게 유지합니다.
- 기다리는 사람 아이콘과 정류장에 접근하는 버스 아이콘이 실제 버스 정류장에서 버스를 기다리며 바라보는 방향과 일치합니다.
- 네비게이션과 같이 나에게서 멀어지는 방향이 진행방향이 되어 멘탈모델을 형성하기 쉽습니다.


디자인 디테일
 

실제로 만들어진 순서와 거의 동일합니다. 핵심만 만들어서 확인하고 그 다음으로 중요하다고 생각되는 정보요소나 기능이 덧붙여졌습니다.

- 버스 차량 번호를 표시하지 않고 대신 정류장 도착 시간을 표시하도록 했습니다. 차량번호가 특별한 경우에 정말 유용한 정보이겠지만 평상시에는 노이즈입니다. 저상 버스라든지 하는 정보는 일반적인 경우에도 중요할 수 있으므로 잘 보이게 해야겠지만요. 버스에 도착 예상 시간을 표시 한것이 운행 방향의 큐가 되기도 합니다. 지나간 버스에는 시간표시가 없으니까요.  

- 정류장아이디를 정류장 이름 아래에서 오른쪽으로 옮겼습니다. 대부분의 경우 정류장 이름이 아이디보다 훨씬 많이 참조되는데, 왼쪽 정렬된 이름 사이에 다른 요소가 끼어있으면 시선을 방해합니다. 방해되는 정보를 옮기는 것만으로도 정류장 가독성이 훨씬 좋아졌습니다. 정렬이 단지 열과 오를 맞추는것 보다 사용 시나리오에 따른 정보요소의 중요도 순서를 고려하는게 보다 중요합니다. 오른쪽의 정류장 아이디는 기준 정류장을 변경하는 버튼 역할도 하게했습니다. 

- 기준 정류장이 맨 위로 가도록 페이지를 자동 스크롤 합니다. 지나간 버스는 중요하지 않으니까요.  모바일웹에서는 정류장에서 접근해도 기준 정류장을 표시하지 않아서 다시 정류장을 찾아 헤매야 하더라구요. (서울버스앱도 그래서 불만이라고 하고요) 단말 호환성 때문인지, 관심이 없어서인지 잘 모르겠습니다. 웹킷을 사용하는 브라우저는 자동 스크롤 정도는 쉽게 다 되는것 같거든요. 네이버 지도 앱에서도 정류장에서 버스 노선을 선택하면 이렇게 선택된 정류장이 맨 위로 오게 자동 스크롤 해줍니다. 그런데 아래로 보여지는 목록은 이미 지나간 버스라는게 함정. 그래서 목록의 방향이 중요합니다.

여기까지가 새벽에 만든 부분인데 기본 인상은 여기에서 결정 되었습니다.

- 방면 표시를 추가하였습니다. 방향이 반대인 같은 이름의 정류장이 있어서 헷갈릴 수 있거든요. 보통 사용하는 반환점이나 종점이 아니라 진행 방향에 가까운 지하철역명을 표시하게했습니다. 자주 타는 버스 기점이나 종점 아시나요? 대부분 노선의 중간에서 타고 내리기때문에 종점은 관심없는 경우가 많아서 방향을 알려주는 유용한 정보는 아닌 것 같습니다. 다니는 구간 안의 지하철 역은 그나마 잘 아니는것 같고요.

- 비슷한 이유에서 관습적으로 표시하는 기점-종점 정보를 뺐습니다. 버스 도착을 확인하려는 상황에서 별로 의미 있는 정보는 아닐테니까요. 대신 운행 대수를 가장 처음에 보이게 했습니다. 차가 끊겼는지 아닌지는 중요한 정보니까요. 막차가 떠난 정류장도 버스가 끊겼다는걸 알 수 있게 시각화했습니다. 어떻게 표시되는지는 막차 시간에 한번 보세요. :) 저도 그 시간에 잠 안자고 만들었거든요.

- 정류장에도 지하철역은 별도의 지하철 노선 심볼색을 사용하여 눈에 잘 띄도록 했습니다. 지하철 타려고 버스를 연결편으로 이용하는 경우가 많거든요. 또 텍스트로만 된 단조로운 정류장 이름 목록 사이에서 이정표 역할을 하여 노선을 찾아보는데 도움이 됩니다.

- 버스 노선 번호를  실제 번호판과 같이 버스 종류에 따른 색상을 배경으로 강조하여 크게 표시했습니다. 보통 지선,간선 같은 버스 종류 표기와 버스 번호로 두개의 정보 요소로 나누어 표기하는데 색상과 번호를 한덩어리로 인지하도록 했습니다. 지역별로 버스 종류가 다르기때문에 모든 경우에 적용할 수 있는 방식을 택한 것 같은데 효과적으로 정보를 전달하는 방식을 좀 더 고민할 필요가 있을 것 같습니다.

- 처음 로딩시나 새로고침하여 버스 위치가 바뀔때 애니메이션을 사용하여 버스가 움직이게 했습니다. 움직이면 멋질것 같아서 그냥 해봤지만, 버스 진행 방향을 무의식적으로 인지하도록 하는 목적이 있습니다. 

- 마지막으로 버스 위치를 업데이트한 후 얼마나 시간이 지났는지 시각화하여 보여줍니다. 네이버는 업데이트 시각을 표시하는데 최신의 신뢰할만한 정보인지 판단하려면 현재 시간에서 빼는 산수를 해야 합니다. 버스를 타냐 못하냐하는 크리티컬한 정보인데 트위터 만큼도 안해주는건 좀 아쉽습니다. 다음은 보다 친절하게 도착 예상 시간에 타이머를 걸어서 남은 시간이 얼마인지 카운트하면서 보여주고 있는데요. 친절하긴 한데 이게 틀리는 경우가 많아서 오히려 신뢰도가 떨어지기 때문에 적합한 UI라고 하기엔 좀 그렇네요. 여기에서는 부가적인 정보라는걸 감안해서 움직임이 주의를 빼앗지 않도록 표현을 절제했습니다.

- '홈화면에 추가'를 하면 버스번호와 정류장 이름으로 표지판 형태의 독립적인 아이콘을 생성합니다. 즐겨찾기 기능이 있어도 앱을 실행하고 즐겨찾기 기능을 선택하고 또 목록에서 선택하기 까지 여러 인지 과정을 거쳐야 합니다. 자주 확인하는 노선을 개별 앱처럼 홈화면에 꺼내놓고 바로 실행하는 최대한 간결한 형태가 되면 좋겠다고 생각했습니다. 아이콘에는 서울남산체가 아니라 한길체를 사용했습니다.


직접 사용해 보고 평가해주세요

http://lab.pxd.co.kr/bus 

위의 주소로 폰의 브라우저에서 사용해 볼 수 있습니다. 아이폰용으로 테스트했지만 안드로이드에서도 동작합니다. 화면이 조금 이상해지는것 같지만요. url에서 busno를 변경하면 다른 버스 노선을 볼 수 있습니다. 

기본적으로 다음이 제공하는 버스 정보를 가져오고 아이콘이나 DOM구조도 대부분 그대로 차용하였습니다. 디자인 아이디어를 빨리 실험해보기 위한 해킹에 가까운 작업이었기 때문에 정식으로 서비스하기는 어렵습니다.
아이폰과 안드로이드앱으로는 현재 개발 중에 있습니다. 

기존 디자인을 비판 하긴하였지만 하나의 한정된 사용 시나리오가 아닌 다양한 상황의 요구에 따라 더 많은 정보를 담으면서 일관성을 유지하기 위해서는 제약이 많이 생깁니다. 실제 프로젝트라면 안되는 이유가 백만개는 생겼겠지요. 다만 실험을 해보지 않은게 아쉽습니다.

정보 디자인에서 정보 요소의 정렬은  가장 기본적인 디자인 원칙입니다. 익숙한 것들을 기본에서 다시 돌아보는 계기가 되면 좋겠습니다.




이글은 techIT!에 기고한 글입니다.

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



신고

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


Trackback 0 Comment 9
  1. TI 2012.11.20 20:31 신고 address edit & del reply

    노선의 진행방향이 아래에서 위쪽인 것, 버스 위치 표시가 왼쪽에 오는 것, 기점 대신에 주요 정거장이 '~방면'의 방식으로 스크롤에 따라 지속적으로 표시되는 것, 모두 신박한 아이디어입니다, 매우 훌륭합니다.

    한동안 이런 저런 노선을 뒤적거려 보았는데, 방향 표시는 그저 익숙함의 문제라는 생각이 드네요. '내게 필요한 정보 = 내가 타야 하는 버스의 위치' 를 우선적으로 제공한다는 점에서 이 쪽이 더 바람직한 것 같습니다.

    다만 제가 현재 서울 시내에 있는 것이 아니고 경기도에 있기 때문에 정확한 위치기반 서비스를 받지는 못했습니다. 올려주신 동영상과 설명으로 추측하건데, 현재 위치에서의 버스 정보를 알기에는 매우 편리할 것으로 짐작됩니다. 하지만 현재 위치와 떨어진 다른 장소에 대한 정보는 아직 제공되지 않는군요(아마 나중에 추가하실 계획일 거라고 생각합니다).

    제 3지점 정보 표시와 관련해서 - 서울버스 앱의 경우에는 정거장을 선택하면 해당 정거장을 지나는 노선 정보 화면으로 넘어가지요. 올려주신 타입의 경우에는 특정 정거장을 선택하면 그 정거장을 기준으로 현재 운행중인 버스의 도착시간이 재설정 되는 정도의 기능이 있으면 어떨까 합니다(물론 현재 가까운 정거장의 위치는 따로 표시하고요).
    이 경우에는 서울버스앱과 비교해서, 정거장을 기준으로 하는 모든 정보를 표시해 줄 것인지 아니면 현재 보고 있는 노선을 기준으로 하는 정보만 표시할 것인지의 트레이드가 되는 것 같습니다만, 노선을 따로 바로가기 형태로 뽑아내는 것을 생각하면 노선 정보를 우선하는 쪽이 적절할 듯 합니다.

    간선버스가 왜 보라색일까 하고 봤더니, 다음에서 제공하는 색이네요. 제가 서울버스앱에 익숙해서 그런지(실제 버스 색깔) 조금 어색합니다.

    아 방금 발견한 건데, 스크롤을 아래로 끝까지 내려서 출발점을 보고 있는 상황에서는 새로고침 시 버스 아이콘이 아래로 움직이기도 합니다.

    재미있는 디자인 감사합니다, 이런 세심한 디자인적 노력이 우리 생활에 더 많이 깃들었으면 좋겠네요 ^^
    좋은 디자인으로 발전시켜 주세요~

  2. re-won 2012.11.21 10:35 신고 address edit & del reply

    만약 네이버의 사례처럼 거리뷰 아이콘이나 버스번호, 혹은 실시간 교통정보가 포함되어야 한다면 어떤 모습이어야 할까요? 단순하게 노선정보와 버스의 위치만 표기할때는 말씀하신 배열이 맞는것 같은데, 위에서 보여주신 일부 샘플들처럼 피쳐의 확장성을 고려한다면 보여주신 안이 복잡도가 꽤 높아질 것 같은데..어떻게 생각하시는지요?

    • 無異 2012.11.21 11:43 신고 address edit & del

      저도 네이버 거리뷰 아이콘이 상당히 불만인데요. :)
      다양한 정보를 담게 되더라도 사용자가 집중할 수 있는 정보는 제한적일 수 밖에 없는 것 같아요. 다 중요하니까 모두 강조하면 도대체 뭘하려는건지 아무것도 눈에 안들어오게 되거든요. 결국 information priority를 정하고 중요한게 부각되도록 사용 맥락에서 덜 중요한 건 절제해야할 필요가 있을것 같아요. 보통 버튼에서도 primary 액션을 강조하기 위해서 나머지는 힘을 빼는 것처럼요.

      여기서는 버스 위치 확인이 가장 중요한 맥락이니까 그 외의 것들은 가급적 한 단계 감추는게 좋은 접근일 것 같습니다. 지금으로써는 별다른 표시 없이 리스트 항목을 눌렀을때 가능한 기능을 나열해 보여주는 패턴을 사용하면 무난할것 같아요.

    • re-won 2012.11.21 12:24 신고 address edit & del

      Information Priority를 고려해 Primary 액션을 강조하는 것은 알면서도 실무에서 적용하기에는 쉽지 않은 문제인것 같아요. 거리뷰/버스번호 같은 사례만 봐도 분명 사용자 요구에 의해 포함된 기능일 것이고 이러한 기능들이 Priority가 낮다고 해서 숨겨버리거나 추가적인 액션을 통해 사용해 버리면 쉽게 인지하지 못해 사용률이 낮거나 불만을 표출하는 현상을 데이터를 통해 쉽게 발견할 수 있습니다. (특히 스마트폰과 같은 작은 화면에서는 Hidden 기능의 사용률이 PC보다 떨어짐)

      결과적으로, 말씀하신 버스위치를 잘 보여주자라는 맥락에서는 말씀하신 방법이 맞지만, 여러가지 확장 스펙을 고려할 때는 기능의 인지적인 측면 또한 중요하기 때문에 위와같은 사례들이 나오지 않았나 생각이 드네요. 좋을 글 잘 보고 갑니다.^^

    • 無異 2012.11.21 23:19 신고 address edit & del

      실제로 이번 디자인을 하면서 거리뷰나 지도에서 정류장 위치를 확인하는 기능을 추가해볼까하는 욕심이 있었고 그렇게하려면 어떻게 해야 할까 고민을 했었습니다.
      프로젝트를 진행하면 추가적인 피처에 대한 요구가 많기 때문에 항상 고민 하는 부분이고요. 이건 경쟁사가 하니까 넣어달라고하고 이건 우리만 하는 차별화된 기능이니까 넣자고 하고 이건 임원분이 좋아하는 기능이니까 넣어달라고 하고요.
      근데 그 많은 기능을 절묘하게 잘 녹여내면 좋은 디자인이 되는게 아닌 것 같아요. 좋은 디자인은 핵심을 짚어서 집중하는데 있는 것 같습니다. 좀 더 정확히는 본질에서 벗어나는걸 덜어내는거요. 저희가 퍼소나를 사용하는것도 그런 이유에서고요.
      디자인 결정은 항상 어떤 점에서 좋으면 어떤 점에서 나쁘기 나름인데 정량화해서 비교하기 어렵다면 단순한걸 선택하는게 대부분 옳은것 같습니다.
      아마 비슷한 고민을 하고 계실것 같아요. :)

  3. 윤호 2012.12.03 19:42 신고 address edit & del reply

    버스아이콘이 버스 앞모습을 연상시켜서 버스가 아래방향으로 가고있다는것을 연상시키는데 버스아이콘을 뒷모습으로 바꾸면 자연스럽게 버스가 위방향으로 향하고있다는것을 연상시키지 않을까요?^^

  4. 이 재용 2012.12.03 22:53 신고 address edit & del reply

    차라리 버스 윗모습을 그리면 어떨까요?

  5. 최준식 2012.12.06 01:40 신고 address edit & del reply

    저는 버스 뒷모습을 넣으면 더 이해가 쉬울 것 같다는 생각 해봤습니다.ㅋ
    기다리는 사람이 이쪽을 보고 있다면, 버스는 엉덩이를 보여줘야 자연스러울 것 같습니다.
    그러면 설명하지 않아도 직관적으로 인식하지 않을까 합니다.
    개인적으로 사람이 바라보고 기다리는 컨셉이 너무 좋아요.ㅎㅎ

    • 無異 2012.12.06 11:11 신고 address edit & del

      의견 고맙습니다. 위에 윤호님도 같은 의견 주셨네요.
      예. 엉덩이를 보여줘야 자연스러울 것 같아요. :)
      아이콘 이미지 검색해서 옆모습,뒷모습,윗모습(이재용님의견) 뒤에서본 입체형에 직접 그려보고 여러가지를 붙여넣어봤는데 버스의 현재 위치라는 심볼로는 앞모습이 가장 심플해 보이더라구요. 방향도 딱 맞으면 좋겠는데 아쉽습니다.
      적당한 형태를 찾으면 알려주세요.

Ad Test...