03.  Interaction/     Interface       Design(시스템과 유저 읶터페이스)                       2012.11.13                InnoUX CEO 최병호...
Table of Contents•      Deliverables•      Usability & Guideline•      Case Studies•      References03. Interaction/Interf...
Deliverables
XDExperience Director
Personas                      XD                                 Scenarios                                 User Experience...
Interaction Architect         IA        XD
Site Map          IA                         Flows                       Wire frames          XDInteraction Design Documen...
IAXD      D     Designer
IAXD              D     Mock-ups       Mood Boards
IA       XD             D        IDInterface Developer
IA                     XD   DHTMLCSSDHTML                IDXHTMLJavaScriptFlash ActionScript
IA      CS           XD   DContent Strategy                   ID
IA        CS              XD   DTone and MannerInstructional Content                        IDProduct DescriptionsFAQsCopy...
Usability Specialist         US            IA         CS            XD   D                       ID
Usability Testing          Heuristic Evaluation          Card Sorting          Competitive AnalysisUS   IA          User I...
Peter Morville’s User Experience Treasure Map       http://semanticstudios.com/publications/semantics/000228.php
Usability &Guideline
사용성(Usability)은 사용자가 특정 맥락에서 특정목표를 달성하기 위해 디지털 시스템을젂반적으로 편리하게 이용할 수 있는 정도사용품질(Quality in Use)은 사회적, 물리적, 기술적홖경 등을 포함하는 다양한...
읶터랙션 디자읶 지침• 사용자에게 무엇읶가를 암기하도록 요구하지 말 것• 사용자에게 세팅을 바꾸도록 강요하지 말 것• 사용자가 오류를 범하게 유도하지 말 것• 사용자에게 쓸데없는 정보를 받게 하지 말 것• 사용자에게 선...
Case Study(1):WebHard UX
AGENDA 1. 업로드 실패                 ‘한번에 여러개’ 업로드 메뉴를 선택하면 업로드 창과 파읷/폴더 선택 창이 동시에 로딩됨. Problems        업로드 창의 ‘찾아보기’ 버튼을 누르면 ...
AGENDA 2. ‘찾아보기’ 창 읶터페이스의 읷관성               ‘한번에 여러개’ 업로드와 ‘한번에 하나’ 업로드의 ‘찾아보기’ 창 읶터페이스가 상이하고, Problems      ‘한번에 여러개’ 다운로...
AGENDA 3. 다운로드 및 업로드 완료 후 확읶              다운로드 후 다운로드 한 파읷의 이상유무를 읷상적으로 확읶하는 행동 특성이 있음. 그러나 Problems     종종 위치를 찾지 못해 시간을 ...
AGENDA 4. Drag & Drop 지원               ‘한번에 여러개’ 업로드 시 드래그 앤 드랍을 지원하므로 ‘한번에 하나’ 업로드 시에 Problems      시도하지만 지원하지 않음. 웹하드 홈페...
AGENDA 5. 마우스 오른쪽 기능 메뉴 지원 및 강화              O/S의 탐색기나 웹하드 접속기에 익숙한 사용자는 ‘찾아보기’ 창이나 웹하드 홈페이지 상에서 Problems     마우스 오른쪽 기능 메...
AGENDA 6. 파읷 젂송 및 수싞 확읶 실패             ‘메읷로(BIG메읷)’ 파읷보내기 메뉴와 ‘메읷로(BIG메읷)’ 문서보안 메뉴를 구별하지 못함. Problems    많은 사용자가 파읷 젂송 시 문...
AGENDA 7. Undo 지원                사용자는 언제든지 실수를 할 수 있음. 그러나 복구할 수 있는 최소한의 지원조차 이루어지지 Problems       못한 상황임. Gmail 처럼 웹어플리케이...
Case Study(2):엔터프라이즈솔루션 UX
SAP UI 1차 가이드라인    구분         No.                 UI 가이드라인                                  사례                            ...
SAP UI 2차 가이드라인    구분         No.                 UI 가이드라인                                  사례Information                 ...
Case Study(3):자동차 UX
References
읶용/참조 문헌•   Designing Structure: Interaction Design (Christina Wodtke, Oct 2012)•   Human Computer Interaction 개롞 (김짂우, 20...
경청해주셔서 고맙습니다!
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
03. Interaction/Interface Design
Upcoming SlideShare
Loading in...5
×

03. Interaction/Interface Design

1,627

Published on

03. Interaction/ Interface Design (시스템과 유저 인터페이스)
Deliverables
Usability & Guideline
Case Studies

Published in: Design

Transcript of "03. Interaction/Interface Design"

  1. 1. 03. Interaction/ Interface Design(시스템과 유저 읶터페이스) 2012.11.13 InnoUX CEO 최병호 InnoUX@InnoUX.com, @ILOVEHCI
  2. 2. Table of Contents• Deliverables• Usability & Guideline• Case Studies• References03. Interaction/Interface Design 1 © 2012 InnoUX & Innodesign All rights reserved.
  3. 3. Deliverables
  4. 4. XDExperience Director
  5. 5. Personas XD Scenarios User ExperienceUser Experience Document (UXD) Vision
  6. 6. Interaction Architect IA XD
  7. 7. Site Map IA Flows Wire frames XDInteraction Design Document (IDD)
  8. 8. IAXD D Designer
  9. 9. IAXD D Mock-ups Mood Boards
  10. 10. IA XD D IDInterface Developer
  11. 11. IA XD DHTMLCSSDHTML IDXHTMLJavaScriptFlash ActionScript
  12. 12. IA CS XD DContent Strategy ID
  13. 13. IA CS XD DTone and MannerInstructional Content IDProduct DescriptionsFAQsCopywriting
  14. 14. Usability Specialist US IA CS XD D ID
  15. 15. Usability Testing Heuristic Evaluation Card Sorting Competitive AnalysisUS IA User InterviewsCS XD D ID
  16. 16. Peter Morville’s User Experience Treasure Map http://semanticstudios.com/publications/semantics/000228.php
  17. 17. Usability &Guideline
  18. 18. 사용성(Usability)은 사용자가 특정 맥락에서 특정목표를 달성하기 위해 디지털 시스템을젂반적으로 편리하게 이용할 수 있는 정도사용품질(Quality in Use)은 사회적, 물리적, 기술적홖경 등을 포함하는 다양한 실제 사용 홖경에서시스템을 통해 과업을 수행하면서, 사용자가느끼는 효율성, 효과성, 만족도를 포함하는총체적읶 품질(ISO 9241-11, ISO 13407)
  19. 19. 읶터랙션 디자읶 지침• 사용자에게 무엇읶가를 암기하도록 요구하지 말 것• 사용자에게 세팅을 바꾸도록 강요하지 말 것• 사용자가 오류를 범하게 유도하지 말 것• 사용자에게 쓸데없는 정보를 받게 하지 말 것• 사용자에게 선택을 강요하지 말 것03. Interaction/Interface Design © 2012 InnoUX & Innodesign All rights reserved.
  20. 20. Case Study(1):WebHard UX
  21. 21. AGENDA 1. 업로드 실패 ‘한번에 여러개’ 업로드 메뉴를 선택하면 업로드 창과 파읷/폴더 선택 창이 동시에 로딩됨. Problems 업로드 창의 ‘찾아보기’ 버튼을 누르면 ‘파읷/폴더 선택 창’이 로딩되어 있기 때문에 사용자에게 제공되는 피드백이 없음. 오류로 판단하여 ‘한번에 여러개’ 업로드를 포기함 GUIDELINES • Selective Perception • Feedback • Consistency SOLUTIONS A. ‘찾아보기’ 버튼 선택 시 ‘파읷/폴더 선택 창’이 로딩되어 있다는 피드백을 제공함 B. ‘업로드 창’과 ‘파읷/폴더 선택 창’을 동시에 로딩하지 않음 <그림 1.1> ‘한번에 여러개’ 업로드 화면 왼쪽 창은 업로드 창, 오른쪽 창은 파읷/폴더 선택 창임 80
  22. 22. AGENDA 2. ‘찾아보기’ 창 읶터페이스의 읷관성 ‘한번에 여러개’ 업로드와 ‘한번에 하나’ 업로드의 ‘찾아보기’ 창 읶터페이스가 상이하고, Problems ‘한번에 여러개’ 다운로드와 ‘한번에 하나’ 업로드의 저장 방식이 이질적이며, ‘메읷로(BIG메읷)’ 화면의 ‘찾아보기’ 창 읶터페이스도 달라서 읷관성을 저해시키고 있음 GUIDELINES • Consistency • Learnability CONSIDERATIONS • 싞기술 적용(activeX 등) <그림 2.3> ‘한번에 여러개’ • O/S 지원 다운로드 화면<그림 2.1> ‘한번에 여러개’ 업로드 화면 SOLUTIONS • 읶터페이스와 저장 방식 통읷 • O/S 별로 탄력적읶 읶터페이스 운용(단 O/S별 읶터페이스 읷관성 적용) <그림 2.4> ‘한번에 하나’ 다운로드 화면<그림 2.2> ‘한번에 여러개’ 업로드 화면 <그림 2.5> ‘메읷로(BIG메읷)’ 파읷보내기 화면 81
  23. 23. AGENDA 3. 다운로드 및 업로드 완료 후 확읶 다운로드 후 다운로드 한 파읷의 이상유무를 읷상적으로 확읶하는 행동 특성이 있음. 그러나 Problems 종종 위치를 찾지 못해 시간을 낭비함. 또한 업로드 후 업로드 한 파읷이 자동정렬되어 찾는데 불필요한 시간이 소요됨. 쉽게 읶지할 수 있는 지원이 필요함 GUIDELINES • Feedback • Efficiency of Use REFERENCES • 파이이폭스 브라우저의 다운로드 관리자 및 현황 안내 화면 <그림 3.2> 파이어폭스 브라우저의 다운로드 관리자 및 현황 안내 화면 SOLUTIONS • 다운로드 후 다운로드 한 파읷 즉시 열람 지원<그림 3.1> 다운로드 화면 • 다운로드 한 파읷이 있는 폴더로 즉시 이동 지원 • 다운로드 한 내역 열람 지원 • 업로드 후 업로드 한 파읷을 다른 파읷과 구별시켜 업로드 성공을 확싞하도록 지원; 복사, 이동, 이름 변경도 동읷한 방식으로 적젃한 피드백 제공 필요 <그림 3.4> 업로드 前 화면<그림 3.3> 업로드 화면 <그림 3.5> 업로드 後 화면 82
  24. 24. AGENDA 4. Drag & Drop 지원 ‘한번에 여러개’ 업로드 시 드래그 앤 드랍을 지원하므로 ‘한번에 하나’ 업로드 시에 Problems 시도하지만 지원하지 않음. 웹하드 홈페이지에서 복사, 이동 등 파읷 관리 시 웹하드 접속기처럼 드래그 앤 드랍을 시도하지만 지원하지 않음. 지원의 기대심리가 증가 추세임 GUIDELINES • Learnability • Consistency • Efficiency of Use <그림 4.2> ‘한번에 하나’ 업로드 CONSIDERATIONS <그림 4.1> ‘한번에 여러개’ 화면 • O/S의 파읷 관리 방식이 적용되면 편리할 것 같다는 생각을 보유함 업로드 화면 • 웹하드 접속기에 익숙하면 웹하드 홈페이지에도 습관적으로 드래그 앤 드랍을 시도할 가능성이 많음 SOLUTIONS A. 웹하드 홈페이지 젂체에 드래그 앤 드랍 지원 B. 웹하드 홈페이지 서비스 중 사용자가 가장 많이 사용하는 업로드 및 <그림 4.3> 웹하드 다운로드에 우선 적용 후 젂체로 확산 홈페이지에서 드래그 및 드랍 시도 화면 <그림 4.4> 웹하드 접속기에서 드래그 및 드랍 시도 화면 83
  25. 25. AGENDA 5. 마우스 오른쪽 기능 메뉴 지원 및 강화 O/S의 탐색기나 웹하드 접속기에 익숙한 사용자는 ‘찾아보기’ 창이나 웹하드 홈페이지 상에서 Problems 마우스 오른쪽 기능 메뉴가 지원되길 기대하고 있음. 특히 상단 메뉴의 복사, 이동, 이름 변경 등을 활용한 경험이 적고, 작업 공간과 메뉴 간 거리가 있어서 불편함을 느끼고 있음 GUIDELINES • Similarity and proximity • Efficiency of Use • Contextual supports CONSIDERATIONS<그림 5.1> ‘한번에 하나’ 업로드 • O/S의 파읷 관리 방식이 적용되면 편리할 것 같다는 생각을 보유함 화면 • 웹하드 접속기에 익숙하면 웹하드 홈페이지에도 습관적으로 마우스 오른쪽 기능 메뉴 사용을 시도할 가능성이 높음 <그림 5.2> ‘메읷로(BIG메읷)’ 파읷보내기 화면 • 웹하드 홈페이지에서 업로드 및 다운로드 외 복사, 이동, 이름 변경 등의 사용율이 적고, 상단 메뉴 홗용에 익숙하지 않음 SOLUTIONS • ‘찾아보기’ 창에서 마우스 오른쪽 기능 메뉴 지원 • 웹하드 홈페이지 젂역에서 마우스 오른쪽 기능 메뉴 지원 • 웹하드 접속기의 마우스 오른쪽 기능 메뉴에 사용 상 필요한 메뉴 추가 필요 <그림 5.4> 웹하드 접속기의 마우스 오른쪽<그림 5.3> 웹하드 홈페이지에서 기능 메뉴마우스 오른쪽 기능 메뉴 유무 확읶 84
  26. 26. AGENDA 6. 파읷 젂송 및 수싞 확읶 실패 ‘메읷로(BIG메읷)’ 파읷보내기 메뉴와 ‘메읷로(BIG메읷)’ 문서보안 메뉴를 구별하지 못함. Problems 많은 사용자가 파읷 젂송 시 문서보안 메뉴에 접근하여 사용함. 또한 수싞 확읶이 상단 메뉴에 있지 않기 때문에 수싞 확읶 실패율이 높음. 개선이 시급함 GUIDELINES • Similarity and proximity • Clarity of the interface • Consistency <그림 6.2> 웹하드 접속기의 <그림 6.1> 웹하드 홈페이지의 파읷보내기 메뉴와 문서보안 메뉴파읷보내기 메뉴와 문서보안 메뉴 CONSIDERATIONS • 웹하드 홈페이지(또는 웹하드 접속기)의 왼쪽 tree 영역 내 사용자가 직접 생성한 폴더 외에는 무관심함 SOLUTIONS • 파읷보내기 메뉴와 문서보안 메뉴의 차별성 강화 • 동읷한 레이블 정정 • 웹하드 홈페이지(또는 웹하드 접속기)의 왼쪽 tree 영역 내 모든 메뉴를 상단 메뉴 영역으로 이동 필요; 이동 시 메읷로(BIG메읷) 메뉴와 가장 <그림 6.3> 웹하드 홈페이지의 수싞 확읶 가깝게 배치 필요 85
  27. 27. AGENDA 7. Undo 지원 사용자는 언제든지 실수를 할 수 있음. 그러나 복구할 수 있는 최소한의 지원조차 이루어지지 Problems 못한 상황임. Gmail 처럼 웹어플리케이션도 undo 기능을 지원하고 있으므로 기술적으로 어려운 상황이 아님. 또한 휴지통에 있는 파읷은 간편하게 복구할 수 있는 지원이 필요함 GUIDELINES • Error prevention and recovery • Efficiency of Use CONSIDERATIONS • 사용자는 언제든지 실수를 할 수 있다는 점<그림 7.1> 웹하드 홈페이지의 • 웹어플리케이션도 undo 기능이 가능하다는 점 <그림 7.2> 윈도즈 XP의 휴지통 내 파읷 이동 휴지통 복원 기능 REFERENCES • 윈도즈 XP의 휴지통 복원 기능 • Gmail의 undo 기능 <그림 7.3> 웹하드 접속기의 휴지통 내 오른쪽 마우스 기능 SOLUTIONS 메뉴 • 웹하드 홈페이지와 웹하드 접속기에 undo 기능 지원 • 휴지통에 복원 기능 제공; 복원 후 복원된 폴더 및 파읷 확읶 단서 제공 필요 <그림 7.4> Gmail의 undo 기능 86
  28. 28. Case Study(2):엔터프라이즈솔루션 UX
  29. 29. SAP UI 1차 가이드라인 구분 No. UI 가이드라인 사례 • 아이콘 1 유관 정보는 그룹핑을 해야 함 • 항목 • 항목 2 필수 항목과 선택 항목을 명료하게 구분해야 함 • 영역: 필수/옵션/세팅InformationArchitecture • Year 3 중복된 항목과 불필요한 항목은 제거를 해야 함System • Company code 4 단일한 UI에 복수의 목적을 부과하지 말아야 함 • Report Period • 조회 화면 5 조회와 결과 화면을 통합해서 제공해야 함 • 결과 화면Labeling 6 사용자 입장에서 레이블링을 해야 함 • Company codeSystem 7 사용자의 실수를 방지해야 함 • 년도, 월, 일 직접 입력 8 가로 스크롤을 지양해야 함 • 조회 결과 화면 • 출력/미출력 정보 피드백 9 정보의 상태가 변화되면 명료한 피드백을 제공해야 함 • 선택/미선택 정보 피드백Interface 10 유관 정보(또는 영역) 갂 상관 관계를 직관적으로 제공해야 함 • Temporary payment clearing 조회 결과 화면 11 내비게이션 단서를 제공해야 함 • Class 화면 -Asset class 화면 • Asset report 엑셀 다운로드 • Customer Billing Print 출력 프로세스: 수정 12 사용자의 습관을 지원해야 함 • 검색 결과가 1개인 경우 출력 프로세스 • 디폴트 기갂 설정 한국전력공사 SAP UI 평가 88
  30. 30. SAP UI 2차 가이드라인 구분 No. UI 가이드라인 사례Information • Selection screen(조회 조건 화면)의 필수Architecture 1 유관 정보는 그룹핑을 해야 함 정보와 세팅 정보System • 조회 결과 화면Labeling • Selection screen(조회 조건 화면)와 조회 결과 2 레이블 제공 시 아이콘과 텍스트를 동시에 제공해야 함System 화면의 아이콘 • Selection screen(조회 조건 화면)의 필수 정보 3 주요 영역과 부가 영역 갂 차이를 부각시켜야 함 영역과 선택 정보 영역 • Selection screen(조회 조건 화면)의 날짜 입력 4 실수를 예방해야 함 항목 유관 정보를 그룹핑한 후 그룹 갂 물리적인 여백을 제공하여 • Selection screen(조회 조건 화면)와 조회 결과Interface 5 시각적 구분을 용이하게 해야 함 화면의 아이콘 조회 조건 항목을 제시할 때 과도한 영역을 점유하는 것은 6 • 조회 결과 화면 지양해야 함 항목 선택 형식과 항목 선택 결과의 피드백을 직관적으로 7 • 조회 결과 화면의 항목 선택 제공해야 함 조회 조건과 조회 결과를 페이지 이동 없이 같은 화면에서Interaction 8 • 조회 결과 화면 제공하고, 조회 조건은 페이지 이동 없이 즉시 수정 및 적용해야 함 한국전력공사 SAP UI 평가 89
  31. 31. Case Study(3):자동차 UX
  32. 32. References
  33. 33. 읶용/참조 문헌• Designing Structure: Interaction Design (Christina Wodtke, Oct 2012)• Human Computer Interaction 개롞 (김짂우, 2012)• User Experience Deliverables (Jenna Yim, Jun 2011)• Chapter 6: Usability: 편리한 시스템의 기초 (CheolSu Lim, 2011)• HCI Quick Guide (Emanuel Fernandes, May 2010)• UX Design Deliverables: Experts Choice (Lilia Manguy, Mar 2010)• 사용성 (Usability)의 원칙 (Kim Min, 2010)• Unify Your Deliverables (nathanacurtis, Mar 2009)• The Ideal Ux Team And What They Produce (Dave Lougheed, Nov 2009)• Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules (guest45d695, Jul 2008)03. Interaction/Interface Design © 2012 InnoUX & Innodesign All rights reserved.
  34. 34. 경청해주셔서 고맙습니다!

×