ux design

USER EXPERIENCE DESIGNERPARK’S PORTFOLIO

CHALLENGE

UI and UX Design is CHALLENGE of Critical thinking, Communicating and Creating.

CONTENTS

E-BOOK PROJECT “Singles” Experience Design New Interaction ofSmart Printer

산학 project 수업 project 수업 project

Teamwork Teamwork Teamwork

UX/UIProductGraphic

UX/UIProductGraphic

UX/UIProductGraphic

CDAK

Information Archtecture &User Interaction

Seoul International Design Competition

Graphic Design

수업 project 공모전 finalist 공모전 finalist

Individual work Individual work Individual work

UX/UIProductGraphic

UX/UIProductGraphic

UX/UIProductGraphic

E-BOOK PROJECT 졸업연구, 산학프로젝트

: 책과 사람의 소통을 위한 메뉴얼

HANDONG GLOBAL U N I V E R S I T Y

Role: Team Managing, In-depth user interview, Framework making, 3d modeling, GUI/UI

Explaination: E-ink 기반의 Ebook device를 다양한 방법론으로 조사 분석 하여 Design Direction을 완성하고, Direction을 기반으로 한 새로운 concept을 제안하는 프로젝트이다.

Transformer시간과 공간 활용을 극대화. 4가지 화면 멀티태스킹

마법같은 화면구성. 매직메뉴버튼(M)과 자유이동 인터랙션

독자의, 독자에 의한, 독자를 위한 책. 콰트로의 첫장열기

사용자가 원하는 만큼의 책장 넘기기. 콰트로 페이지 컨트롤러

특별한 당신을 위한 새로운 POSITIONING

Quartre시간과 공간 활용을 극대화. 4가지 화면 멀티태스킹

마법같은 화면구성. 매직메뉴버튼(M)과 자유이동 인터랙션

독자의, 독자에 의한, 독자를 위한 책. 콰트로의 첫장열기

사용자가 원하는 만큼의 책장 넘기기. 콰트로 페이지 컨트롤러

Analysis

2-1. Methodology

C

A

D

B

START

Benchmarking, Usability Test

In-depth Interview & Video ProtocolReader’s Object(book) Observation

Best Practice

Best PracticeExpert Aid

4. UT

3. Persona

6. Direction 7. Concept

1. Heuristic & Pre-research

2. Framework

5. Consolidation

KeywordExtracter

Design Process

A type

B type

2. 공

간 활

용하

기

싱글

족은

생활

공간

의 효

율적

활용

이 필

요하

다.

?

“Single 족”

Busy for average singles

Prefer own place

Prefer instant food

About 6 million people

“Who wants better life?”

Selection for target

자유

주제

인만

큼 다

양한

종류

의 사

람들

과 그

특징

을

리서

치해

보았

다.

“Single 족의

식습

관

Sequence은 어

떠한

가?”

음식

조리

, 음식

처리

, 음식

보관

Single

족의

Nee

ds

Fra

mew

ork

Target Research

Web-based Research

News, Heuristic Evaluation

User Test Implementation

User Observation, Interview 등을

실행

WORK

HOME

Web

Newspaper

카레

single?

Storing leftover

Throwing away leftover

Warming instant food

Eating food

카레

카레

카레

카레

카레

카레

trash can

싱글

족은

시간

을

좀더

효율

적으

로

사용

하고

싶다

.

User Observation

Directi

ng Ta

rget

타겟

설정

및 프

로젝

트 방

향 설

정

1

Goal S

etting

Single

족의

식습

관 S

eque

nce 지

원2

Issue

s Extr

actio

n

Single

족의

특징

에 대

한 is

sue 추

출3

User T

est

Inter

view, U

ser O

bser

vatio

n..4

Single Experience Design:What is good for Singles?

Role: In-depth user research, Concept generationMaking Framework, 3d modeling, GUI/UI

Explaination: 기업이 최근 주목하는 싱글족의 식습관을 Support할 수 있는 제품을 선정하고, 싱글족의 Experience에 맞추어 설계된 Methodology를 이행하고 최종 Concept을 제안한다.사용자 조사를 진행하고 이를 통해 도출된 Data를 토대로 Direction을 설정하고 Final Concept을 제안한다.


4. 합

리적

인 소

비

싱글

족은

합리

적인

소비

를 원

한다

.

1. 시

간 절

약하

기

싱글

족은

시간

을

좀더

효율

적으

로

사용

하고

싶다

.

3. 규

칙적

인 식

사

싱글

족은

합리

적인

소비

를 원

한다

.

B type

C type

Directi

on S

et

최종

제품

선정

및 컨

셉 설

정6

Final Concept

Single족의

생활

패턴

을 고

려한

Refrigerator

Single족의

식사

와 재

미를

동시

에. E-Ranger

Single족의

분리

수거

를 도

와줄

Compressor

Methodology setting

어떤

방법

을 통

하여

싱글

족의

식생

활 sequence를

파악

할 것

인가

?

Ideation

추출

된 Data를

토대

로싱

글족

의

식생

활을

지원

해 줄

아이

디어

내기

User Observation

Survey Research Best Practice

Raw Data

Data 분류

Data 분석

1a

bc

?

!

Persona

Better environment for singles

group a

group b

group c

????

????

!!!!

!!!!

3D Modeling

Flash Animation

x y

z

Idea Sketch

Refrigerator

Final Modeling

E-range Compressor

Fl

Refrigerator

E-Range Compressor

Conso

lidati

on

수집

된 d

ata 정

리 및

분석

5

Realiza

tion

3D M

odeli

ng, S

imula

tion, G

UI7

New Interaction ofSmart Printer

HeuristicEvaluation

Pre-research

Usability Framework

Building Research Framework

Mind mapWeb research 1 2Critical issues3

Domain Properties3 45

1 Web research

Mind map2

3 Critical issues

Domain Properties3 Heuristic Evaluation4

설치 환경설정 프린트 복사 고장 스캔 이동

유지보수, 카트리지 교체

Pre-research에서 나온 Data를 토대로 복합기의 Sequence에 따른 특성을 뽑아낸다.

Usability Framework5

Routinely-made error

Direction, positional error

Naming, Metaphor error

Natural Mapping error

Phase perception

Configuration

5~6명의 프린터 유저들로 하여금 출력, 스캔,복사의 과정에 있어서 연상되는 것들에 관하여mind-mapping을 하는 시간을 갖고 이를 통하여cirtical issue를 추출하였다.

4명의 팀원들이 복합기 사용경험이 있지만시장동향 및 디자인 동향에 대해 파악하고 Research 방향을 수립할 수 있는 Data를모으는 작업을 수행하였다.

Research를 통해서 Domain(출력, 스캔, 복사)의속성에 따라 중요한 issue를 도출하여 정리 및 통합을 하였다. 이는 Research Framework의 기본이 될 작업이었다.

자체적으로 제품 및 interaction Service에 대해 평가하는 시간을갖고 이를 Data화 하였다. 이 자료를 분석하여 통/폐합하여Usability Framework를 짜기 위한 전초단계를 완성시킨다.

프린트 - 출력시 진동, 통장 사본 및 증명 사진 출력복사 - 책의 안쪽 부분은 복사 시 어둡게 나옴스캔 - 스캔 후 원본 빼는 것을 잊음환경 - 컴퓨터와 프린터 기 사이의 색상 차가 존재설치 - 드라이버 다운받기 귀찮음고장 - 빨간 불 나올 때 어떻게 할까?

예 }

반복적이고 자주 일어나지만 많은 행동단계를

요하는 Work 에 반응하는 사용자의 행태 조사

출력물의 방향과 위치가 사용자의 의도와 맞지 않은

사용행태를 조사하고 일치하지 않는 이유를 알아본다.

의도한 결과물을 얻기 위해 얼마나 쉽게

환경설정을 할 수 있는 지 관찰한다.

장비 상태, 고장 진행에 대한 정보를 사용자가

쉽게 인지하고 대응할 수 있는 지 관찰한다.

사용자의 패턴화된 행동이 복합기의 물리적

레이아웃(버튼, LCD 등)과 Natural Mapping

을 이루는 지 알아본다.

Label 및 Pictogram 등이 올바른지 알아본다.

Role: In-depth user research, Concept generationMaking Framework, 3d modeling, GUI/UI

Explaination: 복합기 제품을 선정하여 User Experience를 위해 설계된 Methodology의 과정에 따라 사용자 조사를 진행하고 이를 통해 도출된 Data를 토대로 Direction을 설정하고 Final Concept을 제안한다.


User Research Design Implementation:)Persona Selection6

Planning UT Method6Usability Test 7 Desgin Strategy9 Ideation0 Final Concept1

Persona Selection6

Planning UT Method6

Ideation0

Design Strategy9

Usability Test7

Analyzing UT Data8

각 분야를 대표할 수 있는 User Testee를 선정하기 위해Persona 기준을 만들고 그에 가장 적합한 인물을 Contact하여 UT를 실행가능하도록 하였다.

What are

the tasks?

Scenario

writing

Task Room

Setting

Task

Simulation

Feedback &

Modification

실험자책상에 앉아서 태스크 수행평소에 사용하는 환경과 비슷한 분위기를 제공편안한 마음으로 실험에 임할 수 있게 함

평가자_2실험자 조작 상황의 전체적인 모습을전면에서 촬영함

평가자_3전체적인 실험을 진행하며 과업을 실험자에게 전달함

평가자_1실험자가 말하는 내용이나 질문을

현장에서 랩탑에 기록함

숨은 조력자실험자가 interview에

적극적으로 임할 수 있게분위기 조성

Muliti-function Printer

주어진 Task를 실행하면서 사용자가 범하는 오류등을 체크하고 촬영하여 작업 모습을 남겼다.

User Interaction

Form-Factor

Value 1. Consequential Prediction System

ex 1. 급지 및 스캔시 출력 방향, 위치 예측ex 2. 메뉴 선택에 따른 결과 예측

Value 2. PUI에 적합한 interface 방식 제공하기

ex 1. 데이터의 양(Continuous/Discrete)에 따라 그에 적합한 인터페이스 제안ex 2. 요구되는 조작의 세밀도에 부합하는 인터페이스 제안

Value 3. Right Time, Right Information

ex 1. 현재 진행 중인 Task에 대한 시각, 청각적 피드백 제공ex 2. 활성화 상실 오류를 범하는 곳에 대한 due 제공ex3. 설정된 상태에 대한 정보를 실시간으로 제공

원인에 대한 분류 Task 오류 및 특이사항 원인 대안

현재 상태에 대한 알림성 두껍고 큰/얇고 가벼운 책 스캔

현재 스캔중이라는 시각적인 메시지가 있었지만 스캔이 아직 덜 끝났음에도 프린터기가 조용하여 다끝난줄 알고 원본을 제거하여 오류발생

스캔은 집중을 요하는 work이 아니기때문에 신호를 지각할 수 있는 범위가한정되어(시선 돌림) 현재 상태를 명확히 인지하지 못한다.

신호를 인지할 수 있는 수단이 줄어들어도 인지할 수 있도록 두 종류 이상의Feedback을 준다. (시각적 신호와 청각적 신호를 동시에 제공)

현재 상태에 대한 알림성 한 장에 두 페이지 인쇄

사용자가 사진 인화지로 설정되어있던 것을 보지 못하고 원래 의도했던 A4가 아닌 사진 인화지 모드인 채로 출력을 함

복합기에서는 일반적으로 사용하는 용지와 특별히 사용하는 용지의 구분 없이 이전 세팅값만을 기억하여 제공하는 반면, 사용자는 어떠한 일을 할 때work가 바뀌게 되면 그 단계만을 인지하고 생각하기 때문에 복합기의 세팅값과 사용자가 인지하는 세팅값간의Gap이 발생한다.

용지 상태의 표시가 다른 메뉴와 비슷해 Sensory Memory에 인식되기 어렵다.

현재 상태(세팅값)에 대한 Feedback을줄 수 있는 방안 고려(용지함 부분이빛나는 램프)

현재 상태(용지 종류 등)를 상시 표시해 주는 창 고려

인지하기 쉬운 naming 부분 확대 복사부분확대 모드말고,백분율 모드로 잘못 들어감

사용자가 크기 조절에 대한 유사성을근거로 메뉴를 선택할 때, cognitivenaming을 제대로 주지 않아 오류를 범하게 한다.

대상과 행위 모두를 포괄할 수 있는,인지하기 쉬운 네이밍을 해 준다.

인지하기 쉬운 naming 전용지 인쇄용지 설정을 위해 "미리보기"메뉴대신에 "사진편집"메뉴로 들어갔다.

Naming이 하위 메뉴들을 포괄하지 못하여 선택 후 결과를 예상하는데 어려움이 있다.

현재 위치에 대한 명확한 인지가 어렵다.

복합기가 제시하는 Conceptual Model(Sequence를 고려 : 미리보기-용지설정)과 Mental Model( 속성의 유사성을고려 : 사진편집-용지설정)이 일치하지않는다.

하위 메뉴를 포괄할 수 있는 네이밍을다시 해 준다

네비게이션을 넣어 주어 현재 위치가어디쯤인지 알게 해 준다

속성의 유사성을 고려하여 복합기가제시하는 Conceptual Model과 사용자의 Mental Model을 일치시킬 수 있는네이밍을 다시 해 준다

자연스러운 대응성 신분증 방향을 맞추어 복사 신분증을 스캐너 벽에 붙여서 놓음앞 뒤 복사를 할 때 위치 파악이 용이하도록 행동함

x

Analyzing Data8

대학생 - 시험문제 출력자 유형

프리랜서 - 고품질 출력자 유형

직장인 - 보고서 무한 출력자 유형

평가자 1의 입장에서 UT 촬영 장면

Final Concept1

:)

“Menu 구조 최적화를 위해Information Architecture 수정”

Information Archtecture Restructuring &User Interaction Proposal

Role: INDIVIDUAL WORKGUI/UI, Interview, 3d Modeling

Explanation: 캐논 Powershot 제품을 선정하여 제품의 IA구조를 파악하고 최적화시킨다. 이를 통해 캐논 Powershot을 Redesign하고, Powershot을 Promotion할 수 있는 GUI/UI를 제안한다.


Redesign된 Cannon Powershot과재구성된 Information Architecture로Promotion User Interface 디자인

Design Process IA Analyzation IA Restructuring Product Redesign User Interface Design Realization

Intro Page: Redesign된 Powershot의 360도 회전 장면 묘사 Old & New: 기존의 제품과 Redesign된 제품 비교

Main Features: 주요 디자인된 부분에 대한 새로운 기능 설명 Scene: 상황 별 가상 사용장면을 보여주어 사용자에게 사용의 실제감 제공

FaucetWATER-SAVING

2010 Seoul International Design Competition : Water-Saving Faucet (FINALIST)

Role: INDIVIDUAL WORK. Ideation, 3d Modeling

Explanation: 지구 온난화가 화두가 되고 있는 오늘날, 물을 아껴쓰는 것은 대단히 중요하다. 이를 집에서 의지를 갖고 실천하지 않아도 자동적으로 설정된 만큼의 양을 물을 쓰도록 하는 수도꼭지를 디자인하였다.

2010 SEOUL DESIGNFAIR

Graphic Design:The North face (FINALIST)

Role: INDIVIDUAL WORK

Explanation: 아웃도어의 Active한 모션을 그래픽으로 표현해 본 작품이다.3가지 작품 모두 등산을 주제로 하고 있다.

NEVER STOP EXPLORING

Poster:독서 캠페인

Role: INDIVIDUAL WORK

Explanation: 독서 활성화를위한 포스터 프로젝트 .기와를 모티브로 삼았다.

CDAK :Communication Design Association of Korea

Challenge & Competition 2005년, The North Face 그래픽 디자인 공모전 입선

2006년, 커뮤니케이션 디자인 공모전 특선2009년, 충북 아이디어 챌린지 정책 공모전 우수상

2010년, 서울국제 디자인 공모전 제품 부문 특선

Challenge & Experience아이리버 UI 디자인 팀 인턴

2년 간의 군 생활(의정부 카투사)예비 대학 새내기를 위한 스키캠프 기획

고등학생을 위한 한동 리더십 캠프 기획 총무자원봉사(독거노인 수발, 저임금 자녀 무상 과외)

아이리버 E-book 디자인 제안 산학 프로젝트

Challenge & FieldUX/UI 디자인

제품/시각 디자인마케팅/전략기획

Specialty행정병 출신으로 각종 컴퓨터 관련 업무 능통

농구, 축구, 족구, 야구, 탁구, 그리고 요리

“목표를 세우고, 언제까지나 도전할 열정을 가진 젊은 스물 일곱 청년 박의준 입니다.”

About PARK

Par

k U

i Jun

UX

Des

igne

rgr

adua

ted

HG

U 1

1S

eoul

, Kor

ea

CHALLENGE CONTINUESPark’s Portfolio, 2010

82) [email protected]

Documents

ux design