플래시 네비게이션 디자인의 사용성에 관한 연구 = A Study on the Usability of Flash Navigation Design

다국어 초록 (Multilingual Abstract)

Flash had been performed an important role to convert the static HTML based website into the dynamic multimedia based website as a rich media. However, flash has a lot of usability problems and has been criticised by web usability expterts. Flash submenu fixing system is that improved these problem of web usability. As users click submenu in the flash navigation for moving relevant sub page, this system can inform to the users which page indicatate in the web browser more easily. Although diverse researchs have been attempted for improving flash usability, most of flash navigation have still produced by subjective view of flash navigation designers and website developers rather than by consideration of the convenience of users. Accordingly, website, which produces under the flash usability conception, and flash submenu fixing system, which is mentioned above, needs verification about the usability for providing convenience to the users. Therefore, the purpose of this reserch is that reducing error of this system by understanding of flash usability correctly, figuring out problem of the flash submenu fixing system through out usability test of this system.

국문 초록 (Abstract)

플래시는 오늘날 대표적인 리치 미디어로서 정적인 HTML기반의 웹사이트를 동적인 멀티미디어 기반의 웹사이트로 바꾸는데 중요한 역할을 해왔다. 하지만 플래시는 많은 사용성의 문제점을 드러내고 있고, 웹 유저빌리티 전문가에 의해 비판의 대상이 되고 있다. 이러한 사용성의 문제점을 개선시킨 것이 바로 플래시 서브메뉴 고정 시스템이다. 이는 네비게이션내에서 서브메뉴를 클릭 하여 해당 페이지로 들어갔을 때 해당 서브메뉴가 활성화 되어 사용자에게 현재 어떤 페이지를 표시하고 있는지를 쉽게 알려줄 수 있는 시스템이다. 플래시 유저빌리티를 향상 시키기 위한 다양한 연구들이 시도 되고 있음에도 불구하고 많은 플래시 네비게이션 디자이너와 웹 사이트 개발자들은 여전히 사용자 편의의 디자인이 아닌 개발자의 주관적인 견해에 의해서 제작되어 지고 있다. 이러한 까닭에 플래시 유저빌리티의 개념 하에 제작 되어지는 웹사이트들과 앞서 언급한 플래시 서브메뉴 고정 시스템이 실제 사용자(User)들에게 제대로 된 사용성을 제공 하고 있는지에 관한 검증이 필요한 시점이다. 따라서 본 연구의 목적은 플래시 유저빌리티에 대하여 정확하게 이해하고 국내 웹사이트들에서 적용되어 있는 플래시 서브메뉴 고정 시스템의 사용성 평가(Usability Test)를 통해 플래시 및 플래시 서브메뉴 고정시스템의 문제점과 개선방안을 구체적으로 연구하여 디자이너 및 개발자들이 이 시스템를 적용함에 있어 사용상의 오류를 줄이고자 한다.

참고문헌 (Reference)

1 "한국전력공사 사이트의 UT 결과한국전력공사의 사이트는 main메뉴에서부터 4depth의 서브메뉴까지 들어갈 수 있는 비교적 큰 규모의 사이트라고 할 수 있다 상단에 위치한 메인 플래시에서는 2depth의 서브메뉴까지 활성화 되고 2depth의 서브메뉴를 클릭하면 4depth까지의 하위메뉴들은 서브페이지의 오른쪽에 위치하고 있다 참가자중 power user는 테스트에서 이러한 메뉴 구조를 파악하는데 그리 오랜 시간이 걸리지 않았지만 나머지 참가자들은 이러한 구조를 제대로 파악하지 못하였다 예를 들어 상단의 메뉴중 열린한전>경영혁신 메뉴를 클릭했을때 오른쪽의 메뉴에서 경영혁신의 하위메뉴임을 알리는 서브타이틀이 있지만 이부분을 정확하게 인지 하지 못하는 문제점을 발견할 수 있었다 <그림 13> 상단과 오른쪽 메뉴들의 내용이 서로 다르기 때문에 전혀 별개의 메뉴로 생각하고 있었고 더욱이 이라는 타이틀과 하위메뉴의 텍스트 컬러가 같기 때문에 상위메뉴와 하위메뉴의 구분이 불분명하다고 말했다 그리고 서브메뉴가 활성화된 상태와 그렇지 않은 상태와의 구분이 뚜렷하지 않기 때문에 서브메뉴가 활성화 되어 있다는 것을 발견하기가 어려워 보였다"

2 "하지만 플래시 메뉴는 버튼에 마우스를 올려도 상태표시줄에 아무런 링크정보도 보여주지 않는다"

3 "플래시는 이미 방문했던 링크에 대하여 아무런 표시도 나타나지 않는다 롤 오버되는 서브메뉴와 같은 형태의 경우 텍스트를 대신하여 사용된 플래시 메뉴는 이미 방문한 링크에 아무런 표시도 되지 않기 때문에 방문했던 링크를 다시 방문하게 된다 서브메뉴에 텍스트를 사용하면 이미 방문한 링크의 색상이 변하므로 다시 방문하는 실수를 거듭하지 않게 될 것이다 게다가 서브메뉴는 중요한 키워드 들로 구성되어 있기에 검색엔진에 의하여 피검색될 확률도 그만큼 높아지게 된다 플래시 디자이너를 위한 보고서" 攀 장윤 : 2003

4 "플래시 디자이너를 위한 사용성보고서" 14-, 2003

5 "풍선도움말 기능이 없다 특히 전문용어로 구성된 메뉴의 경우 풍선도움말에 나타난 도움말은 사이트 항해에 매우 도움이 된다 하지만 플래시 메뉴를 제작하는 경우 풍선도움말 기능과 유사한 기능을 구현해 주는 디자이너들은 별로 없다 The Practice of Simplicity』" New Riders Publishing 2000

6 "테스트를 위해서 먼저 평가할 사이트를 선정하였다" CGV 전라북도립국악원사이트를그대상으로하였다

7 "직관성현재 페이지에 나타나는 서브메뉴의 활성화된 표현은 직관적인가"

8 "이러한 연구를 근거로 하여 본 연구에서도 테스트에 참여한 인원은 5명이고 테스트의 객관성을 확보하기 위해 참가자는 인터넷에 능숙한 사용자 인터넷 경험이 없는 사용자 2명이 테스트에 참가하였다 테스트 절차는 참가자들에게 선정된 웹사이트의 플래시 서브메뉴 고정 시스템을 사용하게 하고 이를 관찰함으로써 참가자들의 행동양식을 파악하였고 또한 테스트중 참가자들에게 <표 1>과 같은 질문을 통해 시스템이 갖고 있는 사용성의 문제점을 분석하였다 가시성과 일관성네비게이션의 구조는 직관적인가 서브메뉴의 배치는 적절한가"

9 "의 개념이러한 이유로 웹기획이 발전하게 되고 성공적으로 웹사이트를 만들기 위한 여러 가지 기획방법들을 이론화하고 연구되기 시작했다 산재되어 있는 컨텐츠를 효율적으로 구성하고 관리하고 보여주는 인포메이션아키텍처 인터넷 이용자들이 원하는 컨텐츠로 원활한 접근성 을 가질 수 있도록 할 수 있는 네비게이션 스타일가이드 같은 디자인적인 연구등 여러 가지 가 있으며 국내에서는 웹 사용성이라고 불리기도 하며 최근 웹사이트를 기획하는 웹 프로젝트 메니져 이나 웹 디자이너들은 유저빌리티라는 단어를 종종 얘기하고 있고 웹 프로젝트 제안서에서 한 페이지를 차지 할 정도로 그 중요성은 점점 확대 되고 있는 추세이다 웹 유저빌리티란 특별히 새로운 개념이라기보다는 그동안 우리가 기획을 해오면서 알게 모르게 항상 연구하고 노력해온 사용자들에게 웹사이트를 쉽고 편하게 이용할 수 있도록 하는 것을 가리킨다 유저빌리티의 대부라 할 수 있는 제이콥 닐슨 은 유저빌리티를 아래와 같이 다섯 가지 요소로 정의攀 Jakob Nielsen"

10 "유저빌리티 테스트 방법일반적으로 유저빌리티 테스트는 표본조사나 정량조사 방법이 아닌 참여자의 의견 문제점들을 찾아내기 위해서 정성조사 방법으로 진행한다 유저빌리티 테스트에 필요한 인원은 Nielsen Virzi의 연구에서 제시한대로 5명이면 충분하다고 말하고 있다 <그림 12>에서 볼 수 있듯이 사용자 한 사람을 테스트해 이로부터 정보를 수집할 때 관찰자는 사용자로부터 사용성 문제에 대해 1/3을 알게 된다 두 번째 사용자를 테스트하면 첫 번째 사용자와 동일한 문제를 몇 개 발견하고 따라서 두 번의 테스트를 통해서 어느 정도 중복되는 내용을 발견하게 된다는걸 알게 된다 세 번째 사용자에서 부터는 앞서 두 사람을 테스트하면서 발견한 것들을 다시 확인시켜주는 역할을 하게 된다攀 그래프에서는 최소한 15명의 사용자들을 테스트해야 한다는 것을 보여준다 Nielsen은 5명의 사용자를 대상으로 소규모의 UT를 3번반복하라고 강조하고 있다"

11 "와 플래시 네비게이션 의 문제점1997년 Flash 2 0이 출시된 이후 역동적인 애니메이션과 사운드까지 겸비한 플래시의 매력을 웹 디자이너들은 쉽게 떨쳐 버릴 수 없었고 이를 이용해 다분히 디자인적이고 혁신적인 플래시 사이트가 등장하게 되었다 플래시는 다음과 같은 이유 때문에 웹 디자이너들이 선호하게 되었다攀 노주환 플래시 네비게이션의 장단점"

12 "연구배경 및 목적최근 10년간 가정용 PC의 성능과 초고속 인터넷망이 급속하게 발전함에따라 온라인상에서 멀티미디어 콘텐츠의 사용이 점차 확산되고 있다 이러한 멀티미디어 콘텐츠를 효과적으로 구현할 수 있는 최적의 도구로서 플래시 의 사용은 날로 높아져 가고 있다 애니메이션 최근에는 스트리밍 기반의 플래시 비디오에 이르기까지 하나의 프로그램으로 거의 모든 미디어를 총체적으로 저작할 수 있는 플래시는 현재 온라인 멀티미디어 저작 도구로서 독보적인 존재로서 그 영역을 넓혀 가고 있다 이제는 리치 미디어 를 대표하는 말로써 작은 배너에서부터 플래시 네비게이션 에 이르기 까지 거의 대부분의 웹사이트에서 플래시 무비가 빠지지 않고 있으며 고품격의 웹사이트를 유지하기 위한 수단으로 사용되고 있다 그럼에도 불구 하고 플래시는 많은 사용성의 문제점을 노출하고 있고 전문가들 사이에서 비판의 대상이 되고 있는 실정이다 제이콥 닐슨은 자신의 칼럼 99%가 나쁜 영향만 준다 - Flash"

13 "연구방법 및 범위본 연구에서는 지금까지 플래시를 기반으로 한 사이트들이 웹 유저빌리티에 미치는 부정적인 측면과 플래시가 가지는 장점 및 플래시 유저빌리티의 개념을 문헌연구를 통해 이론적으로 고찰해 보고 이를 토대로 현재 플래시 유저빌리티의 개념이 적용된 국내 사이트의 플래시 서브메뉴 고정 시스템을 선정하여 유저빌리티 테스트 를 실시하였다 테스트 후 플래시 네비게이션의 문제점을 분석해보고 개선방향을 제시하였다 문헌연구는 국내외 관련 서적을 바탕으로 연구논문 인터넷상의 관련 자료들을 검색 분석하여 논의 하였으며 유저빌리티 테스트에 참여한 인원은 Nielson攀"

14 "시절 웹 페이지는 아주 단순해서 구조 자체가 대부분 선형 을 중심으로 이루어졌다 웹 디자인 기술면에서 보더라도 단순한 HTML이 전부이며 수억 페이지로 구성된 거대한 정보 공간인 웹을 서핑하기 위해서는 하이퍼 텍스트 링크를 클릭하는 방식으로 이동하는 유저 인터페이스가 기본적으로 사용되고 있다 네비게이션 시스템은 사용자가 기본적인 네비게이션에 관한 다음 세가지 질문에 대한 답을 찾을 수 있도록 도와야 한다攀"

15 "사운드를 사용할 수 있다 플래시의 가장 큰 장점은 사운드를 비교적 자유롭게 다룰 수 있다는 점이다 물론 네비게이션에 사운드를 사용하는 것은 장점보다는 단점이 많다 하지만 경우에 따라서는 매우 유용한 결과물을 만든다 하지만 중요한 문제는 웹 디자이너들이 가장 중요하고 핵심적인 유저빌리티의 요소중에 하나인 사이트의사용 편의성을 전혀 고려하지 않고 그래픽적인 요소만을 지나치게 강조 하고 있다는 점이다 이러한 무분별한 플래시의 남용을 웹 유저빌리티 전문가들 사이에서 비판의 대상이 되어 왔고 Nielsen은 다음과 같이 플래시의 문제점들을 지적하였다 플래시는 1 디자인의 남용을 부추긴다 웹의 근본을 파괴한다 사이트의 핵심가치에 집중하지 못하게 한는 이유로 자신의 칼럼에서 플래시는 99%가 나쁜 영향을 준다고 플래시의 단점을 지적하였다 의 유형 역시 플래시의 등장으로 하이퍼 텍스트 > 이미지 > 자바스크립트 > 플래시 순으로 변화해 왔고 이 과정에서 플래시 네비게이션도 웹 디자이너들에 의해 좀더 다이나믹하고 화려하게 변모해 갔다 하지만 플래시 네비게이션의 동적 효과에 치우친 나머지 웹브라우저 사용에 익숙한"

16 "사용자가 사이트를 방문했을시 흥미를 느끼고 편리하게 원하는 목적을 이루도록 사용자 중심의 사이트를 제작하는 동시에 사이트를 운영하는 사람의 목적도 함께 실현되어야 웹 유저빌리티를 성공적으로 구현한 것이라 할 수 있다 유저빌리티에 대한 충실한 고려가 잘못하면 삭막하기 그지 없는 사이트만을 양산하게 될 수 도 있다 사용성이 가장 완벽하게 구현됐다고 자부하는 Nielsen의 Useit com의 사이트를 보면 웹 사이트에서 미적인 측면은 더 이상 필요 없는 것처럼 보인다 <그림 3>에서 볼 수 있듯이 지금까지의 유저빌리티 논의는 지나치게 미적인 측면이 배제 되어 왔다 Nielsen이 주장하는 웹 유저빌리티의 목적이 사용 편리성이라는 것은 부인 할 수 없지만 이는 웹 사이트를 제작하는데 있어서 디자이너의 입장에서 볼때 웹 유저빌리티의 개념에 대해 잘못된 오류를 범하게 해 줄 수도 있기 때문이다"

17 "사용성 테스트 가이드 북" 한솜미디어 126-, 2004

18 "브라우저간의 호환성 이 뛰어나다 DHTML이 브라우저간의 호환성과 버전에 따른 지원 여부가 불투명한데 반해 플래시는 플러그인만 설치되어 있다면 어떤 브라우저에서도 같은 모습과 기능의 네비게이션을 제공한다"

19 "버튼의 크기D 버튼까지의 거리따라서 버튼을 클릭하기 위하여 마우스 포인터를 이동시키는 거리가 먼 가로 정렬의 메뉴 배치의 경우 실수 없이 정확하게 버튼에 마우스 포인터를 가져가 클릭하는 것이 어려워 지는 현상을 이번 테스트에서 확인 할 수 있었고 서브메뉴의 배치를 결정하는 중요한 요소임을 알 수 있었다 네비게이션의 애니메이션 속도는 비교적 적당하다고 응답했다 움직임이 한국전력공사의 네비게이션 보다 간결하기 때문에 참가자들이 별 무리 없이 서브메뉴들을 선택하였다 하지만 오른쪽 네비게이션에서 3depth메뉴를 활성화 하기 위한 애니메이션이 빠르고 움직임의 폭이 크기 때문에 금방 싫증을 내고 번거롭게 생각된다고 응답했다"

20 "반응이 정확하고 다양하다 플래시 기반의 네비게이션은 마우스에 대한 반응이 정확하고 즉각적이다 플래시의 다양한 마우스 이벤트는 재미가 가미된 인터랙션을 제공한다 마우스 이벤트에 의한 동작의 속도와 동작의 크기는 사용자의 경험에 부합되어야 하며 복잡한 모션은 반드시 삼가해야 할 것이다"

21 "간결성네비게이션의 애니메이션 속도는 적절한가네비게이션의 조직성서브메뉴를 클릭하기는 수월한가"

22 "攀攀상태표시줄에 링크정보가 나타나지 않는다 이미지나 텍스트로 구성된 메뉴에 마우스를 오버시키면 웹브라우저의 상태표시줄에 링크된 절대경로의 주소가 나타나므로 해당 버튼이 어느곳으로 링크되어 있는지 알 수 있다攀 J"

23 "攀攀버튼의 영역이 표시되지 않는다 버튼의 영역이 표시되지 않는 플래시 메뉴는 알게모르게 불편을 주는 요소이다 사용자가 버튼의 영역을 무의식중에 정확하게 인지하는 것은 다음 버튼을 누를때 도움이 된다 그래픽 또는 텍스트 메뉴의 경우 버튼을 눌렀을때 버튼의 영역이 표시되며 이것은 자연스럽게 학습되며 다른 버튼을 누를때 학습된 대로 정확한 영역에 마우스를 올려놓을 수 있게 된다 하지만 플래시 메뉴의 경우 그래픽으로 특별한 효과를 주지 않는 이상 버튼의 영역이 표시되지 않는다"

24 "攀攀.현재 위치는 어디인가? (Where I am?)이전의 위치는 어디였는가? (Where have I been?)다음에는 어디로 이동할 수 있는가? (Where can I go?)그러나 지금의 웹 사이트는 웹 프로그램과의 연동, DB와의 연동, 멀티미디어의 출현 등으로 선형구조의 웹사이트를 비선형(non-linear) 구조의 웹사이트로 바뀌었고 사이트의 구조 또한 매우 복잡하게 이루어지게 되었다." 14-,

25 "Why you only need to test with 5 users"

26 "Why you only need to test with 5 users" 2000

27 "The invisible computer" The MIT Press 1999

28 "The Design of Everyday Things" The MIT Press 1998

29 "Designing Web Usability: The Practice of Simplicity" New Riders Publishing 51-, 2000

30 "Designing Web Usability: The Practice of Simplicity" New Riders Publishing 61-, 2000

31 "Designing Web Usability: The Practice of Simplicity" New Riders Publishing 188-191, 2000

32 "<그림 8> 참가자들도 이 부분에 관한 인지도도 매우 높았고 현재 페이지의 위치도 CGV에 사용된 네비게이션과 마찬가지로 쉽게 찾을 수 있었다" 움직임이 다소 느리기 때문에 다른 메뉴를 롤오버했을때 서브메뉴들끼리 서로 겹쳐지기 때문에 메뉴 선택에 약간 번거롭다고 응답했다 상단의플래시메뉴에서서브메뉴들은가로로배치되어있고메뉴의항목도비교적많기때문에선택하는데다소어려움을보였다