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

[email protected]

장선영 대표이사

웹 사이트 품질개선을 위한 모든 것

웹 접근성 · 접근성 인증 · UI/UX 컨설팅

웹 접근성 실시간 모니터링 솔루션


Speakers

Development and distribution of Usability software

[email protected]

박태준 대표이사

에스앤씨랩과 포그리트는

웹사이트품질개선을위한웹 접근성및 사용성프로젝트를진행하고있습니다.

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


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 Explorer12 시간/주

페이스북, 인스타그램있음

2 남/27 창업준비/공부 Internet Explorer20 시간/주

포털사이트있음

3 여/43 직장인/사무직 Internet Explorer30 시간/주

인터넷뱅킹, 포털사이트없음

4 여/27 대학원생 Internet Explorer30 시간/주

SNS, 유투브, 포털사이트없음

5 남/40 직장인/프로그래머 Chrome70 시간/주

포털사이트있음

6 남/45 스타트업대표/사업, 기획 Chrome70 시간/주

커뮤니티 사이트있음

7 여/35 직장인/기획 Chrome40 시간/주

포털사이트없음

8 여/30 직장인/디자이너 Chrome12 시간/주

쇼핑 및 업무관련 사이트없음

9 여/25 직장인/디자이너 Chrome12 시간/주

포털사이트없음

사용자 프로파일


사용성 평가 – 사용자 의견 분석

메인 페이지의스크롤이너무 길어서 찾기가어려워요. (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/

Presentations & Public Speaking

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