"NUI 기술에서 사람으로, 그리고 비즈니스로”
비즈니스 현장에서 요구하는 NUI의 화두와 통찰
(Korea Natural UI/UX Innovation Concert 2013)
2013년 비즈니스 현장에서 요구하는 NUI의 화두와 통찰
NUI 프로젝트 방법론과 프로세스 고찰
NUI 가이드라인을 위해 필요한 개념과 사람의 이해
SW+인문 융합 미래UX트렌드 분석 및 통찰: 마이크로 트렌드 분석으로 매크로 UX전략 통찰Billy Choi
Sleep number’s bed
Google map’s driving mode
ShiftWear
Facebook’s Live Video Streaming
Facebook's new reactions & Duke’s research kit
Oregon Health & Science University’s Mole Mapper
Johns Hopkins EpiWatch
Yahoo Account Key
Shyp
Amazon’s living room & Microsoft’s RoomAlive
To be represented
"NUI 기술에서 사람으로, 그리고 비즈니스로”
비즈니스 현장에서 요구하는 NUI의 화두와 통찰
(Korea Natural UI/UX Innovation Concert 2013)
2013년 비즈니스 현장에서 요구하는 NUI의 화두와 통찰
NUI 프로젝트 방법론과 프로세스 고찰
NUI 가이드라인을 위해 필요한 개념과 사람의 이해
SW+인문 융합 미래UX트렌드 분석 및 통찰: 마이크로 트렌드 분석으로 매크로 UX전략 통찰Billy Choi
Sleep number’s bed
Google map’s driving mode
ShiftWear
Facebook’s Live Video Streaming
Facebook's new reactions & Duke’s research kit
Oregon Health & Science University’s Mole Mapper
Johns Hopkins EpiWatch
Yahoo Account Key
Shyp
Amazon’s living room & Microsoft’s RoomAlive
To be represented
화두 I. UI의 원리로 블루오션으로 가는 UX전략
화두 II. UI의 빅트렌드로, 삶을 바꾸는 거상이 되는 UX전략
화두 III. 관계 디자인으로, 마음을 움직이는 UX전략
UX, 정체가 무엇이냐?
인지과학을 적용한 DUX
신경건축학(Neuroarchitecture)과 DUX
주목할 UX 방법론 소개
UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰
- 5가지 사례에서 길어 올린 스마트 헬스케어 UX/UI의 전략적 통찰
:Sproutel’s Jerry the Bear & A.C. Camargo Cancer Center’s Justice League
:Zeo Sleep Manager Pro
:Janssen’s Care4Today App and SMS
:AliveCor
:Fitness Shirt
- UX/UI, 우리에게 시사하는 것
모바일 UX/UI 기획을 위해서 꼭 고려해야할 것들
트랜드와 원칙으로써의 UX - 1부
'UX는 3가지 관점에서 접근될 수 있습니다.
저는 지금까지 UX Design 방법론을 강조해 왔는데,
이번에는 트랜드로써의 UX, 원칙으로써의 UX를 말씀드리고자 합니다.'
- 라이트브레인 UX1컨설팅그룹 조성봉이사
2부의 자료는 추후 공개예정입니다.
화두 I. UI의 원리로 블루오션으로 가는 UX전략
화두 II. UI의 빅트렌드로, 삶을 바꾸는 거상이 되는 UX전략
화두 III. 관계 디자인으로, 마음을 움직이는 UX전략
UX, 정체가 무엇이냐?
인지과학을 적용한 DUX
신경건축학(Neuroarchitecture)과 DUX
주목할 UX 방법론 소개
UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰
- 5가지 사례에서 길어 올린 스마트 헬스케어 UX/UI의 전략적 통찰
:Sproutel’s Jerry the Bear & A.C. Camargo Cancer Center’s Justice League
:Zeo Sleep Manager Pro
:Janssen’s Care4Today App and SMS
:AliveCor
:Fitness Shirt
- UX/UI, 우리에게 시사하는 것
모바일 UX/UI 기획을 위해서 꼭 고려해야할 것들
트랜드와 원칙으로써의 UX - 1부
'UX는 3가지 관점에서 접근될 수 있습니다.
저는 지금까지 UX Design 방법론을 강조해 왔는데,
이번에는 트랜드로써의 UX, 원칙으로써의 UX를 말씀드리고자 합니다.'
- 라이트브레인 UX1컨설팅그룹 조성봉이사
2부의 자료는 추후 공개예정입니다.
UX 리서치 시 사용자를 정의하고 모델링하는 3가지 방식
How to define your user when you want to make user centered design product & service..
Conceptual Model, Persona, Mental Model
UI/UX 디자인 방법을 활용, 소프트웨어 개발 과정에서 사용성을 검토하고 사용자 중심으로 개선할 수 있는 가이드가 발간되었습니다.
이 책은 2013년 산업통상자원부 시스템반도체 융합경쟁력 강화사업 중 UI/UX기술자산 제공 기반구축의 일환으로, 정보통신산업진흥원 소프트웨어공학센터와 한국디자인진흥원의 협업으로 제작되었습니다.
역량 있는 소프트웨어 기업의 UI/UX 디자인 활용과 디자인방법을 통한 사용자중심의 소프트웨어 개발 지원, 소프트웨어산업의 활성화를 위한 기반조성을 목적으로 가이드북 제작, 웹 가이드 게시, UI/UX디자인 컨설팅 등이 진행되었습니다.
이 책은 소프트웨어 기획·개발 전문가들이 개발이나 개선 과정에서 UX, UI 개발 방법을 적용해 보고, 사용자 관점에서 편리하게 설계되었는지 각 단계에서 확인할 수 있는 방법을 소개하고 있습니다. 소프트웨어 개발에 관한 UI/UX에 한정된 것으로서 부족하나마 국내 소프트웨어기업들이 보다 다양한 디자인 방법의 활용을 통해 사용자 중심으로 개발하는데 쓰임이 될 수 있기를 바랍니다.
감사합니다.
*소프트웨어 자산뱅크(http://swbank.kr) 및 디자인포털 디자인디비(www.designdb.com) 에서 무료로 파일을 다운받을 수 있습니다.
소프트웨어 공학센터의 품질기준에 근거한 최소한의 UI/UX/GUI/UT 지식을 이해할 수 있습니다.
소프트웨어 개발 또는 개선 시에 단계별로 간단히 사용성을 테스트해 볼 수 있는 방법을 알 수 있습니다.
◇ 목차
Part I 소프트웨어 개발 UI/UX 참조모델 소개
1. UI & UX ?
2. 소프트웨어 개발 UI/UX 참조모델 제작배경
3. 소프트웨어 개발 UI/UX 참조모델 & 가이드 소개
Part II 소프트웨어 개발 UI/UX 참조모델 가이드
1. 목표정의
2. 프로젝트 계획
3. 요구사항 정의
4. 설계 및 구현
5. 테스트
6. 배포 및 관리
Appendix
용어 소개
Reference
방법론
참고서식
◇ 기획
미래창조과학부
정보통신산업진흥원 부설 SW공학센터
한국디자인진흥원
◇ 발행처
정보통신산업진흥원 부설 SW공학센터
한국디자인진흥원
◇ 발행연월
2013.12
◇ 참고링크 : SW자산뱅크 UI/UX 체험하기 바로가기 http://swbank.kr
◇ 문의처 : 한국디자인진흥원 서비스디지털융합팀 031)780-2263
UX가 무엇인지, UX를 디자인 한다는 건 어떤 일인지, 좋은 UX란 무엇인지에 대해 경험을 바탕으로 풀어본 이야기입니다.
Slideshare에 업로드 되어 있는 비슷한 주제의 자료들 대부분이, 화면을 꽉 채우는 이미지만 덕지덕지 붙어 있거나, 도대체 어떻게 전개되는 이야기인지도 알 수 없게 키워드만 툭툭 던지는 방식이라서 조금 답답하더라구요.
그래서 제맘대로 만들어 봤어요. ㅋ
(얼마를 상상하시든 그것보다 더) 짧은 기간동안 파바박 만든 자료라서.. 조금은 아쉬운 부분도 있지만, 이 자료가 어느 누군가에게는 도움이 되길 바라는 마음에서 올려봅니다.
* 구글의 Noto Sans Korean 폰트를 주로 썼는데, 슬라이드쉐어의 작은 뷰로 보기에는 가독성이 좋지 않아서 맑은 고딕으로 바꿨습니다.
UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트 (웹월드 인사이트 컨퍼런스 2013-디자인전략)
The Pinterestization Of The Web
Social Proof
Gamification UX
HTML5 Web Design Examples For Inspiration
[ITOnAir] 데브멘토 동영상, 배형미 스마트비즈랩 대표_성공하는 모바일 서비스를 위한 실전 강연
협업과 UI/UX, 스토리와 UX발전이 없으면 비전도 없다인생은 누가 더 대단한 이야기를 갖고 있는가의 싸움협업(Collaboration)과 협력(Cooperation)의 차이본 영상은 데브멘토 ITOnAir (tv.devmento.co.kr) 또는 다음tv팟(tvpot.daum.net/pot/Itonair)을 통해 웹과 모바일로 시청하실 수 있습니다.
1. 사람의 특징을 근거로 SW를 디자인한다.
2. 사용자를 관찰하여 SW를 디자인한다.
3. 사용자의 행동 패턴을 중심으로 SW를 디자인한다.
4. UI 원리를 응용한 차별화된 UX 전략 모델로 SW를 디자인한다.
5. ZEC(Zero-Effort & Connected) 트렌드를 적용하여 SW를 디자인한다.
6. Cultural-Ecosystem driven UX(New Habit & New Motivation centric UX) 방법론으로 SW를 디자인한다.
7. ‘인류학적 상수’ 가치를 투영하여 SW를 디자인한다.
현실 속에서 디자인 리서치 적용은 생각처럼 쉽지 않다.
하지만 사용자 중심의 디자인을 하겠다면서 사용자를 만나지 않을 수도 없다.
[현실]
디자인 리서치를 위한 일정을 따로 빼서 제안을 하기도 힘들다.
설상가상으로 디자인 리서치를 할 사람도 없고
더 중요한 것은 디자인 리서치는 혁신을 목표로하는데 모든 프로젝트가 혁신을 목표로 하지 않을 뿐더러, 혁신한다고 해도 성공할 확률은 이미 안드로로~
디자인 리서치의 장점을 어떻게 현실세계의 기획 상황에 맞게 활용할 수 있을까?
라는 문제의식에서 이 연구가 시작됐다.
용산FM 라디오 방송 with 최병호 교수
I. 최병호 교수 소개: 본인 소개, 주요 기여, 인터뷰
II. 4차산업혁명: 4차산업혁명의 정체는?, 사례, 사회문제해결 도전과제
III. 소셜임팩트 AI 사례: 센시, 수퍼빈, 테스트웍스
IV. 최병호 교수 미래: 위대한 인물 육성 강사, 소셜임팩트 창출 AC, 문해력 해결 전도사, 사람과 자연을 사랑하는 작가
AI 트렌드 통찰로 산업파괴적인 AI BM을 모색해보고, AI 중심의 NEW THINKING으로 인류의 삶을 변화시킬 위대한 리더십을 고찰해본다.
AI 적용 트렌드 통한 산업파괴적인 AI BM 모색
AI 사례 분석으로 새로운 패러다임 창출 전략 탐색
AI 도전
NEW THINKING
소상공인을 위한 오프라인 매장 전략
방역 시스템 전략
블루오션 전략(1): No virus & No wait
마케팅용 퍼소나(PERSONA) 전략
젠트리피케이션 예측 전략
블루오션 전략(2): Noise masking
소상공인 제품을 위한 전략
수요 예측 전략
판로 예측 전략
장인과 예비장인을 위한 제조 지원 전략
소상공인을 위한 금융 지원 전략
소상공인을 위한 지능형 신용평가 및 금융 지원 전략
인공지능(AI)과 사용자 경험(UX)
담론 I. 드라마로 본 AI & UX
담론 II. 도전과제로 본 AI & UX
담론 III. 변방성 질문으로 본 AI & UX
사례연구 #1-1. 지능형 패션 프로파일링 및 UX
사례연구 #1-2. 지능형 패션 추천 시스템 및 UX
사례연구 #2. 지능형 시니어 맞춤 UX
인공지능시대?! 지금, 무슨 일이 벌어지고 있는가? 우리는, 무엇을 질문하고 통찰해야 하는가?Billy Choi
EPISODE #1. 치매환자를 위해서 인공지능은 무엇을 할 수 있을까요?
EPISODE #2. 미래의 집을 위한 지능형 HCI/UX?
EPISODE #3. 시니어를 위해서 지능형 HCI/UX?
EPISODE #4. 패션 장인들을 위해서 인공지능은 무엇을 할 수 있을까요?
SCENARIO #1. 인공지능과 비즈니스모델링
SCENARIO #2. 인공지능과 철학
I. 사회혁신 담론과 게이미피케이션
사회적경제 아파트와 게이미피케이션?
스마트앵커와 게이미피케이션?
지역기반 노인통합돌봄서비스와 게이미피케이션?
사회적경제특구와 게이미피케이션?
사회문제 해결형 혁신형 사업과 게이미피케이션?
II. 행동변화를 유도할 수 있는 HCI/UX 이론과 게이미피케이션
(시니어에게 지속적으로 스마트밴드를 착용하도록 만드는 휴먼 인터랙션의 비밀? )
새로운 것을 시도하게 하려면
내적 동기 유발
지속가능성 시동 – 자동화 시도
지속가능성 본격 진입 – 착수: ‘지속적 강화 계획’
지속가능성 본격 진입 – 단기 가속: ‘고정비율 계획’
지속가능성 유지 – ‘변동비율 계획’
지속가능성 유지 – 중독성 있는 고리 형성
처음 시작은 아주 사소한 것부터 출발
지금까지 논의한 거의 모든 것은 습관의 힘
Story Editing
15. 사용성(Usability)은 사용자가 특정 맥락에서 특정
목표를 달성하기 위해 디지털 시스템을
전반적으로 편리하게 이용할 수 있는 정도
사용품질(Quality in Use)은 사회적, 물리적, 기술적
환경 등을 포함하는 다양한 실제 사용 환경에서
시스템을 통해 과업을 수행하면서, 사용자가
느끼는 효율성, 효과성, 만족도를 포함하는
총체적인 품질
(ISO 9241-11, ISO 13407)
44. 텍스트의 읽기 난이도(가독성) 계산 공식
프레시-킨케이드 가독성 공식은 텍스트의 가독성을 평가할 때 널리 쓰인다.
이 공식을 이용하면 읽기 용이성(reading ease score)과
독해 수준의 정보(reading grade-level score)를 함께 측정할 수 있는데,
값이 클수록 해당 문단을 읽기 쉬우며, 값이 적을수록 읽기 어렵다.
46. 세리프체와 산세리프체는 가독성 측면에서 동일한 수준
산세리프체가 평범하기 때문에 더 읽기 쉽다고 하고, 세리프체는 다음 철자와 모양이
이어져 시선을 이끌 수 있어서 더 읽기 편하다고 한다. 그러나 실제 연구 결과, 두 서체는
독해, 읽는 속도, 서체 간의 선호도에서 아무런 차이가 없다는 점이 드러났다.
60. 혹시 스스로 이메일이나 트위터, 문자 메시지에 중독됐다고 느껴본 적이 있는가?
혹은 메일함에 새 메일이 도착한 것을 알면서도 이를 무시하는 것은 불가능에
가깝다고 느낀 적이 있는가?
구글을 사용하면서 정보를 검색하다가 어떤 내용을 읽고 링크를 누르느라 정작
원래 검색하려던 것은 찾지도 않은 채 다른 정보를 검색하면서 30분이나
지났다는 것을 깨달은 적은 없는가?
이것은 모두 우리의 도파민계가 작용한 사례다.
61. 140자는 더욱 중독적이다.
정보가 들어오는 양이 적을 때 가장
강력하게 자극 받는다.
짧고 빈번한 트위터 메시지는
도파민계를 자극하는 데 이상적이다.
도파민계는 보상이 다가오고 있다는
단서에 특별히 민감하다. 무슨 일이
일어나리라는 작고 특정한 신호를
포착하는 즉시 도파민계를 가동시킨다.
이를 파블로프의 반사작용이라고 한다.
96. 1. Visibility of system status
2. Match between system and real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation
J. Nielsen and R. Mack, eds. Usability Inspection Methods, 1994
Nielsen’s 10 heuristics
Slide 95
99. 98
Problems
AGENDA 1. 업로드 실패
‘한번에 여러개’ 업로드 메뉴를 선택하면 업로드 창과 파일/폴더 선택 창이 동시에 로딩됨.
업로드 창의 ‘찾아보기’ 버튼을 누르면 ‘파일/폴더 선택 창’이 로딩되어 있기 때문에
사용자에게 제공되는 피드백이 없음. 오류로 판단하여 ‘한번에 여러개’ 업로드를 포기함
GUIDELINES
• Selective Perception
• Feedback
• Consistency
SOLUTIONS
A. ‘찾아보기’ 버튼 선택 시 ‘파일/폴더 선택 창’이 로딩되어 있다는 피드백을
제공함
B. ‘업로드 창’과 ‘파일/폴더 선택 창’을 동시에 로딩하지 않음
<그림 1.1> ‘한번에 여러개’ 업로드 화면
왼쪽 창은 업로드 창, 오른쪽 창은 파일/폴더 선택 창임
100. 99
Problems
AGENDA 3. 다운로드 및 업로드 완료 후 확인
다운로드 후 다운로드 한 파일의 이상유무를 일상적으로 확인하는 행동 특성이 있음. 그러나
종종 위치를 찾지 못해 시간을 낭비함. 또한 업로드 후 업로드 한 파일이 자동정렬되어 찾는데
불필요한 시간이 소요됨. 쉽게 인지할 수 있는 지원이 필요함
GUIDELINES
• Feedback
• Efficiency of Use
REFERENCES
• 파이이폭스 브라우저의 다운로드 관리자 및 현황 안내 화면
SOLUTIONS
<그림 3.1> 다운로드 화면
<그림 3.3> 업로드 화면
<그림 3.2> 파이어폭스 브라우저의
다운로드 관리자 및 현황 안내 화면
<그림 3.4> 업로드 前 화면
<그림 3.5> 업로드 後 화면
• 다운로드 후 다운로드 한 파일 즉시 열람 지원
• 다운로드 한 파일이 있는 폴더로 즉시 이동 지원
• 다운로드 한 내역 열람 지원
• 업로드 후 업로드 한 파일을 다른 파일과 구별시켜 업로드 성공을
확신하도록 지원; 복사, 이동, 이름 변경도 동일한 방식으로 적절한 피드백
제공 필요
101. 100
Problems
AGENDA 4. Drag & Drop 지원
‘한번에 여러개’ 업로드 시 드래그 앤 드랍을 지원하므로 ‘한번에 하나’ 업로드 시에
시도하지만 지원하지 않음. 웹하드 홈페이지에서 복사, 이동 등 파일 관리 시 웹하드
접속기처럼 드래그 앤 드랍을 시도하지만 지원하지 않음. 지원의 기대심리가 증가 추세임
GUIDELINES
• Learnability
• Consistency
• Efficiency of Use
CONSIDERATIONS
• O/S의 파일 관리 방식이 적용되면 편리할 것 같다는 생각을 보유함
• 웹하드 접속기에 익숙하면 웹하드 홈페이지에도 습관적으로 드래그 앤
드랍을 시도할 가능성이 많음
SOLUTIONS
A. 웹하드 홈페이지 전체에 드래그 앤 드랍 지원
B. 웹하드 홈페이지 서비스 중 사용자가 가장 많이 사용하는 업로드 및
다운로드에 우선 적용 후 전체로 확산
<그림 4.1> ‘한번에 여러개’
업로드 화면
<그림 4.2> ‘한번에 하나’ 업로드
화면
<그림 4.3> 웹하드
홈페이지에서 드래그 및
드랍 시도 화면
<그림 4.4> 웹하드
접속기에서 드래그 및 드랍
시도 화면
102. 101
Problems
AGENDA 6. 파일 전송 및 수신 확인 실패
‘메일로(BIG메일)’ 파일보내기 메뉴와 ‘메일로(BIG메일)’ 문서보안 메뉴를 구별하지 못함.
많은 사용자가 파일 전송 시 문서보안 메뉴에 접근하여 사용함. 또한 수신 확인이 상단 메뉴에
있지 않기 때문에 수신 확인 실패율이 높음. 개선이 시급함
GUIDELINES
• Similarity and proximity
• Clarity of the interface
• Consistency
CONSIDERATIONS
• 웹하드 홈페이지(또는 웹하드 접속기)의 왼쪽 tree 영역 내 사용자가 직접
생성한 폴더 외에는 무관심함
<그림 6.1> 웹하드 홈페이지의
파일보내기 메뉴와 문서보안 메뉴
<그림 6.2> 웹하드 접속기의
파일보내기 메뉴와 문서보안 메뉴
<그림 6.3> 웹하드 홈페이지의 수신 확인
SOLUTIONS
• 파일보내기 메뉴와 문서보안 메뉴의 차별성 강화
• 동일한 레이블 정정
• 웹하드 홈페이지(또는 웹하드 접속기)의 왼쪽 tree 영역 내 모든 메뉴를
상단 메뉴 영역으로 이동 필요; 이동 시 메일로(BIG메일) 메뉴와 가장
가깝게 배치 필요
103. 102
Problems
AGENDA 7. Undo 지원
사용자는 언제든지 실수를 할 수 있음. 그러나 복구할 수 있는 최소한의 지원조차 이루어지지
못한 상황임. Gmail 처럼 웹어플리케이션도 undo 기능을 지원하고 있으므로 기술적으로
어려운 상황이 아님. 또한 휴지통에 있는 파일은 간편하게 복구할 수 있는 지원이 필요함
GUIDELINES
• Error prevention and recovery
• Efficiency of Use
CONSIDERATIONS
• 사용자는 언제든지 실수를 할 수 있다는 점
• 웹어플리케이션도 undo 기능이 가능하다는 점
REFERENCES
• 윈도즈 XP의 휴지통 복원 기능
• Gmail의 undo 기능
<그림 7.1> 웹하드 홈페이지의
휴지통 내 파일 이동
<그림 7.2> 윈도즈 XP의
휴지통 복원 기능
<그림 7.3> 웹하드 접속기의
휴지통 내 오른쪽 마우스 기능
메뉴
<그림 7.4> Gmail의 undo 기능
SOLUTIONS
• 웹하드 홈페이지와 웹하드 접속기에 undo 기능 지원
• 휴지통에 복원 기능 제공; 복원 후 복원된 폴더 및 파일 확인 단서 제공
필요