인터랙 사용자를 생각하게하지마! 1

(사용자를) 생각하게 하지마!웹과 모바일 사용성 원칙으로 디자인하는 UX

인터랙트 미디어 디자인 | 1412482 김성경

Index

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

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

02.우리가 실제 웹을 사용하는 방법

03.광고판 디자인 첫걸음

관례를 이용하라

명료성>일관성

04.동물입니까, 식물입니까, 무생물입니까?

사용자가 고민 없이 선택하길 좋아하는 이유

05.불필요한 단어를 덜어내라

불필요한 인사말을 빼라

설명을 없애라

06.표지판과 빵부스러기

사람들이 웹을 사용하는 방식에 대한 세 가지 진실

훑어보기, 만족하기, 임기응변하기

내비게이션 디자인하기

사용성 이 책의 키워드

> 사용하기 좋은 제품을 만들려면 사용자에 대해 잘 알아야함.

사용자에 대해 잘 알려면 사용자를 직접 관찰해보는 것보다 더 나은 방법은 없다는 것이 이 책의 골자.

> 사용성은 기술이 아니라 사람에 대한 것이고.사람이 사물을 이해하고 사용하는 방법에 대한 것.

기술은 빠르게 변해도 사람은 매우 느리게 변함.

사용성

유용성: 사람들이 필요로 하는 일을 하는가?

학습 용이성: 사람들이 사용법을 알아볼 수있는가?

기억 용이성: 사용할때마다 사용법을 다시 익혀야 하는가?

유효성: 맡은 임무를 완수하는가?

효율성: 작업을 수행하는데 드는 시간과 노력의 양은 합리적인 수준인가?

호감도: 사람들이 이것을 갖고 싶어 하겠는가?

재미: 사용할때 즐겁거나 재밌다고 느껴지는가?

사용자 경험 디자인 User Experience Design, UXD혹은 UX)

> 사용자에게 더 나은 경험을 제공하는 데 이바지하는 모든 활동이나 게통을 가리킴.


고민 할 필요가 없을때

:물음표가 없다. 마음의 목소리도 없다. 에러도 없다.


고민해야 할 때

>모든 것을 자명하게 만들 수는 없음.

평균 사용자가 고민하지 않더라도 딱 보면 알수있어야 함.

웹사이트를 명확하게 만들어야 하는 이유는?

:알고보면 사람들은 여러분이 만든 페이지를 보는데 우리 상상보다 훨씬 더 적은 시간을 소비함.

그러므로 효과적인 웹페이지를 만들려면 사용자가 마법처럼 사용방법을 한눈에 알아볼 수 있어야함.

그렇게 하려면 자명하게 이해되는 페이지, 아니면 최소한 설명이 없어도 이해할 수 있는 페이지를 만들면 됨.


고민해야 할 때

02.우리가 실제 웹을 사용하는 방법

첫 번째 진실:

사용자는 웹 페이지를 읽지 않는다. 훑어본다

두 번째 진실:

사용자는 최선의 선택을 하지 않는다.

최소 조건만 충족되면 만족한다.

세 번째 진실:

사용자는 작동방식까지 이해하려 하지 않는다.

적당히 임기응변한다

훑어 보는 이유는?

1.웹은 도구에 불과하다

2.모든 것을 읽을 필요가 없다.

3.사용자는 훑어보기에 익숙하다.

최고의 선택지 찾지 않는 이유는?

1.사용자는 보통 시간에 쫓긴다.

2.추측이 틀렸을 때 발생하는 불이익이 별로 없다.

3.선택지를 비교하더라도 결과가 나아지리라는 보장이 없다.

4. 추측하는 게 더 재미있다.

왜?

1.사용자에게 별로 중요하지 않다.

2. 사용자는 물건이 작동하기만 하면 그 물건을 계속해서

사용하는 경향이 있다.

03.광고판 디자인 첫걸음

사용자가 스치듯 지나간다는 사실은 알게되었으니...

그들에게 알려주었으면 하는 내용을 최대한 많이 전달하기위해

꼭 해야할 중요한 사항

-관례를 이용하라

-시각적 계층 구조를 효과적으로 구성하라

-페이지의 구역을 또렷하게 구분하라

-클릭 할 수 있는 요소를 명확히 표시하라

-주의를 흩뜨릴 만한 요소를 없애라

-내용을 훑어보기 좋은 방식으로 구성하라

중요도

명료성 >>>>>>> 일관성

04.동물입니까, 식물입니까, 무생물입니까?

아무 고민 없이 할 수 있는 클릭 3번 = 고민 해야 하는 클릭 1번

진짜중요한 것은 원하는 페이지에 도달하기 위한 클릭 수보다 클릭한번에 얼마나 수고가 드느냐에 있다.

별 고민 없이 클릭할 수 있고 본인이 옳은 방향으로 가고 있다는 확신만 꾸준히 든다면 클릭을 많이

하더라도 사용자는 크게 개의치 않는편.


불필요한 단어는 생략하라.

건강한 문체는 간결하다. 문장에 불필요한 단어가 없어야 하고 문단에는 불필요한 문장이 없어야 한다.

그림에 불필요한 선이 없어야 하고 기계에 불필요한 부품이 없어야 하는 것과 같은 이치다.

아무도 읽지 않을 단어 없앴을때 얻는 유익한 효과

1.페이지의 소음 수준이 낮아짐

2.유용한 부분이 더욱 도드라짐

3.페이지 길이가 짧아지므로 사용자는 스크롤을 내리지 않고도 한눈에 전체를 훑어볼 수 있다.



사람들은 사용법을 스스로 알아낼 수 없는 웹 사이트는 사용하지 않는다.

여러분도 웹 사용자로서 비슷한 경험을 한 적이 있을 것이다.

어떤 사이트를 방문해서 필요한 내용을 찾지 못하거나 사이트가 어떻게 구성되었는지 이해할 수 없다면,

그 사이트에 오래 머물러 있지도, 다시 방문하지도 않을 공산이 크다.

흔히 말하는 이해하기 쉽고 단순하고 일관성 있는 내비게이션은 어떻게 만드는것일까?


1.웹 사이트에는 보통 무언가를 찾기 위해

들어간다.

2. 다른 사람에게 물어볼지 직접 찾아볼지

선택한다.

3.훑어보기로 했다면 안내에 따라서 사이트의

계층구조를 찾아 볼 것이다.

4.찾던 항목이 눈에 띄지 않으면 그 사이트를

떠난다.


웹이 지닌 특이성

1.규모에 대한 감각이 없다.

웹 사이트의 담긴 내용이 매우 적은 경우를 제외하면 웹 사이트를 아무리 많이 사용하더라도 그 웹 사이트의 규모가

어느 정도인지(50? 1000? 17000 페이지?) 감을 잡기 어렵다.

2.방향 감각이 없다.

웹 사이트에는 상화좌우 구분이 없다.

위아래로는 가라고 말하긴 하지만 계층구조상 위아래를 의미하는 것이다. 즉, 위 단계 혹은 아래 단계로 가라는 것이다.

3.위치 감각이 없다.

물리적 공간에서는 움직이는 동안 그 공간에 대한 정보를 수집하므로 사물의 위치에 대한 감각이 생겨서 특정 사물에

도달하는 지름길도 알아낼 수 있다

>>> 웹 내비게이션을 잘 구축해야 한다.


페이지 이름에 대해 알아둘 네가지 사항

1. 모든 페이지는 이름이 필요하다.

2. 이름이 있는 위치가 적절해야 한다.

3. 이름은 눈에 띄어야 한다.

4. 이름은 내가 클릭한 것과 일치해야한다.


빵부스러기도 ‘현재위치’ 표시처럼 사용자가 어디 있는지 알려줌.

빵부스러기를 적용하는 최고의 방법

1. 맨 꼭대기에 두어라.

2. 각 단계 사이에 > 기호를 넣어라.

3. 마지막 항목의 서체는 볼드체로 표기하라.


탭의 올바른 사용법과 탭을 좋아하는 이유

1. 탭의 사용법은 자명하다.

2. 탭은 눈에 잘 띈다.

3. 탭은 보기 좋다.


이제 부품 준비를 마쳤다고 생각될 때 웹 내비게이션이 잘 완성되었는지 확인하는 진짜 방법!

:눈가리개를 한 상태로 자동차 트렁크에 갇혀 끌려다닌 후 어떤 웹사이트의 깊숙한 곳에 있는 페이지에 던져졌다고

상상해보라. 도착한 페이지가 잘 설계되어 있다면 다음 질문에 망설임 없이 명확한 답을 낼 수 있음.

1. 이 사이트는 무슨 사이트인가? (사이트 ID)

2. 내가 지금 무슨 페이지에 있는가? (페이지 이름)

3. 이 사이트의 메인 섹션은 무엇인가? (섹션)

4. 현재 페이지의 내비게이션 상태는 어떠하다고 생각하는가? (로컬 내비게이션)

5. 전체 사이트 구성에서 현재 위치는 어디에 해당하는가?(‘현재위치’ 표시)

6. 검색은 어떻게 하는가?


트렁크 평가 수행 방법

1단계. 2단계. 3단계.

사이트에 있는 페이지 중

하나를 임의로 고르고 인쇄한다.

인쇄한 페이지를 약간 거리를

두고 보거나 눈을 가늘게 뜨고

흐릿하게 보이는 상태를 만든다

최대한 빠른 속도로 다음 항목을

하나씩 찾아서 동그라미 표시한다.

-사이트 이름

-페이지 이름

-섹션 (고정 내비게이션)

-로컬 내비게이션

-‘현재 위치’표시

-검색

감사합니다!웹과 모바일 사용성 원칙으로 디자인하는 UX

인터랙트 미디어 디자인 | 1412482 김성경