[제로베이스]UIUX 디자인스쿨 3주차_01

Chapter 6. 인터렉션 디자인

 

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

인터페이스 디자인이란

UI(User Interface)와 시스템 사이의 접점으로 사용자가 시스템을 통해 과업을 달성하기 위해 조작하는 영역을 디자인

 

GUI(Graphical User Interface)의 탄생

일일이 타이핑해야 했던 커맨드라인을 액션으로 실행할 수 있는 언어

 

GUI(=UI component)를 구성하는 요소

Header title, Header container, Emphasized button, Narrow menu button, Body text, Image, Mid. Card, Carosel, LInk text 

 

UI 디자이너 화면에 어떤 컴포넌트를 넣어야 하는지 설계하는 사람

GUI 디자이너 Graphical한 업무, Front end 퍼블리셔

* 컴포넌트 이름과 그 확장성을 알고 있는 것이 UI 디자이너로서 중요하다.

 

디자인시스템 - 디자인 가이드 라인

사용자의 멘탈 모델이 프로덕트를 이용할 때 으레 있는 자리에 해당 기능이 없으면서 의문을 가지는데 이런 생각들은 불신을 만들 수 있다. 이런 것들을 방지하기 위한 것이 디자인시스템이다.

• Apple Human Interface Guideline
• Google Material Design Guideline

디자인 게이트-애플리케이션 디자인 심의 기준

애플리케이션을 디자인 할 때 퍼블리시된 가이드라인을 반드시 따를 필요는 없고, 가이드라인에서 하지 말라고 권장하는 부분과 서비스의 이미지, 회사 관계자들의 의견이 상충할 때는 새로운 것을 시도할 수는 있다. 하지만 애플리케이션을 릴리즈할 때 심의 기준에 맞지 않아서 문제가 생길 수 있으니 유의해야 한다. 

 

디자인시스템으로 기본적인 것들을 준수할 수는 있지만 예외적인 사항까지 커버할 수는 없기 때문에 그런 영역에서 창의성이 아주 중요하다. 

 

레이아웃

1. Define Layout

Height(+MinMaxHeight), Width(MinMaxHeight), Margin(Space between components), Navigation drawer, Body area attribute, Reponsive body

2. Deploy UI component

 

Column Layout(Colums gutters, and margins) 각각의 컴포넌트를 질서있게 배치할 수 있는 가이드라인 

 

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

디자인 환경과 제약조건

디자인 환경이란 디자인이 반영되는 플랫폼의 특성을 말한다. 디자인적 제약(표준)과 기술적 제약이 발생할 수 있다.
지속 가능한 디자인을 위해 반드시 고려되어야 한다. 

디자인 고려요소

Deign System, Design Language, Design Guideline

잘만든 디자인도 좋지만 브랜드만의 언어를 잘 표현하고 있는가가 중요하다. 디자인의 퀄리티와 별개로 브랜드의 아이덴티티를 잘 표현하지 못하는 디자인은 좋지 않다. 

화면의 작은 요소를 변경하더라도 전체 분위기를 바꿀 수 있기 때문에 내가 염두에 두어야 하는 디자인 시스템이 무엇인지 생각해봐야 한다.

기술적 고려요소(Implemenation possibility / Maintenance / Usability)

• 아주 좋은 아이디어라도 구현 가능성을 가장 먼저 생각해봐야 하고,
• 운영을 지속적으로 할 수 있는지 유지보수를 할 수 있는지 생각해봐야 한다.
• 시장에 있는 사용자들의 학습수준과 동떨어져있지는 않은지 고려해야 한다

하드웨어 조건 

• 우리의 애플리케이션이 어느 환경에서 이용되는가
• 인풋 스타일(워치, 모바일, 태블릿, PC에 따라 사용자들이 작동을 위해 사용하는 도구가 다르다.)

Responsive design vs Adaptive Design 

• 전자는 접속 디바이스에 상관없이 자동적으로 조정됨(비용 절감)
• 후자는 디바이스마다 서비스를 새로 만든다. 개인이 사용하는 

각각의 디바이스마다 최적화된 사용감을 제공하는 것이다. 방식의 우열을 가리기는 어렵지만 우리의 비즈니스 형태, 우리가 가용할 수 있는 리소스에 따라 선택적인 문제

디자인 시스템
디자인 언어 Design language를 실제 디자인에 반영하기 위한 표준 가이드라인 또는 라이브러리
Design concept and Principles을 포함
우리 디자인은 이 디자인 시스템은 궁극적으로 어떤 디자인을 만들었는지 기본컨셉, 목표, 다짐을 표현
Ex) Google Material system. Atomic system

디자인 시스템의 구성

• 색상 Color : 우리가 제공하는 컴포넌트에 최적화된 컬러가 무엇이고, 우리 브랜드의 아이덴티티를 나타내고 효과적인 Contrast를 제공하는데 중요한 컬러팔레트 주로 프라이머리 액션을 지원할 때 사용한다. 
• 아이콘 Icon : 프로덕트의 성격에 따라 재미적요소를 줄 수도 있고, 플레인하게 만들 수 있다. 새로운 아이콘을 만들 때 어떻게 해야 하는지 가이드
• 레이아웃 Layout 
• 컴포넌트 Components 

 

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

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

출처 Zero Base 강의

개발과정에서 기존 디자인과 다르게 개발되거나 대안을 찾아야 할 수 있기 때문에 Follow up이 필요하다. 

출처 Zero Base 강의

 요구사항 정의

요구사항 정의서를 쓸 때는 ID가 중요하다. 요구사항이 많기도 하고, 각각의 요구사항을 놓치지 않고, 현재 어떤 상태인지 Follow up 하기 위함

요구사항 ID로 디자인 아이템 관리 (e.g. JIRA)

요구사항을 제대로 정의하는 게 중요한 이유

• 하나의 사용자 요구사항을 각각의 포지션에 따라 다르게 생각한다. 
• 커스터머도 사용자도 자기가 뭘 정말 원하는지 말로 설명하지 못한다.

그렇기 때문에 여러사람이 보면서 진짜 요구사항이 뭔지 충분히 고민하는 시간이 필요

 

우선순위 정의

많은 요구사항중에서 사용자가 급하게 원하는 게 무엇인지 생각하는과정 

1. 아이디어 도출하기(어떻게 사용자를 만족시킬까?

2. 아이디어 평가하기(어떤 아이디어가 좋은 아이디어일까?

3. 개발 우선순위 정하기(어떤 기능부터 가장 빨리 사용자에게 제공해야 할까?) 

• 아이디어 평가 때처럼 가로축과 세로축을 정해놓고 아이디어 선별 가로축

가로축(Low Impact, High Impact), 세로축(High Effort, Low Effort)

어떻게 우선순위를 선정했는지의 기준으로 커뮤니케이션에 활용 할 때 서로의 이해를 돕는다. 

세부 디자인 기획

디자인 목표, 디자인 범위, 고려사항, 기능을 명확히 정의

1. Design goal : 어떤 기능을 추가할 것인지
2. Using this feature, user can...: 이 추가된 기능으로 사용자는 어떤 것을 할 수 있는지
3. Scope : 새로운 기능이 구현되는 범위, 시기 
4. Features : 새로운 기능 하나를 추가하는데 수반되는 세부 기능
5. Considerations : 포맷 지원 여부, 지원 용량, 자체 기능을 추가할 필요성과 여력이 있는가.

 

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

UI 흐름 정의 

1. 기획에 따른 UI 플로우 작성 : 와이어프레임 전 작성하는 습관을 들여야 한다. 이번 디자인 프로세스를 끝낼 때까지 어떤 컴포넌트를 지원해서 만들어야하는지 알 수 있다. 디자인 업무 범위를 파악하고 그 제작 기간을 가늠

User Flow

2. 범위 외 UI 플로우 생략 : 기존 디자인에서 변경사항이 없을 때 플로우에서 생략한다. 실제 디자인해야하는 업무 위주로 다듬는다. 
3. 리뷰 Stakeholders review : 기획단계에는 있는데 User Flow에서 없거나 생긴 것들에 대해 이유를 듣고 피드백하는 시간
4. 리뷰 결과 반영 
5. 적용하기 

적용하기 : UI 디자인에 디자인 시스템 사용하기

Google Material Design이나 SAP에서 기본적으로 제공하는 컴포넌트를 빠르게 구성할 수 있지만 브랜드아이덴티티를 위해서는 허용된 범위 내에서 회사만의 시선으로 재구성할 필요도 있다. 와이어프레임 과정에서는 유용해보인다. User flow에서 본 시작과 끝을 시각적으로 확인할 수 있고 Task Flow, 사용성 평가를 할 때 데이터를 얻을 수 있다. 

 

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

UI리뷰 우리가 만든 시스템을 사용자가 잘 쓸 수 있는지 개발되었는가 시험해보는 과정

Usability 관점에서

• Navigation 타겟의 위치까지 사용자가 잘 갈 수 있도록 필요한 정보와 필요한 버튼들을 잘 제공하고 있는가 확인
• Familiarity 사용자에게 얼마나 친숙한 디자인인지, 특정한 기능이 일반적으로 작동하는대로 제공되고 있는지(초기 학습도가 낮아도 잘 사용할 수 있는지)
• Consistency 하나의 제품, 시스템에서 동일한 기능은 동일한 방법으로 제공되어야 한다.
• Error Prevention 사용자가 실수할 경우를 최소화할 수 있도록 배려하는 디자인이 중요(예 : 휴지통을 삭제할 때 다시 리마인드하게 해주는 메시지 창)
• Feedback 신뢰성과 연결되는 것으로, 사용자가 어떤 기능을 사용할 때 진행되고 있음을 알려주는 기능(로딩중 표시처럼)
• Visual Clarity 화면 안에 보여지는 것들이 우리의 의도처럼 사용자에게 정확히 전달되고 있는가(회색 버튼은 비활성화라고 통용되는 것처럼 우리가 버튼이라고 만든 것들도 시각적 정보를 명확히 전달하는지 봐야 한다.)
• Flexibility 얼마나 다양한 사용자의 유저케이스를 수렴할 수 있는가 시스템적으로도 얼마나 다양한 기능을 지원할 수 있는 유연한 구조인가
• Efficiency 최종적으로 사용자에게 얼마만큼의 효용성을 전달하는가

 

서비스의 결과 사용자에게 제공하는 메시지는 톤앤 매너를 지키고 있는가

예를 들어 은행앱에서 오류메시지창을 띄울 때 Oops Try again이라는 창은 소비자에게 신뢰를 줄 수 없지만 소셜미디어에서 해당 메시지는 친근하고 사용자의 실수였더라도 긍정적인 감정을 줄 수 있다. 

 

사용자의 디바이스 화면의 크기에 따라 작다면 최소한의 정보를 제공하는 것

사용자의 실수를 빠르게 바로잡을 수 있는 솔루션 제공

예를 들어 사용자가 항목을 입력하는 과정에서 잘못 입력했을 때 상단에 불분명한 오류 메시지 보다는 무엇을 잘못했는지 정확히 알려줘야 한다.

사용자에게 메시지를 전달할 때 양쪽의 의미가 충돌하지는 않는지

접근성관점

색을 보는데 어려움을 겪는 사용자를 위해 적절한 대비를 제공하는가와 같이 사용자들의 다양한 신체적 조건에 따른 접근성을 고려

컴포넌트의 크기 마진 등

각 컴포넌트가 최소한의 사이즈인지, 너무 큰 컴포넌트로 인해 사용자들이 정보를 확인하고 보는데 어려움이 없는지

좋은 기능이라고 한꺼번에 많이 보여주는 것이 좋은 것은 아니다.

우선 순위를 고려한 명료한 디자인으로 사용자가 처리해야하는 것들에 대한 인지부하, 피로도를 줄여야 한다. 

에러메시지를 줄 때는 사용자 관점에서 유의미한 정보를 제공하는 노력이 필요

 

예외 케이스 디자인에 대한 고민 

예시 1 프로덕트를 이용하는 배경지식이 아예 모르는 사용자범위 혹은 너무 전문가라서 원하는 기능의 수준이 극도로 높은 사용자범위 

예시 2 파일의 이름이 너무 길어서 테이블에 다 표시될 수 없을 때의 의사결정

예시 3 로그인 할 때 많은 해결 방법을 제안했지만 수행할 수 없을 때 고객센터 메시지를 전달하는 것 혹은 즉시 지원을 위한 아이디어 회의로 확장될 수 있다. 

 

효과 : 다양한 케이스들이 고려됐을 때 전반적으로 사용자가 많은 배려를 느끼고 신뢰감을 가질 수 있다. 

 

 

---

밀린 강의를 보는데 빨리 볼 수 있음 좋았을 텐데 아쉽기도 하지만 지금이라도 들어서 다행이라는 생각이 든다. 그룹프로젝트를 위한 강의도 얼른 봐야될 텐데용 기다료

오늘은 아이패드를 쓸 수 없어서 어떻게 학습일지 적으면서 강의도 볼 수 있을까 걱정했는데 PIP를 제공한다는 사실을 알게돼서 기뻤다. 

근데 티스토리에서 편집하는 과정에서 제목과 본문 적용하는 게 너~~~~~~~~~~~~무 불편했다. 이래서 쓰겠니~?