36
함함함함 eyeCan 함함함 (eye U) UI/UX 1

Uiux 1 0901 최종

Embed Size (px)

DESCRIPTION

7월28일. 네번째 디자인다이브 ‘안구마우스 eyeCan’에 대한 설명을 듣고 각각 인문/마케팅/디자인/의료보건/공학/조력/기록자의 역할로 구성된 팀이 만들어졌다. UI/UX 1팀의 발표자료로 안구마우스의 현재의 사용과 앞으로의 개선점 등을 서비스디자인 접근법으로 해석, 솔루션을 제공한 자료이다. 서로 다른 기업에 속해있는 사람들이 한마음 한뜻으로 모여 프로젝트를 진행했고 서비스디자인기업 바이널C의 임진혁책임이 팀장으로 참여했다. 자료제공: 디자인다이브

Citation preview

Page 1: Uiux 1 0901 최종

함께가자 eye-Can

아이유 (eye U) UI/UX 1 팀

Page 2: Uiux 1 0901 최종
Page 3: Uiux 1 0901 최종
Page 4: Uiux 1 0901 최종
Page 5: Uiux 1 0901 최종
Page 6: Uiux 1 0901 최종
Page 7: Uiux 1 0901 최종

- 비상호출- 가족과의 대화- 방문자 ( 친구) 와의 대화

- 비상호출- 가족과의 대화- 방문자 ( 친구 ) 와의 대화

- 외출한 가족 호출 ( 비상 )- 먼 곳의 지인들과 대화- SNS

- 외출한 가족 호출 ( 비상 )- 먼 곳의 지인들과 대화- SNS

오락

길찾기 메뉴 활용채팅 지원

길찾기 메뉴 활용채팅 지원

앵그리버드 , 지뢰찾기 등 간단한 게임

앵그리버드 , 지뢰찾기 등 간단한 게임

영화가족 이벤트명상에 도움되는자연경관 영상 감상

영화가족 이벤트명상에 도움되는자연경관 영상 감상

소통

근거리

원거리

동영상

게임

간접여행

Page 8: Uiux 1 0901 최종

마우스가 제가 바라보는 아이콘과 다른걸 자꾸 가르켜요 .

1 차 사용자 경험 결과마우스 콘트롤 : 원하는 방향으로 움직이지 못함의도한 클릭수 : 0

초점이 안 맞는 느낌이에요 .

눈이 시려요 .그만하고 싶어요 .

클릭이 안되요 !못하겠어요 . ㅠ _ ㅠ

Page 9: Uiux 1 0901 최종

Q. 이 설정 창에서 제일 먼저무엇을 해야 할까요 ?

Page 10: Uiux 1 0901 최종

창이 안 움직여요

무엇부터 해야 할지 모르겠어요 .

여기 나오는 작은 화면은 뭔가요 ?무서워요 ~ 이 막대는

먹는 건가요 ?왜 전부 영어로 되어 있어요 ?

여기에 세이브 버튼 있어요 ~

어려울 것 같아서 긴장 돼요 !

누가 매뉴얼 좀 봐바 !

아이콘이 쥐구멍 같이 생겼어요 ~

창은 어떻게 닫아요 ?

Page 11: Uiux 1 0901 최종

매뉴얼이 창 뒤에 뜨는데요 ?

헉 !

Page 12: Uiux 1 0901 최종

눈동자가 뒤집혀 있어요 ~

아싸 ~ 난 이제 eyeCAN 의 고수

eyeCAN쓸려면 이정도 영어는 알아야죠 ~

저 .. 보호자인데요…낼모레 마흔인데요~

Page 13: Uiux 1 0901 최종

자꾸 밖으로 나가요 !

아 ~ 속터져~

눈 감았다가 다시 해봐 ~

도와줄까 ?

마우스가 안 멈춰요

내가 캘리브레이션 버튼이다 ~라디오 버튼이

아니고 설정이에요 !

F8 버튼은 작아서찾기 힘들 것이여~

제발 하나만 클릭 해줘 ~

Page 14: Uiux 1 0901 최종

2 차 UX 조사

UI/UX1 팀 사용자 경험 결과마우스 콘트롤 능력 : 낮음의도한 클릭수 : 0, 전원 실패

Page 15: Uiux 1 0901 최종

eyeCAN 의 s/w, h/w 가

누구나 사용할수 있는 가격대의

적정 기술을 바탕으로

사용자들에게 지속적인 upgrade 를 제공하여

사용성을 높여가는 것이 목표라면 ,

Page 16: Uiux 1 0901 최종

우리는 eyeCAN 사용 환경을

초보자와 운동능력이 많이 저하된 사용자들도

편하게 사용할 수 있도록 만듦으로서

사용자가 포기하지 않고

컴퓨터를 사용할 수 있도록 돕고 싶었다 .

Page 17: Uiux 1 0901 최종

함께 가자 아이캔 !

Page 18: Uiux 1 0901 최종

WHAT

WHY

HOW

초보자도 사용하기 쉬운 eyeCAN UI UX”

현재의 UX 는 안구마우스 사용 초보자들이 사용하기 어려운 편

1) 불친절하다 .=UX 직관성이 낮은편이며 , 단계별메뉴별 설명도 충분하지 않다 .2) 눈의 움직임과 실제 커서위치의 gap 이 크다3) 자유로운 pc 사용을 위해 긴 훈련 시간 (3 개월 ) 을 필요로 한다 .

1) 초보자와 , 운동능력이 저하된 사용자 등 좀 더 넓은 범위의 사용자에게 universal 한 환경을 제공할 수 있는 UX 디자인 .2) 연속적인 눈의 움직임에서 오는 피로를 최소화할 수 있는 UX 디자인 .3) 클릭수 최소화 .(=Depth 의 최 간소화 )4) 안구 움직임의 정확도가 떨어지더라도 사용에는 큰 무리가 없는 UX 환경을 제공 .

DiscovereyeCAN Service Design Goal

서비스디자인 방법론을 통한 아이캔 UI UX 디자인 개발 목표

Page 19: Uiux 1 0901 최종

안구마우스 제작부터 체험까지 여러 방법론을 통한 Research

DiscovereyeCAN Service Safari

제작 FGI Being a User

Affinity Dia-gram

DeskResearch

Clustering

Page 20: Uiux 1 0901 최종

1. 제품 디자인

2. 패키지 디자인 3. 서비스 전달체계 디자인

터치 포인트에서 가장 중요한 것은 뭐 ?

최초의 경험 영원히 각인될 이미지

지속 가능한 서비스가 설계되지 않으면 모두가 허사이다

4. 매뉴얼 디자인

누군가 이것을 보고 시작하지 않으면 , 시작되지 않는다

5.UI/UX 사용자 경험 디자인

결국 사용자의 주된 경험은 어떤 경로로 만들어 지는가 ?

6.교육 컨텐츠 / 서비스 디자인

사용자는 오랜 기간 훈련을 거쳐야 한다 즐겁게 훈련한다면…안경을

착용하면 무거워 흘러 내린다

카메라의 위치는 어느정도가 맞는가 ..Frame-work 설치 '알림 ' 이 없다

보호자가 관리하기 쉬웠으면 좋겠다침대 주위에 호흡기 및 다른 선들이 많지만 가까운데 두고 싶다

교육 내용이 쉬웠으면 좋겠다나이가 들어 컴퓨터도 잘 모르는데 ..

내가 컴퓨터를 만지면 망가진다

용어가 너무 어렵다실제 화면과 서로 비교하면 좋다하나하나 따라만 하면 되나…

내가 제대로 맞게 하고 있는건가 ?

2. Calibra-tion1. 홍채 설정 3. 사용

설정에 대한 설명이 없다

마우스가 마음대로 움직이고 고정이 안된다

클릭 한번 하기 너무 힘들다

사용자가 꼭 필요로 하는 컨텐츠익숙해 지기 전까지 흥미를 느끼는 컨텐츠는 무얼까

화면을 보면서 무엇을 해야 하는지 난감

설정창이 움직이지 않는다 ( 최소화도 안되고 닫힘 버튼 없음

기능에 대한 설명이 없음

영어라 어려움

제대로 하고 있는 건지 모르겠다

점수로 나오는데 테스트 같아 기분 나쁘다

점수가 낮으나 어디가 잘못 된 건지 모른다

다음 단계 설명없다

마우스 이동조차 사용자 마음대로 되지 않는다

커서가 계속 움직여 화면 밖으로 나간다

클릭 한번 하기 힘들다

컨트롤 박스로 이동도 못해봤다

손쉽고 지속가능한컨텐츠 이용

의사소통 기능의 온라인 제공과 접근성

컨텐츠 제공

안구마우스 제작부터 사용까지…

Page 21: Uiux 1 0901 최종

아이캔의 이해관계자들을 파악하고 , 분석한다 .

DiscoverDiscoverStakeholder Map

Page 22: Uiux 1 0901 최종

의사소통 정보공유 /취득 취미생활 학업활동 사회생활 경제활동

41%

31%

16%

4% 3%6%

Discover

예비 사용자들의 보편적 욕구를 파악하고 잠재적 욕구를 분석한다 .

DiscoverUnderstanding Users’ Needs

Page 23: Uiux 1 0901 최종

NEEDS•환자의 상태가 너무 않 좋아서 최소한의 의사소통이 꼭 필요한 상황 입니다 . 아이캔을 이용한 의사소통이 꼭 필요합니다 .•어디가 불편하고 어디가 아픈지 말도 못하는 아내를 보면 눈물이 납니다 . 8 살 딸아이도 엄마의 아픈 모습을 보며 너무나도 깊은 상처를 받고 있습니다 . 아이캔을 이용하여 의사소통을 하게 되면 아내를 좀 더 잘 보살필 수 있을 것 같습니다 .

GOAL•환자의 상태파악 지원•가족간의 대화 지원•간병의 어려움 일부 해소•환자의 삶의 질 향상을 지원

현재상태와 의사소통 방법상지 , 하지 사용이 안되며언어사용 불가능한 예비 사용자와 생활 .의사소통은 배우자 입모양을 보고 판단하며 , 생활에 필요한 상황을 적어놓아 눈깜박임으로 소통하는 사용자와 생활 중

“ 아내와 최소한의

의사소통이라도 원활하다면 좋겠습니다 .”

임 00,45 세

루게릭 여성 사용자의 보호자 (배우자 ) 에 대한 이해

DiscoverDiscoverPersona 1

Page 24: Uiux 1 0901 최종

NEEDS아이캔이 학업에의 장시간열중을 용이하게 도와주어 입시공부에 도움이 되어주었으면 합니다 . 또한 , 다독을 하는제게 더할 나위 없는 기쁨이 되어줄 것이라 생각합니다 .아이캔이 입시공부의 성공적인 완주를 돕고 , 특정분야의 프로페셔널로 이끌어 주길 기대합니다 .

GOAL•입시 공부의 지원•가족간의 대화 지원•간병의 어려움 일부 경감•사용자의 삶의 질 향상

현재상태와 의사소통 방법신체기능의 퇴화로 침상생활을 합니다 .사용 가능한 신체 능력은 목소리와 시력 , 청각입니다 .

“ 대학 입학 후 프로페셔널이

되고 싶습니다 .”

박 00, 19 세

근육병 남성 사용자에 대한 이해

DiscoverDiscoverPersona 2

Page 25: Uiux 1 0901 최종

NEEDS•eyeCAN 을 활용하여 ‘사회복지’ 공부도 하고 , 건축 설계 ( 도면 ) 작성 , 한글 사용및 못다한 공부를 하고 싶습니다 .•온라인 으로나마 세상과 마음껏 소통하며 공유하고 싶습니다 .

GOAL•타이핑 , 도면 작성 등 안구마우스를 이용한 컴퓨터 고급사용 기능 지원

현재상태와 의사소통 방법경추 4.5번 ( 사지마비 ) 지체 1급 장애인으로 현재 운동기능 상지 5번 정도 나옵니다인지 100% 가능 대화 가능합니다

“ 못다한 공부를 하고 , 세상과 마음껏

소통하고 싶습니다 .”

이 00,27 세

경추 4,5번 지체 1급 장애를 가진 사용자에 대한 이해

DiscoverDiscoverPersona 3

Page 26: Uiux 1 0901 최종

Possession Persona

선택과 집중화면에 대한

UI/UX 의 개선

AM Cam 및홍채 인식 설정

Calibration 과 마우스 이동 / 클릭 /컨텐츠

사용자 / 보호자 / 관찰자로서의 2 차 Deep Dive 를 경험한 후 , 인사이트를 정리함

서로 역할을 바꿔가며 2 차 Deep Dive 경험후 얻어진 인사이트들을 정리함

Discover

Page 27: Uiux 1 0901 최종

보정사용CalibrationHome

Delight

Satisfac-

tory

Neutral

Bad

Terrible

사용자•잘 되야 하는데 긴장된다 • 과연 잘 잘 움직일 수

있을까 걱정 된다

• 점수로 평가 되서 긴장된다• 자꾸 90 점을 못 넘어서

사용 못하는 건가• 96 점이 나와 이제 잘

사용 가능한가 기대됨

• 마우스 커서가 화면에서 자꾸 벗어남• 화면의 원하는 곳이 아닌

더 멀리 봐야 함• 자꾸 커서가 움직임•깜빡이면 휙 사라짐• 눈이 시리고 아프다

• 마우스가 내가보는 곳이랑 자꾸 멀어진다• 보정을 자꾸 해야 하는

것인가 생각된다• 눈감았다 언제 떠야 하나

모르겠다• 보정해도 잠깐뿐이다

•글씨를 쓰고 싶은데 자판 간격이 너무 좁다• 커서 이동이 너무 빠르다• 눈을 감았다 뜨면 다른데

가 있다• 포기하고 싶다

보호자

•몇 번을 해도 어렵다• 눈 범위의 적절한 크기

조절을 모르겠다• 창을 최소화 하거나 닫기

버튼이 없다 ( 이동 어려움 )• 여러번 반복해서 미안하다• 세이브 버튼이 작다

•홍채 인식한 다음에 무얼 해야 하는지 혼동됨• 다음 단계에 대한 안내가 없어 헤맴• 매뉴얼을 보고 싶으나

설정 창에 가려져 보기가 힘듦

•너무 빠른건 아닌가걱정도 되고 잘 나올까 조바심이 든다•흰색 >빨강 >녹색으로 변하는 이유를 모르겠다• 사용자가 잘 응시하고

있는 건지 궁금하다

• 클릭을 못하고 자꾸 움직이기만 한다• 왜 제대로 사용 못하는지 궁금하다• 문제 해결해 주고 싶은데

어떻게 해야 할지 모르겠다• 좀 더 편하게 위치를

바꿔주고 싶다

• 사용자가 눈을 감아 보정 할 때마다 걱정된다•빨간 큰 박스가 생기면

눈을 뜨라고 알려준다• 보정을 해도 달라진 점이 없어 보인다

•글씨 쓰는데 시간이 너무 오래 걸린다• 전에 쓰던 방식대로 하는

것이 빠른 것 같다•텍스트 창이 위가 편한지

아래가 편한지 몰라 자꾸 이동한다• 내가 움직이고 깜빡임으로 클릭해 주고 싶다

관찰자

• 설정 창에 설명이 없는데 잘 사용 가능할까걱정 됨•홍채 설정 원을 선택하기가 어려워 보인다

• 다음 단계에 어떤걸 해야 할지 몰라 헤맴• 다음단계에 대한 설명이 없어 어려워 보임

• 사용자가 시선을 잘 따라가나 주시한다• 클릭하면 시작하는 것을 잘 인지하지 못한다

• 원하는 곳에 마우스가 가지 않는 것 같다• 클릭을 못한다• 보호자가 안절 부절한다• 사용자가 무얼하고

싶은지 알 수 없다

•너무 자주 보정을 하는 건 아닌가 생각된다• 화면 밖으로 나간

상태에서 보정이 잘 안된다• 눈을 감으면 큰 빨간 박스가 생겼는지 모름

• 사용자가 잘 사용하지 못해 보호자가 도와주고 싶어 한다• 한 문장 완성조차 어려워

보인다• 사용 못할꺼 같다

단계를 몰라 잘 하고 있는지 모르겠다

자세한 설명이 없어 긴장된다

주저주저하는 모습이 안타까움

점수 때문에 짜증 난다

매뉴얼 봐야 하는데 설정 창이 안 닫힌다

설명이 부족해 보인다

홈 버튼이 다음단계인지 모른다

점수 때문에 다시 하는데 잘 못된걸 모르겠다

답답하다

사용을 잘 못해 대신 해주고 싶다

내 마음대로 이동이 안 된다( 멈춰있지 않음 )클릭이 안 된다

눈을 뜨라고 설명 해야 한다

보정하면 잠깐은 잘 이동하는거 같다

화면에서 벗어나면 보정이 어려움감으면 박스가 뜨는지 모름

너무 오래 걸린다

포기하고 싶다

이동과 클릭이 잘 안되서 익숙해 지려면 오래 걸릴꺼 같다

Activity 홍채인식 고급사용

설정기능 포함 마우스 이동 ,클릭

컨텐츠 사용 ( 소통 , 게임 등 )

화면 전환

H/W 설치 S/W 설치 착용 AM CAM EYE Can 보관아이캔 착용 후 화면에서의 UI UX 경험 여정 맵

Journey Map Discover

Page 28: Uiux 1 0901 최종

Define

Discover 단계의 아이디어를 토대로 UX 에 집중적으로 반영시킬 아이디어 정리

Define

Idea Sketch Co-Creation

Idea Clustering & Vot-ing

Brainstorming

Page 29: Uiux 1 0901 최종

UX 맥락과 특성에 따라 5 가지 방향의 서비스 개선안 도출

홍채인식 Home Calibra-tion

사용 보정 고급사용

Delight

Satisfac-

tory

Neutral

Bad

Terrible

Activ-ity

사용자•잘 되야 하는데 긴장된다 • 과연 잘 잘 움직일 수

있을까 걱정 된다

• 점수로 평가 되서 긴장된다• 자꾸 90 점을 못 넘어서

사용 못하는 건가• 96 점이 나와 이제 잘

사용 가능한가 기대됨

• 마우스 커서가 화면에서 자꾸 벗어남• 화면의 원하는 곳이 아닌

더 멀리 봐야 함• 자꾸 커서가 움직임•깜빡이면 휙 사라짐• 눈이 시리고 아프다

• 마우스가 내가보는 곳이랑 자꾸 멀어진다• 보정을 자꾸 해야 하는

것인가 생각된다• 눈감았다 언제 떠야 하나

모르겠다• 보정해도 잠깐뿐이다

•글씨를 쓰고 싶은데 자판 간격이 너무 좁다• 커서 이동이 너무 빠르다• 눈을 감았다 뜨면 다른데

가 있다• 포기하고 싶다

보호자

•몇 번을 해도 어렵다• 눈 범위의 적절한 크기

조절을 모르겠다• 창을 최소화 하거나 닫기

버튼이 없다 ( 이동 어려움 )• 여러번 반복해서 미안하다• 세이브 버튼이 작다

•홍채 인식한 다음에 무얼 해야 하는지 혼동됨• 다음 단계에 대한 안내가 없어 헤맴• 매뉴얼을 보고 싶으나

설정 창에 가려져 보기가 힘듦

•너무 빠른건 아닌가걱정도 되고 잘 나올까 조바심이 든다•흰색 >빨강 >녹색으로 변하는 이유를 모르겠다• 사용자가 잘 응시하고

있는 건지 궁금하다

• 클릭을 못하고 자꾸 움직이기만 한다• 왜 제대로 사용 못하는지 궁금하다• 문제 해결해 주고 싶은데

어떻게 해야 할지 모르겠다• 좀 더 편하게 위치를

바꿔주고 싶다

• 사용자가 눈을 감아 보정 할 때마다 걱정된다•빨간 큰 박스가 생기면

눈을 뜨라고 알려준다• 보정을 해도 달라진 점이 없어 보인다

•글씨 쓰는데 시간이 너무 오래 걸린다• 전에 쓰던 방식대로 하는

것이 빠른 것 같다•텍스트 창이 위가 편한지

아래가 편한지 몰라 자꾸 이동한다• 내가 움직이고 깜빡임으로 클릭해 주고 싶다

관찰자

• 설정 창에 설명이 없는데 잘 사용 가능할까걱정 됨•홍채 설정 원을 선택하기가 어려워 보인다

• 다음 단계에 어떤걸 해야 할지 몰라 헤맴• 다음단계에 대한 설명이 없어 어려워 보임

• 사용자가 시선을 잘 따라가나 주시한다• 클릭하면 시작하는 것을 잘 인지하지 못한다

• 원하는 곳에 마우스가 가지 않는 것 같다• 클릭을 못한다• 보호자가 안절 부절한다• 사용자가 무얼하고

싶은지 알 수 없다

•너무 자주 보정을 하는 건 아닌가 생각된다• 화면 밖으로 나간

상태에서 보정이 잘 안된다• 눈을 감으면 큰 빨간 박스가 생겼는지 모름

• 사용자가 잘 사용하지 못해 보호자가 도와주고 싶어 한다• 한 문장 완성조차 어려워

보인다• 사용 못할꺼 같다

단계를 몰라 잘 하고 있는지 모르겠다

자세한 설명이 없어 긴장된다

주저주저하는 모습이 안타까움

점수 때문에 짜증 난다

매뉴얼 봐야 하는데 설정 창이 안 닫힌다

설명이 부족해 보인다

홈 버튼이 다음단계인지 모른다

점수 때문에 다시 하는데 잘 못된걸 모르겠다

답답하다

사용을 잘 못해 대신 해주고 싶다

내 마음대로 이동이 안 된다( 멈춰있지 않음 )클릭이 안 된다

눈을 뜨라고 설명 해야 한다

보정하면 잠깐은 잘 이동하는거 같다

화면에서 벗어나면 보정이 어려움감으면 박스가 뜨는지 모름

너무 오래 걸린다

포기하고 싶다

이동과 클릭이 잘 안되서 익숙해 지려면 오래 걸릴꺼 같다

DevelopDevelop

홍채인식 설정창의 UI와진행 단계 UI 직관성 개선

캘리브레이션 UI 개선 및 사용 용어의 한글화

Snap & Grid방식의 마우스 이동과 화면분할

오프라인 경험의 온라인 적용

깊이가 최소화 된메뉴 사용방식제공으로사용자를 격려

1 2 3 4 5

Page 30: Uiux 1 0901 최종

DevelopDevelop-Prototype 1

홍채인식 설정창의 UI 개선 및 단계별 진행

As-is To-be

Page 31: Uiux 1 0901 최종

DevelopDevelop-Prototype 2

캘리브레이션 단계의 UI GUI 직관성 향상 및 용어의 한글화

As-is To-be

Page 32: Uiux 1 0901 최종

출처 : 텍스트 제시 방법과 화면이동 방향에 따른 전자책의 가독석에 대한 연구 2011. 이춘길 외

안구의 수평이동이수직이동 보다 속도 , 움직임의 최소화 , 피로도 측면에서 뛰어나다

사람의 눈은 시선을고정하고 대상을 응시하는 동안에도 떨림 , 미끄러짐 , 미세도약 운동이 발생한다 .

DevelopDevelop-Prototype 3

Snap & Grid 형태의 화면과 마우스 이동 방식으로 사용 난이도를 낮춘 UI UX

꼭 필요한 기본적 의사소통

마우스 컨트롤 ,바로가기 , 설정

홍채의 상 , 하 , 좌 ,우 만을 인식하여 이동

Snapping 이동과 화면 분할 적용

As-is To-be

Page 33: Uiux 1 0901 최종

참고 : 루게릭병을 이기는 사람들 _ 한양대학교 루개릭병클리닉

DevelopDevelop-Prototype 4

오프라인 경험의 온라인 적용

꼭 필요한 기본적의사소통을 빠르게보호자에게 전달할 수 있게 해줌

의사전달을 사운드로 각기 설치된 방 , 거실 , 화장실 등에서 출력 가능

As-is To-be

Page 34: Uiux 1 0901 최종

사용하기 너무 어려워요 .

DevelopDevelop-Prototype 5

언제나 글쓰기가능하며 , 이모티콘으로 감정 전달

그리드 형태로 인터넷 사용이 용이한 모바일 Web 제공

As-is To-be

깊이 (Depth) 를 최소화시킨 UI 로 좀 더 쉽고 빠른 사용자 이용 환경 구현

Page 35: Uiux 1 0901 최종
Page 36: Uiux 1 0901 최종

언제든지 불러 주시면 EYE U 1 팀 출동합니다

감사합니다 .