problem driven goal directed design 아이폰 웹어플 리디자인

41
Problem driven Goal directed Design Hitchhiker’s guide to the UI design 한상택

Upload: sangtaek-hahn

Post on 29-Nov-2014

5.468 views

Category:

Design


3 download

DESCRIPTION

@uxcampseoul 날로먹는UI디자인방법론 발표자료입니다. 케이스스터디로 아이폰의 네이버블로그 리디자인 작업을 소개하였습니다. 퍼소나나 컨텍스츄얼 디자인같은 UCD 방법론이 낯선 분은 이재용님의 퍼소나 튜터리얼 발표자료를 먼저 보시면 좋을것 같습니다.다.http://www.slideshare.net/arangyi/persona-3323174

TRANSCRIPT

Page 1: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

Problem driven Goal directed Design

Hitchhiker’s guide to the UI design

한상택

Page 2: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

Information Design + Problem Solving + Prototyping

Pxd, Inc.

Page 3: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

User Centered Design

?User DataContextUser ValuesGoalsScenarios

User Research

Design Result

MethodGoal directed designPersonasContextual design

Page 4: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

Goal directed Design

• If achieving the user’s goal, the user will be satisfied and happy. Success.

• A goal is end condition.

• Goals motivate people to perform tasks.

About face 2.0: the essentials of interaction design‎

Alan Cooper, Robert Reimann

Page 5: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

Problem driven Goal directed Design

• A goal is the problems solved condition.

Page 6: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

Design• Understanding the user’s wants, needs, motivations, and contexts

• Understanding business, technical, and domain requirements and constraints

• Translating this knowledge into plans for artifacts whose form,content and behavior is useful, usable,and desirable, as well as economically viable and technically feasible

About face 2.0: the essentials of interaction design‎

Alan Cooper, Robert Reimann

Page 7: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

Design• Understanding the user’s wants, needs, motivations, and contexts

• Understanding business, technical, and domain requirements and constraints

• Translating this knowledge into plans for artifacts whose form,content and behavior is useful, usable,and desirable, as well as economically viable and technically feasible

• 문제를 찾고

• 그것을 해결한다

Page 8: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

좋은 디자인

사람을 행복하게 하는것

Page 9: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

행복한 가정은 모두 모습이 비슷하고,

불행한 가정은 모두 제 각각의 불행을 안고 있다.

“”

Page 10: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

행복은

불행의 부재

Page 11: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

좋은 디자인은

문제가 없는 것

Problem driven design

Page 12: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

InnovationVs.

Kaizen

Page 13: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

Local OptimumBetter but not best

Page 14: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

Innovation

Incremental, radical, and revolutionary changes in thinking, products, processes, or organizations

0 → + innovation

- → 0 improvement

△ > α innovation

△ < α improvement

Page 15: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

디자인의 적

혁신에 대한 강박

혁신은 결과

Page 16: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인
Page 17: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

Problem Diagnosis

근본 문제는 무엇인가?

• Redefine Problems

• Expand Solution domain

Page 18: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인
Page 19: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

Universial Design

누구의 문제?

• Primary Persona 일반인 넓은 좌석

• Secondary Persona 장애인 넓은 통로

Page 20: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

Diagnosis

문제는 무엇인가?

Symptom - 휠체어로 이동할 수 없는 좁은 통로

Problem Redefine – 통로 이용이 불편하다

Solution – 출입구쪽 자리를 배정해준다. 특실의 출입구 쪽 좌석을 장애인용으로 배정하여 일반요금으로 제공한다.

Page 21: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

우리는 사용자의 문제를 정말 알고있나?

Page 22: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인
Page 23: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

1.문제정의

문제정의

해결

문제해결

Instinct위험이 닥치면 바로 피한다바로 디자인 스케치 한다

문제정의와해결과정분리

Page 24: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

문제정의

누구의 문제인가?

• Positioning (target market)

• Personas (target customer)

무엇이 (가장) 문제인가?

• TOC (constraint)

• Contextual Design (task analysis)

Page 25: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

needs

Needs : actual, negative → problem

Wants : assumptive, positive → solution

“통로가 넓으면 좋겠어요”

“통로를 다니기 불편해요”

문제가 아님

Page 26: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

2. 해결

Steal it!

Design Patterns

Other Domain’s Solution (interdiscipline)

답이 안 나오면 문제를 다시 정의해본다

Page 27: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

3.반복

문제정의

해결

기존 시스템/디자인

평가/선택

Page 28: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

Recursion

• TOC

• Divide and conquer

– framework, workflow, wireframe,

information design

• Agile process

– Design, test

Page 29: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

Problem driven design

문제정의

해결

기존 시스템/디자인

평가/선택

Find needs

Redefine problem prototyping

StealDesign PatternBorrow from other domain

Page 30: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

Case study

아이폰 네이버 블로그 리디자인

http://j.mp/uxredesign

Page 31: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

진단

응급실의 ABC

Airway 기도유지

Breathing 호흡유지

Circulation 순환

Flow

Page 32: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

Flow

작업 흐름 - Information Architecture

시선 흐름 - Information Priority

동작 흐름 - Interaction

Page 33: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

목록 컨텐트

이전

다음

iPod’s Hierarchical Structure

Page 34: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

모든 글을 순차적으로 읽나?목록을 랜덤하게 찾아보나?

목록 컨텐트

Page 35: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

progressive disclosure

Page 36: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

Random Access - Link rich

Page 37: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

Information Priority

나는 네이버 블로그를 보고 있다는게 제일 중요한가?누구의 블로그인지 보다 내블로그로 가는게 중요한가?

Page 38: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

사실 누가 덧글을 썼는지 관심없다. 주인말고는.숫자의 나열은 언제인지 잘 알려주지 못한다.

Page 39: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

모바일 사용 환경

책상 앞에 앉아서가 아니라 지하철을 타고가면서,걸으면서 읽어봤어?

Page 40: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

Smart Scrollbar

Page 41: Problem Driven Goal Directed Design 아이폰 웹어플 리디자인

twitter.com/taekie

고맙습니다.