사이트를 다칠 수있는 피할 수없는 디자인 결함

이 페이지의 링크에서 서비스에 가입하면 Reeves and Sons Limited가 수수료를 받을 수 있습니다. 우리의 윤리 성명서.

웹은 더 좋아져야만 했습니다. 그것이 약속이었습니다. 그리고 접근성과 사용성 고려 사항에 대한 인식이 높아졌다면 그렇게 되었을 것이라고 생각할 것입니다. 하지만 이상하게도 우리는 25년이 넘었고 일반적으로 상황이 실제로 악화되고 있습니다. 어떻게 그럴 수 있습니까?

교육을 탓할 수는 없습니다. 가치 있는 인터넷 디자인 및 개발의 모든 과정은 좋은 디자인 원칙, 유용성 및 접근성의 기본 사항을 다룹니다. W3C 지침이 이전보다 더 엄격하고 명확하게 정의되었기 때문에 엔지니어링 표준을 탓할 수 없습니다. 기술이 고품질 사이트를 개발하는 데 도움이 되기 때문에 기술을 비난할 수도 없습니다.

아니오, 이 역설에 대한 대답은 실제로 매우 간단합니다. 마케터와 고객의 요구에 디자이너가 힘을 빼앗겼기 때문이다. 그래서 디자이너는 텍스트와 배경 사이에 좋은 대비가 있어야 한다는 것을 알고 있지만 마케팅 담당자가 검은색 대신 "어두운 은색" 텍스트를 사용하는 것이 더 멋질 것이라고 생각하기 때문에 좋은 디자인 원칙을 구현할 수 없습니다. 물론 우리는 "그 씻은 파란색 글꼴이 있어야 합니다. Twitter 사용 "을 표제에 사용하므로"모든 청소년이 우리 사이트를 더 잘 식별 할 수 있습니다. "

"멋지게 보이는 것"에 대한 우려와 다른 사람들이 하는 일을 복사하는 것이 고속, 낮은 대역폭, 좋은 유용성과 같은 실용적인 고려 사항보다 우선합니다. 귀하가 사이트의 모양에 대한 결정을 내려야 하는 고객 중 한 명이라면 이 기사가 도움이 될 것입니다. 또한 다른 유사한 사이트와 똑같지 않고 웹 사이트가 예상되는 방식에 더 잘 맞도록 클라이언트와 협상할 용기가 있는 디자이너를 위한 것입니다. 미래가 이미 도래할 때입니다.

1. 불쌍한 대조

이것은 최근 유행이되었습니다. 지난 25년 동안 우리가 나쁜 대비를 피해야 한다는 반복된 메시지가 우리에게 반복적으로 전달된 것을 고려할 때 그렇게 될 수 있다는 것은 놀라운 일입니다. 이 패션의 선구자는 다음과 같습니다. Twitter 그리고 부트스트랩, 그러나 그것들은 차례로 다른 누군가로부터 영감을 받았을 수 있습니다. 예를 살펴보겠습니다.

위의 조각 중 하나입니다 Twitter의 도움말 페이지. 디자인의 이면에 있는 철학은 더 중요한 부분일수록format이온이 유지될수록 페이지에 더 어둡게 나타납니다. 따라서 페이지의 H1 제목은 검은색 텍스트로 되어 있는데, 이는 매우 중요한 것으로 간주되기 때문입니다.

스크린샷에서는 명확하지 않지만 텍스트의 본문은 실제로는 짙은 회색(완전한 검정색이 아님)입니다. 중요한 것처럼 보이지만 제목만큼 중요하지는 않기 때문입니다.

링크는 표준 파란색 음영이 아니라 "Twitter Blue”는 흰색 배경과 잘 대비되지 않는 매우 옅은 음영입니다.

페이지 아래쪽에 있는 H2 제목은 본문 텍스트보다 더 옅은 회색 음영으로 일부 사람들이 혼란스러워할 것입니다. 머리글은 주의를 산만하게 만들지 않는 한 텍스트의 나머지 부분보다 보기 어렵지 않아야 합니다.

왼쪽 패널 내비게이션 옵션도 옅은 회색과 옅은 파란색 음영으로 표시되며, 다시 이 항목이 중요하지 않게 사라져 주 콘텐츠 영역에서 주의를 분산시키지 않도록 하는 아이디어인 것 같습니다.

마지막으로 가장 창백한 영역은 피드백 영역이며, 이는 가장 중요하지 않은 부분입니다. 하지만 심지어 Twitter 이 사이트보다 더 나은 일을하고 있습니다 :

이 예에서 도출할 수 있는 유일한 논리적 결론은 그들이 당신이 질문에 대한 답을 알기를 원하지 않는다는 것입니다. 표현을 용서한다면 창백함을 넘어선 것입니다.

2. 잘못된 인코딩

이것은 단순히 극도의 게으름의 증상이며 페이지가 렌더링되는 방식을 확인하지도 않습니다. 이 시대에 이런 실수를 저지르는 것은 불가능해 보이지만, 여전히 사람들은 어떻게든 그것을 하고 있습니다. 그들은 심지어 다음 예에서 볼 수 있듯이 잘못된 이유로 그것을 관리하고 있습니다.

인코딩을 UTF-8로 설정하는 것을 잊어버린 일반적인 경우처럼 보이죠? 이 페이지의 인코딩이 UTF-8로 설정되어 있기 때문에 그렇지 않습니다. 사이트 디자이너는 메타 데이터의 모든 아포스트로피를 엔터티 문자 39로 이스케이프 처리하는 극단적인 길이까지 모든 작업을 올바르게 수행했습니다. 심지어 그럴 필요가 없을 수도 있습니다. 디자인에 콘텐츠를 삽입할 때 문제가 발생했습니다. 여기서 분명히 발생한 것은 MS Word 스마트 따옴표가 포함된 잘못 인코딩된 텍스트가 콘텐츠 섹션에 붙여넣어 모든 브라우저에서 잘못 렌더링될 수 있기 때문입니다. 페이지는 UTF-8로 설정되고 콘텐츠는 UTF-8로 인코딩되지 않습니다.

대부분의 사람들은 스마트 아포스트로피가 ''로 렌더링되는 작은 문제를 기꺼이 간과하겠지만, 이는 매우 성가시며, 헤드라인에 실수가 발생하면 더욱 안타깝습니다. 결론은 콘텐츠를 웹에 릴리스할 때 콘텐츠가 올바르게 표시되는지 확인하고 항상 적절한 인코딩(대부분의 경우 UTF-8 또는 UTF-16)을 사용했는지 확인해야 한다는 것입니다. 웹사이트는 주로 첫인상에 관한 것이며 누군가 귀하의 비즈니스에 대해 받는 첫인상이 "엉성하다" 또는 "게으르다"는 것은 정말 좋지 않습니다.

3. 플래시 사용

더 이상 이렇게 할 이유가 없습니다. 플래시는 그 날이 있었지만 그 날은 끝났습니다. 여전히 많은 사이트, 특히 도박 사이트(적절하지 않은 경우)는 여전히 플래시를 사용하고 있습니다. 또한 웹에서 가장 크고 성공적인 일부 사이트는 다양한 상황에서 Flash를 광범위하게 사용합니다. 그래서 그들에게 충분하다면 왜 당신에게도 충분하지 않습니까?

우선 플래시는 막대한 자원을 잡아먹는 자원입니다. 또한 취약점으로 가득 차 있으며 악의적인 해커가 트로이 목마 전달 메커니즘으로 표적이 되었으며 영구 플래시 쿠키, 기타wise 로컬 공유 객체라고 합니다. 이 쿠키는 브라우저의 보안 설정을 우회하며 더 많은 정보를 포함할 수 있습니다.format일반 쿠키보다 이온. 설상가상으로 LSO는 서로 다른 브라우저 간에 데이터를 공유하므로 일반 사용자가 개인 정보를 유지하기가 훨씬 더 어렵습니다.

Flash에 대해 충분히 알고 있는 사용자는 기껏해야 Flash 사용이 게으르거나 시대에 뒤떨어진 것으로 간주할 것입니다. 당신이 신뢰할 수 없다는 것.

Flash에서 수행할 수 있는 모든 작업은 일반 HTML 5에서 수행할 수 있으므로 사용자에게 HTML 5의 기능을 복제하는 방법을 모르거나 비용이 너무 저렴하다는 것을 나타내는 Flash를 계속 사용하는 경우 그렇지 않거나 의도적으로 Flash의 어두운 면을 악용하고 있습니다. Flash 사용을 생각하고 있고 부정직한 의도가 없다면 문제를 일으킬 가치가 없습니다.

4. 자동 재생 비디오

사용자가 일반적으로 참을 수 없는 한 가지가 있다면 사이트에서 비디오 콘텐츠를 제공하는 경우 이를 재생하고 싶어할 것이라는 불쾌한 가정입니다. 뉴스 웹사이트는 특히 이러한 죄를 짓고 있으며, 그들 중 다수는 심지어 자동 재생되는 비디오에 끝없는 재생 목록을 뻔뻔하게 추가하기까지 합니다. YouTube에는 기본적으로 자동 재생 목록이 설정되어 있지만 적어도 첫 번째 동영상은 자동 재생되지 않습니다. 물론 사용자는 자동 재생을 선택해야 하며 선택 해제할 필요는 없습니다.

제한된 대역폭 요금제를 사용하는 사용자, 특히 모바일 사용자 (대부분의 모바일 사용자)는 사이트가 인식하지 못한 채 브라우저에서 비디오를로드하여 재생 한 것에 대해 감사하지 않습니다. 비디오 자동 재생이 적절한 것으로 간주 될 수있는 유일한 시간은 비디오가 매우 작고 (바이트 단위) 자체 포함되어 있고 사용자 경험에 가치를 더하는 경우입니다.

많은 사용자가 이 동작을 성가신 것으로 설명하고 실제로 비활성화하는 방법을 묻는다면 정말 성가신 일임에 틀림없습니다. 그리고 예, Firefox, Chrome 및 Chromium 사용자가 자동 ​​재생을 완전히 비활성화하는 것이 실제로 매우 간단하다는 것을 알고 있습니다. 애초에 악용?

우리가 그곳에서 착취에 대해 이야기한 것을 주목하세요? HTML 5의 제작자가 자동 ​​실행 가능성을 포함하여 잘못한 것이 없기 때문입니다. 사람들이 이와 같이 잘못 사용하는 것을 예상하지 못했을 뿐입니다.

5. 무한 스크롤

이것은 한때 소설가이자 흥미로운 개념으로, 마케팅 담당자가 완전히 납치하여 엔터테인먼트가 아닌 좌절의 원천이되었습니다. 마케팅 담당자는 웹 페이지에서 끝없는 스크롤을 사용하면 더 많은 시간 동안 사람들을 페이지에 유지할 수 있다는 것을 알았습니다.

그러나 다시 한 번 검색 결과는 이야기를 들려줍니다. 이 예제를보십시오 :

보시다시피 일반적인 어조는 무한 스크롤이 짜증난다는 것입니다. 그것은 사용자 경험을 향상시키지 않고 엄청난 사용성 문제를 일으키며 페이지가 커지고 더 많은 콘텐츠를 생성함에 따라 메모리 및 성능 문제로 이어질 수 있습니다. 이것은 특히 사용자가 여러 개의 탭을 열 때, 공급자가 여러 탭의 무한 스크롤 사이트에 풍부한 미디어 콘텐츠를 제공할 때 분명히 문제를 일으킬 것입니다.

6. 필요하지 않을 때 팝언더 또는 팝오버 창 생성

사용자 경험에 추가되지 않는 모든 것은 사용자 경험을 손상시킵니다. 사용자 경험을 떨어뜨리면 분노가 쌓이고 실행 가능한 대안이 있는 경우 사용자는 귀하의 사이트를 피할 것입니다. 그렇기 때문에 TripAdvisor와 같이 매우 안전한 위치에 있는 사이트가 마치 미군이 굶주린 아프간 어린이에게 선전용 테디베어를 던져주는 것처럼 팝언더 창을 아무렇게나 던지는 것입니다. 그러나 곰이 적어도 기쁨을 가져다주는 곳에서 팝업은 성가심을 초래할 뿐입니다.

TripAdvisor의 이 행동에 대한 최악의 점은 사용자가 이미 사이트에 있기 때문에 그들이 하고 있는 일에 아무런 의미가 없다는 것입니다. TripAdvisor가 사용자가 팝언더로 이미 있는 동일한 창을 복제하는 유일한 이유는 다음과 같습니다.

  • Google의 이탈률 분석을 속이기 위해
  • 바운스를하면 다시 생각하게하려고

이들 중 어느 것도 특히 좋은 생각처럼 보이지 않습니다. 물론 이렇게 하는 다른 이유가 있을 수 있지만 존재하는 경우 명확하지 않습니다.

7. 성가신 오버레이

(아직) "International Bash TripAdvisor Day"는 아니지만 불쾌한 웹 페이지 행동의 예를 아낌없이 제공하고 있기 때문에 이를 무시하는 것은 진정으로 선물 말을 찾고 있을 것입니다. 다음은 제가 팝언더 스크린샷을 설정할 때 트립어드바이저가 방금 보여준 것입니다.

당신은 아마도 이것에 대해 왜 그렇게 어리석은지 이미 짐작할 수 있을 것입니다. 내가 이미 그들의 사이트에 있다는 것입니다. 나는 이미 그들의 사이트에서 쇼핑을 고려하고 있습니다. 따라서 이 팝오버는 내가 하는 일에 방해가 되는 것 외에는 아무것도 달성하지 못합니다. 최소한 뉴스레터를 구독하거나 "무료" 전자책을 다운로드하라고 요구하는 유사한 오버레이 중 하나는 아닙니다.

매우 중요한 기능을 제공하는 경우를 제외하고 이러한 기능을 절대 사용해서는 안 됩니다.format사용자에게 이온. 그 예로 브라우저에서 요청한 게임을 플레이하는 방법에 대한 지침이나 보안 또는 개인 정보 보호 경고 메시지를 들 수 있습니다.

그것은 대부분 상식의 문제입니다(마케터가 실패하는 이유일 것입니다)

정말 명백한 사실은 웹에서 자신에게만 이익을 주거나 사용자에게 이익을 제공하지 않으며 어떤 방식 으로든 불편을 주거나 개인 정보를 침해하거나 실제로 비용을 지불한다는 것입니다 (자동 재생의 경우와 같이) 동영상 및 무한 스크롤 웹 사이트)의 경우 사용자가 다시 보내려고합니다. 어쩌면 모든 사용자가 아니지만, 목소리를 많이내는 다수가 충분히 영향을 미치기에 충분할 것입니다.

웹 사이트에 이러한 디자인 결함이있는 경우 이러한 결함을 바로 잡기 위해 즉시 조치를 취해야합니다. 공개 이미지를 손상시키고 사용자를 사이트에서 멀어지게 할 수 있습니다.

헤더 이미지 제공 댄 드라고 미르

보그 단 란 세아

Bogdan은 Inspired Mag의 창립 멤버로서이 기간 동안 거의 6 년의 경험을 축적했습니다. 여가 시간에는 클래식 음악을 공부하고 시각 예술을 탐구하는 것을 좋아합니다. 그는 또한 수정 프로그램에 상당히 집착하고 있습니다. 그는 이미 5를 소유하고 있습니다.

코멘트 0 응답

댓글을 남겨주세요.

귀하의 이메일 주소는 공개되지 않습니다. *표시항목은 꼭 기재해 주세요. *

평점 *

이 사이트는 Akismet을 사용하여 스팸을 줄입니다. 댓글 데이터 처리 방법 알아보기.