인터랙션 조발표 usability · pdf file인터랙션디자인 789 임혜지, ... 비주얼...

USABILITY홍익대학교

인터랙션디자인 789 임혜지, 조희진

CONTENTS

WEB 2.0 1. Web 2.0 이란?

2. 정보?

USABILITY 1. 사용성이란?

2. UX/UI 와 사용성

3. 사용성 요소

3. 사용성의 원리와 의의

4. 사용성의 이익

USABILITY TEST 1. 사용성 테스트란?

2. 제이콥 닐슨의 UI 사용성 평가

EXAMPLE

임혜지, 조희진인터랙션디자인 789

WEB 2.0


웹사이트들의 집합이였던 기존의 Web1.0시대에서 벗어나 하나의 웹이 플랫폼을 구성하는 시대

WEB 2.0 1. Web 2.0 이란?2. 정보?

USABILITY 1. 사용성이란? 2. UX/UI 와 사용성 3. 사용성 요소 4. 사용성의 원리와 의의 5. 사용성의 이익

USABILITY TEST 1. 사용성 테스트란? 2. 제이콥 닐슨의 UI 사용성 평가

EXAMPLE

Web 2.0


이미지 출저: http://wc-z.com/플랫폼의 변화

WEB 2.0 1. Web 2.0 이란?2. 정보?



EXAMPLE

Web 2.0


기존 웹들의 역할뿐만 아니라 독자적인 시스템(플랫폼)을 구성하여 사용자들의 연계를 도와주는 서비스

이미지 출저: http://www.flaticon.com

WEB 2.0 1. Web 2.0 이란?2. 정보?



EXAMPLE

Web 2.0


플랫폼에서는 사용자들이 모이기 때문에 다양한 정보가 생성된다.

Platform

WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE

다양해진 정보


사람들은 이렇게 다양하게 모인 많은 정보를 좀 더 즉각적으로, 쉽게 습득할 필요성이 생겼다.

Platform

Choice!

USABILITY


WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE

Usability


http://blog.fatcow.com/2014/01/29/why-usability-is-important-for-web-design/

WEB 2.0 1. Web 2.0 이란? 2. 정보?

USABILITY 1. 사용성이란?2. UX/UI 와 사용성 3. 사용성 요소 4. 사용성의 원리와 의의 5. 사용성의 이익


EXAMPLE

사용성의 사전적 정의


사용성(使用性) 또는 유용성(有用性)은 어떤 도구나 인간이 만든 물건, 서비스를 어떤 특정 목적을 달성하기 위해 사용할 때에 어느 정도 사용하기 쉬운가를 말하는 용어이다.

즉, 간단하게 "인터페이스의 사용에서 효과성과 효율성에 대해

목표하는 사용자가 느끼는 지각” 이다. –위키피디아

사용자 인터페이스를 디자인할 때 염두 해야하는 중요한 부분

WEB 2.0 1. Web 2.0 이란? 2. 정보?

USABILITY 1. 사용성이란?2. UX/UI 와 사용성 3. 사용성 요소 4. 사용성의 원리와 의의 5. 사용성의 이익


EXAMPLE

사용성의 정의


‘쉬운 사용 (ease-of-use)’ 또는‘더 나은 사용 (better use)’을 지향하는 개념에서

‘더 나은 경험(better experience)’으로향상시켜야 할 개념

WEB 2.0 1. Web 2.0 이란? 2. 정보?

USABILITY 1. 사용성이란? 2. UX/UI 와 사용성3. 사용성 요소 4. 사용성의 원리와 의의 5. 사용성의 이익


EXAMPLE

Quiz !


http://www.measuringu.com/blog/evaluating-ux.php

WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE

UI / UX / Usability


http://www.measuringu.com/blog/evaluating-ux.php

WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE

Quiz !


http://www.slideshare.net/samerdissoky/ux-ui-and-us-v12

WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE

UI / UX / Usability


UI US UX

벽돌 사용하기 쉽게하다 한계 없는 표현

http://www.slideshare.net/samerdissoky/ux-ui-and-us-v12

WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE

UI / UX / Usability


UI Usability UX

WEB 2.0 1. Web 2.0 이란? 2. 정보?

USABILITY 1. 사용성이란? 2. UX/UI 와 사용성 3. 사용성 요소4. 사용성의 원리와 의의 5. 사용성의 이익


EXAMPLE

사용성의 요소


학습성 효율성 기억성

실수 만족

처음 디자인을 접했을 때,기본적인 작업을 수행하는데 있어얼마나 수월한가?

사용자가 디자인을 충분히 학습 한 후, 주어진 일을얼마나 빨리 마칠 수 있는가?

디자인 사용 후 일정 시간이 지난 후 재사용 할 때, 사용자는 해당 디자인에 얼마나 빨리 적응할 수 있는가?

사용자가 얼마나 많은 실수를 하며, 이런 실수는 얼마나 치명적인가? 얼마나 빨리 회복이 가능한가?

디자인을 사용하는 것이 얼마나만족스러운 경험인가?

http://blog.naver.com/khagaa/30030073019

WEB 2.0 1. Web 2.0 이란? 2. 정보?

USABILITY 1. 사용성이란? 2. UX/UI 와 사용성 3. 사용성 요소4. 사용성의 원리와 의의 5. 사용성의 이익


EXAMPLE

사용성의 요소_ 사례


http://blog.naver.com/khagaa/30030073019

아다마스 카드 범퍼 케이스

제품/서비스와 사용자 간의 상호교감의 경험을 연구하고 이해하여

전통적인 회사 주도의 시장 조사에서는 얻지 못했던

통찰의 지식을 가질 수 있게 한다.

사용성의 의의


WEB 2.0 1. Web 2.0 이란? 2. 정보?

USABILITY 1. 사용성이란? 2. UX/UI 와 사용성 3. 사용성 요소 4. 사용성의 의의5. 사용성의 이익


EXAMPLE

사용성이 시장에 주는 이익 / 부가


WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE

제품 판매량이 증가한다

아이패드, 아이폰 이미지



WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE

제품 판매량이 증가한다

http://thegear.co.kr/8131



같은 기업의 타제품 판매를 촉진한다

WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE

+



기업의 이미지가 강화된다.

WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE



WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE

그 외에도,

제품 지원비 감소제품 교육비 감소사내 제품의 비용 절감


USABILITY TEST

http://www.netinstall.net/trends/another-important-detail-of-website-design-is-the-usability/

사용성 테스트란?


WEB 2.0 1. Web 2.0 이란? 2. 정보?


USABILITY TEST 1. 사용성 테스트란?2. 제이콥 닐슨의 UI 사용성 평가

EXAMPLE

사용성 테스트란 사용자 리서치를 통해 선정된 테스트 참여자들에게 서비스 내 중요한 태스크를 몇 가지 제시한 후, 참여자가 해당 태스크들을 수행하는 과정을 관찰, 분석하여 서비스의 전반적인(또는 각 태스크) 장단점 및 개선 방향 등을 알아보는 방법

사용성 테스트(Usability Test)란?


WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE

TASK

위 설명에서와 같이 사용성 테스트를 실시하는 목적은 참여자의 태스크 수행 과정을 관찰함으로써 서비스 사용 패턴의 흐름을 파악하고, 수정되어야 할 프로세스를 확인 후 개선하기 위함이다

사용성 테스트(Usability Test)의 목적


WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE

1. 가시성 : 상황과 사용자의 행동 및 결과에 대한 정보를 제공하는가?피드백의 존재 유무 / 피드백의 명확성 / 피드백의 즉시성

2. 실제 사용환경에 적합한 시스템 : 사용자가 상식적으로 납득할 수 있는 시스템, 단어, 글을 사용하고 있는가?

3. 사용자에게 주도권 제공 : 사용자가 원하는 컨트롤을 자유롭게 할 수 있는가?

4. 일관성과 표준화 : 일관되고 표준화된 체계가 있는가?

5. 오류 예방 : 오류가 발생할 가능성은? 오류 발생 시 치명적인 영향을 미치는가?

6. 유연성과 효율성 (즉각적인 인지) : 보는 즉시 이것이 무엇인지 알아야 한다.

7. 융통성 : 사용방법이 불편할 경우 대안이 있는가?

8. 비주얼 : 디자인적으로 완성도가 있는가?

9. 에러 해결 : 오류 발생기 쉽고 빠르게 해결할 수 있는가?

10. 보충설명 : 도움말과 보충 설명이 있는가?

제이콥 닐슨의 UI 사용성 평가 체크리스트


WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE


EXAMPLE

복잡한 웹사이트


WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE


롤리 키보드

엘지전자의 롤리 키보드

http://www.macguyver.co.kr/2015/11/lg-5.html

WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE


롤리 키보드

WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE


iOS 10 음악 앱

WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE


iOS 10 음악 앱

“ 수 많은 사람들이 iOS 10 음악 앱에서 셔플과 반복 재생(Repeat)

버튼이 도대체 어디에 위치해 있는지 물어보고 있다. 실제로도 찾기

가 쉽지 않다. "

- Kirk McElhearn, 맥월드 컬럼니스트

"문제는 버튼을 드러내려면 화면을 위로 쓸어 올려야 하는데, 화면을 쓸어 올려야 하는 걸 암시하는 그 어떤 시각적 표시가 없다는 점이다. 단지 보기만 해서는, 무언가를 드러내기 위해 화면을 쓸어 올려야 한다는 걸 추측할 만한 이유가 없다."

- John Gruber, Daring Fireball 운영자

WEB 2.0 1. Web 2.0 이란? 2. 정보?



EXAMPLE

http://www.mcelhearn.com/how-to-find-the-shuffle-and-repeat-buttons-in-the-ios-10-music-app/

http://daringfireball.net/linked/2016/09/16/mcelhearn-shuffle-repeat

Thank you !


인터랙션 조발표 usability · pdf file인터랙션디자인 789 임혜지, ... 비주얼...

Documents