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



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

에러페이지
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]
하지만 문제는 중국인들한테는 이게 엄청난 불쾌감을 줄수 있다는 점에서...
온라인에서는 어떤 말도 조심해야 한다는 점, 깊게 반성하고, 또 동의 합니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 19384 | |
| 27584 | |
| 6013 | |
| 6004 | |
| 27572 | |
| 5997 | |
| 5992 | |
| 5981 | |
| 5964 | |
| 5952 | |
| 5948 | |
| 5941 | |
| 5937 | |
| 5934 | |
| 5931 | |
| 19383 |
MySQL
mysqldump시 한글 깨짐문제..
|
| 5926 | |
| 5923 | |
| 5913 | |
| 24558 | |
| 5912 | |
| 30895 | |
| 27563 | |
| 5907 | |
| 5903 | |
| 5900 | |
| 27556 | |
| 5898 | |
| 24555 | |
| 5894 | |
| 5893 | |
| 5890 | |
| 5884 | |
| 27537 | |
| 5881 | |
| 5878 | |
| 30888 | |
| 30884 | |
| 5876 | |
| 5874 | |
| 27524 | |
| 27514 | |
| 19379 | |
| 19377 |
jQuery
깔끔한 탭메뉴 드립니다.
1
|
| 27509 | |
| 5869 | |
| 5866 | |
| 27505 | |
| 5865 | |
| 5860 | |
| 5857 | |
| 27503 | |
| 27481 | |
| 27462 | |
| 5856 | |
| 19511 | |
| 27458 | |
| 24547 | |
| 19374 | |
| 19373 | |
| 19371 | |
| 27453 | |
| 19370 |
기타
3단 레이어 소스
|
| 27449 | |
| 27441 | |
| 19366 | |
| 24544 | |
| 19365 |
JavaScript
스크롤바 색깔 바꾸는 스크립트
|
| 19361 | |
| 19360 |
JavaScript
윈도우의 창띄위기 소스입니다.
|
| 19358 |
JavaScript
익스에서 깜박임 글자 구현법
1
|
| 19356 |
JavaScript
자바스크립트를 이용해서 모바일에 selet 박스 구현한것입니다
1
|
| 19354 |
JavaScript
새창띄우는 소스입니다.
1
|
| 19351 | |
| 19348 | |
| 19346 | |
| 19339 |
jQuery
제이쿼리를 이용한 펼침메뉴 1차입니다.
6
|
| 19334 | |
| 5849 | |
| 27439 | |
| 5846 | |
| 27434 | |
| 27429 | |
| 19331 |
PHP
메쏘드 static 선언
2
|
| 19329 |
JavaScript
마우스 오버시 이미지 바꾸기
1
|
| 19328 |
JavaScript
일정시간후 스크립트 실행
|
| 5841 | |
| 5840 | |
| 19326 |
정규표현식
구글 로봇 접근막기!
1
|
| 5834 | |
| 5831 | |
| 5826 | |
| 19324 |
PHP
시리얼번호생성기
1
|
| 5821 | |
| 32040 | |
| 27426 | |
| 19320 | |
| 5816 | |
| 32030 | |
| 5815 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기