InterfaceDesign_7th.Lecture.InformationArchitecture_2.pdf 자료
0 likes202 views
7강 ID_7th.Lecture.InformationArchitecture_2 정보 설계의 이해 2
InterfaceDesign_7th.Lecture.InformationArchitecture_2.pdf 자료
- 1. KAYWON UNIVERSITY OF ART DESIGN SMART PRODUCT DESIGN LAB INTERFACE DESIGN 인터페이스 디자인 kwonjeongeun naver.com 7강 정보 설계의 이해 2  / 51 1
- 2. 과제 Critique 정보 설계의 이해 2 실습 UX Tool 레슨 / 51 2
- 3. 서비스 정의 단계 OO OO 단계 UX 디자인 / 51 3 메뉴 트리 기능 리스트 주요 특징 서비스 컨셉 ★ : 중간 과제에 포함
- 4. OO OO 단계 UX 디자인 / 51 4 프로토타입 와이어프레임 손 스케치 플로우 차트 No color ★ : 중간 과제에 포함
- 5. 사용자 경험 디자인 - 정보 설계? / 51 5 정보 설계 이즈 베리 임포턴트! / 51 5
- 6. 정보 설계(IA)란? / 51 6 사람의 입장, 정보의 덩어리. 정보, 어떻게 이해시킬 건데? 규칙, 논리 -> 이해하기 쉬운 시스템 구축하는 일 = 사용자 경험 디자인 사용자 경험 디자인 이해 정보 리처드 사울 워먼 Richard Saul Wurman
- 7. 성공한 IA • 신속하게 원하는 정보를 찾을 수 있 어서 사용자의 시간과 비용이 절약 된다. • 좋은 IA로부터 나온 사용자 경험은 브랜드 가치를 제고시킨다. • 쇼핑몰 등 구매와 연결된 경우에는 수익 문제와 직결된다. • 목적물의 신뢰성이 하락하고 나아 가 브랜드 이미지의 추락과 연결된 다. 실패한 IA • 사용자는 불편함과 좌절감을 느 껴 재방문을 꺼리게 된다. • 각인된 실패 경험은 결국 경쟁 사 이트로 이탈하게 한다. • 쇼핑몰 등 구매와 연결된 경우에 는 수익 문제와 직결된다. • 목적물의 신뢰성이 하락하고 나아 가 브랜드 이미지의 추락과 연결 된다. 정보 설계(IA), 왜 중요한가 출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스> / 51 7
- 8. 정보와 인간의 뇌 출처 : 유발 하라리 <사피엔스>, 알렉스 라이트 <분류의 역사> / 51 8 저장 장치로 훌륭하지 않은 뇌 저장 용량 : 유한성 vs 확장성, 업그레이드 가능 중요한 정보만 저장하도록 되어 있다. 저장 기간 : 유한성 vs 영구성, 이관 가능 저장 기간이 100년도 되지 않는다. 어떻게 하면 정보를 체계적으로 분류할 수 있을까? 빙하 시대, 빌린 물건, 장부 정리법 고대, 수메르인 문서 보관소, 문서 분류법 중세, 수도원 도서관, 도서 분류법 사용자 경험 디자인 이해 정보 뇌
- 9. 정보 설계(IA), 구성 요소 / 51 9 출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>, 197p 정보 구조 -> 정보의 분류 유형 내비게이션 시스템 -> 지도 레이블링 시스템 -> 정보 그룹의 이름 콘텐츠 구성 -> 정보 노출의 방식과 순서
- 10. 정보 구조 계층 구조 계열 구조 그리드 구조 네트워크 구조 정보를 어떻게 분류할 것인가 / 51 10 메뉴 트리
- 11. 예 : 인스타그램 메뉴 트리 / 51 11 작성 인스타그램 릴스 나의 프로필 새 게시물/ … / 작성 릴스 탐색 나의 프로필 정보 새 릴스 작성 2 프로필 편집 프로필 공유 나의 게시물 내가 태그됨 작성 2 설정 및 활동 나의 릴스 게시물 탐색 + 릴스 탐 색 2 검색 키워드 검색 홈 스토리 리스트 게시물 리스트 좋아요 외 알림 메시지 알림 계정 센터 외 다수 게시물 리스트 키워드 검색 시작 릴스 상세 알림 리스트 메시지 리스트 스토리 상세 새 게시물 작성 시작 새 스토리 작성 시작 새 릴스 작성 시작 새 라이브 작성 시작 새 릴스 작성 시작 2 정보 구조
- 12. 정보를 어떻게 분류할 것인가 / 51 12 3 depth 계층 구조 정보 구조
- 13. 정보를 어떻게 분류할 것인가 / 51 13 4 depth 계층 구조 정보 구조
- 14. 이전 다음 정보를 어떻게 분류할 것인가 / 51 14 같은 정보 레벨 순차적 접근 주로 어디서? 계열 구조 정보 구조
- 15. 정보를 어떻게 분류할 것인가 / 51 15 계층 계열 구조 정보 구조
- 16. 정보 설계(IA), 구성 요소 / 51 16 출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>, 197p 정보 구조 -> 정보의 분류 유형 내비게이션 시스템 -> 지도 레이블링 시스템 -> 정보 그룹의 이름 콘텐츠 구성 -> 정보 노출의 방식과 순서
- 17. Navigation 항해, 항법 즉 사용자가 자신의 목적지를 향해 순항할 수 있도록 도와주는 항해 지도 Internet Explorer 내비게이션 시스템 정보를 어떻게 탐색할 것인가 / 51 17
- 18. 글로벌 내비게이션 로컬 내비게이션 컨텍스츄얼 내비게이션 글로벌 Global - 로컬 Local - 컨텍스츄얼 Contextual 정보를 어떻게 탐색할 것인가 / 51 18 내비게이션 시스템
- 19. 정보 설계(IA), 구성 요소 / 51 19 출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>, 197p 정보 구조 -> 정보의 분류 유형 내비게이션 시스템 -> 지도 레이블링 시스템 -> 정보 그룹의 이름 콘텐츠 구성 -> 정보 노출의 방식과 순서
- 20. / 51 20 예 : 인스타그램 메뉴 트리 작성 인스타그램 릴스 나의 프로필 새 게시물/ … / 작성 릴스 탐색 나의 프로필 정보 새 릴스 작성 2 프로필 편집 프로필 공유 나의 게시물 내가 태그됨 작성 2 설정 및 활동 나의 릴스 게시물 탐색 + 릴스 탐 색 2 검색 키워드 검색 홈 스토리 리스트 게시물 리스트 좋아요 외 알림 메시지 알림 계정 센터 외 다수 게시물 리스트 키워드 검색 시작 릴스 상세 알림 리스트 메시지 리스트 스토리 상세 새 게시물 작성 시작 새 스토리 작성 시작 새 릴스 작성 시작 새 라이브 작성 시작 새 릴스 작성 시작 2 계층 구조와 레이블링 시스템의 관계
- 21. 정보 설계(IA), 구성 요소 / 51 21 출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>, 197p 정보 구조 -> 정보의 분류 유형 내비게이션 시스템 -> 지도 레이블링 시스템 -> 정보 그룹의 이름 콘텐츠 구성 -> 정보 노출의 방식과 순서
- 22. 콘텐츠 구성 정보의 순서와 정렬을 어떻게 결정지을 것인가 최신 순 구성 가나다 순 구성 주제 별 구성 / 51 22
- 23. 과제 Critique 정보 설계의 이해 2 실습 UX Tool 레슨 / 51 23
- 24. 6주 차, <실습> 주요 Task 2 ~ 3 가지 소개 / 51 24 주요 Task 1. 나의 게시물 작성 1 2 나의 게시물 작성 진입 1 4 나의 게시물, 글 작성 중 1 3 1 나의 게시물, 이미지 작성 중 1 5 나의 게시물, 공유 완료 1 1 홈
- 25. 와이어프레임 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 7주 차, <실습> 주요 Task 2 ~ 3 가지 Wireframe 제작 / 51 25 주요 Task 1. 나의 게시물 작성 1 2 나의 게시물 작성 진입 1 4 나의 게시물, 글 작성 중 1 3 1 나의 게시물, 이미지 작성 중 1 5 나의 게시물, 공유 완료 1 1 홈 출처 : 7주차과제_B_2_와이어프레임_줌_홍길동.xd
- 26. 6주 차, <실습> 주요 Task 2 ~ 3 가지 소개 / 51 26 주요 Task 2. 팔로잉 대상 찾기 3 2 키워드 검색 진입 3 4 키워드 입력 중 3 1 홈 3 3 키워드 입력 대기 3 5 키워드 검색 결과
- 27. 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 / 51 27 주요 Task 2. 팔로잉 대상 찾기 3 2 키워드 검색 진입 3 4 키워드 입력 중 3 1 홈 3 3 키워드 입력 대기 3 5 키워드 검색 결과 와이어프레임 와이어프레임 스크린샷으로 교체 출처 : 7주차과제_B_2_와이어프레임_줌_홍길동.xd 7주 차, <실습> 주요 Task 2 ~ 3 가지 Wireframe 제작
- 28. 6주 차, <실습> 주요 Task 2 ~ 3 가지 소개 / 51 28 주요 Task 3. 나의 게시물 / 나의 댓글에 좋아요 보기 2 2 1 나의 게시물에 좋아요 알림 2 2 2 나의 댓글에 좋아요 알림 2 3 1 나의 게시물에 좋아요 보기 2 3 2 나의 댓글에 좋아요 보기 2 1 홈
- 29. / 51 29 주요 Task 3. 나의 게시물 / 나의 댓글에 좋아요 보기 2 2 1 나의 게시물에 좋아요 알림 2 2 2 나의 댓글에 좋아요 알림 2 3 1 나의 게시물에 좋아요 보기 2 3 2 나의 댓글에 좋아요 보기 2 1 홈 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 출처 : 7주차과제_B_2_와이어프레임_줌_홍길동.xd 7주 차, <실습> 주요 Task 2 ~ 3 가지 Wireframe 제작
- 30. 7주 차, <실습> Wireframe 참고용입니다. / 51 30
- 31. / 51 31 7주 차, <실습> Wireframe 참고용입니다.
- 32. Wireframe이란? 사용자가 사용할 서비스의 화면을 약식으로 보여주는 방법. 들어갈 콘텐츠, 콘텐츠의 배치 등 간단히 보여주는 일. 실제 화면과 동일할 필요는 없음. 간단한 선, 도형, 문자를 이용함. Gray 톤으로 제작. 디자인 요소를 가미하지 않음. / 51 32
- 33. 7주 차, <실습> 주요 Task 2 ~ 3 가지 Wireframe 제작 / 51 33 팀 프로토타입 중간 고사 준비 차 Wireframe은 팀원 모두가 XD로 제작해서 제출합니다. - 개인 과제 ❶ Gray 톤의 Wireframe ONLY. ✦ No Color / ✦ No Real Image / ✦ No Real Text / ✦ No Real Data. - 중간 고사 범위 아님. ❷ 디자인 모드에서 아트보드 제작 ONLY. ✦ 프로토타입 모드에서 인터랙션 제작하지 말 것 - 다음 주 과제임. ❸ 메뉴 트리 기준. 아트보드 이름 작성 그리고 구조가 보이도록 정렬할 것. ✦ 다음 화면 참조. ❹ 왼쪽 패널 색상, 문자 스타일, 구성 요소를 정리할 것. ✦ 패널 내 요소 위 > 마우스 우 클릭 > 캔버스에서 강조 표시 메뉴 이용. ✦ 최소한으로 운영이 핵심. ❺ 제출 파일명 준수. ✦ 다음 화면 참조.
- 34. / 51 34 ❸ 아트보드명 : 메뉴 트리 기준. 메뉴 명으로 작성 / 51 34 7주 차, <실습> 주요 Task 2 ~ 3 가지 Wireframe 제작 7주차과제 팀 번호 와이어프레임 서비스명 이름 7주차과제 B 2 와이어프레임 줌 홍길동 ❺ 파일명 : ❹ ❹ ❹
- 35. 7주 차, <실습> 주요 Task 2 ~ 3 가지 Wireframe 제작 / 51 35 1 개인 파일 제출 방법 : 스마트 출석부 > … > 과제 2 제출 기한 : 10월 27일 일요일 오후 11시 59분까지 3 팀 파일 PPT 제출 방법과 제출 기한 : 이전과 동일 10월 28일 월요일 오후 10시까지
- 36. 7주 차 과제 -이몽룡 (팀원 순서는 가나다 순으로 정렬) / 51 36
- 37. 와이어프레임 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 7주 차, <실습> 주요 Task 2 ~ 3 가지 Wireframe 제작 / 51 37 주요 Task 1. 나의 게시물 작성 1 2 나의 게시물 작성 진입 1 4 나의 게시물, 글 작성 중 1 3 1 나의 게시물, 이미지 작성 중 1 5 나의 게시물, 공유 완료 1 1 홈 출처 : 7주차과제_B_2_와이어프레임_줌_이몽룡.xd
- 38. 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 / 51 38 주요 Task 2. 팔로잉 대상 찾기 3 2 키워드 검색 진입 3 4 키워드 입력 중 3 1 홈 3 3 키워드 입력 대기 3 5 키워드 검색 결과 와이어프레임 와이어프레임 스크린샷으로 교체 7주 차, <실습> 주요 Task 2 ~ 3 가지 Wireframe 제작 출처 : 7주차과제_B_2_와이어프레임_줌_이몽룡.xd
- 39. / 51 39 주요 Task 3. 나의 게시물 / 나의 댓글에 좋아요 보기 2 2 1 나의 게시물에 좋아요 알림 2 2 2 나의 댓글에 좋아요 알림 2 3 1 나의 게시물에 좋아요 보기 2 3 2 나의 댓글에 좋아요 보기 2 1 홈 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 7주 차, <실습> 주요 Task 2 ~ 3 가지 Wireframe 제작 출처 : 7주차과제_B_2_와이어프레임_줌_이몽룡.xd
- 40. 7주 차 과제 -홍길동 / 51 40
- 41. 와이어프레임 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 7주 차, <실습> 주요 Task 2 ~ 3 가지 Wireframe 제작 / 51 41 주요 Task 1. 나의 게시물 작성 1 2 나의 게시물 작성 진입 1 4 나의 게시물, 글 작성 중 1 3 1 나의 게시물, 이미지 작성 중 1 5 나의 게시물, 공유 완료 1 1 홈 출처 : 7주차과제_B_2_와이어프레임_줌_홍길동.xd
- 42. 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 / 51 42 주요 Task 2. 팔로잉 대상 찾기 3 2 키워드 검색 진입 3 4 키워드 입력 중 3 1 홈 3 3 키워드 입력 대기 3 5 키워드 검색 결과 와이어프레임 와이어프레임 스크린샷으로 교체 7주 차, <실습> 주요 Task 2 ~ 3 가지 Wireframe 제작 출처 : 7주차과제_B_2_와이어프레임_줌_홍길동.xd
- 43. / 51 43 주요 Task 3. 나의 게시물 / 나의 댓글에 좋아요 보기 2 2 1 나의 게시물에 좋아요 알림 2 2 2 나의 댓글에 좋아요 알림 2 3 1 나의 게시물에 좋아요 보기 2 3 2 나의 댓글에 좋아요 보기 2 1 홈 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 와이어프레임 스크린샷으로 교체 7주 차, <실습> 주요 Task 2 ~ 3 가지 Wireframe 제작 출처 : 7주차과제_B_2_와이어프레임_줌_홍길동.xd
- 44. <실습> Q. 질문 사항? 작성하기 / 51 44
- 45. <실습> Q. 알게된 점? 작성하기 / 51 45
- 46. / 51 46 매주 과제를 쌓아서 제출하겠습니다. 1 지난 과제 뒤에 금주 과제를 붙여 주세요. 예 : 2 매주 과제는 20장을 넘기지 않습니다. 3 중간 과제, 장수 제한이 있습니다. 재정리가 필요 합니다. 7주 차, <과제> 제출
- 47. / 51 47 매주 Critique이 있습니다. 1 발표 팀 : B 4 카카오웹툰 , B 5 쓰레드 A 3 넷플릭스 , A 5 유튜브 순서로 발표합니다 . 2 피드백 시간을 위해 지난 과제를 포함해서 간결하게 발표합니다. 3 발표는 1인이 10분 내외로 준비합니다. 스크립트를 읽지 않습니다. 7주 차, <과제> 발표
- 48. 중간 과제 1. 팀 해체 서비스 발표와 시연 발표와 시연 준수사항은 다음 주에 공지 예정. / 51 48
- 49. 중간 과제 2. 기말 과제 후보군 2개 준비 남은 2주 동안 준비할 수 있게 미리 공지합니다. 이런 앱을 만들겠습니다. 중간 과제보다 더 가벼운 앱을 고민합니다. 기말까지 못 끝내요… 단, 참신성 을 평가합니다. - 예 : 날씨 O - 기본 정보 API Information 앱 - 예 : IoT O - 기기 Pairing Monitoring 앱 - 예 : 해피포인트 X, 토스 X 과도한 사전 조사를 금지합니다. 중간 고사에서 후보군만 발표하고 다음 수업에 피드백과 함께 할 일이 있습니다. / 51 49
- 50. 과제 Critique 정보 설계의 이해 실습 UX Tool 레슨 / 51 50
- 51. kwonjeongeun naver.com / 51 51 끝. 다음 주 과제 : - 과제 제출 및 발표 준비 - UX Tool 레슨 6강 복습