웹디자인 및 제작_HTML/Xhtml_웹페이지 제작 시 하이퍼링크 효과 개선

하이퍼링크를 사용하면 페이지에서 페이지로, 사이트에서 사이트로 즉시 이동할 수 있습니다.
하이퍼링크를 사용하면 방문자가 한 페이지에서 다른 페이지로 또는 한 사이트에서 다른 사이트로 이동할 수 있습니다. 그러나 이러한 잦은 점프는 사람들을 불안하게 만들 수 있습니다.

사용자가 자신 있게 탐색할 수 있도록 링크는 매우 명확하고 명시적이어야 합니다.
사용자가 페이지를 더 잘 탐색할 수 있도록 하이퍼링크는 절대적으로 명확하고 명시적이어야 합니다.

원칙
원칙

1. 텍스트 하이퍼링크는 일반 텍스트와 명확하게 구별되어야 합니다.
2. 모든 마우스 오버 동작은 강조 표시 효과를 가져야 합니다. 3. 하이퍼링크 콘텐츠는 다음 중 하나를 식별할 수 있을 만큼 길어야 합니다. 하이퍼링크의 구체적인 내용은 간결하고 간결해야 합니다(짧고 정확해야 함).


·
어디로 갈까 [

점프 전달주소
] ·

혜택 [
어떤 컨텐츠를 받고 싶으신가요] · 원하는 일 [

희망 어떤 효과
] 4. 서로 다른 대상을 가리키는 하이퍼링크는 명확하게 구분되어야 합니다. 하이퍼링크는 명확하게 구분되어야 합니다. 예상치 못한 결과 표시(예: 다음과 같이 하이퍼링크를 클릭한 후 발생하는 특별한 상황을 설명:

)
· 파일 링크 [ 파일 링크 ]

· 창을 열거나 닫는 링크 [ 링크를 클릭하면 창이 열리거나 닫힙니다. ]

링크는 무엇으로 만드나요?
하이퍼링크를 만드는 목적을 생각해 보세요

하이퍼링크 콘텐츠 예: Amapproved.com
하이퍼링크 내용 예시: Amapproved.com

승인된 Aston Martins를 찾는 사이트이며 전체적으로 좋습니다. 검색 결과에서 특정 차량의 세부 정보를 어떻게 볼 수 있는지 추측해 보세요. 모델(차량 요약 열).
Aston Martins [Aston Martin] 자동차 홈페이지입니다. 전체적인 외관 디자인은 클래식하다고 할 수 있습니다. 검색결과 표시 페이지입니다. 이제 검색 결과를 통해 차량에 대한 자세한 정보에 어떻게 접근할 수 있는지 상상해 보세요. 여기서 유일한 하이퍼링크는 "차량 요약 열 [차량 기본 목록]" >vehicle의 "에 대한 것입니다. 모델[차량 모델]”.

첫 번째이자 가장 큰 문제는 하이퍼링크를 구분할 수 없다는 점으로, 원칙 1을 위반합니다. 더 많은 정보를 얻으려면 어디를 클릭해야 할지 모르므로 추측해야 합니다.먼저 직면하게 되는 가장 큰 문제는 어느 것이 하이퍼링크인지 알 수 없다는 것입니다. 이는 1법에 위배됩니다. 즉, 자세한 정보를 얻으려면 어디를 클릭해야 할지 모르기 때문에 먼저 생각해야 합니다.

두 번째 문제는 링크가 완전히 다른 대상을 가리키고 있음에도 불구하고 동일해 보인다는 것입니다(각각의 Aston Martin은 서로 다른 대상을 사용함). 이는 원칙 4를 위반합니다. 이 페이지의 모든 링크는 동일한 내용을 갖기 때문입니다. (차량 모델) "
Aston Martin") 링크일 수도 있지만 거의 동일해 보이며 이는 위의 규칙을 위반합니다. 4; 플러스 모두 동일한 내용이 포함되어 있습니다. (차량 모델 [차량 유형 ]) 하이퍼링크가 덜 명확해집니다.

"Aston Martin DB7 GT"를 클릭하면 Aston Martin DB7 GT 자동차에 대한 일반 정보를 얻을 수 있을 것으로 기대합니다. 이는 링크에서 얻을 수 있는 내용을 정확하게 설명하지 않기 때문에 원칙 3을 위반합니다.
'
Aston Martin DB7 GT' 링크를 클릭하면 'Aston Martin DB7 GT” 유형 자동차에 대한 일반 정보입니다. 그러나 최종적으로 얻은 정보와 링크에 대한 설명 사이에 불일치가 있음을 발견했습니다. 그렇다면 이는 위법3위반입니다.

어떻게 해야 할까요?

웹사이트는 어떻게 개선해야 할까요?

"얻는 것"은 특정 자동차에 대한 정보입니다. 특정 자동차를 나타내는 것은 자동차에 대한 다른 고유 식별자(마일리지, 가격 등)가 아닌 전체 테이블 행입니다. 반드시 고유할 필요는 없습니다.) 따라서 전체 행은 클릭 가능한 하이퍼링크여야 합니다. (마우스를 올리면 행의 색상/톤이 변경되는 경우에도 도움이 됩니다.)

"당신이 얻는 것[당신이 얻는 정보]"는 자동차와 관련되어야 합니다. 특정 모델은 전체 테이블 열을 동시에 차지해야 합니다. 특정 모델 정보(마일리지, 가격 등)를 포함하는 확인 개체가 없기 때문에 테이블의 전체 열을 클릭 가능한 하이퍼링크 개체로 사용해야 합니다. . (하이퍼링크 위로 마우스를 이동할 때 색상 변경 효과가 발생하는지 확인하기가 더 쉽습니다.)

하이퍼링크로 크기 표현
하이퍼링크 개체의 크기를 설명

파일을 연결할 때 사용자의 기대치를 설정하기 위해 이러한 종류의 정보를 표시하는 컴퓨터를 찾는 것은 매우 흔한 일입니다.
파일을 연결할 때 일반적으로 하이퍼링크를 찾습니다. 설명 포함 사용자가 파일 링크를 클릭할지 여부를 결정하는 데 도움이 되는 파일 크기.
예: PDF(46,764바이트)
사용자의 목표를 생각할 때 필요한 것은 무엇인지 아는 것입니다. 다운로드에 소요되는 시간은 대략 몇 초입니까, 아니면 몇 분입니까? 일반적으로 필요한 만큼 정확합니다. 몇 초입니까, 몇 분입니까? 그러므로 가능한 한 정확하게 설명해야 합니다.

무엇으로 해야 할까요?

위의 파일 크기를 어떻게 설명해야 할까요?

파일 크기를 2개 이상의 유효 숫자로 표시하는 것은 전혀 이점이 없습니다. 또한 온라인에서 파일 크기에는 킬로바이트 또는 메가바이트만 사용하십시오(유효 숫자 2개까지만 사용하면 좋습니다. 실행: 4.7KB, 47KB, 470KB, 4.7MB 등)
파일 크기를 유효 숫자 2자리 이내로 설명하는 것이 가장 좋습니다. 위의 파일 크기는
47KB로 작성해야 합니다. 따라서 가능하면 파일은 킬로바이트(kb) 또는 메가바이트(mb)를 사용하여 웹에서 설명해야 합니다. (저희 권장 2자리 표기 방법은 4.7KB, 47KB, 470KB, 4.7MB 등입니다.)

하이퍼링크 형식

하이퍼링크 형식 정의

텍스트 하이퍼링크를 다른 텍스트와 구별해야 한다면 색상이나 밑줄/굵게 하기 등의 서식을 적용해야 합니까?
텍스트 하이퍼링크를 다른 텍스트와 구별해야 한다면 이렇게 해야 합니까? 밑줄/굵게 하기 등의 색상이나 서식을 적용해야 합니까? 하이퍼링크 부분에 일반 텍스트와 다른 색상을 사용하거나 하이퍼링크 텍스트에 밑줄을 긋거나 굵게 표시해야 합니다.

사실상 하이퍼링크는 밑줄이 있는 파란색으로 렌더링되고, 클릭하면 빨간색으로 바뀌며, 방문한 링크는 보라색으로 표시됩니다.
기본 하이퍼링크 동작은 색상 변경은 다음과 같습니다. 처음에는 하이퍼링크가 파란색이고 밑줄이 그어져 있습니다. 클릭하면 방문한 하이퍼링크가 보라색으로 표시됩니다.

대부분의 텍스트를 렌더링하는 가장 읽기 쉬운 방법은 흰색 배경에 검정색이며 텍스트 하이퍼링크를 파란색(#00f)으로 만드는 것이 흰색에서 매우 잘 작동합니다. 일반 검정색 텍스트와 명확하게 구별되지만 읽기에 충분한 시각적 대비를 제공합니다(
#00f). 이렇게 하면 색상의 시각적 대비가 뚜렷해져서 하이퍼링크 내용과 텍스트 내용을 더 쉽게 구별할 수 있고 가독성이 높아집니다.

회색조의 파란색 하이퍼링크: 밑줄 유무

하이퍼링크 색상은 밑줄 유무에 관계없이 파란색 대신 회색일 수 있습니다.


색맹인 사람들에게는 색상만으로 구별이 가능한지 묻는 것이 적절합니다. 위 이미지는 이 페이지의 화면 캡처로, 색상이 없어도 충분한 색조 차이가 있음을 보여줍니다. 하이퍼링크를 명확하게 하기 위해 검정색과 파란색 사이를 사용합니다. 밑줄이 있는 버전이 조금 더 명확하지만 마우스를 올리면 밑줄이 표시되는 것도 비슷한 목적으로 사용됩니다.

또한 색상에만 의존하는 경우도 고려해야 합니다. 구별하기 위해 하이퍼링크 상태를 변경하면 색맹인 분들도 받아들일 수 있을까요? 색상을 식별할 수 있는지 물어보는 것이 가장 좋습니다. 위 사진은 해당 페이지의 스크린샷인데, 하이퍼링크의 색상 변경 효과를 사용하지 않고도 검은색과 파란색만으로 하이퍼링크를 명확하게 식별할 수 있는 것을 알 수 있습니다. 하이퍼링크에 밑줄을 긋는 것은 사용자가 하이퍼링크를 식별하는 데 도움이 되며 마우스가 하이퍼링크 위로 지나갈 때 밑줄이 표시되도록 하면 동일한 효과를 얻을 수 있습니다.

하이프링크에 밑줄을 쳐야 하나요? 하이퍼링크에 밑줄을 쳐야 하나요?


간헐적인 인라인 링크에는 밑줄을 쳐도 괜찮습니다.

자주 사용하지 않는 내장 하이퍼링크에는 밑줄을 그을 수 있습니다.
하이퍼링크의 역할을 강조하기 위해 색상만 사용하는 것보다 링크를 좀 더 돋보이게 합니다.
이 예에서 밑줄은 기사 제목과 부제목 수준을 구분하는 데 효과적입니다.

문단이나 링크 목록에 인라인 링크가 많을 때, 페이지에 링크 집합이 많을 경우 밑줄은 도움이 되지 않는다고 생각합니다.

문단에 있는 경우. , 링크 목록이나 페이지에 하이퍼링크가 너무 많으면 이러한 링크에 밑줄을 쳐도 눈에 띄는 효과가 없습니다.

다음은 원본(밑줄)과 밑줄이 제거된 하이퍼링크 모음의 몇 가지 예입니다.

다음 두 하이퍼링크 세트의 효과를 비교합니다. 다음과 같이 왼쪽 하이퍼링크에는 밑줄이 포함되어 있고 오른쪽 하이퍼링크에는 밑줄이 포함되어 있지 않습니다.

밑줄이 없는 텍스트 블록을 더 빠르고 쉽게 읽을 수 있습니다.



두 번째 예에서는 관련 단어가 더 명확해 보이도록 줄 간격도 조정했습니다.

일관성

일관성

하이퍼링크 형식이 페이지 전체에서 일관되게 작동하는 것이 중요합니다.
하이퍼링크 형식이 페이지 전체에서 일관되게 작동하는 것도 중요합니다.

물론 탐색 모음과 같이 일부 텍스트 링크가 다른 배경에 있는 경우 특수 색상이나 처리를 사용해야 할 수도 있습니다.
물론 하이퍼링크가 내비게이션 바 내부와 같이 다른 배경에 있는 경우 특수 색상과 효과를 사용합니다.

위 스니펫은 가디언 온라인 홈페이지에서 가져온 것입니다.
위 스니펫은 가디언 온라인 홈페이지입니다.

대부분의 링크는 비슷해 보이지만(#036, 주로 밑줄이 그어져 있지 않지만 마우스 포인터를 활성 링크 위로 이동할 때 마우스 포인터를 올리면 여러 가지 매우 다른 스타일이 적용됩니다.
위 하이퍼링크 형식은 기본적으로 동일해 보입니다(글꼴 색상 #036, 하이퍼링크는 기본적으로 밑줄이 표시되지 않으며 마우스가 하이퍼링크 위로 지나갈 때 나타나는 효과가 다릅니다). >

심리적인 효과는 당황스럽습니다. 모든 링크가 유사한 작업을 수행하는지(예: 이 사이트의 다른 페이지로 이동) 또는 예기치 않게 다른 곳으로 이동될 수 있는지 의심하게 됩니다.
심리적인 관점에서 볼 때 이러한 효과 처리는 동시에 사람들을 불안하게 만들 것입니다. 링크 사용됨 이 내용은 모두 사실입니다(다른 페이지 포함). 예상치 못한 곳으로 연결됩니까? 나는 이러한 정신분열적 접근 방식이 사이트 브랜드에 대한 사용자의 이미지를 약화시키는 동시에 사이트의 유용성을 떨어뜨릴 것이라고 믿습니다.

세 번째 예도 두 번째 원칙을 위반합니다. 색상 변경으로 인해 '강조 표시'가 되지 않고 약해지고 눈에 띄지 않게 되기 때문입니다. >모든 하이퍼링크에 서로 다른 효과를 사용할 수는 없습니다. 위의 세 번째 경우는 두 번째 규칙을 위반합니다. 색상 변경에 따라 초점이 흐려지고 전혀 눈에 띄는 역할을 할 수 없기 때문입니다.

결론

결론
전체적으로 업계에서 지배적인 관례는 링크에 #

00f

또는 #00c
(약간 더 어두운) 파란색을 유지하고 링크를 만드는 것 같습니다. 빨간색이고 (선택적으로) 마우스를 올리면 밑줄이 그어집니다. 간단히 말하면 가장 특징적인 하이퍼링크 색상 효과 변경은 다음과 같습니다. #00f 또는 #을 사용합니다. 00c (색상은 이전보다 조금 더 어둡습니다.) 마우스가 지나갈 때 하이퍼링크의 글꼴 색상으로 빨간색을 사용하거나 밑줄을 추가하여 강조 표시합니다.

인라인 하이퍼링크와 그룹 하이퍼링크에 일관되게 적용할 때 최고의 기능 밸런스를 제공할 수 있다고 생각합니다.