UI 기본 개념
1. 사용 용이성
- 최우선 품질 속성
- 제품의 차별화 요소
2. 심리학, 인간공학, 사회학 등 여러 분야의 지식과 관련
- 인간 컴퓨터 상호작용 (HCI)
- 인터렉션 디자인
- 사용자 경험 (UX)
- 인간공학
3. 사용자와의 상호작용과 관련된 설계
- 상호작용 요소와 워크플로우를 변경하기 어려움 -> 초기에 확정해야 함
- 사용자와 시스템 간의 정보를 교환하고 조정하는 수단 (중요)
=> UI는 사용자와 SW의 인터렉션(상호작용)이라는 측면에서, 개발자가 이해하고 신경 써야 하는 분야
사용성
- 시스템이 얼마나 사용하기 편한지를 나타내는 척도
- 인간과 컴퓨터의 상호작용을 개선하기 위한 방법/기술
사용성에 영향을 주는 요소
- 학습용이성: 배우기 쉽도록 하는 성향
- 효율성
- 기억용이성: 내가 하는 것에 어느 정도로 영향을 주는가
- 낮은 오류율
- 자신감과 만족
우선순위로는 즐거움 > 사용하기 쉬움 > 효과적(ex. x 버튼 누를 시 창 닫힘 -> 이걸 활용하면 효과적인 UI 생성 가능)
멘탈 모델
- 현실 세계의 사물이나 과정이 어떻게 작동하는지에 대한 개인의 이해
ex. GUI는 사무실 책상 위(Desktop)를 연상시킴, PDF 보관 파일의 디자인은 책장 모양을 연상시킴
- 시스템과의 상호작용, 다른 컴퓨터 프로그램에 대한 사용 경험 및 응용 분야에 대한 지식으로 구성
피드백
- 명령에 대한 진행 상황과 입력 내용의 해석이 궁금한 사용자
- 피드백은 사용자 지시에 대한 효과를 보여 줌
- 회전 필: 1-10초 걸리는 작업 (로딩 중인 동그라미 점선 빙글빙글)
- 진행 표시기: 10초 이상 걸리는 작업 - 작업이 진행 중임을 확인시켜 주는 표시가 필요함 ex. 진행 로드 바
이런 것들을 사용하여 시스템이 현재 어떤 상태인지 표현 -> 현재 상황을 피드백 해 줄 수 있음
제약
- 사용자들은 소프트웨어를 사용하기 위해 메뉴얼을 읽기 싫어함
- 일반적인 사용자는 선택에 익숙치 않음 (ex. p. 10)
UI 설계 원리
1. 단순하고 자연스럽게 만들어라
- UI의 모든 요소는 사용자가 이를 사용할 것인지 말 것인지 판단해야 하는 부담을 줌 -> 그러므로 최대한 단순하게 만들어야 UI를 잘못 해석하는 것을 방지할 수 있음
2. 안전한 사용과 오류 회복이 쉽게 하라
- 사용자가 새로운 시스템 탐색 시, 오류가 많을 수 있음 (특히 사용자가 하는 실수가 잦음) -> 이때는 프로그램이 오류를 허용하고, 다시 돌이킬 수 있도록 지원해야 함
3. 직접 조작하고 바로 피드백 받게 하라 (단계적 피드백)
- 명령어 UI보다는 화면 아이콘 등 개체 직접 조작이 쉬움
- 개체 조작 시 반응을 바로 보이게 하면, 사용자가 작업 중인 대상을 제어한다고 느낄 수 있음
4. 일관성을 유지하라
- 플랫폼 내에서 일관성을 가져야, 한 소프트웨어에서의 경험을 다른 소프트웨어로 쉽게 옮겨갈 수 있음
- 지원하는 운영체제의 UI 디자인 지침을 지키는 것을 권장함 - ex. 웹 브라우저 UI 권장 지침 확인 등
5. 즉각적으로 만족시켜라
ex. 게임의 경우, 즉각적인 반응(피드백)이 나옴으로써 사용자를 만족시킬 수 있음
- 소프트웨어 사용 후, 처음 몇 초 안에 어느 정도 성공이 돼야 함
- 즉각적인 만족으로 사용자에게 신뢰감을 주어야 함
6. 단축 명령을 제공하라
- 초보부터 전문가까지 다양한 사용자 수용 시, 단축 명령을 제공함
- 전문가는 효율적으로 작업하는 데에 관심 있음
- 반대로, 전문가를 위한 UI로 변경 시 초보 사용자에게는 부정적 영향이 있을 수 있음
7. 인식하기 쉽게 만들라
ex. 각 버튼이 무슨 역할을 하는지 알기 쉽게 - x 버튼은 창 닫기 등
- 인식 비용은 UI 사용의 장벽이 될 수 있음
- 사용자가 메뉴얼을 잘 읽지 않는다는 것을 기억하고 UI를 설계해야 함
8. 공간 기억을 활용하라
- 같은 UI 요소를 같은 위치에 있게 하면 기억하기 쉬움
- UI 요소와 메뉴 옵션의 재정렬을 가급적 지양해야 함
- 기억을 강요하기보다는 정보를 인식하게 하는 것이 더 나은 방식임
9. 접근성이 좋게 하라
- UI 접근을 좋게 하면 시스템의 사용자 경험을 풍요롭게 할 수 있음
- 비디오에 대한 이미지 캡션, 추가 텍스트 등
- 장애인의 접근성을 높이기 위한 방법도 고민할 수 있음
10. 도움말과 문서는 최후의 수단
- 설명서가 필요 없는 UI를 만들기 위해 노력해야 함
- 도움말은 작업 지향적이고, 검색이 가능해야 하며, 색인이 제공돼야 함
요약
1. 최대한 간단하게 만들기
2. OS에 따라 표준화를 지향하기
UI 설계 과정
1. 사용자 분석
2. UI task 분석
3. UI 설계와 구현
4. 사용성 테스트
1.
...
위 과정을 계속 반복함
1. 사용자 분석
우리는 문맥 다이어그램 때부터 사용자 분석을 계속해서 진행 중이었음
- 사용자의 지식 및 역량 수준에 따라 디자인 사항 변경 가능
- 사용자 유형의 예: 청소년, 숙련된 사용자(단축키 제공 등), 초보자(영역별 상세 설명 필요)
- 사용자 유형에 대한 질문: 사용자의 목표는 무엇인가? 사용 스킬과 경험은 어떻게 되는가?
2. task 분석
소프트웨어가 수행할 작업을 분석해야 함
- use case별로 UI 흐름을 파악하는 것이 중요함
- 하위 작업 간의 정보 흐름에 따라 소프트웨어의 GUI 내용 흐름이 결정됨
image ppt p. 20 참조
3. UI 설계와 구현
CUI를 디자인하고 코드에 구현함
설계와 구현에 사용되는 개념
- 마법사: 미리 저장된 순서로 사용자를 안내함 ex. 프로그램 설치 시 다음 -> 다음 -> 다음 -> ...
- 사이트 이동 경로: breadcrumbs
- 메타포: 사용자의 개념적 인식 모델 ex. 옆 두 이미지(p. 21)처럼 직관적인 디자인을 제공
4. 사용성 테스트
1. 테스트 목적 설정 - 학습성, 오류율, 예측성
2. 대표 사용자 선정 - 하나의 테스트 시 5명 이상의 사용자로 테스트 진행하는 게 좋음
3. 설문 준비 및 테스트
- 테스트 대상 준비
- 사전/사후 테스트 설문지 및 작업 시나리오 정의
- 참가자에게 수행 요청
- 사용성 테스트를 수행하고 데이터를 기록
UI 요소
- UI는 시스템과 상호작용하기 위한 그래픽 요소를 제공함
- 그래픽 UI 요소를 사용하여 소프트웨어를 해석하고 사용함
- 명령어보다는 그래픽 요소를 더 많이 사용함
윈도우: 응용 프로그램 내용이 표시되는 영역
탭: 응용 프로그램이 여러 인스턴스를 실행할 수 있는 경우, 별도의 창으로 화면에 나타내기 위해 사용하는 것
명령 버튼: 사용자의 명령을 지시받으려 할 때 사용
다이얼로그 박스: 시스템이 수행할 작업에 대한 정보를 사용자에게 입력
메뉴: 표준 명령의 배열
아이콘: 명령을 나타내는 작은 그림
커서: 포인터
리스트박스: 사용자가 선택할 수 있는 후보 리스트를 보여 줌
드롭다운 리스트 박스: 현재의 선택을 보여 주고, 사용자가 화살표를 클릭하면 가능한 후보들을 펼쳐서 보여 줌
텍스트 박스: 메시지를 보여 주거나, 사용자가 데이터를 입력
토글 버튼: 버튼 클릭하면 on 또는 off로 변환
체크박스: 그룹 중 하나 이상의 후보 선택 시 or 다른 항목과 관련 없이 선택/거부를 표시하는 on&off 스위치
라디오 버튼: 여러가지 게시된 것 중 하나만을 선택할 때 사용 / 여러개의 선택 항목 중 하나의 선택만 가능한 경우
화면 설계 (입출력 설계)
입력 설계
쉽게 배울 수 있고 사용할 수 있는 자료 입력 화면 가이드라인
- 자료가 입력되는 화면 위치에 커서를 위치시키고, 자료가 양식에 입력된 후에만 커서를 옮기게 함
- 항목의 입력이 끝났음을 알리기 위한 키를 반드시 정해야 함
- 숫자 입력에서 0으로 시작하는 수, 소수점 아랫자리, 기본값을 고민해야 함
- 콤보 박스를 사용해 입력하게 하면 입력 오류를 줄일 수 있음
- 입력 중단과 취소를 할 수 있도록 함
- 저장 전에 입력한 내용을 확인하도록 함
입력 양식: 처리할 자료를 요청하고 모으는 데 사용하는 양식 (p. 31)
출력 설계
출력물은 다양한 종류가 있으며, 다양한 기술이 사용됨
출력물의 대부분은 인쇄된 리포트임
- 리포트는 매력적이고 전문적이어야 하며, 읽기 쉬워야 함
- 모든 리포트는 머릿말과 꼬리말이 있어야 함
- 머릿말: 제목, 날짜 등의 필요한 정보 포함
- 꼬리말: 숫자 필드의 총합 - 리포트 끝에 나와야 할 쪽수 등의 정보 포함
- 항목은 논리적인 순서로 디스플레이하고 그룹핑 되어야 함 ex. 점포나 직원 성명을 가나다 순으로 정렬하여 표시
출력물 설계: 출력물은 대부분 인쇄된 리포트임
UI 프로토타이핑
분류
Low-fidelity(Lo-fi) prototyping (이번 과제)
- 비교적 간단한 형태로 UI를 표현하는 프로토타이핑임. 주로 종이에 UI를 스케치하고, 어덯게 해당 UI들을 연동할 수 있는지를 논의하여 진행함.
- 포스트잇, 비지오, 마이크로소프트 파워포인트 등을 활용 가능
High-gidelity(Ho-fi) prototyping
- 정해진 시나리오에 따라 실제 동작하는 UI 구현을 통해 마우스 클릭, 키보드 입력 등의 인터렉션에 대한 사용자 반응을 확인할 수 있는 디지털 프로토타이핑
사용자 프로토타이핑 절차
1. 요구사항 분석 - 사용자 목표와 시나리오 정의
2. UI 흐름 설계 - 화면 전환과 사용자 여정을 매핑 (시퀀스 다이어그램과 관련 있음)
3. 저충실도 프로토타입 제작 - 종이 스케치와 디지털 와이어프레임 만들기 (과제로 수행하였음)
4. 인터랙티브 프로토타입 개발 - 클릭 가능한 프로토타입 개발하기
5. 사용자 테스트 및 반복 - 사용자 피드백을 수집하고 디자인 개선하기
6. 개발로 전달 - 개발 팀에 문서화된 프로토타입 제공하기