서울 버스 디지털 노선도 기획에서 UI, UX, UT
0 likes374 views
서울 버스 디지털 노선도 기획에서 UI, UX, UT
- 1. 1 9 2 1 0.2 0 4
- 2. 2 !
- 3. 3
- 4. 4 1 도시 재생 (Regeneration) 인구의 감소, 산업구조의 변화, 도시의 무분별한 확장, 주거환경의 노후화 등으로 쇠퇴하는 도시 를 지역 역량의 강화, 새로운 기능의 도입·창출 및 지역 자원의 활용을 통하여 경제적·사회적·물 리적·환경적으로 활성화시키는 것” 2 리빙랩(Living Lab) 사용자 주도 개방형 혁신 생태계로 생활 현장 (real-life setting)에서 사용자와 생산자가 공동으 로 혁신을 만들어가는 실험실을 의미하며, 공공, 기업, 시민 등 다양한 사회 주체가 혁신 주체로 참여하여 문제를 해결하는 플랫폼 3 스마트 시티(SMART City) 도시의 경쟁력과 삶의 질 향상을 위하여 건설, 정 보통신 기술 등을 융·복합하여 건설된 도시기반 시설을 바탕으로 다양한 도시 서비스를 제공하는 지속 가능한 도시로 정의 스마트 시티의 본질은 이해관계자가 참여하여 사람 중심의 삶의 질 개선과 도시 운영의 효율화를 위해 ICT 중심의 융,복합 기술을 일상에 적용하는 것! SMART CITY !
- 5. 5 정부 선정한 스마트 관련 기술 미래 신기술 제시 분야 융합 서비스 자율 주행 드론 AR/VR 지능형 로봇 산업기반 신재생 에너지 V2G/스마트그리드 스마트 워터 그리드 블록 체인 지능형인프라 빅데이터 5G IoT 인공 지능 스마트 도시재생 솔루션 가이드라인 분야 안전.방재 지능형 CCTV 스마트 가로등 생활.복지 헬스 케어 노약자 생활안전 모니터링 교통 스마트 파킹. 버스정보시스템(BIS) 전기차 인프라 스마트 신호등(횡단보도) 에너지. 마이크로 그리드 BEMS, HEMS, AMI 전기차 렌탈 중앙 냉난방 환경 스마트 쓰레기통 물 관리 시스템 조경시설 관리 오염물질 관리 문화.관광 공공WI-FI AR 서비스 City App 주거.공간 스마트 홈 키오스크 IoT 시설물 관리
- 6. 6 - Smart City 센서 : 스마트 도시 데이터 모니터링 서비스 (날씨, 대기 질, 소음, 이용자 동선 등)를 센서 장착 (IoT) - Small Cell : 광고 박스에 Small Cell을 통합 솔루션을 개발. 4G와 5G의 이동 통신 사업자와 협업을 목표로 함 (통신) - 태양광 패널 : 버스 정류장의 지붕에 태양광 패널 설치 함으로써 신 재생 에너지를 활용한 버스 정류장 활용 (에너지) - Smart Brics : 사용자 맞춤형 콘텐츠를 타겟팅 할 수 있는 디지털 플랫폼 서비스 (인공지능) JCDecaux 스마트 시티 전략 Street Furniture를 통한 공공 서비스에서 디지털을 이용한 공공 서비스로 진화 Smart Brics 태양광 패널Smart City 센서 Small Cell
- 7. 7
- 8. 8 아날로그 버스 노선도 - 버스 번호와 해당 지역 거주자인 경우 쉽게 이용 가능 - 버스 번호를 모르고 지역 정보를 알고 있을 경우도 활용 가능 - 버스 번호와 지역을 모르고 도착지 정보만 있을 경우 앱을 이용하거나, 주변 사람에게 문의함
- 9. 9 국내 BIS(Bus Information System) 설치 사례 - 핵심 기능은 버스 도착 알림 서비스 - 버스 정보 미디어 서비스로 기능 미흡 - 사용성이 용이하지 않은 버튼 식 UI
- 10. 10 - 옥외 환경이 고려되지 않은 디스플레이 시인성 - BIS 기기와의 상호 협력을 고려하지 않은 설치 위치 - 아날로그 버스 노선도 설치로 인한 낮은 활용성
- 11. 11
- 12. 12 장소 공간 속에 위치한 특정한 장소 (Spot) 사용자와 고객 경험 공공 장소의 사용자 경험 기반 서비스 가치 분석 공간 환경, 기후 , 도시 기능 관점 기술 선정 사용자 가치 실현을 위한 적정 기술 및 사업성 검토 디지털 공공 미디어 & 시설물 서비스 구축 가이드
- 14. 14 디지털 기반 공공 서비스의 가치 사회 기여 또는 파급 효과 (랜드마크) 사용자 가치 증대 고객 가치 만족 안정적이며 혁신적인 기술 도입
- 15. 15
- 16. ” at k i t i g 16 () 6 AC ” k x01 ” k x ” k x M c i t g u lK g J e lK lK L ( 4 A i 02 lK 4 E S lK n lK ut 03 ,4 lK ” k v x &D ” g ” g t U o F t h c ) t U SW S o I x L r 04 H ” k v x &D ” g h c ) t U SW S o I x r 05 g t t g t 06
- 17. J C 01 J D K 17
- 18. D D 1 뉴욕 투어 버스 노선도 파리 투어 버스 노선도 동경 투어 버스 노선도 서울 투어 버스 노선도 K Ø 한번에 버스 번호와 노선 정보 확인 Ø 고정된 장소에 있어 이용이 편리 Ø 여러 사람이 함께 이용 가능 Ø BIS 정보와 함께 활용할 경우 초 행자도 버스도 이용 용이 C J 서울시 버스 정보 앱 . Ø 지역 거주민 기준 : 직장인, 학생, 취약 계층, 주부 Ø 지역 외 기준 : 여행객, 목적성을 가진 방문객 Ø 주 사용자 중에서 앱을 이용한 버스 정보 활용 가능 계층은 직장인, 학생 및 일부 주부가 핵심 Ø 주 사용자 이외는 앱을 사용하기에 불편한 정류장에서 정보 취득 (노선도 및 주변 사람들에게 물어봄) 분석 내용을 기반으로 한 디지털 노선 미디어 기획 배경 ü 목적지와 경로 중심의 아날로그 노선도 장점 수용 ü 버스 노선 정보 제공 모바일 앱의 장점 수용 ü 공공 장소의 불특정 다수가 공동의 목적으로 이용하는 정보 효율성 확보 ü 버스 정류장 기반의 콘텐츠와 정보 선정 ü 유지 보수 및 운영과 데이터 분석에 따른 서비스 안정화 ü 스마트 시티 관련 기술 적용과 테스트 JCD Korea 디지털 노선 미디어 구축 방향 18
- 19. iy SsX ny N o LL w K I mr g I M P I o tJ & , e iy e D T ny ) R a n u k u & & Il I D ) K g m u I g M g H W u LL k g &. & . C ). ) 6 . 5 5 C ) & ( e Il l ( & K H E cU a i sJ Coc rt ) 21 1 Il I 19
- 20. C K c cCa cCa D c e D cCa 3 I (. ,1 c o c M T J , ) (. ,1 ., 20
- 21. W A U & I C & I & I () 02 21
- 22. A A I , . & 1 2 .21 . A E 22
- 23. A I & U ,, U A , & 2018년1월10일 Wed -6℃ 검색 버스 번호 노선 도 착시간 •― •―⊙―•―•―•―⊙ 2분 4정거장 전 600 은 평 중 학 교 정 부 청 사 세 종 로 사 거 리 •― •―⊙―•―•―•―⊙ 3분 5정거장 전 7081 은 평 중 학 교 정 부 청 사 세 종 로 사 거 리 1 2 3 4 5 다산콜센터 1220 701 ( A I A ) A I ( ,, , 23 2 .
- 24. 1 & C ( 3 3 . 2 2 A <리서치> - 기 간 : 2018년 1월 15일 ~ 2월 13일 - 연 령 대 : 10대, 20대, 30대, 40대, 50대, 60~70대 - 남녀 성비 : 6:4 (남성연령대, 전연령층, 여성 10대, 20대, 30대 40대) - 방 법 : 시스템 설치된 모습과 위치를 설명하고, 버스와 하차할 정류장 미션 제시 - 미 션 : 1. 마포구의 동교동삼거리(정류장명) 가기 2. 470번 버스 타고, ‘연세대’ 근처 가기 3. 김포공항(국제선, 국내선) 가는 버스와 정류장 찾기 0 사전 설명, 안내, 훈련 과정이 없어도 시스템을 사용하는 것이 편리 여부를 평가 실시 6 3 ) 24 ) I P
- 25. SP & E & , a a e ② 검색어 입력① 검색바 터치 ③ ‘검색’터치 (검색버튼을 알려줌) ④ 버스 리스트에서 가장 위에 있는 버스 노선 터치 ⑤ 노선이 그려진 지도를 보고 ‘홈’ 터치 ① 검색 바 터치 ② 검색어 입력 (연세대) ③ 검색결과리스트에서 ‘연세대앞＇ 터치 ④ ‘검색’ 터치 ⑤ 버스 리스트에서 버스 노선 터치 ⑥ ‘홈’ 터치 ① 검색바 터치 ② 검색어 입력 (김포공항) ③ ‘검색’터치 ④ ‘홈’ 터치 ① 검색바 터치 ② 검색어 입력 (470) ③ 마무리 & C ( 3 3 . 2 2 A 25 ) I P 3 )
- 26. C 2 . . ) 32 인지적 관찰법 사용자에게 3가지 미션을 주고, 그에 따른 미션 결과 도출 디지털 노선도 설계 시 원하는 정보를 최소 터치 (3~5회)로 최단 시간(2~3분 이내)에 수행하는 것을 목표로 설정 미션 경로 분석 미션 1. 목적지 버스 찾기 : 버스 번호를 모르고 목적지만 알고 있을 경우, 버스 번호 확인 목적 미션 2. 버스 번호로 목적지 확인 : 버스 번호를 알고 있을 경우 목적지 정류장을 확인하는 경우 목적지 정류장 찾기 터치 보기 터치 보기 검색 바 검색어 입력 검색 터치 버스 노선도 지도 노선도 지도 목적시 터치 지도 확대 지도에서 목적지 확인 18% 73% 9% 미션 3. 목적지 정류장 찾기 : 목적지 버스 정보와 하차 정류장을 확인하는 경우 26 ( A I 터치 보기 보기 버스 노선도 버스 노선도 확인 검색 바 검색어 입력 검색 터치 버스 노선도 지도 노선도 지도 목적시 터치 지도 확대 지도에서 목적지 확인 27% 36% 27% 9% 목적지 버스 정보 터치 보기 터치 터치 보기 보기 버스 노선도 버스 노선도 확인 검색 바 검색어 입력 검색 터치 버스 노선도 지도 노선도 지도 목적시 터치 지도 확대 지도에서 목적지 확인 36% 18% 18% 9% 9% 9% 버스 번호로 목적지 확인 터치 보기 터치
- 27. I A 03 27
- 28. 1 . 28 리서치와 고객과의 협의를 통해 최종 IA 수립. 검색 / 버스 노선도 / 랜드 마크 로 구성. 기존 아날로그 화면의 친숙함에 디지털의 장점을 결합하는 방식 선택 검색은 디지털 미디어의 특성 반영하면서도 기존 아날로그 화면 구조 수용. 버스 노선도는 기존 아날로그 화면 구조에서 디지털 미디어의 특성(정보 제공) 반영 랜드마크는 시티 글로벌 도시의 시티 투어 노선도 벤치마킹 후 설계 서울시 버스 정보 TOPIS와 날씨, 뉴스 등의 데이터 연동하고, 자체 콘텐츠를 제공할 수 있도록 내부 설계 반영 1
- 29. 29 ”Simple & Easy” 의 디지털 미디어 특성과 기존 아날로그 노선도의 장점을 살릴 수 있는 방안에 대한 고객 의견과 사용자와의 설문으로 진입 화면 제작 진입 화면은 버스 도착 정보 중심으로 검색, 버스 노선도, 서울 랜드마크를 핵심 서비스로 배치 IT 경험 지수에 따라 서비스 이용할 수 있도록 하였으며, 핵심은 버스 현 위치, 도착 정보 및 노선 정보 반영 . . 서울시 랜드마크
- 30. . 30 인지적 관찰법을 위한 Paper Prototyping을 통해 조사된 내용을 토대로 “Touch” (찾는다) - “Look” (관찰하여 본다)가 짧은 시간에 이루질 수 있도록 설계 남녀노소가 노선도 이용 목적 수행에 최소의 경로와 최소의 반복을 위한 구조 설계 공공 장소에서 디지털 미디어 이용 다수의 사용자를 고려한 UI 설계 지향 . .
- 31. . 31 “Simple & Easy” 와 “Touch & Look” 의 UI 설계 기본 원칙에 서울시 버스 정보 디자인 가이드 참조 정보와 콘텐츠의 조화를 위해 공공 미디어로서 버스 정류장에 제공할 최소한의 필요 정보 제공 CMS 운영에 따른 편의성을 고려한 디자인과 콘텐츠 업데이트 구조 확보 UI 디자인 가이드
- 32. 32
- 33. 33 클라우드에서 데이터 연동 및 서비스 콘텐츠 생성 후 LTE 를 통해 클라이언트의 안드로이드 셋탑으로 전송하는 프로세스 데이터 흐름 . 5 2 3 4 4 6 1 6 1 2 3 4 5 6 서울시 교통 정보 데이터 수집 후 정보 처리 디지털 노선 정보 및 데이터 처리 후 전송 LTE 통신을 통해 각 정류장으로 데이터 전송 라우터를 통해 유무선으로 네트워크 구성 FMS를 안드로이드 셋탑 제어 안드로이드 셋탑을 통해 서비스 및 기기 상태 수집
- 34. M 6H DM 4 S E ) 6H E E M W M F & M L ( 04 34
- 35. 35 . 1 4 . 6 MRI Spec에 준하는 옥외 성능과 버스 정류장의 구조 설계 수용 가능한 함체 개발 별도의 함체 설계와 신뢰성 테스트를 거쳐 제이씨데코 형 디지털 노선도 디지털 사이니지 개발 46” 아웃도어 디지털 사이니지 설계 개발 & <함체 설계 도면 > <제품 사양서>
- 36. 2 . 2 2 4 36 옥외 적용을 위한 디스플레이로 IP65 수준의 설계와 기존 버스 정류장 기구 결합을 위한 설계 반영 제품 옥외 디스플레이 <디스플레이 보드 부분> <내부 배선 부분> <터치 스크린 테스트> <출하 최종 테스트>
- 37. .3 37 IP 65 수준의 하드웨어 설계 및 환경 변화에 따른 자동 조절 기능 내장 LED 디스플레이 4 <LED 모듈 배열 부분 > <내부 배선 부분> <도광판 부분> <LED 디스플레이 출하 테스트>
- 38. <디지털 노선도 내 위치> <생활정보 안내도 위치> 38 옥외 환경에서 구동 가능한 안드로이드 셋탑을 각각의 디스플레이 장착하여 운영 미디어 플레이어 . <안드로이드 셋탑>
- 39. 5 4 39 인터넷이 연결된 상태에서 셋탑 및 디스플레이의 전원 제어하는 기기로 디지털 노선도의 셋탑에 탑재 FMS (Fail Management System) . <제품 출하 점검 및 테스트 >
- 40. , 05 40
- 41. 1 ., 41 제품에 대한 검수 이후 현장 구축 및 테스트 수행 실시 로컬 상태에서 운영 및 인터넷을 연결 테스트로 현장 상황을 점검 후 수정 반영 운영 테스트 1 5 ., <중앙차로 구축 및 설치 현장> <시범 운영 및 테스트 >
- 42. 42 초기 구축 이후 관찰된 에러, 버그, 환경에 따른 수정 사항 및 유지 보수 검토 의견을 문서화 및 공유 동일 증상 발생을 줄이며, 초기 구축 이후 안정화 문서 테스트 , 버그 수정 일지 5 ., 2 .,
- 43. 43 광화문 정류장에서 5월 3째 주 화, 금요일 오전 오후 3시간 동안 관찰 첫 페이지에서 도착 정보 확인 후 바로 버스 노선도 터치 후 타고자 하는 버스의 현 위치 확인 쉐도잉 관찰 - 여성 . ,5 ü 쉐도잉 관찰 기간 동안 여성 사용자가 압도 적으로 많았으며, 특히 20~30대 여성의 활 용도가 높았음 ü 분기에 1회씩 요일과 시간을 달리하며 관찰 필요 ü 로그 분석을 통해 실제 사용성이 높은 서비 스 확인 필요 . 3
- 44. 44 쉐도잉 관찰 - 남성 . ,5 광화문 정류장에서 5월 3째 주 화, 금요일 오전 오후 3시간 동안 관찰 첫 페이지에서 도착 정보 확인 후 검색과 버스 노선을 함께 이용하는 패턴 ü 남성의 활용성은 낮았음. 버스 노선도 이용 이 높으며, 검색을 통해 확인하는 사람들이 간간히 있음 ü 여성에 비해 검색 이용이 높으나, 전반적으 로 참여율이 낮았음 . 3
- 45. 45 인지적 관찰법에 점검되지 않은 사용자 쉐도잉 관찰 - 기타 행동 . ,5 ü 인지적 관찰법에 점검되지 않은 사용자 ü 핸드폰으로 버스 정보 취득 후 디지털 노 선도 활용 후 노선도 확인 ü 서비스를 하나씩 터치하면서 경험하는 사람 버스가 오자 바로 탑승 : 약간의 체험 및 학습 시간을 갖는 느낌 . 3
- 46. 3: . 7 : 7 2 0 46 12,384/ 월 평 균 10,643 / 월 평균 버스 번호 검색 2,736/ 월 평균 22% 버스 정류장 검색 1,384/ 월 평균 13% 8 1
- 47. 12,778 15,343 14,458 12,771 12,887 11,242 13,348 11,423 12,404 10,032 0 5,000 10,000 15,000 20,000 25,000 30,000 35,000 8 9 10 11 12 첫 화면 진입 "버스검색" 메뉴 "버스 노선도" 메뉴 합 2,282 2,947 3,127 3,449 3,620 1,060 1,704 1,786 1,698 1,679 0 1,000 2,000 3,000 4,000 5,000 6,000 8 9 10 11 12 월별 검색 이용 현황 버스 번호 검색 버스 정류장명 검색 합 47 월별 첫 화면 진입 횟수 월별 검색 이용 횟수
- 48. 2,121 1,469 1,812 1,996 2,104 2,946 3,204 1,081 611 894 1,031 967 1,402 1,870 0 1,000 2,000 3,000 4,000 5,000 6,000 월 화 수 목 금 토 일 버스 번호 검색 버스 정류장 검색 합 15,854 14,073 15,280 17,393 19,703 26,992 21,220 0 5,000 10,000 15,000 20,000 25,000 30,000 월 화 수 목 금 토 일 48 요일 별 첫 화면 진입 횟수 요일 별 검색 수
- 50. 7,145 3,813 2,381 1,347 1,505 2,115 3,597 2,948 0 1,000 2,000 3,000 4,000 5,000 6,000 7,000 8,000 자정~04:00 04:00~07:00 07:00~10:00 10:00~13:00 13:00~16:00 16:00~19:00 19:00~22:00 22:00~자정 합계 0 200 400 600 800 1,000 1,200 1,400 1,600 1,800 2,000 월 화 수 목 금 토 일 자정~04:00 04:00~07:00 07:00~10:00 10:00~13:00 13:00~16:00 16:00~19:00 19:00~22:00 22:00~자정 50 시간대 별 검색 수 (버스 번호, 정류장 명) 요일의 시간대 검색 수 (버스 번호, 정류장 명)
- 51. 51 …
- 52. 52 공간 분석 환경 이해 장소 정의 사람 이해 기술 이해 이해 관계 지속성 이익 실현
- 53. 53 THANK YOU M&M Networks 2019 info@mnmnetworks.com