HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안

데이터 기반 UX 평가를 통한
반응형웹 디자인 개선 방안
An Improvement Guidelines of Responsive Web Design
through Data-Based UX Evaluation
장선영 ㈜에스앤씨랩 대표이사
박태준 ㈜포그리트 대표이사
류호경 한양대학교 기술경영전문대학원 교수
February 10, 2017 | HCI KOREA 2017

데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
Speakers
Web Accessibility & Usability
Consulting Firm
jsy@snclab.kr
장선영 대표이사
웹 사이트 품질개선을 위한 모든 것
웹 접근성 · 접근성 인증 · UI/UX 컨설팅
웹 접 근 성 실 시 간 모 니 터 링 솔 루 션

Speakers
Development and distribution of
Usability software
joon@4grit.com
박태준 대표이사

에스앤씨랩과 포그리트는
웹사이트 품질개선을 위한 웹 접근성 및 사용성 프로젝트를
진행하고 있습니다.

웹 사이트의 첫인상
어떻게 만드시나요?

UX Design Process
Research Strategy Design
Contextual Research
Survey & Interviews
Expert Evaluation
Observation Interview
User Scenarios
Personas
Concept Model
UX Strategy
UX Guideline
Prototype Design
User Test
Taxonomy
Process Charts
Wireframes
Screen Designs
Design Styleguide
다양한 UX방법론이 존재

UX디자이너의 현실

클라이언트 :
결과물이 과연 잘
만들어진 것인가?
사용자가 편리하게
쓰고 있는가?
디자이너 :
데이터를 분석할 시간도,
전문인력도
부족해…

사용성 평가 기반 분석
사용성 평가, 전문가 평가 등
두 달 이상 소요
사실적인 데이터를 얻을 수
있지만 관찰자에 따라 결과를
다르게 해석할 수 있음.
사용성 평가의 효과
솔루션 기반 분석
로그분석, 히트맵 등
방문자 중심 측정으로 일주일
이상 소요
신뢰도 높은 데이터를 얻을 수
있지만 전문가의 세부적이고
다양한 해석이 요구 될 수 있음.

데이터 기반 UX 평가 방법
솔루션 분석
User Data 획득
User Data 분석
기능 중요도 분석
사용성 평가
비교 분석
개선점 도출
가이드라인

사용성 평가 방법
이용자 태스크(Task) 분석을 기반으로 한
인터페이스의 사용성 문제를 파악
사용성 평가
계획
사용성 평가
준비
사용성 평가
실시
결과분석
보고서 작성
• 평가 목표 설정 및 계획 • Screening
Questionnaire 작성
• 사용자 모집
• 시나리오 작성 및 태스
크
목록 설정
• 태스크 진행 전 설문, 진
행 후 설문 작성
• Pilot Test 실시
• 질문서 검증
• 장비 점검
• 비디오 분석
• Task Analysis
• 보고서 작성
1. Pre Interview
2. Website 반응 조사
3. 태스크 수행
4. 테스트 후 설문, 인터뷰

사용성 평가 프로세스
Website 반응 조사
Pre Interview
태스크 수행
• 사용자 기본 정보 확인
• 웹사이트 자유서핑을 통해 대상 웹사이트에 대한 사용자 반응 조사
• 시나리오에 따른 사용성 평가 수행
• 태스크 평가 중 생각과 반응을 말로 표현하도록 함.
• Observer Ethnography로 Video 녹화를 통해 이용자들의 행동을 분석
•인터뷰를 통한 웹사이트 이용에 대한 장단점 및 개선점 의견 제시테스트 후 설문, 인터뷰
1
단
계
2
단
계
3
단
계
4
단
계

사용성 평가를 위한 피실험자는 평가 대상 웹사이트 이용 시 주요 메뉴의 사용 편리성을 측정하기 위해 20대 ~ 40대
로 사이의 평가 대상 사이트의 주 목적(창업)에 관심이 있는 사용자로 선정하였으며, 20대, 30대, 40대 연령별로 각 3
명씩 총 9명을 선정하여, 설문지 조사, 태스크 수행평가, 평가자 인터뷰, 평가 결과 분석 과정을 거쳤습니다.
No 성별/나이 직업/업무 주 사용 브라우저 인터넷 이용 경험 평가 대상 웹사이트 이용 경험
1 남/30 창업 준비/- Internet Explorer
12 시간/주
페이스북, 인스타그램
있음
2 남/27 창업준비/공부 Internet Explorer
20 시간/주
포털사이트
있음
3 여/43 직장인/사무직 Internet Explorer
30 시간/주
인터넷뱅킹, 포털사이트
없음
4 여/27 대학원생 Internet Explorer
30 시간/주
SNS, 유투브, 포털사이트
없음
5 남/40 직장인/프로그래머 Chrome
70 시간/주
포털사이트
있음
6 남/45 스타트업대표/사업, 기획 Chrome
70 시간/주
커뮤니티 사이트
있음
7 여/35 직장인/기획 Chrome
40 시간/주
포털사이트
없음
8 여/30 직장인/디자이너 Chrome
12 시간/주
쇼핑 및 업무관련 사이트
없음
9 여/25 직장인/디자이너 Chrome
12 시간/주
포털사이트
없음
사용자 프로파일

사용성 평가 – 사용자 의견 분석
메인 페이지의 스크롤이 너무 길어서 찾기가 어려워요. (User1)
상단 네비게이션이 눈에 잘 안띄어서 메인페이지의 배너를 보고 이동하게
됩니다. 배너랑 같은 색이어서 그런지 메뉴를 잘 안보게 됩니다.(User8)
상단 배너의 빨간색, 파란색이 너무 강렬해서 오히려 제가 원하는 정보를 찾기가 어려
운 것 같아요. (User4)
상단 빨강 파랑 배너랑 하단이랑 두 개가 다른 사이트처럼 보여요.(User9)
상단 가운데 로고와 상단 왼쪽 로고는 왜 두개인가요? 어떤게 로고인지 모르겠어요. (User1)
메인 화면 사용에 대한 사용자 의견

아이디어 제안을 위한 메뉴를 빨리 찾지 못해서 메뉴를 하나씩 눌
러보게 됩니다. 그런데 하위메뉴가 없어서 계속 back 스페이스 버
튼을 눌러 메인에 가서 다시 이용해야 하는게 불편해요. (User4)
아이디어 커뮤니티 메뉴명은 커뮤니티 카페 같아서 아이디어 제안을 할 수
있다는 생각이 들지 않아요. (User3)
아이디어 제안하는 곳을 쉽게 찾기가 어렵네요. (User2)
아이디어 제안에 대한 사용자 의견

아이디어 커뮤니티에 아이디어제안하기 버튼을 공모전 지원 페이
지에서도 쓰니깐 다른 페이지라고 생각됩니다. 공모전 페이지로 분
명 온 것 같은데 갑자기 아이디어 커뮤니티가 나오니 혼란스럽네요.
(User8)
공모전까지 들어가는 절차는 쉬운데 공모전 안에서 용어가 아이디어 제안
목록이나 아이디어로 되어있어서 많이 잘못 들어왔나 생각하게 만듭니
다.(User9)
아이디어 제안하기 버튼을 공모전에 참가하기식으로 바꾸는게 좋을 것 같아요. 공모
전 참가자 목록으로 해야 공모전 페이지에 들어왔다고 생각할 것 같아요.(User1)
공모전 지원에 대한 사용자 의견

사용성 평가 결과
Task
효과성
(성공실패)
효율성
(수행시간)
오류
(오류빈도)
만족도
(난이도)
1. 아이디어 제안하기 40.00 82.80 4.0 35.60
2. 아이디어에 투자하기 82.22 43.30 1.3 63.95
3. 공모전 지원하기 53.89 68.30 2.4 42.98
4. 사업 지원 신청하기 57.22 47.00 2.3 52.55
5. 타운매거진 정보 확인하기 100.00 06.90 0.0 69.30
평균 66.67 49.70초 2.0회 52.9점
사용성 평가의 결과는 아이디어제안하기 태스크에서 가장 높은 오류횟수, 긴 수행시간, 낮은 만족도를 나타
내고 있습니다. 공모전 지원하기, 사업 지원 신청하기 태스크에서는 중간 정도의 오류횟수와 낮은 만족도를
보여주고 있습니다.

사용성 평가 결과 요약
(메인화면) 과도한 정보량(색상과 폰트)으로 가독성 저하
(아이디어 커뮤니티) 현재 위치에 대한 Indicating 기능 부재
(아이디어 커뮤니티) 사용자에게 혼란을 줄 수 있는 네이밍 사용
(아이디어 커뮤니티) 사용자 행동을 고려하지 않은 버튼의 배치

솔루션 평가 – 사용자 활동 규모 분석
링크 위주의 사이트임을 감안하면,
이동 당 평균 체류 시간은 길고, 마우스 움직임이
활발하지 않은 편이다.
사용자는 평균 약 5분 24초 체류
약 10번 마우스 이동
마우스 한 번의 이동 당 평균 체류
시간은 32.4초

솔루션 평가 – 스크롤 이동 분석
사용자가 접근한 페이지의
콘텐츠 길이는 상단으로 부터 약 28%
90%의 사용자는 스크롤을 이동하지 않고
기본 화면 내에서만 콘텐츠를 탐색하였다.

솔루션 평가 – 스크롤 이동과 콘텐츠 확인 분석
카드형 콘텐츠를 확인한 사용자의
73%가 탐색을 계속하기를 중단했음
을 의미25
%
50
%
75
%
100
%
높이 별 콘텐츠 확인 비율을 통해
스크롤 이동 비율이 매우 낮음을 알 수 있다.

솔루션 평가 – 마우스 이동과 클릭 분석
마우스 이동이나 클릭과 같은 행동이 일부 콘텐츠,
영역에 행동이 한정되어 있음을 알 수 있다.

솔루션 평가 – 유입 경로 별 사용 행태 비교 분석
네이버의검색결과를통해들어온사용자
아이디어페이지에서다시유입된사용자
유입 및 전환 경로가 아이디어 페이지로
동일한 것으로 봐서, 아이디어 페이지에서
사용자들이 원하는 정보를 충분히 탐색하거나
찾지 못했음을 예측할 수 있다.

솔루션 평가 결과
사용자의 행태에 맞게 메인 콘텐츠를 좀 더 축소하거나,
사용자의 행태를 좀 더 활발히 개선시킬 필요가 있다.
일반적인 유입 사용자에 비해 [아이디어 홍보]에 특별히
관심가진 것으로 보아, [아이디어] 페이지에서
이와 같은 콘텐츠로 바로 전환될 수 있도록
개선할 필요성도 있어 보인다.
사용자가 콘텐츠를 쉽게 파악하고 마우스 활동을 좀 더
적극적으로 변화시켜, 마우스 이동이나 스크롤 이동 비율과
관련된 콘텐츠 탐색율을 개선시킬 수 있다.

계속 발전하는 서비스 개발 이슈 고려하기

다양한 사용자와 장애 환경 고려하기
대한민국 인구 중 100명당 5명이 신체/정신적 장애를 겪고 있습니다.
대한민국 전체 가구에서 7가구 중 1가구마다 장애인이 거주하고 있습니다.
대한민국 전체 252만여 장애인 중 90.5%가 후천적인 장애인들입니다.
※ 출처 : 33회 장애인의 날 교육자료_장애인의 삶과 사회적 인식(보건복지부)
우리나라 인구의 5.6%가 장애인이며,
그 중 90.5%가 사고, 질병 등으로 장애를 얻은 후천적 장애인으로
누구나 불의의 사고 등으로 인해 장애인이 될 수 있습니다.
후천성
장애
90%
선천성
장애
10%

비장애인의 접근성 환경 고려하기
출처 : IBM, http://www-03.ibm.com/able/dwnlds/SXSW_2012_Cragun_Keohane_IBM.pdf
Outside light
Tiny screen
One hand
Aging eyes Bumpy road Eyes free

반응형웹(Responsive Web UI)

반응형웹 콘텐츠의 장점은 사용성에 유리한가?
모든 디바이스
에서 일관성
있는 디자인
다양한 환경의
사용성 고려
부족
무거운 리소스
성능 저하

모든 디바이스
에서 일관성
있는 디자인
모바일에서도 최적화된
콘텐츠를 보여줄 수 있는가?

다양한 환경의
사용성 고려
부족
실제로 모든 사용자들이
편리하게 사용할 수 있는가?

무거운 리소스
성능 저하
속도의 개선 및 리소스 최적
화를 고려하여 제작되었는가?

반응형웹 콘텐츠의 사용성
버튼 전체가 아닌 공모전 텍스트에만 링크를 제공하
고 있어 사용자들이 화살표를 여러 번 클릭하게 됨.
버튼의 배경을 CSS 처리 후 텍스트 링크로 기능키를
사용하고 있음.
버튼 전체가 아닌 공모전 텍스트에만 링크를 제공하
고 있어 사용자들이 화살표를 여러 번 클릭하게 됨.
(사용성 테스트에서도 동일한 조작법이 발견됨)
텍스트 링크로만 페이지 이동이 가능한 것을 학습해
야 하는 문제가 있으며 마우스 조작이 어려운 사용자
들의 경우는 더욱 사용이 어려움. 버튼 전체에 링크가
작동되도록 개선이 필요함.
화면간 이동이 편리한가?

하단 정보 페이지는 길고 방대한 내용을 텍스트 위주
로 구성해 지루하고 피로감 유발.
사용자가 많이 찾는 콘텐츠의 우선순위별로 메인
콘텐츠의 재구성이 필요함.
모바일에 최적화된 디자인 필요
모바일에 최적화 되어 있는가?

제품리뷰 타이틀의 게시물 클릭 시 해당 페이지의
타이틀이 스타트업뉴스로 변경됨. 잘못 링크된 것
으로 생각하게 됨.
타운매거진 메인페이지 타이틀과 해당 페이지 타이
틀이 달라 사용자에게 혼란을 줌. 동일한 타이틀 제
공이 필요함.
현재 사용자 위치를 파악하기 쉬운가?

스크린리더 사용자가 접근할 수 있도록 이미지에 대
한 대체텍스트를 제공해야 하나 이미지에 alt 속성만
제공하고 대체텍스트를 제공하지 않아 시각장애인은
사이트 내용을 인지할 수 없음. 대체텍스트 없이 alt
속성만 제공할 경우 스크린리더는 불필요한 이미지로
간주하여 읽지 않음.
대체텍스트 미제공으로 스크린리더 사용자는 사이트
내용을 이해하기 어려움.
<img src="/images/ko/main/img_main_visual2.png" alt="">
<img src="/images/ko/main/img_main_visual2.png" alt="이미
지에 해당하는 내용을 이해할 수 있도록 대체 텍스트를 제공
해야 합니다. ">
텍스트 아닌 콘텐츠는 그 의미나 용도를
인식할 수 있도록 대체 텍스트를 제공하고
있는가?

지도의 정보를 툴팁으로 제공하고 있어 키보드로 이
용 시 툴팁 접근이 불가능하여 키보드 사용자는 정보
를 제공받을 수 없음.
onfocus=“this.blur();“를 사용하는 경우 키보드 접근은 물
론 초점의 시각적 구분이 불가하고, 의도하지 않은 초점변
화가 발생함
모든 기능은 키보드만으로도 사용할 수 있
는가?

화면에 사용된 컬러의 의미가 제공되지 않음.
과도한 색상 사용과 텍스트 명도대비가 낮아 가독성
이 떨어짐.
텍스트로만 제공하지 말고 아이콘을 적절히 활용하여
시작일, 마감일의 명확한 구분을 권장함.
콘텐츠는 명확하게 전달될 수 있도록 텍스트와 콘텐
츠의 명도 대비를 고려하여 제공해야 함.
텍스트 콘텐츠와 배경 간의 명도 대비를
고려하여 제공하는가?

구분 AS-IS TO-BE
사용성
메뉴 구조 개선
① 1depth 메뉴 일관성
② 서브메뉴 개선
① 메뉴의 성격별로 분류하여 일관성 있는 네비게이션 개선
② 상단 네비게이션 분류에 따른 서브메뉴 제공
기능 개선
③ 사이트맵, 버튼 위치
③ 메뉴 분류를 빠르게 파악할 수 있도록 사이트맵 제공, 주요
기능키를 클릭하기 쉬운 곳에 배치
기능성
기능개선
④ 사용자 Action에 대한 피드백 기능
⑤ 버튼 네이밍
④ 기능 실행 전 사용자 Action에 대한 피드백 제공
⑤ 버튼 네이밍은 명확한 지시사항 제공 필요
효율성
⑥ 메인 화면 링크방식 개선
현재 위치에 대한 Indicating 기능 부재
⑥ 일관성 있는 Indicating 기능 제공
기능개선
⑦ 서브메뉴 표현방식 개선
⑧ 서브메뉴 타이틀 개선
⑦ 일관성 있는 서브 메뉴 표현 방식으로 개선 필요
⑧ 메뉴명과 타이틀을 동일하게 제공
접근성 ⑨ 대체 텍스트 (웹접근성)
⑩ 키보드 사용 환경 개선(달력, 지도 등)
⑨ 이미지에 대한 대체텍스트 제공
⑩ 키보드 초점 제공
심미성 ⑪ 메인화면 색상과 폰트 변경 ⑪ 텍스트 명도 대비를 고려한 색상 제공
고객지향성 ⑫ 스크롤 메뉴바 개선 ⑫ 시각적 강조 및 일관성 있는 메뉴 제공
분석결과

사용하기 쉬운
인터페이스
사용자에
최적화된
경험

Thank You
http://www.beaccessible.net/
https://www.beusable.net/

HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안

Semelhante a HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 (20)

HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안