UX 디자인 – II User Experience Design II

UX 디자인 – II

User Experience Design II

소프트웨어학과 HCI 프로그래밍 강좌

인터랙션 디자인

 인터랙션 디자인 (interaction design)

 사람과 제품 사이에 일어나는 상호작용의 방식과 구제적인 절차를 설계 하는 것

 사람이 제품을 사용하는 행동(action)과 반응(reaction) 방식, 그 사이의 상호작용(interaction) 방식과 절차를 설계하는 것

http://jennmking.com/category/third-year/dissertation-work/

인터랙션 디자인

 인터랙션 디자인 접근방법

 기능 중심 디자인 (feature centered design)

• 시스템에 요구되는 기능의 구현에 집중

 사용자 중심 디자인 (User Centered Design)

• 디자인의 전 과정에 사용자를 참여시켜서 검증 수행

 목표 지향 디자인 (Goal-Directed Design)

• 사용자의 목표를 찾고 그것을 중심으로 디자인

 천재적 디자인 (Genius Design)

• 디자이너 개인의 뛰어난 능력에 기반한 디자인

 직관적 디자인 (Intuitive Design)

• 디자이너의 직관과 통찰력을 통해 새로운 제품을 디자인

기능 중심 디자인

 기능 중심 디자인 (feature centered design)

 제품과 시스템의 기능에 중점을 두고 진행되는 디자인 방법

 시스템이나 기기에 필요한 기능 요구사항을 정의하고 세부 기능을 정의 한 다음 개발 진행

• 사용자의 목표와 전체적인 경험에 대해서 고민없이 기능만 강조해서 설계

• cf. 기능점수(function point) : S/W 기능의 정량화

 적용 사례

• 관공서 프로젝트와 같은 SI(시스템 통합) 프로젝트

• 폭포수 형태의 순차적 개발 방법론을 적용 개발되는 웹 프로젝트

• 모바일 제품 설계

http://bahns.net/5673462

사용자 중심 디자인

 사용자 중심 디자인 (User Centered Design)

 디자인의 전 과정에 최종 사용자(end user)가 원하고 필요로 하는 것과 사용자로 인해 생기는 제약을 반영하는 제품 디자인 방법

 디자인 단계별로 실제 사용자들을 참여시켜서 설계와 검증 진행

1) 실제 제품을 사용하는 최종 사용자에 집중 2) 요구 사항과 디자인을 사용자와 함께 검증

3) 디자인, 프로토타입(prototype, 시제품) 제작, 개발을 반복적으로 수행 4) 전체적인 사용자 경험 고려

http://bahns.net/5673459

사용자 중심 디자인

 사용자 중심 디자인 (User Centered Design)

http://bahns.net/5673459

목표 지향 디자인

 목표 지향 디자인 (Goal-Directed Design)

 제품을 설계 할 때 그것을 사용하는 사용자가 이루고자 하는 목표를 찾 고, 그 목표를 달성할 수 있게 하는 디자인 방식

 사용자를 직접 참여시키는 것 보다 그들의 목표를 찾아내고 그 목표에 집중

 사용자의 목표를 찾고, 사용자와 그 목표를 형상화한 모델로 퍼소나

(persona)를 만들고, 그 모델에 맞는 사용 시나리오를 만드는 과정으로 진행

 앨런 쿠퍼(Alan Cooper)의 목표지향 디자인 단계

http://bahns.net/5673458 범위정의

업무점검 인터뷰/관찰

Persona 작성

작업흐름 정리 맥락시나리오 디자인 요소 정의 디자인 구조 설계 Key path(행동순서) 검증 시나리오

세부사항설계 설계수정

구조설계 개발지원

퍼소나

 퍼소나 (persona, 페르소나)

 어떤 제품 혹은 서비스를 사용할 만한 목표 인구 집단 안에 있는 다양한 사용자 유형들을 대표하는 가상의 인물

What do they wear?

What do they eat?

What do they listen to?

Where do they live?

What do they love?

What do they hate?

(from Dan Saffer, Designing for Interaction, 89-119)

맥락 시나리오

 맥락 시나리오 (context scenario)

 퍼소나가 제품을 사용하는 일상 기록

 사용자가 생활 속에서 제품을 어떻게 이용하는지, 제품에서 중요하게 여기 는 점이 무엇인지 나타나야 함

 사용자가 제품을 이용해서 자신의 목 표를 어떻게 달성하는지 표현

 제품에 요구되는 정보, 기능, 맥락 요 구사항 파악 및 구현할 내용 결정에 도움

http://www.devx.com/architect/Article/42270/0/page/3

퍼소나

 퍼소나 구성 단계

 L. Nielsen

천재적 디자인(Genius Design)

 천재적 디자인 (Genius Design)

 디자이너 개인이 뛰어난 재능을 발휘하여 자신의 결정에 따라 전체 디 자인을 진행하는 디자인 방법

 한 명의 천재 디자이너가 모든 의사 결정

 혁신적인 제품을 만들어 낼 수 있지만 실패에 대한 위험 부담

1인 개발 시대를 다시 불러온 애플의 AppStore

직관적 디자인(Intuitive Design)

 직관적 디자인 (Intuitive Design)

 디자이너의 직관과 통찰력을 중심으로 제품을 개발하는 디자인 방식

 이전에 없던 전혀 새로운 제품을 만들거나 기존에 있던 제품을 새로운 시각으로 재구성 할 때 적용

 예. Apple

• 다양한 미팅을 통해 아이디어를 완성

• 10:3:1 전략

– 먼저 10개의 창조적인 디자인을 만들고, 3개로 줄이고, 다시 1개로 줄여 최종 제 품

• 디자인 과정의 모호성을 없애기 위해 정확한 모형을 만들고, 디자인 과정에 대한 공유도 적극적으로 진행

오리지널 iPod(2001.10)과 세대별 iPod 디자인의 변화

http://bahns.net/5673460

사용자 조사 기법

 사용자 조사 (user research)

 사용자의 생각과 의견을 읽어내기 위한 조사

 사용성 테스트 (usability test)

 사용자에게 제품을 사용하게 해서 제품이 얼마나 사용하기 편한지 확인

 약식 사용성 테스트 (informal usability test)

• 주변 사람을 대상 (3~5명), 간단하게 제품 테스트

• 저수준 프로토타입, 간단한 화면공유 프로그램 활용

• 아이디어 구체화 초기 효과적

 연구실 사용성 테스트

• 연구실에서 사용자의 행동을 측정하는 장치를 갖추고 측정된 수치 분석

• 예. 아이 트랙킹(eye tracking)

http://upload.wikimedia.org/wikipedia/commons/transcoded/b/bc/Exploring-Eye-Movements-in-Patients-with-Glaucoma-When-Viewing-a-Driving-Scene- pone.0009710.s001.ogv/Exploring-Eye-Movements-in-Patients-with-Glaucoma-When-Viewing-a-Driving-Scene-pone.0009710.s001.ogv.480p.webm

사용자 조사 기법

 휴리스틱 검사 (heuristic evaluation, expert review)

 전문가(3~5명)를 통해 제품을 평가

 널리 사용되어온 디자인 원칙(휴리스틱, 경험적 지식)을 이용 제품의 문 제점 평가

 프로토타입 제작 전의 아이디어 도출단계의 평가도 가능

 실제 사용자와 전문가의 관점이 동일하지만은 않음

사용자 조사 기법

 사용자 인터뷰 (user interview)

 사용자에게 다양한 질문을 해서 생각과 태도, 숨겨진 요구사항 파악

 소수 사용자에 대해 깊이 있는 정보 수집 가능

 구조화 인터뷰

• 사전에 정해진 항목에 대해서만 질문

• 자유로운 응답, 세부 내용 파악을 위한 추가질문 지양

 비구조화 인터뷰

• 전해진 순서없이 인터뷰

• 깊이있고 다양한 자료 수집가능, 결과분석 어려움

 반구조화 인터뷰

• 미리 준비한 자료를 이용 질문

• 필요시 추가 질문

사용자 조사 기법

 설문조사 (survey)

 구조화된 질문지를 통해 많은 사용자의 생각 수집

 어떤 질문을 해야 할지 분명하지 않은 단계에서는, 인터뷰, 포커스 그룹 등의 조사 후 구체적 설문조사 진행

 저수준 프로토타이핑 (low-fidelity prototyping)

 설계 초기 단계에 간단한 프로토타입을 만들어 제품 검증

 종이 프로토타입

• 종이 스케치 형태 (paper prototyping)

 개념 검증용 프로토타입

• 개발하려는 제품이 기술적으로 가능하지 확인

http://arielwaldman.com/projects/interaction-design/

사용자 조사 기법

 퍼소나 (persona)

 제품의 다양한 사용자 타입을 대표하는 전형적인 가상의 사용자

 사용자 프로필에 인구통계적 특징(나이, 성별, 인종 등), 생활 습관, 제품 의 사용방식과 태도 등을 추가해서 구체적인 한 개인 표현

 제품의 사용자를 명확한 사용자 몇 명으로 바꿔서 생각 가능

 구체적인 사용자에 초점을 맞춘 제품 개발 가능

http://limina-ao.com/services/research.html

사용자 조사 기법

 카드 소팅 (card sorting)

 사람들이 객체를 어떻게 그룹화하는지 파악해서 그것을 정보 구조 설계 에 반영하는 방법

 제품 구조를 표현하는 단어나 그림이 표시된 카드를 나눠주고, 그것을 분류하게 해서 사람들이 디자이너의 설계와 부합하는지 파악

 폐쇄형 카드 소팅 (closed card sorting)

• 정보 구조의 요소를 결정한 다음, 결정된 요소의 카드 사용

 개방형 카드 소팅 (open card sorting)

• 사람들이 직접 정보 구조요소를 기입하도록 하는 방법

http://www.uxmatters.com/mt/archives/2011/06/comparing

-user-research-methods-for-information-architecture.php

사용자 조사 기법

 포커스 그룹 (focus group, 초점 집단)

 함께 모여서 인터뷰를 진행하는 사용자 집단 (보통 6~10명)

 포커스 그룹 인터뷰(focus group interview, FGI) 형태에서 사용

 제품에 대한 다양한 주제에 대하 1~2시간 이야기하고 토의

 제품 데모나 프로토타입 제시 후 반응 수집 또는 특정과제 수행 요구

http://www.nvivotraining.eu/focus-group

사용자 조사 기법

 필드 스터디 (field study)

 사람들이 생활하는 환경에 찾아가 사람의 행동을 관찰하고 다양한 정보 를 수집하는 조사 방법

 맥락 질문법 (contextual inquiry)

• 보통 두 시간 정도의 일대일 관찰 진행

• 사용자의 일상적인 행동을 관찰하고, 구체적인 관심사를 직접 물어 보고 행동의 의미와 의도 파악

 참여 관찰법 (participant observation)

• 조사자가 연구 대상 집단에 구성원으로 참여해서 직접 그 집단을 관 찰하고 기록

• 민족지학(ethnography)에서 주로 이용

http://limina-ao.com/services/research.html

인터랙션 기반 설계

 심상 모형 (mental model)

 사람들이 자기 자신, 다른 사람, 환경, 상호작용하는 사물들에 대해 갖는 모형

 제품의 동작방식 등을 해석하려고 머릿속에 만드는 모형

• 예. 자판기 – 일반적인 자판기 동작 박식을 머릿속에 모형화

 복잡한 시스템을 사용하려면, 자신의 지식, 경험, 정보 등을 이용해 시스 템을 대략적으로 이해한 다음, 시행착오를 거쳐 정확한 사용법 습득

 제품을 사용할 때 겉으로 보이는 제품의 인터페이스와 인터페이스를 조 작했을 때의 행위 결과를 자각하고 해석해서 적절한 심성 모형 구성

http://boxesandarrows.com/paradigm-dissonance-a-significant-factor-in-design-and-business-problems/

심상 모형

 심상모형의 예

http://blog.naver.com/cevinfocus/80199955863

 화장품 (naver.com의 분류)

심상 모형

심상 모형

 심상 모형의 예

인터넷 자료

심상 모형

 자동차 (naver.com의 분류)

개념 모형

 디자이너의 개념 모형 (designer’s conceptual model)

 디자이너가 제공하는 시스템의 구조, 동작 방식 등을 나타내는 모형

 디자이너가 어떤 개념 모델을 만들어서 사용자에게 전달하는지에 따라 서 구현된 사이트의 사용성의 결정

 개념 모형을 사람들이 이해하는 방식으로 쉽게 구성

 사용자가 정확한 개념 모형을 모르더라도 원하는 결과를 얻을 수 있도 록 구성

 디자이너의 개념 모형에 맞게 사용자 심상 모형을 만들 것을 강요하지 않고, 사용자가 쉽게 이해할 수 있는 개념 모형 제공

개념 모형

 개념 모형의 정의

 사람이 시스템 등의 개념적인 것을 이해하려고 머릿속에 만든 모형

• 심상모형의 한 부분

• 개념 모형 : 디자이너 또는 전문가의 머릿속에 있는 시스템에 대한 정리된 개념

• 심상모형 : 일반 사용자 머릿속에 있는 모호한 개념 모형

 개념 모형 = 심상 모형

 디자이너의 심상 모형을 구현한 결과물

디자인 모형 (개념 모형)

시스템 이미지

사용자 모형 (심상 모형) 구현 모형

메타포

 메타포 (metaphor, 은유)

 어떤 대상을 직접 관련되지 않은 다른 대상을 이용해서 표현한 것

 효과적인 메타포 적용방법

• 의미를 같게 만든다

• 표현을 같게 만든다

• 메타포의 한계에 갇히지 않도록 주의한다

ibooks

인터랙션 디자인

 인터랙션 디자인 기본 원칙

 적절한 개념 모형을 제공하라

 알기쉬운 메타포를 제공하라

 중요한 것을 드러내라

• 중요한 것을 보이게 만들어라

• 상황에 적합한 핵심 정보만 노출하라

Concorde 조정석 A380 조정석

인터랙션 구조 설계

 인터랙션 구조설계 기본 원칙

 사용할 정보의 보존 영역을 결정하라

• 머릿속, 스마트폰, 온라인 클라우드

 복잡한 작업구조를 단순화하라

 기능과 선택 가능한 행동의 수를 줄여라

 표준과 관례(convention)를 이용하라

 일관성과 신뢰성을 제공하라

• 일관성(consistency)

– 제품과 서비스는 일관된 방식으로 동작, 언제나 일정한 결과 출력

• 신뢰성(reliability)

– 제품과 서비스를 믿고 사용할 수 있게 만드는 것

인터랙션 표현 설계

 인터랙션 표현 설계 기본 원칙

 행동을 유도할 수 있는 단서를 제공하라

• 안내문이 필요하면 디자인에 문제가 있는 것이다 (affordance 활용)

• 적절한 시그니파이어(signifier)를 제공하라

 적절한 피드백(feedback)을 제공하라

 올바른 대응관계를 만들어라

• 제품의 기능과 버튼 배치

• 인터페이스 요소와 그 동작

• 피드백 신호와 신호의 의미 대응

 제약과 제한의 힘을 활용하라

• 제약을 두면 제품이 단순화된다

• 선택을 제한하면 제품이 단순화된다

 어포던스 (affordance)

 한 개체가 행동할 수 있게 허용하는 사물 또는 환경이 가지는 특성

 행동 유도성(인지된 어포던스, perceived affordance)

• 행위자의 행동을 유도하는 사물 또는 환경의 인지된 특성

http://paaralan.blogspot.kr/2010/09/affordance-and-educational-games.html

 시그니파이어(signifier)

 사람의 행동을 유도하기 위해서 사용하는 다양한 단서 – Donald Norman

 일종의 지시자, 의미 전달자로 물리적 세상과 사회적 세상에서 의미있 게 해석될 수 있는 표시

 피드백 (feedback)

 원인-결과 순환고리에서 과거의 정보가 현재의 같은 현상에 영향을 미 치고, 현재의 정보가 다시 미래의 같은 현상에 영향을 미치는 과정

 역할

• 확인, 경고, 오류 알림, 특별한 상황 알림, 작업의 진척과 시간 추정, 학습을 위한 알림, 상태 알림, 기대관리

 좋은 피드백

• 빠른 피드백 (빠른 것처럼 보이는 피드백 – MS 윈도우 부팅과정)

• 섬세하고 다양한 피드백

• 명확한 피드백

http://www.blogging4jobs.com/hr/how-are-you-getting-employee-feedback/

현업의 UX 관심 : NHN NEXT

http://www.nhnnext.org/

 참고도서