UX 팩토리 / user experience blog / 사용자 경험 블로그

에러 메시지를 잘 쓰는 10가지 팁

황리건 — Tue, 10 Nov 2009 06:30:00 +0900

에러 메시지는 소프트웨어나 웹사이트의 사소한 부분(또는 사소하게 여겨지는 부분)이지만, 사용자 경험의 많은 부분을 좌우하는 요소이기도 합니다. 잘 관리되는 소프트웨어라고 하더라도 많은 에러메시지가 개발자나 디자이너들이 알아서 해야 하는 업무로 떠맡겨 지곤 하는데, 그렇게 쓰여진 에러메시지는 중요한 순간에 사용자와 직접 접촉하는 인터페이스로써 경험의 질에 많은 영향을 끼치겠지요.

에러메시지만 전문적으로 다루는 사람들을 찾아보기는 어려운 것 같은데요, 여러분 중에 누군가는 에러 메시지를 쓰게 됐을 때, 이런 팁이 필요하지 않을까 싶네요. UX나 고객지원(또는 경험) 담당자라면 더더욱 신경써야 할 부분이고요.

1. 에러 메시지를 쓰는데 고객지원팀의 도움을 받는다.
2. 친근감있는, 인간적인 모습을 보여준다.
3. 사용자가 입력한 정보들을 저장해 둔다.
4. 에러메시지를 사용자 관계 개선 및 참여 기회로 활용한다. 읽기에 번거롭고 귀찮은 경고나 알림 등 글보다 도움이 되는 함축적인 아이콘 등을 활용하여 에러메시지에 대한 느낌을 순화시킨다.
5. 에러메시지는 기능이 아니다. 에러의 원인을 찾아서 해결한다.
6. 적절한 유머를 활용한다.
7. 귀엽게 보이는 것도 좋지만 그보다는 실질적인 도움을 주는 편이 낫다.
8. 브라우저 뒤에 숨어라.(브라우저의 팝업등으로 처리)
9. 어디에서 문제가 생겼는지 명확하게 알려준다.
10. 한 디자인의 에러 메시지를 사용하지 않는다.

자세한 내용은 여기 참고하시고, 이 글을 포함해서 좋은 내용이 많이 소개되고 있는 네이버의 UX스토리 오픈캐스트도 참고하시길~

윈도우7 디자인 원칙 : 출근 길에 볼만한 영어 동영상

황리건 — Mon, 09 Nov 2009 22:30:00 +0900

우리가 어렸을 때 말을 배우는 경험을 생각해 보면 모든 것이 "듣기"에서 시작된다는 점에서 영어공부에는 듣기가 참 중요하다는 생각이 들어요. 요즘 들어 동영상 포스팅이 부쩍 늘고 있는데, 이 동영상들을 영어 공부에 활용하면 어떨까요?

지난 주 부터 출근 길에 계속 반복해서 보고 있는 동영상이 하나 있어서 소개해 드려요.

재미있는 내용들이 많이 있지만, 그 중에서도 제가 인상깊었던 것은,

발견가능성(Discoverability)이 아니라, 주의가 흐트러짐(Distractions)의 문제를 해결하라는 것인데요. 주목을 끌려고 난리를 피우는 어린이들에게 매너를 갖추게 하는 일로 비유하는 군요.

전체 내용을 한 3~4번쯤 반복해서 본 것 같은데 참 재밌는 이야기에요. 여기에 가시면 동영상을 여러가지로 인코딩 된 버전으로 다운 받을 수 있는데, 이 중에 적절한 것을 다운 받으신 후에 PMP나 DVD 등으로 옮겨서 보시면 된답니다.

참고로, 얼마 전 소개해 드렸던 IASDR 2009의 발표 동영상이 몇 편 더 업데이트 되었네요.

BALANCE: 다양한 의견을 포함하는 뉴스 수집하기

김유민 — Mon, 09 Nov 2009 11:20:53 +0900

안녕하세요, UX 팩토리 블로거 김유민 (@youminkim) 오랜만에 인사드립니다. 오늘은 지난주 11월 2일 부터 이틀간 코엑스에서 진행되었던 SymCT 에서 인상 깊게 들었던 연구 한가지를 리뷰 합니다. Paul Resnick 박사님의 BALANCE 라는 연구 프로젝트 인데요, 기존 단순 '추천' 수 기반으로 뉴스를 수집해 보여주는 방식은 다양한 의견을 반영하지 못해 한쪽으로 편향될 수 있다는 것을 문제점으로 보고 있었습니다. 서비스 상단에 올라오는 뉴스들이 항상 보수성향만 보이고 있다거나 혹은 그 반대의 경우라면 사용자들은 불쾌감을 느낄 것입니다. 뉴스를 추천 수 기반으로 분석해 보여주는 서비스로는 대표적으로 Digg, 그리고 우리나라에는 Daum view 가 있습니다.

이 프로젝트에서 사용자에게 다양한 관점을 지닌 뉴스들을 제공하기 위해 사용한 방법은 Sidelines 이라는 알고리즘 입니다(논문, 발표자료). 발표자료에서 제시한 예시와 함께 어떻게 알고리즘이 동작하는지 알아보도록 하겠습니다.

위 그림은 두 그룹(푸른사람들 vs. 붉은사람들)의 총 여섯 명의 사람들 이 ABCDEF 기사에 대해 '추천' 한 예시입니다. 단순 추천 수 기반(Approval voting)으로 상단에 배치할 네가지 뉴스를 골라보면 B,A,D,F 가 골라지게 되는데, 이 결과는 푸른 사람들이 추천한 뉴스로 편향 된 것이라 볼 수 있을 것입니다. 이를 해결하기 위해 Sidelines 알고리즘은 아래와 같이 동작합니다.

먼저 가장 추천 수가 많은 뉴스였던 B 를 선택하고, 그것을 선택한 사람들을 제외 시킵니다. 그리고 나머지 사람들이 추천한 뉴스 가운데 추천 수가 많은 것을 고르게 됩니다. 그 결과 붉은 사람들이 골랐던 C 가 선택되었습니다.

이전에 선택되었던 C를 추천한 사람들을 제외한 뒤 그 중에서 추천 수가 많은 A 를 선택합니다.

같은 방식으로 이번에는 E 가 선택되었습니다. BCAE 가 선택되었고, 결과적으로 푸른 사람들의 의견만을 반영했던 단순 추천 수 방식에 비해 Sidelines 알고리즘은 붉은 사람들의 의견도 잘 반영시키고 있습니다.

사람들의 '추천' 이라는 행위 자체가 뉴스 내용의 성향을 완전히 대변해줄 수 있는 것이 아니기 때문에 뉴스의 의미적 다양성이 확보된 것이라고 단언할 수는 없지만 최소한 소수에 의해 지지받던 무엇인가가 주류로 올라올 수 있는 기회가 확보되었다는 점, 그리고 유명하기 때문에 유명해지는 현상에서 생각해볼 수 있는 의견 쏠림문제(tipping problem) 의 해결에 이바지 했다는 점은 의미가 깊은 듯 합니다.

뉴스의 의미적 다양성을 확보하기 위한 연구로 우리나라 연구자 분들이 CHI2009 에서 소개했던 NewsCube 가 있습니다. 뉴스들이 지니고 있는 성향(bias) 을 시스템이 자동으로 분석하여 비슷한 관점의 뉴스들을 묶어 보여주는 방법에 대해 다루고 있습니다.

그리고 이러한 소셜 컴퓨팅 관련 연구에 관심 있으시다면, 이 발표세션의 좌장으로 계셨던 한상기 교수님 (@steve3034) 연구들도 참고해보시기 바랍니다.

그럼 다음에 재미있는 연구와 함께 찾아뵙겠습니다 :)

* 제가 UXFactory 에 써왔던 리뷰들은 이 링크에서 확인하실 수 있습니다.

CSS NiTE 서울에 오다.

황리건 — Fri, 06 Nov 2009 16:15:30 +0900

일본의 웹표준 커뮤니티를 이끌고 있는 CSS NiTE 행사가 국내에서 첫 개최된다고 해요.

CSS Nite는 나고야, 오사카, 아오모리, 후쿠오카, 오키나와, 아키타, 삿포로, 후쿠이, 센다이, 히로시마 등 일본의 여러 도시에서 지금까지 총 113회의 컨퍼런스를 통해 18,191분이 참여한 가장 규모가 큰 웹표준 컨퍼런스입니다. - 웹 뒤에 숨은 Web, 봄눈님

오는 21일에 하는데 150명이 참가하는 유료행사가 1주일만에 등록이 마감되었다고 합니다. 예상보다 일찍 마감되는 바람에 마감된 행사 소식을 전하게 되서 너무 안타깝지만, 혹시 구독하시는 분들 중에 가시는 분들이 있으면 후기로 소식 전해주시고, 저도 유팩을 통해서 간단하게 나마 공유해드리도록 하겠습니다.

그 동안 웹표준의 필요성에 대해서는 많은 분들이 나누셨겠지만, 실제 현업에서 필요한 노하우나 지침들에 대한 공유가 넓게 많은 분들에게 퍼지지는 못했다는 생각이 드네요. CSS NiTE와 같이 웹퍼블리셔들의 커뮤니티에서 직접 준비하는 범지역 행사가 첫번째 서울 행사에 이어서 전국적으로 퍼져나갈 수 있다면, 한국의 웹 생태계가 한발짝 더 발전하는 계기가 되지 않을까 하고 꿈꿔 봅니다.

마이크로소프트에서도 장소 협찬 및 행사 준비를 돕고 있고요. 현장에 오시는 분들은 저도 보고, MS를 대표해서 패널토의에 참석하시는 박중석님을 만나실 수 있을꺼에요.

[런던 특집 1탄] 경험디자인 성지 순례기

황리건 — Wed, 04 Nov 2009 10:40:40 +0900

뉴욕에 타임스퀘어가 있다면, 런던에는 피카딜리 서커스가 있죠. 이번에 런던 여행을 다녀와서 몇 백개의 영상을 찍어왔지만, 그 중에서도 여러분들에게 가장 먼저 보여줄만한 런던스러운 동영상이 아닐까 싶네요.

언젠가 세계적인 클럽DJ들과 스타 들이 뉴욕과 런던을 오가며 최신 유행을 소비한다는 글을 본 적이 있어서, 뉴욕과 런던은 제가 꼭 탐험해 보고 싶었던 도시이기도 합니다. 10년만에 런던을 다시 찾게 된 결정적인 이유는 런던 나의 마케팅 성지 순례기라는 책이 도움이 되었는데, 저는 오히려 경험 디자인의 관점에서 런던을 보고 왔답니다.

런던에서는 다양한 분야(인쇄광고, 시각디자인, 환경디자인, 현대예술, 공예, 타이포그라피, 카피라이팅, 조명, 서비스, 제품디자인 등등등)의 높은 수준이 곳곳에서 알게 모르게 느껴지더군요. 그 곳에 살아보지 않아서 자세히는 모르지만, 문화인류학적 보고라고 할만한 대영박물관(무료)을 옆에 두고 공부하는 옥스퍼드 학생들과 시민들은 타고난 문화인류학자가 아닐까 하는 생각도 들고, 토대가 되는 각 분야의 높은 수준들이 만나 문화인류학적 통찰을 통해 종합예술과 경험디자인으로 발전한 것이 아닐까 하는 생각도 들더군요.

여행하는 내내 모든 것들을 경험디자인 관점에서 체험할 수 있는 이 곳이야 말로 도시 전체가 하나의 경험 디자인 박물관이 아닌가 하는 생각이 들었어요.

비싼 금액에도 불구하고 밖에서 기대한 것 이상의 탁 트인 시야를 경험할 수 있는 런던아이

역시 관람객에게 다양한 시각적 경험과 체험을 할 수 있도록 제공하는 수족관

수족관 내부를 보여주는 안내 포스터. 이 포스터 한 장 때문에...

노팅힐의 무대가 되었던 포토벨로의 어느 담벼락. 보드게임 스크램블의 타일로 구성한 친숙한 타이포.

런던은 빨간색을 아주 많이 볼 수 있는데, 중국의 빨간색과는 전혀 다른 느낌. 전화박스는 관광객들에게 오히려 인기가 많은데 내부는 냄새나고 더럽다는 것이 아쉬움.

맥도날드의 빠른 테이크아웃 서비스.

재미있는 나무 모형.

너무너무 맛있었던 베이글 가게였는데, 가게 내부도 동글동글, 로고도 동글동글.

지하철 어느 자리에 앉거나, 서거나... 항상 바로 앞면에 있는 지하철 노선도. 모든 자리 윗 쪽에 친절하게도 노선도를 붙여놓았다. 노선도가 수정됐을 때엔 굉장한 노가다겠구나라는 생각이 들지만... 실제로 노선도가 수정되었는지 같은 부분을 수정하는 스티커가 모두 붙어있었음.

하나하나 디자인이나 타이포, 카피 다 마음에 드는 예쁜 병들.

버스노선도. 지역 별로 다르다. 이건 아마도 우리나라의 종로나 명동 쯤에 해당되는 옥스퍼드 스트릿용인듯. 확대된 구역 이미지에서는 각 버스 정거장이 AA,AB,AC... 등으로 표시되어 있고, 몇 번 버스가 어떤 위치에 서는지 볼 수 있다.

런던에서 묵었던 소호호텔. 촬영 세트장이라고 할만한 실내 인테리어와 완벽한 조명, 세심한 서비스 등 비싼 숙박료를 치뤘지만 많은 것을 느끼게 해준 곳.

윈도우7에서 멀티터치 구현시 UX 고려사항

황리건 — Wed, 04 Nov 2009 06:30:00 +0900

윈도우7에서는 알려진 것처럼 멀터터치 스크린을 사용하여 프로그램을 개발할 수 있죠. 개발자와 미디어 아티스트 들에게 도움이 될만한 윈도우7 멀티터치 개발에 대해 배울 수 있는 동영상이 있어서 소개해 드려요.

서피스 프로그램 개발 경험이 있는 오일석님이 윈도우7에서 멀티터치가 어떻게 적용이 될지(어떻게 활용해야 할지) 설명해 주고, 본격적으로 멀티터치를 개발하는 방법에 대해서 자세히 설명해 주고 있어요. 여기서 보실 수 있네요.

내 모니터에 지문을 묻히기엔 아직 망설여 진다.

익숙한 마우스 vs 어색한 손가락

링크를 누르기엔 내 손가락이 두껍다.

텍스트 입력은 거의 불가능하고(텍스트 입력의 경우 가상 키보드를 사용해서 가능할텐데...)

마우스 오버가 없다

멀티터치가 신기하고 재미있지만…

작업을 하기에는 불편하다

세심한 배려가 필요하다.

정교한 마우스 vs 두꺼운 손가락: 점프 리스트의 예

다르다는 걸 인정: 바탕화면 보기 동작 차이

어쨋든 반응한다: 끝에서 바운스 바운스(터치가 동작하고 있는지 여부에 대해서 피드백을 주어야 하기 때문에, 휠마우스와는 다르게 스크롤이 끝나는 영역에서 약간의 반동 효과가 들어간다는)

마우스 오버가 없다.

기존 응용 프로그램을 사용하기에는…

실버라이트 기초를 약간 알고 있는 사람들은 실버라이트 멀티터치 개발에 대한 동영상을 보면 좋겠네요. 프로젝트 생성, 이벤트 처리, 실행 정도의 방법만 알고 있어도 이해하는 데 어려움이 없을 정도로 쉽게 잘 설명해 주고 있어요.

아시다시피, 멀티터치가 가능한 PC에서 해볼 수 있겠죠. 멀티터치 개발을 해보고 싶어서 PC를 구입하는 사람들도 생겨나겠네요. TechDays 2009에서 좀 더 다양한 주제의 개발 동영상들을 보실 수 있습니다.

전기밥통의 인터페이스에서 배우는 UX

황리건 — Mon, 02 Nov 2009 13:35:14 +0900

요즘 한창 집안 살림 장만하느라 한창이라 이것저것 살 것이 많네요. 생전 사보지 않았던 물건들을 사야 하니, 이리저리 따져보고 물어보고 생각해보면서, 참 많은 물건들의 UX에 대해서 생각해 보게 되요.

우리 주변의 여러 가지 제품들은 생활 경험에 어떻게 영향을 미치고 있을까 측면에서, 쇼핑도 현장 UX 공부가 될 수 있어요. 마트의 전자제품 코너에는 정말 많은 전기밥통들이 있죠. 워낙 많은 제품이 있고, 출시 시기도 워낙 다양하다 보니 전기밥통이란 녀석의 인터페이스가 과거에서 현재까지 최신 제품에서 어떻게 변화하고 있는지 한눈에 알아볼 수 있었어요. 와이프가 직원 분과 상담하는 와중에 저는 사진을 몇 장 찍어왔습니다.

인터페이스의 구성에 따라서 편의상 1,2,3 세대라고 구분해 봤습니다. 세대가 지날 수록 컨트롤에 필요한 운동량과 자극은 적어지고(세련되지고), 표현 방식은 풍부해지는군요.

1세대 전기밥통 (물리적 버튼과 램프[보온/취사]) - 투박해 보이지만 심플한데다 네츄럴한 느낌마저 주는 인터페이스. 사실은 이 밥통 너무 사고 싶었는데 예약 기능이 없어서...

2세대 전기밥통(뾱뾱이 버튼과 디스플레이+음성안내) - 뾱뾱이라는 표현이 맞을지 모르지만 이 버튼을 누를 때 왠지 모르게 힘을 꾹 주게 되지 않던가요. 겉모습도 헤치는 이런 버튼 너무 싫어요.

3세대 전기밥통(터치 패널) - 반면 살짝 손가락을 올리면 동작하는 버튼. 100점 만점은 아니지만, 인터페이스에서 낙점을 받아 결국 최종적으로 구매한 제품.

몇몇 제품에 대해서 예전 초콜릿 폰과 유사한 초기 터치 인터페이스가 적용되어 있더군요. 조금 살펴보니, 밥통 뿐 아니라, 냉장고, 세탁기, 전자렌지, TV 등 최신 가전 제품에서 나타나는 특징이에요.

저처럼 관심있는 사람이 눈치를 채는 정도라면, 아직 사용자들은 이런 작은 차이에서 오는 경험의 변화에 대해 크게 관심이 없는 것 같기도 합니다. 대부분의 소비자에게는 여전히 어떤 브랜드인지가 중요한 것이죠.

밥이 맛있는지, 취사를 빨리 할 수 있는지 등도 중요한 부분인데 이 것은 기존 제품에 대한 경험이 크게 좌우됩니다. 그래서 주변 사람들의 평도 중요한거죠. 밥맛이 맛있더라, 압력솥이 밥이 빨리 되더라... 밥통 하나 사려고 여기서 얻을 수 있는 UX가 무엇인지에 대해서 어머니랑 인터뷰(?)하기도 했습니다.

그러나 앞서 살펴본 인터페이스의 변화처럼 눈에 드러나는 UX적인 요소들로 인해서 사용자들은 어떤 브랜드인지 여부 보다, 생활에서 겪을 수 있는 복잡한 경험 요소들을 더 따져보게 될 거에요. 다른 전자제품과 주방 분위기와도 잘 어울리는지(색상과 디자인), 깨끗하게 위생적으로 관리가 가능한지, 조작하기에 불편하지 않은지, 원하는 사이즈와 규격에 맞는지, 차별화 되는 기능을 통한 경험을 얻을 수 있는지, 돌솥밥을 지을 수 있는지 등등... (개인적으로 어떤 밥솥에서 제공하는 돌솥밥 기능이 무척 끌렸는데 2세대 밥통이라 포기했죠.) 그리고 밥통은 좀 더 예뻐져야 한다고 생각되는데, 적어도 광고모델과 어울릴 정도는 되야... 소비자라는 사용자 뿐 아니라 마케터나 판매원 등 잠재적인 사용자들의 UX와 그들을 통한 간접적인 고객의 만족도나 브랜드 경험도 향상될 거란 생각이 듭니다.

전기밥통 하나만 보더라도 UX적으로 고려할 부분들이 굉장히 많고, 또 그것이 우리의 삶을 작고 크게 변화시킬 수 있다는 사실이 너무 재미있지 않나요? 여러분들의 가전 제품에 대한 경험은 어떤가요?

저의 또다른 경험을 얘기해 보면, 저희 집에 최근에 장만한 가전제품이 모두 3세대 전기밥통과 동일한 형태의 인터페이스였어요. 아직은 예전 초콜릿폰처럼 터치 영역에 대한 구분도 없고 너무 민감한데다 터치에 대한 반응이 적절하지 않아서 잘 못 입력되기도 하는 등 아쉬운 점도 있긴 하지만, 곧 이런 부분도 다음 제품들에서는 바뀔거라고 기대가 됩니다. 핸드폰이나 PC 등에 비추어 보았을 때 4세대 가전제품들이 어떤 모습일지 상상이 되시나요?

한편, 얼마 전에 벽걸이형 대형 LED TV도 장만했는데, 보더(테두리)가 없는 새로운 TV 광고를 보니 다시 지르고 싶어지더라고요. TV 테두리의 검은색은 가시광선을 흡수하는 성질 때문에, 사용자로 하여금 빛이 나오는 영상화면을 피하고 테두리에 눈을 돌리게 해서 시각적 집중력을 떨어뜨릴 수 있다는 것을 알고 있기 때문에...

IASDR 2009 Don Norman Keynote : 디자인 리서치에 대한 강연

황리건 — Fri, 30 Oct 2009 06:00:00 +0900

닐슨노먼그룹의 돈 노먼이 지난 10월 18일에 열린 세계디자인학회에서 키노트를 했어요. 유팩의 김수님이 얼마 전에 이 행사에 대해서 소개해주기도 했죠.

70만원에 이르는 등록비 때문에 참여하지 못해서 아쉬웠던 분들도 있을텐데요. 공식 웹사이트에서 키노트 스피치에 한해서 동영상 다시 보기 서비스를 제공하기 시작했어요. 현재는 돈 노먼의 키노트만 공개되어 있고, 다른 키노트 스피커들의 영상도 곧 공식 웹사이트에서 보실 수 있다고 합니다.

이번에 공개된 돈 노먼의 키노트 동영상은 17분 경부터 도널드 노먼의 강연이 시작됩니다. 파파스머프 같은 모습이 인상적이네요.

발표 내용 중엔 Hidden Solution을 설명하면서 보여준 아래 그림들이 재밌습니다.

디자이너가 하는 일이 문제해결책을 만드는 것이라면, 적절한 디자인 리서치를 통해서 숨어있는 문제해결책들을 발견하는 것이 중요하다고 생각합니다. 또, 우리가 사용하는 제품으로부터 니즈가 나온다는 통찰은 니즈에서부터 제품이 나온다는 일반적인 생각과는 다른 접근이라 흥미롭네요.

강의 영상은 여기서 보실 수 있고, 자막 없이 영어로 되어 있어요. 돈 노먼에 대해서 잘 모르시는 분들은 여기도 참고하세요.

스케치플로우를 이용한 인터랙티브 프로토타이핑 워크샵

황리건 — Thu, 29 Oct 2009 13:31:05 +0900

이번 주 토요일에 익스프레션 스튜디오 카페에서 스케치플로우를 가지고 인터랙티브 프로토타입을 만들어 보는 무료 워크샵을 진행한다고 해요. 지난 스케치플로우 워크샵에 이어서 2번째로 진행되는 워크샵인데요. 스케치플로우를 배우고 싶은 분, 코드없이 만드는 인터랙티브 프로토타이핑에 관심있는 분들은 어서 신청하시길...

트위터와 미투데이로 함께 나누는 기쁜 일

황리건 — Tue, 27 Oct 2009 16:01:06 +0900

제가 지난 10일에 결혼을 했답니다.

결혼식 직전부터 끝나는 순간까지 트위터와 미투데이로 많은 분들이 실시간으로 축하해주시고 기록을 남겨주셔서, 소셜 서비스가 우리의 일상에 어떤 경험을 줄 수 있는지에 대해서 정말 인상적인 체험을 했어요.

주변 가까운 사람들의 일상이 인터넷과 핸드폰 등 우리가 이미 익숙하게 사용하고 있는 기술들을 통해서 기쁜 일과 슬픈 일을 시간과 장소의 제약을 뛰어넘어 함께 나눌 수 있는 세상이 온다면 정말 좋겠네요.

현장에서 와이브로를 동원한 입장 동영상, 행진 동영상 by projecty님
케익커팅 사진, 축가 사진 by ludensk님
행진 끝나고 by 길버트님

projecty님 트윗