버번홀릭 Web2010.12.22 13:01



웹 디자이너 또는 기획 파트 또는 웹 관련 업무를 하시는 분들은 mockup tool을 한번 쯤은 이용해 보셨을 겁니다.
웹 사이트 또는 어플리케이션 제작을 위해 프로토타입 구성이나 UI 시뮬레이션, IA 구성을 위해 많이 사용하죠.
최근엔 사용성 테스트를 위해서도 많이 사용되고 있습니다. 유료던 무료던 자신에게 맞는 툴을 PC에 설치해 사용하고 있죠.
저도 몇개 깔아보기는 했었습니다. 다만 사용량이 적어 대부분 다 지워버린게 문제라면 문제지만....ㅎㅎ

회사 PC말고 이동하거나 집에서나 차안에서나 아이디어가 떠올랐을 때 바로바로 사용할 수 있는 툴은 없을까? 라는 고민에
메모지도 들고다니고, 휴대폰에 저장도 해봤지만 작은 화면이거나 펜으로 그린 그림들이라 나중엔 당시 떠 올랐던 아이디어와
매치가 잘 안되는 경우도 종종 있었습니다. (제 머리가 나빠서 그런 것일 수도 있지만 ㅎㅎ)

그러던 중 mockup을 할 수 있는 어플을 찾았습니다!! iMockups라는 아이패드 전용 어플입니다.
아이패드에서 돌릴 수 있는 mockup tool이라 이동성, 즉시성을 충족해줄 수 있을 것 같아 7달러나 되는 거금(?)임에도 불구하고
바로 결제를 하고 사용해봤습니다.

결론부터 말씀드리자면 사용가능한 tool의 수는 많지는 않지만 이동 중 순간적인 아이디어가 떠올랐을 때 사용하기에 좋고,
회의 때 들고다니면서 사용하기에도 좋을 것 같다는 생각입니다. 아직 직접 실무에 사용해보지는 않았지만 먹히지 않을까 싶네요 ^^;;
단점이 있다면 위에서 말씀드린 것 처럼 tool 종류가 많지 않다는 점인데, 업데이트 되겠지? 라고 생각하고 있습니다. ㅎㅎ


아이패드를 실용적으로 쓸 방법이 없을까 고민하던 중에 이런 어플을 만나서 참 다행인 것 같네요.
그동안 아이폰 App 개발용으로 제작된 mockup tool은 있었지만 웹 사이트 mockup tool은 iMockups가 최초이지 않을까 싶습니다.

참고로 iMockups에서도 아이폰, 아이패드 App mockup도 할 수 있도록 구성되어있습니다.
전용 tool은 아니지만 시뮬레이션은 충분히 할 수 있을 것 같아 스마트폰 또는 스마트패드를 구상중인 분들께 도움이 되지 않을까 합니다.


아래 이미지는 iMockups를 통해 테스트로 만들어본 이미지입니다. ^^







Posted by 버번홀릭

댓글을 달아 주세요

  1. Balsamique Mockup과 비슷한 걸, 아이패드에서 보여줬네요.
    정교한 작업을 하기에는 OmniGraffle에 뒤지지만,
    Ideation에는 정말 좋은 툴로 생각됩니다.
    좋은 정보네요!

    2010.12.22 13:51 신고 [ ADDR : EDIT/ DEL : REPLY ]

버번홀릭 Web2009.04.13 18:56
사용자 삽입 이미지


한 의류 업체의 홈페이지 입니다.
우연히 검색을 통해 찾아들어간 홈페이지는 아주 반갑게 유저를 반겨주었습니다.

우선 첫번째 팝업 차단
신상의류에 대한 프로모션 차원에서 만들어 놓은 홈페이지인지 기본 페이지가 뜨고 그 다음으로
전체 페이지가 호출되도록 설계 되어있지만 우리의 IE7은 가차없이 팝업을 차단합니다.
그런데 차단 당하는 것이 광고용 팝업이 아닌 프로모션용 페이지라니.....
인터넷 또는 컴퓨터 사용에 서투른 사용자들에게는 조금 당황스러운 시추에이션이 아닐 수 없을 겁니다.
그러나 당황스러움과 좌절은 여기서 끝이 아니었습니다.

두번째 나가기 없는 풀 스크린
팝업 해제를 하게되면 신상의류나 코디네이션, 관련 뉴스, 샵의 위치를 알려주는 핵심 컨텐츠들이
담겨있는 페이지가 짜~짠~하고 나타나죠. 그런데!!
짜~짠하고 나타난 페이지는 일반 브라우저를 사용하는 페이지가 아닌 풀 스크린을 이용한 프로모션용 페이지였습니다.
뭐....풀 스크린을 이용하는 프로모션을 처음 보는 것도 아니고, 그렇게 놀랄만한 일도 아니어서
찾으려했던 내용을 찾고 창을 닫으려 했습니다. 문제는 여기서 부터 입니다.

창 닫기를 수행하는 버튼이나 링크따위가 전혀 없더군요. ㅡㅡ 어떻게 나가라는 거지? 나가지 말라는 친절한 의도인가?
아는 사람만 사용하는 Alt+Tab으로 빠져나와 작업표시줄에서 닫기를 통해야만 닫을 수 있었습니다.
저야 Alt+Tab 기능을 아는 사람 중에 한명이라 그렇게라도 빠져나왔지만 모르는 사람은 어떻게 빠져나올까요?
아마 수십분동안 고민한 후에 강제 리부팅을 하는 분까지 계시지 않을까 조심스레 생각해 봅니다.

그리고 마지막 세번째 롤 오버를 해야만 나타나는 메뉴
처음에 메뉴도 없고 나가기도 없는 이 당황스러운 홈페이지를 보고 난감해하면서 마우스를 이리저리 움직이다 보니
검정색 원에서 툭~하니 메뉴가 나왔습니다. 이건 뭐.....ㅡㅡ;;


의도적으로 만들어 놓은 트랩 사이트도 아니고, 유명 의류업체 홈페이지에서 발생한 일이라 더욱 당황스럽습니다.
웹 유저 인터페이스라는 개념이 생기면서 '이렇게 하면 안된다'라는 최초의 교본에 등장할 만한 사례인 것 같습니다.
웹 서비스를 제공하거나 웹 분야에 종사하고 계신 저를 포함한 모든 여러분!!
우리 모두 '우리가 서비스하는 홈페이지는 어떨까?'라는 생각으로 다시 한번 점검해봅시다.


Posted by 버번홀릭

댓글을 달아 주세요

사용자 삽입 이미지


오래간만에 북 리뷰 글을 올리네요. 그동안 게으름증으로 책을 조금 멀리한 결과입니다. ^^;;
오늘 소개해드릴 책은 웹 서비스에 종사하는 분들이라면 모두 읽어봐야 할 교과서라고 할 수 있는 책 입니다.
웹 사용성 분야의 최고 권위자라고 잘 알려진 닐슨 노먼 그룹의 '제이콥 닐슨'이 집필한
'웹 사용성 중심의 웹 사이트 제작론'이라는 책 입니다.

해외 서적을 번역한 책의 특징인 '이해 불가 문장'이나 '머리에 잘 들어오지 않는다'라는 점과 400페이지에 가까운 분량의 압박과
26,000원이라는 고가의 책임에도 불구하고 3주에 걸쳐 이해의 고통(?)과 분량의 압박으로 지루함을 이겨내면서 까지 읽은 이유는
실제 연구 결과물의 정량 데이터가 있었기 때문입니다. 이미 읽어보신 분들도 있으시겠지만 중요한 포인트 데이터 몇가지를
정리하고 널리 알려보고자 늦게 읽은 제가 감히 올려봅니다. ^^

# 인터넷 경험차이에 따른 홈페이지 이용 특성과 일반적인 홈페이지 이용 특성

* 홈페이지 평균 체류 시간
- 경험이 적은 사람 : 35초 이내
- 경험이 많은 사람 : 25초 이내
- 평균 30초를 체류하며 2분 내에 판단하고 이용 여부를 결정

* 스크롤풀에 의한 페이지 보기 (스크린풀 : 스크롤이 있는 페이지에서 스크롤을 전부 내려 페이지를 탐색)
- 첫 방문자 : 체류시간 31초 / 사용자 스크롤 23% / 스크린풀 스크롤 0.8
- 2번째 방문자 : 체류시간 25초 / 사용자 스크롤 16% / 스크린풀 스크롤 0.8
- 3번째 방문자 : 체류시간 22초 / 사용자 스크롤 16% / 스크린풀 스크롤 0.8
- 4번째 방문자 : 체류시간 19초 / 사용자 스크롤 14% / 스크린풀 스크롤 0.5

* 홈페이지(메인 페이지), 내부 페이지 이용 소비 시간
- 경험이 적은 사람 : 홈페이지상에서 소비 시간 35초 / 내부 페이지 소비 시간 60초
- 경험이 많은 사람 : 홈페이지상에서 소비 시간 25초 / 내부 페이지 소비 시간 45초

* 사용자가 다른곳을 둘러보기 위해 클릭하는 부분
- 가운데 > 우측 > 좌측 > 하단 > 상단 (상단 클릭율이 가장 낮음)

* 특정 사이트 방문을 위해 검색을 사용하는 비율
- 검색 사용 : 88%
- 직접 입력 : 12%


# 검색 엔진 이용 특성

* 검색 엔진 서비스에서 특정 단어 검색의 검색 결과 페이지에서 페이지 이동율
- 1페이지 : 93%
- 2페이지 : 7%
- 3페이지 : 1%

* 검색 결과 페이지에서 사용자가 클릭하는 위치 (검색 결과 10개 기준)
- 검색 결과 상위 첫번째 : 51%
- 검색 결과 상위 두번째 : 16%
- 검색 결과 상위 세번째 : 6%
- 검색 결과 상위 네번째 : 6%
- 검색 결과 상위 다섯번째 : 5%
- 검색 결과 상위 여섯번째 : 4%
- 검색 결과 상위 일곱번째 : 2%
- 검색 결과 상위 여덟번째 : 1%
- 검색 결과 상위 아홉번째 : 1%
- 검색 결과 상위 열번째 : 2%
(첫번째 ~ 네번째까지, 맨 끝이 효과적)

* 페이지 유형별 스크롤 이용 비율
- 첫번째 방문자 : 23%
- 네번째 방문자 : 14%
- 내부 페이지 스크롤 이용 비율 : 42%
- 검색 엔진 결과 페이지 스크롤 이용 비율 : 42%


# 웹 사이트 사용성 문제

* 웹 사용성 문제 중 가장 중요한 문제 8가지
- 방문했던 링크의 색이 바뀌지 않는 문제
- 뒤로가기 버튼이 사용안되는 문제
- 새 창을 여는 점
- 팝업
- 광고처럼 보이는 디자인 요소
- 웹 전체의 관계를 위배
- 내용이 없는 컨텐츠와 과장된 표현
- 빽빽한 컨텐츠와 읽기 어려운 문자열

* 유저가 가장 싫어하는 광고 기술
- 팝업
- 느린 로딩 속도
- 속임수로 클릭 유도
- 닫기 버튼이 없는 경우
- 보려는 것을 가리는 경우
- 불명확한 용도
- 컨텐츠 주위를 움직이는 것
- 페이지 대부분을 차지하는 것
- 계속 깜빡이는 것
- 화면을 가로질러 움직이는 것
- 자동 소리 재생

* 사용성에 영향을 미치는 것 들
불확실한 클릭 영역 / 파란색이 아닌 링크 / 스크롤 작업 / 등록 요구 / 복잡한 URL /
풀다운 메뉴와 캐스케이딩 / 플러그인과 최첨단 기술 / 3D 사용자 인터페이스 / 스플래시 페이지 /
움직이는 그림과 자동스크롤 되는 문자열 / 커스텀 GUI / 정보 제공자 불명 / 만들어 낸 말 /
오래된 컨텐츠 / 웹 사이트 내의 모순 / 조급한 개인 정보 요청

* 사용자 이용의 실패 이유 중 가장 큰 이유 (사용자가 사이트 이용에 어려워 하는 점)
- 검색 능력 (검색 지원이 좋지 않으면 컨텐츠 이용을 어려워 함)
- 페이지 디자인 (조악한 페이지 디자인으로 인해 이용을 어려워 함)


# 웹에서의 문자 사용 방법

* 일반적인 인쇄물에 사용하는 단어의 수 25%만을 웹에서 사용해야 안정적인 가독성 유지

* 텍스트 위주의 컨텐츠는 앞 2줄까지만 읽는 경향이 있어 컨텐츠의 주요 내용이나 결론은 앞줄에 기입해야 함

* 제목에 사용되는 글자의 크기는 본문에 사용된 글자 크기의 140% 사용


* 권장 문자열 크기
- 일반 방문자 : 10~12포인트
- 고령 및 시력이 낮은 방문객 : 12~14포인트
- 어린이나 이제 막 글을 깨친 사람 : 12~14포인트
- 10대 : 10~12포인트

* 글꼴에 대한 4가지 지침
- 10포인트 또는 그 이상 크기를 갖는 일반적인 글꼴 사용
- 글꼴의 배경을 복잡하게 만들지 말 것
- 흰 색 배경에 검은색 문자열을 사용
- 계속 움직이는 문자열, 대문자로만(영어) 이루어진 문자열, 그림으로 만들어진 문자열을 최소화


위의 내용은 웹 사용성에 관한 기초적인 데이터들을 모아놓은 것 입니다.
이미 알고 계신 분들도 계시겠지만 그렇지 않은 분들께는 유용한 데이터가 되었으면 좋겠네요.
위에 것들 말고도 더 많은 좋은 데이터들도 있지만 직접 책을 읽어보시는 것이 더 많은 도움이 되실 것 같습니다.
그리고 제이콥 닐슨의 개인 홈페이지 useit.com 에 가시면 그가 연구한 결과물들을 직접 볼 수도 있습니다.
무료로 볼 수 있는 컨텐츠도 있지만 논문같은 자요는 유료 컨텐츠로 되어 있습니다. ㅎㅎ

그리고 하나 더!! UX를 공부하시거나 실무를 보시는 분들께 드리는 추가 정보!!
몇일 전 서점에 갔다가 컴퓨터 관련 서적칸에서 숨어있던 UX 관련 신간을 발견했습니다.
초판일이 2009년 1월 3일입니다. 정말 따끈한 신간이죠. ㅎㅎ


사용자 삽입 이미지

웹 컨설턴트로 유명한 댄 브라운이 저자이며(다빈치코드의 그분이 아닙니다. ^^) NHN UX랩에서 번역을 했습니다.
책의 제목은 UX 디자인 커뮤니케이션입니다. 부재는 성공적인 UX전략과 산출물을 위한 노하우구요.
UX 업무 진행을 위한 팀원들간의 커뮤니케이션 능력과 산출물 만드는 방법, 페르소나 이용 방법등 실무에 도움이 될법한
내용들이 담겨져 있습니다. 업무에 많은 도움이 될 것 같아 냉큼 구입 했네요. ㅎㅎ
읽어보고 리뷰 또 올리도록 하겠습니다. ^^


Posted by 버번홀릭

댓글을 달아 주세요

  1. 너무 잘 읽었습니다! 정리 정말 잘하셨네요!
    쏙쏙 들어왔어요 :)

    2009.04.15 16:20 신고 [ ADDR : EDIT/ DEL : REPLY ]
  2. happy_husky

    이번에 논문준비하다가 Heuristics Evaluation 자료서치하다 들어왔어요! 자료넘좋아서 퍼갑니다^^감사합니다.

    2010.04.11 12:48 신고 [ ADDR : EDIT/ DEL : REPLY ]

버번홀릭 Web2009.01.13 16:44

전 세계에서 서비스되는 웹 사이트의 수는 얼마나 될까요?
정확한 정량적 수치를 알 수 없지만 대략 수십억개 이상이며 그 중에서도 대한민국에서 서비스되는 사이트만
수억개가 된다고 합니다. 여러분은 이처럼 수 많은 웹 사이트 중 하나 또는 그 이상을 서비스 받고있는 것입니다.

그렇다면 가상의 공간상에서 서비스되는 웹 서비스를 여러분은 어떤 방법으로 사용하고 계신가요?
어떻게 원하는 컨텐츠를 찾고, 어떻게 이동을 하시나요?

우리가 사용하는 웹 서비스에서 이동, 탐색을 위한 도구를 제공하고 있기 때문에 가능한 것입니다.
검색, 입력, 출력, 이동, 삭제, 등록 따위의 도구 입니다. 그 중에서도 가장 원초적이며 어느 웹 사이트를 막론하고
반드시 있어야하는 이동 기능은 수 많은 웹 사이트를 쉽게 이용할 수 있도록 해주는 고마운 도구 입니다.
우리가 흔히 말하는 '네비게이션'이 바로 그 이동의 도구입니다.

항법 [航法, navigation]
항공기 또는 선박을 어느 한 지점으로부터 일정의 다른 지점으로 소정의 시간에 도달할 수 있게 유도하는 방법.

본래 네비게이션의 의미는 항법이라는 단어로 비행기나 선박 등 광할한 지역을 탐색해 원하는 목적지로 쉽게 찾아갈 수 있도록
도와주는 기계장치를 뜻 하는 말입니다. 항공기와 선박이 이동하는 현실의 공간보다 무한한 공간을 갖고있는 가상 공간에서도
네비게이션이 사용되며 의미도 다르지 않습니다. 그렇기 때문에 웹 서핑을 위해서는 반드시 필요한 도구입니다.

그렇다면 여러분은 얼마나 많은 네비게이션을 보셨고 또 어떤 네비게이션을 선호하시나요?

웹 사이트를 제공하는 사업자가 각기 다르고 서비스를 만드는 사람이 모두 다른 것처럼 네비게이션도 서비스의 특징에 따라
모두 다르게 제공되고 있지만 큰 줄기는 몇가지로 나눌 수 있습니다.
아래에 대표적인 네비게이션 형태를 보여드릴테니 선호하는 네비게이션을 골라보세요.


사용자 삽입 이미지
사용자 삽입 이미지

1. 단일 버튼 형태의 퀵링크 네비게이션

웹 사이트가 만들어지기 시작하면서 제공된 가장 원초적인 네비게이션입니다.
원초적이지만 가장 직관적이고 심플하고 공간도 적게 사용하고 있다는 장정이 있지만 노출되어있는
버튼 외에는 어떤 서비스가 제공되고 있는지 모른다는 단점도 있습니다.



사용자 삽입 이미지

2. 2Depth 가로 배치형 네비게이션
웹 서비스가 발전되면서 네비게이션의 기능도 발전해 만들어진 네비게이션으로
특히 대한민국에서 서비스되는 웹 사이트들은 대부분 사용했을 정도로 보편화된 네비게이션의 형태입니다.
퀵링크 형태보다는 어떤 서비스를 제공하고 있는지 조금 더 자세히 알 수 있다는 장점이 있지만
2Depth를 선택하기 위해서는 마우스를 이동해 원하는 곳을 클릭해야한다는 단점이 있습니다.
특히 마우스 컨트롤이 익숙하지 않은 사용자에겐 쉽지 않은 일이죠.



사용자 삽입 이미지

3. 2Depth 세로 배치형 네비게이션
위의 가로형 네비게이션을 보완하는 형태로 만들어진 네비게이션입니다.
마우스를 상하좌우 이동이 아닌 상하이동만으로도 선택할 수 있도록 설계된 네비게이션이죠.



사용자 삽입 이미지

4. 전체 메뉴가 펼쳐지는 가로 풀 다운 네비게이션
하나의 메뉴에서 한가지의 2Depth가 펼쳐지는 점과 가로형의 경우 선택하기가 쉽지 않은 점을
개선해 설계된 네비게이션입니다. 어느 지점을 클릭 또는 롤오버하더라도 모든 메뉴가 펼쳐져
전체 서비스를 탐색하고 쉽게 이동할 수있는 장점을 갖고있지만 공간을 많이 차지한다는 단점이 있습니다.
최근들어 많은 웹 사이트들이 이 네비게이션을 사용하고 있는 추세입니다.



사용자 삽입 이미지

5. 외국에선 많이 사용되는 탭 네비게이션
한국에서는 많이 사용하지 않는 네비게이션이지만 외국에선 네비게이션을 간소화한 탭 형태의
네비게이션을 많이 사용하고 있습니다. 외국에선 탭 인터페이스가 많이 사용되고 있어 선호하는 경향이
있는 것 같습니다. (외국 사이트는 플래시를 지양해 화려한 네비게이션이 별로 없죠.)



사용자 삽입 이미지

6. 종합 쇼핑몰에서 많이 사용되는 세로 풀 다운 네비게이션
위의 가로 풀 다운 네비게이션과 유사하지만 종합 쇼핑몰인 만큰 수많은 2Depth를 노출해야 하는 점과
상품의 노출이 우선이 되어야하는 하는 점이 맞물려 변형되어 설계된 네비게이션입니다.
지마켓이나 옥션은 가로 풀다운 네비게이션을 사용하고 있네요.



사용자 삽입 이미지
사용자 삽입 이미지

7. 2번과 4번이 동시에 지원되는 복합 네비게이션
2번의 장점과 4번의 장점을 지원하기 위해 설계된 네비게이션입니다.
유저의 취향에 맞게 원하는 네비게이션을 지원하고 있습니다.



사용자 삽입 이미지

8. 그 밖에 네비게이션
현재 대한민국에서 서비스되는 WOW의 네비게이션 입니다.
롤 오버를 하게되면 2Depth가 펼쳐지면서 해당 서비스를 간략하게 보여주고 있는 형태입니다.
어떤 서비스인지 조금 더 구체적으로 보여줄 수 있는 장점이 있지만
공간을 많이 차지한다는 단점도 갖고 있습니다.


이 밖에도 수 많은 종류의 네비게이션이 제공되지만 위의 7가지 (8번 제외)의 네비게이션이
거의 대부분일 것 입니다. 여러분은 위의 7가지 중 어떤 네비게이션의 이용이 편한가요?
어떤 네비게이션을 선호하시나요?

Posted by 버번홀릭

댓글을 달아 주세요

버번홀릭 Web2008.12.05 13:39
사용자 삽입 이미지

↓↓↓↓↓

사용자 삽입 이미지



위 이미지는 한 게임 웹진의 메인 페이지 중 일부 화면을 캡쳐해온 이미지 입니다.
게임 웹진의 특성상 게임 서비스의 광고가 주를 이루고 있고, 내용 또한 90% 이상 게임과 관련된 내용입니다.
하지만.....

위의 홈페이지를 접속하면 첫 페이지의 한 가운데에 저렇게 커다란 플로팅 광고가 게재됩니다.
물론 사용자의 의도와는 무관하게 노출됩니다. (어느 광고가 그렇듯이...)

워낙에 많이 봐온 광고라 스스럼없이 'Close' 버튼을 클릭하지만
이 넘에 광고는 없어지지 않고 아래의 그림과 같이 사이즈만 작아져 비슷한 위치에 머물게 됩니다.

여기까지는 그냥 애교로 봐줄만한 단계이며 화가 나거나 이 사이트를 벗어나고 싶다는 생각이 들지는 않습니다.
하지만 사용자의 마우스 이동선을 방해하기 시작하는 순간부터 사용자의 생각은 틀려지게 됩니다.

무의식적으로 작아진 광고에 마우스가 지나가게 되면 순간적으로 원래 크기의 광고로 변신하게 됩니다.
롤오버 플로팅의 특성으로 원 위치를 찾은 광고물은 서비스가 제공하는 콘텐츠의 일부를 가리게 되며
다시 Close 버튼을 눌러야 하는 귀찮음을 유발시키게 됩니다.
작아졌다해도 광고는 콘텐츠위에 남아 아직도 가리고 있게 됩니다.

사용자의 무의식적인 행동으로 발생하는 결과가 즐거우면 감성의 자극이 되지만
결과가 원치않는 귀찮음이 된다면 이탈의 이유 중 하나의 요소로 작용하게 됩니다
.

아래의 사례는 위의 웹진 사례 처럼 심각한(?) UI 문제는 아니지만
불편한 UI를 제공하고 있는 유명 웹 서비스 사례 입니다.

사용자 삽입 이미지

위의 이미지는 다른 웹진의 메인 페이지 중앙의 모습 입니다.
앞서 말씀드린 웹 사이트와 동일하게 플로팅 광고를 사용하고 있습니다.

우선 2가지 문제점이 보이는데
하나는 광고가 하나의 콘텐츠를 전체를 가리고 있는 모습이고
또 하나는 위, 아래 광고가 동일한 광고라는 것 입니다.

마찬가지로 광고를 닫아야지만 뒤에 숨겨져 있는 콘텐츠를 구경할 수 있지만
뒤에 숨어 있는 콘텐츠에 대한 단서가 전혀 존재하지 않기에 광고를 닫지 않는 이상
뒤에는 무엇이 있는지도 인지할 수 없습니다.



사용자 삽입 이미지

다음은 유명 중고 자동차 매매 서비스의 GNB 입니다.

가로로 길게 뻗어있는 서브 메뉴를 볼 수 있는데 여기서의 문제점은
마우스 포인트가 위 또는 아래로 조금만 벗어나도 서브 메뉴가 닫힌다는데 문제가 있습니다.


마우스 컨트롤에 능숙한 사람은 이동이 쉽지만
그렇지 않은 사용자에겐 여간 쉽지 않은 이동 구조를 띄고 있습니다.



위의 3가지 사례들은 너무나도 많이 봐왔으며 문제 인지 또한 하고 있지만 고쳐지지 않는 문제점입니다.
(특히 광고는 수익성이나 광고주의 압박으로 잘 고쳐지지 않는 듯 합니다.)

그나마 위의 문제들을 인식한 서비스 제공자들이 이를 개선하고자 UI에 대한 연구가 되고있으며
많은 부분 개선이 되어 가고 있습니다.
(예로 전체가 펼쳐지는 GNB, 반투명 레이어 광고, 광고 옵션 개선 등)

크게는 인간 공학으로서의 인지 능력과 사용성 연구부터 작게는 하이퍼텍스트의 비주얼까지 연구까지
다방면으로 인간에서 조금 더 유익한 환경을 만들고자 많은 연구원 또는 종사자들이 연구개발을 하고 있는
상황이고 웹의 무한함은 당분간 끝이 없을 것이라는 판단하에 연구는 계속 될 것 입니다.


조금 더 쉽고 빠르게 보고싶은 정보를 볼 수 있는 웹 환경이 올 날을 기다리며...^^;



위 사례에 출현한 서비스 담당자 님들아~
저것 좀 고쳐주세요~너무 불편해요~

Posted by 버번홀릭

댓글을 달아 주세요

버번홀릭 Web2007.03.12 16:27

사용자 삽입 이미지


오늘 아침 XX팀에서 보내준 유저 테스트 결과 분석표를 보다가 재미있는 결과를 보게되었다.

A라는 인터페이스에 익숙해진 유저들에게 A-1 인터페이스를 테스트하게 했더니

불만이 많아진다는 것이다. (A-1은 A라는 동일 플랫폼에 약간의 요소에 변형을 준것)

그리고 A-1을 경험한 유저들은 A와 같은 인터페이스 구조로 바뀌기를 원하고 있다는 결과가 나왔다.


이는 유저가 인터페이스를 사용하는데 있어서 유저 경험 요소(User Experience)가

중요한 역할을 하고있다는 뜻이다.

즉 UI가 형성되는 근거는 UX가 된다는 말이다.


하지만 다시 거꾸로 생각해보면, 특정 UI를 최초 경험한 유저는 해당 UI에 각인이 형성되며,

UI에 대한 고정관념이 생기게 된다는 것이다.
 
즉 UX가 형성되는 근거는 최초의 UI가 된다는 말이다.

(물론 최초의 UI는 유저의 동선 정보에 의해 형성된 UI일 것이다.)


몇일동안 UI가 먼저냐?, UX가 먼저냐?.

UI가 유저에 의해 형성되는것이냐?, 이미 형성된 UI에 의해 유저가 학습되는 것이냐?에 대해

심각하게 생각해본적이 있었다.


그런데 오늘!!

유저 테스트 결과 분석표를 보고, 나름 섣부른 답을 구해본다.

어떤 답? 'UI?', 'UX?, '유저 먼저?', 'UI 먼저?'에 대한 상호 관계 정리!!


성공한 서비스를 추격하고자 하는 서비스에서는 'UX > UI'

최초로 시도되는 서비스에서는 'UI > UX'


구글이 한국에선 힘이 없다. 라는 기사를 몇번 본적이 있다.

검색 분야에서 최고로 불리우는 구글이 한국에선 힘을 못쓴다?

왜일까? 검색 결과는 구글이 세계 최고지만

한국사람들에겐 네이버의 검색 결과 UI가 더 익숙해서

구글보다는 네이버가 더 힘을 발휘하는게 아닐까?


갑자기 얼마전 재미있게 읽었던 책의 내용 일부가 생각난다.

"더 좋은 것보다는 맨 처음이 낫다.",

"맨 처음이 될 수 없다면 처음이 될 수 있는 영역을 개척하라."


위의 나름 구해본 답과 책의 내용을 섞어보면 "최초의 영역을 개척해 UX를 형성하라."가 된다.

자~ 이제 다시 문제를 제기해보자. "최초의 영역은 어떻게 구해야 할까?"

기획자의 영원한 의문 ㅡㅡ;;


P

Posted by 버번홀릭

댓글을 달아 주세요

  1. 고민하는 모습이 좋네 그려~
    좋은 글이야.
    문제 제기에 대한 의견은 시간날 때 다시 한번 생각

    2007.03.13 09:14 신고 [ ADDR : EDIT/ DEL : REPLY ]

버번홀릭 Web2007.03.08 12:55

사용자 삽입 이미지


프로젝트를 진행하다보면 디자이너, 기획자 간의 디자인, UI, UX에 대한 충돌이 일어나곤 한다.

(콘텐츠가 중요하다는 건 너무나 당연하기 때문에 충돌이 일어나지는 않는다.)

디자인이 먼저냐, UI가 먼저냐, UX가 먼저냐.

디자이너 입장에선 디자이너가 우선...

기획자 입장에선 User Interface, User Experience가...

또는 그 반대의 경우도 생길 수 있고

서로 협의를 통해 합일점을 찾다보면 짬뽕되다보니 이도저도 아닌 결과물이 나오기도 하고

뭔가 특이하고, 새롭고 신선한 디자인을 하다보면 UI, UX가 고려되지 않은 디자인이 나오는

경우도 있고, UI, UX만 내세우다보면 디자인이 평범해지고

디자인이 먼저일까? UI,UX가 먼저일까?

지속적인 방문을 하는 사용자는 콘텐츠를 제외하면 디자인과 UI,UX 중 어떤걸 중시할까?


P


Posted by 버번홀릭

댓글을 달아 주세요

  1. 지나가는 과객의 생각은....
    안좋은 UI는 좋은 디자인이라 볼 수 없다고 생각합니다.

    2007.03.08 13:04 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 요즘 번져나는 소호 쇼핑몰들을 보면
      UI는 완전히 무시된 디자인이 많이 생겨나더군요.
      그런 현상을 보면서 다시 한번 생각하게 됬습니다. ^^

      2007.03.08 17:13 신고 [ ADDR : EDIT/ DEL ]
  2. UI, UX도 디자인이라 생각합니다.
    예쁘고 참신하게 만드는 것만이 디자인이다 라고 하는 사람들에겐 할말이 없지요..

    2007.03.08 14:43 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 국내엔 UI 기획자라고 하지만
    외국에서는 UI 디자이너라고 하지요.

    기본적인 사항임에도 불구하고
    요즘들어 다시 생각해보게 되네요..^^

    2007.03.08 14:47 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. UI,UX도 디자인 영역에도 역시 속한다고 봐야지.
    개인적으로 UX는 모든걸 포괄하는 좀 더 넓은 개념이라고 생각함.
    UI를 디자인과 동일선상의 별개로 보는건 아니라고 봄

    2007.03.08 15:46 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 언젠가 한번 의문을 띄어본적이 있는 내용인데
      유저에 의해 Interface가 형성되는건지
      새롭게 만들어진 Interface에 유저가 따르게 되는건지
      에 대한 답이 있다면 디자인과 UI,UX의 체계가
      정확히 잡히지 않을까 생각해요.

      단지, 그런 의문에 정확한 해답을 얻을 수 없을 뿐이었죠

      2007.03.08 17:33 신고 [ ADDR : EDIT/ DEL ]
  5. UI와 UX의 용어설명을 곁들여 준다면, 글이 더 빛을 발 할것 같아 보입니다.
    굳이 어느 쪽을 중시하기 보다는 동일선상에서 하모니를 이루도록 협의하는것이 가장 현명한 방법이라고 생각이 됩니다.

    2007.03.08 16:27 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 이런 고민을 하게 된 이유도 '하모니'를 위해서죠.
      궁극적으로는 하모니에서 그치는게 아닌 좋은 음악이 되는게 고민의 궁극적인 목적이구요...^^

      2007.03.08 17:28 신고 [ ADDR : EDIT/ DEL ]
  6. 윗분들하고 반대 생각인데 화면 디자인이 UX의 하위 개념아닌가요? 색을 노랗게 하느냐 빨갛게 하느냐도 사용자 체감의 일부인데요.

    2007.03.08 17:18 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 색 뿐이 아니라 웹 사이트의 모든 구조적 위치도
      유저의 경험에 영향을 준다고 생각하기에
      UI,UX,디자인의 우선순위가 어딘지 정확히 모르겠네요.^^

      2007.03.08 17:35 신고 [ ADDR : EDIT/ DEL ]
  7. 블랑

    최근 제가 경험하고 있는 고민입니다.
    전 기획자구요.. 사실 디자인은 크게 신경쓰지 않습니다.
    (기획하기 전 웹디자인 4년 했습니다.)
    국내 상위 사이트를 보면 비주얼이 화려한 UI를 쓰는 곳은 많지 않습니다. 물론 최소한의 깔끔함은 갖춰야지요.

    고민이라하면 UI냐, UX냐인데
    이걸 같이 놓고 보면 상위 하위 등을 따질 수도 있지만
    사실 기획자 입장에선 무척이나 민감한 차이입니다.

    UI중심적 사고는
    "이렇게 이렇게 하는게 예전보다 훨씬 편하고
    보기도 좋고 정보전달력이 빠르다."

    UX중심적 사고는
    "하지만 사용자는 새로운 인터페이스에 거부감을
    느끼고 복잡하다 느낄 수도 있다."

    고정관념과의 싸움이지요.
    뭐 아무튼 그렇다는 거구요, 요즘 머리가 아픕니다 ㅎㅎ

    2007.03.08 18:35 신고 [ ADDR : EDIT/ DEL : REPLY ]
  8. 블랑

    굳이 제가 써놓고 너무 성의가 없어보여서 덧붙입니다. ㅎㅎ
    제 생각엔 UI>UX>비주얼(디자인보다는 이 단어가 어울리는것 같군요.)

    아주 당연한 이야기이지만 3가지 모두 중요합니다.

    하지만 비주얼을 가장 중요하게 생각하다보면
    사용자들을 불편하게 만들 가능성이 그만큼 높다는 거구요,

    UX를 중요하게 생각한다는 것은 마인드가 매우 현실적이라는 겁니다.
    하지만 더 편리하고 더 좋은 것을 창조해야하는 기획자라면
    판에 박은듯이 구조가 똑같은 사이트들을 로고만 바꿔서 만들어선 안되지요.

    그래서 UI가 가장 중요한 듯합니다.
    더 좋은 것, 아무도 예상 못했지만 편리한 것,
    그런 걸 사용자들에게 제공해줘야하는 거죠.

    다만 반발만 앞서가는 정도의 시도가 적절하다고 생각되는군요.
    세계제일의 편리성을 고려한 UI라도 사용자에게
    익숙치 않으면 무용지물이라는 사실.
    진보에 초점을 두고 적당히 MIX하는것이 상책인 듯합니다.

    2007.03.08 18:45 신고 [ ADDR : EDIT/ DEL : REPLY ]
  9. 좋은 말씀 감사합니다. ^^
    위의 마루님이 말씀하신것 처럼 '하모니'라는게
    필요합니다. 하지만 하모니를 좋은 음악으로
    승화시켜야 한다는 입장에서 이런 고민의 생긴거죠.

    참 어려운 문제죠. 어찌보면 사람과 사람의 문제구요 ^^

    2007.03.08 18:52 신고 [ ADDR : EDIT/ DEL : REPLY ]
  10. 전 우선적으로 UI를 먼저 고민합니다. UI와UX속에 디자인을 녹이는 작업에 항상 중점을 두는 편입니다. 하지만, 사람들이 늘 말을 안듣죠! >_<

    2007.03.08 20:45 신고 [ ADDR : EDIT/ DEL : REPLY ]
  11. 어떤 디자인이든 UI나 UX가 바로서지 않으면 단발성에 그치기 마련이죠. 어렵네요 디자인-_ㅜ

    2007.03.10 04:13 신고 [ ADDR : EDIT/ DEL : REPLY ]