2022. 12. 20. 22:46ㆍOthers/SE
●UI/UX
UI(User Interfaces, 사용자 인터페이스)
넓은 의미에서 사용자와 시스템 사이에서 의사소통을 할 수 있도록 고안된 물리적, 가상의 매개체.
좁은 의미로는 정보 기기나 소프트웨어의 화면 등에서 사람이 접하게 되는 화면
UI는 사용자와 시스템 간의 접점을 최적화해주는 활동
UX(User eXperience, 사용자 경험)
한 개인이 특정한 제품, 시스템, 또는 서비스를 사용하면서 느끼는 모든 것
시스템 사용에 대한 느낌과 생각에 대한 것이기 떄문에 주관적이고 정서적이며 동적인 측면을 가짐
●인터페이스 개념의 발전
CLI(Command Line Interface)
GUI(Graphical User Interface)
사람의 말과 행동으로 기기를 조작하는 NUI(Natural User Interface)
사물 인터넷(Internet of Things), 가상 현실(Virtual Reality), 증강 현실(Augmented Reality), 혼합 현식(Mixed Reality) 등의 발전과 함께 하드 웨어 분야를 중심으로 OUI(Organic User Interface)
유기적 상호작용의 개념은 특정 사용자각 큰 어려움 없이 편안하게 직관적으로 해당 시스템을 활용할 수 있도록 돕는 상호작용으로 이해할 수 있으며 유기적인 사용자 인터페이스는 이를 가능하게 하는 기반 기술
●UI 설계
사용자와의 상호작용 설계(상호작용 요소, 워크 플로우)
사용 용이성(제품의 차별화 요소)
심리학, 인간 공학, 사회학 등 여러 분야의 지식과 관련(인간 컴퓨터 상호작용 HCI, 인터랙션 디자인, 사용자 경험, 인간 공학)
●사용성
시스템이 얼마나 사용하기 편한지를 나타내는 척도
인간과 컴퓨터 상호 작용을 개선하기 위한 방법, 기술
사용성에 영향을 주는 요소(학습 용이성, 효율성, 기억 용이성, 낮은 오류율, 자신감과 만족)
●멘탈 모델(Mental Model)
현실 세계의 사물이나 과정이 어떻게 작동하는지에 대한 개인의 이해
시스템과의 상호 작용, 다른 컴퓨터 프로그램에 대한 사용 경험 및 응용 분야에 대한 지식으로 구성
●피드백(Feedback)
명령에 대한 진행 상황과 입력 내용의 해석이 궁금한 사용자에게 피드백 제공
피드백 : 사용자 지시에 대한 효과를 보여줌
반응 시간 표시
●UI 설계 제약사항
일반적인 사용자들은 소프트웨어를 사용하기 위해 매뉴얼을 읽기 싫어함
일반적인 사용자는 선택에 익숙하지 않음
사용자를 두렵게 하는 경고 메시지 사용 자제
●UI 설계 원리
단순하고 자연스럽게 만들라
안전한 사용과 오류 회복이 쉽게 하라
직접 조작하고 바로 피드백 받게 하라
일관성을 유지하라
즉각적으로 만족시켜라
단축 명령을 제공하라
인식하기 쉽게 만들라
공간 기억을 활용하라
접근성이 좋게 하라
도움말과 문서는 최후의 수단
●UI 설계 과정
●사용자 분석
사용자의 유형(청소년, 숙련된 사용자, 초보자)
사용자의 목표는? 사용 스킬과 경험은?
●태스크 분석
UI를 설계하려면 소프트웨어가 수행할 작업 분석 필요
유스케이스 별로 UI 흐름을 파악하는 것이 중요
하위 작업 간의 정보 흐름에 따라 소프트웨어의 GUI 내용 흐름이 결정
●UI 설계와 구현
GUI를 디자인하고 코드로 구현
마법사(Wizard) : 미리 저장된 순서로 사용자를 안내
사이트 이동경로(Breadcrumb Navigation) : 웹사이트나 애플리케이션에서 사용자의 위치를 표시하는 내비게이션
메타포(Metaphor) : 사용자의 개념적 인식 모델
●와이어 프레임
해당 콘텐츠들의 위치와 범위를 디바이스의 스크린으로 한정하여 구성하는 과정
전체적으로 화면의 레이아웃을 확인할 수 있으며 기본적인 인터랙션에 대한 이해를 바탕으로하여 콘텐츠 요소의 통일성, 용이성 검토
가능한 한 사용자에게 혼란을 주지 않고 쉽게사용이 가능하도록 질서나 규칙을정함
●화면 흐름도, 화면 명세
●사용성 테스트
테스트 목적 설정(학습성, 오류율, 예측성)
대표 사용자 선정(5명 이상의 사용자)
설문 준비 및 테스트
●UI 요소
윈도우 : 응용 프로그램 내용이 표시되는 영역
탭 : 응용 프로그램이 여러 인스턴스를 실행할 수 있는 경우 별도의 창으로
메뉴 : 표준 명령의 배열
아이콘 : 응용 프로그램을 나타내는 작은 그림
커서 : 포인터
명령 버튼 : 사용자의 명령을 지시 받으려 할 때 사용
다이얼로그 박스 : 시스템이 수행할 작업에 대한 정보를 사용자에게 입력하게 할 때
텍스트 박스 : 메시지를 보여주거나 사용자가 데이터를 입력할 곳
토글 버튼 : 버튼을 클릭하면 상태를 ‘on, off’로 변환
리스트 박스 : 사용자가 선택할 수 있는 후보 리스트를 디스플레이
드롭다운 리스트 박스 : 현재의 선택을 보여주고 사용자가 화살표를 클릭하면 가능한 선택 후보들을 펼쳐서 보여줌
라디오 버튼 : 여러 가지 제시된 것 중 하나만을 선택
체크 박스 : 그룹 중에 하나 이상의 후보를 선택
●화면 설계
쉽게 배울 수 있고 사용할 수 있는 자료 입력 화면 가이드 라인(항목의 입력이 끝났음을 알리기 위한 키를 반드시 정한다)
입력 양식 : 처리할 자료를 요청하고 모으는데 사용하는 양식
●출력물 설계
출력물의 대부분은 인쇄된 리포트(리포트는 읽기 쉬어야함)