Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
데이터 기반 UX 평가를 통한
반응형웹 디자인 개선 방안
An Improvement Guidelines of Responsive Web Design
through Data-Based UX Evaluation
장선영 ㈜에...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
Speakers
Web Accessibility & Usability
Consulting Firm
jsy@snclab.kr
장선영 ...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
Speakers
Development and distribution of
Usability software
joon@4grit.co...
에스앤씨랩과 포그리트는
웹사이트 품질개선을 위한 웹 접근성 및 사용성 프로젝트를
진행하고 있습니다.
웹 사이트의 첫인상
어떻게 만드시나요?
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
UX Design Process
Research Strategy Design
Contextual Research
Survey & I...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
UX디자이너의 현실
클라이언트 :
결과물이 과연 잘
만들어진 것인가?
사용자가 편리하게
쓰고 있는가?
디자이너 :
데이터를 분석할 시간도,
전문인력도
부족해…
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
사용성 평가 기반 분석
사용성 평가, 전문가 평가 등
두 달 이상 소요
사실적인 데이터를 얻을 수
있지만 관찰자에 따라 결과를
다르...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
데이터 기반 UX 평가 방법
솔루션 분석
User Data 획득
User Data 분석
기능 중요도 분석
사용성 평가
비교 분석
개...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
사용성 평가 방법
이용자 태스크(Task) 분석을 기반으로 한
인터페이스의 사용성 문제를 파악
사용성 평가
계획
사용성 평가
준비
...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
사용성 평가 프로세스
Website 반응 조사
Pre Interview
태스크 수행
• 사용자 기본 정보 확인
• 웹사이트 자유서핑...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
사용성 평가를 위한 피실험자는 평가 대상 웹사이트 이용 시 주요 메뉴의 사용 편리성을 측정하기 위해 20대 ~ 40대
로 사이의 평...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
사용성 평가 – 사용자 의견 분석
메인 페이지의 스크롤이 너무 길어서 찾기가 어려워요. (User1)
상단 네비게이션이 눈에 잘 안...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
사용성 평가 – 사용자 의견 분석
아이디어 제안을 위한 메뉴를 빨리 찾지 못해서 메뉴를 하나씩 눌
러보게 됩니다. 그런데 하위메뉴가...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
사용성 평가 – 사용자 의견 분석
아이디어 커뮤니티에 아이디어제안하기 버튼을 공모전 지원 페이
지에서도 쓰니깐 다른 페이지라고 생각...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
사용성 평가 결과
Task
효과성
(성공실패)
효율성
(수행시간)
오류
(오류빈도)
만족도
(난이도)
1. 아이디어 제안하기 40....
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
사용성 평가 결과 요약
(메인화면) 과도한 정보량(색상과 폰트)으로 가독성 저하
(아이디어 커뮤니티) 현재 위치에 대한 Indica...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
솔루션 평가 – 사용자 활동 규모 분석
링크 위주의 사이트임을 감안하면,
이동 당 평균 체류 시간은 길고, 마우스 움직임이
활발하지...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
솔루션 평가 – 스크롤 이동 분석
사용자가 접근한 페이지의
콘텐츠 길이는 상단으로 부터 약 28%
90%의 사용자는 스크롤을 이동하...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
솔루션 평가 – 스크롤 이동과 콘텐츠 확인 분석
카드형 콘텐츠를 확인한 사용자의
73%가 탐색을 계속하기를 중단했음
을 의미25
%...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
솔루션 평가 – 마우스 이동과 클릭 분석
마우스 이동이나 클릭과 같은 행동이 일부 콘텐츠,
영역에 행동이 한정되어 있음을 알 수 있...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
솔루션 평가 – 유입 경로 별 사용 행태 비교 분석
네이버의검색결과를통해들어온사용자
아이디어페이지에서다시유입된사용자
유입 및 전환 ...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
솔루션 평가 결과
사용자의 행태에 맞게 메인 콘텐츠를 좀 더 축소하거나,
사용자의 행태를 좀 더 활발히 개선시킬 필요가 있다.
일반...
계속 발전하는 서비스 개발 이슈 고려하기
다양한 사용자와 장애 환경 고려하기
대한민국 인구 중 100명당 5명이 신체/정신적 장애를 겪고 있습니다.
대한민국 전체 가구에서 7가구 중 1가구마다 장애인이 거주하고 있습니다.
대한민국 전체 252만여 장애인 중 9...
비장애인의 접근성 환경 고려하기
출처 : IBM, http://www-03.ibm.com/able/dwnlds/SXSW_2012_Cragun_Keohane_IBM.pdf
Outside light
Tiny screen
O...
반응형웹(Responsive Web UI)
반응형웹 콘텐츠의 장점은 사용성에 유리한가?
모든 디바이스
에서 일관성
있는 디자인
다양한 환경의
사용성 고려
부족
무거운 리소스
성능 저하
모든 디바이스
에서 일관성
있는 디자인
모바일에서도 최적화된
콘텐츠를 보여줄 수 있는가?
다양한 환경의
사용성 고려
부족
실제로 모든 사용자들이
편리하게 사용할 수 있는가?
무거운 리소스
성능 저하
속도의 개선 및 리소스 최적
화를 고려하여 제작되었는가?
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
반응형웹 콘텐츠의 사용성
버튼 전체가 아닌 공모전 텍스트에만 링크를 제공하
고 있어 사용자들이 화살표를 여러 번 클릭하게 됨.
버튼...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
하단 정보 페이지는 길고 방대한 내용을 텍스트 위주
로 구성해 지루하고 피로감 유발.
사용자가 많이 찾는 콘텐츠의 우선순위별로 메인...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
제품리뷰 타이틀의 게시물 클릭 시 해당 페이지의
타이틀이 스타트업뉴스로 변경됨. 잘못 링크된 것
으로 생각하게 됨.
타운매거진 메인...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
스크린리더 사용자가 접근할 수 있도록 이미지에 대
한 대체텍스트를 제공해야 하나 이미지에 alt 속성만
제공하고 대체텍스트를 제공하...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
지도의 정보를 툴팁으로 제공하고 있어 키보드로 이
용 시 툴팁 접근이 불가능하여 키보드 사용자는 정보
를 제공받을 수 없음.
onf...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
화면에 사용된 컬러의 의미가 제공되지 않음.
과도한 색상 사용과 텍스트 명도대비가 낮아 가독성
이 떨어짐.
텍스트로만 제공하지 말고...
데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017
구분 AS-IS TO-BE
사용성
메뉴 구조 개선
① 1depth 메뉴 일관성
② 서브메뉴 개선
① 메뉴의 성격별로 분류하여 일관성...
뷰저블 시연
사용하기 쉬운
인터페이스
사용자에
최적화된
경험
Thank You
http://www.beaccessible.net/
https://www.beusable.net/
HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안
Upcoming SlideShare
Loading in …5
×

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

데이터 기반 UX평가를 통한 반응형웹 디자인 개선 방안 사례 발표자료입니다. (An improvement guidelines of responsive web design through data-based UX evaluation)
많은 연구를 통해 웹사이트에서 사용성의 중요성이 강조되고 있지만 실제 웹사이트 개발 프로세스에서 사용성에 대한 고려가 충분히 이뤄지기는 쉽지 않다. 사용성에 대한 고려는 기획단계부터 개발 및 완성 단계까지 전 과정에 걸쳐 진행되어야 하는데 사용성에 대한 고려 없이 제작된 웹사이트는 사용상의 문제점이 발견되고 유지보수를 어렵게 만든다. 이를 위한 사용성 평가는 웹사이트가 본연의 목적에 적합하게 제작되었는지 실제 사용자를 대상으로 평가, 분석하는 방법으로 웹사이트에서 사용자 경험을 측정하는데 주안점을 두고 있다.
웹사이트의 사용성을 높이기 위해 전문가 평가 및 사용성 평가를 수행하여 제작팀에 개선가이드라인을 제시할 수 있지만 사용성 평가는 사용자의 반응과 만족도를 평가하기 위해 수행하는 방법들이 피실험자의 주관적인 의견에 의해 측정 오류 및 편견(biases)이 발생하는 문제점을 가지고 있다. 또한 정성적인 평가를 보완하기 위해 분석 솔루션을 활용한 평가방법도 사용되지만 솔루션에 의한 분석 방법은 상세한 원인을 파악하기 힘든 경우가 있어 실제 웹사이트 제작 시 사용성 평가를 통해 객관적인 결과를 획득하려면 시간과 비용이 많이 소요되어 웹사이트에서 사용성에 대한 고려는 매우 제한적으로 활용되고 있다.
이번 Case Study에서는 국내 공공기관 및 민간기업의 실제 프로젝트 사례를 기준으로, 데이터 기반 평가를 통해 기존의 정성적인 평가 결과를 객관적인 데이터로 보완하고 웹사이트에서 빠른 시간 내에 적용할 수 있는 웹사이트 사용성 평가 방법을 제시하고자 한다.

  • Login to see the comments

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

  1. 1. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 An Improvement Guidelines of Responsive Web Design through Data-Based UX Evaluation 장선영 ㈜에스앤씨랩 대표이사 박태준 ㈜포그리트 대표이사 류호경 한양대학교 기술경영전문대학원 교수 February 10, 2017 | HCI KOREA 2017
  2. 2. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 Speakers Web Accessibility & Usability Consulting Firm jsy@snclab.kr 장선영 대표이사 웹 사이트 품질개선을 위한 모든 것 웹 접근성 · 접근성 인증 · UI/UX 컨설팅 웹 접 근 성 실 시 간 모 니 터 링 솔 루 션
  3. 3. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 Speakers Development and distribution of Usability software joon@4grit.com 박태준 대표이사
  4. 4. 에스앤씨랩과 포그리트는 웹사이트 품질개선을 위한 웹 접근성 및 사용성 프로젝트를 진행하고 있습니다.
  5. 5. 웹 사이트의 첫인상 어떻게 만드시나요?
  6. 6. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 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방법론이 존재
  7. 7. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 UX디자이너의 현실
  8. 8. 클라이언트 : 결과물이 과연 잘 만들어진 것인가? 사용자가 편리하게 쓰고 있는가? 디자이너 : 데이터를 분석할 시간도, 전문인력도 부족해…
  9. 9. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 사용성 평가 기반 분석 사용성 평가, 전문가 평가 등 두 달 이상 소요 사실적인 데이터를 얻을 수 있지만 관찰자에 따라 결과를 다르게 해석할 수 있음. 사용성 평가의 효과 솔루션 기반 분석 로그분석, 히트맵 등 방문자 중심 측정으로 일주일 이상 소요 신뢰도 높은 데이터를 얻을 수 있지만 전문가의 세부적이고 다양한 해석이 요구 될 수 있음.
  10. 10. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 데이터 기반 UX 평가 방법 솔루션 분석 User Data 획득 User Data 분석 기능 중요도 분석 사용성 평가 비교 분석 개선점 도출 가이드라인
  11. 11. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 사용성 평가 방법 이용자 태스크(Task) 분석을 기반으로 한 인터페이스의 사용성 문제를 파악 사용성 평가 계획 사용성 평가 준비 사용성 평가 실시 결과분석 보고서 작성 • 평가 목표 설정 및 계획 • Screening Questionnaire 작성 • 사용자 모집 • 시나리오 작성 및 태스 크 목록 설정 • 태스크 진행 전 설문, 진 행 후 설문 작성 • Pilot Test 실시 • 질문서 검증 • 장비 점검 • 비디오 분석 • Task Analysis • 보고서 작성 1. Pre Interview 2. Website 반응 조사 3. 태스크 수행 4. 테스트 후 설문, 인터뷰
  12. 12. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 사용성 평가 프로세스 Website 반응 조사 Pre Interview 태스크 수행 • 사용자 기본 정보 확인 • 웹사이트 자유서핑을 통해 대상 웹사이트에 대한 사용자 반응 조사 • 시나리오에 따른 사용성 평가 수행 • 태스크 평가 중 생각과 반응을 말로 표현하도록 함. • Observer Ethnography로 Video 녹화를 통해 이용자들의 행동을 분석 •인터뷰를 통한 웹사이트 이용에 대한 장단점 및 개선점 의견 제시테스트 후 설문, 인터뷰 1 단 계 2 단 계 3 단 계 4 단 계
  13. 13. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 사용성 평가를 위한 피실험자는 평가 대상 웹사이트 이용 시 주요 메뉴의 사용 편리성을 측정하기 위해 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 시간/주 포털사이트 없음 사용자 프로파일
  14. 14. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 사용성 평가 – 사용자 의견 분석 메인 페이지의 스크롤이 너무 길어서 찾기가 어려워요. (User1) 상단 네비게이션이 눈에 잘 안띄어서 메인페이지의 배너를 보고 이동하게 됩니다. 배너랑 같은 색이어서 그런지 메뉴를 잘 안보게 됩니다.(User8) 상단 배너의 빨간색, 파란색이 너무 강렬해서 오히려 제가 원하는 정보를 찾기가 어려 운 것 같아요. (User4) 상단 빨강 파랑 배너랑 하단이랑 두 개가 다른 사이트처럼 보여요.(User9) 상단 가운데 로고와 상단 왼쪽 로고는 왜 두개인가요? 어떤게 로고인지 모르겠어요. (User1) 메인 화면 사용에 대한 사용자 의견
  15. 15. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 사용성 평가 – 사용자 의견 분석 아이디어 제안을 위한 메뉴를 빨리 찾지 못해서 메뉴를 하나씩 눌 러보게 됩니다. 그런데 하위메뉴가 없어서 계속 back 스페이스 버 튼을 눌러 메인에 가서 다시 이용해야 하는게 불편해요. (User4) 아이디어 커뮤니티 메뉴명은 커뮤니티 카페 같아서 아이디어 제안을 할 수 있다는 생각이 들지 않아요. (User3) 아이디어 제안하는 곳을 쉽게 찾기가 어렵네요. (User2) 아이디어 제안에 대한 사용자 의견
  16. 16. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 사용성 평가 – 사용자 의견 분석 아이디어 커뮤니티에 아이디어제안하기 버튼을 공모전 지원 페이 지에서도 쓰니깐 다른 페이지라고 생각됩니다. 공모전 페이지로 분 명 온 것 같은데 갑자기 아이디어 커뮤니티가 나오니 혼란스럽네요. (User8) 공모전까지 들어가는 절차는 쉬운데 공모전 안에서 용어가 아이디어 제안 목록이나 아이디어로 되어있어서 많이 잘못 들어왔나 생각하게 만듭니 다.(User9) 아이디어 제안하기 버튼을 공모전에 참가하기식으로 바꾸는게 좋을 것 같아요. 공모 전 참가자 목록으로 해야 공모전 페이지에 들어왔다고 생각할 것 같아요.(User1) 공모전 지원에 대한 사용자 의견
  17. 17. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 사용성 평가 결과 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점 사용성 평가의 결과는 아이디어제안하기 태스크에서 가장 높은 오류횟수, 긴 수행시간, 낮은 만족도를 나타 내고 있습니다. 공모전 지원하기, 사업 지원 신청하기 태스크에서는 중간 정도의 오류횟수와 낮은 만족도를 보여주고 있습니다.
  18. 18. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 사용성 평가 결과 요약 (메인화면) 과도한 정보량(색상과 폰트)으로 가독성 저하 (아이디어 커뮤니티) 현재 위치에 대한 Indicating 기능 부재 (아이디어 커뮤니티) 사용자에게 혼란을 줄 수 있는 네이밍 사용 (아이디어 커뮤니티) 사용자 행동을 고려하지 않은 버튼의 배치
  19. 19. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 솔루션 평가 – 사용자 활동 규모 분석 링크 위주의 사이트임을 감안하면, 이동 당 평균 체류 시간은 길고, 마우스 움직임이 활발하지 않은 편이다. 사용자는 평균 약 5분 24초 체류 약 10번 마우스 이동 마우스 한 번의 이동 당 평균 체류 시간은 32.4초
  20. 20. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 솔루션 평가 – 스크롤 이동 분석 사용자가 접근한 페이지의 콘텐츠 길이는 상단으로 부터 약 28% 90%의 사용자는 스크롤을 이동하지 않고 기본 화면 내에서만 콘텐츠를 탐색하였다.
  21. 21. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 솔루션 평가 – 스크롤 이동과 콘텐츠 확인 분석 카드형 콘텐츠를 확인한 사용자의 73%가 탐색을 계속하기를 중단했음 을 의미25 % 50 % 75 % 100 % 높이 별 콘텐츠 확인 비율을 통해 스크롤 이동 비율이 매우 낮음을 알 수 있다.
  22. 22. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 솔루션 평가 – 마우스 이동과 클릭 분석 마우스 이동이나 클릭과 같은 행동이 일부 콘텐츠, 영역에 행동이 한정되어 있음을 알 수 있다.
  23. 23. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 솔루션 평가 – 유입 경로 별 사용 행태 비교 분석 네이버의검색결과를통해들어온사용자 아이디어페이지에서다시유입된사용자 유입 및 전환 경로가 아이디어 페이지로 동일한 것으로 봐서, 아이디어 페이지에서 사용자들이 원하는 정보를 충분히 탐색하거나 찾지 못했음을 예측할 수 있다.
  24. 24. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 솔루션 평가 결과 사용자의 행태에 맞게 메인 콘텐츠를 좀 더 축소하거나, 사용자의 행태를 좀 더 활발히 개선시킬 필요가 있다. 일반적인 유입 사용자에 비해 [아이디어 홍보]에 특별히 관심가진 것으로 보아, [아이디어] 페이지에서 이와 같은 콘텐츠로 바로 전환될 수 있도록 개선할 필요성도 있어 보인다. 사용자가 콘텐츠를 쉽게 파악하고 마우스 활동을 좀 더 적극적으로 변화시켜, 마우스 이동이나 스크롤 이동 비율과 관련된 콘텐츠 탐색율을 개선시킬 수 있다.
  25. 25. 계속 발전하는 서비스 개발 이슈 고려하기
  26. 26. 다양한 사용자와 장애 환경 고려하기 대한민국 인구 중 100명당 5명이 신체/정신적 장애를 겪고 있습니다. 대한민국 전체 가구에서 7가구 중 1가구마다 장애인이 거주하고 있습니다. 대한민국 전체 252만여 장애인 중 90.5%가 후천적인 장애인들입니다. ※ 출처 : 33회 장애인의 날 교육자료_장애인의 삶과 사회적 인식(보건복지부) 우리나라 인구의 5.6%가 장애인이며, 그 중 90.5%가 사고, 질병 등으로 장애를 얻은 후천적 장애인으로 누구나 불의의 사고 등으로 인해 장애인이 될 수 있습니다. 후천성 장애 90% 선천성 장애 10%
  27. 27. 비장애인의 접근성 환경 고려하기 출처 : 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
  28. 28. 반응형웹(Responsive Web UI)
  29. 29. 반응형웹 콘텐츠의 장점은 사용성에 유리한가? 모든 디바이스 에서 일관성 있는 디자인 다양한 환경의 사용성 고려 부족 무거운 리소스 성능 저하
  30. 30. 모든 디바이스 에서 일관성 있는 디자인 모바일에서도 최적화된 콘텐츠를 보여줄 수 있는가?
  31. 31. 다양한 환경의 사용성 고려 부족 실제로 모든 사용자들이 편리하게 사용할 수 있는가?
  32. 32. 무거운 리소스 성능 저하 속도의 개선 및 리소스 최적 화를 고려하여 제작되었는가?
  33. 33. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 반응형웹 콘텐츠의 사용성 버튼 전체가 아닌 공모전 텍스트에만 링크를 제공하 고 있어 사용자들이 화살표를 여러 번 클릭하게 됨. 버튼의 배경을 CSS 처리 후 텍스트 링크로 기능키를 사용하고 있음. 버튼 전체가 아닌 공모전 텍스트에만 링크를 제공하 고 있어 사용자들이 화살표를 여러 번 클릭하게 됨. (사용성 테스트에서도 동일한 조작법이 발견됨) 텍스트 링크로만 페이지 이동이 가능한 것을 학습해 야 하는 문제가 있으며 마우스 조작이 어려운 사용자 들의 경우는 더욱 사용이 어려움. 버튼 전체에 링크가 작동되도록 개선이 필요함. 화면간 이동이 편리한가?
  34. 34. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 하단 정보 페이지는 길고 방대한 내용을 텍스트 위주 로 구성해 지루하고 피로감 유발. 사용자가 많이 찾는 콘텐츠의 우선순위별로 메인 콘텐츠의 재구성이 필요함. 모바일에 최적화된 디자인 필요 반응형웹 콘텐츠의 사용성 모바일에 최적화 되어 있는가?
  35. 35. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 제품리뷰 타이틀의 게시물 클릭 시 해당 페이지의 타이틀이 스타트업뉴스로 변경됨. 잘못 링크된 것 으로 생각하게 됨. 타운매거진 메인페이지 타이틀과 해당 페이지 타이 틀이 달라 사용자에게 혼란을 줌. 동일한 타이틀 제 공이 필요함. 반응형웹 콘텐츠의 사용성 현재 사용자 위치를 파악하기 쉬운가?
  36. 36. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 스크린리더 사용자가 접근할 수 있도록 이미지에 대 한 대체텍스트를 제공해야 하나 이미지에 alt 속성만 제공하고 대체텍스트를 제공하지 않아 시각장애인은 사이트 내용을 인지할 수 없음. 대체텍스트 없이 alt 속성만 제공할 경우 스크린리더는 불필요한 이미지로 간주하여 읽지 않음. 대체텍스트 미제공으로 스크린리더 사용자는 사이트 내용을 이해하기 어려움. <img src="/images/ko/main/img_main_visual2.png" alt=""> <img src="/images/ko/main/img_main_visual2.png" alt="이미 지에 해당하는 내용을 이해할 수 있도록 대체 텍스트를 제공 해야 합니다. "> 반응형웹 콘텐츠의 사용성 텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공하고 있는가?
  37. 37. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 지도의 정보를 툴팁으로 제공하고 있어 키보드로 이 용 시 툴팁 접근이 불가능하여 키보드 사용자는 정보 를 제공받을 수 없음. onfocus=“this.blur();“를 사용하는 경우 키보드 접근은 물 론 초점의 시각적 구분이 불가하고, 의도하지 않은 초점변 화가 발생함 반응형웹 콘텐츠의 사용성 모든 기능은 키보드만으로도 사용할 수 있 는가?
  38. 38. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 화면에 사용된 컬러의 의미가 제공되지 않음. 과도한 색상 사용과 텍스트 명도대비가 낮아 가독성 이 떨어짐. 텍스트로만 제공하지 말고 아이콘을 적절히 활용하여 시작일, 마감일의 명확한 구분을 권장함. 콘텐츠는 명확하게 전달될 수 있도록 텍스트와 콘텐 츠의 명도 대비를 고려하여 제공해야 함. 반응형웹 콘텐츠의 사용성 텍스트 콘텐츠와 배경 간의 명도 대비를 고려하여 제공하는가?
  39. 39. 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안 | HCI KOREA 2017 구분 AS-IS TO-BE 사용성 메뉴 구조 개선 ① 1depth 메뉴 일관성 ② 서브메뉴 개선 ① 메뉴의 성격별로 분류하여 일관성 있는 네비게이션 개선 ② 상단 네비게이션 분류에 따른 서브메뉴 제공 기능 개선 ③ 사이트맵, 버튼 위치 ③ 메뉴 분류를 빠르게 파악할 수 있도록 사이트맵 제공, 주요 기능키를 클릭하기 쉬운 곳에 배치 기능성 기능개선 ④ 사용자 Action에 대한 피드백 기능 ⑤ 버튼 네이밍 ④ 기능 실행 전 사용자 Action에 대한 피드백 제공 ⑤ 버튼 네이밍은 명확한 지시사항 제공 필요 효율성 ⑥ 메인 화면 링크방식 개선 현재 위치에 대한 Indicating 기능 부재 ⑥ 일관성 있는 Indicating 기능 제공 기능개선 ⑦ 서브메뉴 표현방식 개선 ⑧ 서브메뉴 타이틀 개선 ⑦ 일관성 있는 서브 메뉴 표현 방식으로 개선 필요 ⑧ 메뉴명과 타이틀을 동일하게 제공 접근성 ⑨ 대체 텍스트 (웹접근성) ⑩ 키보드 사용 환경 개선(달력, 지도 등) ⑨ 이미지에 대한 대체텍스트 제공 ⑩ 키보드 초점 제공 심미성 ⑪ 메인화면 색상과 폰트 변경 ⑪ 텍스트 명도 대비를 고려한 색상 제공 고객지향성 ⑫ 스크롤 메뉴바 개선 ⑫ 시각적 강조 및 일관성 있는 메뉴 제공 분석결과
  40. 40. 뷰저블 시연
  41. 41. 사용하기 쉬운 인터페이스 사용자에 최적화된 경험
  42. 42. Thank You http://www.beaccessible.net/ https://www.beusable.net/

×