Web Interaction

1. Web Interaction 성공적인 사용자 환경 구축

2. 목 차 • UI란? • UI를 고려한 디자인의 필요성 • 성공적인 UI 디자인을 위한 방법 • 인간은 복합/복잡성의 집약(HCI,인지공학,인간공학)- HCI- 인지공학- 인간공학

3. 목 차 • 인간의 정보처리 • 환경과 스트레스 (VDT 증후군) • Universal Design • UI분석과 평가 • 효과적 UI 제작을 위한 방법- 거짓말 하지 않는 정보- 편리성의 기준 - 기술적 저변

4. ● UI란? • 사람과 시스템간의 접점. • 사용자와 각각의 시스템 사이의 정보채널.

5. ● UI 설계란? 사용하기 편한 시스템을 만들기 위해 사용자와 시스템 사이의 상호 정보 교환 의 문제점을 지각적, 인지적 측면에서 밝혀내고 이를 체계화하여 설계, 디자인 하고 평가하는 것을 의미

6. ● UI를 고려한 디자인의 필요성 • 개발자 중심에서 사용자 중심으로의 변화 • 고성능 PC의 보급 및 인터넷 확산 • 개발 생산성 향상 • 비용절감에 대한 압력증가 • User Interface Design 적인 해결의 필요성

7. ● UI를 고려한 디자인의 필요성 제이콥 닐슨의 경고만약 더 나은 네비게이션 시스템이 만들어지지 않고 더 엄격한 내부 디자인 표준이 강요되지 않는다면 전세계적으로 나쁜 인트라넷 사용성으로 인한 비용이 2010년까지 약 1000억불로 늘어날 것이라고 예견.

8. ●성공적인 UI 디자인을 위한 방법 사용성은 User가 얻고자 하는 것에 의해 좌우된다. • User가 원하는 것은 무엇인가? • System의 목적이 무엇인가? • 중심 테마는 과연 정보인가? • User가 쉽고 빠른 정보 검색이 가능한가?

9. ●성공적인 UI 디자인을 위한 방법 • User가 원하는 것이 무엇인지 정확하게 정의. • System의 목적이 무엇인지 정의. • 어떤 목적이든 중요한 중심 테마는 정보. • Intranet인 경우 정보자체가 테마. • 성공적인 System은 User가 쉽고 편리하게 원하는 정보를 얻도록 설계. • 실제로 User가 경험하는 것을 테스트하고, 여러번 반복되는 테스트 후 적용.

10. ●인간은 복합/복잡성의 집약 • HCI • 인지공학 • 인체공학

11. 사람과 컴퓨터 기술, 그리고 양자간의 영향을 미치는 방식을 연구하는 학문 ● HCI (Human-Computer Interaction) 사회심리학 인간공학 HCI 컴퓨터공학 인지과학

12. 기억이론 중다기억이론 단기기억 작업기억 장기기억 ●인지공학 물체지각 지각적심리학 공간지각 색채지각 개념, 범주 문제해결 정신물리학적 접근과 신호탐지이론 형태재인 지능, 창의성

13. ●인체공학 • 물리적 특성을 사용자의 정보처리 능력과 수용능력에 맞추는 문제를 다루는 학문 • 인간의 생리적, 심리적, 신체적 특성과 한계를 정량적으로(quantitatively) 파악하여 이것을 시스템, 환경, 제품 등에 응용하는 학문 • Designing for Human Use

14. ●인체공학 비 인간공학적 디자인 인간공학적 디자인

15. ●인체공학 신체적 특성 안전성 편리성 효율성 쾌적성 생리적 특성 심리적 특성

16. ●인체공학 • 대한 인간 공학회지 • 대한 산업 공학회지 • 대한 공업 경영학회지 • Human Factors • Ergonomics • Applied Ergonomics • International Journal of Industrial Ergonomics

17. ●인간의 정보처리 인간의 정보처리에 관한 거시적 모형 인간의 에러 모형

18. ●환경과 스트레스 (VDT 증후군) • VDT 증후군이란? VDT 작업과 관련된 건강상의 문제를 총칭해서 부르는 말로 주로 VDT의 시각적 환경과 관련되어 나타나는 안과적 장애, 일정한 신체의 반복 작업 및 정적인 작업 자세 등이 원인이 되어 나타나는 근골격계의 장애, 업무적 특성과 관련되어 나타나는 정신적 스트레스 그리고 아직 논란이 계속되고 있지만 전자파의 노출에 의한 건강 장애 등을 들 수 있다.

19. ●환경과 스트레스 (VDT 증후군) • 잘못된 사무공간 디자인 • 건조하며 부적절한 환기시설 • 질이 좋지 않은 모니터 • 컴퓨터 사용자의 잘못된 시력교정 • 사용자의 바르지 못한 자세 • 반복적인 키보드 입력작업과 고정된 자세 • 서의 지속된 동작(정적인 자세) • 무리한 작업 –휴식부족 • 사용자에게 맞춰지지 않은 작업공간

20. ● Universal Design • Universal Design의 원칙 동등한 사용 (equitable use) 사용상의 융통성 (flexibility in use) 손쉬운 이용 (simple and intuitive use) 지각할 수 있는 정보 (perceptible information) 안정성 (tolerance for error) 힘들지 않은 조작 (low physical effort) 적당한 크기와 공간 (size and space for approach and use)

21. ● UI분석과 평가 1. 제작자의 분석 • 분석 어떤 제품의 사용성을 위해 UI 작업을 하려면 먼저 분석 단계를 거쳐야 한다. 이것은 기존의 제품의 모습이나 상황에 대한 분석을 넘어서 그 제품을 만드는 제작자군과 제품을 사용하는 (혹은 사용 예정인 잠재고객 포함) 사용자군의 분석을 모두 의미한다. • 제작자의 요구사항 기존의 제품에 대해 제작자들이 알고 있는 내용 및 제작자의 입장에서 해소하고 싶은 문제점과 제작 의도, 마케팅 전략 등의 사항을 정확하게 이해하기 위한 작업이다.

22. ● UI분석과 평가 • 주의점 어떤 프로젝트의 수행에서도 마찬가지겠지만 특히 사용자의 의견을 대변하는 사용성 테스트의 진행에서 오류를 범해야 하지 말 것은 바로 사용자만을 대변하여 그 사용성만을 추구하지 말아야 한다는 것이다. • 어떻게 만들 것인가? 제작 및 관계자들에게 “제품의 사용성 작업을 위한 설문조사”를 실시한다. 각 sheet는 다음과 같은 항목과 목적으로 제작되어 있다.

23. 제작 그룹이 생각하는 사이트의 비전 및 목적 타겟 사용자 층과 실제 운영팀에서 파악된 사용자 그룹 및 성향 사이트의 성격을 드러내는 단어 및 칼라 호감가는 타 사이트에 대한 언급 이 사이트에 포함되는 각 요소에 대한 매트리스 중요도 ● UI분석과 평가

24. ● UI분석과 평가 1. 사용자의 요구 • 요구사항 제품을 결국 사서 이용하는 마지막은 사용자의 몫이기 때문이다. 사용자에 대한 분석이 세밀할수록 제품은 사용자의 위주로 디자인될 것이다. 도널드 노먼은 그의 저서 “The Design of Everyday Things(1998)”에서 사용자의 선지식과 경험은 다음의 재품을 배우고 사용하는데 영향을 준다고 하였다. 사용자의 고려는 제품의 주요 요소가 무엇인지 정의하는데 많은 도움이 된다. 기존의 제품에 대해 제작자들이 알고 있는 내용 및 제작자의 입장에서 해소하고 싶은 문제점과 제작 의도, 마케팅 전략 등의 사항을 정확하게 이해하기 위한 작업이다.

25. ● UI분석과 평가 • 어떻게 만들 것인가? 기존의 방문 사용자 데이터를 분석한다. 이것은 제품을 사용했던 사용자들의 패턴을 짐작 할 수 있도록 도와준다. 또한 임의의 기간에 해당하는 제품 관련 콜센터나 의문 사항에 관한 메일 및 우편 접수 내용 등을 조사하고 마지막으로 사용자 시나리오를 작성한다.

26. ● UI분석과 평가

27. ●효과적 UI 제작을 위한 방법 • 보편적 사용성 이란? • 누구를 위한 것인가? • 무엇을 위한 것인가? • 왜 하는가?

28. ●효과적 UI 제작을 위한 방법 네비게이터 메인 메뉴 로그인 서브네비게이터

29. ●효과적 UI 제작을 위한 방법 로그인링크 메인 메뉴 네비게이터

30. ●거짓말 하지 않는 정보 • 신뢰도 높은 링크 구축사용자의 클릭 빈도수를 측정하는 로그활용 • 자신감을 주는 링크사용자가 자신감을 잃어버리도록 하는 것 들은 - 거짓말하는 링크 - 키워드가 없는 것(링크에 있던 단어가 컨텐츠에 없으면 속은 기분이 들것이다.) - 보다 일반적인 컨텐츠 - 예쁘기만 하거나 희미한 링크

31. ●거짓말 하지 않는 정보 • 확실한 UI를 짧은 시간에 만들기 실제 사용자를 실제 사이트에 테스트 (이벤트형식으로 실제 사용자로부터 사용성 피드백) • 잘못된 UI를 아는 방법 - 사용자가 길을 잃었다는 신호 - Back button을 사용한다. - 검색엔진을 사용하여 키워드 검색을 한다. - 홈으로 돌아오는 버튼을 누른다. - 사이트 맵으로 찾아간다.

32. ●거짓말 하지 않는 정보 • 한 페이지에는 하나의 주제에 대한 내용만 있어야 한다. • 액션 버튼들과 링크들은 눈에 잘 띄도록 만들어야 한다. • 결정적으로 중요한 페이지는 깔끔하고 심플한 구성을 항상 유지해야 한다. • 사용자가 쉽게 읽을 수 있도록 영어의 산세리프체 같은 심플하고 명료한 글씨체, 그룹 박스와 여유 공간을 사용하라. • 다운로드 시간을 줄이기 위해 그래픽을 최소화한다. • 로고를 클릭하면 home으로 갈 수 있도록 만든다. • 페이지의 타이틀은 명시된 버튼이나 링크와 같아야 한다. • 모든 입력 페이지에는 취소버튼을 제공하고 모든 메시지 페이지에는 뒤로 가기 버튼이 있어야 한다. • 기술적 용어(자바, 자바 스크립트, 애플렛 등) 을 피해야 한다. • 개발 전에 Prototype에 의한 Mock-up 테스트와 사용성(Usability) 테스트 등으로 사용자와 충분히 교류해야 한다.

33. ●거짓말 하지 않는 정보 • 가시성과 독이성(읽기 쉬움) 중요한 링크와 액션은 가시적이고 명백하게 만들어야 한다. 사용자들의 “훑어 읽기”를 감안하여 하이라이트 글자를 사용, 뷰렛화 된 리스트, 짧은 문장 등으로 디자인한다. • 간결성 빈번하거나 결정적인 업무들은 짧고 간단하게 유지한다. 용어는 사용자의 언어를 기초로 하는 것이 좋다. 기억하라. 짧게 적을수록 효과는 크다. • 실행 아직 인터넷 접근환경을 33.6kb 이하로 선호하는 반 이상의 사용자들을 위해 다운로드가 빠르도록 디자인한다.

34. ●거짓말 하지 않는 정보 • 네비게이션과 조직성 모든 페이지마다 [계속하기], [취소하기] 또는 [뒤로 가기] 그리고 [home]으로 갈 수 있는 명확한 방법을 공급한다. 사용자가 위치를 계속적으로 정보 받을 수 있는 효과적인 페이지 타이틀을 제공해야 한다. 페이지간을 조직적으로 배열하여 정보가 서로 그룹화 되고 접근하기 용이하도록 연계되어야 한다. • 일관성 비슷한 과업은 같은 맥락으로 수행되는 것이 좋다.

35. ●거짓말 하지 않는 정보 • 피드백(feedback) 문제가 생겼을 때, 메시지는 사용자에게 정확히 무엇이 오류인지, 그리고 어떻게 고쳐야 하는지를 사용자가 이해할 수 있는 언어로 전달해야 한다. • 관용 사용자가 실수한 것에 대한 최소한의 비용을 허용하는 시스템을 제공하고 또한 사용자들의 실행취소(undo)를 허락해야 한다.

36. ●편리성의 기준 • 링크의 품질을 높이는 방법 - 컨텐츠 링크 : 컨텐츠를 포함하는 페이지로 간다.- 카테고리 링크 : 다른 링크의 우선적으로 포함하는 페이지로 간다. - 키워드 링크 : 검색의 부분으로 사용자가 입력하는 것이다. - 백 혹은 홈 링크 : 홈이나 먼저 방문한 페이지로 간다. • 링크를 신호로 만드는 방법 단어와 문장간 핵심적 문맥이라 하더라도 보는이에 따라 다르게 판단함으로 내부 직원들의 전체적 경험을 토대로 디자이너가 판단.

37. ●편리성의 기준 • 스캐닝(훑어 보기)를 도울 수 있는 방법 - 링크의 그룹핑 : 사용자들은 비슷한 아이템들을 서로 관련된 것으로 인식한다. 링크 그룹이 많은 웹 페이지가 능률적이다.(컨텐츠 링크 그룹이 잘 되어 있는 사이트는 이다.)

38. ●편리성의 기준 대륙권별뉴스 이슈

39. 스캐닝(훑어 보기)를 도울 수 있는 방법 - 구조화된 목록 : 사용자에 따라 공통의 분류나 친숙한 영역들을 구조화 한다. ●편리성의 기준

40. ●편리성의 기준 • 스캐닝(훑어 보기)를 도울 수 있는 방법 - 링크의 차별화 : 다른 컨텐츠로 이끄는 링크는 그 차이점을 명확하게 차별화하는 것이 필요하다.

41. ●편리성의 기준 성격이 다른 링크 성격이 다른 링크

42. ●편리성의 기준 • 배너처럼 보여서 간과되는 중요한 정보들 - 배너처럼 보여서 간과되는 중요한 정보들 http://travel.chosun.com

43. ●편리성의 기준 • 링크 가능한 영역의 크기와 거리 - 웹페이지에서 버튼이 너무 작아서 클릭하기 원하는 것을 제대로 클릭하지 못하거나, text 주위의 background를 클릭했으나 클릭되지 않는 경우가 종종있다. - 커서가 버튼까지 움직이는 시간은 거리에 비례하고 버튼의 크기에 반비례한다.

44. ●편리성의 기준 • 사용자들은 긴 화면을 스크롤한다 - 화면 공간에 맞추기 위해 정보를 임의로 줄인다. 사용자는 내용 파악에 어려움을 느낀다. - 하나의 화면을 몇 개의 페이지로 나눈다. 사용자는 다음 페이지가 로딩될 때까지 기다리는 것보다 다소 길어진 페이지를 스크롤하며 훑어보는 것을 더 선호한다. 사용자들은 스크롤 자체를 기피하지는 않는다는 것이다. 하지만, 스크롤 바가 있는 긴 페이지에는 반드시 사용자들 이 원하는 정보를 찾을 수 있도록 이끌어주는 요소로서의 ‘향기(scent)’가 있어야 한다.

45. ●기술적 저변 • 명확한 단계를 요구하는 입력폼 - 문화와 정서를 기반으로 제작

46. ●기술적 저변 • 마우스오버 만들기 사용자가 사용할 마우스의 위치를 생각해 볼 때 대부분 상하로 생기는 스크롤을 움직이기 위해서 마우스의 포인터는 오른쪽 스크롤 바에 가 있다. 마우스가 마우스오버를 하지 않았을 경우에는 숨겨져 있는 정보를 볼 수가 없지 않을까? 그러므로 마우스오버하기 전에 이미 떠 있어야 하는 정보를 굳이 마우스오버 후에 나타나도록 숨겨진 정보로 만들 필요는 없다.

47. ●기술적 저변 • 풀다운 메뉴 만들기 새로운 사용자들을 위하기 보다는 기존의 사용자들이 빨리 자신이 원하는 메뉴로 점프(Jump)하게 끔 하는 역할로 사용하는 것이 좋다. 또한, 사용자 자신이 자기만의 풀다운 메뉴를 등록 하게끔 하는 것도 괜찮은 방법이다.

48. ●기술적 저변 • 검색엔진의 사용성. (1) 검색엔진이 일으키는 문제들은 다음과 같다. - 사용자에게 컨텐츠가 어떻게 쓰여지고 구성되어 있는지에 대해 이해 할 것을 요구한다. - 검색엔진 스스로가 정보의 향기를 제공하지 않고 있으며 오히려 사용자들 스스로가 향기를 제공해야 한다는 것이다. 검색은 사용자들에게 즉각적인 만족을 주기도 한다. 그러나 사용자가 목적을 달성하는데 얼만큼의 시간을 단축시켜 주는지, 또는 정확하게 목적을 달성하는데 도움을 주는지, 도움을 주기 위해서는 어떤 방법들이 있는지에 대해 디자이너는 고민해야 할 것이다.

49. ●기술적 저변 • 프레임의 실수 프린트를 어렵게 한다. 북마크를 어렵게 한다. 검색엔진에 잘못 등록될 수 있다. 수평 스크롤이 생길 수 있다.

50. ●기술적 저변 • 웹2.0 시대를 살아가는 우리의 고민 1. 사용자가 얼마나 많은 동작을 취하는가? 2. 뒤로가기 버튼을 얼마나 많이 눌러야 하는가? 3. 내가 있는 위치는 잘 파악되는가? 4. 정보의 연결은 정확한가?