(사용자를)생각하게 하지마

 

용어 알아가기

• 애자일 : 2000년대부터 주목받기 시작한 소프트웨어 개발 방식이다. 계획이나 문서화 작업보다는 프로그래밍 과정에 초점을 두고 있다. 고객의 피드백을 적극적으로 반영하고 개발 환경에 유연하게 대처할 수 있는 게 특징이다.
• 린 스타트업 : 스타트업 등 벤처기업의 성공을 위한 경영전략의 하나이다. 아이디어를 빠르게 최소요건제품(시제품)으로 제조한 뒤 시장의 반응을 통해 다음 제품 개선에 반영하는 전략.
• 정보 아키텍쳐 : 업무의 각 구성 요소에 대한 분석 작업을 수행하여 업무의 체계를 정립한 것]
• 인터렉션 디자인 : 디지털 기술을 이용해 사람과 작품 간의 상호작용을 조정하여 서로 소통할 수 있도록 하는 디자인 분야(클릭, 탭, 스와이프 한 후에 반응을 결정)

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

1. 사용자는 웹 페이지를 읽지 않는다 훑어본다. 훑어보는 이유 : 웹은 도구에 불과하다! 사용자는 웹 페이지를 읽는데 대체로 매우 적은 시간을 할애한다. 모든 것을 읽을 필요가 없다
2. 사용자는 훑어보기에 익숙하다.
3. 사용자는 최선의 선택을 하지 않는다. 최소 조건만 충족되면 만족한다. 흡족하다+충분하다 = 만족하기

① 사용자는 보통 시간에 쫓기다(최적의 선택을 하는 일은 시간이 오래 걸리는 어려운 작업이다. 만족하기가 효율성이 더 높ㄷ

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

• 뒤로가기 버튼이 웹 브라우저상에서 가장 자주 사용되는 이유

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

• 추측은 선택지 비교보다 수고가 적게 드는데 다 추측이 맞으면 작업 기간도 단축된다.

1. 사용자는 작동방식까지 이해하려 하지 않는다 적당히 응기응변 한다.

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

• 물건 사용에 지장만 없다면 작동 방식을 이해하지 못해도 아무런 문제가 없다.

이러한 현상은 지적인 능력이 부족해서라기 보다 관심이 없어서 발생한다.

② 사용자는 물건이 작동하기만 한다면 그 물건을 계속해서 사용하는 경향이 있다.

32p

• 관례를 이용하라
  • 정지 표시판 한눈에 들어오게 하고 전세계 어디를 가나 전체적인 일관성을 잘 유지된다.
  운에 매우 잘 뛸 만한 색상을 사용하고 표준화된 크기, 높이, 위치를 적용한다.
  • 일관성을 유지하는게 좋다.
  • 명료성이 일관성보다 중요하다.
• 시각적 계층구조를 효과적으로 구성하라
• 페이지의 구역을 또렷하게 구분하라
• 클릭할 수 있는 요소를 명확히 표시하라
• 주의를 흩뜨릴 만한 요소를 없애라
• 내용을 훑어보기 좋은 방식으로 구성하라

38p

더 중요한 부분이 더 눈에 띈다 : 눈에 띄는 색 + 맨 꼭데기 + 두껍게 표시

• 논리적으로 연관된 요소가 시각적으로 연결되어 있다 : 비슷한 요소는 하나의 제목 아래 그룹으로 묶거나 동일한 시각적 스타일을 적용하거나 명확히 구분된 하나의 구역에 모아두라
• 두 요소 간 상·하위 관계가 형성되어 있다면 이를 시각적으로 보여준다 : ‘컴퓨터 관련 도서’ 같은 섹션에 속하는 개별 도서 제목 위에 두어야 한다. 해당 도서들이 그 섹션의 일부라는 사실을 반영하는 것이다.

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

① 제목을 많이 넣어라 : 사려깊게 잘 지은 제목이 사이사이에 있으면 페이지 내용이 표를 대신하는 역할을 한다.

② 단락의 길이를 짧게 유지하라 : 언어의 장벽이 생길것이다.

③ 블릿 목록을 사용하라 : 블릿 목록으로 만들 수 있는 항복이라면 만드는 편이 좋다 읽기 좋은 최적의 상태를 만드려면 항목 사이에 추가 공간을 넣어준다.

④ 주요 용어를 강조하라 : 강조하는 내용을 넣는다 너무 많이 강조하는걸 넣으면 효과가 떨어진다

• 간결성 : 사용자에게 도움이 되는 정보를 선별해서 최소한의 양만 남기라
• 적시성 : 사용자가 딱 필요로 할 순간에 마주칠 위치에 둬라
• 불가피성 : 반드시 놓치지 않고 볼 수 있는 포맷을 사용하라

54p

불필요한 단어를 덜어내라

① 페이지 소음 수준이 낮아진다.

② 유용한 부분이 더욱 도드라진다.

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

④ 불필요한 인사말은 빼라!

63p

웹 내비게이션 첫걸음

① 웹사이트에는 보통 무언가를 찾기 위해 들어간다.

② 다른 사람에게 물어볼지 직접 찾아볼지 선택한다.

③ 훑어보기로 했다면 안내에 따라서 사이트의 계층 구조를 찾아볼 것이다.

④ 찾던 항목이 눈에 띄지 않으면 그 사이트를 떠난다.

66p

참을 수 없는 브라우징의 가벼움

크루징, 브라우징, 서핑 등 웹에서 하는 경험 묘사를 떠올리자 링크 클릭해도 페이지가 로딩이나 디스플레이 되지 않는다고도 하고 링크가 사용자를 다른 페이지로 데려간다고 표현하기도 한다.

• 규모에 대한 감각이 없다.
• 방향 감각이 없다.
• 위치 감각이 없다.

네비게이션의 숨은 용도

• 사이트에 어떤 내용이 있는지 알려준다.
• 사이트 이용 방법을 알려준다.
• 사이트를 만든 사람에 대한 신뢰도를 높힌다.

1. 어디가든 따라온다.

“고정 내비게이션이라는 용어를 사용한다 글로벌 내비게이션이라고도 불린다”

고정 내비게이션에 사용자가 가장 자주 사용하는 4~5개 정도의 유틸리티만 넣는것이 중요하다.

*유틸리티 : 사용자가 더 쉽고 편리하게 컴퓨터를 사용할 수 있도록 도와주기 위해 사용되는 프로그램. 유틸리티(utility)는 ‘유용성’, ‘실용성’이라는 뜻을 가지고 있습니다. 컴퓨터 안에서의 유틸리티란, 사용자가 컴퓨터를 다루는데 유용하고, 실용성있게 사용되는 소프트웨어를 말합니다.

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

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

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

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

1. 현재 위치를 표시하라[네비게이션]

• 맨 꼭대기에 두어라
• 각 단계 사이에 > (부등호) 기호를 넣어라
• 마지막 항목의 서체를 볼드체로 표기하라
• - 현재 페이지 이름(눈에 띄도록 표시)

86p

탭이 유용하다

탭은 사용하면 인덱스가 튀어나와 있는 것 처럼 웹용 탭도 돌출된 부분이 섹션을 분리하는 역할

• 탭의 사용법은 자명하다 : 쉽다.
• 탭은 눈에 잘 뛴다 : 시각적으로 도드라지므로 사람들이 잘 놓치지 않는다. 내비게이션과 콘텐츠가 한 눈에 구분된다.
• 탭은 보기 좋다 : 착시 효과가 뛰어나온 듯 보인다.

트렁크 평가를 하다

• 사이트 정체성과 임무
• 사이트 계층 구조 : 사이트에서 내용 개요를 보여주어야 한다. 이 역할을 고정 내비게이션이 담당하는 경우가 많다.
• 검색 : 검색 상자는 홈페이지에서 쉽게 눈에 띄어야 한다.
• 관심을 끌 만한 요소 : 홈페이지는 잡지 표지처럼 안에 좋은 내용이 들어 있다고 사용자를 유혹할 수 있어야 한다.
• 콘텐츠 홍보 : 최식 콘텐츠나 가장 인기 있는 콘텐츠를 강조해서 보여줌
• 특집홍보 : 사이트의 추가 섹션이나 특별한 내용을 확인해 보는 역할
• 신규 콘텐츠 : 자주 업데이트 해야 한다. 눈에 방치된 사이트라는 느낌을 주지 않으려면 살아 있다는 신호 정도는 주어야 한다.
• 제휴광고 : 홈페이지에는 광고 상호 판촉 광고, 제휴 브랜드 광고 기재
• 바로가기 : 소프트 웨어 업데이트 처럼 가장 많이 읽히는 콘텐츠 바로 이어지는 링크가 있으면 좋다
• 등록 : 기존 사용자에게 로그인했다는 사실을 알려줄 인사 표시를 하면좋다 (안하는 경우도 많음)

94p

• 사용자가 찾는 내용 보여주기 : 사용자가 원하는 내용이 그 사이트에 있다면 사용자가 그 내용을 찾을 방법을 홈페이지에서 명확히 보여주어야 한다.
• 사용자가 찾지 않는 내용도 보여주기 : 홈페이지는 사용자가 적극적으로 찾던 것은 아니지만, 혹시 관심이 있을지 모르는 훌륭한 콘텐츠를 사용자에게 노출할 필요가 있다.
• 어디서 시작할지 보여주기 : 처음 방문한 사용자에게 어디부터 봐야 할지 반드시 알려주어야 한다.
• 신뢰 쌓기 : 어떤 방문자는 홈페이지만 보고 나갈 수 있다. 좋은 인상을 남길 유일한 기회가 될 수 있다는 점은 유념하라

| • 캐스케이딩 메뉴 : 한 메뉴를 클릭했을 때 하위 메뉴가 옆으로 드러나는 메뉴 형태 하위 메뉴가 펼쳐지는 모습이 폭포 같다고 해서 붙여진 이름이다.

• 메가 메뉴 : 풀다운 메뉴의 일종이며 엄청나게 크다는 뜻이 ‘메가’라는 이름에 걸맞게 사이트 전체 구조와 각 페이지 내용이 한꺼번에 담길 정도로 큰 메뉴를 사용하는 것이 특징이다. 사이트 구조를 한눈에 파악할 수 있는 장점이 있다. | | --- |

122p 포커스 그룹 테스트

5~10명 정도의 인원이 함께 둘러앉아 특정 제품에 대한 대화를 나눈다. 자신의 과거 경험이나 새로운 콘셉트에 대한 의견을 나눈다.

사용성 평가

어떤 물건을 가지고 일반적인 과제를 수행하는 과정을 지켜보는 것이다. 대상은 웹사이트, 제품 프로토타입, 새디자인을 담은 스케치 등이 될 수 있다. 사용자가 혼란스럽다거나 답답하다는 느낌이 드는 지점을 찾아서 고치는 것이 사용성 평가의 목표이다.

|

• 프로토타입 : 본격적인 상품화에 앞서 성능을 검증ㆍ개선하기 위해 간단히 핵심 기능만 넣어 제작한 기본 모델을 말한다. 시제품, 견본품이라고도 한다. 본격적으로 제품 개발ㆍ생산에 들어가면 도중에 중단하거나 취소하는 것이 쉽지 않으므로 사전에 프로토타입을 제작하고 검증 과정을 거쳐 위험 부담을 최소화한다. | | --- |

• 훌륭한 사이트를 만들려면 반드시 평가해야 한다. "평가는 항상 도움이 된다.”
• 프로젝트 초기에 진행한 평가가 프로젝트 후반에 진행한 평가보다 낫다.
• 초반 평가를 작해서(잘 기획) 구축해야 한다. 나중에 수정하려면 더 큰 공사가 될 수 있다.

134p

무엇을 언제 평가하는가

사용성 전문가들은 평가 시작 시점이 프로젝트 초방에 가까울수록 좋고, 평가 주기는 짧을수록 좋다.

첫번째 스케치 부터 와이어프레임, 페이지구성, 프로토타입, 실제 페이지가 완성되기까지 프로젝트 전방에 걸쳐 팀에서 만든 것이 꾸준히 평가해보라

사용자가 할 수 있는 일의 목록부터 만들라

• 계정 만들기
• 기존 ID와 비밀번호로 로그인하기
• 비밀번호 찾기
• ID찾기
• 보안 질문 답변 바꾸기

154p

모바일 앱 사용성

1. 드레이드오프를 고려하라 드라이드오프 : 완전 고용과 물가 안정의 관계. 곧, 실업률(失業率)을 줄이면 물가가 상승하고, 물가를 안정시키면 실업률이 높아진다는 모순적 관계를 이르는 말임.

제약이란 해야만하는 일과 할 수 없는 일을 가리키고 트레이드 오프란 제약 때문에 이상을 버리고

선택하는 현실적인 대안을 가르킨다.

링컨대통령 “여러분이 일부 사람을 꾸준히 기만할 수도, 모든 사람을 잠시 기만할 수도 있습니다.

하지만 모든 사람을 계속 기만할 수 없습니다.”

모바일 버전에서 화면 공간 부족 때문에 사용성이 희생되면 안된다.

스케일러블 디자인 : 어떤 사이트의 한 버전이 다른 여러 크기의 화면에서도 좋아 보이게 만드는 것을 가르킨다.

① 확대해서 볼 수 있게 만들어라(줌이 될 수 있게 만들어라)

② 홈페이지로 데려가지 마라

③ ‘풀 버전’ 웹 사이트로 가는 링크를 항상 제공하라

토글 버튼을 넣어 보자 : 두 가지 선택지 (모바일/PC) 사이를 왔다 갔다 하며 선택 할 수 있는 장치를 토글이라 한다. PC 토글을 누르면 PC버전으로 이동한다.

1. 어포던스를 감추지 마라

어포던스 : 제품 디자인에 내포된 사용자가 어떻게 사용하면 될지 알려주는 시각적인 힌트

1. 플랫 디자인

인터페이스를 ‘평면적’으로 만드는 플랫 디자인이 유행하고 있다.

플랫 디자인이 보기에는 끝내주게 좋지만 적어도 일부 사용자는 그렇다고 얘기한다. 그리고 화면이 정돈된 느낌이 들기는 한다. 잠재적으로 플랫디자인은 집중력을 흩트릴 우려가 있다 구분이 없으면 차별화가 어려워진다.

*반송형 디자인 방식으로 디자인할 때 사용자가 현재 사용하고 있는 화면에 비해 필요 이상으로 거대한 양의 코드와 이미지를 불러오는 일이 없도록 주의해야 한다.

1. 모바일 앱 사용성 속성

• 유용성, 합습용이성, 기억용이성, 유효성, 효율성, 호감도, 재미

평균 수준(심지어는 평균 이하)의 능력이나 경험을 가진 사람이 무언거를 성취하는데 [유효성] 사용할 특정 물건의 사용법을 스스로 알아낼 수 있어야 한다. [학습 용이성] 단, 얻는 가치에 비해 수고를 적게 들여야 한다 [효율성] / 프로젝트 시작 전에 인터뷰, 포커스그룹, 설문조사를 통해서 미리 정리해야 하는 부분이다. 어떤 사물의 호감도 문제도 내가 보기엔 마케팅에서 다뤄야 할 문제다.

신기술을 독창적인 방식으로 활용해서 사람들이 진짜로 하고 싶긴 하지만 실제로 하기는 어렵다고 생각되는 활동을 하게 해주는 앱이다.

완벽히 구현한 예로 사운드하운드 앱 : 귀에 들리는 음악이 어떤곡인지 어디서든 구별하게 해 줄 뿐아니라 음악의 박자에 맞춰서 가사를 스크롤 하며 보여주기까지 한다.

페이퍼 앱도 좋은 예다 : 그림 그리는 앱

앱에는 학습 용이성이 있어야 한다.

기업 용이성은 사용자가 정기적으로 사용할 앱에 적응할 때 중요한 역할을 한다.

• 브런들플라이를 USB로 평가 진행자의 노트북에 연결하라
• Amcap(PC용)이나 Quiktime player(Mac용)처럼 브런들 플라이에서 찍은 영상을 보여줄 수 있는 프로그램을 켜라. 진행자는 이 방법으로 촬영한 화면을 본다.
• 화면 공유 프로그램(고투미팅, 웹 엑스 등)을 사용해서 관찰자들과 노트북 화면을 공유하라
• 화면 녹화 프로그램(예 캠타시아)은 관찰실 컴퓨터에서 작동하라 진행자 노트북의 부담이 줄어들 것이다.

* 호감을 키우는 요인들 *

① 사용자가 사이트에서 가장 많이 하는 활동을 알아내서 그 부분을 명확히 드러내고, 쉽게 사용할 수 있게 하라

② 사용자가 알고자 하는 정보를 공개하라

③ 사용자의 수고를 최대한 줄여 주어라

④ 노력을 쏟아부어라

⑤ 궁금해할 만한 사항을 예측하고 그에 대한 답을 제시하라

⑥ 오류가 발생했을 때 쉽게 회복할 수 있게 해라

⑦ 해결하지 못한 문제가 있는 때는 사과하라

195p

1. 모두가 혼란스러워 하는 사용성 문제부터 고쳐라

사이트 접근성을 개선하는 최고의 방법은 자주 평가하고 모두를 혼란스럽게 하는 부분을 제거해야 한다.

1. 논문을 한 편 추천한다.

스크린 리더 사용자는 귀로 사이트를 훑어본다. 시각 장애인들은 귀로 훑어본다. 더 들을지 판단할 수 있을 정도까지만 듣는다. 그래서 많은 사람들이 음성 속도를 매우 빠른 속도로 설정해 둔다.

키워드가 링크의 앞부분이나 텍스트의 첫 줄에 없으면 시력 장애인 사용자는 이를 놓치기 쉽다.

• 접근성과 사용성을 갖춘 웹사이트를 위한 가이드 라인 : 스크린 리더를 활용하는 사용자 관찰

1. 책 한 권을 추천 한다.

웹 접근성에 관련된 도서

• A Web for Every one : Desining Accessible User Experienccs
• Web Accessibility: Web Standards and Regulatory Compliance

• 전체적인 그림만 익혀도 충분하다

1. 쉬운 문제부터 해결하라

• 모든 페이지에 적절한 대체 텍스트를 추가하라 스크린 리더가 무시할 만한 이미지에는 빈(혹은 “null”) alt 속성 <alt=”설명넣기”> 을 추가하라
• 올바른 헤딩을 사용하라 메인<h1> / 주요 섹션 헤딩<h2> / **부제목 <h3>**를 사용하는 형식! css를 사용해서 각 단계를 시각적으로 구분하자
• 폼이 스크린 리더에서도 잘 동작하도록 작성하라 HTML <label> 엘리먼트 사용
• 각 페이지를 시작할 때 메인 콘텐츠로 넘어가게 링크 넣기 페이지마다 실제 콘텐츠를 보기 전 페이지 위에 있는 글로벌 네이게이션을 20초 동안 들어야 하는 장애인의 입장을 상상해 보면 이 부분이 왜 중요한지 알 수 있다.
• 키보드로 모든 컨텐츠에 접근할 수 있게 하라 모든 사람이 마우스를 사용하지 않는다는 사실을 기억하라
• 텐스트와 배경 간에 눈에 띄는 차이를 두라 예를 들어 진한 회색 배경에 흐린 회색 텍스트를 넣지 말자
• 접근성 있는 템플릿을 사용하라 접근성이 있는 디자인 테마를 고르도록 하라

202p

사이성이란 분야에 대해 먼저 알아야 한다.

사용성은 자신이 디자인하는 사물을 사용자들이 성공적으로 사용할 수 있게 하는것 이고, 정보 아키텍처는 사람들이 자신이 원하는 정보를 찾도록 콘텐츠를 조직하는 것이다.

UX에 속하는 관련 전문 분야로는 인터렉션디자인, 인터페이스디자인, 시각디자인, 콘텐츠 관리 등

열가지 이상 분야가 존재 한다. 사용성 정보 아키텍처도 물론 포함이다.

사용자 중심 디자인과 사용자가 경험은 각기 담당하는 영역이 다르다. UCD는 적절한 제품을 디자인하고 그 제품을 사용하기 편리하게 만드는 것에 초점을 둔다.

제품라이프 사이클은 TV광고 - 제품구매 - 배송과정 - 온라인 추적 - 동네 지점에 가져가서 반품하는 과정까지 포함

용어 알아가기!

• ROI를 보여주라(투자대비 수익률) 경영진의 언어로 이야기하라
• 페이 포인트 : 고민점 고객이 고민하는 지점을 가리키며 회사의 입장에서 해결 하는 문제
• 터치 포인트 : 접점이라 옮기기도 한다. 고객이 특정 브랜드를 접하게 되는 지점을 포괄적으로 가르키는 용어 터치 포인트는 고객 관리의 시작점이 된다.
• KPT : 조직의 목표 달성 수준을 계측하는 핵심성과지표
• CSI : 고객만족도
• 첫 평가는 업무시간이 아닐 때 진행하라 격식없이 아주 간단하게 진행하라 자원봉사 참가자를 찾으면 비용도 들지 않는다.
• 쉬운 목표를 고르자 승인이 거치지 않고 빠르게 고칠 수 있는 문제 평가를 고치고 알리기 개선 사항을 간단히 수치화 할 방법이 있다면 사용하라 ex) 고객 지원실에 전화가 많이 오는 원인이 되던 사항을 평가했다면 그 문제를 개선한 후에 그와 관련된 통화량이 얼마나 줄었는지 수치로 보여주는 것이다.
• 경쟁 상대를 평가하라 초방에 경쟁 사이트를 평가하는 것은 좋은 아이디어이다.
• 경영진과 공감하라 공감은 사용성 작업에 꼭 필요한 전문 기술이나 다름없기 때문이다. 사용성 관련 업무를 하는 데 관심이 있는 분이라면 아마 공감 능력도 있을 것이다. 그들이 처한 위치에 대해 이해하는 관점
• 큰 그림에서 여러분이 어디쯤 있는지 파악하라(+겸손 하기) ① 토먼사론 It's Our Research: Getting Stakeholder Buy-in for User Experience Research Projects 토머는 구글의 UX 연구원이다. 이 방법이 통하지 않더라도 받아드려라 ② 리아블리 The User Experience Team of One: A Research and Design Survival Guide 는 현재 회사에서 사용자 중심 디자인 관련 업무를 맡은 유일한 직원이거나 장래에 사용성 전문가를 꿈꾸는 분 혹은 사용성 전문가가 아님에도 어쩔 수 없ㅈ디 가끔 UX 담당자 역할을 받아야 하는분

207p

상대를 기만하지만 않는다면 어떤 일을 하도록 누군가를 설득해도 무방하다고 생각한다 사용성 평가에서 자신의 생각을 소리 내어 말하는 참가자를 관찰하다 보면 설득이 성공하거나 실패하는 이유에 대해 귀중한 통찰을 얻기도 한다.

• 작고 대비가 약한 서체는 쓰지 마라
• 필드 안에 라벨을 넣지 마라
• 방문한 텍스트 링크와 방문하지 않은 링크를 다르게 표시하라
• 헤딩이 단락 사이에서 떠나니게 하지마라