UX & Future

UX &
Future
2016
Billy(최병호)/BillyChoi@Gmail.com
중앙대학교 교수
홍익대학교 영상대학원(HCI개론 강의)/
연세대학교 공학대학원(서비스디자인경영 강의)/
성균관대학교 일반대학원 휴먼ICT융합학과(교수)/
InnoUX 대표이사
Research Data: http://www.slideshare.net/BillyChoi/
Blog: http://blog.naver.com/soularchitec
Twitter/Facebook: ILOVEHCI

© 2016 Billy All rights reserved.UX & Future
Table of Contents
• Challenge I
• Challenge II
• Challenge III
• Challenge IV
• Usability Engineering
• Emotional Design
• Case Study
1

수전증 & UX
3
Video source: https://www.facebook.com/no1jaemi/videos/936831373105434/

Save people & UX
4
"한 명을 구하는 것이 인류 전체를 구하는 것"...시리아의 영웅 '하얀 헬멧'
Video source: https://www.facebook.com/videomug/videos/1125115640896191/

스쿨버스 & UX
5
Video source: https://www.facebook.com/ehrehsmsdnflEkd/videos/973217459392069/
참조 컬럼: 아이를 살리는 스쿨버스 http://naver.me/xaGsYeZd

Self-balancing & UX
6
Video source: https://www.facebook.com/GIGadgets.Fans/videos/1018770194868936/

A와 B를 설명해보십시오!
8
Source: http://www.lukew.com/ff/

A와 B를 설명해보십시오!(cont.)
9

A와 B를 설명해보십시오!(cont.)
10

Probabilistic models(확률적 모형)
• 확률적 모형(진화론적 이론)
 독일의 막스플랑크 연구소의 게르트 기거렌저(Gerd Gierenzer) 박사
 불확실성 하에서의 추론에 있어 진화 역사적으로 선조 시대와 같은 양식의 정보가 주어지면
계산 용이, 시간적으로 더 적절한 행동특성이 있음
 수렵채집 생활: 어떤 것을 기다려 가치를 더 증대시켜 크게 얻는 방식(예측 불가능한 기상
변화나 다른 포식자의 위험 등에 대응하여 또는 농경생활방식)보다 현재 자신의 손에 당장
거머쥘 수 있는 것을 더 소중하게 여겼을 것
 현대인: 여전히 불확실성 높음(경제학에서 가정하는 식의 확률계산에 의한 선택은 실제
시간의 압박을 받는 경우의 인지적 과정과 괴리가 크다.)
 경제학에서 말하는 합리성: 환경이 안정되어 있을 때나 가능하니 경제학적인 합리적인
사고나 합리적인 선택 양식은 인간의 진화단계에서 가장 뒤늦게 생겨났을 것(게르트
기저렌저 2000년 논문)
11

The triune brain theory(삼위일체 뇌)
• Paul MacLean 1990년
도입
• Orange represents the
primate brain영장류
뇌(neocortex신피질),
green is the
mammalian brain포유류
뇌, and yellow is the
reptilian brain파충류 뇌.
• 진화 과정에서 3개
층(layer)으로 형성.
서로 긴밀히 연결되어
있으나 각각 기원이
다름
12

The mammalian brain(포유류 뇌)
• 위험, 번식 욕구, 양육 욕구,
음식 획득(danger,
reproductive and
nurturance needs, and
acquisition of food)에
반응 역할
• ‘close enough is good
enough ’ rule(비슷하면
충분하다) 적용; 풀밭에서
물 호스를 뱀으로 오인;
‘rather be safe than sorry’
https://s-media-cache-ak0.pinimg.com/originals/80/64/ce/8064cefe43478874308aef7b51a7f0cd.gif
13

The neocortex or primate brain(신피질 또는 영장류 뇌)
• 피질: 껍질(나무) 의미
• 파충류와 초기 포유류의
원시적 피질과 구별하여
나타남; 최근 3백 년 간
• 해마 영역들은
구피질(paleocortex)로서,
4~5층, 신피질은 6개의
뚜렷한 세포층(six distinct
cellular layers) 보유
• The four major lobes of
the cortex are visible from
a lateral view of the brain.
전두(엽)
두정(엽)
측두(엽)
후두(엽)
소뇌
14

Some major functions of the human cortex
측면 모습
내부(중앙선) 모습
시각
청각과 베르니케 영역
(회화 입력)
체감각과 다중감각
운동조절
집행기능과 브로카
영역(회화 출력)
후각
후반부
(감각)
전반부
(운동과 집행)
실비안(외측)열
뇌량
(양반구를 연결하는 흰 섬유들)
15

새로운 스타일의 볼링 & UX
17
Video source: https://www.facebook.com/myjobisboring2015/videos/1397106226971971/

새로운 놀이터(Digger land) & UX
18
Video source: https://www.facebook.com/FatherlyHQ/videos/1058725237513951/

흥미로운 캠핑 스타일 & UX
19
Video source: https://www.facebook.com/dailydot/videos/1067694906634829/

대박집의 비밀 & UX
20
Video source: https://www.facebook.com/frms1/videos/1613630002219602/

제임스본 만들기 & UX
21
Video source: https://www.facebook.com/AllaboutAD/videos/968674043254439/

Augmented climbing wall game & UX
22
Video source: https://www.facebook.com/HCI.Research/videos/1090155134355703/

ISO 9241-11: Usability: Definitions and concepts
• The new version of ISO 9241-11 retains and elaborates on the concepts in the 1988
version of the standard,
• With the original definition of usability extended to apply to systems and services:
“the extent to which a system, product or service can be used by specified users to
achieve specified goals with effectiveness, efficiency and satisfaction in a specified
context of use”.
Goals: Historically, usability has been associated with achieving predetermined
practical goals, but the concept has been widened in the new version of ISO
9241-11 to include achieving personal outcomes such as entertainment or
personal development.
24
Source: New ISO Standards for Usability, Usability Reports and Usability Measures(2016)

http://www.designresourcebox.com/why-usability-is-the-most-important-aspect-of-designing-a-site/

ISO 9241-220: Human-Centred Design
• According to ISO 9241-210, human-centred design is an
“approach to systems design and development
that aims to make interactive systems more usable by focusing on the use of
the system
and applying human factors/ergonomics
and usability knowledge and techniques”.
• The current draft of the standard proposes a broadened definition of user experience
to take account of the way the term is commonly used:
“a person's perceptions and responses
resulting from the use and/or anticipated use of an interactive system,
and from the user's interaction with the organization that supplies or delivers
the interactive system;
from discovering the system, adopting and using it, through to final use”.
26

ISO 9241-220: Human-Centred Design(cont.)
27

ISO/IEC 25022: Measurement of Quality in Use
28
• Quality in use which is defined in ISO/IEC 25010 System and software quality models includes:
effectiveness, efficiency, satisfaction, freedom from risk and context coverage. The measures for
quality in use in ISO/IEC 25022 include measures for the components of usability that are
defined in ISO 9241-11: effectiveness, efficiency and satisfaction (Table 2).

ISO/IEC 25022: Measurement of Quality in Use(cont.)
29
• ISO/IEC 25022 provides suggested measures for freedom from risk, which is defines as the:
“degree to which the quality of a product or system mitigates or avoids potential risk to the
user, organisation or project, including risks to economic status, human life, health, or the
environment” (Table 3).
• This recognises that it is not sufficient simply to consider successful interaction, it is also
important to minimise the possibility of any adverse consequences that could arise from poor
usability (such as an individual failing to purchase the correct transport ticket, adverse
economic consequences for a company, or environmental consequences resulting from poor
usability of home-heating controls).

ISO/IEC 25023: Measurement of System and Software Product Quality
30
• ISO/IEC 25023 contains measures for system and software product quality, including measures of
usability as a product attribute (Tables 5 and 6).

ISO/IEC 25066: Usability Evaluation Reports
31
• ISO/IEC 25062 Common Industry Format (CIF) for usability test reports, published in 2008,
specifies the information to be included in a summative test report that is intended to enable a
supplier to demonstrate the usability of their system to a potential purchaser, and the purchaser
to judge whether the system would be usable in their own context of use. The information
required by this standard is more detailed than is necessary for most formative evaluation
reports.
• When the new ISO/IEC 25066 Common Industry Format for usability (CIF) –Evaluation reports
was developed to cover a wider range of approaches to usability evaluation, rather than focusing
on the summative or formative purpose of evaluation, the approach taken was to specify the
contents that should be included for different types of usability evaluation:
1. Inspection to identify usability defects and the corresponding potential usability problems.
2. User observation
 Qualitative: Observing user behaviour to identify actual usability problems.
 Quantitative: Measuring user performance and responses to obtain data on
effectiveness and efficiency.
3. Obtaining subjective information from users including:
 Qualitative: Problems, opinions and impressions given during or after a usability
evaluation.
 Quantitative: Measures of user satisfaction or perception.

Usability Models Implementation in Several Areas
32
Source: An Improved Usability Evaluation Model for Point-of-Sale Systems(Md Alamgir Kabir, Bo Han, 2016)

Investigation of Usability Factors from Ten Well-known Quality Models
33
Source: An Improved Usability Evaluation Model for Point-of-Sale Systems(Md Alamgir Kabir, Bo Han, 2016)

The Overview of ZEC(Zero Effort & Connected) UX Strategy 1.0b
40
Man Machine
Interface
Human Computer
Interface
based context
H C
Interaction
based context
Info. Architecture
based context
H C
Interaction
based context
Info. Architecture
based context
H
Interaction
based context
Info. Architecture
based context
H
Group
Society
C
Content
Service
Interaction
based context
Info. Architecture
based context
H
G
S
Interaction
based context
Info. Architecture
based context
H based
embodied
cognition
G
S
C
C
S
Connected Thing
Culture-(eco)System
Company
Interaction
based context
Info. Architecture
based context
H based
embodied
cognition
G
S
Interaction
based context
Info. Architecture
based context
HCI1.0HCI2.0!HCI21?
UI
UX1.0UX2.0?UX2.1?
ZeroEffort
UXStrategy
ZEC
UXStrategy

(출처: http://slidesha.re/1sp6mrT)

(Image source: The UX of user experience, http://slidesha.re/1qolLUN)

Experience
Internet of Thing
Connected

Experience
Internet of Thing
Connected
Design
Modeling
?

Experience
Internet of Thing
Connected
For
Design
Modeling

Experience
Internet of Thing
Connected
For
Design
Modeling
포함한 환경

Experience
Internet of Thing
Connected
Design
Modeling
?Why
포함한 환경

Internet of Thing
Connected
Change
Experience
Design
Modeling
?Why
지속가능한 행동의 변화 (습관 형성)
포함한 환경

Service
Internet of Thing
Connected
Design
Modeling
?
포함한 환경

Experience
Internet of Thing
Connected
For
Design
Modeling
Service
포함한 환경

Experience
Internet of Thing
Connected
For
Design
Modeling
Service
Touch
Point포함한 환경

Internet of Thing
Connected
Touch
Point
Service
Design
Modeling
?Why
포함한 환경

Internet of Thing
Connected
Touch
Point
Service
Design
Modeling
?Why
Change
포함한 환경

Experience
Internet of Thing
Connected
For Service
Touch
Point포함한 환경
Change

Probabilistic epigenesis(확률적 후생) by Gottlieb and Halpern(2002)
• 예정된 후생학(Predetermined epigenesis): 유전자에서 뇌구조로 그리고 뇌와 인지기능에의 변화로 일방향적인
원인 경로가 있다고 주장
• 확률적 후생학(Probabilistic epigenesis): 유전자 간에 상호작용, 뇌의 구조적인 변화, 기능을 양방향적인 것으로
간주. 양방향 상호작용이란 유전자들에 의해 행동변화가 일어날 뿐만 아니라, 어린이에게의 감각입력은 유전자
발현패턴에 변화를 가져올 수 있다는 의미 (예) 갓 태어난 아이는 다른 사람들의 얼굴을 잘 바라보게 편중되어
있는 원시적 뇌회로가 있어서(Johnson, 1991), 얼굴에 대한 어려서부터의 주의집중은 얼굴을 처리하도록 하는
시각경로에 관여하는 신경회로가 발달하게 처리함. 이런 형성과정에 깔려있는 신경해부학적 변화는 차별적
유전자 발현에 기인함
69
유전적 활동
(유전자 간의 상호작용)
신경 활동(뇌의 구조적인 변화)
개인의 발달
양방향 영향들
A systems view of psychobiological development(심리생물학 발달의 시스템 관점). Source : Adapted from Gottlieb and Halpern, 2002.
행동(기능)

진단해 보시고, 솔루션을 찾아보세요!
71

진단해 보시고, 솔루션을 찾아보세요!(cont.)
72

A와 B 중 어떤 것을 선택하시겠습니까?
73

A와 B 중 어떤 것을 선택하시겠습니까?(cont.)
74

A~F 중 하나를 고른다면?
75

A~F 중 하나를 고른다면?(cont.)
76

CTA(Call To Action)
77

A~G 중 선택한다면?
78
A
B
C
D
E
F
G

A~G 중 선택한다면?(Cont.)
79
A
B
C
D
E
F
G

어떤 의미가 있는지 설명해보십시오.
80

Zero Effort UX Strategic Framework
Zero Effort UX
Strategy Load
C+V+M=0
인지부하(Cognitive),
시각부하(Visual),
운동부하(Motor)
부하
81
“인지/시각/운동
부하와 인터페이스
복잡성을 혁신적으로
줄이고, F패턴에
부흥하며, 높은
사용품질을
내재화하는 것”
by Billy Choi
(@ILOVEHCI)

35초와 60초에
마음을 훔치지
못하는 디자인은
감성적 디자인이
아니다!
by 최병호(@ILOVEHCI)
화두 I.
Second

행동을 변화시키지
못하는 디자인은
아니다!
화두 II.
Behavior

VRIN 없는 디자인은
아니다!
* VRIN=valuable,
Rare, inimitable,
nonsubstitutable
화두 III.
VRIN

2016년에 필요한 감성적
디자인이란
다양한 UI 혁신으로
사용자(소비자)를
한 순간에
채널(터치포인트)에
몰입시키고, 감정을
움직이도록 흡인력
강하게 끌어당기는
디자인
화두 IV.
Definition

2016년에 필요한
감성적 디자인을
구현할 수 있는
방법은
시선 압류, 시선 고정,
디자인 제약
화두 V.
Methods

Exponential [ekspənenʃəl]
Exponential means growing or increasing
very rapidly.
• 점진적 변화가 아닌 급진적, 기하급수적 변화
• 즉, 기술의 진화에 따른 사회, 경제적 변화가
점진적으로 오는 것이 아니라 순식간에 급격하게 온다.
• 적은 값의 움직임(입력)으로 큰 작용(출력)을 얻을 수
있는 변화
Source: 싱귤래리티 유니버시티 글로벌 서밋

Google map’s driving mode
89
• Google Maps knows where you are going
 Depending on the time of the day, Google Maps will predict where
you are heading before you even add a destination. Using existing
addresses like ‘work’, ‘home’ and recently added addresses, Driving
Mode will be able to predict where you are heading and provide traffic
conditions and travel times for these routes. This latest feature is only
available for Android users.
 To use Driving Mode you can either add a shortcut to your home
screen or select ‘Start Driving’ from the sidebar menu in Google Maps.
• 구글의 전략
 오랜 목표: 사용자가 명령하기 전에 먼저 원하는 것을 파악하는 기기
 구글 지도와 웨이즈(Waze) 등은 이미 사용자가 출근하는지 귀가하는지를
파악
• 통찰
 User input이 사라지는 시대
 자동차의 상태에 적합한 서비스 제공의 시대 (예) 기름 상태와 저가의
주유소 정보 그리고 목적지 변경 등
 그리고 사라진 user input을 기억하는 시대 (예) 주유소로 가기 전의 최초
목적지로 복귀하는 모드 제공
Source: https://youtu.be/iCTLkDiARlU
Source: http://bit.ly/1nP8z0Q
Source: http://bit.ly/1nP8SJd

Zero Effort UX Strategic Framework(cont.)
90
Zero Effort UX
Strategy
Law of
conservation of
complexity
I.C=0%, S.C=100%
사용자 인터페이스의
복잡성(Interface
Complexity),
시스템의
복잡성(System
Complexity)
복잡성 보존의 법칙
CLI
GUI
NUI
NEST-like UI
(Deep UI)
Interface
Complexity
System
Complexity
0% 0%100%
이미지 출처: http://youtu.be/L8TkhHgkBsg
“인지/시각/운동
부하와 인터페이스
복잡성을 혁신적으로
줄이고, 사용자의
행동패턴에 부흥하며,
높은 사용품질을
내재화하는 것”
by Billy Choi
(@ILOVEHCI)

ZEC UX Strategic Framework(cont.)
ZEC* UX Strategy
(*ZEC=Zero Effort &
Connected(IoT/IoE))
UI
Connected
FFA
DAG
• Feedback
• Feedforward
• perceived
Affordances
• 도파민 시스템
(the
Dopamine
seeking
system)
• 무의식 선택적
주의
(unconscious
selective
Attention)
• 목표 가속화
효과 (Goal-
gradient
effect)
자신의 이름, 움직이는 모든 것, 우리를 쳐다보
고 있는 사람 얼굴 그림, 음식/섹스/위험 그림,
이야기, 큰 소음
100 Things Every Designer Needs to Know About People, (Susan M. Weinschenk, 2011)
91
“기본적인 사용성과
커넥티드 기반의
사용성을 충족하면서
현실에서 제공하지
못하는 차별화된
가치와 생태계를
디자인하여 구매자의
숨은 니즈에
부합하는 것”
by Billy Choi
(@ILOVEHCI)

“Online shopping can be
overwhelming. There are so many
choices and products from so
many different sources,”
“can help retailers make sense of
massive amounts of unstructured
data to improve and personalise
the online shopping experience.”
Keith Mercier, ecosystem manager of Watson
출처: http://www.iamdigitalnews.com/2016/04/14/is-fashion-ready-for-the-ai-revolution/

Source: https://www.ibm.com/blogs/commerce/2016/08/boosting-online-retail-sales-artificial-intelligence/
참조: http://www.mobilecommercedaily.com/1800flowers-unwraps-ibm-watson-powered-mobile-gift-concierge-signaling-ais-rise
• 1-800-Flowers used IBM Watson-powered digital gift
concierge uses cognitive capabilities to tailor product
suggestions for shoppers.
• Dubbed as “GWYN” (Gifts When You Need), the concierge
will engage consumers in conversation on the company’s
desktop and mobile web sites. Shoppers, rather than browse
the company’s inventory in search of the right bouquet or gift
basket, will be able to tell GWYN what they are looking for,
then select and order the product from inside the
conversational interface.

https://www.1800flowers.com/gwyn-1800flowers?cm_sp=flowers-_-homepage-_-tier3-gwym-Tgwyn

The North Face sees A.I. as a perfect fit
• "지난 20년 동안 하얀 배경에 격자 형태로 제품을 진열하는
방법으로 온라인 쇼핑을 제공했었다.
• 고객들은 이런 인터페이스 아래 제품을 찾아야 한다. 우리는
사이트 내부 검색과 탐색 기능을 개발했다. 그러나 여전히
소비자가 직접 제품을 찾아 결정해야 한다.
• 이에 오프라인 매장에서 발생할 수 있는 대화를 생각해봤다
그리고 이를 온라인에 이식할 수 있는지 조사했다. '이런 옷이
필요합니다.’ '이런 옷을 원합니다.'같은 대화들이다“
• 오프라인 직원들이 재킷 선택 시 도움을 줄 때 고객이
경험하는 것과 가장 가까운 경험을 제공할 수 있는 도구
• 중량, 보호 기능, 스타일 등 고객들의 요구를 파악하는 것은
힘든 일이다.
• "재킷 분류는 어려운 일이다. 모두 각기 다른 활동과 환경을
염두에 두고 만들어졌기 때문이다. AI는 이렇게 처리가 힘들
정도로 선택지가 많을 때 가장 강력한 도구가 되어준다.”
by Cal Bouchard, Director of E-Commerce at The North
Face
Source: http://bit.ly/1mBWZoJ
103

The North Face sees A.I. as a perfect fit(cont.)
• The North Face teamed up with IBM to use its Watson
natural-language, machine learning system as well as
software builder Fluid; it created the Expert Personal
Shopper (XPS) software that uses the Watson technology.
• The A.I.-powered online shopping assistant, which has been
12 months in the making, is live on The North Face site.
Once in the jackets and vests section, click on Shop with
IBM Watson.
• 신규 고객을 중심으로 고객들이 이 회사가 공급하고 있는
350종의 재킷 가운데 자신에게 맞는 재킷을 더 손쉽게 찾는
방법을 고안하면서 AI를 이용하기로 결정
• The North Face brand's mission of applying technology to
transform the retail experience customers can now use
natural conversation as they shop online via an intuitive,
dialog-based recommendation engine powered by Fluid
XPS and receive outerwear recommendations that are
tailored to their needs.
• XPS will ask questions about factors like location,
temperature or gender to provide a recommendation that
seeks to meet the shopper's specific usage and climate
needs.
source: http://bit.ly/1my0jAZ
Source: http://prn.to/1PVPdSn
Source: http://bit.ly/1KQrgvw
104

• A 60% click-through rate for trying product
recommendations;
• Average consumer engagement times of two minutes;
and
• Assurance from 80% of users that they would use the
platform again during the shopping experience.
• “If people are engaging with the tool, that’s a good thing.
The goal eventually is to turn that engagement into
conversion.” by Cal Bouchard, Director of E-Commerce at
The North Face
Source: http://bit.ly/1QBMz0v
105

• It’s designed to mimic the type of interaction you might
have with sales staff in-store.
• “고객들의 후기에서 드러난 사실이 있다. 가장 많은 도움을
필요로 했던 사람들이 가장 큰 도움을 받았던 것이다. 파우더
스커트와 고어텍스 등 자켓 기술에 대해서도 이야기하지
않는다. 그런 용어를 모르는 사람들이 이 시스템으로 인해
가장 도움을 많이 받았다. 반면 자켓을 좀 아는 고객들과
무엇이 필요한지 아는 고객들은 인공지능 시스템의 도움이
필요 없다는 점”
• “아주 많은 테스트를 해봐야 한다. 인공지능은 고객이 이
질문에는 긍정, 저 질문에는 부정할지 아는 의사결정
분지도가 아니다. 인공지능은 훨씬 유동적이다. 수많은
테스트를 거쳐 논리의 구멍을 찾아내야 한다. 다른
소프트웨어보다 테스트에 훨씬 시간이 많이 들어가게 된다”
by Cal Bouchard, Director of E-Commerce at The North
Face
• 현재 노스페이스는 4월 출시될 새로운 디자인 작업 중에
있는데 이는 좀 더 인터랙티브하고 좀 더 모바일 친화적일 수
있도록 설계되었다. 자켓 이면의 기술에 대해서도 더 많은
정보는 물론 관련 정보 링크, 기사, 블로그까지도 제공할 수
있게 될 전망.
Source: http://bit.ly/1QBP3Md
Source: http://bit.ly/1mBWZoJ
106

https://www.thenorthface.com/XPS

Source: http://blog.brandingbrand.com/news/why-you-need-to-engage-in-conversational-
commerce?utm_content=32652930&utm_medium=social&utm_source=twitter (2016.4.19)
“It made me feel excited, and my Operator seemed genuinely interested in what I
was looking for. She sent over a couple of initial options to get a feel for what
direction she should go. After I provided some feedback and sent over some example
images of dresses I liked, she continued to send over more suggestions tailored to
my preferences and price range.”

https://googleblog.blogspot.kr/2016/05/allo-duo-apps-messaging-video.html
Google assistant
in Allo

Source: https://www.operator.com (2016.2.16)

https://play.google.com/store/apps/details?id=com.google.android.apps.tachyon
Video call in Duo

SAP UI 1차 가이드라인
134
구분 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개인 경우 출력 프로세스
• 디폴트 기간 설정

1. 아이콘(icon)
135
화면 적용 원칙 및 분석
• 적용 원칙
1. 유관 정보 그룹핑
• 분석
1. 영역 1와 2: 그룹핑이 제대로 되어
있지 않아서 직관적인 인지 및 빠른
접근을 방해하고 있음
1
2

2. 태스크 흐름(task flow): 화면 내 태스크 흐름 I
136
• 적용 원칙
1. 필수와 선택 구별 필요
• 분석
1. 태스크를 부담 없이 빠르게
처리하기 위해서는 필수 영역과
선택 영역을 구분할 필요가 있음.
그러나 형태적으로 볼 때 영역 1, 2,
3은 특별한 구별되지 않음. Option
타이틀을 제공하는 것으로는
미약함. tone & manner 등으로
식별성을 높일 필요가 있음. 즉
필수 입력 영역만 돋보이도록
디자인해야 함
2. 옵션 영역(영역 2) 다음에 제공하는
세팅 영역(영역 3)은 옵션 영역과
동일 또는 유사하게 취급할 수
있으므로 필수적인 입력사항이라면,
세팅 영역(영역 3)을 필수
영역(영역 1)에 포함하는 것이
바람직함
1
2
3
[Asset report 조회 화면: 자산조회 –보유하고 있는 자산에 대해서 다양한
조건으로 검색하여 자산의 취득가치 및 감가상각 정보를 자산그룹 및 개별 자산
등으로 리스트로 보여주는 프로그램]

2. 태스크 흐름(task flow): 화면 내 태스크 흐름 II
137
• 적용 원칙
1. 사용 습관 지원
2. 기억보다 단서 제공
• 분석
1. Asset report는 대부분 엑셀 파일로
다운로드 받는 태스크를 수행하지만
상당히 불편하고 번거로움
2. 엑셀로 다운로드 받기 위해서는 어떤
메뉴(영역 1)에 배치되어 있는지를
불필요하게 기억해야 하고, 세부
항목명 및 위치(영역 2, 3)도
기억해야 하는 인지적 부담감을
유발시키고, 소중한 태스크 시간을
낭비시킴
3. 자연스러운 태스크 흐름으로
전환하기 위해서는 ‘엑셀로 다운로드’
항목을 영역 5에 배치하는 것이
태스크 효율성을 높이는 방안임
1
2
3
4
5
[Asset report 출력 확인 화면]
[Asset report 결과 화면]

2. 태스크 흐름(task flow): 페이지 간 태스크 흐름
138
• 적용 원칙
1. 사용 습관 지원
• 분석
1. 검색에 필요한 항목을 입력한
후(영역 1) 검색 결과를 확인(영역
2)하고, 검색에 필요한 항목을
수정하기 위해서는 다시 영역 1로
이동해야 하는 번거로움이 있음
2. 자연스러운 태스크 흐름을 위해서
영역 1와 영역 2은 통합해야 함
1
[Customer Billing Print 조회 화면: 전판비 청구 – 판매 전력요금을 해당 청구
월별로 조회하는 프로그램]
2
[Customer Billing Print 결과 화면 : 전판비 청구 – 판매 전력요금을 해당 청구
월별로 출력하는 프로그램]

3. 폼(form)
139
• 적용 원칙
1. 가로 스크롤 지양
2. 선택 정보와 미선택 정보 간 구별
3. 선택한 정보 전체 쉽게 확인
4. 영역별 직관적 식별 필요
• 분석
1. 영역별 데이터가 상당히 많다면,
영역별로 가로 스크롤과 세로
스크롤이 발생하여 화면의
복잡도가 과도하게 높아짐. 특히 각
영역별로 여러 데이터를 분산해서
선택하였다면 선택한 데이터를
통합적으로 확인하기가 어려움.
그러므로 현재의 UI 구조는 조정이
필요함
2. 영역별 식별성이 떨어짐. 영역별
타이틀이 잘 보이지 않기 때문임.
타이틀을 아이콘 영역보다 먼저
배치시키고, 타이틀 크기를 키워야
함
1
2
3
[Temporary payment clearing의 Cash journal document clearing 옵션 선택
결과 화면: 전불금 관련 프로세스-한가지 업무에 연계된 3종류의 생성 전표 확인
하여 Clearing처리 지원하는 프로그램(현금)]

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

UX & Future

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to UX & Future

Similar to UX & Future (20)

More from Billy Choi

More from Billy Choi (19)

UX & Future