[UX기초1] Chapter 6. 인터랙션 디자인 / 2022.11.05

오늘 공부

약 4시간

• 강의)Figma 3-1,3-2
• 강의)UX기초1 Chapter6. 인터랙션디자인 (1~5)
• 학습일지 작성

 

오늘은 데이트를 하는 날이니까.. 평소보다 적게 했다! 벤치마킹 인프라 구축에 대해서 멘토님이 더 자세하게 얘기해주셨는데, 내가 뭘 하고 싶은지 더 고민을 해봐야할 것 같다. 어렵다!!! 새벽을 달리자 화이팅~~

 

 

 

 

Chapter 6. 인터랙션 디자인 - 인터페이스 디자인

 

 

1. UI 컴포넌트와 레이아웃

 

인터페이스 디자인이란?

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

(User Interface Design = = User Interaction Design)

 

◎시스템에게 말을 걸기 위한 상호간 이해 언어.
* DOS, GUI 
커맨드를 타이핑해서 입력해야 했기에 전문가 아니면 사용하기 어려움
→사용자가 눈으로 보고 이해하고 액션으로 명령할 수 있게 함 (GUI, graphical user interface)

 

UI component의 이해

 

UI component = GUI 구성요소

하나의 화면에 여러 컴포넌트들이 구성된다.

컴포넌트이름을 잘 알고 확장이 얼마나될 수 있는지 알기! (일을 하게될 때 이름으로 많이 대화가 오간다.)

* UI디자이너 = UI 컴포넌트를만든다. 어디에 배치해서 어떤걸 보여준다 등을 설계
GUI = 그래피컬한 일에 더 치중  

Design system (디자인 가이드라인)

우리회사제품을 디자인할 땐 이런 기준에 따라야한다는 Guideline.  
한명의 사용자가 수백명이 만든 걸 사용하기 때문에 통일이 필요하기 때문에.

1)Google Material Design Guideline

컴포넌트,리소스 등을 제공하고 있다.

이 컴포넌트는 어떤 구조고 세부적인 것은 뭐가 있는지. (햄버거, 플로팅(항상 떠있는) 등)  
ex) 사용자 프로필을 앱바에 넣고 싶을 때 되는지 안되는지 가이드라인을 보고 판단한다.

어느경우가 된다 안된다에 대해 컴포넌트별로 상세히 설명해주고 있음
ex) 여러개를 동시에 선택하는 경우 Switch가 아니라 Check box를 사용해라! 
* 둘다 가능하다 생각할 경우, 이걸 써도 문제 없는데? 모양도 이게 더 친숙할 것 같고.. 하는 경우가 있기도 함.

시도해 볼 순 있으나 큰 플랫폼에 들어가는 앱의 경우 심의기준에 반드시 써야한다 있었다면 걸림

 

프로그레스바
1. 끝을 알고있는 시스템 / 2. 언제끝날지 모르지만 동작중이야

 

 

예시) 콤보박스 업데이트 과정

기본콤보까지 기본// + 선택하지 않아도 된다는 옵션을 추가 > 사용자가 대부분 A를 선택하도록 강조하자는 업체의 요구사항(nudge)을 반영하여 A를 상단에 위치시킴 > 옵션 옆 ?버튼으로 자세한내용을 설명

이런 식으로 제공하는 컴포넌트에 살을 붙인다

 

 

 

UI 레이아웃

Responsive : 브라우저쓰다 오면 줄어든다. 네비게이션은 고정이다.. 등
Column : 화면을 몇개로 나눌것인가 정의하는것

 

 

 

구글레이아웃

배너는 3컬럼씩, 인기차트는 2컬럼씩 사용

 

 

 

 

2. 인터페이스 디자인: 디자인 환경과 디자인 시스템

 

디자인 환경

1. 디자인 환경이란?

디자인이 반영되는 플랫폼의 특성.

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

* 도시락을 어디서 먹는지, 데워먹을 상황인지 등 도시락먹는 사람의 상황에 따라 디자인을 달리해야하는 것처럼

 

2. 디자인 환경의 고려요소

Design system, Design language, Design guideline

 

브랜드의 이미지 고려

다른 형제서비스를 출시해서 진행을하는데 오른쪽처럼 디자인한다면? 잘만든 디자인이지만 배민 형제서비스라는걸 사용자가 알기 힘들다. 공들여 만들었는데 퀄리티와는 별개로 안맞아서 버려지는 상황이 될 수 있음

기술적 고려
아이디어는 아주 좋아서 나오기만 하면 시장을 쓸어버릴 수 있지만 기술적으로 가능한가를 고려해야 한다.
1. 구현이 가능한가, 2. 유지보수 가능한가(운영적입장에서 용이하게 꾸준히 업데이트될 수 있는가),  3. 사용성(사용자의 수준에 맞는가, 사용하기가 좋은가, 어려운가)

 

하드웨어 조건
어떤 화면에 올라가는가(웹?모바일?) , 인풋형태(터치,펜,마우스)

 

Adaptive & Responsive

Responsive : 가변적 형태. 형태는 같지만, 하드웨어에 따라 자동으로 리사이징되어 배치와 크기만 다르게 구성됨.  시간이 덜듬

Adaptive : 하드웨어마다 디자인을 따로 한다. 노력이 많이 들지만 전략적으로 하기 위해 채용. 앱에 최적화되어 사용성↑  

 

 

 

 

디자인 시스템

1. 디자인시스템이란?

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

2.  디자인시스템의 구성
- 컨셉

- 원칙
- 색상 : 브랜드 컬러, primary 컬러. 우리 브랜드의 아이덴티티를 나타낼 수 있는 최적화된 컬러.
- 아이콘 : ex.신뢰가 중요하다 - 정직,딱딱한 아이콘 / 소셜앱같은 스타일 -덜직관적일지라도 재미있는 아이콘
- 폰트
- 레이아웃

- 콤포넌트

** 요즘 스케치는 많이 안쓰는 추세. 장점이 많지만 치명적 문제점은 업데이트 할 때마다 인스톨 해야하고 디자인 파일이 커지면 무거워진다. (노트북 팬 돌아감) 피그마, XD 등 클라우드베이스를 쓰는 추세임.  

 

 

 

3. 프로세스와 요구사항 정의

 

인터페이스 디자인 프로세스

* 역순으로 개발필요한 시간을 잡고 디자인시간을 정하기도함
Scope - 하나를 통으로? 전면 업데이트?

Stakeholder - 이해관계자. PM PO 고객 등등 *UA디자이너(UX 텍스트 작성) - 우리나라 UX디자이너는 버튼이름도 다 하는데(나라마다 다름) 외국은 UA디자이너가 검증. 화면과 설명서 텍스트가 동일한지 등. 

Design sign off - 디자인 끝. 개발만 되면 됨. 끝난건 아니고 개발자들이 디자인과 다르게 개발하는 경우가 있으므로 체크해주는 일 필요. 다른 대안은 없을까요? 등 물어보면 대안 말해주고..

 

가장 중요한 부분은 Key features and IA, UI flow and wireframes

 

 

 

 

요구사항 정의

Version : 사용자가 쓰는 버전, Source: 인터뷰세션,

 

ID 중요! 요구사항이 한두개도 아니고 쌓여있는 경우가 있어서 문서화해서 관리하는게 좋다.

 

요구사항 정의의 중요성.

사용자가 원하는 것을 포지션에 따라 전혀 다르게 해석한다. 사용자도 자기가 원하는 걸 말로 잘 설명 못하기도 함.

 

 

 

 

우선순위 정의

급하게 원하는게 뭘지 파악. 가로세로축 넣고 배치해보는 것도 효과적이다.

노란색을 가장 먼저할 것 같은데 빨간게 먼저 올라감 . 표가 절대적이진 않으므로 여러 조건을 고려함

(만들기 어려움에도 불구하고 이런 이유때문에 위로 올리자~~)

 

세부 디자인 기획

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

 

1. 디자인 목표

주소록에 대표 사진을 추가하는 기능을 넣자. 이 기능을 통해 사용자는 무엇을 할 수 있는지.

2. 범위

주문하기에선 추가편집을 지원하지 않는다. 웹버전에선 지원하지 않고 나중에 할 예정

3. 기능 (Features)

사진추가,crop,삭제,여러사진등록,이미지선택 

4. 고려사항

HEIF포맷 지원여부, 5MB이상 파일 지원할 것인가, 자체편집툴을 제공할 것인가

 

 

 

4. UI 디자인

 

UI 흐름 정의

 

1) 기획에 따른 UI 흐름 작성 

2) 기획에 따른 UI 플로우 작성

실제 wire frame을 만들기 전에 플로우 먼저 작성하는게 좋다. 얼마나 걸릴지, 어떤 디자인을 해야하는지 미리 파악할 수 있기 때문. 

 

3) 범위 외 UI 플로우 생략

 

이번 업데이트 범위에는 포함되지 않는(변경되는 요소가 없는)부분 생략

 

4) UI 플로우 업데이트

5) 리뷰 (Stakeholders review)

실제로는 건너 뛸 때도 많다. 디자인하고 리뷰를 한다던가.

UI 플로우 단계에서 하는게 좋긴 함.

기본이미지 선택하는게 플로우에서 빠져 있다! (뭔가 빠졌는데요, 다른 위치에 추가되었는데요 등 피드백)

 

 

6) 리뷰 결과 반영

 

 

 

 

UI 디자인

 

디자인 시스템 사용하기

강의PPT참고)Figma를 쓴다 - Figma 키트 클릭 - 디자인키트 사용

* SAP Fiori for iOS 어떤플랫폼에 올라가나에 따라 알맞은 걸 선택해서 받을 수 있다

Libraries 

디자인가이드를 가지고 하면 편하고 안전한 디자인 할 수 있다. 근데 표준적인거라 식상할 순 있음. 대부분은 컨셉이나 아이덴티티에 맞게 가이드라인이 허용하는 범위 안에서 디자인함

 

화면을 그리는 일,, 

 

 

 

 

 

5. UI 평가

 

1. UI 리뷰

검증. 상상도 못한 일이 벌어지기도 함~  당연히 알겠지 했는데 모른다던지 등

 

 

 

 

 

*왼쪽: 에러의 이유 설명

어떤 톤앤매너로 사용할 것인가에 따라

소셜.캐주얼한 앱이라면 오른쪽이 더 좋겠지요. 신뢰도 높은 공공기관서비스 등이라면 왼쪽이 나음.

 

(강의자료참고)

* 모든 옵션 다 보여주기(BAD) / 좋은것만 + 옵션 더보기(GOOD)

* 이메일 양식이 틀려(@없음) 바로 빨갛게 표시(GOOD) / 이메일 양식이 틀렸지만 표시없음(BAD)

* 접근성측면. 읽기가 힘든 색상

* 사이즈가 너무 작고 빽빽하면 클릭이 힘듦 (극세사컨트롤해야함)

* BAD UX-너무 많이 보여줌. 다 중요하니까 다보여줌. 정보량이 많아 피곤함. GOOD UX-명료

*첨부파일을 붙인다고 썼는데 첨부파일을 안 넣으셨어요. 그대로 보내실래요?

*화면에 아이콘이 없는데 휴지통쓰니까 이상함 > ...

 

 

 

2. 예외 케이스 디자인

*EX) 포토샵 입장에서

포토샵을 아예 모르는 사람(을 위해 도움말 정보를 지금보다 더 줘야하나) / 아주 전문적인 유저(를 위해 그런 기능을 추가해야할까)

* 파일 이름이 너무 길어서 테이블에 다 안들어감. > ...에 툴팁 / 줄임없이 볼 수 있게하자 / 글자제한을 만들자

이제 없겠지 해도 계속 나오기도 함.