UI 설계하기

UI 흐름 설계

• UI 요구사항과 UI 표준 및 지침에 따라, 화면과 폼의 흐름을 설계하고, 제약사항을 화면과 폼 흐름 설계에 반영할 수 있다

1. UI 설계서 구성에 따른 작성 방법

UI 설계서 구성은 UI 설계서 표지, UI 설계서 개정 이력, UI 요구사항 정의, 시스템 구조, 사이트 맵, 프로세스 정의, 화면 설계 등으로 이루어진다.

• UI 설계서 표지

UI 설계서에 포함될 프로젝트 명 또는 시스템 명을 포함시킨다.

• UI 설계서 개정 이력

UI 설계서 처음 작성 시에는 첫 번째 항목으로 ‘초안 작성’을 포함시키고 그에 해당되는 초기 버전(version)을 1.0으로 설정한다. 변경 또는 보완이 충분히 이루어져 완성이 되었다고 판단할 경우 버전을 x.0 으로 바꾸어 설정한다

• UI 요구사항 정의

UI 요구사항들을 재확인하고 정리한다

• 시스템 구조

- UI 프로토타입을 재확인한다.

- UI 요구사항들과 UI 프로토타입에 기초해 UI 시스템 구조를 설계한다.

• 사이트 맵(Site Map)

- UI 시스템 구조의 내용을 사이트 맵의 형태로 작성한다.

- 사이트 맵 상세 내용(Site Map Detail)을 표 형태로 작성한다.

• 프로세스(Process) 정의

사용자 관점에서 요구되는 프로세스들을 진행되는 순서에 맞추어 정리한다.

• 화면 설계

UI 프로토타입과 UI 프로세서 정의를 참고해 각 페이지별로 필요한 화면을 설계한다.

-각 화면별로 구분되도록 각 화면별 고유 ID를 부여하고 별도의 표지 페이지를 작성한다.

-각 화면별로 필요한 화면 내용을 설계한다.

2. UI 화면 설계의 기본 구성 요소

• 윈도우(Window)
• 메뉴(Menu)
• 아이콘(Icon)
• 포인터(Pointer)

3. 유용성 개념 및 적용 원리 파악

• 유용성 개념

(1) 유용성

사용자가 시스템을 통해 원하는 목표를 얼마나 효과적으로 달성할 수 있는가에 대한 척도이다.

(2) 유용한 시스템을 설계할 때 고려사항

사용자가 시스템의 구조, 기능, 가치 등에 대해 가지고 있는 마음 속 모형인 사용자 모형과 시스템 설계자가 만들려고 하는 개발자 모형 사이의 차이를 최소화하려는 노력이 필요하다.

(3) 사용자 모형과 개발자 모형 간의 차이 발생

- 시스템에서의 실행 차, 즉 실행 가능한 기능과 사용자의 원래 목적이 서로 상이하기 때문에 발생한다.

- 평가 차, 즉 시스템의 실행 결과와 사용자의 원래 목적이 서로 상이하기 때문에 발생한다.

• 실행 차를 줄이기 위한 UI 설계 원리

(1) 사용 의도 파악

- 사용자의 원래 목적을 명확히 파악하여 불필요한 부가 기능 때문에 시스템 성능이 떨어지지 않도록 해야 한다.

- 사용자가 보다 관심을 가지는 항목을 눈에 띄는 위치에 배치하고 적절한 시점에 해당 기능이 제공되도록 하여야 한다.

(2) 행위 순서 규정

- 사용자 행위의 순서를 세분화시킨 뒤 순서대로 명확하게 제시하여 선택할 수 있도록 해야 하고 또한 의도에 따라 행위의 순서를 사용자가 임의로 변경 가능하도록해야 한다.

- 하나의 작업을 수행하기 위한 단계 수를 최소화시키고, 동일한 결과를 여러 가지 다른 방법으로도 달성 가능하도록 설계 시 고려해야 하며, 행위의 순서가 사용자의 기존 경험에 비추어 가능한 한 친숙하도록 설계해야 한다.

(3) 행위의 순서대로 실행

- 프로세스의 흐름을 UI를 통해 직관적으로 알 수 있게 제공함으로써 사용자가 의도한 행위의 순서를 실제 실행으로 옮기는 데 어려움을 최소화해야 한다.

- 과도한 상호 작용으로 인해 작업이 원활히 진행되지 못하는 상황이 발생되지 않도록 고려해야 한다

- 사용자가 의도한 행위와 가장 잘 어울리는 입력 장치를 선택하고, 사용자의 행위에 대해 적절한 피드백과 취소 기능을 제공해 주며, 디폴트 값을 적절하게 설정함으로써 불필요한 조작을 최소화하여 사용자가 의도한 행위를 효율적으로 실행할 수 있도록 설계해야 한다.

• 평가 차를 줄이기 위한 UI 설계 원리

(1) 수행한 키 조작의 결과를 사용자가 빠르게 지각하도록 유도

- 사용자가 수행한 행위에 대해 아무런 변화된 결과가 제공되지 않는다면 사용자는자신이 제대로 조작하였는지 의심하게 되므로, 이러한 평가 차가 발생하지 않도록설계해야 한다.

- 가능한 한 빠른 처리를 통해 즉각적으로 반응되도록 해야 하며, 즉각적인 반응이 힘들더라도 가능한 한 반응 속도를 높이도록 노력해야 한다. 또한 사용자가 수행한 행위로 인해 현재 시스템의 변화가 이루어졌음을 가능한 한 직관적으로 피드백해 주어야 한다.

(2) 키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록 유도

사용자가 수행한 행위로 인해 변화된 시스템의 상태를 사용자가 직관적으로 인지할 수 있도록 시스템을 설계해야 한다. 이를 위해 시스템의 상태 정보를 가능한 한 단순하게, 그리고 이해하기 쉽게 제시해야 한다.

(3) 사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악하도록 유도

사용자가 가진 원래 의도가 시스템을 통해 충족되었는지 또는 충족될 수 있는지를 사용자가 쉽게 파악할 수 있도록 설계해야 한다. 이를 위해 미리보기 기능처럼 예상 결과를 사전에 제시할 수 있다면 제공해 주는 것이 대부분의 경우 바람직하다.

4. 스토리보드 작성 기법

스토리보드는 디자이너와 개발자가 최종적으로 참고하는 산출 문서이며, 정책이나 프로세스 및 콘텐츠의 구성, 와이어프레임(UI, UX), 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분의 정보가 수록되어 있는 문서이다.

• 메뉴 구성도 만들기(스토리보드 1단계)

전체적인 메뉴 구성도이며, 어떤 것을 보여주고 결정된 사항을 표현하기 위한 메뉴의 순서와 구성 단계, 용어를 정의한다

• 스타일 확정(스토리보드 2단계)

레이아웃이나 글자 모양, 크기, 색상, 그래픽에서의 일관성을 유지해야 한다.

• 설계하기(스토리보드 3단계)

화면에 보여지는 시각적인 디자인 콘셉트를 잡는다.