태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.


'버스도착'에 해당되는 글 2건

  1. 2016.11.22 지도 기반의 버스 앱 리디자인 by 無異
  2. 2012.11.19 [정보디자인] 버스 도착, 노선 운행 정보 (9) by 無異
2016.11.22 11:24

지도 기반의 버스 앱 리디자인

버스 도착을 확인하는데 기존의 즐겨찾기 목록이 제게는 적합하지 않아 불편했습니다. 그래서 버스 앱을 지도 기반으로 만들어 사용하고 있습니다. 


맥락에 따른 버스 즐겨찾기 정보 디자인

기존 버스 앱의 즐겨찾기 목록에는 출근 할때 집 앞에서 타는 버스, 갈아타는 버스, 퇴근 할때 회사 근처에서 타는 버스, 갈아타는 버스, 수영장 갔다 집에 오는 버스들이 섞여 있습니다. 각 상황에서 버스가 두 개 이상 있다보니 목록은 점점 길어집니다. 긴 목록을 스크롤 하면서 내가 지금 탈 버스를 찾다 보면 화가 납니다. 내가 탈 것도 아닌 잡음이 되는 버스 목록을 왜 보고 있어야 하지? 앱이 아닌 비서라고 생각하면 불친절하거나 센스 없는 거거든요. 폰은 지금 내가 어디 있는지, 몇 시인지를 알고 있으니 내가 어떤 버스를 타려는 맥락인지도 알 수 있잖아요. 

네이버 지도의 버스 즐겨찾기에서 이름을 목적지에 따라 '회사','집' 등으로 변경해서 정렬해 볼 수는 있지만 그렇다고 지금 내가 타야 할 버스가 한 눈에 들어오지는 않습니다. 카카오 버스는 정류장 별로 그룹핑하여 보여주어 좀 더 보기 편하지만 내가 뭘 타야 하는지 바로 보이지 않는다는 점에서는 차이가 없습니다. 예외적이긴 하지만 전 갈아타는 같은 정류장에서 아침에는 회사로 저녁에는 집으로 가는데요. 같은 정류장이라도 다른 맥락이 섞여 있으면 오히려 방해되기도 합니다.

네이버 지도 버스 즐겨찾기, 카카오 버스 즐겨찾기


내가 지금 상황에서 타려는 버스만 알아서 잘 보여줄 수는 없을까요? 할 수 있습니다. 내가 있는 곳 근처의 즐겨찾기만 보여주는 정도의 간단한 필터링을 할 수 있습니다. 하지만 위치 정보가 정확하지 않거나 하면(실내에 있거나 하여) 실제 의도를 제대로 반영하지 못하는 false negative 오류가 생길 수 있습니다. 예외적인 상황을 고려하면 목록 형태보다 지도를 기반으로 보여주는 게 더 이점이 있습니다. 의도한 즐겨찾기를 잘못 보여주더라도 지도의 이동이나 줌 아웃을 통해 어렵지 않게 다른 즐겨찾기를 볼 수 있거든요. 

또 몇 정거장 전이라고 표시하기보다 지도 위에 표시하면 버스가 어디쯤 오고 있는지 직관적으로 알 수 있습니다.

즐겨찾기에 이용 시간대를 옵션으로 지정하면 같은 장소에서 다른 맥락인 경우도 걸러낼 수 있습니다. 같은 정류장에서 출퇴근 버스를 갈아타는 경우에도 퇴근 시간이면 출근 버스는 흐릿하게 표시하여 현재 맥락의 버스에만 집중하도록 했습니다.

도착 시간 정보를 표시하는데도 작지만 의미 있는 디테일이 있습니다. 같은 정류장에 여러 대의 버스가 있는 한 경우에, 그냥 번호순이 아니라 도착 시각에 따라 정렬해 먼저 올 버스가 먼저 보입니다. 어떤 버스가 먼저 올지 고민하지 않아도 됩니다. 보통 첫 번째, 두 번째 도착 시간을 함께 제공하는데 둘의 중요도가 같지 않습니다. 그다음 버스에는 관심없는 경우가 많으니 흐리게 표시하면 중요한 정보에 더욱 쉽게 집중할 수 있습니다. 버스가 가까이 와서 1분 이내에 도착하는 경우에 색을 강조하여 표시하면 인지 비용이 줄어듭니다. 


회사와 갈아타는 정류장에서의 현 위치를 기반으로 한 즐겨찾기 버스 도착 표시. 퇴근 시간대이므로 회사로 가는 버스는 흐릿하게 보인다.


즐겨 찾기 등록도 지도 기반으로 하면 보다 직관적으로 바꿀 수 있습니다. 기존은 정류장 번호를 먼저 검색하고 버스를 선택하거나 버스 번호를 검색하고 경로에서 정류장을 선택하여 개별적으로 등록하는 방식 위주였습니다. 무슨 DB 입력하는 것 같아요. (주변 지도에서부터 선택하는 방법도 물론 제공하지만요)

출근할 때 타는 버스, 퇴근할 때 타는 버스, 운동 갔다 집에 오는 버스 등 맥락에 따라 즐겨찾기를 하는 것으로 사고를 바꾸면 UI도 달라집니다. 탈 정류장을 선택하고 목적지를 지도에서 선택하면 해당하는 경로의 모든 버스를 찾아줍니다. 즐겨찾기에 왜 굳이 탑승시간을 지정할까요? 똘똘한 앱은 이제 내가 출근 시간에 이 정류장 근처에 가면 앱을 켜지 않아도 자기가 알아서 버스들의 도착 시간과 바로 승차 알림을 푸시로 알려줄 수 있게 됩니다. 


즐겨찾기 등록 UI. 버스 이용 맥락에 따른 즐겨찾기


주변 정류장 버스 확인

주변 정류장의 버스 정보를 확인할 때도 지도 기반이 보다 유용합니다. 즐겨찾기와 주변 정류장 모드를 나눌 필요가 없거든요. 지도에 내 위치를 표시하면 내가 어느 정류장 근처에 있는지 바로 확인할 수 있습니다.

높은 빌딩이 밀집한 곳에선 전파 반사로 GPS가 부정확해져 내가 길 건너편에 있는 것처럼 표시되는 경우가 자주 있습니다. 그래서 낯선 곳에서는 내가 어느 정류장에 서 있는지 지도를 봐도 헷갈리게 됩니다. 위치와 시선 방향을 함께 표시하면 이런 문제를 어느 정도 해결할 수 있습니다. 정류장에서 도로를 바라보면서 지도상의 내 위치를 확인해보면 실제 위치를 가늠하는 데 도움이 됩니다.



현재 정류장에서 버스 길찾기

코엑스에서 열리는 전시회에 가기 위해 고속터미널 앞의 버스 정류장으로 갔습니다. 여기에 바로 가는 버스가 많다는 걸 알고 있었거든요. 하지만 몇 번 버스를 타는지 까진 모릅니다. 정류장에서 버스 노선도를 하나하나 살펴보면서 코엑스 가는 버스를 찾으려다 포기했습니다. 노선도 디자인이 너무 나쁘거든요. 운 좋게 하나 찾더라도 더 빨리 오는 버스가 있진 않을지, 경로가 다르니 어떤 버스를 타는 게 더 빠를지 비교 선택이 불가능한 정보 형태입니다.


스마트폰의 대중교통 길찾기를 이용하면 스마트하게 몇 번 버스를 탈지, 어떤 버스가 먼저 올지 알 수 있습니다. 하지만 내가 지금 정류장에 있는 상황이라면 기존 앱은 그리 똘똘하게 정보를 보여주지는 않습니다. 

네이버 지도는 길찾기가 우선이라 버스 도착 시간은 알려주지 않습니다. 1, 2분 빨라 봤자 10분씩 더 버스를 기다려야 하면 아무 의미 없잖아요. 

그래서 다음 지도는 버스 도착 시간을 함께 표시해 줍니다. 자 이제 버스 검색 능력 시험을 보겠습니다. 아래 검색 결과를 보고 다음 물음에 답하시오. "뫄뫄는 지금 고속터미널 정류장에 서있다. 코엑스 전시장에 가려면 어떤 버스를 타는게 가장 좋은가?"


네이버 지도 앱, 다음 지도 앱 대중교통 길찾기

정답을 찾았나요? 정답을 찾는데까지 시간은 얼마나 걸렸나요? 

가장 빠른 35분 걸리는 401번 버스를 탈까요? 13분 기다려서?

아니면 그다음 1분 느리지만  4분 58초 후 도착하는 3414번 버스를 탈까요? 함정이에요. 이건 신호등을 기다려 횡단보도를 건너 150m 떨어진 다른 정류장이에요. 

왜 검색결과는 바로 답을 주지 않나요? 왜 내가 결과를 보고 생각하고 해석해서 답을 찾아야 하나요? 물론 이 앱들은 이런 특정한 맥락을 위한 앱이 아니라 범용적인 맥락의 길찾기 앱인 걸 감안해야 합니다. 

하지만 현재의 목록 위주의 대중교통 특히 버스 길찾기 결과는 사용자의 검색 행태에 적합하지 않습니다. 대중교통 길찾기 사용자를 관찰해보면, 경로를 결정하기 위해 지도로 들어가서 확인하는 경우가 많습니다. 실제 목적지와 도착 정류장이 다르기 때문인데요. 걸리는 시간은 도보 시간으로 가늠할 수 있다고 해도 버스에서 내려 목적지까지 어떤 길로 어떻게 가는지가 사용자의 성향이나 상황에 따라 중요하니까요. 목록에서 지도로 왔다갔다 stacked in time 방식의 정보 표현이라 좋다고 할 수 없습니다. 


지도 기반 길찾기

현재 버스 정류장에 있다는 맥락으로만 한정하면 불필요한 과정을 줄이고 보다 효율적으로 내가 탈 버스를 찾아볼 수 있습니다. 현재 정류장에서 갈 수 있는 버스 노선은 정해져 있으니까요. 

1. 출발 정류장을 선택하면 그 정류장에서 갈 수 있는 노선이 모두 표시됩니다. 

2. 목적지를 지도에서 선택하면 그곳까지 운행하는 버스를 모두 찾아줍니다.

지도에 정류장 별로 그룹핑해서 보여주니까 어디에서 내리는 게 좋은지 바로 확인할 수 있습니다. 

질문은 "어떤 버스를 타는게 가장 좋을까?" 이므로 정보 위계는 버스 번호가 가장 잘 두드러지도록 합니다. 목적지에 빨리 도착하는 게 좋으니까 먼저 목적지에 도착할 버스를 먼저 보여줍니다. 목적지 예정 도착 시각은 현 정류장에의 도착 예정 시간과 이동 시간을 더해서 구합니다.

정보를 나열할 때는 최선의 선택 하나를 추천해 주는 게 인지 비용을 줄여주는데 굉장히 중요합니다. 351,362,401,4318 번 중 먼저 오는 걸 타야지 하고 여러 번호들을 작업 기억 안에서 정류장에 들어오는 버스들을 주의해서 확인 한다고하면 생각만 해도 피곤합니다. 기억해야 할 번호의 수도 많아지고 비교 처리해야 할 작업량도 많아지거든요. 하지만 362가 오는지만 확인하다고 대상이 하나가 되면 훨씬 수월해 집니다.

3. 하지만 그것도 역시 귀찮으니까, 오른쪽 아래 알림 버튼을 누르면 해당 버스가 정류장에 도착 했을 때 알려줍니다.



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

저장저장


저장저장



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


Trackback 0 Comment 0
Ad Test...
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
Ad Test...