Ch6_02 UI 설계

1. UI 흐름 설계

 

1. UI 설계서 구성

  A. UI 설계서 표지

  B. UI 설계서 개정 이력

  C. UI 요구사항 정의

  D. 시스템 구조

  E. 사이트 맵

  F. 프로세스 정의

  G. 화면 설계

 

2. UI 설계 원리

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

    i. 사용 의도 파악

    ii. 행위 순서 규정

    iii. 행위의 순서대로 실행

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

    i. 수행한 키 조작 결과를 사용자가 빠르게 지각하도록 유도

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

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

 

3. UI 흐름 설계 수행 절차

  A. UI 설계안의 적정성 확인

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

      1. 사용 의도 파악

      2. 행위 순서 규정

      3. 행위의 순서대로 실행

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

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

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

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

  B. 화면과 폼의 흐름 설계

    i. 화면에 표현되어야 할 기능 및 비기능적 요구사항 검토

    ii. 화면의 입력 요소 및 유스케이스를 통한 UI 요구사항 확인

  C. 유스케이스 설계

    i. UI 요구사항을 바탕으로 액터별 시나리오 구상

    ii. UI 요구사항을 바탕으로 액터 세분화

    iii. UI 유스케이스 설계

  D. 기능 및 양식 확인

    i. 인풋 박스 확인, 규칙 정의

    ii. 콤보 박스 확인, 규칙 정의

    iii. 라디오 박스 확인, 규칙 정의

    iv. 체크 박스 확인, 규칙 정의

 

2. UI 상세설계

 

1. UI 상세설계 프로세스

  A. UI 요구사항 최종 확인

  B. UI 구조 설계

  C. 사용자 기반 메뉴 구조 설계

  D. 화면 설계

  E. 하위 시스템 단위의 내외부 상세 화면과 폼 설계

 

2. UI 검토 및 보완

  A. Ui 검토 수행

  B. UI 검토 보완

  C. 사용성 검토 및 검증 수행

 

3. UI 설계 도구

 

1. UI 설계 도구의 개념 : 사용자와 시스템 사이에 의사소통할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI 설계를 지원하는 도구

 

2. UI 개발 단계별 활용 가능한 설계 도구

  A. 분석

  B. 설계

  C. 구현

 

3. UI 설계 도구의 유형

  A. 화면 설계 도구

    i. 파워 목업 : 파워포인트에 목업 기능

    ii. 발사믹 목업 : 스케치한 느낌으로 빠르고 심플하게 서비스 콘셉트 전달

    iii. 카카오 오븐 : 카카오에서 제작, 직관적 인터페이스

  B. 프로토타이핑 도구

    i. UX핀 : 웹 브라우저를 통해 와이어 프레임과 프로토타이핑 작업을 동시에 할 수 있는 도구

    ii. 액슈어 : UI설계보다는 스토리보드에 포함되는 정책, 플로차트, 디스크립션까지 모두 작성 가능한 도구

    iii. 네이버 프로토나우 : 네이버에서 만듬

  C. UI 디자인 도구

    i. 스케치 : 다양한 목업 & 템플릿을 활용한 레이아웃 중심의 UI 디자인 설계 지원 도구

    ii. 어도비 익스피리언스 디자인 CC

  D. UI 디자인 산출물로 작업하는 프로토타이핑 도구

    i. 인비전

    ii. 픽사에이트

    iii. 프레이머