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

웹은 더 나아 져야했는데 약속이었습니다. 그리고 접근성과 사용성에 대한 인식이 높아짐에 따라 그렇게 될 것이라고 생각할 것입니다. 그러나 이상하게도, 우리는 25 년이 넘었고, 상황은 실제로 전반적으로 악화되고 있습니다. 어떻게 그렇게 될 수 있습니까?

교육을 비난 할 수 없습니다. 인터넷 디자인 및 개발의 모든 과정은 훌륭한 디자인 원칙, 유용성 및 접근성의 기본 사항을 다룹니다. W3C 가이드 라인이 그 어느 때보 다 엄격하고 명확하게 정의되어 있기 때문에 엔지니어링 표준에 대한 책임이 없습니다. 기술이 고품질의 사이트 개발을 더 많이 지원하기 때문에 기술에 대한 책임도 없습니다.

아닙니다.이 역설에 대한 대답은 실제로 매우 간단합니다. 디자이너가 마케팅 담당자와 고객의 요구에 따라 전력을 제거했기 때문입니다. 따라서 디자이너는 텍스트와 배경 사이에 명암이 있어야한다는 것을 알고 있지만 마케팅 담당자는 검은 색 대신 "진한 은색"텍스트를 사용하는 것이 더 멋지게 보일 것이라고 생각하기 때문에 좋은 디자인 원칙을 구현할 수 없습니다. 물론 우리는“ Twitter 제목에 사용됩니다. ""모든 젊은이들이 사이트를 더 잘 식별 할 수 있습니다. "

“모두보기”에 대한 관심과 다른 사람들이하는 일을 모두 복사하는 것은 고속, 저 대역폭 및 우수한 유용성과 같은 실용적인 고려 사항보다 우선합니다. 사이트의 모양을 결정해야하는 고객 중 하나 인 경우이 도움말이 도움이됩니다. 또한 고객과 협상 할 용기가있는 디자이너들도 웹 사이트를 다른 사이트와 비슷하게 만드는 대신 웹 사이트가 어떻게 될지 더 잘 알 수 있도록하기 위해 노력하고 있습니다. 미래가 이미 도착할 때입니다.

1. 불쌍한 대조

최근에는 유행이되었습니다. 지난 25 년 동안 반복되는 메시지가 반복해서 우리에게 집으로 돌아 왔기 때문에 대조가 좋지 않은 것을 피해야한다는 것이 놀라운 일입니다. 이 패션의 선구자는 Twitter 부트 스트랩이지만 다른 사람에게서 영감을 얻었을 수도 있습니다. 예를 살펴 보겠습니다.

위의 조각 중 하나입니다 Twitter의 도움말 페이지 디자인의 철학은 정보가 중요할수록 정보가 더 어두워지는 것 같습니다. 따라서 페이지의 H1 제목은 검은 색 텍스트로 표시됩니다. 이는 매우 중요한 것으로 간주되기 때문입니다.

스크린 샷에서는 명확하지 않지만 텍스트 본문은 실제로 진한 회색 (풀 블랙이 아님)으로 보이지만 제목만큼 중요하지는 않습니다.

링크는 파란색의 표준 음영이 아니며 'Twitter 파란색”은 흰색 배경과 잘 대조되지 않는 매우 창백한 그늘입니다.

페이지 아래쪽으로 향하는 H2 제목은 본문보다 더 연한 회색 음영으로 일부 사람들은 혼란 스러울 것입니다. 제목이 주요 산만하지 않는 한 제목의 나머지 부분보다 더보기 어려워서는 안됩니다 (이 경우 제목이 전혀 필요한지 여부에 대해 의문을 제기해야 함).

왼쪽 패널 탐색 옵션은 옅은 회색과 옅은 파란색 음영으로 표시되며, 다시 말해서 이러한 항목이 중요하지 않게 희미 해져 주 콘텐츠 영역에서 방해받지 않는 것으로 보입니다.

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

이 예제에서 도출 할 수있는 유일한 논리적 결론은 질문에 대한 답변을 원하지 않는다는 것입니다. 창백한 너머로 표현을 용서한다면 그것은 그렇습니다.

2. 잘못된 인코딩

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

인코딩을 UTF-8로 설정하는 것을 잊어 버린 사람의 일반적인 경우처럼 보입니다. 그렇지 않은 경우를 제외하고이 페이지의 인코딩은 UTF-8로 설정되어 있기 때문입니다. 사이트 디자이너는 메타 데이터의 모든 아포스트로피를 엔터티 문자 39로 이스케이프 처리하는 데까지 걸리는 시간이 길어 지더라도 모든 것을 올바르게 수행했습니다. 여기서 분명히 발생했던 것은 MS Word 스마트 따옴표를 포함하는 잘못 인코딩 된 텍스트가 콘텐츠 섹션에 붙여져 있으므로 모든 브라우저에서 잘못 렌더링되도록하기 때문입니다. 페이지가 UTF-8로 설정되고 내용이 UTF-8로 인코딩되지 않았습니다.

대부분의 사람들은 스마트 아포스트로피의 작은 문제를 간과하려고하지만, 매우 성가 시며, 헤드 라인에서 실수가 발생하면 더욱 악화됩니다. 결론은 웹에 컨텐츠를 배포 할 때 컨텐츠가 올바르게 표시되는지 확인해야하며 항상 적절한 인코딩을 사용했는지 확인해야합니다 (대부분의 경우 UTF-8 또는 UTF-16 임). 웹 사이트는 주로 첫인상에 관한 것이며, 누군가 귀하의 비즈니스에 대한 첫인상이 "조잡한"또는 "게으른"인 경우에는 좋지 않습니다.

3. 플래시 사용

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

우선 Flash는 방대한 리소스 호그입니다. 또한 취약점으로 가득 차 있으며 악의적 인 해커가 트로이 목마 전달 메커니즘으로 대상으로 삼았으며, 로컬 공유 객체라고도 알려진 영구 플래시 쿠키의 통합으로 인해 본질적으로 개인 정보 위험이 있습니다. 이러한 쿠키는 브라우저의 보안 설정을 무시하며 일반 쿠키보다 더 많은 정보를 포함 할 수 있습니다. 게다가 LSO는 서로 다른 브라우저간에 데이터를 공유하므로 일반 사용자가 개인 정보를 유지하기가 훨씬 더 어렵습니다.

기껏해야 Flash에 대해 충분히 알고있는 사용자는 Flash 사용이 게 으르거나 구식이라고 생각하지만 사용자가 비즈니스에 보안 의식이 부족하거나 개인 정보 보호 문제를 무시하거나 여전히 더 나쁘게 인식 할 수 있습니다. 당신이 신뢰할 수 없다는 것을.

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

4. 자동 재생 비디오

사용자가 보편적으로 견딜 수없는 것이 있다면, 사이트에서 비디오 콘텐츠를 제공하는 경우 재생하기를 원한다는 의심스러운 가정입니다. 뉴스 웹 사이트는 특히이 죄에 대해 유죄를 선고받으며, 그들 중 다수는 자동 재생중인 비디오에 끝없는 재생 목록을 부끄럽게 추가하는 한도까지 있습니다. YouTube에는 기본적으로 자동 재생 목록이 켜져 있지만 적어도 첫 번째 동영상은 자동 재생되지 않습니다. 물론 사용자는 자동 재생을 선택해야하고, 선택 해제 할 필요는 없습니다.

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

너무 많은 사용자가이 동작을 성가신 것으로 묘사하고 실제로 비활성화하는 방법을 묻는다면 실제로 성가신 것이어야합니다. 예, Firefox, Chrome 및 Chromium 사용자가 자동 ​​재생을 완전히 사용 중지하는 것이 실제로는 매우 간단하다는 것을 알고 있습니다. 처음에 악용?

우리가 그곳에서 착취에 대해 이야기했음을 주목하십시오. HTML 5 제작자는 자동 실행 기능을 포함하여 아무런 문제가 없었기 때문입니다. 사람들이 이와 같이 잘못 사용하는 것을 기대하지 않았을뿐입니다.

5. 무한 스크롤

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

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

보시다시피, 일반적인 소리는 무한 스크롤이 성가신 것입니다. 사용자 경험을 향상시키지 않고, 대규모 사용성 문제를 일으키며, 페이지가 커지고 더 많은 콘텐츠를 생성 할 때 메모리 및 성능 문제를 일으킬 수 있습니다. 이는 특히 사용자가 여러 탭을 열 때와 공급자가 여러 탭의 무한 스크롤 사이트에서 미디어가 풍부한 콘텐츠를 제공 할 때 문제가 발생할 수 있습니다.

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

사용자 경험에 추가되지 않은 것은 그것을 방해합니다. 사용자 경험에서 벗어나면 분노가 커지고, 대안이 있다면 사용자는 사이트를 피할 수 있습니다. 그렇기 때문에 트립 어드바이저가 테러가 굶주린 아프간 어린이들에게 선전을하는 것처럼 트립 어드바이저 창처럼 우연히 안전한 곳에있는 사이트가 이유입니다. 그러나 곰이 적어도 기쁨을 가져다 줄 때 팝업은 귀찮게합니다.

트립 어드바이저의이 동작에 대한 최악의 사실은 사용자가 이미 사이트에 있기 때문에 수행중인 작업에 아무런 의미가 없다는 것입니다. 트립 어드바이저가 사용자와 이미 동일한 창을 복제하는 유일한 상상할 수있는 이유는 다음과 같습니다.

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

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

7. 성가신 오버레이

“국제 배쉬 트립 어드바이저 데이”(아직)는 아니지만 독창적 인 웹 페이지 동작의 예를 제공하기 때문에이를 무시하기 위해 입에서 선물 말을 찾고있을 것입니다. 그래서 트립 어드바이저가 그 팝 언더 스크린 샷을 설정할 때 얼마 전에 방금 보여준 내용은 다음과 같습니다

아마도 이것에 대해 너무 어리석은 것을 이미 추측 할 수 있습니다. 내가 이미 그들의 사이트에 있다는 것입니다. 나는 이미 그들의 사이트에서 쇼핑을 고려하고 있습니다. 그래서이 팝 오버는 내가 그렇게하는 것 외에는 아무것도 달성하지 못하고 있습니다. 적어도 뉴스 레터를 구독하거나“무료”전자 책을 다운로드하라고 간청하는 비슷한 오버레이가 아닙니다.

사용자에게 매우 중요한 정보를 제공 할 때를 제외하고는 절대로 이러한 것을 사용해서는 안됩니다. 브라우저에서 요청한 게임을 플레이하는 방법, 보안 또는 개인 정보 경고 메시지에 대한 지침이 그 예입니다.

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

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

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

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

보그 단 란 세아

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