ux & future

UX & Future

2016Billy(최병호)/[email protected]

중앙대학교 교수

홍익대학교 영상대학원(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

Challenge I


수전증 & 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/

Challenge II


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

Challenge III


새로운 스타일의 볼링 & 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/

Challenge IV


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 developmentthat aims to make interactive systems more usable by focusing on the use of

the systemand applying human factors/ergonomicsand 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 responsesresulting 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 MachineInterface

Human Computer

Interface based context

H CInteraction

based context

Info. Architecture based context

H CInteraction

based context


HInteraction

based context


HGroup

Society

CContent

Service

Interaction based context


HGS



H based embodied cognition

GS

CCSConnected Thing

Culture-(eco)System

Company



H based embodied cognition

GS



HCI

1.0

HCI

2.0!

HCI

21?

UI

UX 1

.0U

X 2

.0?

UX 2

.1?

Zer

o E

ffort

U

X S

trat

egy

ZEC

UX S

trat

egy

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

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

Internet of Thing

Internet of ThingConnected

Experience


Experience


DesignModeling?

Experience


For

DesignModeling

Experience


For

DesignModeling

포함한 환경

Experience


DesignModeling?Why

포함한 환경


Change

ExperienceDesignModeling?Why

지속가능한 행동의 변화 (습관 형성)

포함한 환경

Service


DesignModeling?

포함한 환경

Experience


For

DesignModeling

Service

포함한 환경

Experience


For

DesignModeling

Service

Touch Point포함한 환경

Internet of ThingConnectedTouch Point

ServiceDesignModeling?Why

포함한 환경

Internet of ThingConnectedTouch Point

ServiceDesignModeling?Why

Change지속가능한 행동의 변화 (습관 형성)

포함한 환경

Experience


For

DesignModeling

Service


Experience


For Service


Change지속가능한 행동의 변화 (습관 형성)

Business Modeling


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.

행동(기능)

Usability Engineering


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

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)

Emotional Design

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

화두 I. Second

행동을 변화시키지못하는 디자인은감성적 디자인이아니다!by 최병호(@ILOVEHCI)

화두 II. Behavior

VRIN 없는 디자인은감성적 디자인이아니다!by 최병호(@ILOVEHCI)

* VRIN=valuable, Rare, inimitable, nonsubstitutable

화두 III. VRIN

2016년에 필요한 감성적디자인이란

다양한 UI 혁신으로사용자(소비자)를한 순간에채널(터치포인트)에몰입시키고, 감정을움직이도록 흡인력강하게 끌어당기는디자인by 최병호(@ILOVEHCI)

화두 IV. Definition

2016년에 필요한감성적 디자인을구현할 수 있는방법은

시선 압류, 시선 고정, 디자인 제약by 최병호(@ILOVEHCI)

화두 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

“인지/시각/운동부하와 인터페이스복잡성을 혁신적으로줄이고, 사용자의행동패턴에 부흥하며, 높은 사용품질을내재화하는 것”



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

“기본적인 사용성과커넥티드 기반의사용성을 충족하면서현실에서 제공하지못하는 차별화된가치와 생태계를디자인하여 구매자의숨은 니즈에부합하는 것”


“Online shopping can be overwhelming. There are so manychoices and products from so many different sources,”

“can help retailers make sense of massive amounts of unstructured data to improve and personalisethe 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 FaceSource: 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 Watsonnatural-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 FaceSource: 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

http://msg.ai/#features

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

https://www.operator.com/

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

Case Study


SAP UI 1차 가이드라인

134

구분 No. UI 가이드라인 사례

Information ArchitectureSystem

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. 필수와 선택 구별 필요2. 유관 정보 그룹핑

• 분석1. 태스크를 부담 없이 빠르게

처리하기 위해서는 필수 영역과선택 영역을 구분할 필요가 있음. 그러나 형태적으로 볼 때 영역 1, 2, 3은 특별한 구별되지 않음. Option 타이틀을 제공하는 것으로는미약함. tone & manner 등으로식별성을 높일 필요가 있음. 즉필수 입력 영역만 돋보이도록디자인해야 함

2. 옵션 영역(영역 2) 다음에 제공하는세팅 영역(영역 3)은 옵션 영역과동일 또는 유사하게 취급할 수있으므로 필수적인 입력사항이라면, 세팅 영역(영역 3)을 필수영역(영역 1)에 포함하는 것이바람직함

1

2

3

[Asset report 조회 화면: 자산조회 –보유하고 있는 자산에 대해서 다양한조건으로 검색하여 자산의 취득가치 및 감가상각 정보를 자산그룹 및 개별 자산등으로 리스트로 보여주는 프로그램]


2. 태스크 흐름(task flow): 화면 내 태스크 흐름 II

137


• 적용 원칙1. 사용 습관 지원2. 기억보다 단서 제공3. 유관 정보 그룹핑

• 분석1. Asset report는 대부분 엑셀 파일로

다운로드 받는 태스크를 수행하지만상당히 불편하고 번거로움

2. 엑셀로 다운로드 받기 위해서는 어떤메뉴(영역 1)에 배치되어 있는지를불필요하게 기억해야 하고, 세부항목명 및 위치(영역 2, 3)도기억해야 하는 인지적 부담감을유발시키고, 소중한 태스크 시간을낭비시킴

3. 자연스러운 태스크 흐름으로전환하기 위해서는 ‘엑셀로 다운로드’ 항목을 영역 5에 배치하는 것이태스크 효율성을 높이는 방안임

1

23

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처리 지원하는 프로그램(현금)]

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