유저빌리티를 위한 10가지 성공조언
배움의 즐거움/UI / Design :
2008. 2. 28. 11:54
유저빌리티를 위한 10가지 성공조언 - macromedia
"기본을 지키면 성공한다"
1. 사용자들의 목적이 무엇인지 파악하라
사용자들은 보통 정보를 구하고자 하는 목적을 가지고, 사이트를 방문한다.
그러므로 각각의 링크나 클리기은 그들의 기대에 부함되어야 하며 그들이 가고자 하는 정보에 손쉽게 다다를수 있도록 해야한다.
또한 핵심이 되는 링크들을 가장 잘 보이는 곳에 위치하도록 하여 사용자가 정보를 손쉽게 찾을수 있도록 한다.
GUI 가 잘되어 있는 사이트를 모방하거나 참조하는것도 유저빌리티 향상에 도움이 될 수 있다.
2. 사이트의 목적이 무엇인지 기억하라
사이트 디자인은 사용자들과의 효과적인 커뮤니케이션과 클라이온트의 비즈니스 측면의 두가지 요소를 반영하고 있어야 한다.
또한 사이트는 사용자 경험을 바탕으로 제작되어야 하며, 사이트 구조는 이러한 사용자 요구를 반영하여 최대한 사용자가 원하는 정보에 빠르게 도달할수 있도록 설계되어야 한다.
노골적인 회사의 자랑이나 지역적인 냄새가 나는 단어는 피하도록 한다.
3. 불필요한 인트로는 피하라
인트로 애니메이션이 웹상에서 한창 유행처럼 번지고 있었을 때 이러한 인트로 애니메이션들은 사용자들의 시야을 현혹시켜 그들이 찾고자 하는 정보로 다가서는 발길을 잠시 지연시켰다.
그러나 똑같은 사용자가 두 번 세 번 같은 사이트를 방문한다면 이러한 인트로 애니메이션에 흥미를 가질 것인가?
물론 그럴 가능성은 거의 희박하다.
그렇다면 방법은 무엇인가? 인트로 애니메이션 또는 무비를 무조건 만들지 않는 방법은 너무 원시적이다.
이러한 방법은 어떨까? 사용자의 첫 번째 방문에는 스킵 버튼 또는 다른 사이트 액세스 방법을 제시한다.
그러나 두 번째 방문에는 컴퓨터가 사용자의 방문을 기억하여 곧바로 사이트로 접속되도록 하되, 인트로 스킵 버튼 대신 인트로 애니메이션으로 돌아갈수 있는 버튼을 만드는 것이다.
4. 논리적인 네비게이션과 인터랙티비티를 제공하라.
- 사용자 중심의 사이트가 되라 : 사이트 주소가 비뀐다면 이전의 주소를 명기하고 새로 바뀐 조수로 바로 이동할수 있도록 배려한다.
또한 사용자가 한번 방문한 곳의 링크 컬러를 바꾸어 사용자가 어떤곳을 방문했었는지 알려준다.
- 메뉴들 사이에서 쉽게 이동할수 있으며 처음의 위치로 쉽게 다시 돌아올수 있도록 네비게이션 구조를 설계한다.
- 각각의 링크의 목적지를 확실하게 보여준다. 네비게이션 구조를 보여주어 사용자가 길을 잃지 않도록 한다.
- 페이지가 올바르게 링크되어 있는지 항상 체크한다.
- 플래시의 스트리밍 기능을 사용하여 첫페이지에 네비게이션 요소를 적용한다.
- back 버튼 네비게이션을 지원한다.
이를 위해서는 브라우저에 back 과 forward 네이게이션을 만든다.
플래시 무비를 여러개로 나누고 각각의 HTML 패이지로 만들어 플래시 기반의 백버튼을 포함한 무비로 만든다.
그러면 사용자들은 앞 페이지의 프레임 또는 씬으로 돌아갈수 있다.
5. 일관성있는 디자인을 하라
일관성있는 유저인터페이스는 웹사이트의 퍼포먼스를 향상시키는 가장 좋은 방법이다.
각기 다른 유저 인터페이스의 사용보다는 아키택쳐 및 디자인 구성요소를 재사용하여 일관성을 유지하라.
인터랙티브한 요소를 사이트 전체에 재사용하기를 워한다면 플래시의 smart Clips를사용하면 편리하다.
6. 지나친 애니메이션은 오히려 방해요소가 된다.
불필요한 애니메이션은 피하라.
퀄리티 높은 애니메이션은 사이트를 빛나게 하고 스토리를 말해주며, 네비게이션을 돕기도 한다.
그러나 택스트가 많은 페이지에서 자꾸 반복되는 애니메이션은 페이지의 정보로부터 시선을 멀어지게 하는 방해요소만 될뿐이다.
7. 사운드를 절제하라
사운드를 적절히 사용하면 도움이 도기도 하지만 꼭 필요한 요소는 아니다.
예를 들면, 사용자가 링크 또는 메뉴를 클리기할 때 사운드 효과가 일어나도록 설정했을 경우, 반드시 사운드의 온, 오프와 볼륨 컴트롤을 옵션으로 가지고 있어야 한다.
그리고, 사운드는 파일 사이즈를 증가시킨다는 점을 명심하라.
무분별한 사운드의 사용은 사용자를 괴롭힐 뿐이며 페이지 포딩 속도 또한 느려진다는 것을.
사운드를 사용할 때. 플래시는 작은 크기의 mp3파일로 압축시켜 스트리밍해준다.
8. Low-bandwidth 사용자를 배려하라
파일 크기가 작을수록 다운로드가 더 빠르다.
플래시 파일, HTML, 이미지 등을 포함한 처음의 스크린 다운로드는 40k를 넘어서지 않도록한다.
다운 로드 시간를 줄이기 위해서는 크기가 작은 벡터 기반의 이미지들을 사용하고 load movie 액션은 오직 사용자가 mrqufgl rm 파일을 요구할 경우에만 사용한다.
만약 사용자가 기다리는 것을 피할수 없다면 프로그레스 인디게이터 등을 사용하여 로딩 시간을 알려주도록 하라.
그리고 가능하다면 모든 네비게이션 로드는 5초 안에 이루어지도록 한다.
9. 접근하기 용이한 디자인을 하라.
컨텐츠를 모든 사용자들, 즉 장애인들에게도 이용 가능하도록 설계하라.
줌 기능을 위한 smart clip 기능은 플래시가 가지는 편리한 기능중 하나이다.
이것을 사용하면 작은 컨텐츠의 글씨도 읽을수 있다.
10. 유저빌리티를 테스트하라
사이트가 사용자들을 만족시키고 제 목적을 다이루고 있는지에 대하여 반드시 테스트한다.
왜냐하면, 때로는 아주 작은 플래시 무비라도 사용자들을 짜증나게 할수도 있기 때문이다.
플래시가 내장하고 있는 bandwidth Profiller(view 메뉴의 test movie mode에 위치)를 사용하면 다양한 bandwidth에서 얼마나 사이트가 제대로 작동하는지 분석할수 있다.
작은 변화가 있을때마다 테스트를 반복하고 사이트 네비게이션, 인터페이스, 사용성등 다양한 분야에서 테스트가 이루어 져야한다.
"기본을 지키면 성공한다"
1. 사용자들의 목적이 무엇인지 파악하라
사용자들은 보통 정보를 구하고자 하는 목적을 가지고, 사이트를 방문한다.
그러므로 각각의 링크나 클리기은 그들의 기대에 부함되어야 하며 그들이 가고자 하는 정보에 손쉽게 다다를수 있도록 해야한다.
또한 핵심이 되는 링크들을 가장 잘 보이는 곳에 위치하도록 하여 사용자가 정보를 손쉽게 찾을수 있도록 한다.
GUI 가 잘되어 있는 사이트를 모방하거나 참조하는것도 유저빌리티 향상에 도움이 될 수 있다.
2. 사이트의 목적이 무엇인지 기억하라
사이트 디자인은 사용자들과의 효과적인 커뮤니케이션과 클라이온트의 비즈니스 측면의 두가지 요소를 반영하고 있어야 한다.
또한 사이트는 사용자 경험을 바탕으로 제작되어야 하며, 사이트 구조는 이러한 사용자 요구를 반영하여 최대한 사용자가 원하는 정보에 빠르게 도달할수 있도록 설계되어야 한다.
노골적인 회사의 자랑이나 지역적인 냄새가 나는 단어는 피하도록 한다.
3. 불필요한 인트로는 피하라
인트로 애니메이션이 웹상에서 한창 유행처럼 번지고 있었을 때 이러한 인트로 애니메이션들은 사용자들의 시야을 현혹시켜 그들이 찾고자 하는 정보로 다가서는 발길을 잠시 지연시켰다.
그러나 똑같은 사용자가 두 번 세 번 같은 사이트를 방문한다면 이러한 인트로 애니메이션에 흥미를 가질 것인가?
물론 그럴 가능성은 거의 희박하다.
그렇다면 방법은 무엇인가? 인트로 애니메이션 또는 무비를 무조건 만들지 않는 방법은 너무 원시적이다.
이러한 방법은 어떨까? 사용자의 첫 번째 방문에는 스킵 버튼 또는 다른 사이트 액세스 방법을 제시한다.
그러나 두 번째 방문에는 컴퓨터가 사용자의 방문을 기억하여 곧바로 사이트로 접속되도록 하되, 인트로 스킵 버튼 대신 인트로 애니메이션으로 돌아갈수 있는 버튼을 만드는 것이다.
4. 논리적인 네비게이션과 인터랙티비티를 제공하라.
- 사용자 중심의 사이트가 되라 : 사이트 주소가 비뀐다면 이전의 주소를 명기하고 새로 바뀐 조수로 바로 이동할수 있도록 배려한다.
또한 사용자가 한번 방문한 곳의 링크 컬러를 바꾸어 사용자가 어떤곳을 방문했었는지 알려준다.
- 메뉴들 사이에서 쉽게 이동할수 있으며 처음의 위치로 쉽게 다시 돌아올수 있도록 네비게이션 구조를 설계한다.
- 각각의 링크의 목적지를 확실하게 보여준다. 네비게이션 구조를 보여주어 사용자가 길을 잃지 않도록 한다.
- 페이지가 올바르게 링크되어 있는지 항상 체크한다.
- 플래시의 스트리밍 기능을 사용하여 첫페이지에 네비게이션 요소를 적용한다.
- back 버튼 네비게이션을 지원한다.
이를 위해서는 브라우저에 back 과 forward 네이게이션을 만든다.
플래시 무비를 여러개로 나누고 각각의 HTML 패이지로 만들어 플래시 기반의 백버튼을 포함한 무비로 만든다.
그러면 사용자들은 앞 페이지의 프레임 또는 씬으로 돌아갈수 있다.
5. 일관성있는 디자인을 하라
일관성있는 유저인터페이스는 웹사이트의 퍼포먼스를 향상시키는 가장 좋은 방법이다.
각기 다른 유저 인터페이스의 사용보다는 아키택쳐 및 디자인 구성요소를 재사용하여 일관성을 유지하라.
인터랙티브한 요소를 사이트 전체에 재사용하기를 워한다면 플래시의 smart Clips를사용하면 편리하다.
6. 지나친 애니메이션은 오히려 방해요소가 된다.
불필요한 애니메이션은 피하라.
퀄리티 높은 애니메이션은 사이트를 빛나게 하고 스토리를 말해주며, 네비게이션을 돕기도 한다.
그러나 택스트가 많은 페이지에서 자꾸 반복되는 애니메이션은 페이지의 정보로부터 시선을 멀어지게 하는 방해요소만 될뿐이다.
7. 사운드를 절제하라
사운드를 적절히 사용하면 도움이 도기도 하지만 꼭 필요한 요소는 아니다.
예를 들면, 사용자가 링크 또는 메뉴를 클리기할 때 사운드 효과가 일어나도록 설정했을 경우, 반드시 사운드의 온, 오프와 볼륨 컴트롤을 옵션으로 가지고 있어야 한다.
그리고, 사운드는 파일 사이즈를 증가시킨다는 점을 명심하라.
무분별한 사운드의 사용은 사용자를 괴롭힐 뿐이며 페이지 포딩 속도 또한 느려진다는 것을.
사운드를 사용할 때. 플래시는 작은 크기의 mp3파일로 압축시켜 스트리밍해준다.
8. Low-bandwidth 사용자를 배려하라
파일 크기가 작을수록 다운로드가 더 빠르다.
플래시 파일, HTML, 이미지 등을 포함한 처음의 스크린 다운로드는 40k를 넘어서지 않도록한다.
다운 로드 시간를 줄이기 위해서는 크기가 작은 벡터 기반의 이미지들을 사용하고 load movie 액션은 오직 사용자가 mrqufgl rm 파일을 요구할 경우에만 사용한다.
만약 사용자가 기다리는 것을 피할수 없다면 프로그레스 인디게이터 등을 사용하여 로딩 시간을 알려주도록 하라.
그리고 가능하다면 모든 네비게이션 로드는 5초 안에 이루어지도록 한다.
9. 접근하기 용이한 디자인을 하라.
컨텐츠를 모든 사용자들, 즉 장애인들에게도 이용 가능하도록 설계하라.
줌 기능을 위한 smart clip 기능은 플래시가 가지는 편리한 기능중 하나이다.
이것을 사용하면 작은 컨텐츠의 글씨도 읽을수 있다.
10. 유저빌리티를 테스트하라
사이트가 사용자들을 만족시키고 제 목적을 다이루고 있는지에 대하여 반드시 테스트한다.
왜냐하면, 때로는 아주 작은 플래시 무비라도 사용자들을 짜증나게 할수도 있기 때문이다.
플래시가 내장하고 있는 bandwidth Profiller(view 메뉴의 test movie mode에 위치)를 사용하면 다양한 bandwidth에서 얼마나 사이트가 제대로 작동하는지 분석할수 있다.
작은 변화가 있을때마다 테스트를 반복하고 사이트 네비게이션, 인터페이스, 사용성등 다양한 분야에서 테스트가 이루어 져야한다.
