User Experience Designer

이탈리아의 유명한 경제학자인 Vilfredo Pareto에 의해 처음 생긴법칙인데요, 20퍼센트의 국민이 80퍼센트의 부를 가진다라는 발견이었습니다. 틀린말 같진 않죠? 정확히 20이라는 숫자가 중요한건 아니구요, 1~30퍼센트정도라고 보면 정확할 듯 합니다.

80/20 법칙의 몇가지 예를 들어보자면...
80퍼센트의 제품사용량은 20퍼센트의 기능에서 나온다
80퍼센트의 (도시의) 교통량은 20퍼센트의 도로에서 나온다
80퍼센트의 회사이윤은 20퍼센트의 제품군에서 나온다
80퍼센트의 기술혁신은 20퍼센트의 직원들에게서 나온다 ... 등이 있겠습니다.

80/20 법칙의 요점은 한정된 시간과 자원속에서 가장 중요한 20퍼센트의 디자인 요소들을 알고 그곳에 집중하여 가장 효율적인 리턴을 이끌어내는 것 이라고 할 수 있겠습니다. 워드에서 혹은 다른 많은 프로그램에서 메뉴에 숨겨있지않은 아이콘들이 그 프로그램의 20퍼센트의 기능이고, 그 기능들이 프로그램의 사용량의 80퍼센트를 차지하는 중요한 요소들입니다. 주변의 여러 인터페이스에 관심을 두고보시면 개발자가 전달하고자하는 그 제품들의 사용포커스와 사용자들에게 어필하려는 전략이 무엇인지를 볼 수 있으실겁니다.

지금부터 한번 둘러보세요, 티스토리의 전략은 무엇일까요? 한번 생각해보세요...^^

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

계속 지루했으니 오늘은 좀 재밌는 얘기를 해볼까해요.
미국에서 오래있다보니 요새는 한국의 좋은 사이트들은 계속 놓치고 살아요. 티스토리도 몰랐었죠 ^^ 한국의 디자이너들은 감각이 뛰어나서 플래시를 응용한 정말 이쁘고 스타일리시한 사이트들이 많은데요, 미국에는 인터넷속도가 전반적으로 느리다보니 뛰어난 휴율을 자랑하는 CSS를 이용한 사이트가 많죠. 압도적으로 시선을 잡지는 않지만, 빠르고 쓰기쉬운 사용성면에서는 미국사이트들이 조금 더 뛰어난것 같아요. 예를들어 웹2.0의 선두주자인 플리커, 딜리셔스등이 있죠

이런 미국에도 뛰어난 플래시사이트가 있는데요, 사용자경험디자이너의 입장에서 정말 환상적인 사이트들이란 생각이 들어요. 바로 링컨이라는 차의 웹사이트와 영국 폭스바겐 사이트입니다.

GM Lincoln 사이트 보러가기!


감상포인트: 마우스를 왼쪽, 오른쪽으로 패닝(클릭한상태에서 마우스 옮기는 행동)하면 차를 360도로 볼수있어요. 다른 대부분의 자동차사이트들 처럼 앞, 뒤만 보여주는 것이 아니라 여러 앵글에서 영화같이 다이나믹하게 줌인/아웃이 되면서 자동차를 보여주기 때문에 보는 재미도있고, 정말 눈앞에 차가 있다고 착각할 만큼 대단한 사용자경험을 제공하고 있어요. 사용자들이 스크린을 보면서도 차를 느끼고 만져볼 수 있을것같은 경험을 제공해주는 것, 사용자경험 디자인이 무엇인지를 제대로 이해하고 전달한 사이트라고 생각해요. 브라보!

Volkswagen UK (폭스바겐)


감상포인트: 정말느립니다 ㅡㅡ 딴거하다가 다시와보면 로딩되있습니다.. ^^;;
여하튼 이 사이트역시 대단한 사용자경험을 제공하는데요, 차를 선택하면 차가 사용자에게 달려옵니다. 뒤에서 커브를 그리며 앞으로 오는 모습을 보면서 평평한 스크린이지만 차를 운전해보는 느낌을 받는거죠. 그렇게 내앞으로 다가온 차의 색깔을 바꿔보고 실시간으로 업데이트되어가는 차를보면서 내가 보고있는 차를 내가 만들고, 그 차를 내가 몰게될 것이다...라는 개념을 전달시켜주는거죠. 색상을 입히고, 디테일을 정하는 옵션은 벌써 미니쿠퍼가 널리 유행시킨 방법이지만 (얘들이 원조일껍니다), 이걸 성공적으로 접목한 폭스바겐의 노력에도 박수를 보냅니다.

사용자경험디자인이 이루고자 하는 목표는 사실 간단해요. 사용자에게 평면적인 정보를 전달하는 웹사이트가 아니라, 사용자가 느끼고 가지고놀고 즐기는 공간을 열어주는거라고 생각해요. 우리차 좋아요...라고 차에대한 정보를 나열하는 사이트보다, 직접 매장에 가서 차를 구경하는 것처럼 차가 느껴지는 사이트가 훨씬 더 매력적이지 않나요? 제가, 그리고 많은 디자이너들이 추구하는 이상적인 웹사이트위 구현이라고 생각해요.
오늘은 이만~ ^^

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Information Architecture라니 이건 또 왠 말장난인가... 하는 분들도 있을테구 user experience design보다 좀 더 오래된 개념이라서 소프트웨어 디자인하시는 분들중 알고계시는 분들도 많으리라 생각되네요.

IAInstitute(http://iainstitute.org)의 정의를 인용하자면:
1. 정보의 공유를 위한 구조적인 디자인
2. 웹사이트와 인트라넷에서의 정보의 정렬(organization), 이름짓기(labeling), 검색(search)과 네비게이션(navigation)
3. 제품에서 전달하고자하는 정보를 다듬고 사용성향상과 쉽게찾기등을 통한 사용자의 경험을 높여주는 과학적이고 창의적인 접근
4. 학계와 실업계에서 동시에 태동되고 있는 디자인과 구조설계의 표준만들기

인포메이션 아키텍쳐를 설명함에 가장 많이 인용되는 것이 위의 정의들이긴 하지만, 아직 계속 발전되고 있는 분야이기때문에 실제로 이분야에 종사하는 아키텍트들, 즉 정보건축사들은 저마다의 해석과 업무적인 역할을 가지고 있어요.

제가 생각하기는 인포메이션 아키텍트는 웹사이트 구축에 관련된 모든사람들이 사용자가 어떤 의도로 접속을 했고, 원하는 정보에 어떻게 접근을 할 것인가에 대한 분석을 통해 가장 효과적이고 만족스러운 결과를 제공하기 위한 청사진을 공유하는 시각적 커뮤니케이션이라고 생각해요.

정보건축사들은 어떤 일을 하게되는가? 가장 보편적인 예를 들어볼께요.
사용자 인터페이스에 필요한 요소들을 고려해 디자인 과정기간을 책정하는 것을 시작으로  책정되는 예산에 따른 인력과 자원들이 나뉘게되요. 그리고 디자인과정이 시작되면 프로젝트의 범위에 맞춰서 사용자가 처음 접속하는 그 순간부터 원하는 목적을 달성하고 빠져나가기까지의 일련의 과정들을 구체화하는 것이 가장 큰 업무가 됩니다. 이 단계에서 같이 일하는 팀원들은, 프로젝트 (혹은 프로덕트) 매니저, 유저빌리티 리서쳐, 인터액션 디자이너, 문서화팀 (다큐멘테이션) 등이 있어요. 프로젝트 매니저는 프로젝트 개발의 전체적인 일정과 업무를 조율하게되구요, 유저빌리티 리서쳐는 사용자들에 대한 파악과 분석을 하게되며, 인터액션 디자이너는 인터페이스에서 행해지는 사용자들의 행동에 대한 반응을 디자인하게되고, 문서화팀은 인터페이스상의 모든 단어들을 사용자들이 이해하기 쉽게 바꿔주는 역할을 합니다. 물론 팀원의 구성과 역할은 팀의 성격에따라 추가되기도, 생략되기도 합니다. 이런 팀원들간의 조율을 통해 비지니스적인 필요를 충족시키며 사용자들의 요구를 인터페이스상에서 어떻게 반영할 것인지를 설계하는 것이지요. 이것을위해 가장 널리쓰이는 방법으로는 웹사이트의 윤곽을 잡는 와이어프레임 (wireframe)이 있어요.

와이어프레임을 통해 정보건축사들은 사용자들의 요구를 반영하며, 그 이상으로, 만족스런 사용경험을 제공하는 웹사이트의 구조를 디자인해 팀원들에게 전달하게 되는거지요. 정보건축사들의 핵심능력이자 성공적인 프로젝트를 위한 필수조건인 시각적인 커뮤니케이션을 전달하는 것이 이 와이어프레임의 역할입니다. 소프트웨어 개발의 대부분의 방법론들이 그렇듯, 와이어프레임도 새로 만들어진 것은 아니구요, 구조건축에서 뼈대만들기의 개념을 도입하고 영화산업에서의 스토리보드의 시각적 시퀀스의 전달등이 포함된 개념이라고 보면 이해가 쉬울까요? ^^

인포메이션 아키텍트에 대한 제 나름대로의 정의를 될수있으면 쉽게 전달해 드릴려고 노력했는데요, 생소한 개념일꺼란 생각에 이 분야에 대한 포괄적인 정의를 먼저하게되어서 좀 딱딱하게 들렸을 것 같습니다. 이 분야에 대한 이해를 제가 도울 수 있었다면 좋겠네요. 다음번엔 인포메이션 아키텍트가 잘 활용된 예제를 전달해드릴께요. 적용 전과 후, 웹사이트가 어떻게 달라지는 지에 대한 설명이 주가 될 것 같습니다.

긴 글 읽어주셔서 고마워요 ^______^

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.