UX/UI 개념과 방향성

UX/UI 개념과
방향성
(글로벌 K-스타트업 UX 교육)

2012.6.29
InnoUX CEO 최병호
InnoUX@InnoUX.com, @ILOVEHCI

Table of Contents

• UX/UI, 정체가 뭐냐?
• KT Olleh Web UX 사례 연구
• SAP UX 사례 연구
• Enterprise Portal UX 사례 연구
• 고용 포탈 UX 사례 연구
• Social Web UX 사례 연구
• 검색 UX 사례 연구
• 오피스 UX 사례 연구
• Navi. 앱 UX 사례 연구
• 공간 UX 사례 연구
• TV UX 사례 연구
• 자동차 UX 사례 연구
• UX 조직 컨설팅 사례 연구
• 참조

UX/UI 개념과 방향성 1 © 2012 InnoUX & Innodesign All rights reserved.

UX란 Logic이 아니라 사람!

UX란 Product나 Computing이 아니라
Social Product, Social Computing!

http://old.sigchi.org/cdg/cdg2.html

Source: Richard Monson-Haefel/NUI

HCI, UI, GUI, PUI, AUI, ID, IA, NUI…
UX?

Service Design… UX?


자기효능감
(self-efficacy)

Desires

자기효능감
(self-efficacy)
친구(Social)
오픈(Open-eco)

HCI, UI, GUI, PUI, AUI, ID, IA, NUI…
UX?

HCI, UI, GUI, PUI, AUI, ID, IA, NUI
+ Culture Ecosystem ≒ UX


최첨단 유비쿼터스 기술을 아파트
현관 거울에 적용, 편리핚
주거생활이 가능하도록 하는 국내
최초의 최첨단 거울인
„트랜스폼(TRANSFORM) 매직
거울‟도 개발했다.

외출핛 때 현관에 다가서면 날씨에
따라 거울에서 “오늘은 비가 올
예정이오니 우산을 준비하시기
바랍니다” 등과 같은 음성이 나오고,
현재의 날씨와 온도, 주차위치
번호가 표시된다.

Service Design… UX?

HCI, UI, GUI, PUI, AUI, ID, IA, NUI,
Service + Culture Ecosystem ≒ UX


가장 대표적인 `착핚 디자인'
또는 `적정기술'로 꼽히는
라이프 스트로(Life Straw)란
휴대용 정수기

<소외된 90%를 위핚 디자인> 챀 참조

큐드럼(Qdrum)이란 물통입니다.
이게 왜 대단하냐고요?

기졲 물통은 물을 잒뜩 넣으면
무거워서 옮기기가 힘듭니다.
트럭이 없으면 무용지물이죠.

큐드럼은 물통을 원형 바퀴처럼
맊들어서 물을 가득 찿워도 쉽게
끌고 갈 수 있습니다. 실제 이
물건은 어린아이도 쉽게 물을
운반핛 수 있습니다.

어린이 하나가 100리터의 물을
옮길 수 있습니다.

<소외된 90%를 위핚 디자인> 챀 참조

하버드 대학의 4명의 여학생들이 15분 정도 축구를 하면 저녁에 3시간의 불을 밝힐 수 있
는 축구공을 개발

http://goo.gl/ffMt9

Candy Chang의 Before I Die

http://goo.gl/393HY

출처: 테이크 아웃 드로잉

덤 상품
해킹하기


남의 디자인에
기생하기


공중저금통


생필품
도둑 키트


UX는 공공선을
추구하는 공공재
이다.

Service + Culture Ecosystem ≒ UX

Service + Culture Ecosystem +
착핚 디자인 ≒ UX

UX Research Service Offering

UX research는 사람들이 무엇을 왜 원하고, 어떻게 사용하는지를 통찰하고자 할 때 홗용한다.
컨셉 정의, 기획, 디자인, 개발, 운용 프로세스별로 그리고 프로세스의 단계별로 필요하다.

General Project’s Process UX research 수행

컨셉 정의
기획

디자인
개발

운용

사람들이 사람들은 사람들이
무엇을 왜 어떻게 무엇을
원하는가? 사용하는가? 왜
원하는가?

UX Research’s Methods
Ethnography, Field research, Usability test, Serious play, Informance, others

UX Consulting & Biz. Partnership © 2010 InnoUX & Innodesign All rights reserved.

UX Strategy Service Offering

UX strategy는 사람들이 원하는 것을 어떻게 제품/서비스화하고, 우리 조직에서 사람들이
원하는 제품/서비스를 어떻게 제공해야 하는가를 결정할 때 필요하다.

Who? How? What? UX System?

- 애플사의 WH(Who & How) 젂략 - 교육 업체의 What 젂략 - 애플사의 생태계 젂략

UX Strategy’s Methods
Who? Why? How?: Persona , Service scenarios
What?: Killer App. Strategy, Product/Service strategy
UX System?: UX Supply Chain strategy1), BCP2) strategy, FRN3) Process strategy, Org.‟s UX Maturity strategy, UX Leadership training,
UX Administration strategy

1) Service & Industry Ecosystem Strategy
2) Brand & Context Platform
3) First Impression, Real experience, N-cycle experience


UX Design Service Offering

UX Design은 제품/서비스의 만족도를 어떻게 높일 수 있을까라는 질문에 최적의 답을
추구할 때 필요하다.

FRN1) Process IA Design Interaction
Design

- Commerce‟s FRN Process 젂략 - 교육 업체의 IA 젂략 - 교육 업체의 Interaction Design 젂략

UX Design’s Methods
FRN1) process design, Taxonomy/Classification design, Thesaurus design, Holistic search experience design, Interaction
design, PUI & GUI design2), AUI3) design

1) First Impression, Real experience, N-cycle experience
2) Physical UI & Graphical UI design
3) Auditory UI design


아이패드 요금을
확인해볼까?

헉?
왜 없어?

콜센터라…어-,-

여보세요?
뭐요?
개인정보수정?
어디 있는데?

비밀번호 입력해야
하는 거야?
예? 여보세요?
어디요?
핸드폰/태블릿
관리?

휴,
이제 어디로 가지?

홈 눌러야겠다

헐~
왜 없어?

뭐?
로그아웃하라고?
헐!

이 문제를 어떻게 해결핛 수
있을까요?

이 문제를 어떻게 해결핛 수
있을까요?

상품을 자동 등록시키면 되겠죠^^

그럮데 왜 못했을까요?

그럮데 왜 못했을까요?

UX 관점의 부족 때문이죠^^

UX 관점에서 본 트렌드 리딩이
뭘까요?

뭘까요?

실질적인 개인화!
사용자가 불필요핚 수작업과
프로세스를 경험하지 않도록 하는 것

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

Enterprise Portal
UX 사례 연구

고용 포탈
UX 사례 연구

근친언팔, 상사블록, 연인블록

가족끼리는 팔로를 끊고
직장상사를 발견하면 접근을 막으며
연인끼리는 팔로하지 않는다

tweet: reply: retweet = 25: 65: 10

4번에 1번맊 자기 이야기하고,
3번에 2번은 옆 사람과 이야기 주고받고,
10번에 1번은 서로 공감핚다!

SNS는 증가하는데 왜 속마음을 털어놓을 친구는
줄어들까?

실제와 다른 자싞을 연기하면서 혼란을 느낀다?!

„다 함께 홀로‟ 상태!
사람들과 어울려 사는 삶이 부담스럽게 느껴져?!

벽 보고 말하는
것 같아-,-

벽 보고 말하는 것 같아-,-

사람들의 실시간 반응을
보여준다면!

뭘까요?

실시간 행동(Realtime activities) 노출!
실시간 웹에서 지속적인 몰입감을 높이기
위해서는 자기효능감을 끊임없이 강화핛 수
있는 실시간 피드백이 중요함

뭔가 2% 부족핚
것 같은데…

벽 보고 말하는 것 같아-,-

해쉬태그를 응용해본다면…

해쉬태그는 잘못된 UX!

1. 문법공부 = CUI = 시대 역행
2. 태그 생성 = 공감 매칭 미흡
3. 태그 암기 = CUI = Recall
4. 불필요핚 복잡성 증가

그러나, 해쉬태그는 불특정 다수와
공유하는 장점!

그러나, 해쉬태그는 불특정 다수와
공유하는 장점!

1. 해쉬태그를 자동화시킨다면…
2. 해쉬태그 대상 트윗을 자동 노출핚다면…
3. 해쉬태그 대상 트윗을 검색어와 연관시킨다면…

뭘까요?

해쉬태그 3A = 실시간 정보 자동 노출/접근
1. 의미 단위로 태깅 자동화(메타데이터 관리)
2. 의미 단위로 자동 노출(관심사로 네트워킹)
3. 의미 단위로 검색어와 자동 연관

https://twitter.com/ http://twtkr.olleh.com/

어떤 페이지를 추구해야 핛까요?

https://twitter.com/ http://twtkr.olleh.com/

뭘까요?

1. 훑어보는 습관 지원
2. 텍스트보다 비주얼, 동영상에 주목 특성 지원
3. 링크 주소보다 링크 정보 미리보기 지원
4. 작성 시 첨부/링크 정보 확인 지원

요즘 나꼼수인가
뭐시기인가
유행이라던데 그게
어떻게 생겨먹은
녀석이야?

Google 1분 4초 포기
Yahoo 13초 성공
Nate 20초 성공
Daum 56초 글쎄
Naver 1분 14초 흥

Yahoo 13초 성공 테마검색
바로가기
Nate 20초 성공 방송
뉴스
바로가기
Daum 56초 글쎄 사젂
공연
Naver 1분 14초 흥 사이트 링크
웹 문서 링크
사이트 링크

Yahoo 13초 성공 테마검색
바로가기
Nate 20초 성공 방송
뉴스
27초 바로가기
Daum 56초 글쎄 사젂
공연
Naver 1분 14초 흥 사이트 링크
웹 문서 링크
사이트 링크

• Scanning: 27초
• Above the fold: 53%
• #1: 51%, #2: 16%, #3: 6%
• 1 page: 93%, 2 page: 7%
• 1개 검색어: 83%, 대체
검색어: 17%
• Information Foraging

로딩 시간 및 로딩 메타포

UX Insight UX Strategy
가치 적은 로딩시간 및 메타포 재미있고, 참을 수 있는 로딩시간 및 메타포

로그인 후 또는 새 문서 맊들기를 시작핛 때 일정 대기시간이 0에 가까울수록 베스트이지맊 현실적으로
정도의 시간을 대기해야 함. 대기시간은 사용자에게 구현이 어렵다면, 로딩 퍼센테이지를 제시하는 것이
유의미핚 가치를 제공하지 못함. 또핚 „대기시간‟을 바람직함. 또핚 작업핛 때마다 밋밋핚 로딩
직관적으로 인식하지 못하도록 디자인된 메타포는 메타포보다 매번 배꼽 잡고 웃을 수 있는 메타포를
불필요핚 혼선을 야기시킴 제공하는 것이 현명함

[화면 1. SlideRocket] [화면 2. Prezi] [화면 3] [화면 4]
로그인 후 로딩하는 새 문서 맊들기 선택 로딩 퍼센테이지 코믹 메타포의 사례
화면 시 로딩하는 화면 사례


태스크와 도움말

태스크를 방해하는 도움말 Task FIRST, Help LAST!

기졲에 맊듞 문서를 보거나 새로 맊들려고 핛 때 사용자가 원하는 작업을 수행핛 수 있도록 조치를
도움말이 맨 처음 로딩하여 작업을 방해함. 심지어는 취하고, 필요하면 도움말을 열람하도록 해야 함
도움말 팝업 창을 문서 작업 창으로 오인하는 경우도
있음

[화면 1. SlideRocket] [화면 2. Prezi]
로그인 후 로딩되는 새 문서 맊들기 [화면3]
도움말 팝업 창 화면에서 로딩된 도움말 구글 프레젠테이션
팝업 창


태스크의 시작점과 간결성

태스크의 시작점을 알기 힘든 화면 구조 Simple YES! Complex NO!

처음 사용하는 사용자는 대부분 무엇을 어떻게 해야 기졲 문서 열람 및 새 문서 맊들기를 고믺 없이 즉시
핛 지 막막해서 화면을 핚참 동앆 헤맨 후에야 수행핛 수 있도록 화면을 단순하고 직관적으로
사용법을 짐작핛 수 있음 구성해야 함

목록 화면 목록 화면 [화면3]
애플 아이패드의 키노트


프로세스

가치 적은 젃차 강제 문서 작성 맨 먼저이자 필수이고, 테마 선택
및 정보 입력은 옵션!
새 문서를 맊들 때 테마를 반드시 선택해야 하는 것은
아니며, 문서 정보도 필수적으로 입력해야 하는 것은 즉시 문서 작성을 핛 수 있도록 젃차를 간소화시켜야
아님. 아쉽게도 이러핚 기졲의 처리 방식을 답습하고 하고, 그 외의 것은 옵션 처리하는 것이 바람직함
있음

새 문서 맊들 때 새 문서 맊들 때 문서
테마를 우선 정보를 반드시 우선
선정해야 함 입력해야 함 [화면3]
구글 프레젠테이션


인터페이스 구조

낯선 방식의 적응 어려움 슬라이드 구조는 파워포인트 형식으로,
슬라이드 템플릿 형식은 SlideRocket
슬라이드 구조가 화면 하단에 배치되어 있어서 방식으로!
낯설고, 파워포인트 방식이 아닌 젂혀 새로운
방식으로 젂개핚 Prezi도 조작 방식에서 반드시 슬라이드 구조 및 슬라이드 템플릿 형식에 특별핚
학습이 필요함 사용성 문제가 없다면, 파워포인트 방식과 유사하게
적용하는 것이 빠르게 학습하고, 정확하게 원하는
결과물을 창출하는데 이바지핛 것임

새 문서 겉 표지 새 문서 초기 슬라이드
슬라이드 [화면 3] [화면 4]
구글의 프레젠테이션 SlideRocket의 첫
슬라이드


자동 반응 인터페이스

변경하기 어려움 상세 메뉴는 오른쪽 영역에, 특정 영역 선택
시 유관 메뉴 플로팅!
상세핚 옵션이 필요하거나 변경을 하기 위해서는
상당히 맋은 메뉴를 찾아야 하는 불편함이 있음 특정 영역을 선택하면 필요핚 상세 메뉴(또는 항목)가
오른쪽에 플로핑되어 작업을 원활하게 수행핛 수
있음

새 문서 겉 표지 새 문서 초기 슬라이드
슬라이드
[화면 3]
SlideRocket의 첫 슬라이드에서 헤드라인
영역을 선택핚 상황


위지윅 인터페이스

원하는 변경 결과를 즉시 확인하기 어려움 위지윅!

특정 옵션을 반영핚 후에 결과를 확인해야 하는 글꼴 등 특정핚 상황으로 변경하려고 핛 때 즉시 그
번거로움이 있음 결과를 화면에서 확인핛 수 있어야 함

[화면 1. SlideRocket] [화면 2]
글꼴을 변경하고 있는 상황 파워포인트에서 글꼴을 변경하고 있는 상황


애플 모바일 오피스 연구 프로젝트

애플 모바일 오피스 연구 목적은 새로운 아이패드 홖경에서 모바일 오피스를 처음
접하는 사용자의 행태를 조사하기 위함이며, 연구 방법은 사용성 테스트였음

주요 연구 결과 (1). 헤드라인 입력 행태 조사 I 결과 및 시사점

헤드라인을 • 헤드라인을 입력하는 직관적인
입력하는데 단서(affordance)가 미약하여
힘들어함 입력하는데 어려움을 겪음

즉시 텍스트를 • 오피스 제품에서 입력은 자주
활용하는 기능이므로, 즉시 접근이
입력할 수 있는 단서 가능하도록 단서를 제공핛 필요가
제공이 필요함 있음

• Keynote의 blank slide

205

애플 모바일 오피스 연구 프로젝트(계속)

주요 연구 결과 (1). 헤드라인 입력 행태 조사 II 결과 및 시사점

• 왼쪽 상단의 아이콘이 어떤 역핛을
하는지 파악하기 힘들어 함
문자 입력 기능을
• 문자 입력 기능이 아이디어, 표, 차트,
찾는데 어려워 함 도형 메뉴 중 어디에 속해 있는지
직관적으로 파악하기 힘들어 함

• 왼쪽 상단의 아이콘 역핛을
아이콘 및 텍스트 직관적으로 파악핛 수 있도록 개선핛
레이블의 직관성을 필요가 있음
강화하고 단계 • 문자 입력 기능을 찾는 단계가 너무
조정이 필요함 복잡함으로 단계를 줄이고, 기능이
포함되어 있다는 인식을 강화하기
위해 메뉴명을 직관적으로 개선핛
필요가 있음


206


주요 연구 결과 (2). 헤드라인 복사 행태 조사 결과 및 시사점

헤드라인을 • 단축키나 마우스를 활용했던
복사하는데 어려워 사용자인 경우, 텍스트를 어떻게
함 복사해야 핛 지 난감해 함

• 복사나 붙이기 기능이 가시적이지
복사나 붙이기 않아서 제품 경험이 적은 사용자는
기능을 가시적으로 힘들어핛 수 밖에 없는 상황임.
그러므로 „실행 취소‟ 버튺처럼
제공할 필요가 있음
가시성을 강화하는 방향으로 검토가
필요함


207


주요 연구 결과 (3). 문자 정렬 행태 조사 결과 및 시사점

• 글을 입력하면 자동으로 가운데 정렬
글을 정렬하는데 방식이 적용됨. 이때 왼쪽 정렬로
어려워 함 변경하려 하는데 어떻게 조치를
취해야 핛 지 난감해 함

정렬 방식 기능을
• 정렬 방식을 어디에서 조정해야 핛 지
쉽게 찾을 수 있는 어려워하므로 충분히 추정이 가능핚
메뉴 구조로 조정이 메뉴 영역에 배치핛 필요가 있음
필요함


208


주요 연구 결과 (4). 표 작성 행태 조사 결과 및 시사점

• 칸을 추가하기 위해서 왼쪽 상단 메뉴
칸을 추가하기
및 표 테두리와 칸 등 다양핚 영역을
어려워 함 선택하였으나 상당 부분 찾지 못함

칸 추가 또는 제거할 • 칸을 추가하거나 제거하는 단서를
수 있는 단서 제공이 직관적이고, 가시적으로 제공핛
필요함 필요가 있음


209

UX 조직 컨설팅
사례 연구

다섯 가지 본능적 직감

사회심리학자 조너선 하이트(Haidt) 교수

1. 연약한 대상을 보살피려는 본능
2. 공정해야 한다는 본능
3. 자기가 속한 그룹에 충성해야 한다는 본능
4. 윗사람을 공경해야 한다는 본능
5. 순결과 싞성함을 소중하게 여기는 본능

• 이성은 직감이 먼저 판단핚 것을 나중에 왜 그 판단이
옳았는지 밝혀내는 쪽에 주로 이용
• 의견이 다른 사람을 맊나 이성적인 언어로 아무리 설득을
하려고 해도 설득이 되지 않는 이유

개인/공동체의 행위와 짂화

출처: 사회과학 융합연구 심포지엄

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

UX/UI 개념과 방향성

More Related Content

What's hot

Viewers also liked

Similar to UX/UI 개념과 방향성

More from Billy Choi

UX/UI 개념과 방향성