Ui design

UI 설계 종합 가이드

UI 시스템의 필수 기능

• prompt와 검증기능
• 결함처리 메시지처리
• 도움말기능

UI 설계 원칙

UI는 사용자 인터페이스로서, 사용자 입장에서 편리하게 사용할 수 있도록 설계되어야 합니다. 주요 원칙은 다음과 같습니다:

• 직관성: 사용자가 즉각적으로 이해하고 사용할 수 있어야 합니다
• 유효성: 목적을 정확하게 달성할 수 있어야 합니다
• 학습성: 누구나 쉽게 익힐 수 있어야 합니다
• 유연성: 사용자의 실수를 최소화하고 복구할 수 있어야 합니다

UI의 설계 지침

• 사용자 중심: 모든 설계의 기본 전제
• 사용자가 UI를 쉽게 사용할 수 있는 특성을 최우선으로 고려
• 모든 설계 지침은 사용자 중심을 기반으로 함

UI 설계 절차

1. 문제 정의
2. 사용자 모델링
   • 초급자
   • 중급자
   • 숙련자 그룹으로 분류
3. 작업 분석
   • 문제를 세분화하고 구체화
4. 컴퓨터 장치 및 기능 정의
   • 복사, 붙여넣기, 되돌리기 등의 기능 제공
5. 사용자 인터페이스 정의
   • 상호작용 장치(마우스, 키보드) 식별
   • 상태를 명확히 인식할 수 있도록 설계
6. 디자인 평가

UI 흐름 설계

UI 흐름 설계 프로세스

• 기능 식별
• 입력 요소 식별
• 유스케이스를 통한 UI 요구사항 식별
• UI 유스케이스 설계
• 기능 및 양식 확인: UI element 식별

UI 설계서 작성 프로세스

• UI 설계서 표지: 프로젝트명/시스템명 명확히 표기
• 개정이력: 1.0부터 시작하여 0.1씩 증가
• UI 요구사항 정의
• 사이트 맵: 전체 메뉴의 계층구조 표현
• 프로세스 정의
• 화면 설계

UI 화면 설계 기본 구성

• 윈도우: 독립적인 박스(Box) 형태
• 메뉴: 텍스트로 기능을 나열한 영역
• 아이콘: 작은 이미지로 표현
• 포인터: 정보 입력 위치 지정 (텍스트 커서, 마우스 커서)

유용성

유용성의 정의

• 목표를 얼마나 효과적으로 달성하는가를 측정
• 사용자가 생각하는 UI와 개발자가 개발하려는 UI의 차이가 적을수록 유용성이 높음

유용성이 줄어드는 원인

• 실행차
  • 실행 기능의 차이
  • 줄이는 방법: 불필요한 기능 제거, 적은 단계 수행, 의도한 행위 순서대로 실행
• 평가차
  • 실행 결과의 차이
  • 줄이는 방법: 즉각적이고 직접적인 변화 파악, 시스템 상태 이해, 사용자의 쉬운 파악

UI 상세 설계

UI 시나리오

• UI의 기능 구조, 대표 화면, 화면 간 상호작용 흐름을 문서화
• 문서 작성 → 디자인 → 구현 순으로 진행
• 개발자가 이를 바탕으로 개발 진행

작성 원칙

• 작동 방식을 한눈에 이해할 수 있도록 구성
• 일반적인 규칙 준수
• 순서, 분기, 조건, 루프를 명확히 명시
• 예외 상황 케이스와 상세 기능 시나리오 정의

UI 설계 도구

• 와이어프레임: 뼈대와 레이아웃 설계
• 목업: 실제 화면과 유사한 형태로 작업
• 스토리보드: 콘텐츠 설명과 이동 흐름 표현
• 프로토타입
• 유스케이스

사용자 경험 관련 개념

감성공학

• 사람의 감성을 UI 설계에 최대한 반영
• 인간이 추구하는 감성을 디자인으로 실현하는 공학적 접근
• 생체, 감각 등을 과학적으로 측정하여 HCI 설계에 반영 (예: 아이폰의 동작 감성)

HCI (Human Computer Interface)

• 인간과 시스템의 상호작용을 편리하고 안전하게 구현
• 사용자가 최적의 경험을 할 수 있도록 설계

UX (User Experience)

• 사용자가 느끼는 종합적인 경험
• 시스템과의 상호작용 과정에서의 만족감 중시
• UI가 편의성을 중시한다면, UX는 가치 있는 경험(만족감)을 중시

UX의 특징

• 주관성
• 정황성 (주변 환경에 따른 영향)
• 총체성 (개인의 심리적 요인)