구글에서 개발한 크롬(Google Chrome) 웹브라우저의 컨셉

User Interface/Web 2008. 9. 10. 18:44
최근 Google에서 개발한 웹브라우저 크롬(Google Chrome)의 컨셉에 대해서 개발자와 일본에서 화상 회의 시스템을 이용하여 질의응답 시간을 가졌다고 한다.

구글의 엔지니어링 디렉터 Linus Upson씨는 다음과 같이 3가지의 주목적 컨셉을 통해서 크롬이 개발 되었다고 한다.

1. 새로운 사용자 경험(user experience)에 의한 usability의 향상
2. 개발자에게 새로운 브라우저, web 시스템 개발 환경을 제공
3. 오픈 소스로 브라우저를 제공하는 것으로, web환경 그 자체로서 발전.

이것을 구현하기 위해서 우선 브라우저의 고속화를 검토, HTML렌더링 엔진으로 Safari등에서 채용되고 있는 WebKit, JavaScript엔진으로서 V8을 채용했다고 한다. 또한 구글 내에서 OmniBox라고 불리는 검색과 주소 입력이 통합된 입력 박스나, 매우 높은 기능으로 다채로운 탭 조작이 가능한 탭 브라우저 기능을 통해서 간단한 조작으로 인터넷을 편리하게 이용할 수 있는 점을 소개했다.


사용자 삽입 이미지

이 탭 기능을 지지하는 기술로써 중요한 것이 멀티 프로세스 모델, 각 탭의 처리가 독립적으로 실행되기 위해서 어느 탭이 busy, 혹은 무응답 상태에서도 다른 탭 또는 브라우저에 영향이 생기지 않게 했다고 한다. 이 때문에 1개의 탭 시큐리티 리스크가 다른 프로세스(탭)에 영향을 주지 않는다고 한다.

이 외로 기초 기술로써 구글의 오프라인으로 web 어플리케이션 실행을 실현하는 기술(Google Gears),가 채용되고 있다고 한다. 이것에 대해서도 향후에는 오프라인으로 데이터베이스 보관 유지나, 연구 최종 단계의 표준화 기술로서 Web표준에 제안할 것이라고 한다.

그 이후 질의응답으로는 구글은 다양한 기술을 FireFox나 Safari와 같은 웹브라우저에 프로젝트를 제공하고 있는데 왜 구글이 브라우저까지 만들었는지에 대한 질문에 Linus는 Mozila등의 브라우저는 오랜 세월 개발되어 훌륭한 소프트웨어가 되어 왔지만, 구글은 그들과는 다른 브라우저에 대한 의견이나 희망이 있으므로, 이 모든 것을 Mosilla에 요청할 수 없는 상황이었기에 브라우저를 구현하게 되었다고 한다.

또한 랜더링에 WebKit을 채용한 이유에 대해서는 동작이 빠른 점과 코드가 심플한 점을 내세웠고 Linus씨에 의하면, 다른 엔진에 비해서 코드사이즈가 1/4 정도라고 한다. Android의 개발로 벌써 사용하고 있으므로 구글의 개발진에게 친숙함이 있었다는 것도 큰 이유라고 한다.

Windows판만 제공되고 있는 점에 대해서는 우선 브라우저의 스피드, 안정성, 기존의 Web환경과의 호환성에 중점을 두었으며 앞으로 차근차근 해결해 나가고 싶다는 이야기가 있었다.

그리고 Chrome의 심플함과 다운로드 사이즈를 어필했으며, 현재 다운로드가 가능한 베타판을 예로 들며 약 7Mb의 다운로드 파일로 47언어를 서포트하고 있다고 한다. 웹브라우저가 선택사항이라는 것을 모르는 유저가 많다는 이유를 들어, 이 작은 사이즈와 간단한 실행환경을 통해서 웹브라우저는 OS에 종속되어 있는 것이 아닌, 사용자에 의해서 선택할 수 있다는 것을 인식시켜주고 싶다고 한다.

여기까지 관련 질의응답에 대한 내용이다. 사실 표면적으로 보여지는 구글의 이러한 웹브라우저 개발 시도는 좀더 큰 범주 안에서 이해할 수 있을 듯싶다. 궁극적으로 구글이 추구하고 있는 것은 온라인과 오프라인의 경계가 무너지고 하나의 통합된 시스템 환경에서 전 세계의 모든 정보를 제공함이 아닐까 싶다.

그러한 일환으로 현재로써 가장 가치가 있고 영향력을 발휘할 수 있는 것을 웹브라우저로 판단했을 것이다. 사실 MS는 웹브라우저에 대해서 별다른 투자를 하지 않았으며 사용자는 얼빠진 익스플로러의 즐겁지 않은 기능에 만족하며 그렇게 살아왔다. 사용자에게는 이러한 경쟁을 통해서 좀더 빠르고 사용성이 좋은 웹브라우저를 사용할 수 있는 권리가 주어지겠으나 표준화가 제대로 이루어지지 않는다면 우리와 같은 웹을 통해서 소통하고 입에 풀칠하는 사람들에게는 적지 않은 혼란을 야기시킬 수 있을 듯싶다. 물론 그것이 우리의 업보이기는 하지만 말이다.

    

설정

트랙백

댓글

사용자 경험과 관계- Powers of Information

User Interface/Web 2008. 4. 13. 04:15
일본의 한 미술관 매점 단말용 컨텐츠로 제작된 사이트라고 한다. 단말기의 최소 해상도가 1920x1080이기 때문에 그 이하 해상도에서는 짤려서 보이고, 로컬에서 서비스되기 때문에 로딩 처리가 되지 않아서 이미지가 뜨기까지는 약간의 시간이 필요하다.

심플한 디자인과 절묘하게 어울리는 효과음이 전체적으로 사이트의 느낌을 살리고 있다. 가장 훌륭한 점은 정보 설계로부터 플래시 컨텐츠의 효과를 1:1로 적절히 사용했다는 점이다.

사용자 경험은 관계에 영향을 많이 받는다고 생각한다. 여기서 관계라는 의미는 연결을 의미하는데, 예를 들면 화면 밖에 있는 오른쪽 이미지를 보기 위해 현재 이미지를 왼쪽으로 밀어서 사라지게 하는 행동은 우리의 머리 속에서 현재 사진과 오른쪽 사진은 보이지 않는 선으로 연결되어 있고 화면에 보이는 사진을 왼쪽으로 보내면 오른쪽에 있는 사진이 나타날 것이라는 추측에서 비롯된다. 이 사이트의 경우도 뎁스의 트리형태 정보구조를 표현함에 있어서 틀 속에 틀이라는 형태로 진행하고 있어서 정보의 전달이 명확하다고 볼 수 있다.

다만 아쉬운 점은 각 뎁스별 현재 위치(컨텐츠 그룹명)에 대한 정보 전달이 화면 모션으로만 이루어지고 있어서 사용자가 기억하고 있어야 한다는 점이다. 왼쪽의 Power of Information 텍스트를 일률적으로 할게 아니라 각각의 뎁스에 따라 정보구조명을 적용했더라면 하는 생각이 든다.

http://kiki.ex.nii.ac.jp/powers_of_information/

사용자 삽입 이미지

    

설정

트랙백

댓글

youtube의 동영상 플레이어 업그레이드

User Interface/Web 2008. 4. 6. 22:47
오늘 youtube의 동영상 플레이어를 보면서 풀스크린 화면에서 왼쪽 플레이 버튼  옆에 새로 생겨난 버튼을 클릭해 보니 새로운 관계형 UI가 업그레이드 되어 있다. 동영상 플레이어에 해보고 싶은 기능이었는데...















사용자 삽입 이미지

    

설정

트랙백

댓글

UI디자인 가이드라인 - Elements 만들기

User Interface/Web 2007. 2. 21. 11:11

명확한 단계를 요구하는 입력폼
입력폼은 사용자의 정보를 요구하는 화면이므로 사용자들이 가장 민감하게 반응할 수 있고 특히 결재에 관한 입력폼은 금전적인 위험요소도 고려되어 사용자는 과정이나 결과에 대한 확인을 매우 필요해 한다.
해외의 사례를 보면 성질이 같은 덩어리로 단계를 나누고 그 단계마다 화면이 전환되어 사용자가 지금 어느 위치에서 어떤 작업을 하고 있는지를 각 화면마다 정확하게 인지시키는 것을 선호한다는 결론을 도출한 바 있다.
그러나 우리나라의 경우 여러 테스트와 전문가의 분석 결과 조금 다른 사용자의 행태를 발견할 수 있었는데 단계가 시각적으로 명확하게 구분되어 보이되 화면의 길이가 조금 길더라도 한 화면에 보여지는 입력폼의 디자인을 선호하였다.
물론 너무 긴 화면은 지루할 수도 있고 사용자가 포기하거나 힘들어 하는 원인이지만 외국의 사례처럼 서너 줄의 입력폼마다 성격이 다르다는 이유로 화면전환을 하는 것은 우리나라 실정이나 국민성(?)에는 맞지 않는다는 것이 UI 전문가들의 결론이었다.
이러한 결과는 UI 전문가가 여러 번의 테스트를 객관적으로 진행한 산출물이지만 모든 사이트에 적용되는 정답일 수는 없고 사이트와 입력사항의 성격에 따라 달라질 것이다.

결론적으로 화면의 전환 여부는 사용자의 성향에 따라 달라질 수 있으나 입력폼은 가장 명확성이 요구되는 화면이므로 정확히 단계를 나누고 지금 사용자가 어디에서 무엇을 하고 있는지와 얼마나 걸릴 것인지를 여러가지 방법을 이용하여 꼭 명시해야 한다.


마우스오버 만들기
마우스오버를 하지 않을 수 없는 곳은 아무래도 메인 메뉴에 해당하는 네비게이션 바이다. 그러므로 이 곳에 마우스오버를 사용하여 만들 경우가 많을 것이다. 이때 마우스오버 했을 때 서브메뉴링크가 뜨도록 해주면 좋다.

보통 마우스오버를 하면 숨겨있던 이미지나 텍스트가 나온다. 그러나, 숨겨져 있는 정보를 사용자들이 찾아내지 못했을 경우는 어떻게 하겠는가?

사용자가 사용할 마우스의 위치를 생각해 볼 때 대부분 상하로 생기는 스크롤을 움직이기 위해서 마우스의 포인터는 오른쪽 스크롤 바에 가 있다. 마우스가 마우스오버를 하지 않았을 경우에는 숨겨져 있는 정보를 볼 수가 없지 않을까? 그러므로 마우스오버하기 전에 이미 떠 있어야 하는 정보를 굳이 마우스오버 후에 나타나도록 숨겨진 정보로 만들 필요는 없다.


풀다운 메뉴 만들기
풀다운 메뉴는 오래된 사이트에서 단골손님을 위한 메뉴 '바로가기'로써의 역할로 만든다.

풀다운 메뉴의 장점이라고 하면 일반적인 사용자 인터페이스(User Interface)사용하는 요소들 - Back, Forward, Up, Down의 구조 - 를 뛰어넘는 Jump라는 기능을 가지고 있다는 것이다. 하지만, 모든 선택 메뉴들이 숨어 있다는 단점을 가지고 있다.

이 메뉴들이 사용자들의 호기심을 자극하지 않는 한 열어보지 않을 수도 있기 때문에 주의해야 할 UI요소이다. 그러므로, 새로운 사용자들을 위하기 보다는 기존의 사용자들이 빨리 자신이 원하는 메뉴로 점프(Jump)하게 끔 하는 역할로 사용하는 것이 좋다. 또한, 사용자 자신이 자기만의 풀다운 메뉴를 등록 하게끔 하는 것도 괜찮은 방법이다.


검색엔진의 사용성. (1)
사이트 상의 검색 엔진들은 사이트내의 컨텐츠를 찾는 것을 도와주는 목적으로 있다.
그러나 사용성 테스트의 타스크를 통한 성공률을 보면 검색엔진을 사용해서는 30%, 사용하지 않고서는 53% 성공하는 것을 볼 때 검색엔진 자체가 사용성에 충분히 도움을 주지는 못하는 것 같다. 그러나 사용자들은 검색엔진의 사용을 빨리 가기로 인식하는 것 같다.

검색엔진이 일으키는 문제들은 다음과 같다.
- 사용자에게 컨텐츠가 어떻게 쓰여지고 구성되어 있는지에 대해 이해 할 것을 요구한다.
- 검색엔진 스스로가 정보의 향기를 제공하지 않고 있으며 오히려 사용자들 스스로가 향기를 제공해야 한다는 것이다.

검색은 사용자들에게 즉각적인 만족을 주기도 한다. 그러나 사용자가 목적을 달성하는데 얼만큼의 시간을 단축시켜 주는지, 또는 정확하게 목적을 달성하는데 도움을 주는지, 도움을 주기 위해서는 어떤 방법들이 있는지에 대해 디자이너는 고민해야 할 것이다.


검색엔진의 사용성. (2)
Netscape의 DevEdge 검색 엔진으로부터 추출된 1주일치 데이터를 분석해 본 결과에 의하면 일반적으로 1단어 검색이 가장 많은 44%에 달했다고 한다.

또한 복수 단어 검색 중 반 이상이 연속 단어를 사용했으며 나머지 반은 정확한 모양의 쿼리를 사용했다는 것이다. 더욱 중요한 것은 쿼리의 3%가 잘못된 스펠링을 포함하고 있었다는 것이다. 이러한 결과는 사용자는 키워드를 치는 방법에 있어서 자신들의 단어로 원하는 것을 정의하며 이는 1단어 이상이기가 어렵다는 것이며 사용자는 검색 후에 틀린 답에도 뭐가 잘못 되었는지 결코 모른다는 것을 뜻한다. 또한 많은 사용자들이 부울 논리를 사용하지 않는 것으로 나타났다.

검색은 세가지 형태의 문제점을 안고 있다.
- 올바른 검색 영역에 도달하는 것
- 검색을 정의하는 것
- 결과를 해석하는 것

이러한 문제점들은 사용자들이 어떤 키워드를 입력해야 할지 잘 모른다는 것을 의미하며 종종 사용자들을 사이트의 다른 부분으로 갖다 놓는다는 것이다.

그러나 검색은 사용자들에게 즉각적인 만족을 준다. 그러므로 검색엔진의 사용성에 있어 사용자를 고려한 많은 노력(검색의 범위를 좁히는 도구나 프로세스)이 있다면 사용성이 높아지겠지만 그렇지 않다면 오히려 사용성을 감소시키는 주된 요인으로 작용된다는 것을 명심하자.


프레임의 실수
프린트를 어렵게 한다.
프린트를 방해한다. 여러 프레임 중 엉뚱한 부분이 프린트되어져 나올 수 있다.

북마크를 어렵게 한다.
프레임 페이지를 북마크 했을 경우, 다시 찾아갔을 때 엉뚱한 곳으로 왔다는 것을 발견할 수 있다.

검색엔진에 잘못 등록될 수 있다.
검색엔진에서 결과로 나온 URL을 찾아갔을 때 프레임의 일부분만 링크되어 있는 것을 본적이 있을 것이다.

수평 스크롤이 생길 수 있다.
스크롤에는 수직 스크롤과 수평 스크롤이 있는데 수직 스크롤은 요즘 많이들 사용하고 있는 휠마우스를 사용하여 어느 정도 사용하기 편하지만, 수평스크롤은 오른쪽과 왼쪽으로 왔다갔다하는 움직임을 해야 하기 때문에 몹시 불편을 준다.

출처 : UIdesign

    

설정

트랙백

댓글

UI디자인 가이드라인 - 사이트 구성하기

User Interface/Web 2007. 2. 21. 11:10

링크의 품질을 높이는 방법
사용자에게 자신감을 부추기고 자신이 찾고자 하는 정보의 향기를 전달하는 방법의 반은 링크에 의해 만들어진다.
또한 자신감은 링크 타입, 커뮤니케이트된 정보의 양, 링크가 생긴 모양에 의해 부추겨지는 수가 많다.

링크의 분류는 다음과 같이 나눌 수 있다.

- 컨텐츠 링크 : 컨텐츠를 포함하는 페이지로 간다.
- 카테고리 링크 : 다른 링크의 우선적으로 포함하는 페이지로 간다.
- 키워드 링크 : 검색의 부분으로 사용자가 입력하는 것이다.
- 백 혹은 홈 링크 : 홈이나 먼저 방문한 페이지로 간다.

위의 분류 중에서 컨텐츠 링크가 가장 좋은 방법이다. 사용자들은 카테고리 링크가 아니라 컨텐츠 링크를 사용할 때 더 성공할 가능성이 높다. (현재 국내의 사이트는 카테고리 링크가 더 많다.) 백, 홈 링크는 문제의 징조이기도 하다. 사용자가 향기를 놓쳤을 경우 많이 사용하기 때문이다.
링크들은 사용자들을 끌기 위해 올바른 단어들을 가지고 있어야 한다.(링크를 신호로 만드는 방법)


링크를 신호로 만드는 방법
문법적으로 정확한 문장은 정보를 찾기 어렵게 할 경우가 있다는 조사 결과(제이콥 닐슨 Alert Box 1997. 10.1 'How users Read on the Web)가 있다.
컨텐츠의 문장을 읽어가는(Scanning) 사용자는 그것을 신호와 잡음으로 구분하는데, 자신이 원하는 정보와 관련된 단어의 링크를 신호로, 그 밖의 내용은 그저 잉크인 잡음으로 보는 것이다. 보통 20개의 단어 중 4-5단어들(20%)은 신호, 나머지는 잡음이라고 간주 한다.
따라서 링크 안의 큰 잡음들은 관련 텍스트를 숨긴다.

링크는 커뮤니케이트 하기 위해 충분한 단어들을 가지는 것이 필요하다.
같은 목적을 가진 사용자들 이라도 사용자가 다르면 다른 단어를 찾을 수 있다.
예를 들어 취업을 원하는 사용자가 찾는 단어들을 살펴보면 어떤 이는 '이력서 올리기', 또 다른 사람은 'Job찾기', '구직', '일자리' 등… 사용자들은 동의어를 핸들 할 수 있지만 그것은 문맥 안에서 만 가능한 것이다.
그러므로 링크는 밑줄 쳐진 단어들과 그와 관련된 텍스트 둘 다 라고 할 수 있다.

그러므로 카테고리 링크가 더 어려운 일이다.
그 이유는 복수 링크들을 설명(묘사)해야만 하고, 보통 컨텐츠 링크 사이즈의 3분의 1정도 밖에 되지 않기 때문이다.

그렇다고 링크의 길이가 길어야 좋은 것은 아니다. 사용자의 선택을 도울 의도로 된 텍스트(제목들도 어떤 때는 포함)를 올바르게 디자이너가 결정해야 한다.


스캐닝(훑어 보기)를 도울 수 있는 방법
이 때 우리는 게슈탈트 심리이론이나 기억에 관한 인지 심리학 이론의 단기 기억 (의미덩이 만들기: chunking)을 이용한다.

1. 링크의 그룹핑 : 사용자들은 비슷한 아이템들을 서로 관련된 것으로 인식한다. 링크 그룹이 많은 웹 페이지가 능률적이다.(컨텐츠 링크 그룹이 잘 되어 있는 사이트는 CNN.com이다.)
2. 구조화된 목록 : 사용자에 따라 공통의 분류나 친숙한 영역들을 구조화 한다. (달력이 좋은 예이다.)
3. 링크의 차별화 : 다른 컨텐츠로 이끄는 링크는 그 차이점을 명확하게 차별화하는 것이 필요하다.(좋은 예 HP사이트)
4. 여분 링크를 이용한다. : 여분 링크란 사용자에게 복수의 향기를 제공하는 것, 즉 다른 문맥과 다른 목표로 다른 아이디어를 가지고 있는 다른 사용자들을 지원한다.
5. 괄호와 뷸렛을 이용한다. : 사용자들이 링크 그룹들을 다발 짖는 것을 도와 준다. 특히 복수 라인에 걸쳐 링크들이 묶여 있을 때 뷸렛은 사용자가 링크들을 서로 구분하는데 도움이 된다. 


배너처럼 보여서 간과되는 중요한 정보들
사용자들은 화면을 훑고 지나간 다음 중요한 내용이나 시선을 끄는 이미지에 관심을 보이지만 배너 같은 정보는 무시한다.
사용성 테스트 결과, 사용자들은 배너처럼 생긴 그래픽이 중요한 정보이더라도 무시해 버린다는 것을 발견할 수 있었다.
그러므로 사이트의 중요한 정보나 네비게이션을 광고처럼 이미지로 만들거나 배너 영역에 두어서 배너와 혼돈을 일으켜, 사용자들이 이를 간과해 버리도록 만들어서는 안된다.

여러 개의 이미지들이 오른쪽 밑 부분의 배너 광고 영역에 있으며, 그 형태 또한 배너 광고 형식을 띠고 있어 사용자들은 배너로 생각하고 무시하지만 사실은 내부의 주요한 정보들로 연결되는 중요한 링크이다. 그 중 ‘봄나들이’를 클릭하면 ‘봄 나들이 특집 주요 기사 모음’으로 화면이 전환된다.


링크 가능한 영역의 크기와 거리
웹페이지에서 버튼이 너무 작아서 클릭하기 원하는 것을 제대로 클릭하지 못하거나, text 주위의 background를 클릭했으나 클릭되지 않는 경우가 종종있다.
이러한 현상을 Fitts' Law (피츠의 법칙)로 설명할 수 있다. 피츠의 법칙은 속도와 정확성간 접합점의 기본적인 원리이다.

스크린 상에서 버튼의 크기와 커서를 이동시키려는 거리가 주어지면, 버튼까지 커서를 움직이려는데 걸리는 평균시간을 피츠의 법칙을 이용하여 구할 수 있다.

Time(in msec)=a+blog2(D/S+1) 
S : 버튼의 크기 
D : 버튼까지의 거리

위와 같이 커서가 버튼까지 움직이는 시간은 거리에 비례하고 버튼의 크기에 반비례한다.

Button을 클릭하기 위하여, Mouse를 이동시키는 거리가 멀면 멀수록 실수 없이 정확히 Button에 Mouse를 접근시키는 것이 더 어려워진다. 그리고 버튼의 크기(또는 클릭할 수 있는 영역)가 작을 수록 커서를 가져갈 target에 접근시켰을 때 성공할 확률이 낮아진다.

메뉴나 버튼은 쉽게 클릭하기에 ‘충분한 크기와 거리’를 고려해서 디자인 되어야 한다.


사용자들은 긴 화면을 스크롤한다
사용자들이 스크롤하기 싫어한다는 전통적인 견해는 흔히 옳은 것으로 간주되어 왔다.
이러한 가정 하에 한정된 분량을 한 화면에 담으려고 할 때, 디자이너는 대부분 다음의 두 가지 경우 중 한 가지를 택할 것이다.

한정된 화면 공간에 맞추기 위해 정보를 임의로 줄인다.
이 경우, 사용자는 내용 파악에 어려움을 느낀다.

하나의 화면을 몇 개의 페이지로 나눈다.
이 경우, 사용자는 다음 페이지가 로딩될 때까지 기다리는 것보다 다소 길어진 페이지를 스크롤하며 훑어보는 것을 더 선호한다.

사용성 테스트의 결과, 사용자들은 스크롤 자체를 기피하지는 않는다는 것이다. 하지만, 스크롤 바가 있는 긴 페이지에는 반드시 사용자들이 원하는 정보를 찾을 수 있도록 이끌어주는 요소로서의 ‘향기(scent)’가 있어야 한다.

출처 : UIdesign

    

설정

트랙백

댓글

UI디자인 가이드라인 - 신뢰도 높이기

User Interface/Web 2007. 2. 21. 11:10

단기간에 효과적으로 사용성을 높이는 방법
사용성테스트를 할 여건이 안 될 경우 좀더 적은 노력으로 혁신적인 사용성 개선을 원한다면 다음과 같은 방법을 사용해 보라.

우선 로그데이타나 기타조사를 통해 가장 빈번하게 사용하는 기능 또는 작업의 목록을 작성하라. 이 목록 중 최상위의 한두개를 골라 최대한 클릭 수를 줄이고 단순화하기 위해 다음과 같은 방법을 이용해 본다.

하나의 태스크를 대상으로 사용자가 그 태스크를 수행하는데 걸리는 예상 시간을 계산하는 것이다. 손을 마우스에 가져가고, 마우스를 움직이고, 누르고, 메뉴바의 이름을 기억해 내고, 각각에 드는 시간을 기준으로 태스크를 수행하는데 걸리는 총시간을 계산한다. 이때에는 육체적인 액션과 정신적인 액션에 드는 시간을 모두 계산한다. 이러한 방법 GOMS는 매우 세분화되고 한 태스크당 작업 시간도 꽤 걸리지만 놀라운 정도로 정확한 결과를 보여준다.

또 다른 방법은 태스크를 수행하는 각각의 방법을 경로화하여 가장 이상적인 경로를 찾는 Cognitive Walkthrough이다. 사용자별로 태스크를 수행하는 경로를 관찰함으로써 시스템이나 서비스가 사용자의 기대에 부합하는가, 이해가 쉬운가를 볼 수 있다.

이러한 방법들은 사용성테스트보다 간단하게 수행할 수 있으면서 사용자가 기대하는 효과를 성취할 수 있는가를 평가해 볼 수 있는 아주 효과적인 방법이다.
 
사용자에게 자신감을 주는 법
사용자가 자신이 원하는 정보로 접근하고 있다는 자신감을 주는 것이 좋은 디자인이다.
클릭 전에는 그들이 올바른 트랙에 있다는 것을 알려 주어야 하며 클릭 후에는 그들이 정말로 자신이 원하는 정보에 접근해 있다는 자신감을 느끼도록 해야 한다.
사용자들은 보통 자기들이 올바른 트랙에 있는지 아닌지를 안다.
사용자는 먼저 페이지를 대충 훑어 본다(Scanning)는 것을 명심하자.
그 때 그들이 찾는 정보의 키워드나 문장이 링크로 발견 된다면 클릭 전 사용자에게 자신감을 줄 수 있다.
그를 위한 디자인 요소로는 링크의 품질, 내비게이션 그래픽, 정보 구조의 디자인이 있다.

클릭 후에는 키워드나 문장 등에서 요구된 정보를 보여 주는 것, 혹은 더욱 강력하고 구체적인 정보를 발견 할 수 있도록 설계되어야 하며 그 때부터는 사용자가 정보를 꼼꼼히 읽기 시작할 것이다.

- 사용자가 자신감을 잃어버리도록 하는 것 들은
- 거짓말하는 링크
- 키워드가 없는 것(링크에 있던 단어가 컨텐츠에 없으면 속은 기분이 들것이다.)
- 보다 일반적인 컨텐츠
- 예쁘기만 하거나 희미한 링크

등 이며 자신감의 상실은 사용자의 포기를 야기한다.
조사에 따르면 백 버튼을 한번 누르면 42%, 두번 누르면 18%, 세번은 2%의 집계로 나타나는데 결론적으로 사용자가 백 버튼을 2번 누르면 정보 찾기를 완전히 그만둔다는 것을 알 수 있다.

확실한 UI를 짧은 시간에 만들기
확실한 UI를 만들고자 한다면 단연 '사용성 테스트(Usability Test)'를 하는 것이다.
이것은 개발 과정에서 짧은 시간만을 들여서 사용자로부터 훌륭한 피드백을 얻을 수 있는 기회를 마련하는 것이다.
디자인 결정에 있어서 망설여지는 부분이 있다면 테스트해라. 거창하게 할 필요도 없다. 그저 실제 사용자를 데리고 실제 사이트를 테스트하기만 하면 되는 것이다.


잘못된 UI를 아는 방법
사용성 테스트(Usability Test)를 했을 때-간략하게 하건, 본격적으로 하건- UI가 잘못되었다는 것을 어떻게 알 수 있을까. UI가 가장 잘못된 경우는 바로 사용자가 길을 잃고 헤매는 것이다. 사용자가 길을 잃었다는 신호는 다음과 같다.

- 사용자가 길을 잃었다는 신호
- Back button을 사용한다.
- 검색엔진을 사용하여 키워드 검색을 한다.
- 홈으로 돌아오는 버튼을 누른다.
- 사이트 맵으로 찾아간다.


훌륭한 웹 디자인을 위한 10가지 Tips
1. 한 페이지에는 하나의 주제에 대한 내용만 있어야 한다.
2. 액션 버튼들과 링크들은 눈에 잘 띄도록 만들어야 한다.
3. 결정적으로 중요한 페이지는 깔끔하고 심플한 구성을 항상 유지해야 한다.
4. 사용자가 쉽게 읽을 수 있도록 영어의 산세리프체 같은 심플하고 명료한 글씨체, 그룹 박스와 여유 공간을 사용하라.
5. 다운로드 시간을 줄이기 위해 그래픽을 최소화한다.
6. 로고를 클릭하면 home으로 갈 수 있도록 만든다.
7. 페이지의 타이틀은 명시된 버튼이나 링크와 같아야 한다.
8. 모든 입력 페이지에는 취소버튼을 제공하고 모든 메시지 페이지에는 뒤로 가기 버튼이 있어야 한다.
9. 기술적 용어(자바, 자바 스크립트, 애플렛 등) 을 피해야 한다.
10. 개발 전에 Prototype에 의한 Mock-up 테스트와 사용성(Usability) 테스트 등으로 사용자와 충분히 교류해야 한다.


사용성(Usability)을 높이기 위한 Tips
 -가시성과 독이성(읽기 쉬움) 
중요한 링크와 액션은 가시적이고 명백하게 만들어야 한다. 사용자들의 “훑어 읽기”를 감안하여 하이라이트 글자를 사용, 뷰렛화 된 리스트, 짧은 문장 등으로 디자인한다. 
 
 -간결성
빈번하거나 결정적인 업무들은 짧고 간단하게 유지한다. 용어는 사용자의 언어를 기초로 하는 것이 좋다. 기억하라. 짧게 적을수록 효과는 크다. 
 
 -실행
아직 인터넷 접근환경을 33.6kb 이하로 선호하는 반 이상의 사용자들을 위해 다운로드가 빠르도록 디자인한다.
 
 -네비게이션과 조직성
모든 페이지마다 [계속하기], [취소하기] 또는 [뒤로 가기] 그리고 [home]으로 갈 수 있는 명확한 방법을 공급한다. 사용자가 위치를 계속적으로 정보 받을 수 있는 효과적인 페이지 타이틀을 제공해야 한다. 페이지간을 조직적으로 배열하여 정보가 서로 그룹화 되고 접근하기 용이하도록 연계되어야 한다. 
 
 -일관성
비슷한 과업은 같은 맥락으로 수행되는 것이 좋다.  
 
 -피드백(feedback)
문제가 생겼을 때, 메시지는 사용자에게 정확히 무엇이 오류인지, 그리고 어떻게 고쳐야 하는지를 사용자가 이해할 수 있는 언어로 전달해야 한다.
 
 -관용
사용자가 실수한 것에 대한 최소한의 비용을 허용하는 시스템을 제공하고 또한 사용자들의 실행취소(undo)를 허락해야 한다.


사용자를 잡아두는 방법
웹에서의 사용자 시각 추적 연구 결과 사용자가 스크린을 보는 장소에 대해 일정한 패턴을 보여준다고 한다. 제일 먼저 가운데 그리고 왼쪽, 오른쪽의 순으로 나타난 것이다. 그러므로 정보의 중요도나 사이트 전략에 따라 이를 활용하는 것이 바람직 하다. 
 
사용자들은 대부분 배너광고를 무시하는 것을 재빨리 배운다. 여러 사이트의 사용성 테스트 결과, 배너를 마치 하나의 경계선처럼 여기고 배너처럼 생긴 그래픽은 그것이 중요한 정보임에도 발견하지 못하는 것을 발견할 수 있다. 그러므로 사이트의 중요한 정보나 네비게이션은 배너 광고처럼 이미지를 만들어서도 안되며 배너 영역에 두어서도 안 된다. 웹에서의 광고에 대해서는 사이트마다 심각하게 고려해야 할 대상이다.
 
만약 페이지 레이아웃의 그리드가 항상 똑같은 상태면 사용자들은 그 페이지의 부분을 무시하는 것을 배운다. 그러나 레이아웃이 현저하게 바뀌면 전 페이지를 다시 스캔 한다고 한다.(eBay.com은 각 페이지가 다른 레이아웃으로 되어 있음)
 
출처 : UIdesign

    

설정

트랙백

댓글