SlideShare uma empresa Scribd logo
1 de 129
Baixar para ler offline
Copyright© All rights reserved 조성봉
Consulting
Group
3. 경험 파악
Rightbrain UX Academy
Copyright© All rights reserved 조성봉
경험 파악
Copyright© All rights reserved 조성봉 3
UX/UI Design
경험 파악
사용자 경험(UX)은 서비스와 맥락에 따라서 매우 복잡해질 수 있으나, 경험 파악(맥락, 경험 파악, 고충, 니즈, 태도)만 알면 대부분 파악될 수 있다
사용자 경험 파악
감정
생각
행동
매력적인 형태, 시각요소
쉽게 이해가능한 구성, 배치
잘 이용할 수 있는 구조, 흐름
Copyright© All rights reserved 조성봉 4
UX/UI Design
경험 파악
제품/서비스를 구성하는 여러 가지 요소 중에서 실제 사용자 경험과 연관된 것들
경험요소
제품/서비스
경험의 대상
경험요소
사용자가 경험하는
제품/서비스에
내재된 요소
What
How
• 기능
• 정보
• 폼팩터
• 정책
• UI
• 디자인
• 이용절차
• 배열
• 안내
• 인증
• 에러 처리
• 커뮤니케이션
Copyright© All rights reserved 조성봉 5
UX/UI Design
경험 파악
사례 - '관객 확장 이니셔티브' 프로젝트 (미국 9개 교향악단)
경험요소
Copyright© All rights reserved 조성봉 6
UX/UI Design
경험 파악
경험요소와 경험간의 연결을 매끄럽게 하면 좋은 사용자경험을 이끌어 낼 수 있다
경험요소
사용자들이 해당 제품/서비스에서 경험하는 요소들을 모티브로 해서 디자인에 행동유도(Affordance)를 부여한 좋은 사례들
Copyright© All rights reserved 조성봉 7
UX/UI Design
경험 파악
경험요소와 경험간의 연결이 떨어지면 나쁜 사용자경험이 나올 확률이 높아진다
경험요소
이 공원 디자인 사례는 사람들의 동선이라는 경험요소를 고려하지 않고,
논리성만 강조했기 때문에 실제 사용자들의 경험과 괴리되었다
이 엘리베이터 버튼 배치는 많은 혼란을 불러일으킨다. 사용자들이 가고자 하는
층수와 실제 버튼 위치가 적절하게 매치되지 않고 있다. 무엇이 문제일까?
Copyright© All rights reserved 조성봉 8
UX/UI Design
경험 파악
경험요소와 경험간의 연결관계
경험요소
연결은 뛰어나지만 불안감을 자아낸다
Copyright© All rights reserved 조성봉 9
UX/UI Design
경험 파악
경험요소와 경험간의 연결관계
경험요소
보편적인 사용자보다는
특정 사용자들로 국한한다면...
Copyright© All rights reserved 조성봉 10
UX/UI Design
경험 파악
경험요소와 경험간의 연결관계
경험요소
굳이...??
Copyright© All rights reserved 조성봉 11
UX/UI Design
경험 파악
모빌리티 서비스(쏘카)에서의 경험요소
경험요소
<공간 확인>
• 지도 상에 표시
• 공간명 및 건물내 위치
• 지도 조작 (Pinch in/out)
<예약 정보 확인/변경>
• 이용시간 확인/변경
• 이용가능 차량 확인?
- 가격 확인
- 선택한 날짜 확인
<인터렉션>
• 뒤로가기
• Bottom-sheet up/down
• 차량 선택
<공간 확인>
• 지도 상에 표시
• 공간명 및 건물내 위치
• 지도 조작 (Pinch in/out)
<예약 정보 확인/변경>
• 이용시간 확인/변경
• 이용가능 차량 확인
• 다른 차량 확인?
<인터렉션>
• 훑어보기 (Scrolling)
• Bottom-sheet down
• 차량 선택
Copyright© All rights reserved 조성봉 12
UX/UI Design
경험 파악
기존 경험요소도 기술에 따라 그 양상이 달라지는 일이 많다. 그러나 진보된 기술을 받아들인다는 것이 반드시 좋은 UX를 담보하는 것은 아니다
경험요소
CONTINENTAL X GENESIS 3D GAUGE DISPLAY Continental 3D Ligghtfield
Copyright© All rights reserved 조성봉 13
UX/UI Design
맥락 (Context)
사용자 경험이 일어나는 배경, 특정한 상황과 전후의 문맥, 물리적인 공간과 시간도 맥락에 해당한다
맥락 (Context)
= 상황, 공간, 시간, 전후 문맥, 사회문화적 배경
맥락 (Context)
경험의 배경
Copyright© All rights reserved 조성봉 14
UX/UI Design
맥락 (Context)
맥락을 모르고 기능, 디자인만 강조한 제품/서비스는 사용자들로부터 외면받을 수 있다
맥락 (Context)
농구 경기장에 이런 시계가?
Copyright© All rights reserved 조성봉 15
UX/UI Design
맥락 (Context)
맥락을 알아야지만 비로소 그 사용자의 경험을 공감할 수 있다. 맥락을 모르고 행동, 고충, 니즈를 보게 될 경우 잘못 해석하는 경우도 있다
맥락 (Context)
추천상품이 필요
해요
추천상품이 필요
해요
이미 홈화면에
있어요
이미 홈화면에
있어요 대체 뭘 하
라는 거야?
대체 뭘 하
라는 거야?
검색하고 홈화면에 돌아
갔을 때, 검색어와 관련한
추천상품이 필요해요
검색하고 홈화면에 돌아
갔을 때, 검색어와 관련한
추천상품이 필요해요 …
…
검색의 맥락을 통
해 내 관심사를
알아줘야지?
검색의 맥락을 통
해 내 관심사를
알아줘야지?
Copyright© All rights reserved 조성봉 16
UX/UI Design
맥락 (Context)
서로 다른 이율 표시
맥락 (Context)
맥락을 감안했다면
좀 더 단순하게 표현 가능했을텐데..
Copyright© All rights reserved 조성봉 17
UX/UI Design
맥락 (Context)
사용자의 경험을 이해하기 위해서는 맥락을 아는 것이 필요하다
장소+시간+상황의 결합
Image source : Henry Perks/Unsplash
현위치 주변의 저녁먹을만한
장소를 찾고 있기는 한데, 이
렇게 일일이 정보를 살펴보
는 방법 밖에 없나요?
현위치 주변의 저녁먹을만한
장소를 찾고 있기는 한데, 이
렇게 일일이 정보를 살펴보
는 방법 밖에 없나요?
• 장소 : 번화가 한복판의 길거리
• 시간 : 저녁식사 무렵
• 상황 : 여자친구와의 데이트, 잘 알지 못
하는 지역 방문, 새로 사귄지 얼마 안된
여자친구
• 동기 : 그녀의 입맛에 맞는 조용한 분위기
의 저녁식사 장소를 찾고 싶음
• 행동 : 구글 지도에서 현위치 주변 맛집을
일일이 확인하고 있음
• 니즈 : 손품을 팔지 않고, 현 상황에 가장
적합한 맛집이 추천되기를 원함
Copyright© All rights reserved 조성봉 18
UX/UI Design
맥락 (Context)
누군가의 경험을 들여다 볼 때에는 맥락도 같이 봐야 함을 잊지 말자
맥락 분석하기
Copyright© All rights reserved 조성봉 19
UX/UI Design
맥락 (Context)
사용자의 경험을 이해하기 위해서는 맥락을 아는 것이 필요하다
장소+시간+상황의 결합
추천 결과가 내가 원하던 게
아닌데요?
추천 결과가 내가 원하던 게
아닌데요?
• 장소 : 버스 정류장
• 시간 : 퇴근 시간
• 상황 : 퇴근시 버스를 타기에 앞서서 클럽
하우스에 들어가서 관심사가 반영된 방에
들어가고자 함
• 동기 : 1시간 내외의 퇴근 시간동안 들을
만한 콘텐츠 찾기
• 행동 : 별다른 고민이나 탐색 절차 없이
홈화면에 추천된 방 중에서 선택
• 니즈 : 평소 클럽하우스에서의 활동내역
과 현재의 맥락을 기반으로 나한테 맞는
방이 추천되었으면 함
Copyright© All rights reserved 조성봉 20
UX/UI Design
맥락 (Context)
대부분의 경우 UX의 품질은 맥락과 관계되어 있다
맥락 분석하기
Source : Erik D. Kennedy
아래 '국가 선택(Country Selection)'은 단순한 작업이지만, 한편으로는 복잡한 작업이기도 하다. 200여개나 되는 국가들 중에서
하나를 선택하는 것도 어려운 일이지만, 우리나라의 경우 Korea, Repulic of Korea, Korea(South), South Korea 등 여러 개의
명칭들이 있어서 어떤 알파벳으로 가야할 지 헷깔리는 경우도 있다. 오른쪽처럼 검색에 의해서 선택이 가능하다면 훨씬 편리할 것이다
Copyright© All rights reserved 조성봉 21
UX/UI Design
맥락 (Context)
대부분의 경우 UX의 품질은 맥락과 관계되어 있다
맥락 분석하기
Source : Erik D. Kennedy
아래의 날짜 선택 UI 예시를 보면 왼쪽 월/일/년을 하나씩 선택하는 것은 틀리고, 캘린더를 통해서 선택하는 것이 맞다고 얘기하고
있는데.. 이 경우에는 맥락에 따라서 저자의 얘기가 맞을 수도 있고, 틀릴 수도 있다. 오늘을 기준으로 가까운 과거나 미래의 날짜를
선택할 때에는 저자의 아래 얘기가 맞다. 그러나 생년월일을 선택하는 경우를 생각해보라. 캘린더로 찾는 게 과연 더 바람직할 것인가?
Copyright© All rights reserved 조성봉 22
UX/UI Design
맥락 (Context)
누군가의 경험을 들여다 볼 때에는 맥락도 같이 봐야 함을 잊지 말자
맥락 분석하기
Source : Erik D. Kennedy
Quiz. 음악을 듣다가 이 곡을 새 플레이리스트에 담고 싶어졌다. 이 때 '플레이리스트 만들기' 버튼이 어디에 있는 게 맥락상 더 바람직할까?
A B
Copyright© All rights reserved 조성봉 23
UX/UI Design
맥락 (Context)
사용자 조작이 풍부해야 하는 조회 화면에서는 사용자 의도에 맞게 인터랙션이 설계돼야 한다
네이버 지도에서는 특정 장소를 선택할 때 기존에 보고 있던 지도 화면에 비해 확대된 척도(Scale)로 화면이 재설정되어 방향/위치 감각이 상실된다
맥락 분석하기
Copyright© All rights reserved 조성봉 24
UX/UI Design
맥락 (Context)
사용자 조작이 풍부해야 하는 조회 화면에서는 사용자 의도에 맞게 인터랙션이 설계돼야 한다
Q. 지도와 세부 정보를 동시에 보다가 Drawer를 밑으로 내렸을 경우 지도 척도는 어떻게 달라지는 게 맞을까요?
맥락 분석하기
A B
Copyright© All rights reserved 조성봉 25
UX/UI Design
경험 파악
인간은 누구나 보편적 심리 경향을 지니고 있다
사용자
사람들은 누구나 서비스 이용 과정에서 보편적 특성을 드러낸다
복잡함을 회피, 모양 차이보다 색상 차이에 더 주목, 한 번에 하나만 집중
위의 각 도형그룹들을 보면서 무엇과 무엇이
구분되시나요? 솔직하게 생각나는대로 말씀해 보세요
Copyright© All rights reserved 조성봉 26
UX/UI Design
경험 파악
인간은 사회적 동물이다
사용자
우리는 사회인(member of society) 가운데 한명으로써 유행이나 사회경제적
상황, 기술 트렌드, 세대적 성향 등에 의해 영향을 받는다
비대면 서비스 선호, 디지털로 모든 것을 추구, 가심비, 생체인증, 모바일 미디어
때로는 세대적 특성(Z세대, Y세대, X세대 등)이나 연령대별
특성에 따라서 서로간에 다른 경향을 보이기도 한다
Copyright© All rights reserved 조성봉 27
UX/UI Design
경험 파악
인간은 서로 다른 개성과 취향을 드러낸다
사용자
실제 우리 서비스를 이용하는 사용자 한 명, 한 명의 경험
조사방법 : 설문조사, 통계(데이터) 분석, 실시간 모니터링, 온라인 간접조사, 필드 리서치(직접
대면 인터뷰/관찰조사)
IoT, 빅데이터, AI 기술의 발달로 최근에는 실시간 모니터링을
통한 사용자 경험 조사도 많이 이뤄지고 있다
Copyright© All rights reserved 조성봉 28
UX/UI Design
Image source : PNGwing, entrepreneurhandbook Image source : PNGwing, brafton Image source : PNGwing, vye
Segment Archetype Persona
경험 파악
수많은 사용자들의 경험을 일일이 특정지을 수는 없으므로 우리는 사용자들을 공통점에 따라서 유형화 한다
사용자
Copyright© All rights reserved 조성봉 29
UX/UI Design
경험 파악
Archetype은 필드 리서치 이전에 제품/서비스의 전형적인 사용자들을 미리 정의하는 방법이다
사용자
Copyright© All rights reserved 조성봉 30
UX/UI Design
경험 파악
우리는 제품/서비스의 사용자를 알아야 한다
사용자
할 수 있는 것
직접
할 수 없는 것
1순위 : 괜히 손을 댔다가 실수 발생 시 오히려 비용이 더 커질 수 있는 위험 영역
(전자제품 소모품 교체, 계절별 케어)
2순위 : 보유 가전의 기능 제한이나 이사, 계절, 자녀 성장에 따른 대규모 변화
(매트리스 청소, 겨울 이불 세탁, 인테리어 시공, 입주 청소, 자녀 가구/벽지 교체 등)
3순위 : 큰 맘 먹고 시도해봄직한 대청소, 세밀한 청소, 가전 케어
(욕실 곰팡이 제거, 전등 교체, 세탁기 배수구 청소, 에어컨 청소 등)
자신없거나 번거로운 것
예시 : 주부들이 원하는 가사 도우미 서비스
Copyright© All rights reserved 조성봉 31
UX/UI Design
경험 파악
Red Routes
사용자
모든 사용자들이 항상 쓰는 서비스부터
~
일부 사용자들이 가끔 쓰는 서비스까지
Copyright© All rights reserved 조성봉 32
UX/UI Design
경험 파악
제품/서비스의 복잡성에 따라서 사용자는 다른 반응을 보인다
사용자
동일한 사용자라고 하더라도
우리의 서비스가 얼마나 단순~복잡한 지에 따라서
그들이 보이는 경험은 달라진다
source : Harvard Business Review
Copyright© All rights reserved 조성봉 33
UX/UI Design
경험 파악
동기는 행동을 만들어낸다. 사용자들은 행동하면서 고충과 니즈를 갖기 때문에 사실상 모든 ‘사용자 경험(UX)’은 동기로부터 시작된다고 해도 과언이 아
니다. 행동은 밖으로 드러나는 데 비해서 동기는 직접 확인하려고 들지 않는 이상, 알기 어렵다
동기와 행동
맥락 (Context)
경험의 배경
동기
행동의 이유
행동
경험의 발현
source : Ron Hurst
Copyright© All rights reserved 조성봉 34
UX/UI Design
경험 파악
동기는 목적의식과 관련되어 있다
동기
1. 아주 약한 목적 의식 : 심심해서, 현재의 따분한 기분을 바꾸고자
2. 습관적인 확인, 굳이 지금 할 필요는 없는 행동 : 새 소식, SNS, 알림 확인
3. 내적 동기가 있으나, 생략해도 무방함 : 뉴스, 음악, 신규 컨텐츠 확인
4. 지금 해야 하는, 주기가 짧은 행동들 : 날씨 확인, 버스 도착 정보 조회
5. 반드시 지금 해야 하는 주기가 긴 행동들 : 금전 거래, 메일 전송, 업무 처리
Copyright© All rights reserved 조성봉 35
UX/UI Design
경험 파악
동기는 의도이다
동기
① 어느 것이든 상관없이 관심있는 것을 보고 싶다 : 평소에 자주 쓰던 앱들을 전전
② 원하는 정보를 바로 찾고 싶다 : 특정 상품 찾기, 배송 조회, 잔액 조회
③ 특정 영역에 해당하는 정보를 모두 보고 싶다 : 오늘자 경제 뉴스, 오사카 여행 정보
④ 여러가지 대안 비교하고 하나 고르기 : 길 찾기 대중교통 정보, 가성비 노트북
⑤ 목적에 필요한 활동을 순차적으로 완성하기 : 여행지의 비행기-호텔-관광지 예약
Copyright© All rights reserved 조성봉 36
UX/UI Design
경험 파악
동기는 시간 속에서도 찾아볼 수 있다
동기
과거의 ‘어떤’ 사실
‘지금’의 정보
미래의 ‘예측’
지금까지의 패턴에 따른 ‘추천'
과거에서 현재까지의 ‘추이’
4
5
3
2
1
Copyright© All rights reserved 조성봉 37
UX/UI Design
경험 파악
행동은 크게 봐서 일련의 연속적인 이용 흐름과 특정 시점에서 보이는 구체적인 행위로 나눠진다
행동
Image source : uxmisfit.com Image source : applebase
Copyright© All rights reserved 조성봉 38
UX/UI Design
경험 파악
모바일에서의 연속된 이용 흐름은 보통 다음과 같이 진행되며, 이것을 다른 말로 사용자 여정(User Journey)이라고 부르기도 한다
행동
(외부)탐색 접근 탐색 조회 (주)활동 이탈
인증
개인화
• (외부)탐색 : 포털 검색, 가격비교, SNS, 메신저, QR 태그, 앱-앱 연동, 모바일웹-앱 연동
• (주)활동 : 구매, 예약, 거래 등
• (부가)활동 : 저장, 공유, 상담, 확인 등
(부가)활동
Copyright© All rights reserved 조성봉 39
UX/UI Design
경험 파악
이용 흐름 패턴 – 1. 연속적 흐름
행동
목적의식적인 동기, 진입후 기대한 결과에 이르기까지 서비스가 제시하는 흐름을 연속적으로 진행하는 행동
진입 탐색 조회 인증 주활동
Copyright© All rights reserved 조성봉 40
UX/UI Design
경험 파악
이용 흐름 패턴 – 2. 반복적 흐름
행동
목적의식적인 동기, 원하는 결과를 얻기까지 같은 행동(주로 탐색)이 반복되는 행동
검색 결과
재검색
진입
Copyright© All rights reserved 조성봉 41
UX/UI Design
경험 파악
이용 흐름 패턴 – 3. 일회성 조회/활동
행동
목적의식적인 동기, 원하는 결과를 바로 얻고 서비스를 이탈하는 행동
진입
조회
/ 활동
Copyright© All rights reserved 조성봉 42
UX/UI Design
경험 파악
이용 흐름 패턴 – 4. 설정을 통한 맞춤화
행동
준목적의식적인 동기, 원하는 결과를 얻기 위해서 좋아요/싫어요 등의 설정을 하거나 서비스가 사용자 데이터에 기반하여 개인화 제공
조회 설정
맞춤화
진입
Copyright© All rights reserved 조성봉 43
UX/UI Design
경험 파악
이용 흐름 패턴 – 5. 전체 영역내 비목적의식적인 행동
행동
비목적의식적인 동기, 원하는 결과를 얻기 위해서 전체 서비스 영역내에서 무작위적인 탐색과 조회를 번갈아하는 행동
조회 탐색
탐색
(연계된)
조회
진입 조회 …
…
Copyright© All rights reserved 조성봉 44
UX/UI Design
경험 파악
이용 흐름 패턴 – 6. 특정 영역내 비목적의식적인 행동
행동
비목적의식적인 동기, 특정 영역(예: 가구, 경제뉴스) 내에서 원하는 결과를 얻기 위해서 무작위적인 탐색과 조회를 번갈아하는 행동
조회 탐색
탐색
(연계된)
조회
진입 조회 …
… 특정 영역
Copyright© All rights reserved 조성봉 45
UX/UI Design
경험 파악
이용 흐름 패턴 – 7. 정해진 루틴에 따른 반복되는 활동
행동
목적의식적인 동기, 정해진 루틴에 따라서 같은 행동을 반복 (예: 게임, 헬스케어, 주식)
탐색/조회 활동
진입 탐색/조회 활동
진입
탐색/조회 활동
진입
#1 #2
#n
탐색/조회 활동
진입
#3
Copyright© All rights reserved 조성봉 46
UX/UI Design
경험 파악
행위 = 인터렉션
행동
Source : justinmind
Copyright© All rights reserved 조성봉 47
UX/UI Design
경험 파악
우리가 어떻게 UX/UI를 디자인하느냐에 따라서 사용자의 불필요한 행위가 줄어들고, 매끄럽게 이용흐름이 연결될 수 있다
행동
Copyright© All rights reserved 조성봉 48
UX/UI Design
경험 파악
디지털 서비스에서 사용자 행동 설계시 가장 유의할 점은 '사용자들은 그들의 행동을 최소화하고 싶어한다'는 점이다
행동
가급적 귀찮게 하지 않는다
Copyright© All rights reserved 조성봉 49
UX/UI Design
경험 파악
고객에게 확인을 요청하는 것이 때로는 귀찮고 성가신 일인 경우도 많다. 반면에 고객의 확인없이 진행할 수 없는, 꼭 필요할 때도 있다.
행동
고객에게 행동을 요청할 때에는 그 경
중에 따라서 때로는 명시적으로, 때로
는 암묵적으로 진행될 필요가 있다
Copyright© All rights reserved 조성봉 50
UX/UI Design
경험 파악
사용자들의 행동을 최소화시킨다
행동
해당 화면에서 해야 할 첫번째 행동이 입력이라면 진입하자마자 그것이 가능하게 한다
Copyright© All rights reserved 조성봉 51
UX/UI Design
경험 파악
사용자들은 이미 한 행동을 되돌이키고 싶어할 때가 많다
행동
뒤로가기, 임시저장, 회수하기 등의 옵션으로 이미 한 행동을 돌이키거나 멈추게 한다
Copyright© All rights reserved 조성봉 52
UX/UI Design
경험 파악
사용자들은 이전에 한 행동들을 다시 찾는 경우가 많다
행동
최근 본 상품, 최근 검색어, 최근 이용한 카드, 최근 이체한 계좌...
Copyright© All rights reserved 조성봉 53
UX/UI Design
경험 파악
불필요한 행위가 줄어든 것 만으로도 UX 품질(특히 사용성)이 많이 향상된다
행동
Copyright© All rights reserved 조성봉 54
UX/UI Design
경험 파악
뒤로가기(Back key) 탐색
네이버 모바일 쇼핑 판에서 마음에 드는 상품에 들어가서 리뷰를 보다가 뒤로가기를 누르면 상품 정보가 아닌 목록으로 건너뛴다. 사용자 입장에서는 상품 목록에서 특
정 상품을 선택해 상품 정보를 보다가 리뷰 탭을 선택해서 리뷰를 봤기 때문에 뒤로가기 했을 때 이동해야 하는 위치가 목록보다는 상품 정보인 게 더 바람직하다
행동
Copyright© All rights reserved 조성봉 55
UX/UI Design
경험 파악
뒤로가기(Back key) 탐색
행동
목록 상품A 상품B 상품C …
동일 유형의 화면을 꼬리를 물면서(Berry Picking) 돌아다닌 끝에 뒤로가기를 누른 경우에는 그
사이에 돌아다닌 화면들을 일일이 거치지 않고, 상위 위계(hieararchy) 화면으로 가는 게 맞다
Copyright© All rights reserved 조성봉 56
UX/UI Design
경험 파악
행동유도성(Affordance)과 상태(Signifier)를 잘 고려하면 우리는 우리가 원하는 사용자들의 행위를 이끌어 낼 수 있다
행동
Affordance
Signifier
Copyright© All rights reserved 조성봉 57
UX/UI Design
경험 파악
행동유도성(Affordance)과 상태(Signifier)에 제품/서비스의 특성을 반영하면 ‘Something Different’가 일어난다
행동
Copyright© All rights reserved 조성봉
왜
동기
어떻게
행동 (연속적 흐름 + 구체적 행위)
무엇을
경험요소
누가
archetype,
Persona
힘들어
고충
필요해
니즈
과연?
태도
심성 모형 (Mental Model)
맥락 (Context)
보편적 심리, 사회적 속성
관여도
가치 판단
속성 신념
지각적 조직화
지각적 해
석
무엇을
경험요소
무엇을?
경험요소
전달하고자 하는
가치
현재의
경험 파악
확실한 문제
확실하지 않은 이슈
조사 문제 정의
라이트브레인 컨설팅그룹 월요 교육 01
Copyright© All rights reserved 조성봉 59
UX/UI Design
경험 파악
일반인들은 UX라고 하면 사람들의 고충을 해결하는 일이라고 알고 있을 것이다. 그래서 더 편리하게, 쉽게, 즐겁게 만들어 달라고 말할 것이다. 고충이 UX
의 전부는 아닐지라도 고충을 해결하는 것은 서비스의 만족도 유지를 위해서 매우 중요한 일이다
고충(Pain Point)이란?
사람으로써 사물을 인식/이해/해석하는 본성을 거스름
사회인으로써 현 시대 트랜드와 맞지 않음
사용자로써 서비스 이용이 매끄럽지 못함
Copyright© All rights reserved 조성봉 60
UX/UI Design
경험 파악
고충의 정도에 따라 사용자들은 단순히 불만을 토로하는 것에서 그치지 않고, 서비스에 대해 반발심을 갖거나, 심지어는 적극적인 이탈 후 부정적인 입소문
을 내는 데 앞장서기도 한다
고충(Pain Point)이란?
Copyright© All rights reserved 조성봉 61
UX/UI Design
사용성 원칙
사용성은 사용(Use) + 능력(Ability)가 결합된 용어로, 사용자들이 얼마나 쉽고 효율적이며 만족스럽게 쓰는 가를 의미하는 말이다. 사용성 원칙은 사용성
측면에서 반드시 지켜야 할 원칙들을 체계화시킨 것이다
사용성 원칙이란?
Copyright© All rights reserved 조성봉 62
UX/UI Design
사용성 원칙
사용성 원칙은 다음과 같은 20가지로 구성된다
사용성 원칙 20가지
Copyright© All rights reserved 조성봉 63
UX/UI Design
사용성 원칙
사용자의 행동에 대한 서비스의 반응. 사용자가 서비스의 상태를 이해하기 쉽게 인지 할 수 있는지 여부 (ex. 모래시계, 다운로드 중)
효율성 > 반응성
Copyright© All rights reserved 조성봉 64
UX/UI Design
사용성 원칙
사용자가 자신이 원하는 Task를 쉽고 빠르게 마무리 할 수 있는 지 여부 (ex. 단축키, 즐겨찾기, 바로가기 등의 단축경로, 자동완성, 내비게이션, 링크)
효율성 > 단축성
Copyright© All rights reserved 조성봉 65
UX/UI Design
사용성 원칙
사용자가 범할 수 있는 실수를 사전에 방지하는지 여부 (ex. 예시 제시, 비활성화, 경고 문구)
정확성 > 사전방지성
Copyright© All rights reserved 조성봉 66
UX/UI Design
사용성 원칙
서비스의 오류가 발생한 시점에 즉각적인 조치를 취하는 지 여부 (ex. 오류 팝업, 느낌표)
정확성 > 오류발생감지성
Source : Marc Andrew
Copyright© All rights reserved 조성봉 67
UX/UI Design
사용성 원칙
서비스를 통해 사용자가 행한 오류를 정정할 수 있는지 여부 (뒤로가기 버튼, 자동저장)
정확성 > 오류회복성
Copyright© All rights reserved 조성봉 68
UX/UI Design
사용성 원칙
서비스가 정확히 정보를 제시하고 있는지 여부
정확성
Copyright© All rights reserved 조성봉 69
UX/UI Design
사용성 원칙
서비스 내부에서 변화된 값을 사용자가 인지할 수 있는지 여부(ex. New아이콘, 로그인 팝업, 파일 저장 후 자동실행)
의미성 > 변화제시성
Copyright© All rights reserved 조성봉 70
UX/UI Design
사용성 원칙
전달된 정보를 사용자가 이해할 수 있는지 여부. ※ 사용성 원칙들 중에서 가장 기본적이고, 중요하다
의미성 > 이해가능성
Copyright© All rights reserved 조성봉 71
UX/UI Design
사용성 원칙
초보 사용자가 서비스를 과업의 특성에 맞게 설정가능하며 자연스럽게 학습하여 유용하게 작업 할 수 있는지 여부
의미성 > 학습성
Copyright© All rights reserved 조성봉 72
UX/UI Design
사용성 원칙
방금 전 행위를 기억하지 못해도 서비스에서 인지할 수 있는지 여부 (최근 검색어, 로그인 자동저장)
의미성 > 기억성
Copyright© All rights reserved 조성봉 73
UX/UI Design
사용성 원칙
사용자의 행위를 적절한 형태나 액션을 통해 제공하고 있는지 여부
의미성 > 행동유도성
Copyright© All rights reserved 조성봉 74
UX/UI Design
사용성 원칙
사용자가 원하는 대로 서비스와 상호작용 할 수 있는지 여부 (설정 편집, 필터 저장)
유연성 > 사용자주도권
Copyright© All rights reserved 조성봉 75
UX/UI Design
사용성 원칙
서비스 이용 제한, 업그레이드 필요 등 강제성을 지니는지 여부
유연성 > 서비스주도권
Copyright© All rights reserved 조성봉 76
UX/UI Design
사용성 원칙
사용자가 특정 과업을 수행할 때, 두 가지 이상의 대안이 있어 적절한 방법을 선택할 수 있는 지 여부
유연성 > 대체성
Copyright© All rights reserved 조성봉 77
UX/UI Design
사용성 원칙
사용자가 한 번에 두 개 이상의 작업을 동시에 수행할 수 있도록 하는 속성 (멀티태스킹, 복합 검색, 선택의 폭)
유연성 > 다중성
Copyright© All rights reserved 조성봉 78
UX/UI Design
사용성 원칙
사용자의 취향이나 특성에 따라 서비스의 현재 상태를 변화시킬 수 있는지 여부 (ex. 스킨 변경, 비슷한 상품 추천, 북마크)
유연성 > 개인화
1) 사용자 가치 적용 사회적 가치가 반영된 다양한 커스텀 리스트를 제공
선택한 가치에 맞는 콘텐츠와 커스텀 화면을 위젯
형태로 제공
2) 전체 UI 방식에 영향을 주는 모드로 가치 반영 제어센터를 통해 모드 실행
실행된 모드를 아이콘으로 노출
해당 모드에 맞춰 인터랙션 변화
모드에 맞춰 UI 크기 및 구성 변화
3) GUI 테마 변경
테마에 맞는 디자인 요소 적용
Copyright© All rights reserved 조성봉 79
UX/UI Design
사용성 원칙
서비스간의 연결이 쉬운지 여부 (ex. 하드웨어적 연동성, 소프트웨어적 호환성)
유연성 > 연결성
Copyright© All rights reserved 조성봉 80
UX/UI Design
사용성 원칙
사용자가 자신의 경험에 비추어 행동에 대한 결과를 예측할 수 있는지 여부 (ex. 익숙한 아이콘, 툴바, 마우스 오버)
일관성 > 예측가능성
예측가능성은 기능-결과간 적절한 맵핑과 관련되어 있다
97%까지 3분 소요. 97%부터 15분 소요?
Copyright© All rights reserved 조성봉 81
UX/UI Design
사용성 원칙
사용자가 자신의 경험을 바탕으로 서비스를 사용하는 데 필요한 지식을 습득할 수 있는지 여부 (눈에 익은 메타포의 사용, 친숙한 용어의 사용, 직관성이 높
은 요소 사용)
일관성 > 친숙성
Copyright© All rights reserved 조성봉 82
UX/UI Design
사용성 원칙
한 서비스 안에서 일관성을 가지고 UI 스타일 가이드를 제공하며, 규칙적으로 서비스에 적용하고 있는지에 대한 여부 (ex. 레이아웃, 폰트, 버튼 형식 등 페
이지마다 일관적인 UI 요소를 사용)
일관성 > 일반화 가능성
Source : Thai Dang
Source : Marc Andrew
Copyright© All rights reserved 조성봉 83
UX/UI Design
사용성 원칙
이건 어디에 해당할까요?
Copyright© All rights reserved 조성봉
휴리스틱 평가
Copyright© All rights reserved 조성봉 85
UX/UI Design
휴리스틱 평가
UX 디자인에서 진행하는 프로젝트들은 '문제 해결'이 아닌, '문제 발견'까지만 진행하는 경우도 많다
문제 진단의 여러가지 방법들
휴리스틱 평가 사용성 테스트(UT) 설문조사 A/B 테스트
특징
검증된 사용성 테스트 체계를 이용하여
전문가들이 점수를 부여하고 그 결과를
취합함으로써 신속한 평가가 가능
실제 사용자들을 섭외하여 소요시간,
업무 효율성, 에러율 등을 파악 → 사
용자 고충을 면밀하게 진단
서비스 이용 맥락, 현황, 의견, 행태,
만족도 등에 대해서 다수 사용자들을
대상으로 신뢰할 수 있는 결과 수집
복수 개의 프로토타입 중 어떤 것
이 사용자 입장에서 더 바람직할
지(A/B)를 다수 의견으로 결정
활용방법
✓ 휴리스틱 설계
✓ 휴리스틱별 가중치 반영
✓ 전문가에 의한 평가
✓ 평가 결과 반영 → 휴리스틱 보완
✓ UT 대상 업무(Task) 선정
✓ UT 참여자 모집(리쿠르팅)
✓ 정량적인 지표(소요시간, 이동단
계, 성공률, 에러율) 구성
✓ UT 진행
✓ 설문조사 기본 형식 및 내용 정의
✓ 실제 설문조사 질의서 작성
✓ 설문조사 진행
✓ 설문조사 결과 분석
✓ 프로토타입 준비
✓ A/B 테스트용 툴(예: google
optimize)을 활용한 진행
✓ 결과 → A/B 중 선택
단점
초반 체계 수립에 많은 노력이 요구됨,
몇몇 UX 전문가들의 주관적인 판단에
근거하여 세부 문제는 놓칠 수 있음
참여자 모집에 시일 소요, 테스트 소
요시간(약 1시간) 제약으로 인해 제
한된 범위에서 진행될 수 밖에 없음
결과가 표면적이기 때문에 단독으로
사용성 테스트를 하기에는 부족, 신
뢰도를 위한 표본집단 모집이 힘들
수 있음
다른 평가 방법에 비해서 얻을 수
있는 결과가 제한적임 (A or B)
정성 / 정량 둘 다 가능 (정성 < 정량) 둘 다 가능 (정성 > 정량) 둘 다 가능 (정성 <<< 정량) 정량
방
식
1회 진단 평가 ○ ◐ ○ ●
오픈전/후비교평가 ● ● ◐ ○
정기적 진단 평가 ◐ ○ ● ○
● : best, ◐ : good, ○ : soso
Copyright© All rights reserved 조성봉 86
UX/UI Design
휴리스틱 평가
휴리스틱 평가 위치
전체 프로세스
휴리스틱 평가
휴리스틱 평가
Copyright© All rights reserved 조성봉 87
UX/UI Design
휴리스틱 평가
UX전문가가제품/서비스와관련된사용성원칙을기준으로사용성문제점을도출하는방법(Browmanetel,2001;NielsonandMolich,1990)
휴리스틱 평가란?
휴리스틱 평가의 장점과 한계
• 장점
- 빠른 시간안에 사용성 문제점 진단
- 폭넓은 범위에 대해 진행 가능
- 비교적 정확하게 사용자 고충을 찾을 수 있음
• 한계
- 진단된 고충들이 실제 사용자에게 관여도가 높
은지/빈번하게 이뤄지는지/실생활에 긴요한 지
알기 어려움
- 실제 맥락과는 동떨어져서 경험요소 각각의 UX
품질만 가지고 판단한 것이기 때문에 실제 UX
와는 다를 수 있음
해당 맥락에서는 고충이란 생각이 안들었음
그다지 중요하지 않음
전혀 신경 안쓰임
Copyright© All rights reserved 조성봉 88
UX/UI Design
평가 계획 평가 진행 평가 결과 리포팅
No 분석 기준 분석 기준 상세
1 간결성 불필요하거나 상관없는 정보 및 화면을 포함하지 않고 명료하게 구성되어 있는가?
2 개인화 사용자의 개인 정보 및 취향을 고려한 영역이 구성되어 있는가?
3 개인화 사용자의 특성 및 활동이력에 최적화된 정보 구조를 제공하고 있는가?
4 논리성 사용자가 논리적으로 납득할 수 있는 방식으로 정보가 구조화되어 있는가?
5 단축성 주요 정보 및 기능이 홈/메뉴 등을 통해 쉽게 접근할 수 있도록 위치하여 있는가?
6 일반화가능성 시스템 내에서 일관적이고 규칙적인 정보 구조 및 위계를 제공하고 있는가?
7 학습성 정보 구조 및 위계에 대해 쉽게 학습할 수 있는가?
8 가독성 사용자에게 전달된 위치 정보를 명확하게 읽어낼 수 있도록 표현되어 있는가?
9 기억가능성 사용자가 이전 또는 직전의 경로를 기억하지 못해도 시스템에서 인지할 수 있는가?
10 논리성 사용자가 논리적으로 납득할 수 있는 방식으로 내비게이션이 제공되고 있는가?
11 단축성 사용자의 조작 및 수행방식을 단축할 수 있는 내비게이션 방식을 제공하는가?
12 대체성 사용자가 시스템 전체 구조를 알 수 있는 여러 대안을 제공하여 원하는 방식을 선택하여 사용할 수 있는가?
13 사용자주도권 사용자가 자신이 원하는 방식으로 시스템 내에서 이동이 가능한가?
14 연결성 다른 시스템 및 경로와의 연동 및 호환이 매끄러운가?
15 예측가능성 사용자가 이동 가능 경로를 예측할 수 있는 내비게이션 방식을 제공하는가?
16 일반화가능성 시스템 내에서 일관적이고 규칙적인 내비게이션 방식을 제공하고 있는가?
17 일반화가능성 시스템 내에서 일관적이고 규칙적인 레이블을 제공하고 있는가?
18 직관성 각 레이블은 담고 있는 정보/콘텐츠를 대표하며 직관적으로 보여지고 있는가?
19 친숙성 사용자의 경험을 바탕으로 레이블의 용어 및 형태를 이해할 수 있는가?
20 가독성 사용자에게 전달된 검색 결과를 명확하게 읽어낼 수 있도록 표현되어 있는가?
21 간결성 검색 내 불필요하거나 상관없는 요소를 포함하지 않고 명료하게 구성되어 있는가?
22 개인화 사용자가 자신만의 검색 방식으로 검색을 진행할 수 있는가?
23 기억가능성 사용자가 이전 또는 직전에 수행한 검색 내용을 기억하지 못해도 시스템에서 인지할 수 있는가?
24 논리성 사용자가 논리적으로 납득할 수 있는 방식으로 검색이 제공되고 있는가?
25 다중성 사용자가 한 번에 두 가지 이상의 조건으로 검색을 동시에 수행할 수 있는가?
26 단축성 원하는 결과를 탐색하기 위해 조작 및 수행방식을 단축할 수 있는 검색 방식을 제공하는가?
27 대체성 사용자에게 다양한 검색 방식을 제공하고 있는가?
28 연결성 검색 결과를 토대로 다른 시스템 및 경로와의 연동 및 호환이 매끄러운가?
29 일반화가능성 시스템 내에서 일관적이고 규칙적인 검색 작동 및 노출 방식을 제공하고 있는가?
30 주목성 검색 결과에서 주목해야할 요소가 적절히 강조되어 있는가?
31 학습성 검색 기능의 작동 원리 및 방식을 쉽게 학습할 수 있는가?
32 효율성 검색 기능을 효율적으로 사용할 수 있는 도구 및 기능을 제공하고 있는가?
33 간결성 불필요하거나 상관없는 요소를 포함하지 않고 명료하게 구성되어 있는가?
34 개인화 사용자가 자신의 상황이나 취향에 따라 구조를 조정할 수 있는가?
35 논리성 사용자가 논리적으로 납득할 수 있는 방식으로 구조가 제공되고 있는가?
36 대체성 화면 특성에 따라 두 가지 이상의 대안을 제공하여 원하는 방식을 선택하여 사용할 수 있는가?
37 시의성 트렌드에 뒤쳐지지 않은 구조적 형태를 구현하고 있는가?
38 일반화가능성 시스템 내 유사 위계/기능의 화면에서 일관적이고 규칙적인 구조를 제공하고 있는가?
39 주목성 현재 상태에서 주목해야할 요소가 적절히 강조될 수 있는 구조로 구성되어있는가?
40 가독성 노출된 구성요소를 명확하게 읽어낼 수 있도록 표현되어 있는가?
41 간결성 불필요하거나 상관없는 요소를 포함하지 않고 명료하게 구성되어 있는가?
42 논리성 사용자가 논리적으로 납득할 수 있는 방식으로 구성요소가 제공되고 있는가?
43 예측가능성 사용자가 이전 경험에 비추어 노출된 구성 요소 사용 시 이에 대한 결과를 예측할 수 있는가?
44 일반화가능성 시스템 내 구성요소에 대해 일관적이고 규칙적인 작동 및 노출 방식을 제공하고 있는가?
45 주목성 현재 상태에서 주목해야할 요소가 적절히 강조되어 있는가?
46 직관성 시스템에서 제공되는 표현이 해당 과업을 대표하며 직관적으로 보여지고 있는가?
47 친숙성 사용자의 경험을 바탕으로 구성 요소의 형태 및 기능 등을 이해할 수 있는가?
48 간결성 필수 입력 항목과 선택 입력 항목이 명료하게 구성되어 있는가?
49 기억가능성 사용자가 이전에 입력/선택한 내용을 기억하지 못해도 시스템에서 인지할 수 있는가?
50 논리성 사용자가 논리적으로 납득할 수 있는 형태로 입력/선택 방식이 제공되고 있는가?
51 단축성 사용자가 입력/선택을 진행하는 동안 수행방식을 단축할 수 있는 수단을 제공하는가?
52 사전방지성 사용자가 오류를 저지를 수 있는 가능성을 미연에 제거하거나 방지하고 있는가?
53 일반화가능성 시스템 내에서 일관적이고 규칙적인 입력/선택 방식을 제공하고 있는가?
54 직관성 입력/선택을 요구하는 항목이 이를 대표하며 직관적으로 보여지고 있는가?
55 학습성 현재 진행 중인 항목에 적합한 입력/선택방식을 쉽게 학습할 수 있는가?
56 효율성 입력/선택을 효율적으로 진행할 수 있는 도구 및 기능을 제공하고 있는가?
57 가독성 사용자에게 전달된 정보를 명확하게 읽어낼 수 있도록 표현되어 있는가?
58 논리성 사용자가 논리적으로 납득할 수 있는 방식으로 정보가 제공되고 있는가?
59 시의성 트렌드에 뒤쳐지지 않은 방식으로 정보/콘텐츠를 전달하고 있는가?
60 일반화가능성 정보/콘텐츠의 구성 및 노출 방식을 일관적이고 규칙적으로 제공하고 있는가?
61 친숙성 사용자의 경험을 바탕으로 쉽게 이해할 수 있는 형태로 정보/콘텐츠가 노출되고 있는가?
62 가독성 사용자에게 전달된 상태 정보를 명확하게 읽어낼 수 있도록 표현되어 있는가?
63 기억가능성 사용자가 이전 또는 직전에 진행한 내용을 기억하지 못해도 시스템에서 명확히 상태로 나타내고 있는가?
64 논리성 사용자가 논리적으로 납득할 수 있는 방식으로 상태 정보 및 통제 방식이 제공되고 있는가?
65 변화제시성 시스템 내부 상태(변화)에 대해 사용자가 해당 상태(변화)를 즉시 또는 접근 시 감지할 수 있는가?
66 사전방지성 사용자가 사용할 수 없는 기능/요소들에 대한 상태가 명확히 나타나는가?
67 예측가능성 사용자가 이전 경험에 비추어 현재 상태에 대한 결과를 예측할 수 있는가?
68 일반화가능성 서비스 및 사용자의 상태에 대해 일관적이고 규칙적인 노출 방식을 제공하고 있는가?
69 주목성 현재 상태 정보가 적절히 강조되어 있는가?
70 개인화 사용자가 자신의 상황이나 취향에 따라 인터랙션을 설정하거나 구성할 수 있는가?
71 단축성 사용자가 자신이 원하는 과업을 간단하게 마무리할 수 있는 인터랙션 방식을 제공하고 있는가?
72 반응성 사용자의 인터랙션 동작에 따라 시스템이 지체없이 반응하는가?
73 시의성 트렌드에 뒤쳐지지 않은 인터랙션을 구현하고 있는가?
74 예측가능성 사용자가 이전 경험에 비추어 인터랙션에 대한 결과를 예측할 수 있는가?
75 일반화가능성 시스템 내에서 일관적이고 규칙적인 인터랙션 방식을 제공하고 있는가?
76 차별성 본 시스템만의 차별화된 컨셉 및 기능이 적용된 인터랙션을 제공하고 있는가?
77 친숙성 사용자의 경험을 바탕으로 인터랙션의 방식 및 형태 등을 이해할 수 있는가?
78 효율성 시스템을 효율적으로 사용할 수 있는 인터랙션을 제공하고 있는가?
분석 대상
분석 대상 및 기준_LG하우시스
IA 정보구조
내비게이션
레이블
검색
UI Layout
Output Component
Input Component
정보/콘텐츠
상태
인터랙션
A. 카테고리 분류 B. 평가 항목 설계 D. 결과 분석
C. 평가
최종 산출물 예시
휴리스틱 평가 체계를 먼저 만든 다음에 소수의 전문가에 의해서 서비스의 문제점을 진단
평가 방식
Copyright© All rights reserved 조성봉 89
UX/UI Design
평가 방식
가중치 부여, 평가 문항(Heuristic)
Category Sub Category Check List A B C 평점 가중치 개선
요구도
사용자들은 시스템에서 자신의 업무를 쉽게 찾고 편리하게 수행할 수 있는가? 1.0 2.0 3.0 2.0 1.58 4.7
사용자들의 수행능력을 충분히 고려하여 설계되었는가? 1.0 2.0 3.0 2.0 1.58 4.7
사용자들의 평균적인 이용환경을 고려하여 설계되었는가? 1.0 2.0 3.0 2.0 1.58 4.7
긴급을 요하는 업무(또는 정보)에 빠르게 접근할 수 있는가? 1.0 2.0 3.0 2.0 1.58 4.7
사용자들이 시스템의 에러나 불만사항을 원활하게 제기할 수 있는가? 1.0 2.0 3.0 2.0 1.18 3.6
시스템의 현재 상태와 현재 사용 가능한 기능이 어떤 것이 있는지 사용자가 직관적
으로 알 수 있는가?
1.0 2.0 3.0 2.0 1.18 3.6
어떤 메뉴 항목이 선택되었는지와 사용자가 어느 위치에 있는지를 시스템이 명확하
게 표시하고 있는가?
1.0 2.0 3.0 2.0 1.18 3.6
시스템에 대해서 이용방법을 쉽게 배울 수 있는 경로가 존재하는가? 1.0 2.0 3.0 2.0 1.58 4.7
처음 시스템을 사용하는 사용자들도 시스템에 빠르게 적응할 수 있는가? 1.0 2.0 3.0 2.0 1.58 4.7
새로운 메뉴가 신설될 경우, 기존 사용자들은 별도의 교육없이도 스스로 해당 메뉴
에 적응할 수 있는가?
1.0 2.0 3.0 2.0 1.58 4.7
사용자 이용 수준에 따라 다양하고 점진적인 형식으로 학습 경로를 제공하고 있는 1.0 2.0 3.0 2.0 1.58 4.7
사용자의 공간적인 기억을 돕기 위해 디자인 요소나 네비게이션이 차별화되어 있는 1.0 2.0 3.0 2.0 1.58 4.7
자주 하지는 않지만 필수적인 작업은 그 순서가 기억하기 쉬운가? 1.0 2.0 3.0 2.0 1.58 4.7
메뉴 항목들이 사용자들로 하여금 기억하기 쉽게 여러 단서를 제공하는가? 1.0 2.0 3.0 2.0 1.58 4.7
입력창에서 어떤 필드에 입력이 필요한지를 기억하기 쉽게 표시하고 있는가? 1.0 2.0 3.0 2.0 1.58 4.7
업무처리에 도움이 되는 정보들이 제공되고 있는가? 1.0 2.0 3.0 2.0 1.58 4.7
효과적인 커뮤니케이션 방법을 제공하고 있는가? 1.0 2.0 3.0 2.0 1.58 4.7
사용자가 필요로 하는 부가적인 다른 기능들을 효과적으로 제공하고 있는가? 1.0 2.0 3.0 2.0 1.58 4.7
유용성
기억가능성
사용자 컨텍스
트
사용자 고려
학습가능성
상호작용
Category 포인트 가중치 Category Sub Category 포인트 가중치
사용자 컨텍스트 2.0 1.50 사용자 고려 2.0 1.58
업무/서비스 1.5 1.13 상호작용 1.5 1.18
IA 1.5 1.13 학습가능성 2.0 1.58
UI 1.5 1.13 기억가능성 2.0 1.58
인터렉션 1.0 0.75 유용성 2.0 1.58
디자인 0.5 0.38 업무기능 2.0 1.75
모니터링 0.5 0.44
프로세스 1.5 1.31
협업 1.5 1.31
상관없음 0 거버넌스 1.0 0.88
약간 상관 0.5 커뮤니케이션 1.5 1.31
보통 1 사용자관여 1.0 0.88
중요 1.5 정보구조 2.0 1.61
매우 중요 2 네비게이션 1.5 1.21
레이블 1.0 0.80
검색 1.0 0.80
개인화 1.5 1.21
IA
업무/서비스
사용자 컨텍스트
Copyright© All rights reserved 조성봉 90
UX/UI Design
평가 방식
결과 : 영역별 평점
Copyright© All rights reserved 조성봉 91
UX/UI Design
사용성 품질 수준 평가 단순 사용성 문제 진단
기준 : 점수 (1~7)
점수를 통한 UX 품질의 수준을 평가
얼마나 문제가 심각한가?
기준 : 1(긍정), 0(평가 보류), -1(부정)
문제가 있는지, 그것이 어떤 문제인지 진단
어디에 문제가 있는가?
사용성 품질에 대한 수준 평가 vs 단순 사용성 문제 진단
평가 방식
Copyright© All rights reserved 조성봉 92
UX/UI Design
평가 대상 (디자인 영역) 평가 기준 (사용성 원칙)
UI
일반화 가능성
구성의 적절성
유용성
행동유도성
변화제시성
구조의 적절성
적절성
이해가능성
배치의 적절성
주목성 단축성
일반화 가능성
유용성 가독성 이해가능성
반응성 단축성 친숙성 일반화 가능성
Layout
UI Elements
상태
인터랙션
GUI
정보/콘텐츠
학습성
가독성 적절성 이해가능성 시의성 일반화 가능성
IA
접근성
단축성
일반화 가능성
정확성
기억성
이해가능성
대체성 연결성
구조
내비게이션 이해가능성
레이블
Context
반응성
변화제시성
학습성
학습성 연결성
사용자
서비스
Flow
개인화
반응성
사용자 주도권
사전방지성 오류발생감지성 오류회복성
연결성 예측가능성
사용자 대응
피드백
절차 진행 일관성
예측가능성 일반화 가능성
정확성
일반화 가능성
사용자 주도권 서비스 주도권 개인화
일반적으로 UX/UI에서 자주 사용하는 휴리스틱 평가 기준
평가 기준
Copyright© All rights reserved 조성봉 93
UX/UI Design
1. 영역별 주요 문제 분포
평가 결과
Copyright© All rights reserved 조성봉 94
UX/UI Design
2. 분석 종합
평가 결과
Copyright© All rights reserved 조성봉 95
UX/UI Design
3. 상세 문제점 분석
평가 결과
Copyright© All rights reserved 조성봉 96
UX/UI Design
개선 우선순위 도출
✓ 고객 만족에 영향을 주는 요인을 찾아내고 개선의 우선 순위를 도출하는데 효과가 있음
✓ 동일 항목에 대해 평가자에게 ‘만족 정도’와 ‘불만족 정도’를 동시에 수집해 비교
하여 항목에 대한 관심도를 분석
+
동일 항목에 대해 얼마나 불만족 하는지로 다시 평가
리커트 척도를 활용해 얼마나 만족하는지 평가 개선시급도 B > C > A > D
✓ A영역: 고객이 진실로 만족한 영역, 고객만족을 위해 이 영역에 속한 요인들을 현재
대로 유지
✓ B영역: 고객들은 이 영역에 속한 요인들에 관심이 높다. 이영역의 불만족만 해결해주
면 고객들의 만족도가 향상될 수 있기 때문에 집중 개선해야할 영역. 고객의 불만족
한 원인을 찾아 해결
✓ C영역: 진실로 만족하지 않은 영역. 고객 만족을 위해선 근본적인 노력이 필요하고
개선에 많은 투자가 필요
✓ D영역: 고객들이 관심이 적은 영역. 고객은 이영역에 속한 요인들을 중요하지 않게
생각하고 있다. 이 영역의 개선 순위 낮음
검증에 활용
개선 우선순위 도출
평가 결과
Copyright© All rights reserved 조성봉 97
UX/UI Design
냉장고
컨버터
블패키
지
김치
냉장고
정수기
식기
세척기
인덕션
스팀/
광파
오븐
전자
레인지
와인셀러 홈브루 세탁기 건조기 스타일러 청소기
식물
생활가
전
에어컨
공기
청정기
제습/
가습
실링팬
스탠
바이미
초 프리미엄(시그니처)
일반
올레드
TVI
라이프스타일(오브제컬렉션)
라이프스타일(라이프스타일TVI) *new
*new
*new
*new
*new
*new
*new
*롤러블
*단독보유제품
- - 시네빔 -
- - -
*new
초 프리미엄(시그니처 키친 스위트)
*new
주방가전 생활가전 TV
라이프스타일(비스포크)
초 프리미엄(셰프 컬렉션)
일반
라이프스타일(라이프스타일 TVI)
*new *new
*new *new *new
*new *new
*단독보유제품
냉장고
김치
냉장고
큐브
냉장고
정수기
식기
세척기
인덕션
직화
오븐
전자
레인지
큐커 에어컨
세탁기 건조기
에어
드레서
슈드레
서
공기
청정기
청소기
The
Frame
The
Sero
The
Serif
The
Premiere
Neo
QLED
The
Terrace
원도어 - -
- - -
삼성 vs LG전자 스마트 가전제품 현황
예시 : 가전제품 디스플레이
97
Copyright© All rights reserved 조성봉 98
UX/UI Design
냉장고
김치
냉장고
큐브
냉장고
정수기
식기
세척기
전기
레인지
직화
오븐
전자
레인지
큐커 에어컨
세탁기 건조기
에어드
레서
슈드레
서
공기
청정기
청소기
The
Frame
The
Sero
The
Serif
The
Premiere
Neo
QLED
The
Terrace
와인
셀러
홈브루
식물생활
가전
제습/
가습
실링팬
원도어
올레드
TVI
가격(만)
820
70
1000
400
720
270
190
510
330
170
490
160
80
80
510
130
40
79
180
160
80
25 59
180
140
200
170
790
80
200
110
230
100
60
160
50
1800
820
240
35
240
37
110
50
270
240
150
70
20 53
165
130
110
150
18
670
38
280
20
250
500
750
1000
640
130
690
380
40
27
180 210
450
320
130
59
128
17
210
86
40
16
26
180
160
170
379
270
83
210
230
120
250
200
165
150
440
320
440
100
1090
199
190
72
37 56
1200
10000
2000
180
LG전자
삼성전자
초프리미엄
일반
라이프스타일
비공개
비공개
초프리미엄 제품은
초고가 라인 형성
비스포크/오브제
컬렉션의 경우
스마트기능 탑재해 전
품목으로 확대,
일반라인 대비 높은
가격대 형성
라이프스타일 TVI의
경우
스마트기능을 탑재한
다양한 폼팩터와
오디오 구성까지
확대하여 고가라인
형성
가격대 분포
예시 : 가전제품 디스플레이
9
Copyright© All rights reserved 조성봉 99
UX/UI Design
분석 대상 분석 기준
BESPOKE 냉장고 4도어
프리스탠딩 패밀리허브 824 L
(RF85A97A1APWWA)
BESPOKE 그랑데
AI 24 kg
(WF21T6500KW)
BESPOKE 무풍에어
컨 갤러리 (65.9 ㎡)
(AF20AX978YZT)
BESPOKE 에어드레서
대용량
(DF10A9500CG)
분석 범위
항목 정의
인터페이스 구성 디스플레이와 물리버튼 간 원활한 이용과 버튼의 구성
정보 구조 디스플레이나 조작부에서 표현되는 정보와 메뉴들의 구성 방식
정보/메뉴 노출 홈화면에 노출되는 정보와 메뉴들의 표현 정도
조작 횟수/동선
주로 사용하는 메뉴를 빠르게 선택할 수 있도록 기능으로 보완함 Flow 절차 진행 단축
성
아이콘 활용 사용자 이해를 돕기 위한 아이콘의 활용 정도와 색상 및 디테일 요소 표현 정도
심미성 전반적인 디자인 정도와 가전제품과의 연관성
주요 분석요소
항목 정의
학습성
시스템을 처음 경험하는 사용자가 작업 완성을 위해 얼마나 빨리 학습할 수
있는가의 정도
효율성 사용법을 이미 익힌 숙련자들이 더 높은 수준의 작업을 위한 효율에 대한 정도
기억성 일정 기간 사용을 중단하더라도 시스템을 다시 사용할 수 있도록 기억하는 정도
오류
사용자가 시스템을 사용하는 동안 오류를 범하지 않는 정도와 오류에서 회복할 수
있는 여지의 정도
만족성 사용자가 시스템을 사용할 때 주관적으로 느끼는 만족감의 정도
ISO 9241-11 사용성의 원칙
표시부
조작부
디스플레이 영역
• 가전에서 직접 기능을 수행하고 설정을 변경하는 조작부와 조작내용을
노출하는 디스플레이 위주로 분석
• 앱 분석은 제외하나 앱과의 연결성은 분석 대상에 포함
• 조작부가 가전 자체에 있지 않은 에어컨의 경우 리모컨도 분석 범위에 포함
디스플레이 분석 영역
• ISO 9241-11의 휴리스틱 평가 기준인 학습성, 효율성, 기억성, 오류 항목을
바탕으로 평가
• 하드웨어와 소프트웨어를 함께 고려하고 하나의 제품이 아닌 모든 제품에
통영될 수 있는 기준이 필요하기에 ISO 9241-11의 사용성 기준을 바탕을
평가함
• 기존의 5가지 항목 중 만족성은 실제 사용자의 주관성을 확인하는 항목으로
데스크 리서치로 확인이 어렵기에 제외
평가 계획
예시 : 가전제품 디스플레이
Copyright© All rights reserved 조성봉 100
UX/UI Design
내부 디스플레이 항목 평가
학습성
최소한의 버튼과 화면 구성(인디케이터와 레이블, 아이콘)으로 학습하기 쉬움
새로운 기능의 레이블(ex.멀티 펜트리)을 사용자들이 바로 이해하기 어려움
효율성
소리를 활용하여 작동 과정을 쉽게 인지할 수 있도록 함
초기 학습을 빠르게 할 수 있는 대신 반복적인 작업이 계속 필요하고 단순한 작동방식으로 효율성은 떨어짐
기억성 손쉽게 구성된 메뉴구조와 인터페이스 그리고 적절한 아이콘 활용으로 기억에 용이함
오류
전반적으로 단순한 구조를 지니고 있어 오류의 가능성이 낮고 발생하는 오류에 대해서도 손쉽게 회복이 가능함
특정 아이콘(ex.와이파이 )이 문구와 반대되어 시스템적 오류가 존재하고 다음단계로 이어갈 어포던스가 부족한 단계들이 있음
To be Improved
Good Points
‘부가기능’을 조작하기 위해 많은 화면을 거쳐야 하는데, 해당 메뉴 진입
시에 조작법에 대한 설명을 제공해 사용자의 조작을 도움
[조작+표시] 조작 규칙이 바뀌는 시점에 조작법에 대한 안내 제공
선택한 메뉴의 개수와 현위치를 가늠하도록 Indicator를 제공해 유용성이 있음
[표시] 현 위치와 메뉴의 규모를 파악할 수 있는 Indicator 제공
온도를 설정한 뒤 ,이전 화면으로 돌아가기 위해 사용자가 기다려야 하는지,
어떤 버튼을 눌러야 하는지 등의 가이드를 제시하지 않아 사용자가 무엇을
해야 하는 지에 대한 예측가능성이 낮음
[표시] 설정값 선택 후 사용자가 해야 할 행위에 대한 안내 부족
취소나 History back 개념의 물리 버튼이 없어 옵션을 변경하지 않고 이전
단계로 돌아가는 방법의 예측가능성이 낮음
[조작] 취소/돌아가기 버튼 부재
분석 종합
예시 : 가전제품 디스플레이
Copyright© All rights reserved 조성봉 101
UX/UI Design
외부 디스플레이 항목 평가
학습성
앱과의 높은 연동성을 통해 부가기능들 사용 과정을 단축하고 정보를 그래프화 하는 등 시각화된 자료로 데이터를 쉽게 이해할 수 있음
처음 사용시 제공되는 인터페이스 방식이 무엇이 있는지 그리고 어떻게 조작해야 하는지 예측가능성이 낮음
효율성
맞춤화 수준이 높아 화면 구성을 사용자가 원하는 것으로 변경할 수 있는 있고 퀵 메뉴를 상시 제공하여 조작 과정을 단축시킴
기존 모바일 대비 낮은 사용성을 지니고 호환되는 앱들이 적어 디스플레이를 통한 다양한 작업에 한계가 있음
기억성 모바일과 동일한 인터페이스를 사용하여 언제든지 사용하기 쉬움
오류
각각의 기능별 슬라이더나 토글 방식의 적절한 사용으로 해당 기능을 사용할 때 실수하지 않고 손쉽게 제품을 조작할 수 있음
동일한 식품이 여러 개 있는 경우가 디스플레이 정보에는 반영되지 않아 냉장고가 인식한 식품 목록과 실제 식품간 1:1 매칭이 어려움
To be Improved
Good Points
사용자가 원하는 사진이나 영상, 스타일 등으로 대기 화면을 구성해 사용자의
선택권이 높음
[조작+표시] 화면 구성을 사용자가 원하는 것으로 맞춤화가 가능
일반적으로 시도하거나 추측 가능한 방식(화면이 꺼진 상태에서 한번 탭)으로
디스플레이를 On할 수 있어 예측가능성이 높음
[조작] 예측이 쉬운 조작 방식의 제공 (탭/스와이프/내비게이션)
냉장고에 동일한 식품이 여러 개 있는 경우가 디스플레이 식품 정보에는
반영되지 않아 정보의 유용성이 낮음. 예를들면, 어느 상품이 유통기한이
다가오는지 쉽게 구분이 안됨
[표시] 냉장고가 인식한 식품 목록과 실제 식품 1:1 매칭의 어려움
냉장고 내부 화면 송출(대기 화면에서 두 번 노크하거나 홈 화면에서 두
손가락으로 화면을 아래로 쓸어내리기), 앱 메뉴 호출(아래에서 위로 스크롤)과
같은 기능 사용을 위한 인터랙션의 존재를 인지하기 어려워 예측가능성이 낮음
[조작] 처음 사용시 예측이 어려운 조작 방식의 제공 (두 손가락 사용, 아래서 위로)
분석 종합
예시 : 가전제품 디스플레이
Copyright© All rights reserved 조성봉 102
UX/UI Design
분석 종합
예시 : 가전제품 디스플레이
세탁기 항목 평가
학습성
전원을 켜고 동작버튼을 눌러 바로 진행할 수 있고 (AI맞춤세탁 모드) 다이얼을 통해 다른 메뉴를 쉽게 탐색하는 등 초기 빠르게
사용법을 익힘
길게 눌러야 작동되는 동작/취소 기능은 제품을 처음 사용할 때는 바로 알아채기 어려움
효율성
세탁기 조작부에서 건조기도 함께 컨트롤을 할 수 있어 빠르게 조작이 가능함
나만의 코스리스트를 통해 사용자가 원하는 코스로 맞춤화할 수 있지만 코스의 노출/비노출만 가능해 실질적인 효율성이 낮음
기억성 사용법(AI맞춤세탁과 다이얼 버튼)이 간단해 한 번 사용해본 사용자는 언제든지 손쉽게 사용할 수 있음
오류
각 메뉴마다 사용자가 이해하기 쉬운 문구의 설명이 있고 오작동 시 피드백이 디스플레이에 즉시 제공되어 정확한 이해와 사용을 도움
명확하지 않은 레이블로 인해 해당 메뉴의 정확한 기능을 파악하기 어렵고 사용시 반복적인 오류의 가능성이 높음
To be Improved
Good Points
섬세의류를 선택한 경우, ‘전용 세제를 넣어주세요’라는 안내 문구를
제공하는 등 메인 기능 이름 밑에 추가적인 설명을 달아 사용자가 모드 파악과
세탁에 도움이 되는 정보를 파악할 수 있어 유용성이 충분함
[표시] 선택한 모드를 올바르게 이용할 수 있는 보조 정보 제공
세탁 시작을 위해 동작 버튼을 짧게 누르면 '3초 간 길게 눌러주세요' 문구를
노출하는 것과 같이, 사용자가 기능을 제대로 사용하지 못할 시의 피드백을 제공해
오류감지성이 좋음
[표시] 오류를 감지해 사용자가 수행해야 할 정보 제공
시작/일시정지와 같이 일반적으로 한번 누르면 동작할 것으로 예상되는 버튼을
오래 눌러야만 세탁이 시작 가능하도록 세팅되어 있어 예측가능성이 부족함
[조작] 길게 눌러야만 시작되는 ‘동작‘ 버튼
AI를 활용한 기능을 나타내는 두 레이블인 ‘AI맞춤추천(자주 사용하는
코스/옵션)’과, ‘AI맞춤세탁(자동 무게감지 등을 통한 세탁 모드 설정)’ 간
차이가 명확하지 않아 기능의 예측가능성이 낮음
[표시] ‘AI맞춤추천’과 ‘AI맞춤세탁’ 레이블 간 명확하지 않은 차이
Copyright© All rights reserved 조성봉 103
UX/UI Design
시사점 도출 (or Ideation)
예시 : 가전제품 디스플레이
2) 페이지 이동
1) 주영역/보조영역 분할 및 확장
3) 탭 이동 사용자의 연동된 가전을 탭으로 이동
주조작 영역과 보조 영역을 분할하여 배치
페이지 인디케이터로 페이지 이동
화면 전환과 뒤로가기를 이용해 화면 확장
화면예시_세탁기 디스플레이
Copyright© All rights reserved 조성봉 104
UX/UI Design
시사점 도출 (or Ideation)
예시 : 가전제품 디스플레이
1) 스마트싱즈 가전의 특성상 가전 앞에서 조작이 필요한 상황에 다른 가전들도 퀵하게 모니터링하고
조작할 수 있는 통합 조작 버튼 노출
현재 작동 중인 상태 모니터링
2) UI의 통일
세탁기 보조 디스플레이 및 조작 UI가 냉장고에서 동일하게 표시
Copyright© All rights reserved 조성봉 105
UX/UI Design
시사점 도출 (or Ideation)
예시 : 가전제품 디스플레이
1) 추천성 알림 하단영역에 노출되었다 사라지는 형태
설정이 가능한 알림의 경우, 바로 적용할 수 있도록 버튼 제공
프로세스상 사용자가 꼭 알아야 할 알림의 경우,
사용자가 확인 버튼을 눌러야 사라지는 팝업으로 노출
3) 프로세스상의 추천
4) 활동피드의 알림 활동피드를 한 눈에 볼 수 있는 캘린더뷰 제공
빠른 검색을 위해 사용자가 자주 검색하는 검색어를
해시태그 버튼으로 제공
관리가 필요한 타 가전을 조작을 할 수 있는 버튼 제공
가전 활동 히스토리 제공
전체 활동과 각 가전 별 활동 피드를 구분, 사용자가
원하는 가전의 활동만 따로 볼 수 있도록 제공
스와이핑을 통해 마이너스 페이지로 이동하여 활동피드로
진입
2) 피드백이 필요한 알림
Copyright© All rights reserved 조성봉
사용성 테스트
Copyright© All rights reserved 조성봉 107
UX/UI Design
사용성 테스트
사용성 테스트 위치
전체 프로세스
사용성 테스트
사용성 테스트
Copyright© All rights reserved 조성봉 108
UX/UI Design
사용성 테스트
사용성이란 제품/서비스 사용시 사용자들이 얼마나 쉽고 편리하고, 효율적으로 그것을 이용할 수 있는 지를 판단하는 척도임. 사용성 테스트는 이를 측정하
기 위해서 실제 사용자들을 초대하여 사용성 측정 장비가 갖춰진 테스트 환경에서 제품/서비스를 이용하는 과정을 관찰하고 각 지표에 따라 평가하는 과정
사용성 테스트 개요
<사용성 테스트 측정 항목>
항목 테스트 내용 테스트 지표
Easy of Use 사용자들이 Task 수행시 얼마나 에러를 일으키는가? 에러는 어떤 유형인가? 에러율, 성공률
Efficiency Task 수행에 얼마나 시간이 걸리며, 몇 개의 단계를 거치는가? 시간, 이동 단계
Memorability 서비스 사용 후 얼마나 많은 것들을 회상할 수 있는가? 기억 가능성, 학습 소요시간
Satisfaction Task 완료 후 사용자들이 받은 감성적인 만족도는 어떠한가? 감성적인 만족도
목표 설정 결과 예상 행동 순서화 실행 결과 확인 만족도 판단
<서비스 이용 경험 중 사용성 테스트가 일어나는 영역>
Copyright© All rights reserved 조성봉 109
UX/UI Design
사용성 테스트
사용성 테스트 결과는 다음과 같이 UX/UI에 반영된다
사용성 테스트 개요
Easy of Use
• 사용자들이 Task 수행시 얼마나 에러를
일으키는가?
• 에러는 어떤 유형인가?
Efficiency
• Task 수행에 얼마나 시간이 걸리며, 몇
개의 단계를 거치는가?
Memorability
• 서비스 사용 후 얼마나 많은 것들을
회상할 수 있는가?
• 복잡한 정보구조
• 일관되지 않은 UX
• 반복되는 학습 필요
• 일회적인 기억가능성
• 복잡한 정보구조
• 일관되지 않은 UX
• 반복되는 학습 필요
• 일회적인 기억가능성
• 비합리적인 이동 단계
• Task 수행 시간
• 반응 없는 피드백
• 비합리적인 이동 단계
• Task 수행 시간
• 반응 없는 피드백
• Task 성공률
• 불명확한 이해
• 인지적 오류 ※ 사용자들이 겪는 문제
• 작동 에러
• Task 성공률
• 불명확한 이해
• 인지적 오류 ※ 사용자들이 겪는 문제
• 작동 에러
인터렉션
• 제스처 일관성 조정
• 행동 유도성(Affordance) 개선
• 상태, 상태변화 제공방식 개선
IA / 이용흐름
• 정보 체계 및 검색 방법 변화
• 이용 흐름 변화
• 내비게이션, 레이블링 개선
UI
• 정보의 전달/제공방식 변화
• 컨텐츠 구성방식 변화
• 정보 형태, 배치 방식 변화
Satisfaction
• Task 완료 후 사용자들이 받은 감성적인
만족도는 어떠한가?
• 사용자가 기대한 가치 불일치
• 서비스의 컨셉 모호
• 서비스 UX 품질의 전반적인 낙후함
• 사용자가 기대한 가치 불일치
• 서비스의 컨셉 모호
• 서비스 UX 품질의 전반적인 낙후함
GUI
• 시각적인 계층구조 변화
• 시각적 언어의 조직성, 경제성 점검
• 톤앤매너의 재조정
Copyright© All rights reserved 조성봉 110
UX/UI Design
사용성 테스트
지표 - 성공률
사용성 테스트 개요
SCS Differential (Sum minus Count)
• 1점 : 아무런 이슈없이 해당 테스크를 수행한 경우
• 0점 : 도움을 받지는 않았으나, 해당 테스크를 매끄럽게 수행하지는 못한 경우
• -1점 : 해당 테스크 수행을 실패한 경우
Source : MeasuringU
Copyright© All rights reserved 조성봉 111
UX/UI Design
사용성 테스트
지표 – 직관성(주관적인 평가)
사용성 테스트 개요
Single Ease Question (SEQ)
• 테스크 수행후 사용자에게 7점 척도로 해당 테스크의 쉽고/어려움을 평가하게 함
• 0점 : 매우 어려움 - - - - - 6점 : 매우 쉬움
• 각 테스크별로 이를 계산하여 평균
Source : MeasuringU
Copyright© All rights reserved 조성봉 112
UX/UI Design
사용성 테스트
종합적인 결론
사용성 테스트 개요
Source : MeasuringU
Copyright© All rights reserved 조성봉 113
UX/UI Design
사용성 테스트
사용성 테스트는 다음과 같은 프로세스로 진행된다
사용성 테스트 프로세스
목표 수립/
평가 준비
UT 설계/
리크루팅
평가 수행 결과 분석
✓ UT 배경 이해
✓ 대상 서비스/제품 이해
✓ 주요 이슈/제한 사항 파악
✓ 대상자 Pool 확보*
✓ 인력 운용 계획 수립 *
✓ 평가 항목 정의
✓ 평가 기준 수립
✓ 평가 방법 선정
✓ 대상자 선정기준 정의
✓ 대상자 섭외 및 선정
✓ 평가 시나리오 마련
✓ 예행 평가 테스트
✓ 평가 수행
✓ 평가 결과 정리
✓ 평가 결과 분석
수행 계획
수립*
후속
평가 준비*
후속 평가*
✓ 대상자 Pool 점검
✓ 인력 운용 점검
단기/1회 UT
Activity
주요 산출물 ✓ 수행계획서 ✓ 평가 대상자 선정 결과
✓ 평가 시나리오
✓ 평가결과 Raw data
✓ UT분석 결과 보고서
장기/2회이상 UT
Copyright© All rights reserved 조성봉 114
UX/UI Design
사용성 테스트
실제 진행과정
사용성 테스트 프로세스
1.테스트 장비 셋팅 2. 테스트 소개 및 사전 인터뷰 3. Task 요청
4.Task 실행 5. 질문/만족도 평가 6. 결과 분석
사용성 테스트 참여자 선정 테스트 시나리오 작성 리쿠르팅
Copyright© All rights reserved 조성봉 115
UX/UI Design
사용성 테스트
사용성 테스트는 사용성 측면에서의 문제인 고충을 발견하는 게 목적이기 때문에 참여자 선정 과정이 비교적 덜 까다롭다
참여자 선정
Source : Nielsen Norman Group
<테스트 참여자 선정 예시>
<테스트 대상 적정 인원>
Copyright© All rights reserved 조성봉 116
UX/UI Design
사용성 테스트
이슈별로 사용자에게 요청할 Task, 예상 이동 경로, 조사 포인트, (예상) 소요 시간을 정의한 문서를 테스트 시나리오라고 한다
테스트 시나리오 작성
Sub issue
Sub issue Task
Task 예상 이동경로
예상 이동경로 조사 포인트
조사 포인트
마이앨범에 곡 담기
마이앨범에 곡 담기
원하는 곡을 검색/선택하여 재생한 후
새로운 폴더를 만들어 담아보세요.
원하는 곡을 검색/선택하여 재생한 후
새로운 폴더를 만들어 담아보세요.
홈→재생버튼→더보기→담기→마이앨범
추가→새앨범 만들기→새앨범
선택→확인
홈→재생버튼→더보기→담기→마이앨범
추가→새앨범 만들기→새앨범
선택→확인
- 기능 인지 및 접근 경로 파악
- 기능 인지 및 접근 경로 파악
마이앨범에서
곡 재생
마이앨범에서
곡 재생
새로운 폴더에 저장했던 노래를 재생해
주세요.
새로운 폴더에 저장했던 노래를 재생해
주세요.
메뉴→마이뮤직→마이앨범 선택→곡
선택→듣기
메뉴→마이뮤직→마이앨범 선택→곡
선택→듣기
- 메뉴의 위치 및 ‘마이뮤직’ 레이블
인지 가능한지 파악
- 메뉴의 위치 및 ‘마이뮤직’ 레이블
인지 가능한지 파악
내 뮤직허그 만들기
내 뮤직허그 만들기 내 음악 방송 방을 만들어 주세요.
내 음악 방송 방을 만들어 주세요.
뮤직허그→친구 선택→내 뮤직허그
가기→나만의 뮤직허그 설정→확인
뮤직허그→친구 선택→내 뮤직허그
가기→나만의 뮤직허그 설정→확인
- 메뉴 레이블 및 위치 인지 가능한지
파악
- 메뉴 레이블 및 위치 인지 가능한지
파악
소요 시간
소요 시간
60초
60초
30초
30초
30초
30초
Main issue
Main issue
마이앨범
마이앨범
뮤직허그
뮤직허그
재생목록 편집
재생목록 편집
노래 목록에서 5번째 곡을 1번째로
이동해 주세요.
노래 목록에서 5번째 곡을 1번째로
이동해 주세요.
재생목록→편집→곡명→우측 바
선택하여 이동
재생목록→편집→곡명→우측 바
선택하여 이동
- 이동을 위한 우측 버튼 기능 인지
파악
- 순서정령과 이동에 대한 구분
가능한지 파악
- 이동을 위한 우측 버튼 기능 인지
파악
- 순서정령과 이동에 대한 구분
가능한지 파악
60초
60초
재생목록
재생목록
아티스트 소개보기
아티스트 소개보기
관심 있는 아티스트 소개보기를 찾아봐
주세요.
관심 있는 아티스트 소개보기를 찾아봐
주세요.
검색→아티스트→아티스트
선택→아티스트 소개보기
검색→아티스트→아티스트
선택→아티스트 소개보기
- 이동 경로 및 버튼의 위치 인지 파악
- 이동 경로 및 버튼의 위치 인지 파악 30초
30초
아티스트
아티스트
<테스트 시나리오 예시>
Copyright© All rights reserved 조성봉 117
UX/UI Design
사용성 테스트
사용성 테스트는 Moderator, Observer로 불리는 2~3명에 의해서 진행된다
테스트 진행
<사용성 테스트 진행 모습 예시>
Copyright© All rights reserved 조성봉 118
UX/UI Design
사용성 테스트
테스트는 One-sided Mirror를 통해서 육안으로 관찰할 수도 있지만, 카메라를 통해서 Recorder에 기록되고, 연결된 Observer에서도 실시간으로 관찰이
가능하며 관찰자들이 관찰 내용을 Marker로 기록할 수 있다
Task 관찰/기록
참가자가 수행하고 있는 Task를
PC화면에 출력되는 영상을 통해 확인
2.Task 수행 과정 관찰
Task가 시작되면 Start Task로 촬영을 시작하고 End
Task로 마침
1.Task 시작/끝 촬영
3.Marker 기록
Task를 관찰하는 과정에서 관찰 내용 및 참가자
의견, 오류 발생에 대한 내용을 기록함.
Copyright© All rights reserved 조성봉 119
UX/UI Design
사용성 테스트
테스트 소프트웨어에서 저장한 결과 내용들을 분석 툴로 불러와서 사용자별 테스트 내용을 담은 비디오 클립과 Marker 기록 내용을 확인한다. 분석 툴에서
는 사용자 및 테스크별로 파일구조가 자동 생성된다
Raw data 정리
Task 성공률
Task 수행 시간
Task 에러 발생수
전반적 감성적 만족도
Morae Manager Marker
Copyright© All rights reserved 조성봉 120
UX/UI Design
사용성 테스트
다음과 같이 각종 지표들을 Task별로 정리한다
각종 지표 정리
<성공률> <소요 시간>
<에러율> <만족도>
Copyright© All rights reserved 조성봉 121
UX/UI Design
사용성 테스트
테스트 결과를 가지고 어떤 유형의 문제가 있는 지 분석하고 이를 리포팅한다
사용성 테스트 분석하기
<사용성 테스트 결과 분석 예시>
Copyright© All rights reserved 조성봉 122
UX/UI Design
사용성 테스트
다음과 같이 각종 지표들을 Task별로 정리한다
디자인 영역별 분석
Copyright© All rights reserved 조성봉 123
UX/UI Design
사용성 테스트
구체적인 문제 정의(키파인딩)를 진행한다. 이 결과가 사용성 테스트의 최종 리포트가 된다
키파인딩
Copyright© All rights reserved 조성봉 124
UX/UI Design
사용성 테스트
1. 기능별 분석 결과
기능별 만족도 평균 키워드 분석
4.3
3.3
4.1
3.5
0
1
2
3
4
5
차량관리 안전보안 원격제어 길찾기
긍정/부정 응답 비율
72%
28%
긍정 부정
긍정/부정 단어 빈도 (%)
긍정 원격 87
긍정 난방 66
긍정 시동 65
긍정 통풍 52
긍정/부정 단어 빈도
부정 타이머 87
부정 공조 66
부정 연동 65
부정 주소 52
Summary
블루링크의 기능별 만족도는 원격제어가 4.3점, 안전보안 3.3점, 차량관리 4.1점, 길찾기 3.5점으로 양호한 편임
주관식 응답 분석 결과, 전체 답변의 긍정 응답률은 72%, 부정 응답률을 28%로 나타나 사용자들이 전반적으로 긍정적인 사용성을 느끼고 있음
긍정 응답과 부정 응답의 키워드 분석 결과, 원격제어 기능과 관련된 키워드가 긍정 답변의 대다수를 차지해 만족도가 높음을 알 수 있음
(N = 1,000)
예시 : 현대 Bluelink
Copyright© All rights reserved 조성봉 125
UX/UI Design
사용성 테스트
1. 기능별 분석 결과
예시 : 현대 Bluelink
(1) 원격제어 기능
공조 기능설정에 대해 긍정 답변이 81%, 부정 답변이 19% 나왔는데 긍정 답변에서 빈도가 높게 나타난 키워드 Top5 원격, 난방, 제어, 편리, 타이머이고,
부정 답변에서 키워드 Top5는 연동, 분리, 불필요, 개선, 낭비로 나타남
평가점수 단어 빈도
5 원격 87
5 난방 66
5 제어 65
4 편리 52
4 타이머 44
4 공조 42
5 연동 34
4 시동 31
평가점수 단어 빈도
1 연동 87
1 분리 66
1 불필요 65
1 개선 52
2 낭비 44
2 안걸림 42
2 불편 34
2 버튼 31
부정 응답 키워드 분석
58%
23%
10%
9%
매우 만족 만족 불만족 매우 불만족
Q. 시동을 걸 때 원격제어 기능에 대해
얼마나 만족하시나요? 긍정 응답 키워드 분석
Copyright© All rights reserved 조성봉 126
UX/UI Design
사용성 테스트
1. 기능별 분석 결과
“시동을 켤 때마다 공조 설정을 해야 해서 귀찮음”
사용자 총 543명
5.0
%
5.0
%
25.
0%
45.
0%
20.
0%
1 2 3 4 5
35명
(6.5%)
40명
(7.4%)
200명
(36.8%)
170명
(31.3%)
98명
(18.0%)
49%
37.8%
80%
80%
70%
(N = 1,000)
(N = 543)
64%
23%
11%
2%
항상 이용함 대부분 이용함
종종 이용함 거의 이용 안 함
앱 사용 빈도 주 이용 목적
52%
29%
6%
7%
6%
출퇴근 픽업 주말 나들이
장보기/쇼핑 기타 목적
(N = 543) (N = 543)
원격제어 기능
(3) 공조 설정 단계 – 주요 응답 별 사용자 특성 분석
원격제어 기능 만족도가 높은 사용자도 매번 공조 설정을 하는 것에 불편함을 느끼며,
앱을 자주 사용할 수록, 규칙적인 일과에 맞춰 차량을 이용할 수록 불편함을 많이 느낌
예시 : 현대 Bluelink
Copyright© All rights reserved 조성봉 127
UX/UI Design
사용성 테스트
2. 영역별 분석 결과
예시 : 현대 Bluelink
(1) UI – 기준별 사용자 상관 분석
블루링크 앱 UI의 평균 점수는 4.1점으로 평가되었다. 가독성 평균은 4.2점으로 높았던 반면, 효율성 평균은 3.2점으로 낮게 평가됨
40대 남성이 유연성을 높게 평가하고, 40대 여성이 효율성을 낮게 평가하는 비중이 높이 나타남
“원격제어 버튼이 가운데
바로 있어서 빠르게 이용할
수 있어요”
“다양한 경로를 보고 싶은
데 경로 검색 결과가 두 개
안보여줘서 불편해요.”
0%
20%
40%
60%
80%
100%
효율성 가독성 예측가능성 유연성
매우 그렇다
그렇다
보통이다
그렇지 않다
전혀 그렇지 않다
평점 4.2점 3.4점
여성(51.7%), 40대에서
상대적으로 놓게 나타남
“글씨도 버튼도 크기가
커서 잘 보여요”
4.5점
사용자 특성별 큰 차이를
보이지 않음
“용어가 쉽게 이해할 수
있어서 원하는 기능을 바로
쓸 수 있어요”
4.1점
남성(55.3%), 연령대가
높을수록 상대적으로 평
점이 높음
40대(19.6%)에서 상대적
으로 높게 나타남
Copyright© All rights reserved 조성봉 128
UX/UI Design
사용성 테스트
2. 영역별 분석 결과
예시 : 현대 Bluelink
(1) UI > 명확성 – 사용자 특성 별 차이 분석
블루링크 서비스를 무료로 이용중인 사용자가 다른 사용자에 비해 상대적으로 명확성에 대한 평가를 낮게 함
그 중에서도 연령이 낮을 수록 명확성이 좋지 않다고 느끼며, 차량 관리 기능에 대한 만족도가 낮음
3.3
4.2 4.3 4.0
무료 이용 유료
이용(연장)
유료
이용(가입)
법인 이용
0
1
2
3
4
5
3.2
4.2 4.3
4.7
0
1
2
3
4
5
43%
28%
19%
10%
20대 30대 40대 50대
서비스 이용 상태 별 ‘UI > 명확성’ 항목 평점
10.0%15.0% 30.0% 35.0% 10.0%
5 4 3
평가 점수 별 분포
연령 기능별 평점
Copyright© All rights reserved 조성봉 129
UX/UI Design
사용성 테스트
2. 영역별 분석 결과
예시 : 현대 Bluelink
10.
0%
35.
0%
30.
0%
15.
0%
10.
0%
1 2 3 4 5
경험 일반
유용성 2.8점
(N = 1,000)
주 이용 기능 (1, 2순위)
(N = 450)
30
135
130
155
20
170
190
70
0 100 200 300 400
안전보안
차량관리
길찾기
원격제어
1순위 2순위 0 100 200 300 400 500 600
일별 또는 주별 운행정보도
알려주면 좋을 것 같음
앱에서 즐겨찾기 한 목적지가
차량과 연동이 안 됨
54.3%
48.6%
24.3%
20.3%
내비게이션에서 목적지를
검색할 수 없음
부정 의견 4
부정 의견 5
부정 의견 6
부정 의견 7
15.3%
4.6%
0.7%
평가 점수 이유
(N = 450)
(3) 경험 일반 > 유용성 – 부정적 사용자 특성 분석
유용성 점수를 낮게 평가한 사용자 대부분이 길찾기와 차량관리 기능을 주로 이용하며, 해당 기능이 사용자 기대에 못 미치거나 불충분하다고 생각함

Mais conteúdo relacionado

Mais procurados

UX 프로젝트 가이드 (UX Project Guide)
UX 프로젝트 가이드 (UX Project Guide) UX 프로젝트 가이드 (UX Project Guide)
UX 프로젝트 가이드 (UX Project Guide)
RightBrain inc.
 
UX Academy 20th 네이버지도 APP UX/UI 개선 프로젝트
UX Academy 20th 네이버지도 APP UX/UI 개선 프로젝트 UX Academy 20th 네이버지도 APP UX/UI 개선 프로젝트
UX Academy 20th 네이버지도 APP UX/UI 개선 프로젝트
RightBrain inc.
 
UX Academy 18th 롯데온 UX/UI 개선 프로젝트
UX Academy 18th  롯데온 UX/UI 개선 프로젝트UX Academy 18th  롯데온 UX/UI 개선 프로젝트
UX Academy 18th 롯데온 UX/UI 개선 프로젝트
RightBrain inc.
 
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
RightBrain inc.
 
UX 아카데미 오픈프로젝트 [Gmarket - UX/UI 개선]
UX 아카데미 오픈프로젝트 [Gmarket - UX/UI 개선]UX 아카데미 오픈프로젝트 [Gmarket - UX/UI 개선]
UX 아카데미 오픈프로젝트 [Gmarket - UX/UI 개선]
RightBrain inc.
 

Mais procurados (20)

UX 프로젝트 가이드 (UX Project Guide)
UX 프로젝트 가이드 (UX Project Guide) UX 프로젝트 가이드 (UX Project Guide)
UX 프로젝트 가이드 (UX Project Guide)
 
UX 아카데미 오픈프로젝트 [ 이마트몰 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [ 이마트몰 - UX/UI 개선]UX 아카데미 오픈프로젝트 [ 이마트몰 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [ 이마트몰 - UX/UI 개선]
 
UX Academy 20th 애플 건강앱 UX/UI 개선 프로젝트
UX Academy 20th 애플 건강앱 UX/UI 개선 프로젝트UX Academy 20th 애플 건강앱 UX/UI 개선 프로젝트
UX Academy 20th 애플 건강앱 UX/UI 개선 프로젝트
 
UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선]
UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선] UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선]
UX 아카데미 오픈프로젝트 [29cm - UX/UI 개선]
 
UX Academy 20th 네이버지도 APP UX/UI 개선 프로젝트
UX Academy 20th 네이버지도 APP UX/UI 개선 프로젝트 UX Academy 20th 네이버지도 APP UX/UI 개선 프로젝트
UX Academy 20th 네이버지도 APP UX/UI 개선 프로젝트
 
UX Academy 18th 롯데온 UX/UI 개선 프로젝트
UX Academy 18th  롯데온 UX/UI 개선 프로젝트UX Academy 18th  롯데온 UX/UI 개선 프로젝트
UX Academy 18th 롯데온 UX/UI 개선 프로젝트
 
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
UX Academy 18th 네이버 쇼핑 UX/UI 개선 프로젝트
 
UX Academy 17th 마이리얼트립 UX/UI 개선 프로젝트
UX Academy 17th 마이리얼트립 UX/UI 개선 프로젝트UX Academy 17th 마이리얼트립 UX/UI 개선 프로젝트
UX Academy 17th 마이리얼트립 UX/UI 개선 프로젝트
 
라이트브레인 UX 아카데미 8기 오픈프로젝트 [Airbnb 어플리케이션 UX/UI개선 Design]
라이트브레인 UX 아카데미 8기 오픈프로젝트 [Airbnb 어플리케이션 UX/UI개선 Design]라이트브레인 UX 아카데미 8기 오픈프로젝트 [Airbnb 어플리케이션 UX/UI개선 Design]
라이트브레인 UX 아카데미 8기 오픈프로젝트 [Airbnb 어플리케이션 UX/UI개선 Design]
 
UX 아카데미 오픈프로젝트 [클럽하우스- UX/UI 개선]
 UX 아카데미 오픈프로젝트 [클럽하우스- UX/UI 개선] UX 아카데미 오픈프로젝트 [클럽하우스- UX/UI 개선]
UX 아카데미 오픈프로젝트 [클럽하우스- UX/UI 개선]
 
UX Academy 16th Subway UX/UI 개선 프로젝트
UX Academy 16th Subway UX/UI 개선 프로젝트UX Academy 16th Subway UX/UI 개선 프로젝트
UX Academy 16th Subway UX/UI 개선 프로젝트
 
UX 아카데미 오픈프로젝트 [카카오톡 선물하기- UX/UI 개선]
UX 아카데미 오픈프로젝트 [카카오톡 선물하기- UX/UI 개선]UX 아카데미 오픈프로젝트 [카카오톡 선물하기- UX/UI 개선]
UX 아카데미 오픈프로젝트 [카카오톡 선물하기- UX/UI 개선]
 
leafairy.pdf
leafairy.pdfleafairy.pdf
leafairy.pdf
 
UX 아카데미 오픈프로젝트 [Youtube - UX/UI 개선]
UX 아카데미 오픈프로젝트 [Youtube - UX/UI 개선] UX 아카데미 오픈프로젝트 [Youtube - UX/UI 개선]
UX 아카데미 오픈프로젝트 [Youtube - UX/UI 개선]
 
[Rightbrain UX Academy] Skyscanner UX/UI개선
[Rightbrain UX Academy] Skyscanner UX/UI개선 [Rightbrain UX Academy] Skyscanner UX/UI개선
[Rightbrain UX Academy] Skyscanner UX/UI개선
 
라이트브레인 UX/UI Trend 2022
라이트브레인 UX/UI Trend 2022라이트브레인 UX/UI Trend 2022
라이트브레인 UX/UI Trend 2022
 
UX 아카데미 오픈프로젝트 [Gmarket - UX/UI 개선]
UX 아카데미 오픈프로젝트 [Gmarket - UX/UI 개선]UX 아카데미 오픈프로젝트 [Gmarket - UX/UI 개선]
UX 아카데미 오픈프로젝트 [Gmarket - UX/UI 개선]
 
UX 아카데미 오픈프로젝트 [토스 모바일앱 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [토스 모바일앱 - UX/UI 개선] UX 아카데미 오픈프로젝트 [토스 모바일앱 - UX/UI 개선]
UX 아카데미 오픈프로젝트 [토스 모바일앱 - UX/UI 개선]
 
알라딘 어플리케이션 UX개선
알라딘 어플리케이션 UX개선알라딘 어플리케이션 UX개선
알라딘 어플리케이션 UX개선
 
UX Discovery 13th Metaverse & Technology시청촉각 기술_rightbrain_0214.pdf
UX Discovery 13th Metaverse  & Technology시청촉각 기술_rightbrain_0214.pdfUX Discovery 13th Metaverse  & Technology시청촉각 기술_rightbrain_0214.pdf
UX Discovery 13th Metaverse & Technology시청촉각 기술_rightbrain_0214.pdf
 

Semelhante a Rightbrain 사내 ux 세미나 20220124

UX/UI 개념과 방향성
UX/UI 개념과 방향성UX/UI 개념과 방향성
UX/UI 개념과 방향성
Billy Choi
 
실무를위한모바일 UI UX step up
실무를위한모바일 UI UX step up실무를위한모바일 UI UX step up
실무를위한모바일 UI UX step up
Amy Young Ah Kim
 
UX Planning Training Course_SYS4U I&C
UX Planning Training Course_SYS4U I&CUX Planning Training Course_SYS4U I&C
UX Planning Training Course_SYS4U I&C
sys4u
 

Semelhante a Rightbrain 사내 ux 세미나 20220124 (20)

Uxtrigger template v5.compressed_2019
Uxtrigger template v5.compressed_2019Uxtrigger template v5.compressed_2019
Uxtrigger template v5.compressed_2019
 
UX/UI 개념과 방향성
UX/UI 개념과 방향성UX/UI 개념과 방향성
UX/UI 개념과 방향성
 
Ux research guide ux1
Ux research guide ux1Ux research guide ux1
Ux research guide ux1
 
CEO & UX Designers' R&R
CEO & UX Designers' R&RCEO & UX Designers' R&R
CEO & UX Designers' R&R
 
Rightbrain 사내 ux 세미나 202202
Rightbrain 사내 ux 세미나 202202Rightbrain 사내 ux 세미나 202202
Rightbrain 사내 ux 세미나 202202
 
UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션
 
Ux research guide
Ux research guideUx research guide
Ux research guide
 
Appendix uxtrigger toolkit_v1_iot_2019
Appendix uxtrigger toolkit_v1_iot_2019Appendix uxtrigger toolkit_v1_iot_2019
Appendix uxtrigger toolkit_v1_iot_2019
 
U&I Insgiht
U&I InsgihtU&I Insgiht
U&I Insgiht
 
실무를위한모바일 UI UX step up
실무를위한모바일 UI UX step up실무를위한모바일 UI UX step up
실무를위한모바일 UI UX step up
 
[Rightbrain UX Academy] Megabox UX/UI개선
[Rightbrain UX Academy] Megabox UX/UI개선 [Rightbrain UX Academy] Megabox UX/UI개선
[Rightbrain UX Academy] Megabox UX/UI개선
 
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1
 
Zero effort UX UI Strategy
Zero effort UX UI Strategy Zero effort UX UI Strategy
Zero effort UX UI Strategy
 
UX Planning Training Course_SYS4U I&C
UX Planning Training Course_SYS4U I&CUX Planning Training Course_SYS4U I&C
UX Planning Training Course_SYS4U I&C
 
2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인
 
[Seminar]4rd.lecture.open.discussion.the.latest.uxui.challenges.20210824
[Seminar]4rd.lecture.open.discussion.the.latest.uxui.challenges.20210824[Seminar]4rd.lecture.open.discussion.the.latest.uxui.challenges.20210824
[Seminar]4rd.lecture.open.discussion.the.latest.uxui.challenges.20210824
 
앱개발자를 위한 UX디자인실무_인트로
앱개발자를 위한 UX디자인실무_인트로앱개발자를 위한 UX디자인실무_인트로
앱개발자를 위한 UX디자인실무_인트로
 
[Seminar]2nd.lecture.uxui.consulting.20210713
[Seminar]2nd.lecture.uxui.consulting.20210713[Seminar]2nd.lecture.uxui.consulting.20210713
[Seminar]2nd.lecture.uxui.consulting.20210713
 
사용자경험디자인 기초 강의 #1
사용자경험디자인 기초 강의 #1사용자경험디자인 기초 강의 #1
사용자경험디자인 기초 강의 #1
 
2013년이 요구하는 UX/UI
2013년이 요구하는 UX/UI 2013년이 요구하는 UX/UI
2013년이 요구하는 UX/UI
 

Rightbrain 사내 ux 세미나 20220124

  • 1. Copyright© All rights reserved 조성봉 Consulting Group 3. 경험 파악 Rightbrain UX Academy
  • 2. Copyright© All rights reserved 조성봉 경험 파악
  • 3. Copyright© All rights reserved 조성봉 3 UX/UI Design 경험 파악 사용자 경험(UX)은 서비스와 맥락에 따라서 매우 복잡해질 수 있으나, 경험 파악(맥락, 경험 파악, 고충, 니즈, 태도)만 알면 대부분 파악될 수 있다 사용자 경험 파악 감정 생각 행동 매력적인 형태, 시각요소 쉽게 이해가능한 구성, 배치 잘 이용할 수 있는 구조, 흐름
  • 4. Copyright© All rights reserved 조성봉 4 UX/UI Design 경험 파악 제품/서비스를 구성하는 여러 가지 요소 중에서 실제 사용자 경험과 연관된 것들 경험요소 제품/서비스 경험의 대상 경험요소 사용자가 경험하는 제품/서비스에 내재된 요소 What How • 기능 • 정보 • 폼팩터 • 정책 • UI • 디자인 • 이용절차 • 배열 • 안내 • 인증 • 에러 처리 • 커뮤니케이션
  • 5. Copyright© All rights reserved 조성봉 5 UX/UI Design 경험 파악 사례 - '관객 확장 이니셔티브' 프로젝트 (미국 9개 교향악단) 경험요소
  • 6. Copyright© All rights reserved 조성봉 6 UX/UI Design 경험 파악 경험요소와 경험간의 연결을 매끄럽게 하면 좋은 사용자경험을 이끌어 낼 수 있다 경험요소 사용자들이 해당 제품/서비스에서 경험하는 요소들을 모티브로 해서 디자인에 행동유도(Affordance)를 부여한 좋은 사례들
  • 7. Copyright© All rights reserved 조성봉 7 UX/UI Design 경험 파악 경험요소와 경험간의 연결이 떨어지면 나쁜 사용자경험이 나올 확률이 높아진다 경험요소 이 공원 디자인 사례는 사람들의 동선이라는 경험요소를 고려하지 않고, 논리성만 강조했기 때문에 실제 사용자들의 경험과 괴리되었다 이 엘리베이터 버튼 배치는 많은 혼란을 불러일으킨다. 사용자들이 가고자 하는 층수와 실제 버튼 위치가 적절하게 매치되지 않고 있다. 무엇이 문제일까?
  • 8. Copyright© All rights reserved 조성봉 8 UX/UI Design 경험 파악 경험요소와 경험간의 연결관계 경험요소 연결은 뛰어나지만 불안감을 자아낸다
  • 9. Copyright© All rights reserved 조성봉 9 UX/UI Design 경험 파악 경험요소와 경험간의 연결관계 경험요소 보편적인 사용자보다는 특정 사용자들로 국한한다면...
  • 10. Copyright© All rights reserved 조성봉 10 UX/UI Design 경험 파악 경험요소와 경험간의 연결관계 경험요소 굳이...??
  • 11. Copyright© All rights reserved 조성봉 11 UX/UI Design 경험 파악 모빌리티 서비스(쏘카)에서의 경험요소 경험요소 <공간 확인> • 지도 상에 표시 • 공간명 및 건물내 위치 • 지도 조작 (Pinch in/out) <예약 정보 확인/변경> • 이용시간 확인/변경 • 이용가능 차량 확인? - 가격 확인 - 선택한 날짜 확인 <인터렉션> • 뒤로가기 • Bottom-sheet up/down • 차량 선택 <공간 확인> • 지도 상에 표시 • 공간명 및 건물내 위치 • 지도 조작 (Pinch in/out) <예약 정보 확인/변경> • 이용시간 확인/변경 • 이용가능 차량 확인 • 다른 차량 확인? <인터렉션> • 훑어보기 (Scrolling) • Bottom-sheet down • 차량 선택
  • 12. Copyright© All rights reserved 조성봉 12 UX/UI Design 경험 파악 기존 경험요소도 기술에 따라 그 양상이 달라지는 일이 많다. 그러나 진보된 기술을 받아들인다는 것이 반드시 좋은 UX를 담보하는 것은 아니다 경험요소 CONTINENTAL X GENESIS 3D GAUGE DISPLAY Continental 3D Ligghtfield
  • 13. Copyright© All rights reserved 조성봉 13 UX/UI Design 맥락 (Context) 사용자 경험이 일어나는 배경, 특정한 상황과 전후의 문맥, 물리적인 공간과 시간도 맥락에 해당한다 맥락 (Context) = 상황, 공간, 시간, 전후 문맥, 사회문화적 배경 맥락 (Context) 경험의 배경
  • 14. Copyright© All rights reserved 조성봉 14 UX/UI Design 맥락 (Context) 맥락을 모르고 기능, 디자인만 강조한 제품/서비스는 사용자들로부터 외면받을 수 있다 맥락 (Context) 농구 경기장에 이런 시계가?
  • 15. Copyright© All rights reserved 조성봉 15 UX/UI Design 맥락 (Context) 맥락을 알아야지만 비로소 그 사용자의 경험을 공감할 수 있다. 맥락을 모르고 행동, 고충, 니즈를 보게 될 경우 잘못 해석하는 경우도 있다 맥락 (Context) 추천상품이 필요 해요 추천상품이 필요 해요 이미 홈화면에 있어요 이미 홈화면에 있어요 대체 뭘 하 라는 거야? 대체 뭘 하 라는 거야? 검색하고 홈화면에 돌아 갔을 때, 검색어와 관련한 추천상품이 필요해요 검색하고 홈화면에 돌아 갔을 때, 검색어와 관련한 추천상품이 필요해요 … … 검색의 맥락을 통 해 내 관심사를 알아줘야지? 검색의 맥락을 통 해 내 관심사를 알아줘야지?
  • 16. Copyright© All rights reserved 조성봉 16 UX/UI Design 맥락 (Context) 서로 다른 이율 표시 맥락 (Context) 맥락을 감안했다면 좀 더 단순하게 표현 가능했을텐데..
  • 17. Copyright© All rights reserved 조성봉 17 UX/UI Design 맥락 (Context) 사용자의 경험을 이해하기 위해서는 맥락을 아는 것이 필요하다 장소+시간+상황의 결합 Image source : Henry Perks/Unsplash 현위치 주변의 저녁먹을만한 장소를 찾고 있기는 한데, 이 렇게 일일이 정보를 살펴보 는 방법 밖에 없나요? 현위치 주변의 저녁먹을만한 장소를 찾고 있기는 한데, 이 렇게 일일이 정보를 살펴보 는 방법 밖에 없나요? • 장소 : 번화가 한복판의 길거리 • 시간 : 저녁식사 무렵 • 상황 : 여자친구와의 데이트, 잘 알지 못 하는 지역 방문, 새로 사귄지 얼마 안된 여자친구 • 동기 : 그녀의 입맛에 맞는 조용한 분위기 의 저녁식사 장소를 찾고 싶음 • 행동 : 구글 지도에서 현위치 주변 맛집을 일일이 확인하고 있음 • 니즈 : 손품을 팔지 않고, 현 상황에 가장 적합한 맛집이 추천되기를 원함
  • 18. Copyright© All rights reserved 조성봉 18 UX/UI Design 맥락 (Context) 누군가의 경험을 들여다 볼 때에는 맥락도 같이 봐야 함을 잊지 말자 맥락 분석하기
  • 19. Copyright© All rights reserved 조성봉 19 UX/UI Design 맥락 (Context) 사용자의 경험을 이해하기 위해서는 맥락을 아는 것이 필요하다 장소+시간+상황의 결합 추천 결과가 내가 원하던 게 아닌데요? 추천 결과가 내가 원하던 게 아닌데요? • 장소 : 버스 정류장 • 시간 : 퇴근 시간 • 상황 : 퇴근시 버스를 타기에 앞서서 클럽 하우스에 들어가서 관심사가 반영된 방에 들어가고자 함 • 동기 : 1시간 내외의 퇴근 시간동안 들을 만한 콘텐츠 찾기 • 행동 : 별다른 고민이나 탐색 절차 없이 홈화면에 추천된 방 중에서 선택 • 니즈 : 평소 클럽하우스에서의 활동내역 과 현재의 맥락을 기반으로 나한테 맞는 방이 추천되었으면 함
  • 20. Copyright© All rights reserved 조성봉 20 UX/UI Design 맥락 (Context) 대부분의 경우 UX의 품질은 맥락과 관계되어 있다 맥락 분석하기 Source : Erik D. Kennedy 아래 '국가 선택(Country Selection)'은 단순한 작업이지만, 한편으로는 복잡한 작업이기도 하다. 200여개나 되는 국가들 중에서 하나를 선택하는 것도 어려운 일이지만, 우리나라의 경우 Korea, Repulic of Korea, Korea(South), South Korea 등 여러 개의 명칭들이 있어서 어떤 알파벳으로 가야할 지 헷깔리는 경우도 있다. 오른쪽처럼 검색에 의해서 선택이 가능하다면 훨씬 편리할 것이다
  • 21. Copyright© All rights reserved 조성봉 21 UX/UI Design 맥락 (Context) 대부분의 경우 UX의 품질은 맥락과 관계되어 있다 맥락 분석하기 Source : Erik D. Kennedy 아래의 날짜 선택 UI 예시를 보면 왼쪽 월/일/년을 하나씩 선택하는 것은 틀리고, 캘린더를 통해서 선택하는 것이 맞다고 얘기하고 있는데.. 이 경우에는 맥락에 따라서 저자의 얘기가 맞을 수도 있고, 틀릴 수도 있다. 오늘을 기준으로 가까운 과거나 미래의 날짜를 선택할 때에는 저자의 아래 얘기가 맞다. 그러나 생년월일을 선택하는 경우를 생각해보라. 캘린더로 찾는 게 과연 더 바람직할 것인가?
  • 22. Copyright© All rights reserved 조성봉 22 UX/UI Design 맥락 (Context) 누군가의 경험을 들여다 볼 때에는 맥락도 같이 봐야 함을 잊지 말자 맥락 분석하기 Source : Erik D. Kennedy Quiz. 음악을 듣다가 이 곡을 새 플레이리스트에 담고 싶어졌다. 이 때 '플레이리스트 만들기' 버튼이 어디에 있는 게 맥락상 더 바람직할까? A B
  • 23. Copyright© All rights reserved 조성봉 23 UX/UI Design 맥락 (Context) 사용자 조작이 풍부해야 하는 조회 화면에서는 사용자 의도에 맞게 인터랙션이 설계돼야 한다 네이버 지도에서는 특정 장소를 선택할 때 기존에 보고 있던 지도 화면에 비해 확대된 척도(Scale)로 화면이 재설정되어 방향/위치 감각이 상실된다 맥락 분석하기
  • 24. Copyright© All rights reserved 조성봉 24 UX/UI Design 맥락 (Context) 사용자 조작이 풍부해야 하는 조회 화면에서는 사용자 의도에 맞게 인터랙션이 설계돼야 한다 Q. 지도와 세부 정보를 동시에 보다가 Drawer를 밑으로 내렸을 경우 지도 척도는 어떻게 달라지는 게 맞을까요? 맥락 분석하기 A B
  • 25. Copyright© All rights reserved 조성봉 25 UX/UI Design 경험 파악 인간은 누구나 보편적 심리 경향을 지니고 있다 사용자 사람들은 누구나 서비스 이용 과정에서 보편적 특성을 드러낸다 복잡함을 회피, 모양 차이보다 색상 차이에 더 주목, 한 번에 하나만 집중 위의 각 도형그룹들을 보면서 무엇과 무엇이 구분되시나요? 솔직하게 생각나는대로 말씀해 보세요
  • 26. Copyright© All rights reserved 조성봉 26 UX/UI Design 경험 파악 인간은 사회적 동물이다 사용자 우리는 사회인(member of society) 가운데 한명으로써 유행이나 사회경제적 상황, 기술 트렌드, 세대적 성향 등에 의해 영향을 받는다 비대면 서비스 선호, 디지털로 모든 것을 추구, 가심비, 생체인증, 모바일 미디어 때로는 세대적 특성(Z세대, Y세대, X세대 등)이나 연령대별 특성에 따라서 서로간에 다른 경향을 보이기도 한다
  • 27. Copyright© All rights reserved 조성봉 27 UX/UI Design 경험 파악 인간은 서로 다른 개성과 취향을 드러낸다 사용자 실제 우리 서비스를 이용하는 사용자 한 명, 한 명의 경험 조사방법 : 설문조사, 통계(데이터) 분석, 실시간 모니터링, 온라인 간접조사, 필드 리서치(직접 대면 인터뷰/관찰조사) IoT, 빅데이터, AI 기술의 발달로 최근에는 실시간 모니터링을 통한 사용자 경험 조사도 많이 이뤄지고 있다
  • 28. Copyright© All rights reserved 조성봉 28 UX/UI Design Image source : PNGwing, entrepreneurhandbook Image source : PNGwing, brafton Image source : PNGwing, vye Segment Archetype Persona 경험 파악 수많은 사용자들의 경험을 일일이 특정지을 수는 없으므로 우리는 사용자들을 공통점에 따라서 유형화 한다 사용자
  • 29. Copyright© All rights reserved 조성봉 29 UX/UI Design 경험 파악 Archetype은 필드 리서치 이전에 제품/서비스의 전형적인 사용자들을 미리 정의하는 방법이다 사용자
  • 30. Copyright© All rights reserved 조성봉 30 UX/UI Design 경험 파악 우리는 제품/서비스의 사용자를 알아야 한다 사용자 할 수 있는 것 직접 할 수 없는 것 1순위 : 괜히 손을 댔다가 실수 발생 시 오히려 비용이 더 커질 수 있는 위험 영역 (전자제품 소모품 교체, 계절별 케어) 2순위 : 보유 가전의 기능 제한이나 이사, 계절, 자녀 성장에 따른 대규모 변화 (매트리스 청소, 겨울 이불 세탁, 인테리어 시공, 입주 청소, 자녀 가구/벽지 교체 등) 3순위 : 큰 맘 먹고 시도해봄직한 대청소, 세밀한 청소, 가전 케어 (욕실 곰팡이 제거, 전등 교체, 세탁기 배수구 청소, 에어컨 청소 등) 자신없거나 번거로운 것 예시 : 주부들이 원하는 가사 도우미 서비스
  • 31. Copyright© All rights reserved 조성봉 31 UX/UI Design 경험 파악 Red Routes 사용자 모든 사용자들이 항상 쓰는 서비스부터 ~ 일부 사용자들이 가끔 쓰는 서비스까지
  • 32. Copyright© All rights reserved 조성봉 32 UX/UI Design 경험 파악 제품/서비스의 복잡성에 따라서 사용자는 다른 반응을 보인다 사용자 동일한 사용자라고 하더라도 우리의 서비스가 얼마나 단순~복잡한 지에 따라서 그들이 보이는 경험은 달라진다 source : Harvard Business Review
  • 33. Copyright© All rights reserved 조성봉 33 UX/UI Design 경험 파악 동기는 행동을 만들어낸다. 사용자들은 행동하면서 고충과 니즈를 갖기 때문에 사실상 모든 ‘사용자 경험(UX)’은 동기로부터 시작된다고 해도 과언이 아 니다. 행동은 밖으로 드러나는 데 비해서 동기는 직접 확인하려고 들지 않는 이상, 알기 어렵다 동기와 행동 맥락 (Context) 경험의 배경 동기 행동의 이유 행동 경험의 발현 source : Ron Hurst
  • 34. Copyright© All rights reserved 조성봉 34 UX/UI Design 경험 파악 동기는 목적의식과 관련되어 있다 동기 1. 아주 약한 목적 의식 : 심심해서, 현재의 따분한 기분을 바꾸고자 2. 습관적인 확인, 굳이 지금 할 필요는 없는 행동 : 새 소식, SNS, 알림 확인 3. 내적 동기가 있으나, 생략해도 무방함 : 뉴스, 음악, 신규 컨텐츠 확인 4. 지금 해야 하는, 주기가 짧은 행동들 : 날씨 확인, 버스 도착 정보 조회 5. 반드시 지금 해야 하는 주기가 긴 행동들 : 금전 거래, 메일 전송, 업무 처리
  • 35. Copyright© All rights reserved 조성봉 35 UX/UI Design 경험 파악 동기는 의도이다 동기 ① 어느 것이든 상관없이 관심있는 것을 보고 싶다 : 평소에 자주 쓰던 앱들을 전전 ② 원하는 정보를 바로 찾고 싶다 : 특정 상품 찾기, 배송 조회, 잔액 조회 ③ 특정 영역에 해당하는 정보를 모두 보고 싶다 : 오늘자 경제 뉴스, 오사카 여행 정보 ④ 여러가지 대안 비교하고 하나 고르기 : 길 찾기 대중교통 정보, 가성비 노트북 ⑤ 목적에 필요한 활동을 순차적으로 완성하기 : 여행지의 비행기-호텔-관광지 예약
  • 36. Copyright© All rights reserved 조성봉 36 UX/UI Design 경험 파악 동기는 시간 속에서도 찾아볼 수 있다 동기 과거의 ‘어떤’ 사실 ‘지금’의 정보 미래의 ‘예측’ 지금까지의 패턴에 따른 ‘추천' 과거에서 현재까지의 ‘추이’ 4 5 3 2 1
  • 37. Copyright© All rights reserved 조성봉 37 UX/UI Design 경험 파악 행동은 크게 봐서 일련의 연속적인 이용 흐름과 특정 시점에서 보이는 구체적인 행위로 나눠진다 행동 Image source : uxmisfit.com Image source : applebase
  • 38. Copyright© All rights reserved 조성봉 38 UX/UI Design 경험 파악 모바일에서의 연속된 이용 흐름은 보통 다음과 같이 진행되며, 이것을 다른 말로 사용자 여정(User Journey)이라고 부르기도 한다 행동 (외부)탐색 접근 탐색 조회 (주)활동 이탈 인증 개인화 • (외부)탐색 : 포털 검색, 가격비교, SNS, 메신저, QR 태그, 앱-앱 연동, 모바일웹-앱 연동 • (주)활동 : 구매, 예약, 거래 등 • (부가)활동 : 저장, 공유, 상담, 확인 등 (부가)활동
  • 39. Copyright© All rights reserved 조성봉 39 UX/UI Design 경험 파악 이용 흐름 패턴 – 1. 연속적 흐름 행동 목적의식적인 동기, 진입후 기대한 결과에 이르기까지 서비스가 제시하는 흐름을 연속적으로 진행하는 행동 진입 탐색 조회 인증 주활동
  • 40. Copyright© All rights reserved 조성봉 40 UX/UI Design 경험 파악 이용 흐름 패턴 – 2. 반복적 흐름 행동 목적의식적인 동기, 원하는 결과를 얻기까지 같은 행동(주로 탐색)이 반복되는 행동 검색 결과 재검색 진입
  • 41. Copyright© All rights reserved 조성봉 41 UX/UI Design 경험 파악 이용 흐름 패턴 – 3. 일회성 조회/활동 행동 목적의식적인 동기, 원하는 결과를 바로 얻고 서비스를 이탈하는 행동 진입 조회 / 활동
  • 42. Copyright© All rights reserved 조성봉 42 UX/UI Design 경험 파악 이용 흐름 패턴 – 4. 설정을 통한 맞춤화 행동 준목적의식적인 동기, 원하는 결과를 얻기 위해서 좋아요/싫어요 등의 설정을 하거나 서비스가 사용자 데이터에 기반하여 개인화 제공 조회 설정 맞춤화 진입
  • 43. Copyright© All rights reserved 조성봉 43 UX/UI Design 경험 파악 이용 흐름 패턴 – 5. 전체 영역내 비목적의식적인 행동 행동 비목적의식적인 동기, 원하는 결과를 얻기 위해서 전체 서비스 영역내에서 무작위적인 탐색과 조회를 번갈아하는 행동 조회 탐색 탐색 (연계된) 조회 진입 조회 … …
  • 44. Copyright© All rights reserved 조성봉 44 UX/UI Design 경험 파악 이용 흐름 패턴 – 6. 특정 영역내 비목적의식적인 행동 행동 비목적의식적인 동기, 특정 영역(예: 가구, 경제뉴스) 내에서 원하는 결과를 얻기 위해서 무작위적인 탐색과 조회를 번갈아하는 행동 조회 탐색 탐색 (연계된) 조회 진입 조회 … … 특정 영역
  • 45. Copyright© All rights reserved 조성봉 45 UX/UI Design 경험 파악 이용 흐름 패턴 – 7. 정해진 루틴에 따른 반복되는 활동 행동 목적의식적인 동기, 정해진 루틴에 따라서 같은 행동을 반복 (예: 게임, 헬스케어, 주식) 탐색/조회 활동 진입 탐색/조회 활동 진입 탐색/조회 활동 진입 #1 #2 #n 탐색/조회 활동 진입 #3
  • 46. Copyright© All rights reserved 조성봉 46 UX/UI Design 경험 파악 행위 = 인터렉션 행동 Source : justinmind
  • 47. Copyright© All rights reserved 조성봉 47 UX/UI Design 경험 파악 우리가 어떻게 UX/UI를 디자인하느냐에 따라서 사용자의 불필요한 행위가 줄어들고, 매끄럽게 이용흐름이 연결될 수 있다 행동
  • 48. Copyright© All rights reserved 조성봉 48 UX/UI Design 경험 파악 디지털 서비스에서 사용자 행동 설계시 가장 유의할 점은 '사용자들은 그들의 행동을 최소화하고 싶어한다'는 점이다 행동 가급적 귀찮게 하지 않는다
  • 49. Copyright© All rights reserved 조성봉 49 UX/UI Design 경험 파악 고객에게 확인을 요청하는 것이 때로는 귀찮고 성가신 일인 경우도 많다. 반면에 고객의 확인없이 진행할 수 없는, 꼭 필요할 때도 있다. 행동 고객에게 행동을 요청할 때에는 그 경 중에 따라서 때로는 명시적으로, 때로 는 암묵적으로 진행될 필요가 있다
  • 50. Copyright© All rights reserved 조성봉 50 UX/UI Design 경험 파악 사용자들의 행동을 최소화시킨다 행동 해당 화면에서 해야 할 첫번째 행동이 입력이라면 진입하자마자 그것이 가능하게 한다
  • 51. Copyright© All rights reserved 조성봉 51 UX/UI Design 경험 파악 사용자들은 이미 한 행동을 되돌이키고 싶어할 때가 많다 행동 뒤로가기, 임시저장, 회수하기 등의 옵션으로 이미 한 행동을 돌이키거나 멈추게 한다
  • 52. Copyright© All rights reserved 조성봉 52 UX/UI Design 경험 파악 사용자들은 이전에 한 행동들을 다시 찾는 경우가 많다 행동 최근 본 상품, 최근 검색어, 최근 이용한 카드, 최근 이체한 계좌...
  • 53. Copyright© All rights reserved 조성봉 53 UX/UI Design 경험 파악 불필요한 행위가 줄어든 것 만으로도 UX 품질(특히 사용성)이 많이 향상된다 행동
  • 54. Copyright© All rights reserved 조성봉 54 UX/UI Design 경험 파악 뒤로가기(Back key) 탐색 네이버 모바일 쇼핑 판에서 마음에 드는 상품에 들어가서 리뷰를 보다가 뒤로가기를 누르면 상품 정보가 아닌 목록으로 건너뛴다. 사용자 입장에서는 상품 목록에서 특 정 상품을 선택해 상품 정보를 보다가 리뷰 탭을 선택해서 리뷰를 봤기 때문에 뒤로가기 했을 때 이동해야 하는 위치가 목록보다는 상품 정보인 게 더 바람직하다 행동
  • 55. Copyright© All rights reserved 조성봉 55 UX/UI Design 경험 파악 뒤로가기(Back key) 탐색 행동 목록 상품A 상품B 상품C … 동일 유형의 화면을 꼬리를 물면서(Berry Picking) 돌아다닌 끝에 뒤로가기를 누른 경우에는 그 사이에 돌아다닌 화면들을 일일이 거치지 않고, 상위 위계(hieararchy) 화면으로 가는 게 맞다
  • 56. Copyright© All rights reserved 조성봉 56 UX/UI Design 경험 파악 행동유도성(Affordance)과 상태(Signifier)를 잘 고려하면 우리는 우리가 원하는 사용자들의 행위를 이끌어 낼 수 있다 행동 Affordance Signifier
  • 57. Copyright© All rights reserved 조성봉 57 UX/UI Design 경험 파악 행동유도성(Affordance)과 상태(Signifier)에 제품/서비스의 특성을 반영하면 ‘Something Different’가 일어난다 행동
  • 58. Copyright© All rights reserved 조성봉 왜 동기 어떻게 행동 (연속적 흐름 + 구체적 행위) 무엇을 경험요소 누가 archetype, Persona 힘들어 고충 필요해 니즈 과연? 태도 심성 모형 (Mental Model) 맥락 (Context) 보편적 심리, 사회적 속성 관여도 가치 판단 속성 신념 지각적 조직화 지각적 해 석 무엇을 경험요소 무엇을? 경험요소 전달하고자 하는 가치 현재의 경험 파악 확실한 문제 확실하지 않은 이슈 조사 문제 정의 라이트브레인 컨설팅그룹 월요 교육 01
  • 59. Copyright© All rights reserved 조성봉 59 UX/UI Design 경험 파악 일반인들은 UX라고 하면 사람들의 고충을 해결하는 일이라고 알고 있을 것이다. 그래서 더 편리하게, 쉽게, 즐겁게 만들어 달라고 말할 것이다. 고충이 UX 의 전부는 아닐지라도 고충을 해결하는 것은 서비스의 만족도 유지를 위해서 매우 중요한 일이다 고충(Pain Point)이란? 사람으로써 사물을 인식/이해/해석하는 본성을 거스름 사회인으로써 현 시대 트랜드와 맞지 않음 사용자로써 서비스 이용이 매끄럽지 못함
  • 60. Copyright© All rights reserved 조성봉 60 UX/UI Design 경험 파악 고충의 정도에 따라 사용자들은 단순히 불만을 토로하는 것에서 그치지 않고, 서비스에 대해 반발심을 갖거나, 심지어는 적극적인 이탈 후 부정적인 입소문 을 내는 데 앞장서기도 한다 고충(Pain Point)이란?
  • 61. Copyright© All rights reserved 조성봉 61 UX/UI Design 사용성 원칙 사용성은 사용(Use) + 능력(Ability)가 결합된 용어로, 사용자들이 얼마나 쉽고 효율적이며 만족스럽게 쓰는 가를 의미하는 말이다. 사용성 원칙은 사용성 측면에서 반드시 지켜야 할 원칙들을 체계화시킨 것이다 사용성 원칙이란?
  • 62. Copyright© All rights reserved 조성봉 62 UX/UI Design 사용성 원칙 사용성 원칙은 다음과 같은 20가지로 구성된다 사용성 원칙 20가지
  • 63. Copyright© All rights reserved 조성봉 63 UX/UI Design 사용성 원칙 사용자의 행동에 대한 서비스의 반응. 사용자가 서비스의 상태를 이해하기 쉽게 인지 할 수 있는지 여부 (ex. 모래시계, 다운로드 중) 효율성 > 반응성
  • 64. Copyright© All rights reserved 조성봉 64 UX/UI Design 사용성 원칙 사용자가 자신이 원하는 Task를 쉽고 빠르게 마무리 할 수 있는 지 여부 (ex. 단축키, 즐겨찾기, 바로가기 등의 단축경로, 자동완성, 내비게이션, 링크) 효율성 > 단축성
  • 65. Copyright© All rights reserved 조성봉 65 UX/UI Design 사용성 원칙 사용자가 범할 수 있는 실수를 사전에 방지하는지 여부 (ex. 예시 제시, 비활성화, 경고 문구) 정확성 > 사전방지성
  • 66. Copyright© All rights reserved 조성봉 66 UX/UI Design 사용성 원칙 서비스의 오류가 발생한 시점에 즉각적인 조치를 취하는 지 여부 (ex. 오류 팝업, 느낌표) 정확성 > 오류발생감지성 Source : Marc Andrew
  • 67. Copyright© All rights reserved 조성봉 67 UX/UI Design 사용성 원칙 서비스를 통해 사용자가 행한 오류를 정정할 수 있는지 여부 (뒤로가기 버튼, 자동저장) 정확성 > 오류회복성
  • 68. Copyright© All rights reserved 조성봉 68 UX/UI Design 사용성 원칙 서비스가 정확히 정보를 제시하고 있는지 여부 정확성
  • 69. Copyright© All rights reserved 조성봉 69 UX/UI Design 사용성 원칙 서비스 내부에서 변화된 값을 사용자가 인지할 수 있는지 여부(ex. New아이콘, 로그인 팝업, 파일 저장 후 자동실행) 의미성 > 변화제시성
  • 70. Copyright© All rights reserved 조성봉 70 UX/UI Design 사용성 원칙 전달된 정보를 사용자가 이해할 수 있는지 여부. ※ 사용성 원칙들 중에서 가장 기본적이고, 중요하다 의미성 > 이해가능성
  • 71. Copyright© All rights reserved 조성봉 71 UX/UI Design 사용성 원칙 초보 사용자가 서비스를 과업의 특성에 맞게 설정가능하며 자연스럽게 학습하여 유용하게 작업 할 수 있는지 여부 의미성 > 학습성
  • 72. Copyright© All rights reserved 조성봉 72 UX/UI Design 사용성 원칙 방금 전 행위를 기억하지 못해도 서비스에서 인지할 수 있는지 여부 (최근 검색어, 로그인 자동저장) 의미성 > 기억성
  • 73. Copyright© All rights reserved 조성봉 73 UX/UI Design 사용성 원칙 사용자의 행위를 적절한 형태나 액션을 통해 제공하고 있는지 여부 의미성 > 행동유도성
  • 74. Copyright© All rights reserved 조성봉 74 UX/UI Design 사용성 원칙 사용자가 원하는 대로 서비스와 상호작용 할 수 있는지 여부 (설정 편집, 필터 저장) 유연성 > 사용자주도권
  • 75. Copyright© All rights reserved 조성봉 75 UX/UI Design 사용성 원칙 서비스 이용 제한, 업그레이드 필요 등 강제성을 지니는지 여부 유연성 > 서비스주도권
  • 76. Copyright© All rights reserved 조성봉 76 UX/UI Design 사용성 원칙 사용자가 특정 과업을 수행할 때, 두 가지 이상의 대안이 있어 적절한 방법을 선택할 수 있는 지 여부 유연성 > 대체성
  • 77. Copyright© All rights reserved 조성봉 77 UX/UI Design 사용성 원칙 사용자가 한 번에 두 개 이상의 작업을 동시에 수행할 수 있도록 하는 속성 (멀티태스킹, 복합 검색, 선택의 폭) 유연성 > 다중성
  • 78. Copyright© All rights reserved 조성봉 78 UX/UI Design 사용성 원칙 사용자의 취향이나 특성에 따라 서비스의 현재 상태를 변화시킬 수 있는지 여부 (ex. 스킨 변경, 비슷한 상품 추천, 북마크) 유연성 > 개인화 1) 사용자 가치 적용 사회적 가치가 반영된 다양한 커스텀 리스트를 제공 선택한 가치에 맞는 콘텐츠와 커스텀 화면을 위젯 형태로 제공 2) 전체 UI 방식에 영향을 주는 모드로 가치 반영 제어센터를 통해 모드 실행 실행된 모드를 아이콘으로 노출 해당 모드에 맞춰 인터랙션 변화 모드에 맞춰 UI 크기 및 구성 변화 3) GUI 테마 변경 테마에 맞는 디자인 요소 적용
  • 79. Copyright© All rights reserved 조성봉 79 UX/UI Design 사용성 원칙 서비스간의 연결이 쉬운지 여부 (ex. 하드웨어적 연동성, 소프트웨어적 호환성) 유연성 > 연결성
  • 80. Copyright© All rights reserved 조성봉 80 UX/UI Design 사용성 원칙 사용자가 자신의 경험에 비추어 행동에 대한 결과를 예측할 수 있는지 여부 (ex. 익숙한 아이콘, 툴바, 마우스 오버) 일관성 > 예측가능성 예측가능성은 기능-결과간 적절한 맵핑과 관련되어 있다 97%까지 3분 소요. 97%부터 15분 소요?
  • 81. Copyright© All rights reserved 조성봉 81 UX/UI Design 사용성 원칙 사용자가 자신의 경험을 바탕으로 서비스를 사용하는 데 필요한 지식을 습득할 수 있는지 여부 (눈에 익은 메타포의 사용, 친숙한 용어의 사용, 직관성이 높 은 요소 사용) 일관성 > 친숙성
  • 82. Copyright© All rights reserved 조성봉 82 UX/UI Design 사용성 원칙 한 서비스 안에서 일관성을 가지고 UI 스타일 가이드를 제공하며, 규칙적으로 서비스에 적용하고 있는지에 대한 여부 (ex. 레이아웃, 폰트, 버튼 형식 등 페 이지마다 일관적인 UI 요소를 사용) 일관성 > 일반화 가능성 Source : Thai Dang Source : Marc Andrew
  • 83. Copyright© All rights reserved 조성봉 83 UX/UI Design 사용성 원칙 이건 어디에 해당할까요?
  • 84. Copyright© All rights reserved 조성봉 휴리스틱 평가
  • 85. Copyright© All rights reserved 조성봉 85 UX/UI Design 휴리스틱 평가 UX 디자인에서 진행하는 프로젝트들은 '문제 해결'이 아닌, '문제 발견'까지만 진행하는 경우도 많다 문제 진단의 여러가지 방법들 휴리스틱 평가 사용성 테스트(UT) 설문조사 A/B 테스트 특징 검증된 사용성 테스트 체계를 이용하여 전문가들이 점수를 부여하고 그 결과를 취합함으로써 신속한 평가가 가능 실제 사용자들을 섭외하여 소요시간, 업무 효율성, 에러율 등을 파악 → 사 용자 고충을 면밀하게 진단 서비스 이용 맥락, 현황, 의견, 행태, 만족도 등에 대해서 다수 사용자들을 대상으로 신뢰할 수 있는 결과 수집 복수 개의 프로토타입 중 어떤 것 이 사용자 입장에서 더 바람직할 지(A/B)를 다수 의견으로 결정 활용방법 ✓ 휴리스틱 설계 ✓ 휴리스틱별 가중치 반영 ✓ 전문가에 의한 평가 ✓ 평가 결과 반영 → 휴리스틱 보완 ✓ UT 대상 업무(Task) 선정 ✓ UT 참여자 모집(리쿠르팅) ✓ 정량적인 지표(소요시간, 이동단 계, 성공률, 에러율) 구성 ✓ UT 진행 ✓ 설문조사 기본 형식 및 내용 정의 ✓ 실제 설문조사 질의서 작성 ✓ 설문조사 진행 ✓ 설문조사 결과 분석 ✓ 프로토타입 준비 ✓ A/B 테스트용 툴(예: google optimize)을 활용한 진행 ✓ 결과 → A/B 중 선택 단점 초반 체계 수립에 많은 노력이 요구됨, 몇몇 UX 전문가들의 주관적인 판단에 근거하여 세부 문제는 놓칠 수 있음 참여자 모집에 시일 소요, 테스트 소 요시간(약 1시간) 제약으로 인해 제 한된 범위에서 진행될 수 밖에 없음 결과가 표면적이기 때문에 단독으로 사용성 테스트를 하기에는 부족, 신 뢰도를 위한 표본집단 모집이 힘들 수 있음 다른 평가 방법에 비해서 얻을 수 있는 결과가 제한적임 (A or B) 정성 / 정량 둘 다 가능 (정성 < 정량) 둘 다 가능 (정성 > 정량) 둘 다 가능 (정성 <<< 정량) 정량 방 식 1회 진단 평가 ○ ◐ ○ ● 오픈전/후비교평가 ● ● ◐ ○ 정기적 진단 평가 ◐ ○ ● ○ ● : best, ◐ : good, ○ : soso
  • 86. Copyright© All rights reserved 조성봉 86 UX/UI Design 휴리스틱 평가 휴리스틱 평가 위치 전체 프로세스 휴리스틱 평가 휴리스틱 평가
  • 87. Copyright© All rights reserved 조성봉 87 UX/UI Design 휴리스틱 평가 UX전문가가제품/서비스와관련된사용성원칙을기준으로사용성문제점을도출하는방법(Browmanetel,2001;NielsonandMolich,1990) 휴리스틱 평가란? 휴리스틱 평가의 장점과 한계 • 장점 - 빠른 시간안에 사용성 문제점 진단 - 폭넓은 범위에 대해 진행 가능 - 비교적 정확하게 사용자 고충을 찾을 수 있음 • 한계 - 진단된 고충들이 실제 사용자에게 관여도가 높 은지/빈번하게 이뤄지는지/실생활에 긴요한 지 알기 어려움 - 실제 맥락과는 동떨어져서 경험요소 각각의 UX 품질만 가지고 판단한 것이기 때문에 실제 UX 와는 다를 수 있음 해당 맥락에서는 고충이란 생각이 안들었음 그다지 중요하지 않음 전혀 신경 안쓰임
  • 88. Copyright© All rights reserved 조성봉 88 UX/UI Design 평가 계획 평가 진행 평가 결과 리포팅 No 분석 기준 분석 기준 상세 1 간결성 불필요하거나 상관없는 정보 및 화면을 포함하지 않고 명료하게 구성되어 있는가? 2 개인화 사용자의 개인 정보 및 취향을 고려한 영역이 구성되어 있는가? 3 개인화 사용자의 특성 및 활동이력에 최적화된 정보 구조를 제공하고 있는가? 4 논리성 사용자가 논리적으로 납득할 수 있는 방식으로 정보가 구조화되어 있는가? 5 단축성 주요 정보 및 기능이 홈/메뉴 등을 통해 쉽게 접근할 수 있도록 위치하여 있는가? 6 일반화가능성 시스템 내에서 일관적이고 규칙적인 정보 구조 및 위계를 제공하고 있는가? 7 학습성 정보 구조 및 위계에 대해 쉽게 학습할 수 있는가? 8 가독성 사용자에게 전달된 위치 정보를 명확하게 읽어낼 수 있도록 표현되어 있는가? 9 기억가능성 사용자가 이전 또는 직전의 경로를 기억하지 못해도 시스템에서 인지할 수 있는가? 10 논리성 사용자가 논리적으로 납득할 수 있는 방식으로 내비게이션이 제공되고 있는가? 11 단축성 사용자의 조작 및 수행방식을 단축할 수 있는 내비게이션 방식을 제공하는가? 12 대체성 사용자가 시스템 전체 구조를 알 수 있는 여러 대안을 제공하여 원하는 방식을 선택하여 사용할 수 있는가? 13 사용자주도권 사용자가 자신이 원하는 방식으로 시스템 내에서 이동이 가능한가? 14 연결성 다른 시스템 및 경로와의 연동 및 호환이 매끄러운가? 15 예측가능성 사용자가 이동 가능 경로를 예측할 수 있는 내비게이션 방식을 제공하는가? 16 일반화가능성 시스템 내에서 일관적이고 규칙적인 내비게이션 방식을 제공하고 있는가? 17 일반화가능성 시스템 내에서 일관적이고 규칙적인 레이블을 제공하고 있는가? 18 직관성 각 레이블은 담고 있는 정보/콘텐츠를 대표하며 직관적으로 보여지고 있는가? 19 친숙성 사용자의 경험을 바탕으로 레이블의 용어 및 형태를 이해할 수 있는가? 20 가독성 사용자에게 전달된 검색 결과를 명확하게 읽어낼 수 있도록 표현되어 있는가? 21 간결성 검색 내 불필요하거나 상관없는 요소를 포함하지 않고 명료하게 구성되어 있는가? 22 개인화 사용자가 자신만의 검색 방식으로 검색을 진행할 수 있는가? 23 기억가능성 사용자가 이전 또는 직전에 수행한 검색 내용을 기억하지 못해도 시스템에서 인지할 수 있는가? 24 논리성 사용자가 논리적으로 납득할 수 있는 방식으로 검색이 제공되고 있는가? 25 다중성 사용자가 한 번에 두 가지 이상의 조건으로 검색을 동시에 수행할 수 있는가? 26 단축성 원하는 결과를 탐색하기 위해 조작 및 수행방식을 단축할 수 있는 검색 방식을 제공하는가? 27 대체성 사용자에게 다양한 검색 방식을 제공하고 있는가? 28 연결성 검색 결과를 토대로 다른 시스템 및 경로와의 연동 및 호환이 매끄러운가? 29 일반화가능성 시스템 내에서 일관적이고 규칙적인 검색 작동 및 노출 방식을 제공하고 있는가? 30 주목성 검색 결과에서 주목해야할 요소가 적절히 강조되어 있는가? 31 학습성 검색 기능의 작동 원리 및 방식을 쉽게 학습할 수 있는가? 32 효율성 검색 기능을 효율적으로 사용할 수 있는 도구 및 기능을 제공하고 있는가? 33 간결성 불필요하거나 상관없는 요소를 포함하지 않고 명료하게 구성되어 있는가? 34 개인화 사용자가 자신의 상황이나 취향에 따라 구조를 조정할 수 있는가? 35 논리성 사용자가 논리적으로 납득할 수 있는 방식으로 구조가 제공되고 있는가? 36 대체성 화면 특성에 따라 두 가지 이상의 대안을 제공하여 원하는 방식을 선택하여 사용할 수 있는가? 37 시의성 트렌드에 뒤쳐지지 않은 구조적 형태를 구현하고 있는가? 38 일반화가능성 시스템 내 유사 위계/기능의 화면에서 일관적이고 규칙적인 구조를 제공하고 있는가? 39 주목성 현재 상태에서 주목해야할 요소가 적절히 강조될 수 있는 구조로 구성되어있는가? 40 가독성 노출된 구성요소를 명확하게 읽어낼 수 있도록 표현되어 있는가? 41 간결성 불필요하거나 상관없는 요소를 포함하지 않고 명료하게 구성되어 있는가? 42 논리성 사용자가 논리적으로 납득할 수 있는 방식으로 구성요소가 제공되고 있는가? 43 예측가능성 사용자가 이전 경험에 비추어 노출된 구성 요소 사용 시 이에 대한 결과를 예측할 수 있는가? 44 일반화가능성 시스템 내 구성요소에 대해 일관적이고 규칙적인 작동 및 노출 방식을 제공하고 있는가? 45 주목성 현재 상태에서 주목해야할 요소가 적절히 강조되어 있는가? 46 직관성 시스템에서 제공되는 표현이 해당 과업을 대표하며 직관적으로 보여지고 있는가? 47 친숙성 사용자의 경험을 바탕으로 구성 요소의 형태 및 기능 등을 이해할 수 있는가? 48 간결성 필수 입력 항목과 선택 입력 항목이 명료하게 구성되어 있는가? 49 기억가능성 사용자가 이전에 입력/선택한 내용을 기억하지 못해도 시스템에서 인지할 수 있는가? 50 논리성 사용자가 논리적으로 납득할 수 있는 형태로 입력/선택 방식이 제공되고 있는가? 51 단축성 사용자가 입력/선택을 진행하는 동안 수행방식을 단축할 수 있는 수단을 제공하는가? 52 사전방지성 사용자가 오류를 저지를 수 있는 가능성을 미연에 제거하거나 방지하고 있는가? 53 일반화가능성 시스템 내에서 일관적이고 규칙적인 입력/선택 방식을 제공하고 있는가? 54 직관성 입력/선택을 요구하는 항목이 이를 대표하며 직관적으로 보여지고 있는가? 55 학습성 현재 진행 중인 항목에 적합한 입력/선택방식을 쉽게 학습할 수 있는가? 56 효율성 입력/선택을 효율적으로 진행할 수 있는 도구 및 기능을 제공하고 있는가? 57 가독성 사용자에게 전달된 정보를 명확하게 읽어낼 수 있도록 표현되어 있는가? 58 논리성 사용자가 논리적으로 납득할 수 있는 방식으로 정보가 제공되고 있는가? 59 시의성 트렌드에 뒤쳐지지 않은 방식으로 정보/콘텐츠를 전달하고 있는가? 60 일반화가능성 정보/콘텐츠의 구성 및 노출 방식을 일관적이고 규칙적으로 제공하고 있는가? 61 친숙성 사용자의 경험을 바탕으로 쉽게 이해할 수 있는 형태로 정보/콘텐츠가 노출되고 있는가? 62 가독성 사용자에게 전달된 상태 정보를 명확하게 읽어낼 수 있도록 표현되어 있는가? 63 기억가능성 사용자가 이전 또는 직전에 진행한 내용을 기억하지 못해도 시스템에서 명확히 상태로 나타내고 있는가? 64 논리성 사용자가 논리적으로 납득할 수 있는 방식으로 상태 정보 및 통제 방식이 제공되고 있는가? 65 변화제시성 시스템 내부 상태(변화)에 대해 사용자가 해당 상태(변화)를 즉시 또는 접근 시 감지할 수 있는가? 66 사전방지성 사용자가 사용할 수 없는 기능/요소들에 대한 상태가 명확히 나타나는가? 67 예측가능성 사용자가 이전 경험에 비추어 현재 상태에 대한 결과를 예측할 수 있는가? 68 일반화가능성 서비스 및 사용자의 상태에 대해 일관적이고 규칙적인 노출 방식을 제공하고 있는가? 69 주목성 현재 상태 정보가 적절히 강조되어 있는가? 70 개인화 사용자가 자신의 상황이나 취향에 따라 인터랙션을 설정하거나 구성할 수 있는가? 71 단축성 사용자가 자신이 원하는 과업을 간단하게 마무리할 수 있는 인터랙션 방식을 제공하고 있는가? 72 반응성 사용자의 인터랙션 동작에 따라 시스템이 지체없이 반응하는가? 73 시의성 트렌드에 뒤쳐지지 않은 인터랙션을 구현하고 있는가? 74 예측가능성 사용자가 이전 경험에 비추어 인터랙션에 대한 결과를 예측할 수 있는가? 75 일반화가능성 시스템 내에서 일관적이고 규칙적인 인터랙션 방식을 제공하고 있는가? 76 차별성 본 시스템만의 차별화된 컨셉 및 기능이 적용된 인터랙션을 제공하고 있는가? 77 친숙성 사용자의 경험을 바탕으로 인터랙션의 방식 및 형태 등을 이해할 수 있는가? 78 효율성 시스템을 효율적으로 사용할 수 있는 인터랙션을 제공하고 있는가? 분석 대상 분석 대상 및 기준_LG하우시스 IA 정보구조 내비게이션 레이블 검색 UI Layout Output Component Input Component 정보/콘텐츠 상태 인터랙션 A. 카테고리 분류 B. 평가 항목 설계 D. 결과 분석 C. 평가 최종 산출물 예시 휴리스틱 평가 체계를 먼저 만든 다음에 소수의 전문가에 의해서 서비스의 문제점을 진단 평가 방식
  • 89. Copyright© All rights reserved 조성봉 89 UX/UI Design 평가 방식 가중치 부여, 평가 문항(Heuristic) Category Sub Category Check List A B C 평점 가중치 개선 요구도 사용자들은 시스템에서 자신의 업무를 쉽게 찾고 편리하게 수행할 수 있는가? 1.0 2.0 3.0 2.0 1.58 4.7 사용자들의 수행능력을 충분히 고려하여 설계되었는가? 1.0 2.0 3.0 2.0 1.58 4.7 사용자들의 평균적인 이용환경을 고려하여 설계되었는가? 1.0 2.0 3.0 2.0 1.58 4.7 긴급을 요하는 업무(또는 정보)에 빠르게 접근할 수 있는가? 1.0 2.0 3.0 2.0 1.58 4.7 사용자들이 시스템의 에러나 불만사항을 원활하게 제기할 수 있는가? 1.0 2.0 3.0 2.0 1.18 3.6 시스템의 현재 상태와 현재 사용 가능한 기능이 어떤 것이 있는지 사용자가 직관적 으로 알 수 있는가? 1.0 2.0 3.0 2.0 1.18 3.6 어떤 메뉴 항목이 선택되었는지와 사용자가 어느 위치에 있는지를 시스템이 명확하 게 표시하고 있는가? 1.0 2.0 3.0 2.0 1.18 3.6 시스템에 대해서 이용방법을 쉽게 배울 수 있는 경로가 존재하는가? 1.0 2.0 3.0 2.0 1.58 4.7 처음 시스템을 사용하는 사용자들도 시스템에 빠르게 적응할 수 있는가? 1.0 2.0 3.0 2.0 1.58 4.7 새로운 메뉴가 신설될 경우, 기존 사용자들은 별도의 교육없이도 스스로 해당 메뉴 에 적응할 수 있는가? 1.0 2.0 3.0 2.0 1.58 4.7 사용자 이용 수준에 따라 다양하고 점진적인 형식으로 학습 경로를 제공하고 있는 1.0 2.0 3.0 2.0 1.58 4.7 사용자의 공간적인 기억을 돕기 위해 디자인 요소나 네비게이션이 차별화되어 있는 1.0 2.0 3.0 2.0 1.58 4.7 자주 하지는 않지만 필수적인 작업은 그 순서가 기억하기 쉬운가? 1.0 2.0 3.0 2.0 1.58 4.7 메뉴 항목들이 사용자들로 하여금 기억하기 쉽게 여러 단서를 제공하는가? 1.0 2.0 3.0 2.0 1.58 4.7 입력창에서 어떤 필드에 입력이 필요한지를 기억하기 쉽게 표시하고 있는가? 1.0 2.0 3.0 2.0 1.58 4.7 업무처리에 도움이 되는 정보들이 제공되고 있는가? 1.0 2.0 3.0 2.0 1.58 4.7 효과적인 커뮤니케이션 방법을 제공하고 있는가? 1.0 2.0 3.0 2.0 1.58 4.7 사용자가 필요로 하는 부가적인 다른 기능들을 효과적으로 제공하고 있는가? 1.0 2.0 3.0 2.0 1.58 4.7 유용성 기억가능성 사용자 컨텍스 트 사용자 고려 학습가능성 상호작용 Category 포인트 가중치 Category Sub Category 포인트 가중치 사용자 컨텍스트 2.0 1.50 사용자 고려 2.0 1.58 업무/서비스 1.5 1.13 상호작용 1.5 1.18 IA 1.5 1.13 학습가능성 2.0 1.58 UI 1.5 1.13 기억가능성 2.0 1.58 인터렉션 1.0 0.75 유용성 2.0 1.58 디자인 0.5 0.38 업무기능 2.0 1.75 모니터링 0.5 0.44 프로세스 1.5 1.31 협업 1.5 1.31 상관없음 0 거버넌스 1.0 0.88 약간 상관 0.5 커뮤니케이션 1.5 1.31 보통 1 사용자관여 1.0 0.88 중요 1.5 정보구조 2.0 1.61 매우 중요 2 네비게이션 1.5 1.21 레이블 1.0 0.80 검색 1.0 0.80 개인화 1.5 1.21 IA 업무/서비스 사용자 컨텍스트
  • 90. Copyright© All rights reserved 조성봉 90 UX/UI Design 평가 방식 결과 : 영역별 평점
  • 91. Copyright© All rights reserved 조성봉 91 UX/UI Design 사용성 품질 수준 평가 단순 사용성 문제 진단 기준 : 점수 (1~7) 점수를 통한 UX 품질의 수준을 평가 얼마나 문제가 심각한가? 기준 : 1(긍정), 0(평가 보류), -1(부정) 문제가 있는지, 그것이 어떤 문제인지 진단 어디에 문제가 있는가? 사용성 품질에 대한 수준 평가 vs 단순 사용성 문제 진단 평가 방식
  • 92. Copyright© All rights reserved 조성봉 92 UX/UI Design 평가 대상 (디자인 영역) 평가 기준 (사용성 원칙) UI 일반화 가능성 구성의 적절성 유용성 행동유도성 변화제시성 구조의 적절성 적절성 이해가능성 배치의 적절성 주목성 단축성 일반화 가능성 유용성 가독성 이해가능성 반응성 단축성 친숙성 일반화 가능성 Layout UI Elements 상태 인터랙션 GUI 정보/콘텐츠 학습성 가독성 적절성 이해가능성 시의성 일반화 가능성 IA 접근성 단축성 일반화 가능성 정확성 기억성 이해가능성 대체성 연결성 구조 내비게이션 이해가능성 레이블 Context 반응성 변화제시성 학습성 학습성 연결성 사용자 서비스 Flow 개인화 반응성 사용자 주도권 사전방지성 오류발생감지성 오류회복성 연결성 예측가능성 사용자 대응 피드백 절차 진행 일관성 예측가능성 일반화 가능성 정확성 일반화 가능성 사용자 주도권 서비스 주도권 개인화 일반적으로 UX/UI에서 자주 사용하는 휴리스틱 평가 기준 평가 기준
  • 93. Copyright© All rights reserved 조성봉 93 UX/UI Design 1. 영역별 주요 문제 분포 평가 결과
  • 94. Copyright© All rights reserved 조성봉 94 UX/UI Design 2. 분석 종합 평가 결과
  • 95. Copyright© All rights reserved 조성봉 95 UX/UI Design 3. 상세 문제점 분석 평가 결과
  • 96. Copyright© All rights reserved 조성봉 96 UX/UI Design 개선 우선순위 도출 ✓ 고객 만족에 영향을 주는 요인을 찾아내고 개선의 우선 순위를 도출하는데 효과가 있음 ✓ 동일 항목에 대해 평가자에게 ‘만족 정도’와 ‘불만족 정도’를 동시에 수집해 비교 하여 항목에 대한 관심도를 분석 + 동일 항목에 대해 얼마나 불만족 하는지로 다시 평가 리커트 척도를 활용해 얼마나 만족하는지 평가 개선시급도 B > C > A > D ✓ A영역: 고객이 진실로 만족한 영역, 고객만족을 위해 이 영역에 속한 요인들을 현재 대로 유지 ✓ B영역: 고객들은 이 영역에 속한 요인들에 관심이 높다. 이영역의 불만족만 해결해주 면 고객들의 만족도가 향상될 수 있기 때문에 집중 개선해야할 영역. 고객의 불만족 한 원인을 찾아 해결 ✓ C영역: 진실로 만족하지 않은 영역. 고객 만족을 위해선 근본적인 노력이 필요하고 개선에 많은 투자가 필요 ✓ D영역: 고객들이 관심이 적은 영역. 고객은 이영역에 속한 요인들을 중요하지 않게 생각하고 있다. 이 영역의 개선 순위 낮음 검증에 활용 개선 우선순위 도출 평가 결과
  • 97. Copyright© All rights reserved 조성봉 97 UX/UI Design 냉장고 컨버터 블패키 지 김치 냉장고 정수기 식기 세척기 인덕션 스팀/ 광파 오븐 전자 레인지 와인셀러 홈브루 세탁기 건조기 스타일러 청소기 식물 생활가 전 에어컨 공기 청정기 제습/ 가습 실링팬 스탠 바이미 초 프리미엄(시그니처) 일반 올레드 TVI 라이프스타일(오브제컬렉션) 라이프스타일(라이프스타일TVI) *new *new *new *new *new *new *new *롤러블 *단독보유제품 - - 시네빔 - - - - *new 초 프리미엄(시그니처 키친 스위트) *new 주방가전 생활가전 TV 라이프스타일(비스포크) 초 프리미엄(셰프 컬렉션) 일반 라이프스타일(라이프스타일 TVI) *new *new *new *new *new *new *new *단독보유제품 냉장고 김치 냉장고 큐브 냉장고 정수기 식기 세척기 인덕션 직화 오븐 전자 레인지 큐커 에어컨 세탁기 건조기 에어 드레서 슈드레 서 공기 청정기 청소기 The Frame The Sero The Serif The Premiere Neo QLED The Terrace 원도어 - - - - - 삼성 vs LG전자 스마트 가전제품 현황 예시 : 가전제품 디스플레이 97
  • 98. Copyright© All rights reserved 조성봉 98 UX/UI Design 냉장고 김치 냉장고 큐브 냉장고 정수기 식기 세척기 전기 레인지 직화 오븐 전자 레인지 큐커 에어컨 세탁기 건조기 에어드 레서 슈드레 서 공기 청정기 청소기 The Frame The Sero The Serif The Premiere Neo QLED The Terrace 와인 셀러 홈브루 식물생활 가전 제습/ 가습 실링팬 원도어 올레드 TVI 가격(만) 820 70 1000 400 720 270 190 510 330 170 490 160 80 80 510 130 40 79 180 160 80 25 59 180 140 200 170 790 80 200 110 230 100 60 160 50 1800 820 240 35 240 37 110 50 270 240 150 70 20 53 165 130 110 150 18 670 38 280 20 250 500 750 1000 640 130 690 380 40 27 180 210 450 320 130 59 128 17 210 86 40 16 26 180 160 170 379 270 83 210 230 120 250 200 165 150 440 320 440 100 1090 199 190 72 37 56 1200 10000 2000 180 LG전자 삼성전자 초프리미엄 일반 라이프스타일 비공개 비공개 초프리미엄 제품은 초고가 라인 형성 비스포크/오브제 컬렉션의 경우 스마트기능 탑재해 전 품목으로 확대, 일반라인 대비 높은 가격대 형성 라이프스타일 TVI의 경우 스마트기능을 탑재한 다양한 폼팩터와 오디오 구성까지 확대하여 고가라인 형성 가격대 분포 예시 : 가전제품 디스플레이 9
  • 99. Copyright© All rights reserved 조성봉 99 UX/UI Design 분석 대상 분석 기준 BESPOKE 냉장고 4도어 프리스탠딩 패밀리허브 824 L (RF85A97A1APWWA) BESPOKE 그랑데 AI 24 kg (WF21T6500KW) BESPOKE 무풍에어 컨 갤러리 (65.9 ㎡) (AF20AX978YZT) BESPOKE 에어드레서 대용량 (DF10A9500CG) 분석 범위 항목 정의 인터페이스 구성 디스플레이와 물리버튼 간 원활한 이용과 버튼의 구성 정보 구조 디스플레이나 조작부에서 표현되는 정보와 메뉴들의 구성 방식 정보/메뉴 노출 홈화면에 노출되는 정보와 메뉴들의 표현 정도 조작 횟수/동선 주로 사용하는 메뉴를 빠르게 선택할 수 있도록 기능으로 보완함 Flow 절차 진행 단축 성 아이콘 활용 사용자 이해를 돕기 위한 아이콘의 활용 정도와 색상 및 디테일 요소 표현 정도 심미성 전반적인 디자인 정도와 가전제품과의 연관성 주요 분석요소 항목 정의 학습성 시스템을 처음 경험하는 사용자가 작업 완성을 위해 얼마나 빨리 학습할 수 있는가의 정도 효율성 사용법을 이미 익힌 숙련자들이 더 높은 수준의 작업을 위한 효율에 대한 정도 기억성 일정 기간 사용을 중단하더라도 시스템을 다시 사용할 수 있도록 기억하는 정도 오류 사용자가 시스템을 사용하는 동안 오류를 범하지 않는 정도와 오류에서 회복할 수 있는 여지의 정도 만족성 사용자가 시스템을 사용할 때 주관적으로 느끼는 만족감의 정도 ISO 9241-11 사용성의 원칙 표시부 조작부 디스플레이 영역 • 가전에서 직접 기능을 수행하고 설정을 변경하는 조작부와 조작내용을 노출하는 디스플레이 위주로 분석 • 앱 분석은 제외하나 앱과의 연결성은 분석 대상에 포함 • 조작부가 가전 자체에 있지 않은 에어컨의 경우 리모컨도 분석 범위에 포함 디스플레이 분석 영역 • ISO 9241-11의 휴리스틱 평가 기준인 학습성, 효율성, 기억성, 오류 항목을 바탕으로 평가 • 하드웨어와 소프트웨어를 함께 고려하고 하나의 제품이 아닌 모든 제품에 통영될 수 있는 기준이 필요하기에 ISO 9241-11의 사용성 기준을 바탕을 평가함 • 기존의 5가지 항목 중 만족성은 실제 사용자의 주관성을 확인하는 항목으로 데스크 리서치로 확인이 어렵기에 제외 평가 계획 예시 : 가전제품 디스플레이
  • 100. Copyright© All rights reserved 조성봉 100 UX/UI Design 내부 디스플레이 항목 평가 학습성 최소한의 버튼과 화면 구성(인디케이터와 레이블, 아이콘)으로 학습하기 쉬움 새로운 기능의 레이블(ex.멀티 펜트리)을 사용자들이 바로 이해하기 어려움 효율성 소리를 활용하여 작동 과정을 쉽게 인지할 수 있도록 함 초기 학습을 빠르게 할 수 있는 대신 반복적인 작업이 계속 필요하고 단순한 작동방식으로 효율성은 떨어짐 기억성 손쉽게 구성된 메뉴구조와 인터페이스 그리고 적절한 아이콘 활용으로 기억에 용이함 오류 전반적으로 단순한 구조를 지니고 있어 오류의 가능성이 낮고 발생하는 오류에 대해서도 손쉽게 회복이 가능함 특정 아이콘(ex.와이파이 )이 문구와 반대되어 시스템적 오류가 존재하고 다음단계로 이어갈 어포던스가 부족한 단계들이 있음 To be Improved Good Points ‘부가기능’을 조작하기 위해 많은 화면을 거쳐야 하는데, 해당 메뉴 진입 시에 조작법에 대한 설명을 제공해 사용자의 조작을 도움 [조작+표시] 조작 규칙이 바뀌는 시점에 조작법에 대한 안내 제공 선택한 메뉴의 개수와 현위치를 가늠하도록 Indicator를 제공해 유용성이 있음 [표시] 현 위치와 메뉴의 규모를 파악할 수 있는 Indicator 제공 온도를 설정한 뒤 ,이전 화면으로 돌아가기 위해 사용자가 기다려야 하는지, 어떤 버튼을 눌러야 하는지 등의 가이드를 제시하지 않아 사용자가 무엇을 해야 하는 지에 대한 예측가능성이 낮음 [표시] 설정값 선택 후 사용자가 해야 할 행위에 대한 안내 부족 취소나 History back 개념의 물리 버튼이 없어 옵션을 변경하지 않고 이전 단계로 돌아가는 방법의 예측가능성이 낮음 [조작] 취소/돌아가기 버튼 부재 분석 종합 예시 : 가전제품 디스플레이
  • 101. Copyright© All rights reserved 조성봉 101 UX/UI Design 외부 디스플레이 항목 평가 학습성 앱과의 높은 연동성을 통해 부가기능들 사용 과정을 단축하고 정보를 그래프화 하는 등 시각화된 자료로 데이터를 쉽게 이해할 수 있음 처음 사용시 제공되는 인터페이스 방식이 무엇이 있는지 그리고 어떻게 조작해야 하는지 예측가능성이 낮음 효율성 맞춤화 수준이 높아 화면 구성을 사용자가 원하는 것으로 변경할 수 있는 있고 퀵 메뉴를 상시 제공하여 조작 과정을 단축시킴 기존 모바일 대비 낮은 사용성을 지니고 호환되는 앱들이 적어 디스플레이를 통한 다양한 작업에 한계가 있음 기억성 모바일과 동일한 인터페이스를 사용하여 언제든지 사용하기 쉬움 오류 각각의 기능별 슬라이더나 토글 방식의 적절한 사용으로 해당 기능을 사용할 때 실수하지 않고 손쉽게 제품을 조작할 수 있음 동일한 식품이 여러 개 있는 경우가 디스플레이 정보에는 반영되지 않아 냉장고가 인식한 식품 목록과 실제 식품간 1:1 매칭이 어려움 To be Improved Good Points 사용자가 원하는 사진이나 영상, 스타일 등으로 대기 화면을 구성해 사용자의 선택권이 높음 [조작+표시] 화면 구성을 사용자가 원하는 것으로 맞춤화가 가능 일반적으로 시도하거나 추측 가능한 방식(화면이 꺼진 상태에서 한번 탭)으로 디스플레이를 On할 수 있어 예측가능성이 높음 [조작] 예측이 쉬운 조작 방식의 제공 (탭/스와이프/내비게이션) 냉장고에 동일한 식품이 여러 개 있는 경우가 디스플레이 식품 정보에는 반영되지 않아 정보의 유용성이 낮음. 예를들면, 어느 상품이 유통기한이 다가오는지 쉽게 구분이 안됨 [표시] 냉장고가 인식한 식품 목록과 실제 식품 1:1 매칭의 어려움 냉장고 내부 화면 송출(대기 화면에서 두 번 노크하거나 홈 화면에서 두 손가락으로 화면을 아래로 쓸어내리기), 앱 메뉴 호출(아래에서 위로 스크롤)과 같은 기능 사용을 위한 인터랙션의 존재를 인지하기 어려워 예측가능성이 낮음 [조작] 처음 사용시 예측이 어려운 조작 방식의 제공 (두 손가락 사용, 아래서 위로) 분석 종합 예시 : 가전제품 디스플레이
  • 102. Copyright© All rights reserved 조성봉 102 UX/UI Design 분석 종합 예시 : 가전제품 디스플레이 세탁기 항목 평가 학습성 전원을 켜고 동작버튼을 눌러 바로 진행할 수 있고 (AI맞춤세탁 모드) 다이얼을 통해 다른 메뉴를 쉽게 탐색하는 등 초기 빠르게 사용법을 익힘 길게 눌러야 작동되는 동작/취소 기능은 제품을 처음 사용할 때는 바로 알아채기 어려움 효율성 세탁기 조작부에서 건조기도 함께 컨트롤을 할 수 있어 빠르게 조작이 가능함 나만의 코스리스트를 통해 사용자가 원하는 코스로 맞춤화할 수 있지만 코스의 노출/비노출만 가능해 실질적인 효율성이 낮음 기억성 사용법(AI맞춤세탁과 다이얼 버튼)이 간단해 한 번 사용해본 사용자는 언제든지 손쉽게 사용할 수 있음 오류 각 메뉴마다 사용자가 이해하기 쉬운 문구의 설명이 있고 오작동 시 피드백이 디스플레이에 즉시 제공되어 정확한 이해와 사용을 도움 명확하지 않은 레이블로 인해 해당 메뉴의 정확한 기능을 파악하기 어렵고 사용시 반복적인 오류의 가능성이 높음 To be Improved Good Points 섬세의류를 선택한 경우, ‘전용 세제를 넣어주세요’라는 안내 문구를 제공하는 등 메인 기능 이름 밑에 추가적인 설명을 달아 사용자가 모드 파악과 세탁에 도움이 되는 정보를 파악할 수 있어 유용성이 충분함 [표시] 선택한 모드를 올바르게 이용할 수 있는 보조 정보 제공 세탁 시작을 위해 동작 버튼을 짧게 누르면 '3초 간 길게 눌러주세요' 문구를 노출하는 것과 같이, 사용자가 기능을 제대로 사용하지 못할 시의 피드백을 제공해 오류감지성이 좋음 [표시] 오류를 감지해 사용자가 수행해야 할 정보 제공 시작/일시정지와 같이 일반적으로 한번 누르면 동작할 것으로 예상되는 버튼을 오래 눌러야만 세탁이 시작 가능하도록 세팅되어 있어 예측가능성이 부족함 [조작] 길게 눌러야만 시작되는 ‘동작‘ 버튼 AI를 활용한 기능을 나타내는 두 레이블인 ‘AI맞춤추천(자주 사용하는 코스/옵션)’과, ‘AI맞춤세탁(자동 무게감지 등을 통한 세탁 모드 설정)’ 간 차이가 명확하지 않아 기능의 예측가능성이 낮음 [표시] ‘AI맞춤추천’과 ‘AI맞춤세탁’ 레이블 간 명확하지 않은 차이
  • 103. Copyright© All rights reserved 조성봉 103 UX/UI Design 시사점 도출 (or Ideation) 예시 : 가전제품 디스플레이 2) 페이지 이동 1) 주영역/보조영역 분할 및 확장 3) 탭 이동 사용자의 연동된 가전을 탭으로 이동 주조작 영역과 보조 영역을 분할하여 배치 페이지 인디케이터로 페이지 이동 화면 전환과 뒤로가기를 이용해 화면 확장 화면예시_세탁기 디스플레이
  • 104. Copyright© All rights reserved 조성봉 104 UX/UI Design 시사점 도출 (or Ideation) 예시 : 가전제품 디스플레이 1) 스마트싱즈 가전의 특성상 가전 앞에서 조작이 필요한 상황에 다른 가전들도 퀵하게 모니터링하고 조작할 수 있는 통합 조작 버튼 노출 현재 작동 중인 상태 모니터링 2) UI의 통일 세탁기 보조 디스플레이 및 조작 UI가 냉장고에서 동일하게 표시
  • 105. Copyright© All rights reserved 조성봉 105 UX/UI Design 시사점 도출 (or Ideation) 예시 : 가전제품 디스플레이 1) 추천성 알림 하단영역에 노출되었다 사라지는 형태 설정이 가능한 알림의 경우, 바로 적용할 수 있도록 버튼 제공 프로세스상 사용자가 꼭 알아야 할 알림의 경우, 사용자가 확인 버튼을 눌러야 사라지는 팝업으로 노출 3) 프로세스상의 추천 4) 활동피드의 알림 활동피드를 한 눈에 볼 수 있는 캘린더뷰 제공 빠른 검색을 위해 사용자가 자주 검색하는 검색어를 해시태그 버튼으로 제공 관리가 필요한 타 가전을 조작을 할 수 있는 버튼 제공 가전 활동 히스토리 제공 전체 활동과 각 가전 별 활동 피드를 구분, 사용자가 원하는 가전의 활동만 따로 볼 수 있도록 제공 스와이핑을 통해 마이너스 페이지로 이동하여 활동피드로 진입 2) 피드백이 필요한 알림
  • 106. Copyright© All rights reserved 조성봉 사용성 테스트
  • 107. Copyright© All rights reserved 조성봉 107 UX/UI Design 사용성 테스트 사용성 테스트 위치 전체 프로세스 사용성 테스트 사용성 테스트
  • 108. Copyright© All rights reserved 조성봉 108 UX/UI Design 사용성 테스트 사용성이란 제품/서비스 사용시 사용자들이 얼마나 쉽고 편리하고, 효율적으로 그것을 이용할 수 있는 지를 판단하는 척도임. 사용성 테스트는 이를 측정하 기 위해서 실제 사용자들을 초대하여 사용성 측정 장비가 갖춰진 테스트 환경에서 제품/서비스를 이용하는 과정을 관찰하고 각 지표에 따라 평가하는 과정 사용성 테스트 개요 <사용성 테스트 측정 항목> 항목 테스트 내용 테스트 지표 Easy of Use 사용자들이 Task 수행시 얼마나 에러를 일으키는가? 에러는 어떤 유형인가? 에러율, 성공률 Efficiency Task 수행에 얼마나 시간이 걸리며, 몇 개의 단계를 거치는가? 시간, 이동 단계 Memorability 서비스 사용 후 얼마나 많은 것들을 회상할 수 있는가? 기억 가능성, 학습 소요시간 Satisfaction Task 완료 후 사용자들이 받은 감성적인 만족도는 어떠한가? 감성적인 만족도 목표 설정 결과 예상 행동 순서화 실행 결과 확인 만족도 판단 <서비스 이용 경험 중 사용성 테스트가 일어나는 영역>
  • 109. Copyright© All rights reserved 조성봉 109 UX/UI Design 사용성 테스트 사용성 테스트 결과는 다음과 같이 UX/UI에 반영된다 사용성 테스트 개요 Easy of Use • 사용자들이 Task 수행시 얼마나 에러를 일으키는가? • 에러는 어떤 유형인가? Efficiency • Task 수행에 얼마나 시간이 걸리며, 몇 개의 단계를 거치는가? Memorability • 서비스 사용 후 얼마나 많은 것들을 회상할 수 있는가? • 복잡한 정보구조 • 일관되지 않은 UX • 반복되는 학습 필요 • 일회적인 기억가능성 • 복잡한 정보구조 • 일관되지 않은 UX • 반복되는 학습 필요 • 일회적인 기억가능성 • 비합리적인 이동 단계 • Task 수행 시간 • 반응 없는 피드백 • 비합리적인 이동 단계 • Task 수행 시간 • 반응 없는 피드백 • Task 성공률 • 불명확한 이해 • 인지적 오류 ※ 사용자들이 겪는 문제 • 작동 에러 • Task 성공률 • 불명확한 이해 • 인지적 오류 ※ 사용자들이 겪는 문제 • 작동 에러 인터렉션 • 제스처 일관성 조정 • 행동 유도성(Affordance) 개선 • 상태, 상태변화 제공방식 개선 IA / 이용흐름 • 정보 체계 및 검색 방법 변화 • 이용 흐름 변화 • 내비게이션, 레이블링 개선 UI • 정보의 전달/제공방식 변화 • 컨텐츠 구성방식 변화 • 정보 형태, 배치 방식 변화 Satisfaction • Task 완료 후 사용자들이 받은 감성적인 만족도는 어떠한가? • 사용자가 기대한 가치 불일치 • 서비스의 컨셉 모호 • 서비스 UX 품질의 전반적인 낙후함 • 사용자가 기대한 가치 불일치 • 서비스의 컨셉 모호 • 서비스 UX 품질의 전반적인 낙후함 GUI • 시각적인 계층구조 변화 • 시각적 언어의 조직성, 경제성 점검 • 톤앤매너의 재조정
  • 110. Copyright© All rights reserved 조성봉 110 UX/UI Design 사용성 테스트 지표 - 성공률 사용성 테스트 개요 SCS Differential (Sum minus Count) • 1점 : 아무런 이슈없이 해당 테스크를 수행한 경우 • 0점 : 도움을 받지는 않았으나, 해당 테스크를 매끄럽게 수행하지는 못한 경우 • -1점 : 해당 테스크 수행을 실패한 경우 Source : MeasuringU
  • 111. Copyright© All rights reserved 조성봉 111 UX/UI Design 사용성 테스트 지표 – 직관성(주관적인 평가) 사용성 테스트 개요 Single Ease Question (SEQ) • 테스크 수행후 사용자에게 7점 척도로 해당 테스크의 쉽고/어려움을 평가하게 함 • 0점 : 매우 어려움 - - - - - 6점 : 매우 쉬움 • 각 테스크별로 이를 계산하여 평균 Source : MeasuringU
  • 112. Copyright© All rights reserved 조성봉 112 UX/UI Design 사용성 테스트 종합적인 결론 사용성 테스트 개요 Source : MeasuringU
  • 113. Copyright© All rights reserved 조성봉 113 UX/UI Design 사용성 테스트 사용성 테스트는 다음과 같은 프로세스로 진행된다 사용성 테스트 프로세스 목표 수립/ 평가 준비 UT 설계/ 리크루팅 평가 수행 결과 분석 ✓ UT 배경 이해 ✓ 대상 서비스/제품 이해 ✓ 주요 이슈/제한 사항 파악 ✓ 대상자 Pool 확보* ✓ 인력 운용 계획 수립 * ✓ 평가 항목 정의 ✓ 평가 기준 수립 ✓ 평가 방법 선정 ✓ 대상자 선정기준 정의 ✓ 대상자 섭외 및 선정 ✓ 평가 시나리오 마련 ✓ 예행 평가 테스트 ✓ 평가 수행 ✓ 평가 결과 정리 ✓ 평가 결과 분석 수행 계획 수립* 후속 평가 준비* 후속 평가* ✓ 대상자 Pool 점검 ✓ 인력 운용 점검 단기/1회 UT Activity 주요 산출물 ✓ 수행계획서 ✓ 평가 대상자 선정 결과 ✓ 평가 시나리오 ✓ 평가결과 Raw data ✓ UT분석 결과 보고서 장기/2회이상 UT
  • 114. Copyright© All rights reserved 조성봉 114 UX/UI Design 사용성 테스트 실제 진행과정 사용성 테스트 프로세스 1.테스트 장비 셋팅 2. 테스트 소개 및 사전 인터뷰 3. Task 요청 4.Task 실행 5. 질문/만족도 평가 6. 결과 분석 사용성 테스트 참여자 선정 테스트 시나리오 작성 리쿠르팅
  • 115. Copyright© All rights reserved 조성봉 115 UX/UI Design 사용성 테스트 사용성 테스트는 사용성 측면에서의 문제인 고충을 발견하는 게 목적이기 때문에 참여자 선정 과정이 비교적 덜 까다롭다 참여자 선정 Source : Nielsen Norman Group <테스트 참여자 선정 예시> <테스트 대상 적정 인원>
  • 116. Copyright© All rights reserved 조성봉 116 UX/UI Design 사용성 테스트 이슈별로 사용자에게 요청할 Task, 예상 이동 경로, 조사 포인트, (예상) 소요 시간을 정의한 문서를 테스트 시나리오라고 한다 테스트 시나리오 작성 Sub issue Sub issue Task Task 예상 이동경로 예상 이동경로 조사 포인트 조사 포인트 마이앨범에 곡 담기 마이앨범에 곡 담기 원하는 곡을 검색/선택하여 재생한 후 새로운 폴더를 만들어 담아보세요. 원하는 곡을 검색/선택하여 재생한 후 새로운 폴더를 만들어 담아보세요. 홈→재생버튼→더보기→담기→마이앨범 추가→새앨범 만들기→새앨범 선택→확인 홈→재생버튼→더보기→담기→마이앨범 추가→새앨범 만들기→새앨범 선택→확인 - 기능 인지 및 접근 경로 파악 - 기능 인지 및 접근 경로 파악 마이앨범에서 곡 재생 마이앨범에서 곡 재생 새로운 폴더에 저장했던 노래를 재생해 주세요. 새로운 폴더에 저장했던 노래를 재생해 주세요. 메뉴→마이뮤직→마이앨범 선택→곡 선택→듣기 메뉴→마이뮤직→마이앨범 선택→곡 선택→듣기 - 메뉴의 위치 및 ‘마이뮤직’ 레이블 인지 가능한지 파악 - 메뉴의 위치 및 ‘마이뮤직’ 레이블 인지 가능한지 파악 내 뮤직허그 만들기 내 뮤직허그 만들기 내 음악 방송 방을 만들어 주세요. 내 음악 방송 방을 만들어 주세요. 뮤직허그→친구 선택→내 뮤직허그 가기→나만의 뮤직허그 설정→확인 뮤직허그→친구 선택→내 뮤직허그 가기→나만의 뮤직허그 설정→확인 - 메뉴 레이블 및 위치 인지 가능한지 파악 - 메뉴 레이블 및 위치 인지 가능한지 파악 소요 시간 소요 시간 60초 60초 30초 30초 30초 30초 Main issue Main issue 마이앨범 마이앨범 뮤직허그 뮤직허그 재생목록 편집 재생목록 편집 노래 목록에서 5번째 곡을 1번째로 이동해 주세요. 노래 목록에서 5번째 곡을 1번째로 이동해 주세요. 재생목록→편집→곡명→우측 바 선택하여 이동 재생목록→편집→곡명→우측 바 선택하여 이동 - 이동을 위한 우측 버튼 기능 인지 파악 - 순서정령과 이동에 대한 구분 가능한지 파악 - 이동을 위한 우측 버튼 기능 인지 파악 - 순서정령과 이동에 대한 구분 가능한지 파악 60초 60초 재생목록 재생목록 아티스트 소개보기 아티스트 소개보기 관심 있는 아티스트 소개보기를 찾아봐 주세요. 관심 있는 아티스트 소개보기를 찾아봐 주세요. 검색→아티스트→아티스트 선택→아티스트 소개보기 검색→아티스트→아티스트 선택→아티스트 소개보기 - 이동 경로 및 버튼의 위치 인지 파악 - 이동 경로 및 버튼의 위치 인지 파악 30초 30초 아티스트 아티스트 <테스트 시나리오 예시>
  • 117. Copyright© All rights reserved 조성봉 117 UX/UI Design 사용성 테스트 사용성 테스트는 Moderator, Observer로 불리는 2~3명에 의해서 진행된다 테스트 진행 <사용성 테스트 진행 모습 예시>
  • 118. Copyright© All rights reserved 조성봉 118 UX/UI Design 사용성 테스트 테스트는 One-sided Mirror를 통해서 육안으로 관찰할 수도 있지만, 카메라를 통해서 Recorder에 기록되고, 연결된 Observer에서도 실시간으로 관찰이 가능하며 관찰자들이 관찰 내용을 Marker로 기록할 수 있다 Task 관찰/기록 참가자가 수행하고 있는 Task를 PC화면에 출력되는 영상을 통해 확인 2.Task 수행 과정 관찰 Task가 시작되면 Start Task로 촬영을 시작하고 End Task로 마침 1.Task 시작/끝 촬영 3.Marker 기록 Task를 관찰하는 과정에서 관찰 내용 및 참가자 의견, 오류 발생에 대한 내용을 기록함.
  • 119. Copyright© All rights reserved 조성봉 119 UX/UI Design 사용성 테스트 테스트 소프트웨어에서 저장한 결과 내용들을 분석 툴로 불러와서 사용자별 테스트 내용을 담은 비디오 클립과 Marker 기록 내용을 확인한다. 분석 툴에서 는 사용자 및 테스크별로 파일구조가 자동 생성된다 Raw data 정리 Task 성공률 Task 수행 시간 Task 에러 발생수 전반적 감성적 만족도 Morae Manager Marker
  • 120. Copyright© All rights reserved 조성봉 120 UX/UI Design 사용성 테스트 다음과 같이 각종 지표들을 Task별로 정리한다 각종 지표 정리 <성공률> <소요 시간> <에러율> <만족도>
  • 121. Copyright© All rights reserved 조성봉 121 UX/UI Design 사용성 테스트 테스트 결과를 가지고 어떤 유형의 문제가 있는 지 분석하고 이를 리포팅한다 사용성 테스트 분석하기 <사용성 테스트 결과 분석 예시>
  • 122. Copyright© All rights reserved 조성봉 122 UX/UI Design 사용성 테스트 다음과 같이 각종 지표들을 Task별로 정리한다 디자인 영역별 분석
  • 123. Copyright© All rights reserved 조성봉 123 UX/UI Design 사용성 테스트 구체적인 문제 정의(키파인딩)를 진행한다. 이 결과가 사용성 테스트의 최종 리포트가 된다 키파인딩
  • 124. Copyright© All rights reserved 조성봉 124 UX/UI Design 사용성 테스트 1. 기능별 분석 결과 기능별 만족도 평균 키워드 분석 4.3 3.3 4.1 3.5 0 1 2 3 4 5 차량관리 안전보안 원격제어 길찾기 긍정/부정 응답 비율 72% 28% 긍정 부정 긍정/부정 단어 빈도 (%) 긍정 원격 87 긍정 난방 66 긍정 시동 65 긍정 통풍 52 긍정/부정 단어 빈도 부정 타이머 87 부정 공조 66 부정 연동 65 부정 주소 52 Summary 블루링크의 기능별 만족도는 원격제어가 4.3점, 안전보안 3.3점, 차량관리 4.1점, 길찾기 3.5점으로 양호한 편임 주관식 응답 분석 결과, 전체 답변의 긍정 응답률은 72%, 부정 응답률을 28%로 나타나 사용자들이 전반적으로 긍정적인 사용성을 느끼고 있음 긍정 응답과 부정 응답의 키워드 분석 결과, 원격제어 기능과 관련된 키워드가 긍정 답변의 대다수를 차지해 만족도가 높음을 알 수 있음 (N = 1,000) 예시 : 현대 Bluelink
  • 125. Copyright© All rights reserved 조성봉 125 UX/UI Design 사용성 테스트 1. 기능별 분석 결과 예시 : 현대 Bluelink (1) 원격제어 기능 공조 기능설정에 대해 긍정 답변이 81%, 부정 답변이 19% 나왔는데 긍정 답변에서 빈도가 높게 나타난 키워드 Top5 원격, 난방, 제어, 편리, 타이머이고, 부정 답변에서 키워드 Top5는 연동, 분리, 불필요, 개선, 낭비로 나타남 평가점수 단어 빈도 5 원격 87 5 난방 66 5 제어 65 4 편리 52 4 타이머 44 4 공조 42 5 연동 34 4 시동 31 평가점수 단어 빈도 1 연동 87 1 분리 66 1 불필요 65 1 개선 52 2 낭비 44 2 안걸림 42 2 불편 34 2 버튼 31 부정 응답 키워드 분석 58% 23% 10% 9% 매우 만족 만족 불만족 매우 불만족 Q. 시동을 걸 때 원격제어 기능에 대해 얼마나 만족하시나요? 긍정 응답 키워드 분석
  • 126. Copyright© All rights reserved 조성봉 126 UX/UI Design 사용성 테스트 1. 기능별 분석 결과 “시동을 켤 때마다 공조 설정을 해야 해서 귀찮음” 사용자 총 543명 5.0 % 5.0 % 25. 0% 45. 0% 20. 0% 1 2 3 4 5 35명 (6.5%) 40명 (7.4%) 200명 (36.8%) 170명 (31.3%) 98명 (18.0%) 49% 37.8% 80% 80% 70% (N = 1,000) (N = 543) 64% 23% 11% 2% 항상 이용함 대부분 이용함 종종 이용함 거의 이용 안 함 앱 사용 빈도 주 이용 목적 52% 29% 6% 7% 6% 출퇴근 픽업 주말 나들이 장보기/쇼핑 기타 목적 (N = 543) (N = 543) 원격제어 기능 (3) 공조 설정 단계 – 주요 응답 별 사용자 특성 분석 원격제어 기능 만족도가 높은 사용자도 매번 공조 설정을 하는 것에 불편함을 느끼며, 앱을 자주 사용할 수록, 규칙적인 일과에 맞춰 차량을 이용할 수록 불편함을 많이 느낌 예시 : 현대 Bluelink
  • 127. Copyright© All rights reserved 조성봉 127 UX/UI Design 사용성 테스트 2. 영역별 분석 결과 예시 : 현대 Bluelink (1) UI – 기준별 사용자 상관 분석 블루링크 앱 UI의 평균 점수는 4.1점으로 평가되었다. 가독성 평균은 4.2점으로 높았던 반면, 효율성 평균은 3.2점으로 낮게 평가됨 40대 남성이 유연성을 높게 평가하고, 40대 여성이 효율성을 낮게 평가하는 비중이 높이 나타남 “원격제어 버튼이 가운데 바로 있어서 빠르게 이용할 수 있어요” “다양한 경로를 보고 싶은 데 경로 검색 결과가 두 개 안보여줘서 불편해요.” 0% 20% 40% 60% 80% 100% 효율성 가독성 예측가능성 유연성 매우 그렇다 그렇다 보통이다 그렇지 않다 전혀 그렇지 않다 평점 4.2점 3.4점 여성(51.7%), 40대에서 상대적으로 놓게 나타남 “글씨도 버튼도 크기가 커서 잘 보여요” 4.5점 사용자 특성별 큰 차이를 보이지 않음 “용어가 쉽게 이해할 수 있어서 원하는 기능을 바로 쓸 수 있어요” 4.1점 남성(55.3%), 연령대가 높을수록 상대적으로 평 점이 높음 40대(19.6%)에서 상대적 으로 높게 나타남
  • 128. Copyright© All rights reserved 조성봉 128 UX/UI Design 사용성 테스트 2. 영역별 분석 결과 예시 : 현대 Bluelink (1) UI > 명확성 – 사용자 특성 별 차이 분석 블루링크 서비스를 무료로 이용중인 사용자가 다른 사용자에 비해 상대적으로 명확성에 대한 평가를 낮게 함 그 중에서도 연령이 낮을 수록 명확성이 좋지 않다고 느끼며, 차량 관리 기능에 대한 만족도가 낮음 3.3 4.2 4.3 4.0 무료 이용 유료 이용(연장) 유료 이용(가입) 법인 이용 0 1 2 3 4 5 3.2 4.2 4.3 4.7 0 1 2 3 4 5 43% 28% 19% 10% 20대 30대 40대 50대 서비스 이용 상태 별 ‘UI > 명확성’ 항목 평점 10.0%15.0% 30.0% 35.0% 10.0% 5 4 3 평가 점수 별 분포 연령 기능별 평점
  • 129. Copyright© All rights reserved 조성봉 129 UX/UI Design 사용성 테스트 2. 영역별 분석 결과 예시 : 현대 Bluelink 10. 0% 35. 0% 30. 0% 15. 0% 10. 0% 1 2 3 4 5 경험 일반 유용성 2.8점 (N = 1,000) 주 이용 기능 (1, 2순위) (N = 450) 30 135 130 155 20 170 190 70 0 100 200 300 400 안전보안 차량관리 길찾기 원격제어 1순위 2순위 0 100 200 300 400 500 600 일별 또는 주별 운행정보도 알려주면 좋을 것 같음 앱에서 즐겨찾기 한 목적지가 차량과 연동이 안 됨 54.3% 48.6% 24.3% 20.3% 내비게이션에서 목적지를 검색할 수 없음 부정 의견 4 부정 의견 5 부정 의견 6 부정 의견 7 15.3% 4.6% 0.7% 평가 점수 이유 (N = 450) (3) 경험 일반 > 유용성 – 부정적 사용자 특성 분석 유용성 점수를 낮게 평가한 사용자 대부분이 길찾기와 차량관리 기능을 주로 이용하며, 해당 기능이 사용자 기대에 못 미치거나 불충분하다고 생각함