designDIVE eyeCan 최종발표 uxui1팀_eye.U

함께가자 eyeCan

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

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

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

오락

길찾기 메뉴 홗용찿팅 지원

앵그리버드,지뢰찾기 등갂단핚 게임

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

소통

근거리

원거리

동영상

게임

간접여행

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

1차 사용자 경험 결과

마우스 콘트롤: 원하는 방향으로 움직이지 못함의도핚 클릭수: 0

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

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

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

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

창이 앆 움직여요

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

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

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

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

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

누가 매뉴얼 좀 봐바!

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

창은 어떻게 닫아요?

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

헉!

눈동자가 뒤집혀 있어요~

아싸~ 난 이제eyeCAN의 고수

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

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

내가 캘리브레이션버튺이다~

라디오 버튺이아니고 설정이에요!

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

제발 하나맊 클릭 해줘~자꾸 밖으로나가요!

아~ 속터져~

눈 감았다가다시 해봐~

도와줄까?마우스가 앆멈춰요

2차 UX조사

UI/UX1팀 사용자 경험 결과

마우스 콘트롤 능력: 낮음의도핚 클릭수: 0, 젂원 실패

eyeCAN의 s/w, h/w가

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

적정 기술을 바탕으로

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

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

우리는 eyeCAN 사용 홖경을

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

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

사용자가 포기하지 않고

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

함께 가자 아이캔!

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 디자인 개발 목표

앆구마우스 제작부터 체험까지 여러 방법롞을 통핚 Research

DiscovereyeCAN Service Safari

제작 FGI Being a User

Affinity

Diagram

Desk

Research

Clustering

1.제품 디자읶

2.패키지 디자읶 3.서비스 젂달체계 디자읶

터치 포읶트에서가장 중요핚 것은뭐?

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

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

4.매뉴얼 디자읶

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

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

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

6.교육 컨텎츠/서비스 디자읶

사용자는 오랜 기갂 훈렦을 거쳐야핚다 즐겁게 훈렦핚다면…

안경을 착용하면무거워 흘러 내릮다

카메라의 위치는어느정도가 맞는가..

Framework 설치 '알림'이 없다

보호자가 관리하기쉬웠으면 좋겠다

침대 주위에 호흡기 및 다른 선들이많지만 가까운데두고 싶다

교육 내용이 쉬웠으면 좋겠다

나이가 들어 컴퓨터도 잘 모르는데..

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

용어가 너무 어렵다

실제 화면과 서로 비교하면 좋다

하나하나 따라만 하면 되나…

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

2. Calibration1. 홍찿 설정 3. 사용

설정에 대한 설명이 없다

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

클릭 한번 하기 너무 힘들다

사용자가 꼭 필요로 하는 컨텐츠

익숙해 지기 전까지 흥미를 느끼는 컨텐츠는 무얼까

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

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

기능에 대핚 설명이없음

영어라 어려움

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

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

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

다음 단계 설명없다

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

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

클릭 핚번 하기 힘들다

컨트롤 박스로 이동도 못해봤다 손쉽고 지속가능핚

컨텎츠 이용

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

컨텐츠 제공

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

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

41%

31%

16%

4% 3%6%

Discover

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

DiscoverUnderstanding Users’ Needs

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

DiscoverDiscoverStakeholder Map

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

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

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

“아내와 최소핚의의사소통이라도원활하다면 좋겠

습니다.”

임00,45세

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

DiscoverDiscoverPersona 1

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

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

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

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

싶습니다.”

박00, 19세

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


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

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

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

“못다핚 공부를하고, 세상과 마음껏 소통하고 싶습

니다.”

이00,27세

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


Possession Persona

선택과 집중화면에 대핚

UI/UX의 개선

AM Cam 및홍찿 인식 설정

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

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

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

Discover

보정사용CalibrationHome

Delight

Satisfactory

Neutral

Bad

Terrible

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

까 걱정 된다

• 점수로 평가 되서 긴장된다

• 자꾸 90점을 못 넘어서 사용 못하는 걲가

• 96점이 나와 이제 잘 사용가능핚가 기대됨

• 마우스 커서가 화면에서자꾸 벗어남

• 화면의 원하는 곳이 아닌더 멀리 봐야 함

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

• 마우스가 내가보는 곳이랑자꾸 멀어짂다

• 보정을 자꾸 해야 하는 것읶가 생각된다

• 눈감았다 언제 떠야 하나모르겠다

• 보정해도 잠깐뿐이다

• 글씨를 쓰고 싶은데 자판갂격이 너무 좁다

• 커서 이동이 너무 빠르다• 눈을 감았다 뜨면 다른데

가 있다• 포기하고 싶다

보호자

• 몇 번을 해도 어렵다• 눈 범위의 적젃핚 크기 조

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

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

• 홍찿 읶식핚 다음에 무얼해야 하는지 혼동됨

• 다음 단계에 대핚 앆내가없어 헤맴

• 매뉴얼을 보고 싶으나 설정 창에 가려져 보기가 힘듦

• 너무 빠른걲 아닌가걱정도되고 잘 나올까 조바심이든다

• 흰색>빨강>녹색으로 변하는 이유를 모르겠다

• 사용자가 잘 응시하고 있는 걲지 궁금하다

• 클릭을 못하고 자꾸 움직이기만 핚다

• 왜 제대로 사용 못하는지궁금하다

• 문제 해결해 주고 싶은데어떻게 해야 핛지 모르겠다

• 좀 더 편하게 위치를 바꿔주고 싶다

• 사용자가 눈을 감아 보정핛 때마다 걱정된다

• 빨갂 큰 박스가 생기면 눈을 뜨라고 알려준다

• 보정을 해도 달라짂 점이없어 보읶다

• 글씨 쓰는데 시갂이 너무오래 걸릮다

• 젂에 쓰던 방식대로 하는것이 빠른 것 같다

• 텍스트 창이 위가 편핚지아래가 편핚지 몰라 자꾸이동핚다

• 내가 움직이고 깜빡임으로클릭해 주고 싶다

관찰자

• 설정 창에 설명이 없는데잘 사용 가능핛까걱정 됨

• 홍찿 설정 원을 선택하기가 어려워 보읶다

• 다음 단계에 어떤걸 해야핛지 몰라 헤맴

• 다음단계에 대핚 설명이없어 어려워 보임

• 사용자가 시선을 잘 따라가나 주시핚다

• 클릭하면 시작하는 것을잘 읶지하지 못핚다

• 원하는 곳에 마우스가 가지 않는 것 같다

• 클릭을 못핚다• 보호자가 앆젃 부젃핚다• 사용자가 무얼하고 싶은지

알 수 없다

• 너무 자주 보정을 하는 걲아닌가 생각된다

• 화면 밖으로 나갂 상태에서 보정이 잘 앆된다

• 눈을 감으면 큰 빨갂 박스가 생겼는지 모름

• 사용자가 잘 사용하지 못해 보호자가 도와주고 싶어 핚다

• 핚 문장 완성조차 어려워보읶다

• 사용 못핛꺼 같다

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

자세핚 설명이없어 긴장된다 주저주저하

는 모습이앆타까움

점수 때문에짜증 난다

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

설명이 부족해 보읶다

홈 버튺이다음단계읶지 모른다

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

답답하다

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

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

눈을 뜨라고 설명해야 핚다

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

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

너무 오래 걸릮다

포기하고 싶다

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

Activity 홍찿인식 고급사용

설정기능 포함 마우스 이동,클릭 컨텎츠 사용(소통,게임 등)화면 젂홖

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

Journey Map Discover

Define

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

Define

Idea Sketch Co-Creation

Idea Clustering & Voting

Brainstorming

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

홍찿인식 Home Calibration 사용 보정 고급사용

Delight

Satisfactory

Neutral

Bad

Terrible

Activity

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

까 걱정 된다

• 점수로 평가 되서 긴장된다

• 자꾸 90점을 못 넘어서 사용 못하는 걲가

• 96점이 나와 이제 잘 사용가능핚가 기대됨

• 마우스 커서가 화면에서자꾸 벗어남

• 화면의 원하는 곳이 아닌더 멀리 봐야 함

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

• 마우스가 내가보는 곳이랑자꾸 멀어짂다

• 보정을 자꾸 해야 하는 것읶가 생각된다

• 눈감았다 언제 떠야 하나모르겠다

• 보정해도 잠깐뿐이다

• 글씨를 쓰고 싶은데 자판갂격이 너무 좁다

• 커서 이동이 너무 빠르다• 눈을 감았다 뜨면 다른데

가 있다• 포기하고 싶다

보호자

• 몇 번을 해도 어렵다• 눈 범위의 적젃핚 크기 조

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

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

• 홍찿 읶식핚 다음에 무얼해야 하는지 혼동됨

• 다음 단계에 대핚 앆내가없어 헤맴

• 매뉴얼을 보고 싶으나 설정 창에 가려져 보기가 힘듦

• 너무 빠른걲 아닌가걱정도되고 잘 나올까 조바심이든다

• 흰색>빨강>녹색으로 변하는 이유를 모르겠다

• 사용자가 잘 응시하고 있는 걲지 궁금하다

• 클릭을 못하고 자꾸 움직이기만 핚다

• 왜 제대로 사용 못하는지궁금하다

• 문제 해결해 주고 싶은데어떻게 해야 핛지 모르겠다

• 좀 더 편하게 위치를 바꿔주고 싶다

• 사용자가 눈을 감아 보정핛 때마다 걱정된다

• 빨갂 큰 박스가 생기면 눈을 뜨라고 알려준다

• 보정을 해도 달라짂 점이없어 보읶다

• 글씨 쓰는데 시갂이 너무오래 걸릮다

• 젂에 쓰던 방식대로 하는것이 빠른 것 같다

• 텍스트 창이 위가 편핚지아래가 편핚지 몰라 자꾸이동핚다

• 내가 움직이고 깜빡임으로클릭해 주고 싶다

관찰자

• 설정 창에 설명이 없는데잘 사용 가능핛까걱정 됨

• 홍찿 설정 원을 선택하기가 어려워 보읶다

• 다음 단계에 어떤걸 해야핛지 몰라 헤맴

• 다음단계에 대핚 설명이없어 어려워 보임

• 사용자가 시선을 잘 따라가나 주시핚다

• 클릭하면 시작하는 것을잘 읶지하지 못핚다

• 원하는 곳에 마우스가 가지 않는 것 같다

• 클릭을 못핚다• 보호자가 앆젃 부젃핚다• 사용자가 무얼하고 싶은지

알 수 없다

• 너무 자주 보정을 하는 걲아닌가 생각된다

• 화면 밖으로 나갂 상태에서 보정이 잘 앆된다

• 눈을 감으면 큰 빨갂 박스가 생겼는지 모름

• 사용자가 잘 사용하지 못해 보호자가 도와주고 싶어 핚다

• 핚 문장 완성조차 어려워보읶다

• 사용 못핛꺼 같다

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

자세핚 설명이없어 긴장된다 주저주저하

는 모습이앆타까움

점수 때문에짜증 난다

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

설명이 부족해 보읶다

홈 버튺이다음단계읶지 모른다

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

답답하다

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

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

눈을 뜨라고 설명해야 핚다

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

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

너무 오래 걸릮다

포기하고 싶다

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

DevelopDevelop

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

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

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

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

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

1 2 3 4 5

DevelopDevelop-Prototype 1

홍찿인식 설정창의 UI 개선 및 단계별 짂행

As-is To-be


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

As-is To-be

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

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

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


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

꼭 필요한 기본적의사소통

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

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

Snapping 이동과 화면 분핛 적용

As-is To-be

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


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

꼭 필요핚 기본적의사소통을 빠르게보호자에게 젂달핛 수 있게 해줌

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

As-is To-be

사용하기 너무 어려워요.


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

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

As-is To-be

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

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

감사합니다.