통합단말 UI Framework 컨설팅 - 디자인 시안 설명회 - 2007-10-30.

Presentation on theme: "통합단말 UI Framework 컨설팅 - 디자인 시안 설명회 - 2007-10-30."— Presentation transcript:

1 통합단말 UI Framework 컨설팅 - 디자인 시안 설명회 -

2 Agenda 현황 분석 개선모델 설계 디자인 시안

3 진행 경과 현황 분석 개선 모델 정의 UI 표준 수립 및 배포 사용자 VOC 분석 개선방향 수립 개선모델 설계
현재 10.5 12.14 현황 분석 개선 모델 정의 UI 표준 수립 및 배포 사용자 VOC 분석 개선방향 수립 개선모델 설계 영업점(수송동,혜화동) 텔러의 사용자 행태분석1) 영업점/업무팀 기능 및 UI 요구사항 도출 시사점 종합 개선방향 설정 기능 개선모델 설계 디자인 컨셉 정의 현행 시스템 분석 차세대 통합단말 요건 확인 디자인 시안 작성 스타일 가이드 작성 배포 및 교육 사용자 PC 환경 표준 통합 검토대상시스템의 기술구조 및 UI 분석 UI관련 통합단말 구현 요건 반영 OP*era 솔루션 기능 고려/제약사항 확인 2개 시안 제작 시안 검토중 단말 담당자/개발자 BRM 담당자 차세대 UI 표준 협의체 타행 사례 조사 검수 Check List 신한, 시티, 상호저축은행 유사 단말 아키텍쳐/ 솔루션 적용 사례 1) 사용자 행태분석(User Experience Analysis) : 사용자가 시스템과 상호작용하는 사용자 경험/행동 패턴을 관찰하여, 사용자의 불편 요인을 찾는 활동

4 Ⅰ. 현황분석 현황 분석 개선모델 설계 디자인 시안 Ⅰ-1. 현행 시스템 분석 Ⅰ-2. 통합단말 UI 요구사항
Ⅰ. 현황분석 현황 분석 Ⅰ-1. 현행 시스템 분석 Ⅰ-2. 통합단말 UI 요구사항 Ⅰ-3. 타행 사례 Ⅰ-4. 시사점 종합 개선모델 설계 디자인 시안

5 Ⅰ-1. 현행 시스템 분석 Ⅰ. 현황 분석 통합단말은 Web과 C/S로 구현된 기존 시스템의 기능을 수용할 수 있고, 통합 권한관리 기반으로 업무 서비스를 제공할 수 있는 통일된 UI 체계를 기반으로 구현되어야 함 분석 결과 개선을 위한 시사점 Open 시점에 예상되는 사용자 최저 PC 사양 CPU : Pentium4, 512M 메모리, Windows 2000/XP, 15인치 모니터 Web, Client-Server 방식의 특징을 모두 수용 가능해야 함 기능과 성능, Rich UI 제공과 기존 기능 컴포넌트 연동 직관적 UI 및 편리한 Navigation을 통한 쉽고 빠른 서비스 다양한 시스템에 대한 통합 Framework을 제공해야 함 서비스 채널의 통합, SSO/권한관리의 연계 Web과 C/S 기능을 모두 수용할 수 있는 통합단말 설계 전사 SSO/EAM 시스템과 인증 및 권한 관리 통합 서비스 제공 서비스 체계 재구성 시스템, 조직 중심  업무, 사용자 중심으로 업무 편의성을 고려한 통일된 UI 체계 통일된 Color 및 디자인 서식 적용으로 가독성을 높임 화면 Navigation방식과 버튼 및 화면 구성에 일관된 표준 적용 시스템 환경 상이한 UI 설계로 사용자 인지적 부담  다양한 시스템 레이아웃 구조 (상하, 역 ‘ㄱ’자, ‘ㄷ’자 구조) 업무와 기능이 혼재된 메뉴 구조, Tool Bar/아이콘의 위치도 상이 화면 접근방식이 다르고, 화면 탐색이 불편함 디자인 Identity가 부재하며, 시각적 피로감  시스템별 컬러체계가 상이, 한색계 고채도/중채도 계열 주 사용 떨어지는 가독성, 이독성 바탕색과 글자색의 대비가 약함 깨진 그래픽 폰트/이미지과 조밀한 줄간격 및 정렬 직관적으로 이해하기 어렵고, 일관성 없는 아이콘 UI 및 디자인

6 Ⅰ-2. 통합단말 UI 요구사항 Ⅰ. 현황 분석 영업점이 통합단말을 통해 전 업무를 빠르고 쉽게 수행할 수 있도록 완벽한 단일 채널 기능을 제공하여야 하며, 적정 시스템 성능과 중단없는 서비스를 위한 안정성도 함께 보장되어야 함 개선을 위한 시사점 사용자 VOC User Experience 분석 신속하고 정확한 업무 처리가 최우선 쉽고 빠른 시스템 사용이 가능한 단순하고 직관적인 화면 UI 비슷한 업무는 같은 메뉴로 구성하고, 용어 통일된 메뉴체계 개인의 업무 특성(권한/역할)이 반영된 맞춤형 서비스 화면 도움말 기능의 강화와 쉬운 검색 서비스 필요 협업 및 지원 기능의 추가 개발 / 강화 기존 시스템의 기능은 최대한 수용 업무적으로 가장 중요한 것은 빠른 시스템 처리속도와 무중단 서비스임 출근시 계정계와 오토피아 우선 접속  필요 시스템을 모두 띄워놓고 작업 일반적으로 30~40개의 메뉴로 대부분 업무 처리 창구 서비스의 경우 5분 이내의 빠른 업무 처리 화면 이동 및 데이터의 중복 입력이 자주 발생 (평균 4개 이상 화면 이동) 키보드와 마우스를 모두 사용할 수 있는 환경 영업점 전 업무 수행이 가능한 단일 채널 기능 제공 다양한 시스템에 대한 One-Click Access 지원 기능 개발 및 단말 UI 표준화를 통한 통합 Framework化 빠른 업무 처리가 가능한 시스템 화면/업무 접근체계 및 검색 서비스 제공 권한과 역할 기반의 메뉴/컨텐츠 맞춤 서비스 반복되는 작업의 업무 처리 효율화 중요 정보 및 상태정보 Notification / 협업 지원 적정 성능/안정성을 고려한 시스템 사용자 PC / NW 환경을 고려한 서비스 적용 솔루션 (OP*era) 특성 X-Internet 솔루션  UI 구성은 C/S 개발 툴의 4GL 방식 Theme, Style Sheet의 일괄 적용이 불가능함 디자인 정의 정보(xml)와 Events 정의 정보(Java Script)가 분리 구성 적정 PC 메모리 및 CPU 부하 산정  PC 다운 등 서비스 중단 상황 억제

7 Ⅰ-3. 타행 사례 조사 Ⅰ. 현황 분석 업무 영역을 최대한 확보한 후, 업무 흐름 연동 서비스와 마케팅 정보, 업무 지원 정보를 제공하여 업무의 효율화를 지원하며, 통합에 따른 시스템 복잡도를 최소화한 사용 편의성 확보를 위한 Navigation 및 디자인을 제공을 추구함 시사점 구분 신한은행 시티은행 상호저축은행중앙회 업무 처리 Flow를 정의하고, 사용자 선택에 의한 화면의 연동 처리기능 제공 업무 영역을 최대한 확보할 수 있는 화면 구조를 채택 고객 Single View 구성  마케팅 및 Sale 정보 Push 통합된 업무 기능과 메뉴 트리 성능을 고려한 Navigation 체계 설계 시각적 피로감 낮고, 가독성 높은 컬러 디자인 적용 각 화면과 관련된 업무 지원 정보의 One Click Service 제공 ‘ㅁ’자 구조 토글형 Contents 확장 영역 구성 ‘ㄷ’자 구조 다중창(MDI) 구조 ‘ㄷ’자 구조 TAB 기반 다중 화면 연관 화면 바로가기 Layout 유사 차세대 기술구조 코어 뱅킹 + 마케팅 서비스 동일한 통합 단말 솔루션 적용(OP*era) 분석 대상 복잡한 메뉴 구조 많은 시스템, 화면수  업무 중심 분류 성능 고려한 메뉴 레벨링 마케팅 정보 서비스 시나리오 기반 서비스 기능 중심 메뉴 분류 Navigation 경로를 Left로 통합 화면이동 + 부가정보 마케팅 정보 제공 워크플로우 서비스 기능 중심 메뉴 분류 통합된 화면 접근창 제공 인사서비스, 직원검색 서비스 제공 워크플로우 서비스 IA/ Navigation 저채도 색상 사용과 주요 정보 강조 시각적 피로감 , 가독성  저채도 회색계, 색상 사용을 극도로 절제 시각적 피로감  필수입력항목처리  고채도 사용 시각적으로 밝은 느낌, 피로감  시선의 분산이 심함 Color/ 디자인 기능과 메시지 영역의 분리 직관적 사용자 접근 주요 거래기능과 보조 기능/상태정보를 분리 기능과 상태 정보를 단순화하여 구성 아이콘/ 기능

8 Ⅰ-4. 시사점 종합 Ⅰ. 현황 분석 통합단말을 통해 쉽고 빠른 통합 업무 수행이 가능하도록 사용자 중심의 맞춤 서비스와 효율적 업무 수행 지원 기능을 제공하며, 적정 성능이 고려된 디자인 및 Infra 표준을 수립하여 적용함 시사점 종합 개선 Point Web과 C/S 기능을 모두 수용할 수 있는 통합단말 설계 업무와 사용자 중심으로 메뉴 체계의 재분류 및 표준화 필요 화면 Navigation방식과 버튼 및 화면 구성에 일관된 표준 적용 통일된 Color 및 디자인 서식 적용으로 가독성을 높임 통합 로그인/권한 체계(SSO/EAM)와 연동을 통한 인증/권한관리 현행 시스템 사용자 중심의 맞춤 서비스 제공 효율적 업무 수행 지원 영업점 전 업무 수행이 가능한 단일 채널 기능 제공 다양한 시스템에 대한 One-Click Access 지원 기능 개발 및 단말 UI 표준화를 통한 통합 Framework化 빠른 업무 처리가 가능한 시스템 화면/업무 접근체계 및 검색 서비스 제공 권한과 역할 기반의 메뉴/컨텐츠 맞춤 서비스 반복되는 작업의 업무 처리 효율화 중요 정보 및 상태정보 Notification / 협업 지원 적정 성능/안정성에 최우선 ( 사용자 PC / NW 환경 고려) 일관성있고 직관적인 디자인 표준 적용 통합단말 요구사항 채널 통합을 위한 표준 Infra 서비스 통합단말 서비스의 적정 성능과 안정성 확보 업무 영역을 최대한 확보할 수 있는 화면 구조 채택 업무 Flow를 정의  사용자 선택에 의한 화면의 연동 처리기능 제공 고객 Single View 구성  상품/마케팅 및 Sale 정보 Push Service 통합된 업무 기능과 메뉴 트리 성능을 고려한 Navigation 체계 설계 각 화면과 관련된 업무 지원 정보/도움말의 One Click Service 제공 타행사례 쉽고 빠른 통합 업무수행 공간 제공

9 Ⅱ. 개선모델 설계 현황 분석 개선모델 설계 Ⅱ-1. 개선방향 설정 Ⅱ-2. 세부 개선모델 설계 디자인 시안

10 Ⅱ-1. 개선방향 설정 Ⅱ. 개선모델 설계 쉽고 빠른 통합 업무 수행 환경을 제공하기 위해 구현할 디자인 측면의 개선 Point별 개선모델은 다음과 같음 화면번호, 화면명 통합검색 지원 통합 도움말을 구성하고 통합검색 서비스 (업무 표준, 시스템 도움말, Q&A, 상품 정보 등) 업무 흐름에 따른 화면/데이터 연동 서비스 및 업무 시나리오 서비스 CRM 연계된 마케팅 및 Sales 정보 제공 권한관리(EAM)기반의 메뉴 동적 구성 서비스 개인화 영역을 구성하여 업무 역할 기반의 맞춤형 컨텐츠 서비스 제공 업무 히스토리 기반의 My Menu 및 메뉴 개인화 구성 서비스 제공 사용자 중심의 맞춤 서비스 구성 효율적인 업무 수행 지원 쉽고 빠른 통합 업무수행 공간 제공 채널 통합 Infra 서비스 ‘ㅁ’자 화면 Layout 구성 및 서비스 성격 (업무, 기능, 지원정보)에 따른 화면 영역 구성 업무를 중심으로 재분류한 메뉴 구조 및 Navigation 체계 시스템별 다양한 업무 화면과 기능의 수용 가능한 서비스 구조 (확장형 업무화면/ Tool Bar) 일관성있고 직관적인 디자인 적용 지주사 디자인 컨셉과 표준을 반영하여 디자인 Identity를 유지한 UI 적절한 크기, 여백 고려한 Font 및 UI 구성 Navigation 흐름과 접근 경로를 Left 중심으로 통합 용어 표준에 따른 레이블링 표준화 통합단말의 적정 성능과 안정성 고려 PC 성능을 고려하여 Pop Up 및 동시 화면수 제한 적용 메뉴 트리의 노드별 화면 수 적정량 분산 및 Top/Left 영역으로 구분 Push 서비스는 이벤트 발생시 제공

11 Ⅱ-2. 세부 개선모델 설계 Ⅱ. 개선모델 설계 통합단말의 Layout은 복잡하고 다양한 정보서비스가 가능한 ‘ㅁ’자 구조를 채택하고, 각 영역을 정보 유형과 특성에 따라 분류하고 그룹화 구성하여 사용자의 정보탐색이 최대한 용이하도록 함 Layout – Frame 구조 Top 영역 시스템 공통 기능이 위치하며, 고정된 최소 사이즈로 할당하여 구성 업무 접근을 위한 1차 접근 경로임 Left 영역 업무화면으로의 접근을 위한 다양한 메뉴 네비게이션이 위치함 마케팅을 위한 고객 정보 검색 및 조회 Quick 서비스 구성 펼쳐진 상태를 Default 설정으로 유지 Contents 영역 업무 화면이 배치되며 가능한 최대의 공간확보가 필요함 Right 영역 Contents 업무를 보조하는 정보가 위치 개인화 가능한 영역을 대부분 최소 사이즈로 접혀져 있도록 하며, 필요시 활성화 Footer 영역 단말상태와 주변기기상태를 보여줌. 승인요청, 알림 등 커뮤니케이션을 위한 정보가 위치함. 복잡하고 다양한 정보 서비스가 가능한 ‘ㅁ’자 Frame 구조 정보 유형별로 영역을 분류하여 구성 1 Top 영역 2 Left 영역 Right 영역 Contents 영역 3 4 5 Footer 영역

12 Ⅱ-2. 세부 개선모델 설계 Ⅱ. 개선모델 설계 Top 영역에는 다양한 시스템의 기능과 화면을 효율적으로 통합하고 업무 수행이 가능하도록 사용자 권한에 따라 동적 구성되는 업무 메뉴, 화면검색, 개인화 가능한 기능 Tool Bar를 제공함 Top 영역 1 2 3 통합단말 시스템 로고 통합단말의 초기화면으로 링크(Home) 권한기반의 업무 메뉴 영역(1,2단계) 시스템이 아닌 사용자 관점인 업무 중심 메뉴 구조(최대 8대까지 고려) EAM과 연계하여 권한기반의 동적인 풀다운 메뉴 구성됨 타 시스템 바로가기 링크 및 통합단말 환경설정/관리 기능, 단말 종료 처리 신 화면번호체계를 사용한 화면번호, 화면명 검색, 구 거래코드를 통한 화면 번호에 대한 통합검색 제공 단말 공통 기능에 대한 단축 아이콘 업무와 관련된 통합 도움말을 제공함 시스템별 보조기능은 개인이 선택하여 자주쓰는 기능을 선택할 수 있음 CRM, CTI, 보조기능과 같이 업무별로 특화된 기능 아이콘을 그룹핑하여 구성 1 시스템 로고 권한기반 업무 메뉴(1,2단계) 고정 메뉴 화면 통합 검색 단말 공통 기능 아이콘 업무별 특화 아이콘 4 5 6 2 3 3 4 5 초기화 거래 전송 책임자승인 도움요청 화면저장 화면인자 화면인쇄 엑셀저장 이석관리 Help 4 승인결과 조회 시스템 접속환경 책임자 지정 거래점 변경 이석관리 설정 주변기기 설정 S/W 버젼관리 기타 환경설정 구 코드 업무도움말 단축키 도움말 Help Desk 5 6 6 CRM CTI 보조기능

13 Ⅱ-2. 세부 개선모델 설계 Ⅱ. 개선모델 설계 Footer 영역은 통합단말 및 주변기기의 상태와 환경설정 정보의 제공 서비스와 다양한 Notification 메시지 도착 / 건수 알림 서비스로 구성됨 Footer 영역 접속자 및 단말의 상태 정보 제공 접속자 정보 현 접속 서버 및 상태정보 및 변경 현 설정 거래모드값 및 설정값 변경 현 화면 모드 및 설정값 변경 현 설정된 책임자 순위 확인 및 변경 당일 발생 거래건중 최근 20건에 대한 히스토리 제공(Tool Tip 표시) 검색 아이콘 클릭시 거래 히스토리에 대한 상세 검색창 Pop Up 책임자 승인 요청, 도움요청, 업무별 알림, 수신가 메시지의 수신 건수와 알림창(5초간 활성)을 제공 속보 메시지는 화면 중앙에 활성화 닫기를 클릭전 화면은 닫히지 않음 로그인 시 읽지 않은 속보가 존재하는 경우는 메시지창 활성화 주변기기 온/오프라인 상태와 작업상태 정보 제공 1 2 3 [거래시간] 화면번호 – 화면명… 4 1. 김하나 2. 홍길동 3. 박수철 2 3 4 1 5 단말 정보 접속 상태 및 설정 정보 메시지 알림 주변기기 상태 5

14 Ⅱ-2. 세부 개선모델 설계 Ⅱ. 개선모델 설계 Left 영역은 주활용 업무화면으로 빠르게 접근할 수 있는 마이메뉴와 시나리오 기반 메뉴, 트리 구조의 업무 메뉴를 제공하여 사용자의 업무 접근편의성을 개선하고, 고객정보컨텐츠를 통해 창구의 빠른 고객서비스와 마케팅 활동을 지원함 Left 영역 1 2 3 개인화된 메뉴 바로가기 서비스 업무별 사전 정의된 즐겨찾기 그룹 제공 개인이 단말 화면/ 웹 Page 추가/삭제 (단축키 지정 가능) 저장된 화면 목록 조회 및 호출 업무팀이 정의한 시나리오 목록 제공 업무 시나리오 선택시 관련 업무 화면 목록 제공 사용자 선택 화면을 Contents영역에 Open함(URL 정의화면은 새창열기함) Top 영역에 선택된 1,2 Menu에 따라 구성되는 3단계 이하 전체 메뉴 트리 메뉴 트리 전체 펼치기, 전체 단기 제공 통합단말 전체 업무 메뉴 맵 Page 제공 고객 정보 검색 및 조회 서비스 업무 화면에서 거래처리하는 고객관련 코드와 연계한 고객정보 제공 관련 Sales 및 VOC 이벤트 정보 제공 고객명, 주민번호/사업자번호, 계좌번호 사용한 검색 서비스 제공 SMS, , 활동내역 직접 등록/전송 1 2 3 4 고객 정보 검색 4

15 Ⅱ-2. 세부 개선모델 설계 Ⅱ. 개선모델 설계 Right 영역에는 포털형태의 개인화된 서비스를 제공하기 위한 공간으로 CRM 고객정보제공창과 영업점 경영실적 정보 제공창과 개인화된 부가 컨텐츠 서비스를 제공하는 마이페이지로 구성됨 Right 영역 업무 수행을 지원하는 보조 컨텐츠 영역 구성 고객정보 : CRM 관련 정보로 구성 경영정보 : 영업점의 실적 집계 정보 마이페이지 : 다양한 부가 정보의 개인화 서비스 다양한 마이페이지용 컨텐츠 Repository 제공 전사 및 업무별 공유 정보에 대한 개인화 컨텐츠 개발 가능 권한 기반으로 통합단말에서 개인화 서비스 제공 마이페이지 컨텐츠의 개인화 구성 컨텐츠명 검색을 통해 추가하고자 하는 컨텐츠 선택 컨텐츠 순서 변경 및 기 등록된 컨텐츠 삭제도 가능 (시스템 성능을 고려하여, 서비스 초기는 3개의 컨텐츠로 제한) 1 2 1 2 3 3

16 Ⅱ-2. 세부 개선모델 설계 Ⅱ. 개선모델 설계 좌측의 네비게이션 영역을 제외한 Contents 영역을 기본 사이즈로 적용토록 하며, 특화된 화면 사이즈 요구사항도 수용할 수 있도록 토글되는 좌, 우측 영역의 컨트롤을 통해 확장/축소형 화면 사이즈를 지원토록 함 Contents 영역 기본 사이즈 가변적인 Contents 영역 사이즈 지원 오른쪽 영역이 Disable된 기본 사이즈로 업무 화면 설계 특화된 화면의 경우는 좌,우측의 토글 영역의 컨트롤을 통해 최대 화면 구성 가능 (단, 수평 스크롤이 발생함) 화면번호 + 화면명으로 화면 Title 구성 현 화면 Location 정보 제공은 힘듬 화면 닫기, 화면 도움말 호출, 연계 화면 보기 (업무흐름), My Menu 추가 등 화면 기능 제공 거래 처리 메시지 제공 정상적인 거래 처리에 따른 메시지 중심 으로 제공 기타 사용자 Input이 필요한 Error, Warning, Information, Question 등은 Windows Message Box로 처리 업무 화면간 네비게이션 제공 열려있는 화면 Tab 표시 5개 화면씩 이전, 이후 보기 가능 (10개 화면 Open 가능할 경우) 1 2 3 1 Contents 영역 2 확장/축소 사이즈 3 Contents 영역 4 4 Contents 영역 5 5

17 Ⅱ-2. 세부 개선모델 설계 Ⅱ. 개선모델 설계 업무 처리시 필요한 관련 도움말 정보를 통합하여, 사용자가 단일창에서 정보를 검색, 조회가 한꺼번에 가능하도록 KM, 그룹웨어, 검색엔진 등을 연계한 통합 업무 도움말 서비스를 제공함 기타 화면/업무에 따른 업무 도움말 서비스의 통합 구성/서비스 웹 Page로 서비스 구현 업무 도움말, 시스템 도움말, Q&A, 상품 정보에 대한 통합 정보 서비스 KM, 그룹웨어, 검색엔진과 연계한 도움말 서비스의 통합 구성 업무 표준 절차 및 관련 규정, 시스템 도움말 정보의 KM을 통한 통합 관리 업무 도움말에서 통합단말의 화면에 대한 바로가기 서비스 제공 업무 도움말 정보에 대한 효과적인 검색 서비스 제공 자료의 저장위치와 무관하게 통합 검색 결과 제공 정보 유형 및 저장 위치에 따른 상세검색 및 결과내 검색 서비스 제공 업무 맵을 통한 도움말 찾아가기 서비스 제공 1 1 2 2

18 Ⅲ. 디자인 시안 현황 분석 개선모델 설계 디자인 시안 Ⅲ-1. 디자인 컨셉 Ⅲ-2. 디자인 시안 비교

19 Ⅲ -1. 디자인 컨셉 Ⅲ. 개선모델 설계 통합단말 사용자의 환경과 하드웨어/소프트웨어 환경을 고려하여 볼 때 우선적으로 명확한 정보전달과 시각적인 피로를 고려한 편안한 디자인의 적용이 필요함. 기본 환경 정의 사용자 하나은행 전 임직원 (영업점 텔러가 다수) 20 ~ 50 대 남/여 모두 사용 (영업점 여성 비율 높음) 사용 특성 PC 사용 Skill : 중 ~ 상 수준 매일 장시간 PC 사용 주 사용시간대 : 주간 일관시간내 가독성이 높은 디자인 눈의 피로도가 낮은 디자인 인지하기 쉬운 직관적 요소 사용 최소한의 조작으로 업무화면에 접근 마우스와 키보드 조작을 모두 지원 15인치, 1024*768 해상도에 최적화 개발 Tool이 제공하는 UI 환경 고려 사용자 환경 최소 PC 사양 CPU : Pentium 4 이상 메모리 : 512M 이상 OS : Windows 2000 / Windows XP 최소 모니터 사양 사이즈 : 15인치 LCD 모니터 통합단말 서비스 환경 브라우저 : Internet Explore Sp2 이상 해상도 : 1024 세로768 모드 색상 : 색상 이상 지원 개발 Tool : OP*era 시스템 환경

20 Ⅲ -1. 디자인 컨셉 Ⅲ. 개선모델 설계 혁신적이고 간결하며 다이내믹한 기업 문화와 맥을 같이하도록, 통합단말은 사용성과 기능성이 높은 디자인을 통해 “편안하고 효율적인”인 통합업무시스템으로 구현토록 함 지주사 디자인 컨셉(B2C) 통합단말 디자인 컨셉 Style Keyword 키워드 Generation 키워드 Grouping 디자인 전략 “Minimal & Noble” 체계적 정리된 신선한 친근한 통일된 간결한 쉬운 편안한 편리한 적합한 신속한 가독성 기능적인 전문적인 효율적인 합리적인 Task 지원의 온화하며 은은한 고급스럽고 품격있는 경쾌하며, 다이내믹한 “편안하고 효율적인” 하나은행 통합업무시스템 사용성이 높은 기능적인 화면 디자인 하나지주와 은행의 통일된 Identity를 형성. 디자인 전략 실용적 정리된 도시적 간결한 편리한 적합한 기능적인 전문적인 효율적인 통일된 편안한 개인화된 명확한 가독성 합리적인 신속한 Task지원의 Customer 품격있는 편리한 유익한 Kindly Trust Dynamic 앞선 혁신하는 자주심있는 Corporate

21 Ⅲ -1. 디자인 컨셉 Ⅲ. 개선모델 설계 통합단말에 적용할 Font는 가독성을 최우선적으로 고려한 윤고딕 서체와 돋움체를 사용하였으며, 장식적 서체의 사용을 최대한 배제토록 하며, 12px 이상의 글자 크기를 권장토록 함 지주/은행 표준(B2C) 통합단말 Font 표준 그래픽 폰트 그래픽 폰트 가독성을 최우선 고려한 폰트 선택 폰트의 적용에 있어 가독성을 최우선적으로 고려하여 윤고딕과 돋움 글꼴을 전반적으로 사용 이미지 영역에서도 일관성을 위해 장식적인 폰트의 사용을 최대한 배제함. 폰트 크기도 가능한 12px 이상 사용을 권장 하나은행의 B2C 스타일가이드에서 제시하고 있는 폰트와 컬러 컨셉을 가 능한 준수 B2C 사이트와의 일관된 컨셉을 유지 국문 : 윤고딕 300 계열 시스템 폰트 국문 영문 시스템 폰트 돋움 14px 돋움 12px Arial 12px Arial 11px 국문 : 돋움 영문 : Verdana / Arial

22 Ⅲ -1. 디자인 컨셉 Ⅲ. 개선모델 설계 통합단말의 컬러는 시각적으로 자극적인 색상을 배제한 차분하고 기능적인 색상군을 사용하며, 하나은행의 Identity를 드러낼 수 있는 색상을 메인컬러로 적용함. 지주/은행 표준(B2C) 통합단말 Color 컨셉 색상 장시간 사용하는 B2E 시스템의 특성을 고려 눈의 피로감이 적은 저자극 색채를 사용 주색상 Main Color Hana Red Hana Green Gradation Hana Greed 하나은행의 Identity를 드러내는 Green 색상 적용 보조 색상 Hana Gold White Black Sub Color 색상 확장 사용 맑고 온화한, 은은한 색상군 전체적으로 저채도 한색계 Color 적용 Point Color 강조사항, 중요정보영역은 주목도가 높은 난색계 색상을 적용 *자료출처: IRI 디자인 연구소 산업자원부지원.산업기반기술 사업 결과

23 Ⅲ -2. 디자인 시안 비교 Ⅲ. 개선모델 설계 시안 1 표준 공통 적용 시안 2 업무 처리용 시스템적 느낌을 강조 컨셉
Ⅲ. 개선모델 설계 시안 1 표준 공통 적용 업무 처리용 시스템적 느낌을 강조 직선적 요소를 많이 사용 컨텐츠 영역을 제외한 영역은 비교적 낮은 채도를 적용 전반적으로 침착하고, 차분한 느낌  업무화면에 시선이 집중되기 쉬움 컨셉 “편안하고 효율적인” 시스템 Layout 업무 영역을 최대한 확보한 ‘ㅁ’자 구조 1024*768 해상도 표준 컬러 하나은행 아이덴티티 컬러 적용 은은한 저채도 색상군 적용 자극적 색채 지양 폰트 가독성 높은 윤고딕, 돋움체 사용 컨텐츠 영역 최소폰트 사이즈 12px이상 시안 2 웹 사이트적 느낌을 강조 곡선적 요소를 많이 사용 전체적으로 밝은 색상과 채도를 사용 전반적으로 온화하고, 부드러운 느낌  밝고, 활기찬 기분으로 대고객 서비스에 기여여

24 End of Document

25 별첨 1. 디자인 시안 시안 1 Main

26 별첨 1. 디자인 시안 시안 2 Main

27 별첨 1. 디자인 시안 시안 1 Sub

28 별첨 1. 디자인 시안 시안 2 Sub

29 별첨 1. 디자인 시안 시안 1 개인화 영역

30 별첨 1. 디자인 시안 시안 2 개인화 영역

31 별첨 2. 타행 사례 화면 신한은행

32 별첨 2. 타행 사례 화면 시티은행

33 별첨 2. 타행 사례 화면 상호저축 은행