경주 관광 포털 사이트의 핵심 서비스 중에 하나인 여행카트 서비스는 사용자들이 웹서핑 중에 마음에 드는 여행지가 있으면 상품 카트처럼 여행지들을 카트에 담을 수 있는 서비스입니다. 사용자들은 이렇게 카트에 모은 여행지들을 정리해서 여행 일정표를 작성하거나 출력할 수 있습니다.



이번 여행카트 디자인과 설계의 특징은 대략 아래와 같습니다.
  1. 전체적인 UI디자인은 회색계통의 무채색을 사용했습니다.그래픽툴, 개발툴, 웹브라우저까지 총 망라한... 우리가 접하는 수많은 UI들이 회색을 사용하고 있습니다. 회색이 정보를 표현하는데 가장 명확하고 공정한 색이기 때문이지요. 이번 여행카트 디자인에는 다양한 형태의 관광지 사진이 들어가는데 이 다채로운 색상의 이미지들을 모두 받아내는 UI색상은 역시 회색 밖에 없다고 생각했습니다. 사용자들의 눈에 들어와야하는 정보는 UI디자인이 아니라 관광지 이미지니까요. (자세한 설명은 예전의 기사를 참고 하시길 바랍니다.)

  2. UI에서 큰 아이콘은 검정색으로 처리했습니다. 아이콘이 UI와 같이 회색이면 주목성이 떨어지고 유채색을 사용할 경우엔 정보객체(관광지 사진)의 주목성을 떨어지기 때문입니다. 아이콘이 작을 경우에는 유채색이어도 정보객체의 주목성을 떨어뜨리지 않기 때문에 적절히 사용해도 상관없습니다.

  3. 우측의 버튼으로 카트의 내용을 보여줄 수도 있고 숨길 수도 있게 했습니다. 커다란 카트가 항상 열려 있으면 사용하는데 무척 걸리적 거리겠지요?

  4. 플래시가 제공하는 기본컴포넌트의 디자인을 그대로 사용했습니다. 이런 디자인들은 가급적 손을 대지 않는게 좋습니다. 왜냐하면 이미 사용자들은 이러한 UI디자인에 오랜 기간 숙달되고 익숙하기 때문입니다. 새로운 디자인이 아무리 훌륭하고 아름다워도 사용자들이 그 디자인에서 "기능(Function)"을 빠르게 유추해내지 못하면 쓸모가 없는 것이지요. 그러므로 UI디자이너들은 가급적 기본 컴포넌트에 어울리게 UI를 디자인을 하는 것이 좋습니다.

  5. 여행지들의 이동과정을 유추할 수 있도록 디자인 했습니다. 한 화면에 관광지를 3개 밖에 넣을 수 없어 조금 아쉬웠지만 상단의 여행코스 탭의 괄호() 안에 여행지 갯수를 넣고 카트 좌우측에 < > 버튼과 여행정보 객체 사이에 → 버튼을 넣어 '여행 카트에 더 많은 여행지들이 숨어 있다.'는 사실을 사용자들이 유추해낼수 있게 했습니다. (할만큼 했는데 조금 아쉽네요)

  6. 상세목록 탭을 클릭하면 해당 여행 경로가 목록으로 나옵니다. 앞서 설명한 여행코스 탭에서 한 화면에 다 담지 못한 여행객체들을 도표로 한눈에 볼수 있게 했습니다. 그리고 우측에 간략히 정리된 문서형 정보가 나오기 때문에 도표를 잘 이용하는 사용자들에 큰 도움이 될 것입니다.

  7. 여행 정보객체들을 드래그해서 위치를 바꿀 수 있게 했습니다. 아마 대부분의 사용자들은 이 기능을 잘 몰라서 사용하지 않을 것입니다. 아직까지 인터넷 세상에서 드래그앤드랍 기능을 사용해볼 기회는 그렇게 많지 않으니까요.


각 여행지 객체에는 롤오버시 작은 메뉴가 나옵니다.
이 메뉴의 삭제 버튼과 드래그 등을 통해 여행 일정을 조정할 수 있습니다.
모든 이미지는 도트로 명확하게 표현했고 텍스트도 안티엘리어싱이 없습니다.


달력 컴포넌트입니다.
플래시CS3는 자체적으로 달력 컴포넌트를 제공하지 않아 만들어 써야 했습니다.
어설픈 컴포넌트 하나 만드느라 약간 애를 먹었네요.



도표의 사용빈도는 의외로 높습니다.
참신한 기획력과 디자인, 기술을 입힌 컨텐츠도 좋지만
다소 투박하더라도 이런 도표 컨텐츠를 추가로 넣어두면 웹카트의 사용성은 더욱 높아집니다.
(시간과 비용이 허락하는 선에서 말이죠)


(출처 : 조석 블로그)

 이번 경주 관광 포털의 여행카트는 쇼핑몰의 상품카트와 여행포털의 일정표 서비스의 장점들을 합친 서비스입니다. 다소 생소한 서비스지만 웹카트는 쇼핑몰 등을 통해 워낙 많이 접해본 서비스이니 첫 사용자들이 겪게 되는 사용성 스트레스는 그리 크지 않을 것입니다.
저작자 표시 비영리 변경 금지
Posted by 정 영진

트랙백 주소 : http://www.weblind.com/trackback/88 관련글 쓰기

댓글을 달아 주세요