서울시 마포구 상암동 누리꿈스퀘어 연구개발타워 1111호

오래가는 UX 디자인 (Book Study) Jellycoaster Inc.

Part 1. UX 디자인

UX디자인의 개념 Interface: 서로 다른 두가지의 주제나 시스템, 성분이 만날때 그 두요소 사이에 생기는 경계면

UI(User Interface): 사용자와 시스템이 만나는 면

인터렉션: 사용자가 인터페이스를 통해 시스템을 이용하는 일련의 상호작용

UX(User Experience): 제품을 사용할때 마주하는 다양한 경험 -좁은의미: 다양한 사용자 인터페이스를 사용하는 경험과 이를 활용하는 인터렉션 과정의 경험, 제품, 서비스, 콘텐츠를 사용하면서 느끼는 서비스경험과 콘텐츠 경험 -넓은 의미: 제품사용과 직접 관련되지 않는 다양한 경험 ex) 특정브랜드에 대한 인상, 제품광고에서 느껴지는 분위기, 제품의 포장과 진열방식, 고객지원 경험

가렛의 경험디자인 정의

:경험디자인은

인간의 관여와 참여를 목표로 하고

인간의 경험을 성과로 하는 모든것에 관한 디자인을 의미한다.

경험디자인은 매질/매체와 무관하게 또는 여러 매질/매체를

이용해서 이루어진다. (제시 제임스 가렛의 2009년 어댑티브 패스 UX 위크 발표 인용)

경험디자인의 4가지 차원

:지각, 행동, 인지, 감성 1. 지각: 사람이 감각기관을 통해서 여러 자극을 받아들여 사물이나 그것의 변화를 알아내는 것 2. 행동: 지각된 자극에 반응해서 사람들은 행동하게 된다. (인터렉션 디자인이 이런 지각에 따른 사람의 행동을 설계하는 분야다.) 3. 인지: 사물을 알아보고 기억하며 추리를 통해 문제를 해결하는 정신적인 과정 4. 감성: 수준 높은 사용자 경험 디자인을 위해서 많은 연구가 필요함

사용자가 만족하는 제품에 필요한 특성들 -유연한 인터랙션을 제공해야 한다

-쉽게 정보를 입력할 수 있어야 한다.

-빠르게 처리결과를 제공해야 한다.

-일을 처리하는 흐름이 직관적이어야 한다.

-정보와 기능에 대해서 쉽게 이해할 수 있어야한다.

-쉽고 빠르게 사용방법을 학습할 수 있어야한다.

-정확한 정보를 올바른 방법으로 제공해야 한다.

-재미있는 인터페이스 형태를 제공할 수 있어야 한다.

UX 디자인 관련 연구분야

-인터랙션 디자인

-인포메이션 아키텍처

-사용성

-인간 컴퓨터 상호작용 (HCI: Human Cumputer Interaction)

-인간공학

-UI디자인

제임스 가렛의 "사용자 경험의 5계층"

:표면, 윤곽, 구조, 범위, 전략 -표면: 이미지와 텍스트 등 전체요소 배치, 시각적 마무리 -윤곽: 버튼과 탭, 이미지, 텍스트 블록 등에 대한 배치 -구조: 인터페이스의 추상적인 구조와 형태를 정의 -범위: 제품에 제공할 기능, 작업, 콘텐츠의 범위를 정의 -전략: 제품을 만들 때 사업자와 사용자가 추구하는 목표 정의

시대별 사용자 경험의 변화

기계가 최고의 가치였던 메인프레임 시대

컴퓨터로 처리할 수 있는지가 중요했던 PC도입기

사람이 중요해지는 pc발전기, 성숙기

시대별 PC 기술의 발전

Part 2. 인터랙션 디자인

인터랙션 디자인의 7가지 접근방법 -시스템 디자인: 시스템의 전체적인 동작구조에 맞춰서 디자인한다. -기능 중심 디자인: 시스템에 요청되는 기능의 구현에 집중한다. -사용자 중심 디자인: 전 과정에 사용자의 반응을 반영해서 디자인한다. -목표 지향 디자인: 사용자의 목표를 찾고 그것을 중심으로 디자인한다. -직관적 디자인: 디자이너의 직관과 통찰력을 기반으로 새로운 제품을 디자인한다. -천재적 디자인: 디자이너 개인의 뛰어난 능력에 기반을 두고 디자인한다. -연구 중심 디자인: 인간과 기계의 특성을 연구하고, 그연구에 기반을 두고 디자인한다.

인터랙션 디자인 사례

서울 지하철 1회용 승차권의 다양한 문제

서울 지하철 1회용 승차권의 다양한 문제 -전자식 승차권 도입, 보증금을 낸 다음 환급받는 방식

보증금이 필요한 지하철 이용 개념모형 step1. 보증금 준비 step2. 승차권구매 step3. 개표 step4. 지하철 이용 step5. 나가는 개표 step6. 보증금 환불 step7. 목적지 이동 *1회용 제품의 보증금이라는 개념이 추가되어 문제가 발생!

서울 지하철 1회용 승차권의 다양한 문제 수정되어야 할 개념모형!

-1회용 제품은 사서 한번쓰면 끝이다.

-무료승차권은 돈을 내지 않는다.

-1회용제품은 재사용되지 않는다.

-충전형 카드와 모양이 똑같다. -> 모양이 바뀌어야 한다

-보증금 환급기 모양이 발매기와 구분되지 않는다.

-완료시점에 대한 인지적 고려가 필요하다.

-실수를 막는 디자인 필요

(ex:대구와 대전등에서 사용하는 토큰형 승차권)

인터랙션 기반 설계를 위해! 1.적절한 개념모형을 제시하라 -심성모형: 우리가 제품의 동작 방식등을 해석하려고 머릿속에 만드는 모형 -개념모형: 심성모형의 한 부분으로 사람이 시스템과 제품 등의 개념을 이해하려고 머릿속에 만드는 모형 ex) 쉬운 개념모형: 아이팟, 아이폰, 아이패드 2.알기쉬운 메타포를 제시하라 -메타포: 어떤 대상을 직접 관련되지 않은 다른 대상을 이용해서 표현한 것 ex) 메타포의 적절한 사용 예: Drawing Pad, iBooks 3.중요한 것을 드러내라 ex) 음료 자판기의 인터페이스, 가장 중요한 요소가 눈에 보인다. -동전 투입구의 눈에띄는 위치, 판매 상품샘플 제공, 품절상품 품절표시

인터랙션 표현 설계를 위해! 1.행동을 유도하는 단서를 제시하라 적절한 시그니파이어를 제공하라 ex) 벽면 가득한 메모지- 안내문이 없어도 사람들은 메모지를 자연스레 붙인다. 2.적절한 피드백을 제시하라 -피드백의 역할 : 확인-경고-오류알림-특별한 상황 알림-작업의 진척과 시간 추정- 학습을 위한 알림-상태알림 ex) 공중전화의 피드백 방식: 다양한 시,청각 피드백으로 시스템의 상태 파악 3.올바른 대응관계를 만들어라 ex) iOS에서 제공하는 행동과 반응의 자연스러운 대응. 행동과 반응의 대응이 자연스러우면 한 번만 봐도 사용법을 배울 수 있다. 3.제약과 제한의 힘을 활용하라 ex) 돌기와 홈, 제한된 블록 수로 설명서 없이 쉽게 조립할 수 있는 레고 블록

서울시 마포구 상암동 누리꿈스퀘어 연구개발타워 1111호

끝!

Jellycoaster Inc.