PART_2. 인터페이스 디자인 (INTERFACE DESIGN)
*** 클릭 단서 (Clickability Cue) ***
- 링크 여부를 직관적으로 판단할 수 있게 돕는 시각적 단서(visual cue)를 말함
- 색상(colored text), 밑줄(underlineed text), 그래픽 처리(graphic text) 등을 사용
- 좀더 강하게 유도하려면 아이콘을 곁들임
- 링크는 페이지 이동, 콘트롤 호출을 위해 사용되는 일종의 명령어(command)이므로 눈으로 보고 마우스로 클릭해야하는 대상
- 링크된 요소는 링크되지않은 요소와 구별 되어야 하며 그 기능성으 나타낼 수 있는 시각적 형태를 가져야 함
- 클릭단서를 제공하지않는다면 직관적이라 할 수 없음
- 클릭단서를 제공하지 않을경우 사용자는 일크의 여부를 판단하기 위해 직접 마우스를 조작해 손모양으로 바뀌는것을 일일이 확인하고 인지적으로 고민하야함
- 사용자의 신체적, 인지적 자우너을 불필요하게 소모하게만들면 하던 일을 중단하거나 대충 마무리하게 될것임
- 고령자와 어린이 대상의 웹 서비스는 클릭 단서에 대한 가이드가 좀 더 엄격할 필요가 있음
- 클릭단서는 새롭고 창의적인것보다 사용자의 경험에 바탕을 두어야 함
- 이미 학습된 시각적 단서(well-learned visual cues)를 일관적으로 사용하는것이 훨씬 효과적임 - 밑줄
- 사용자 경험은 보고(viewing), 이해하고(understanding), 조작하고(controlling), 느끼는(feeling) 과정에서 형성
- 국내의 웹디자인은 주로 보는 과정에 치중해 감각적인 디자인을 추구하는 편
- 클릭단서를 소홀히하는 경향이있는데 웹에서의 선택(point & click)의 중요성에대한 인식의 변화가 필요
벤치마킹
http://www.digg.com/
- 링크된 텍스트를 전통적인 표현 수단인 청색과 밑줄만으로 효과적으로 표현
- 링크된 이미지는 버튼 형태와 라인처리를 통해 그 기능성을 적절히 나타내고 있음
http://www.mister-wong.de/
- 페이지 숫자링크는 링크 주변을 테두리 처리해 알기 쉽고 클릭하기 편한 클릭단서를 제공
관련이론
시각적 단서(Visual Cue)
- 특정정보에 대한 시각적 정보로써 기억인출을 도움
- 음성정보에 시각적 단서를 제공함으로써 청각장애자의 사용성을 향상시킴
- 너무 많으면 정보 과부하 현상이 나타나므로 본문읽기를 방해하지않는 수준을 유지
- 디자인시 고려사항
. 이해용이성 - 의도한 바를 신속히 이해시킬수 있는가?
. 구분용이성 - 본문정보와의 구분이 용이한가?
. 통일성 - 본문정보와의 시각적 컨셉트가 일치하는가?
. 기억용이성 - 시각적 단서를 통해 본문 정보를 쉽게 떠올릴수 있는가?
출처: 웹2.0기획과 디자인(노주환)
*** 클릭 단서 (Clickability Cue) ***
- 링크 여부를 직관적으로 판단할 수 있게 돕는 시각적 단서(visual cue)를 말함
- 색상(colored text), 밑줄(underlineed text), 그래픽 처리(graphic text) 등을 사용
- 좀더 강하게 유도하려면 아이콘을 곁들임
- 링크는 페이지 이동, 콘트롤 호출을 위해 사용되는 일종의 명령어(command)이므로 눈으로 보고 마우스로 클릭해야하는 대상
- 링크된 요소는 링크되지않은 요소와 구별 되어야 하며 그 기능성으 나타낼 수 있는 시각적 형태를 가져야 함
- 클릭단서를 제공하지않는다면 직관적이라 할 수 없음
- 클릭단서를 제공하지 않을경우 사용자는 일크의 여부를 판단하기 위해 직접 마우스를 조작해 손모양으로 바뀌는것을 일일이 확인하고 인지적으로 고민하야함
- 사용자의 신체적, 인지적 자우너을 불필요하게 소모하게만들면 하던 일을 중단하거나 대충 마무리하게 될것임
- 고령자와 어린이 대상의 웹 서비스는 클릭 단서에 대한 가이드가 좀 더 엄격할 필요가 있음
- 클릭단서는 새롭고 창의적인것보다 사용자의 경험에 바탕을 두어야 함
- 이미 학습된 시각적 단서(well-learned visual cues)를 일관적으로 사용하는것이 훨씬 효과적임 - 밑줄
- 사용자 경험은 보고(viewing), 이해하고(understanding), 조작하고(controlling), 느끼는(feeling) 과정에서 형성
- 국내의 웹디자인은 주로 보는 과정에 치중해 감각적인 디자인을 추구하는 편
- 클릭단서를 소홀히하는 경향이있는데 웹에서의 선택(point & click)의 중요성에대한 인식의 변화가 필요
벤치마킹
http://www.digg.com/
- 링크된 텍스트를 전통적인 표현 수단인 청색과 밑줄만으로 효과적으로 표현
- 링크된 이미지는 버튼 형태와 라인처리를 통해 그 기능성을 적절히 나타내고 있음
http://www.mister-wong.de/
- 페이지 숫자링크는 링크 주변을 테두리 처리해 알기 쉽고 클릭하기 편한 클릭단서를 제공
관련이론
시각적 단서(Visual Cue)
- 특정정보에 대한 시각적 정보로써 기억인출을 도움
- 음성정보에 시각적 단서를 제공함으로써 청각장애자의 사용성을 향상시킴
- 너무 많으면 정보 과부하 현상이 나타나므로 본문읽기를 방해하지않는 수준을 유지
- 디자인시 고려사항
. 이해용이성 - 의도한 바를 신속히 이해시킬수 있는가?
. 구분용이성 - 본문정보와의 구분이 용이한가?
. 통일성 - 본문정보와의 시각적 컨셉트가 일치하는가?
. 기억용이성 - 시각적 단서를 통해 본문 정보를 쉽게 떠올릴수 있는가?
출처: 웹2.0기획과 디자인(노주환)
