스파크스퀘어 UX 강의

SESSION 1

스타트업을 위한
UX 디자인 평가 방법론
Experience Designer 김동환

Tuesday, September 4, 12

김동환
• Carnegie Mellon University
Human Computer Interaction 석사졸업

• 서울대학교 사회과학대학원 박사과정
Computational Journalism 연구중

• 전, LG전자의 스마트폰 UX 디자이너
• 전, Wireless Generation의
Information Architect (IA 디자인)

• TEDxSeoul, 3회 UXCampSeoul 오거나이저
• 데브멘토, 디노마드, 마이크임팩트 등 강연활동

facebook.com/UXstorytelling facebook.com/social.experience.strategy


UX 디자인 이해하기


인지과학의 대가 도널드 노먼 (Donald Norman)

“내가 사용자 경험이라는 용어를 만든 이유는 휴먼 인터페이스와 사용성이라
는 말이 너무 좁은 의미였기 때문입니다. 나는 사람의 경험에 대한 모든 측면을
포함하기를 원했는데 그건 제품디자인, 그래픽, 인터페이스 디자인을 포함하는
일이었습니다 ...”


사용자 경험 스케치의 저자 마이크로소프트의 빌 벅스톤 (Bill Buxton)

“궁극적으로, 우리가 만드는 제품들이 개인과 사회, 문화적인 경험을 불
러오고 가치와 영향력을 가진 제품을 만들기 위한 것이 아니라 팔기위해
만드는 것이라고 생각한다면 우리는 사람들을 속이고 있는 것입니다. “


아답티브 패스 공동설립자 제시 게러트 (Jesse James Garrett)

“사용자 경험이란 제품이 어떻게 동작하고 쓰이는지를 말합니다. 긍정적인
사용자 경험은 사용자와 제품을 만든 회사의 목표가 만났을때 생기는 것입
니다. 사용성은 만족스런 사용자 경험의 한 요소는 될 수 있지만 사용성 하
나로 사용자에게 긍정적인 사용자 경험을 만들어낼 수는 없습니다.”


...
om
Fr
ch
at
W

Jesse Garrett
UX Week 2009 | The State of User Experience

http://vimeo.com/6952223


by Jesse James Garrett

“사용자 경험(UX)이란
사용자가 시스템, 서비스, 제품을 이용하면서 접하게 되
는 모든 측면과 산업 디자인, 소프트웨어 공학, 심리학,
마케팅, 경영학 등의 관점에서 고객을 매료시키고 가치
를 높이기 위한 총체적인 접근을 말한다.”


추상적

분석 통합
(Analysis) (Synthesis)
인사이트 발굴 아이디어 발상

이해하기 만들기

리서치 프로토타입
컨텍스트와 사용자에 컨셉 구체화 및 개발
대한 이해

구체적

from Kaiser-IDEO


추상적

분석 통합
Survey


Journal 리서치 프로토타입
대한 이해

Contextual Inquiry 구체적

from Kaiser-IDEO


Persona Journey Map

추상적

분석 통합


대한 이해

구체적

from Kaiser-IDEO


Participatory Design

추상적
Afﬁnity Diagram

분석 통합
인사이트 발굴 아이디어 발상 Collage


대한 이해

구체적

from Kaiser-IDEO


추상적

분석 통합


대한 이해

구체적 Storyboard Paper Prototyping


Persona Journey Map Participatory Design

추상적
Afﬁnity Diagram

분석 통합
(Analysis) (Synthesis) Collage
Survey


Journal
대한 이해

Contextual Inquiry


UX 평가하기


Information Architecture의 저자 Peter Morville의 정의

피터 모빌의 유명한 ‘허니콤’ 디자인으로 UX를 다양한 측면(facet)에서 정의했다. 왼쪽은 UX을 측
정하는 정의이고 오른쪽은 2007년 개정판에서 UX를 전략적으로 접근하는 방법에 대해 정의하고
있다. 만들어진 제품이나 서비스의 UX에 대한 검증으로 많이 쓰이고 있다.


Heuristic Evaluation
• Jakob Neilsen이 고안 (http://useit.com)
• 5명 내외의 ‘전문가’들이 (주관적으로) User Interface를 평가하는 방법
• 발견된 문제점의 중요성을 바탕으로 개선

Strength
• 짧은 시간에 다량의 문제점을 발견해낼 수 있음
• 펜과 종이, 제품 혹은 프로토타입만으로 평가 가능

Weakness
• UI 전문가의 스킬이 중요
• 모든 문제가 발견된다고 가정하기 힘드며 사용성 이외에 감성적인 측면을 평가하기 힘듬


10가지 휴리스틱

1. 시스템 상태의 가시성 (Visibility of system status)
2. 시스템과 실제 환경과의 연결성 (Match between system and the real world)
3. 사용자가 제어하고 자율성 부여 (User control and freedom)
4. 일관성과 표준성 (Consistency and Standards)
5. 오류가 발생하기 전 예방 (Error prevention)
6. 기억에 의존하지 않게 보여주기 (Recognition rather than recall)
7. 유연성과 사용 효율성 (Flexibility and eﬃciency of use)
8. 미적이고 간결한 디자인 (Aesthetic and minimalist design)
9. 사용자가 에러를 인식하고 진단하고 벗어나게 도와주기 (Help users recognize,
diagnose, and recover from errors)
10. 도움말 제공하기 (Help and document)


발견한 문제

위반한 휴리스틱의 이름

문제의 발생경로와 상황에 대한 설명

심각성 정도(0~5점)와 빈도수, 임팩트, 지속성

솔루션
다른 문제점들과의 연관성


Survey
DO
짧고 이해하기 쉬운 문장으로 질문을 만든다.
한 질문에는 하나의 이슈만 포함시킨다.
사용자에게 익숙한 용어를 이용한다.
명확한 의미의 단어를 사용해서 다양한 해석을 방지한다.
중립적인 단어와 문구를 사용한다.
민감한 개인적인 질문들은 꼭 필요할 경우만 한다.

DON’T
다수의 사용자에게 동일한 질문을 수행하는 조사 방법으로 실제 자신의 의견이 아닌 것을 선택하게 강요하지 않아야 한다.
기존 제품/서비스에 대한 사용자의 호불호나 만족여부를 정 선택을 한쪽 방향으로 유도하는 질문을 하지 않아야 한다.
량적으로 확인가능하다. 주의할점은, 질문이 분명한 상태에 잘못된 전제를 기반으로 질문을 만들지 않아야 한다.
서만 효과가 있으며 (포커스 그룹 필요), 사용자의 행동을 사용자에게 미래를 예측하도록 질문하지 않아야 한다.
정확히 예측할 수 없다는 점이다. 서비스 개선의 우선순위 전문 용어, 속어, 약어와 유행어를 사용하지 않아야 한다.
를 선별하는데에는 도움이 되지 않을 수 있다. 감정에 호소하는 단어들을 이용하지 않아야 한다


‘UX 전문가’를 채용해야 하나 ...


필요한건 DESIGN THINKING


Design - Led

Expert mindset Participatory mindset
(사용자를 조사대상자 (사용자를 파트너의 관점으
의 관점으로 바라본다) 로 바라본다)

Research - Led

Explicit
명확

Observable
관찰

Tacit and Latent
유추


what people ... Methodologies

say • Literacture review
SAY
think • Interviews
do • Shadowings
DO
use • Video Ethnography
dream
• Journals
know MAKE
• Collages
feel


Design Thinking
People are creative in using tools to express their experiences

for feelings...

for thinking...


Design Thinking

for remembering...

for dreaming...


Design Thinking

for telling stories ...


Design Thinking

for playing with tools...


Design Thinking
1. Design thinking은 모두를 위한 것임을 이해하라
- 디자인이 제품이 아닌 ‘사람’을 위한 것이기 때문
- 태스크라는 틀에서 벗어나서 생각하는게 필요
- 팀원들이 비주얼하게 생각할 수 있게 유도
2. 풀어야하는 문제를 이해하고 정의하라
- 사람에게 가장 자연스러운 방식인 스토리를 이용하면 오래 기억한다
- 사람들이 직접 스토리를 말할 수 있게 유도한다
3. 프로토타입이 시나리오처럼 흘러갈 수 있도록 개량하라
- 팀내외의 사람들이 스토리를 알 수 있게 만든다
- 벽면을 사용해 시나리오를 전달한다

Persona Journey Map Participatory Design

추상적
Afﬁnity Diagram

분석 통합
Collage
Survey


Journal
대한 이해

Contextual Inquiry


Persona


Persona
Everybody Likes this car?

+

+

=


Persona Continued ...


퍼소나를 만드는 10단계

1. 사용자 찾기
2. 가설 만들기
3. 가설 입증하기 (데이터 모으기)
4. 가설(데이터) 속의 패턴 찾기
5. 퍼소나 만들기
6. 상황 정의하기
7. 상황 입증 및 믿기
8. 조직속으로 퍼소나 전파하기
9. 시나리오 만들기
10. 지속적으로 업데이트 하기


Sarah is a 30 year old teacher who lives in Seattle.
She's unmarried by in a long-term relationship of
two years. She meets about once per month to
cook with her friends to share stories, play games,
and explore new foods. Before they get together,
Sarah and her friends usually pick a theme for the
food at the next party.
End Goals
Sarah's end goals for cooking in a social context
are to:
◦ Experiment with new foods
◦ Make cooking fun
◦ Share recipe ideas with others
◦ Impress others with her cooking and creativity

Life Goals
Sarah's long-term life goals are to grow her
friendships, share stories and help other learn.
This last goal applies to her career as a teacher
but also indicates her approach to cooking and
her friendships.


Collage

+ =

• 사람들로 하여금 자신의 아이디어를 ‘시각적으로’ 표현하게 만든다.
• 사람들이 이미지와 단어를 왜 골랐는지 설명하게 함으로서 자신의 생각과 결정의 이유를 드러나게 한다.
• 모더레이터는 사람들이 자신의 경험을 바탕으로 스토리를 만들어 얘기할때 제품이 자신에게 무엇을 해주었으면 좋겠는
지를 말할 수 있도록 유도한다.


콜라지를 만들어 스토리텔링을 실험해보는 시간


정리

Persona Moodboard Collage


SESSION 2

스타트업을 위한
애자일 린 UX 방법론
Experience Designer 김동환


AGILE & LEAN 방법론의 소개


Waterfall
Requirements

Design

Development

Testing

Maintenance


Iterative
Requirements

Design
Preparation

Release
Develop

Test


Iterative
Requirements

Design
Preparation

Release ?
Develop

Test


Agile & Lean UX의 부상

• 기술평준화로 인해 더이상 기술적 제한이 미치는 영향이 적어짐
• 모바일 앱/웹의 등장으로 잦은 테스팅, 업데이트가 필요해짐
• 기존 워터폴 방식으로는 검증에 시간이 오래걸려 실패비용 증가
• 많아지는 문서들로 복잡해진 비즈니스 환경에서 관리가 힘들어짐


Agile


Agile

사용자의 이해?
퍼소나?
아이디어 도출?
컨셉발굴?


Lean


Lean UX Mantra

• 빠르다 QUICK
• 비주얼하다 VISUAL
• 협동적이다 COLLABORATIVE
• 지속적이다 CONTINUOUS


Lean UX Principles
1. 협동(Collaboration)을 통한 문제 해결

• 디자이너, 개발자, 기획자가 문제를 ‘같이’ 푸는게 중요
• 팀에게 솔루션을 주는게 아니라 ‘문제’를 주어 솔루션을 찾아나감
• 정확히 어떤 문제를 풀어야되는지 알 수 있다 (Frame the problem)
• 산출물의 퀄리티보다 팀이 만드는 결과(솔루션)에 집중할 것


협동을 통한 문제해결. Build cross-functional team.


Lean UX Principles
2. 사용자와의 접점을 최대한 만들기/유지하기

• 사용자를 자주 접하고, 가능하면 사무실로 불러온다
• 매주 2~3명씩 간단하게 사용자를 조사하는 방법도 있다
• 현재 출시된 서비스 이외에도 적용 예정인 기능들도 테스트해본다
• 회사의 모두에게 ‘내가 사용자니까 아는데...’, ‘사용자는 대부분 우리
서비스를 나처럼 쓰고는 해’ 라는 식의 잘못된 가정을 없앤다

• 사용자를 대변하는 ‘퍼소나’를 만들고 유지해나간다


퍼소나는 공감도구이다. Build empathy with your team.


Lean UX Principles
3. 스케치하기

• 디자이너 뿐만이 아니라 개발자와 비즈니스 관계자도 같이 그려야함
• 팀내외부의 사람들의 즉각적인 이해를 불러올 수 있다
• 워크플로우를 만들어 유저 시나리오를 만든다
• 재미로, 비효율적인 시간이 아니라 사진도 남기고, 포스트잇으로 메모
도 남기며 팀워킹을 최대한 활용한다


Lean UX Principles
4. 프로토타입 만들기

• 레벨에 맞는 프로토타입 선정 (Low to High ﬁdelity)
• 최대한 빨리 만들어서 컨셉을 현실로 만들 것
• 사용자가 서비스에 느끼는 ‘Desirability’를 빠른 시간내에 검증
• 종이로 하는 프로토타이핑은 저렴한 비용으로 높은 효과를 낼 수 있음
• 서비스의 개발 상태에 따라 플래시나 디바이스에 올려서 사용자가 어
떻게 인터렉트 하는지도 살펴볼 수 있음


“일반적으로, 프로그래밍 코드를 작성하기 전에 수정을 할 경
우 개발이 종료될 때 까지 기다리는 경우보다 10배가량 비용
이 적게 든다고 추정된다.”

제이콥 닐슨


CARRIER 3G 10:00 AM

Accounts tbisaacs

Search Timeline

@


CARRIER 3G 10:00 AM

Accounts tbisaacs New Tweet

Search Timeline

axbomhyperlink
I must say, I love wireframing in 1 hour
#keynotekungfu http://uxa.se/kkfu -
2 more pages, then oﬀ to #blonski

annettepriest
prototyping for iPhone and about to
compare Mockapp.com with 1 hour
Keynotekungfu.com. Should be an
interesting battle.

gldnspud
Verdict: http://keynotekungfu.com is 1 hour
AWESOME. Thank you @tbisaacs!!!

@


CARRIER 3G 10:00 AM

1 of 20  

axbom
@axbom

I must say, I love
wireframing in
#keynotekungfu http://
uxa.se/kkfu - 2 more
pages, then oﬀ to #blonski

TweetDeck 10/6/10 3:45 AM


iPad 10:00 AM

My Books Categories

PROMO IMAGE

My Spiritual Journey The Brave
Dali Lama & Soﬁa Stril-rever Nicholas Evans
IMAGE Biographies & Memoirs IMAGE Fiction & Literature

$9.99 $9.99

Our Kind of Traitor The Last Hero
John le Carre Rick Riordan
IMAGE Fiction & Literature IMAGE Children’s Fiction

$9.99 $9.99

The Last Boy Late, Late at Night
Jane Leavy Rick Springﬁeld
IMAGE Biographies & Memoirs IMAGE Biographies & Memoirs

$9.99 $9.99


$9.99 $9.99


iPad 10:00 AM

My Books Categories

Categories

Featured PROMO IMAGE

Classics

Nonﬁction


$9.99 $9.99

Our Kind of Traitor The Last Hero
John le Carre Rick Riordan
IMAGE Fiction & Literature IMAGE Children’s Fiction

$9.99 $9.99

The Last Boy Late, Late at Night
Jane Leavy Rick Springﬁeld
IMAGE Biographies & Memoirs IMAGE Biographies & Memoirs

$9.99 $9.99


$9.99 $9.99


Paper Prototype
Paper Prototype을 만들어 보는 시간


Paper Prototype
테스트해볼 수 있는 영역들

• Concept - 사용자들이 key concept을 이해할까?
• 용어 - 사용자들이 UI 속의 용어들을 이해할까?
• 네비게이션 - 서비스의 흐름이 사용자들이 기대했던 흐름일까?
• 콘텐츠 - 적당한 레벨의 정보를 전달하고 있는가?
• 페이지 레이아웃 - 콘텐츠가 사용자가 기대한대로 배열되어 있는가?
• 기능 - 다른 어떤 기능이 추가될 수 있을까?

테스트가 힘든 부분들은 기다리는 시간, 스크롤, 줌, look & feel


Paper Prototype
유저 시나리오 만들기

• 시나리오는 퍼소나의 목표(Goal)를 바탕으로 만들 것
• 서비스의 성공에 가장 중요한 요소를 포함하도록 만들 것
• 너무 넓거나 좁은 범위로 만들지말것
• 유한하고 예측가능한 범위내의 솔루션을 제공할 것
• 태스크의 성공여부를 사용자가 알 수 있게 만들 것


Paper Prototype
예) 맛집 찾는 서비스

• 퍼소나 - 20대 여성인 김미진. 학생이며 친구들과 맛집에서 음식 사진을
주로 공유. 호기심 많은 성격으로 안가본 레스토랑도 후기를 뒤져서라도
가보는 성격. 서울의 모든 맛집을 다 가보고 싶어한다.
• 경쟁 서비스는 윙스푼.
• 서비스의 주 목적 - 사용자들이 주변에 특별히 알고 있는 레스토랑이 없거
나, 안가본 레스토랑을 가보고 싶어할때 쉽고 빠르게 레스토랑을 추천해주
는 서비스
• 시나리오 - 김미진은 오늘 저녁 삼성역에서 친구들과 저녁 약속이 있다. 특
별히 가본 레스토랑이 있는건 아니지만, 코엑스 안의 평이한 음식점은 가
고싶지 않다. 삼성역 주변의 식당들 중에서 너무 비싸지않고 패스트푸드나
체인점이 아닌 식당을 찾아서 친구들에게 알려주려 한다.


Lean UX Principles
5. 스타일 가이드를 만들기

• 디지털화된 스타일 가이드를 만들 것
• 스타일 가이드는 프로젝트를 거치며 점점 보완되고 늘어나게 한다
• 디자이너 뿐만이 아니라 개발자의 이해도 돕는다
• 프로토타입의 빠른 제작을 돕게된다


Style Guide
• Live
• 예전에는 PDF형식이었으나, Live 스타일 가이드는 HTML을 바탕으로 애플리케이
션의 일부이자 제품 개발과 함께 같이 업데이트되어 언제나 up-to-date 하다.

• Semantic
• 대부분의 스타일 가이드가 ‘왜’를 설명해주지 못하는데, semantic 스타일 가이드는
패턴(색, 폰트, 라인스타일), 패턴의 이름, 사용 방법, 패턴을 모아 조합하는 법을 포
함한다

• Test driven
• 서비스의 실제 스타일을 나타내기 때문에 서비스의 디자인을 미리 점검해볼 수 있는
기회가 된다. 실제 피처로 구현되기전 스타일 가이드에서 제대로 동작하는 패턴을 만
들어둘 수 있다.


Style Guide


Pattern library


정리

Sketch Paper Prototype Live Style Guide


감사합니다


스파크스퀘어 UX 강의

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 스파크스퀘어 UX 강의

Similar to 스파크스퀘어 UX 강의 (20)

스파크스퀘어 UX 강의