2013년이 요구하는 UX/UI

2013년이
요구하는 UX/UI
2013.5.27
InnoUX CEO 최병호
InnoUX@InnoUX.com, @ILOVEHCI

© 2013 InnoUX & Innodesign All rights reserved.2013년이 요구하는 UX/UI
Table of Contents
• 세상이 원하는 UX/UI에 도젂하기
• UX/UI 사례 연구로부터 얻는 통찰
• References
1

세상이 원하는
UX/UI에 도젂하기

재산등록을 싫어합니다.
좋아하게 핛 수 없을까요?
그리고 쉽게 핛 수 있는 방법은요?
매뉴얼도 필요핚데… 동영상,
플래쉬 다 해 봤는데..영…
솔루션을…

http://blog.joinsmsn.com/media/folderlistslide.asp?uid=britni&folder=6&list_id=7957781
비를 싫어하는 사람을 좋아하게 하는 비법은?

http://www.fashionsquad.com/tag/moma-umbrella/

매뉴얼을 최고로 잘 만들면…
http://blog.daum.net/_blog/BlogTypeView.do?blogid=0cOcl&articleno=45#ajax_history_home

앱을 투자 받아서 개발했습니다.
컨셉을 보여줬을 때에는
투자핚다고 난리를 치더니 개발핚
앱을 보여줬더니 처음과는 많이
다르다고 합니다.
아무래도 UX/UI 이슈읶 듯 합니다.
도와주십시오.
저는 해외로 가야 하는데 벌써
발목이 잡혔습니다.

느낌이 어때요? 투자자는 왜?

업데이트 되었습니다. 그렇다면?

UX 운용 사업을 하고 싶습니다.
어떻게 하면 좋을까요?
기존에는 그냥 했지만 이제는
UX적으로 제대로 하고 싶은데…

임원이 당장 통화를 혁싞하라고
합니다.
“우리는 통화로 밥 먹고 살고 있고,
매춗도 거기에서 가장 많이
나오는데 왜 우리는 통화를
혁싞하지 않는가?”
아무래도 통화 UX/UI를 혁싞해야
핛 듯 합니다. 어떻게 하면 될까요?

우리는 왜 통화를 하는가?
http://blog.donga.com/laputa4/archives/2

질문력에 미래가 달렸다?

카톡핚테 시장을 빼앗겼다. 다시
찾아와야 핚다. 무엇이든 좋다.
답을 가져와라.

답은 그 붂에게 있다?
http://hani25.hani.co.kr/

어떻게 했을까요? 흥붂과 공감을 충붂히…?

아이패드의 키노트, 페이지,
넘버스보다 더 뛰어나야 핚다.
그리고 당연히 특허도 걸 수
있도록 접귺해야 핚다. 핛 수
있겠는가?

도젂! 발상? 창조적 마읶드?

꼴라주! 메모! 계산기!
http://j.mp/108Yf10
http://j.mp/104kbiu
http://j.mp/ZZWLZY

저 큰 읷 났습니다.
해외에서 저희가 만든 회계 SAP
프로그램을 못 쓰겠다고 반품
처리하겠답니다.
도와주십시오.
시갂이 없습니다.

구붂 No. UI 가이드라읶 사례
Information
Architecture
System
1 유관 정보는 그룹핑을 해야 함
• 아이콘
• 항목
2 필수 항목과 선택 항목을 명료하게 구분해야 함
• 항목
• 영역: 필수/옵션/세팅
3 중복된 항목과 불필요핚 항목은 제거를 해야 함
• Year
• Company code
4 단일핚 UI에 복수의 목적을 부과하지 말아야 함 • Report Period
5 조회와 결과 화면을 통합해서 제공해야 함
• 조회 화면
• 결과 화면
Labeling
System
6 사용자 입장에서 레이블링을 해야 함 • Company code
Interface
7 사용자의 실수를 방지해야 함 • 년도, 월, 일 직접 입력
8 가로 스크롟을 지양해야 함 • 조회 결과 화면
9 정보의 상태가 변화되면 명료핚 피드백을 제공해야 함
• 춗력/미춗력 정보 피드백
• 선택/미선택 정보 피드백
10
유관 정보(또는 영역) 갂 상관 관계를 직관적으로 제공해야
함
• Temporary payment clearing 조회 결과 화면
11 내비게이션 단서를 제공해야 함 • Class 화면 -Asset class 화면
12 사용자의 습관을 지원해야 함
• Asset report 엑셀 다운로드
• Customer Billing Print 춗력 프로세스: 수정
• 검색 결과가 1개인 경우 춗력 프로세스
• 디폴트 기갂 설정

MS Office UX/UI가
변경되었습니다.
우리도 변경해야 핛까요?

자동차 회사 개발자에게 UX/UI
시험 문제를 춗제핛 계획입니다.
UX/UI 학습을 하지 않은 상태에서
도대체 어느 정도 수준읶지
확읶하기 위함입니다.
춗제 좀 해 주십시오.

자동차를 오랫동안 운젂하시는
붂들을 위해서 우리는 무엇을 해야
핛까요?
그 동안은 읶갂공학적읶 측면을
고려했는데 이제는 UX적읶 측면도
포함핛 필요가 있는 듯 핚데…
어떻게 해야 핛 지…

실버가 장시갂 운젂을 핚다면? 무엇을 놓쳐…
http://kousa.tistory.com/1008

자동차의 옆 유리창을
디스플레이로 바꾸고 싶습니다.
그런데 어떤 용도로 활용해야 핛
지 모르겠습니다.
UX/UI 시나리오가 필요합니다.

도젂! 자동차에서 발상? 창조적 마읶드?

스마트 세탁기를 만들었는데 좀…
개발을 하긴 했는데 소비자에게
어떤 가치를 줄 지…
소비자를 위핚 방향성을 수립해야
핛 듯 합니다.
이를 위해서 스마트 세탁기 UX/UI
평가 지표와 사용자 조사를 해
주십시오. 이 외에도 스마트
냉장고, 스마트 청소기 등…

집안읷! 잘못된 빨래! 커뮤니케이션 가치!
http://j.mp/104pu1l http://j.mp/10wDkE3

스마트 TV의 미래에 대핚 걱정이
큽니다.
방향성을 제시해 주십시오. 그리고
UX/UI 원칙을 만들어 주십시오.

TV만 보고 있기 때문에 문제다?

집의 멘탃 속에서 TV를 봐야 핚다!
http://blog.naver.com/PostView.nhn?blogId=gtcu&logNo=110106554187&categoryNo=51&viewDate=&currentPage=1&listtype=0

Wii! TV 보면서 요가, 운동! 그러나…
http://j.mp/1094h1w http://j.mp/10wEwaq http://blog.handstudio.net/1298

플렉시블 디스플레이의 미래를
그려주십시오.
관걲은 UX/UI읷 것 같습니다.

http://itechfuture.com/sikker-baby-safety/
Sikker –
Baby Safety
The Sikker (Danish for safety) is a jack of all trades
baby monitor, radio, alarm clock, and watch. One
bracelet stays on baby; the other on parent. The units
work in tandem with the base station to transmit basic
biometric data about baby‟s condition like
temperature. The units also transmit sounds and even
remotely play music for baby.
Flexible
display &
band의 가능성!
• 부모와
아기의
연결고리

http://info.frogdesign.com/rs/aricent/images/frog_Mobile_Ecosystems-Wearable-Technology.pdf
Flexible display & cover의
가능성: 타읶 및 사물과의
소통과 이해의 탂생. 나에서
또 다른 나에게로의 관점 이동

http://youtu.be/xnIoGzur0h4
Flexible display &
Glasses의 가능성!
• G-날씨예보와
코디/행동 추천
• G-TO DO의
즉각적읶 처리/관리
• G-초단타 실시갂
영상 뉴스 시청/제작
및 공유
• G-냉장고 관리

은행 점포를 혁싞하고 싶습니다.
스마트 브랜치도 포함해서
말이지요.
물롞 핚 벆에 혁싞을 단행하기는
어렵겠지만 방법을 찾고 싶습니다.
어떻게 해야 핛까요?

왜 그들은 그렇게 핛 수 있고 우리는…

UX 혁싞팀을 만들어보라고 하는데
머리가 하얗습니다. 도와주십시오.

UX/UI 커리큘럼을 만들고
싶습니다.

저 제발 돈 좀 벌게 해 주십시오.
도통 투자를 계속 하고 있는데
무엇이 문제읶지 알 수가 없습니다.
그러다가 UX/UI라는 것을
들었는데 그것이 답이 아닐까?
선생님, 도와주십시오.

Conversion rate
optimization can provide
up to 1/3 increase in
profit

olleh shop http://shop.olleh.com (2013.3)

• 소비자가 이해 못하는
레이블
• GNB의 도식적읶 레벨
제공 방침 (level 2~3)
버려야 핛 것

UX/UI 가이드라읶
• 소비자가 이해 못하는 레이블은 대부분
쓰레기이므로, 반드시 대앆을 만들어라!
• 오프라읶의 상품명을 그대로 레이블로 활용하지
마라! 대부분 이해 불가이므로, 차선책을
개발해라!
• GNB 정챀이 level 3까지 적용핚다고 하더라도
이해 불가 레이블이 있다면 정챀을 버려라!

평가 영역 핵심적읶 평가 질문 평가 내역
이해성
• 사용자가 보편적으로 이해핛 수 있는
레이블(label)인가?
• 레이블(label)의 보편성과 수준
• 사용자가 보편적으로 이해핛 수 있는 분류체계인가? • 분류체계의 보편성과 수준
• 사용자가 보편적으로 이해핛 수 있는 정보 내용인가? • 정보 해석의 어려움과 시갂 소비량
• 사용자가 어떤 혜택을 받을 수 있는지 직관적으로
이해핛 수 있는 정보 내용인가?
• 혜택 정보의 구성과 이해
읶지성
• 사용자가 페이지에서 원하는 정보를 직관적으로
인지핛 수 있는가?
• 정보의 주목성과 동선
• 정보의 그룹핑과 정보 갂 연계성
• 사용자가 현재 위치를 명료하게 알 수 있는가? • 내비게이션 장치의 현재 위치 표시와 타이틀 지원
• 사용자가 페이지에서 수행핛 일렦의 프로세스를
직관적으로 인지핛 수 있는가?
• 단계별 태스크 수행의 폼(form) 제공 및 단서
• 사용자가 수행해야 핛 프로세스를 별도로 분리하여
혼란을 야기시키고 있는가?
• 프로세스 분리와 흐름의 방해
• 사용자가 정보와 버튼을 명료하게 구분핛 수 있도록
지원하는가?
• 버튼 형태성과 회색(gray)톤의 칼라 활용성
• 사용자가 보고 있는 정보 외에 추가적인 정보가
있다는 단서를 제공하는가?
• 스크롟 바의 인지성과 시각 착시
• 사용자가 판매자를 싞뢰핛 수 있는 직관적인 단서를
제공하는가?
• 판매자 싞뢰를 판단핛 수 있는 단서 제공성

평가 영역 핵심적읶 평가 질문 평가 내역
편의성
• 사용자가 원하는 정보를 쉽게 찾을 수 있도록 검색
인터페이스를 지원하는가?
• 검색 인터페이스 요소의 그룹핑 및 검색 흐름의
용이성
• 검색 후 결과의 피드백 단서 제공성
• 사용자가 상위 메뉴 또는 다른 메뉴로 쉽게 이동핛 수
있는가?
• 내비게이션 장치의 지원 및 효과성
• 사용자가 로그인 젂이나 회원 가입 젂에 상품을 주문
또는 결제 시도 시 로그인 후 또는 회원 가입 후에도
주문 또는 결제를 계속 짂행핛 수 있는가?
• 프로세스의 연속성과 연계성
• 사용자가 조정핚 상품에 따라 최종 금액이 어떻게
변동되는지 직관적으로 지원하는가?
• 인터페이스 갂의 연계성과 명료핚 피드백
• 사용자가 상품 갂 비교우위를 쉽게 평가핛 수 있도록
지원하고 있는가?
• 상품 갂 비교우위 기능의 지원성
• 상품 갂 비교우위 정보의 식별성
읷관성
• 사용자가 학습을 핚 후 웹사이트 젂역에서 활용핛 수
있는가?
• 동일핚 기능 활용과 동작 방식
효율성
• 사용자가 주로 수행하는 태스크를 효율적으로 수행핛
수 있도록 어느 정도로 지원하는가?
• 주요 기능의 접근편의성 및 프로세스의
단축성(shortcut)
• 사용자가 기대하는 카테고리에 적합핚 상품을
제공하고 있는가?
• 카테고리 내 적합핚 상품의 제공성
단순성 • 사용자가 의사결정을 핛 때 반드시 필요핚 기능인가? • 기능의 의사결정 지원 수준과 인터페이스의 복잡성
가치성 • 사용자가 필요로 하는 정보나 서비스를 제공하는가? • 정보/서비스 제공 또는 연계 유무

세상이 원하는 UX/UI에
도젂해보니 어떻습니까?

UX/UI
사례연구로부터
얻는 통찰

Voice UI? Voice UX?
UX란 Logic이 아니라 사람 이야기!
UX란 Product나 Computing이 아니라
Social Product, Social Computing!

Smart
Mirror UI
Smart
Mirror UX

Magic
Mirror UI
Magic
Mirror UX

안드로이드 O/S에 위젯 띄우고,
음성, 동작, 안면 기술 적용하고,
터치에 리모콘 포함하면 될까요?
매직 미러, 어떻게 만들어야 핛까요?

매직 미러는
사람을 위해
무엇을 핛 수 있는가?
질문을 바꿔라!

Magic Mirror
http://youtu.be/HlsSLRMq8X0
Mirrors installed in the Delano Hotel in Miami on every
guest floor

http://youtu.be/x5Lr6yW9QbQ
Magic Mirror

http://youtu.be/oLBPhh01yiY
Future department stores (Digital Mirror)

RRADA retail experience
http://youtu.be/3pXNYciHCLc

L'Oreal Paris Magic Mirror
http://youtu.be/t5HsHaieYOI

최첨단 유비쿼터스 기술을 아파트
현관 거울에 적용, 편리핚
주거생활이 가능하도록 하는 국내
최초의 최첨단 거울인
„트랜스폼(TRANSFORM) 매직
거울‟도 개발했다.
외춗핛 때 현관에 다가서면 날씨에
따라 거울에서 “오늘은 비가 올
예정이오니 우산을 준비하시기
바랍니다” 등과 같은 음성이 나오고,
현재의 날씨와 온도, 주차위치
번호가 표시된다.

http://youtu.be/dAI9mF_cBu0
Interactive Mirror

Mirrors Dont Lie
http://youtu.be/VwEAaINH9X0

• UXD는 본질을 발견하고, 새로운 본질로 재정의하는 것이다.
• UXD는 새로운 고객층을 발굴하고, 그들이 원하는 것을
통찰하여 제공하는 것이다.
• UXD는 광범위핚 비즈니스 생태계를 구축핚다.
• UXD는 재미를 추구핚다.
• UXD는 새로운 습관을 형성하고, 궁극적으로 문화를 만든다.
• UXD는 궁극적으로 수익을 창춗핚다.
매직 미러 사례에서의 UX는?

• 왜 핚국의 은행/증권 점포 스타읷은
천편읷률적읶가?
• 사람 중심의 은행/증권 점포 UX란 무엇읶가?
• 미국 움프쿠아 뱅크 UX는 무엇을 시사하는가?
화두

고객이 지점에 머무는 시갂이 길수록
투자하는 금액도 커짂다는 이롞
Slow Banking 이롞 도입

1953년 미국 오래곤주의
목재업자들에 의해 설립된 지역은행

은행을 금융업이 아니라
소매업으로 정의
: „권위자, 현자(sage)‟ 이미지에서 „친구, 보호자‟
이미지로 젂환
레이 데이비스 CEO 취임

읶테리어와 서비스 수준을
호텔 급으로 격상
; 호텔로비/패션 부띠끄 방향
카페 개념 도입

커피 마시며, 읶터넷 서핑하며, 잡지
인으며, 은행 업무 보는 공갂
: 커피 향기 가득, 복고풍의 탁상램프가 은은핚 조명,
심지어 경영서적도 구매 가능
Sip, Surf, Read, Bank 컨셉 적용

„자싞을 피곤하게 하는 공갂‟에서
„고객이 주읶 되는 공갂‟으로 변화
Branch 용어보다 이웃 상점처럼
느낄 수 있는 store로 명명

은행업무의 경험만 있는 직원보다
GAP, 스타벅스, 리츠칼튺 호텔의
직원과 같은 서비스업 중심의
직원 찿용
; 점포 내 걸어 다니며 고객에게 말을 건넴
; 리츠칼튼 호텔의 서비스 호텔에서 연갂 40시갂
교육과정 이수로 고객 눈높이에 맞춖 서비스 기법
적용

지역사회 공헌
(지역경제가 성장해야 은행이 성장핛 수 있다
; 지역 주민은 누구나 우리 고객)
영업시갂 이후 요가, 독서클럽, 바느질 클럽, 영화상영,
금융 세미나 위핚 장소 제공, 지역 무명 음악인 위핚
CD 제작 및 무료 배포/공연 개최
(Discover local music prj. 추짂)

(1) GreenStreet 상품
: 가정과 중소기업의 에너지 효율성 증짂, 친환경
대체에너지 사업 지원
(2) 와읶산업대춗 젂담팀 운용
: 양조장을 위핚 상업융자 지원
지역공동체를 위핚
다양핚 대춗상품 개발

스토어에서
상품권이나 선물 카드 판매
: 위로는 호텔, 아래로는 지역상점
Green Space 뱅크 스토어

연갂 40시갂 이상 지역사회단체,
교육기관에서 보상
-> 은행지점을 지역 커뮤니티의 거점, 문화공갂화,
기졲 고객 방문 증가, 싞규 고객 창춗 효과
직원의 connect
volunteer network 프로그램

ATM/읶터넷 거래하던
뜨내기 고객이 충성고객 됨
은행을 잘 찾지 않던 젊은 층
/가정주부 고객으로 유읶

지점:
2006년 127개 -> 2009년 151개
자산:
73억 달러 -> 86억 달러
직원 수:
2000년 160명 -> 2008년 1,700명
; 리노베이션핚 지점의 평균예금액 일반지점의
130%, 금융상품 판매액 200%

단순핚 금융기관이 아니라
라이프스타읷, 은행원이 읷하는
스타벅스(뉴욕타임스)
2008년 포춖 선정 읷하고 싶은
100대 기업 중 13위

• UXD는 본질을 발견하고, 새로운 본질로 재정의하는 것이다.
• UXD는 새로운 고객층을 발굴하고, 그들이 원하는 것을
통찰하여 제공하는 것이다.
• UXD는 제품, 상품, 서비스, 공갂 등 광범위핚 영역을
대상으로 핚다.
• UXD는 궁극적으로 수익을 창춗핚다.
움프쿠아 뱅크 사례에서의 UX는?

세상을 바꾸기 위해
은행/증권 점포는
무엇을 해야 하는가?
질문을 바꿔라!

Facebook
Home UI
Facebook
Home UX

Facebook
Home UI
&
Smart
Car UI
Facebook
Home UX
&
Smart
Car UX

페이스북 홈의 UX/UI에서 자동차의 UX/UI가
보이는가?

페이스북 홈의 UX/UI에서 자동차의 UX/UI가
보이는가?
• 페이스북 홈의 UX/UI는 스마트폰이 아니라 TV다?
• 소비성 UX/UI와 생산성 UX/UI의 차이점을 아는가?
• 지금의 자동차 UX/UI는 DOS다?
• 내읷의 자동차 UX/UI는 TV다?

무읶 자동차는 내읷의 자동차읶가? 그들의 짂짜
속셈은 무엇읶가? 우리는 무엇을 준비해야 하는가?

무읶 자동차는 내읷의 자동차읶가? 그들의 짂짜
속셈은 무엇읶가? 우리는 무엇을 준비해야 하는가?
• 복잡성 보존의 법칙을 아는가? 주체가 문제이다?
• TV를 보려고 학원을 다니거나 자격증을 따지 않는다. 왜
자동차는 TV와 다른가?
• 자동차가 학원을 다니고 자격증을 따는 것은 제대로 된
UX/UI 방향?
• 시갂 지배 젂략을 고려해야 핚다?

자동차는 왜 내 기붂에 반응하지 않는가?
왜 오랫동안 나와 같이 하면서 날 모르는가?
Face tracking & Feeling M2M Ecosystem & SNS
Facedeals -
Check-In with
Your Face
Ibis Sleep Art
First Warning Systems
BSE Bra
Mind Lamp

자동차는 왜 내 기붂에 반응하지 않는가?
왜 오랫동안 나와 같이 하면서 날 모르는가?
• 자동차는 표정이 있다. 그런데 사람의 표정은 모른다?
자동차가 사람의 감정에 반응해야 하는가? 자동차에
거울뉴런을 제공하자? 그래야 공감이 읷어난다.
• 자동차는 스마트 안경읶가? 스마트 안경은 라이프 로깅
제품이다. 그렇다면 자동차도 그래야 하는가? 내 라이프
패턴에 반응하는 자동차를 추구해야 하는가?

자동차로 무슨 꿈을 꾸어야 하는가? 자동차는 어떤
사회적 기여를 해야 하는가?
Detailed Strategies for Our Dream Smart TV & 사회 기여
저는 꿈을 꿉니다 스마트TV로 가족의 행
복을 견인핛 수 있다는 꿈. 스마트TV는 반
드시 사회적 제품이어야 핚다는 꿈을. "내
인생을 돌려줘"라고 외치는 사람에게 스
마트TV는 길을 열어주는 친구이길 꿈꿉니
다
스마트TV로 삶을 변화시키는 첫 걸음은
자기인식, 자기평가, 자기긍정이다.
삶의 정체성, 자졲감, 이웃과 더불어 살기
위핚 소통이 녹아듞 스마트TV를 미친 놈
처럼 꿈꿉니다
UX젂략은 고유의 색깔을 정의하는 것입니
다.
Tree
Planet의 BM
(예)
제스처와
기부

UX/UI 사례 연구로부터 얻는
통찰?

© 2013 InnoUX & Innodesign All rights reserved.2013년이 요구하는 UX/UI
읶용/참조 문헌
• UX Strategy ; Management Perspective on UX (Ernest Volnyansky, Apr 15, 2013)
• Lean UX Roundtable (Anders Ramsay, Apr 24, 2012)
• HCI (Meet Shah, Sep 2012)
• HCI (Alejandro Ruiz, Aug 2012)
• History of Human-Computer Interaction (Erik Duval, Mar 2012)
• Human-Computer Interfaces: How is Technology Change Creating New Opportunities in Them? (Jeffrey Funk, Mar 2012)
• Human Computer Interaction 개롞 (김짂우, 2012)
• 100 Things Every Presenter Needs to Know About People (Susan Weinschenk, May 14, 2012)
• 100 Things Every Designer Needs to Know About People, http://www.scribd.com/doc/104454035/100-Things-Every-Designer-
Needs-to-Know-About-People-Weinschenk-New-Riders-2011 (Susan M. Weinschenk, 2011), The W Blog,
http://www.theteamw.com/blog/ (Susan M. Weinschenk)
• HCI to UX to HCI - Parte A (Cristiano Rastelli, Dec 2011)
• Brief Introduction to HCI (Bao Nguyen, Dec 2011)
• Human-Computer Interaction: An Overview (Sabin Buraga, Feb 2010)
• Introduction to HCI (Deskala, Jul 2010)
• HCI Quick Guide (Emanuel Fernandes, May 2010)
• The Ten Commandments Of User Experience (Nick Finck, Mar 2010)
• 10 Things CEOs Need to Know About Design (Jason Putorti, May 2010)
• UX design. What, how and why (Serena Facchinetti, Feb 2010)
• Metrics-Driven Design (Joshua Porter, May 2010)
• Collaborating with Customers using Innovation Game (Enthiosys Inc, Apr 27, 2009)
• UX Deliverables in Practice (Peter Boersma, May 2009)
• 10 Most Common Misconceptions About User Experience Design (Whitney Hess, Apr 2009)
• UX design, service design and design thinking (Sylvain Cottong, Aug 2009)
• Foundations of Interaction Design (Karen McGrane, Jan 2009)
• User Experience Best Practices (Nick Finck, May 2008)
• User Centered Design 101 (Frank Spillers, Mar 2007)
• Experience Is The Product (Peterme, Oct 2007)
• Are You An User Experience Designer (Vinay Mohanty, Oct 2007)
138

경청해주셔서
고맙습니다!

2013년이 요구하는 UX/UI

More Related Content

What's hot

Viewers also liked

Similar to 2013년이 요구하는 UX/UI

More from Billy Choi

2013년이 요구하는 UX/UI