세로 정렬 + 질문별 맞춤 선택지

장점

• 소비자는 리뷰를 남길때 깊은 고민없이 리뷰를 작성할 수 있음

• 상세 리뷰를 굳이 쓰지 않아도 되는 압박감이 줄어들게 됨

• 판매자는 필요한 정보, 제시된 '예상, 설명, 기대'와 같은 제품성 외에 부가적인 제품 평가 요소를 얻을 수 있다.

• 정량적인 분석이 가능

• 개발 단계에서의 편의성

 

단점

• 리뷰를 쓰는게 귀찮고 힘든 사람들은 지문별 맞춤은 더 번거롭게 느껴짐

• 소비자들에게 상세한 피드백을 받는게 힘들 수 있음

• 모든 질문과 답의 맥락이나 형식이 동일하지만 사용자가 그것을 빠르게 인식할 수 없음

 

 

가로 정렬 + 이모지 활용

장점

• 단순하고 직관적임

• 부족한 설명들을 적을 수 있게 만듬

• 소비자들은 빠르고 간편한걸 더 선호할 것 같음

• 판매자들은 더 직관적인 피드백을 받을 수 있음

• 귀여운 이모티콘이 들어가서 리뷰를 쓰는 곳(기능)이란 걸 쉽게 알 수 있음

 

단점

• 개발 단계에서 그래픽 요소가 번거로움이 있을 수 있음 

• 사용자에게 '사용자 후기가 서비스에 큰 영향을 주지 못한다'라는 인식을 줄 수있다.

 

 

결론

상황에 따라서 목적이 달라질 수 있다.

예를 들어 호텔이나 가전제품 상품 같은 상품 판매를 하는 서비스에서는 A안이 

더 잘 맞을 수도 있다. 하지만 맛집 같은 서비스에서는 B안 같은 서비스가 오히려 더 좋을 수 있다고 생각한다.

공급자가 어떤 정보 형식을 원하는지와 사용자가 어떤 사용감을 제공할 것인지에 따라 선택적으로 사용하면 좋을 듯하다.

 

 

 

 

 

컬러는 단순한 시각 요소가 아닌 사용자의 감정과 행동, 인식에 깊이 영향을 주는 중요한 요소입니다.

이번 포스팅에서는 저번 시간 아이콘에 대해서에 이어서 UX/UI 디자인에 '컬러'가 가지는 의미와 역할을 쉽고 간단하게 정리해 보겠습니다.

 

 

 

 

1. 컬러의 의미

컬러는 상태, 감정, 분위기, 진행사항 등 다양한 의미를 전달합니다.

각 컬러마다 어떤 느낌을 전달해 주는지 알아볼게요.

 

빨강 : 에너지,열정적,위험함,정지,부정,경고,에러

주황 : 친근한, 에너지, 보류, 경고

노랑 : 활기찬, 즐거운, 희망적, 낙천적

초록 : 자연의, 균형적인, 긍정적인, 진행, 승인, 성공

파랑 : 안정감, 신뢰, 성공, 비전, 정보

보라 : 고급스러운, 고상한, 고귀함, 우아함, 예술, 창조

검정 : 고급수러운, 세련된, 권위있는

하양 : 깨끗한, 심플한, 정직한, 맑은

 

컬러 하나로도 제품이나 서비스의 감정을 사용자에게 전달할 수 있습니다.

 

 

2. 컬러의 역할

컬러는 디자인에서 정보의 위계를 정리하고 사용자가 어떤 행동을 취해야 할지 빠르게 파악하게 도와줍니다.

 

1) 계층 구조 : 요소의 중요도에 따라 계층구조로 

표현할 수 있습니다.

 

 

2) 강조 : 채도, 명도를 적용하여서 특정 정보를 강조할 수 있습니다.

강조 영역이 너무 많아지게 되면 시각적으로 복잡해 보여서 사용성을

저하시킵니다.

 

 

 

3. 사용자의 행동 유도

UX 디자인의 궁극적인 목표는 사용자의 행동 유도입니다.

특정 컬러는 사용자로 하여금 클릭하거나 특정 경로를 따르게 만듭니다.

녹색 컬러는 출발을 빨간색 컬러는 도착을 의미합니다.

 

전화가 걸려 올 때 녹색 컬러는 수신을, 빨간색 컬러는 거절을 의미하기도 합니다.

만약 컬러가 회색으로 단조로운 컬러로만 이루어져 있다면 사용자의 행동이 줄어들게 됩니다.

 

 

4. 브랜드 아이덴티티

컬러는 브랜드의 첫인상이자, 가장 오래 기억되는 요소입니다.

UI디자인에서 브랜드 컬러는 로고, 버튼, 아이콘, 심지어 폰트에도 반영되어 통실성과 신뢰감을 줍니다.

 

카카오 - 밝은 노랑 (친근함, 즐거움)

배달의 민족 - 청록색 (독창성, 트렌디함)

apple - 흰색과 은색 계열 (심플함, 세련됨)

 

우리의 기억 속에 있는 브랜드를 떠올리면 특정 컬러가 떠 올립니다. 

그런 브랜드일수록 브랜드의 아이덴티티가 확실히 자리 잡았고 브랜드의 이미지를 확실하게 자리 잡았다고 볼 수 있습니다.

 

 

4. 컬러 비율

일반적으로 우리가 많이 쓰는 어플에는 5:25:75의 비율로 컬러 비율을 맞춰줍니다.

반드시 이 비율을 맞춰야 하는 것은 아닙니다. 

비율에 따라 디자인 느낌이 달라질 수 있기 때문에 제품이나 서비스의 성격, 컨셉에 따라 적절한 비율을 찾아야 합니다.

 

 


 

마무리

컬러는 감성, 정보, 행동을 하나로 연결하는 UX의 중요한 도구입니다.
입문자라면 처음엔 ‘어떤 색을 써야 할까?’에 고민이 많겠지만,
사용자 입장에서 ‘어떤 반응을 유도하고 싶은가?’로 접근하면 자연스럽게 답이 나옵니다.

 

https://brunch.co.kr/@dhalsrms3994/40

 

혹시 나도 과잉 부모형 UX 디자이너?

사용자 경험을 배려하는 방법 | 사용자를 배려하는 제품과 서비스는 성공한다. 사용자에 대한 배려는 사용자 경험 디자인, UX 디자인을 통해 이뤄질 수 있다. 사용자를 배려하기 위한 UX 디자인의

brunch.co.kr

 

 

지금까지 아티클 스터디를 하면서 사용자를 위한 UX디자인이 무엇일까를 고민하고

어떻게 해야 친절할지만을 생각을 했었는데 이 번 아티클을 보니 무조건적인 사용자를 위한 UX디자인은 

사용자를 위한 이타심만을 생각하는 직업이 아님을 다시 느끼게 되었어요.

 

중요한 건 사용자 경험을 위해 우리가 하고 있는 디자인이 정말 '배려' 일까를 생각해 보게 되는 것 같습니다.

 

 

그렇담 과잉 부모형 UX란 무엇일까요?

예를 들어 사용자들의 연령대가 높으니 시력을 고려해 글자를 큼직하게 쓰는 경우, 사용자들이

빠르고 편하게 모바일 화면에서 동작을 수행할 수 있도록 돕기 위해 엄지 손가락 근처에 메인 버튼을 

위치시키는 등의 개선이 사용자를 위한 배려로 바람직해 보일 수 있겠지만

간혹 오히려 사용자를 불편하게 만드는 경우도 있습니다.

마치 아이를 대신해 모든 걸 해주는 부모, 사용자 대신 모든 걸 설정하거나 결정해 주는 UX가 있을 수 있습니다.

다른 예시로 앱 첫 실행 시 설정을 자동으로 넘기거나, 선택지를 주지 않고 강제적으로 안내하는 경우

과잉 부모형 UX라고 합니다.

이런 과잉 보모형 디자인은 사용자들에게 다음과 같은 반응이 보였다고 합니다.

1. 반항적 Annoyed

2. 무관심 ignore

3. 좌절 Frustrated

또 사용자들에게 위와 같은 반응은 과잉보호형 부모에게 자란 아이들에게 비슷한 양상을 보였다고 합니다.

 

 

 

UX디자이너가 과잉 부모가 되지 않는 3가지 방법

1) TMI가 아닌 밀도 높은 문제 상황을 정확히 짚어낼 것

사용자 입장에서 기능적으로나 경험적으로나 심각한 문제가 되는 상황이 아니고서는 사용자가 직접 좌절할 수 있는 

부분은 적당한 선에서 좌절하게 두어도 됩니다.

너무 디테일한 UI를 추가하여 사용자의 사용 경험을 해치는 것도 방해의 요소가 된다고 합니다.

어떤 맥락에서 혼란스러워하는지 정확하게 파악하는 게 중요하며 단순히 쉬운 인터페이스가 아닌, 사용자가 판단할 수 있는 

기회를 주는 디자인이 필요합니다.

 

2) 부정문보다는 긍정문으로 알려주기

이 작업을 하시겠습니까? -> 예/아니오 대신,

이 작업을 진행하면 어떤 이점이 있습니다. 진행하시겠습니까?

와 같은 질문으로 사용자에게 명확한 정보와 결정권을 줄 수 있어야 합니다.

 

3) 모르는 채 하고 대신해 주기

개발의 진짜 목적은 사용자에게 경험을 주는 일입니다.

자동재생 동영상이 있을 경우 ios는 사용자가 직접 화면 터치 동작을 해야지만 소리를 켜줍니다.

디자이너는 소리를 재생하려면 터치하세요 같은 직접적인 문구를 넣어줄 수도 있겠지만

자동 재생 동영상의 목적은 소리 재생이 아니라 사용자의 자연스러운 모바일 증강현실 경험입니다.

 

결론

결국 중요한 건 사용자입니다,

사용자 중심이란 '신뢰'를 기반으로 하는 것이라고 생각합니다.

사용자를 '모른다'라고 가정하고 대신 결정하는 것이 아니라 사용자를 충분히 이해하고 선택할 수 있다고 

신뢰하는 디자인이 진짜 사용자 중심의 디자인이라는 생각일 하게 되었습니다.

때때로 너무 배려하다 오히려 사용자의 경험을 빼앗고 있진 않은지 돌아볼 필요가 있겠습니다.

 

 

 

 

 

Designus 토픽

 

 

 

A 포스터 내 텍스트 

일반적으로 현재 넷플릭스, 디즈니+ 등 OTT 사이트에서 선호하는 콘텐츠 타이틀 노출 방식이다.

국내 영화에는 특히 영화의 아이덴티티가 들어가기 때문에 영화나 드라마 같은 콘텐츠에 표기되는 것이 좋다고 본다.

해외 영화도 마찬가지로 국내로 넘어오면서 한글로 번역될 때 텍스트의 폰트, 재질, 크기 등을 고려하여 기존의 텍스트의

아트웍을 깨지 않는 선에서 제작이 되기 때문에 포스터 내에 텍스트가 들어가는 것이 더 선호도가 높다고 판단하며

기존의 대중들 또한 오프라인으로 타이틀이 들어간 포스터를 쉽게 접할 수 있기 때문에 친숙함에 있어서도 A 안이

더욱 선호도가 높은 것이라 본다.

 

그러나 단점은 포스터 내에 타이포의 디자인, 폰트의 특성으로 인해 가독성의 저하가 생길 수 있다. 

위 이미지의 반지의 제왕 밑에 있는 부제는 포스터를 관심 있게 보지 않는 한 눈에 잘 보이지 않을 수 있다.

또한, 스크린 리더 경험을 높이기 힘든 부분도 있다.

시각 장애인(눈이 아예 안 보이는 분들이 아닌)들에게 있어서 보기 어려운 텍스트보다는 일관화 된 B 안이 오히려 더 선호될 수 있다.

 

 

B 포스터 하단 텍스트

동일한 텍스트의 인식 경험을 제공할 수 있다는 것이 장점으로 작용될 수도 있다.

사용자 또는 시청자는 A안을 보고 콘텐츠를 인식하는 과정에서 두 번의 인식 과정이 생길 수 있다.

콘텐츠를 인식하는 과정이 길어질수록 소비되는 시간과 유동성을 확보하기 어려울 수 있으며 그 과정에서 벌어지는

콘텐츠를 인식하는 오류를 줄일 수 있다.

반면 B안은 일관된 텍스트로 인해 가독성을 높여주고 콘텐츠의 유동성 또한 확보할 수 있다는 것이 개인적인 생각이다.

또한, 스크린 리더의 경험을 향상할 수 있다.

 

하지만 내부에 텍스트가 존재하지 않는다면 '영상 콘텐츠'라는 정체성을 흐리게 만들 수도 있다.

다소 및및한 디자인이 될 수 있다. 한눈에 보여야 하는 영상 콘텐츠의 썸네일과 같은 포스터에 텍스트가 

빠진다면 빈 공간을 채워줄 대체안이 필요하다고 본다. 

 

 

결론

많은 사용자들도 A안을 선택하였다.

포스터 내의 타이포 요소는 디자인으로 취급되기도 하며.

현재의 영상 콘텐츠의 소비 흐름이기도 하고 오프라인으로 이미 익숙해진 방식이 그대로 온라인으로

드러난 것이 아닌가 라는 결론이다.

 

 

 

내일배움캠프 8일 차입니당~

오늘도 여러 가지를 배웠지만 그중에 하나인 아이콘을 다뤄 보려고 합니다!

 

본격적으로 아이콘을 만들어보기 전에 먼저 피그마에서 만들 간단한 아이콘에 대해서 

정의해볼게요.

 

 

1. 아이콘의 역할

아이콘은 남녀노소, 동서양을 막론하여 제한 없이 누구나 일관된 의미를 전달할 수 있습니다.

또한 브랜드의 아이덴티티를 나타내기도 합니다. 예를 들어 맥도널드의 브랜드 이미지를 떠올리면 

'M' 자의 아이콘을 떠올리게 되어 브랜드의 성격, 이미지, 의미를 반영한 아이콘은 

사용자의 기억에 오래도록 남아 있게 됩니다.

 

 

2. 일관된 아이콘 스타일

무수히 많은 아이콘에는 일반적으로 사용하는 다양한 스타일이 있습니다.

outlined, filled, colored, image와 같은 스타일이 있으며 일관된 스타일을 적용하는 것이 

사용자의 인지 시간을 단축시킬 수 있습니다.

각자의 아이콘 스타일마다 다른 이점이 있으며 오늘 만들어본 아이콘은 outlined 아이콘을 

만들어 보겠습니다.

 

방금도 말했듯이 아이콘을 만들 땐 일관성이 중요합니다.

outlined 아이콘을 만들 때 stroke 두께에 따라서 아이콘의 분위기도 달라지기 때문에

스트로크 굵기도 일관된 스타일로 만들어야 합니다.

 

 

3. 아이콘 단순화

사용자가 모바일로 아이콘을 볼 경우 그 크기가 매우 작아집니다.

그리고 아이콘의 모양이 디테일할수록 어떤 사용자의 경우 그 아이콘의 기능이

무엇인지 인지하지 못할 경우가 생길 수 있죠.

왼쪽의 시계 아이콘이 디테일하게 표현이 되어 완성도가 높아 보일 수 있지만 모바일 화면에서는 

작아지기 때문에 단순화하는 것이 더 좋은 아이콘이 됩니다.

 

 

 

4. 아이콘 레이아웃

아이콘을 만들기 위해서는 일관성이 중요하다고 했습니다.

통일성 있는 아이콘을 만들기 위해서는 아이콘의 크기도 똑같이 만들어 주는 것이 좋습니다.

아이콘을 본격적으로 그리기 전에 레이아웃 영역부터 그려주면 좋은데요.

일반적인 아이콘 사이즈는 24x24 사이즈를 사용합니다.

특히 아이콘은 여러 파일 또는 툴에 자주 이동이 될 수 있기 때문에 24 사이즈의 레이아웃을 잡았다면

24 사이즈를 넘지 않아야 합니다.

 

 

피그마에서 아이콘을 만들기 전에 24x24 프레임을 만들어 주었습니다.

그리고 20x20의 라이브영역의 프레임도 만들어 주었습니다.

 

사진에 있는 각 프레임을 표시한 수치 영역은 이렇습니다.

1) 트림 영역 : 아이콘 실제 사이즈

2) 라이브 영역 : 패딩 영역을 제외한 실질적 작업 영역

3) 패딩 : 트림 영역 안쪽으로 상하좌우 2만큼의 영역

 

아이콘은 라이브 영역 안에서 작업을 해주되 트림 영역 밖으로 확장되지 않도록 주의해야 합니다.

 

 

 

 

https://toss.tech/article/senior-usability-research

 

시니어 사용자가 어려워하는 UX 5가지

시니어 UX 설계 가이드라인을 만들기 위해, 리서치로 시니어 사용자들의 공통된 사용성 패턴을 찾는 과정을 들려드릴게요.

toss.tech

 

 

 

요즘 앱을 켜거나 웹 사이트를 들어가게 되면 UI 보는 맛에 재미가 들린 것 같아요 :)

어떤 UI가 잘 보이고 어떤 프라이머리 컬러를 사용했는지, 어떤 기능을 하는 건지 궁금해서 

앱 또는 웹에 머물러 있는 시간이 많아지는것 같아요.

 

앱 또는 웹 개발자 분들은 모두에게 평등한 경험을 제공하기 위해 많은 노력을 아끼지 않는 걸 느끼는데요.

제가 사용하는 모든 앱과 웹들은 많은 디자이너와 개발자 분들이 협력하고 연구한 끝에 이런 서비스를 누리는

거라고 생각해요.

 

그에 그치지 않고 시니어 사용자와 시각 장애인 등 디지털 시대에 환경에 비교적 덜 노출되는 분들을 위한 

노력에도 아끼지 않는데요. 이 분들의 행동 패턴과 이해 방식을 연구하며 어떤 결과가 생기는지 조사한 

사례도 있습니다.

토스에서는 시니어 사용자를 대상으로 직접 대면하는 UT를 진행했다고 합니다.

조사 방법은 간단했어요. 시니어 사용자들에게 평소처럼 앱을 사용하시되, 그때그때 드는 생각이나 궁금증을

소리 내 표현해 달라고 부탁했는데요. 사용자들의 오인지가 생기는 부분에 대한 맥락과 시니어가 가진 이해력을

충분히 파악할 수 있게 꼬리를 무는 질문을 이어 나가는 방식으로 UT를 진행했다고 합니다.

 

그렇게 진행한 조사 결과 토스에서는 크게 다음과 같은 5가지의 문제점들이 발견되었다고 합니다!

 

 

 

1) 컴포넌트에 대한 오인지

우리가 생각하는 아이콘(화살표나 설정, 체크 박스 등)을 시니어들은 그 기능을 바로 알아차리기 어려워했습니다.

특히 리스트 화면에서 어디를 클릭해야 진입할 수 있는지 혼란스러워 하는 상황도 있었습니다.

 

2) 예시 이미지에 대한 오인지

입출금 내역 예시 이미지에 대한 내용인데요.

모션이 들어간 예시 이미지 때문에 예시 이미지를 보지 못하고 자신의 정보로 잘 못 인식하는

경우가 있었다고 합니다.

 

3) 모션 그래픽에 대한 오인지

얼굴을 등록할 수 있는 페널에서는 '얼굴 등록'이라는 서비스를 마주하였을때 문구보다 캐릭터를 집중하여

캐릭터의 동작을 100% 동일하게 따라 해야만 등록에 성공할 수 있다고 생각해 등록에 실패하는 경우가

발생하였다고 합니다.

 

4) 라이팅에 대한 오인지

대부분의 사용자들은 '어떤 서류가 필요한가?'라는 질문형 텍스트를 통해 '필요한 서류를 안내받을 수 있다'는

점을 떠올리지만 시니어들은 문장을 있는 그대로 받아들여 '나에게 질문한다'라고 생각해 혼란스러운 경우가 

생겼다고 합니다

 

5) 화면 구조에 대한 오인지

일부 시니어 사용자들은 하단의 추가 콘텐츠가 잘 드러나지 않으면 스크롤을 시도하지 않았다고 합니다.

보이는 내용을 위주로 화면을 이해하다 보니 전반적으로 서비스를 잘 못 이해하는 상황도 발생했다고 합니다.

 


 

토스사에서는 이렇게 모은 인사이트를 바탕으로 전사에 배포하여 추가적인 리서치나 논의를 하여

현재도 많은 부분이 수정되었다고 합니다!

또한, 이 글을 읽으면서 시니어나 2030의 세대에 맞추어 UI를 제작할 경우 결국엔 너무 심플해지거나 또는 너무

디테일하게 디자인이 되지 않을까?라는 걱정을 해보았는데요.

토스 앱의 UI가 사람마다 다르다고 하더라고요. 시니어는 시니어에게 맞춤이 되어 서비스가 제공된다고 하니

참 신경을 많이 썼구나 하는 걸 느끼게 되었습니다.

 

위 다섯 가지의 문제점이 현제는 어떻게 개선이 되었을지 토스 앱을 통해 확인해 보면 많은 공부가 될 것 같네요!

 

 

 

 

 

오늘 하루도 열공했습니다.

지난주에는 피그마의 기초 용어에 대해서 공부하느라 정신도 없고 너무 어렵다고 느껴졌는데요

이번에 배운 내용은 그래도 저번보다 재밌게 배울 수 있었습니다.

 

드디어 앱 개발자에 한 발자국 다가간 느낌이 들어서 재밌는 강의가 되었답니다 :)

그래서 오늘 배운 내용을 블로그로 정리해 보면서 다시 학습하는 시간을 가져볼게요!

 

 

01) 프레임 만들기

먼저 프레임을 만들어 보겠습니다. (아무사이즈로나 만들어 주세요)

그리고 왼쪽 패널의 늘 사용하던 디자인 패널이 아닌 프로토타입 패널로 들어가 보겠습니다.

프레임이 선택되어 있는 상태로 프로토 타입을 눌러 주세요! 

그리고 프로토타입 세팅 밑에 있는 선택 바를 다시 눌어보겠습니다.

 

 

 

갑자기 좌르륵하고 뜨는데요 이 옵션이 프레임을 자동으로 잡아주는 아주 고마운 기능이더라고요!

이름을 보시면 친숙한 기기의 이름들이 보이는데요 저는 안드로이드 폰을 사용하고 있기 때문에 안드로이드로 

프레임 크기를 맞추고 진행하겠습니다. 여러분들은 원하는 사이즈로 사용하셔도 상관없습니다.

 

 

 

2) 홈 화면 만들기

프레임이 완성되었다면 위와 같이 이런 바 모양도 만들어 볼게요 (아이콘은 아무 모양 상관없이 사용해도 괜찮습니다)

 

 

이렇게 리스트 레이아웃도 만들고

 

 

만든 오토 레이아웃 리스트를 여러 개로 복붙 후 오토레이아웃으로 다시 또 묶어 주었습니다.

개수는 몇 개든 상관없습니다. 크기에 맞추지 말고 더 길게 만들어 보세요!

 

 

 

 

저는 위 와 같이 홈 화면을 만들어 보았습니다.

큰 프레임 안에 들어있는 모든 컨테이너 밑 파운데이션은 오토레이아웃으로 묶어주지는 않았습니다,

※화면 제목 아래 있는 회색 화면은 히어로 영역이라고도 불리며 보이는 메인 화면입니다.

현재 구성되어 있는 모든 UI들은 기능이 있고 목적이 있는 UI들로만 구성된 일종의? 최적화된 화면이네요.

 

 

3) 목록 화면 만들기

목록 화면은 앞서 만든 홈 화면과 비슷하게 만들어 주었습니다.

또한 앞 강의에서 만든 Lavel 텝도 컴포넌트로 묶인 상태로 가져와 꾸며 보았습니다 :)

목록 화면은 동일한 형태의 정보 덩어리를 반복적인 패턴으로 보여줄 때 사용하며 리스트 컴포넌트라고도 불립니다.

 

 

 

4) 상세 화면과 로그인 화면 만들기

비슷한 방식으로 만든 상세 화면과 로그인 화면입니다.

버튼 라벨과 체크박스 그리고 플레이스 홀더 텍스트 박스도 이 전 강의에서 만든 컴포넌트를 가지고 와 복붙 해 주었습니다.

이렇게 만들었다면! 4개의 앱 화면이 만들어졌습니다!

 

 

 

5) 모바일 화면으로 프리뷰 보는 방법

이제 만든 앱 화면을 프리뷰로 한번 확인해 보겠습니다.

 

피그마 오른쪽 바 상단 박스에 화살표 아이콘을 확인해 주세요!

그리고 옆에 있는 화살표를 눌러보겠습니다.

 

 

프리셋과 프리뷰 둘 중 아무거나 눌러도 상관없습니다.

저는 프리뷰를 눌러볼게요.

 

 

이렇게 피그마 화면에 재밌는 화면이 나타난 걸 확인해 보실 수 있습니다.

내가 만든 앱이 가상이지만 모바일 화면에 나타나니 뭔가 실감이 나네요 :)

상단에 있는 화살표도 눌러 가면서 조작을 해보니 차례대로 움직이는 걸 확인해 볼 수 있었습니다.

 

이렇게 재밌는 UI 만들기 하루가 끝났는데요. 요즘 시간이 참 빠른 것 같다는 생각이 듭니다. 

남아있는 부트캠프의 날짜도 어느덧 70 며칠 밖에 안 남았는데 

어서 빨리 실력을 키워서 UI/UX 디자이너로 취업하는 날이 왔으면 좋겠습니다!

 

 


 

 

 

P.S

6) 슬라이드 앱 화면 만들기

ㅎㅎ 왠지 아쉬운 글이 될 것 같아서 추가적으로 더 작성해 볼까 합니다!

우리가 홈 화면을 만들 때 사용한 리스트 제목 레이아웃이 있잖아요?

프레임보다 개체가 클 때 사용 가능한 기능입니다. 

우리가 앱을 사용할 때 손가락으로 슬라이드를 하잖아요? 바로 그 기능입니다!

 

홈 화면 프레임을 선택해 준 상태에서

 

 

포지션이 스크롤 위드 페어런트를 확인해 주고 

오버플로우를 버티컬로 바꿔 주신 후 프리뷰로 확인해 주세요!

 

 

 

그럼 이제 프리뷰 화면을 슬라이드 해보시면 이렇게 화면이 움직이는 것을 확인해 보실 수 있습니다!

 

 

 

 

https://brunch.co.kr/@maju/42

 

 

사용자 인터뷰로 숨은 니즈 발견하기

사용자 인터뷰를 계획하고, 실행하고, 분석하기 | 최근 논문 작성과 수업에서 진행하는 프로젝트 덕분에 인터뷰를 진행해야 하는 경험을 여러 차례 갖게 되었다. 생각해 보면, 대학원 진학 전에

brunch.co.kr

 

 

인터뷰를 진행하기 위해서 많은 준비가 필요합니다.

일단 당연히 무엇을 위한 인터뷰인지에 대한 사전 준비는 필수겠죠?

오늘은 UX디자이너에게 필요한 인터뷰 사전 준비에 대해서 다루어 볼까 합니다.

 

이번 아티클을 읽고 UX디자이너에게 사용자를 어떻게 조사해야 하는지, 사용자를 어떻게 정의해야 하는지

좀 더 심층적으로 알 수 있게 된 글이었습니다.

 


01. 인터뷰를 하는 목적

UX디자이너에게 사용자란 그저 고객이 아닌 한명 한명의 소중한 자료가 될 수 있겠다는 생각이 들어요.

내가 만약 앱 또는 웹을 개발했다라면 그 앱 과 웹이 어떻게 좋은지? 불편한건 없는지? 각자 사용자들마다

생각도 다르고 사용법도 다르기 때문에 UX디자이너에게는 하나의 이정표가 될 수 있지 않을까 싶은데요.

인터뷰의 목적에 대해선 더블 위 이미지의 더블 다이아몬드 모델을 보며

발견 (Discover)과 정의(Define)에 대해서 알아보았습니다,

 

발견 단계에서는 사용자들의 경험을 관찰, 문제 정의에 필요한 단서를 찾는 단계입니다. 또한, 여러 현상 속에서 문제의 본질을 찾는 단계입니다.

이 후 정의 단계에서는 발견한 현황과 문제, 그리고 니즈를 정의하여 인사이트를 도출하는 작업을 하는 단계입니다.

이를 통하여 문제를 정확히 이해해 해결해야 할 핵심 니즈를 파악하여 이 후에 진행될 아이디어 발전 단계에 반영하는 것입니다.

 

프로젝트를 진행하기 전 또는 후에 인터뷰는 진행할 수 있습니다.

문헌이나 리포트 자료들로 충분한 데이터 수집은 가능하지만 우리는 UX디자이너를 위한 인터뷰이죠?

 

필드 리서치 즉, 사용자가 왜 그런 행동을 했는지 파악하기 위해 사용자와의 인터뷰가 필요합니다.

인터뷰를 통해 오랜 시간 동안 경험을 쌓은 대상에게 직접 질문하고, 이해함으로써 겉으로 드러나 있지 않은 

숨은 니즈를 발견할 수도 있습니다. 이런 경험은 UX디자이너에게 혼자서 고민해서 얻을 수 없는 '진짜 인사이트'를

발견할 수 있을 것 입니다.

 

 


02. 인터뷰 진행 과정

리서치 대상 선정에는 리서치 결과의 신뢰도를 높이는 결정짓는 중요한 작업입니다.

'어떤 이커머스'를 만들지에 대한 목표에 따라 리서치 대상을 정하는 것은 생각보다 까다로운 작업이 될 수 있습니다.

장소와 시간 어떻게 리서치 대상을 모을지는 위 링크에 상세하게 나와 있습니다.

 

인터뷰에 역시 중요한 건 질문이라고 할 수 있겠죠? 얼마나 중요한 질문을 하는가?, 인터뷰자의 속에 있는 인사이트를

어떻게 도출해 내는냐?는 질문의 품질에 따라 내가 원하는 인사이트를 받아 내는지 달라질 수 있습니다.

너무 딱딱하게 내가 얻고 싶은 것에만 몰두해 질문하게 된다면 당연히 100%로 좋은 인사이트를 얻어내기 힘들어 질 수도 있습니다.

 

리서치 대상과의 인터뷰가 힘들다면 아래 내용을 숙지 후 인터뷰를 진행하는 방법도 좋은 방법이 될 것 같습니다!

 

1) 라포 형성하기

인터뷰 시간이 60분이라고 했다면 5~10분 정도는 신뢰 관계를 쌓는 작업이 좋습니다. 

2) 인터뷰에는 정답이 없다는 말을 해주기

대부분의 대상자는 인터뷰가 처음인 사람이 많을겁니다. "인터뷰에는 정답이 없습니다."라는 말을 해주고, 어떤 대답이든 

공감과 가벼운 칭잔을 해주는 것이 좋습니다.

3) 인터뷰 중 답변을 받아 적지 말자

인터뷰 중 답변을 받아 적는 행동은 대상자의 말에 집중하지 못 하고 있다는 생각을 하게 할 수도 있습니다.

이 후에 녹음한 내용을 다시 들으면서 정리하는 것이 성공적인 인터뷰가 될 것입니다.

4) 꼬리에 꼬리를 무는 질문 ( 5 whys)

답변에 단순한 '왜요?'가 아닌 원인, 회의, 맥락, 제기, 패턴에 대한 질문이 좋습니다.

5) 질문에 중요도를 부여하자

인터뷰 질문지 작성 시 줄문의 중요도를 상, 중, 하로 구분하여 우선순위를 부여하는 것이 시간관리가 되어 효율적인 인터뷰가 가능해집니다.

 

03. 인터뷰 후, 분석 단계

인터뷰를 진행하였다면 발견한 문제와 정보를 간추리며 인사이트를 도출하는 것이 중요합니다.

리서치를 통해 사용자들이 어떻게 행동하는지, 어떤 문제를 겪고 있는지, 어떤 니즈가 있는지 등을 한눈에 볼 수 있도록 정리해보아야합니다,

이렇게 보기 좋게 정리가 되었다면 정리한 문제를 분류하고 유형화하여, 어떤 문제에 집중할지 고민하는 단계가 되면 

더욱 좋은 개발이 될 수 있게 되겠죠?

문제에 대한 자각,

자각이 되었다면 어떤 문제를 집중적으로 변화를 줄지 정해보는 시간이 좋겠죠?

 

 

저는 UI디자이너가 목표기는 하지만 UX디자인도 흥미가 생기는 글이였습니다 ^^

분명 앞으로 여정에서 UI만 할 거다! 라는 확신은 가지고 걸어가고 있지는 않기 때문에

사용자에 대한 조사가 이런식으로 이루어 지는 구나! 라는걸 알 수 있게 된 좋은 아티클 이었다고 생각합니다.

 

 

+ Recent posts