모바일 UI설계를 위한 디자인 가이드라인 연구

모바일 뱅킹 UI설계를 위한 디자인 가이드라인 연구
서경대학교 대학원 디자인학과 비주얼 콘텐츠디자인전공 최샘_2010_02

모바일 서비스를 디자인 할 때 명심해야 할 경험적 법칙

실용성을 강조하여야 한다.
- 서비스가 사용자를 위해 무엇을 제공하며 사용자의 필요를 얼마나 채워주는가

사용자 환경에 적합하도록 하여야 한다.
- 사용환경에 대한 충분한 연구와 요구조건에서 환경 적합성을 포함하는 적절한 품질 검증 방법

개발환경과 조율하도록 한다.
- 구성 요소들간에 존재하는 시너지를 명확히 하고, 그것을 이해하고 활용하는 것

이동성의 특성을 활용하여야 한다.
- 시간, 장소, 이동성의 자유, 실시간 정보, 독특한 사용환경, 위치정보, 유비쿼터스 컴퓨팅의 특징


모바일 UI의 특징
- 동일한 UI의 개념에서 환경적인 부분이 모바일이라는 곳에 적합하게 구현되는 것

화면이 작아 한번에 보여줄 수 있는 정보의 양에 제약이 많다.

제한된 핫키로 입력 및 네비게이션을 해야 한다.

Memory Size가 매우 작으므로 그래픽 이미지를 최적화시켜야 한다.

사용자 정항(context)를 고려해야 한다.(한손조작, 태양빛과 디스플레이의 특성)

모바일 UI 사용성 평가
명확성, 일관성과 피드백, 조형성 및 사용성_가트너(gartner)_2007
실용성, 사용자 환경, 개발환경, 이동성의 특성_미카 힐 뚜넨(모바일 사용자경험 디자인)
인지와 피드백, 단순성과 조형성, 일관성과 표준화, 효율성과 융통성, 사용자 제어와 에러관리_이자경_2005
용이성, 능률성, 사용자에 대한 기억, 실수의 빈도 및 심각성, 개인의 만족_팀인터페이스_2002

본 연구에 적합한 평가 요인
사용성_사용의 용이함
표준화_일관성 잇는 콘텐츠 구성 및 표현
피드백_사용자와 커뮤니케이션
조형성_개인의 만족(심미성, 가시성)

인터페이스 구성 요소
정보설계분야
콘텐츠의 정보구조, 조작단계 및 방법, 네비게이션
표현설계분야
레이아웃, 레이블링, 타이포그래피, 버튼, 아이콘, 컬러

모바일뱅킹 인터페이스 분석 방법
제 1금융권의 8개 금융기관을 대상
9가지의 인터페이스 구성요소를 분석
비율, 빈도 분석

모바일뱅킹 인터페이스 종합 결론

콘텐츠 정보구조
- 자주 사용하는 콘텐츠를 시선이 먼저 닿는 순서대로 배열

조작순서
- 기술력에 따른 조작순서의 차이

네비게이션
- 최종 층으로 이동하는 경로가 번거로워 종료 후 재접속을 유도
- 조작단계가 10단계가 넘어갈 경우 사용자의 현재위치에 대한 피드백 필요

레이아웃
- 자주 이용하는 서비스 영역을 가시성 높게 배치할 필요성이 있다.

레이블링
- 금융관련 전문용어의 사용으로 그 의미 또는 기능을 이해하기 어렵다.
- 같은 의미지만 다른 명칭으로 사용자에게 부정적 전이를 초래
- 은행업무 관련용어의 표준화 필요

버튼
- 자주 사용하는 기능인 이전, 확인, 취소 버튼의 위치 및 용어가 각 금융기관마다 다르다
- 통합된 버튼의 위치와 기능의 표준화 필요

타이포그래피
- 자획에 세리프가 잇는 서체는 가독성이 떨어지며 모든 금융기관에서 사용하지 않는다.

아이콘
- 아이콘 오브젝트를 3차원 그래픽으로 표현

컬러
- 브랜드 아이덴티티를 살려 컬러배색을 하는 것이 사용자에게 친숙하게 다가갈 수 있다.


모바일뱅킹 디자인 가이드라인 제안

콘텐츠 정보구조
- 콘텐츠 선택 빈도에 따라 사용횟수가 높은 콘텐츠는 우선적으로 배치한다.
- 부가적인 서비스는 필요이상의 노출을 하지 않는다.
- 콘텐츠의 배치는 단순하고 일관성이 있어야 한다.

조작순서
- 조작 시 적당한 내용의 피드백이 있어 사용자의 이해를 도와야 한다.
- 잘못된 입력에 대처하기 위하여 모든 조작을 취소가 가능하게 한다.
- 불필요한 피드백으로 사용시간을 연장하거나 입력단계에서 모호한 피드백으로
- 사용자에게 혼란을 주지 않는다.

네비게이션
- 이동을 최소화하여 가장 간단하고 짧은 경로를 만들어야 한다.
- 최종층으로 바로 가는 경로를 항상 제시한다.
- 되돌리기 기능을 최대한 제공하고 취소 불가능한 경우에는 
- 명령을 실행하기 전에 나타날 결과를 확인 시킨다.

레이아웃
- 레이아웃은 상단에서 하단까지 시선을 이동할 수 있도록 구성한다.
- 동일한 기능을 적절히 그룹화한다.
- 포인터나 커서를 식별하기 쉽게 할 수 있도록 크기나 모양 및 색 등의 환경을 설정할 수 있도록 한다.
- 정보가 규칙적으로 배치되어 있어야 한다.

레이블링
- 콘텐츠의 정보와 레이블링 일치해야 한다.
- 레이블링의 뜻이 어렵거나 이질적인 것을 사용하지 않도록 한다.

버튼
- 버튼은 역할에 따라 모양과 크기를 조절한다.
- 의도하지 않는 입력이 이루어질 수 있으므로, 버튼의 크기를 일정크기 이상으로 하고 
- 버튼사이의 간격을 충분히 확보하여야 한다.
- 주요한 버튼들은 인식하기 쉽고, 누르기 쉽도록 설계한다.

아이콘
- 오브젝트의 형태에서 의도한 기능을 연상할 수 있어야 한다.
- 관련 서비스를 연상시킬 수 잇는 명확한 콘텐츠 레이블을 제시하여야 한다.
- 전체적인 컬로톤의 통일이 이루어져야 한다.

컬러
- 입력화면 표시는 식별이 쉬운 색이나 크고, 굵은 글씨로 표시한다.
- 은행 고유의 브랜드 아이덴티티를 나타내는 컬러를 메인컬러로 설정하여 통일감을 준다.
- 텍스트나 그래픽이 바탕화면과의 색상대비가 충분히 이루어지도록 한다.

타이포그래피
- 크기: 휴대폰의 해상도에 따라 10~25pt
- 서체: 헤드라인_고딕체, 본문_굴림체, 버튼_고딕체
- 텍스트양: 헤드라인_7음절 내외, 본문_한 화면에 4줄, 버튼 2음절 내외

본 논문에서 제시한 가이드라인은 다른 모바일 서비스에도 적용가능한 것으로 보임
모바일뱅킹에 특화된 일부 요소 제외

의견 0 자료등록      목록