[기초/이론] 인터랙션 디자인

이 글은 제로베이스 UIUX 강의를 참고하여 정리한 글입니다. 오타나, 잘못된 내용이 있으면 언제든지 알려주세요! 감사합니다.😊

 

인터페이스 디자인 - UI 컴포넌트와 레이아웃

User Interface Design = User Interaction Design

인터페이스: 사용자가 시스템을 통해 과업을 달성하기 위해 조작하는 영역

 

GUI의 탄생: 사용자의 언어

사용자가 눈으로 보고 이해하고 클릭할 수 있도록 그래픽으로 보여주는 것

 

UI component = GUI를 구성하는 요소

UI 디자이너: 각 UI 요소를 만듦

GUI 디자이너: 퍼블리셔, 스킨을 씌우는 일

 

Design system

• 각각 디자인이 크게 다르다면 사용자들이 어려워할 수 있음 그것을 방지하기 위한 가이드가 존재
• Apple Human Interface Guideline
• Google Material Design Guideline

만약 가이드라인에 벗어난 디자인을 하고 싶을 땐 가이드라인에서 어디까지 허용하는지 어겼을 경우에 오류가 없는지 꼼꼼하게 확인해야한다.

 

UI 레이아웃이란?

화면을 나누어서 각 영역의 기본 틀을 잡고 컴포넌트 구성을 하는 것

 

Column 레이아웃

화면을 몇 개로 나눌 것인가?

 

인터페이스 디자인 - 디자인 환경과 디자인 시스템

디자인 환경과 제약조건

디자인 환경이란 디자인이 반영된는 플랫폼의 특성을 말한다.

여기에는 디자인적 제약(표준)과 기술적 제약이 발생할 수 있으며 지속 가능한 디자인을 위해 반드시 고려되어야 한다.

• Design System
• Design Language
• Design Guideline

 

기술적 고려요소

아무리 좋은 아이디어라도 기술적으로 유지가 가능해야 할 수 있다.

• Implementation possivility
• Maintenance
• Usability

 

하드웨어 조건

스마트폰, 노트북, 태블릿, 워치 등

 

Responsive design vs Adaptive design

사용자가 더 편하게 사용할 수 있도록 Adaptive 디자인을 사용하는 경우도 많다.

 

디자인 시스템이란

디자인 언어 Design language를 실제 디자인에 반영하기 위한 표준 가이드라인 또는 라이브러리

 

디자인 시스템의 구성

• 디자인 컨셉 Concept
• 원칙 Principles
• 색상 Color (브랜드 컬러)
• 아이콘 Icon
• 폰트 Font
• 레이아웃 Layout
• 컴포넌트 Components

 

인터페이스 디자인 - 프로세스와 요구사항 정의

인터페이스 디자인을 시작하기 위해 필요한 것

 

요구사항 정의 Requirement definition

→ 요구사항을 관리하기가 힘들 수 있으므로 요구사항 ID로 디자인 아이템을 관리한다. (JIRA)

 

우선순위 정의

1. 아이디어 도출하기: “어떻게 사용자를 만족시킬까”
2. 아이디어 평가하기: “어떤 아이디어가 좋은 아이디어일까”
3. 개발 우선순위 정하기: “어떤 기능부터 가장 빨리 사용자에게 제공해야 할까”

 

세부 디자인 기획

우선순위가 정해졌다면 아래 4가지가 명확하게 정의되어야 한다.

• 디자인 목표
• 디자인 범위
• 고려사항
• 기능

 

인터페이스 디자인 - UI 디자인

UI 흐름 정의

1. 기획에 따른 UI 흐름 작성
2. 기획에 따른 UI 플로우 작성
3. 범위 외 UI 플로우 생략
4. UI 플로우 업데이트
5. 리뷰
6. 리뷰 결과 반영

 

인터페이스 디자인 - UI 평가

UI 리뷰

사용자 테스트를 해봤을 때 상상도 못한 오류가 날 수도 있다. 생각보다 사용자는 다양한 방법으로 시도한다.

 

UI 리뷰를 할 때 아래 Usability가 잘 되어있는지 체크한다.

• 네비게이션 Navigation
• 친숙도 Familiarity
• 일관성 Consistency
• 에러 예방 Error Prevention
• 피드백 Feedback
• 시각적 명료성 Visual Clarity
• 유연성 Flexibility
• 효용성 Efficiency

 

예외 케이스 디자인

대다수의 사용자들을 벗어난 소수의 사용자들을 어떻게 케어할지 고민해봐야한다.

예) 파일 이름이 너무 길어서 다 보여줄 수 없다면 … 으로 함축 혹은 경고 팝업을 띄워줌, 로그인 문제