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



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

에러페이지
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]
하지만 문제는 중국인들한테는 이게 엄청난 불쾌감을 줄수 있다는 점에서...
온라인에서는 어떤 말도 조심해야 한다는 점, 깊게 반성하고, 또 동의 합니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 5722 | |
| 31534 | |
| 5717 | |
| 19190 |
JavaScript
레이어팝업 스크립트 문의
1
|
| 19181 |
기타
vi로 URL 열기
8
|
| 19177 |
JavaScript
1원짜리팁 현재 사이트 쿠키 알아내기
3
|
| 19173 |
JavaScript
1원짜리팁 자바스크립트로 좌우 공백 제거구현하기
3
|
| 19171 | |
| 27353 | |
| 19169 | |
| 24530 | |
| 27350 | |
| 19161 | |
| 19159 | |
| 19156 | |
| 19154 |
PHP
캐쉬 삭제
1
|
| 19152 | |
| 19150 |
PHP
절댓값 리턴 함수
1
|
| 19147 |
JavaScript
자동 스크롤바 사용하기
2
|
| 19145 |
JavaScript
일주기 시간대별로 플래시무비 자동 교체시키기
1
|
| 19143 |
JavaScript
TEXTATEA 창늘리기~
1
|
| 19141 | |
| 30830 | |
| 19135 |
jQuery
상단 가운데 정렬 , 스크롤시 상단에 고정...
5
|
| 19129 | |
| 19124 |
jQuery
제이쿼리 효과2입니다.
4
|
| 19118 |
jQuery
제이쿼리 fadein 효과
5
|
| 19115 | |
| 19111 |
JavaScript
페이스북 댓글창, 좋아요 달기
3
|
| 19108 |
PHP
IP중간 * 표시 하기
2
|
| 19104 |
JavaScript
글자 깜박임 blink 익스에서 구현
3
|
| 19101 | |
| 19098 | |
| 19094 |
JavaScript
select선택에따른추가select동적으로보여주기
3
|
| 27342 | |
| 19093 | |
| 26548 | |
| 19090 | |
| 19088 |
JavaScript
두 종류의 메뉴셋 사용시 메뉴선택 표시 문제
1
|
| 19086 | |
| 24524 | |
| 31526 | |
| 26539 | |
| 32021 | |
| 32015 | |
| 5705 | |
| 26533 |
견적서
견적서의뢰 ....
5
|
| 24510 | |
| 26524 | |
| 24507 | |
| 24506 | |
| 19082 | |
| 24498 | |
| 5702 | |
| 27337 | |
| 32011 | |
| 19080 | |
| 19075 | |
| 19073 | |
| 19072 |
JavaScript
도와주세요~
|
| 27330 | |
| 27328 | |
| 32010 | |
| 32005 | |
| 32001 | |
| 19071 |
JavaScript
자바스크립트 입문자인데..이미지 변경 스크립트..좀 도와주세여
|
| 19063 |
jQuery
list sort에 좋은것
7
|
| 31998 | |
| 31994 | |
| 5676 | |
| 27327 | |
| 31989 | |
| 5671 | |
| 5666 | |
| 19056 |
jQuery
참 좋은 이미지 슬라이딩 라이브러리
6
|
| 31988 | |
| 31987 | |
| 31981 | |
| 26515 |
계약서
홈페이지 제작 계약서
8
|
| 30823 | |
| 19050 |
Mobile
모바일로 접속했는지 확인하기.,
5
|
| 19047 | |
| 19039 |
MySQL
트리거 사용법에 관하여..
7
|
| 31969 | |
| 5649 | |
| 27323 | |
| 31963 | |
| 19027 | |
| 19020 | |
| 19017 | |
| 19014 | |
| 19009 |
PHP
페이스 댓글, 좋아요 달기
4
|
| 19005 |
JavaScript
페이스북 댓글창 좋아요 달기
3
|
| 31949 | |
| 18998 |
PHP
문자열 자르기 입니다.
6
|
| 18994 |
PHP
정규식에 관한 내용입니다.
3
|
| 18988 |
PHP
우분투서버 셋팅버입니다
5
|
| 18982 |
PHP
js, php 배열 연결
5
|
| 31941 | |
| 31934 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기