CSS/Javascript 드롭 다운 메뉴에 지정된 지연이 없으므로 "대각선 문제"가 발생합니다 ( Jakob Nielsen 사용)
확인란에 클릭 가능한 레이블 및 기타 양식 필드를 넣지 마십시오.
너무 쉽게 할 수 있습니다 . HTML <label> 태그를 참조하십시오.
잘못된 폼 검증 디자인.
유효성 검사에 실패하고 응용 프로그램이 다음 중 하나를 수행하는 양식을 제출하면 증오입니다.
- 양식을 다시로드 할 때 필드가 공백입니다. 내 iPhone에서 웹 응용 프로그램에 가입하는 동안 이런 일이 발생했습니다. 8 개가 넘는 필드가 있었기 때문에 나는 왕에게 화가났다.
- 양식 제출 당 하나의 유효성 검사 오류 만 표시합니다.
- 양식 맨 위에 오류 요약이 표시되지 않습니다.
- 유효하지 않은 필드 입력을 시각적으로 강조 표시하지 않습니다.
사용자는 브라우저 또는 마우스에서 뒤로 및 앞으로 버튼을 사용합니다. 그리고 그들은 새로 고침 버튼도 사용합니다. 따라서 웹 사이트의 양식 게시물에주의하십시오.
아무도 이것을 좋아하지 않습니다 ...
이 대화 상자는 데이터가 게시 된 페이지를 새로 고칠 때 나타납니다. 다행스럽게도 가능하면 method = "get" 을 사용하거나 method = "post"다음에 필요한 경우 리디렉션을 사용하면 피할 수 있습니다. 길이나 보안상의 이유로 게시물을 사용해야하는 경우이 메시지를 방지하려면 리디렉션이 양식 작업과 다른 URL로 이동해야합니다.
JavaScript 링크.javascript:loadPage(34576)에 대한 새 탭을 마우스 가운데 버튼으로 클릭하여 열 수 없습니다.
필요하지 않은 경우 등록 양식으로 필수 개인 정보를 요구합니다.
예 :
- 이 정보가 쓸모없는 웹 사이트에 주소를 묻는 것
- "실제"이름을 입력하도록 강요
- ...
이 정보를 필수로 만드는 것은 "더미", "[email protected]"등으로 가득 찬 오염 된 데이터베이스를 얻는 가장 좋은 방법입니다. 대부분의 사람들은 실제로 필요하지 않을 때 그런 종류의 정보를 제공하지 않기 때문입니다.
또한이 정보를 수정할 수없는 것은 실제로 나쁜 설계입니다.
앵커의 target = "_ blank"은 가장 일반적이며 내가 가장 싫어하는 것입니다. 그러나 내 의견으로는 의미가있는 경우가 있습니다.
다음은 웹 디자인에 대한 상위 10 가지 실수 목록입니다. http://www.useit.com/alertbox/9605.html
back button의 기능이 비활성화되거나 사용자가 기대 한 것과 다른 경우 사용자 정의 대화 상자/라이트 박스/iframe을 사용하는 응용 프로그램에서 이것이 많이 보입니다.
"비밀번호를 잊으셨습니까?" 링크를 클릭 한 다음 클릭하면 암호를 보내드립니다 in clear1 내가 찾은 후에 친애하는 Jeff Atwood는 " 비밀번호를 잘못 저장했을 것입니다 "
1 분명히이 부분은 프로그래밍 문제 에 가깝지만 유용성 문제라고 생각합니다.
확인란을 라디오 버튼으로 사용하거나 그 반대로 사용.
계정을 닫을 곳이나 계정을 닫을 곳을 찾기가 어렵습니다.
이상적으로는 "계정"섹션 또는 이와 유사한 단어를 원하고 해당 페이지에서 원하는 다른 모든 항목과 별도로 "내 계정 닫기"라는 레이블이 지정된 링크 또는 단추를 원합니다. 사용자에게 떠나는 이유를 묻는 페이지 또는 피드백을 제공하도록 초대하는 페이지를 따라갈 수 있지만 실제 "내 계정 닫기"(또는 삭제, 제거 등) 클릭 유도 문안과 비교하여 우선 순위가 낮아야합니다. .
매우 엄격한 유효성 검사 필드 예를 들어, 우편 번호를 입력했는데 "V5X4O4"는 작동하지만 "V5X 4O4"는 작동하지 않습니다.
텍스트 레이블이나 제목이없는 아이콘 (호버링 여부).
제목이 잘 리면 호버에 전체 제목이 포함 된 툴팁이 표시되어야한다고 생각합니다.
광고 나 홍보 자료를 위해 최종 사용자로부터 중요한 버튼을 난독 처리하는 경우 Paypal의 "계정없이 계속"버튼을 생각하십시오.
- 허가없이 오디오가 완성됩니다! Lol-또한 음소거 버튼이 없습니다.
JavaScript가 비활성화되어 있어도 사이트 성능이 저하되지 않습니다.
질문은 너무 일반적이며 실제로 더 많은 토론입니다.
반복해서 본 한 가지를 기여할 수 있습니다.
"모두 지우기"버튼이있는 양식
- 그중 일부는 "제출"과 "모두 지우기"버튼을 동일하게 디자인하여 동일한 가중치를 부여합니다.
- "clear"가 왼쪽에 있고 "submit"이 오른쪽에있는 예를 보았습니다 (지금 특정 링크를 염두에 두지 마십시오 ...). 마지막 필드를 떠날 때 커서에 가장 가까운 버튼.
"지우기"버튼에 대한 이유는 전혀 보이지 않지만, 절대적으로 고집한다면 매우 미묘한 링크를 사용하여 사용자에게 간단하고 명백한 행동을 허용하십시오.
실제로 등록 할 필요가없는 몇 가지 기본 작업을 수행하기 위해 등록해야합니다. 또는 "원 클릭"등록 방법을 허용하십시오.
사용자는 결정할 권리가 있어야합니다. 나는 많은 웹 사이트에서 많은 "일회용"계정으로 끝납니다!
필요하지 않은 몇 가지 예 :
- 파일 다운로드 (샘플 파일을 다운로드 할 수 있도록 등록하는 "코드"웹 사이트 수)?
- 검색 (예, 일부 포럼은 등록되지 않은 사용자 검색을 비활성화합니다)
- 기사에 액세스 (액세스가 무료 인 경우)
- ...
플로팅 상태 표시 줄이있는 사이트
Meebo Bar 와 같은. 이것들은 눈에 띄지 않으며 유용한 기능을 거의 제공하지 않습니다. 그들은 불필요한 공간을 차지하고 산만 풍선을 팝업합니다.
'창의적'이며 검색 창을 탭/링크/등 뒤에 넣습니다. 검색을 제공하는 경우 검색 할 필요없이 상자를 준비하십시오!
내 가장 큰 애완 동물 친구는 한 가지 또는 여러 가지 이메일 주소의 더하기 부호 를 올바르게 지원하지 않는 사이트입니다. 많은 경우 웹 사이트는 '@'앞에 '+'가 포함 된 이메일 주소를 확인하지 않습니다. 최악의 경우는 사이트가 주소를 받아들이지 만 데이터를 올바르게 이스케이프 및/또는 이스케이프 처리하지 않고 공백이 있거나 '+'의 양쪽이 함께 박힌 주소로 이메일을 보내려고하는 경우입니다. .
PHP로 작성된이 무료 유효성 검사기 는 모든 RFC 및 관련 정오표를 따릅니다.
많은 사이트에서 방문 링크에 대해 다른 색상을 사용하지 않습니다.
야콥 닐슨 : 방문 링크의 색상 변경
보안 HTTPS 연결에서 실행되지만 HTTP 연결에서 컨텐츠를로드하는 웹 애플리케이션. 한편으로는 이것은 완전히 괜찮지 만 IE 특히 (일반적으로 내가 아닌)) 사용자에게는 보안 경고가 어색하고 사용자에게 혼란 스럽습니다 ...
모든 페이지에서 해고하는 것은 매우 어려울뿐만 아니라 표현이 어색하고 IE (6 & 7)와 IE8 +의 버튼 동작이 다릅니다.
이전 IE 대화 상자 :
새로운 IE 대화 상자 :
따라서 사용자가 "전체 페이지를로드"하고 싶은 경우 (예 : "이동"버튼을 찾고있는 경우) 기본 설정입니다. Yes IE6 및 IE7에서는 기본이 아닙니다. No IE8 +에서.
참고 : 대화 상자의 목적과 Microsoft가 왜 변경 했는지도 개발자에게 잘 알고 있지만 최종 사용자에게는 특히 IE8에서 혼동됩니다. 최종 사용자에게는 "권한", "확인"등을 묻는 대화 상자가 표시되며 대화 상자를 읽지 않기 때문에 "확인"또는 "예"옵션을 클릭해야합니다. 사용자는 반드시 읽어야한다고 주장 할 수 있지만, 개발자가 콘텐츠를 전혀 피할 수 없다면 혼합 콘텐츠가 없는지 확인하는 것이 더 쉽습니다.
로그 아웃 링크를 검색해야합니다. 페이지에 로그온하고 일부는 완료되면 로그 아웃 버튼 또는 링크를 검색해야합니다.
최근에 나는 사용성 문제를 고려하지 않은 것을 발견했습니다.
작업을 수행 할 수 있도록 마우스를 가져갑니다. 예를 들어 Twitter.com에서 트윗을 가리키면 리트 윗 및 회신 명령이 표시됩니다.
터치 기반 장치에서는 전혀 작동하지 않습니다. 호버가 없습니다!
내 또 다른 애완 동물은 새 탭에서 외부 링크를 열지 않는 웹 사이트입니다. 봐봐, 난 나무에서 탐색 중이 야. 나는 모든 도메인이 브랜치를 나타낼 것으로 기대합니다. 완료되면 탭을 닫을 것입니다. 나는 확실히 '뒤로'를 10 번 클릭하여 지점을 여행하고 싶지 않습니다.
사용자가 원하는 것을 숨기고 대신 원하는 것을 제공하십시오.
고객 지원이 그 예입니다. 전화 번호/메일 등으로 큰 뚱뚱한 상자를 나열하는 대신, 일부 회사는 도움을 받기위한 수단으로 FAQ)를 표시하고 해당 페이지에 연락처 정보가 없습니다.
스크롤 할 때 화면의 양쪽에서 "떠 다니는"메뉴 구조가있는 사이트가 있습니다 왜 그런 짓을했는지 알 수 있지만, 종종 매우 산만하고 더 자주 디자이너가 분명히 바라던 "매끄럽다".
내가 참조하는 예는 다음과 같습니다. http://www.deluxe-menu.com/floatable-menu-sample.html
승인 된 답변을 두 번 표시하는 품질 보증 사이트.
Aza Raskin의 기사 목록에는 "실행 취소를 의미 할 때 경고를 사용하지 마십시오"라는 기사가 있습니다.
http://www.alistapart.com/articles/neveruseawarning/
사용자는 "경고"팝업을 무시하거나 싫어하는 경향이 있지만 사용자에게 "실행 취소"할 수있는 기회를 제공하는 것이 훨씬 사용자 친화적입니다.
보안 문자
요즘 꽤 인기가 있지만, 특히 모르는 단어를 인식하지 못하는 (또는 키보드에 ýáěíč와 같은 특수 문자가없는) 사람들의 경우, 접근성 문제로 간주됩니다.
개인적으로, 나는이 기능을 제공하기 위해 간단한 합리적인 질문을 사용합니다
example : 11 번 뒤에 오는 다음 정수를 써주세요
많은 CPU와 메모리를 사용하는 사이트
나는 일반적으로 다양한 메일 링리스트의 프로그래밍 질문/답변으로 많은 탭을 열었고 많은 사이트에서 자바 스크립트가 많이 진행 중입니다 (애드 블록 설치가 도움이되었지만 여전히 무거운 사이트가 있습니다). Chrome 사용하면 마지막으로 어떤 탭을 일으키는 지 알 수 있습니다.
새롭게 개선 된 Google 이미지 검색은 CPU를 많이 사용하고 수백 메가 바이트를 차지합니다. 많은 자원이 배고프다.
마우스 커서를 올려 놓으면 페이지에 색상이 바뀌는 정적 요소가 있지만 클릭하면 아무 것도하지 않습니다. 같은 리그에서 : 클릭 가능한 영역이 텍스트로 제한되는 하이퍼 링크 또는 버튼.
루트 URI에서 하위 디렉토리 또는 하위 도메인으로 리디렉션 (www를 제거/추가하지 않음).