스티브 크룩 - (사용자를)생각하게 하지마

(사용자를) 생각하게 하지마! - 스티브 크룩

NEXT 16년도 1학기 UX Design 책 나눔

내용

● 사용성, UX란?● 사용성을 좋게 하기 위해? ‘스티브 크룩의 사용성 제 1원칙’

● 왜 사용성을 좋게 해야 하지? ‘우리가 실제 웹을 사용하는 방법'

● 구체적으로 웹을 어떻게 만들면 될까? ‘광고판처럼, 불필요한 단어도 빼고, 표지판과 빵부스러기를 사용하고, 태그라인도…….’

● 모바일은? ‘재미, 학습용이성, 기억용이성 있게…….’ ● 그래도 기본은 ? ‘기본 사용성, 웹 접근성을 지켜…….’ ● 그럼 만들면 끝인가? ‘적은 비용으로 사용성 평가하기'

사용성, UX란?

사용성 특징으로 유용성, 학습 용이성, 기억 용이성, 유효성, 효율성, 호감도 등등이 있지만…….

평범한 혹은 평균 이하의 능력을 가진 사람이 어떤 물건을 사용해서 무엇인가 하려고 할 때 사용법을 스스로 알아낼 수 있다. 단 투입한 수고에 비해 얻은 가치가 더 커야 한다.

사용성 높이기, 스티브 크룩의 1원칙

사용자를 고민에 빠뜨리지 마라!

설명이 없어도 이해할 수 있는 페이지를 만들어라.

고민이 될 수 있는 항목

● 이 사이트는 뭐 하는 곳이지?● 내가 지금 어디있지?● 어디서 시작해야 하지?● “~”를 어디에 입력해야 하지?● ……..

좋은 UX가 필요한 이유, 실제 웹 사용법

사용자는

- 훑어본다.- 최소 조건만 충족하면 된다.

- 임기응변한다.

출처: <사용자를 생각하게 하지마>, 스티브 크룩

광고판처럼, 불필요한 단어 제거

훑어보기 쉬운 사이트!

- 명확한 계층구조- 관례 사용- 페이지 구역을 뚜렷하게- 클릭 요소를 명확하게 표시

출처: 뉴욕타임즈 웹사이트

https://www.smashingmagazine.com/images/breadcrumbs-design-showcase/location_based_breadcrumb_example_sitepoint.jpg

표지판, 빵부스러기만들기

‘내가 지금 어디 있는지’ 알려준다

출처: https://www.smashingmagazine.com/images/breadcrumbs-design-showcase/location_based_breadcrumb_example_sitepoint.jpg

태그 라인 사용,어떤 기능이 어디에 있는지 명확하게

태그라인이 알려주는 것

- ‘이 사이트는 뭐 하는 곳이지?’

명확하게 표시된 기능이 알려주는 것

- ‘어디서 시작해야 하지?’ - ‘“~”를 어디에 입력해야 하지?’

출처: 에어비엔비 웹사이트

모바일이 웹과 다른 점

기본은 여전하다. 하지만

공간은 더 작고,

사용자는 더 빨리 움직이고 더 적게 읽는다.

재미가 더 있어야 한다.

: 기술을 독창적으로 활용해 진짜로 하고 싶지만, 현실 여건 상 어려운 활동을 하게 해준다.

출처: https://lnsinsight.files.wordpress.com/2014/07/eab7b8eba6bc31.png

공간이 작을 수록중요한 정보를 찾아 넣기

필수적인 기능부터

출처: 에어비엔비 웹사이트

학습 용이성,기억 용이성이 더 중요해져

터치 이벤트 등 웹보다 Interaction이 많기 때문에, 사용자 스스로 사용법을 알아낼 수 있어야 하고, 다음에 사용할 때 익숙해야 한다.출처: http://cfile3.uf.tistory.com/image/244B754B5595EB11197E3B

기본 예절 , 웹 접근성

사이트의 가치를 높이는 일,

평균 이하의 능력을 가진 사용자까지도 생각하며.

기본 예절?

사용성을 구성하는 또 다른 요소, ‘ 사이트가 예의 바르게 작동하고 있는가?’

사이트의 호감을 줄어들게 하는 요소들

● 사용자가 원하는 정보 숨겨두기● 자신이 원하는 방식대로 하지 않는다고 사용자 귀찮게 하기

● 필요하지도 않은 정보 물어보기● 가식적인 표현으로 사용자 기만하기● 홍보용 장치로 작업 방해하기

기본 예절?

사용성을 구성하는 또 다른 요소, ‘ 사이트가 예의 바르게 작동하고 있는가?’

사이트의 호감을 키우는 요소들

● 사용자가 사이트에서 가장 많이 하는 활동을 알아내어, 그 부분을 명확하게 드러내고 사용하기 쉽게 하기

● 사용자가 알고자 하는 정보 공개하기● 궁금해 할 만한 사항을 예측하고, 답 제시하기● 오류가 발생했을 때 쉽게 회복할 수 있게 하기● 해결하지 못한 문제에 대해 사과하기

웹 접근성?

어떠한 사용자, 어떠한 기술 환경에서도

사용자가 전문적인 능력 없이

웹사이트에서 제공하는 모든 정보에

접근할 수 있도록 보장하는 것

: 늘어나는 개발 업무? 디자인 타협?출처: http://nax.naver.com/lowvision/exp_2

웹 접근성?

지금 당장 할 수 있는 것

● 일단, 모두가 혼란스러워 하는 사용성 문제부터 고치기● 쉽게 바꿀 수 있는 것

○ 모든 페이지에 적절한 대체 텍스트 추가하기○ 올바른 헤딩 사용하기○ 폼이 스크린 리더에서도 잘 동작하도록 작성하기○ 각 페이지를 시작할 때 ‘메인 콘텐츠로 넘어가라'는 링크 넣기○ 키보드로 모든 콘텐츠에 접근할 수 있도록 하기○ 텍스트와 배경의 확실한 차이점 만들기○ 접근성 있는 템플릿 사용하기

사용성 평가하기사용성 평가에 대한 몇 가지 진실

훌륭한 사이트를 만들려면 반드시 해야 한다.

평가 참가자가 한 명 뿐이어도 좋다.

그렇게라도 평가하는 것이 아예 안 하는 것보다 언제나 낫다.

DIY 사용성 평가 - 스스로 간단히 할 수 있는 방법

● 평가 시기 : 개발 프로세스 전반에 걸쳐 꾸준히 ! ● 회 당 참가자 수 : 3명● 참가자 선택 방법 : 되는 대로 - 실제 사용자라는 점보다 ‘자주’

하는 게 중요하다.

● 주목적 : 가장 시급한 문제를 구별하고, 다음 평가가 진행되기 전에 수정되도록 업무 할당하기

*더 자세한 내용은 스티브 크룩의

‘스티브 크룩의 사용성 평가 이렇게 하라' 에서

찾을 수 있다.

출처: http://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9788992939560#N

DIY 사용성 평가 이후

일반적으로 발생하는 문제들

● 사용자가 콘셉트를 이해하지 못한다.● 사용자가 찾는 단어가 거기에 없다.● 너무 많은 내용이 들어 있다.

고칠 내용 정할 때, 할 수 있는 일

● 공동 목록 만들기● 가장 심각한 문제 10가지 고르기● 순위 매기기● 새로운 문제를 더하려는 충동 자제하기● 매우 쉽게 고칠 수 있는 문제 따로 정리하기

다시 보는, UX란?

평범한 혹은 평균 이하의 능력을 가진 사람이 어떤 물건을 사용해서 무엇인가 하려고 할 때 사용법을 스스로 알아낼 수 다. 단 투입한 수고에 비해 가치가 더 커야 한다.