51
Web Web Interaction Interaction 성성성성 성성성 성성 성성

Web Interaction

Embed Size (px)

DESCRIPTION

Web Interaction. 성공적인 사용자 환경 구축. 목 차. UI 란 ? UI 를 고려한 디자인의 필요성 성공적인 UI 디자인을 위한 방법 인간은 복합 / 복잡성의 집약 (HCI, 인지공학 , 인간공학 ) - HCI - 인지공학 - 인간공학. 목 차. 인간의 정보처리 환경과 스트레스 (VDT 증후군 ) Universal Design UI 분석과 평가 효과적 UI 제작을 위한 방법 - 거짓말 하지 않는 정보 - 편리성의 기준 - 기술적 저변. ● UI 란 ?. - PowerPoint PPT Presentation

Citation preview

Page 1: Web Interaction

Web Web InteractionInteraction성공적인 사용자 환경 구축

Page 2: Web Interaction

목 차목 차• UI 란 ?• UI 를 고려한 디자인의 필요성• 성공적인 UI 디자인을 위한 방법• 인간은 복합 / 복잡성의 집약

(HCI, 인지공학 , 인간공학 )- HCI- 인지공학- 인간공학

Page 3: Web Interaction

목 차목 차• 인간의 정보처리• 환경과 스트레스 (VDT 증후군 )• Universal Design • UI 분석과 평가• 효과적 UI 제작을 위한 방법

- 거짓말 하지 않는 정보- 편리성의 기준 - 기술적 저변

Page 4: Web Interaction

● ● UIUI 란란 ??

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

Page 5: Web Interaction

● ● UI UI 설계란설계란 ??

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

Page 6: Web Interaction

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

필요성

Page 7: Web Interaction

● ● UIUI 를 고려한 디자인의 필요성를 고려한 디자인의 필요성

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

Page 8: Web Interaction

● 성공적인 UI 디자인을 위한 방법사용성은 User 가 얻고자 하는 것에 의해 좌우된다 .

• User 가 원하는 것은 무엇인가 ?• System 의 목적이 무엇인가 ?• 중심 테마는 과연 정보인가 ? • User 가 쉽고 빠른 정보 검색이

가능한가 ?

Page 9: Web Interaction

● 성공적인 UI 디자인을 위한 방법• User 가 원하는 것이 무엇인지 정확하게 정의 . • System 의 목적이 무엇인지 정의 . • 어떤 목적이든 중요한 중심 테마는 정보 . • Intranet 인 경우 정보자체가 테마 . • 성공적인 System 은 User 가 쉽고 편리하게

원하는 정보를 얻도록 설계 . • 실제로 User 가 경험하는 것을 테스트하고 ,

여러번 반복되는 테스트 후 적용 .

Page 10: Web Interaction

● 인간은 복합 / 복잡성의 집약

• HCI• 인지공학• 인체공학

Page 11: Web Interaction

● HCI (Human-Computer Interaction)

사람과 컴퓨터 기술 , 그리고 양자간의 영향을미치는 방식을 연구하는 학문

사회심리학 인간공학

컴퓨터공학 인지과학

HCI

Page 12: Web Interaction

지각적심리학

● 인지공학

기억이론

중다기억이론 단기기억

작업기억 장기기억색채지각

물체지각

공간지각

정신물리학적 접근과 신호탐지이론 개념 , 범주 문제해결

형태재인 지능 , 창의성

Page 13: Web Interaction

● 인체공학

• 물리적 특성을 사용자의 정보처리 능력과 수용능력에 맞추는 문제를 다루는 학문

• 인간의 생리적 , 심리적 , 신체적 특성과 한계를 정량적으로 (quantitatively) 파악하여 이것을 시스템 , 환경 , 제품 등에 응용하는 학문

• Designing for Human Use

Page 14: Web Interaction

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

인간공학적 디자인

Page 15: Web Interaction

● 인체공학

생리적 특성

신체적 특성

심리적 특성

안전성

편리성

효율성

쾌적성

Page 16: Web Interaction

● 인체공학• 대한 인간 공학회지• 대한 산업 공학회지• 대한 공업 경영학회지

• Human Factors• Ergonomics• Applied Ergonomics• International Journal of Industrial

Ergonomics

Page 17: Web Interaction

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

인간의 에러 모형

Page 18: Web Interaction

● 환경과 스트레스 (VDT 증후군 )

• VDT 증후군이란 ? VDT 작업과 관련된 건강상의 문제를 총칭해서

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

Page 19: Web Interaction

● 환경과 스트레스 (VDT 증후군 )

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

Page 20: Web Interaction

● 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)

Page 21: Web Interaction

● UI 분석과 평가1. 제작자의 분석• 분석 어떤 제품의 사용성을 위해 UI 작업을 하려면 먼저 분석

단계를 거쳐야 한다 . 이것은 기존의 제품의 모습이나 상황에 대한 분석을 넘어서 그 제품을 만드는 제작자군과 제품을 사용하는 ( 혹은 사용 예정인 잠재고객 포함 ) 사용자군의 분석을 모두 의미한다 .

• 제작자의 요구사항 기존의 제품에 대해 제작자들이 알고 있는 내용 및

제작자의 입장에서 해소하고 싶은 문제점과 제작 의도 , 마케팅 전략 등의 사항을 정확하게 이해하기 위한 작업이다 .

Page 22: Web Interaction

● UI 분석과 평가

• 주의점 어떤 프로젝트의 수행에서도 마찬가지겠지만 특히

사용자의 의견을 대변하는 사용성 테스트의 진행에서 오류를 범해야 하지 말 것은 바로 사용자만을 대변하여 그 사용성만을 추구하지 말아야 한다는 것이다 .

• 어떻게 만들 것인가 ? 제작 및 관계자들에게 “제품의 사용성 작업을 위한

설문조사”를 실시한다 . 각 sheet 는 다음과 같은 항목과 목적으로 제작되어 있다 .

Page 23: Web Interaction

● UI 분석과 평가1. 제작 그룹이 생각하는

사이트의 비전 및 목적2. 타겟 사용자 층과 실제

운영팀에서 파악된 사용자 그룹 및 성향

3. 사이트의 성격을 드러내는 단어 및 칼라

4. 호감가는 타 사이트에 대한 언급

5. 이 사이트에 포함되는 각 요소에 대한 매트리스 중요도

Page 24: Web Interaction

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

Page 25: Web Interaction

● UI 분석과 평가

• 어떻게 만들 것인가 ? 기존의 방문 사용자 데이터를 분석한다 . 이것은 제품을

사용했던 사용자들의 패턴을 짐작 할 수 있도록 도와준다 . 또한 임의의 기간에 해당하는 제품 관련 콜센터나 의문 사항에 관한 메일 및 우편 접수 내용 등을 조사하고 마지막으로 사용자 시나리오를 작성한다 .

Page 26: Web Interaction

● UI 분석과 평가

Page 27: Web Interaction

● 효과적 UI 제작을 위한 방법

• 보편적 사용성 이란 ?•누구를 위한 것인가 ?• 무엇을 위한 것인가 ?•왜 하는가 ?

Page 28: Web Interaction

● 효과적 UI 제작을 위한 방법

서브네비게이터

메인메뉴

네비게이터

로그인

Page 29: Web Interaction

● 효과적 UI 제작을 위한 방법

네비게이터

로그인링크

메인메뉴

Page 30: Web Interaction

● 거짓말 하지 않는 정보• 신뢰도 높은 링크 구축

사용자의 클릭 빈도수를 측정하는 로그활용

• 자신감을 주는 링크

사용자가 자신감을 잃어버리도록 하는 것 들은 - 거짓말하는 링크 - 키워드가 없는 것(링크에 있던 단어가 컨텐츠에 없으면 속은 기분이 들것이다 .) - 보다 일반적인 컨텐츠 - 예쁘기만 하거나 희미한 링크

Page 31: Web Interaction

● 거짓말 하지 않는 정보• 확실한 UI 를 짧은 시간에 만들기

실제 사용자를 실제 사이트에 테스트 ( 이벤트형식으로 실제 사용자로부터 사용성 피드백 )

• 잘못된 UI 를 아는 방법

- 사용자가 길을 잃었다는 신호 - Back button 을 사용한다 . - 검색엔진을 사용하여 키워드 검색을 한다 . - 홈으로 돌아오는 버튼을 누른다 . - 사이트 맵으로 찾아간다 .

Page 32: Web Interaction

● 거짓말 하지 않는 정보1. 한 페이지에는 하나의 주제에 대한 내용만 있어야 한다 .2. 액션 버튼들과 링크들은 눈에 잘 띄도록 만들어야 한다 .3. 결정적으로 중요한 페이지는 깔끔하고 심플한 구성을 항상 유지해야 한다 .

4. 사용자가 쉽게 읽을 수 있도록 영어의 산세리프체 같은 심플하고 명료한 글씨체 , 그룹 박스와 여유 공간을 사용하라 .

5. 다운로드 시간을 줄이기 위해 그래픽을 최소화한다 .6. 로고를 클릭하면 home 으로 갈 수 있도록 만든다 .7. 페이지의 타이틀은 명시된 버튼이나 링크와 같아야 한다 .8. 모든 입력 페이지에는 취소버튼을 제공하고 모든 메시지 페이지에는 뒤로 가기 버튼이 있어야 한다 .

9. 기술적 용어 ( 자바 , 자바 스크립트 , 애플렛 등 ) 을 피해야 한다 .

10.개발 전에 Prototype 에 의한 Mock-up 테스트와 사용성 (Usability) 테스트 등으로 사용자와 충분히 교류해야 한다 .

Page 33: Web Interaction

● 거짓말 하지 않는 정보• 가시성과 독이성 (읽기 쉬움 )

중요한 링크와 액션은 가시적이고 명백하게 만들어야 한다 . 사용자들의 “훑어 읽기”를 감안하여 하이라이트 글자를 사용 , 뷰렛화 된 리스트 , 짧은 문장 등으로 디자인한다 .

• 간결성 빈번하거나 결정적인 업무들은 짧고 간단하게 유지한다 . 용어는 사용자의 언어를 기초로 하는 것이 좋다 . 기억하라 . 짧게 적을수록 효과는 크다 .

• 실행 아직 인터넷 접근환경을 33.6kb 이하로 선호하는 반 이상의 사용자들을 위해 다운로드가 빠르도록 디자인한다 .

Page 34: Web Interaction

● 거짓말 하지 않는 정보

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

• 일관성 비슷한 과업은 같은 맥락으로 수행되는 것이 좋다 .

Page 35: Web Interaction

● 거짓말 하지 않는 정보

• 피드백 (feedback) 문제가 생겼을 때 , 메시지는 사용자에게 정확히 무엇이 오류인지 , 그리고 어떻게 고쳐야 하는지를 사용자가 이해할 수 있는 언어로 전달해야 한다 .

• 관용 사용자가 실수한 것에 대한 최소한의 비용을 허용하는 시스템을 제공하고 또한 사용자들의 실행취소 (undo) 를 허락해야 한다 .

Page 36: Web Interaction

● 편리성의 기준 • 링크의 품질을 높이는 방법- 컨텐츠 링크 : 컨텐츠를 포함하는 페이지로 간다 .- 카테고리 링크 : 다른 링크의 우선적으로 포함하는 페이지로 간다 . - 키워드 링크 : 검색의 부분으로 사용자가 입력하는 것이다 . - 백 혹은 홈 링크 : 홈이나 먼저 방문한 페이지로 간다 .

• 링크를 신호로 만드는 방법단어와 문장간 핵심적 문맥이라 하더라도 보는이에 따라 다르게 판단함으로 내부 직원들의 전체적 경험을 토대로 디자이너가 판단 .

Page 37: Web Interaction

● 편리성의 기준

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

Page 38: Web Interaction

● 편리성의 기준

이슈대륙권별뉴스

Page 39: Web Interaction

● 편리성의 기준

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

Page 40: Web Interaction

● 편리성의 기준

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

Page 41: Web Interaction

● 편리성의 기준

성격이 다른 링크

성격이 다른 링크

Page 42: Web Interaction

● 편리성의 기준

• 배너처럼 보여서 간과되는 중요한 정보들 - 배너처럼 보여서 간과되는 중요한 정보들

http://travel.chosun.com

Page 43: Web Interaction

● 편리성의 기준

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

Page 44: Web Interaction

● 편리성의 기준

• 사용자들은 긴 화면을 스크롤한다 - 화면 공간에 맞추기 위해 정보를 임의로 줄인다 .사용자는 내용 파악에 어려움을 느낀다 . - 하나의 화면을 몇 개의 페이지로 나눈다 . 사용자는 다음 페이지가 로딩될 때까지 기다리는 것보다 다소 길어진 페이지를 스크롤하며 훑어보는 것을 더 선호한다 .

사용자들은 스크롤 자체를 기피하지는 않는다는 것이다 . 하지만 , 스크롤 바가 있는 긴 페이지에는 반드시 사용자들이 원하는 정보를 찾을 수 있도록 이끌어주는 요소로서의

‘ 향기 (scent)’가 있어야 한다 .

Page 45: Web Interaction

● 기술적 저변

• 명확한 단계를 요구하는 입력폼 - 문화와 정서를 기반으로 제작

Page 46: Web Interaction

● 기술적 저변

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

Page 47: Web Interaction

● 기술적 저변

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

Page 48: Web Interaction

● 기술적 저변•검색엔진의 사용성 . (1) 검색엔진이 일으키는 문제들은 다음과 같다 . - 사용자에게 컨텐츠가 어떻게 쓰여지고 구성되어 있는지에 대해 이해 할 것을 요구한다 . - 검색엔진 스스로가 정보의 향기를 제공하지 않고 있으며 오히려 사용자들 스스로가 향기를 제공해야 한다는 것이다 .

검색은 사용자들에게 즉각적인 만족을 주기도 한다 . 그러나 사용자가 목적을 달성하는데 얼만큼의 시간을 단축시켜 주는지 , 또는 정확하게 목적을 달성하는데 도움을 주는지 , 도움을 주기 위해서는 어떤 방법들이 있는지에 대해 디자이너는 고민해야 할 것이다 .

Page 49: Web Interaction

● 기술적 저변

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

Page 50: Web Interaction

● 기술적 저변•웹 2.0 시대를 살아가는 우리의 고민

1. 사용자가 얼마나 많은 동작을 취하는가 ?2. 뒤로가기 버튼을 얼마나 많이 눌러야 하는가 ?3. 내가 있는 위치는 잘 파악되는가 ?4. 정보의 연결은 정확한가 ?

Page 51: Web Interaction

감사합니다 .