design0gam

Fidelity - 충실도, 묘사/표현의 정도를 나타냄

Low Fidelity : 최소한의 구성요소는 다 갖추고 있는 정도

High Fidelity : 완성에 거의 가까운 형태

와이어프레임 - 기획단계에서 주로 제작되며, 각 페이지들의 정보와 UI 요소등에 대한 배치를 표현한다. 

와이어프레임에 시나리오, 컨텐츠 설명 등이 첨부되면 스토리보드가 된다.(Low Fidelity)

실무에 필요한 UX UI 용어

Fidelity - 충실도, 묘사/표현의 정도를 나타냄

Low Fidelity : 최소한의 구성요소는 다 갖추고 있는 정도

High Fidelity : 완성에 거의 가까운 형태

와이어프레임 - 기획단계에서 주로 제작되며, 각 페이지들의 정보와 UI 요소등에 대한 배치를 표현한다. 

와이어프레임에 시나리오, 컨텐츠 설명 등이 첨부되면 스토리보드가 된다.(Low Fidelity)

Storyboard - 서비스의 각 페이지 구성요소나 콘텐츠의 설명 및 페이지간의 이동 흐름, 로직 등을 기술한 문서를 말한다.

= 화면 설계서, UI문서, 스펙문서, 기획서, MMI(Man Machine Interface), Wireframe

Mockup - 디자인, 데모 시연 및 평가를 위한 서비스/제품의 디자인.

Prototype - 서비스에 대한 기능 및 사용성 등의 테스트를 위해 제작되는 동적인 모형. 개발자 디자이너 사이의 시각적인

커뮤니케이션 툴이 되기도 하고 사용성 테스트에 종종 사용되기도 한다. 

(Medium to High fidelity)

Affordance - 사용자가 제품 또는 서비스를 인지했을 때 어떻게 사용해야 하는지 알거나 디자이너의 의도대로 사용자의

행동을 유도하는 것을 의미

예시로 처음에 아이폰 6에서 화면을 UNLOCK하기 위해 디자인이 된 화면 설계가 필요했다. 하지만 지금은 그러한 설계없이

자연스럽게 사용자들이 UNLOCK을 할 수 있다.

IA(Information Archintecture) - 제품, 서비스를 구성하는 정보의 구조와 우선순위, 흐름의 설계 등을 포함.

사용자 테스트는 우리가 디자인한 솔루션이 앞서 정의한 Problem이 해결이 되는지에 대한 검증을 하는 과정이다.

빠르게 Feedback을 받고 다시 검증하는 것이 중요하다.

User Test 

스마트폰 화면이나 스마트폰을 사용하는 전체 모습을 직접 녹화해서 보기도 한다.

A/B Test를 해서 두 가지(A와 B) 중에서 어떤 방법이 더 좋은지 테스트한다.

상황에 맞는 방법을 이용하는 것이 중요!

UX 디자인 Intro 강의는 여기까지- 

앞으로 진행되는 강의는 UX 디자인 리서치 및 서비스 기획에서 구체적으로 UX 디자인을 배워보겠다.

사용자가 가지고 있는 제품 또는 서비스에 대한 문제점을 정의하고 난 뒤, 솔루션을 만드는 과정을 한다.

아이디어를 스케치하고, 디자인을 하고 프로토타입을 하기도 한다.

시간 싸움이기 때문에 어떤 방법이 효율적인지는 직접 사용해보면서 하길 바란다. 

프로토타입은 빠르게 구현해보는데 UX디자인을 실제로 검증하는 방법인데 

프로세스를 아는 방법만으로는 솔루션을 검증하기 어렵기 때문에 직접 프로토타입을 구현하는 방법이 좋다. 

UX 디자인 Problem 하기

- Problem 정의하기

- Solution 만들기

- Solution 검증하기

무엇이 불편한지, 언제 사용하는지, 등의 사용자를 이해하고 공감하고 어떤 문제를 겪고 있는지 알아내는 과정이 필요하다.

사용자 리서치에는 정량조사와 정성조사가 있는데, 정량조사는 설문조사와 같은 것으로 사용자 개개인의 의견을 파악하는데 어렵기 때문에 정성 조사와 같이 사용자 개개인을 분석할 수 있는 관찰 조사나 사용자 인터뷰 등을 이용한다. 

따라서 상황에 따라 정량 조사와 정성 조사를 구분해서 사용해야 한다.

Clustering, Persona, User Journey의 과정을 통해 사용자가 누구인지, 사용자는 제품을 어떻게 사용하는지,

사용자가 가지고 있는 제품의 Problem을 분석할 수 있다. 

UX 디자인 프로세스는 어떻게 진행이 될까?

더블 다이아몬드 모델

사고를 하나로 모아 점점 좁혀나가는 방법으로 대표적인 디자인 씽킹 방법으로 알려졌다. 

사고를 정리하고 정의, 발산과 수렴해 나가는 방법이다.

더블 다이아몬드의 첫 번째 다이아몬드에서는 Discover과 Define과정을 통해 Problem을 해결해나간다.

더블 다이아몬드의 두 번째 다이아몬드에서는 앞에서 찾은 Problem의 솔루션을 탐색하고 Solution으로 이어지는데

이 때 Develop과 Deliver 과정이 진행된다.

절대적인 UX 디자인 프로세스는 아니지만 하나의 방법론으로 알아두자.

먼저 UX와 UI가 어떻게 다른지부터 시작하려고 한다.

UX 디자인은 서비스 디자인, 데이터 시각화, 인터렉션 디자인과도 연관이 있는데, UX가 사실상 모든 분야에 관여하고 있으며

제품과 서비스를 만들 때 UX를 고려해야한다는 것을 알 수 있다.

UX vs UI

사용자 경험을 말하는 UX(=User Experience), UI(=User Interface), 그리고 그 사이에 있는 Interaction Design으로 나눠볼 수 있다. 

더 자세히 들어가면 다음과 같다.

UX란 디자인 설계를 하는 기획 단계라고 할 수 있는데, 

User Research(사용자 분석), User Scenario(사용자 시나리오), Information(정보), Architecture(기술), Wireframe(와이어프레임) 등으로 이루어져 있다. 

이러한 설계 단계가 지나면 UX를 토대로 색깔, 문자, 레이아웃 등의 비주얼 디자인을 하게 되는데 이게 바로 UI라고 일컫는다.

그 사이에 Interaction 디자인은 애니메이션, 모션, 등으로 UX와 UI를 연결해준다.

그렇다면 UX는 UI는 정말 다를까?

디자인을 기획하는 단계에서부터 와이어프레임, 프로토타입 그리고 UI 과정까지 모든 과정을 직접 해보니, UX분야에서 조금 더 매력을 느꼈다. UX라는 설계가 잘 이루어지고 토대를 잘 쌓아야지만 UI까지 올리는데 속도감이 붙는다. 

UX 디자인 사례를 알아보는 시간이다.

'음악 스트리밍 서비스를 활용하여 이해하는 UX 디자인'

애플뮤직, 스포티파이, 바이브 서비스 각각 모두 다른 UX를 제공한다.

애플뮤직

1. 첫 번째 화면

라이브러리가 먼저 보이고

Playlists, Artists, Albums, Songs, Downloaded Music으로 나뉘어 있다.

아래에는 재생표시줄이 있고 Recently Added가 있어 최근 재생한 곡을 확인할 수 있다.

2. 두 번째 화면

앨범이 나오고 

곡이 어느정도 재생되었는지 확인할 수 있는 슬라이딩 표시

제목과 아티스트가 색으로 구분되어 있다.

전곡, 재생, 다음곡재생 아이콘이 크게 나와있고

소리 음량이 나와있다.

끝이 아니라 가장 하단에는 알 수 없는 원+삼각형 아이콘, 더보기 아이콘이 있다.

3. 세 번째 화면

For you 화면

가장 많이 듣는 음악을 믹스하여 함께 볼 수 있게 해놓았고

하단에는 친구들이 많이 듣는 음악들을 엿볼 수 있게 해놓았다.

스포티파이

1. 첫 번째 화면

라이브러리가 보이고 두 번째 단에는 사람들이 많이 듣는 음악이 보인다.

Followers의 숫자를 넣어 얼마나 많은 사람들이 즐겨듣는지 볼 수 있다.

2. 두 번째 화면

재생화면이 주를 이루고

가장 왼쪽에는 이전 화면으로 넘어갈 수 있을 것 같은 아이콘이 있다.

우측으로는 재생목록을 볼 수 있는 아이콘이 있다.

3. 세 번째 화면

브라우즈 화면

플레이스, 새로운 아티스트 추천 화면이 있다.

바이브

1. 첫 번째 화면

날짜가 보이는 특이점.

기분과 상태를 물어본다.

내가 들어본 노래를 기반으로 믹스테입이 있다.

재생표시가 하단에 있다.

2. 두 번째 화면

재생목록이름, 

앨범 커버가 중간에 있고

노래 제목과 아티스트, 더보기 아이콘이 옆에 있고

아래에는 재생상태를 표시하는 것 같은 바가 있다.

재생버튼과 좋아요 버튼이 있다.

3. 세 번째 화면

실시간 Top 100, 급상승

세 가지 음악 앱을 봐도 각각의 다른 UX 특성이 있다는 것을 알 수 있다.

종합했을 때,

애플뮤직은 사용자가 좋아하는 플레이리스트 안에서 다른 비슷한 곡을 추천해주는 기능을 중점으로 하고

스포티파이는 비슷한 다른 취향의 아티스트를 소개함으로써 새로운 아티스트를 발굴해 추천해준다는 점이 다르다.

바이브는 국내 음악 앱으로 실시간 Top100을 소개하여 국내 음악 안에서 유용한 음악을 추천해준다.

각 음악 앱마다의 중점을 살려 다른 UX 디자인이 나왔다는 점에서 눈여겨 볼만한 사례이다. 

UX = User Experience (사용자 경험)

제품이 가진 각 요소가 사용자에게 주는 개별 감정의 총합

노트북을 예로 들 때, 노트북의 재질, 버튼을 눌렀을 때의 느낌 등

노트북의 사용자 경험, 복합적이고 총합적인 느낌이 노트북의 UX라고 할 수 있다.

모든 제품과 서비스에는 UX가 존재하는데, 다양한 분야 중에서 모바일 안드로이드와 IOS 등을 통해 비교 이해해보도록 한다.

User, 사용자(마케팅에서는 소비자)에 대해 조사하는 것.

유모차를 예로 들때,

사용자-유아, 소비자-부모

사용자-유아+부모, 소비자-부모

유모차는 일반적으로 아래 사진처럼 뒤에서 끌어주는 형태이다. 

하지만 사용자의 UX를 고려하여 만들어진 유모차를 보면 

엄마와 아이 얼굴을 마주볼 수 있는 양대면 유모차가 나올 수 있다.

이는 유모차라는 제품을 사용자인 부모와 아이를 고려하여 만들어진 것이다.

Designing User Experience는 어떤 것일까?

Design=설계하다

와이어프레임 활동

음악을 듣고 싶어하는 사람 음악을 듣는다의 간격에

스마트폰을 들고 이어폰을 스마트폰에 연결하며 이어폰을 꽂는다, 그리고 음악 스트리밍 앱을 켜고 음악을 고르고 재생한다.

이러한 과정을 통해 음악을 듣고 싶어하는 사용자의 욕구가 해소된다.

패스트 캠퍼스에서 주최하는 

올인원 패키지 : UX/UI 디자인 입문 과정을 온라인을 통해 배우게 되었다.

10월 1일부터 아마 무제한으로 들을 수 있는데,

사전등록을 해서 저렴하게?(10만원이내) 구매하였다.

UX 디자인 개론이 총 7강이 있고

UX 디자인 리서치 및 서비스 기획이 총 22강이 있다.

앞으로 1~2강씩 듣고 난 뒤 리뷰를 티스토리에 올릴 예정~

잘 나가는 기업들의 디자인 블로그에 대한 글을 가져왔다.

페이스북, 인비전 등 다양한 디자인 블로그 링크를 타고 디자인 영감을 얻어보자.

1. 페이스북 

https://facebook.design/

2.인비전

https://www.invisionapp.com/inside-design

3.어도비

https://theblog.adobe.com/creativity/design/

4.미디움

https://medium.com/thinking-design

5.우버

https://medium.com/uber-design

6.토스

https://www.notion.so/About-Toss-Designers-b2d0458e489948c99b69fa2029bd96ca

7.구글

https://design.google/

8.네이버

https://blog.naver.com/nvr_design

9.에어앤비

https://airbnb.design/

10.드롭박스

https://medium.com/dropbox-design

디자인이란 정답이 없다.

내 눈에는 사용하기 불편하고 색감도 별로인데, 다른 사람 눈에는 '어머 저건 구매해야 해!'라는 평가가 나올 수도 있다.

그런데도 사람들이 좋아하는 기업이나 서비스가 존재한다.

그렇다면 사람들이 좋아하는 서비스, 기업들은 어떻게 그런 디자인을 만들게 되었을지 궁금하다.

출처 : http://harborpin.io