CODEDRAGON ㆍDevelopment/UI&UX
UI 상세 설계
· UI 시나리오 작성
· UI 시나리오 작성 규칙
· UI 시나리오 작성시 고려 사항
UI 시나리오 작성
· UI 상세 설계의 첫 단계는 시나리오 문서의 작성이다. 전체 기능을 한 번에 확인하고 이해할 수 있도록 기능 구조를 만들게 되는데, 보편적으로 계층 구조 또는 플로차트 형태로 작성하게 된다.
· 모든 기능에 대해서 공통적으로 적용되는 UI 요소와 사용자와의 상호 작용에 대한 일반적인 규칙을 정의한다.
· 사용자와 화면과 화면의 상호 작용에 대한 흐름과 순서(Sequence), 분기(Branch), 조건(Condition), 루프(Loop) 등을 명시한다.
· UI에 대한 일반 규칙을 준수하고 각 기능의 상세 시나리오를 작성한다.
UI 시나리오 작성 규칙
UI 시나리오 작성을 위한 일반적인 규칙
작성 규칙 |
설명 |
주요 버튼의 위치와 기능 |
화면에서 공통으로 배치되는 주요 버튼들의 위치와 기능을 설명하는 것으로 화면들에 대한 일관성을 보장한다. |
공통 UI 요소 |
다양한 형태의 입력 폼(일반 버튼, 체크 박스, 라디오 버튼, 텍스트 입력, 탭 등)과 각 UI 요소들에 대해 언제 사용되는지, 어떤 형태를 갖는지를 정의하며 사용자의 조작에 대해 어떻게 반응하는지를 설명한다. |
기본 레이아웃 |
여러 화면에 공통적으로 나타나는 제목, 버튼들, 인디케이터 등의 위치와 속성을 설명한다. |
기본 상호 작용 규칙 |
공통적으로 사용되는 조작 방법과 실행, 이전, 다음 등과 같은 화면 전환효과 등에 대해 설명한다. |
공통 단위의 테스크 흐름 |
대다수의 기능에 공통적으로 사용되는 삭제, 검색 등에 대한 반응 흐름을 설명한다. |
UI 시나리오 작성시 고려 사항
고려사항 |
설명 |
완전성 (Complete) |
누락되는 것이 없도록 최대한 상세하게 기술해야 하며 해당 시스템보다는 사용자의 사용 방법에 기초하여 작성해야 한다. |
일관성 (Consistent) |
전체 화면과 UI 요소들은 일관성을 갖고 있어야 한다. |
가독성 (Readable) |
표준화된 템플릿 등을 활용하여 작업자 간에 문서 통한 소통이 원활하여야 하며 문서를 쉽게 읽을 수 있어야 한다. |
이해성(Understandable) |
추상적이거나 보편적으로 사용하지 않고 이해하기 어려운 용어의 사용은 피한다. |
수정 용이성 (Modifiable) |
수정이나 개선 사항에 대해서 시나리오에 반영하는 것이 쉬워야 한다. |
추적 용이성 (Traceable) |
변경 사항에 대해서 언제, 어떤 부분이 어떤 이유로 변경 되었는지에 대해 쉽게 추적할 수 있어야 한다. |
'Development > UI&UX' 카테고리의 다른 글
인터페이스 (Interface) - 그래픽 사용자 인터페이스 (Graphical User Interface), UI 디자인 (Usdr Interface Design), UX 디자인 (User Experinece Design) (0) | 2017.05.18 |
---|---|
사용성 테스트(Usability Test) (0) | 2017.05.12 |
FreeQration(프리큐레이션) - 사진, 벡터 및 일러스트 이미지를 무료로 다운로드 받을 수 있는 사이트 (0) | 2017.04.29 |
Adobe의 오픈 소스 한중일 서체 Source Han Serif (0) | 2017.04.04 |
Art of the Menu – 세계의 메뉴 디자인 공유 사이트 (0) | 2017.03.17 |