책 '소셜 인터페이스 디자인'에 기반된 내용입니다.
어디에서 사람처럼 이야기하는가
웹사이트의 안내 문구, 카피, 버튼 등 모든 곳에 적용할 수 있습니다. 사람처럼 이야기하는 웹사이트의 대상이 한정적인것은 아니지만 특히 소셜 기능이 있는 웹사이트에 좋습니다. 딱딱하고 기계적인 안내판 같은 사용자 경험 대신 존중 받으며 기분 좋은 사용자 경험을 내는 것이 목적이라 할 수 있습니다.
규칙
첫째, 지나친 농담은 금물입니다. 특히 웹 공간에선 텍스트만으로 완벽한 농담을 만드는것은 거의 불가능에 가깝습니다. 받아들이는 사람에 따라 불쾌감을 느낀다면 궁극적 목표인 '좋은 사용자 경험'이 아니기 때문입니다.
둘째, 자신을 낮추세요. 사용자를 비난하지 마세요. 역시 좋은 사용자 경험을 이끌어 낼 수 없습니다.
패턴
대화하기
대화는 사람처럼 얘기하기 가장 쉬운 방법입니다. 딱딱한 설명 대신 대화문을 이용해 설명한 경우입니다. 예를 드는것도 좋습니다.



질문하기
질문과 응답은 대화의 대부분을 차지합니다. 질문과 함께 행동을 유도하는 패턴입니다. 트위터의 경우 질문을 통해 처음 온 방문객에게 가입을 유도하고 만약 이미 계정이 있다면 해당 영역을 그냥 지나치고 로그인을 하겠지요. 왓챠의 경우 질문과 선택지로 체류시간을 늘리고 왓챠의 기능으로 사용자를 보냅니다. 단순한 버튼 혹은 배너보다 사용자 유도를 쉽게 할 수 있습니다.

에러페이지
404 Not Found를 접한 사용자는 당황합니다. 내가 뭘 어째야하지! 에러의 이유를 사용자의 잘못으로 돌리지 마세요. 자신을 한 단계 낮춘 뒤 사용자에게 다음 단계의 길을 열어주는것이 중요합니다.
왓챠의 경우 404 해골 마크와 함께 뭔가 잘못되었다고 말합니다. 그리고 왓챠 홈으로 돌아가게 유도하죠. 사실 완벽하다고 볼 수는 없지만 좋습니다. 재미있다면 오류페이지가 나와도 기분이 나쁘지 않습니다.
gag의 오류페이지는 404를 four oh! four 라는 타이포그라피와 함께 페이지가 없어 죄송하다며 되돌아갈 것인지 문제를 리포트할것인지 선택지를 줍니다. 거의 완벽하다 할 수 있습니다.


짧은 글인데 스크린샷 찍고 하니 오래걸리네요. UX가 무엇인지 왜 중요한지를 먼저 짚고 넘어가면 좋겠지만 UX패턴을 보면 대충 느껴지는게 있을거라 생각되서 따로 적진 않습니다.
댓글 7개
기술서적 전문 writer 가 보정을 끝낸, 깔끔한 책을 읽는 느낌입니다.
온라인에서 농담하지 말아햐 한다는 것, 100% 동의 합니다.
[http://farm6.staticflickr.com/5486/9038372235_dd0f9ebcf2.jpg]
이게 사실 영어권 사람에게는 엄청나게/눈물나게 웃기는 건데 (Sign Up 하라는 중국식 영어입니다. ㅋㅋㅋ)
저도 같은 동양인이지만 배를 잡고 웃거든요, 이런거 보면,
(아래 이거는 거의 기절하는 수준)
[https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-frc3/p480x480/395367_10151478800096840_1956195468_n.jpg]
하지만 문제는 중국인들한테는 이게 엄청난 불쾌감을 줄수 있다는 점에서...
온라인에서는 어떤 말도 조심해야 한다는 점, 깊게 반성하고, 또 동의 합니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 18790 |
JavaScript
공백제거
|
| 18788 |
PHP
셀렉트박스 간편하게 만들기
1
|
| 18786 | |
| 18783 |
PHP
게시판의 페이징 방법
2
|
| 18780 |
PHP
이미지에 워터마크 처리하기
2
|
| 18769 |
Mobile
Chrome 를 이용한 모바일모드
10
|
| 5549 | |
| 27272 | |
| 27267 | |
| 30785 | |
| 30782 | |
| 27264 | |
| 18767 |
JavaScript
스크립트오류 제거
1
|
| 18765 |
JavaScript
간단한 쿠키지원 팝업 스크립트
1
|
| 18764 | |
| 18763 |
JavaScript
대소문자변환
|
| 5546 | |
| 18760 | |
| 18758 | |
| 18755 |
JavaScript
홈페이지 브라우저 크기 고정시키기
2
|
| 18752 |
JavaScript
iframe 아이프레임 투명처리
2
|
| 27256 | |
| 27247 | |
| 5539 | |
| 18750 | |
| 27244 | |
| 27243 | |
| 18749 |
JavaScript
금액 입력시 자동으로 천단위구분기호(,) 붙여주는 함수
|
| 18747 | |
| 18745 |
JavaScript
출생년도에 따른 나이 계산 자바스크립트
1
|
| 18741 | |
| 18740 | |
| 18738 |
JavaScript
iframe에서 페이지를 닫을 때
1
|
| 18731 |
JavaScript
iframe 높이 자동조절 스크립트
6
|
| 18730 |
JavaScript
자바스크립트 인공지능 장기게임-Minimax
|
| 27240 | |
| 5535 | |
| 18728 |
JavaScript
금액을 한글로 표기 해주는 스크립트;
1
|
| 18726 |
JavaScript
전화번호 입력시 자동 하이픈 넣기
1
|
| 18724 |
JavaScript
사업자번호체크스크립트 간단버전
1
|
| 5532 | |
| 26500 |
견적서
홈페이지 제작 견적서
14
|
| 27237 | |
| 5529 | |
| 30776 | |
| 18721 |
jQuery
플러그인 만들기 간단 예제
2
|
| 20725 | |
| 27232 | |
| 18719 |
JavaScript
퀵메뉴
1
|
| 18717 | |
| 18714 |
JavaScript
입력박스안에 왠 아이콘?
2
|
| 18712 |
JavaScript
게시판 글작성시 일부 태그막기
1
|
| 18709 |
jQuery
랜덤한 레이아웃과 효과
2
|
| 27213 | |
| 27200 | |
| 18706 |
JavaScript
자동으로 textarea 크기 조절하기
2
|
| 18704 |
JavaScript
textarea 자동 늘려주기 2
1
|
| 18702 |
JavaScript
해당 브라우저에 지원하는 이벤트 확인
1
|
| 18701 |
JavaScript
자바스크립트로 논리적인 XOR 연산하기.
|
| 18700 |
JavaScript
동적 셀렉트박스 다루기.
|
| 18698 |
JavaScript
자바스크립트 이벤트 핸들러 (Event Handler)
1
|
| 18697 |
JavaScript
함수명을 변수로 해야할 때
|
| 18696 |
JavaScript
이메일 유효성 정규식 - 자바스크립트
|
| 18694 | |
| 5525 | |
| 27199 | |
| 18691 | |
| 5515 | |
| 5510 | |
| 5501 | |
| 18690 | |
| 18687 | |
| 5496 | |
| 18686 | |
| 18676 | |
| 26496 |
서식
영수증 양식
3
|
| 18675 | |
| 30773 | |
| 18671 |
JavaScript
이미지 슬라이드 관련입니다.(자바,제이쿼리)
3
|
| 30767 | |
| 18667 |
JavaScript
롤오버시 서브메뉴가 나타나는 기본 스크립트
3
|
| 18658 |
jQuery
회사에 히스토리에 써먹을 만한 자료
8
|
| 18650 | |
| 18648 |
MySQL
고수님들 도와주세요!
1
|
| 5494 | |
| 5490 | |
| 20705 | |
| 5485 | |
| 18645 |
Mobile
json 파싱방법
2
|
| 27194 | |
| 20684 |
정규표현식
정규표현식 의 핵심. 패턴변경자 1
20
|
| 18642 | |
| 5482 | |
| 27185 | |
| 5478 | |
| 5473 | |
| 5467 | |
| 18636 | |
| 5462 | |
| 5443 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기