SESSION 1                  스타트업을 위한                  UX 디자인 평가 방법론                  Experience Designer 김동환Tuesday, Septem...
김동환                                                                                     • Carnegie Mellon University      ...
UX 디자인 이해하기Tuesday, September 4, 12
인지과학의 대가 도널드 노먼 (Donald Norman)           “내가 사용자 경험이라는 용어를 만든 이유는 휴먼 인터페이스와 사용성이라           는 말이 너무 좁은 의미였기 때문입니다. 나는 사람의...
사용자 경험 스케치의 저자 마이크로소프트의 빌 벅스톤 (Bill Buxton)           “궁극적으로, 우리가 만드는 제품들이 개인과 사회, 문화적인 경험을 불           러오고 가치와 영향력을 가진 제품...
아답티브 패스 공동설립자 제시 게러트 (Jesse James Garrett)                           “사용자 경험이란 제품이 어떻게 동작하고 쓰이는지를 말합니다. 긍정적인              ...
...                      om                    Fr                ch            at           W                             ...
by Jesse James GarrettTuesday, September 4, 12
“사용자 경험(UX)이란                           사용자가 시스템, 서비스, 제품을 이용하면서 접하게 되                           는 모든 측면과 산업 디자인, 소프트웨어 공학...
Tuesday, September 4, 12
추상적                                     분석                 통합                                  (Analysis)         (Synthes...
추상적                                     분석                 통합                                  (Analysis)         (Synthes...
Persona              Journey Map                                                      추상적                                 ...
Participatory Design                                               추상적                                                    ...
추상적                                     분석                 통합                                  (Analysis)         (Synthes...
Persona              Journey Map                                              Participatory Design                        ...
UX 평가하기Tuesday, September 4, 12
Information Architecture의 저자 Peter Morville의 정의         피터 모빌의 유명한 ‘허니콤’ 디자인으로 UX를 다양한 측면(facet)에서 정의했다. 왼쪽은 UX을 측        ...
Heuristic Evaluation             • Jakob Neilsen이 고안 (http://useit.com)             • 5명 내외의 ‘전문가’들이 (주관적으로) User Interfac...
Heuristic Evaluation             10가지 휴리스틱             1. 시스템 상태의 가시성 (Visibility of system status)             2. 시스템과 실제...
Heuristic Evaluation                           발견한 문제                           위반한 휴리스틱의 이름                           문제의...
Heuristic EvaluationTuesday, September 4, 12
Survey                                          DO                                          짧고 이해하기 쉬운 문장으로 질문을 만든다.      ...
‘UX 전문가’를 채용해야 하나 ...Tuesday, September 4, 12
필요한건 DESIGN THINKINGTuesday, September 4, 12
Design - Led       Expert mindset                       Participatory mindset   (사용자를 조사대상자                              (...
Explicit                           명확                           Observable                           관찰                   ...
what people ...            Methodologies                            say            • Literacture review                   ...
Tuesday, September 4, 12
Tuesday, September 4, 12
Tuesday, September 4, 12
Tuesday, September 4, 12
Tuesday, September 4, 12
Design Thinking                      People are creative in using tools to express their experiences                      ...
Design Thinking                      People are creative in using tools to express their experiences                      ...
Design Thinking                      People are creative in using tools to express their experiences                      ...
Design Thinking                      People are creative in using tools to express their experiences                      ...
Tuesday, September 4, 12
Design Thinking          1. Design thinking은 모두를 위한 것임을 이해하라                - 디자인이 제품이 아닌 ‘사람’을 위한 것이기 때문                -...
Persona              Journey Map                                              Participatory Design                        ...
PersonaTuesday, September 4, 12
Persona                                    Everybody Likes this car?                            +                         ...
Persona Continued ...Tuesday, September 4, 12
Persona Continued ...Tuesday, September 4, 12
Persona Continued ...Tuesday, September 4, 12
Persona Continued ...Tuesday, September 4, 12
Persona Continued ...Tuesday, September 4, 12
퍼소나를 만드는 10단계                           1. 사용자 찾기                           2. 가설 만들기                           3. 가설 입증하기...
Tuesday, September 4, 12
Tuesday, September 4, 12
Sarah is a 30 year old teacher who lives in Seattle.      Shes unmarried by in a long-term relationship of      two years....
Persona Continued ...Tuesday, September 4, 12
Collage                           +                  =       • 사람들로 하여금 자신의 아이디어를 ‘시각적으로’ 표현하게 만든다.       • 사람들이 이미지와 단어를 ...
Tuesday, September 4, 12
Tuesday, September 4, 12
Tuesday, September 4, 12
Tuesday, September 4, 12
Tuesday, September 4, 12
콜라지를 만들어 스토리텔링을 실험해보는 시간Tuesday, September 4, 12
정리                    Persona   Moodboard   CollageTuesday, September 4, 12
SESSION 2                  스타트업을 위한                  애자일 린 UX 방법론                  Experience Designer 김동환Tuesday, Septemb...
AGILE & LEAN 방법론의 소개Tuesday, September 4, 12
Waterfall                           Requirements                                          Design                          ...
Waterfall                           Requirements                                          Design                          ...
Iterative                              Requirements                                             Design            Preparat...
Iterative                               Requirements                                              Design            Prepar...
Agile & Lean UX의 부상             • 기술평준화로 인해 더이상 기술적 제한이 미치는 영향이 적어짐             • 모바일 앱/웹의 등장으로 잦은 테스팅, 업데이트가 필요해짐        ...
AgileTuesday, September 4, 12
Agile          사용자의 이해?            퍼소나?          아이디어 도출?           컨셉발굴?Tuesday, September 4, 12
LeanTuesday, September 4, 12
Tuesday, September 4, 12
Lean UX Mantra             • 빠르다 QUICK             • 비주얼하다 VISUAL             • 협동적이다 COLLABORATIVE             • 지속적이다 CO...
Lean UX Principles             1. 협동(Collaboration)을 통한 문제 해결             • 디자이너, 개발자, 기획자가 문제를 ‘같이’ 푸는게 중요             • ...
협동을 통한 문제해결. Build cross-functional team.Tuesday, September 4, 12
Lean UX Principles             2. 사용자와의 접점을 최대한 만들기/유지하기             • 사용자를 자주 접하고, 가능하면 사무실로 불러온다             • 매주 2~3명씩 ...
퍼소나는 공감도구이다. Build empathy with your team.Tuesday, September 4, 12
Tuesday, September 4, 12
Lean UX Principles             3. 스케치하기             • 디자이너 뿐만이 아니라 개발자와 비즈니스 관계자도 같이 그려야함             • 팀내외부의 사람들의 즉각적인 이해...
Tuesday, September 4, 12
Tuesday, September 4, 12
Tuesday, September 4, 12
Tuesday, September 4, 12
Tuesday, September 4, 12
Tuesday, September 4, 12
Tuesday, September 4, 12
Tuesday, September 4, 12
Tuesday, September 4, 12
Tuesday, September 4, 12
Lean UX Principles             4. 프로토타입 만들기             • 레벨에 맞는 프로토타입 선정 (Low to High fidelity)             • 최대한 빨리 만들어서 ...
“일반적으로, 프로그래밍 코드를 작성하기 전에 수정을 할 경             우 개발이 종료될 때 까지 기다리는 경우보다 10배가량 비용             이 적게 든다고 추정된다.”               ...
Tuesday, September 4, 12
Tuesday, September 4, 12
Tuesday, September 4, 12
CARRIER 3G         10:00 AM                           Accounts       tbisaacs                            Search Timeline  ...
CARRIER 3G          10:00 AM                           Accounts          tbisaacs               New Tweet                 ...
CARRIER 3G      10:00 AM                                            1 of 20                                        axbom...
iPad                                             10:00 AM                              My Books                  Categorie...
iPad                                             10:00 AM                              My Books                  Categorie...
Paper Prototype             Paper Prototype을 만들어 보는 시간Tuesday, September 4, 12
Paper Prototype             테스트해볼 수 있는 영역들             •    Concept - 사용자들이 key concept을 이해할까?             •    용어 - 사용자들이...
Paper Prototype             유저 시나리오 만들기             •    시나리오는 퍼소나의 목표(Goal)를 바탕으로 만들 것             •    서비스의 성공에 가장 중요한 요...
Paper Prototype             예) 맛집 찾는 서비스             • 퍼소나 - 20대 여성인 김미진. 학생이며 친구들과 맛집에서 음식 사진을                  주로 공유. 호기...
Lean UX Principles             5. 스타일 가이드를 만들기             • 디지털화된 스타일 가이드를 만들 것             • 스타일 가이드는 프로젝트를 거치며 점점 보완되고 ...
Style Guide             • Live                   • 예전에는 PDF형식이었으나, Live 스타일 가이드는 HTML을 바탕으로 애플리케이                         ...
Style GuideTuesday, September 4, 12
Style GuideTuesday, September 4, 12
Tuesday, September 4, 12
Style GuideTuesday, September 4, 12
Pattern libraryTuesday, September 4, 12
정리                      Sketch   Paper Prototype   Live Style GuideTuesday, September 4, 12
감사합니다Tuesday, September 4, 12
Upcoming SlideShare
Loading in...5
×

스파크스퀘어 UX 강의

3,121

Published on

스파크스퀘어 중 UX 디자인 방법론 및 애자일 & 린 UX에 대한 강의노트 입니다.

(강의의 이해를 돕고자 올린 자료이니 상업적 활용은 삼가해주세요)

1 Comment
33 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,121
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
1
Likes
33
Embeds 0
No embeds

No notes for slide

스파크스퀘어 UX 강의

  1. 1. SESSION 1 스타트업을 위한 UX 디자인 평가 방법론 Experience Designer 김동환Tuesday, September 4, 12
  2. 2. 김동환 • 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.strategyTuesday, September 4, 12
  3. 3. UX 디자인 이해하기Tuesday, September 4, 12
  4. 4. 인지과학의 대가 도널드 노먼 (Donald Norman) “내가 사용자 경험이라는 용어를 만든 이유는 휴먼 인터페이스와 사용성이라 는 말이 너무 좁은 의미였기 때문입니다. 나는 사람의 경험에 대한 모든 측면을 포함하기를 원했는데 그건 제품디자인, 그래픽, 인터페이스 디자인을 포함하는 일이었습니다 ...”Tuesday, September 4, 12
  5. 5. 사용자 경험 스케치의 저자 마이크로소프트의 빌 벅스톤 (Bill Buxton) “궁극적으로, 우리가 만드는 제품들이 개인과 사회, 문화적인 경험을 불 러오고 가치와 영향력을 가진 제품을 만들기 위한 것이 아니라 팔기위해 만드는 것이라고 생각한다면 우리는 사람들을 속이고 있는 것입니다. “Tuesday, September 4, 12
  6. 6. 아답티브 패스 공동설립자 제시 게러트 (Jesse James Garrett) “사용자 경험이란 제품이 어떻게 동작하고 쓰이는지를 말합니다. 긍정적인 사용자 경험은 사용자와 제품을 만든 회사의 목표가 만났을때 생기는 것입 니다. 사용성은 만족스런 사용자 경험의 한 요소는 될 수 있지만 사용성 하 나로 사용자에게 긍정적인 사용자 경험을 만들어낼 수는 없습니다.”Tuesday, September 4, 12
  7. 7. ... om Fr ch at W Jesse Garrett UX Week 2009 | The State of User Experience http://vimeo.com/6952223Tuesday, September 4, 12
  8. 8. by Jesse James GarrettTuesday, September 4, 12
  9. 9. “사용자 경험(UX)이란 사용자가 시스템, 서비스, 제품을 이용하면서 접하게 되 는 모든 측면과 산업 디자인, 소프트웨어 공학, 심리학, 마케팅, 경영학 등의 관점에서 고객을 매료시키고 가치 를 높이기 위한 총체적인 접근을 말한다.”Tuesday, September 4, 12
  10. 10. Tuesday, September 4, 12
  11. 11. 추상적 분석 통합 (Analysis) (Synthesis) 인사이트 발굴 아이디어 발상 이해하기 만들기 리서치 프로토타입 컨텍스트와 사용자에 컨셉 구체화 및 개발 대한 이해 구체적 from Kaiser-IDEOTuesday, September 4, 12
  12. 12. 추상적 분석 통합 (Analysis) (Synthesis) 인사이트 발굴 아이디어 발상 Survey 이해하기 만들기 Journal 리서치 프로토타입 컨텍스트와 사용자에 컨셉 구체화 및 개발 대한 이해 Contextual Inquiry 구체적 from Kaiser-IDEOTuesday, September 4, 12
  13. 13. Persona Journey Map 추상적 분석 통합 (Analysis) (Synthesis) 인사이트 발굴 아이디어 발상 이해하기 만들기 리서치 프로토타입 컨텍스트와 사용자에 컨셉 구체화 및 개발 대한 이해 구체적 from Kaiser-IDEOTuesday, September 4, 12
  14. 14. Participatory Design 추상적 Affinity Diagram 분석 통합 (Analysis) (Synthesis) 인사이트 발굴 아이디어 발상 Collage 이해하기 만들기 리서치 프로토타입 컨텍스트와 사용자에 컨셉 구체화 및 개발 대한 이해 구체적 from Kaiser-IDEOTuesday, September 4, 12
  15. 15. 추상적 분석 통합 (Analysis) (Synthesis) 인사이트 발굴 아이디어 발상 이해하기 만들기 리서치 프로토타입 컨텍스트와 사용자에 컨셉 구체화 및 개발 대한 이해 구체적 Storyboard Paper PrototypingTuesday, September 4, 12
  16. 16. Persona Journey Map Participatory Design 추상적 Affinity Diagram 분석 통합 (Analysis) (Synthesis) Collage 인사이트 발굴 아이디어 발상 Survey 이해하기 만들기 Journal 리서치 프로토타입 컨텍스트와 사용자에 컨셉 구체화 및 개발 대한 이해 구체적 Storyboard Paper Prototyping Contextual InquiryTuesday, September 4, 12
  17. 17. UX 평가하기Tuesday, September 4, 12
  18. 18. Information Architecture의 저자 Peter Morville의 정의 피터 모빌의 유명한 ‘허니콤’ 디자인으로 UX를 다양한 측면(facet)에서 정의했다. 왼쪽은 UX을 측 정하는 정의이고 오른쪽은 2007년 개정판에서 UX를 전략적으로 접근하는 방법에 대해 정의하고 있다. 만들어진 제품이나 서비스의 UX에 대한 검증으로 많이 쓰이고 있다.Tuesday, September 4, 12
  19. 19. Heuristic Evaluation • Jakob Neilsen이 고안 (http://useit.com) • 5명 내외의 ‘전문가’들이 (주관적으로) User Interface를 평가하는 방법 • 발견된 문제점의 중요성을 바탕으로 개선 Strength • 짧은 시간에 다량의 문제점을 발견해낼 수 있음 • 펜과 종이, 제품 혹은 프로토타입만으로 평가 가능 Weakness • UI 전문가의 스킬이 중요 • 모든 문제가 발견된다고 가정하기 힘드며 사용성 이외에 감성적인 측면을 평가하기 힘듬Tuesday, September 4, 12
  20. 20. Heuristic Evaluation 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 efficiency of use) 8. 미적이고 간결한 디자인 (Aesthetic and minimalist design) 9. 사용자가 에러를 인식하고 진단하고 벗어나게 도와주기 (Help users recognize, diagnose, and recover from errors) 10. 도움말 제공하기 (Help and document)Tuesday, September 4, 12
  21. 21. Heuristic Evaluation 발견한 문제 위반한 휴리스틱의 이름 문제의 발생경로와 상황에 대한 설명 심각성 정도(0~5점)와 빈도수, 임팩트, 지속성 솔루션 다른 문제점들과의 연관성Tuesday, September 4, 12
  22. 22. Heuristic EvaluationTuesday, September 4, 12
  23. 23. Survey DO 짧고 이해하기 쉬운 문장으로 질문을 만든다. 한 질문에는 하나의 이슈만 포함시킨다. 사용자에게 익숙한 용어를 이용한다. 명확한 의미의 단어를 사용해서 다양한 해석을 방지한다. 중립적인 단어와 문구를 사용한다. 민감한 개인적인 질문들은 꼭 필요할 경우만 한다. DON’T 다수의 사용자에게 동일한 질문을 수행하는 조사 방법으로 실제 자신의 의견이 아닌 것을 선택하게 강요하지 않아야 한다. 기존 제품/서비스에 대한 사용자의 호불호나 만족여부를 정 선택을 한쪽 방향으로 유도하는 질문을 하지 않아야 한다. 량적으로 확인가능하다. 주의할점은, 질문이 분명한 상태에 잘못된 전제를 기반으로 질문을 만들지 않아야 한다. 서만 효과가 있으며 (포커스 그룹 필요), 사용자의 행동을 사용자에게 미래를 예측하도록 질문하지 않아야 한다. 정확히 예측할 수 없다는 점이다. 서비스 개선의 우선순위 전문 용어, 속어, 약어와 유행어를 사용하지 않아야 한다. 를 선별하는데에는 도움이 되지 않을 수 있다. 감정에 호소하는 단어들을 이용하지 않아야 한다Tuesday, September 4, 12
  24. 24. ‘UX 전문가’를 채용해야 하나 ...Tuesday, September 4, 12
  25. 25. 필요한건 DESIGN THINKINGTuesday, September 4, 12
  26. 26. Design - Led Expert mindset Participatory mindset (사용자를 조사대상자 (사용자를 파트너의 관점으 의 관점으로 바라본다) 로 바라본다) Research - LedTuesday, September 4, 12
  27. 27. Explicit 명확 Observable 관찰 Tacit and Latent 유추Tuesday, September 4, 12
  28. 28. what people ... Methodologies say • Literacture review SAY think • Interviews do • Shadowings DO use • Video Ethnography dream • Journals know MAKE • Collages feelTuesday, September 4, 12
  29. 29. Tuesday, September 4, 12
  30. 30. Tuesday, September 4, 12
  31. 31. Tuesday, September 4, 12
  32. 32. Tuesday, September 4, 12
  33. 33. Tuesday, September 4, 12
  34. 34. Design Thinking People are creative in using tools to express their experiences for feelings... for thinking...Tuesday, September 4, 12
  35. 35. Design Thinking People are creative in using tools to express their experiences for remembering... for dreaming...Tuesday, September 4, 12
  36. 36. Design Thinking People are creative in using tools to express their experiences for telling stories ...Tuesday, September 4, 12
  37. 37. Design Thinking People are creative in using tools to express their experiences for playing with tools...Tuesday, September 4, 12
  38. 38. Tuesday, September 4, 12
  39. 39. Design Thinking 1. Design thinking은 모두를 위한 것임을 이해하라 - 디자인이 제품이 아닌 ‘사람’을 위한 것이기 때문 - 태스크라는 틀에서 벗어나서 생각하는게 필요 - 팀원들이 비주얼하게 생각할 수 있게 유도 2. 풀어야하는 문제를 이해하고 정의하라 - 사람에게 가장 자연스러운 방식인 스토리를 이용하면 오래 기억한다 - 사람들이 직접 스토리를 말할 수 있게 유도한다 3. 프로토타입이 시나리오처럼 흘러갈 수 있도록 개량하라 - 팀내외의 사람들이 스토리를 알 수 있게 만든다 - 벽면을 사용해 시나리오를 전달한다Tuesday, September 4, 12
  40. 40. Persona Journey Map Participatory Design 추상적 Affinity Diagram 분석 통합 (Analysis) (Synthesis) Collage 인사이트 발굴 아이디어 발상 Survey 이해하기 만들기 Journal 리서치 프로토타입 컨텍스트와 사용자에 컨셉 구체화 및 개발 대한 이해 구체적 Storyboard Paper Prototyping Contextual InquiryTuesday, September 4, 12
  41. 41. PersonaTuesday, September 4, 12
  42. 42. Persona Everybody Likes this car? + + =Tuesday, September 4, 12
  43. 43. Persona Continued ...Tuesday, September 4, 12
  44. 44. Persona Continued ...Tuesday, September 4, 12
  45. 45. Persona Continued ...Tuesday, September 4, 12
  46. 46. Persona Continued ...Tuesday, September 4, 12
  47. 47. Persona Continued ...Tuesday, September 4, 12
  48. 48. 퍼소나를 만드는 10단계 1. 사용자 찾기 2. 가설 만들기 3. 가설 입증하기 (데이터 모으기) 4. 가설(데이터) 속의 패턴 찾기 5. 퍼소나 만들기 6. 상황 정의하기 7. 상황 입증 및 믿기 8. 조직속으로 퍼소나 전파하기 9. 시나리오 만들기 10. 지속적으로 업데이트 하기Tuesday, September 4, 12
  49. 49. Tuesday, September 4, 12
  50. 50. Tuesday, September 4, 12
  51. 51. Sarah is a 30 year old teacher who lives in Seattle. Shes 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 Sarahs 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 Sarahs 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.Tuesday, September 4, 12
  52. 52. Persona Continued ...Tuesday, September 4, 12
  53. 53. Collage + = • 사람들로 하여금 자신의 아이디어를 ‘시각적으로’ 표현하게 만든다. • 사람들이 이미지와 단어를 왜 골랐는지 설명하게 함으로서 자신의 생각과 결정의 이유를 드러나게 한다. • 모더레이터는 사람들이 자신의 경험을 바탕으로 스토리를 만들어 얘기할때 제품이 자신에게 무엇을 해주었으면 좋겠는 지를 말할 수 있도록 유도한다.Tuesday, September 4, 12
  54. 54. Tuesday, September 4, 12
  55. 55. Tuesday, September 4, 12
  56. 56. Tuesday, September 4, 12
  57. 57. Tuesday, September 4, 12
  58. 58. Tuesday, September 4, 12
  59. 59. 콜라지를 만들어 스토리텔링을 실험해보는 시간Tuesday, September 4, 12
  60. 60. 정리 Persona Moodboard CollageTuesday, September 4, 12
  61. 61. SESSION 2 스타트업을 위한 애자일 린 UX 방법론 Experience Designer 김동환Tuesday, September 4, 12
  62. 62. AGILE & LEAN 방법론의 소개Tuesday, September 4, 12
  63. 63. Waterfall Requirements Design Development Testing MaintenanceTuesday, September 4, 12
  64. 64. Waterfall Requirements Design Development Testing MaintenanceTuesday, September 4, 12
  65. 65. Iterative Requirements Design Preparation Release Develop TestTuesday, September 4, 12
  66. 66. Iterative Requirements Design Preparation Release ? Develop TestTuesday, September 4, 12
  67. 67. Agile & Lean UX의 부상 • 기술평준화로 인해 더이상 기술적 제한이 미치는 영향이 적어짐 • 모바일 앱/웹의 등장으로 잦은 테스팅, 업데이트가 필요해짐 • 기존 워터폴 방식으로는 검증에 시간이 오래걸려 실패비용 증가 • 많아지는 문서들로 복잡해진 비즈니스 환경에서 관리가 힘들어짐Tuesday, September 4, 12
  68. 68. AgileTuesday, September 4, 12
  69. 69. Agile 사용자의 이해? 퍼소나? 아이디어 도출? 컨셉발굴?Tuesday, September 4, 12
  70. 70. LeanTuesday, September 4, 12
  71. 71. Tuesday, September 4, 12
  72. 72. Lean UX Mantra • 빠르다 QUICK • 비주얼하다 VISUAL • 협동적이다 COLLABORATIVE • 지속적이다 CONTINUOUSTuesday, September 4, 12
  73. 73. Lean UX Principles 1. 협동(Collaboration)을 통한 문제 해결 • 디자이너, 개발자, 기획자가 문제를 ‘같이’ 푸는게 중요 • 팀에게 솔루션을 주는게 아니라 ‘문제’를 주어 솔루션을 찾아나감 • 정확히 어떤 문제를 풀어야되는지 알 수 있다 (Frame the problem) • 산출물의 퀄리티보다 팀이 만드는 결과(솔루션)에 집중할 것Tuesday, September 4, 12
  74. 74. 협동을 통한 문제해결. Build cross-functional team.Tuesday, September 4, 12
  75. 75. Lean UX Principles 2. 사용자와의 접점을 최대한 만들기/유지하기 • 사용자를 자주 접하고, 가능하면 사무실로 불러온다 • 매주 2~3명씩 간단하게 사용자를 조사하는 방법도 있다 • 현재 출시된 서비스 이외에도 적용 예정인 기능들도 테스트해본다 • 회사의 모두에게 ‘내가 사용자니까 아는데...’, ‘사용자는 대부분 우리 서비스를 나처럼 쓰고는 해’ 라는 식의 잘못된 가정을 없앤다 • 사용자를 대변하는 ‘퍼소나’를 만들고 유지해나간다Tuesday, September 4, 12
  76. 76. 퍼소나는 공감도구이다. Build empathy with your team.Tuesday, September 4, 12
  77. 77. Tuesday, September 4, 12
  78. 78. Lean UX Principles 3. 스케치하기 • 디자이너 뿐만이 아니라 개발자와 비즈니스 관계자도 같이 그려야함 • 팀내외부의 사람들의 즉각적인 이해를 불러올 수 있다 • 워크플로우를 만들어 유저 시나리오를 만든다 • 재미로, 비효율적인 시간이 아니라 사진도 남기고, 포스트잇으로 메모 도 남기며 팀워킹을 최대한 활용한다Tuesday, September 4, 12
  79. 79. Tuesday, September 4, 12
  80. 80. Tuesday, September 4, 12
  81. 81. Tuesday, September 4, 12
  82. 82. Tuesday, September 4, 12
  83. 83. Tuesday, September 4, 12
  84. 84. Tuesday, September 4, 12
  85. 85. Tuesday, September 4, 12
  86. 86. Tuesday, September 4, 12
  87. 87. Tuesday, September 4, 12
  88. 88. Tuesday, September 4, 12
  89. 89. Lean UX Principles 4. 프로토타입 만들기 • 레벨에 맞는 프로토타입 선정 (Low to High fidelity) • 최대한 빨리 만들어서 컨셉을 현실로 만들 것 • 사용자가 서비스에 느끼는 ‘Desirability’를 빠른 시간내에 검증 • 종이로 하는 프로토타이핑은 저렴한 비용으로 높은 효과를 낼 수 있음 • 서비스의 개발 상태에 따라 플래시나 디바이스에 올려서 사용자가 어 떻게 인터렉트 하는지도 살펴볼 수 있음Tuesday, September 4, 12
  90. 90. “일반적으로, 프로그래밍 코드를 작성하기 전에 수정을 할 경 우 개발이 종료될 때 까지 기다리는 경우보다 10배가량 비용 이 적게 든다고 추정된다.” 제이콥 닐슨Tuesday, September 4, 12
  91. 91. Tuesday, September 4, 12
  92. 92. Tuesday, September 4, 12
  93. 93. Tuesday, September 4, 12
  94. 94. CARRIER 3G 10:00 AM Accounts tbisaacs Search Timeline @Tuesday, September 4, 12
  95. 95. 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 off 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!!! @Tuesday, September 4, 12
  96. 96. 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 off to #blonski TweetDeck 10/6/10 3:45 AMTuesday, September 4, 12
  97. 97. iPad 10:00 AM My Books Categories PROMO IMAGE My Spiritual Journey The Brave Dali Lama & Sofia 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 Springfield IMAGE Biographies & Memoirs IMAGE Biographies & Memoirs $9.99 $9.99 My Spiritual Journey The Brave Dali Lama & Sofia Stril-rever Nicholas Evans IMAGE Biographies & Memoirs IMAGE Fiction & Literature $9.99 $9.99Tuesday, September 4, 12
  98. 98. iPad 10:00 AM My Books Categories Categories Featured PROMO IMAGE Classics Nonfiction My Spiritual Journey The Brave Dali Lama & Sofia 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 Springfield IMAGE Biographies & Memoirs IMAGE Biographies & Memoirs $9.99 $9.99 My Spiritual Journey The Brave Dali Lama & Sofia Stril-rever Nicholas Evans IMAGE Biographies & Memoirs IMAGE Fiction & Literature $9.99 $9.99Tuesday, September 4, 12
  99. 99. Paper Prototype Paper Prototype을 만들어 보는 시간Tuesday, September 4, 12
  100. 100. Paper Prototype 테스트해볼 수 있는 영역들 • Concept - 사용자들이 key concept을 이해할까? • 용어 - 사용자들이 UI 속의 용어들을 이해할까? • 네비게이션 - 서비스의 흐름이 사용자들이 기대했던 흐름일까? • 콘텐츠 - 적당한 레벨의 정보를 전달하고 있는가? • 페이지 레이아웃 - 콘텐츠가 사용자가 기대한대로 배열되어 있는가? • 기능 - 다른 어떤 기능이 추가될 수 있을까? 테스트가 힘든 부분들은 기다리는 시간, 스크롤, 줌, look & feelTuesday, September 4, 12
  101. 101. Paper Prototype 유저 시나리오 만들기 • 시나리오는 퍼소나의 목표(Goal)를 바탕으로 만들 것 • 서비스의 성공에 가장 중요한 요소를 포함하도록 만들 것 • 너무 넓거나 좁은 범위로 만들지말것 • 유한하고 예측가능한 범위내의 솔루션을 제공할 것 • 태스크의 성공여부를 사용자가 알 수 있게 만들 것Tuesday, September 4, 12
  102. 102. Paper Prototype 예) 맛집 찾는 서비스 • 퍼소나 - 20대 여성인 김미진. 학생이며 친구들과 맛집에서 음식 사진을 주로 공유. 호기심 많은 성격으로 안가본 레스토랑도 후기를 뒤져서라도 가보는 성격. 서울의 모든 맛집을 다 가보고 싶어한다. • 경쟁 서비스는 윙스푼. • 서비스의 주 목적 - 사용자들이 주변에 특별히 알고 있는 레스토랑이 없거 나, 안가본 레스토랑을 가보고 싶어할때 쉽고 빠르게 레스토랑을 추천해주 는 서비스 • 시나리오 - 김미진은 오늘 저녁 삼성역에서 친구들과 저녁 약속이 있다. 특 별히 가본 레스토랑이 있는건 아니지만, 코엑스 안의 평이한 음식점은 가 고싶지 않다. 삼성역 주변의 식당들 중에서 너무 비싸지않고 패스트푸드나 체인점이 아닌 식당을 찾아서 친구들에게 알려주려 한다.Tuesday, September 4, 12
  103. 103. Lean UX Principles 5. 스타일 가이드를 만들기 • 디지털화된 스타일 가이드를 만들 것 • 스타일 가이드는 프로젝트를 거치며 점점 보완되고 늘어나게 한다 • 디자이너 뿐만이 아니라 개발자의 이해도 돕는다 • 프로토타입의 빠른 제작을 돕게된다Tuesday, September 4, 12
  104. 104. Style Guide • Live • 예전에는 PDF형식이었으나, Live 스타일 가이드는 HTML을 바탕으로 애플리케이 션의 일부이자 제품 개발과 함께 같이 업데이트되어 언제나 up-to-date 하다. • Semantic • 대부분의 스타일 가이드가 ‘왜’를 설명해주지 못하는데, semantic 스타일 가이드는 패턴(색, 폰트, 라인스타일), 패턴의 이름, 사용 방법, 패턴을 모아 조합하는 법을 포 함한다 • Test driven • 서비스의 실제 스타일을 나타내기 때문에 서비스의 디자인을 미리 점검해볼 수 있는 기회가 된다. 실제 피처로 구현되기전 스타일 가이드에서 제대로 동작하는 패턴을 만 들어둘 수 있다.Tuesday, September 4, 12
  105. 105. Style GuideTuesday, September 4, 12
  106. 106. Style GuideTuesday, September 4, 12
  107. 107. Tuesday, September 4, 12
  108. 108. Style GuideTuesday, September 4, 12
  109. 109. Pattern libraryTuesday, September 4, 12
  110. 110. 정리 Sketch Paper Prototype Live Style GuideTuesday, September 4, 12
  111. 111. 감사합니다Tuesday, September 4, 12

×